diff --git a/packages/ui/src/components/calendar/DateInputBox.svelte b/packages/ui/src/components/calendar/DateInputBox.svelte
index 792e40d800..47a30ae11c 100644
--- a/packages/ui/src/components/calendar/DateInputBox.svelte
+++ b/packages/ui/src/components/calendar/DateInputBox.svelte
@@ -22,6 +22,7 @@
 
   export let currentDate: Date | null
   export let withTime: boolean = false
+  export let kind: 'default' | 'plain' = 'default'
 
   type TEdits = 'day' | 'month' | 'year' | 'hour' | 'min'
   interface IEdits {
@@ -200,8 +201,9 @@
   })
 </script>
 
-<div class="datetime-input">
+<div class="datetime-input {kind}">
   <div class="flex-row-center">
+    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
     <span
       bind:this={edits[0].el}
       class="digit"
@@ -215,6 +217,7 @@
       {:else}<Label label={ui.string.DD} />{/if}
     </span>
     <span class="separator">.</span>
+    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
     <span
       bind:this={edits[1].el}
       class="digit"
@@ -228,6 +231,7 @@
       {:else}<Label label={ui.string.MM} />{/if}
     </span>
     <span class="separator">.</span>
+    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
     <span
       bind:this={edits[2].el}
       class="digit"
@@ -242,6 +246,7 @@
     </span>
     {#if withTime}
       <div class="time-divider" />
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
       <span
         bind:this={edits[3].el}
         class="digit"
@@ -255,6 +260,7 @@
         {:else}<Label label={ui.string.HH} />{/if}
       </span>
       <span class="separator">:</span>
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
       <span
         bind:this={edits[4].el}
         class="digit"
@@ -270,9 +276,11 @@
     {/if}
   </div>
   {#if currentDate}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
     <div
       class="close-btn"
-      tabindex="0"
+      tabindex={0}
       on:click={() => {
         selected = 'day'
         startTyping = true
@@ -293,15 +301,9 @@
     align-items: center;
     flex-shrink: 0;
     margin: 0;
-    padding: 0.75rem;
     height: 3rem;
     font-family: inherit;
-    font-size: 1rem;
     color: var(--theme-content-color);
-    background-color: var(--theme-bg-color);
-    border: 1px solid var(--theme-button-border);
-    border-radius: 0.25rem;
-    transition: border-color 0.15s ease;
 
     &:hover {
       border-color: var(--theme-button-default);
@@ -332,9 +334,6 @@
 
     .digit {
       position: relative;
-      padding: 0 0.125rem;
-      height: 1.5rem;
-      line-height: 1.5rem;
       color: var(--theme-caption-color);
       outline: none;
       border-radius: 0.125rem;
@@ -355,14 +354,47 @@
     }
     .time-divider {
       flex-shrink: 0;
-      margin: 0 0.25rem;
       width: 1px;
       min-width: 1px;
-      height: 0.75rem;
       background-color: var(--theme-button-border);
     }
-    .separator {
-      margin: 0 0.1rem;
+
+    &.plain:not(.default) {
+      padding: 0.5rem 0;
+      font-size: 1.25rem;
+
+      .digit {
+        padding: 0.5rem 0.125rem;
+        line-height: 1.25rem;
+      }
+      .separator {
+        margin: 0;
+      }
+      .time-divider {
+        margin: 0 0.375rem;
+        height: 1.5rem;
+      }
+    }
+    &.default:not(.plain) {
+      padding: 0.75rem;
+      font-size: 1rem;
+      background-color: var(--theme-bg-color);
+      border: 1px solid var(--theme-button-border);
+      border-radius: 0.25rem;
+      transition: border-color 0.15s ease;
+
+      .digit {
+        padding: 0 0.125rem;
+        height: 1.5rem;
+        line-height: 1.5rem;
+      }
+      .separator {
+        margin: 0 0.1rem;
+      }
+      .time-divider {
+        margin: 0 0.25rem;
+        height: 0.75rem;
+      }
     }
   }
 </style>
diff --git a/packages/ui/src/components/calendar/DatePopup.svelte b/packages/ui/src/components/calendar/DatePopup.svelte
index 08a6613024..2e080314a8 100644
--- a/packages/ui/src/components/calendar/DatePopup.svelte
+++ b/packages/ui/src/components/calendar/DatePopup.svelte
@@ -16,15 +16,19 @@
   import { DateRangeMode } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
   import { createEventDispatcher } from 'svelte'
+  import {
+    ActionIcon,
+    Button,
+    Scroller,
+    deviceOptionsStore as deviceInfo,
+    checkAdaptiveMatching,
+    Label,
+    IconClose
+  } from '../..'
   import ui from '../../plugin'
-  import ActionIcon from '../ActionIcon.svelte'
-  import Button from '../Button.svelte'
-  import Label from '../Label.svelte'
-  import IconClose from '../icons/Close.svelte'
   import DateInputBox from './DateInputBox.svelte'
   import MonthSquare from './MonthSquare.svelte'
   import Shifts from './Shifts.svelte'
-  import { Scroller, deviceOptionsStore as deviceInfo } from '../..'
 
   export let currentDate: Date | null
   export let withTime: boolean = false
@@ -36,7 +40,12 @@
   const dispatch = createEventDispatcher()
 
   const today: Date = new Date(Date.now())
+  $: devSize = $deviceInfo.size
+  $: oneMonth = checkAdaptiveMatching(devSize, 'sm')
+
   $: docHeight = $deviceInfo.docHeight
+  const rem = (n: number, fs: number): number => n * fs
+  $: scrolled = docHeight < rem(39, $deviceInfo.fontSize)
 
   let viewDate: Date = currentDate ?? today
   let viewDateSec: Date
@@ -93,51 +102,74 @@
     />
   </div>
   <div class="content">
-    <Scroller padding={'1.5rem 2rem'} thinScrollBars>
-      <div class="label">
-        <span class="bold"><Label {label} /></span>
-        {#if detail}
-          <span class="divider">-</span>
-          <Label label={detail} />
-        {/if}
-      </div>
-
-      <DateInputBox
-        bind:this={dateInput}
-        bind:currentDate
-        {withTime}
-        on:close={() => closeDP(withTime)}
-        on:save={() => saveDate(withTime)}
-      />
+    {#if detail}
+      <div class="label"><Label label={detail} /></div>
+    {/if}
 
+    <DateInputBox
+      bind:this={dateInput}
+      bind:currentDate
+      {withTime}
+      kind={'plain'}
+      on:close={() => closeDP(withTime)}
+      on:save={() => saveDate(withTime)}
+    />
+    <div class="divider" class:x2={!scrolled} />
+    {#if scrolled}
+      <Scroller thinScrollBars>
+        <div class="divider" />
+        <div class="month-group">
+          <MonthSquare
+            bind:currentDate
+            {viewDate}
+            {mondayStart}
+            viewUpdate={false}
+            hideNavigator={'all'}
+            noPadding
+            on:update={(result) => updateDate(result.detail)}
+          />
+          {#if !oneMonth}
+            <div class="space" />
+            <MonthSquare
+              bind:currentDate
+              viewDate={viewDateSec}
+              {mondayStart}
+              viewUpdate={false}
+              noPadding
+              on:update={(result) => updateDate(result.detail)}
+              on:navigation={(result) => navigateMonth(result.detail)}
+            />
+          {/if}
+        </div>
+      </Scroller>
+    {:else}
       <div class="month-group">
         <MonthSquare
           bind:currentDate
           {viewDate}
           {mondayStart}
           viewUpdate={false}
-          hideNavigator="all"
+          hideNavigator={'all'}
+          noPadding
           on:update={(result) => updateDate(result.detail)}
         />
-        <MonthSquare
-          bind:currentDate
-          viewDate={viewDateSec}
-          {mondayStart}
-          viewUpdate={false}
-          on:update={(result) => updateDate(result.detail)}
-          on:navigation={(result) => navigateMonth(result.detail)}
-        />
+        {#if !oneMonth}
+          <div class="space" />
+          <MonthSquare
+            bind:currentDate
+            viewDate={viewDateSec}
+            {mondayStart}
+            viewUpdate={false}
+            noPadding
+            on:update={(result) => updateDate(result.detail)}
+            on:navigation={(result) => navigateMonth(result.detail)}
+          />
+        {/if}
       </div>
-    </Scroller>
+    {/if}
   </div>
   <div class="footer">
-    <Button
-      kind={'accented'}
-      label={ui.string.Save}
-      size={'x-large'}
-      width={'100%'}
-      on:click={() => closeDP(withTime)}
-    />
+    <Button kind={'accented'} label={ui.string.Save} size={'large'} on:click={() => closeDP(withTime)} />
   </div>
 </div>
 <Shifts
@@ -159,7 +191,7 @@
     max-height: calc(100vh - 2rem);
     width: max-content;
     height: max-content;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
     background: var(--theme-popup-color);
     border-radius: 0.5rem;
     box-shadow: var(--theme-popup-shadow);
@@ -168,42 +200,46 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 1rem 1.5rem 1rem 2rem;
-      border-bottom: 1px solid var(--theme-popup-divider);
+      padding: 1.5rem;
     }
 
     .content {
       overflow: hidden;
       display: flex;
       flex-direction: column;
+      padding: 0 1.5rem 1.5rem;
       min-height: 0;
 
       .label {
-        padding-left: 2px;
         margin-bottom: 0.25rem;
-        font-size: 0.8125rem;
-        color: var(--theme-content-color);
-
-        .bold {
-          font-weight: 500;
-          color: var(--theme-caption-color);
-        }
-        .divider {
-          margin: 0 0.25rem;
-          line-height: 1.4375rem;
-          color: var(--theme-darker-color);
-        }
+        font-size: 0.875rem;
+        color: var(--theme-dark-color);
       }
 
       .month-group {
         display: flex;
         flex-wrap: nowrap;
-        margin: 0.5rem -0.5rem 0;
+
+        .space {
+          flex-shrink: 0;
+          width: 2rem;
+        }
+      }
+    }
+    .divider {
+      flex-shrink: 0;
+      height: 0.75rem;
+
+      &.x2 {
+        height: 1.5rem;
       }
     }
 
     .footer {
-      padding: 1rem 2rem;
+      display: flex;
+      flex-direction: row-reverse;
+      align-items: center;
+      padding: 1rem 1.5rem;
       border-top: 1px solid var(--theme-popup-divider);
     }
   }
diff --git a/packages/ui/src/components/calendar/MonthSquare.svelte b/packages/ui/src/components/calendar/MonthSquare.svelte
index c15135a493..ac494af367 100644
--- a/packages/ui/src/components/calendar/MonthSquare.svelte
+++ b/packages/ui/src/components/calendar/MonthSquare.svelte
@@ -14,9 +14,9 @@
 -->
 <script lang="ts">
   import { afterUpdate, createEventDispatcher } from 'svelte'
-  import IconNavPrev from '../icons/NavPrev.svelte'
-  import IconNavNext from '../icons/NavNext.svelte'
-  import Icon from '../Icon.svelte'
+  import IconArrowLeft from '../icons/ArrowLeft.svelte'
+  import IconArrowRight from '../icons/ArrowRight.svelte'
+  import Button from '../Button.svelte'
   import { firstDay, day, getWeekDayName, areDatesEqual, getMonthName, weekday, isWeekend } from './internal/DateUtils'
   import { capitalizeFirstLetter } from '../../utils'
 
@@ -25,6 +25,7 @@
   export let mondayStart: boolean = true
   export let hideNavigator: 'all' | 'left' | 'right' | 'none' = 'none'
   export let viewUpdate: boolean = true
+  export let noPadding: boolean = false
   export let displayedWeeksCount = 6
   export let selectedTo: Date | null | undefined = undefined
 
@@ -81,32 +82,36 @@
 <div class="month-container">
   <div class="header">
     {#if viewDate}
-      <div
-        class="btn"
-        class:hideNavigator={hideNavigator === 'left' || hideNavigator === 'all'}
-        on:click={() => {
-          if (viewUpdate) viewDate.setMonth(viewDate.getMonth() - 1)
-          dispatch('navigation', -1)
-        }}
-      >
-        <div class="icon-btn"><Icon icon={IconNavPrev} size={'full'} /></div>
-      </div>
       <div class="monthYear">{monthYear}</div>
-      <div
-        class="btn"
-        class:hideNavigator={hideNavigator === 'right' || hideNavigator === 'all'}
-        on:click={() => {
-          if (viewUpdate) viewDate.setMonth(viewDate.getMonth() + 1)
-          dispatch('navigation', 1)
-        }}
-      >
-        <div class="icon-btn"><Icon icon={IconNavNext} size={'full'} /></div>
+      <div class="flex-row-center gap-1-5 mr-1">
+        {#if !(hideNavigator === 'left' || hideNavigator === 'all')}
+          <Button
+            kind={'ghost'}
+            size={'medium'}
+            icon={IconArrowLeft}
+            on:click={() => {
+              if (viewUpdate) viewDate.setMonth(viewDate.getMonth() - 1)
+              dispatch('navigation', -1)
+            }}
+          />
+        {/if}
+        {#if !(hideNavigator === 'right' || hideNavigator === 'all')}
+          <Button
+            kind={'ghost'}
+            size={'medium'}
+            icon={IconArrowRight}
+            on:click={() => {
+              if (viewUpdate) viewDate.setMonth(viewDate.getMonth() + 1)
+              dispatch('navigation', 1)
+            }}
+          />
+        {/if}
       </div>
     {/if}
   </div>
 
   {#if viewDate}
-    <div class="calendar">
+    <div class="calendar" class:noPadding>
       {#each [...Array(7).keys()] as dayOfWeek}
         <span class="caption"
           >{capitalizeFirstLetter(getWeekDayName(day(firstDayOfCurrentMonth, dayOfWeek), 'short'))}</span
@@ -125,6 +130,7 @@
             class:endRow={dayOfWeek === 6 || isNextDateWrong(date) || isEnd(currentDate, selectedTo, date)}
             class:wrongMonth={wrongM}
           >
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
             <div
               class="day"
               class:weekend={isWeekend(date)}
@@ -161,14 +167,16 @@
     flex-direction: column;
     min-height: 0;
     height: 100%;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
 
     .header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 1rem 0.5rem 0.75rem;
-      color: var(--caption-color);
+      flex-shrink: 0;
+      margin-bottom: 0.25rem;
+      height: 2.25rem;
+      color: var(--theme-caption-color);
 
       .monthYear {
         font-weight: 500;
@@ -177,29 +185,6 @@
           text-transform: capitalize;
         }
       }
-      .hideNavigator {
-        visibility: hidden;
-      }
-
-      .btn {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 2rem;
-        height: 2rem;
-        color: var(--dark-color);
-        border-radius: 0.25rem;
-        background-color: var(--theme-refinput-color);
-        border: 1px solid var(--theme-refinput-color);
-        cursor: pointer;
-
-        .icon-btn {
-          height: 0.75rem;
-        }
-        &:hover {
-          color: var(--accent-color);
-        }
-      }
     }
   }
 
@@ -207,7 +192,6 @@
     position: relative;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-    padding: 0 1rem 1rem;
 
     .caption,
     .day {
@@ -217,17 +201,23 @@
       width: 2rem;
       height: 2rem;
       font-size: 1rem;
-      color: var(--content-color);
+      color: var(--theme-content-color);
     }
     .caption {
-      align-items: start;
-      height: 2rem;
-      padding: 0.25rem;
-      color: var(--dark-color);
+      margin-bottom: 0.5rem;
+      height: 2.25rem;
+      color: var(--theme-dark-color);
       &::first-letter {
         text-transform: capitalize;
       }
     }
+    &:not(.noPadding) {
+      padding: 0 1rem 1rem;
+
+      .caption {
+        padding: 0.25rem;
+      }
+    }
 
     .container {
       border: 0px solid transparent;
@@ -236,8 +226,7 @@
 
       &.range:not(.wrongMonth),
       &.selected:not(.wrongMonth) {
-        color: var(--caption-color);
-        background-color: var(--accented-button-transparent);
+        color: var(--theme-caption-color);
       }
       &.startRow:not(.wrongMonth) {
         border-top-left-radius: 0.25rem;
@@ -255,24 +244,24 @@
 
     .day {
       position: relative;
-      color: var(--accent-color);
-      background-color: rgba(var(--accent-color), 0.05);
+      color: var(--theme-content-color);
+      // background-color: rgba(var(--theme-content-color), 0.05);
       border: 1px solid transparent;
       border-radius: 0.25rem;
 
       cursor: pointer;
 
       &.weekend {
-        color: var(--content-color);
+        color: var(--theme-content-color);
       }
       &.wrongMonth {
-        color: var(--dark-color);
+        color: var(--theme-trans-color);
         cursor: default;
       }
       &.today:not(.worngMonth, .selected, .range) {
         font-weight: 500;
-        background-color: rgba(76, 56, 188, 0.2);
-        border-radius: 50%;
+        background-color: var(--theme-button-focused);
+        border-color: var(--theme-button-border);
       }
       &.selected:not(.wrongMonth) {
         color: var(--accented-button-color);
@@ -280,7 +269,7 @@
       }
 
       &:not(.wrongMonth):hover {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
         background-color: var(--accented-button-transparent);
       }
     }
@@ -288,11 +277,11 @@
     &::before {
       position: absolute;
       content: '';
-      top: 2rem;
+      top: 2.25rem;
       left: 0;
       width: 100%;
       height: 1px;
-      background-color: var(--button-bg-color);
+      background-color: var(--theme-divider-color);
     }
   }
 </style>