From fb67cafde7792c1bd146401be90fadb49ad5c715 Mon Sep 17 00:00:00 2001
From: Anbarasu <anbarasun123@gmail.com>
Date: Tue, 14 May 2024 11:47:08 +0530
Subject: [PATCH] feat: remove calendar top bar (#8379)

* feat: remove calendar top bar

* fix: remove debug logs

* fix: update styles

* fix: update styles

* fix: posthog telementry

* fix: calendar tests

* fix: updates ui

* test: reorder options

* fix: month view - use local time with timezone

* fix: update styles and move components fix: tests

* fix: update styles and move components

* fix: update styles

* test: fix tests

* fix: update toolbar styles

* fix: failing tests

* fix: cmd f search shortcut

* fix: change side menu sizes

* fix: calendar test corrections

* fix(nc-gui): update size logic

* fix(nc-gui): update styles

* fix(nc-gui): update some more styles

* fix(nc-gui): update toolbar styles

* fix(nc-gui): update select component

* fix: update styles

* fix: calendar test

* fix: ux changes

* fix: final changes

* fix: calendar tests
---
 packages/nc-gui/assets/style.scss             |   3 +-
 packages/nc-gui/components/cmd-k/index.vue    |   4 +-
 packages/nc-gui/components/cmd-l/index.vue    |   2 +-
 .../dashboard/TreeView/CreateViewBtn.vue      |   2 +-
 .../dashboard/TreeView/ViewsNode.vue          |   2 +-
 packages/nc-gui/components/dlg/ViewCreate.vue |  64 ++++--
 packages/nc-gui/components/dlg/ViewDelete.vue |   2 +-
 .../nc-gui/components/nc/DateWeekSelector.vue |  67 +++---
 packages/nc-gui/components/nc/Divider.vue     |  10 +-
 packages/nc-gui/components/nc/Modal.vue       |   2 +-
 .../components/nc/MonthYearSelector.vue       |  57 +++--
 packages/nc-gui/components/nc/Select.vue      |   2 +-
 .../nc-gui/components/smartsheet/Toolbar.vue  |  62 ++---
 .../smartsheet/calendar/DayView/DateField.vue |   7 +-
 .../calendar/DayView/DateTimeField.vue        |   9 +-
 .../smartsheet/calendar/MonthView.vue         |  34 ++-
 .../smartsheet/calendar/SideMenu.vue          | 212 +++++++++++++-----
 .../calendar/WeekView/DateField.vue           |   7 +-
 .../calendar/WeekView/DateTimeField.vue       |  18 +-
 .../smartsheet/calendar/YearView.vue          |  28 ++-
 .../components/smartsheet/calendar/index.vue  | 158 +------------
 .../toolbar/Calendar/ActiveView.vue           |  11 +
 .../smartsheet/toolbar/Calendar/Header.vue    | 126 +++++++++++
 .../{CalendarMode.vue => Calendar/Mode.vue}   |  69 +++---
 .../{CalendarRange.vue => Calendar/Range.vue} |  64 ++++--
 .../smartsheet/toolbar/Calendar/Today.vue     |  39 ++++
 .../smartsheet/toolbar/ColumnFilterMenu.vue   |  13 +-
 .../smartsheet/toolbar/FieldsMenu.vue         |  40 ++--
 .../smartsheet/toolbar/GroupByMenu.vue        |  21 +-
 .../smartsheet/toolbar/RowHeight.vue          |  12 +-
 .../smartsheet/toolbar/SearchData.vue         |   4 +-
 .../smartsheet/toolbar/SortListMenu.vue       |  31 ++-
 .../smartsheet/toolbar/StackedBy.vue          |  10 +-
 .../smartsheet/topbar/SelectMode.vue          |   4 +-
 .../nc-gui/components/tabs/Smartsheet.vue     |   2 +-
 .../composables/useCalendarViewStore.ts       |  75 ++++---
 packages/nc-gui/composables/useViewColumns.ts |   1 +
 packages/nc-gui/lang/en.json                  |   3 +-
 packages/nc-gui/utils/iconUtils.ts            |   3 +-
 packages/nc-gui/windi.config.ts               |   1 +
 .../Dashboard/Calendar/CalendarSideMenu.ts    |  30 +++
 .../Dashboard/Calendar/CalendarTopBar.ts      |  63 ------
 .../Calendar/CalendarWeekDateTime.ts          |  11 +-
 .../pages/Dashboard/Calendar/CalendarYear.ts  |   1 -
 .../pages/Dashboard/Calendar/index.ts         |   8 +-
 .../pages/Dashboard/ViewSidebar/index.ts      |   2 +-
 .../common/Toolbar/CalendarViewMode.ts        |   5 +-
 .../pages/Dashboard/common/Toolbar/index.ts   |  17 ++
 .../db/general/toolbarOperations.spec.ts      |   2 +-
 .../tests/db/views/viewCalendar.spec.ts       |  70 +++---
 50 files changed, 914 insertions(+), 576 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/toolbar/Calendar/ActiveView.vue
 create mode 100644 packages/nc-gui/components/smartsheet/toolbar/Calendar/Header.vue
 rename packages/nc-gui/components/smartsheet/toolbar/{CalendarMode.vue => Calendar/Mode.vue} (52%)
 rename packages/nc-gui/components/smartsheet/toolbar/{CalendarRange.vue => Calendar/Range.vue} (76%)
 create mode 100644 packages/nc-gui/components/smartsheet/toolbar/Calendar/Today.vue
 delete mode 100644 tests/playwright/pages/Dashboard/Calendar/CalendarTopBar.ts

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index d2d59b0c02..3f73e08ba7 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -11,6 +11,7 @@ body {
 }
 
 :root {
+  --toolbar-height: 2.25rem;
   --topbar-height: 3.1rem;
   --sidebar-bottom-height: 8.5rem;
   --new-header-height: 3.5rem;
@@ -515,7 +516,7 @@ a {
 }
 
 .nc-toolbar-btn {
-  @apply !shadow-none rounded hover:(ring-1 ring-gray-200 ring-opacity-100 bg-gray-100 !text-gray-800) focus:(ring-1 ring-gray-300 ring-opacity-100 !text-gray-800 bg-gray-100) text-gray-600 text-xs font-medium px-2 border-0;
+  @apply !shadow-none rounded hover:(bg-gray-50 !text-gray-800) focus:(!text-gray-800 bg-gray-50) text-gray-600 text-xs font-medium px-2 border-0;
 }
 .nc-toolbar-btn[disabled] {
   @apply !text-gray-400 !cursor-not-allowed !hover:ring-0;
diff --git a/packages/nc-gui/components/cmd-k/index.vue b/packages/nc-gui/components/cmd-k/index.vue
index 526d404858..3f01e42dde 100644
--- a/packages/nc-gui/components/cmd-k/index.vue
+++ b/packages/nc-gui/components/cmd-k/index.vue
@@ -427,14 +427,14 @@ defineExpose({
                       <component
                         :is="(iconMap as any)[act.icon]"
                         v-if="act.icon && typeof act.icon === 'string' && (iconMap as any)[act.icon]"
-                        class="cmdk-action-icon"
                         :class="{
                           '!text-blue-500': act.icon === 'grid',
                           '!text-purple-500': act.icon === 'form',
                           '!text-[#FF9052]': act.icon === 'kanban',
                           '!text-pink-500': act.icon === 'gallery',
-                          '!text-maroon-500': act.icon === 'calendar',
+                          '!text-maroon-500 w-4 h-4': act.icon === 'calendar',
                         }"
+                        class="cmdk-action-icon"
                       />
                       <div v-else-if="act.icon" class="cmdk-action-icon max-w-4 flex items-center justify-center">
                         <LazyGeneralEmojiPicker class="!text-sm !h-4 !w-4" size="small" :emoji="act.icon" readonly />
diff --git a/packages/nc-gui/components/cmd-l/index.vue b/packages/nc-gui/components/cmd-l/index.vue
index 5b89e29d52..51669af838 100644
--- a/packages/nc-gui/components/cmd-l/index.vue
+++ b/packages/nc-gui/components/cmd-l/index.vue
@@ -206,7 +206,7 @@ onMounted(() => {
               <div class="cmdk-action-content">
                 <div class="flex w-1/2 items-center">
                   <div class="flex gap-2">
-                    <GeneralViewIcon :meta="{ type: cmdOption.viewType }" class="mt-0.5" />
+                    <GeneralViewIcon :meta="{ type: cmdOption.viewType }" class="mt-0.5 w-4 !min-h-4" />
                     <a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg">
                       <template #title>
                         {{ cmdOption.viewName }}
diff --git a/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
index 46ed56456c..35d3fefbbd 100644
--- a/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
@@ -158,7 +158,7 @@ async function onOpenModal({
         <NcMenuItem data-testid="sidebar-view-create-calendar" @click="onOpenModal({ type: ViewTypes.CALENDAR })">
           <div class="item">
             <div class="item-inner">
-              <GeneralViewIcon :meta="{ type: ViewTypes.CALENDAR }" />
+              <GeneralViewIcon :meta="{ type: ViewTypes.CALENDAR }" class="!w-4 !h-4" />
               <div>{{ $t('objects.viewType.calendar') }}</div>
             </div>
 
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index 944cb25c1b..45a5f1d975 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -234,7 +234,7 @@ watch(isDropdownOpen, async () => {
           @emoji-selected="emits('selectIcon', $event)"
         >
           <template #default>
-            <GeneralViewIcon :meta="props.view" class="nc-view-icon !text-[16px]"></GeneralViewIcon>
+            <GeneralViewIcon :meta="props.view" class="nc-view-icon w-4 !text-[16px]"></GeneralViewIcon>
           </template>
         </LazyGeneralEmojiPicker>
       </div>
diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index 945fda5061..9b22e0173f 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -137,7 +137,6 @@ function init() {
   if (repeatCount) {
     form.title = `${form.title}-${repeatCount}`
   }
-
   if (selectedViewId.value) {
     form.copy_from_id = selectedViewId?.value
   }
@@ -320,11 +319,11 @@ onMounted(async () => {
 <template>
   <NcModal
     v-model:visible="vModel"
-    :size="[ViewTypes.KANBAN, ViewTypes.MAP, ViewTypes.CALENDAR].includes(form.type) ? 'small' : 'small'"
+    :size="[ViewTypes.KANBAN, ViewTypes.MAP, ViewTypes.CALENDAR].includes(form.type) ? 'medium' : 'small'"
   >
     <template #header>
       <div class="flex w-full flex-row justify-between items-center">
-        <div class="flex gap-x-1.5 items-center">
+        <div class="flex font-bold text-base gap-x-3 items-center">
           <GeneralViewIcon :meta="{ type: form.type }" class="nc-view-icon !text-xl" />
           <template v-if="form.type === ViewTypes.GRID">
             <template v-if="form.copy_from_id">
@@ -377,7 +376,7 @@ onMounted(async () => {
         </div>
         <a
           v-if="!form.copy_from_id"
-          class="text-sm !text-gray-600 !hover:text-gray-600"
+          class="text-sm !text-gray-600 !font-default !hover:text-gray-600"
           :href="`https://docs.nocodb.com/views/view-types/${typeAlias}`"
           target="_blank"
         >
@@ -434,7 +433,12 @@ onMounted(async () => {
             <span>
               {{ $t('labels.organiseBy') }}
             </span>
-            <NcSelect v-model:value="range.fk_from_column_id" :disabled="isMetaLoading" :loading="isMetaLoading">
+            <NcSelect
+              v-model:value="range.fk_from_column_id"
+              :disabled="isMetaLoading"
+              :loading="isMetaLoading"
+              class="nc-from-select"
+            >
               <a-select-option
                 v-for="(option, id) in [...viewSelectFieldOptions!].filter((f) => {
                   // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
@@ -444,14 +448,24 @@ onMounted(async () => {
                   return firstRange?.uidt === f.uidt
                 })"
                 :key="id"
+                class="w-40"
                 :value="option.value"
               >
-                <div class="flex items-center">
-                  <SmartsheetHeaderIcon :column="option" />
-                  <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
-                    <template #title>{{ option.label }}</template>
-                    {{ option.label }}
-                  </NcTooltip>
+                <div class="flex w-full gap-2 justify-between items-center">
+                  <div class="flex gap-2 items-center">
+                    <SmartsheetHeaderIcon :column="option" />
+                    <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
+                      <template #title>{{ option.label }}</template>
+                      {{ option.label }}
+                    </NcTooltip>
+                  </div>
+                  <div class="flex-1" />
+                  <component
+                    :is="iconMap.check"
+                    v-if="option.value === range.fk_from_column_id"
+                    id="nc-selected-item-icon"
+                    class="text-primary min-w-4 h-4"
+                  />
                 </div>
               </a-select-option>
             </NcSelect>
@@ -473,8 +487,8 @@ onMounted(async () => {
                   v-model:value="range.fk_to_column_id"
                   :disabled="isMetaLoading"
                   :loading="isMetaLoading"
-                  :placeholder="$t('placeholder.notSelected')"
-                  class="!rounded-r-none nc-to-select"
+                  :placeholder="$t('placenc-to-seleholder.notSelected')"
+                  class="!rounded-r-none ct"
                 >
                   <a-select-option
                     v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
@@ -523,10 +537,12 @@ onMounted(async () => {
         </template>
       </a-form>
       <div v-else-if="!isNecessaryColumnsPresent" class="flex flex-row p-4 border-gray-200 border-1 gap-x-4 rounded-lg w-full">
-        <GeneralIcon class="!text-5xl text-orange-500" icon="warning" />
-        <div class="text-gray-500">
-          <h2 class="font-semibold text-sm text-gray-800">Suitable fields not present</h2>
-          {{ errorMessages[form.type] }}
+        <div class="text-gray-500 flex gap-4">
+          <GeneralIcon class="min-w-6 h-6 text-orange-500" icon="warning" />
+          <div class="flex flex-col gap-1">
+            <h2 class="font-semibold text-sm mb-0 text-gray-800">Suitable fields not present</h2>
+            <span class="text-gray-500 font-default"> {{ errorMessages[form.type] }}</span>
+          </div>
         </div>
       </div>
 
@@ -550,7 +566,7 @@ onMounted(async () => {
   </NcModal>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .ant-form-item-required {
   @apply !text-gray-800 font-medium;
   &:before {
@@ -558,7 +574,19 @@ onMounted(async () => {
   }
 }
 
+.nc-from-select .ant-select-selector {
+  @apply !mr-2;
+}
+
 .nc-to-select .ant-select-selector {
   @apply !rounded-r-none;
 }
+
+.ant-input {
+  @apply border-gray-200;
+}
+
+.ant-form-item {
+  @apply !mb-6;
+}
 </style>
diff --git a/packages/nc-gui/components/dlg/ViewDelete.vue b/packages/nc-gui/components/dlg/ViewDelete.vue
index bf68bff85e..d9ca66c262 100644
--- a/packages/nc-gui/components/dlg/ViewDelete.vue
+++ b/packages/nc-gui/components/dlg/ViewDelete.vue
@@ -47,7 +47,7 @@ async function onDelete() {
   <GeneralDeleteModal v-model:visible="vModel" :entity-name="$t('objects.view')" :on-delete="onDelete">
     <template #entity-preview>
       <div v-if="view" class="flex flex-row items-center py-2 px-3 bg-gray-50 rounded-lg text-gray-700 mb-4">
-        <GeneralViewIcon :meta="props.view" class="nc-view-icon"></GeneralViewIcon>
+        <GeneralViewIcon :meta="props.view" class="nc-view-icon w-4 min-h-4"></GeneralViewIcon>
         <div
           class="capitalize text-ellipsis overflow-hidden select-none w-full pl-3"
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
diff --git a/packages/nc-gui/components/nc/DateWeekSelector.vue b/packages/nc-gui/components/nc/DateWeekSelector.vue
index a3c901727c..e41df1c4b3 100644
--- a/packages/nc-gui/components/nc/DateWeekSelector.vue
+++ b/packages/nc-gui/components/nc/DateWeekSelector.vue
@@ -8,9 +8,10 @@ interface Props {
   pageDate?: dayjs.Dayjs
   activeDates?: Array<dayjs.Dayjs>
   isMondayFirst?: boolean
+  disablePagination?: boolean
   isWeekPicker?: boolean
   disableHeader?: boolean
-  disablePagination?: boolean
+  hideCalendar?: boolean
   selectedWeek?: {
     start: dayjs.Dayjs
     end: dayjs.Dayjs
@@ -22,14 +23,15 @@ const props = withDefaults(defineProps<Props>(), {
   selectedDate: null,
   isDisabled: false,
   isMondayFirst: true,
+  disablePagination: false,
   pageDate: dayjs(),
   isWeekPicker: false,
   disableHeader: false,
-  disablePagination: false,
   activeDates: [] as Array<dayjs.Dayjs>,
   selectedWeek: null,
+  hideCalendar: false,
 })
-const emit = defineEmits(['change', 'update:selectedDate', 'update:pageDate', 'update:selectedWeek'])
+const emit = defineEmits(['change', 'dblClick', 'update:selectedDate', 'update:pageDate', 'update:selectedWeek'])
 // Page date is the date we use to manage which month/date that is currently being displayed
 const pageDate = useVModel(props, 'pageDate', emit)
 
@@ -47,7 +49,6 @@ const days = computed(() => {
   }
 })
 
-// Used to display the current month and year
 const currentMonthYear = computed(() => {
   return dayjs(pageDate.value).format('MMMM YYYY')
 })
@@ -56,10 +57,12 @@ const selectWeek = (date: dayjs.Dayjs) => {
   const dayOffset = +props.isMondayFirst
   const dayOfWeek = (date.day() - dayOffset + 7) % 7
   const startDate = date.subtract(dayOfWeek, 'day')
-  selectedWeek.value = {
+  const newWeek = {
     start: startDate,
     end: startDate.endOf('week'),
   }
+  selectedWeek.value = newWeek
+  emit('update:selectedWeek', newWeek)
 }
 
 // Generates all dates should be displayed in the calendar
@@ -136,30 +139,32 @@ const paginate = (action: 'next' | 'prev') => {
   pageDate.value = newDate
   emit('update:pageDate', newDate)
 }
+
+const emitDblClick = (date: dayjs.Dayjs) => {
+  emit('dblClick', date)
+}
 </script>
 
 <template>
   <div
     :class="{
       'gap-1': size === 'small',
-      'gap-4': size === 'medium' || size === 'large',
     }"
     class="flex flex-col"
   >
     <div
       v-if="!disableHeader"
       :class="{
-        ' justify-between': !disablePagination,
-        ' justify-center': disablePagination,
+        '!justify-center': disablePagination,
       }"
-      class="flex items-center"
+      class="flex justify-between border-b-1 px-3 py-0.5 nc-date-week-header items-center"
     >
       <NcTooltip v-if="!disablePagination">
-        <NcButton size="small" type="secondary" @click="paginate('prev')">
-          <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
+        <NcButton class="!border-0" size="small" type="secondary" @click="paginate('prev')">
+          <component :is="iconMap.arrowLeft" class="h-4 w-4" />
         </NcButton>
         <template #title>
-          <span>{{ $t('labels.previousMonth') }}</span>
+          <span>{{ $t('labels.next') }}</span>
         </template>
       </NcTooltip>
 
@@ -168,19 +173,21 @@ const paginate = (action: 'next' | 'prev') => {
           'text-xs': size === 'small',
           'text-sm': size === 'medium',
         }"
-        class="text-gray-700"
+        class="text-gray-700 font-semibold"
         >{{ currentMonthYear }}</span
       >
+
       <NcTooltip v-if="!disablePagination">
-        <NcButton size="small" type="secondary" @click="paginate('next')">
-          <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
+        <NcButton class="!border-0" data-testid="nc-calendar-next-btn" size="small" type="secondary" @click="paginate('next')">
+          <component :is="iconMap.arrowRight" class="h-4 w-4" />
         </NcButton>
         <template #title>
-          <span>{{ $t('labels.nextMonth') }}</span>
+          <span>{{ $t('labels.next') }}</span>
         </template>
       </NcTooltip>
     </div>
     <div
+      v-if="!hideCalendar"
       :class="{
         'rounded-lg': size === 'small',
         'rounded-y-xl': size !== 'small',
@@ -189,12 +196,12 @@ const paginate = (action: 'next' | 'prev') => {
     >
       <div
         :class="{
-          'gap-1 px-1': size === 'medium',
+          'gap-1 px-3.5': size === 'medium',
           'gap-2': size === 'large',
-          'px-2 py-1 !rounded-t-lg': size === 'small',
+          'px-2 !rounded-t-lg': size === 'small',
           'rounded-t-xl': size !== 'small',
         }"
-        class="flex flex-row border-b-1 nc-date-week-header border-gray-200 justify-between"
+        class="flex py-1 flex-row nc-date-week-header border-gray-200 justify-between"
       >
         <span
           v-for="(day, index) in days"
@@ -211,7 +218,7 @@ const paginate = (action: 'next' | 'prev') => {
       <div
         :class="{
           'gap-2 pt-2': size === 'large',
-          'gap-1 p-1': size === 'medium',
+          'gap-1 py-1 px-3.5': size === 'medium',
         }"
         class="grid nc-date-week-grid-wrapper grid-cols-7"
       >
@@ -220,35 +227,37 @@ const paginate = (action: 'next' | 'prev') => {
           :key="index"
           :class="{
             'rounded-lg': !isWeekPicker,
-            'bg-gray-200 border-1 font-bold text-brand-500': isSelectedDate(date) && !isWeekPicker && isDayInPagedMonth(date),
+            'bg-gray-200 border-1 font-bold ': isSelectedDate(date) && !isWeekPicker && isDayInPagedMonth(date),
             'hover:(border-1 border-gray-200 bg-gray-100)': !isSelectedDate(date) && !isWeekPicker,
-            'nc-selected-week z-1': isDateInSelectedWeek(date) && isWeekPicker,
+            'nc-selected-week !font-semibold z-1': isDateInSelectedWeek(date) && isWeekPicker,
             'border-none': isWeekPicker,
             'border-transparent': !isWeekPicker,
             'text-gray-400': !isDateInCurrentMonth(date),
             'nc-selected-week-start': isSameDate(date, selectedWeek?.start),
             'nc-selected-week-end': isSameDate(date, selectedWeek?.end),
-            'rounded-md bg-brand-50 text-brand-500 nc-calendar-today ': isSameDate(date, dayjs()) && isDateInCurrentMonth(date),
+            'rounded-md text-brand-500 !font-semibold nc-calendar-today ':
+              isSameDate(date, dayjs()) && isDateInCurrentMonth(date),
             'h-9 w-9': size === 'large',
+            'text-gray-500': date.get('day') === 0 || date.get('day') === 6,
             'h-8 w-8': size === 'medium',
             'h-6 w-6 text-[10px]': size === 'small',
           }"
           class="px-1 py-1 relative border-1 font-medium flex items-center cursor-pointer justify-center"
           data-testid="nc-calendar-date"
+          @dblclick="emitDblClick(date)"
           @click="handleSelectDate(date)"
         >
           <span
             v-if="isActiveDate(date)"
             :class="{
               'h-2 w-2': size === 'large',
-              'h-1 w-1': size === 'medium',
-              'h-0.75 w-0.75': size === 'small',
+              'h-1.5 w-1.5': size === 'medium',
+              'h-1.25 w-1.25 top-0.5 right-0.5': size === 'small',
               'top-1 right-1': size !== 'small',
-              'top-0.5 right-0.5': size === 'small',
               '!border-white': isSelectedDate(date),
-              'border-brand-50': isSameDate(date, dayjs()),
+              '!border-brand-50': isSameDate(date, dayjs()),
             }"
-            class="absolute z-2 rounded-full border-2 border-white bg-brand-500"
+            class="absolute z-2 border-1 rounded-full border-white bg-brand-500"
           ></span>
           <span class="z-2">
             {{ date.get('date') }}
@@ -267,7 +276,7 @@ const paginate = (action: 'next' | 'prev') => {
 .nc-selected-week:before {
   @apply absolute top-0 left-0 w-full h-full bg-gray-200;
   content: '';
-  width: 124%;
+  width: 134%;
   height: 100%;
 }
 
diff --git a/packages/nc-gui/components/nc/Divider.vue b/packages/nc-gui/components/nc/Divider.vue
index 84f3c6a832..612841d852 100644
--- a/packages/nc-gui/components/nc/Divider.vue
+++ b/packages/nc-gui/components/nc/Divider.vue
@@ -1,5 +1,13 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  dividerClass?: string
+}>()
+
+const dividerClass = toRef(props, 'dividerClass')
+</script>
+
 <template>
-  <a-divider class="nc-divider" />
+  <a-divider :class="dividerClass" class="nc-divider" />
 </template>
 
 <style lang="scss">
diff --git a/packages/nc-gui/components/nc/Modal.vue b/packages/nc-gui/components/nc/Modal.vue
index f85dc9824f..9721fd54e8 100644
--- a/packages/nc-gui/components/nc/Modal.vue
+++ b/packages/nc-gui/components/nc/Modal.vue
@@ -103,7 +103,7 @@ const slots = useSlots()
       <div
         v-if="slots.header"
         :class="{
-          'border-b-1 border-gray-100': showSeparator,
+          'border-b-1 border-gray-200': showSeparator,
         }"
         class="flex pb-2 mb-2 text-lg font-medium"
       >
diff --git a/packages/nc-gui/components/nc/MonthYearSelector.vue b/packages/nc-gui/components/nc/MonthYearSelector.vue
index 24551f3ead..fa4311e48b 100644
--- a/packages/nc-gui/components/nc/MonthYearSelector.vue
+++ b/packages/nc-gui/components/nc/MonthYearSelector.vue
@@ -7,6 +7,7 @@ interface Props {
   pageDate?: dayjs.Dayjs
   isYearPicker?: boolean
   hideHeader?: boolean
+  hideCalendar?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -15,6 +16,7 @@ const props = withDefaults(defineProps<Props>(), {
   pageDate: dayjs(),
   hideHeader: false,
   isYearPicker: false,
+  hideCalendar: false,
 })
 const emit = defineEmits(['update:selectedDate', 'update:pageDate'])
 
@@ -87,34 +89,42 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
 </script>
 
 <template>
-  <div class="px-3 pb-3 pt-2 flex flex-col">
-    <div v-if="!hideHeader" class="flex justify-between items-center">
-      <NcTooltip>
-        <NcButton size="small" type="secondary" @click="paginate('prev')">
-          <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
-        </NcButton>
-        <template #title>
-          <span>{{ $t('labels.previous') }}</span>
-        </template>
-      </NcTooltip>
-      <span class="text-gray-700">{{ isYearPicker ? $t('labels.selectYear') : pageDate.year() }}</span>
-      <NcTooltip>
-        <NcButton size="small" type="secondary" @click="paginate('next')">
-          <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
-        </NcButton>
-        <template #title>
-          <span>{{ $t('labels.next') }}</span>
-        </template>
-      </NcTooltip>
+  <div class="flex flex-col">
+    <div v-if="!hideHeader" class="flex px-2 border-b-1 py-0.5 justify-between items-center">
+      <div class="flex">
+        <NcTooltip>
+          <NcButton class="!border-0" size="small" type="secondary" @click="paginate('prev')">
+            <component :is="iconMap.arrowLeft" class="h-4 w-4" />
+          </NcButton>
+          <template #title>
+            <span>{{ $t('labels.next') }}</span>
+          </template>
+        </NcTooltip>
+      </div>
+
+      <span class="text-gray-700 font-semibold">{{
+        isYearPicker ? dayjs(selectedDate).year() : dayjs(pageDate).format('YYYY')
+      }}</span>
+      <div class="flex">
+        <NcTooltip>
+          <NcButton class="!border-0" size="small" type="secondary" @click="paginate('next')">
+            <component :is="iconMap.arrowRight" class="h-4 w-4" />
+          </NcButton>
+          <template #title>
+            <span>{{ $t('labels.next') }}</span>
+          </template>
+        </NcTooltip>
+      </div>
     </div>
-    <div class="rounded-y-xl max-w-[350px]">
-      <div class="grid grid-cols-4 gap-2 py-3">
+    <div v-if="!hideCalendar" class="rounded-y-xl px-2.5 py-1 max-w-[350px]">
+      <div class="grid grid-cols-4 gap-2">
         <template v-if="!isYearPicker">
           <span
             v-for="(month, id) in months"
             :key="id"
             :class="{
-              '!bg-gray-200 !font-bold !text-brand-500': isMonthSelected(month),
+              '!bg-gray-200 !text-brand-500 !font-bold ': isMonthSelected(month),
+              '!text-brand-500': dayjs().isSame(month, 'month'),
             }"
             class="h-9 rounded-lg flex items-center font-medium justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-900 cursor-pointer"
             @click="selectedDate = month"
@@ -127,7 +137,8 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
             v-for="(year, id) in years"
             :key="id"
             :class="{
-              '!bg-gray-200 !font-bold !text-brand-500': compareYear(year, selectedDate),
+              '!bg-gray-200 !text-brand-500 !font-bold ': compareYear(year, selectedDate),
+              '!text-brand-500': dayjs().isSame(year, 'year'),
             }"
             class="h-9 rounded-lg flex items-center font-medium justify-center hover:(border-1 border-gray-200 bg-gray-100) text-gray-900 cursor-pointer"
             @click="selectedDate = year"
diff --git a/packages/nc-gui/components/nc/Select.vue b/packages/nc-gui/components/nc/Select.vue
index 553501fee6..61cee55d5a 100644
--- a/packages/nc-gui/components/nc/Select.vue
+++ b/packages/nc-gui/components/nc/Select.vue
@@ -84,7 +84,7 @@ const onChange = (value: string) => {
   height: fit-content;
   .ant-select-selector {
     box-shadow: 0px 5px 3px -2px rgba(0, 0, 0, 0.02), 0px 3px 1px -2px rgba(0, 0, 0, 0.06);
-    @apply border-1 border-gray-200 rounded-lg;
+    @apply border-1 border-gray-200 rounded-lg !px-3;
   }
 
   .ant-select-selection-item {
diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
index 912812b597..24fc5103a2 100644
--- a/packages/nc-gui/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -3,24 +3,18 @@ const { isGrid, isGallery, isKanban, isMap, isCalendar } = useSmartsheetStoreOrT
 
 const isPublic = inject(IsPublicInj, ref(false))
 
-const { isViewsLoading } = storeToRefs(useViewsStore())
-
 const { isMobileMode } = useGlobal()
+const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
 
-const containerRef = ref<HTMLElement>()
-
-const isTab = ref(true)
+const { isViewsLoading } = storeToRefs(useViewsStore())
 
-const handleResize = () => {
-  isTab.value = containerRef.value.offsetWidth > 810
-}
+const containerRef = ref<HTMLElement>()
 
-onMounted(() => {
-  window.addEventListener('resize', handleResize)
-})
+const { width } = useElementSize(containerRef)
 
-onUnmounted(() => {
-  window.removeEventListener('resize', handleResize)
+const isTab = computed(() => {
+  if (!isCalendar.value) return false
+  return width.value > 1200
 })
 
 const { allowCSVDownload } = useSharedView()
@@ -28,32 +22,40 @@ const { allowCSVDownload } = useSharedView()
 
 <template>
   <div
-    v-if="!isMobileMode || !isCalendar"
+    v-if="!isMobileMode"
     ref="containerRef"
-    class="nc-table-toolbar relative py-1 px-2.25 xs:(px-1) flex gap-2 items-center border-b border-gray-200 overflow-hidden xs:(min-h-14) max-h-[var(--topbar-height)] min-h-[var(--topbar-height)] z-7"
+    class="nc-table-toolbar relative px-3 xs:(px-1) flex gap-2 items-center border-b border-gray-200 overflow-hidden xs:(min-h-14) min-h-9 max-h-9 z-7"
   >
     <template v-if="isViewsLoading">
       <a-skeleton-input :active="true" class="!w-44 !h-4 ml-2 !rounded overflow-hidden" />
     </template>
     <template v-else>
-      <LazySmartsheetToolbarMappedBy v-if="isMap" />
-      <LazySmartsheetToolbarCalendarRange v-if="isCalendar" />
+      <div
+        :class="{
+          'min-w-34/100': !isMobileMode && isLeftSidebarOpen && isCalendar,
+          'min-w-39/100': !isMobileMode && !isLeftSidebarOpen && isCalendar,
+          'gap-1': isCalendar,
+        }"
+        class="flex items-center gap-3"
+      >
+        <LazySmartsheetToolbarMappedBy v-if="isMap" />
+        <LazySmartsheetToolbarCalendarHeader v-if="isCalendar" />
+        <LazySmartsheetToolbarCalendarToday v-if="isCalendar" />
 
-      <LazySmartsheetToolbarFieldsMenu
-        v-if="isGrid || isGallery || isKanban || isMap || isCalendar"
-        :show-system-fields="false"
-      />
+        <LazySmartsheetToolbarCalendarRange v-if="isCalendar" />
 
-      <LazySmartsheetToolbarStackedBy v-if="isKanban" />
+        <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery || isKanban || isMap" :show-system-fields="false" />
 
-      <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap || isCalendar" />
+        <LazySmartsheetToolbarStackedBy v-if="isKanban" />
 
-      <LazySmartsheetToolbarGroupByMenu v-if="isGrid" />
+        <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap" />
 
-      <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban || isCalendar" />
+        <LazySmartsheetToolbarGroupByMenu v-if="isGrid" />
 
-      <div v-if="isCalendar && isTab" class="flex-1" />
-      <LazySmartsheetToolbarCalendarMode v-if="isCalendar" v-model:tab="isTab" />
+        <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />
+      </div>
+
+      <LazySmartsheetToolbarCalendarMode v-if="isCalendar && isTab" :tab="isTab" />
 
       <template v-if="!isMobileMode">
         <LazySmartsheetToolbarRowHeight v-if="isGrid" />
@@ -65,6 +67,8 @@ const { allowCSVDownload } = useSharedView()
         <div class="flex-1" />
       </template>
 
+      <LazySmartsheetToolbarCalendarActiveView v-if="isCalendar" />
+
       <LazySmartsheetToolbarSearchData
         v-if="isGrid || isGallery || isKanban"
         :class="{
@@ -72,6 +76,10 @@ const { allowCSVDownload } = useSharedView()
           'w-full': isMobileMode,
         }"
       />
+      <LazySmartsheetToolbarCalendarMode v-if="isCalendar && !isTab" :tab="isTab" />
+
+      <LazySmartsheetToolbarFieldsMenu v-if="isCalendar" :show-system-fields="false" />
+      <LazySmartsheetToolbarColumnFilterMenu v-if="isCalendar" />
     </template>
   </div>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
index 523bae9552..b49663127c 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
@@ -183,6 +183,7 @@ const dropEvent = (event: DragEvent) => {
       dragElement.value = null
     }
     updateRowProperty(newRow, updateProperty, false)
+    $e('c:calendar:day:drag-record')
   }
 }
 
@@ -202,7 +203,7 @@ const newRecord = () => {
   <div
     v-if="recordsAcrossAllRange.length"
     ref="container"
-    class="w-full relative h-[calc(100vh-10.8rem)] overflow-y-auto nc-scrollbar-md"
+    class="w-full cursor-pointer relative h-[calc(100vh-10.8rem)] overflow-y-auto nc-scrollbar-md"
     data-testid="nc-calendar-day-view"
     @dblclick="newRecord"
     @drop="dropEvent"
@@ -223,7 +224,7 @@ const newRecord = () => {
           :resize="false"
           color="blue"
           size="small"
-          @click="emit('expandRecord', record)"
+          @click.prevent="emit('expandRecord', record)"
         >
           <template v-for="(field, id) in fields" :key="id">
             <LazySmartsheetPlainCell
@@ -244,7 +245,7 @@ const newRecord = () => {
   <div
     v-else
     ref="container"
-    class="w-full h-full flex text-md font-bold text-gray-500 items-center justify-center"
+    class="w-full h-full cursor-pointer flex text-md font-bold text-gray-500 items-center justify-center"
     @drop="dropEvent"
     @dblclick="newRecord"
   >
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 5acb2e8cb9..0011c14673 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -16,6 +16,8 @@ const {
   showSideMenu,
 } = useCalendarViewStoreOrThrow()
 
+const { $e } = useNuxtApp()
+
 const container = ref<null | HTMLElement>(null)
 
 const { isUIAllowed } = useRoles()
@@ -672,6 +674,8 @@ const stopDrag = (event: MouseEvent) => {
   if (!newRow) return
   updateRowProperty(newRow, updateProperty, false)
 
+  $e('c:calendar:day:drag-record')
+
   document.removeEventListener('mousemove', onDrag)
   document.removeEventListener('mouseup', stopDrag)
 }
@@ -802,6 +806,7 @@ const dropEvent = (event: DragEvent) => {
       dragElement.value = null
     }
     updateRowProperty(newRow, updateProperty, false)
+    $e('c:calendar:day:drag-record')
   }
 }
 
@@ -859,7 +864,7 @@ watch(
 <template>
   <div
     ref="container"
-    class="w-full flex relative no-selection h-[calc(100vh-10rem)] overflow-y-auto nc-scrollbar-md"
+    class="w-full flex relative no-selection h-[calc(100vh-5.3rem)] overflow-y-auto nc-scrollbar-md"
     data-testid="nc-calendar-day-view"
     @drop="dropEvent"
   >
@@ -872,7 +877,7 @@ watch(
         @click="selectHour(hour)"
         @dblclick="newRecord(hour)"
       >
-        <div class="w-16 border-b-0 pr-3 pl-2 text-right text-xs text-gray-400 font-semibold h-13">
+        <div class="w-16 border-b-0 pr-2 pl-2 text-right text-xs text-gray-400 font-semibold h-13">
           {{ dayjs(hour).format('hh a') }}
         </div>
       </div>
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 1d5276e8c9..d357e4ba62 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs'
 import type { ColumnType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
 
 const emit = defineEmits(['newRecord', 'expandRecord'])
 
@@ -9,6 +10,7 @@ const {
   selectedMonth,
   formattedData,
   formattedSideBarData,
+  calDataType,
   sideBarFilterOption,
   displayField,
   calendarRange,
@@ -16,6 +18,8 @@ const {
   updateRowProperty,
 } = useCalendarViewStoreOrThrow()
 
+const { $e } = useNuxtApp()
+
 const isMondayFirst = ref(true)
 
 const { isUIAllowed } = useRoles()
@@ -115,7 +119,7 @@ const recordsToDisplay = computed<{
   const perHeight = gridContainerHeight.value / dates.value.length
   const perRecordHeight = 24
 
-  const spaceBetweenRecords = 26
+  const spaceBetweenRecords = 27
 
   // This object is used to keep track of the number of records in a day
   // The key is the date in the format YYYY-MM-DD
@@ -357,19 +361,28 @@ const calculateNewRow = (event: MouseEvent, updateSideBar?: boolean, skipChangeC
   const fromCol = dragRecord.value?.rowMeta.range?.fk_from_col
   const toCol = dragRecord.value?.rowMeta.range?.fk_to_col
 
+  if (!fromCol) return { newRow: null, updateProperty: [] }
+
   const week = Math.floor(percentY * dates.value.length)
   const day = Math.floor(percentX * 7)
 
-  const newStartDate = dates.value[week] ? dayjs(dates.value[week][day]) : null
+  let newStartDate = dates.value[week] ? dayjs(dates.value[week][day]) : null
   if (!newStartDate) return { newRow: null, updateProperty: [] }
 
+  const fromDate = dayjs(dragRecord.value.row[fromCol.title!])
+
+  newStartDate = newStartDate.add(fromDate.hour(), 'hour').add(fromDate.minute(), 'minute').add(fromDate.second(), 'second')
+
   let endDate
 
   const newRow = {
     ...dragRecord.value,
     row: {
       ...dragRecord.value?.row,
-      [fromCol!.title!]: dayjs(newStartDate).utc().format('YYYY-MM-DD HH:mm:ssZ'),
+      [fromCol!.title!]:
+        calDataType.value === UITypes.Date
+          ? dayjs(newStartDate).format('YYYY-MM-DD HH:mm:ssZ')
+          : dayjs(newStartDate).utc().format('YYYY-MM-DD HH:mm:ssZ'),
     },
   }
 
@@ -389,7 +402,10 @@ const calculateNewRow = (event: MouseEvent, updateSideBar?: boolean, skipChangeC
       endDate = newStartDate.clone()
     }
 
-    newRow.row[toCol!.title!] = dayjs(endDate).utc().format('YYYY-MM-DD HH:mm:ssZ')
+    newRow.row[toCol!.title!] =
+      calDataType.value === UITypes.Date
+        ? dayjs(endDate).format('YYYY-MM-DD HH:mm:ssZ')
+        : dayjs(endDate).utc().format('YYYY-MM-DD HH:mm:ssZ')
     updateProperty.push(toCol!.title!)
   }
 
@@ -544,6 +560,8 @@ const stopDrag = (event: MouseEvent) => {
   updateRowProperty(newRow, updateProperty, false)
   focusedDate.value = null
 
+  $e('c:calendar:month:drag-record')
+
   document.removeEventListener('mousemove', onDrag)
   document.removeEventListener('mouseup', stopDrag)
 }
@@ -611,6 +629,7 @@ const dropEvent = (event: DragEvent) => {
       dragElement.value = null
     }
     updateRowProperty(newRow, updateProperty, false)
+    $e('c:calendar:day:drag-record')
   }
 }
 
@@ -655,7 +674,7 @@ const addRecord = (date: dayjs.Dayjs) => {
       <div
         v-for="(day, index) in days"
         :key="index"
-        class="text-center bg-gray-50 py-1 text-sm border-b-1 border-r-1 last:border-r-0 border-gray-200 font-semibold text-gray-500"
+        class="text-center bg-gray-50 py-1 border-b-1 border-r-1 last:border-r-0 border-gray-200 font-regular uppercase text-xs text-gray-500"
       >
         {{ day }}
       </div>
@@ -667,7 +686,8 @@ const addRecord = (date: dayjs.Dayjs) => {
         'grid-rows-6': dates.length === 6,
         'grid-rows-7': dates.length === 7,
       }"
-      class="grid h-full pb-7.5"
+      class="grid"
+      style="height: calc(100% - 1.59rem)"
       @drop="dropEvent"
     >
       <div v-for="(week, weekIndex) in dates" :key="weekIndex" class="grid grid-cols-7 grow" data-testid="nc-calendar-month-week">
@@ -807,7 +827,7 @@ const addRecord = (date: dayjs.Dayjs) => {
               @resize-start="onResizeStart"
               @dblclick.stop="emit('expandRecord', record)"
             >
-              <template #time>
+              <template v-if="calDataType === UITypes.DateTime" #time>
                 <span class="text-xs font-medium text-gray-400">
                   {{ dayjs(record.row[record.rowMeta.range?.fk_from_col!.title!]).format('h:mma').slice(0, -1) }}
                 </span>
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index 1d1024a850..6141380c1d 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -13,7 +13,11 @@ const INFINITY_SCROLL_THRESHOLD = 100
 
 const { isUIAllowed } = useRoles()
 
-const { appInfo } = useGlobal()
+const { $e } = useNuxtApp()
+
+const { appInfo, isMobileMode } = useGlobal()
+
+const { height } = useWindowSize()
 
 const meta = inject(MetaInj, ref())
 
@@ -36,6 +40,7 @@ const {
   loadMoreSidebarData,
   searchQuery,
   sideBarFilterOption,
+  showSideMenu,
 } = useCalendarViewStoreOrThrow()
 
 const sideBarListRef = ref<VNodeRef | null>(null)
@@ -269,82 +274,119 @@ const newRecord = () => {
   emit('newRecord', { row, oldRow: {}, rowMeta: { new: true } })
 }
 
-const width = ref(0)
+const toggleSideMenu = () => {
+  $e('c:calendar:toggle-sidebar', showSideMenu.value)
+  showSideMenu.value = !showSideMenu.value
+}
+
+const showSearch = ref(false)
+const searchRef = ref()
 
-const widthListener = () => {
-  width.value = window.innerWidth
+const clickSearch = () => {
+  showSearch.value = true
+  nextTick(() => {
+    searchRef.value?.focus()
+  })
 }
 
-onMounted(() => {
-  window.addEventListener('resize', widthListener)
-})
+const toggleSearch = () => {
+  if (!searchQuery.value.length) {
+    showSearch.value = false
+  } else {
+    searchRef.value?.blur()
+  }
+}
 
-onUnmounted(() => {
-  window.removeEventListener('resize', widthListener)
+useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
+  const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+  if (cmdOrCtrl) {
+    switch (e.key.toLowerCase()) {
+      case 'f':
+        e.preventDefault()
+        clickSearch()
+        break
+    }
+  }
 })
+
+onClickOutside(searchRef, toggleSearch)
 </script>
 
 <template>
+  <NcTooltip
+    :class="{
+      'right-2': !showSideMenu,
+      'right-74': showSideMenu,
+    }"
+    class="absolute transition-all ease-in-out top-2 z-30"
+  >
+    <template #title> {{ $t('activity.toggleSidebar') }}</template>
+    <NcButton v-if="!isMobileMode" data-testid="nc-calendar-side-bar-btn" size="small" type="secondary" @click="toggleSideMenu">
+      <component :is="iconMap.sidebar" class="h-4 w-4 text-gray-600 transition-all" />
+    </NcButton>
+  </NcTooltip>
   <div
     :class="{
-      '!w-0': !props.visible,
-      'min-w-[324px]': width > 1440 && props.visible,
-      'min-w-[288px]': width <= 1440 && props.visible,
-      'nc-calendar-side-menu-open': props.visible,
+      '!w-0 hidden': !props.visible,
+      'nc-calendar-side-menu-open block !min-w-[288px]': props.visible,
     }"
-    class="h-full border-l-1 border-gray-200 transition-all"
+    class="h-full relative border-l-1 border-gray-200 transition-all"
     data-testid="nc-calendar-side-menu"
   >
-    <div
-      :class="{
-        '!hidden': width <= 1440,
-        'px-3 py-3 ': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const),
-      }"
-      class="flex flex-col"
-    >
+    <div class="flex flex-col">
       <NcDateWeekSelector
         v-if="activeCalendarView === ('day' as const)"
         v-model:active-dates="activeDates"
         v-model:page-date="pageDate"
         v-model:selected-date="selectedDate"
+        size="medium"
+        :hide-calendar="height < 700"
       />
       <NcDateWeekSelector
         v-else-if="activeCalendarView === ('week' as const)"
         v-model:active-dates="activeDates"
         v-model:page-date="pageDate"
         v-model:selected-week="selectedDateRange"
+        :hide-calendar="height < 700"
         is-week-picker
+        size="medium"
       />
       <NcMonthYearSelector
         v-else-if="activeCalendarView === ('month' as const)"
         v-model:page-date="pageDate"
         v-model:selected-date="selectedMonth"
+        :hide-calendar="height < 700"
+        size="medium"
       />
       <NcMonthYearSelector
         v-else-if="activeCalendarView === ('year' as const)"
         v-model:page-date="pageDate"
         v-model:selected-date="selectedDate"
+        :hide-calendar="height < 700"
         is-year-picker
+        size="medium"
       />
     </div>
 
     <div
       :class="{
-        '!border-t-0': width <= 1440,
+        '!border-t-0 ': height < 700,
+        'pt-6': height >= 700,
       }"
-      class="border-t-1 border-gray-200 relative flex flex-col gap-y-4 pt-3"
+      class="border-t-1 !pt-3 border-gray-200 relative flex flex-col gap-y-3"
     >
       <div class="flex px-4 items-center gap-3">
-        <span class="capitalize text-base font-bold">{{ $t('objects.records') }}</span>
+        <span class="capitalize font-medium text-gray-700">{{ $t('objects.records') }}</span>
         <NcSelect v-model:value="sideBarFilterOption" class="w-full !text-gray-600" data-testid="nc-calendar-sidebar-filter">
           <a-select-option v-for="option in options" :key="option.value" :value="option.value" class="!text-gray-600">
-            <div class="flex items-center justify-between gap-2">
-              <div class="truncate flex-1">
+            <div class="flex items-center w-full justify-between gap-2">
+              <div class="truncate">
                 <NcTooltip :title="option.label" placement="top" show-on-truncate-only>
                   <template #title>{{ option.label }}</template>
                   {{ option.label }}
                 </NcTooltip>
               </div>
+
               <component
                 :is="iconMap.check"
                 v-if="sideBarFilterOption === option.value"
@@ -355,47 +397,87 @@ onUnmounted(() => {
           </a-select-option>
         </NcSelect>
       </div>
-      <div class="flex px-4 items-center gap-2">
+      <div
+        :class="{
+          hidden: !showSearch,
+        }"
+        class="mx-4"
+      >
         <a-input
+          ref="searchRef"
           v-model:value="searchQuery.value"
           :class="{
             '!border-brand-500': searchQuery.value.length > 0,
+            '!hidden': !showSearch,
           }"
           class="!rounded-lg !h-8 !placeholder:text-gray-500 !border-gray-200 !px-4"
           data-testid="nc-calendar-sidebar-search"
           placeholder="Search records"
+          @keydown.esc="toggleSearch"
         >
           <template #prefix>
             <component :is="iconMap.search" class="h-4 w-4 mr-1 text-gray-500" />
           </template>
         </a-input>
       </div>
+      <div class="mx-4 gap-2 flex items-center">
+        <NcButton
+          v-if="!showSearch"
+          data-testid="nc-calendar-sidebar-search-btn"
+          size="small"
+          class="!h-7"
+          type="secondary"
+          @click="clickSearch"
+        >
+          <component :is="iconMap.search" />
+        </NcButton>
+
+        <LazySmartsheetToolbarSortListMenu />
+
+        <div class="flex-1" />
 
-      <div
-        v-if="calendarRange?.length && !isCalendarMetaLoading"
-        :ref="sideBarListRef"
-        :class="{
-         '!h-[calc(100vh-13.5rem)]': width <= 1440,
-        'h-[calc(100vh-36.2rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const) && width >= 1440,
-        'h-[calc(100vh-25.1rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const)  && width >= 1440,
-   
-      }"
-        class="nc-scrollbar-md pl-4 pr-4 overflow-y-auto"
-        data-testid="nc-calendar-side-menu-list"
-        @scroll="sideBarListScrollHandle"
-      >
         <NcButton
           v-if="isUIAllowed('dataEdit') && props.visible"
           v-e="['c:calendar:calendar-sidemenu-new-record-btn']"
-          class="!absolute right-5 !border-brand-500 bottom-5 !h-12 !w-12"
           data-testid="nc-calendar-side-menu-new-btn"
+          class="!h-7"
+          size="small"
           type="secondary"
           @click="newRecord"
         >
-          <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 class="flex items-center gap-2">
+            <component :is="iconMap.plus" />
+
+            Record
           </div>
         </NcButton>
+      </div>
+
+      <div
+        v-if="calendarRange?.length && !isCalendarMetaLoading"
+        :ref="sideBarListRef"
+        :class="{
+          '!h-[calc(100svh-22.15rem)]':
+            height > 700 && (activeCalendarView === 'month' || activeCalendarView === 'year') && !showSearch,
+          '!h-[calc(100svh-24.9rem)]':
+            height > 700 && (activeCalendarView === 'month' || activeCalendarView === 'year') && showSearch,
+          '!h-[calc(100svh-13.85rem)]':
+            height <= 700 && (activeCalendarView === 'month' || activeCalendarView === 'year') && !showSearch,
+          '!h-[calc(100svh-16.61rem)]':
+            height <= 700 && (activeCalendarView === 'month' || activeCalendarView === 'year') && showSearch,
+          '!h-[calc(100svh-30.15rem)]':
+            height > 700 && (activeCalendarView === 'day' || activeCalendarView === 'week') && !showSearch,
+          ' !h-[calc(100svh-32.9rem)]':
+            height > 700 && (activeCalendarView === 'day' || activeCalendarView === 'week') && showSearch,
+          '!h-[calc(100svh-13.8rem)]':
+            height <= 700 && (activeCalendarView === 'day' || activeCalendarView === 'week') && !showSearch,
+          '!h-[calc(100svh-16.6rem)]':
+            height <= 700 && (activeCalendarView === 'day' || activeCalendarView === 'week') && showSearch,
+        }"
+        class="nc-scrollbar-md pl-4 pr-4 overflow-y-auto"
+        data-testid="nc-calendar-side-menu-list"
+        @scroll="sideBarListScrollHandle"
+      >
         <div v-if="renderData.length === 0 || isSidebarLoading" class="flex h-full items-center justify-center">
           <GeneralLoader v-if="isSidebarLoading" size="large" />
 
@@ -431,8 +513,8 @@ onUnmounted(() => {
               "
                 color="blue"
                 data-testid="nc-sidebar-record-card"
-                @dragstart="dragStart($event, record)"
                 @click="emit('expandRecord', record)"
+                @dragstart="dragStart($event, record)"
                 @dragover.prevent
               >
                 <template v-if="!isRowEmpty(record, displayField)">
@@ -446,10 +528,23 @@ onUnmounted(() => {
       <template v-else-if="isCalendarMetaLoading">
         <div
           :class="{
-         '!h-[calc(100vh-13.5rem)]': width <= 1440,
-        'h-[calc(100vh-36.2rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const) && width >= 1440,
-        'h-[calc(100vh-25.1rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const)  && width >= 1440,
-      }"
+            '!h-[calc(100svh-22.15rem)]':
+              height > 700 && (activeCalendarView === 'month' || activeCalendarView === 'year') && !showSearch,
+            '!h-[calc(100svh-24.9rem)]':
+              height > 700 && (activeCalendarView === 'month' || activeCalendarView === 'year') && showSearch,
+            '!h-[calc(100svh-13.85rem)]':
+              height <= 700 && (activeCalendarView === 'month' || activeCalendarView === 'year') && !showSearch,
+            '!h-[calc(100svh-16.61rem)]':
+              height <= 700 && (activeCalendarView === 'month' || activeCalendarView === 'year') && showSearch,
+            '!h-[calc(100svh-30.15rem)]':
+              height > 700 && (activeCalendarView === 'day' || activeCalendarView === 'week') && !showSearch,
+            ' !h-[calc(100svh-32.9rem)]':
+              height > 700 && (activeCalendarView === 'day' || activeCalendarView === 'week') && showSearch,
+            '!h-[calc(100svh-13.8rem)]':
+              height <= 700 && (activeCalendarView === 'day' || activeCalendarView === 'week') && !showSearch,
+            '!h-[calc(100svh-16.6rem)]':
+              height <= 700 && (activeCalendarView === 'day' || activeCalendarView === 'week') && showSearch,
+          }"
           class="flex items-center justify-center h-full"
         >
           <GeneralLoader size="xlarge" />
@@ -458,10 +553,23 @@ onUnmounted(() => {
       <div
         v-else
         :class="{
-         '!h-[calc(100vh-13.5rem)]': width <= 1440,
-        'h-[calc(100vh-36.2rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const) && width >= 1440,
-        'h-[calc(100vh-25.1rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const)  && width >= 1440,
-      }"
+          '!h-[calc(100svh-22.15rem)]':
+            height > 700 && (activeCalendarView === 'month' || activeCalendarView === 'year') && !showSearch,
+          '!h-[calc(100svh-24.9rem)]':
+            height > 700 && (activeCalendarView === 'month' || activeCalendarView === 'year') && showSearch,
+          '!h-[calc(100svh-13.85rem)]':
+            height <= 700 && (activeCalendarView === 'month' || activeCalendarView === 'year') && !showSearch,
+          '!h-[calc(100svh-16.61rem)]':
+            height <= 700 && (activeCalendarView === 'month' || activeCalendarView === 'year') && showSearch,
+          '!h-[calc(100svh-30.15rem)]':
+            height > 700 && (activeCalendarView === 'day' || activeCalendarView === 'week') && !showSearch,
+          ' !h-[calc(100svh-32.9rem)]':
+            height > 700 && (activeCalendarView === 'day' || activeCalendarView === 'week') && showSearch,
+          '!h-[calc(100svh-13.8rem)]':
+            height <= 700 && (activeCalendarView === 'day' || activeCalendarView === 'week') && !showSearch,
+          '!h-[calc(100svh-16.6rem)]':
+            height <= 700 && (activeCalendarView === 'day' || activeCalendarView === 'week') && showSearch,
+        }"
         class="flex items-center justify-center h-full"
       >
         {{ $t('activity.noRange') }}
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index 8a47e6d884..c52c77e800 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
@@ -526,6 +526,7 @@ const dropEvent = (event: DragEvent) => {
       dragElement.value = null
     }
     updateRowProperty(newRow, updateProperty, false)
+    $e('c:calendar:day:drag-record')
   }
 }
 
@@ -557,7 +558,9 @@ const addRecord = (date: dayjs.Dayjs) => {
         :class="{
           '!border-brand-500 !border-b-gray-200': dayjs(date).isSame(selectedDate, 'day'),
         }"
-        class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 border-l-gray-50 border-t-gray-50 last:border-r-0 border-1 bg-gray-50"
+        class="w-1/7 cursor-pointer text-center font-regular uppercase text-xs text-gray-500 w-full py-1 border-gray-200 border-l-gray-50 border-t-gray-50 last:border-r-0 border-1 bg-gray-50"
+        @click="selectDate(date)"
+        @dblclick="addRecord(date)"
       >
         {{ dayjs(date).format('DD ddd') }}
       </div>
@@ -570,7 +573,7 @@ const addRecord = (date: dayjs.Dayjs) => {
           '!border-1 !border-t-0 border-brand-500': dayjs(date).isSame(selectedDate, 'day'),
           '!bg-gray-50': date.get('day') === 0 || date.get('day') === 6,
         }"
-        class="flex flex-col border-r-1 min-h-[100vh] last:border-r-0 items-center w-1/7"
+        class="flex cursor-pointer flex-col border-r-1 min-h-[100vh] last:border-r-0 items-center w-1/7"
         data-testid="nc-calendar-week-day"
         @click="selectDate(date)"
         @dblclick="addRecord(date)"
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 930afb67c2..06d367051b 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -17,6 +17,8 @@ const {
   showSideMenu,
 } = useCalendarViewStoreOrThrow()
 
+const { $e } = useNuxtApp()
+
 const container = ref<null | HTMLElement>(null)
 
 const scrollContainer = ref<null | HTMLElement>(null)
@@ -181,7 +183,6 @@ const getMaxOverlaps = ({
 
   const dayIndex = row.rowMeta.dayIndex
   const overlapIndex = columnArray[dayIndex].findIndex((column) => column.findIndex((r) => r.rowMeta.id === id) !== -1) + 1
-
   const dfs = (id: string): number => {
     visited.add(id)
     let maxOverlaps = 1
@@ -194,6 +195,7 @@ const getMaxOverlaps = ({
         }
       }
     }
+
     return maxOverlaps
   }
 
@@ -476,7 +478,11 @@ const recordsAcrossAllRange = computed<{
       }
     }
     for (const record of recordsToDisplay) {
-      const { maxOverlaps, overlapIndex } = getMaxOverlaps({
+      const {
+        maxOverlaps,
+        overlapIndex,
+        dayIndex: tDayIndex,
+      } = getMaxOverlaps({
         row: record,
         columnArray,
         graph: graph.get(record.rowMeta.dayIndex!) ?? new Map(),
@@ -749,6 +755,7 @@ const stopDrag = (event: MouseEvent) => {
   if (newRow) {
     updateRowProperty(newRow, updatedProperty, false)
   }
+  $e('c:calendar:week:drag-record')
 
   document.removeEventListener('mousemove', onDrag)
   document.removeEventListener('mouseup', stopDrag)
@@ -811,6 +818,7 @@ const dropEvent = (event: DragEvent) => {
 
     if (newRow) {
       updateRowProperty(newRow, updatedProperty, false)
+      $e('c:calendar:day:drag-record')
     }
   }
 }
@@ -865,7 +873,7 @@ watch(
 <template>
   <div
     ref="scrollContainer"
-    class="h-[calc(100vh-9.9rem)] prevent-select relative flex w-full overflow-y-auto nc-scrollbar-md"
+    class="h-[calc(100vh-5.4rem)] prevent-select relative flex w-full overflow-y-auto nc-scrollbar-md"
     data-testid="nc-calendar-week-view"
     @drop="dropEvent"
   >
@@ -876,7 +884,7 @@ watch(
         :class="{
           'text-brand-500': date[0].isSame(dayjs(), 'date'),
         }"
-        class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 last:border-r-0 border-b-1 border-l-1 border-r-0 bg-gray-50"
+        class="w-1/7 text-center font-regular uppercase text-xs text-gray-500 w-full py-1 border-gray-200 last:border-r-0 border-b-1 border-l-1 border-r-0 bg-gray-50"
       >
         {{ dayjs(date[0]).format('DD ddd') }}
       </div>
@@ -885,7 +893,7 @@ watch(
       <div
         v-for="(hour, index) in datesHours[0]"
         :key="index"
-        class="h-13 first:mt-0 pt-7.1 nc-calendar-day-hour text-center font-semibold text-xs text-gray-400 py-1"
+        class="h-13 first:mt-0 pt-7.1 nc-calendar-day-hour text-right pr-2 font-semibold text-xs text-gray-400 py-1"
       >
         {{ hour.format('hh a') }}
       </div>
diff --git a/packages/nc-gui/components/smartsheet/calendar/YearView.vue b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
index d4a6589357..5505892067 100644
--- a/packages/nc-gui/components/smartsheet/calendar/YearView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/YearView.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-const { selectedDate, activeDates } = useCalendarViewStoreOrThrow()
+import type dayjs from 'dayjs'
+
+const { selectedDate, activeDates, activeCalendarView } = useCalendarViewStoreOrThrow()
 
 const months = computed(() => {
   const months = []
@@ -25,6 +27,11 @@ const handleResize = () => {
   }
 }
 
+const changeView = (date: dayjs.Dayjs) => {
+  selectedDate.value = date
+  activeCalendarView.value = 'day'
+}
+
 onMounted(() => {
   handleResize()
 })
@@ -33,18 +40,25 @@ watch(width, handleResize)
 </script>
 
 <template>
-  <div ref="calendarContainer" class="overflow-auto flex my-3 justify-center nc-scrollbar-md">
-    <div class="grid grid-cols-4 justify-items-center gap-3" data-testid="nc-calendar-year-view">
+  <div ref="calendarContainer" class="overflow-auto flex my-2 justify-center nc-scrollbar-md">
+    <div
+      :class="{
+        '!gap-12': size === 'large',
+      }"
+      class="grid grid-cols-4 justify-items-center gap-6 scale-1"
+      data-testid="nc-calendar-year-view"
+    >
       <NcDateWeekSelector
         v-for="(_, index) in months"
         :key="index"
         v-model:active-dates="activeDates"
         v-model:page-date="months[index]"
         v-model:selected-date="selectedDate"
-        class="nc-year-view-calendar"
         :size="size"
+        class="nc-year-view-calendar"
         data-testid="nc-calendar-year-view-month-selector"
         disable-pagination
+        @dbl-click="changeView"
       />
     </div>
   </div>
@@ -53,11 +67,7 @@ watch(width, handleResize)
 <style lang="scss" scoped>
 .nc-year-view-calendar {
   :deep(.nc-date-week-header) {
-    @apply !bg-gray-100 border-x-1 border-t-1;
-  }
-
-  :deep(.nc-date-week-grid-wrapper) {
-    @apply !border-x-1 border-b-1 rounded-b-lg;
+    @apply border-gray-200;
   }
 }
 </style>
diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue
index 9db2475584..82c97ca8df 100644
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/index.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import dayjs from 'dayjs'
 import { UITypes } from 'nocodb-sdk'
 import type { Row as RowType } from '#imports'
 
+const { $e } = useNuxtApp()
+
 const meta = inject(MetaInj, ref())
 
 const view = inject(ActiveViewInj, ref())
@@ -32,18 +33,10 @@ const {
   loadSidebarData,
   isCalendarDataLoading,
   isCalendarMetaLoading,
-  selectedDate,
-  selectedMonth,
-  activeDates,
-  pageDate,
   fetchActiveDates,
   showSideMenu,
-  selectedDateRange,
-  paginateCalendarView,
 } = useCalendarViewStoreOrThrow()
 
-const calendarRangeDropdown = ref(false)
-
 const router = useRouter()
 
 const route = useRoute()
@@ -86,8 +79,7 @@ const expandRecord = (row: RowType, state?: Record<string, any>) => {
 }
 
 const newRecord = (row: RowType) => {
-  // TODO: The default values has to be filled based on the active calendar view
-  // and selected sidebar filter option
+  $e('c:calendar:new-record', activeCalendarView.value)
   expandRecord({
     row: {
       ...rowDefaultData(meta.value?.columns),
@@ -119,153 +111,11 @@ reloadViewDataHook?.on(async (params: void | { shouldShowLoading?: boolean }) =>
     fetchActiveDates(),
   ])
 })
-
-const goToToday = () => {
-  selectedDate.value = dayjs()
-  pageDate.value = dayjs()
-  selectedMonth.value = dayjs()
-  selectedDateRange.value = {
-    start: dayjs().startOf('week'),
-    end: dayjs().endOf('week'),
-  }
-
-  document?.querySelector('.nc-calendar-today')?.scrollIntoView({
-    behavior: 'smooth',
-    block: 'center',
-  })
-}
-
-const headerText = computed(() => {
-  switch (activeCalendarView.value) {
-    case 'day':
-      return dayjs(selectedDate.value).format('D MMMM YYYY')
-    case 'week':
-      if (selectedDateRange.value.start.isSame(selectedDateRange.value.end, 'month')) {
-        return `${selectedDateRange.value.start.format('D')} - ${selectedDateRange.value.end.format('D MMM YY')}`
-      } else if (selectedDateRange.value.start.isSame(selectedDateRange.value.end, 'year')) {
-        return `${selectedDateRange.value.start.format('D MMM')} - ${selectedDateRange.value.end.format('D MMM YY')}`
-      } else {
-        return `${selectedDateRange.value.start.format('D MMM YY')} - ${selectedDateRange.value.end.format('D MMM YY')}`
-      }
-    case 'month':
-      return dayjs(selectedMonth.value).format('MMMM YYYY')
-    case 'year':
-      return dayjs(selectedDate.value).format('YYYY')
-  }
-})
 </script>
 
 <template>
-  <div class="flex h-full flex-row" data-testid="nc-calendar-wrapper">
+  <div class="flex h-full relative flex-row" data-testid="nc-calendar-wrapper">
     <div class="flex flex-col w-full">
-      <div class="flex justify-between p-2 items-center border-b-1 border-gray-200" data-testid="nc-calendar-topbar">
-        <div class="flex justify-start gap-3 items-center">
-          <NcTooltip>
-            <template #title> {{ $t('labels.previous') }}</template>
-            <NcButton
-              v-e="`['c:calendar:calendar-${activeCalendarView}-prev-btn']`"
-              data-testid="nc-calendar-prev-btn"
-              size="small"
-              type="secondary"
-              @click="paginateCalendarView('prev')"
-            >
-              <component :is="iconMap.doubleLeftArrow" class="h-4 w-4" />
-            </NcButton>
-          </NcTooltip>
-
-          <NcDropdown v-model:visible="calendarRangeDropdown" :auto-close="false" :trigger="['click']">
-            <NcButton :class="{ '!w-22': activeCalendarView === 'year' }" class="w-45" full-width size="small" type="secondary">
-              <div class="flex px-2 w-full items-center justify-between">
-                <div class="flex gap-1 text-brand-500" data-testid="nc-calendar-active-date">
-                  <span class="font-bold text-center">{{
-                    activeCalendarView === 'month' ? headerText.split(' ')[0] : headerText
-                  }}</span>
-                  <span v-if="activeCalendarView === 'month'">
-                    {{ ` ${headerText.split(' ')[1]}` }}
-                  </span>
-                </div>
-
-                <component :is="iconMap.arrowDown" class="h-4 w-4 text-gray-700" />
-              </div>
-            </NcButton>
-
-            <template #overlay>
-              <div
-                v-if="calendarRangeDropdown"
-                :class="{
-                  'px-4 pt-3 pb-4 ': activeCalendarView === 'week' || activeCalendarView === 'day',
-                }"
-                class="min-w-[22.1rem]"
-                @click.stop
-              >
-                <NcDateWeekSelector
-                  v-if="activeCalendarView === ('day' as const)"
-                  v-model:active-dates="activeDates"
-                  v-model:page-date="pageDate"
-                  v-model:selected-date="selectedDate"
-                />
-                <NcDateWeekSelector
-                  v-else-if="activeCalendarView === ('week' as const)"
-                  v-model:active-dates="activeDates"
-                  v-model:page-date="pageDate"
-                  v-model:selected-week="selectedDateRange"
-                  is-week-picker
-                />
-                <NcMonthYearSelector
-                  v-else-if="activeCalendarView === ('month' as const)"
-                  v-model:page-date="pageDate"
-                  v-model:selected-date="selectedMonth"
-                />
-                <NcMonthYearSelector
-                  v-else-if="activeCalendarView === ('year' as const)"
-                  v-model:page-date="pageDate"
-                  v-model:selected-date="selectedDate"
-                  is-year-picker
-                />
-              </div>
-            </template>
-          </NcDropdown>
-          <NcTooltip>
-            <template #title> {{ $t('labels.next') }}</template>
-            <NcButton
-              v-e="`['c:calendar:calendar-${activeCalendarView}-next-btn']`"
-              data-testid="nc-calendar-next-btn"
-              size="small"
-              type="secondary"
-              @click="paginateCalendarView('next')"
-            >
-              <component :is="iconMap.doubleRightArrow" class="h-4 w-4" />
-            </NcButton>
-          </NcTooltip>
-          <NcButton
-            v-e="`['c:calendar:calendar-${activeCalendarView}-today-btn']`"
-            data-testid="nc-calendar-today-btn"
-            size="small"
-            type="secondary"
-            @click="goToToday"
-          >
-            <span class="text-gray-600 !text-sm">
-              {{ $t('activity.goToToday') }}
-            </span>
-          </NcButton>
-          <span class="opacity-0" data-testid="nc-active-calendar-view">
-            {{ activeCalendarView }}
-          </span>
-        </div>
-        <NcTooltip>
-          <template #title> {{ $t('activity.toggleSidebar') }}</template>
-          <NcButton
-            v-if="!isMobileMode"
-            v-e="`['c:calendar:calendar-${activeCalendarView}-toggle-sidebar']`"
-            data-testid="nc-calendar-side-bar-btn"
-            size="small"
-            type="secondary"
-            @click="showSideMenu = !showSideMenu"
-          >
-            <component :is="iconMap.sidebar" class="h-4 w-4 text-gray-600 transition-all" />
-          </NcButton>
-        </NcTooltip>
-      </div>
       <template v-if="calendarRange?.length && !isCalendarMetaLoading">
         <LazySmartsheetCalendarYearView v-if="activeCalendarView === 'year'" />
         <template v-if="!isCalendarDataLoading">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/ActiveView.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/ActiveView.vue
new file mode 100644
index 0000000000..7ec69daa3e
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/ActiveView.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+const { activeCalendarView } = useCalendarViewStoreOrThrow()
+</script>
+
+<template>
+  <span class="opacity-0" data-testid="nc-active-calendar-view">
+    {{ activeCalendarView }}
+  </span>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Header.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Header.vue
new file mode 100644
index 0000000000..f601d08df8
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Header.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import dayjs from 'dayjs'
+import { computed } from '#imports'
+
+const { selectedDate, selectedMonth, selectedDateRange, activeCalendarView, paginateCalendarView, activeDates, pageDate } =
+  useCalendarViewStoreOrThrow()
+
+const calendarRangeDropdown = ref(false)
+
+const headerText = computed(() => {
+  switch (activeCalendarView.value) {
+    case 'day':
+      return dayjs(selectedDate.value).format('D MMM YYYY')
+    case 'week':
+      if (selectedDateRange.value.start.isSame(selectedDateRange.value.end, 'month')) {
+        return `${selectedDateRange.value.start.format('D')} - ${selectedDateRange.value.end.format('D MMM YY')}`
+      } else if (selectedDateRange.value.start.isSame(selectedDateRange.value.end, 'year')) {
+        return `${selectedDateRange.value.start.format('D MMM')} - ${selectedDateRange.value.end.format('D MMM YY')}`
+      } else {
+        return `${selectedDateRange.value.start.format('D MMM YY')} - ${selectedDateRange.value.end.format('D MMM YY')}`
+      }
+    case 'month':
+      return dayjs(selectedMonth.value).format('MMM YYYY')
+    case 'year':
+      return dayjs(selectedDate.value).format('YYYY')
+    default:
+      return ''
+  }
+})
+</script>
+
+<template>
+  <div class="flex gap-1">
+    <NcTooltip>
+      <template #title> {{ $t('labels.previous') }}</template>
+      <a-button
+        v-e="`['c:calendar:calendar-${activeCalendarView}-prev-btn']`"
+        class="w-6 h-6 !rounded-lg flex items-center justify-center !bg-gray-100 !border-0"
+        data-testid="nc-calendar-prev-btn"
+        size="small"
+        @click="paginateCalendarView('prev')"
+      >
+        <component :is="iconMap.arrowLeft" class="h-4 !mb-0.9 !-ml-0.8 w-4" />
+      </a-button>
+    </NcTooltip>
+
+    <NcDropdown v-model:visible="calendarRangeDropdown" :auto-close="false" :trigger="['click']">
+      <NcButton
+        :class="{
+          'w-20': activeCalendarView === 'year',
+          'w-26.5': activeCalendarView === 'month',
+          'w-29': activeCalendarView === 'day',
+          'w-38': activeCalendarView === 'week',
+        }"
+        class="!h-6 !bg-gray-100 !border-0"
+        full-width
+        size="small"
+        type="secondary"
+      >
+        <div class="flex w-full px-1 items-center justify-between">
+          <span
+            :class="{
+              'max-w-38 truncate': activeCalendarView === 'week',
+            }"
+            class="font-bold text-[13px] text-center text-gray-800"
+            data-testid="nc-calendar-active-date"
+            >{{ headerText }}</span
+          >
+          <div class="flex-1" />
+          <component :is="iconMap.arrowDown" class="h-4 min-w-4 text-gray-700" />
+        </div>
+      </NcButton>
+
+      <template #overlay>
+        <div v-if="calendarRangeDropdown" class="w-[287px]" @click.stop>
+          <NcDateWeekSelector
+            v-if="activeCalendarView === ('day' as const)"
+            v-model:active-dates="activeDates"
+            v-model:page-date="pageDate"
+            v-model:selected-date="selectedDate"
+            size="medium"
+          />
+          <NcDateWeekSelector
+            v-else-if="activeCalendarView === ('week' as const)"
+            v-model:active-dates="activeDates"
+            v-model:page-date="pageDate"
+            v-model:selected-week="selectedDateRange"
+            is-week-picker
+            size="medium"
+          />
+          <NcMonthYearSelector
+            v-else-if="activeCalendarView === ('month' as const)"
+            v-model:page-date="pageDate"
+            v-model:selected-date="selectedMonth"
+            size="medium"
+          />
+          <NcMonthYearSelector
+            v-else-if="activeCalendarView === ('year' as const)"
+            v-model:page-date="pageDate"
+            v-model:selected-date="selectedDate"
+            is-year-picker
+            size="medium"
+          />
+        </div>
+      </template>
+    </NcDropdown>
+    <NcTooltip>
+      <template #title> {{ $t('labels.next') }}</template>
+      <a-button
+        v-e="`['c:calendar:calendar-${activeCalendarView}-next-btn']`"
+        class="w-6 h-6 !rounded-lg flex items-center !bg-gray-100 !border-0 justify-center"
+        data-testid="nc-calendar-next-btn"
+        size="small"
+        @click="paginateCalendarView('next')"
+      >
+        <component :is="iconMap.arrowRight" class="h-4 !mb-0.8 !-ml-0.5 w-4" />
+      </a-button>
+    </NcTooltip>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.nc-cal-toolbar-header {
+  @apply !h-6 !w-6;
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/CalendarMode.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue
similarity index 52%
rename from packages/nc-gui/components/smartsheet/toolbar/CalendarMode.vue
rename to packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue
index f2bd37cc1e..05d6ed3cc7 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CalendarMode.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Mode.vue
@@ -31,67 +31,78 @@ watch(activeCalendarView, () => {
 <template>
   <div
     v-if="props.tab"
-    class="flex flex-row relative px-1 mx-3 mt-3 rounded-lg gap-x-0.5 nc-calendar-mode-tab"
+    class="flex flex-row px-1 pointer-events-auto mx-3 mt-3 rounded-lg gap-x-0.5 nc-calendar-mode-tab"
     data-testid="nc-calendar-view-mode"
   >
     <div :style="highlightStyle" class="highlight"></div>
     <div
       v-for="mode in ['day', 'week', 'month', 'year']"
       :key="mode"
-      v-e="`['c:calendar:change-calendar-view-${mode}']`"
       :class="{ active: activeCalendarView === mode }"
       :data-testid="`nc-calendar-view-mode-${mode}`"
       class="tab"
       @click="setActiveCalendarMode(mode, $event)"
     >
-      <div class="tab-title nc-tab">{{ $t(`objects.${mode}`) }}</div>
+      <div class="tab-title !text-xs nc-tab">{{ $t(`objects.${mode}`) }}</div>
     </div>
   </div>
-  <div v-else>
-    <NcDropdown :trigger="['click']">
-      <NcButton size="small" type="secondary">
-        {{ $t(`objects.${activeCalendarView}`) }}
-        <component :is="iconMap.arrowDown" />
-      </NcButton>
-      <template #overlay>
-        <NcMenu>
-          <NcMenuItem
-            v-for="mode in ['day', 'week', 'month', 'year']"
-            :key="mode"
-            v-e="`['c:calendar:change-calendar-view-${mode}']`"
-            @click="changeCalendarView(mode)"
-          >
-            {{ $t(`objects.${mode}`) }}
-          </NcMenuItem>
-        </NcMenu>
-      </template>
-    </NcDropdown>
-  </div>
+
+  <NcSelect v-else v-model:value="activeCalendarView" class="!w-22" data-testid="nc-calendar-view-mode" size="small">
+    <a-select-option v-for="option in ['day', 'week', 'month', 'year']" :key="option" :value="option" class="!h-7 !w-20">
+      <div class="flex gap-2 mt-0.5 items-center">
+        <NcTooltip class="truncate !capitalize flex-1 max-w-18" placement="top" show-on-truncate-only>
+          <template #title>
+            <span class="capitalize">
+              {{ option }}
+            </span>
+          </template>
+          {{ option }}
+        </NcTooltip>
+
+        <component
+          :is="iconMap.check"
+          v-if="option === activeCalendarView"
+          id="nc-selected-item-icon"
+          class="text-primary w-4 h-4"
+        />
+      </div>
+    </a-select-option>
+  </NcSelect>
 </template>
 
 <style lang="scss" scoped>
 .highlight {
-  @apply absolute h-9 w-20 transition-all border-b-2 border-brand-500 duration-200;
+  @apply absolute h-6.5 w-14 transition-all border-b-2 border-brand-500 duration-200;
   z-index: 0;
 }
 
+.nc-calendar-mode-menu {
+  :deep(.nc-menu-item-inner) {
+    @apply !text-[13px];
+  }
+}
+
 .tab {
-  @apply flex items-center h-9 w-20 z-10 justify-center px-2 py-1 rounded-lg gap-x-1.5 text-gray-500 hover:text-black cursor-pointer transition-all duration-300 select-none;
+  @apply flex items-center h-7 w-14 z-10 justify-center px-2 py-1 rounded-lg gap-x-1.5 text-gray-500 hover:text-black cursor-pointer transition-all duration-300 select-none;
 }
 
 .tab .tab-title {
-  @apply min-w-0 mb-3 pointer-events-none;
-  word-break: 'keep-all';
+  @apply min-w-0 mb-3  pointer-events-none;
+  word-break: keep-all;
   white-space: 'nowrap';
   display: 'inline';
   line-height: 0.95;
 }
 
 .active {
-  @apply !text-brand-500 font-medium bg-transparent;
+  @apply !text-brand-500 !font-bold  bg-transparent;
 }
 
 .nc-calendar-mode-tab {
-  @apply mr-120 relative;
+  @apply relative;
+}
+
+:deep(.ant-select-selector) {
+  @apply !h-7;
 }
 </style>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
similarity index 76%
rename from packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
rename to packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
index 9f591a48d1..60077363af 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { UITypes, isSystemColumn } from 'nocodb-sdk'
+import { type CalendarRangeType, UITypes, isSystemColumn } from 'nocodb-sdk'
 import type { SelectProps } from 'ant-design-vue'
-import { type CalendarRangeType } from '~/lib/types'
 
 const meta = inject(MetaInj, ref())
 
@@ -101,22 +100,42 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
 <template>
   <NcDropdown v-if="!IsPublic" v-model:visible="calendarRangeDropdown" :trigger="['click']" class="!xs:hidden">
     <div class="nc-calendar-btn">
-      <a-button
+      <NcButton
         v-e="['c:calendar:change-calendar-range']"
         :disabled="isLocked"
-        class="nc-toolbar-btn"
+        class="nc-toolbar-btn !border-0 group !h-6"
+        size="small"
+        type="secondary"
         data-testid="nc-calendar-range-btn"
       >
         <div class="flex items-center gap-2">
-          <component :is="iconMap.calendar" class="h-4 w-4" />
-          <span class="text-capitalize !text-sm font-medium">
-            {{ $t('activity.viewSettings') }}
+          <component :is="iconMap.calendar" class="h-4 w-4 transition-all group-hover:text-brand-500" />
+          <span class="text-capitalize !group-hover:text-brand-500 !text-[13px] font-medium">
+            {{ $t('activity.settings') }}
           </span>
         </div>
-      </a-button>
+      </NcButton>
     </div>
     <template #overlay>
-      <div v-if="calendarRangeDropdown" class="w-full p-6" data-testid="nc-calendar-range-menu" @click.stop>
+      <div v-if="calendarRangeDropdown" class="w-98 space-y-6 rounded-2xl p-6" data-testid="nc-calendar-range-menu" @click.stop>
+        <div>
+          <div class="flex justify-between">
+            <div class="flex items-center gap-3">
+              <component :is="iconMap.calendar" class="text-maroon-500 w-5 h-5" />
+              <span class="font-bold"> {{ `${$t('activity.calendar')} ${$t('activity.viewSettings')}` }}</span>
+            </div>
+
+            <a
+              class="text-sm !text-gray-600 !font-default !hover:text-gray-600"
+              href="`https://docs.nocodb.com/views/view-types/calendar`"
+              target="_blank"
+            >
+              Go to Docs
+            </a>
+          </div>
+          <NcDivider divider-class="!border-gray-200" />
+        </div>
+
         <div
           v-for="(range, id) in _calendar_ranges"
           :key="id"
@@ -139,14 +158,24 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
                 return firstRange?.uidt === r.uidt
               })"
               :key="opId"
+              class="w-40"
               :value="option.value"
             >
-              <div class="flex items-center">
-                <SmartsheetHeaderIcon :column="option" />
-                <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
-                  <template #title>{{ option.label }}</template>
-                  {{ option.label }}
-                </NcTooltip>
+              <div class="flex w-full gap-2 justify-between items-center">
+                <div class="flex items-center">
+                  <SmartsheetHeaderIcon :column="option" />
+                  <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
+                    <template #title>{{ option.label }}</template>
+                    {{ option.label }}
+                  </NcTooltip>
+                </div>
+
+                <component
+                  :is="iconMap.check"
+                  v-if="option.value === range.fk_from_column_id"
+                  id="nc-selected-item-icon"
+                  class="text-primary min-w-4 h-4"
+                />
               </div>
             </a-select-option>
           </NcSelect>
@@ -201,6 +230,11 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
           </NcButton>
             -->
         </div>
+
+        <!--
+        <div class="text-[13px] text-gray-500 py-2">Records in this view will be based on the specified date field.</div>
+-->
+
         <NcButton
           v-if="_calendar_ranges.length === 0"
           class="mt-2"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Today.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Today.vue
new file mode 100644
index 0000000000..e9197e5d26
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Today.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import dayjs from 'dayjs'
+
+const { selectedDate, selectedMonth, selectedDateRange, pageDate, activeCalendarView } = useCalendarViewStoreOrThrow()
+
+const { $e } = useNuxtApp()
+
+const goToToday = () => {
+  $e('c:calendar:calendar-today-btn', activeCalendarView.value)
+  selectedDate.value = dayjs()
+  pageDate.value = dayjs()
+  selectedMonth.value = dayjs()
+  selectedDateRange.value = {
+    start: dayjs().startOf('week'),
+    end: dayjs().endOf('week'),
+  }
+
+  document?.querySelector('.nc-calendar-today')?.scrollIntoView({
+    behavior: 'smooth',
+    block: 'center',
+  })
+}
+</script>
+
+<template>
+  <NcButton
+    class="!border-0 !h-6 !bg-gray-100"
+    data-testid="nc-calendar-today-btn"
+    size="small"
+    type="secondary"
+    @click="goToToday"
+  >
+    <span class="text-gray-700 !text-[13px]">
+      {{ $t('labels.today') }}
+    </span>
+  </NcButton>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index 73f140c8e7..48d50087e5 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@@ -61,17 +61,16 @@ eventBus.on(async (event, column: ColumnType) => {
     overlay-class-name="nc-dropdown-filter-menu nc-toolbar-dropdown"
     class="!xs:hidden"
   >
-    <div :class="{ 'nc-active-btn': filtersLength }">
-      <a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
+    <NcButton v-e="['c:filter']" :disabled="isLocked" class="nc-filter-menu-btn nc-toolbar-btn !border-0 !h-7" size="small" type="secondary">
+      <div class="flex items-center gap-1">
         <div class="flex items-center gap-2">
           <component :is="iconMap.filter" class="h-4 w-4" />
           <!-- Filter -->
-          <span v-if="!isMobileMode" class="text-capitalize !text-sm font-medium">{{ $t('activity.filter') }}</span>
-
-          <span v-if="filtersLength" class="bg-brand-50 text-brand-500 py-1 px-2 text-md rounded-md">{{ filtersLength }}</span>
+          <span v-if="!isMobileMode" class="text-capitalize !text-[13px] font-medium">{{ $t('activity.filter') }}</span>
         </div>
-      </a-button>
-    </div>
+        <span v-if="filtersLength" class="bg-brand-50 text-brand-500 py-1 px-2 text-md rounded-md">{{ filtersLength }}</span>
+      </div>
+    </NcButton>
 
     <template #overlay>
       <SmartsheetToolbarColumnFilter
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 4b97e20506..06eb630e4c 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -311,29 +311,31 @@ useMenuCloseOnEsc(open)
     overlay-class-name="nc-dropdown-fields-menu nc-toolbar-dropdown"
   >
     <div :class="{ 'nc-active-btn': numberOfHiddenFields }">
-      <a-button v-e="['c:fields']" :disabled="isLocked" class="nc-fields-menu-btn nc-toolbar-btn">
-        <div class="flex items-center gap-2">
-          <GeneralIcon
-            v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY"
-            class="h-4 w-4"
-            icon="creditCard"
-          />
-          <component :is="iconMap.fields" v-else class="h-4 w-4" />
-
-          <!-- Fields -->
-          <span v-if="!isMobileMode" class="text-capitalize text-sm font-medium">
-            <template v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY">
-              {{ $t('title.editCards') }}
-            </template>
-            <template v-else>
-              {{ $t('objects.fields') }}
-            </template>
-          </span>
+      <NcButton v-e="['c:fields']" :disabled="isLocked" class="nc-fields-menu-btn nc-toolbar-btn !h-7 !border-0" size="small" type="secondary">
+        <div class="flex items-center gap-1">
+          <div class="flex items-center gap-2">
+            <GeneralIcon
+              v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY"
+              class="h-4 w-4"
+              icon="creditCard"
+            />
+            <component :is="iconMap.fields" v-else class="h-4 w-4" />
+
+            <!-- Fields -->
+            <span v-if="!isMobileMode" class="text-capitalize !text-[13px] font-medium">
+              <template v-if="activeView?.type === ViewTypes.KANBAN || activeView?.type === ViewTypes.GALLERY">
+                {{ $t('title.editCards') }}
+              </template>
+              <template v-else>
+                {{ $t('objects.fields') }}
+              </template>
+            </span>
+          </div>
           <span v-if="numberOfHiddenFields" class="bg-brand-50 text-brand-500 py-1 px-2 text-md rounded-md">
             {{ numberOfHiddenFields }}
           </span>
         </div>
-      </a-button>
+      </NcButton>
     </div>
 
     <template #overlay>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
index e34f3fd1f3..aa2ca3360d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue
@@ -164,18 +164,25 @@ eventBus.on(async (event, column) => {
     overlay-class-name="nc-dropdown-group-by-menu nc-toolbar-dropdown overflow-hidden"
   >
     <div :class="{ 'nc-active-btn': groupedByColumnIds?.length }">
-      <a-button v-e="['c:group-by']" class="nc-group-by-menu-btn nc-toolbar-btn" :disabled="isLocked">
-        <div class="flex items-center gap-2">
-          <component :is="iconMap.group" class="h-4 w-4" />
-
-          <!-- Group By -->
-          <span v-if="!isMobileMode" class="text-capitalize !text-sm font-medium">{{ $t('activity.group') }}</span>
+      <NcButton
+        v-e="['c:group-by']"
+        :disabled="isLocked"
+        class="nc-group-by-menu-btn nc-toolbar-btn !border-0 !h-7"
+        size="small"
+        type="secondary"
+      >
+        <div class="flex items-center gap-1">
+          <div class="flex items-center gap-2">
+            <component :is="iconMap.group" class="h-4 w-4" />
 
+            <!-- Group By -->
+            <span v-if="!isMobileMode" class="text-capitalize !text-[13px] font-medium">{{ $t('activity.group') }}</span>
+          </div>
           <span v-if="groupedByColumnIds?.length" class="bg-brand-50 text-brand-500 py-1 px-2 text-md rounded-md">{{
             groupedByColumnIds.length
           }}</span>
         </div>
-      </a-button>
+      </NcButton>
     </div>
     <template #overlay>
       <SmartsheetToolbarCreateGroupBy
diff --git a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
index 72ffdc6151..19f20fbcb7 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { OrgUserRoles, ProjectRoles, extractRolesObj } from 'nocodb-sdk'
 import type { GridType } from 'nocodb-sdk'
+import { OrgUserRoles, ProjectRoles, extractRolesObj } from 'nocodb-sdk'
 
 const rowHeightOptions: { icon: keyof typeof iconMap; heightClass: string }[] = [
   {
@@ -84,12 +84,18 @@ useMenuCloseOnEsc(open)
 <template>
   <a-dropdown v-model:visible="open" offset-y class="" :trigger="['click']" overlay-class-name="nc-dropdown-height-menu">
     <div>
-      <a-button v-e="['c:row-height']" class="nc-height-menu-btn nc-toolbar-btn" :disabled="isLocked">
+      <NcButton
+        v-e="['c:row-height']"
+        :disabled="isLocked"
+        class="nc-height-menu-btn nc-toolbar-btn !border-0 !h-7"
+        size="small"
+        type="secondary"
+      >
         <div class="flex items-center gap-0.5">
           <component :is="iconMap.rowHeight" class="!h-3.75 !w-3.75" />
           <!-- <span v-if="!isMobileMode" class="!text-sm !font-medium">{{ $t('objects.rowHeight') }}</span> -->
         </div>
-      </a-button>
+      </NcButton>
     </div>
     <template #overlay>
       <div
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 3de11ff01a..e287de8f75 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { UITypes, isSystemColumn } from 'nocodb-sdk'
 import type { ColumnType, TableType } from 'nocodb-sdk'
+import { UITypes, isSystemColumn } from 'nocodb-sdk'
 
 const reloadData = inject(ReloadViewDataHookInj)!
 
@@ -95,7 +95,7 @@ onClickOutside(globalSearchWrapperRef, (e) => {
     </a-button>
     <div
       v-else
-      class="flex flex-row border-1 rounded-lg h-8 xs:(h-10 ml-0) ml-1 border-gray-200 overflow-hidden focus-within:border-primary"
+      class="flex flex-row border-1 rounded-lg h-7 xs:(h-10 ml-0) ml-1 border-gray-200 overflow-hidden focus-within:border-primary"
       :class="{ 'border-primary': search.query.length !== 0 }"
     >
       <NcDropdown
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index a8f5fea6bc..3276af8f1b 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { PlanLimitTypes, RelationTypes, UITypes, getEquivalentUIType, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
+import { PlanLimitTypes, RelationTypes, UITypes, getEquivalentUIType, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
 
 const meta = inject(MetaInj, ref())
 const view = inject(ActiveViewInj, ref())
@@ -20,6 +20,8 @@ const { isMobileMode } = useGlobal()
 
 const { getPlanLimit } = useWorkspace()
 
+const isCalendar = inject(IsCalendarInj, ref(false))
+
 eventBus.on((event) => {
   if (event === SmartsheetStoreEvents.SORT_RELOAD) {
     loadSorts()
@@ -110,16 +112,27 @@ onMounted(() => {
     overlay-class-name="nc-dropdown-sort-menu nc-toolbar-dropdown"
   >
     <div :class="{ 'nc-active-btn': sorts?.length }">
-      <a-button v-e="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked">
-        <div class="flex items-center gap-2">
-          <component :is="iconMap.sort" class="h-4 w-4 text-inherit" />
-
-          <!-- Sort -->
-          <span v-if="!isMobileMode" class="text-capitalize !text-sm font-medium">{{ $t('activity.sort') }}</span>
-
+      <NcButton
+        v-e="['c:sort']"
+        :class="{
+          '!border-1 !rounded-lg !h-7': isCalendar,
+          '!border-0 ': !isCalendar,
+        }"
+        :disabled="isLocked"
+        class="nc-sort-menu-btn nc-toolbar-btn"
+        size="small"
+        type="secondary"
+      >
+        <div class="flex items-center gap-1">
+          <div class="flex items-center gap-2">
+            <component :is="iconMap.sort" class="h-4 w-4 text-inherit" />
+
+            <!-- Sort -->
+            <span v-if="!isMobileMode" class="text-capitalize !text-[13px] font-medium">{{ $t('activity.sort') }}</span>
+          </div>
           <span v-if="sorts?.length" class="bg-brand-50 text-brand-500 py-1 px-2 text-md rounded-md">{{ sorts.length }}</span>
         </div>
-      </a-button>
+      </NcButton>
     </div>
     <template #overlay>
       <SmartsheetToolbarCreateSort v-if="!sorts.length" :is-parent-open="open" @created="addSort" />
diff --git a/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue b/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
index 433e6ca1d9..125282e417 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { UITypes } from 'nocodb-sdk'
 import type { KanbanType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
 import type { SelectProps } from 'ant-design-vue'
 
 provide(IsKanbanInj, ref(true))
@@ -96,9 +96,11 @@ const handleChange = () => {
     class="!xs:hidden"
   >
     <div class="nc-kanban-btn">
-      <a-button
+      <NcButton
         v-e="['c:kanban:change-grouping-field']"
-        class="nc-kanban-stacked-by-menu-btn nc-toolbar-btn"
+        class="nc-kanban-stacked-by-menu-btn nc-toolbar-btn !border-0 !h-7"
+        size="small"
+        type="secondary"
         :disabled="isLocked"
       >
         <div class="flex items-center gap-1">
@@ -108,7 +110,7 @@ const handleChange = () => {
             <span class="font-bold ml-0.25">{{ groupingField }}</span>
           </span>
         </div>
-      </a-button>
+      </NcButton>
     </div>
     <template #overlay>
       <div v-if="open" class="p-6 w-90 bg-white shadow-lg nc-table-toolbar-menu !border-1 border-gray-50 rounded-2xl" @click.stop>
diff --git a/packages/nc-gui/components/smartsheet/topbar/SelectMode.vue b/packages/nc-gui/components/smartsheet/topbar/SelectMode.vue
index b6c42a6746..88e8f5a7ea 100644
--- a/packages/nc-gui/components/smartsheet/topbar/SelectMode.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/SelectMode.vue
@@ -24,7 +24,7 @@ const onClickDetails = () => {
       }"
       @click="onViewsTabChange('view')"
     >
-      <GeneralViewIcon v-if="activeView?.type" class="tab-icon" :meta="{ type: activeView?.type }" ignore-color />
+      <GeneralViewIcon v-if="activeView?.type" :meta="{ type: activeView?.type }" class="tab-icon" ignore-color />
       <GeneralLoader v-else class="tab-icon" />
       <div class="tab-title nc-tab">{{ $t('general.data') }}</div>
     </div>
@@ -56,7 +56,7 @@ const onClickDetails = () => {
 
 .tab-icon {
   font-size: 1.1rem !important;
-  @apply min-w-4.5;
+  @apply w-4.5;
 }
 .tab .tab-title {
   @apply min-w-0;
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index 6b98f9a8de..c67165e1b3 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -162,7 +162,7 @@ const onResize = (sizes: { min: number; max: number; size: number }[]) => {
       <Splitpanes v-if="openedViewsTab === 'view'" class="nc-extensions-content-resizable-wrapper" @resized="onResize">
         <Pane class="flex flex-col h-full flex-1 min-w-0" size="60">
           <LazySmartsheetToolbar v-if="!isForm" />
-          <div class="flex flex-row w-full" :style="{ height: isForm ? '100%' : 'calc(100% - var(--topbar-height))' }">
+          <div :style="{ height: isForm ? '100%' : 'calc(100% - var(--toolbar-height))' }" class="flex flex-row w-full">
             <Transition name="layout" mode="out-in">
               <div v-if="openedViewsTab === 'view'" class="flex flex-1 min-h-0 w-3/4">
                 <div class="h-full flex-1 min-w-0 min-h-0 bg-white">
diff --git a/packages/nc-gui/composables/useCalendarViewStore.ts b/packages/nc-gui/composables/useCalendarViewStore.ts
index 53a85f50aa..3c2ae2155a 100644
--- a/packages/nc-gui/composables/useCalendarViewStore.ts
+++ b/packages/nc-gui/composables/useCalendarViewStore.ts
@@ -15,7 +15,7 @@ const formatData = (list: Record<string, any>[]) =>
 
 const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
   (
-    meta: Ref<((CalendarType & { id: string }) | TableType) | undefined>,
+    meta: Ref<TableType | undefined>,
     viewMeta:
       | Ref<(ViewType | CalendarType | undefined) & { id: string }>
       | ComputedRef<
@@ -54,7 +54,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
     const isCalendarMetaLoading = ref<boolean>(false)
 
-    const showSideMenu = ref(false)
+    const showSideMenu = ref(true)
 
     const selectedDateRange = ref<{
       start: dayjs.Dayjs
@@ -80,7 +80,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
     const { base } = storeToRefs(useBase())
 
-    const { $api } = useNuxtApp()
+    const { $api, $e } = useNuxtApp()
 
     const { t } = useI18n()
 
@@ -371,7 +371,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
               sortsArr: sorts.value,
               filtersArr: activeDateFilter,
             })
-        activeDates.value = res.dates.map((dateObj: unknown) => dayjs(dateObj))
+        activeDates.value = res.dates.map((dateObj: unknown) => dayjs(dateObj as string))
 
         if (res.count > 3000 && activeCalendarView.value !== 'year') {
           message.warning(
@@ -380,12 +380,20 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
         }
       } catch (e) {
         activeDates.value = []
-        message.error(`${t('msg.error.fetchingActiveDates')} ${await extractSdkResponseErrorMsg(e)}`)
+        message.error(
+          `${t('msg.error.fetchingActiveDates')} ${await extractSdkResponseErrorMsg(
+            e as Error & {
+              response: { data: { message: string } }
+            },
+          )}`,
+        )
         console.log(e)
       }
     }
 
     const changeCalendarView = async (view: 'month' | 'year' | 'day' | 'week') => {
+      $e('c:calendar:change-calendar-view', view)
+
       try {
         activeCalendarView.value = view
         await updateCalendarMeta({
@@ -414,15 +422,27 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
         const calMeta = typeof res.meta === 'string' ? JSON.parse(res.meta) : res.meta
         activeCalendarView.value = calMeta?.active_view
         if (!activeCalendarView.value) activeCalendarView.value = 'month'
-        calendarRange.value = res?.calendar_range?.map((range: CalendarRangeType) => {
-          return {
-            id: range.id,
-            fk_from_col: meta.value?.columns?.find((col) => col.id === range.fk_from_column_id),
-            fk_to_col: range.fk_to_column_id ? meta.value?.columns?.find((col) => col.id === range.fk_to_column_id) : null,
-          }
-        }) as any
-      } catch (e) {
-        message.error(`Error loading calendar meta ${await extractSdkResponseErrorMsg(e)}`)
+        calendarRange.value = res?.calendar_range?.map(
+          (
+            range: CalendarRangeType & {
+              id?: string
+            },
+          ) => {
+            return {
+              id: range?.id,
+              fk_from_col: meta.value?.columns?.find((col) => col.id === range.fk_from_column_id),
+              fk_to_col: range.fk_to_column_id ? meta.value?.columns?.find((col) => col.id === range.fk_to_column_id) : null,
+            }
+          },
+        ) as any
+      } catch (e: unknown) {
+        message.error(
+          `Error loading calendar meta ${await extractSdkResponseErrorMsg(
+            e as Error & {
+              response: { data: { message: string } }
+            },
+          )}`,
+        )
       } finally {
         isCalendarMetaLoading.value = false
       }
@@ -459,12 +479,6 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
           nextDate = toDate.add(1, 'day').startOf('day')
           break
         }
-        case 'year':
-          fromDate = selectedDate.value.startOf('year')
-          toDate = selectedDate.value.endOf('year')
-          prevDate = fromDate.subtract(1, 'day').endOf('day')
-          nextDate = toDate.add(1, 'day').startOf('day')
-          break
         case 'day':
           fromDate = selectedDate.value.startOf('day')
           toDate = selectedDate.value.endOf('day')
@@ -504,7 +518,13 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
             })
         formattedData.value = formatData(res!.list)
       } catch (e) {
-        message.error(`${t('msg.error.fetchingCalendarData')} ${await extractSdkResponseErrorMsg(e)}`)
+        message.error(
+          `${t('msg.error.fetchingCalendarData')} ${await extractSdkResponseErrorMsg(
+            e as Error & {
+              response: { data: { message: string } }
+            },
+          )}`,
+        )
         console.log(e)
       } finally {
         isCalendarDataLoading.value = false
@@ -604,7 +624,13 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
         formattedSideBarData.value = formatData(res!.list)
       } catch (e) {
-        message.error(`${t('msg.error.fetchingCalendarData')} ${await extractSdkResponseErrorMsg(e)}`)
+        message.error(
+          `${t('msg.error.fetchingCalendarData')} ${await extractSdkResponseErrorMsg(
+            e as Error & {
+              response: { data: { message: string } }
+            },
+          )}`,
+        )
         console.log(e)
       } finally {
         isSidebarLoading.value = false
@@ -635,9 +661,6 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
           viewMeta?.value?.id as string,
           id,
           updateObj,
-          {
-            query: { ignoreWebhook: !undo },
-          },
           // todo:
           // {
           //   query: { ignoreWebhook: !saved }
@@ -769,6 +792,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
     })
 
     watch(sideBarFilterOption, async () => {
+      $e('a:calendar:sidebar-filter', sideBarFilterOption.value)
       await loadSidebarData()
     })
 
@@ -801,7 +825,6 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       isSidebarLoading,
       showSideMenu,
       selectedTime,
-      updateCalendarMeta,
       calendarMetaData,
       updateRowProperty,
       activeCalendarView,
diff --git a/packages/nc-gui/composables/useViewColumns.ts b/packages/nc-gui/composables/useViewColumns.ts
index b71286244c..0e63c5562d 100644
--- a/packages/nc-gui/composables/useViewColumns.ts
+++ b/packages/nc-gui/composables/useViewColumns.ts
@@ -291,6 +291,7 @@ const [useProvideViewColumns, useViewColumns] = useInjectionState(
       const fieldIndex = fields.value?.findIndex((f) => f.fk_column_id === field.fk_column_id)
       if (!fieldIndex && fieldIndex !== 0) return
       field[style] = status
+      $e('a:fields:style', { style, status })
       saveOrUpdate(field, fieldIndex, true)
     }
 
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index fb69c32884..3021a2f11a 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -448,6 +448,7 @@
     "noResultsMatchedYourSearch": "Your search did not yield any matching results"
   },
   "labels": {
+    "today": "Today",
     "txt": "TXT Record value",
     "transferOwnership": "Transfer Ownership",
     "recentActivity": "Recent Activity",
@@ -585,7 +586,7 @@
     "untitledToken": "Untitled token",
     "tableName": "Table name",
     "dashboardName": "Dashboard name",
-    "createView": "Create a View",
+    "createView": "Create view",
     "creatingView": "Creating View",
     "duplicateView": "Duplicate View",
     "duplicateGridView": "Duplicate Grid View",
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index 18c80ba434..a22f3de21d 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -74,6 +74,7 @@ import Record from '~icons/nc-icons/record'
 import Project from '~icons/nc-icons/project'
 import LookupIcon from '~icons/nc-icons/lookup'
 import FileImageIcon from '~icons/nc-icons/file-image'
+import Calendar from '~icons/lucide/calendar'
 
 import PhUsers from '~icons/ph/users'
 import PhUser from '~icons/ph/user'
@@ -389,6 +390,7 @@ export const iconMap = {
   workspaceDefault: MsGroup,
   project: Project,
   search: NcSearch,
+  calendar: Calendar,
   error: h('span', { class: 'material-symbols' }, 'error'),
   info: h(MsInfo, {}, () => 'info'),
   inbox: h('span', { class: 'material-symbols' }, 'inbox'),
@@ -493,7 +495,6 @@ export const iconMap = {
   web: h('span', { class: 'material-symbols' }, 'web'),
   webhook: h('span', { class: 'material-symbols' }, 'webhook'),
   boolean: h('span', { class: 'material-symbols' }, 'check_box'),
-  calendar: h('span', { class: 'material-symbols' }, 'event_note'),
   singleSelect: h('span', { class: 'material-symbols' }, 'radio_button_checked'),
   multiSelect: h('span', { class: 'material-symbols' }, 'check_box_outline_blank'),
   datetime: h('span', { class: 'material-symbols' }, 'date_range'),
diff --git a/packages/nc-gui/windi.config.ts b/packages/nc-gui/windi.config.ts
index 8267483f5e..d123a34cce 100644
--- a/packages/nc-gui/windi.config.ts
+++ b/packages/nc-gui/windi.config.ts
@@ -80,6 +80,7 @@ export default defineConfig({
         extraLight: 250,
         light: 350,
         normal: 450,
+        default: 500,
         medium: 550,
         bold: 650,
         black: 750,
diff --git a/tests/playwright/pages/Dashboard/Calendar/CalendarSideMenu.ts b/tests/playwright/pages/Dashboard/Calendar/CalendarSideMenu.ts
index c3202e5fae..eddbcd8d1d 100644
--- a/tests/playwright/pages/Dashboard/Calendar/CalendarSideMenu.ts
+++ b/tests/playwright/pages/Dashboard/Calendar/CalendarSideMenu.ts
@@ -7,11 +7,19 @@ export class CalendarSideMenuPage extends BasePage {
 
   readonly new_record_btn: Locator;
 
+  readonly prev_btn: Locator;
+  readonly next_btn: Locator;
+  readonly searchToggleBtn: Locator;
   constructor(parent: CalendarPage) {
     super(parent.rootPage);
     this.parent = parent;
 
     this.new_record_btn = this.get().getByTestId('nc-calendar-side-menu-new-btn');
+
+    this.next_btn = this.parent.toolbar.get().getByTestId('nc-calendar-next-btn');
+    this.prev_btn = this.parent.toolbar.get().getByTestId('nc-calendar-prev-btn');
+
+    this.searchToggleBtn = this.get().getByTestId('nc-calendar-sidebar-search-btn');
   }
 
   get() {
@@ -25,10 +33,32 @@ export class CalendarSideMenuPage extends BasePage {
   }
 
   async searchRecord({ query }: { query: string }) {
+    if (await this.searchToggleBtn.isVisible()) {
+      await this.searchToggleBtn.click();
+    }
     const searchInput = this.get().getByTestId('nc-calendar-sidebar-search');
+
     await searchInput.fill(query);
   }
 
+  async clickPrev() {
+    await this.prev_btn.click();
+  }
+  async clickNext() {
+    await this.next_btn.click();
+  }
+
+  async moveToDate({ date, action }: { date: string; action: 'prev' | 'next' }) {
+    console.log(await this.parent.toolbar.getActiveDate());
+    while ((await this.parent.toolbar.getActiveDate()) !== date) {
+      if (action === 'prev') {
+        await this.clickPrev();
+      } else {
+        await this.clickNext();
+      }
+    }
+  }
+
   async verifySideBarRecords({ records }: { records: string[] }) {
     let attempts = 0;
     let sideBarRecords: Locator;
diff --git a/tests/playwright/pages/Dashboard/Calendar/CalendarTopBar.ts b/tests/playwright/pages/Dashboard/Calendar/CalendarTopBar.ts
deleted file mode 100644
index b42fd450e9..0000000000
--- a/tests/playwright/pages/Dashboard/Calendar/CalendarTopBar.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { expect, Locator } from '@playwright/test';
-import BasePage from '../../Base';
-import { CalendarPage } from './index';
-
-export class CalendarTopbarPage extends BasePage {
-  readonly parent: CalendarPage;
-
-  readonly today_btn: Locator;
-  readonly prev_btn: Locator;
-  readonly next_btn: Locator;
-
-  readonly side_bar_btn: Locator;
-
-  constructor(parent: CalendarPage) {
-    super(parent.rootPage);
-    this.parent = parent;
-
-    this.next_btn = this.get().getByTestId('nc-calendar-next-btn');
-    this.prev_btn = this.get().getByTestId('nc-calendar-prev-btn');
-    this.today_btn = this.get().getByTestId('nc-calendar-today-btn');
-
-    this.side_bar_btn = this.get().getByTestId('nc-calendar-side-bar-btn');
-  }
-
-  get() {
-    return this.rootPage.getByTestId('nc-calendar-topbar');
-  }
-
-  async getActiveDate() {
-    return this.get().getByTestId('nc-calendar-active-date').textContent();
-  }
-
-  async verifyActiveCalendarView({ view }: { view: string }) {
-    const activeView = this.get().getByTestId('nc-active-calendar-view');
-
-    await expect(activeView).toContainText(view);
-  }
-
-  async clickPrev() {
-    await this.prev_btn.click();
-  }
-  async clickNext() {
-    await this.next_btn.click();
-  }
-  async clickToday() {
-    await this.today_btn.click();
-  }
-
-  async moveToDate({ date, action }: { date: string; action: 'prev' | 'next' }) {
-    while ((await this.getActiveDate()) !== date) {
-      if (action === 'prev') {
-        await this.clickPrev();
-      } else {
-        await this.clickNext();
-      }
-    }
-  }
-
-  async toggleSideBar() {
-    await this.side_bar_btn.click();
-    await this.rootPage.waitForTimeout(500);
-  }
-}
diff --git a/tests/playwright/pages/Dashboard/Calendar/CalendarWeekDateTime.ts b/tests/playwright/pages/Dashboard/Calendar/CalendarWeekDateTime.ts
index f8ec7cf31d..a55eee139c 100644
--- a/tests/playwright/pages/Dashboard/Calendar/CalendarWeekDateTime.ts
+++ b/tests/playwright/pages/Dashboard/Calendar/CalendarWeekDateTime.ts
@@ -29,6 +29,8 @@ export class CalendarWeekDateTimePage extends BasePage {
   }) {
     const recordContainer = this.getRecordContainer();
     const recordCard = recordContainer.getByTestId(`nc-calendar-week-record-${record}`);
+
+    await recordCard.scrollIntoViewIfNeeded();
     const toDay = this.get()
       .getByTestId('nc-calendar-week-day')
       .nth(to.dayIndex)
@@ -40,7 +42,10 @@ export class CalendarWeekDateTimePage extends BasePage {
     await this.rootPage.mouse.down();
     await this.rootPage.waitForTimeout(500);
 
-    await this.rootPage.mouse.move(cord.x + cord.width / 2, cord.y + cord.height / 2);
+    await this.rootPage.mouse.move(cord.x + Math.ceil(cord.width / 2), cord.y + Math.ceil(cord.height / 2));
+    // await toDay.scrollIntoViewIfNeeded();
+    await this.rootPage.waitForTimeout(500);
+
     await this.rootPage.mouse.up();
   }
 
@@ -54,8 +59,8 @@ export class CalendarWeekDateTimePage extends BasePage {
         hour.click({
           force: true,
           position: {
-            x: -1,
-            y: -1,
+            x: 1,
+            y: 1,
           },
         }),
       requestUrlPathToMatch: '/api/v1/db/data/noco',
diff --git a/tests/playwright/pages/Dashboard/Calendar/CalendarYear.ts b/tests/playwright/pages/Dashboard/Calendar/CalendarYear.ts
index 0b8cdb2c4a..f280ca2137 100644
--- a/tests/playwright/pages/Dashboard/Calendar/CalendarYear.ts
+++ b/tests/playwright/pages/Dashboard/Calendar/CalendarYear.ts
@@ -1,4 +1,3 @@
-import { expect, Locator } from '@playwright/test';
 import BasePage from '../../Base';
 import { CalendarPage } from './index';
 
diff --git a/tests/playwright/pages/Dashboard/Calendar/index.ts b/tests/playwright/pages/Dashboard/Calendar/index.ts
index bd650f2cd1..9caca80426 100644
--- a/tests/playwright/pages/Dashboard/Calendar/index.ts
+++ b/tests/playwright/pages/Dashboard/Calendar/index.ts
@@ -3,7 +3,6 @@ import BasePage from '../../Base';
 import { ToolbarPage } from '../common/Toolbar';
 import { expect } from '@playwright/test';
 import { TopbarPage } from '../common/Topbar';
-import { CalendarTopbarPage } from './CalendarTopBar';
 import { CalendarSideMenuPage } from './CalendarSideMenu';
 import { CalendarMonthPage } from './CalendarMonth';
 import { CalendarYearPage } from './CalendarYear';
@@ -16,7 +15,6 @@ export class CalendarPage extends BasePage {
   readonly dashboard: DashboardPage;
   readonly toolbar: ToolbarPage;
   readonly topbar: TopbarPage;
-  readonly calendarTopbar: CalendarTopbarPage;
   readonly sideMenu: CalendarSideMenuPage;
   readonly calendarMonth: CalendarMonthPage;
   readonly calendarYear: CalendarYearPage;
@@ -30,7 +28,6 @@ export class CalendarPage extends BasePage {
     this.dashboard = dashboard;
     this.toolbar = new ToolbarPage(this);
     this.topbar = new TopbarPage(this);
-    this.calendarTopbar = new CalendarTopbarPage(this);
     this.sideMenu = new CalendarSideMenuPage(this);
     this.calendarMonth = new CalendarMonthPage(this);
     this.calendarYear = new CalendarYearPage(this);
@@ -60,4 +57,9 @@ export class CalendarPage extends BasePage {
   async waitLoading() {
     await this.rootPage.waitForTimeout(2000);
   }
+
+  async toggleSideBar() {
+    await this.rootPage.getByTestId('nc-calendar-side-bar-btn').click();
+    await this.rootPage.waitForTimeout(500);
+  }
 }
diff --git a/tests/playwright/pages/Dashboard/ViewSidebar/index.ts b/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
index 946dd81988..fa6af9c9ee 100644
--- a/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
+++ b/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
@@ -161,7 +161,7 @@ export class ViewSidebarPage extends BasePage {
         force: true,
       });
     const submitAction = () =>
-      this.rootPage.locator('.ant-modal-content').locator('button:has-text("Create a View"):visible').click();
+      this.rootPage.locator('.ant-modal-content').locator('button:has-text("Create view"):visible').click();
     await this.waitForResponse({
       httpMethodsToMatch: ['POST'],
       requestUrlPathToMatch: '/api/v1/db/meta/tables/',
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/CalendarViewMode.ts b/tests/playwright/pages/Dashboard/common/Toolbar/CalendarViewMode.ts
index cef43a9b80..dc8c975ed7 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/CalendarViewMode.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/CalendarViewMode.ts
@@ -13,6 +13,9 @@ export class ToolbarCalendarViewModePage extends BasePage {
   }
 
   async changeCalendarView({ title }: { title: string }) {
-    await this.get().getByTestId(`nc-calendar-view-mode-${title}`).click();
+    await this.get().click({ force: true });
+    await this.rootPage.waitForTimeout(500);
+
+    await this.rootPage.locator('.rc-virtual-list-holder-inner > div').locator(`text="${title}"`).click();
   }
 }
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
index 36f7ebbc20..fb6df7ba32 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
@@ -42,6 +42,7 @@ export class ToolbarPage extends BasePage {
   readonly btn_rowHeight: Locator;
   readonly btn_groupBy: Locator;
   readonly btn_calendarSettings: Locator;
+  readonly today_btn: Locator;
 
   constructor(parent: GridPage | GalleryPage | FormPage | KanbanPage | MapPage | CalendarPage) {
     super(parent.rootPage);
@@ -65,6 +66,8 @@ export class ToolbarPage extends BasePage {
     this.btn_rowHeight = this.get().locator(`button.nc-height-menu-btn`);
     this.btn_groupBy = this.get().locator(`button.nc-group-by-menu-btn`);
     this.btn_calendarSettings = this.get().getByTestId('nc-calendar-range-btn');
+
+    this.today_btn = this.get().getByTestId('nc-calendar-today-btn');
   }
 
   get() {
@@ -88,6 +91,10 @@ export class ToolbarPage extends BasePage {
     if (menuOpen) await this.calendarRange.get().waitFor({ state: 'hidden' });
   }
 
+  async getActiveDate() {
+    return this.get().getByTestId('nc-calendar-active-date').textContent();
+  }
+
   async clickFields() {
     const menuOpen = await this.fields.get().isVisible();
 
@@ -145,6 +152,12 @@ export class ToolbarPage extends BasePage {
     }
   }
 
+  async verifyActiveCalendarView({ view }: { view: string }) {
+    const activeView = this.get().getByTestId('nc-active-calendar-view');
+
+    await expect(activeView).toContainText(view);
+  }
+
   async clickFilter({
     // `networkValidation` is used to verify that api calls are made when the button is clicked
     // which happens when the filter is opened for the first time
@@ -206,6 +219,10 @@ export class ToolbarPage extends BasePage {
     await this.get().locator(`.nc-toolbar-btn.nc-height-menu-btn`).click();
   }
 
+  async clickToday() {
+    await this.today_btn.click();
+  }
+
   async verifyStackByButton({ title }: { title: string }) {
     await this.get().locator(`.nc-toolbar-btn.nc-kanban-stacked-by-menu-btn`).waitFor({ state: 'visible' });
     await expect(
diff --git a/tests/playwright/tests/db/general/toolbarOperations.spec.ts b/tests/playwright/tests/db/general/toolbarOperations.spec.ts
index a7cb00afaf..c1ec205060 100644
--- a/tests/playwright/tests/db/general/toolbarOperations.spec.ts
+++ b/tests/playwright/tests/db/general/toolbarOperations.spec.ts
@@ -506,7 +506,7 @@ test.describe('Toolbar operations (GRID)', () => {
   });
 
   test('Duplicate View and Verify GroupBy', async () => {
-    if (enableQuickRun()) test.skip();
+    // if (enableQuickRun()) test.skip();
     await dashboard.treeView.openTable({ title: 'Film' });
     await dashboard.viewSidebar.createGridView({ title: 'Film Grid' });
 
diff --git a/tests/playwright/tests/db/views/viewCalendar.spec.ts b/tests/playwright/tests/db/views/viewCalendar.spec.ts
index 86c85a97b0..38acba1b49 100644
--- a/tests/playwright/tests/db/views/viewCalendar.spec.ts
+++ b/tests/playwright/tests/db/views/viewCalendar.spec.ts
@@ -36,7 +36,7 @@ const dateRecords = [
   {
     Id: 1,
     Title: 'Team Catchup',
-    StartDate: '2024-01-01 09:00',
+    StartDate: '2024-01-01 08:00',
     EndDate: '2024-01-01 10:00',
   },
   {
@@ -161,40 +161,38 @@ test.describe('Calendar View', () => {
     // Verify Sidebar
     const calendar = dashboard.calendar;
 
-    await calendar.calendarTopbar.toggleSideBar();
-
     await calendar.verifySideBarOpen();
 
-    await calendar.calendarTopbar.toggleSideBar();
+    await calendar.toggleSideBar();
 
     await calendar.verifySideBarClosed();
 
-    await calendar.calendarTopbar.toggleSideBar();
+    await calendar.toggleSideBar();
 
     await calendar.verifySideBarOpen();
 
     // Verify Calendar View Modes
-    await calendar.calendarTopbar.verifyActiveCalendarView({ view: 'month' });
+    await calendar.toolbar.verifyActiveCalendarView({ view: 'month' });
 
     await toolbar.calendarViewMode.changeCalendarView({ title: 'week' });
 
-    await calendar.calendarTopbar.verifyActiveCalendarView({ view: 'week' });
+    await calendar.toolbar.verifyActiveCalendarView({ view: 'week' });
 
     await toolbar.calendarViewMode.changeCalendarView({ title: 'day' });
 
-    await calendar.calendarTopbar.verifyActiveCalendarView({ view: 'day' });
+    await calendar.toolbar.verifyActiveCalendarView({ view: 'day' });
 
     await toolbar.calendarViewMode.changeCalendarView({ title: 'month' });
 
-    await calendar.calendarTopbar.verifyActiveCalendarView({ view: 'month' });
+    await calendar.toolbar.verifyActiveCalendarView({ view: 'month' });
 
     await toolbar.calendarViewMode.changeCalendarView({ title: 'year' });
 
-    await calendar.calendarTopbar.verifyActiveCalendarView({ view: 'year' });
+    await calendar.toolbar.verifyActiveCalendarView({ view: 'year' });
 
     await toolbar.calendarViewMode.changeCalendarView({ title: 'month' });
 
-    await calendar.calendarTopbar.moveToDate({ date: 'January 2024', action: 'prev' });
+    await calendar.sideMenu.moveToDate({ date: 'Jan 2024', action: 'prev' });
 
     // Verify Sidebar Records & Filters
 
@@ -250,25 +248,25 @@ test.describe('Calendar View', () => {
 
     await calendar.toolbar.calendarViewMode.changeCalendarView({ title: 'day' });
 
-    await calendar.calendarTopbar.moveToDate({
-      date: '1 January 2024',
+    await calendar.sideMenu.moveToDate({
+      date: '1 Jan 2024',
       action: 'prev',
     });
 
     await calendar.sideMenu.verifySideBarRecords({ records: dateRecords.filter(f => f.Title).map(f => f.Title) });
 
-    await calendar.calendarDayDateTime.selectHour({ hourIndex: 10 });
-
     await calendar.sideMenu.updateFilter({ filter: 'In selected hours' });
 
+    await calendar.calendarDayDateTime.selectHour({ hourIndex: 10 });
+
     await calendar.sideMenu.verifySideBarRecords({ records: ['Team Catchup'] });
 
     await calendar.calendarDayDateTime.selectHour({ hourIndex: 1 });
 
     await calendar.sideMenu.verifySideBarRecords({ records: [] });
 
-    await calendar.calendarTopbar.moveToDate({
-      date: '3 January 2024',
+    await calendar.sideMenu.moveToDate({
+      date: '3 Jan 2024',
       action: 'next',
     });
 
@@ -276,10 +274,10 @@ test.describe('Calendar View', () => {
 
     await toolbar.calendarViewMode.changeCalendarView({ title: 'week' });
 
-    await calendar.calendarWeekDateTime.selectHour({ dayIndex: 0, hourIndex: 10 });
-
     await calendar.sideMenu.updateFilter({ filter: 'In selected hours' });
 
+    await calendar.calendarWeekDateTime.selectHour({ dayIndex: 0, hourIndex: 10 });
+
     await calendar.sideMenu.verifySideBarRecords({ records: ['Team Catchup'] });
 
     await calendar.calendarWeekDateTime.selectHour({ dayIndex: 0, hourIndex: 1 });
@@ -307,9 +305,9 @@ test.describe('Calendar View', () => {
 
     const calendar = dashboard.calendar;
 
-    await calendar.calendarTopbar.toggleSideBar();
+    // await calendar.toggleSideBar();
 
-    await calendar.calendarTopbar.moveToDate({ date: 'January 2024', action: 'prev' });
+    await calendar.sideMenu.moveToDate({ date: 'Jan 2024', action: 'prev' });
 
     await calendar.calendarMonth.dragAndDrop({
       record: 'Team Catchup',
@@ -330,7 +328,7 @@ test.describe('Calendar View', () => {
 
     await calendar.toolbar.calendarViewMode.changeCalendarView({ title: 'week' });
 
-    await calendar.calendarTopbar.moveToDate({
+    await calendar.sideMenu.moveToDate({
       date: '1 - 7 Jan 24',
       action: 'prev',
     });
@@ -339,13 +337,13 @@ test.describe('Calendar View', () => {
       record: 'Team Catchup',
       to: {
         dayIndex: 0,
-        hourIndex: 5,
+        hourIndex: 7,
       },
     });
 
     await calendar.sideMenu.updateFilter({ filter: 'In selected hours' });
 
-    await calendar.calendarWeekDateTime.selectHour({ dayIndex: 0, hourIndex: 5 });
+    await calendar.calendarWeekDateTime.selectHour({ dayIndex: 0, hourIndex: 7 });
 
     await calendar.sideMenu.verifySideBarRecords({ records: ['Team Catchup'] });
 
@@ -392,29 +390,29 @@ test.describe('Calendar View', () => {
 
     const calendar = dashboard.calendar;
 
-    await calendar.calendarTopbar.verifyActiveCalendarView({ view: 'month' });
+    await calendar.toolbar.verifyActiveCalendarView({ view: 'month' });
 
     await calendar.toolbar.calendarViewMode.changeCalendarView({ title: 'week' });
 
-    await calendar.calendarTopbar.verifyActiveCalendarView({ view: 'week' });
+    await calendar.toolbar.verifyActiveCalendarView({ view: 'week' });
 
     await calendar.toolbar.calendarViewMode.changeCalendarView({ title: 'day' });
 
-    await calendar.calendarTopbar.verifyActiveCalendarView({ view: 'day' });
+    await calendar.toolbar.verifyActiveCalendarView({ view: 'day' });
 
     await calendar.toolbar.calendarViewMode.changeCalendarView({ title: 'month' });
 
-    await calendar.calendarTopbar.verifyActiveCalendarView({ view: 'month' });
+    await calendar.toolbar.verifyActiveCalendarView({ view: 'month' });
 
     await toolbar.calendarViewMode.changeCalendarView({ title: 'year' });
 
-    await calendar.calendarTopbar.verifyActiveCalendarView({ view: 'year' });
+    await calendar.toolbar.verifyActiveCalendarView({ view: 'year' });
 
     await toolbar.calendarViewMode.changeCalendarView({ title: 'month' });
 
-    await calendar.calendarTopbar.moveToDate({ date: 'January 2024', action: 'prev' });
+    // await calendar.toggleSideBar();
 
-    await calendar.calendarTopbar.toggleSideBar();
+    await calendar.sideMenu.moveToDate({ date: 'Jan 2024', action: 'prev' });
 
     await calendar.sideMenu.verifySideBarRecords({ records: dateRecords.filter(f => f.Title).map(f => f.Title) });
 
@@ -452,21 +450,21 @@ test.describe('Calendar View', () => {
 
     await toolbar.calendarViewMode.changeCalendarView({ title: 'week' });
 
-    await dashboard.calendar.calendarTopbar.verifyActiveCalendarView({ view: 'week' });
+    await dashboard.calendar.toolbar.verifyActiveCalendarView({ view: 'week' });
 
     await toolbar.calendarViewMode.changeCalendarView({ title: 'day' });
 
-    await dashboard.calendar.calendarTopbar.verifyActiveCalendarView({ view: 'day' });
+    await dashboard.calendar.toolbar.verifyActiveCalendarView({ view: 'day' });
 
     const calendar = dashboard.calendar;
 
-    await calendar.calendarTopbar.moveToDate({ date: '1 January 2024', action: 'prev' });
+    // await calendar.toggleSideBar();
 
-    await calendar.calendarTopbar.toggleSideBar();
+    await calendar.sideMenu.moveToDate({ date: '1 Jan 2024', action: 'prev' });
 
     await calendar.sideMenu.verifySideBarRecords({ records: dateRecords.filter(f => f.Title).map(f => f.Title) });
 
-    await calendar.calendarTopbar.moveToDate({ date: '2 January 2024', action: 'next' });
+    await calendar.sideMenu.moveToDate({ date: '2 Jan 2024', action: 'next' });
 
     await calendar.calendarDayDate.verifyRecord({ records: [] });