diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index fb202b6e21..980ff21b30 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -381,11 +381,6 @@ input.search {
 }
 
 /* Margins & Paddings */
-.step-lr25 + .step-lr25 { margin-left: .25rem; }
-.step-lr75 + .step-lr75 { margin-left: .75rem; }
-.step-tb75 + .step-tb75 { margin-top: .75rem; }
-.step-tb-6 + .step-tb-6 { margin-top: 1.5rem; }
-
 .ml-0-5 { margin-left: .125rem; }
 .ml-1 { margin-left: .25rem; }
 .ml-1-5 { margin-left: .375rem; }
@@ -476,6 +471,28 @@ input.search {
 .p-6 { padding: 1.5rem; }
 .p-10 { padding: 2.5rem; }
 
+.p-text { padding: .125rem .25rem; }
+.p-text-2 { padding: .25rem .5rem; }
+
+.step-lr25 + .step-lr25 { margin-left: .25rem; }
+.step-lr75 + .step-lr75 { margin-left: .75rem; }
+.step-tb75 + .step-tb75 { margin-top: .75rem; }
+.step-tb-6 + .step-tb-6 { margin-top: 1.5rem; }
+
+.step-tb-2-accent + .step-tb-2-accent {
+  position: relative;
+  margin-top: .5rem;
+  &::before {
+    content: '';
+    position: absolute;
+    top: -.25rem;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background-color: var(--popup-bg-hover);
+  }
+}
+
 /* --------- */
 .no-word-wrap { word-wrap: none; }
 .relative { position: relative; }
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index 0655b57b6f..b37399b398 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -275,6 +275,9 @@
   min-height: 1px;
   height: 1px;
   background-color: var(--divider-color);
+
+  &.dark { background-color: var(--body-accent); }
+  &.noMargin { margin: 0; }
 }
 
 .antiSection {
diff --git a/packages/theme/styles/dialogs.scss b/packages/theme/styles/dialogs.scss
index 119d21da8c..b827aea51f 100644
--- a/packages/theme/styles/dialogs.scss
+++ b/packages/theme/styles/dialogs.scss
@@ -173,10 +173,10 @@
     .antiCard-pool {
       flex-direction: row;
       align-items: center;
-      margin: 0 .75rem .75rem;
+      margin: 0 .5rem .25rem;
       font-size: .75rem;
 
-      & > *:not(:last-child) { margin-right: .375rem; }
+      & > * { margin: 0 .25rem .5rem; }
     }
     .antiCard-footer {
       direction: ltr;
diff --git a/packages/ui/src/components/Chevron.svelte b/packages/ui/src/components/Chevron.svelte
new file mode 100644
index 0000000000..06dd53004f
--- /dev/null
+++ b/packages/ui/src/components/Chevron.svelte
@@ -0,0 +1,85 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import IconDownOutline from './icons/DownOutline.svelte'
+
+  export let size: 'small' | 'medium' = 'medium'
+  export let fill = 'var(--dark-color)'
+  export let expanded: boolean = false
+  export let direction: 'left' | 'right' = 'right'
+  export let outline: boolean = false
+  export let marginRight: string | undefined = undefined
+  export let marginLeft: string | undefined = undefined
+  export let margin: string | undefined = undefined
+</script>
+
+<div
+  class="chevron {size} {direction}"
+  class:outline
+  class:expanded
+  style:margin-right={marginRight}
+  style:margin-left={marginLeft}
+  style:margin
+>
+  {#if outline}
+    <IconDownOutline {size} {fill} />
+  {:else}
+    <svg {fill} viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0,0L6,3L0,6Z" />
+    </svg>
+  {/if}
+</div>
+
+<style lang="scss">
+  .chevron {
+    flex-shrink: 0;
+    transition: transform 0.15s var(--timing-main);
+
+    &.outline {
+      transform-origin: center;
+      &.right {
+        transform: rotate(-90deg);
+      }
+      &.left {
+        transform: rotate(90deg);
+      }
+      &.expanded {
+        transform: rotate(0deg);
+      }
+    }
+    &:not(.outline) {
+      transform-origin: 35% center;
+      transform: rotate(0deg);
+
+      &.small {
+        width: 0.325rem;
+        height: 0.325rem;
+      }
+      &.medium {
+        width: 0.375rem;
+        height: 0.375rem;
+      }
+      &.right {
+        transform: rotate(0deg);
+      }
+      &.left {
+        transform: rotate(180deg);
+      }
+      &.expanded {
+        transform: rotate(90deg);
+      }
+    }
+  }
+</style>
diff --git a/packages/ui/src/components/ExpandCollapse.svelte b/packages/ui/src/components/ExpandCollapse.svelte
index 1ffcd64d1f..540be85b44 100644
--- a/packages/ui/src/components/ExpandCollapse.svelte
+++ b/packages/ui/src/components/ExpandCollapse.svelte
@@ -18,7 +18,7 @@
   import { tweened } from 'svelte/motion'
 
   export let isExpanded = false
-  export let duration = 200
+  export let duration = 150
   export let easing: (t: number) => number = quintOut
 
   const dispatch = createEventDispatcher()
diff --git a/packages/ui/src/components/Expandable.svelte b/packages/ui/src/components/Expandable.svelte
index f23ddf82c7..98866f779f 100644
--- a/packages/ui/src/components/Expandable.svelte
+++ b/packages/ui/src/components/Expandable.svelte
@@ -17,51 +17,62 @@
   import ExpandCollapse from './ExpandCollapse.svelte'
   import Icon from './Icon.svelte'
   import Label from './Label.svelte'
+  import Chevron from './Chevron.svelte'
 
   export let icon: Asset | undefined = undefined
   export let label: IntlString | undefined = undefined
   export let expanded: boolean = false
+  export let bordered: boolean = false
   export let expandable = true
+  export let contentColor = false
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="flex-grow flex" class:expanded class:expandable>
-  <div
-    class="fs-title flex-row-center mr-4"
-    on:click|stopPropagation={() => {
-      expanded = !expanded
-    }}
-  >
-    <div class="chevron" class:expanded>▶</div>
-    <div class="an-element__icon">
+<div class="flex-col">
+  <div class="expandable-header flex-between" class:expanded class:bordered>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div
+      class="flex-row-center mr-4"
+      class:cursor-pointer={expandable}
+      on:click|stopPropagation={() => {
+        if (expandable) expanded = !expanded
+      }}
+    >
+      <Chevron {expanded} marginRight={'.5rem'} />
       {#if icon}
-        <Icon {icon} size={'small'} />
+        <div class="min-w-4 mr-2">
+          <Icon {icon} size={'small'} />
+        </div>
       {/if}
+      <span class="fs-title overflow-label" class:content-color={contentColor}>
+        {#if label}<Label {label} />{/if}<slot name="title" />
+      </span>
     </div>
-    <span class="an-element__label title">
-      {#if label}<Label {label} />{/if}
-      <slot name="title" />
-    </span>
+    {#if $$slots.tools}
+      <div class="buttons-group small-gap">
+        <slot name="tools" />
+      </div>
+    {/if}
   </div>
-  <slot name="tools" />
-</div>
-<ExpandCollapse isExpanded={expanded}>
-  <div class="antiComponent p-2">
+  <ExpandCollapse isExpanded={expanded}>
     <slot />
-  </div>
-</ExpandCollapse>
+  </ExpandCollapse>
+</div>
 
 <style lang="scss">
-  .expandable {
-    .chevron {
-      content: '▶';
-      margin-right: 0.5rem;
-      font-size: 0.75rem;
-      color: var(--dark-color);
-      &.expanded {
-        transform: rotateZ(90deg);
-      }
+  .expandable-header {
+    transition: margin-bottom 0.15s var(--timing-main);
+
+    &:not(.expanded) {
+      margin-bottom: 0;
+    }
+    &.expanded {
+      margin-bottom: 0.75rem;
+    }
+    &.bordered {
+      padding: 0.25rem 0.5rem;
+      background-color: var(--body-accent);
+      border: 1px solid var(--divider-color);
+      border-radius: 0.25rem;
     }
   }
 </style>
diff --git a/packages/ui/src/components/ListView.svelte b/packages/ui/src/components/ListView.svelte
index 36a1ab452b..b114942bad 100644
--- a/packages/ui/src/components/ListView.svelte
+++ b/packages/ui/src/components/ListView.svelte
@@ -18,6 +18,7 @@
 
   export let selection: number = 0
   export let count: number
+  export let addClass: string | undefined = undefined
 
   const refs: HTMLElement[] = []
 
@@ -66,8 +67,9 @@
   >
     {#each Array(count) as _, row}
       <slot name="category" item={row} />
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
-        class="list-item"
+        class="list-item{addClass ? ` ${addClass}` : ''}"
         class:selection={row === selection}
         on:mouseover={() => onRow(row)}
         on:focus={() => {}}
diff --git a/packages/ui/src/components/icons/DownOutline.svelte b/packages/ui/src/components/icons/DownOutline.svelte
index ee3b5954f7..b8dcda616e 100644
--- a/packages/ui/src/components/icons/DownOutline.svelte
+++ b/packages/ui/src/components/icons/DownOutline.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   export let size: 'x-small' | 'small' | 'medium' | 'large' | 'full'
-  const fill: string = 'currentColor'
+  export let fill: string = 'currentColor'
 </script>
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 269e7f083d..13dcc14e52 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -99,6 +99,7 @@ export { default as ErrorPresenter } from './components/ErrorPresenter.svelte'
 export { default as Scroller } from './components/Scroller.svelte'
 export { default as ScrollerBar } from './components/ScrollerBar.svelte'
 export { default as TabList } from './components/TabList.svelte'
+export { default as Chevron } from './components/Chevron.svelte'
 
 export { default as IconAdd } from './components/icons/Add.svelte'
 export { default as IconBack } from './components/icons/Back.svelte'
diff --git a/plugins/bitrix-resources/src/components/EntityMapping.svelte b/plugins/bitrix-resources/src/components/EntityMapping.svelte
index 77257794d7..2d1824c7be 100644
--- a/plugins/bitrix-resources/src/components/EntityMapping.svelte
+++ b/plugins/bitrix-resources/src/components/EntityMapping.svelte
@@ -75,9 +75,7 @@
 <div class="antiComponent max-w-240 flex-grow p-1">
   <Expandable icon={ofClass?.icon} label={getEmbeddedLabel(typeTitle?.label ?? '')}>
     <svelte:fragment slot="tools">
-      <div class="flex flex-reverse flex-grow">
-        <Button icon={IconDelete} on:click={() => client.remove(mapping)} size={'small'} />
-      </div>
+      <Button icon={IconDelete} on:click={() => client.remove(mapping)} size={'small'} />
     </svelte:fragment>
     <Expandable label={getEmbeddedLabel('Options')}>
       <div class="flex-col">
diff --git a/plugins/bitrix-resources/src/components/FieldMappingSynchronizer.svelte b/plugins/bitrix-resources/src/components/FieldMappingSynchronizer.svelte
index e14de729e8..85cce34098 100644
--- a/plugins/bitrix-resources/src/components/FieldMappingSynchronizer.svelte
+++ b/plugins/bitrix-resources/src/components/FieldMappingSynchronizer.svelte
@@ -323,44 +323,43 @@
 
 <Expandable label={getEmbeddedLabel(mapping.type)}>
   <svelte:fragment slot="tools">
-    <div class="flex-row-center">
-      <SpaceSelect
-        _class={core.class.Space}
-        label={core.string.Space}
-        bind:value={space}
-        on:change={(evt) => {
-          space = evt.detail
+    <SpaceSelect
+      _class={core.class.Space}
+      label={core.string.Space}
+      bind:value={space}
+      on:change={(evt) => {
+        space = evt.detail
+      }}
+      autoSelect
+      spaceQuery={{ _id: { $in: [contact.space.Contacts] } }}
+    />
+    <DropdownLabels
+      label={getEmbeddedLabel('Direction')}
+      items={[
+        { id: 'ASC', label: 'Ascending' },
+        { id: 'DSC', label: 'Descending' }
+      ]}
+      bind:selected={direction}
+    />
+    <div class="fs-title">
+      <NumberEditor
+        kind={'button'}
+        value={limit}
+        focus={false}
+        placeholder={getEmbeddedLabel('Limit')}
+        onChange={(val) => {
+          if (val) {
+            limit = val
+          }
         }}
-        autoSelect
-        spaceQuery={{ _id: { $in: [contact.space.Contacts] } }}
       />
-      <DropdownLabels
-        label={getEmbeddedLabel('Direction')}
-        items={[
-          { id: 'ASC', label: 'Ascending' },
-          { id: 'DSC', label: 'Descending' }
-        ]}
-        bind:selected={direction}
-      />
-      <div class="fs-title flex-row-center">
-        <NumberEditor
-          kind={'button'}
-          value={limit}
-          focus={false}
-          placeholder={getEmbeddedLabel('Limit')}
-          onChange={(val) => {
-            if (val) {
-              limit = val
-            }
-          }}
-        />
-      </div>
-      <div class="ml-2 flex-row-center">
-        <div class="p-1">
-          {state}
-        </div>
-        <Button size={'large'} label={getEmbeddedLabel('Synchronize')} {loading} on:click={doSync} />
+    </div>
+    <div class="buttons-divider" />
+    <div class="flex-row-center">
+      <div class="p-1">
+        {state}
       </div>
+      <Button size={'large'} label={getEmbeddedLabel('Synchronize')} {loading} on:click={doSync} />
     </div>
   </svelte:fragment>
   <div class="flex-row flex-grow bottom-divider p-2">
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte
index 87d633e428..6ab8d78e8a 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte
@@ -16,10 +16,8 @@
   import { Ref, SortingOrder, WithLookup } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { calcRank, Issue, IssueStatus, Team } from '@hcengineering/tracker'
-  import { Button, Spinner, ExpandCollapse, closeTooltip, IconAdd } from '@hcengineering/ui'
+  import { Button, Spinner, ExpandCollapse, closeTooltip, IconAdd, Chevron, Label } from '@hcengineering/ui'
   import tracker from '../../../plugin'
-  import Collapsed from '../../icons/Collapsed.svelte'
-  import Expanded from '../../icons/Expanded.svelte'
   import CreateSubIssue from './CreateSubIssue.svelte'
   import SubIssueList from './SubIssueList.svelte'
 
@@ -62,16 +60,18 @@
   {#if hasSubIssues}
     <Button
       width="min-content"
-      icon={isCollapsed ? Collapsed : Expanded}
       size="small"
       kind="transparent"
-      label={tracker.string.SubIssuesList}
-      labelParams={{ subIssues: issue.subIssues }}
       on:click={() => {
         isCollapsed = !isCollapsed
         isCreating = false
       }}
-    />
+    >
+      <svelte:fragment slot="content">
+        <Chevron size={'small'} expanded={!isCollapsed} outline fill={'var(--caption-color)'} marginRight={'.375rem'} />
+        <Label label={tracker.string.SubIssuesList} params={{ subIssues: issue.subIssues }} />
+      </svelte:fragment>
+    </Button>
   {/if}
 
   <Button
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationPopup.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationPopup.svelte
index d333c70e3b..5994500e8f 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationPopup.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationPopup.svelte
@@ -120,9 +120,6 @@
     <IssuePresenter value={object} disableClick />
   </svelte:fragment>
 
-  <div class="header no-border flex-col p-1">
-    <div class="flex-row-center flex-between" />
-  </div>
   {#if currentTeam && issueStatuses}
     <SubIssuesEstimations
       issue={object}
@@ -143,13 +140,17 @@
       icon={IconAdd}
       size={'small'}
       on:click={(event) => {
-        showPopup(TimeSpendReportPopup, {
-          issueId: object._id,
-          issueClass: object._class,
-          space: object.space,
-          assignee: object.assignee,
-          defaultTimeReportDay
-        })
+        showPopup(
+          TimeSpendReportPopup,
+          {
+            issueId: object._id,
+            issueClass: object._class,
+            space: object.space,
+            assignee: object.assignee,
+            defaultTimeReportDay
+          },
+          'top'
+        )
       }}
       label={tracker.string.TimeSpendReportAdd}
     />
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte
index da202ffdfd..843b4348d9 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte
@@ -17,7 +17,7 @@
   import { Doc, Ref } from '@hcengineering/core'
   import { UserBox } from '@hcengineering/presentation'
   import { Issue, Team } from '@hcengineering/tracker'
-  import { getEventPositionElement, ListView, showPopup } from '@hcengineering/ui'
+  import { getEventPositionElement, ListView, showPopup, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import { ContextMenu, FixedColumn, ListSelectionProvider, SelectDirection } from '@hcengineering/view-resources'
   import { getIssueId } from '../../../issues'
   import tracker from '../../../plugin'
@@ -28,18 +28,19 @@
   export let teams: Map<Ref<Team>, Team>
 
   function showContextMenu (ev: MouseEvent, object: Issue) {
-    showPopup(ContextMenu, { object }, getEventPositionElement(ev))
+    showPopup(ContextMenu, { object }, $deviceInfo.isMobile ? 'top' : getEventPositionElement(ev))
   }
 
   const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {})
+  $: twoRows = $deviceInfo.twoRows
 </script>
 
-<ListView count={issues.length}>
+<ListView count={issues.length} addClass={'step-tb-2-accent'}>
   <svelte:fragment slot="item" let:item>
     {@const issue = issues[item]}
     {@const currentTeam = teams.get(issue.space)}
     <div
-      class="flex-between row"
+      class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2"
       on:contextmenu|preventDefault={(ev) => showContextMenu(ev, issue)}
       on:mouseover={() => {
         listProvider.updateFocus(issue)
@@ -48,55 +49,32 @@
         listProvider.updateFocus(issue)
       }}
     >
-      <div class="flex-row-center clear-mins gap-2 p-2 flex-grow">
-        <span class="issuePresenter">
-          <FixedColumn key={'estimation_issue'} justify={'left'}>
-            {#if currentTeam}
-              {getIssueId(currentTeam, issue)}
-            {/if}
-          </FixedColumn>
-        </span>
-        <span class="text name" title={issue.title}>
+      <div class="flex-row-center clear-mins gap-2 flex-grow mr-4" class:p-text={twoRows}>
+        <FixedColumn key={'estimation_issue'} justify={'left'} addClass={'fs-bold'}>
+          {#if currentTeam}
+            {getIssueId(currentTeam, issue)}
+          {/if}
+        </FixedColumn>
+        <span class="overflow-label fs-bold caption-color" title={issue.title}>
           {issue.title}
         </span>
       </div>
 
-      <FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
-        <UserBox
-          width={'100%'}
-          label={tracker.string.Assignee}
-          _class={contact.class.Employee}
-          value={issue.assignee}
-          readonly
-          showNavigate={false}
-        />
-      </FixedColumn>
-      <FixedColumn key={'estimation'} justify={'left'}>
-        <EstimationEditor value={issue} kind={'list'} />
-      </FixedColumn>
+      <div class="flex-row-center clear-mins gap-2 self-end" class:p-text={twoRows}>
+        <FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
+          <UserBox
+            width={'100%'}
+            label={tracker.string.Assignee}
+            _class={contact.class.Employee}
+            value={issue.assignee}
+            readonly
+            showNavigate={false}
+          />
+        </FixedColumn>
+        <FixedColumn key={'estimation'} justify={'left'}>
+          <EstimationEditor value={issue} kind={'list'} />
+        </FixedColumn>
+      </div>
     </div>
   </svelte:fragment>
 </ListView>
-
-<style lang="scss">
-  .row {
-    .text {
-      font-weight: 500;
-      color: var(--caption-color);
-    }
-
-    .issuePresenter {
-      flex-shrink: 0;
-      min-width: 0;
-      min-height: 0;
-      font-weight: 500;
-      color: var(--content-color);
-    }
-
-    .name {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  }
-</style>
diff --git a/plugins/tracker-resources/src/components/issues/timereport/SubIssuesEstimations.svelte b/plugins/tracker-resources/src/components/issues/timereport/SubIssuesEstimations.svelte
index e8689c12e0..556dadb62e 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/SubIssuesEstimations.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/SubIssuesEstimations.svelte
@@ -16,7 +16,7 @@
   import { Ref, SortingOrder, WithLookup } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import { Issue, IssueStatus, Team } from '@hcengineering/tracker'
-  import { Scroller, Spinner } from '@hcengineering/ui'
+  import { Spinner } from '@hcengineering/ui'
   import Expandable from '@hcengineering/ui/src/components/Expandable.svelte'
   import tracker from '../../../plugin'
   import EstimationSubIssueList from './EstimationSubIssueList.svelte'
@@ -38,15 +38,9 @@
 
 {#if subIssues && issueStatuses}
   {#if hasSubIssues}
-    <Expandable label={tracker.string.ChildEstimation}>
-      <svelte:fragment slot="title">
-        : {total}
-      </svelte:fragment>
-      <div class="h-50">
-        <Scroller>
-          <EstimationSubIssueList issues={subIssues} {teams} />
-        </Scroller>
-      </div>
+    <Expandable label={tracker.string.ChildEstimation} contentColor bordered>
+      <svelte:fragment slot="title">: <span class="caption-color">{total}</span></svelte:fragment>
+      <EstimationSubIssueList issues={subIssues} {teams} />
     </Expandable>
   {/if}
 {:else}
diff --git a/plugins/tracker-resources/src/components/issues/timereport/TimeReportDayDropdown.svelte b/plugins/tracker-resources/src/components/issues/timereport/TimeReportDayDropdown.svelte
index 1c97dec981..fccde324e3 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/TimeReportDayDropdown.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimeReportDayDropdown.svelte
@@ -15,11 +15,13 @@
 <script lang="ts">
   import { TimeReportDayType } from '@hcengineering/tracker'
   import { DropdownIntlItem, DropdownLabelsIntl } from '@hcengineering/ui'
+  import type { ButtonKind } from '@hcengineering/ui'
   import tracker from '../../../plugin'
   import TimeReportDayIcon from './TimeReportDayIcon.svelte'
 
   export let label = tracker.string.TimeReportDayTypeLabel
   export let selected: TimeReportDayType | undefined
+  export let kind: ButtonKind = 'link-bordered'
 
   const workDaysDropdownItems: DropdownIntlItem[] = [
     {
@@ -34,7 +36,7 @@
 </script>
 
 <DropdownLabelsIntl
-  kind="link-bordered"
+  {kind}
   icon={TimeReportDayIcon}
   shouldUpdateUndefined={false}
   {label}
diff --git a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte
index c3e15265d5..c8ef856a53 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte
@@ -18,7 +18,7 @@
   import type { IntlString } from '@hcengineering/platform'
   import presentation, { Card, getClient, UserBox } from '@hcengineering/presentation'
   import { Issue, TimeReportDayType, TimeSpendReport } from '@hcengineering/tracker'
-  import { DatePresenter, EditBox } from '@hcengineering/ui'
+  import { DatePresenter, EditBox, Button } from '@hcengineering/ui'
   import tracker from '../../../plugin'
   import { getTimeReportDate, getTimeReportDayType } from '../../../utils'
   import TimeReportDayDropdown from './TimeReportDayDropdown.svelte'
@@ -85,23 +85,31 @@
 >
   <div class="flex-row-center gap-2">
     <EditBox focus bind:value={data.value} {placeholder} format={'number'} maxDigitsAfterPoint={3} kind={'editbox'} />
+    <Button kind={'link-bordered'} on:click={() => (data.value = 0.125)}><span slot="content">1/8</span></Button>
+    <Button kind={'link-bordered'} on:click={() => (data.value = 0.25)}><span slot="content">1/4</span></Button>
+    <Button kind={'link-bordered'} on:click={() => (data.value = 0.5)}><span slot="content">1/2</span></Button>
+    <Button kind={'link-bordered'} on:click={() => (data.value = 0.75)}><span slot="content">3/4</span></Button>
+    <div class="buttons-divider" />
+    <Button kind={'link-bordered'} on:click={() => (data.value = 1)}><span slot="content">1</span></Button>
+  </div>
+  <EditBox bind:value={data.description} placeholder={tracker.string.TimeSpendReportDescription} kind={'editbox'} />
+  <svelte:fragment slot="pool">
     <UserBox
       _class={contact.class.Employee}
       label={contact.string.Employee}
-      kind={'link-bordered'}
+      kind={'no-border'}
       bind:value={data.employee}
       showNavigate={false}
     />
     <TimeReportDayDropdown
+      kind={'no-border'}
       bind:selected={selectedTimeReportDay}
       on:selected={({ detail }) => (data.date = getTimeReportDate(detail))}
     />
     <DatePresenter
-      kind={'link'}
       bind:value={data.date}
       editable
       on:change={({ detail }) => (selectedTimeReportDay = getTimeReportDayType(detail))}
     />
-  </div>
-  <EditBox bind:value={data.description} placeholder={tracker.string.TimeSpendReportDescription} kind={'editbox'} />
+  </svelte:fragment>
 </Card>
diff --git a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReports.svelte b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReports.svelte
index cda62950e0..ae836d683a 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReports.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReports.svelte
@@ -16,7 +16,7 @@
   import { DocumentQuery, Ref, SortingOrder } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import { Issue, Team, TimeSpendReport } from '@hcengineering/tracker'
-  import { Expandable, floorFractionDigits, Label, Scroller, Spinner } from '@hcengineering/ui'
+  import { Expandable, floorFractionDigits, Label, Spinner } from '@hcengineering/ui'
   import tracker from '../../../plugin'
   import TimePresenter from './TimePresenter.svelte'
   import TimeSpendReportsList from './TimeSpendReportsList.svelte'
@@ -42,21 +42,19 @@
 </script>
 
 {#if reports}
-  <Expandable expanded={true}>
+  <Expandable expanded={true} contentColor bordered>
     <svelte:fragment slot="title">
       <span class="overflow-label flex-nowrap">
-        <Label label={tracker.string.ReportedTime} />: <TimePresenter value={reportedTime} {workDayLength} />
-        <Label label={tracker.string.TimeSpendReports} />: <TimePresenter value={total} {workDayLength} />
+        <Label label={tracker.string.ReportedTime} />:
+        <span class="caption-color"><TimePresenter value={reportedTime} {workDayLength} /></span>.
+        <Label label={tracker.string.TimeSpendReports} />:
+        <span class="caption-color"><TimePresenter value={total} {workDayLength} /></span>
       </span>
     </svelte:fragment>
-    <div class="h-50">
-      <Scroller>
-        <TimeSpendReportsList {reports} {teams} />
-      </Scroller>
-    </div>
+    <TimeSpendReportsList {reports} {teams} />
   </Expandable>
 {:else}
-  <div class="flex-center pt-3">
+  <div class="flex-center">
     <Spinner />
   </div>
 {/if}
diff --git a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
index 713e3f9ca4..f99db970ce 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
@@ -18,6 +18,7 @@
   import UserBox from '@hcengineering/presentation/src/components/UserBox.svelte'
   import { Team, TimeReportDayType, TimeSpendReport } from '@hcengineering/tracker'
   import { eventToHTMLElement, getEventPositionElement, ListView, showPopup } from '@hcengineering/ui'
+  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import DatePresenter from '@hcengineering/ui/src/components/calendar/DatePresenter.svelte'
   import { ContextMenu, FixedColumn, ListSelectionProvider, SelectDirection } from '@hcengineering/view-resources'
   import { getIssueId } from '../../../issues'
@@ -51,18 +52,19 @@
         assignee: value.employee,
         defaultTimeReportDay
       },
-      eventToHTMLElement(event)
+      $deviceInfo.isMobile ? 'top' : eventToHTMLElement(event)
     )
   }
+  $: twoRows = $deviceInfo.twoRows
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<ListView count={reports.length}>
+<ListView count={reports.length} addClass={'step-tb-2-accent'}>
   <svelte:fragment slot="item" let:item>
     {@const report = reports[item]}
     {@const currentTeam = teams.get(toTeamId(report.space))}
     <div
-      class="flex-between row"
+      class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2"
       on:contextmenu|preventDefault={(ev) => showContextMenu(ev, report)}
       on:mouseover={() => {
         listProvider.updateFocus(report)
@@ -72,62 +74,36 @@
       }}
       on:click={(evt) => editSpendReport(evt, report, currentTeam?.defaultTimeReportDay)}
     >
-      <div class="flex-row-center clear-mins gap-2 p-2 flex-grow">
-        <span class="issuePresenter">
-          <FixedColumn key={'tmiespend_issue'} justify={'left'}>
-            {#if currentTeam && report.$lookup?.attachedTo}
-              {getIssueId(currentTeam, report.$lookup?.attachedTo)}
-            {/if}
-          </FixedColumn>
-        </span>
+      <div class="flex-row-center clear-mins gap-2 flex-grow mr-4" class:p-text={twoRows}>
+        <FixedColumn key={'tmiespend_issue'} justify={'left'} addClass={'fs-bold'}>
+          {#if currentTeam && report.$lookup?.attachedTo}
+            {getIssueId(currentTeam, report.$lookup?.attachedTo)}
+          {/if}
+        </FixedColumn>
         {#if report.$lookup?.attachedTo?.title}
-          <span class="text name" title={report.$lookup?.attachedTo?.title}>
+          <span class="overflow-label fs-bold caption-color" title={report.$lookup?.attachedTo?.title}>
             {report.$lookup?.attachedTo?.title}
           </span>
         {/if}
       </div>
-      <FixedColumn key={'timespend_assignee'} justify={'left'}>
-        <UserBox
-          width={'100%'}
-          label={tracker.string.Assignee}
-          _class={contact.class.Employee}
-          value={report.employee}
-          readonly
-          showNavigate={false}
-        />
-      </FixedColumn>
-
-      <FixedColumn key={'timespend_reported'} justify={'center'}>
-        <div class="p-1">
+      <div class="flex-row-center clear-mins gap-2 self-end" class:p-text={twoRows}>
+        <FixedColumn key={'timespend_assignee'} justify={'left'}>
+          <UserBox
+            width={'100%'}
+            label={tracker.string.Assignee}
+            _class={contact.class.Employee}
+            value={report.employee}
+            readonly
+            showNavigate={false}
+          />
+        </FixedColumn>
+        <FixedColumn key={'timespend_reported'} justify={'center'}>
           <TimePresenter value={report.value} workDayLength={currentTeam?.workDayLength} />
-        </div>
-      </FixedColumn>
-      <FixedColumn key={'timespend_date'} justify={'left'}>
-        <DatePresenter value={report.date} />
-      </FixedColumn>
-    </div>
-  </svelte:fragment>
+        </FixedColumn>
+        <FixedColumn key={'timespend_date'} justify={'left'}>
+          <DatePresenter value={report.date} />
+        </FixedColumn>
+      </div>
+    </div></svelte:fragment
+  >
 </ListView>
-
-<style lang="scss">
-  .row {
-    .text {
-      font-weight: 500;
-      color: var(--caption-color);
-    }
-
-    .issuePresenter {
-      flex-shrink: 0;
-      min-width: 0;
-      min-height: 0;
-      font-weight: 500;
-      color: var(--content-color);
-    }
-
-    .name {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  }
-</style>
diff --git a/plugins/view-resources/src/components/FixedColumn.svelte b/plugins/view-resources/src/components/FixedColumn.svelte
index 840d159b08..1654c50780 100644
--- a/plugins/view-resources/src/components/FixedColumn.svelte
+++ b/plugins/view-resources/src/components/FixedColumn.svelte
@@ -20,6 +20,7 @@
 
   export let key: string
   export let justify: string = ''
+  export let addClass: string | undefined = undefined
   let prevKey = key
   let element: HTMLDivElement | undefined
 
@@ -48,7 +49,7 @@
 
 <div
   bind:this={element}
-  class="flex-no-shrink"
+  class="flex-no-shrink{addClass ? ` ${addClass}` : ''}"
   style="{justify !== '' ? `text-align: ${justify}; ` : ''} min-width: {$fixedWidthStore[key] ?? 0}px;"
   use:resizeObserver={resize}
 >