diff --git a/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue b/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
index f5a396776a..4f7def18bb 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue
@@ -94,6 +94,7 @@ const dateFieldOptions = computed<SelectProps['options']>(() => {
       .map((c) => ({
         label: c.title,
         value: c.id,
+        uidt: c.uidt,
       })) ?? []
   )
 })
@@ -117,53 +118,74 @@ const dateFieldOptions = computed<SelectProps['options']>(() => {
           <span class="font-bold"> {{ $t('activity.calendar') + $t('activity.viewSettings') }}</span>
           <a-divider class="!my-2" />
         </div>
-        <div v-for="(cal, id) in _calendar_ranges" :key="id" class="flex w-full gap-3">
-          <div class="flex flex-col gap-2 w-1/2">
+        <div v-for="(range, id) in _calendar_ranges" :key="id" class="flex w-full gap-2 items-center">
+          <span>
+            {{ $t('labels.organiseBy') }}
+          </span>
+          <NcSelect
+            v-model:value="range.fk_from_column_id"
+            :placeholder="$t('placeholder.notSelected')"
+            @change="saveCalendarRanges"
+          >
+            <a-select-option v-for="(option, opId) in dateFieldOptions" :key="opId" :value="option.value">
+              <div class="flex items-center">
+                <SmartsheetHeaderIcon :column="option" />
+                <NcTooltip class="truncate flex-1" placement="top" show-on-truncate-only>
+                  <template #title>{{ option.label }}</template>
+                  {{ option.label }}
+                </NcTooltip>
+              </div>
+            </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"
+            @click="
+              () => {
+                range.fk_to_column_id = undefined
+                saveCalendarRanges()
+              }
+            "
+          >
+            <component :is="iconMap.plus" class="h-4 w-4" />
+            {{ $t('activity.addEndDate') }}
+          </div>
+          <template v-else-if="isEeUI">
             <span>
-              {{ $t('labels.organizeRecordsBy') }}
+              {{ $t('activity.withEndDate') }}
             </span>
-            <NcSelect
-              v-model:value="cal.fk_from_column_id"
-              :options="dateFieldOptions"
-              class="w-full"
-              @change="saveCalendarRanges"
-              @click.stop
-            />
-          </div>
-          <div v-if="cal.fk_to_column_id === null && isEeUI" class="flex flex-col justify-end w-1/2">
-            <div class="cursor-pointer flex items-center font-medium gap-1 mb-1" @click="cal.fk_to_column_id = ''">
-              <component :is="iconMap.plus" class="h-4 w-4" />
-              {{ $t('activity.setEndDate') }}
-            </div>
-          </div>
-          <div v-else-if="isEeUI" class="flex flex-col gap-2 w-1/2">
-            <div class="flex flex-row justify-between">
-              <span>
-                {{ $t('labels.endDateField') }}
-              </span>
-              <component
-                :is="iconMap.delete"
-                class="h-4 w-4 cursor-pointer text-red-500"
-                @click="
-                  () => {
-                    cal.fk_to_column_id = null
-                    saveCalendarRanges()
-                  }
-                "
-              />
+            <div class="flex">
+              <NcSelect
+                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"
+                @change="saveCalendarRanges"
+              >
+                <a-select-option v-for="(option, opId) in dateFieldOptions" :key="opId" :value="option.value">
+                  <div class="flex items-center">
+                    <SmartsheetHeaderIcon :column="option" />
+                    <NcTooltip class="truncate flex-1" placement="top" show-on-truncate-only>
+                      <template #title>{{ option.label }}</template>
+                      {{ option.label }}
+                    </NcTooltip>
+                  </div>
+                </a-select-option>
+              </NcSelect>
+              <NcButton class="!rounded-l-none !border-l-0" size="small" type="secondary" @click="range.fk_to_column_id = null">
+                <component :is="iconMap.delete" class="h-4 w-4" />
+              </NcButton>
             </div>
-            <NcSelect
-              v-model:value="cal.fk_to_column_id"
-              :disabled="!cal.fk_from_column_id"
-              :options="dateFieldOptions"
-              :placeholder="$t('placeholder.notSelected')"
-              class="w-full"
-              @change="saveCalendarRanges"
-              @click.stop
-            />
-          </div>
+          </template>
         </div>
       </div>
     </template>
   </NcDropdown>
 </template>
+
+<style lang="scss" scoped>
+.nc-to-select .ant-select-selector {
+  @apply !rounded-r-none;
+}
+</style>