diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index da86e7a463..6dec350d69 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -977,10 +977,10 @@ const getPluralName = (name: string) => {
             />
           </a-form-item>
           <template v-if="form.type === ViewTypes.CALENDAR && !form.copy_from_id">
-            <div v-for="(range, index) in form.calendar_range" :key="`range-${index}`" class="flex w-full items-center gap-2">
-              <span class="text-gray-800">
+            <div v-for="(range, index) in form.calendar_range" :key="`range-${index}`" class="flex flex-col w-full gap-2">
+              <div class="text-gray-800">
                 {{ $t('labels.organiseBy') }}
-              </span>
+              </div>
               <NcSelect
                 v-model:value="range.fk_from_column_id"
                 :disabled="isMetaLoading"
@@ -1017,14 +1017,19 @@ const getPluralName = (name: string) => {
                   </div>
                 </a-select-option>
               </NcSelect>
-              <div
-                v-if="range.fk_to_column_id === null && isEeUI"
-                class="cursor-pointer flex items-center text-gray-800 gap-1"
+
+              <NcButton
+                v-if="range.fk_to_column_id === null"
+                size="small"
+                class="!border-none w-28"
+                type="secondary"
+                :disabled="!isEeUI"
                 @click="range.fk_to_column_id = undefined"
               >
                 <component :is="iconMap.plus" class="h-4 w-4" />
                 {{ $t('activity.addEndDate') }}
-              </div>
+              </NcButton>
+
               <template v-else-if="isEeUI">
                 <span>
                   {{ $t('activity.withEndDate') }}
@@ -1036,7 +1041,7 @@ const getPluralName = (name: string) => {
                     :disabled="isMetaLoading"
                     :loading="isMetaLoading"
                     :placeholder="$t('placeholder.notSelected')"
-                    class="!rounded-r-none ct"
+                    class="nc-to-select flex-1"
                   >
                     <a-select-option
                       v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
@@ -1046,7 +1051,7 @@ const getPluralName = (name: string) => {
                         const firstRange = viewSelectFieldOptions.find(
                           (f) => f.value === form.calendar_range[0].fk_from_column_id,
                         )
-                        return firstRange?.uidt === f.uidt
+                        return firstRange?.uidt === f.uidt && f.value !== range.fk_from_column_id
                       })"
                       :key="id"
                       :value="option.value"
@@ -1435,7 +1440,6 @@ const getPluralName = (name: string) => {
 .nc-input-text-area {
   padding-block: 8px !important;
 }
-
 .ant-form-item-required {
   @apply !text-gray-800 font-medium;
   &:before {
@@ -1443,14 +1447,6 @@ const getPluralName = (name: string) => {
   }
 }
 
-.nc-from-select .ant-select-selector {
-  @apply !mr-2;
-}
-
-.nc-to-select .ant-select-selector {
-  @apply !rounded-r-none;
-}
-
 .ant-form-item {
   @apply !mb-0;
 }
@@ -1471,9 +1467,11 @@ const getPluralName = (name: string) => {
     @apply content-[''] m-0;
   }
 }
-:deep(.ant-select) {
-  .ant-select-selector {
-    @apply !rounded-lg;
+:not(.nc-to-select) {
+  :deep(.ant-select) {
+    .ant-select-selector {
+      @apply !rounded-lg;
+    }
   }
 }
 
@@ -1510,4 +1508,11 @@ const getPluralName = (name: string) => {
     @apply !rounded-5;
   }
 }
+
+:deep(.nc-to-select) {
+  .ant-select-selector {
+    @apply !rounded-r-none;
+    border-radius-right: 0rem !important;
+  }
+}
 </style>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
index 36029db49c..1f6512ac15 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
@@ -138,11 +138,11 @@ const removeRange = async (id: number) => {
   _calendar_ranges.value = _calendar_ranges.value.filter((_, i) => i !== id)
   await saveCalendarRanges()
 }
-/*
+
 const saveCalendarRange = async (range: CalendarRangeType, value?) => {
   range.fk_to_column_id = value
   await saveCalendarRanges()
-} */
+}
 </script>
 
 <template>
@@ -176,11 +176,11 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
     </NcTooltip>
 
     <template #overlay>
-      <div v-if="calendarRangeDropdown" class="w-138 space-y-6 rounded-2xl p-6" data-testid="nc-calendar-range-menu" @click.stop>
+      <div v-if="calendarRangeDropdown" class="w-108 space-y-6 rounded-2xl p-6" data-testid="nc-calendar-range-menu" @click.stop>
         <div
           v-for="(range, id) in _calendar_ranges"
           :key="id"
-          class="flex w-full gap-2 mb-2 items-center"
+          class="flex flex-col w-full gap-2 mb-2"
           data-testid="nc-calendar-range-option"
         >
           <span>
@@ -222,15 +222,18 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
             </a-select-option>
           </NcSelect>
 
-          <div
-            v-if="range.fk_to_column_id === null && isEeUI"
-            class="flex cursor-pointer flex text-gray-800 items-center gap-1"
+          <NcButton
+            v-if="range.fk_to_column_id === null"
+            size="small"
             data-testid="nc-calendar-range-add-end-date"
-            @click="saveCalendarRange(range, undefined)"
+            class="!border-none w-28"
+            type="secondary"
+            :disabled="!isEeUI"
+            @click="range.fk_to_column_id = undefined"
           >
             <component :is="iconMap.plus" class="h-4 w-4" />
             {{ $t('activity.addEndDate') }}
-          </div>
+          </NcButton>
           <template v-else-if="isEeUI">
             <span>
               {{ $t('activity.withEndDate') }}
@@ -240,14 +243,14 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
                 v-model:value="range.fk_to_column_id"
                 :disabled="!range.fk_from_column_id"
                 :placeholder="$t('placeholder.notSelected')"
-                class="!rounded-r-none nc-to-select"
+                class="!rounded-r-none flex-1 nc-to-select"
                 data-testid="nc-calendar-range-to-field-select"
                 @change="saveCalendarRanges"
               >
                 <a-select-option
                   v-for="(option, opId) in [...dateFieldOptions].filter((f) => {
                     const firstRange = dateFieldOptions.find((f) => f.value === calendarRange[0].fk_from_column_id)
-                    return firstRange?.uidt === f.uidt
+                    return firstRange?.uidt === f.uidt && f.value !== range.fk_from_column_id
                   })"
                   :key="opId"
                   :value="option.value"
@@ -294,7 +297,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
   </NcDropdown>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .nc-to-select .ant-select-selector {
   @apply !rounded-r-none;
 }