diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index 1e2c359b21..9010a9c7bc 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -11755,7 +11755,7 @@ packages:
     dev: false
 
   file:projects/account.tgz:
-    resolution: {integrity: sha512-OovRIc/EsAAOCjUEaNz7eNQW0CmcpH+Bmz/n7zqb95iTerjRPt9zHDFsy/64YD74pPsGRN+/5QMsgwWrm2Yz+w==, tarball: file:projects/account.tgz}
+    resolution: {integrity: sha512-KOU1r6lZTE8pMSZXET+MStcG/v6C22kTaot91EnfL8x9Z8Rdv+qF0FNMF+fQNmf7tTnKyaztsjrkJqgEQWBm2Q==, tarball: file:projects/account.tgz}
     name: '@rush-temp/account'
     version: 0.0.0
     dependencies:
@@ -11807,7 +11807,7 @@ packages:
     dev: false
 
   file:projects/activity-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-t6+Tm+xOw5/xEJrX/ye5Yi/oNm0lbsA0dsyyCGaKoKSCyQp5tFih2p0ImdDFtCJrdS1b8+v3qYfTyGTIAdXoxw==, tarball: file:projects/activity-resources.tgz}
+    resolution: {integrity: sha512-+j+d+ZuyxcAfjp+bdMG0aLwAperzHeTjr2AYYN+Dknpr7tkibdT92EBh8jI0+/7xSKUKARkTmM/pveduQ9YdPQ==, tarball: file:projects/activity-resources.tgz}
     id: file:projects/activity-resources.tgz
     name: '@rush-temp/activity-resources'
     version: 0.0.0
@@ -11841,7 +11841,7 @@ packages:
     dev: false
 
   file:projects/activity.tgz:
-    resolution: {integrity: sha512-I/X25RMHtbjuBucaH/kPft3YIdTLHNTUwQmLlye05OovEiA1Z8RXQiyumFPVEofdWOlxrnImiPnQpCbe78cGew==, tarball: file:projects/activity.tgz}
+    resolution: {integrity: sha512-xxqu7H82Qc94sBeOhKS8TgAdK+pk3YsUOlNTJ9qymIgliCoYwjvPRzkriNsD8UGK46pWOYOSLj++VoWObge6PQ==, tarball: file:projects/activity.tgz}
     name: '@rush-temp/activity'
     version: 0.0.0
     dependencies:
@@ -11885,7 +11885,7 @@ packages:
     dev: false
 
   file:projects/attachment-assets.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-tCyrPFvBFpDoCubWbsS0EluAB244Pag5BkyN+HTcwyS+ZWjdmkjjbZXNcrN/xYy/aNOX79P7QFfhhvSehdXDxg==, tarball: file:projects/attachment-assets.tgz}
+    resolution: {integrity: sha512-ygisUfZcVk6tF5kC8Z6z93nQMtlJ/l40yX/4fzh+g210vqoyPBr0fdZiOJULvIy0hGpufBsc0lL+bx0AZO2Ozg==, tarball: file:projects/attachment-assets.tgz}
     id: file:projects/attachment-assets.tgz
     name: '@rush-temp/attachment-assets'
     version: 0.0.0
@@ -11907,7 +11907,7 @@ packages:
     dev: false
 
   file:projects/attachment-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-BjC4jqPY4nr56anQHTGzpLKwQsor/i/rleVUuLOXPdeBCaCYTVD4SAM8gg3nIV9Rp84vG7wFsfLyc19i8XSlIg==, tarball: file:projects/attachment-resources.tgz}
+    resolution: {integrity: sha512-lNjIqEPlwpqiIU/+fnLziW9hiIJvnwsUCC6xfYq4h1UpSwzwFsxerfsj1F1kiv94YTjgbagwFGJDZQ2lkMavTQ==, tarball: file:projects/attachment-resources.tgz}
     id: file:projects/attachment-resources.tgz
     name: '@rush-temp/attachment-resources'
     version: 0.0.0
@@ -11942,7 +11942,7 @@ packages:
     dev: false
 
   file:projects/attachment.tgz:
-    resolution: {integrity: sha512-my8w4ghzWbxG6oHfXAuSTxxjUjCyLMkTYXfM5sAesq2QairsKKNs7F0gOt0l8FgPMiIPIDlf9/S7z8U1RJGt1g==, tarball: file:projects/attachment.tgz}
+    resolution: {integrity: sha512-qyNTavrELwzJjhIVcMQeJnXbcRuzlAraXMWDhYa9wtSGQXp8KM3POe9PF7LbfSithVVzKeHKVNzwimqaluwt6A==, tarball: file:projects/attachment.tgz}
     name: '@rush-temp/attachment'
     version: 0.0.0
     dependencies:
@@ -11984,7 +11984,7 @@ packages:
     dev: false
 
   file:projects/automation-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-wNhI5yP96XR2WJVstbKbDXfJ/m6SaVjooMuqAJ58IIOCrfEyVJKm4bv37A3haqGzmrw3wOULPUc5HtCiB/zwnQ==, tarball: file:projects/automation-resources.tgz}
+    resolution: {integrity: sha512-VYWdtOaTabI44ry0kFWQ/M2Z7lU/r89u90FiUkzx71gUOURbEI5W9jZp6Y+q9/J8VTvCRWRaR152T8b5GX+dHA==, tarball: file:projects/automation-resources.tgz}
     id: file:projects/automation-resources.tgz
     name: '@rush-temp/automation-resources'
     version: 0.0.0
@@ -12018,7 +12018,7 @@ packages:
     dev: false
 
   file:projects/automation.tgz:
-    resolution: {integrity: sha512-OSEzbRUUCGEMCavTF7QqSPsUG2TQEsMmj7q24z6kYkx3/ZWA7ifD1Ihs1t9dPGDE1UMr1sL8QQ5VtIBe1cmWBA==, tarball: file:projects/automation.tgz}
+    resolution: {integrity: sha512-AzSdN772OgQ+Q3xR5ptwytY25PME9vVASk0dbOVwJsKY2NBmq+fJeE1yYfqtXOLlK+l2jhh6Nbs86d4C/E3z0A==, tarball: file:projects/automation.tgz}
     name: '@rush-temp/automation'
     version: 0.0.0
     dependencies:
@@ -12039,7 +12039,7 @@ packages:
     dev: false
 
   file:projects/bitrix-assets.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-od8BIMBLDrqGK7JpEfLPSoVXolqcFpzeZ9vsM9DC0tB/75TxmYSKiZVMLa8J65oAfzfxExDaO/5nAZkV6zFDyQ==, tarball: file:projects/bitrix-assets.tgz}
+    resolution: {integrity: sha512-Saf6JN3mDGm3xsOfhAojUnzoNhsJaVCnUNZ8pvBNmaFRBRT1Gk3x4mWusZHjAUMx4XrL2qnVH7Glpci8MnFwoA==, tarball: file:projects/bitrix-assets.tgz}
     id: file:projects/bitrix-assets.tgz
     name: '@rush-temp/bitrix-assets'
     version: 0.0.0
@@ -12061,7 +12061,7 @@ packages:
     dev: false
 
   file:projects/bitrix-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-N2OwtQgtxXSqv0rMuXvAFNc+BfKez0HIvDm6sTReE5up9sY+s90bkCoEv+aavk2Lc97geEoICp5N96BqJRberA==, tarball: file:projects/bitrix-resources.tgz}
+    resolution: {integrity: sha512-N1AP86P0vwsCDydk6atKo29/Vk4CqNTUNPdyBnbjXKoAzkkxBpwPlorOujKsPgbxM1jiH6HpBqxUF2hXpswVmA==, tarball: file:projects/bitrix-resources.tgz}
     id: file:projects/bitrix-resources.tgz
     name: '@rush-temp/bitrix-resources'
     version: 0.0.0
@@ -12099,7 +12099,7 @@ packages:
     dev: false
 
   file:projects/bitrix.tgz:
-    resolution: {integrity: sha512-q60qcQ8vCZpU9GO75RFygOd/AzFOPjO6yh+UseS2gGkMJIOauOURX7a5899VrfOayxg17ZruhKj5D6A05QGlog==, tarball: file:projects/bitrix.tgz}
+    resolution: {integrity: sha512-jfb70ygonyCK4byNzqTsIbZKDeUdqjS4bRKp53Kl/HsCStGKSbJtpkmuq5/B5ZyQCtIjGdJxsjFQSKFPHN4v8A==, tarball: file:projects/bitrix.tgz}
     name: '@rush-temp/bitrix'
     version: 0.0.0
     dependencies:
@@ -12123,7 +12123,7 @@ packages:
     dev: false
 
   file:projects/board-assets.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-MvFUp+7USa++Y7Z1XNc0yEWk5aZvWpqS3KXxIzfyKzvGGwIBTPZPq1tOJHmFYTZ6Yep0gQcAEJh7VN1vip4VOQ==, tarball: file:projects/board-assets.tgz}
+    resolution: {integrity: sha512-pt919tpo/wvpxCMYfnet3rz/MFvVKMuJzfkODSx9XeXS0TlaZ8c9Ufq9MGusQEdH3A4li0+aS2pjOrh3ZxWgUw==, tarball: file:projects/board-assets.tgz}
     id: file:projects/board-assets.tgz
     name: '@rush-temp/board-assets'
     version: 0.0.0
@@ -12145,7 +12145,7 @@ packages:
     dev: false
 
   file:projects/board-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-L5IiweUnJF7OLM5apihVfkUUJNBoskP/F/u7VxLErvCkITB8wEMuyB38T1aE0oYz9Bvo9Y30hKdruUF3dlwrMg==, tarball: file:projects/board-resources.tgz}
+    resolution: {integrity: sha512-rllwbfTfT4o2BjSSz7Yst5EDsO/DjO7XTJxgUvKELQE8uw2USwQuhn7WqneJ05UrNSR+2GqXIaKZksyY0mcqJQ==, tarball: file:projects/board-resources.tgz}
     id: file:projects/board-resources.tgz
     name: '@rush-temp/board-resources'
     version: 0.0.0
@@ -12179,7 +12179,7 @@ packages:
     dev: false
 
   file:projects/board.tgz:
-    resolution: {integrity: sha512-Gum1IIlGKgcA7Ov0FyeyYmN3YIPMBJe5eilm77HGHIcrrIirMYtEyT/8wOonFJFcCjei1I+/1Cto9i4AvyuJkQ==, tarball: file:projects/board.tgz}
+    resolution: {integrity: sha512-ekNNeVOB7AlML2QDYy08Vw9W51sToU4UgNVjj/1aMUjdhGag8Xrbh1WozpAEkK/7R2hrP76OLl1itIqO+jsTnw==, tarball: file:projects/board.tgz}
     name: '@rush-temp/board'
     version: 0.0.0
     dependencies:
@@ -12199,7 +12199,7 @@ packages:
     dev: false
 
   file:projects/calendar-assets.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-jIIUGG4YAPhpGG2QIsuGOB2LXnufwVaVVfLA8gv3K/mqwLsO9hq+GqeZgOwSfigRE7HDtjd+EDGcbaXzzhPQXQ==, tarball: file:projects/calendar-assets.tgz}
+    resolution: {integrity: sha512-x14DohXwx1UO4Z9s/TWUNZQe6n2oFXUCe3wTD1ZXruQvvD6ZXNRnOR5R8uwEVhbpm9oDs3HNxEEhmajbz8JiiQ==, tarball: file:projects/calendar-assets.tgz}
     id: file:projects/calendar-assets.tgz
     name: '@rush-temp/calendar-assets'
     version: 0.0.0
@@ -12221,7 +12221,7 @@ packages:
     dev: false
 
   file:projects/calendar-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-lFexiTkk6+mx10OMOK6sqGH0qBWbE93nu9Ju/jnpl5IsyYSOFCoPcM+AiGCiS2UudujhSPlQLBlvQsFeSrpR2A==, tarball: file:projects/calendar-resources.tgz}
+    resolution: {integrity: sha512-Z4eGH16Ja24/rVA30rHfZLAU6OJm6OWhoSt9rHTgyPubsnuwjf82cpJxtlgX5U/24wKxr0M7c8Sz0WYgwL4Hww==, tarball: file:projects/calendar-resources.tgz}
     id: file:projects/calendar-resources.tgz
     name: '@rush-temp/calendar-resources'
     version: 0.0.0
@@ -12255,7 +12255,7 @@ packages:
     dev: false
 
   file:projects/calendar.tgz:
-    resolution: {integrity: sha512-Yx6IDYCpl7befS3Rcq2P4zr/E4Ub84WfN0uaoaFryBqAbaR0KvjyWcfTtgMucbVjuCZNSa387UO+wxZZCF9S8g==, tarball: file:projects/calendar.tgz}
+    resolution: {integrity: sha512-xgjZ35WQc8IpLzNEt6AiehN2G97P1qxF6zJ7+vuwzKyhfb6GTzmvfT5zOu3Sxw3xTulIgSJdWh9CfhS/hkkjXw==, tarball: file:projects/calendar.tgz}
     name: '@rush-temp/calendar'
     version: 0.0.0
     dependencies:
@@ -12275,7 +12275,7 @@ packages:
     dev: false
 
   file:projects/chunter-assets.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-5cQW2QtH8Go4AXHq0Tq/1cz0mdpPuhKfm9CQ2oQi8dnfv7OKDcZucKq6JCwfJlZJSX5Zu3/N7WTgsPAdmUcC+g==, tarball: file:projects/chunter-assets.tgz}
+    resolution: {integrity: sha512-/i30q2a+gSc3nCR+KmUBIv4Nr8UsoTq5BiP8TjFuK46rH1JHB0OBA2yQ6oH6EBM7RI4pEPaCHsVvVOe1cUHELw==, tarball: file:projects/chunter-assets.tgz}
     id: file:projects/chunter-assets.tgz
     name: '@rush-temp/chunter-assets'
     version: 0.0.0
@@ -12297,7 +12297,7 @@ packages:
     dev: false
 
   file:projects/chunter-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-4M4cvllkMFl9wi5dhcH3BvP/DOUsY2GLYpKzvOOj5UJ4uAycTUuikb0whhigeqPww4oynL3AiyrezctTz1EVwg==, tarball: file:projects/chunter-resources.tgz}
+    resolution: {integrity: sha512-NpiRdKALcTXLae48315ktMVbXHIc0jcwNHePawi3qtGjFLRzHyF/SSQudvxLbyI9JSx0/vqv+ZTWPx22IVboeQ==, tarball: file:projects/chunter-resources.tgz}
     id: file:projects/chunter-resources.tgz
     name: '@rush-temp/chunter-resources'
     version: 0.0.0
@@ -12332,7 +12332,7 @@ packages:
     dev: false
 
   file:projects/chunter.tgz:
-    resolution: {integrity: sha512-no1Im7JlMOVajzx6WNtHau84HZiC91rbSx2BlnwBXq/7AUj6zBfcv9q1aZZu1bNj5bpbWmVtV8+iv76poniXdw==, tarball: file:projects/chunter.tgz}
+    resolution: {integrity: sha512-wH+c+yBSbAi9Tdzq+Q65aAJcx/fcJFuzciJz3xuGUlzTB16OM3DH7uh0it3q7t4gqMeHeT8Wz59Qh3Cdyz3kOw==, tarball: file:projects/chunter.tgz}
     name: '@rush-temp/chunter'
     version: 0.0.0
     dependencies:
@@ -12352,7 +12352,7 @@ packages:
     dev: false
 
   file:projects/client-resources.tgz:
-    resolution: {integrity: sha512-a64ev9mQvmlpGyI73Hc7KWwHjQpDkLwnAwxn3+Yy8Fhz2mNg+/vDACgx/jhQ5Jt5nMfXeTYI4rq32nllYjbfJA==, tarball: file:projects/client-resources.tgz}
+    resolution: {integrity: sha512-Zck4wUuWxsenygffYqlZXmw7Eya9+Vc7EPNaL8SY8R8/fJIjynxVbPvXnvhyDYOFySTqOcLSQCuRYWIDRIHZiA==, tarball: file:projects/client-resources.tgz}
     name: '@rush-temp/client-resources'
     version: 0.0.0
     dependencies:
@@ -12372,7 +12372,7 @@ packages:
     dev: false
 
   file:projects/client.tgz:
-    resolution: {integrity: sha512-IybyLqUwIeBJbdke6mWseKfbYAQ4wUse1L9jNqrDHPBM8AR7NjcIruthGg7ZVJ+dToxVkA11jM/p9jlPvk/Wgg==, tarball: file:projects/client.tgz}
+    resolution: {integrity: sha512-5WzBo/o13l1occDH0kZ+kpwYbZo9v221R7RJclgr17Pt68E5o0kRroug+hSTbHJT+ghWRno4rXWtNqnWld1w1Q==, tarball: file:projects/client.tgz}
     name: '@rush-temp/client'
     version: 0.0.0
     dependencies:
@@ -12392,7 +12392,7 @@ packages:
     dev: false
 
   file:projects/contact-assets.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-ifT7UM5xGrlkJtx0jRKaDZkN4l+LTl1EDGIxfUqIE4AaDMR5NaPH2R38xySvm/fdiEzK/R3ZVuchDE/0DtZT5w==, tarball: file:projects/contact-assets.tgz}
+    resolution: {integrity: sha512-CM16PyDpx6Hvrbe/nTog0jvJq0rWe93A4fN/A4BVr+6TeGsvCAhy0gmmkClA7tCIbC8iNMXgkBFbVgF1yGIKiw==, tarball: file:projects/contact-assets.tgz}
     id: file:projects/contact-assets.tgz
     name: '@rush-temp/contact-assets'
     version: 0.0.0
@@ -12414,7 +12414,7 @@ packages:
     dev: false
 
   file:projects/contact-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-15zj+WBYud2FJyadXyiTm27bXYtCF4kC1nHqyLO1UL9cFXs07MTGMJSbEs5zKkP0RDF6xtc4Y8pDhb2pCtoWAw==, tarball: file:projects/contact-resources.tgz}
+    resolution: {integrity: sha512-iRHavY5aVC0Y28XYeJy5bys3+Gg4S6H/pglhMM9PzMhwnFkNCkYgflvIhxm2uxjSH40TJxK9x1/XbIW2hyYN9w==, tarball: file:projects/contact-resources.tgz}
     id: file:projects/contact-resources.tgz
     name: '@rush-temp/contact-resources'
     version: 0.0.0
@@ -12448,7 +12448,7 @@ packages:
     dev: false
 
   file:projects/contact.tgz:
-    resolution: {integrity: sha512-q9/aZhTil7ZQHujYEW8YTBxNK0k0fPDaEhUHbDDlfnnm8wlw89amuluUeS5D3PzREobajNalL4cUNPySVWJMlw==, tarball: file:projects/contact.tgz}
+    resolution: {integrity: sha512-Dq/BsmHdL+Uy7l0UQtrjcwyDYza3PW9o+ELiQbJWEtPSS4zPBb3Uj4cs68yjYigh6nwU7rSyjrRa81C8WOEA7g==, tarball: file:projects/contact.tgz}
     name: '@rush-temp/contact'
     version: 0.0.0
     dependencies:
@@ -12470,7 +12470,7 @@ packages:
     dev: false
 
   file:projects/contrib.tgz:
-    resolution: {integrity: sha512-B7ZQVJSfSMSGh1gOMKRslruQqx1ynD9mSH+2FmEPSLOJ4ImtL0ztSGeaTZWZefFQ2TyefLuefZ0UIq9884VAWA==, tarball: file:projects/contrib.tgz}
+    resolution: {integrity: sha512-b3GOkclb7j9evVLEgTouLPwjRAS3iDPLoyzQB+I6e7D8dkzWOGtpxajQc4aAWsRTOwXScroNo/69EwWO8jC4zw==, tarball: file:projects/contrib.tgz}
     name: '@rush-temp/contrib'
     version: 0.0.0
     dependencies:
@@ -12518,7 +12518,7 @@ packages:
     dev: false
 
   file:projects/dev-account.tgz:
-    resolution: {integrity: sha512-TJToey8SA6mcD3v9KJdZm+P/FpNyQd3SPWP8syW4RORleXHk2BwWWUVgAeiAnbVm0wFGzyXoO1MUgtFeDf+ckg==, tarball: file:projects/dev-account.tgz}
+    resolution: {integrity: sha512-8y2rJVPvx42g/ThWjWM7TAZRpBF1+pC5XkJg8Tw9jriixtxOekPO7XImOsT2Wt/T1TbJMvW+Ni1MezrvLkUWEQ==, tarball: file:projects/dev-account.tgz}
     name: '@rush-temp/dev-account'
     version: 0.0.0
     dependencies:
@@ -12539,7 +12539,7 @@ packages:
     dev: false
 
   file:projects/dev-client-resources.tgz:
-    resolution: {integrity: sha512-4f9TgfQuHvc2pwm/zpoxMU67AibUgVDObKNghCQEM94qm5m28yAtUXXp4vKCvqruDA5p3Azqh8oGQDXGqDNXhg==, tarball: file:projects/dev-client-resources.tgz}
+    resolution: {integrity: sha512-DJk7Si94620rY6qe997/WuHUEEiSMq78Xh17vLGaNl+fBgrFkozsj5w+YgSwfV8ZEgOz0lE3MpxMi/kCJ4Fnbw==, tarball: file:projects/dev-client-resources.tgz}
     name: '@rush-temp/dev-client-resources'
     version: 0.0.0
     dependencies:
@@ -12559,7 +12559,7 @@ packages:
     dev: false
 
   file:projects/dev-server.tgz_@types+node@16.11.68:
-    resolution: {integrity: sha512-a9p78AOAkEOdf9L1QF1hKZ9r1kP45KyNX1k5m8tN0lJtY7Zjxo5kUADQ/uoAMYgcM7QvcIFzlh1w2zYAIxh3Tw==, tarball: file:projects/dev-server.tgz}
+    resolution: {integrity: sha512-emR9CoYN4w4nOnFtArgWtkWJPEtkV238LMMllWvoe05lRpE1naYMfNQEXushT5xZ7Y0C2DhE9bmuop1coHyQRw==, tarball: file:projects/dev-server.tgz}
     id: file:projects/dev-server.tgz
     name: '@rush-temp/dev-server'
     version: 0.0.0
@@ -12585,7 +12585,7 @@ packages:
     dev: false
 
   file:projects/dev-storage.tgz:
-    resolution: {integrity: sha512-EFI2LLovZMDH4EOSaGA83f6p9bmWWH13M9uN7wsLFtw2Z89JEQ9yG1DUUaQPfkbVnzd2bPuJXDAsW2TxTlU5GQ==, tarball: file:projects/dev-storage.tgz}
+    resolution: {integrity: sha512-5Fz3nvQB11wS5NShBEg/Dfcka83QW6iTP4mTdySB0dF52kk8lE2BY8dTcVH6uL7a7JGny0Fs1bTSMolS3Kab/Q==, tarball: file:projects/dev-storage.tgz}
     name: '@rush-temp/dev-storage'
     version: 0.0.0
     dependencies:
@@ -12605,7 +12605,7 @@ packages:
     dev: false
 
   file:projects/devmodel-resources.tgz_ed2e4f4d904d50838e5f15c036f084b4:
-    resolution: {integrity: sha512-K4rlhReO4iVarCLgCVL0+POIKcIi7JqjeBRY4mP3gtlNsHjPSHNV7bGMK8aHZGxm1rusheKvQngqTScQZrhUUA==, tarball: file:projects/devmodel-resources.tgz}
+    resolution: {integrity: sha512-j2mxE+oVMPF+EIc7YWIVMTPJ3G8FFiazFN5o+T4JT8jPGAzCwTtqFT6N8OBYqrb1VU+I+G6Im1dVXVkPcGj7Jw==, tarball: file:projects/devmodel-resources.tgz}
     id: file:projects/devmodel-resources.tgz
     name: '@rush-temp/devmodel-resources'
     version: 0.0.0
@@ -12639,7 +12639,7 @@ packages:
     dev: false
 
   file:projects/devmodel.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-XaEhOJaJnlbO/3xLvLz45V60suGWJiYfy+G6tn8kEs2ZUwD8OnR6RuHOS2A3Tlf9L+pb/JFRE/PXECBxePoCUg==, tarball: file:projects/devmodel.tgz}
+    resolution: {integrity: sha512-6EhVv0bFS9rTARUd5HXulHPFol7Qj60GGqE2QpiRKjyzecr/l2pUlW0n/K7GxoYpo7NmUzgmwG4oRyCwMER06Q==, tarball: file:projects/devmodel.tgz}
     id: file:projects/devmodel.tgz
     name: '@rush-temp/devmodel'
     version: 0.0.0
@@ -12682,7 +12682,7 @@ packages:
     dev: false
 
   file:projects/document-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-WDHziwYqzREkmgByFTCuQyTGRuQaQCmLBt5dcG0gP04by2tZaTsi8KL4CzjPkhdtXSzMtfZu4I2l8Iu8/Uo0Cg==, tarball: file:projects/document-resources.tgz}
+    resolution: {integrity: sha512-oeqJIPp8/aTjxhBxoVD9t97oC9ClCwAVLsnqnbUtSQfMDpw5ofM7wrsxO6PuL7fGc0SO1cyoccqyYTdafGG+PA==, tarball: file:projects/document-resources.tgz}
     id: file:projects/document-resources.tgz
     name: '@rush-temp/document-resources'
     version: 0.0.0
@@ -12716,7 +12716,7 @@ packages:
     dev: false
 
   file:projects/document.tgz:
-    resolution: {integrity: sha512-gq2hdL7wAPA7jAEcBbHyqdSL0fwydoXYzqOJf5654b8QZ8xD5F5fzECmGgYS2ogfrScXrFCgucBi8pLj5VfqkQ==, tarball: file:projects/document.tgz}
+    resolution: {integrity: sha512-aAM7DsY3ONjFhUp/NBLb+YbpeISoMhZ0PgmeqkB2NpsQ9UY0A+ESARoGbUooQE+k+FHNDCM5wGN6p355AG6AIQ==, tarball: file:projects/document.tgz}
     name: '@rush-temp/document'
     version: 0.0.0
     dependencies:
@@ -12736,7 +12736,7 @@ packages:
     dev: false
 
   file:projects/elastic.tgz_@types+node@16.11.68:
-    resolution: {integrity: sha512-S+7PKI/4kn4kpypIT7IiblpJTeZKDGLDpqvr3fcYmF6DNDgAXQOeXPJSn6PnhHOS3R5v0Mdd+yC1Erv/jSg55Q==, tarball: file:projects/elastic.tgz}
+    resolution: {integrity: sha512-KR5lYZb7q0E5rEJ10YCNGs4Yt2vi9+7DiKiB/exaj1IpYkIYxBO5XEtlZfpTtTPWw739PRNI466dqTYCXISsbg==, tarball: file:projects/elastic.tgz}
     id: file:projects/elastic.tgz
     name: '@rush-temp/elastic'
     version: 0.0.0
@@ -12762,7 +12762,7 @@ packages:
     dev: false
 
   file:projects/front.tgz:
-    resolution: {integrity: sha512-B0sxYhEpme8t8o8xslh7Rn2rmbelaimNaEWv9HJNQDePV2pJTCXskvU6A1tfadJPksvoWH2cFuySTPWwJrdvTA==, tarball: file:projects/front.tgz}
+    resolution: {integrity: sha512-0dMUG84GGGb+LNg4nav6J1+FxTicFNXCjh3nD3XM2pe62lc/mrz1g+kVUQ+8o0oZU92rMfxcmOcvakUTIIOFyw==, tarball: file:projects/front.tgz}
     name: '@rush-temp/front'
     version: 0.0.0
     dependencies:
@@ -12803,7 +12803,7 @@ packages:
     dev: false
 
   file:projects/generator.tgz:
-    resolution: {integrity: sha512-hGQ23wTgfC8qI6E8100M14WYQAYCvWO54DsVadGeVbm9wDJ7o5znApdbcstHwP8sQpdqUGovPWb9Jh1GzNc2ag==, tarball: file:projects/generator.tgz}
+    resolution: {integrity: sha512-EcSHyOOIEG6fMvccptjBgzouQ2YK22aRuzLW/R98Up6Y7J3MEGROk0EuJXpWZRB8DT2LZqtjedHhnG7pZZO9Qw==, tarball: file:projects/generator.tgz}
     name: '@rush-temp/generator'
     version: 0.0.0
     dependencies:
@@ -12840,7 +12840,7 @@ packages:
     dev: false
 
   file:projects/gmail-assets.tgz:
-    resolution: {integrity: sha512-7adxJ2qTUtyzxJlbwg8OwFPSekK4FOjraY1Gx3dkM6SEkiyM1lBiCy6sy01UpUwgMkoGTumCROvaa32tWwLHTw==, tarball: file:projects/gmail-assets.tgz}
+    resolution: {integrity: sha512-+s28U9xhVGKaIrQ4UzJYeCcFa/4Lz90Q7mb7lpAIlP3NrUGZZZhmOWd5n5Qtr2EVylBy7zbb8ekm1azfu70CnA==, tarball: file:projects/gmail-assets.tgz}
     name: '@rush-temp/gmail-assets'
     version: 0.0.0
     dependencies:
@@ -12861,7 +12861,7 @@ packages:
     dev: false
 
   file:projects/gmail-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-pKM8XsbDYZ0G4EZVvFhDK+w7gpsfXDF6r8H6EPXQ72dHyx/QaufC0zEtM2druMY+6bw7TB/Z4gkwa7CYVwfvuA==, tarball: file:projects/gmail-resources.tgz}
+    resolution: {integrity: sha512-4PQNoz0FjagP95mZsVTj2Xt+aVYgK6d2apqYDmJ1/6B4n8uHiyW/uq0JkFWa08jglWO6N9C86ohzsI6PAzsyWw==, tarball: file:projects/gmail-resources.tgz}
     id: file:projects/gmail-resources.tgz
     name: '@rush-temp/gmail-resources'
     version: 0.0.0
@@ -12895,7 +12895,7 @@ packages:
     dev: false
 
   file:projects/gmail.tgz:
-    resolution: {integrity: sha512-TlSnoX+bQSNPHv0mCiIyXrsKLL+PhuYgtWaYxmJomh5nBx9Hh+V5aM8JhuzmQP8lYqp8RxAnSO3s7VQoOxAURw==, tarball: file:projects/gmail.tgz}
+    resolution: {integrity: sha512-vk2vPWjHX1WSe4FpeK4VyR3HKUJXBFpqUBKTdaQv4NxXwIngObq3A/Dnr4kCMG/urWbTUO6P3DZYpg+1lTSDuA==, tarball: file:projects/gmail.tgz}
     name: '@rush-temp/gmail'
     version: 0.0.0
     dependencies:
@@ -12915,7 +12915,7 @@ packages:
     dev: false
 
   file:projects/hr-assets.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-y0zfVYPil4xDvvAOvBhzFJ2Jqr29Kirf19Z5lUoyWjt+OHRZbZ3hpQP4KfDWjs0TSXPcsblp/xQTVmQCLfa/QA==, tarball: file:projects/hr-assets.tgz}
+    resolution: {integrity: sha512-E7crOAFCnUCIkFRBLn8vrH20J8z0H4syRwAxjJ2LSkaTvSPV4OgzOCT0TogP6uodw4gndQDf+/v+87MhkDEuEw==, tarball: file:projects/hr-assets.tgz}
     id: file:projects/hr-assets.tgz
     name: '@rush-temp/hr-assets'
     version: 0.0.0
@@ -12937,7 +12937,7 @@ packages:
     dev: false
 
   file:projects/hr-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-fbTE9AlC5B/GahelhiNfylMMHFos0p335yZXZ0ZD41gc3oMtJZLQgOpgLwtmeglf7DVIzc2Xn5/28Dkz2JP2eA==, tarball: file:projects/hr-resources.tgz}
+    resolution: {integrity: sha512-O9oPqz8LAOloT885unvoQ5kgrxbvqnMcokCAQfscktCYt/RD2/AsZDnS35dlTfH3428RLzacxjRDVgXFgACIiA==, tarball: file:projects/hr-resources.tgz}
     id: file:projects/hr-resources.tgz
     name: '@rush-temp/hr-resources'
     version: 0.0.0
@@ -12971,7 +12971,7 @@ packages:
     dev: false
 
   file:projects/hr.tgz:
-    resolution: {integrity: sha512-xorRWjBNhjZ+y24nqmCRwH7yQbZmn4uUvnOlJsbe6SxA6aCEIWrQcyK1RPckXzL6yO84ASUN7Z1zSUdN0Ydplw==, tarball: file:projects/hr.tgz}
+    resolution: {integrity: sha512-rTXxf2WSIQnkl/iYI1DchHg7iXitGSLsx7MEOn+kY/yPCVLdjSxnJuiiC8gv7hxLFo68xa233McqmbTNZAkg7w==, tarball: file:projects/hr.tgz}
     name: '@rush-temp/hr'
     version: 0.0.0
     dependencies:
@@ -13027,7 +13027,7 @@ packages:
     dev: false
 
   file:projects/image-cropper.tgz:
-    resolution: {integrity: sha512-sXiMJ5mR55vtiLvfToXTdJEoVANMA3X3rmY/5Q9xvcs84IJMYaA3almyVw0FU7o6NWfiIoOhLKIPqJ7EDPdVlQ==, tarball: file:projects/image-cropper.tgz}
+    resolution: {integrity: sha512-mrTuU0POiMd4kzWBxS7d09s2SLJ5ZxSfc1W1eCdCP/MsDWM9jvLA8aSUveFAQ1ykERsB9OwM2z+gDPSBrISkXQ==, tarball: file:projects/image-cropper.tgz}
     name: '@rush-temp/image-cropper'
     version: 0.0.0
     dependencies:
@@ -13047,7 +13047,7 @@ packages:
     dev: false
 
   file:projects/inventory-assets.tgz:
-    resolution: {integrity: sha512-oUgZ1hnCJw/lfBRyOHSstweceLe2NytJNopRdx5vjk+sq9x7jMCtDX382Co/fEAq+tPAEUecQvW8bC4xKZck7w==, tarball: file:projects/inventory-assets.tgz}
+    resolution: {integrity: sha512-g2rtKoLqwRtZdV6zSxSkNjgcDrlI+x+h1APITXMqpKk1b98KT4PEpug48gFIZ8FJ8WHwqq+Y7RuYzijh3Bv/ww==, tarball: file:projects/inventory-assets.tgz}
     name: '@rush-temp/inventory-assets'
     version: 0.0.0
     dependencies:
@@ -13068,7 +13068,7 @@ packages:
     dev: false
 
   file:projects/inventory-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-2alvLmWn2ufdpCgLr0Rmp+ejoZ8A10DZAdk/aqd1TXvFWfQq4A/ILdsm+93hUPzN1rXqNCNUgVtK6geehc4wEQ==, tarball: file:projects/inventory-resources.tgz}
+    resolution: {integrity: sha512-ZzLNbJC1MuO7dcgL6Rg2P7YE2JvstPxmp+il6unyOFiZOYEuZOBhv/2yS4rcAL+WuQPKfKsLgfbFELlAugBQfQ==, tarball: file:projects/inventory-resources.tgz}
     id: file:projects/inventory-resources.tgz
     name: '@rush-temp/inventory-resources'
     version: 0.0.0
@@ -13102,7 +13102,7 @@ packages:
     dev: false
 
   file:projects/inventory.tgz:
-    resolution: {integrity: sha512-rHm32kJ2SfcxlVH97g7Fs3AnDrDKC1OT0vBTxRT+Gk0ut9dIWbCkVETTLMHVkjCYqDV282pJEorFUuObCVUF7Q==, tarball: file:projects/inventory.tgz}
+    resolution: {integrity: sha512-Wo9xFbcHfZSm87+XLNpqaWJ0Rs/nWWpdG4+1xt7U0CSmaIhnFjV4+ZkDUVi7yMx5V5mRMtEOha71cNsqUgGCng==, tarball: file:projects/inventory.tgz}
     name: '@rush-temp/inventory'
     version: 0.0.0
     dependencies:
@@ -13122,7 +13122,7 @@ packages:
     dev: false
 
   file:projects/kanban.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-d9uk/HQILW+jBwEA8OSTNPbm1XBXqYpF7shYgW+L1NnWqtFgKmLNhiJWPVyaRCL2b85HHkx7hSsXwm12VJX7LQ==, tarball: file:projects/kanban.tgz}
+    resolution: {integrity: sha512-7gfB/lRVrTXrEr43KqTK/JArqqNHEgtJMSP8HWZKjZ+sK7oIIk9Jl5wy20Pe30psumU/Vdr4cM9Q/1AgT1bXcQ==, tarball: file:projects/kanban.tgz}
     id: file:projects/kanban.tgz
     name: '@rush-temp/kanban'
     version: 0.0.0
@@ -13179,7 +13179,7 @@ packages:
     dev: false
 
   file:projects/lead-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-iJFzPQSpiuYDZbI0FHlWUXJzMfM0DpugJkQw1jgG0i+XPbJYlFa+2KEftyJ5lCGt3JVYxHYe6BDphvlS95rwsQ==, tarball: file:projects/lead-resources.tgz}
+    resolution: {integrity: sha512-RM2DryEisYUxJVineNvtZRN+cxrX9r7xYjkrxZNHLLW0zTrUS2iWNt9vNjHeJC5X9wf44f86UfSWvkZw0h90Jg==, tarball: file:projects/lead-resources.tgz}
     id: file:projects/lead-resources.tgz
     name: '@rush-temp/lead-resources'
     version: 0.0.0
@@ -13213,7 +13213,7 @@ packages:
     dev: false
 
   file:projects/lead.tgz:
-    resolution: {integrity: sha512-gNsUwgWnANBAr7YtNzaeUOM5ayEBaGpl8jFAjfT7NlkGuhL1vkVAl/1ABvtz0DEcsaFMPdu3NJL8k9e8QSQDHg==, tarball: file:projects/lead.tgz}
+    resolution: {integrity: sha512-gB8yu25Fam/YzpluTqSQBQLBSUn9cR2U2SQu6KktaAOHWdwSo/4xTVgSF+EzGsghKitlILA7SFejKqDoi6gToQ==, tarball: file:projects/lead.tgz}
     name: '@rush-temp/lead'
     version: 0.0.0
     dependencies:
@@ -13233,7 +13233,7 @@ packages:
     dev: false
 
   file:projects/login-assets.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-W0Fh92bc+3KQ9v+KR3t/TIllLWd7FGvZ9PRk8gqxHkXBi8See8fU1wTIte1Ae24yj5z+CRNvpuYvzLpkMv9CFQ==, tarball: file:projects/login-assets.tgz}
+    resolution: {integrity: sha512-fnOL9F6IAW7uML8lFUjpYwm8/bbAiq6rK0yZKZBen1DxbQdEtnWhM5BYG46An6FmDil7LHSvFR6ppsVuVnI2ng==, tarball: file:projects/login-assets.tgz}
     id: file:projects/login-assets.tgz
     name: '@rush-temp/login-assets'
     version: 0.0.0
@@ -13255,7 +13255,7 @@ packages:
     dev: false
 
   file:projects/login-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-+NN0hyE0FgxIazUu5sy1OYBKyY2i3oh2GxRowrgxo+600MNd8lU3AEvTYcDD3AwKtCE6vCBM+Z8YZl3ehIXOqQ==, tarball: file:projects/login-resources.tgz}
+    resolution: {integrity: sha512-0p/6edcDStmRA+wfH3Paf/Q+ZCIXf0PlmyZ83pjHuWnrJ57+6Tx346a6PYw0TzMh0a7C/IijL7+8v75dvFv16g==, tarball: file:projects/login-resources.tgz}
     id: file:projects/login-resources.tgz
     name: '@rush-temp/login-resources'
     version: 0.0.0
@@ -13289,7 +13289,7 @@ packages:
     dev: false
 
   file:projects/login.tgz:
-    resolution: {integrity: sha512-FOrWy9Ur7F8iEu9Om2WsNk+Oe5N0WMFmpnFDqwOoHHvoMCB125NMikawBBoOI3W55wfqjALDXngu8ZFlBZW99A==, tarball: file:projects/login.tgz}
+    resolution: {integrity: sha512-zMnE+Jf2TaLi4uwDi67zScOEn9htXq0MagNNr2DNdFmU6t1dydSGYqbsx2uxZ70+y1ANmkkNyUS4l+XwRo80fA==, tarball: file:projects/login.tgz}
     name: '@rush-temp/login'
     version: 0.0.0
     dependencies:
@@ -13309,7 +13309,7 @@ packages:
     dev: false
 
   file:projects/middleware.tgz:
-    resolution: {integrity: sha512-CeFf9v/nCBetidYNTGei5n0jhwFdxiBdOMYeVHVQSUtJa428VauVGt6rcYE5iGB+U65C1ZcjktBrHyI24jsMmg==, tarball: file:projects/middleware.tgz}
+    resolution: {integrity: sha512-sOlN6EfoMFpuqtU1hASoyLcF+oj5umFUpmMZKe0egETtAP8gWNX/hQDhtwFoVFQwd62JVG8qNSElt0DkwVWXiQ==, tarball: file:projects/middleware.tgz}
     name: '@rush-temp/middleware'
     version: 0.0.0
     dependencies:
@@ -13329,7 +13329,7 @@ packages:
     dev: false
 
   file:projects/minio.tgz:
-    resolution: {integrity: sha512-hxrzjjVDsArcIR+44I3a/vQd3geB9XwlbmbIdSQqZN93P2Jrs4U2k7PUKLziJ7KL9MeYa3Dxyqy0olulhLu6Lg==, tarball: file:projects/minio.tgz}
+    resolution: {integrity: sha512-j2xvaMg1yNPGNdLvLklPGbE0TeItE/nUmyt5VMP4RhDliWFH8shmOdHTCLtnRAAb6x25Wy7PRwseNg6xmSZXcQ==, tarball: file:projects/minio.tgz}
     name: '@rush-temp/minio'
     version: 0.0.0
     dependencies:
@@ -13351,7 +13351,7 @@ packages:
     dev: false
 
   file:projects/model-activity.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-2ff+5HlH1l8OjrSZkf8U6Uf69QwyYdy1KHYNkBOhpE+64g+dBHKSlHTon5aShgkeR4bjVgyS/ddvolJJwE8FCA==, tarball: file:projects/model-activity.tgz}
+    resolution: {integrity: sha512-HgizJW3rUzse4JaDrbvYGHcYcUnO1vHcH0x+JyelAZ+1DI858SU14LkIjNBstsAyt7JDP2grr9LZxr2LH0zVjw==, tarball: file:projects/model-activity.tgz}
     id: file:projects/model-activity.tgz
     name: '@rush-temp/model-activity'
     version: 0.0.0
@@ -13372,7 +13372,7 @@ packages:
     dev: false
 
   file:projects/model-all.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-+a9B9u+ryNZ86qrWClhAM6wCny9lT8kQ5dVC9MgY2CW0LhtEpL4bTmKg92POwuE3SDffSQYgsJ6kGUnxQ1aZyg==, tarball: file:projects/model-all.tgz}
+    resolution: {integrity: sha512-87yqHGzXy6mKKCUMfPluhQjSGIS+2KEyrCZFZCHsRvK2g+kgTo90YnizNooDOgRplR5RwpZdXezfmTw0RIqjJw==, tarball: file:projects/model-all.tgz}
     id: file:projects/model-all.tgz
     name: '@rush-temp/model-all'
     version: 0.0.0
@@ -13397,7 +13397,7 @@ packages:
     dev: false
 
   file:projects/model-attachment.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-YUL/hCoSOXfWq/6Qbarb0VYp+AcwMW+SxBb5fNn3gnmSrXVXbhITfO7Tj/1V2mhu0oWDQ/9vtH74o2XsqnnvZA==, tarball: file:projects/model-attachment.tgz}
+    resolution: {integrity: sha512-oFQgmvVIl/PYSo6Dv3pfLW2nOxSFnI0EZ56OhkKyDYUnvmikIo1cw4xM0AzKfJEbyq9f9giW93pNTLYf1XCHxA==, tarball: file:projects/model-attachment.tgz}
     id: file:projects/model-attachment.tgz
     name: '@rush-temp/model-attachment'
     version: 0.0.0
@@ -13418,7 +13418,7 @@ packages:
     dev: false
 
   file:projects/model-automation.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-TbjcnXRKAZOS5cYFRlxuz8bWh06NLHcHWA0H8GEArDLm71aaToAoNt54GjOVEShNAkE6f8k0Vonj+SiyxaRMSw==, tarball: file:projects/model-automation.tgz}
+    resolution: {integrity: sha512-h9pmYhvptY9Uoin0SoLBeSLkeBlhxyC3CuA5a9Q8+tFkMx94IcVA8w50tKSIxYiIZtlym/3tiaG1NRXye4QDog==, tarball: file:projects/model-automation.tgz}
     id: file:projects/model-automation.tgz
     name: '@rush-temp/model-automation'
     version: 0.0.0
@@ -13439,7 +13439,7 @@ packages:
     dev: false
 
   file:projects/model-bitrix.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-F8/HS5tSHGFEGQtuGoBhCqo9kIeEDHdD6pYqU78dETHy06R9+Ao64L/PHazbCLy6fxtcvGq8PRmh4ePEotI9KQ==, tarball: file:projects/model-bitrix.tgz}
+    resolution: {integrity: sha512-F5vxu2GG542SEUKM4UFxWvPEQxq/AVWiYBbAGjWiNT96V+jmHZta4yqE8usqHb2VF94/bvOXDnHHZQtgz8wFCA==, tarball: file:projects/model-bitrix.tgz}
     id: file:projects/model-bitrix.tgz
     name: '@rush-temp/model-bitrix'
     version: 0.0.0
@@ -13460,7 +13460,7 @@ packages:
     dev: false
 
   file:projects/model-board.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-pFxbJiXL2nbu6He4DhLEPdzW88jtFgD7RgWEQL9/bAk/esMwqOyfNiKKiSMAz93zV9yal6ZIyzgnDDKvaUxDCw==, tarball: file:projects/model-board.tgz}
+    resolution: {integrity: sha512-0Y1JumoganrxkeouBITseHyx8az0NHn4ArI8E56OJwMu7ZW155hLZjtKlQ1LgAFXE6GyW3s+Eo47RpSIWqqnUg==, tarball: file:projects/model-board.tgz}
     id: file:projects/model-board.tgz
     name: '@rush-temp/model-board'
     version: 0.0.0
@@ -13481,7 +13481,7 @@ packages:
     dev: false
 
   file:projects/model-calendar.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-DwtfwariGhhWwEGMzZhzStwiclDnuQrZaayIa4OB1Yxl+G6mRZ4TIyZT/mNzsGDoBT3Wcq3NZD9N81WTLDsaOA==, tarball: file:projects/model-calendar.tgz}
+    resolution: {integrity: sha512-jidlvuDRq3YZ7mwt3DGO7dSRjm1M8YnEYQW5tr9UKcO5O91RtJAj5DMDWsRQDKa+FA7FVInzhBptGFGeVno9yA==, tarball: file:projects/model-calendar.tgz}
     id: file:projects/model-calendar.tgz
     name: '@rush-temp/model-calendar'
     version: 0.0.0
@@ -13502,7 +13502,7 @@ packages:
     dev: false
 
   file:projects/model-chunter.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-c5weIzCgyJ7yMgv92JIOVETBCLn687MZt3PHibOe5wdjJqvMmsvXnPhlgQiPG4jWjZTZO5OgwXT7aUe84fkAjw==, tarball: file:projects/model-chunter.tgz}
+    resolution: {integrity: sha512-JBI3pl+BhdpnN0UM7m+7PbfHcqCdtXZSdoFiyh4rjQJ3dx9BJYJQQmzKrksXI3lnU2Dfz4EF3+HjU+/Yzzy+/Q==, tarball: file:projects/model-chunter.tgz}
     id: file:projects/model-chunter.tgz
     name: '@rush-temp/model-chunter'
     version: 0.0.0
@@ -13523,7 +13523,7 @@ packages:
     dev: false
 
   file:projects/model-contact.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-qsYC+UipwsJpae2C5EWBZyGjNvH3oCZ7VbpNxPAUlzKIJiYe5a4f9W2ePiU0O7etf+J4/WE0JLm8LMNIvo0/ng==, tarball: file:projects/model-contact.tgz}
+    resolution: {integrity: sha512-8ZdXatENSV6LJJcVQH4e7MHUyPGlpZ2blskl7RRAKCjgBCOQpQloIxFffpMVd4ZLEJGwVADgWx2GX2OaSWQqBQ==, tarball: file:projects/model-contact.tgz}
     id: file:projects/model-contact.tgz
     name: '@rush-temp/model-contact'
     version: 0.0.0
@@ -13546,7 +13546,7 @@ packages:
     dev: false
 
   file:projects/model-core.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-L1/j848zksa3KDHYvtrcgSw9FQu2UX3HT9z+6Ucji6jx/0p/OPCc8r/25pZABVMZYCHCa9k2w6+4noxc5cT1QQ==, tarball: file:projects/model-core.tgz}
+    resolution: {integrity: sha512-mmu4lrYN/JGWVO2nTuxkH6XjHDI7SNxJOVBag/50hfabUfTKj17ojTICaVgABLhow8lLP4oOiHQa8W6+h+Ugkw==, tarball: file:projects/model-core.tgz}
     id: file:projects/model-core.tgz
     name: '@rush-temp/model-core'
     version: 0.0.0
@@ -13567,7 +13567,7 @@ packages:
     dev: false
 
   file:projects/model-demo.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-H9+hHD3935v6JP5abfjZQQ6F2e01OqJiSswmSYu/MPKRQGN2JKrKkBj2aacjT0AHSoFwgW3VokGy6nj3MpLskQ==, tarball: file:projects/model-demo.tgz}
+    resolution: {integrity: sha512-VgDvfchxxOxm2STgzJoKzcEAu0I/EFesWGzMXaFHMCHSYj0X8qhrWzRqx/vFBaaQ26BwxmKwwzDCscsuK/zd4A==, tarball: file:projects/model-demo.tgz}
     id: file:projects/model-demo.tgz
     name: '@rush-temp/model-demo'
     version: 0.0.0
@@ -13588,7 +13588,7 @@ packages:
     dev: false
 
   file:projects/model-document.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-zwLHqvROSGbR0qzdZ8tKzK1TIufrzdJf/2Qsew4f6BASFzhmzuLdNy2tKGusfYOs7gCV+sjjtYzHnQYGXm4/9g==, tarball: file:projects/model-document.tgz}
+    resolution: {integrity: sha512-snQr8absyO7SK/bTIsKYuyImZ0iNPE9n7gzDHHeq23kW7jO9ShkDudJhNK6hisPV40X+zXxTr2FmfEmyrEh8ZA==, tarball: file:projects/model-document.tgz}
     id: file:projects/model-document.tgz
     name: '@rush-temp/model-document'
     version: 0.0.0
@@ -13609,7 +13609,7 @@ packages:
     dev: false
 
   file:projects/model-gmail.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-65YhR3krkVjRdBZdwj9apQbUlsZOGBhXqXQSV4psjrhNHkuiEJH8yE+rmdcITISMP9ery8rPYkY4K5tH4ET6kA==, tarball: file:projects/model-gmail.tgz}
+    resolution: {integrity: sha512-g5Z8aUqkWh6ofgtBUREImOeyBy0odhfDswngIG9L2ue30ZBqiV+AHKCDZyjugcCsgziI8CTpDxv2nPSrzxKFHQ==, tarball: file:projects/model-gmail.tgz}
     id: file:projects/model-gmail.tgz
     name: '@rush-temp/model-gmail'
     version: 0.0.0
@@ -13630,7 +13630,7 @@ packages:
     dev: false
 
   file:projects/model-hr.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-0mA39JyGxxcGuoko/G5lck4+06+ZyrCmLaNNiJ19oTyUaQiO1zJJGYdqSekeUd8VUmLQDKyn+sZ8YpEaJ/pifw==, tarball: file:projects/model-hr.tgz}
+    resolution: {integrity: sha512-lMzNQI/U87beA0l82mdqZa/Mag8ltj0o2iURJP1J7PpQsY58jkXynbS6PWiOzGRmE5vNK/8IEBoFJjIG0HAQPQ==, tarball: file:projects/model-hr.tgz}
     id: file:projects/model-hr.tgz
     name: '@rush-temp/model-hr'
     version: 0.0.0
@@ -13651,7 +13651,7 @@ packages:
     dev: false
 
   file:projects/model-inventory.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-nQBth78JaQra66ZpSt7E8MdNFFZ3oJviEQOOnXp/et9jH50JFZnL7Inb9yfWX2ISKAYHvMexSBaEXrUxjHPVPg==, tarball: file:projects/model-inventory.tgz}
+    resolution: {integrity: sha512-kdHS64h6WIgZo0EcQuXQw2A7a52idF0hJWJYQVvsqbqi/jzdCS2NbZQx4OwQXIfA0Y0sA9cuhLysor3NDTpyaQ==, tarball: file:projects/model-inventory.tgz}
     id: file:projects/model-inventory.tgz
     name: '@rush-temp/model-inventory'
     version: 0.0.0
@@ -13672,7 +13672,7 @@ packages:
     dev: false
 
   file:projects/model-lead.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-70BIPJ31aMxUKcxxT7t1ThJDGBqgAVXwAu9zk/bEgdtLVFNlcaBbrW2PRNlqLjG7PkUSLTuT5r5XJ0BP6PZruQ==, tarball: file:projects/model-lead.tgz}
+    resolution: {integrity: sha512-aKuKHqirY+PK54vSoUEiII68O+3mFwQXsxjQME66wE68jd2HciJUbLsF/rRp0m9dnPkWhcky3Z/4UEdXgNUR/Q==, tarball: file:projects/model-lead.tgz}
     id: file:projects/model-lead.tgz
     name: '@rush-temp/model-lead'
     version: 0.0.0
@@ -13693,7 +13693,7 @@ packages:
     dev: false
 
   file:projects/model-notification.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-kQLQvo/KhLAgmfHfrpY/Ovc5Hi5Ph6sDWIPoaEbYpLFlnEi8CnFYYls8vnSi5fZ+K8KSFJrq0CPF0m4xC5h/nw==, tarball: file:projects/model-notification.tgz}
+    resolution: {integrity: sha512-PYNit09mquq39aOHt+TtpDerqUc1NvMOKSfsPzFZtHAG72Fi1lPLKINUxb006x6OXOQA3T7CDycH5j52D5DavQ==, tarball: file:projects/model-notification.tgz}
     id: file:projects/model-notification.tgz
     name: '@rush-temp/model-notification'
     version: 0.0.0
@@ -13714,7 +13714,7 @@ packages:
     dev: false
 
   file:projects/model-preference.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-/gNM7yUyvwHsAvgKcVW1/NIhL41HbKVHxT5gJd/IgaK0Wagd6RT27V//cd/A69wOy+q27oY1FS/BqBmeaGgF7w==, tarball: file:projects/model-preference.tgz}
+    resolution: {integrity: sha512-J9MNjBH5iMTvgZnvH5qrwpACkyCNqXNc/TXnCuYD7gsyIu+yEdG7gewGAGR9BLbF++NbpY1eDfUIDzL9fNmQVA==, tarball: file:projects/model-preference.tgz}
     id: file:projects/model-preference.tgz
     name: '@rush-temp/model-preference'
     version: 0.0.0
@@ -13735,7 +13735,7 @@ packages:
     dev: false
 
   file:projects/model-presentation.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-akKf+2afEAuCXMUA/W4ZzjX2kkKU3OsZahBpNA1qylLq+hXQExz11iPx0XJOnOOhcN8jziCXpO6pnMuvwYaQgg==, tarball: file:projects/model-presentation.tgz}
+    resolution: {integrity: sha512-k57agp6ueHGjWBo4xB40dVphdyA45js4eNxUq23KdMRZ6KpO5pBnYjgNqQ2uSHFODqQunHI6a0Fb6D88aLmmXw==, tarball: file:projects/model-presentation.tgz}
     id: file:projects/model-presentation.tgz
     name: '@rush-temp/model-presentation'
     version: 0.0.0
@@ -13756,7 +13756,7 @@ packages:
     dev: false
 
   file:projects/model-recruit.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-lEhJld/NqT9pSUWkg2JtJRClcAUjmK7m0hVuw2xj/3L4S8LIiQ3+TELQCGfz19o44Lkyige3emKXRZZSHlZM1A==, tarball: file:projects/model-recruit.tgz}
+    resolution: {integrity: sha512-pXuO7Np9oZZ3n8GFuOxy+lyiiJASQs3YHv2J+ntOx1XAoxUMIN8M6ERC7dcKxdQ675Zi+EdF3vajviioQHhOnw==, tarball: file:projects/model-recruit.tgz}
     id: file:projects/model-recruit.tgz
     name: '@rush-temp/model-recruit'
     version: 0.0.0
@@ -13778,7 +13778,7 @@ packages:
     dev: false
 
   file:projects/model-request.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-WLzJhNszoK575lugdvE/tNhCFCZFyoN+mm/7/2A0YOz/fyu1CQ12IB0j4wBDcyCZSE5ibFoG8x8IVYcm1HuCOg==, tarball: file:projects/model-request.tgz}
+    resolution: {integrity: sha512-6aVBlaMeq04UJhq6tlCFYfFkoz40ZUj2ooFxpo7K7Zy0zP09XCslk+cIjsRNJVI+mP/jvkKE2O7uKG+Hf5u6sA==, tarball: file:projects/model-request.tgz}
     id: file:projects/model-request.tgz
     name: '@rush-temp/model-request'
     version: 0.0.0
@@ -13818,7 +13818,7 @@ packages:
     dev: false
 
   file:projects/model-server-attachment.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-t9OG6wjenK/+E9uSRaKcoLse7LZfJAzZQqvSie0KBev40JK24gvOE0JTfZWtN2cF3ONkhzTeJfHjt9o1llG3+A==, tarball: file:projects/model-server-attachment.tgz}
+    resolution: {integrity: sha512-hlPKLCeoVidWSJRuhCdIi8aaytDCs8JroiVypQz+XcuLJ7GRjLQv0PYLzazD8H5b+DPQy+a6ctzzjIeAD+g2Tg==, tarball: file:projects/model-server-attachment.tgz}
     id: file:projects/model-server-attachment.tgz
     name: '@rush-temp/model-server-attachment'
     version: 0.0.0
@@ -13839,7 +13839,7 @@ packages:
     dev: false
 
   file:projects/model-server-calendar.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-8Pg8+BF61y1WWbmkF9nt03erku1kJHv0K1EmTjQ07y6xBhfiprOhK8Ly0ofC1h0lspjVIP4T3yxLvWF3lHDCzA==, tarball: file:projects/model-server-calendar.tgz}
+    resolution: {integrity: sha512-UpioO6X65qnAFlYDcJiebbLkHRG5JtLbVzS/78QK9aTWsHXZsJv7Ih7MXFxtG2dH7uOAe1Z8TS3gxZz/OrVLeA==, tarball: file:projects/model-server-calendar.tgz}
     id: file:projects/model-server-calendar.tgz
     name: '@rush-temp/model-server-calendar'
     version: 0.0.0
@@ -13860,7 +13860,7 @@ packages:
     dev: false
 
   file:projects/model-server-chunter.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-E1zZwALF8gN0xyZp2y3v1jYy5JyAWJdwicUOWv6v39jaG2Zrf7xHwyoNVRjut7EemM8Whhcf5Jy7IRNkkolfZg==, tarball: file:projects/model-server-chunter.tgz}
+    resolution: {integrity: sha512-Ikxf3SXnCstf4+TzitZ8vblm2txVnP1Mu34oBItQxCTLHtciFN9Ry/286PXbnBeYG05eDYu4wbgKsLv8VuA8/w==, tarball: file:projects/model-server-chunter.tgz}
     id: file:projects/model-server-chunter.tgz
     name: '@rush-temp/model-server-chunter'
     version: 0.0.0
@@ -13881,7 +13881,7 @@ packages:
     dev: false
 
   file:projects/model-server-contact.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-0kIwQfFGjtN/wo8yIBJfuxtd5585/rYU7+MkYnYegQd+T5ANJLnEOGdojoiyzh0d36ukbMms2YQf0p3KyGCWSQ==, tarball: file:projects/model-server-contact.tgz}
+    resolution: {integrity: sha512-IQLnhV/IJtD/j1CipRjWuewXLAeoSz2Eph9+GuWSYLtZlb2+ley/qxUhtS5JxxJdAOIErItd3S9VXiM2H306/A==, tarball: file:projects/model-server-contact.tgz}
     id: file:projects/model-server-contact.tgz
     name: '@rush-temp/model-server-contact'
     version: 0.0.0
@@ -13902,7 +13902,7 @@ packages:
     dev: false
 
   file:projects/model-server-core.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-kZ5M97trDUspDmQIL/6wHraEY9gfSHYnGvFsh0Ee9ccqvE47uYqlB1F29okm1RCCxA0jQTPwH7zKQKcznM31pA==, tarball: file:projects/model-server-core.tgz}
+    resolution: {integrity: sha512-Sb16NeyubIfyBy4oNCCBLIz9uW5277lP02VnHnCm2/eIl3zO2u9m5SpQbfjcBbmv55u2+YbrTiEIohR1yBVKww==, tarball: file:projects/model-server-core.tgz}
     id: file:projects/model-server-core.tgz
     name: '@rush-temp/model-server-core'
     version: 0.0.0
@@ -13923,7 +13923,7 @@ packages:
     dev: false
 
   file:projects/model-server-gmail.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-TIZgHimbnbx43/oKShaw3mxKzlXkwTZx+j5Vsqf3iYZtEQ6QUGjNXtE9AFVKjrhdIE07LEAtp6FbDawC3YDwtQ==, tarball: file:projects/model-server-gmail.tgz}
+    resolution: {integrity: sha512-KDxOsJXCPgOM1c8crK0eK9mRyBo81ZwIrPvBfkEKB6BScqSdaF3A3hCKreCLPKEp/ItKo6FcItdGfM/WA+sXxQ==, tarball: file:projects/model-server-gmail.tgz}
     id: file:projects/model-server-gmail.tgz
     name: '@rush-temp/model-server-gmail'
     version: 0.0.0
@@ -13944,7 +13944,7 @@ packages:
     dev: false
 
   file:projects/model-server-hr.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-4P0T5qoffN4uHC/BjGalEwC6PbhLRxQmkAukSdt72qZPyY/PXhiKH+1GfucJ4HV0a7NfRO3MCd90wqqDJ50Sbg==, tarball: file:projects/model-server-hr.tgz}
+    resolution: {integrity: sha512-gfPFtEOxqDUKm2KrNdLnVmWpGcPasQMfTZT5Znty9LrrUHCodppN35LDws5sOixAC1pa8i09YRhlmxpGdY4O8w==, tarball: file:projects/model-server-hr.tgz}
     id: file:projects/model-server-hr.tgz
     name: '@rush-temp/model-server-hr'
     version: 0.0.0
@@ -13965,7 +13965,7 @@ packages:
     dev: false
 
   file:projects/model-server-inventory.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-1VTsGvoUw73xjAcBM6joG0QJX9v7wfu4c6NhynzCDHjkJRYxvZZa8U7s5C+UapRs8QSZjOdZ5fq3jhnGmQd4+A==, tarball: file:projects/model-server-inventory.tgz}
+    resolution: {integrity: sha512-EDI4Dn30Q82w8a1Ds4L3uYx8jpQaUhYUs1vuZRGcQ5Fd9cST3HYoCQRkLtswyob+LKWwYGdBD9HKowecsJNofg==, tarball: file:projects/model-server-inventory.tgz}
     id: file:projects/model-server-inventory.tgz
     name: '@rush-temp/model-server-inventory'
     version: 0.0.0
@@ -13986,7 +13986,7 @@ packages:
     dev: false
 
   file:projects/model-server-lead.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-GjlXi/063rZpMVrFPzrkHfBDWVNnTyADwEV4HI/Afdkya/mZko2AY8tMcylOO6CPh/Aon6rOn7IHK3CuuDH0BA==, tarball: file:projects/model-server-lead.tgz}
+    resolution: {integrity: sha512-zMjvQ5pzp7LWrId7vT78M+3t0bXp0w9/ilpm4L88DC5XWsRyHhi8R5f6QzhnH4r07r4fvQxn/JHTjJoKMuoQcg==, tarball: file:projects/model-server-lead.tgz}
     id: file:projects/model-server-lead.tgz
     name: '@rush-temp/model-server-lead'
     version: 0.0.0
@@ -14007,7 +14007,7 @@ packages:
     dev: false
 
   file:projects/model-server-notification.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-dyuNfcBYrOyHDXfWU5UVFOrxuirN3mKtoyMrdxfNjj55Tz2f11QL81wPw5buDqNNbWcEliWQfF0G45+KKey3ZA==, tarball: file:projects/model-server-notification.tgz}
+    resolution: {integrity: sha512-vnIioLlxuGjd62SSRPPzYN9qmQ+RBNrFmk4HAe5IPS/3yYufRkKmhAs2p8XYZZ+9s/Nwfs3xjMXuq5rPKq1nZA==, tarball: file:projects/model-server-notification.tgz}
     id: file:projects/model-server-notification.tgz
     name: '@rush-temp/model-server-notification'
     version: 0.0.0
@@ -14028,7 +14028,7 @@ packages:
     dev: false
 
   file:projects/model-server-openai.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-Hz/tc4iZbLdmPQhxUwnxR57pLgVsNYXAkL9EXbHVaoblnduc82wu5/2tytlu9G/bm40o6K1PFZfzMReYIQnDgg==, tarball: file:projects/model-server-openai.tgz}
+    resolution: {integrity: sha512-0r81Hzj12VuWGl9YEycxtke+MayrVVFSqBYeRGOgKvPpSE21S284Z3VLh244UR/KXPNBaadsmw52IW4PPBJ56Q==, tarball: file:projects/model-server-openai.tgz}
     id: file:projects/model-server-openai.tgz
     name: '@rush-temp/model-server-openai'
     version: 0.0.0
@@ -14049,7 +14049,7 @@ packages:
     dev: false
 
   file:projects/model-server-recruit.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-+KLQKrWGoQ/msUqRIIOPLJx2KvosKPcJHMRRmh59IyBnEKJiIkA/8iBSEHyqBQigqKTRluow0vF/d63F+EE0zw==, tarball: file:projects/model-server-recruit.tgz}
+    resolution: {integrity: sha512-Tg7lXR1BF+M61cE6CWs/hrYDsNkGdJZCUvEG0zUP5miGOV2lLAAKqwfMdQACFfqtpySczBnm8kOkNoxanx434A==, tarball: file:projects/model-server-recruit.tgz}
     id: file:projects/model-server-recruit.tgz
     name: '@rush-temp/model-server-recruit'
     version: 0.0.0
@@ -14070,7 +14070,7 @@ packages:
     dev: false
 
   file:projects/model-server-request.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-ij8j8ae0T6n44ESVQVG62YMIWqcxmVoztfRc9ra/vbCqrbKNqVubr0Xf7Wy8TUUHa8o89jzt0oNTdg2qKUjaxQ==, tarball: file:projects/model-server-request.tgz}
+    resolution: {integrity: sha512-QWHay626+9m4uoeXjsp071WHX7sEIOB0raea136jGYbCW2FtSyvnEvCaOQHNiKlYZf6UG7rMzJX3HT/lDDhw4Q==, tarball: file:projects/model-server-request.tgz}
     id: file:projects/model-server-request.tgz
     name: '@rush-temp/model-server-request'
     version: 0.0.0
@@ -14091,7 +14091,7 @@ packages:
     dev: false
 
   file:projects/model-server-setting.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-ASEgPs6nbYfTI2OeZhw0i36cz/XvQkaviZ3e1JtflmN9kNGx20kLJ5fU4ZAalfkSmXsch9YwggjiEBnqvRPzSg==, tarball: file:projects/model-server-setting.tgz}
+    resolution: {integrity: sha512-Ya/RpWuJRO9cu1HEuGy5lkIYx4z17ABlL2CBblPudcscgNwSBsN817g0ql3ZYceH3V0AaOmRarZUKWhC4NiPRA==, tarball: file:projects/model-server-setting.tgz}
     id: file:projects/model-server-setting.tgz
     name: '@rush-temp/model-server-setting'
     version: 0.0.0
@@ -14112,7 +14112,7 @@ packages:
     dev: false
 
   file:projects/model-server-tags.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-pT6ma+jyFFfxBfDPx+GED+PHa3XrpZggtYLjTSypapZYAUW49OXvRSXfo1k27KJ1JESus1qugeYjBUu5cXezYg==, tarball: file:projects/model-server-tags.tgz}
+    resolution: {integrity: sha512-22W3H+N9DfuK6cZKH0V49t8EBZBT4fUF5WIE7uNCbF33nTVatkT0TMKJriCQ0CM1WFbpAceBrsRC7hI5lNhzng==, tarball: file:projects/model-server-tags.tgz}
     id: file:projects/model-server-tags.tgz
     name: '@rush-temp/model-server-tags'
     version: 0.0.0
@@ -14133,7 +14133,7 @@ packages:
     dev: false
 
   file:projects/model-server-task.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-3JfuiIjcvojdubTinayt3FNDqOwkVgnIv2Diw0Gz6bMUVkVf0zyuoMdPAtiEI4iPrdZDO6Dgbac61nmZWvhOZQ==, tarball: file:projects/model-server-task.tgz}
+    resolution: {integrity: sha512-6wT1DIba6CL8aRf0tl3r7W4UWSOhYP4qjYteWUZYcsgxcuD6bUSo5hHwetcOtIHrMs0DHwH48yLHPnuQfBrdbQ==, tarball: file:projects/model-server-task.tgz}
     id: file:projects/model-server-task.tgz
     name: '@rush-temp/model-server-task'
     version: 0.0.0
@@ -14154,7 +14154,7 @@ packages:
     dev: false
 
   file:projects/model-server-telegram.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-yL9lRx/ySiCZWqH8mim2UkBxgSaRiVEkRTMymYXds32jXo/XVdig5CthebH31i3o4/5DGxWLveYmgZbuVziOhQ==, tarball: file:projects/model-server-telegram.tgz}
+    resolution: {integrity: sha512-I/7X+T3aafC1vVBR5JxpsNt2mSQGOrrZ1AgqbYIWd13LAI7+K63+dadjzZ8RYNixKRiqeEE9baMsmD5rN3vz5A==, tarball: file:projects/model-server-telegram.tgz}
     id: file:projects/model-server-telegram.tgz
     name: '@rush-temp/model-server-telegram'
     version: 0.0.0
@@ -14175,7 +14175,7 @@ packages:
     dev: false
 
   file:projects/model-server-tracker.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-NL0PjeBPjZcA78mQGkZGlHhY8yZ0d+xeCCG2hsQSxlsQrAmV0sOAskCNPC0NV0K1KNaZvMItuQtpCz3U1ekD4w==, tarball: file:projects/model-server-tracker.tgz}
+    resolution: {integrity: sha512-4Is4CVchYN+aiq73acLTCindey+y4PV7FmAF3vpv+8BN8wwGI4/AgYEbeb2n9NMBaBW+QreM4ZKRKw4X3SpgSA==, tarball: file:projects/model-server-tracker.tgz}
     id: file:projects/model-server-tracker.tgz
     name: '@rush-temp/model-server-tracker'
     version: 0.0.0
@@ -14196,7 +14196,7 @@ packages:
     dev: false
 
   file:projects/model-server-translate.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-ieSUSw5AtHuD6DlS4MGuLi0SZbth+VcI1JnFozm4nYAycFMueQ//2sO9B1h7Vr1xOzXwPzkXwkujpDWUWryQIA==, tarball: file:projects/model-server-translate.tgz}
+    resolution: {integrity: sha512-zkqbQf43Dz0Xk6QQ5WHsktpYCc0UY2yVRjWnKMP4pLO3ORfL40+mGnBUV9lMRxOG79anxiGjwhy/0ZJUjdB8zw==, tarball: file:projects/model-server-translate.tgz}
     id: file:projects/model-server-translate.tgz
     name: '@rush-temp/model-server-translate'
     version: 0.0.0
@@ -14217,7 +14217,7 @@ packages:
     dev: false
 
   file:projects/model-server-view.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-I1UWbW7ulIYXqY19cs7DLd+i6cXNhpHl8Uf+gA4mwJVKEAEecwet1g3X8DIqzJwLkx1J5Bzkgtos+o60N2sLJw==, tarball: file:projects/model-server-view.tgz}
+    resolution: {integrity: sha512-fGwGnqSpH3u4Nz+ChpjXZWpi9geUoglyMKdu21FhyH2CbCWV1Oq+45hhB2PkpvBosWz4TXU9EurAzAPJBDRSGA==, tarball: file:projects/model-server-view.tgz}
     id: file:projects/model-server-view.tgz
     name: '@rush-temp/model-server-view'
     version: 0.0.0
@@ -14238,7 +14238,7 @@ packages:
     dev: false
 
   file:projects/model-setting.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-Eji90MhALvBXM0Q19md8k7/iA3JnOX3O7eF/zyLdK7B6w2/lq72bU/riAE/bx/BwhtdgN/yksFJKpbWumUu4+A==, tarball: file:projects/model-setting.tgz}
+    resolution: {integrity: sha512-kbo0o4LVgAKJPslfN4Wzk1zc7iiT+PcNd/zqyN5XSFIOTFQ8uFB+VY3ZfUtkHGv4yBSdHfXzS3FI07pYPkBDlQ==, tarball: file:projects/model-setting.tgz}
     id: file:projects/model-setting.tgz
     name: '@rush-temp/model-setting'
     version: 0.0.0
@@ -14259,7 +14259,7 @@ packages:
     dev: false
 
   file:projects/model-tags.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-Ut58d7L1rnVrleJTps+ulyprqEXg9aRLdnzAURN4o4mVjm8i2euPLbGo7dRPe4D/KLzWY4waxjbZgPL0kq5pXQ==, tarball: file:projects/model-tags.tgz}
+    resolution: {integrity: sha512-Fb3OuJXIFxkVTVOSlH1dKo1T/PG7BDlrwgsH1P9X72M4pa+Rx+LWlhSR68GnPSZadsmAqIcNJyLXY/L7ZPFU9w==, tarball: file:projects/model-tags.tgz}
     id: file:projects/model-tags.tgz
     name: '@rush-temp/model-tags'
     version: 0.0.0
@@ -14280,7 +14280,7 @@ packages:
     dev: false
 
   file:projects/model-task.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-Q++ojKsLXpDWFbw+AMD8wl6YR7u4xvd4peJp79fC6nO0T5ZfgPikcKigWZKrCruaYI6rOrhkVJKaBvobOO6PFg==, tarball: file:projects/model-task.tgz}
+    resolution: {integrity: sha512-N9KkqDnTDvrBAHQ+qno7zNZ5aP4hbbdSnyR+e/tu/fVCXDqruitUXrWc1SvlO47wSmwvgtDIiiIL0OI6hygAkw==, tarball: file:projects/model-task.tgz}
     id: file:projects/model-task.tgz
     name: '@rush-temp/model-task'
     version: 0.0.0
@@ -14301,7 +14301,7 @@ packages:
     dev: false
 
   file:projects/model-telegram.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-KstxsJBrr+d2r+AyC2sFgsxYG6KMDAlP695XtaCtRfaG5CuRFebeJOhzqARlwSRjlslFfu7P0az2rser251KZA==, tarball: file:projects/model-telegram.tgz}
+    resolution: {integrity: sha512-sEi32Xm47/v4t8w7w5dZpFrmHFM2IOaXqAnoNC9qe3Msx07Qd8fjqVdu07t4sJX4JqHMiUC+auvOR4zgxK2GRQ==, tarball: file:projects/model-telegram.tgz}
     id: file:projects/model-telegram.tgz
     name: '@rush-temp/model-telegram'
     version: 0.0.0
@@ -14322,7 +14322,7 @@ packages:
     dev: false
 
   file:projects/model-templates.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-tK+Hb121AKGMlksDckmKD2EtP3QgXeR0CjjiKS7pbj3GwK2dSrYq36AZ3k3/9SXPAhGIVbMU3x9W9LbHEiuBNQ==, tarball: file:projects/model-templates.tgz}
+    resolution: {integrity: sha512-ijEMUXH08GJT3YjXbW9S2OR0HR5Y+39VMrJp+RaryBpM4wMBJKEWaDR8+hEV1lT0Ef5yNgYxnoRSIWm3Oqjgog==, tarball: file:projects/model-templates.tgz}
     id: file:projects/model-templates.tgz
     name: '@rush-temp/model-templates'
     version: 0.0.0
@@ -14343,7 +14343,7 @@ packages:
     dev: false
 
   file:projects/model-text-editor.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-40TH+LsP9Mrj7HklRvbij7ZyruL8Uwlueiy4+AOCbOUKl62boK2h5DIyEBcPwqsA6bxcExyYX4OTCITf22jS9w==, tarball: file:projects/model-text-editor.tgz}
+    resolution: {integrity: sha512-ly2ymxfkS6XXEhpOounA6QQ8yJMjA1heWUDmFWEYtsCiTaIKKJK76sLhHHgFO5Ht4Tw3lU8FDQhsj/D0YVqTRw==, tarball: file:projects/model-text-editor.tgz}
     id: file:projects/model-text-editor.tgz
     name: '@rush-temp/model-text-editor'
     version: 0.0.0
@@ -14364,7 +14364,7 @@ packages:
     dev: false
 
   file:projects/model-tracker.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-YewjELdhL0jhtaF5rIDMCTYAFEIOLCMGJjEs3fQFkzhOMGNNUHgEaFBDjz7tINmkKqMLXqRo9yuUkdN3pPyjRg==, tarball: file:projects/model-tracker.tgz}
+    resolution: {integrity: sha512-H3l3kLahENyh80lS0aXprFv+NdMsNOUl/oDf0+6156P4MNGn2cAt0hROcZ3d4RlfGaDtQhR8PryaezpqBWbyAQ==, tarball: file:projects/model-tracker.tgz}
     id: file:projects/model-tracker.tgz
     name: '@rush-temp/model-tracker'
     version: 0.0.0
@@ -14385,7 +14385,7 @@ packages:
     dev: false
 
   file:projects/model-view.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-tJKgJu0kkGt1jHBZKNYTdOqK8UTntsqZNuwuhq29wUpDPNFYA8DU8SbGxLQ/UZKRo72Xe93XVISt2qcNTw+K8g==, tarball: file:projects/model-view.tgz}
+    resolution: {integrity: sha512-t5e1dllf+zkpi0g392+5atyapGnuDL25X6UWQ6SQkxiKS9BEvve8buSK0EMQjUA8ZzjWN+SVw3Ug7+HRtfMRRA==, tarball: file:projects/model-view.tgz}
     id: file:projects/model-view.tgz
     name: '@rush-temp/model-view'
     version: 0.0.0
@@ -14406,7 +14406,7 @@ packages:
     dev: false
 
   file:projects/model-workbench.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-XxOa93ZoxdnfEuBZzaFuONLAO70bJrgaPqP5XhptyJm2EaoTBLMOZhsditpg56ujJ4krmOWwK9nz1paMaXeaAA==, tarball: file:projects/model-workbench.tgz}
+    resolution: {integrity: sha512-QAzAaDkb0hqDDDnHkk/5xgOSA2bYk7Ig0SuF2aKjyMxWCiZ3MRCGyykoq6TrSV8xYi8BL9e5idEcoDDnvOqu0Q==, tarball: file:projects/model-workbench.tgz}
     id: file:projects/model-workbench.tgz
     name: '@rush-temp/model-workbench'
     version: 0.0.0
@@ -14427,7 +14427,7 @@ packages:
     dev: false
 
   file:projects/model.tgz:
-    resolution: {integrity: sha512-zTUCTWbGGrUMueLEqvQl2EwCwK0j83EUjztif9UjpSUlRLYh3FKJ8hBu86tcCT1imGukhMDQRniqKY72B1ioBA==, tarball: file:projects/model.tgz}
+    resolution: {integrity: sha512-znb02f8936LYfIzXAmnBPSQAlfyFJ82CncuibQimp3/C0GdAz9jEXEjdA0ZepI2WBPKzhFaw9bMZz72DkKKFdw==, tarball: file:projects/model.tgz}
     name: '@rush-temp/model'
     version: 0.0.0
     dependencies:
@@ -14450,7 +14450,7 @@ packages:
     dev: false
 
   file:projects/mongo.tgz:
-    resolution: {integrity: sha512-jhKgJmYKn1nhiI3g/fWUH2CHTVamMHNUaY1OBveoJZrHES6EVx4wF06Q6z6sXxi4Esury4g3wFj+5PXLqC2TyQ==, tarball: file:projects/mongo.tgz}
+    resolution: {integrity: sha512-fL0hBsfQBVf45lf2V88QyliuDK6IVyOxcqvHV9ThyQEQh3jojdR/fn9Z/RsYsK7hv6v6wVsaHTBE2MnxkWzCPA==, tarball: file:projects/mongo.tgz}
     name: '@rush-temp/mongo'
     version: 0.0.0
     dependencies:
@@ -14472,7 +14472,7 @@ packages:
     dev: false
 
   file:projects/notification-assets.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-HTd+cXJ/w9KMpvF4c7cbZGbGCrCoo6yEE3yN7kn8917P1TW8t+rzCgYXC/+R9ClX474+nR9f6bgwrkbrlRx6bA==, tarball: file:projects/notification-assets.tgz}
+    resolution: {integrity: sha512-FWZgvY/0PBCUwYISymPHSk0epQMcYudDD6CcBo6ljdgh6+l9wAzty+VBtj+SylMs3TGgaY656ZNgeHZialeouQ==, tarball: file:projects/notification-assets.tgz}
     id: file:projects/notification-assets.tgz
     name: '@rush-temp/notification-assets'
     version: 0.0.0
@@ -14494,7 +14494,7 @@ packages:
     dev: false
 
   file:projects/notification-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-VgEY6r2I9yLDYYYKBxOD/yVabjR32ZE56pFxP3A2nGDSqg/ocEoA5k0IHB5d0oO9DeLZn0948yU3AdcHT7PEMg==, tarball: file:projects/notification-resources.tgz}
+    resolution: {integrity: sha512-FPqAlTMCc5LKtvMoDufAFrVETr7S3PEPLSZaVznZr6rgHIAvOElsIvuviWO49F4karAAszmzEdjKjkJAc/a4VQ==, tarball: file:projects/notification-resources.tgz}
     id: file:projects/notification-resources.tgz
     name: '@rush-temp/notification-resources'
     version: 0.0.0
@@ -14528,7 +14528,7 @@ packages:
     dev: false
 
   file:projects/notification.tgz_b0f6486dcbf7cfbbb61688a1fbe3858f:
-    resolution: {integrity: sha512-zkxjtZc+IP6V5lRrvRAsiEbq6u+I4X2FED5lPBEmJnoQu1IL4H6Qpy8b+dpy6MsPpUWtYZyhTqRNIWCmaXQrMA==, tarball: file:projects/notification.tgz}
+    resolution: {integrity: sha512-sMQpBtPP00OED4ljaWJ9SXwECcnISHXvUupj6qPMmSlg+T+dydpIQexkEo4sc5SEc02nYJWSgGqhn3xsDCIl8Q==, tarball: file:projects/notification.tgz}
     id: file:projects/notification.tgz
     name: '@rush-temp/notification'
     version: 0.0.0
@@ -14564,7 +14564,7 @@ packages:
     dev: false
 
   file:projects/openai.tgz:
-    resolution: {integrity: sha512-Z2Rcay1KMZ+JLusvgCVMUWQ6QXSS59cKEL4MO1YhGAHLBz/S21ngHcEgPdvCvVeBK16TUQGVMgc1qIxMPq23rA==, tarball: file:projects/openai.tgz}
+    resolution: {integrity: sha512-yE8SSOI5wAjPQNUgvoQilbKsZ8JC3aCcb6Vr4CAEHwyDhCdr2+rEYq11CXPrKv6DfYdfeRXsmZZ/NyllZpGOqQ==, tarball: file:projects/openai.tgz}
     name: '@rush-temp/openai'
     version: 0.0.0
     dependencies:
@@ -14591,7 +14591,7 @@ packages:
     dev: false
 
   file:projects/panel.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-EoNFQOATXXUKqGLH2oH52VjNHGzv3oRGf0Rxa9MnYgYR5rNsJPD7SiXSsGMVIv/lCBQkARiSCrK6x7ZV49+kSg==, tarball: file:projects/panel.tgz}
+    resolution: {integrity: sha512-YkBj1j0SVTYQ5a3JItNcAU3kShKrQYokVevtvSTaf+Pr0MlK7VNmFCfUk3+Jv7JQj+pEL8a00xRJj+gCIw/AuA==, tarball: file:projects/panel.tgz}
     id: file:projects/panel.tgz
     name: '@rush-temp/panel'
     version: 0.0.0
@@ -14672,7 +14672,7 @@ packages:
     dev: false
 
   file:projects/pod-account.tgz:
-    resolution: {integrity: sha512-AJ6gQGMOiISkUTdNlY/qwXLL7WXlfRJ16wgFjNMrAOlqbkleOzEcNhfpbkU1HGBe/jnYawUlIBj2ZXMKQkd5/Q==, tarball: file:projects/pod-account.tgz}
+    resolution: {integrity: sha512-8xwXOFX591o6BCyaohSaHu2CsnPHffV9UYoEEFUFSLRv61HAOPps2t2WNyw7tcoG1pAr/7hrQCsG916jkiOH2Q==, tarball: file:projects/pod-account.tgz}
     name: '@rush-temp/pod-account'
     version: 0.0.0
     dependencies:
@@ -14708,7 +14708,7 @@ packages:
     dev: false
 
   file:projects/pod-backup.tgz:
-    resolution: {integrity: sha512-/pXb5elYK0E+nEJrvRptCzeoMIMRdZ8vdso/eVUk+uOLLkU87PK+Aqc+fxgK+BQi1Vj4bvPsUO330iCymZIJug==, tarball: file:projects/pod-backup.tgz}
+    resolution: {integrity: sha512-HfFJOBNQRBz+amj/w2j/w0jwzaEoMc5LG/pPTPQa19BE1ajEgqq/d0jierW5kd9Ii9fCGbF28sKT2jaQLe0WeQ==, tarball: file:projects/pod-backup.tgz}
     name: '@rush-temp/pod-backup'
     version: 0.0.0
     dependencies:
@@ -14740,7 +14740,7 @@ packages:
     dev: false
 
   file:projects/pod-collaborator.tgz:
-    resolution: {integrity: sha512-al/n4HArGRvuHaij71NVT1s328piS7hlC8Qda07Y4o8RMLh7rTIxUFI7F0Q3pP6pgEZptCvLIOX18DhhQOPtSw==, tarball: file:projects/pod-collaborator.tgz}
+    resolution: {integrity: sha512-FtgsfsNGuel1WBwlJIY7IdBejZ5za8UI5hOpR53glLlD7/99t/eJoNg5hd2+IQyo1aRZOMeCDz1asdhw1dx8QQ==, tarball: file:projects/pod-collaborator.tgz}
     name: '@rush-temp/pod-collaborator'
     version: 0.0.0
     dependencies:
@@ -14776,7 +14776,7 @@ packages:
     dev: false
 
   file:projects/pod-front.tgz:
-    resolution: {integrity: sha512-eBjPwMbKVKdrt0hJsoDSZCHQZslfm2vwAGWA+I1E0xcSNqzfLweQtzV0dIRYSkk12k6gphkZdvBY3rWZj1Aesg==, tarball: file:projects/pod-front.tgz}
+    resolution: {integrity: sha512-ottY3hlU8UA7sxXqZU2uE5W7TOOSilq+6kDGge1FG1aYLsHxmDdqARne5gA45dOEYjKag4G5dx9kasrjLyszDw==, tarball: file:projects/pod-front.tgz}
     name: '@rush-temp/pod-front'
     version: 0.0.0
     dependencies:
@@ -14818,7 +14818,7 @@ packages:
     dev: false
 
   file:projects/pod-server.tgz:
-    resolution: {integrity: sha512-0uMSZc255i9E+eWEsLTZ64KR9skr3bYqaxOFouLFI+wAADjSMy7gQ2VIpQZjBuFgouD+wLGR/y6xtxBKF6/s3w==, tarball: file:projects/pod-server.tgz}
+    resolution: {integrity: sha512-BercCG+YCE8DSswJEXNIfzUXv+cz1lPp+38mUJe/8+p2yc0FIeqhjA3eV3QYz8qBkvE8P4bsCzB9HBkTMT7Y3A==, tarball: file:projects/pod-server.tgz}
     name: '@rush-temp/pod-server'
     version: 0.0.0
     dependencies:
@@ -14848,7 +14848,7 @@ packages:
     dev: false
 
   file:projects/preference-assets.tgz:
-    resolution: {integrity: sha512-//s2BqteeEfzHmAmTsRrpBjQzrqkQlPPehEdBbkSM9Pg1w++btoW8ZgZFgXoaWS+h/AwELz+vENNhBk/HGGuaA==, tarball: file:projects/preference-assets.tgz}
+    resolution: {integrity: sha512-/InfFXSM8axHjwkqU91FXd4NWhE0FnOS0sXr1aJNbwk1UodHu10iuUKXbbiaIninvWhZfcW0kq++jyG8zwYDDA==, tarball: file:projects/preference-assets.tgz}
     name: '@rush-temp/preference-assets'
     version: 0.0.0
     dependencies:
@@ -14869,7 +14869,7 @@ packages:
     dev: false
 
   file:projects/preference.tgz:
-    resolution: {integrity: sha512-6oPiOyFct+/G8dc4gKnICtzrJfmuavPn3EA7v9KIHjdaHkTUHGxkgprJMNW/1MwDTvPv/GQ95Mg97s+EALveqQ==, tarball: file:projects/preference.tgz}
+    resolution: {integrity: sha512-GzBxlQnRVc3FBwE8pSQECePxe4IjOXNFC7y7LotBwYbll7/k9BZont9d09p58NoKh+8y+5ehHpMxgJ+F+0DDjg==, tarball: file:projects/preference.tgz}
     name: '@rush-temp/preference'
     version: 0.0.0
     dependencies:
@@ -14889,7 +14889,7 @@ packages:
     dev: false
 
   file:projects/presentation.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-YOLJLkSNLjdo/YfbQW5J2o+1xNn6ZvWcUQZ2pN9kf5zstYVHuDg9IoMp05lO3i0ilOQUsUJ5OAGgLiV3uC1Kaw==, tarball: file:projects/presentation.tgz}
+    resolution: {integrity: sha512-yH+35DSpN4mfgQS2RiaaW8FpepJmiRTxnhtOSBkU8jnby39VfgNAUOd9rDoww/mRHMwKkua3Q5NSeJUZvGtsQw==, tarball: file:projects/presentation.tgz}
     id: file:projects/presentation.tgz
     name: '@rush-temp/presentation'
     version: 0.0.0
@@ -14924,7 +14924,7 @@ packages:
     dev: false
 
   file:projects/prod.tgz_a9366fc5abe1de81e350f3e9b2acb628:
-    resolution: {integrity: sha512-I+7+5ja8q6l1D9xTzPc0uBDlmr1OY3PjFP+vy48V1WFcdidOV+pOtfXoWSOP7UOXvd+5+L3NEUWGi/XYCtYQwQ==, tarball: file:projects/prod.tgz}
+    resolution: {integrity: sha512-De20DKz90/YIPUItRJABF7fzduE9+BvaTAoZEx8mrDnIe9AsTt0j7lSG+2Kz+gxLe3F05PGmnItpk651yBFCBA==, tarball: file:projects/prod.tgz}
     id: file:projects/prod.tgz
     name: '@rush-temp/prod'
     version: 0.0.0
@@ -14971,7 +14971,7 @@ packages:
     dev: false
 
   file:projects/query.tgz:
-    resolution: {integrity: sha512-qIIxn2quBcfe0mLrwwojnzmhMrGK2xWDWP/qasXaP3xwK5CO8DN6n0Uj0Kv6h7XRXny70Xsg0q2gQoiOWxpPxQ==, tarball: file:projects/query.tgz}
+    resolution: {integrity: sha512-bS1eFPjgMJ77zFhh+AuvrT6XZ3iJQ5ptSQA/Z01ibcuE6v+/apkhUmvV8PE5L5DA+AfFOrp/dmfTUIRuYnrWEw==, tarball: file:projects/query.tgz}
     name: '@rush-temp/query'
     version: 0.0.0
     dependencies:
@@ -14993,7 +14993,7 @@ packages:
     dev: false
 
   file:projects/recruit-assets.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-40PZvjcv+jp+149kT9Bq8yyl1dY6swWqxEBuS1jmdgHigwoZZTPKwAwf+rYc7Et26osJQ2R6G93lwaJNDqf0jQ==, tarball: file:projects/recruit-assets.tgz}
+    resolution: {integrity: sha512-AaIujVi4W0TGLp3Ng2Io6JTfORfVJ5/LDIEg8o1ooosmrtg1EPxNevbtDPNO8rhM1jerM5azDxXA+ayRlYTs/w==, tarball: file:projects/recruit-assets.tgz}
     id: file:projects/recruit-assets.tgz
     name: '@rush-temp/recruit-assets'
     version: 0.0.0
@@ -15015,7 +15015,7 @@ packages:
     dev: false
 
   file:projects/recruit-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-6ege6SX3xUM3gdTm/E6crZ4seZAlvZpVUD56/+X/B+RRlZoLXASwoZmAvKESZWByUrAIilRPC0jz7EixUSK8ww==, tarball: file:projects/recruit-resources.tgz}
+    resolution: {integrity: sha512-/mNEQScIDxNkRURdv3/8tYpqS4CRwXkUgk5f4uUq41W+nIWC1D2wIlGhPWzgf4hSIdmg3K9Sa4jxDdBNIt3E5Q==, tarball: file:projects/recruit-resources.tgz}
     id: file:projects/recruit-resources.tgz
     name: '@rush-temp/recruit-resources'
     version: 0.0.0
@@ -15051,7 +15051,7 @@ packages:
     dev: false
 
   file:projects/recruit.tgz:
-    resolution: {integrity: sha512-MS7jPpqZ/B0E3uyNUFyAjO4jIW0YhWEH1OtdXGoVLTScyhzWbX+xEazniykKLz8yEOX+4T7MqImdFbVghtRwDA==, tarball: file:projects/recruit.tgz}
+    resolution: {integrity: sha512-atUaABWttLCVYss8UUmcfsjfGAc+DFV/QmljcrGcf4nW9CzOlEP6OIDFj73cppLezI1j2Zgo5pGB7Cw5uqdh1g==, tarball: file:projects/recruit.tgz}
     name: '@rush-temp/recruit'
     version: 0.0.0
     dependencies:
@@ -15071,7 +15071,7 @@ packages:
     dev: false
 
   file:projects/rekoni.tgz_svelte@3.55.1:
-    resolution: {integrity: sha512-mZhpaUWOAEWLBKfVUFGYdKK2ixQ2LJfhNm4L2wbb763C7oRiqW+lWsl0QyFMjAZRK6w+6+G+RarQvKCLVEGI7A==, tarball: file:projects/rekoni.tgz}
+    resolution: {integrity: sha512-TzTLSCdj5K665A0HQU74tmG8BSrHISWYAL0ym8QBeiAMMizLKVUP05jfGzGaVByiKG79P3Q2bA1O3Q4jJEQopg==, tarball: file:projects/rekoni.tgz}
     id: file:projects/rekoni.tgz
     name: '@rush-temp/rekoni'
     version: 0.0.0
@@ -15116,7 +15116,7 @@ packages:
     dev: false
 
   file:projects/request-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-dz2wIuenxB1hjVDnEdf2tdc9KlxGr77q4BXXSN/Kkj0Qw6s4rdMSkUqZu2RfLxLlZPRA/T/1mhSb8jlIM3XaaA==, tarball: file:projects/request-resources.tgz}
+    resolution: {integrity: sha512-YRaiWf4+2VIj5jEmsS6HQsBEIXJz5gHH7v8Pdtc35mGwliKDoavmxonOKvAvhA7BPHhitNrtK58eShLiQsB/kw==, tarball: file:projects/request-resources.tgz}
     id: file:projects/request-resources.tgz
     name: '@rush-temp/request-resources'
     version: 0.0.0
@@ -15151,7 +15151,7 @@ packages:
     dev: false
 
   file:projects/request.tgz:
-    resolution: {integrity: sha512-vKsFrj8syL+oDw3qpuBKSPPaJNy7A/pQQJk2PcsOE8jqVdQOfVIdhL7Kma3unqVcADtkiKP7Ni+VutlGxaAFlg==, tarball: file:projects/request.tgz}
+    resolution: {integrity: sha512-Pd+h2xM4AmCEYHaf+mnbM2csY8td/eIdSubJRNSmy71ro+fwWPwlMOh3duzim9RpKxtgGM1MafK1vWrMEL/6+g==, tarball: file:projects/request.tgz}
     name: '@rush-temp/request'
     version: 0.0.0
     dependencies:
@@ -15171,7 +15171,7 @@ packages:
     dev: false
 
   file:projects/server-attachment-resources.tgz:
-    resolution: {integrity: sha512-RJeSF9xJ3rkNA6VQezhC3nmFpy+ibtPI4TNC9ksFwIBjggOfP3OuKWkDtWdRfy4zouQS3p+l9//sNX+HXk5Pqg==, tarball: file:projects/server-attachment-resources.tgz}
+    resolution: {integrity: sha512-qEB7nm++CAYvNIulmvC6POLTk1dq9T4yCDmnbRW6hn49eX5ipHuzTKKrNyJZ49Dm/skRNMG5wLmANopGlsqf/g==, tarball: file:projects/server-attachment-resources.tgz}
     name: '@rush-temp/server-attachment-resources'
     version: 0.0.0
     dependencies:
@@ -15191,7 +15191,7 @@ packages:
     dev: false
 
   file:projects/server-attachment.tgz:
-    resolution: {integrity: sha512-GBDa2HQb2KL5M5iG2myEh4W4ALuzt9beV3HKzChNrlGqJ6L4PYL2VnY6ILJHxugYAWQsnnddhQQQ/XXccHJpiQ==, tarball: file:projects/server-attachment.tgz}
+    resolution: {integrity: sha512-yjfYYMJoYSPlMzGbErf6slSoonugG6QYYwCWwlMDWjGwKITBLl5VoSAD5g2z8sZpJVluN4dNN3KT0ZChD5Nf9g==, tarball: file:projects/server-attachment.tgz}
     name: '@rush-temp/server-attachment'
     version: 0.0.0
     dependencies:
@@ -15212,7 +15212,7 @@ packages:
     dev: false
 
   file:projects/server-backup.tgz:
-    resolution: {integrity: sha512-GogDF8Ke/8zeQL/6aLmQEfR1X3xaqvL2R+wGT1cfOtQkwkTfctoPB0ONtt48voOnZVme9q2M4i9qYudzONAPAQ==, tarball: file:projects/server-backup.tgz}
+    resolution: {integrity: sha512-vaQou8H1TS04klov4gMIE9rYBZIXAuTOGxA853Xb6gkUqpbmdTLevvWms8wHt2IEPmDIer9gZ87Fts+geXe7NA==, tarball: file:projects/server-backup.tgz}
     name: '@rush-temp/server-backup'
     version: 0.0.0
     dependencies:
@@ -15237,7 +15237,7 @@ packages:
     dev: false
 
   file:projects/server-calendar-resources.tgz:
-    resolution: {integrity: sha512-FQ1OWRJErhEVUcWWvkdTm/HnTQBePYrQ4BTfqjrR3/3j8Q5WN5qoQz7oYf/fWV4t/hDGnhvdDSyTTWs4sUJhCg==, tarball: file:projects/server-calendar-resources.tgz}
+    resolution: {integrity: sha512-Q1Bq3gEGdIFS/9zJVpYfNAUGX65lCRSsHR0eLaDZnNnRtl9fvKFo+VV/zGXuVVYU9bxFD9wySn1Tb1azMC45Rw==, tarball: file:projects/server-calendar-resources.tgz}
     name: '@rush-temp/server-calendar-resources'
     version: 0.0.0
     dependencies:
@@ -15257,7 +15257,7 @@ packages:
     dev: false
 
   file:projects/server-calendar.tgz:
-    resolution: {integrity: sha512-zef3W5eUVczpZrW514JEzZ4HCffOtVeg0JfyZfwwOFtocqqY/ha/hNsmezz5BxrnCogFINFq8WI1JUum9OGEHA==, tarball: file:projects/server-calendar.tgz}
+    resolution: {integrity: sha512-TBkfucZB88B7P8fVL6KDhkCYcPrpa5hMDeGs+75aPWEw6NMjh32lIoh1KiEmYINWYQ3W/QHthBemM4KqdCwnbw==, tarball: file:projects/server-calendar.tgz}
     name: '@rush-temp/server-calendar'
     version: 0.0.0
     dependencies:
@@ -15278,7 +15278,7 @@ packages:
     dev: false
 
   file:projects/server-chunter-resources.tgz:
-    resolution: {integrity: sha512-6W2DVblvCtMs2Q/1a5dI1UaU/oDZjGJ8WnZWygkpwYlAYWeBFKiTaPtv/Gwh5rMJMM8GUe2/94OYzXzE7/pJOQ==, tarball: file:projects/server-chunter-resources.tgz}
+    resolution: {integrity: sha512-tOXjMi/t3RgG9U56BrwIK+SUwnOOQ2Zq7/RWzHQtMDGRKyeuttpcNNQF2fZwqow5lMnfZ31omkwWsKZeaHoF0A==, tarball: file:projects/server-chunter-resources.tgz}
     name: '@rush-temp/server-chunter-resources'
     version: 0.0.0
     dependencies:
@@ -15298,7 +15298,7 @@ packages:
     dev: false
 
   file:projects/server-chunter.tgz:
-    resolution: {integrity: sha512-OcDCaz1Zg98jz1cyztZlf2vbe04+J8iTpLgmBFbzQRvDxOkOrCFk2VpiT7QbrUpNhGeV4HZ++Qi9EUdOzAGgfg==, tarball: file:projects/server-chunter.tgz}
+    resolution: {integrity: sha512-ZfeEuMqOroRID8nVOar2rS/aJI46CMWWki+9PjT6HUYDC0hwMX2xNT2SalE4kVmnsf0ugDoRisyStQxrjZt1vA==, tarball: file:projects/server-chunter.tgz}
     name: '@rush-temp/server-chunter'
     version: 0.0.0
     dependencies:
@@ -15319,7 +15319,7 @@ packages:
     dev: false
 
   file:projects/server-contact-resources.tgz:
-    resolution: {integrity: sha512-mGDrgEGzv7l2faDcAAelAxPdGMxAEpfglTVFt4QLHLuWBCAFDIF4MLJqE7wMWOQcy9dN29efbBkzF2DQH/aC9g==, tarball: file:projects/server-contact-resources.tgz}
+    resolution: {integrity: sha512-6noxySv/5QETB+RS14u1zIysnImMeerHd4jWspVYU0PYL/x32cQgrmTsUq6R0cdMYfcZD9J952xDGx8n+PrOLg==, tarball: file:projects/server-contact-resources.tgz}
     name: '@rush-temp/server-contact-resources'
     version: 0.0.0
     dependencies:
@@ -15360,7 +15360,7 @@ packages:
     dev: false
 
   file:projects/server-core.tgz:
-    resolution: {integrity: sha512-/KVYXHaI8RJ0wpc4nl3090dRsT8rwGFPKVvIAmpu6DgqWgYIyxhTtSUTxNpyZhiqznr9591daw1iRHGriU98Qw==, tarball: file:projects/server-core.tgz}
+    resolution: {integrity: sha512-ByYsGyVdCVZWH9rbhhGGDaOBtLOm7zIhCJC6EXJOBiwObYkbyB9Xdtc/xA57OfmeQNJAjhTH83aP+P9RGxxQSw==, tarball: file:projects/server-core.tgz}
     name: '@rush-temp/server-core'
     version: 0.0.0
     dependencies:
@@ -15386,7 +15386,7 @@ packages:
     dev: false
 
   file:projects/server-gmail-resources.tgz:
-    resolution: {integrity: sha512-KXya12ARgkvCXNsj7acw3nnuVzT8x3h8i1yEhS2MicOCnOGTBpqAJWmO6w0PdpnVj7KKPNbIZsbXhKEKyCj/FA==, tarball: file:projects/server-gmail-resources.tgz}
+    resolution: {integrity: sha512-bOwsupPHEDPsPOdAu/nGyJ1TURUfXEGMvb2nfgr4Pb52KLAqV2bakQWlpEdd+tmHvAi031mVb9EwLDR+msv70A==, tarball: file:projects/server-gmail-resources.tgz}
     name: '@rush-temp/server-gmail-resources'
     version: 0.0.0
     dependencies:
@@ -15406,7 +15406,7 @@ packages:
     dev: false
 
   file:projects/server-gmail.tgz:
-    resolution: {integrity: sha512-vd1nVhlBrEejWgLdvmIElXNicIVRuPvD3dwH5QNvY0xHp+xZkmteuRXIcO0Eui4/cNSvYnvK48WZxGMIiB6HNA==, tarball: file:projects/server-gmail.tgz}
+    resolution: {integrity: sha512-WWLWZMmAgVHT/1skvbGm4pAU9kBMZrJu6tImc/KgqixnoyG1NciTGXpZ4yjPicX94It4H0KZUoubXyJqj2nL6g==, tarball: file:projects/server-gmail.tgz}
     name: '@rush-temp/server-gmail'
     version: 0.0.0
     dependencies:
@@ -15427,7 +15427,7 @@ packages:
     dev: false
 
   file:projects/server-hr-resources.tgz:
-    resolution: {integrity: sha512-J/yTyf4IxVLmw7NbYAT1ipgHxJ6WEa2v1shwQDt8wUsd8F53d/Z38q5CDfvYZmXo/JHyXl5aTo7uy1UzTxGapA==, tarball: file:projects/server-hr-resources.tgz}
+    resolution: {integrity: sha512-ks2/gZD9rE/FalspgJOhSouFPCEDNaryikk1c5DrDL0dW3thNm3zwajewizom8YxnrucplN+rxbv/88VXiiqiA==, tarball: file:projects/server-hr-resources.tgz}
     name: '@rush-temp/server-hr-resources'
     version: 0.0.0
     dependencies:
@@ -15447,7 +15447,7 @@ packages:
     dev: false
 
   file:projects/server-hr.tgz:
-    resolution: {integrity: sha512-Fm7Z9Qw3wKKvEJtwWrLL7JsnsxaEgHmTmdfdW1XFvBFP19aEfhGJCqgzt1hnJc4SQVQqK11O6p2DtEC5i1eq1g==, tarball: file:projects/server-hr.tgz}
+    resolution: {integrity: sha512-VPrSRjWgBK1DuoQwTrOlafFtD21GGdYvzm3wlP1kzxB4pKPjrr5DOofC8edSegeoezImqKNIN6V8bN9Kp3UcjA==, tarball: file:projects/server-hr.tgz}
     name: '@rush-temp/server-hr'
     version: 0.0.0
     dependencies:
@@ -15468,7 +15468,7 @@ packages:
     dev: false
 
   file:projects/server-inventory-resources.tgz:
-    resolution: {integrity: sha512-h8yzAOxB/mb+xrU1z66kph9H9wOPfBLfCrxd0UrBwSOOR7N1FoaXGaqqy/x6ydLC70XoaZoH79X4rqlD9LoE2Q==, tarball: file:projects/server-inventory-resources.tgz}
+    resolution: {integrity: sha512-KMH6VjuZ+DdE76hLb/cmd5hVEG2nWEexIxpGQ1y9hD1mRnZipWGDv0qnmQc8d6cNZNS75f+KEVe04lFtoEjRHg==, tarball: file:projects/server-inventory-resources.tgz}
     name: '@rush-temp/server-inventory-resources'
     version: 0.0.0
     dependencies:
@@ -15509,7 +15509,7 @@ packages:
     dev: false
 
   file:projects/server-lead-resources.tgz:
-    resolution: {integrity: sha512-y7fzWosTvXDo7eg1l4YzeCfoJ/rhVEdl4jNvF7KGd8SBc/7s7KLnz6TUSaLG31WhMjLVlI2DqBK901xc71Y2Gg==, tarball: file:projects/server-lead-resources.tgz}
+    resolution: {integrity: sha512-B/gSCVdR3Fwxov34tUlAXQEF7yBZuO0dNJUxOd3gIBTNjpd1NagovHHZimSDusmpe3EYVLFUzqgIz8E0K6tEhA==, tarball: file:projects/server-lead-resources.tgz}
     name: '@rush-temp/server-lead-resources'
     version: 0.0.0
     dependencies:
@@ -15550,7 +15550,7 @@ packages:
     dev: false
 
   file:projects/server-notification-resources.tgz:
-    resolution: {integrity: sha512-GltrJej806sQpj8mabyB+oYVGvWb1MT74HzM+1NsOcru7dfwtkyknquZ0VcIrhQ+Y7vr8/C+UIEk/dz7CS+MJg==, tarball: file:projects/server-notification-resources.tgz}
+    resolution: {integrity: sha512-KTeOlT60cqx5rIJ206RUtsuBhEjmw2NbwX6BuVniaP9fzFVMeAJCk35t4SzopZaCh1PC0nPo2UP/dNFO/axC+A==, tarball: file:projects/server-notification-resources.tgz}
     name: '@rush-temp/server-notification-resources'
     version: 0.0.0
     dependencies:
@@ -15570,7 +15570,7 @@ packages:
     dev: false
 
   file:projects/server-notification.tgz:
-    resolution: {integrity: sha512-d9ukTOc/MQIqg3+pcK56UcC8gZwXJd5aPeV7sEvbw3pZFPiYT3d61vYjaUMWzCtm4b9zErhQ3ZOKLjhlUzOuCw==, tarball: file:projects/server-notification.tgz}
+    resolution: {integrity: sha512-2LzFW1SCco+yNy3u/vmKpbe7CTwdQq133kYYTRUCvSIjHqgHETPxUiFLKOC70lRWKf/Jxu2KOYBujlSiwrx+kA==, tarball: file:projects/server-notification.tgz}
     name: '@rush-temp/server-notification'
     version: 0.0.0
     dependencies:
@@ -15591,7 +15591,7 @@ packages:
     dev: false
 
   file:projects/server-preference.tgz:
-    resolution: {integrity: sha512-tn2b4NQ58maxv3GEekUkYf1tp/WksgQoDnIQWCUKACjV/wn9ODldoc6U5P1xSZMkxztT76AlctYn2+U1/lNpgw==, tarball: file:projects/server-preference.tgz}
+    resolution: {integrity: sha512-SG+ZvSW4eQdqaskCxlkpi6pCmM9LgjFUT88nDn6h4ErSBNBO2oRFhhFhq1OVZSoGUgVzQ/rifqbHnEbCR0cO6w==, tarball: file:projects/server-preference.tgz}
     name: '@rush-temp/server-preference'
     version: 0.0.0
     dependencies:
@@ -15612,7 +15612,7 @@ packages:
     dev: false
 
   file:projects/server-recruit-resources.tgz:
-    resolution: {integrity: sha512-LQmBjPkXXbLWRapdEuilrdphZZifOwKSPOnw8HNDMkgLr094WFelwxXyk7mOrkOjbgljfEmKUT5TMmFHKe4W7Q==, tarball: file:projects/server-recruit-resources.tgz}
+    resolution: {integrity: sha512-qCq8ZVGHDaDDrB0HpGQvR+fW23/Q/VFiWfj9ctz7doLBITvtM/R/+zpKDCa0KIV70cDHGmN2CRhhS09NFdkUVg==, tarball: file:projects/server-recruit-resources.tgz}
     name: '@rush-temp/server-recruit-resources'
     version: 0.0.0
     dependencies:
@@ -15653,7 +15653,7 @@ packages:
     dev: false
 
   file:projects/server-request-resources.tgz:
-    resolution: {integrity: sha512-3+rvYdBsibmsO6PK0FG4WRQkQwr2OFx8AnxZYdDCKz8VDLTzovV98N+T3HqtGP53oefDQOuwEFZXldQTqCvaog==, tarball: file:projects/server-request-resources.tgz}
+    resolution: {integrity: sha512-FMgehPU/23K7uoOy4Ca1iVp6/F7yV2X4RUQYNr/05DoauDmAq2LVa/RkB1qwuAsnmxETstabFBzMNj0xB5ps/w==, tarball: file:projects/server-request-resources.tgz}
     name: '@rush-temp/server-request-resources'
     version: 0.0.0
     dependencies:
@@ -15694,7 +15694,7 @@ packages:
     dev: false
 
   file:projects/server-setting-resources.tgz:
-    resolution: {integrity: sha512-67QgSKU3h8voX0Vyb4j/1798b7ezrtZmplNyv6V6aF7ATay/uL25IpnuV3LbBERPH30i51HbnjYa29SUu7q/kg==, tarball: file:projects/server-setting-resources.tgz}
+    resolution: {integrity: sha512-1evLHLw2z7HCWXjjyrB/LK8GXlq6DKHUkazKJetYbJoBHJMx4epavhn/z/2uZH2la6STLk2CRPUOsq9ydLNixQ==, tarball: file:projects/server-setting-resources.tgz}
     name: '@rush-temp/server-setting-resources'
     version: 0.0.0
     dependencies:
@@ -15714,7 +15714,7 @@ packages:
     dev: false
 
   file:projects/server-setting.tgz:
-    resolution: {integrity: sha512-X0xlNT4RubPCoJZ1yTNIaGhoeirb8PFojQSDvgH6s6htRw7LjaMhO2d5CgEcr+seoa0/+swGrrjpNyM44FAUng==, tarball: file:projects/server-setting.tgz}
+    resolution: {integrity: sha512-ihMVkpiblZoJzLBRIMmHxHQJYZC1yvcD+3dWdvEfqBVXFXJtzJgmHiecTCmq3RJgOVdWB+xnbPZJBDZI9A7kzA==, tarball: file:projects/server-setting.tgz}
     name: '@rush-temp/server-setting'
     version: 0.0.0
     dependencies:
@@ -15735,7 +15735,7 @@ packages:
     dev: false
 
   file:projects/server-tags-resources.tgz:
-    resolution: {integrity: sha512-9ySmRqQ0YODwzuudWB5B4YhdG6QJD87Xd78VF8PJYNS0qDCFyAyEcLerRQHpNxDqNEASErtN9LOgCK3ZatR6YQ==, tarball: file:projects/server-tags-resources.tgz}
+    resolution: {integrity: sha512-Dw3YlPmz4EmzovAC8wKrpTDF87vWIsx48/bLkG/yltLxlDTdoSjXb+MOJNjUhJHAwzEGjMqs/Cm0rKLKzFikow==, tarball: file:projects/server-tags-resources.tgz}
     name: '@rush-temp/server-tags-resources'
     version: 0.0.0
     dependencies:
@@ -15755,7 +15755,7 @@ packages:
     dev: false
 
   file:projects/server-tags.tgz:
-    resolution: {integrity: sha512-Rfk+ohqrZcICFbXs+cZd2S1OyZUs4KVFWUCWIRC9KjLsoPt+tJrpf4yZ1UDq3O5jH0J3ncEY/AQyhPwhduM1Dw==, tarball: file:projects/server-tags.tgz}
+    resolution: {integrity: sha512-jf3YTWT6adDxv9YTmrGdb5/RKOA7nVJ89SwF6PL6BXEjVJZxxYduFjzJ9+E+rulrDHxrg6FzR22yv68Duu3QLA==, tarball: file:projects/server-tags.tgz}
     name: '@rush-temp/server-tags'
     version: 0.0.0
     dependencies:
@@ -15776,7 +15776,7 @@ packages:
     dev: false
 
   file:projects/server-task-resources.tgz:
-    resolution: {integrity: sha512-CvXf1lY+7J+OINR4xPRp/qz7//Jc5CcOvBplqgqUlNXT3a84CZTS/nZ7iS1uKviE7rO5hQx1sbj8GgzrAf5FBA==, tarball: file:projects/server-task-resources.tgz}
+    resolution: {integrity: sha512-j608zNvS64WNkPd7kHpVdxQmE54kJ41mHO4snz9Bb9XJSpJgoB6GQFQ2rgPoJIFaxfQZSrfqhFFxRiEC3evkHg==, tarball: file:projects/server-task-resources.tgz}
     name: '@rush-temp/server-task-resources'
     version: 0.0.0
     dependencies:
@@ -15817,7 +15817,7 @@ packages:
     dev: false
 
   file:projects/server-telegram-resources.tgz:
-    resolution: {integrity: sha512-2y9vRTAT6U6ylOoER6GuF0slGO30Rsewe2SZ1PIsLp/z0AxoNgA4LEqMTkvYmtKoWcxGpBxr+8jNK2+k1Bzfnw==, tarball: file:projects/server-telegram-resources.tgz}
+    resolution: {integrity: sha512-vNcU2wtjdJXs/7jVu8S+bF2gMpdG2RlKfeDEO1DcHsO1RXnoNmrqBccWuzGLGQZy/FkDoBMoq4AludOtZZ1kTw==, tarball: file:projects/server-telegram-resources.tgz}
     name: '@rush-temp/server-telegram-resources'
     version: 0.0.0
     dependencies:
@@ -15837,7 +15837,7 @@ packages:
     dev: false
 
   file:projects/server-telegram.tgz:
-    resolution: {integrity: sha512-yLhnQUdoonplNAYnUfwnOMlosDoWf/p0CJ+8V1AO0VXmX3AS+tN6MRbY9EG1fD6l7evJhJJu9GGhUEK0xrCeqA==, tarball: file:projects/server-telegram.tgz}
+    resolution: {integrity: sha512-h6tCol5czbDIHRwJp5w4k1m/yH3jkQuSOgyTaSazMi/36LIn/MsFiAfdhr2KK2xSVs7V8epMGWTBcDHOlDEDEg==, tarball: file:projects/server-telegram.tgz}
     name: '@rush-temp/server-telegram'
     version: 0.0.0
     dependencies:
@@ -15858,7 +15858,7 @@ packages:
     dev: false
 
   file:projects/server-token.tgz:
-    resolution: {integrity: sha512-z762Z5GAuVHvRW48sSB8aXWbU01dU8TJ4RcaC1efjchqUAxcgqg/eRzKil+WN6eihqn+kjcchHMffQjfs1ZRYw==, tarball: file:projects/server-token.tgz}
+    resolution: {integrity: sha512-FLISzBJVnLMVsebr8fVOagAu4jfbbqL13FRo0oM+1R1/ghJSQj+psTpVT4Nht6SUo9/Gff4HVInfHOY2CLiSKw==, tarball: file:projects/server-token.tgz}
     name: '@rush-temp/server-token'
     version: 0.0.0
     dependencies:
@@ -15882,7 +15882,7 @@ packages:
     dev: false
 
   file:projects/server-tool.tgz:
-    resolution: {integrity: sha512-TRh17XyCbqAqufLEchyu/XbbaNXnZWmpsmJbkQFiUxxeTSbx6Dmtb4Y4Na6j2OGnvX+x/VZVAqp1SpDqVlFEtA==, tarball: file:projects/server-tool.tgz}
+    resolution: {integrity: sha512-i7rzAWasgtq2HDqM09Iv7a5B8kIW+dpbqwiOke4V2No+cpv9ADop/ln5/yrbG5U+LJIAnCZXSFhFp4b0yUB3Fw==, tarball: file:projects/server-tool.tgz}
     name: '@rush-temp/server-tool'
     version: 0.0.0
     dependencies:
@@ -15910,7 +15910,7 @@ packages:
     dev: false
 
   file:projects/server-tracker-resources.tgz:
-    resolution: {integrity: sha512-QrRWqIwqtk0WpWl35RAZz8s6+MORS/3oYXYPSaLH2pGpFFvyCp8YBR8YU5l69BkrJ1VZrBPaEigxuOpc1fjOzg==, tarball: file:projects/server-tracker-resources.tgz}
+    resolution: {integrity: sha512-NMmpq5+swqvAT3BUl8h1rugPGOetaildPjY3jdrGez7AfNDTAJbdCgeXQAyi/Gzk+KENR1EKno6KVZLg/Exwxw==, tarball: file:projects/server-tracker-resources.tgz}
     name: '@rush-temp/server-tracker-resources'
     version: 0.0.0
     dependencies:
@@ -15951,7 +15951,7 @@ packages:
     dev: false
 
   file:projects/server-view-resources.tgz:
-    resolution: {integrity: sha512-m73XZ2EMnB6T0O1blB74ap8kdd3ED9jGXA8QlGRlH9cuPZ/+hj99nhR9Amj0akr1HaZAumKzEQuI894f84uO1A==, tarball: file:projects/server-view-resources.tgz}
+    resolution: {integrity: sha512-KlTo6VlUvH9NRT2dOmohAHJrHKwDmT4TWEpK41K/f6xNFKFf3/0l2Z5UQF33FLNA39fN7qeILe/ojqG2PY7CjA==, tarball: file:projects/server-view-resources.tgz}
     name: '@rush-temp/server-view-resources'
     version: 0.0.0
     dependencies:
@@ -15992,7 +15992,7 @@ packages:
     dev: false
 
   file:projects/server-ws.tgz:
-    resolution: {integrity: sha512-jz6V0MTp9ykO7DP0r2p4bzQNxqTjToI1phUmbpBQ700yzIo8aBDdBumBKY24VYn5038EFFpW+tkd3lJzhBbcew==, tarball: file:projects/server-ws.tgz}
+    resolution: {integrity: sha512-Zs31mCJEbfkgq+9pRblZ1fDKLvW06jbeQ1dBroXitMEz+ZKKNPs8xUbFR53EwrYvU00PQEBDLwhlWqQw9DSo5w==, tarball: file:projects/server-ws.tgz}
     name: '@rush-temp/server-ws'
     version: 0.0.0
     dependencies:
@@ -16017,7 +16017,7 @@ packages:
     dev: false
 
   file:projects/server.tgz:
-    resolution: {integrity: sha512-49azpH5ecPq3gI1FT5xCWOUeMXlGj1Fi7mtw+JZGnWAqYsSkEQVaIDw5xB5O5zRMW6hoo8kO9hqE6rS7I0FhTQ==, tarball: file:projects/server.tgz}
+    resolution: {integrity: sha512-Kh72IYzdkXKzliwmUTJjYBHt82C6c6UyJV3e3zpgDZbbie6Cg08XTF9CdGuIb3ClG6J9j9tSsabnbq4zKWLCbA==, tarball: file:projects/server.tgz}
     name: '@rush-temp/server'
     version: 0.0.0
     dependencies:
@@ -16047,7 +16047,7 @@ packages:
     dev: false
 
   file:projects/setting-assets.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-cStTqyaOif0w9AR3RMzLbUJ39qdNMz2mOlZK6TSePicc0WZWxcv6SHKh24nwIvTad9kOJpZAX3aa5Ne/F+Ub8A==, tarball: file:projects/setting-assets.tgz}
+    resolution: {integrity: sha512-GR5Sd2tma3sqB9Tt7d4YFL1EZ1k/VzeTXDF63DBXdow1odBB3fnYrs+/A/mJxFlTw+b6fleavhniroXPulmDZg==, tarball: file:projects/setting-assets.tgz}
     id: file:projects/setting-assets.tgz
     name: '@rush-temp/setting-assets'
     version: 0.0.0
@@ -16069,7 +16069,7 @@ packages:
     dev: false
 
   file:projects/setting-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-T6OEcu1dcNx9zrpFKXZQPbyC62ebIYMuPGaw9mXyYQAB7LjJwB6/Mz0qG+aO51TZxasRtS4YhahYm/wjBVfp3w==, tarball: file:projects/setting-resources.tgz}
+    resolution: {integrity: sha512-OSjX29f90jbqKk/c45CbF4ThcEbB4ZBaL8uloWYs9NSlx7wZwTfICyhj+nFGKLhFBvjxNQi+vxjteMD4Ims71w==, tarball: file:projects/setting-resources.tgz}
     id: file:projects/setting-resources.tgz
     name: '@rush-temp/setting-resources'
     version: 0.0.0
@@ -16103,7 +16103,7 @@ packages:
     dev: false
 
   file:projects/setting.tgz:
-    resolution: {integrity: sha512-stpl2ADJN5axNPuiGZzlClu5l/GLrM/jbcuXdoQ6xTk1Yam+uB4YBSPAwvP7cigDshsVvug8p6DhTZD9flPjYw==, tarball: file:projects/setting.tgz}
+    resolution: {integrity: sha512-BHOJqREcuAMXYgg/Fhwy49LoAVU/ehpbmBQ9FiGURWATnJuffBXdgNulYAxvpMmALW4bAXJNkUvvAWUyF6/qfA==, tarball: file:projects/setting.tgz}
     name: '@rush-temp/setting'
     version: 0.0.0
     dependencies:
@@ -16123,7 +16123,7 @@ packages:
     dev: false
 
   file:projects/tags-assets.tgz:
-    resolution: {integrity: sha512-COAg2k+tIQpj7ottNo6rWPJQOvIkp5iqHdDrr3FBZc+XqKnay/VL5pQiZGmUPGocxxIFsz8s070YRMCOf0DuDA==, tarball: file:projects/tags-assets.tgz}
+    resolution: {integrity: sha512-vgPLYnClxmTI3wVkDAIoT+wHH5noA7eyuoxjSU+lzAY5muoJxovYUEZe9m0+7uIbPZSYj505VIp+npl4qlSWqg==, tarball: file:projects/tags-assets.tgz}
     name: '@rush-temp/tags-assets'
     version: 0.0.0
     dependencies:
@@ -16144,7 +16144,7 @@ packages:
     dev: false
 
   file:projects/tags-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-D+bFHQAHasIUWMwYBgvf7yNHkuQCHdzoA56eEtwSSrjv4Nd4PpCElBHPWD0m2/3oGb025Hg++kLPBhW6oJzYnA==, tarball: file:projects/tags-resources.tgz}
+    resolution: {integrity: sha512-MEN4vTFyQPjYQXXfwJVkSeS2y5DJx1FMmH+ckBzhcpxVWgggRNky4js032XgY4TA0UTZDSwebeNoCV5QJ2RroA==, tarball: file:projects/tags-resources.tgz}
     id: file:projects/tags-resources.tgz
     name: '@rush-temp/tags-resources'
     version: 0.0.0
@@ -16178,7 +16178,7 @@ packages:
     dev: false
 
   file:projects/tags.tgz:
-    resolution: {integrity: sha512-049ANx4qcXMyu81Zs3eUtD8bxIomZXKH+fUbd68VPKSw2DG3UeUltFS5Fi1pZ+QyAW5Lopi5XyCSB+HSNofvHg==, tarball: file:projects/tags.tgz}
+    resolution: {integrity: sha512-xvIp4e/FNUDhX0KnVaiaDDvVA5BGUvyhBhKeL4ovZ0ZPhLzKquIp/3rbGJtRDkxVjGqXiMhEp4vxN8GEtKYdhw==, tarball: file:projects/tags.tgz}
     name: '@rush-temp/tags'
     version: 0.0.0
     dependencies:
@@ -16199,7 +16199,7 @@ packages:
     dev: false
 
   file:projects/task-assets.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-r5mJMY9KkRdCR8yNzHQ5NfIHx0JrfEwN/2KvoI1/KjjtGQsJWtibkfJns9ijIPlLcgwCaLwKLGHpRs4buSxWdg==, tarball: file:projects/task-assets.tgz}
+    resolution: {integrity: sha512-0VG9/N+XWrmD4dVMDsNRBSn7SAl097/F1MUnMfxYd0vuOupleZqsNnRfPdXh3ngJSz9PrwEtx4N6RhMzqViywA==, tarball: file:projects/task-assets.tgz}
     id: file:projects/task-assets.tgz
     name: '@rush-temp/task-assets'
     version: 0.0.0
@@ -16221,7 +16221,7 @@ packages:
     dev: false
 
   file:projects/task-resources.tgz_ed2e4f4d904d50838e5f15c036f084b4:
-    resolution: {integrity: sha512-u73/Gn2b4/3Xv3d+cCVBydSpvFjhZfxyJR7oHPVjvQ4mkegXdLqXM08BZq9ZAm+t1kJcmswYozcsRMazjvGYMA==, tarball: file:projects/task-resources.tgz}
+    resolution: {integrity: sha512-5vT59cF99hrDXh2QHlvmB3c4Votox0DqmEZiw+lBujQI6L+qCj+FHf9BNT/Mlbw9w66lpUKFDVEyiKGDwwTMMg==, tarball: file:projects/task-resources.tgz}
     id: file:projects/task-resources.tgz
     name: '@rush-temp/task-resources'
     version: 0.0.0
@@ -16255,7 +16255,7 @@ packages:
     dev: false
 
   file:projects/task.tgz:
-    resolution: {integrity: sha512-M2z4Mh9zvNfFghVpcC0uptszova7atrTtmVdGORGRj5Qhty5Ay07FGp/Tp6kkqdnm0No6o3VgczFicEXidshjQ==, tarball: file:projects/task.tgz}
+    resolution: {integrity: sha512-aidMa2jRcd/8lb5oVLlBGZg9Le9BjnmQ4+ELkwrf9y+RsArEV4LRtQ8++qcmcBS1opUsunis/sK/t9Fu7bALZw==, tarball: file:projects/task.tgz}
     name: '@rush-temp/task'
     version: 0.0.0
     dependencies:
@@ -16276,7 +16276,7 @@ packages:
     dev: false
 
   file:projects/telegram-assets.tgz:
-    resolution: {integrity: sha512-1j5LgmpjAm2Aoz33bH2nCYa+fkb4Ibo8lFLuDzg7obqaOHTPt9WWVDTG6F4Bc9jzpnLIuPlP3yg9ah60UUPMOw==, tarball: file:projects/telegram-assets.tgz}
+    resolution: {integrity: sha512-QzTWy8uIAamL8eztC6Ggyde+z97UKU4RBof67WKo90fR3kuKD0obIyKSMUf0zT7bGaqLH+9e56nUTDN4cwkd4Q==, tarball: file:projects/telegram-assets.tgz}
     name: '@rush-temp/telegram-assets'
     version: 0.0.0
     dependencies:
@@ -16297,7 +16297,7 @@ packages:
     dev: false
 
   file:projects/telegram-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-icpvlBI7aNqTpAx2Dx0x2gCgkdseZw7hpFfUckzVUZzBZWn5LseRJ9AApmrQNRiIA70Ib6IDZ1MsrgUN/sx+5w==, tarball: file:projects/telegram-resources.tgz}
+    resolution: {integrity: sha512-Bc0L7G5O8T49ZL4oHtRRP00ri/mwZYlYyjyR3Y/jVtcLRY8oQKTanHdjDJ2vAMnSsJJI3UG9twWw1uBQx4g2Kw==, tarball: file:projects/telegram-resources.tgz}
     id: file:projects/telegram-resources.tgz
     name: '@rush-temp/telegram-resources'
     version: 0.0.0
@@ -16331,7 +16331,7 @@ packages:
     dev: false
 
   file:projects/telegram.tgz:
-    resolution: {integrity: sha512-fIi4awpCfnGKezZJZWTvLOd5vgraVDqJnLkGPMxM/6SRPxQrUL00djn16BdlMrvbm/pBGEkmyoiDLN19M/9lyQ==, tarball: file:projects/telegram.tgz}
+    resolution: {integrity: sha512-c8QEGu2dXoCem7tYgWs9xS1dU7ajhz2N7MCyAKPIAUmUGg+GFIVqu2n9rrIEWQ/+ATGP0a1eoTwS6gVXAe50nA==, tarball: file:projects/telegram.tgz}
     name: '@rush-temp/telegram'
     version: 0.0.0
     dependencies:
@@ -16351,7 +16351,7 @@ packages:
     dev: false
 
   file:projects/templates-assets.tgz:
-    resolution: {integrity: sha512-j2PkrriKsYDRHIy4gqXNjhPaxAVz2kqPtC3wjMRV5aul/jgtPbjugShW3bZB4lSHKddDJJjY/DXUCMGRtH9ZHg==, tarball: file:projects/templates-assets.tgz}
+    resolution: {integrity: sha512-sSIBlAnvEHRihK0nT9Emx30114K6IxoQDUhzmfucJdtTjPoOZUq1wuaHvSQyAwXVkhvtMhNrGJADI6qV+AqBPg==, tarball: file:projects/templates-assets.tgz}
     name: '@rush-temp/templates-assets'
     version: 0.0.0
     dependencies:
@@ -16372,7 +16372,7 @@ packages:
     dev: false
 
   file:projects/templates-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-2U4xcLhrZLZEgm4lkeN4BQ4uPTaL6PmoKd5+U28RmpqQyCRLYaeUWrB8Mbo8njmdWUcJlYdr+vmUlmi8jCkfFQ==, tarball: file:projects/templates-resources.tgz}
+    resolution: {integrity: sha512-P4Td0WmH9Ol+ikvD2VLq6RYYx0uCSUmWVW0xNxMq7P6pgZmIsgGbeYULz0Iy+43Ivl5NMqVlvuawYUXpqbgg8Q==, tarball: file:projects/templates-resources.tgz}
     id: file:projects/templates-resources.tgz
     name: '@rush-temp/templates-resources'
     version: 0.0.0
@@ -16406,7 +16406,7 @@ packages:
     dev: false
 
   file:projects/templates.tgz:
-    resolution: {integrity: sha512-o7SGfRXFAvyktRw6avrdNbYshhSTr/n+uc4VaB5tRwCy03rZNMZE3dpzB+oKwZrgPraiT34fZNrCerDMDvFaHA==, tarball: file:projects/templates.tgz}
+    resolution: {integrity: sha512-fu7FRsVgpu5RbHhrFv5dxWNdG1MI4aYDDx0xuc0Q83lmRpqI3Z7CfvfIQT99+Gz5fO7Pq783b7mdmKpdzxntUg==, tarball: file:projects/templates.tgz}
     name: '@rush-temp/templates'
     version: 0.0.0
     dependencies:
@@ -16426,7 +16426,7 @@ packages:
     dev: false
 
   file:projects/tests-sanity.tgz:
-    resolution: {integrity: sha512-5sdaBcuUhV/mOZetPGkYafCuHHfAvp6mTm3Qwwjn9NpVuIsSEFZw/qmvx4awVGo8GVtOcX7jZp+bJpZHPaJ/hQ==, tarball: file:projects/tests-sanity.tgz}
+    resolution: {integrity: sha512-WzfExu7GZQupJtzGrjQh6pyMQXLiFYAJcxW8vEgmHqu6IlALilZvQgO9+c/zbl/rg4TWE0Nw7rG0AdOKbPSA6Q==, tarball: file:projects/tests-sanity.tgz}
     name: '@rush-temp/tests-sanity'
     version: 0.0.0
     dependencies:
@@ -16449,7 +16449,7 @@ packages:
     dev: false
 
   file:projects/text-editor.tgz_1e646fd62a3adc9d0b41f256dafe3d38:
-    resolution: {integrity: sha512-Ew+zl+8+DkH8o9I7LGwGszLUKm2tGEjIQfZIHzLsntGfoL6+DaJV0PWCtQTb1aTN6A27a1fznH/J7weRPcy3LA==, tarball: file:projects/text-editor.tgz}
+    resolution: {integrity: sha512-IZK2BWHk9h88azqcjqIKVtHFamt4L8zO+O0PpfnMwVreRd+O+w3zvSzbk5Tn1xbx9V60ihssIPN4gRNjHkB5qg==, tarball: file:projects/text-editor.tgz}
     id: file:projects/text-editor.tgz
     name: '@rush-temp/text-editor'
     version: 0.0.0
@@ -16558,7 +16558,7 @@ packages:
     dev: false
 
   file:projects/tool.tgz:
-    resolution: {integrity: sha512-MQ5jBWycEOwV706XbUveEM/TMbMx3qelgWYLzSDUU5gVO4+Pn39n3Z4ncrqC3r2EhNfqM8NMDHCDUn6COCxlOA==, tarball: file:projects/tool.tgz}
+    resolution: {integrity: sha512-cAk8n/kuMd8FG8s9LN6Z/hVVSN9XwrYGJ1pipm0QV/27IfF0urBNmFg6hvd4msM7QtUs9t/cjBlhTE4W03/MpQ==, tarball: file:projects/tool.tgz}
     name: '@rush-temp/tool'
     version: 0.0.0
     dependencies:
@@ -16604,7 +16604,7 @@ packages:
     dev: false
 
   file:projects/tracker-assets.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-rhY7QpRB72ML8sUsmYjHtMQxIctdhqvsFfSUDnnSCgrsAbUquRq8fIZ/yPAMeF+VJzkRlnTuiDnzyPBld/h9qA==, tarball: file:projects/tracker-assets.tgz}
+    resolution: {integrity: sha512-eUbRx4pPyRoH4+i+STj8j5bZM1BHBWFj1LwgNDJHnD/lzJ2jWllrdVBBQx1D/6Bmz6j9sDhpolH8o2nHtj6I7w==, tarball: file:projects/tracker-assets.tgz}
     id: file:projects/tracker-assets.tgz
     name: '@rush-temp/tracker-assets'
     version: 0.0.0
@@ -16626,7 +16626,7 @@ packages:
     dev: false
 
   file:projects/tracker-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-KC4Xz6FyLz8oQpfhkY1LNPVCs0oVVl2sZIzhCvmm/4votfDbNyY8KR/QM3Li3ijOCNMRhZjp1l2/tjPsNfMjAg==, tarball: file:projects/tracker-resources.tgz}
+    resolution: {integrity: sha512-rELBasisCPcHNHsARqdQm20XDSxzZFtOtySJKcJrEwL06hvAba3Q3mz4Q8ELviDEjMt9y2lABExaGlJv95aYoQ==, tarball: file:projects/tracker-resources.tgz}
     id: file:projects/tracker-resources.tgz
     name: '@rush-temp/tracker-resources'
     version: 0.0.0
@@ -16661,7 +16661,7 @@ packages:
     dev: false
 
   file:projects/tracker.tgz:
-    resolution: {integrity: sha512-5R8QFw+E3PT66Ys7FURt8nVt/0afCLRO15u5Grz601+WNIoWuyfxNr96Z9OYrv4Sm9cPGcGpqoMM5YHJXgfPyw==, tarball: file:projects/tracker.tgz}
+    resolution: {integrity: sha512-pr+BIcmj6lSJVFj6f0IYmWBM4llevfYFkQPcdLrZV4nnDXjeinzRGuy/mOKyaW4n6eKO17KEziTvTXC6fG4vSQ==, tarball: file:projects/tracker.tgz}
     name: '@rush-temp/tracker'
     version: 0.0.0
     dependencies:
@@ -16682,7 +16682,7 @@ packages:
     dev: false
 
   file:projects/translate.tgz:
-    resolution: {integrity: sha512-BqgaxE5dcu3hbvS5r2XbnW7Vg/q+bfA2HKETxczTRGgXqSRbPEfwo3VJv+3QrQgc6uVsTJIr06sGWOIgZkImlg==, tarball: file:projects/translate.tgz}
+    resolution: {integrity: sha512-qidquJavXB6NSHXWds7zMhNm87Fts+1LDn/JCNXwB7yS97o5DeKVvjA7HK+i/dcTBhl0sv8jVs5Q3Px1QwR3HA==, tarball: file:projects/translate.tgz}
     name: '@rush-temp/translate'
     version: 0.0.0
     dependencies:
@@ -16705,7 +16705,7 @@ packages:
     dev: false
 
   file:projects/ui.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-qfPes18d+RIGDA8baiQSxDHIhvo2EKdUG3gI7e6sW906QhJZj0nKjDmssnDvfPoyG9oI/7pV/41Yr/5tUj14dw==, tarball: file:projects/ui.tgz}
+    resolution: {integrity: sha512-hn+I2VojXSb6t3PYHND/JyhwX8tZ8Jr7D+rzs1XjmVxhNMHnO+HA8QHzXyqZBjggTsBc8kUqWlnm44W5tt3m8Q==, tarball: file:projects/ui.tgz}
     id: file:projects/ui.tgz
     name: '@rush-temp/ui'
     version: 0.0.0
@@ -16720,6 +16720,7 @@ packages:
       eslint-plugin-promise: 6.1.1_eslint@8.27.0
       eslint-plugin-svelte3: 4.0.0_eslint@8.27.0+svelte@3.55.1
       fast-equals: 2.0.4
+      just-clone: 6.2.0
       prettier: 2.7.1
       prettier-plugin-svelte: 2.8.0_prettier@2.7.1+svelte@3.55.1
       sass: 1.56.1
@@ -16741,7 +16742,7 @@ packages:
     dev: false
 
   file:projects/view-assets.tgz_typescript@4.8.4:
-    resolution: {integrity: sha512-0JKzPlsCBj2Ovleb76j5tbBDhoXuQtolyeRRrC678gzroWCQhtIT11iRbizGNy8V4y96EGtQcfXC76HNjyfDrQ==, tarball: file:projects/view-assets.tgz}
+    resolution: {integrity: sha512-KO7kO+yNf9mEyVKAhIUEQqM+ZsnxXbMD8HFV28kOCBQn/2zRgvUcnflJJZDDkN33PghexrM1pzWh6nbPpTbHHQ==, tarball: file:projects/view-assets.tgz}
     id: file:projects/view-assets.tgz
     name: '@rush-temp/view-assets'
     version: 0.0.0
@@ -16763,7 +16764,7 @@ packages:
     dev: false
 
   file:projects/view-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-ox0rPhccej3/baqFIZvG2W8SamVu2UvzGb8CiV0vjaBQeCX6j+85E+YNIJlTrrJEw+WideVgQkvtkjw31iz/iw==, tarball: file:projects/view-resources.tgz}
+    resolution: {integrity: sha512-rJdCZpQBThfXP2F53/5zR472rgp4kHHv/n1rcj43kEmbQAfUSXsCUOoD1T026v7LKlJXrhZ7YkdKKv5oljmuyQ==, tarball: file:projects/view-resources.tgz}
     id: file:projects/view-resources.tgz
     name: '@rush-temp/view-resources'
     version: 0.0.0
@@ -16798,7 +16799,7 @@ packages:
     dev: false
 
   file:projects/view.tgz:
-    resolution: {integrity: sha512-+HX0ioVC+xUXPFBKgjWRPgYOnRCTr+kvDU+4ywbeNqvrFNzJd19/292qXX25uIMI1VJrrUM9v1XNrxmvKHUgig==, tarball: file:projects/view.tgz}
+    resolution: {integrity: sha512-F7uEvPzDWMp5Stta1VRgQFmaKA8LD0b/FWWtGUzbOmFOh4Kj5LArsrAJT5X5V9hKYa7fEtGq5fy8C8M94vzhWw==, tarball: file:projects/view.tgz}
     name: '@rush-temp/view'
     version: 0.0.0
     dependencies:
@@ -16818,7 +16819,7 @@ packages:
     dev: false
 
   file:projects/workbench-assets.tgz:
-    resolution: {integrity: sha512-9dT1ddRbAsgChqpd0bE5he4dxJAxPkba3H7GoBiIhnSeC1Q8pbwwfxDuopt2mXIwAqeL64dGE8d/ITU6g94hdQ==, tarball: file:projects/workbench-assets.tgz}
+    resolution: {integrity: sha512-IWhUl4trvga+n07Faa6OL/zQyrmuhQ/mLiQhGfc95cMDR5iRsro7MTMPgooShmMOef5y8Na8J9oZAQ3lIq6kAg==, tarball: file:projects/workbench-assets.tgz}
     name: '@rush-temp/workbench-assets'
     version: 0.0.0
     dependencies:
@@ -16839,7 +16840,7 @@ packages:
     dev: false
 
   file:projects/workbench-resources.tgz_a1d864769aaf53d09b76fe134ab55e60:
-    resolution: {integrity: sha512-WjNi4uASVWetnivI6ZZct6QW0Mf4Li78jpqEXfgP8LQ7QNs46GvH+MnSPH7yaO+rDFlAlgSU0ns2cymt0D1VVw==, tarball: file:projects/workbench-resources.tgz}
+    resolution: {integrity: sha512-DGEbM8c5RhvfKsA9ZF/+YDHyw6XGA4c8iq7OAPals6f77UZWaKRKvp0vhmBCAKHin2AOSO7Va+9PvHIp4i+xMQ==, tarball: file:projects/workbench-resources.tgz}
     id: file:projects/workbench-resources.tgz
     name: '@rush-temp/workbench-resources'
     version: 0.0.0
@@ -16874,7 +16875,7 @@ packages:
     dev: false
 
   file:projects/workbench.tgz:
-    resolution: {integrity: sha512-qaezPd0lNeqATE7Ti7VF1qm7VPYYSvrQ9ZGMuMtBV6DxmdSZCLkKfh53VDanVF0NV7P/P9LFfs5IJrNTQhKQPw==, tarball: file:projects/workbench.tgz}
+    resolution: {integrity: sha512-6PNvkXHf7MQM34l7IusYobwx96DGKrnY/TCN+iRAUEoF5ndksqhFBiFxTDEEgHsy1TTH5c9OEzNSovdtBOW4ZQ==, tarball: file:projects/workbench.tgz}
     name: '@rush-temp/workbench'
     version: 0.0.0
     dependencies:
diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts
index 116a69cb8a..0ce7abe63b 100644
--- a/models/tracker/src/index.ts
+++ b/models/tracker/src/index.ts
@@ -529,7 +529,7 @@ export function createModel (builder: Builder): void {
         {
           key: '',
           presenter: tracker.component.IssuePresenter,
-          props: { type: 'issue', listProps: { fixed: 'left' } }
+          props: { type: 'issue', listProps: { key: 'issue', fixed: 'left' } }
         },
         {
           key: '',
@@ -544,7 +544,11 @@ export function createModel (builder: Builder): void {
           presenter: tags.component.LabelsPresenter,
           props: { kind: 'list', full: false, lookupField: 'labels', listProps: { optional: true, compression: true } }
         },
-        { key: '', presenter: tracker.component.DueDatePresenter, props: { kind: 'list' } },
+        {
+          key: '',
+          presenter: tracker.component.DueDatePresenter,
+          props: { kind: 'list', listProps: { optional: true, compression: true } }
+        },
         {
           key: '',
           presenter: tracker.component.ComponentEditor,
@@ -575,15 +579,17 @@ export function createModel (builder: Builder): void {
             }
           }
         },
+        { key: '', presenter: view.component.DividerPresenter, props: { type: 'divider' } },
         {
           key: '',
           presenter: tracker.component.EstimationEditor,
-          props: { kind: 'list', size: 'small', listProps: { optional: true } }
+          props: { kind: 'list', size: 'small', listProps: { key: 'estimation', fixed: 'left' } }
         },
+        { key: '', presenter: view.component.DividerPresenter, props: { type: 'divider' } },
         {
           key: 'modifiedOn',
           presenter: tracker.component.ModificationDatePresenter,
-          props: { listProps: { fixed: 'right', optional: true } }
+          props: { listProps: { key: 'modified', fixed: 'left' } }
         },
         {
           key: '$lookup.assignee',
diff --git a/packages/kanban/src/components/Kanban.svelte b/packages/kanban/src/components/Kanban.svelte
index 8e04fb415a..7261fea82e 100644
--- a/packages/kanban/src/components/Kanban.svelte
+++ b/packages/kanban/src/components/Kanban.svelte
@@ -210,7 +210,7 @@
   }
 
   export function select (offset: 1 | -1 | 0, of?: Doc, dir?: 'vertical' | 'horizontal'): void {
-    let pos = (of !== undefined ? objects.findIndex((it) => it._id === of._id) : selection) ?? -1
+    let pos = (of != null ? objects.findIndex((it) => it._id === of._id) : selection) ?? -1
     if (pos === -1) {
       for (const st of categories) {
         const stateObjs = getGroupByValues(groupByDocs, st) ?? []
@@ -237,7 +237,7 @@
     if (objState === -1) {
       return
     }
-    const stateObjs = getGroupByValues(groupByDocs, categories.indexOf(objState)) ?? []
+    const stateObjs = getGroupByValues(groupByDocs, categories[objState]) ?? []
     const statePos = stateObjs.findIndex((it) => it._id === obj._id)
     if (statePos === undefined) {
       return
@@ -302,7 +302,7 @@
   }
 </script>
 
-<div class="kanban-container top-divider">
+<div class="kanban-container">
   <ScrollBox>
     <div class="kanban-content">
       {#each categories as state, si (typeof state === 'object' ? state.name : state)}
@@ -360,7 +360,6 @@
     position: relative;
     width: 100%;
     height: 100%;
-    background: var(--board-bg-color);
   }
   .kanban-content {
     display: flex;
diff --git a/packages/kanban/src/components/KanbanCardEmpty.svelte b/packages/kanban/src/components/KanbanCardEmpty.svelte
index 2d251133fb..ffe43e7e96 100644
--- a/packages/kanban/src/components/KanbanCardEmpty.svelte
+++ b/packages/kanban/src/components/KanbanCardEmpty.svelte
@@ -25,13 +25,13 @@
     align-items: center;
     padding: 0.75rem 1.5rem;
     color: var(--dark-color);
-    background-color: var(--board-card-bg-color);
-    border: 1px dotted var(--divider-color);
+    background-color: var(--theme-kanban-card-bg-color);
+    border: 1px dotted var(--theme-kanban-card-border);
     border-radius: 0.75rem;
     cursor: pointer;
 
     &:hover {
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
   }
 </style>
diff --git a/packages/kanban/src/components/KanbanRow.svelte b/packages/kanban/src/components/KanbanRow.svelte
index c01b59e8a6..22dabf9c65 100644
--- a/packages/kanban/src/components/KanbanRow.svelte
+++ b/packages/kanban/src/components/KanbanRow.svelte
@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { CategoryType, Doc, Ref } from '@hcengineering/core'
-  import ui, { Button, IconMoreH } from '@hcengineering/ui'
+  import ui, { Button, IconMoreH, mouseAttractor } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import { slide } from 'svelte/transition'
   import { CardDragEvent, Item } from '../types'
@@ -69,7 +69,7 @@
       class="card-container"
       class:selection={selection !== undefined ? objects[selection]?._id === object._id : false}
       class:checked={checkedSet.has(object._id)}
-      on:mouseover={() => dispatch('obj-focus', object)}
+      on:mouseover={mouseAttractor(() => dispatch('obj-focus', object))}
       on:focus={() => {}}
       on:contextmenu={(evt) => showMenu(evt, object)}
       draggable={true}
@@ -106,13 +106,14 @@
 
 <style lang="scss">
   .card-container {
-    background-color: var(--board-card-bg-color);
+    background-color: var(--theme-kanban-card-bg-color);
+    border: 1px solid var(--theme-kanban-card-border);
     border-radius: 0.25rem;
     // transition: box-shadow .15s ease-in-out;
 
-    &:hover {
-      background-color: var(--board-card-bg-hover);
-    }
+    // &:hover {
+    //   background-color: var(--board-card-bg-hover);
+    // }
     &.checked {
       background-color: var(--highlight-select);
       box-shadow: inset 0 0 1px 1px var(--highlight-select-border);
@@ -123,7 +124,7 @@
     }
     &.selection,
     &.checked.selection {
-      box-shadow: inset 0 0 1px 1px var(--primary-bg-color);
+      box-shadow: inset 0 0 1px 1px var(--primary-button-enabled);
       animation: anim-border 1s ease-in-out;
 
       &:hover {
diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte
index 69993bae6a..16fb676b66 100644
--- a/packages/panel/src/components/Panel.svelte
+++ b/packages/panel/src/components/Panel.svelte
@@ -143,7 +143,10 @@
     <div class="popupPanel-body__mobile-content clear-mins" class:max={useMaxWidth}>
       <slot />
       {#if !withoutActivity}
-        <Component is={activity.component.Activity} props={{ object, showCommenInput: !withoutInput }} />
+        <Component
+          is={activity.component.Activity}
+          props={{ object, showCommenInput: !withoutInput, shouldScroll: embedded }}
+        />
       {/if}
     </div>
   {:else}
@@ -151,7 +154,10 @@
       <div class="popupPanel-body__main-content py-8 clear-mins" class:max={useMaxWidth}>
         <slot />
         {#if !withoutActivity}
-          <Component is={activity.component.Activity} props={{ object, showCommenInput: !withoutInput }} />
+          <Component
+            is={activity.component.Activity}
+            props={{ object, showCommenInput: !withoutInput, shouldScroll: embedded }}
+          />
         {/if}
       </div>
     </Scroller>
diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte
index c965985910..bc406f2c0a 100644
--- a/packages/presentation/src/components/Card.svelte
+++ b/packages/presentation/src/components/Card.svelte
@@ -19,6 +19,7 @@
   import { createEventDispatcher } from 'svelte'
   import presentation from '..'
   import { deviceOptionsStore as deviceInfo, resizeObserver } from '@hcengineering/ui'
+  import IconForward from './icons/Forward.svelte'
 
   export let label: IntlString
   export let labelProps: any | undefined = undefined
@@ -47,7 +48,7 @@
     <div class="antiCard-header__title-wrap">
       {#if $$slots.header}
         <slot name="header" />
-        <span class="antiCard-header__divider">›</span>
+        <span class="antiCard-header__divider"><IconForward size={'small'} /></span>
       {/if}
       <span class="antiCard-header__title">
         {#if $$slots.title}
@@ -83,6 +84,7 @@
       <slot name="pool" />
     </div>
   {/if}
+  <div class="antiCard-pool__separator" />
   <div class="antiCard-footer reverse">
     <div class="buttons-group text-sm flex-no-shrink">
       {#if $$slots.buttons}
@@ -97,6 +99,7 @@
         disabled={!canSave}
         label={okLabel}
         kind={'primary'}
+        size={'large'}
         on:click={() => {
           if (okProcessing) {
             return
diff --git a/packages/presentation/src/components/InlineAttributeBarEditor.svelte b/packages/presentation/src/components/InlineAttributeBarEditor.svelte
index b5d5b88611..3bb3216301 100644
--- a/packages/presentation/src/components/InlineAttributeBarEditor.svelte
+++ b/packages/presentation/src/components/InlineAttributeBarEditor.svelte
@@ -61,7 +61,7 @@
           readonly={isReadonly}
           label={attribute?.label}
           placeholder={attribute?.label}
-          kind={'link'}
+          kind={'secondary'}
           size={'large'}
           width={'100%'}
           justify={'left'}
diff --git a/packages/presentation/src/components/MessageBox.svelte b/packages/presentation/src/components/MessageBox.svelte
index 6e8a88f745..753fed0024 100644
--- a/packages/presentation/src/components/MessageBox.svelte
+++ b/packages/presentation/src/components/MessageBox.svelte
@@ -36,7 +36,7 @@
     <Button
       focus
       label={presentation.string.Ok}
-      size={'small'}
+      size={'large'}
       kind={'primary'}
       loading={processing}
       on:click={() => {
@@ -55,7 +55,7 @@
     {#if canSubmit}
       <Button
         label={presentation.string.Cancel}
-        size={'small'}
+        size={'large'}
         on:click={() => {
           dispatch('close', false)
         }}
@@ -71,14 +71,14 @@
     padding: 2rem 1.75rem 1.75rem;
     width: 30rem;
     max-width: 40rem;
-    background: var(--popup-bg-color);
+    background: var(--theme-bg-color);
     border-radius: 1.25rem;
     user-select: none;
     box-shadow: var(--popup-shadow);
 
     .message {
       margin-bottom: 1.75rem;
-      color: var(--accent-color);
+      color: var(--theme-content-color);
     }
     .footer {
       flex-shrink: 0;
diff --git a/packages/presentation/src/components/NavLink.svelte b/packages/presentation/src/components/NavLink.svelte
index e496160c4c..11f5d09ff5 100644
--- a/packages/presentation/src/components/NavLink.svelte
+++ b/packages/presentation/src/components/NavLink.svelte
@@ -20,6 +20,7 @@
   export let onClick: ((event: MouseEvent) => void) | undefined = undefined
   export let noUnderline = false
   export let inline = false
+  export let colorInherit: boolean = false
   export let shrink: number = 0
 
   function clickHandler (e: MouseEvent) {
@@ -53,13 +54,14 @@
     class:cursor-pointer={!disableClick}
     class:noUnderline
     class:inline
+    class:colorInherit
     style:flex-shrink={shrink}
     on:click={clickHandler}
   >
     <slot />
   </span>
 {:else}
-  <a {href} class:noUnderline class:inline style:flex-shrink={shrink} on:click={clickHandler}>
+  <a {href} class:noUnderline class:inline class:colorInherit style:flex-shrink={shrink} on:click={clickHandler}>
     <slot />
   </a>
 {/if}
@@ -70,32 +72,41 @@
     display: flex;
     align-items: center;
     min-width: 0;
-    color: var(--accent-color);
     // overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     cursor: pointer;
     font-weight: inherit;
 
+    &:not(.colorInherit) {
+      color: var(--theme-content-color);
+    }
+    &.colorInherit {
+      color: inherit;
+    }
     &.inline {
       display: inline-flex;
       align-items: center;
     }
 
     &.noUnderline {
-      color: var(--caption-color);
       font-weight: 500;
+      &:not(.colorInherit) {
+        color: var(--theme-caption-color);
+      }
     }
 
     &:not(.noUnderline) {
       &:hover {
-        color: var(--caption-color);
         text-decoration: underline;
+        &:not(.colorInherit) {
+          color: var(--theme-caption-color);
+        }
       }
     }
 
     &:active {
-      color: var(--accent-color);
+      color: var(--theme-content-color);
     }
   }
 </style>
diff --git a/packages/presentation/src/components/PDFViewer.svelte b/packages/presentation/src/components/PDFViewer.svelte
index 89b10648fd..8924a0462a 100644
--- a/packages/presentation/src/components/PDFViewer.svelte
+++ b/packages/presentation/src/components/PDFViewer.svelte
@@ -82,7 +82,7 @@
     <iframe
       class="pdfviewer-content"
       style:margin={$deviceInfo.minWidth ? '.5rem' : '1.5rem'}
-      src={getFileUrl(file) + '#view=FitH'}
+      src={getFileUrl(file) + '#view=FitH&navpanes=0'}
       title=""
     />
   {/if}
diff --git a/packages/presentation/src/components/icons/Forward.svelte b/packages/presentation/src/components/icons/Forward.svelte
new file mode 100644
index 0000000000..c027007dd1
--- /dev/null
+++ b/packages/presentation/src/components/icons/Forward.svelte
@@ -0,0 +1,24 @@
+<!--
+// Copyright © 2023 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">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M11.4,7.7L5.7,2.1C5.5,1.9,5.2,1.9,5,2.1S4.8,2.6,5,2.8L10.3,8L5,13.3c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1l5.6-5.6c0.1-0.1,0.1-0.2,0.1-0.4S11.4,7.8,11.4,7.7z"
+  />
+</svg>
diff --git a/packages/text-editor/src/components/ReferenceInput.svelte b/packages/text-editor/src/components/ReferenceInput.svelte
index 650841ab72..402d1077ec 100644
--- a/packages/text-editor/src/components/ReferenceInput.svelte
+++ b/packages/text-editor/src/components/ReferenceInput.svelte
@@ -361,7 +361,7 @@
     align-items: center;
     width: 1rem;
     height: 1rem;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
     opacity: 0.6;
     cursor: pointer;
 
@@ -383,8 +383,8 @@
 
     .formatPanelRef {
       padding: 0.5rem;
-      background-color: var(--body-color);
-      border: 1px solid var(--divider-color);
+      background-color: var(--theme-comp-header-color);
+      border: 1px solid var(--theme-divider-color);
       border-radius: 0.5rem 0.5rem 0 0;
       border-bottom: 0;
 
@@ -402,8 +402,8 @@
       align-items: flex-end;
       min-height: 2.75rem;
       padding: 0.75rem 1rem;
-      background-color: var(--body-accent);
-      border: 1px solid var(--divider-color);
+      background-color: var(--theme-refinput-color);
+      border: 1px solid var(--theme-divider-color);
       border-radius: 0.5rem;
 
       &.withoutTopBorder {
@@ -417,7 +417,7 @@
         align-items: center;
         width: calc(100% - 1.75rem);
         height: 100%;
-        color: var(--content-color);
+        color: var(--theme-content-color);
         background-color: transparent;
         border: none;
         outline: none;
@@ -468,19 +468,18 @@
         .icon {
           width: 1.25rem;
           height: 1.25rem;
-          color: var(--dark-color);
+          color: var(--theme-dark-color);
           cursor: pointer;
 
           &:hover {
-            color: var(--caption-color);
+            color: var(--theme-caption-color);
           }
         }
         &:focus {
-          border: 1px solid var(--primary-button-focused-border);
-          box-shadow: 0 0 0 3px var(--primary-button-outline);
+          box-shadow: 0 0 0 2px var(--primary-button-focused-border);
 
           & > .icon {
-            color: var(--caption-color);
+            color: var(--theme-caption-color);
           }
         }
 
diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index eb512bc0ac..ae5674d9ff 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -15,16 +15,17 @@
 
 /* Common Colors */
 * {
-  --primary-button-color: #fff;
-  --primary-button-enabled: #4474F6;
-  --primary-button-hovered: #2A5FF6;
-  --primary-button-pressed: #194CD7;
-  --primary-button-focused: #194CD7;
-  --primary-button-disabled: #5771B9;
-  --primary-button-focused-border: #7393EB;
-  --primary-button-outline: rgba(87, 132, 255, .3);
-  --primary-button-border: rgba(255, 255, 255, .09);
+  // --primary-button-color: #fff;
+  // --primary-button-enabled: #4474F6;
+  // --primary-button-hovered: #2A5FF6;
+  // --primary-button-pressed: #194CD7;
+  // --primary-button-focused: #194CD7;
+  // --primary-button-disabled: #5771B9;
+  // --primary-button-focused-border: #7393EB;
+  // --primary-button-outline: rgba(87, 132, 255, .3);
+  // --primary-button-border: rgba(255, 255, 255, .09);
 
+  --white-color: #fff;
   --duotone-color: rgba(126, 134, 158, .25);
 
   --system-error-color: #EE7A7A;
@@ -52,6 +53,70 @@
 
 /* Dark Theme */
 .theme-dark {
+  --primary-button-color: #fff;
+  --primary-button-enabled: #205DC2;
+  --primary-button-hovered: #1A53AF;
+  --primary-button-pressed: #144CA8;
+  --primary-button-focused: #144CA8;
+  --primary-button-disabled: #6E9FED;
+  --primary-button-focused-border: #6E9FED;
+  --primary-button-border: rgba(255, 255, 255, .09);
+  --primary-button-outline: rgba(87, 132, 255, .3); // OLD
+
+  --theme-button-enabled: rgba(255, 255, 255, .02);
+  --theme-button-hovered: rgba(255, 255, 255, .04);
+  --theme-button-pressed: rgba(255, 255, 255, .08);
+  --theme-button-focused: rgba(255, 255, 255, .04);
+  --theme-button-disabled: rgba(255, 255, 255, .02);
+  --theme-button-border: rgba(255, 255, 255, .06);
+
+  --theme-refinput-color: rgba(255, 255, 255, .03);
+
+  --theme-bg-color: #1A1A28;
+  --theme-back-color: #0f0f18;
+  --theme-overlay-color: #0000007f;
+  --theme-statusbar-color: #2C2C35;
+  --theme-navpanel-color: #14141F;
+  --theme-navpanel-hovered: rgba(255, 255, 255, .04);
+  --theme-navpanel-selected: rgba(255, 255, 255, .07);
+  --theme-navpanel-divider: rgba(255, 255, 255, .1);
+  --theme-navpanel-border: transparent;
+  --theme-navpanel-icons-color: #7F7F7F;
+  --theme-comp-header-color: #1F1F2C;
+  --theme-divider-color: rgba(255, 255, 255, .06);
+
+  --theme-trans-color: rgba(255, 255, 255, .3);
+  --theme-darker-color: rgba(255, 255, 255, .4);
+  --theme-halfcontent-color: rgba(255, 255, 255, .5);
+  --theme-dark-color: rgba(255, 255, 255, .6);
+  --theme-content-color: rgba(255, 255, 255, .8);
+  --theme-caption-color: #FFF;
+
+  --theme-list-border-color: rgba(255, 255, 255, .05);
+  --theme-list-header-color: #C88C65;
+  --theme-list-subheader-color: #262634;
+  --theme-list-row-color: #21212F;
+  --theme-list-button-color: #262633;
+  --theme-list-divider-color: rgba(255, 255, 255, .09);
+  --theme-list-subheader-divider: transparent;
+
+  --theme-table-border-color: rgba(255, 255, 255, .1);
+  --theme-table-header-color: #1C1C29;
+  --theme-table-row-color: #21212F;
+
+  --theme-kanban-card-bg-color: rgba(222, 222, 240, .04);
+  --theme-kanban-card-border: transparent;
+  --theme-kanban-card-footer: #D9D9D9;
+  
+  --theme-tablist-color: rgba(0, 0, 0, .02);
+  --theme-checkbox-color: #000;
+  --theme-checkbox-bg-color: #FFF;
+  --theme-checkbox-border: rgba(0, 0, 0, .12);
+  --theme-checkbox-disabled: #999;
+  --theme-progress-color: #FFFFFF;
+  --theme-popup-color: #292938;
+  --theme-popup-divider: rgba(255, 255, 255, .1);
+
   --body-color: #1f2023;
   --body-accent: #222326;
   --board-bg-color: #1c1d1f;
@@ -61,7 +126,7 @@
   --accent-bg-color: #27282b;
   --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;
 
-  --highlight-hover: #28292b;
+  --highlight-hover: #282834;
   --highlight-select: #252b3a;
   --highlight-select-border: #44506b;
   --highlight-select-hover: #2c3346;
@@ -106,7 +171,7 @@
   --button-bg-hover: #37383b;
   --button-border-color: #3c3f44;
   --button-border-hover: #45484e;
-  --button-shadow: rgb(0 0 0 / 25%) 0px 1px 1px;
+  --button-shadow: rgb(0 0 0 / 15%) 0px 1px 1px 1px;
   --button-disabled-color: #313236;
   --noborder-bg-color: #313236;
   --noborder-bg-hover: #37383b;
@@ -135,6 +200,70 @@
 
 /* Light Theme */
 .theme-light {
+  --primary-button-color: #fff;
+  --primary-button-enabled: #2B5190;
+  --primary-button-hovered: #1A53AF; // DARK
+  --primary-button-pressed: #144CA8; // DARK
+  --primary-button-focused: #144CA8; // DARK
+  --primary-button-disabled: #6E9FED; // DARK
+  --primary-button-focused-border: #6E9FED; // DARK
+  --primary-button-border: rgba(255, 255, 255, .09);
+  --primary-button-outline: rgba(87, 132, 255, .3); // OLD
+  
+  --theme-button-enabled: rgba(0, 0, 0, .02);
+  --theme-button-hovered: rgba(0, 0, 0, .04);
+  --theme-button-pressed: rgba(0, 0, 0, .08);
+  --theme-button-focused: rgba(0, 0, 0, .04);
+  --theme-button-disabled: rgba(0, 0, 0, .02);
+  --theme-button-border: rgba(0, 0, 0, .06);
+
+  --theme-refinput-color: rgba(0, 0, 0, .03);
+
+  --theme-bg-color: #F1F1F4;
+  --theme-back-color: #D9D9DD;
+  --theme-overlay-color: #0000007f;
+  --theme-statusbar-color: #bfbfc6;
+  --theme-navpanel-color: #E8E8ED;
+  --theme-navpanel-hovered: rgba(218, 218, 231, .5);
+  --theme-navpanel-selected: #DADAE7;
+  --theme-navpanel-divider: rgba(0, 0, 0, .06);
+  --theme-navpanel-border: rgba(0, 0, 0, .06);
+  --theme-navpanel-icons-color: #7F7F7F;
+  --theme-comp-header-color: #FBFBFC;
+  --theme-divider-color: rgba(0, 0, 0, .06);
+
+  --theme-trans-color: rgba(0, 0, 0, .3);
+  --theme-darker-color: rgba(0, 0, 0, .4);
+  --theme-halfcontent-color: rgba(0, 0, 0, .5);
+  --theme-dark-color: rgba(0, 0, 0, .6);
+  --theme-content-color: rgba(0, 0, 0, .8);
+  --theme-caption-color: #000;
+
+  --theme-list-border-color: rgba(0, 0, 0, .09);
+  --theme-list-header-color: #ECD4CA;
+  --theme-list-subheader-color: #EEEEF0;
+  --theme-list-row-color: #F7F7F8;
+  --theme-list-button-color: #F2F2F4;
+  --theme-list-divider-color: rgba(0, 0, 0, .07);
+  --theme-list-subheader-divider: rgba(0, 0, 0, .06);
+
+  --theme-table-border-color: rgba(0, 0, 0, .1);
+  --theme-table-header-color: #EFEFF2;
+  --theme-table-row-color: #F4F4F6;
+
+  --theme-kanban-card-bg-color: rgba(0, 0, 0, .03);
+  --theme-kanban-card-border: rgba(0, 0, 0, .04);
+  --theme-kanban-card-footer: rgba(0, 0, 0, .04);
+  
+  --theme-tablist-color: rgba(0, 0, 0, .02);
+  --theme-checkbox-color: #000;
+  --theme-checkbox-bg-color: #FFF;
+  --theme-checkbox-border: rgba(0, 0, 0, .12);
+  --theme-checkbox-disabled: #999;
+  --theme-progress-color: rgba(0, 0, 0, .5);
+  --theme-popup-color: #F1F1F4;
+  --theme-popup-divider: rgba(0, 0, 0, .1);
+
   --body-color: #fff;
   --body-accent: #fafafa; // HZ
   --board-bg-color: #f4f5f8;
@@ -144,7 +273,7 @@
   --accent-bg-color: #eff0f2;  // HZ
   --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;  // Dark
 
-  --highlight-hover: #f9f9f9;
+  --highlight-hover: #E8E8E9;
   --highlight-select: #f0f4ff;
   --highlight-select-border: #e6eaff;
   --highlight-select-hover: #e4ebff;
@@ -189,7 +318,7 @@
   --button-bg-hover: #f4f5f8;
   --button-border-color: #dfe1e4;
   --button-border-hover: #c9cbcd;
-  --button-shadow: rgb(0 0 0 / 7%) 0px 1px 1px;
+  --button-shadow: rgb(0 0 0 / 20%) 0px 1px 2px 1px;
   --button-disabled-color: #eff1f4;
   --noborder-bg-color: #eff1f4;
   --noborder-bg-hover: #f4f5f8;
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index de26879501..5872cf1de3 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -218,6 +218,7 @@ input.search {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
+  min-width: 0;
   min-height: 0;
 }
 .flex-col-reverse {
@@ -363,10 +364,11 @@ input.search {
   }
 }
 .buttons-divider {
-  min-width: 1px;
+  flex-shrink: 0;
   width: 1px;
   height: 1.5rem;
-  background-color: var(--divider-color);
+  max-height: 1.5rem;
+  background-color: var(--theme-list-divider-color);
 }
 
 .labels-row {
@@ -399,8 +401,8 @@ input.search {
   &.reverse > :last-child { margin-right: .375rem; }
 }
 .gap-2 {
-  & > *:not(:first-child) { margin-left: .5rem; }
-  &.reverse > :last-child { margin-right: .5rem; }
+  &:not(.reverse) > *:not(:first-child) { margin-left: .5rem; }
+  &.reverse > *:not(:last-child) { margin-right: .5rem; }
 }
 
 /* --------- */
@@ -467,6 +469,7 @@ input.search {
 .mb-8 { margin-bottom: 2rem; }
 .mb-9 { margin-bottom: 2.25rem; }
 .mb-10 { margin-bottom: 2.5rem; }
+.mx-0-5 { margin: 0 .125rem; }
 .mx-1 { margin: 0 .25rem; }
 .mx-2 { margin: 0 .5rem; }
 .mx-3 { margin: 0 .75rem; }
@@ -475,6 +478,7 @@ input.search {
 .mx-auto { margin: 0 auto; }
 .my-2 { margin: .5rem 0; }
 .my-4 { margin: 1rem 0; }
+.my-5 { margin: 1.25rem 0; }
 
 .m-0-5 { margin: .125rem; }
 .m-1 { margin: .25rem; }
@@ -484,6 +488,7 @@ input.search {
 .pl-3 { padding-left: .75rem; }
 .pl-4 { padding-left: 1rem; }
 .pl-8 { padding-left: 2rem; }
+.pl-10 { padding-left: 2.5rem; }
 .pr-1 { padding-right: .25rem; }
 .pr-2 { padding-right: .5rem; }
 .pr-3 { padding-right: .75rem; }
@@ -504,6 +509,7 @@ input.search {
 .px-2 { padding: 0 .5rem; }
 .px-3 { padding: 0 .75rem; }
 .px-4 { padding: 0 1rem; }
+.px-10 { padding: 0 2.5rem; }
 .py-1 { padding: 0.25rem 0; }
 .py-4 { padding: 1rem 0; }
 .py-8 { padding: 2rem 0; }
@@ -612,6 +618,7 @@ input.search {
 .min-w-min { min-width: min-content; }
 .min-h-0 { min-height: 0; }
 .min-h-2 { min-height: .5rem; }
+.min-h-4 { min-height: 1rem; }
 .min-h-7 { min-height: 1.75rem; }
 .min-h-30 { min-height: 7.5rem; }
 .min-h-60 { min-height: 15rem; }
@@ -623,7 +630,9 @@ input.search {
 .max-w-60 { max-width: 15rem; }
 .max-w-80 { max-width: 20rem; }
 .max-w-240 { max-width: 60rem; }
+.max-h-0 { max-height: 0; }
 .max-h-2 { max-height: .5rem; }
+.max-h-4 { max-height: 1rem; }
 .max-h-30 { max-height: 7.5rem; }
 .max-h-50 { max-height: 12.5rem; }
 .max-h-60 { max-height: 15rem; }
@@ -642,20 +651,20 @@ input.search {
   height: 1em;
 }
 .svg-x-small {
-  width: .857em;
-  height: .857em;
+  width: .75rem;
+  height: .75rem;
 }
 .svg-small {
-  width: 1.143em;
-  height: 1.143em;
+  width: 1rem;
+  height: 1rem;
 }
 .svg-medium {
-  width: 1.429em;
-  height: 1.429em;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 .svg-large {
-  width: 1.715em;
-  height: 1.715em;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 .svg-full {
   width: inherit;
@@ -767,26 +776,26 @@ a.no-line {
 }
 
 .focused-button {
-  background-color: var(--button-bg-color);
+  background-color: var(--theme-button-enabled);
   border: 1px solid transparent;
 
-  & > .icon { color: var(--accent-color); }
+  & > .icon { color: var(--theme-content-color); }
   &.selected {
-    background-color: var(--button-bg-hover);
-    border: 1px solid var(--button-border-hover);
+    background-color: var(--theme-button-pressed);
+    border: 1px solid var(--theme-button-border);
   }
   &:hover {
-    background-color: var(--button-bg-hover);
-    border: 1px solid var(--button-border-hover);
-    & > .icon { color: var(--caption-color); }
+    background-color: var(--theme-button-hovered);
+    border: 1px solid var(--theme-button-border);
+    & > .icon { color: var(--theme-caption-color); }
   }
   &:focus {
-    border: 1px solid var(--primary-button-focused-border);
-    box-shadow: 0 0 0 3px var(--primary-button-outline);
-    & > .icon { color: var(--caption-color); }
+    border: 1px solid var(--theme-button-border);
+    box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+    & > .icon { color: var(--theme-caption-color); }
   }
 
-  &.bordered { border-color: var(--button-border-color); }
+  &.bordered { border-color: var(--theme-button-border); }
 }
 
 .overflow-x-auto { overflow-x: auto; }
@@ -817,6 +826,8 @@ a.no-line {
 .background-primary-color { background-color: var(--primary-button-enabled); }
 .background-content-accent-color { background-color: var(--accent-color); }
 
+.content-trans-color { color: var(--theme-trans-color); }
+
 .dark-color,
 .content-dark-color { color: var(--dark-color); }
 .content-color { color: var(--content-color); }
diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index f234aa6c4e..408b7727af 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -15,15 +15,16 @@
 
 /* Panels */
 * {
-  --app-panel-width: 4rem;
+  --app-panel-width: 4.25rem;
 }
 .antiPanel-application {
   flex-shrink: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: var(--board-bg-color);
-
+  background-color: var(--theme-navpanel-color);
+  border-right: 1px solid var(--theme-navpanel-divider);
+  
   &.vertical {
     flex-direction: column;
     min-width: var(--app-panel-width);
@@ -43,37 +44,39 @@
   flex-direction: column;
   height: 100%;
   overflow: hidden;
-
-  &.filled { background-color: var(--body-accent); }
-  &.border-left { border-left: 1px solid var(--divider-color); }
-  &.border-right { border-right: 1px solid var(--divider-color); }
+  
+  &.filled { background-color: var(--theme-bg-color); }
+  &.border-left { border-left: 1px solid var(--theme-divider-color); }
+  &.border-right { border-right: 1px solid var(--theme-divider-color); }
 }
 .antiPanel-navigator {
   position: relative;
   min-width: 17.5rem;
   max-width: 17.5rem;
   width: 17.5rem;
+  background-color: var(--theme-navpanel-color);
+  border-right: 1px solid var(--theme-navpanel-border);
 }
 @media (max-width: 1024px) {
   .antiPanel-navigator {
     position: fixed;
-    background-color: var(--body-accent);
+    top: var(--status-bar-height);
+    height: calc(100% - var(--status-bar-height));
+    background-color: var(--theme-navpanel-color);
     filter: drop-shadow(2px 0 1px rgba(0, 0, 0, .2));
     z-index: 450;
 
     &.portrait {
-      top: var(--status-bar-height);
       left: 0;
     }
     &.landscape {
-      top: var(--status-bar-height);
-      left: var(--app-panel-width);  
+      left: var(--app-panel-width);
     }
   }
 }
 .antiPanel-component:not(.aside) {
   flex-grow: 1;
-  // background-color: var(--board-bg-color);
+  background-color: var(--theme-bg-color);
 }
 .antiPanel-component.aside {
   min-width: 30rem;
@@ -169,13 +172,13 @@
   }
 
   &:hover, &.hovered, &.selected {
-    background-color: var(--menu-bg-select);
+    // background-color: var(--theme-navpanel-hovered);
     .an-element__icon,
     .an-element__label { color: var(--caption-color); }
     .an-element__icon-arrow { opacity: 1; }
   }
-  &:hover, &.hovered { background-color: var(--highlight-hover); }
-  &.selected { background-color: var(--menu-bg-select); }
+  &:hover, &.hovered { background-color: var(--theme-navpanel-hovered); }
+  &.selected { background-color: var(--theme-navpanel-selected); }
   &:hover .an-element__tool, &.hovered .an-element__tool { visibility: visible; }
 
   &:not(.collapsed) .an-element__icon-arrow { opacity: 1; }
@@ -220,7 +223,7 @@
   margin: .5rem 0;
   height: 1px;
 
-  &.line { background-color: var(--divider-color); }
+  &.line { background-color: var(--theme-navpanel-divider); }
   &.short { margin: .25rem 1rem; }
 }
 .antiNav-space {
@@ -231,7 +234,7 @@
   flex-shrink: 0;
   width: 100%;
   height: 1px;
-  background-color: var(--divider-color);
+  background-color: var(--theme-navpanel-divider);
 }
 .antiNav-footer-grower {
   flex-shrink: 10;
@@ -297,7 +300,7 @@
   margin: .25rem 0;
   min-height: 1px;
   height: 1px;
-  background-color: var(--divider-color);
+  background-color: var(--theme-divider-color);
 
   &.dark { background-color: var(--body-accent); }
   &.noMargin { margin: 0; }
@@ -351,20 +354,7 @@
       border-radius: .5rem .5rem 0 0;
     }
     &__counter {
-      display: flex;
-      align-items: center;
-      flex-wrap: nowrap;
-      flex-shrink: 0;
-      padding: 0.25rem 0.5rem;
-      min-width: 1.325rem;
-      text-align: center;
-      font-weight: 500;
-      font-size: 1rem;
-      line-height: 1rem;
-      color: var(--accent-color);
-      background-color: var(--body-color);
-      border: 1px solid var(--divider-color);
-      border-radius: 1rem;
+      color: var(--theme-darker-color);
     }  
     &__tag {
       display: flex;
@@ -431,17 +421,17 @@
 // Emphasized
 .antiEmphasized {
   padding: .75rem;
-  background-color: var(--body-accent);
-  border: 1px solid var(--button-border-color);
-  border-radius: .5rem;
+  background-color: var(--theme-comp-header-color);
+  border: 1px solid var(--theme-popup-divider);
+  border-radius: .25rem;
   transition-property: border, background-color;
   transition-duration: .15s;
   transition-timing-function: var(--timing-main);
 
   &:hover,
   &:focus-within {
-    background-color: var(--body-color);
-    border-color: var(--button-border-hover);
+    // background-color: var(--body-color);
+    border-color: var(--theme-list-divider-color);
   }
 }
 
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index b0b91093e1..70ef4fca8f 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -20,10 +20,15 @@
   height: 100%;
 
   .ac-header {
-    padding: 0.5rem 1.5rem 0.5rem 2.5rem;
+    padding: 0.5rem 2.25rem;
+    background-color: var(--theme-comp-header-color);
     // height: 3.5rem;
     // min-height: 2.5rem;
 
+    &.caption-height {
+      min-height: 3.25rem;
+    }
+    &.search-start { padding-left: 1.75rem; }
     &.short {
       display: flex;
       align-items: center;
@@ -31,21 +36,23 @@
     }
     &.full,
     &-full {
-      display: grid;
-      grid-template-columns: auto;
-      grid-auto-flow: column;
-      grid-auto-columns: max-content;
-      gap: .75rem;
+      display: flex;
+      justify-content: space-between;
       align-items: center;
+      min-width: 0;
+
+      &:not(.small-gap, .medium-gap) > *:not(:last-child) { margin-right: 1.25rem; }
+      &.small-gap > *:not(:last-child) { margin-right: .75rem; }
+      &.medium-gap > *:not(:last-child) { margin-right: 1rem; }
     }
-    &.withSettings { padding-right: .75rem; }
+    // &.withSettings { padding-right: .75rem; }
     &.mini {
       display: flex;
       flex-direction: column;
     }
     &.mirror {
       justify-content: space-between;
-      padding: 0 1rem;
+      // padding: 0 1rem;
 
       &-tool {
         justify-content: space-between;
@@ -53,7 +60,7 @@
       }
     }
     &.divide {
-      border-bottom: 1px solid var(--divider-color);
+      border-bottom: 1px solid var(--theme-divider-color);
     }
     .secondRow {
       align-self: flex-end;
@@ -77,23 +84,30 @@
 
   .ac-header__icon {
     margin-right: 0.5rem;
-    color: var(--content-color);
+    color: var(--theme-content-color);
   }
   .ac-header__title {
+    flex-shrink: 1;
     min-width: 0;
-    font-weight: 500;
     font-size: 1rem;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
 
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     user-select: none;
   }
+  .ac-header__counter {
+    flex-shrink: 0;
+    margin-left: .25rem;
+    min-width: 0;
+    font-size: 1rem;
+    color: var(--theme-darker-color);
+  }
   .ac-header__description {
     min-width: 0;
     font-size: 0.75rem;
-    color: var(--dark-color);
+    color: var(--theme-dark-color);
 
     overflow: hidden;
     visibility: visible;
@@ -316,14 +330,14 @@
       // height: 1.5rem;
     }
     &__element {
-      fill: var(--accent-bg-color);
-      stroke: var(--divider-color);
+      fill: var(--theme-button-enabled);
+      stroke: var(--theme-button-border);
       stroke-linecap: round;
       stroke-linejoin: round;
 
-      &:hover { fill: var(--button-bg-color); }
+      &:hover { fill: var(--theme-button-hovered); }
     }
-    &__selected { fill: var(--button-bg-hover); }
+    &__selected { fill: var(--theme-button-pressed); }
 
     .asb-label__container {
       position: absolute;
@@ -338,11 +352,11 @@
       height: 100%;
       font-weight: 500;
       font-size: 0.8125rem;
-      color: var(--dark-color);
+      color: var(--theme-dark-color);
       pointer-events: none;
 
       &.selected {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
       }
     }
   }
@@ -360,18 +374,24 @@
     &:last-child { padding-right: 0; }
   }
   th {
-    height: 2.5rem;
-    font-weight: 500;
-    font-size: .75rem;
-    color: var(--dark-color);
-    box-shadow: inset 0 -1px 0 0 var(--divider-color);
+    height: 3rem;
+    font-weight: 600;
+    font-size: .625rem;
+    letter-spacing: .5px;
+    text-transform: uppercase;
+    color: var(--theme-dark-color);
+    box-shadow: inset 0 -1px 0 0 var(--theme-table-border-color);
     user-select: none;
     // z-index: 5;
 
     &.sortable { cursor: pointer; }
-    &.sorted .icon {
-      margin-left: .25rem;
-      opacity: .6;
+    &.sorted {
+      color: var(--theme-caption-color);
+
+      .icon {
+        margin-left: .25rem;
+        opacity: .6;
+      }
     }
     &:hover .antiTable-cells__checkCell { visibility: visible; }
     .checkall { visibility: visible; }
@@ -379,7 +399,7 @@
 
   &.editable {
     th, td, tr {
-      border: 1px dashed var(--divider-color);
+      border: 1px dashed var(--theme-divider-color);
     }
   }
   
@@ -424,10 +444,12 @@
   }
 
   .antiTable-body__row {
+    position: relative;
     height: 3.25rem;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
+    background-color: var(--theme-table-row-color);
+    border-bottom: 1px solid var(--theme-divider-color);
 
-    &:not(:last-child) { border-bottom: 1px solid var(--accent-bg-color); }
     &:hover .antiTable-cells__firstCell .antiTable-cells__firstCell-menuRow { visibility: visible; }
     &:hover, &.checking {
       .antiTable-cells__checkCell { visibility: visible; }
@@ -442,14 +464,14 @@
   }
 
   .antiTable-body__border {
-    border: 1px solid var(--divider-color);
+    border: 1px solid var(--theme-divider-color);
   }
 
   &.highlightRows .antiTable-body__row {
     &.selected { background-color: var(--highlight-hover); }
     &.checking {
       background-color: var(--highlight-select);
-      border-bottom-color: var(--highlight-select-border);
+      // border-bottom-color: var(--highlight-select-border);
 
       &:hover { background-color: var(--highlight-select-hover); }
     }
@@ -460,8 +482,8 @@
   position: sticky;
   z-index: 2;
   top: 0;
-  height: 2.5rem;
-  background-color: var(--body-color);
+  height: 3rem;
+  background-color: var(--theme-table-header-color);
 }
 
 .scroller-tfoot {
@@ -469,10 +491,10 @@
   z-index: 2;
   bottom: 0;
   height: 2.5rem;
-  background-color: var(--body-color);
+  background-color: var(--theme-table-header-color);
 
   tr {
-    box-shadow: inset 0 1px 0 0 var(--divider-color);
+    box-shadow: inset 0 1px 0 0 var(--theme-divider-color);
   }
 }
 
@@ -480,9 +502,22 @@
   th, td {
     &:first-child {
       position: sticky;
-      z-index: 1;
+      padding: 0;
       left: 0;
-      background-color: var(--body-color);
+      background-color: var(--theme-bg-color);
+      border-right: 1px solid transparent !important;
+      z-index: 1;
+    }
+    .fullfill {
+      display: flex;
+      align-items: center;
+      padding: .5rem;
+      width: 100%;
+      height: 100%;
+      background-color: var(--theme-bg-color);
+      border-right: 1px solid var(--theme-divider-color);
+
+      &.center { justify-content: center; }
     }
   }
 }
@@ -497,12 +532,12 @@
 // Basic component view.
 .antiComponentBox {
   padding: 0.5rem;
-  background-color: var(--board-card-bg-color);
-  border: 1px solid var(--divider-color);
+  background-color: var(--theme-list-row-color);
+  border: 1px solid var(--theme-list-divider-color);
   border-radius: .75rem;
 
   &.antiComponentBoxFocused {
-    background-color: var(--board-card-bg-hover);
+    background-color: var(--theme-button-hovered);
   }
 }
 
@@ -649,3 +684,46 @@
     &.inter { font-size: 1em; }
   }
 }
+
+/* ListView - global style */
+.list-container .category-container .categoryHeader.subLevel.closed {
+  border-bottom: 1px solid var(--theme-list-border-color);
+  border-radius: 0 0 0.25rem 0.25rem;
+}
+.list-container .category-container .categoryHeader.closed:not(.subLevel) {
+  border-radius: 0 0 .25rem .25rem;
+  
+  &::before {
+    border-bottom-color: var(--theme-list-border-color);
+    border-radius: 0.25rem;
+  }
+}
+.list-container .category-container .listGrid {
+  .fix-margin { margin-left: .875rem; }
+  .name { margin-left: .375rem; }
+
+  .optional-bar {
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-shrink: 1;
+    min-width: 0;
+    
+    .label-wrapper {
+      display: flex;
+      align-items: center;
+      flex-shrink: 10;
+      width: auto;
+      min-width: 0;
+    }
+    & > *:not(:last-child) {
+      flex-shrink: 10;
+      width: min-content;
+    }
+    & > *:last-child {
+      flex-shrink: 0;
+      width: max-content;
+    }
+    & > * { margin-left: .375rem; }
+  }
+}
diff --git a/packages/theme/styles/dialogs.scss b/packages/theme/styles/dialogs.scss
index 025db1f473..0e3ce109ba 100644
--- a/packages/theme/styles/dialogs.scss
+++ b/packages/theme/styles/dialogs.scss
@@ -20,7 +20,7 @@
   left: 0;
   width: 100%;
   height: 100vh;
-  background-color: var(--card-overlay-color);
+  background-color: var(--theme-overlay-color);
   pointer-events: all;
 }
 
@@ -29,7 +29,7 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
-  background: var(--popup-bg-color);
+  background: var(--theme-popup-color);
   border-radius: .5rem;
   box-shadow: var(--card-shadow);
 
@@ -39,18 +39,26 @@
     justify-content: space-between;
     align-items: center;
     flex-shrink: 0;
-    padding: 1rem 1rem 1.5rem;
+    padding: 1.5rem 1.5rem .5rem 1.75rem;
+    font-size: .8125rem;
 
+    &__title-wrap {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+
+      & > *:not(:last-child) { margin-right: .5rem; }
+    }
     &__title {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
       user-select: none;
       min-width: 0;
-      font-weight: 500;
-      font-size: 1rem;
-      color: var(--accent-color);
+      line-height: 150%;
+      color: var(--theme-caption-color);
     }
+    &__divider { color: var(--theme-content-color); }
     &__error {
       min-width: 0;
       flex-grow: 1;
@@ -71,8 +79,9 @@
     flex-direction: column;
     flex-grow: 1;
     flex-shrink: 1;
-    margin: 0 1rem;
+    padding: 1rem 1.75rem;
     height: fit-content;
+    min-width: 0;
     min-height: 0;
 
     & > *:not(:last-child) { margin-bottom: 1rem; }
@@ -81,36 +90,50 @@
   .antiCard-pool {
     flex-shrink: 0;
     display: flex;
-    flex-direction: column;
-    margin: 0 1rem .75rem;
-    color: var(--caption-color);
+    align-items: center;
     flex-wrap: wrap;
+    margin: .5rem 1.25rem 0 1.75rem;
+    min-width: 0;
+    font-size: .8125rem;
+    color: var(--theme-caption-color);
 
     &__separator {
-      margin: 1rem 0;
+      flex-shrink: 0;
+      margin-top: 1.25rem;
       height: 1px;
-      background-color: var(--divider-color);
+      background-color: var(--theme-popup-divider);
     }
+    & > * { margin: .5rem .5rem 0 0; }
   }
 
   .antiCard-footer {
     overflow: hidden;
     flex-shrink: 0;
-    display: grid;
-    grid-auto-flow: column;
-    direction: rtl;
-    justify-content: flex-start;
+    direction: ltr;
+    display: flex;
+    justify-content: space-between;
     align-items: center;
-    column-gap: .75rem;
-    padding: 1.5rem 1rem 1rem;
-    height: 4.5rem;
+    padding: 1rem 1.75rem;
+    height: 4.25rem;
     border-radius: 0 0 .5rem .5rem;
+
+    &.reverse { flex-direction: row-reverse; }
+    &__error {
+      flex-grow: 1;
+      display: flex;
+      margin-left: .375rem;
+      min-width: 0;
+      font-weight: 500;
+      font-size: .75rem;
+      color: var(--system-error-color);
+      &:empty { visibility: hidden; }
+    }
   }
 
   .antiCard-group {
     padding: .5rem 1rem;
 
-    &:not(:last-child) { border-bottom: 1px solid var(--popup-divider); }
+    &:not(:last-child) { border-bottom: 1px solid var(--theme-divider-color); }
     &.grid {
       display: grid;
       grid-template-columns: 5rem auto;
@@ -124,7 +147,7 @@
         font-weight: 500;
         font-size: .75rem;
         line-height: .75rem;
-        color: var(--content-color);
+        color: var(--theme-content-color);
       }    
       .value {
         display: flex;
@@ -148,26 +171,14 @@
     width: 90vw;
     max-width: 90vw;
     max-height: 90vh;
-  }
-  &.dialog,
-  &.mobile {
+
     .antiCard-header {
       padding: .75rem .75rem .375rem;
 
-      &__title-wrap {
-        display: flex;
-        align-items: center;
-        min-width: 0;
-
-        & > *:not(:first-child) { margin-left: .375rem; }
-      }
-
       &__divider, &__title {
         font-weight: 400;
         font-size: .8125rem;
       }
-      &__divider { color: var(--content-color); }
-      &__title { color: var(--accent-color); }
     }
     .antiCard-content { margin: .5rem 1.125rem 1rem; }
     .antiCard-pool {
@@ -175,29 +186,10 @@
       align-items: center;
       margin: 0 .5rem .25rem;
       font-size: .75rem;
-
-      & > * { margin: 0 .25rem .5rem; }
     }
     .antiCard-footer {
-      direction: ltr;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
       padding: .75rem;
       height: auto;
-      border-top: 1px solid var(--divider-color);
-
-      &.reverse { flex-direction: row-reverse; }
-      &__error {
-        flex-grow: 1;
-        display: flex;
-        margin-left: .375rem;
-        min-width: 0;
-        font-weight: 500;
-        font-size: .75rem;
-        color: var(--system-error-color);
-        &:empty { visibility: hidden; }
-      }
     }
   }
 }
diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss
index 1c238733fc..4227c011ed 100644
--- a/packages/theme/styles/global.scss
+++ b/packages/theme/styles/global.scss
@@ -115,7 +115,7 @@ body {
   font-weight: 400;
   font-size: var(--body-font-size);
   color: var(--content-color);
-  background-color: var(--body-color);
+  background-color: var(--theme-bg-color);
   user-select: none;
 }
 
diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss
index 336b69b9ce..596af402bd 100644
--- a/packages/theme/styles/panel.scss
+++ b/packages/theme/styles/panel.scss
@@ -68,7 +68,7 @@
 
   &:not(.embedded) {
     border-radius: .5rem;
-    box-shadow: var(--popup-panel-shadow);
+    // box-shadow: var(--popup-panel-shadow);
   }
 
   .popupPanel-title {
@@ -87,9 +87,9 @@
     &__bordered {
       min-width: 0;
       min-height: 3rem;
-      background-color: var(--board-card-bg-color);
+      background-color: var(--theme-comp-header-color);
       &:not(.embedded) {
-        border: 1px solid var(--divider-color);
+        border: 1px solid var(--theme-divider-color);
         border-bottom: none;
         border-radius: .5rem .5rem 0 0;
       }
@@ -116,8 +116,8 @@
     min-height: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--body-color);
-    border: 1px solid var(--divider-color);
+    background-color: var(--theme-bg-color);
+    border: 1px solid var(--theme-divider-color);
     &:not(.embedded) {
       border-radius: 0 0 .5rem .5rem;
     }
@@ -184,8 +184,8 @@
         min-width: 320px;
       }
 
-      &.bottom-divider { border-bottom: 1px solid var(--divider-color); }
-      &.top-divider { border-top: 1px solid var(--divider-color); }
+      &.bottom-divider { border-bottom: 1px solid var(--theme-divider-color); }
+      &.top-divider { border-top: 1px solid var(--theme-divider-color); }
       .header-row {
         display: flex;
         align-items: center;
@@ -214,7 +214,7 @@
         bottom: 1rem;
         left: 0;
         width: 0;
-        border-left: 1px solid var(--divider-color);
+        border-left: 1px solid var(--theme-divider-color);
       }
 
       &.float {
@@ -226,8 +226,8 @@
         min-width: 0;
         max-width: 320px;
         height: 100%;
-        background-color: var(--board-card-bg-color);
-        border-left: 1px solid var(--divider-color);
+        background-color: var(--theme-list-row-color);
+        border-left: 1px solid var(--theme-divider-color);
         border-bottom-right-radius: .45rem;
         box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
         transition: box-shadow 150ms ease 0s, transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss
index c94433d4ee..b2a1c8987d 100644
--- a/packages/theme/styles/popups.scss
+++ b/packages/theme/styles/popups.scss
@@ -422,7 +422,7 @@
   flex-direction: column;
   padding: .5rem;
   min-height: 22rem;
-  background: var(--popup-bg-color);
+  background: var(--theme-popup-color);
   border-radius: .5rem;
   box-shadow: var(--popup-shadow);
   
diff --git a/packages/ui/lang/en.json b/packages/ui/lang/en.json
index b682e07d67..00eaadcb9d 100644
--- a/packages/ui/lang/en.json
+++ b/packages/ui/lang/en.json
@@ -27,7 +27,11 @@
     "AddDueDate": "Add due date",
     "EditDueDate": "Edit due date",
     "SaveDueDate": "Save due date",
-    "IssueNeedsToBeCompletedByThisDate": "Issue needs to be completed by this date",
+    "NeedsToBeCompletedByThisDate": "Needs to be completed by this date",
+    "DueDatePopupTitle": "Due on {value}",
+    "DueDatePopupOverdueTitle": "Was due on {value}",
+    "DueDatePopupDescription": "{value, plural, =0 {Today} =1 {Tomorrow} other {# days remaining}}",
+    "DueDatePopupOverdueDescription": "{value, plural, =1 {1 day overdue} other {# days overdue}}",
     "English": "English",
     "Russian": "Russian",
     "MinutesBefore": "{minutes, plural, =1 {a minute before} other {# minutes before}}",
diff --git a/packages/ui/lang/ru.json b/packages/ui/lang/ru.json
index 37abe32359..7efc44d6e3 100644
--- a/packages/ui/lang/ru.json
+++ b/packages/ui/lang/ru.json
@@ -27,7 +27,11 @@
     "AddDueDate": "Установить дату",
     "EditDueDate": "Изменить дату",
     "SaveDueDate": "Сохранить дату",
-    "IssueNeedsToBeCompletedByThisDate": "Задача должна быть завершена к этой дате",
+    "NeedsToBeCompletedByThisDate": "Должно быть завершено к этой дате",
+    "DueDatePopupTitle": "Срок {value}",
+    "DueDatePopupOverdueTitle": "Должно было завершится {value}",
+    "DueDatePopupDescription": "{value, plural, =0 {Сегодня} =1 {Завтра} other {# дней осталось}}",
+    "DueDatePopupOverdueDescription": "{value, plural, =1 {1 день опоздания} other {# дней опаздания}}",
     "English": "Английский",
     "Russian": "Русский",
     "MinutesBefore": "{minutes, plural, =1 {за минуту} other {за # минут}}",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index af892a51ce..682cf77fbf 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -36,6 +36,7 @@
     "@hcengineering/platform": "^0.6.8",
     "@hcengineering/theme": "^0.6.2",
     "@hcengineering/core": "^0.6.23",
+    "just-clone": "~6.2.0",
     "svelte": "3.55.1",
     "fast-equals": "^2.0.3"
   },
diff --git a/packages/ui/src/colors.ts b/packages/ui/src/colors.ts
index d755b85b8b..fe1a07a043 100644
--- a/packages/ui/src/colors.ts
+++ b/packages/ui/src/colors.ts
@@ -106,3 +106,58 @@ export function numberToRGB (color: number, alpha?: number): string {
 
   return `rgba(${r}, ${g}, ${b}, ${alpha === undefined ? '1' : alpha})`
 }
+
+/**
+ * @public
+ */
+export function hsvToRGB (h: number, s: number, v: number): { r: number, g: number, b: number, rgb: string } {
+  let r: number = 0
+  let g: number = 0
+  let b: number = 0
+  const i = Math.floor(h * 6)
+  const f = h * 6 - i
+  const p = v * (1 - s)
+  const q = v * (1 - f * s)
+  const t = v * (1 - (1 - f) * s)
+  switch (i % 6) {
+    case 0:
+      r = v
+      g = t
+      b = p
+      break
+    case 1:
+      r = q
+      g = v
+      b = p
+      break
+    case 2:
+      r = p
+      g = v
+      b = t
+      break
+    case 3:
+      r = p
+      g = q
+      b = v
+      break
+    case 4:
+      r = t
+      g = p
+      b = v
+      break
+    case 5:
+      r = v
+      g = p
+      b = q
+      break
+  }
+  r = Math.round(r * 255)
+  g = Math.round(g * 255)
+  b = Math.round(b * 255)
+  return {
+    r,
+    g,
+    b,
+    rgb: '#' + r.toString(16) + g.toString(16) + b.toString(16)
+  }
+}
diff --git a/packages/ui/src/components/ActionIcon.svelte b/packages/ui/src/components/ActionIcon.svelte
index 5b721c27b3..7b81096557 100644
--- a/packages/ui/src/components/ActionIcon.svelte
+++ b/packages/ui/src/components/ActionIcon.svelte
@@ -15,6 +15,7 @@
 <script lang="ts">
   import type { IntlString, Asset } from '@hcengineering/platform'
   import type { AnySvelteComponent, TooltipAlignment } from '../types'
+  import { ComponentType } from 'svelte'
 
   import Icon from './Icon.svelte'
   import { tooltip } from '../tooltips'
@@ -22,7 +23,7 @@
   export let label: IntlString = '' as IntlString
   export let labelProps: any = undefined
   export let direction: TooltipAlignment | undefined = undefined
-  export let icon: Asset | AnySvelteComponent
+  export let icon: Asset | AnySvelteComponent | ComponentType
   export let iconProps: any | undefined = undefined
   export let size: 'x-small' | 'small' | 'medium' | 'large'
   export let action: (ev: MouseEvent) => Promise<void> | void = async () => {}
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index e6cb2dbb6a..925f422f54 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -17,7 +17,7 @@
   import { onMount, ComponentType } from 'svelte'
   import { registerFocus } from '../focus'
   import { tooltip } from '../tooltips'
-  import type { AnySvelteComponent, ButtonKind, ButtonShape, ButtonSize, LabelAndProps } from '../types'
+  import type { AnySvelteComponent, ButtonKind, ButtonShape, ButtonSize, LabelAndProps, IconSize } from '../types'
   import Icon from './Icon.svelte'
   import Label from './Label.svelte'
   import Spinner from './Spinner.svelte'
@@ -29,6 +29,8 @@
   export let shape: ButtonShape = undefined
   export let icon: Asset | AnySvelteComponent | ComponentType | undefined = undefined
   export let iconProps: any | undefined = undefined
+  export let iconRight: Asset | AnySvelteComponent | ComponentType | undefined = undefined
+  export let iconRightProps: any | undefined = undefined
   export let justify: 'left' | 'center' = 'center'
   export let disabled: boolean = false
   export let loading: boolean = false
@@ -45,10 +47,14 @@
   export let id: string | undefined = undefined
   export let input: HTMLButtonElement | undefined = undefined
   export let showTooltip: LabelAndProps | undefined = undefined
+  export let iconSize: IconSize = size === 'inline' ? 'inline' : 'small'
+  export let iconRightSize: IconSize = 'x-small'
+  export let short: boolean = false
 
-  let iconSize: ButtonSize
-  $: iconSize = size === 'inline' ? 'inline' : 'small'
-  $: iconOnly = label === undefined && ($$slots.content === undefined || $$slots.icon !== undefined)
+  // $: iconSize = size === 'inline' ? 'inline' : 'small'
+  $: iconOnly =
+    label === undefined &&
+    ($$slots.content === undefined || $$slots.icon !== undefined || $$slots.iconRight !== undefined)
 
   onMount(() => {
     if (focus && input) {
@@ -95,6 +101,7 @@
   class:selected
   class:notSelected
   disabled={disabled || loading}
+  class:short
   style:width
   style:height
   {title}
@@ -113,7 +120,7 @@
   {/if}
   {#if loading}
     <div class="btn-icon pointer-events-none caption-color spinner" class:resetIconSize>
-      <Spinner size={iconSize} />
+      <Spinner size={iconSize === 'inline' ? 'inline' : 'small'} />
     </div>
   {/if}
   {#if label}
@@ -121,8 +128,14 @@
       <Label {label} params={labelParams} />
     </span>
   {/if}
+  {#if iconRight}
+    <div class="btn-right-icon pointer-events-none" class:resetIconSize>
+      <Icon bind:icon={iconRight} size={iconRightSize} iconProps={iconRightProps} />
+    </div>
+  {/if}
   {#if $$slots.icon}<slot name="icon" />{/if}
   {#if $$slots.content}<slot name="content" />{/if}
+  {#if $$slots.iconRight}<slot name="iconRight" />{/if}
 </button>
 
 <style lang="scss">
@@ -142,9 +155,9 @@
     }
   }
   .medium {
-    height: 1.75rem;
+    height: 2rem;
     &.only-icon {
-      width: 1.75rem;
+      width: 2rem;
     }
   }
   .large {
@@ -164,24 +177,33 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    padding: 0 0.5rem;
+    padding: 0 0.625rem;
     font-weight: 500;
     min-width: 1.375rem;
     white-space: nowrap;
-    color: var(--accent-color);
+    color: var(--theme-caption-color);
     background-color: transparent;
     border: 1px solid transparent;
     transition-property: border, background-color, color, box-shadow;
     transition-duration: 0.15s;
 
     .btn-icon {
-      color: var(--content-color);
+      color: var(--theme-content-color);
+      transition: color 0.15s;
+      pointer-events: none;
+    }
+    .btn-right-icon {
+      margin-left: 0.5rem;
+      color: var(--theme-halfcontent-color);
       transition: color 0.15s;
       pointer-events: none;
     }
     &:not(.only-icon) .btn-icon:not(.spinner) {
       margin-right: 0.5rem;
     }
+    &:not(.only-icon) .btn-right-icon {
+      margin-left: 0.5rem;
+    }
     &.no-border:not(.only-icon) .btn-icon,
     &.link-bordered:not(.only-icon) .btn-icon,
     &.list:not(.only-icon) .btn-icon,
@@ -189,6 +211,9 @@
       margin-right: 0.25rem;
     }
 
+    &.short {
+      max-width: 7rem;
+    }
     &.sh-no-shape {
       border-radius: 0.25rem;
     }
@@ -217,25 +242,22 @@
     }
 
     &.highlight {
-      box-shadow: inset 0 0 1px 1px var(--primary-bg-color);
+      box-shadow: inset 0 0 1px 1px var(--primary-button-enabled);
 
       &:hover {
-        box-shadow: inset 0 0 1px 1px var(--primary-bg-hover);
+        box-shadow: inset 0 0 1px 1px var(--primary-button-hovered);
       }
     }
     &:hover {
-      color: var(--accent-color);
-      transition-duration: 0;
-
       .btn-icon {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
       }
     }
     &:focus {
-      border-color: var(--primary-edit-border-color) !important;
+      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
     }
     &:disabled {
-      color: rgb(var(--caption-color) / 40%);
+      color: var(--theme-dark-color);
       cursor: not-allowed;
 
       .btn-icon {
@@ -254,58 +276,64 @@
     }
 
     &.secondary {
-      background-color: var(--button-bg-color);
-      border-color: var(--button-border-color);
-      box-shadow: var(--button-shadow);
+      background-color: var(--theme-button-enabled);
+      border-color: var(--theme-button-border);
 
+      // &.medium:not(.only-icon) {
+      //   padding: 0 0.75rem;
+      // }
       &:hover {
-        background-color: var(--button-bg-hover);
-        border-color: var(--button-border-hover);
+        background-color: var(--theme-button-hovered);
+      }
+      &:active {
+        background-color: var(--theme-button-pressed);
+      }
+      &:focus {
+        background-color: var(--theme-button-focused);
       }
       &:disabled {
-        background-color: var(--button-disabled-color);
-        border-color: transparent;
+        background-color: var(--theme-button-disabled);
       }
 
       &.selected {
-        background-color: var(--button-bg-hover);
-        border-color: var(--button-border-hover);
-        color: var(--caption-color);
-
+        background-color: var(--theme-button-hovered);
         .btn-icon {
-          color: var(--accent-color);
+          color: var(--theme-caption-color);
         }
       }
     }
     &.no-border {
       font-weight: 400;
-      color: var(--accent-color);
-      background-color: var(--noborder-bg-color);
+      color: var(--theme-content-color);
+      background-color: var(--theme-button-enabled);
       box-shadow: var(--button-shadow);
 
       &:hover {
-        color: var(--caption-color);
-        background-color: var(--noborder-bg-hover);
+        color: var(--theme-caption-color);
+        background-color: var(--theme-button-hovered);
 
         .btn-icon {
-          color: var(--caption-color);
+          color: var(--theme-caption-color);
         }
       }
       &:disabled {
-        color: var(--content-color);
-        background-color: var(--button-disabled-color);
+        color: var(--theme-trans-color);
+        background-color: var(--theme-list-button-color);
         cursor: default;
+        .btn-icon {
+          color: var(--theme-trans-color);
+        }
         &:hover {
-          color: var(--content-color);
+          color: var(--theme-trans-color);
           .btn-icon {
-            color: var(--content-color);
+            color: var(--theme-trans-color);
           }
         }
       }
     }
     &.transparent {
       &:hover {
-        background-color: var(--highlight-hover);
+        background-color: var(--theme-button-hovered);
       }
       &.selected {
         background-color: var(--highlight-select);
@@ -317,72 +345,79 @@
     &.link {
       padding: 0 0.875rem;
       &:hover {
-        color: var(--caption-color);
-        background-color: var(--body-color);
-        border-color: var(--divider-color);
+        color: var(--theme-caption-color);
+        background-color: var(--theme-bg-color);
+        border-color: var(--theme-divider-color);
         .btn-icon {
-          color: var(--content-color);
+          color: var(--theme-content-color);
         }
       }
       &:disabled {
-        color: var(--accent-color);
+        color: var(--theme-dark-color);
         background-color: transparent;
         border-color: transparent;
         cursor: auto;
 
         .btn-icon {
-          color: var(--content-color);
+          color: var(--theme-content-color);
         }
       }
     }
     &.link-bordered {
-      padding: 0 0.375rem;
-      color: var(--accent-color);
-      border-color: var(--divider-color);
+      padding: 0 0.5rem;
+      color: var(--theme-content-color);
+      border-color: var(--theme-divider-color);
       &:hover {
-        color: var(--accent-color);
-        background-color: var(--button-bg-hover);
-        border-color: var(--button-border-hover);
+        color: var(--theme-caption-color);
+        background-color: var(--theme-button-hovered);
+        border-color: var(--theme-list-divider-color);
         .btn-icon {
-          color: var(--accent-color);
+          color: var(--theme-caption-color);
         }
       }
     }
     &.list {
-      padding: 0 0.625em 0 0.5rem;
+      padding: 0 0.625em;
       min-height: 1.75rem;
-      color: var(--content-color);
-      background-color: var(--body-color);
-      border: 1px solid var(--divider-color);
-      border-radius: 3rem;
-      transition-property: border, color, background-color;
-      transition-duration: 0.15s;
+      color: var(--theme-halfcontent-color);
+      background-color: var(--theme-list-button-color);
+      border: 1px solid var(--theme-button-border);
+      border-radius: 1.5rem;
+      // transition-property: border, color, background-color;
+      // transition-duration: 0.15s;
 
+      .btn-icon {
+        color: var(--theme-dark-color);
+      }
       &:hover {
-        color: var(--caption-color);
-        background-color: var(--board-card-bg-color);
-        border-color: var(--button-border-color);
+        color: var(--theme-halfcontent-color);
+        background-color: var(--theme-list-button-color);
+        border-color: var(--theme-button-border);
+      }
+      &:focus {
+        box-shadow: none;
       }
     }
     &.primary {
       padding: 0 0.75rem;
-      color: var(--white-color);
-      background-color: var(--primary-bg-color);
-      border-color: var(--primary-bg-color);
-      box-shadow: var(--primary-shadow);
+      color: var(--primary-button-color);
+      background-color: var(--primary-button-enabled);
+      border-color: var(--primary-button-border);
 
       .btn-icon {
         color: var(--white-color);
       }
       &:hover {
-        background-color: var(--primary-bg-hover);
+        background-color: var(--primary-button-hovered);
+      }
+      &:active {
+        background-color: var(--primary-button-pressed);
       }
       &:focus {
-        border-color: var(--primary-edit-border-color);
+        background-color: var(--primary-button-focused);
       }
       &:disabled {
-        background-color: #5e6ad255;
-        border-color: #5e6ad255;
+        background-color: var(--primary-button-disabled);
       }
     }
 
diff --git a/packages/ui/src/components/CheckBox.svelte b/packages/ui/src/components/CheckBox.svelte
index dcde7d5520..fa50f6227e 100644
--- a/packages/ui/src/components/CheckBox.svelte
+++ b/packages/ui/src/components/CheckBox.svelte
@@ -17,6 +17,7 @@
 
   export let checked: boolean = false
   export let symbol: 'check' | 'minus' = 'check'
+  export let size: 'small' | 'medium' = 'small'
   export let circle: boolean = false
   export let primary: boolean = false
   export let readonly = false
@@ -34,7 +35,7 @@
   }
 </script>
 
-<label class="checkbox" class:circle class:primary class:readonly class:checked>
+<label class="checkbox {size}" class:circle class:primary class:readonly class:checked>
   <input class="chBox" disabled={readonly} type="checkbox" bind:checked on:change={handleValueChanged} />
   <svg class="checkSVG" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
     {#if checked}
@@ -53,27 +54,32 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    width: 0.875rem;
-    height: 0.875rem;
-    border: 1px solid var(--dark-color);
+    background-color: var(--theme-button-hovered);
+    border: 1px solid var(--theme-checkbox-border);
     border-radius: 0.25rem;
 
+    &.small {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+    &.medium {
+      width: 1rem;
+      height: 1rem;
+    }
     &.circle {
       width: 1rem;
       height: 1rem;
       border-radius: 50%;
     }
     &.checked {
-      background-color: var(--primary-bg-color);
-      border-color: transparent;
+      background-color: var(--theme-checkbox-bg-color);
     }
     &.primary.checked {
-      background-color: var(--primary-bg-color);
+      background-color: var(--primary-button-enabled);
       border-color: transparent;
     }
     &.readonly.checked {
-      background-color: var(--dark-color);
-      border-color: transparent;
+      background-color: var(--theme-checkbox-disabled);
     }
 
     .chBox {
@@ -89,7 +95,7 @@
       &:checked + .checkSVG {
         & .check {
           visibility: visible;
-          fill: var(--white-color);
+          fill: var(--theme-checkbox-color);
           &.primary {
             fill: var(--primary-button-color);
           }
@@ -99,7 +105,7 @@
         cursor: pointer;
       }
       &:disabled + .checkSVG .check {
-        fill: var(--content-color);
+        fill: var(--theme-checkbox-disabled);
       }
     }
     .checkSVG {
@@ -108,7 +114,7 @@
 
       .check {
         visibility: hidden;
-        fill: var(--button-bg-color);
+        fill: var(--theme-checkbox-color);
       }
     }
   }
diff --git a/packages/ui/src/components/EditWithIcon.svelte b/packages/ui/src/components/EditWithIcon.svelte
index 54de3a4df2..11fabb5f62 100644
--- a/packages/ui/src/components/EditWithIcon.svelte
+++ b/packages/ui/src/components/EditWithIcon.svelte
@@ -15,13 +15,13 @@
 <script lang="ts">
   import type { Asset, IntlString } from '@hcengineering/platform'
   import { translate } from '@hcengineering/platform'
-  import { createEventDispatcher } from 'svelte'
+  import { createEventDispatcher, ComponentType } from 'svelte'
   import plugin from '../plugin'
   import type { AnySvelteComponent } from '../types'
   import Icon from './Icon.svelte'
   import IconClose from './icons/Close.svelte'
 
-  export let icon: Asset | AnySvelteComponent
+  export let icon: Asset | AnySvelteComponent | ComponentType
   export let width: string | undefined = undefined
   export let value: string | undefined = undefined
   export let placeholder: IntlString = plugin.string.EditBoxPlaceholder
@@ -65,9 +65,9 @@
   .editbox {
     padding: 0 0.5rem 0 0.5rem;
     min-width: 10rem;
-    color: var(--caption-color);
-    background-color: var(--body-color);
-    border: 1px solid var(--button-border-color);
+    color: var(--theme-caption-color);
+    // background-color: var(--body-color);
+    border: 1px solid transparent;
     border-radius: 0.25rem;
 
     &.small {
@@ -77,9 +77,11 @@
       height: 2rem;
     }
     &:focus-within {
-      border-color: var(--primary-edit-border-color);
+      border-color: var(--theme-button-border);
+      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
+
       .icon {
-        color: var(--menu-icon-hover);
+        color: var(--theme-dark-color);
       }
     }
 
@@ -89,19 +91,19 @@
       border-radius: 0.25rem;
 
       &::placeholder {
-        color: var(--content-color);
+        color: var(--theme-halfcontent-color);
       }
     }
 
     .btn {
-      color: var(--content-color);
+      color: var(--theme-dark-color);
       cursor: pointer;
       &:hover {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
       }
     }
     .icon {
-      color: var(--content-color);
+      color: var(--theme-dark-color);
     }
   }
 </style>
diff --git a/packages/ui/src/components/MultiProgress.svelte b/packages/ui/src/components/MultiProgress.svelte
index 91c19b9970..99126eb6ba 100644
--- a/packages/ui/src/components/MultiProgress.svelte
+++ b/packages/ui/src/components/MultiProgress.svelte
@@ -71,8 +71,8 @@
     position: relative;
     width: 100%;
     height: 1.5rem;
-    background-color: var(--board-bg-color);
-    border: 1px solid var(--accent-bg-color);
+    background-color: var(--theme-list-row-color);
+    border: 1px solid var(--theme-list-divider-color);
     border-radius: 0.25rem;
 
     .bar {
diff --git a/packages/ui/src/components/PanelInstance.svelte b/packages/ui/src/components/PanelInstance.svelte
index 319bca08a4..e0ceefe2cc 100644
--- a/packages/ui/src/components/PanelInstance.svelte
+++ b/packages/ui/src/components/PanelInstance.svelte
@@ -50,14 +50,17 @@
     closePanel()
   }
 
-  $: props = $panelstore.panel
-
-  $: if (props !== undefined) {
-    component = undefined
-
-    getResource(props.component).then((r) => {
-      component = r
-    })
+  $: if ($panelstore.panel !== undefined) {
+    if ($panelstore.panel.component === undefined) {
+      props = $panelstore.panel
+    } else {
+      getResource($panelstore.panel.component).then((r) => {
+        component = r
+        props = $panelstore.panel
+      })
+    }
+  } else {
+    props = undefined
   }
 
   function escapeClose () {
@@ -163,7 +166,7 @@
     background-color: transparent;
 
     &.bg {
-      background-color: var(--body-color);
+      background-color: var(--theme-back-color);
     }
     .panel-container {
       padding: 0.5rem;
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index cbd35a1f14..4ffe043876 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -26,6 +26,7 @@
   export let autoscroll: boolean = false
   export let bottomStart: boolean = false
   export let fade: FadeOptions = defaultSP
+  export let noFade: boolean = false
   export let invertScroll: boolean = false
   export let horizontal: boolean = false
   export let contentDirection: 'vertical' | 'vertical-reverse' | 'horizontal' = 'vertical'
@@ -33,6 +34,7 @@
   export let buttons: boolean = false
   export let shrink: boolean = false
   export let divScroll: HTMLElement | undefined = undefined
+  export let checkForHeaders = false
 
   export function scroll (top: number, left?: number, behavior: 'auto' | 'smooth' = 'auto') {
     if (divScroll) {
@@ -74,10 +76,13 @@
   let timerH: number
 
   const inter = new Set<Element>()
+  let hasLastCategories: boolean = false
 
   $: fz = $themeOptions.fontSize
   $: shiftTop = fade.multipler?.top ? fade.multipler?.top * fz : 0
   $: shiftBottom = fade.multipler?.bottom ? fade.multipler?.bottom * fz : 0
+  $: shiftLeft = fade.multipler?.left ? fade.multipler?.left * fz : 0
+  $: shiftRight = fade.multipler?.right ? fade.multipler?.right * fz : 0
   $: orientir = contentDirection === 'horizontal' ? 'horizontal' : 'vertical'
 
   const checkBar = (): void => {
@@ -85,22 +90,42 @@
       const trackH = divScroll.clientHeight - shiftTop - shiftBottom - 4
       const scrollH = divScroll.scrollHeight
       const proc = scrollH / trackH
-      divBar.style.height = divScroll.clientHeight / proc + 'px'
-      divBar.style.top = divScroll.scrollTop / proc + shiftTop + 2 + 'px'
-      if (mask === 'none') divBar.style.visibility = 'hidden'
-      else {
-        divBar.style.visibility = 'visible'
+
+      const newHeight = divScroll.clientHeight / proc + 'px'
+      if (divBar.style.height !== 'newHeight') {
+        divBar.style.height = newHeight
+      }
+      const newTop = divScroll.scrollTop / proc + shiftTop + 2 + 'px'
+      if (divBar.style.top !== newTop) {
+        divBar.style.top = newTop
+      }
+      if (mask === 'none') {
+        if (divBar.style.visibility !== 'hidden') {
+          divBar.style.visibility = 'hidden'
+        }
+      } else {
+        if (divBar.style.visibility !== 'visible') {
+          divBar.style.visibility = 'visible'
+        }
         if (divBar) {
           if (timer) {
             clearTimeout(timer)
-            divBar.style.opacity = '1'
+            if (divBar.style.opacity !== '1') {
+              divBar.style.opacity = '1'
+            }
           }
           timer = setTimeout(() => {
-            if (divBar) divBar.style.opacity = '0'
+            if (divBar) {
+              divBar.style.opacity = '0'
+            }
           }, 1500)
         }
       }
-      if (divScroll.clientHeight >= divScroll.scrollHeight) divBar.style.visibility = 'hidden'
+      if (divScroll.clientHeight >= divScroll.scrollHeight) {
+        if (divBar.style.visibility !== 'hidden') {
+          divBar.style.visibility = 'hidden'
+        }
+      }
     }
   }
   const checkBarH = (): void => {
@@ -183,7 +208,7 @@
   }
 
   const renderFade = () => {
-    if (divScroll) {
+    if (divScroll && !noFade) {
       const th = shiftTop + (topCrop === 'top' ? 2 * fz - topCropValue : 0)
       const tf =
         topCrop === 'full'
@@ -205,15 +230,24 @@
     if (divHScroll && horizontal) {
       const gradientH = `linear-gradient(
         90deg,
-        rgba(0, 0, 0, 0) 0,
-        rgba(0, 0, 0, 1) ${maskH === 'none' || maskH === 'left' ? '0px' : '2rem'},
-        rgba(0, 0, 0, 1) calc(100% - ${maskH === 'none' || maskH === 'right' ? '0px' : '2rem'}),
-        rgba(0, 0, 0, 0) 100%
+        rgba(0, 0, 0, 1) ${shiftLeft}px,
+        rgba(0, 0, 0, 0) ${shiftLeft}px,
+        rgba(0, 0, 0, 1) ${shiftLeft + (maskH === 'both' || maskH === 'right' ? 2 * fz : 0)}px,
+        rgba(0, 0, 0, 1) calc(100% - ${shiftRight + (maskH === 'both' || maskH === 'left' ? 2 * fz : 0)}px),
+        rgba(0, 0, 0, 0) calc(100% - ${shiftRight}px),
+        rgba(0, 0, 0, 1) calc(100% - ${shiftRight}px)
       )`
       divHScroll.style.webkitMaskImage = gradientH
     }
   }
 
+  let checkBarTimeout: any | undefined = undefined
+
+  const delayCall = (op: () => void) => {
+    clearTimeout(checkBarTimeout)
+    checkBarTimeout = setTimeout(op, 50)
+  }
+
   const checkFade = (): void => {
     if (divScroll) {
       beforeContent = divScroll.scrollTop
@@ -234,8 +268,8 @@
       if (inter.size) checkIntersectionFade()
       renderFade()
     }
-    if (!isScrolling) checkBar()
-    if (!isScrolling && horizontal) checkBarH()
+    if (!isScrolling) delayCall(checkBar)
+    if (!isScrolling && horizontal) delayCall(checkBarH)
   }
 
   function checkAutoScroll () {
@@ -252,17 +286,47 @@
 
   const checkIntersection = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
     const interArr: Element[] = []
+    const catEntries: IntersectionObserverEntry[] = []
+    const lastCatEntries: IntersectionObserverEntry[] = []
+
     entries.forEach((el) => {
-      if (el.isIntersecting) {
+      if (el.isIntersecting && el.target.classList.contains('categoryHeader')) {
         inter.add(el.target)
         interArr.push(el.target)
       } else inter.delete(el.target)
+      if (hasLastCategories) {
+        if (el.isIntersecting && el.target.classList.contains('categoryHeader')) catEntries.push(el)
+        if (el.isIntersecting && el.target.classList.contains('lastCat')) lastCatEntries.push(el)
+      }
     })
+
     if (interArr.length > 0) {
       dispatch('lastScrolledCategory', interArr[interArr.length - 1]?.getAttribute('id'))
+      dispatch('firstScrolledCategory', interArr[0]?.getAttribute('id'))
       const interCats: string[] = interArr.map((it) => it.getAttribute('id') as string)
       dispatch('scrolledCategories', interCats)
     }
+    if (hasLastCategories) {
+      const targets = new Set<Element>()
+      const closed = new Set<Element>()
+      lastCatEntries.forEach((last) => {
+        catEntries.forEach((cat) => {
+          if (last.target !== cat.target) {
+            if (
+              last.boundingClientRect.top < cat.boundingClientRect.top + 8 &&
+              last.boundingClientRect.top >= cat.boundingClientRect.top
+            ) {
+              targets.add(cat.target)
+            }
+            if (cat.target.classList.contains('closed') && !closed.has(cat.target)) closed.add(cat.target)
+          }
+        })
+      })
+      closed.forEach((el) => {
+        if (!targets.has(el)) el.classList.remove('closed')
+      })
+      targets.forEach((el) => el.classList.add('closed'))
+    }
   }
 
   const checkIntersectionFade = () => {
@@ -300,8 +364,8 @@
     if (divScroll && divBox) {
       divScroll.addEventListener('wheel', wheelEvent)
       divScroll.addEventListener('scroll', checkFade)
-      checkBar()
-      if (horizontal) checkBarH()
+      delayCall(checkBar)
+      if (horizontal) delayCall(checkBarH)
     }
   })
   onDestroy(() => {
@@ -313,26 +377,46 @@
   })
 
   let oldTop: number
-  beforeUpdate(() => {
-    if (divBox && divScroll) oldTop = divScroll.scrollTop
-  })
-  afterUpdate(() => {
-    if (divBox && divScroll) {
-      if (oldTop !== divScroll.scrollTop) divScroll.scrollTop = oldTop
 
-      const tempEls = divBox.querySelectorAll('.categoryHeader')
-      observer = new IntersectionObserver(checkIntersection, { root: null, rootMargin: '0px', threshold: 0.1 })
-      tempEls.forEach((el) => observer.observe(el))
-    }
-  })
+  if (checkForHeaders) {
+    beforeUpdate(() => {
+      if (divBox && divScroll) {
+        oldTop = divScroll.scrollTop
+      }
+    })
+
+    afterUpdate(() => {
+      if (divBox && divScroll) {
+        if (oldTop !== divScroll.scrollTop) {
+          divScroll.scrollTop = oldTop
+        }
+
+        delayCall(() => {
+          const tempEls = divBox.querySelectorAll('.categoryHeader')
+          observer = new IntersectionObserver(checkIntersection, { root: null, rootMargin: '0px', threshold: 0.1 })
+          tempEls.forEach((el) => observer.observe(el))
+          const tempCats = divBox.querySelectorAll('.lastCat')
+          if (tempCats.length > 0) {
+            hasLastCategories = true
+            tempCats.forEach((el) => observer.observe(el))
+          } else {
+            hasLastCategories = false
+          }
+        })
+      }
+    })
+  }
 
   let divHeight: number
   const _resize = (): void => checkFade()
 
   const tapScroll = (n: number, dir: 'up' | 'down') => {
     if (divScroll) {
-      if (orientir === 'horizontal') divScroll.scrollBy({ top: 0, left: dir === 'up' ? -n : n, behavior: 'smooth' })
-      else divScroll.scrollBy({ top: dir === 'up' ? -n : n, left: 0, behavior: 'smooth' })
+      if (orientir === 'horizontal') {
+        divScroll.scrollBy({ top: 0, left: dir === 'up' ? -n : n, behavior: 'smooth' })
+      } else {
+        divScroll.scrollBy({ top: dir === 'up' ? -n : n, left: 0, behavior: 'smooth' })
+      }
     }
   }
 </script>
@@ -549,6 +633,7 @@
     height: 100%;
   }
   .scroll {
+    will-change: opacity;
     flex-grow: 1;
     min-width: 0;
     min-height: 0;
diff --git a/packages/ui/src/components/SearchEdit.svelte b/packages/ui/src/components/SearchEdit.svelte
index a5a2c1c37e..a6661722d7 100644
--- a/packages/ui/src/components/SearchEdit.svelte
+++ b/packages/ui/src/components/SearchEdit.svelte
@@ -12,7 +12,6 @@
 
 <EditWithIcon
   icon={IconSearch}
-  size={'small'}
   width={'12rem'}
   placeholder={plugin.string.Search}
   bind:value={_search}
diff --git a/packages/ui/src/components/ShowMore.svelte b/packages/ui/src/components/ShowMore.svelte
index 2ba107f279..276871076d 100644
--- a/packages/ui/src/components/ShowMore.svelte
+++ b/packages/ui/src/components/ShowMore.svelte
@@ -78,9 +78,9 @@
 
     word-wrap: none;
     font-size: 0.75rem;
-    color: var(--caption-color);
-    background: var(--popup-bg-color);
-    border: 0.5px solid var(--popup-divider);
+    color: var(--theme-caption-color);
+    background: var(--theme-list-row-color);
+    border: 0.5px solid var(--theme-list-divider-color);
     box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
     border-radius: 2.5rem;
     // z-index: 1;
@@ -92,7 +92,7 @@
       transform: translateX(-50%);
     }
     &:hover {
-      background: var(--popup-bg-hover);
+      background: var(--theme-list-button-color);
     }
   }
 </style>
diff --git a/packages/ui/src/components/Status.svelte b/packages/ui/src/components/Status.svelte
index 7e985b8c0c..1ee35ab273 100644
--- a/packages/ui/src/components/Status.svelte
+++ b/packages/ui/src/components/Status.svelte
@@ -22,7 +22,7 @@
   .container {
     user-select: none;
     font-size: 14px;
-    color: var(--content-color);
+    color: var(--theme-content-color);
     &.WARNING {
       color: yellow;
     }
diff --git a/packages/ui/src/components/StylishEdit.svelte b/packages/ui/src/components/StylishEdit.svelte
index dfa1529fe0..40a6b80c85 100644
--- a/packages/ui/src/components/StylishEdit.svelte
+++ b/packages/ui/src/components/StylishEdit.svelte
@@ -72,14 +72,14 @@
     padding: 0;
     min-width: 3rem;
     height: 3.25rem;
-    background-color: var(--accent-bg-color);
-    border: 1px solid var(--button-border-color);
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.75rem;
     caret-color: var(--caret-color);
 
     &:focus-within {
-      background-color: var(--body-accent);
-      border-color: var(--button-border-hover);
+      background-color: var(--theme-button-focused);
+      border-color: var(--theme-list-divider-color);
     }
     input {
       height: 3.25rem;
@@ -98,7 +98,7 @@
       top: 1rem;
       left: 1.25rem;
       font-size: 0.75rem;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
       opacity: 0.3;
       transition: top 200ms;
       pointer-events: none;
diff --git a/packages/ui/src/components/TabList.svelte b/packages/ui/src/components/TabList.svelte
index 0dde4e98bc..dc94748db2 100644
--- a/packages/ui/src/components/TabList.svelte
+++ b/packages/ui/src/components/TabList.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import { tooltip } from '../tooltips'
-  import type { TabItem } from '../types'
+  import type { TabItem, IconSize } from '../types'
   import Icon from './Icon.svelte'
   import Label from './Label.svelte'
 
@@ -23,7 +23,7 @@
   export let multiselect: boolean = false
   export let items: TabItem[]
   export let kind: 'normal' | 'secondary' = 'normal'
-  export let short: boolean = false
+  export let onlyIcons: boolean = false
   export let size: 'small' | 'medium' = 'medium'
 
   const dispatch = createEventDispatcher()
@@ -38,6 +38,9 @@
     return res
   }
   const tabs: HTMLElement[] = []
+
+  let iconSize: IconSize
+  $: iconSize = onlyIcons ? (size === 'small' ? 'small' : 'medium') : size === 'small' ? 'x-small' : 'small'
 </script>
 
 {#if items.length > 0}
@@ -47,9 +50,10 @@
       <div
         bind:this={tabs[i]}
         class="button"
-        class:short
+        class:onlyIcons
         class:selected={getSelected(item.id)}
         data-view={item.tooltip}
+        data-id={`tab-${item.id}`}
         use:tooltip={{ label: item.tooltip ?? undefined, element: tabs[i] ?? undefined }}
         on:click={() => {
           if (multiselect) {
@@ -64,7 +68,7 @@
       >
         {#if item.icon}
           <div class="icon">
-            <Icon icon={item.icon} size={size === 'small' ? 'x-small' : 'small'} fill={item.color ?? 'currentColor'} />
+            <Icon icon={item.icon} size={iconSize} fill={item.color ?? 'currentColor'} />
           </div>
         {:else if item.color}
           <div class="color" style:background-color={item.color} />
@@ -110,10 +114,11 @@
       }
       &::before {
         position: absolute;
-        top: 0.35rem;
+        top: 50%;
         left: -1.5px;
-        height: 0.8rem;
+        height: 70%;
         border-left: 1px solid var(--button-border-color);
+        transform: translateY(-50%);
       }
     }
     .button:not(.selected) + .button:not(.selected)::before {
@@ -123,6 +128,10 @@
     &.small {
       .button {
         padding: 0 0.5rem;
+
+        &.onlyIcons {
+          padding: 0.375rem;
+        }
       }
       &.normal .button {
         height: 1.5rem;
@@ -132,29 +141,30 @@
       }
     }
     &.medium .button {
-      height: 1.75rem;
+      height: 2rem;
       padding: 0.25rem 0.75rem;
-      &.short {
-        padding: 0.5rem;
+
+      &.onlyIcons {
+        padding: 0.375rem;
       }
     }
     &.normal {
-      background-color: var(--accent-bg-color);
-      border-radius: 0.5rem;
+      background-color: var(--theme-tablist-color);
+      border-radius: 0.25rem;
 
       .button {
-        background-color: var(--accent-bg-color);
+        color: var(--theme-trans-color);
         border: 1px solid transparent;
-        border-radius: calc(0.5rem - 1px);
+        border-radius: 0.25rem;
 
-        &:hover {
-          background-color: var(--button-bg-hover);
-        }
         &.selected {
-          color: var(--caption-color);
-          background-color: var(--button-bg-color);
-          border-color: var(--button-border-color);
-          box-shadow: var(--accent-shadow);
+          color: var(--theme-caption-color);
+          background-color: var(--theme-button-enabled);
+          border-color: var(--theme-button-border);
+
+          &:hover {
+            background-color: var(--theme-button-hovered);
+          }
         }
       }
     }
diff --git a/packages/ui/src/components/TimeSince.svelte b/packages/ui/src/components/TimeSince.svelte
index 5f6415b6e0..01156b15a4 100644
--- a/packages/ui/src/components/TimeSince.svelte
+++ b/packages/ui/src/components/TimeSince.svelte
@@ -32,6 +32,17 @@
 
   let time: string = ''
 
+  function calculateMonthsPassed (now: number, value: number): number {
+    const startDate: Date = new Date(value)
+    const endDate: Date = new Date(now)
+    const startYear = startDate.getFullYear()
+    const startMonth = startDate.getMonth()
+    const endYear = endDate.getFullYear()
+    const endMonth = endDate.getMonth()
+
+    return (endYear - startYear) * 12 + (endMonth - startMonth)
+  }
+
   async function formatTime (now: number, value: number) {
     let passed = now - value
     if (passed < 0) passed = 0
@@ -42,7 +53,7 @@
     } else if (passed < MONTH) {
       time = await translate(ui.string.Days, { days: Math.floor(passed / DAY) })
     } else if (passed < YEAR) {
-      time = await translate(ui.string.Months, { months: Math.floor(passed / MONTH) })
+      time = await translate(ui.string.Months, { months: calculateMonthsPassed(now, value) })
     } else {
       time = await translate(ui.string.Years, { years: Math.floor(passed / YEAR) })
     }
diff --git a/packages/ui/src/components/calendar/DatePopup.svelte b/packages/ui/src/components/calendar/DatePopup.svelte
index 34b65e1bf9..522fb323db 100644
--- a/packages/ui/src/components/calendar/DatePopup.svelte
+++ b/packages/ui/src/components/calendar/DatePopup.svelte
@@ -13,21 +13,22 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { IntlString } from '@hcengineering/platform'
   import { afterUpdate, createEventDispatcher } from 'svelte'
   import ui from '../../plugin'
   import ActionIcon from '../ActionIcon.svelte'
   import Button from '../Button.svelte'
   import Icon from '../Icon.svelte'
-  import IconClose from '../icons/Close.svelte'
   import Label from '../Label.svelte'
-  import { daysInMonth } from './internal/DateUtils'
+  import IconClose from '../icons/Close.svelte'
   import MonthSquare from './MonthSquare.svelte'
+  import { daysInMonth } from './internal/DateUtils'
 
   export let currentDate: Date | null
   export let withTime: boolean = false
   export let mondayStart: boolean = true
   export let label = currentDate != null ? ui.string.EditDueDate : ui.string.AddDueDate
-  export let detail = ui.string.IssueNeedsToBeCompletedByThisDate
+  export let detail: IntlString | undefined = undefined
 
   const dispatch = createEventDispatcher()
 
@@ -242,8 +243,10 @@
   <div class="content">
     <div class="label">
       <span class="bold"><Label {label} /></span>
-      <span class="divider">-</span>
-      <Label label={detail} />
+      {#if detail}
+        <span class="divider">-</span>
+        <Label label={detail} />
+      {/if}
     </div>
 
     <div class="datetime-input">
diff --git a/packages/ui/src/components/calendar/DatePresenter.svelte b/packages/ui/src/components/calendar/DatePresenter.svelte
index 28c3834877..bfd2f602c6 100644
--- a/packages/ui/src/components/calendar/DatePresenter.svelte
+++ b/packages/ui/src/components/calendar/DatePresenter.svelte
@@ -16,15 +16,16 @@
   import type { IntlString } from '@hcengineering/platform'
   import { createEventDispatcher } from 'svelte'
 
+  import { DateRangeMode } from '@hcengineering/core'
   import ui from '../../plugin'
   import { showPopup } from '../../popups'
+  import { ButtonKind, ButtonSize } from '../../types'
   import Icon from '../Icon.svelte'
   import Label from '../Label.svelte'
+  import DatePopup from './DatePopup.svelte'
   import DPCalendar from './icons/DPCalendar.svelte'
   import DPCalendarOver from './icons/DPCalendarOver.svelte'
   import { getMonthName } from './internal/DateUtils'
-  import DatePopup from './DatePopup.svelte'
-  import { DateRangeMode } from '@hcengineering/core'
 
   export let value: number | null | undefined
   export let mode: DateRangeMode = DateRangeMode.DATE
@@ -35,10 +36,10 @@
   export let labelNull: IntlString = ui.string.NoDate
   export let showIcon = true
   export let shouldShowLabel: boolean = true
-  export let size: 'x-small' | 'small' = 'small'
-  export let kind: 'transparent' | 'primary' | 'link' | 'list' = 'primary'
+  export let size: ButtonSize | 'x-small' = 'small'
+  export let kind: ButtonKind = 'link'
   export let label = ui.string.DueDate
-  export let detail = ui.string.IssueNeedsToBeCompletedByThisDate
+  export let detail = ui.string.NeedsToBeCompletedByThisDate
 
   const dispatch = createEventDispatcher()
 
@@ -64,14 +65,14 @@
 </script>
 
 <button
-  class="datetime-button {kind}"
+  class="datetime-button {kind} {size}"
   class:editable
   class:dateTimeButtonNoLabel={!shouldShowLabel}
-  class:h-6={size === 'small'}
-  class:h-3={size === 'x-small'}
   class:text-xs={size === 'x-small'}
-  on:click={() => {
+  on:click={(e) => {
     if (editable && !opened) {
+      e.stopPropagation()
+      e.preventDefault()
       opened = true
       showPopup(
         DatePopup,
@@ -122,10 +123,22 @@
     font-weight: 400;
     width: auto;
     white-space: nowrap;
-    color: var(--accent-color);
-
+    color: var(--theme-content-color);
     cursor: default;
 
+    &.x-small {
+      height: 0.75rem;
+    }
+    &.small {
+      height: 1.5rem;
+    }
+    &.medium {
+      height: 2rem;
+    }
+    &.large {
+      height: 2.25rem;
+    }
+
     &.primary {
       padding: 0 0.5rem;
       min-width: 1.5rem;
@@ -251,6 +264,40 @@
         border-color: var(--button-border-color);
       }
     }
+    &.link-bordered {
+      padding: 0 0.375rem;
+      color: var(--accent-color);
+      border-color: var(--divider-color);
+      &:hover {
+        color: var(--accent-color);
+        background-color: var(--button-bg-hover);
+        border-color: var(--button-border-hover);
+        .btn-icon {
+          color: var(--accent-color);
+        }
+      }
+    }
+    &.secondary {
+      padding: 0 0.625rem;
+      color: var(--theme-caption-color);
+      background-color: var(--theme-button-enabled);
+      border-color: var(--theme-button-border);
+      border-radius: 0.25rem;
+
+      .btn-icon {
+        color: var(--theme-content-color);
+      }
+      &:hover {
+        background-color: var(--theme-button-hovered);
+        border-color: var(--theme-divider-color);
+        .btn-icon {
+          color: var(--theme-content-color);
+        }
+      }
+      // &.edit {
+      //   padding: 0 0.5rem;
+      // }
+    }
 
     .time-divider {
       flex-shrink: 0;
diff --git a/packages/ui/src/components/calendar/DateRangePresenter.svelte b/packages/ui/src/components/calendar/DateRangePresenter.svelte
index 35af473aff..2cae949e96 100644
--- a/packages/ui/src/components/calendar/DateRangePresenter.svelte
+++ b/packages/ui/src/components/calendar/DateRangePresenter.svelte
@@ -32,7 +32,8 @@
   export let icon: 'normal' | 'warning' | 'overdue' = 'normal'
   export let labelOver: IntlString | undefined = undefined // label instead of date
   export let labelNull: IntlString = ui.string.NoDate
-  export let kind: 'no-border' | 'link' = 'no-border'
+  export let kind: 'no-border' | 'link' | 'secondary' = 'no-border'
+  export let size: 'small' | 'medium' | 'large' = 'small'
   export let noShift: boolean = false
 
   const dispatch = createEventDispatcher()
@@ -315,7 +316,7 @@
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <button
   bind:this={datePresenter}
-  class="datetime-button {kind}"
+  class="datetime-button {kind} {size}"
   class:editable
   class:edit
   on:click={() => {
@@ -455,17 +456,26 @@
     padding: 0 0.5rem;
     font-weight: 400;
     min-width: 1.5rem;
-    width: auto;
-    height: 1.5rem;
+    width: min-content;
     white-space: nowrap;
     line-height: 1.5rem;
-    color: var(--accent-color);
+    color: var(--theme-content-color);
     border: 1px solid transparent;
     border-radius: 0.25rem;
     transition-property: border, background-color, color, box-shadow;
     transition-duration: 0.15s;
     cursor: pointer;
 
+    &.small {
+      height: 1.5rem;
+    }
+    &.medium {
+      height: 2rem;
+    }
+    &.large {
+      height: 2.25rem;
+    }
+
     .btn-icon {
       margin-right: 0.375rem;
       width: 0.875rem;
@@ -474,7 +484,7 @@
       pointer-events: none;
 
       &.normal {
-        color: var(--content-color);
+        color: var(--theme-content-color);
       }
       &.warning {
         color: var(--warning-color);
@@ -486,27 +496,31 @@
 
     &.no-border {
       font-weight: 400;
-      color: var(--accent-color);
-      background-color: var(--noborder-bg-color);
+      color: var(--theme-content-color);
+      background-color: var(--theme-button-enabled);
       box-shadow: var(--button-shadow);
 
       &:hover {
-        color: var(--caption-color);
-        background-color: var(--noborder-bg-hover);
+        color: var(--theme-caption-color);
+        background-color: var(--theme-button-hovered);
         transition-duration: 0;
 
         .btn-icon {
-          color: var(--caption-color);
+          color: var(--theme-caption-color);
         }
       }
       &:disabled {
-        color: var(--content-color);
-        background-color: var(--button-disabled-color);
+        color: var(--theme-trans-color);
+        background-color: var(--theme-button-disabled);
         cursor: default;
+
+        .btn-icon {
+          color: var(--theme-trans-color);
+        }
         &:hover {
-          color: var(--content-color);
+          color: var(--theme-trans-color);
           .btn-icon {
-            color: var(--content-color);
+            color: var(--theme-trans-color);
           }
         }
       }
@@ -515,7 +529,7 @@
         cursor: pointer;
 
         &:hover {
-          background-color: var(--noborder-bg-hover);
+          background-color: var(--theme-button-hovered);
           .btn-icon {
             &.normal {
               color: var(--caption-color);
@@ -528,14 +542,14 @@
             }
           }
           .time-divider {
-            background-color: var(--button-border-hover);
+            background-color: var(--theme-divider-color);
           }
         }
         &:focus-within {
-          background-color: var(--button-bg-color);
+          background-color: var(--theme-button-focused);
           border-color: var(--primary-edit-border-color);
           &:hover {
-            background-color: var(--button-bg-color);
+            background-color: var(--theme-button-hovered);
           }
         }
       }
@@ -553,13 +567,12 @@
     &.link {
       padding: 0 0.875rem;
       width: 100%;
-      height: 2.25rem;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
       &:hover {
-        background-color: var(--body-color);
-        border-color: var(--divider-color);
+        background-color: var(--theme-bg-color);
+        border-color: var(--theme-divider-color);
         .btn-icon {
-          color: var(--content-color);
+          color: var(--theme-content-color);
         }
       }
       &.edit {
@@ -567,6 +580,27 @@
       }
     }
 
+    &.secondary {
+      padding: 0 0.625rem;
+      color: var(--theme-caption-color);
+      background-color: var(--theme-button-enabled);
+      border-color: var(--theme-button-border);
+
+      .btn-icon {
+        color: var(--theme-content-color);
+      }
+      &:hover {
+        background-color: var(--theme-button-hovered);
+        border-color: var(--theme-divider-color);
+        .btn-icon {
+          color: var(--theme-content-color);
+        }
+      }
+      // &.edit {
+      //   padding: 0 0.5rem;
+      // }
+    }
+
     .close-btn {
       display: flex;
       justify-content: center;
@@ -574,15 +608,15 @@
       margin: 0 0.25rem;
       width: 0.75rem;
       height: 0.75rem;
-      color: var(--content-color);
-      background-color: var(--button-bg-color);
+      color: var(--theme-content-color);
+      background-color: var(--theme-button-enabled);
       outline: none;
       border-radius: 50%;
       cursor: pointer;
 
       &:hover {
         color: var(--accent-color);
-        background-color: var(--button-bg-hover);
+        background-color: var(--theme-button-hovered);
       }
     }
 
@@ -614,7 +648,7 @@
       width: 1px;
       min-width: 1px;
       height: 0.75rem;
-      background-color: var(--button-border-color);
+      background-color: var(--theme-divider-color);
     }
     .separator {
       margin: 0 0.1rem;
diff --git a/plugins/tracker-resources/src/components/DueDatePopup.svelte b/packages/ui/src/components/calendar/DueDatePopup.svelte
similarity index 79%
rename from plugins/tracker-resources/src/components/DueDatePopup.svelte
rename to packages/ui/src/components/calendar/DueDatePopup.svelte
index 7329d59eb0..c309bbdce4 100644
--- a/plugins/tracker-resources/src/components/DueDatePopup.svelte
+++ b/packages/ui/src/components/calendar/DueDatePopup.svelte
@@ -13,8 +13,11 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Icon, Label, IconDPCalendarOver, IconDPCalendar } from '@hcengineering/ui'
-  import tracker from '../plugin'
+  import DPCalendar from './icons/DPCalendar.svelte'
+  import DPCalendarOver from './icons/DPCalendarOver.svelte'
+  import ui from '../../plugin'
+  import Icon from '../Icon.svelte'
+  import Label from '../Label.svelte'
 
   export let formattedDate: string = ''
   export let daysDifference: number = 0
@@ -29,18 +32,18 @@
       class:mIconContainerWarning={iconModifier === 'warning'}
       class:mIconContainerCritical={iconModifier === 'critical' || iconModifier === 'overdue'}
     >
-      <Icon icon={isOverdue ? IconDPCalendarOver : IconDPCalendar} size={'small'} />
+      <Icon icon={isOverdue ? DPCalendarOver : DPCalendar} size={'small'} />
     </div>
     <div class="messageContainer">
       <div class="title">
         <Label
-          label={isOverdue ? tracker.string.DueDatePopupOverdueTitle : tracker.string.DueDatePopupTitle}
+          label={isOverdue ? ui.string.DueDatePopupOverdueTitle : ui.string.DueDatePopupTitle}
           params={{ value: formattedDate }}
         />
       </div>
       <div class="description">
         <Label
-          label={isOverdue ? tracker.string.DueDatePopupOverdueDescription : tracker.string.DueDatePopupDescription}
+          label={isOverdue ? ui.string.DueDatePopupOverdueDescription : ui.string.DueDatePopupDescription}
           params={{ value: daysDifference }}
         />
       </div>
diff --git a/packages/ui/src/components/calendar/DueDatePresenter.svelte b/packages/ui/src/components/calendar/DueDatePresenter.svelte
new file mode 100644
index 0000000000..a6caa682d5
--- /dev/null
+++ b/packages/ui/src/components/calendar/DueDatePresenter.svelte
@@ -0,0 +1,89 @@
+<!--
+// 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 { Timestamp } from '@hcengineering/core'
+  import DueDatePopup from './DueDatePopup.svelte'
+  import { tooltip } from '../../tooltips'
+  import DatePresenter from './DatePresenter.svelte'
+  import { getDaysDifference } from './internal/DateUtils'
+  import { ButtonKind } from '../../types'
+
+  export let value: number | null = null
+  export let shouldRender: boolean = true
+  export let onChange: (newDate: number | null) => void
+  export let kind: ButtonKind = 'link'
+  export let editable: boolean = true
+
+  const today = new Date(new Date(Date.now()).setHours(0, 0, 0, 0))
+  $: isOverdue = value !== null && value < today.getTime()
+  $: dueDate = value === null ? null : new Date(value)
+  $: daysDifference = dueDate === null ? null : getDaysDifference(today, dueDate)
+  $: iconModifier = getDueDateIconModifier(isOverdue, daysDifference)
+  let formattedDate = getFormattedDate(value)
+  $: formattedDate = getFormattedDate(value)
+
+  function getFormattedDate (value: number | null): string {
+    return !value ? '' : new Date(value).toLocaleString('default', { month: 'short', day: 'numeric' })
+  }
+
+  const handleDueDateChanged = async (event: CustomEvent<Timestamp>) => {
+    const newDate = event.detail
+
+    if (newDate === undefined || value === newDate || !editable) {
+      return
+    }
+
+    onChange(newDate)
+  }
+
+  const WARNING_DAYS = 7
+
+  const getDueDateIconModifier = (
+    isOverdue: boolean,
+    daysDifference: number | null
+  ): 'overdue' | 'critical' | 'warning' | undefined => {
+    if (isOverdue) {
+      return 'overdue'
+    }
+
+    if (daysDifference === 0) {
+      return 'critical'
+    }
+
+    if (daysDifference !== null && daysDifference <= WARNING_DAYS) {
+      return 'warning'
+    }
+  }
+</script>
+
+{#if shouldRender}
+  <div
+    class="clear-mins"
+    use:tooltip={formattedDate
+      ? {
+          direction: 'top',
+          component: DueDatePopup,
+          props: {
+            formattedDate,
+            daysDifference,
+            isOverdue,
+            iconModifier
+          }
+        }
+      : undefined}
+  >
+    <DatePresenter {value} {editable} icon={iconModifier} {kind} on:change={handleDueDateChanged} />
+  </div>
+{/if}
diff --git a/packages/ui/src/components/calendar/MonthCalendar.svelte b/packages/ui/src/components/calendar/MonthCalendar.svelte
index e219356c82..c06fbe9d81 100644
--- a/packages/ui/src/components/calendar/MonthCalendar.svelte
+++ b/packages/ui/src/components/calendar/MonthCalendar.svelte
@@ -87,9 +87,6 @@
     grid-auto-columns: max-content;
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
-  .weekend {
-    background-color: var(--button-bg-color);
-  }
   .cell {
     height: calc(100% - 5px);
     width: calc(100% - 5px);
@@ -98,10 +95,16 @@
     cursor: pointer;
   }
   .cell:hover {
-    background-color: var(--toggle-bg-hover);
     color: var(--primary-button-color);
+    background-color: var(--highlight-hover);
+  }
+  .weekend {
+    background-color: var(--highlight-select);
+    &:hover {
+      background-color: var(--highlight-select-hover);
+    }
   }
   .wrongMonth {
-    color: var(--grayscale-grey-03);
+    color: var(--theme-trans-color);
   }
 </style>
diff --git a/packages/ui/src/components/calendar/WeekCalendar.svelte b/packages/ui/src/components/calendar/WeekCalendar.svelte
index 6e35b9dd79..ceebfc699c 100644
--- a/packages/ui/src/components/calendar/WeekCalendar.svelte
+++ b/packages/ui/src/components/calendar/WeekCalendar.svelte
@@ -43,6 +43,7 @@
       {#each [...Array(displayedDaysCount).keys()] as dayOfWeek}
         {@const day = getDay(weekMonday, dayOfWeek)}
         <th>
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div
             class="antiTable-cells cursor-pointer uppercase flex-col-center"
             class:today={areDatesEqual(todayDate, day)}
@@ -88,7 +89,7 @@
     width: 5rem;
   }
   .today {
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
   }
   .calendar-td {
     padding: 0;
@@ -99,7 +100,7 @@
     width: calc(calc(100% - 50px) / 7);
   }
   .cell:hover:not(.wrongMonth) {
-    background-color: var(--toggle-bg-hover);
     color: var(--primary-button-color);
+    background-color: var(--highlight-hover);
   }
 </style>
diff --git a/packages/ui/src/components/calendar/YearCalendar.svelte b/packages/ui/src/components/calendar/YearCalendar.svelte
index cf2f4e7606..074bd0bdcd 100644
--- a/packages/ui/src/components/calendar/YearCalendar.svelte
+++ b/packages/ui/src/components/calendar/YearCalendar.svelte
@@ -37,8 +37,8 @@
 
 <div class="year-erp-calendar">
   {#each [...Array(12).keys()] as m}
-    <div class="antiComponentBox flex-grow flex-wrap" style={`min-width: ${minWidth};`}>
-      {getMonthName(month(currentDate, m))}
+    <div class="antiComponentBox flex-col flex-grow flex-wrap" style={`min-width: ${minWidth};`}>
+      <span class="month-caption">{getMonthName(month(currentDate, m))}</span>
       <MonthCalendar
         {cellHeight}
         weekFormat="narrow"
@@ -63,4 +63,11 @@
     column-gap: 1rem;
     border-collapse: collapse;
   }
+  .month-caption {
+    margin: 0.5rem 0.75rem 0.75rem;
+    font-weight: 500;
+    font-size: 0.8125rem;
+    text-transform: uppercase;
+    color: var(--theme-dark-color);
+  }
 </style>
diff --git a/packages/ui/src/components/icons/Attachment.svelte b/packages/ui/src/components/icons/Attachment.svelte
index 422e220f98..674db6f10c 100644
--- a/packages/ui/src/components/icons/Attachment.svelte
+++ b/packages/ui/src/components/icons/Attachment.svelte
@@ -20,6 +20,6 @@
 
 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M12.6429 7.69048L8.92925 11.4041C7.48164 12.8517 5.34347 13.0101 4.16667 11.8333C2.98733 10.654 3.14447 8.52219 4.59216 7.07451L8.00206 3.66461C8.93557 2.73109 10.2976 2.63095 11.0333 3.36667C11.7681 4.10139 11.6658 5.4675 10.7361 6.39727L7.32363 9.8097C6.90202 10.2313 6.32171 10.2741 6.02381 9.97619C5.72651 9.6789 5.76949 9.09718 6.1989 8.66776L9.29048 5.57619C9.56662 5.30005 9.56662 4.85233 9.29048 4.57619C9.01433 4.30005 8.56662 4.30005 8.29048 4.57619L5.1989 7.66776C4.24737 8.6193 4.13865 10.091 5.02381 10.9762C5.9095 11.8619 7.37984 11.7535 8.32363 10.8097L11.7361 7.39727C13.1876 5.94573 13.3564 3.68975 12.0333 2.36667C10.7099 1.04326 8.45782 1.20884 7.00206 2.66461L3.59216 6.07451C1.62229 8.04437 1.39955 11.0662 3.16667 12.8333C4.93146 14.5981 7.9596 14.3737 9.92925 12.4041L13.6429 8.69048C13.919 8.41433 13.919 7.96662 13.6429 7.69048C13.3667 7.41433 12.919 7.41433 12.6429 7.69048Z"
+    d="M3,8.5L8.1,3c1.1-1.2,2.9-1.2,4,0c1.1,1.2,1.1,3,0,4.2l-5.9,6.3c-0.4,0.5-1.1,0.5-1.6,0c-0.4-0.5-0.4-1.2,0-1.7l5.9-6.3c0.2-0.2,0.2-0.6,0-0.8c-0.2-0.2-0.6-0.2-0.8,0L3.7,11c-0.9,0.9-0.9,2.4,0,3.3c0.9,0.9,2.3,0.9,3.2,0l5.9-6.3c1.5-1.6,1.5-4.2,0-5.8c-1.5-1.6-4-1.6-5.5,0L2.2,7.6c-0.2,0.2-0.2,0.6,0,0.8C2.4,8.7,2.7,8.7,3,8.5z"
   />
 </svg>
diff --git a/packages/ui/src/components/icons/CollapseArrow.svelte b/packages/ui/src/components/icons/CollapseArrow.svelte
new file mode 100644
index 0000000000..4ec4f10386
--- /dev/null
+++ b/packages/ui/src/components/icons/CollapseArrow.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.6572 8.00049L6.82861 4.17187L6.82861 11.8291L10.6572 8.00049Z" />
+</svg>
diff --git a/packages/ui/src/components/internal/FontSizeSelector.svelte b/packages/ui/src/components/internal/FontSizeSelector.svelte
index cea8dfb99e..fdb8dc3aed 100644
--- a/packages/ui/src/components/internal/FontSizeSelector.svelte
+++ b/packages/ui/src/components/internal/FontSizeSelector.svelte
@@ -16,6 +16,7 @@
   import { getContext } from 'svelte'
   import FontSize from './icons/FontSize.svelte'
   import { popupstore } from '../../popups'
+  import { deviceOptionsStore as deviceInfo } from '../..'
 
   const { currentFontSize, setFontSize } = getContext('fontsize') as {
     currentFontSize: string
@@ -31,6 +32,7 @@
     setFontSize(fontsizes[current % fontsizes.length])
     $popupstore = $popupstore
   }
+  $: $deviceInfo.fontSize = fontsizes[current % fontsizes.length] === 'normal-font' ? 16 : 14
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte
index 1c288fdaf9..743715a1f9 100644
--- a/packages/ui/src/components/internal/Root.svelte
+++ b/packages/ui/src/components/internal/Root.svelte
@@ -175,7 +175,7 @@
       // min-width: 600px;
       font-size: 12px;
       line-height: 150%;
-      background-color: var(--divider-color);
+      background-color: var(--theme-statusbar-color);
 
       .status-info {
         flex-grow: 1;
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index d55c47ad5b..1f417b88c6 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -72,6 +72,7 @@ export { default as TimePopup } from './components/calendar/TimePopup.svelte'
 export { default as DateRangePresenter } from './components/calendar/DateRangePresenter.svelte'
 export { default as DateTimeRangePresenter } from './components/calendar/DateTimeRangePresenter.svelte'
 export { default as DatePresenter } from './components/calendar/DatePresenter.svelte'
+export { default as DueDatePresenter } from './components/calendar/DueDatePresenter.svelte'
 export { default as DateTimePresenter } from './components/calendar/DateTimePresenter.svelte'
 export { default as StylishEdit } from './components/StylishEdit.svelte'
 export { default as Grid } from './components/Grid.svelte'
@@ -150,6 +151,7 @@ export { default as IconMaxWidth } from './components/icons/MaxWidth.svelte'
 export { default as IconMixin } from './components/icons/Mixin.svelte'
 export { default as IconCircles } from './components/icons/Circles.svelte'
 export { default as IconLike } from './components/icons/Like.svelte'
+export { default as IconCollapseArrow } from './components/icons/CollapseArrow.svelte'
 
 export { default as PanelInstance } from './components/PanelInstance.svelte'
 export { default as Panel } from './components/Panel.svelte'
@@ -205,6 +207,7 @@ export const deviceOptionsStore = writable<DeviceOptions>({
   docHeight: 0,
   isPortrait: false,
   isMobile: false,
+  fontSize: 0,
   minWidth: false,
   twoRows: false
 })
diff --git a/packages/ui/src/location.ts b/packages/ui/src/location.ts
index 172e167df9..ec1e47dac7 100644
--- a/packages/ui/src/location.ts
+++ b/packages/ui/src/location.ts
@@ -13,9 +13,10 @@
 // limitations under the License.
 //
 
-import { writable, derived } from 'svelte/store'
-import { Location as PlatformLocation } from './types'
+import { derived, writable } from 'svelte/store'
 import { closePopup } from './popups'
+import justClone from 'just-clone'
+import { Location as PlatformLocation } from './types'
 
 export function locationToUrl (location: PlatformLocation): string {
   let result = '/'
@@ -103,12 +104,23 @@ export function getCurrentLocation (): PlatformLocation {
   return parseLocation(window.location)
 }
 
+export function getCurrentResolvedLocation (): PlatformLocation {
+  return justClone(resolvedLocation)
+}
+
 const locationWritable = writable(getCurrentLocation())
 window.addEventListener('popstate', () => {
   locationWritable.set(getCurrentLocation())
 })
 
 export const location = derived(locationWritable, (loc) => loc)
+export const resolvedLocationStore = writable(getCurrentLocation())
+let resolvedLocation = getCurrentLocation()
+
+export function setResolvedLocation (location: PlatformLocation): void {
+  resolvedLocation = location
+  resolvedLocationStore.set(justClone(location))
+}
 
 export function navigate (location: PlatformLocation, store = true): void {
   closePopup()
diff --git a/packages/ui/src/plugin.ts b/packages/ui/src/plugin.ts
index 301c1f845e..4b2d0f0487 100644
--- a/packages/ui/src/plugin.ts
+++ b/packages/ui/src/plugin.ts
@@ -52,7 +52,7 @@ export const uis = plugin(uiId, {
     AddDueDate: '' as IntlString,
     EditDueDate: '' as IntlString,
     SaveDueDate: '' as IntlString,
-    IssueNeedsToBeCompletedByThisDate: '' as IntlString,
+    NeedsToBeCompletedByThisDate: '' as IntlString,
     English: '' as IntlString,
     Russian: '' as IntlString,
     MinutesBefore: '' as IntlString,
@@ -70,7 +70,11 @@ export const uis = plugin(uiId, {
     DD: '' as IntlString,
     MM: '' as IntlString,
     YYYY: '' as IntlString,
-    HH: '' as IntlString
+    HH: '' as IntlString,
+    DueDatePopupTitle: '' as IntlString,
+    DueDatePopupOverdueTitle: '' as IntlString,
+    DueDatePopupDescription: '' as IntlString,
+    DueDatePopupOverdueDescription: '' as IntlString
   },
   metadata: {
     DefaultApplication: '' as Metadata<AnyComponent>,
diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts
index 7433b58c96..68251b1ea2 100644
--- a/packages/ui/src/popups.ts
+++ b/packages/ui/src/popups.ts
@@ -307,7 +307,7 @@ export function fitPopupElement (
       newProps.top = `${rect.top}px`
       // newProps.bottom = `${Math.min(document.body.clientHeight - rect.bottom + 1, window.innerHeight - rect.top - 1)}px`
       newProps.height = `${Math.min(rect.height, window.innerHeight - rect.top)}px`
-      newProps.left = `${rect.left + 1}px`
+      newProps.left = `${rect.left}px`
       // newProps.right = `${Math.min(document.body.clientWidth - rect.right, window.innerWidth - rect.left - 5)}px`
       newProps.width = `${Math.min(rect.width, window.innerWidth - rect.left)}px`
     } else if (element === 'middle') {
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index a4bdf2fbf6..0eaa351d73 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -12,8 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 //
-import type { Asset, IntlString } from '@hcengineering/platform'
 import { Timestamp } from '@hcengineering/core'
+import type { Asset, IntlString } from '@hcengineering/platform'
 import { /* Metadata, Plugin, plugin, */ Resource /*, Service */ } from '@hcengineering/platform'
 import { /* getContext, */ SvelteComponent } from 'svelte'
 
@@ -28,7 +28,6 @@ export interface Location {
 
 export interface ResolvedLocation {
   loc: Location
-  shouldNavigate: boolean
   defaultLocation: Location
 }
 
@@ -168,7 +167,7 @@ export type TooltipAlignment = 'top' | 'bottom' | 'left' | 'right'
 export type VerticalAlignment = 'top' | 'bottom'
 export type HorizontalAlignment = 'left' | 'right'
 
-export type IconSize = 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'full'
+export type IconSize = 'inline' | 'tiny' | 'x-small' | 'smaller' | 'small' | 'medium' | 'large' | 'x-large' | 'full'
 
 export interface DateOrShift {
   date?: number
@@ -234,10 +233,10 @@ export interface FadeOptions {
   multipler?: Sides<number>
 }
 export const defaultSP: FadeOptions = { multipler: { top: 0, bottom: 0 } }
-export const tableSP: FadeOptions = { multipler: { top: 2.5, bottom: 2.5 } }
+export const tableSP: FadeOptions = { multipler: { top: 3, bottom: 2.5 } }
 export const topSP: FadeOptions = { multipler: { top: 2.5, bottom: 0 } }
 export const tableHRscheduleY: FadeOptions = { multipler: { top: 5, bottom: 0 } }
-export const issueSP: FadeOptions = { multipler: { top: 3, bottom: 0 } }
+export const issueSP: FadeOptions = { multipler: { top: 2.75, bottom: 0 } }
 export const emojiSP: FadeOptions = { multipler: { top: 1.5, bottom: 0 } }
 
 export interface DeviceOptions {
@@ -245,6 +244,7 @@ export interface DeviceOptions {
   docHeight: number
   isPortrait: boolean
   isMobile: boolean
+  fontSize: number
   minWidth: boolean
   twoRows: boolean
   theme?: any
diff --git a/packages/ui/src/utils.ts b/packages/ui/src/utils.ts
index 04dbb1d827..f0b8b6c1a5 100644
--- a/packages/ui/src/utils.ts
+++ b/packages/ui/src/utils.ts
@@ -105,3 +105,21 @@ export function tableToCSV (tableId: string, separator = ','): string {
  * @public
  */
 export const networkStatus = writable<number>(0)
+
+let attractorMx = 0
+let attractorMy = 0
+/**
+ * perform mouse movement checks and call method if they was
+ */
+export function mouseAttractor (op: () => void, diff = 5): (evt: MouseEvent) => void {
+  return (evt: MouseEvent) => {
+    const dx = evt.clientX - attractorMx
+    const dy = evt.clientY - attractorMy
+    attractorMx = evt.clientX
+    attractorMy = evt.clientY
+
+    if (Math.sqrt(dx * dx + dy * dy) > diff) {
+      op()
+    }
+  }
+}
diff --git a/plugins/activity-resources/src/components/Activity.svelte b/plugins/activity-resources/src/components/Activity.svelte
index bccf8a4fdf..9dd6dc41d0 100644
--- a/plugins/activity-resources/src/components/Activity.svelte
+++ b/plugins/activity-resources/src/components/Activity.svelte
@@ -28,6 +28,7 @@
   export let object: Doc
   export let showCommenInput: boolean = true
   export let transparent: boolean = false
+  export let shouldScroll: boolean = false
 
   getResource(notification.function.GetNotificationClient).then((res) => {
     updatesStore = res().docUpdatesStore
@@ -83,11 +84,26 @@
 
   let filtered: DisplayTx[] = []
 
+  let newTxIndexes: number[] = []
+  $: newTxIndexes = getNewTxes(filtered, newTxes)
+
+  function getNewTxes (filtered: DisplayTx[], newTxes: [Ref<TxCUD<Doc>>, number][]): number[] {
+    const res: number[] = []
+    for (let i = 0; i < filtered.length; i++) {
+      if (isNew(filtered[i], newTxes)) {
+        res.push(i)
+      }
+    }
+    return res
+  }
+
   function isNew (tx: DisplayTx | undefined, newTxes: [Ref<TxCUD<Doc>>, number][]): boolean {
     if (tx === undefined) return false
     const index = newTxes.findIndex((p) => p[0] === tx.originTx._id)
     return index !== -1
   }
+
+  $: scrollIndex = shouldScroll ? newTxIndexes[0] ?? -1 : -1
 </script>
 
 <div class="antiSection-header high mt-9" class:invisible={transparent}>
@@ -105,7 +121,13 @@
   {#if filtered}
     <Grid column={1} rowGap={0.75}>
       {#each filtered as tx, i}
-        <TxView {tx} {viewlets} isNew={isNew(tx, newTxes)} isNextNew={isNew(filtered[i + 1], newTxes)} />
+        <TxView
+          {tx}
+          {viewlets}
+          isNew={newTxIndexes.includes(i)}
+          isNextNew={newTxIndexes.includes(i + 1)}
+          shouldScroll={i === scrollIndex}
+        />
       {/each}
     </Grid>
   {/if}
diff --git a/plugins/activity-resources/src/components/TxView.svelte b/plugins/activity-resources/src/components/TxView.svelte
index 7002430f63..c8d2109c11 100644
--- a/plugins/activity-resources/src/components/TxView.svelte
+++ b/plugins/activity-resources/src/components/TxView.svelte
@@ -40,6 +40,7 @@
   import { getValue, TxDisplayViewlet, updateViewlet } from '../utils'
   import TxViewTx from './TxViewTx.svelte'
   import Edit from './icons/Edit.svelte'
+  import { tick } from 'svelte'
 
   export let tx: DisplayTx
   export let viewlets: Map<ActivityKey, TxViewlet>
@@ -47,6 +48,7 @@
   export let isNew: boolean = false
   export let isNextNew: boolean = false
   export let contentHidden: boolean = false
+  export let shouldScroll: boolean = false
   // export let showDocument = false
 
   let ptx: DisplayTx | undefined
@@ -87,6 +89,9 @@
       modelIcon = result.modelIcon
       iconComponent = result.iconComponent
       props = getProps(result.props, edit)
+      if (shouldScroll) {
+        tick().then(scrollIntoView)
+      }
     }
   })
 
@@ -164,10 +169,24 @@
   $: withAvatar = isComment || isMentioned || isAttached
   $: isEmphasized = viewlet?.display === 'emphasized' || model.every((m) => isMessageType(m.attribute))
   $: isColumn = isComment || isEmphasized || hasMessageType
+
+  let htmlElement: HTMLDivElement
+
+  function scrollIntoView () {
+    htmlElement?.scrollIntoView({ behavior: 'auto', block: 'start' })
+    shouldScroll = false
+  }
 </script>
 
 {#if (viewlet !== undefined && !((viewlet?.hideOnRemove ?? false) && tx.removed)) || model.length > 0}
-  <div class="msgactivity-container" class:showIcon class:withAvatar class:isNew class:isNextNew>
+  <div
+    class="msgactivity-container"
+    bind:this={htmlElement}
+    class:showIcon
+    class:withAvatar
+    class:isNew
+    class:isNextNew
+  >
     {#if showIcon}
       {#if withAvatar}
         <div class="msgactivity-avatar">
diff --git a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
index feceb8c17d..4da7451b2a 100644
--- a/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentPresenter.svelte
@@ -25,7 +25,7 @@
 
   const dispatch = createEventDispatcher()
 
-  const maxLenght: number = 16
+  const maxLenght: number = 30
   const trimFilename = (fname: string): string =>
     fname.length > maxLenght ? fname.substr(0, (maxLenght - 1) / 2) + '...' + fname.substr(-(maxLenght - 1) / 2) : fname
 
@@ -83,6 +83,7 @@
             class="remove-btn"
             on:click={(ev) => {
               ev.stopPropagation()
+              ev.preventDefault()
               dispatch('remove')
             }}
           >
diff --git a/plugins/attachment-resources/src/components/AttachmentRefInput.svelte b/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
index ffff3351e9..6e5f8b9116 100644
--- a/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
@@ -246,9 +246,7 @@
   }
 </script>
 
-<svelte:window on:paste={pasteAction} />
-
-<div bind:this={refContainer}>
+<div bind:this={refContainer} on:paste={pasteAction}>
   <input
     bind:this={inputFile}
     multiple
@@ -302,17 +300,17 @@
 <style lang="scss">
   .list {
     padding: 0.5rem;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
     overflow-x: auto;
     overflow-y: hidden;
-    background-color: var(--accent-bg-color);
-    border: 1px solid var(--divider-color);
+    background-color: var(--theme-refinput-color);
+    border: 1px solid var(--theme-divider-color);
     border-radius: 0.5rem 0.5rem 0 0;
     border-bottom: none;
 
     .item + .item {
       padding-left: 1rem;
-      border-left: 1px solid var(--divider-color);
+      border-left: 1px solid var(--theme-divider-color);
     }
   }
 </style>
diff --git a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
index 548014a78d..c1b9aac4ff 100644
--- a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
@@ -298,8 +298,6 @@
   }
 </script>
 
-<svelte:window on:paste={(ev) => (fakeAttach === 'normal' ? pasteAction(ev) : undefined)} />
-
 <input
   bind:this={inputFile}
   multiple
@@ -312,6 +310,7 @@
 
 <div
   class="flex-col clear-mins"
+  on:paste={(ev) => (fakeAttach === 'normal' ? pasteAction(ev) : undefined)}
   on:dragover|preventDefault={() => {}}
   on:dragleave={() => {}}
   on:drop|preventDefault|stopPropagation={(ev) => {
@@ -367,16 +366,16 @@
     margin-top: 0.5rem;
     padding: 0.5rem;
     min-width: 0;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
     overflow-x: auto;
     overflow-y: hidden;
-    background-color: var(--accent-bg-color);
-    border: 1px solid var(--divider-color);
-    border-radius: 0.5rem;
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
+    border-radius: 0.25rem;
 
     .item + .item {
       padding-left: 1rem;
-      border-left: 1px solid var(--divider-color);
+      border-left: 1px solid var(--theme-divider-color);
     }
   }
 </style>
diff --git a/plugins/attachment-resources/src/components/FileBrowser.svelte b/plugins/attachment-resources/src/components/FileBrowser.svelte
index 9a76865f3b..3bb64b6b14 100644
--- a/plugins/attachment-resources/src/components/FileBrowser.svelte
+++ b/plugins/attachment-resources/src/components/FileBrowser.svelte
@@ -17,7 +17,7 @@
   import contact, { Employee, EmployeeAccount } from '@hcengineering/contact'
   import core, { Class, getCurrentAccount, Ref, Space } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
-  import ui, { EditWithIcon, IconSearch, Label, Loading, location, navigate, TabList } from '@hcengineering/ui'
+  import { ActionIcon, IconMoreH, Label, Loading, location, navigate, TabList, SearchEdit } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import { get } from 'svelte/store'
   import { dateFileBrowserFilters, FileBrowserSortMode, fileTypeFileBrowserFilters, sortModeToOptionObject } from '..'
@@ -101,14 +101,30 @@
 </script>
 
 {#if withHeader}
-  <div class="ac-header full divide">
+  <div class="ac-header full divide caption-height">
     <div class="ac-header__wrap-title">
       <span class="ac-header__title"><Label label={attachment.string.FileBrowser} /></span>
     </div>
-    <EditWithIcon icon={IconSearch} size={'small'} bind:value={search} placeholder={ui.string.SearchDots} />
+    <div class="mb-1 clear-mins">
+      <TabList
+        items={[
+          { id: 'table', icon: view.icon.Table, tooltip: attachment.string.FileBrowserListView },
+          { id: 'card', icon: view.icon.Card, tooltip: attachment.string.FileBrowserGridView }
+        ]}
+        selected={isListDisplayMode ? 'table' : 'card'}
+        on:select={(result) => {
+          if (result.detail !== undefined) isListDisplayMode = result.detail === 'table' ?? false
+        }}
+      />
+    </div>
   </div>
 {/if}
-<div class="ac-header full">
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={() => {}} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
+  </div>
   <FileBrowserFilters
     {requestedSpaceClasses}
     {spaceId}
@@ -117,18 +133,6 @@
     bind:selectedDateId
     bind:selectedFileTypeId
   />
-  <TabList
-    items={[
-      { id: 'table', icon: view.icon.Table, tooltip: attachment.string.FileBrowserListView },
-      { id: 'card', icon: view.icon.Card, tooltip: attachment.string.FileBrowserGridView }
-    ]}
-    kind={'secondary'}
-    size={'small'}
-    selected={isListDisplayMode ? 'table' : 'card'}
-    on:select={(result) => {
-      if (result.detail !== undefined) isListDisplayMode = result.detail === 'table' ?? false
-    }}
-  />
 </div>
 <div class="group">
   <div class="groupHeader">
diff --git a/plugins/attachment-resources/src/components/FileBrowserFilters.svelte b/plugins/attachment-resources/src/components/FileBrowserFilters.svelte
index d06784b425..21fd4228ca 100644
--- a/plugins/attachment-resources/src/components/FileBrowserFilters.svelte
+++ b/plugins/attachment-resources/src/components/FileBrowserFilters.svelte
@@ -29,54 +29,48 @@
   export let selectedFileTypeId: string
 </script>
 
-<div class="filterBlockContainer">
-  <div class="simpleFilterButton">
-    <Component
-      is={contact.component.UserBoxList}
-      props={{
-        items: selectedParticipants,
-        label: attachment.string.FileBrowserFilterFrom
-      }}
-      on:update={(evt) => {
-        selectedParticipants = evt.detail
-      }}
-    />
-  </div>
-  <div class="simpleFilterButton">
-    <SpaceMultiBoxList
-      _classes={requestedSpaceClasses}
-      label={attachment.string.FileBrowserFilterIn}
-      selectedItems={spaceId ? [spaceId] : []}
-      on:update={(evt) => {
-        selectedSpaces = evt.detail
-      }}
-    />
-  </div>
-  <div class="simpleFilterButton">
-    <DropdownLabelsIntl
-      items={dateFileBrowserFilters}
-      label={attachment.string.FileBrowserFilterDate}
-      bind:selected={selectedDateId}
-    />
-  </div>
-  <div class="simpleFilterButton">
-    <DropdownLabelsIntl
-      items={fileTypeFileBrowserFilters}
-      label={attachment.string.FileBrowserFilterFileType}
-      bind:selected={selectedFileTypeId}
-    />
-  </div>
+<div class="filterBlockContainer clear-mins gap-2">
+  <Component
+    is={contact.component.UserBoxList}
+    props={{
+      items: selectedParticipants,
+      label: attachment.string.FileBrowserFilterFrom,
+      kind: 'transparent',
+      size: 'medium'
+    }}
+    on:update={(evt) => {
+      selectedParticipants = evt.detail
+    }}
+  />
+  <SpaceMultiBoxList
+    _classes={requestedSpaceClasses}
+    label={attachment.string.FileBrowserFilterIn}
+    selectedItems={spaceId ? [spaceId] : []}
+    kind={'transparent'}
+    size={'medium'}
+    on:update={(evt) => {
+      selectedSpaces = evt.detail
+    }}
+  />
+  <DropdownLabelsIntl
+    items={dateFileBrowserFilters}
+    label={attachment.string.FileBrowserFilterDate}
+    bind:selected={selectedDateId}
+    kind={'transparent'}
+    size={'medium'}
+  />
+  <DropdownLabelsIntl
+    items={fileTypeFileBrowserFilters}
+    label={attachment.string.FileBrowserFilterFileType}
+    bind:selected={selectedFileTypeId}
+    kind={'transparent'}
+    size={'medium'}
+  />
 </div>
 
 <style lang="scss">
   .filterBlockContainer {
     display: flex;
     flex-flow: row wrap;
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
-  .simpleFilterButton {
-    max-width: 12rem;
-    margin: 0.125rem 0.5rem 0.125rem 0;
   }
 </style>
diff --git a/plugins/board-resources/src/components/BoardHeader.svelte b/plugins/board-resources/src/components/BoardHeader.svelte
index cea189a4b7..f3dd39f3a1 100644
--- a/plugins/board-resources/src/components/BoardHeader.svelte
+++ b/plugins/board-resources/src/components/BoardHeader.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import core, { Ref, Space, WithLookup } from '@hcengineering/core'
-  import { Button, getCurrentLocation, navigate, location, TabList, Icon } from '@hcengineering/ui'
   import { createQuery } from '@hcengineering/presentation'
-  import board from '../plugin'
+  import { Button, Icon, TabList, getCurrentResolvedLocation, location, navigate } from '@hcengineering/ui'
   import { Viewlet } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
+  import board from '../plugin'
 
   export let spaceId: Ref<Space> | undefined
   export let viewlets: WithLookup<Viewlet>[]
@@ -19,7 +19,7 @@
   })
 
   function showMenu () {
-    const loc = getCurrentLocation()
+    const loc = getCurrentResolvedLocation()
     loc.path[4] = space._id
     navigate(loc)
   }
diff --git a/plugins/board-resources/src/components/KanbanView.svelte b/plugins/board-resources/src/components/KanbanView.svelte
index 4d155fe37e..dbc2841e91 100644
--- a/plugins/board-resources/src/components/KanbanView.svelte
+++ b/plugins/board-resources/src/components/KanbanView.svelte
@@ -95,7 +95,7 @@
 
   let kanbanUI: KanbanUI
   const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
-    kanbanUI.select(offset, of, dir)
+    kanbanUI?.select(offset, of, dir)
   })
   onMount(() => {
     ;(document.activeElement as HTMLElement)?.blur()
@@ -125,6 +125,7 @@
       ...options
     }
   )
+  $: listProvider.update(cards)
   $: groupByDocs = groupBy(cards, 'state')
 
   const getUpdateProps = (doc: Doc, category: CategoryType): DocumentUpdate<DocWithRank> | undefined => {
@@ -151,11 +152,8 @@
   getGroupByValues={(groupByDocs, category) => getGroupByValues(groupByDocs, category)}
   {setGroupByValues}
   categories={states.map((it) => it._id)}
-  on:content={(evt) => {
-    listProvider.update(evt.detail)
-  }}
   on:obj-focus={(evt) => {
-    listProvider.updateFocus(evt.detail)
+    listProvider.updateFocus(evt.detail.object)
   }}
   {groupByDocs}
   {getUpdateProps}
diff --git a/plugins/calendar-resources/src/components/CalendarView.svelte b/plugins/calendar-resources/src/components/CalendarView.svelte
index 13e22bf298..2ce37e8b3a 100644
--- a/plugins/calendar-resources/src/components/CalendarView.svelte
+++ b/plugins/calendar-resources/src/components/CalendarView.svelte
@@ -26,7 +26,8 @@
     Scroller,
     showPopup,
     WeekCalendar,
-    YearCalendar
+    YearCalendar,
+    defaultSP
   } from '@hcengineering/ui'
   import { BuildModelKey } from '@hcengineering/view'
   import { CalendarMode } from '../index'
@@ -166,173 +167,166 @@
   let indexes = new Map<Ref<Event>, number>()
 </script>
 
-<div class="fs-title ml-10 mb-2 flex-row-center">
+<div class="text-lg fs-bold px-10 my-4 flex-no-shrink clear-mins">
   {label(currentDate, mode)}
 </div>
-
-<div class="flex gap-2 mb-4 ml-10">
-  <Button
-    size={'small'}
-    label={calendar.string.ModeDay}
-    on:click={() => {
-      mode = CalendarMode.Day
-    }}
-  />
-  <Button
-    size={'small'}
-    label={calendar.string.ModeWeek}
-    on:click={() => {
-      mode = CalendarMode.Week
-    }}
-  />
-  <Button
-    size={'small'}
-    label={calendar.string.ModeMonth}
-    on:click={() => {
-      mode = CalendarMode.Month
-    }}
-  />
-  <Button
-    size={'small'}
-    label={calendar.string.ModeYear}
-    on:click={() => {
-      mode = CalendarMode.Year
-    }}
-  />
-  <div class="flex ml-4 gap-2">
+<div class="flex-between mb-4 px-10 flex-no-shrink clear-mins">
+  <div class="flex-row-center gap-2">
     <Button
       icon={IconBack}
-      size={'small'}
+      kind={'transparent'}
       on:click={() => {
         inc(-1)
       }}
     />
     <Button
-      size={'small'}
       label={calendar.string.Today}
+      kind={'transparent'}
       on:click={() => {
         inc(0)
       }}
     />
     <Button
       icon={IconForward}
-      size={'small'}
+      kind={'transparent'}
       on:click={() => {
         inc(1)
       }}
     />
   </div>
+  <div class="flex-row-center gap-2 clear-mins">
+    <Button
+      label={calendar.string.ModeDay}
+      on:click={() => {
+        mode = CalendarMode.Day
+      }}
+    />
+    <Button
+      label={calendar.string.ModeWeek}
+      on:click={() => {
+        mode = CalendarMode.Week
+      }}
+    />
+    <Button
+      label={calendar.string.ModeMonth}
+      on:click={() => {
+        mode = CalendarMode.Month
+      }}
+    />
+    <Button
+      label={calendar.string.ModeYear}
+      on:click={() => {
+        mode = CalendarMode.Year
+      }}
+    />
+  </div>
 </div>
 
-<div class="ml-10 mr-6 h-full clear-mins">
+<Scroller
+  padding={'0 2.25rem'}
+  fade={mode === CalendarMode.Week || mode === CalendarMode.Day ? { multipler: { top: 3, bottom: 0 } } : defaultSP}
+>
   {#if mode === CalendarMode.Year}
-    <Scroller>
-      <YearCalendar
-        {mondayStart}
-        cellHeight={'2.5rem'}
-        bind:selectedDate
-        bind:currentDate
-        on:change={(e) => {
-          currentDate = e.detail
-          if (areDatesEqual(selectedDate, currentDate)) {
-            mode = CalendarMode.Month
-          }
-          selectedDate = e.detail
-        }}
-      >
-        <svelte:fragment slot="cell" let:date let:today let:selected let:wrongMonth>
-          <Day
-            events={findEvents(objects, date)}
-            {date}
-            {_class}
-            {baseMenuClass}
-            {options}
-            {config}
-            {today}
-            {selected}
-            {wrongMonth}
-            {query}
-          />
-        </svelte:fragment>
-      </YearCalendar>
-    </Scroller>
+    <YearCalendar
+      {mondayStart}
+      cellHeight={'2.5rem'}
+      bind:selectedDate
+      bind:currentDate
+      on:change={(e) => {
+        currentDate = e.detail
+        if (areDatesEqual(selectedDate, currentDate)) {
+          mode = CalendarMode.Month
+        }
+        selectedDate = e.detail
+      }}
+    >
+      <svelte:fragment slot="cell" let:date let:today let:selected let:wrongMonth>
+        <Day
+          events={findEvents(objects, date)}
+          {date}
+          {_class}
+          {baseMenuClass}
+          {options}
+          {config}
+          {today}
+          {selected}
+          {wrongMonth}
+          {query}
+        />
+      </svelte:fragment>
+    </YearCalendar>
   {:else if mode === CalendarMode.Month}
-    <div class="flex flex-grow">
-      <MonthCalendar {mondayStart} cellHeight={'8.5rem'} bind:selectedDate bind:currentDate>
-        <svelte:fragment slot="cell" let:date let:today let:selected let:wrongMonth>
-          <Day
-            events={findEvents(objects, date)}
-            {date}
-            size={'huge'}
-            {_class}
-            {baseMenuClass}
-            {options}
-            {config}
-            {today}
-            {selected}
-            {wrongMonth}
-            {query}
-            on:select={(e) => {
-              currentDate = e.detail
-              if (areDatesEqual(selectedDate, currentDate)) {
-                mode = CalendarMode.Day
-              }
-              selectedDate = e.detail
-            }}
-            on:create={(e) => {
-              showCreateDialog(e.detail, false)
-            }}
-          />
-        </svelte:fragment>
-      </MonthCalendar>
-    </div>
+    <MonthCalendar {mondayStart} cellHeight={'8.5rem'} bind:selectedDate bind:currentDate>
+      <svelte:fragment slot="cell" let:date let:today let:selected let:wrongMonth>
+        <Day
+          events={findEvents(objects, date)}
+          {date}
+          size={'huge'}
+          {_class}
+          {baseMenuClass}
+          {options}
+          {config}
+          {today}
+          {selected}
+          {wrongMonth}
+          {query}
+          on:select={(e) => {
+            currentDate = e.detail
+            if (areDatesEqual(selectedDate, currentDate)) {
+              mode = CalendarMode.Day
+            }
+            selectedDate = e.detail
+          }}
+          on:create={(e) => {
+            showCreateDialog(e.detail, false)
+          }}
+        />
+      </svelte:fragment>
+    </MonthCalendar>
   {:else if mode === CalendarMode.Week}
-    <Scroller>
-      <WeekCalendar
-        {mondayStart}
-        cellHeight={'4.5rem'}
-        bind:selectedDate
-        bind:currentDate
-        on:select={(e) => {
-          currentDate = e.detail
-          selectedDate = e.detail
-          mode = CalendarMode.Day
-        }}
-      >
-        <svelte:fragment slot="cell" let:date>
-          <Hour
-            events={findEvents(objects, date, true)}
-            {date}
-            bind:indexes
-            on:create={(e) => {
-              showCreateDialog(e.detail, true)
-            }}
-          />
-        </svelte:fragment>
-      </WeekCalendar>
-    </Scroller>
+    <WeekCalendar
+      {mondayStart}
+      cellHeight={'4.5rem'}
+      bind:selectedDate
+      bind:currentDate
+      on:select={(e) => {
+        currentDate = e.detail
+        selectedDate = e.detail
+        mode = CalendarMode.Day
+      }}
+    >
+      <svelte:fragment slot="cell" let:date>
+        <Hour
+          events={findEvents(objects, date, true)}
+          {date}
+          bind:indexes
+          on:create={(e) => {
+            showCreateDialog(e.detail, true)
+          }}
+        />
+      </svelte:fragment>
+    </WeekCalendar>
   {:else if mode === CalendarMode.Day}
-    <Scroller>
-      <WeekCalendar
-        {mondayStart}
-        displayedDaysCount={1}
-        startFromWeekStart={false}
-        cellHeight={'4.5rem'}
-        bind:selectedDate
-        bind:currentDate
-      >
-        <svelte:fragment slot="cell" let:date>
-          <Hour
-            events={findEvents(objects, date, true)}
-            {date}
-            bind:indexes
-            wide
-            on:create={(e) => {
-              showCreateDialog(e.detail, true)
-            }}
-          />
-        </svelte:fragment>
-      </WeekCalendar>
-    </Scroller>
+    <WeekCalendar
+      {mondayStart}
+      displayedDaysCount={1}
+      startFromWeekStart={false}
+      cellHeight={'4.5rem'}
+      bind:selectedDate
+      bind:currentDate
+    >
+      <svelte:fragment slot="cell" let:date>
+        <Hour
+          events={findEvents(objects, date, true)}
+          {date}
+          bind:indexes
+          wide
+          on:create={(e) => {
+            showCreateDialog(e.detail, true)
+          }}
+        />
+      </svelte:fragment>
+    </WeekCalendar>
   {/if}
-</div>
+</Scroller>
+<div class="min-h-4 max-h-4 h-4 flex-no-shrink" />
diff --git a/plugins/calendar-resources/src/components/CreateEvent.svelte b/plugins/calendar-resources/src/components/CreateEvent.svelte
index 05ad047d07..53e2ab8801 100644
--- a/plugins/calendar-resources/src/components/CreateEvent.svelte
+++ b/plugins/calendar-resources/src/components/CreateEvent.svelte
@@ -104,6 +104,8 @@
       labelNull={ui.string.SelectDate}
       on:change={async (event) => await handleNewStartDate(event.detail)}
       mode={DateRangeMode.DATETIME}
+      kind={'secondary'}
+      size={'large'}
       editable
     />
     <DateRangePresenter
@@ -112,8 +114,10 @@
       labelNull={calendar.string.DueTo}
       on:change={async (event) => await handleNewDueDate(event.detail)}
       mode={DateRangeMode.DATETIME}
+      kind={'secondary'}
+      size={'large'}
       editable
     />
-    <UserBoxList bind:items={participants} label={calendar.string.Participants} />
+    <UserBoxList bind:items={participants} label={calendar.string.Participants} kind={'secondary'} size={'large'} />
   </svelte:fragment>
 </Card>
diff --git a/plugins/calendar-resources/src/components/CreateReminder.svelte b/plugins/calendar-resources/src/components/CreateReminder.svelte
index d8229d38fa..6f17d56e12 100644
--- a/plugins/calendar-resources/src/components/CreateReminder.svelte
+++ b/plugins/calendar-resources/src/components/CreateReminder.svelte
@@ -72,7 +72,14 @@
   <EditBox bind:value={title} placeholder={calendar.string.Title} kind={'large-style'} focus />
   <svelte:fragment slot="pool">
     <!-- <TimeShiftPicker title={calendar.string.Date} bind:value direction="after" /> -->
-    <DateRangePresenter bind:value mode={DateRangeMode.DATETIME} editable={true} labelNull={ui.string.SelectDate} />
-    <UserBoxList bind:items={participants} label={calendar.string.Participants} />
+    <DateRangePresenter
+      bind:value
+      mode={DateRangeMode.DATETIME}
+      editable={true}
+      labelNull={ui.string.SelectDate}
+      kind={'secondary'}
+      size={'large'}
+    />
+    <UserBoxList bind:items={participants} label={calendar.string.Participants} kind={'secondary'} size={'large'} />
   </svelte:fragment>
 </Card>
diff --git a/plugins/calendar-resources/src/components/Events.svelte b/plugins/calendar-resources/src/components/Events.svelte
index 4931adeb17..43e647dca6 100644
--- a/plugins/calendar-resources/src/components/Events.svelte
+++ b/plugins/calendar-resources/src/components/Events.svelte
@@ -21,13 +21,14 @@
     AnyComponent,
     Button,
     Component,
-    Icon,
-    IconAdd,
+    ActionIcon,
     Label,
     Loading,
     SearchEdit,
     showPopup,
-    TabList
+    TabList,
+    IconMoreH,
+    IconAdd
   } from '@hcengineering/ui'
   import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
@@ -38,7 +39,7 @@
     viewOptionStore
   } from '@hcengineering/view-resources'
   import calendar from '../plugin'
-  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  // import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
   export let _class: Ref<Class<Event>> = calendar.class.Event
   export let space: Ref<Space> | undefined = undefined
@@ -107,45 +108,42 @@
     }
   })
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 
   $: viewOptions = getViewOptions(selectedViewlet, $viewOptionStore)
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      <div class="ac-header__icon"><Icon icon={viewIcon} size={'small'} /></div>
-      <span class="ac-header__title"><Label label={viewLabel} /></span>
-      <div class="ml-4"><FilterButton {_class} /></div>
-    </div>
-
-    <SearchEdit
-      bind:value={search}
-      on:change={() => {
-        updateResultQuery(search)
-      }}
-    />
+<div class="ac-header full divide">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label label={viewLabel} /></span>
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
-    <Button icon={IconAdd} label={createLabel} kind={'primary'} size={'small'} on:click={showCreateDialog} />
 
+  <div class="ac-header-full medium-gap mb-1">
     {#if viewlets.length > 1}
       <TabList
         items={viewslist}
         multiselect={false}
         selected={selectedViewlet?._id}
-        kind={'secondary'}
-        size={'small'}
         on:select={(result) => {
           if (result.detail !== undefined) selectedViewlet = viewlets.find((vl) => vl._id === result.detail.id)
         }}
       />
     {/if}
-    <ViewletSettingButton bind:viewOptions viewlet={selectedViewlet} />
+    <Button icon={IconAdd} label={createLabel} kind={'primary'} on:click={showCreateDialog} />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={() => updateResultQuery(search)} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
+    <FilterButton {_class} />
+  </div>
+  <div class="ac-header-full medium-gap">
+    <ViewletSettingButton bind:viewOptions viewlet={selectedViewlet} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
   </div>
 </div>
-
 {#if selectedViewlet?.$lookup?.descriptor?.component}
   {#if loading}
     <Loading />
diff --git a/plugins/chunter-resources/src/components/Channel.svelte b/plugins/chunter-resources/src/components/Channel.svelte
index a3c9e4aa46..63b125e1a3 100644
--- a/plugins/chunter-resources/src/components/Channel.svelte
+++ b/plugins/chunter-resources/src/components/Channel.svelte
@@ -198,6 +198,7 @@
 </script>
 
 <div class="flex-col vScroll" bind:this={div} on:scroll={handleScroll}>
+  <div class="grower" />
   {#if showFixed}
     <div class="ml-2 pr-2 fixed">
       <JumpToDateSelector {selectedDate} fixed on:jumpToDate={handleJumpToDate} />
@@ -224,6 +225,10 @@
 </div>
 
 <style lang="scss">
+  .grower {
+    flex-grow: 10;
+    flex-shrink: 5;
+  }
   .fixed {
     position: absolute;
     align-self: center;
diff --git a/plugins/chunter-resources/src/components/ChannelHeader.svelte b/plugins/chunter-resources/src/components/ChannelHeader.svelte
index c3c8e81361..a0d8c6f384 100644
--- a/plugins/chunter-resources/src/components/ChannelHeader.svelte
+++ b/plugins/chunter-resources/src/components/ChannelHeader.svelte
@@ -38,7 +38,7 @@
   }
 </script>
 
-<div class="ac-header divide full">
+<div class="ac-header divide full caption-height">
   {#if channel}
     <Header
       icon={channel.private ? Lock : classIcon(client, channel._class)}
diff --git a/plugins/chunter-resources/src/components/ChunterBrowser.svelte b/plugins/chunter-resources/src/components/ChunterBrowser.svelte
index 24f31a2977..aaa9b84345 100644
--- a/plugins/chunter-resources/src/components/ChunterBrowser.svelte
+++ b/plugins/chunter-resources/src/components/ChunterBrowser.svelte
@@ -48,7 +48,7 @@
 </script>
 
 <div class="flex-col h-full">
-  <div class="ac-header divide full">
+  <div class="ac-header divide full caption-height">
     <Header icon={workbench.icon.Search} intlLabel={plugin.string.ChunterBrowser} />
   </div>
   <div class="h-full browser">
diff --git a/plugins/chunter-resources/src/components/DmHeader.svelte b/plugins/chunter-resources/src/components/DmHeader.svelte
index 539adf5836..3a22495688 100644
--- a/plugins/chunter-resources/src/components/DmHeader.svelte
+++ b/plugins/chunter-resources/src/components/DmHeader.svelte
@@ -54,10 +54,11 @@
   }
 </script>
 
-<div class="ac-header divide full">
+<div class="ac-header divide full caption-height">
   {#if dm}
     {#await getDmName(client, dm) then name}
       {#await getEmpolyeeIds() then empolyeeIds}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div class="ac-header__wrap-title" on:click={onSpaceEdit}>
           <div class="ac-header__icon">
             <CombineAvatars _class={contact.class.Employee} items={empolyeeIds} size={'x-small'} />
diff --git a/plugins/chunter-resources/src/components/EditChannelDescriptionAttachments.svelte b/plugins/chunter-resources/src/components/EditChannelDescriptionAttachments.svelte
index 5563089502..5d83280502 100644
--- a/plugins/chunter-resources/src/components/EditChannelDescriptionAttachments.svelte
+++ b/plugins/chunter-resources/src/components/EditChannelDescriptionAttachments.svelte
@@ -18,8 +18,8 @@
   import { AttachmentPresenter, FileDownload } from '@hcengineering/attachment-resources'
   import { ChunterSpace } from '@hcengineering/chunter'
   import { Doc, SortingOrder, getCurrentAccount } from '@hcengineering/core'
-  import { createQuery, getFileUrl, getClient } from '@hcengineering/presentation'
-  import { getCurrentLocation, showPopup, IconMoreV, Label, navigate, Icon, Menu } from '@hcengineering/ui'
+  import { createQuery, getClient, getFileUrl } from '@hcengineering/presentation'
+  import { Icon, IconMoreV, Label, Menu, getCurrentResolvedLocation, navigate, showPopup } from '@hcengineering/ui'
 
   export let channel: ChunterSpace | undefined
   const myAccId = getCurrentAccount()._id
@@ -98,7 +98,7 @@
         <div
           class="showMoreAttachmentsButton"
           on:click={() => {
-            const loc = getCurrentLocation()
+            const loc = getCurrentResolvedLocation()
             loc.path[3] = 'fileBrowser'
             loc.query = channel ? { spaceId: channel._id } : {}
             navigate(loc)
diff --git a/plugins/chunter-resources/src/components/Header.svelte b/plugins/chunter-resources/src/components/Header.svelte
index abba213761..16c9736ca2 100644
--- a/plugins/chunter-resources/src/components/Header.svelte
+++ b/plugins/chunter-resources/src/components/Header.svelte
@@ -28,6 +28,7 @@
 </script>
 
 <div class="ac-header__wrap-description">
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div class="ac-header__wrap-title" on:click>
     {#if icon}<div class="ac-header__icon"><Icon {icon} size={'small'} /></div>{/if}
     {#if label}
diff --git a/plugins/chunter-resources/src/components/JumpToDateSelector.svelte b/plugins/chunter-resources/src/components/JumpToDateSelector.svelte
index bba7303a38..1e310680ba 100644
--- a/plugins/chunter-resources/src/components/JumpToDateSelector.svelte
+++ b/plugins/chunter-resources/src/components/JumpToDateSelector.svelte
@@ -15,11 +15,11 @@
   $: isCurrentYear = time ? new Date(time).getFullYear() === new Date().getFullYear() : undefined
 </script>
 
-<div id={fixed ? '' : time?.toString()} class="flex justify-center mt-5 pr-1 dateSelector">
+<div id={fixed ? '' : time?.toString()} class="flex-center clear-mins dateSelector">
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     bind:this={div}
-    class="mb-1 p-1 border-radius-2 over-underline dateSelectorButton"
+    class="border-radius-4 over-underline dateSelectorButton clear-mins"
     on:click={() => {
       showPopup(DateRangePopup, {}, div, (v) => {
         if (v) {
@@ -30,28 +30,37 @@
     }}
   >
     {#if time}
-      <div>
-        {new Date(time).toLocaleDateString('default', {
-          weekday: 'short',
-          month: 'long',
-          day: 'numeric',
-          year: isCurrentYear ? undefined : 'numeric'
-        })}
-      </div>
+      {new Date(time).toLocaleDateString('default', {
+        weekday: 'short',
+        month: 'long',
+        day: 'numeric',
+        year: isCurrentYear ? undefined : 'numeric'
+      })}
     {/if}
   </div>
 </div>
 
 <style lang="scss">
   .dateSelector {
-    &:not(:first-child) {
-      border-top: 1px solid var(--divider-color);
+    position: relative;
+    flex-shrink: 0;
+    margin: 0.25rem 0;
+
+    &:not(:first-child)::after {
+      position: absolute;
+      content: '';
+      top: 50%;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background-color: var(--theme-divider-color);
+    }
+    .dateSelectorButton {
+      padding: 0.25rem 0.5rem;
+      height: max-content;
+      background-color: var(--theme-list-row-color);
+      border: 1px solid var(--theme-divider-color);
+      z-index: 10;
     }
   }
-
-  .dateSelectorButton {
-    margin-top: -1rem;
-    background-color: var(--body-color);
-    border: 1px solid var(--divider-color);
-  }
 </style>
diff --git a/plugins/chunter-resources/src/components/Message.svelte b/plugins/chunter-resources/src/components/Message.svelte
index f8ffee81b3..dc060e9ef4 100644
--- a/plugins/chunter-resources/src/components/Message.svelte
+++ b/plugins/chunter-resources/src/components/Message.svelte
@@ -221,10 +221,10 @@
   let loading = false
 </script>
 
-<div class="container" class:highlighted={isHighlighted} id={message._id}>
+<div class="container clear-mins" class:highlighted={isHighlighted} id={message._id}>
   <div class="avatar"><Avatar size={'medium'} avatar={employee?.avatar} /></div>
-  <div class="message">
-    <div class="header">
+  <div class="message clear-mins">
+    <div class="header clear-mins">
       {#if employee}
         <EmployeePresenter value={employee} shouldShowAvatar={false} inline />
       {/if}
@@ -270,7 +270,7 @@
       </div>
     {/if}
   </div>
-  <div class="buttons" class:menuShowed>
+  <div class="buttons clear-mins" class:menuShowed>
     <div class="tool">
       <ActionIcon
         icon={IconMoreH}
@@ -305,6 +305,7 @@
   .container {
     position: relative;
     display: flex;
+    flex-shrink: 0;
     padding: 0.5rem 2rem;
 
     &.highlighted {
@@ -327,7 +328,7 @@
         font-weight: 500;
         font-size: 1rem;
         line-height: 150%;
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
         margin-bottom: 0.25rem;
 
         span {
@@ -379,7 +380,7 @@
     }
 
     &:hover {
-      background-color: var(--board-card-bg-hover);
+      background-color: var(--highlight-hover);
     }
   }
 </style>
diff --git a/plugins/chunter-resources/src/components/SavedMessages.svelte b/plugins/chunter-resources/src/components/SavedMessages.svelte
index 4866803da5..b729ed067b 100644
--- a/plugins/chunter-resources/src/components/SavedMessages.svelte
+++ b/plugins/chunter-resources/src/components/SavedMessages.svelte
@@ -85,7 +85,7 @@
   }
 </script>
 
-<div class="ac-header full divide">
+<div class="ac-header full divide caption-height">
   <div class="ac-header__wrap-title">
     <span class="ac-header__title"><Label label={chunter.string.SavedItems} /></span>
   </div>
@@ -93,7 +93,8 @@
 <Scroller>
   {#if savedMessages.length > 0 || savedAttachments.length > 0}
     {#each savedMessages as message}
-      <div on:click={() => openMessageFromSpecial(message)}>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div class="clear-mins flex-no-shrink" on:click={() => openMessageFromSpecial(message)}>
         <Message
           {message}
           on:openThread
@@ -105,7 +106,8 @@
       </div>
     {/each}
     {#each savedAttachments as att}
-      <div class="attachmentContainer" on:click={() => openAttachment(att)}>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div class="attachmentContainer flex-no-shrink clear-mins" on:click={() => openAttachment(att)}>
         <AttachmentPreview value={att} isSaved={true} />
         <div class="label">
           <Label
diff --git a/plugins/chunter-resources/src/components/Thread.svelte b/plugins/chunter-resources/src/components/Thread.svelte
index 5937df1741..9a6d2709fa 100644
--- a/plugins/chunter-resources/src/components/Thread.svelte
+++ b/plugins/chunter-resources/src/components/Thread.svelte
@@ -163,7 +163,7 @@
   let loading = false
 </script>
 
-<div class="ml-8 mt-4">
+<div class="flex-col ml-8 mt-4 flex-no-shrink">
   {#if parent}
     {#await getChannel(parent.space) then channel}
       {#if channel?._class === chunter.class.Channel}
@@ -178,13 +178,13 @@
     {/await}
   {/if}
 </div>
-<div class="flex-col content">
+<div class="flex-col content flex-no-shrink">
   {#if parent}
     <MsgView message={parent} thread {savedAttachmentsIds} />
     {#if total > comments.length}
       <!-- svelte-ignore a11y-click-events-have-key-events -->
       <div
-        class="label pb-2 pt-2 pl-8 over-underline"
+        class="label pb-2 pt-2 pl-8 over-underline clear-mins"
         on:click={() => {
           showAll = true
         }}
@@ -195,7 +195,7 @@
     {#each comments as comment (comment._id)}
       <MsgView message={comment} thread {savedAttachmentsIds} />
     {/each}
-    <div class="mr-4 ml-4 mb-4 mt-2">
+    <div class="mr-4 ml-4 pb-4 mt-2 clear-mins">
       <AttachmentRefInput
         space={parent.space}
         _class={chunter.class.ThreadMessage}
@@ -206,17 +206,19 @@
     </div>
   {/if}
 </div>
+<div class="min-h-4 max-h-4 h-4 flex-no-shrink" />
 
 <style lang="scss">
   .content {
     overflow: hidden;
-    margin: 1rem 1rem 0px;
-    background-color: var(--board-bg-color);
-    border: 1px solid var(--divider-color);
+    margin: 1rem 1rem 0;
+    padding-top: 0.5rem;
+    background-color: var(--theme-list-row-color);
+    border: 1px solid var(--theme-divider-color);
     border-radius: 0.75rem;
   }
 
   .label:hover {
-    background-color: var(--board-card-bg-hover);
+    background-color: var(--theme-button-hovered);
   }
 </style>
diff --git a/plugins/chunter-resources/src/components/ThreadView.svelte b/plugins/chunter-resources/src/components/ThreadView.svelte
index 9dca2df1ca..9087d76d40 100644
--- a/plugins/chunter-resources/src/components/ThreadView.svelte
+++ b/plugins/chunter-resources/src/components/ThreadView.svelte
@@ -16,11 +16,11 @@
   import attachment, { Attachment } from '@hcengineering/attachment'
   import { AttachmentRefInput } from '@hcengineering/attachment-resources'
   import type { ChunterMessage, Message, ThreadMessage } from '@hcengineering/chunter'
-  import core, { generateId, getCurrentAccount, Ref, Space } from '@hcengineering/core'
+  import core, { Ref, Space, generateId, getCurrentAccount } from '@hcengineering/core'
   import { LastView } from '@hcengineering/notification'
   import { NotificationClientImpl } from '@hcengineering/notification-resources'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { getCurrentLocation, IconClose, Label, navigate } from '@hcengineering/ui'
+  import { IconClose, Label, getCurrentResolvedLocation, navigate } from '@hcengineering/ui'
   import { afterUpdate, beforeUpdate, createEventDispatcher } from 'svelte'
   import { createBacklinks } from '../backlinks'
   import chunter from '../plugin'
@@ -81,7 +81,7 @@
         message = res[0]
 
         if (!message) {
-          const loc = getCurrentLocation()
+          const loc = getCurrentResolvedLocation()
           loc.path.length = 4
           navigate(loc)
         }
diff --git a/plugins/chunter-resources/src/components/Threads.svelte b/plugins/chunter-resources/src/components/Threads.svelte
index f7c826af8d..9b5a82ea94 100644
--- a/plugins/chunter-resources/src/components/Threads.svelte
+++ b/plugins/chunter-resources/src/components/Threads.svelte
@@ -49,19 +49,16 @@
   })
 </script>
 
-<div class="ac-header full divide">
+<div class="ac-header full divide caption-height">
   <div class="ac-header__wrap-title">
     <span class="ac-header__title"><Label label={chunter.string.Threads} /></span>
   </div>
 </div>
 <Scroller>
-  {#each threads as thread (thread)}
-    <div class="item"><Thread _id={thread} {savedAttachmentsIds} /></div>
+  {#each threads as thread, i (thread)}
+    <Thread _id={thread} {savedAttachmentsIds} />
+    {#if i < threads.length - 1}
+      <div class="antiDivider" />
+    {/if}
   {/each}
 </Scroller>
-
-<style lang="scss">
-  .item + .item {
-    margin-top: 3rem;
-  }
-</style>
diff --git a/plugins/chunter-resources/src/utils.ts b/plugins/chunter-resources/src/utils.ts
index c77e30ce78..178282d3e8 100644
--- a/plugins/chunter-resources/src/utils.ts
+++ b/plugins/chunter-resources/src/utils.ts
@@ -4,7 +4,14 @@ import { employeeByIdStore } from '@hcengineering/contact-resources'
 import { Class, Client, Doc, getCurrentAccount, IdMap, Obj, Ref, Space, Timestamp } from '@hcengineering/core'
 import { Asset } from '@hcengineering/platform'
 import { getClient } from '@hcengineering/presentation'
-import { getCurrentLocation, getPanelURI, location, Location, navigate, ResolvedLocation } from '@hcengineering/ui'
+import {
+  getPanelURI,
+  location,
+  Location,
+  navigate,
+  ResolvedLocation,
+  getCurrentResolvedLocation
+} from '@hcengineering/ui'
 import view from '@hcengineering/view'
 import { workbenchId } from '@hcengineering/workbench'
 import { get, Unsubscriber, writable } from 'svelte/store'
@@ -133,14 +140,14 @@ export function scrollAndHighLight (): void {
 
 export async function getLink (doc: Doc): Promise<string> {
   const fragment = await getTitle(doc)
-  const location = getCurrentLocation()
+  const location = getCurrentResolvedLocation()
   return await Promise.resolve(
     `${window.location.protocol}//${window.location.host}/${workbenchId}/${location.path[1]}/${chunterId}#${fragment}`
   )
 }
 
 export async function getFragment (doc: Doc): Promise<Location> {
-  const loc = getCurrentLocation()
+  const loc = getCurrentResolvedLocation()
   loc.path.length = 2
   loc.fragment = undefined
   loc.query = undefined
@@ -213,7 +220,6 @@ async function generateLocation (loc: Location, shortLink: string): Promise<Reso
         path: [appComponent, workspace, chunterId, doc.space],
         fragment: doc._id
       },
-      shouldNavigate: true,
       defaultLocation: {
         path: [appComponent, workspace, chunterId, doc.space],
         fragment: doc._id
@@ -230,7 +236,6 @@ async function generateLocation (loc: Location, shortLink: string): Promise<Reso
         path: [appComponent, workspace],
         fragment: getPanelURI(component, comment.attachedTo, comment.attachedToClass, 'content')
       },
-      shouldNavigate: false,
       defaultLocation: {
         path: [appComponent, workspace],
         fragment: getPanelURI(component, comment.attachedTo, comment.attachedToClass, 'content')
@@ -244,7 +249,6 @@ async function generateLocation (loc: Location, shortLink: string): Promise<Reso
         path: [appComponent, workspace, chunterId, doc.space, msg.attachedTo],
         fragment: doc._id
       },
-      shouldNavigate: true,
       defaultLocation: {
         path: [appComponent, workspace, chunterId, doc.space],
         fragment: doc._id
diff --git a/plugins/contact-assets/lang/en.json b/plugins/contact-assets/lang/en.json
index f58bac85c0..7296f3e1fc 100644
--- a/plugins/contact-assets/lang/en.json
+++ b/plugins/contact-assets/lang/en.json
@@ -16,7 +16,7 @@
     "SelectFolder": "Select folder",
     "OrganizationsFolder": "Companies folder",
     "PersonsFolder": "Persons folder",
-    "ContactCreateLabel": "Contact",
+    "ContactCreateLabel": "Create contact",
     "SearchEmployee": "Search for employee...",
     "SearchPerson": "Search for person...",
     "SearchOrganization": "Search for company...",
diff --git a/plugins/contact-assets/lang/ru.json b/plugins/contact-assets/lang/ru.json
index 785021bfce..596d9c59a4 100644
--- a/plugins/contact-assets/lang/ru.json
+++ b/plugins/contact-assets/lang/ru.json
@@ -16,7 +16,7 @@
     "SelectFolder": "Выбрать папку",
     "OrganizationsFolder": "Папка с компаниями",
     "PersonsFolder": "Папка с людьми",
-    "ContactCreateLabel": "Контакт",
+    "ContactCreateLabel": "Создать контакт",
     "SearchEmployee": "Поиск сотрудника...",
     "SearchPerson": "Поиск персоны...",
     "SearchOrganization": "Поиск компании...",
diff --git a/plugins/contact-resources/src/components/AssigneeBox.svelte b/plugins/contact-resources/src/components/AssigneeBox.svelte
index 608ae92f94..740e6e34e7 100644
--- a/plugins/contact-resources/src/components/AssigneeBox.svelte
+++ b/plugins/contact-resources/src/components/AssigneeBox.svelte
@@ -153,7 +153,7 @@
             <div class="flex-presenter">
               {#if icon}
                 <div class="icon" class:small-gap={size === 'inline' || size === 'small'}>
-                  <Icon {icon} size={kind === 'link' ? 'small' : size} />
+                  <Icon {icon} size={kind === 'link' || kind === 'secondary' ? 'small' : size} />
                 </div>
               {/if}
               <div class="label no-underline">
diff --git a/plugins/contact-resources/src/components/Avatar.svelte b/plugins/contact-resources/src/components/Avatar.svelte
index 93d77fabfc..bc907c2287 100644
--- a/plugins/contact-resources/src/components/Avatar.svelte
+++ b/plugins/contact-resources/src/components/Avatar.svelte
@@ -126,6 +126,10 @@
     width: 1.5rem; // 24
     height: 1.5rem;
   }
+  .ava-smaller {
+    width: 1.75rem; // 32
+    height: 1.75rem;
+  }
   .ava-small {
     width: 2rem; // 32
     height: 2rem;
@@ -157,6 +161,8 @@
   .ava-inline.no-img,
   .ava-x-small .ava-mask,
   .ava-x-small.no-img,
+  .ava-smaller .ava-mask,
+  .ava-smaller.no-img,
   .ava-small .ava-mask,
   .ava-small.no-img,
   .ava-medium .ava-mask,
diff --git a/plugins/contact-resources/src/components/Contacts.svelte b/plugins/contact-resources/src/components/Contacts.svelte
index beb3bc5cc2..e7b8be6541 100644
--- a/plugins/contact-resources/src/components/Contacts.svelte
+++ b/plugins/contact-resources/src/components/Contacts.svelte
@@ -16,7 +16,7 @@
 <script lang="ts">
   import { Doc, DocumentQuery } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { Button, Icon, IconAdd, Label, Loading, SearchEdit, showPopup } from '@hcengineering/ui'
+  import { Button, Label, Loading, SearchEdit, showPopup, IconMoreH, ActionIcon } from '@hcengineering/ui'
   import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
     ActionContext,
@@ -30,7 +30,7 @@
   } from '@hcengineering/view-resources'
   import contact from '../plugin'
   import CreateContact from './CreateContact.svelte'
-  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  // import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
   let search = ''
   let searchQuery: DocumentQuery<Doc> = {}
@@ -74,7 +74,7 @@
     showPopup(CreateContact, { space: contact.space.Contacts, targetElement: ev.target }, ev.target as HTMLElement)
   }
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 
   $: viewOptions = getViewOptions(viewlet, $viewOptionStore)
 </script>
@@ -85,30 +85,29 @@
   }}
 />
 <div class="antiPanel-component">
-  <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-    <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-      <div class="ac-header__wrap-title mr-3">
-        <div class="ac-header__icon"><Icon icon={contact.icon.Person} size={'small'} /></div>
-        <span class="ac-header__title"><Label label={contact.string.Contacts} /></span>
-        <div class="ml-4"><FilterButton _class={contact.class.Contact} /></div>
-      </div>
-
-      <SearchEdit
-        bind:value={search}
-        on:change={() => {
-          updateResultQuery(search)
-        }}
-      />
+  <div class="ac-header full divide">
+    <div class="ac-header__wrap-title mr-3">
+      <span class="ac-header__title"><Label label={contact.string.Contacts} /></span>
     </div>
-    <div class="ac-header-full" class:secondRow={twoRows}>
+    <div class="mb-1 clear-mins">
       <Button
-        icon={IconAdd}
         label={contact.string.ContactCreateLabel}
         kind={'primary'}
-        size={'small'}
+        size={'medium'}
         on:click={(ev) => showCreateDialog(ev)}
       />
+    </div>
+  </div>
+  <div class="ac-header full divide search-start">
+    <div class="ac-header-full small-gap">
+      <SearchEdit bind:value={search} on:change={() => updateResultQuery(search)} />
+      <ActionIcon icon={IconMoreH} size={'small'} />
+      <div class="buttons-divider" />
+      <FilterButton _class={contact.class.Contact} />
+    </div>
+    <div class="ac-header-full medium-gap">
       <ViewletSettingButton bind:viewOptions {viewlet} />
+      <ActionIcon icon={IconMoreH} size={'small'} />
     </div>
   </div>
 
diff --git a/plugins/contact-resources/src/components/CreateEmployee.svelte b/plugins/contact-resources/src/components/CreateEmployee.svelte
index ef807821cf..9e804e4023 100644
--- a/plugins/contact-resources/src/components/CreateEmployee.svelte
+++ b/plugins/contact-resources/src/components/CreateEmployee.svelte
@@ -169,7 +169,8 @@
     <ChannelsDropdown
       bind:value={channels}
       focusIndex={10}
-      kind={'no-border'}
+      kind={'secondary'}
+      size={'large'}
       editable
       restricted={[contact.channelProvider.Email]}
     />
diff --git a/plugins/contact-resources/src/components/CreateOrganization.svelte b/plugins/contact-resources/src/components/CreateOrganization.svelte
index 641252386a..3de312f32d 100644
--- a/plugins/contact-resources/src/components/CreateOrganization.svelte
+++ b/plugins/contact-resources/src/components/CreateOrganization.svelte
@@ -103,6 +103,8 @@
       <ChannelsDropdown
         bind:value={channels}
         focusIndex={10}
+        kind={'secondary'}
+        size={'large'}
         editable
         highlighted={matchedChannels.map((it) => it.provider)}
       />
diff --git a/plugins/contact-resources/src/components/CreatePerson.svelte b/plugins/contact-resources/src/components/CreatePerson.svelte
index 993322f64a..dacb114c74 100644
--- a/plugins/contact-resources/src/components/CreatePerson.svelte
+++ b/plugins/contact-resources/src/components/CreatePerson.svelte
@@ -120,6 +120,6 @@
     </div>
   </div>
   <svelte:fragment slot="pool">
-    <ChannelsDropdown bind:value={channels} focusIndex={10} kind={'no-border'} editable />
+    <ChannelsDropdown bind:value={channels} focusIndex={10} kind={'secondary'} size={'large'} editable />
   </svelte:fragment>
 </Card>
diff --git a/plugins/contact-resources/src/components/EmployeeAttributePresenter.svelte b/plugins/contact-resources/src/components/EmployeeAttributePresenter.svelte
index 2c46e05781..2a4f6fc192 100644
--- a/plugins/contact-resources/src/components/EmployeeAttributePresenter.svelte
+++ b/plugins/contact-resources/src/components/EmployeeAttributePresenter.svelte
@@ -12,6 +12,8 @@
   export let kind: ButtonKind = 'link'
   export let tooltipLabels: PersonLabelTooltip | undefined = undefined
   export let onChange: ((value: Ref<Employee>) => void) | undefined = undefined
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
   export let inline = false
 
   $: employee = value ? $employeeByIdStore.get(value) : undefined
@@ -47,7 +49,9 @@
     shouldShowPlaceholder
     defaultName={contact.string.NotSpecified}
     shouldShowName={kind !== 'list'}
-    avatarSize={kind === 'list-header' ? 'small' : 'x-small'}
+    avatarSize={kind === 'list-header' ? 'smaller' : 'x-small'}
     disableClick
+    {colorInherit}
+    {accent}
   />
 {/if}
diff --git a/plugins/contact-resources/src/components/EmployeePresenter.svelte b/plugins/contact-resources/src/components/EmployeePresenter.svelte
index 400e2ed37c..0bd7ad8dd4 100644
--- a/plugins/contact-resources/src/components/EmployeePresenter.svelte
+++ b/plugins/contact-resources/src/components/EmployeePresenter.svelte
@@ -2,6 +2,7 @@
   import { Employee } from '@hcengineering/contact'
   import { WithLookup } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
+  import { IconSize } from '@hcengineering/ui'
   import { PersonLabelTooltip } from '..'
   import PersonPresenter from '../components/PersonPresenter.svelte'
   import contact from '../plugin'
@@ -12,10 +13,12 @@
   export let shouldShowName: boolean = true
   export let shouldShowPlaceholder = false
   export let onEmployeeEdit: ((event: MouseEvent) => void) | undefined = undefined
-  export let avatarSize: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' = 'x-small'
+  export let avatarSize: IconSize = 'x-small'
   export let isInteractive = true
   export let inline = false
   export let disableClick = false
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
   export let defaultName: IntlString | undefined = undefined
   export let element: HTMLElement | undefined = undefined
 </script>
@@ -31,6 +34,8 @@
   {shouldShowPlaceholder}
   isInteractive={isInteractive && !disableClick}
   {inline}
+  {colorInherit}
+  {accent}
   {defaultName}
   statusLabel={value?.active === false && shouldShowName ? contact.string.Inactive : undefined}
 />
diff --git a/plugins/contact-resources/src/components/EmployeeRefPresenter.svelte b/plugins/contact-resources/src/components/EmployeeRefPresenter.svelte
index 034a0fbb30..4f5c4be879 100644
--- a/plugins/contact-resources/src/components/EmployeeRefPresenter.svelte
+++ b/plugins/contact-resources/src/components/EmployeeRefPresenter.svelte
@@ -9,17 +9,19 @@
   export let kind: ButtonKind = 'link'
   export let tooltipLabels: PersonLabelTooltip | undefined = undefined
   export let onChange: ((value: Ref<Employee>) => void) | undefined = undefined
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
   export let inline = false
 </script>
 
 {#if Array.isArray(value)}
   <div class="inline-content">
     {#each value as employee}
-      <EmployeeAttributePresenter value={employee} {kind} {tooltipLabels} {onChange} {inline} />
+      <EmployeeAttributePresenter value={employee} {kind} {tooltipLabels} {onChange} {inline} {colorInherit} {accent} />
     {/each}
   </div>
 {:else}
-  <EmployeeAttributePresenter {value} {kind} {tooltipLabels} {onChange} {inline} />
+  <EmployeeAttributePresenter {value} {kind} {tooltipLabels} {onChange} {inline} {colorInherit} {accent} />
 {/if}
 
 <style lang="scss">
diff --git a/plugins/contact-resources/src/components/PersonContent.svelte b/plugins/contact-resources/src/components/PersonContent.svelte
index f675502cca..6d78513b23 100644
--- a/plugins/contact-resources/src/components/PersonContent.svelte
+++ b/plugins/contact-resources/src/components/PersonContent.svelte
@@ -16,6 +16,7 @@
   import { Employee, getName, Person } from '@hcengineering/contact'
   import { IntlString } from '@hcengineering/platform'
   import { Label, LabelAndProps, tooltip } from '@hcengineering/ui'
+  import type { IconSize } from '@hcengineering/ui'
   import { DocNavLink } from '@hcengineering/view-resources'
   import Avatar from './Avatar.svelte'
 
@@ -27,11 +28,13 @@
   export let shouldShowPlaceholder = false
   export let defaultName: IntlString | undefined = undefined
   export let statusLabel: IntlString | undefined = undefined
-  export let avatarSize: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' = 'x-small'
+  export let avatarSize: IconSize = 'x-small'
   export let onEdit: ((event: MouseEvent) => void) | undefined = undefined
   export let showTooltip: LabelAndProps | undefined = undefined
   export let enlargedText = false
   export let element: HTMLElement | undefined = undefined
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
 
   const onEditClick = (evt: MouseEvent) => {
     if (isInteractive) {
@@ -41,7 +44,7 @@
 </script>
 
 {#if value}
-  <DocNavLink object={value} onClick={onEdit} disableClick={!isInteractive} {inline}>
+  <DocNavLink object={value} onClick={onEdit} disableClick={!isInteractive} {inline} {colorInherit}>
     <span
       use:tooltip={showTooltip}
       class="contentPresenter"
@@ -58,7 +61,7 @@
         </span>
       {/if}
       {#if shouldShowName}
-        <span class="eContentPresenterLabel">{getName(value)}</span>
+        <span class="eContentPresenterLabel" class:colorInherit>{getName(value)}</span>
       {/if}
     </span>
   </DocNavLink>
@@ -80,7 +83,7 @@
       </span>
     {/if}
     {#if shouldShowName && defaultName}
-      <span class="eContentPresenterLabel">
+      <span class="eContentPresenterLabel" class:colorInherit>
         <Label label={defaultName} />
       </span>
       {#if statusLabel}
@@ -109,7 +112,7 @@
       min-width: 0;
       font-weight: 500;
       text-align: left;
-      color: var(--accent-color);
+      color: var(--theme-caption-color);
 
       overflow: hidden;
       visibility: visible;
@@ -119,14 +122,18 @@
       -webkit-line-clamp: 2;
       line-clamp: 2;
       user-select: none;
+
+      &.colorInherit {
+        color: inherit;
+      }
     }
     &:hover {
       .eContentPresenterIcon {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
       }
       .eContentPresenterLabel {
         text-decoration: underline;
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
       }
     }
   }
diff --git a/plugins/contact-resources/src/components/PersonPresenter.svelte b/plugins/contact-resources/src/components/PersonPresenter.svelte
index cec8b288d4..d80782cd1f 100644
--- a/plugins/contact-resources/src/components/PersonPresenter.svelte
+++ b/plugins/contact-resources/src/components/PersonPresenter.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { getName, Person } from '@hcengineering/contact'
   import { getEmbeddedLabel, IntlString } from '@hcengineering/platform'
-  import { LabelAndProps } from '@hcengineering/ui'
+  import type { LabelAndProps, IconSize } from '@hcengineering/ui'
   import { PersonLabelTooltip } from '..'
   import PersonContent from './PersonContent.svelte'
 
@@ -29,9 +29,11 @@
   export let defaultName: IntlString | undefined = undefined
   export let statusLabel: IntlString | undefined = undefined
   export let tooltipLabels: PersonLabelTooltip | undefined = undefined
-  export let avatarSize: 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' = 'x-small'
+  export let avatarSize: IconSize = 'x-small'
   export let onEdit: ((event: MouseEvent) => void) | undefined = undefined
   export let element: HTMLElement | undefined = undefined
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
 
   function getTooltip (
     tooltipLabels: PersonLabelTooltip | undefined,
@@ -73,6 +75,8 @@
     {shouldShowPlaceholder}
     {enlargedText}
     {statusLabel}
+    {colorInherit}
+    {accent}
     bind:element
   />
 {/if}
diff --git a/plugins/contact-resources/src/components/icons/Avatar.svelte b/plugins/contact-resources/src/components/icons/Avatar.svelte
index 48ec07c1f2..a4f202ae64 100644
--- a/plugins/contact-resources/src/components/icons/Avatar.svelte
+++ b/plugins/contact-resources/src/components/icons/Avatar.svelte
@@ -51,6 +51,10 @@
     width: 1rem;
     height: 1rem;
   }
+  .smaller {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
   .small {
     width: 1.25rem;
     height: 1.25rem;
diff --git a/plugins/contact-resources/src/utils.ts b/plugins/contact-resources/src/utils.ts
index 72ea6844e7..53badb257b 100644
--- a/plugins/contact-resources/src/utils.ts
+++ b/plugins/contact-resources/src/utils.ts
@@ -30,7 +30,13 @@ import {
 import { Client, Doc, getCurrentAccount, IdMap, ObjQueryType, Ref, Timestamp, toIdMap } from '@hcengineering/core'
 import { createQuery, getClient } from '@hcengineering/presentation'
 import { TemplateDataProvider } from '@hcengineering/templates'
-import { DropdownIntlItem, getCurrentLocation, getPanelURI, Location, ResolvedLocation } from '@hcengineering/ui'
+import {
+  DropdownIntlItem,
+  getCurrentResolvedLocation,
+  getPanelURI,
+  Location,
+  ResolvedLocation
+} from '@hcengineering/ui'
 import view, { Filter } from '@hcengineering/view'
 import { FilterQuery } from '@hcengineering/view-resources'
 import { get, writable } from 'svelte/store'
@@ -180,7 +186,7 @@ export async function getContactChannel (value: Contact, provider: Ref<ChannelPr
 }
 
 export async function getContactLink (doc: Doc): Promise<Location> {
-  const loc = getCurrentLocation()
+  const loc = getCurrentResolvedLocation()
   loc.path.length = 2
   loc.fragment = undefined
   loc.query = undefined
@@ -213,7 +219,6 @@ async function generateLocation (loc: Location, id: Ref<Contact>): Promise<Resol
       path: [appComponent, workspace],
       fragment: getPanelURI(view.component.EditDoc, doc._id, doc._class, 'content')
     },
-    shouldNavigate: false,
     defaultLocation: {
       path: [appComponent, workspace, contactId],
       fragment: getPanelURI(view.component.EditDoc, doc._id, doc._class, 'content')
diff --git a/plugins/document-resources/src/components/CreateDocument.svelte b/plugins/document-resources/src/components/CreateDocument.svelte
index 574504efc8..46f31506e4 100644
--- a/plugins/document-resources/src/components/CreateDocument.svelte
+++ b/plugins/document-resources/src/components/CreateDocument.svelte
@@ -121,28 +121,28 @@
   <svelte:fragment slot="pool">
     <UserBoxList
       items={object.authors}
-      size="small"
       label={document.string.Authors}
       emptyLabel={document.string.Authors}
-      kind="no-border"
+      kind={'secondary'}
+      size={'large'}
       width={'min-content'}
       on:update={({ detail }) => (object.authors = detail)}
     />
     <UserBoxList
       items={object.approvers}
-      size="small"
       label={document.string.Approvers}
       emptyLabel={document.string.Approvers}
-      kind="no-border"
+      kind={'secondary'}
+      size={'large'}
       width={'min-content'}
       on:update={({ detail }) => (object.approvers = detail)}
     />
     <UserBoxList
       items={object.reviewers}
-      size="small"
       label={document.string.Reviewers}
       emptyLabel={document.string.Reviewers}
-      kind="no-border"
+      kind={'secondary'}
+      size={'large'}
       width={'min-content'}
       on:update={({ detail }) => (object.reviewers = detail)}
     />
diff --git a/plugins/document-resources/src/components/Documents.svelte b/plugins/document-resources/src/components/Documents.svelte
index 01312f4fc6..63c75c7bf3 100644
--- a/plugins/document-resources/src/components/Documents.svelte
+++ b/plugins/document-resources/src/components/Documents.svelte
@@ -18,7 +18,7 @@
   import { Doc, DocumentQuery } from '@hcengineering/core'
   import { Document } from '@hcengineering/document'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { deviceOptionsStore as deviceInfo, Icon, Label, Loading, SearchEdit } from '@hcengineering/ui'
+  import { ActionIcon, IconMoreH, Label, Loading, SearchEdit } from '@hcengineering/ui'
   import view, { Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
     ActionContext,
@@ -70,8 +70,8 @@
       }
     })
 
-  let twoRows: boolean
-  $: twoRows = $deviceInfo.docWidth <= 680
+  // let twoRows: boolean
+  // $: twoRows = $deviceInfo.docWidth <= 680
 
   $: viewOptions = getViewOptions(viewlet, $viewOptionStore)
 </script>
@@ -82,23 +82,21 @@
   }}
 />
 <div class="antiPanel-component">
-  <div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-    <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-      <div class="ac-header__wrap-title mr-3">
-        <div class="ac-header__icon"><Icon icon={document.icon.Document} size={'small'} /></div>
-        <span class="ac-header__title"><Label label={document.string.Documents} /></span>
-        <div class="ml-4"><FilterButton _class={document.class.Document} /></div>
-      </div>
-
-      <SearchEdit
-        bind:value={search}
-        on:change={() => {
-          updateResultQuery(search, query)
-        }}
-      />
+  <div class="ac-header full divide caption-height">
+    <div class="ac-header__wrap-title mr-3">
+      <span class="ac-header__title"><Label label={document.string.Documents} /></span>
     </div>
-    <div class="ac-header-full" class:secondRow={twoRows}>
+  </div>
+  <div class="ac-header full divide search-start">
+    <div class="ac-header-full small-gap">
+      <SearchEdit bind:value={search} on:change={() => updateResultQuery(search, query)} />
+      <ActionIcon icon={IconMoreH} size={'small'} />
+      <div class="buttons-divider" />
+      <FilterButton _class={document.class.Document} />
+    </div>
+    <div class="ac-header-full medium-gap">
       <ViewletSettingButton bind:viewOptions {viewlet} />
+      <ActionIcon icon={IconMoreH} size={'small'} />
     </div>
   </div>
 
diff --git a/plugins/hr-resources/src/components/CreateDepartment.svelte b/plugins/hr-resources/src/components/CreateDepartment.svelte
index 57cd86a53e..9832260750 100644
--- a/plugins/hr-resources/src/components/CreateDepartment.svelte
+++ b/plugins/hr-resources/src/components/CreateDepartment.svelte
@@ -75,13 +75,21 @@
     </div>
   </div>
   <svelte:fragment slot="header">
-    <SpaceSelector _class={hr.class.Department} label={hr.string.ParentDepartmentLabel} bind:space />
+    <SpaceSelector
+      _class={hr.class.Department}
+      label={hr.string.ParentDepartmentLabel}
+      bind:space
+      kind={'secondary'}
+      size={'large'}
+    />
   </svelte:fragment>
   <svelte:fragment slot="pool">
     <EmployeeBox
       focusIndex={3}
       label={hr.string.TeamLead}
       placeholder={hr.string.TeamLead}
+      kind={'secondary'}
+      size={'large'}
       bind:value={lead}
       allowDeselect
       showNavigate={false}
diff --git a/plugins/hr-resources/src/components/CreateRequest.svelte b/plugins/hr-resources/src/components/CreateRequest.svelte
index 73e180f89d..40c10f0347 100644
--- a/plugins/hr-resources/src/components/CreateRequest.svelte
+++ b/plugins/hr-resources/src/components/CreateRequest.svelte
@@ -93,6 +93,8 @@
     <EmployeeBox
       label={hr.string.SelectEmployee}
       placeholder={hr.string.SelectEmployee}
+      kind={'secondary'}
+      size={'large'}
       bind:value={employee}
       {readonly}
       showNavigate={false}
@@ -118,13 +120,19 @@
     placeholder={core.string.Description}
   />
   <svelte:fragment slot="pool">
-    <DateRangePresenter bind:value editable labelNull={ui.string.SelectDate} />
-    <DateRangePresenter bind:value={dueDate} labelNull={calendar.string.DueTo} editable />
+    <DateRangePresenter bind:value editable labelNull={ui.string.SelectDate} kind={'secondary'} size={'large'} />
+    <DateRangePresenter
+      bind:value={dueDate}
+      labelNull={calendar.string.DueTo}
+      editable
+      kind={'secondary'}
+      size={'large'}
+    />
   </svelte:fragment>
   <svelte:fragment slot="footer">
     <Button
       icon={IconAttachment}
-      kind={'transparent'}
+      size={'large'}
       on:click={() => {
         descriptionBox.attach()
       }}
diff --git a/plugins/hr-resources/src/components/DepartmentCard.svelte b/plugins/hr-resources/src/components/DepartmentCard.svelte
index 4e1bcb83d0..134c638031 100644
--- a/plugins/hr-resources/src/components/DepartmentCard.svelte
+++ b/plugins/hr-resources/src/components/DepartmentCard.svelte
@@ -97,82 +97,82 @@
   $: dragging = value._id === dragOver?._id && dragPersonId !== undefined
 </script>
 
-<div class="flex-center w-full px-4">
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="w-full mt-2 mb-2 container flex"
+  class:cursor-pointer={currentDescendants.length}
+  on:click|stopPropagation={edit}
+  on:contextmenu|preventDefault={showMenu}
+  class:dragging
+>
   <div
-    class="w-full mt-2 mb-2 container flex"
-    class:cursor-pointer={currentDescendants.length}
-    on:click|stopPropagation={edit}
-    on:contextmenu|preventDefault={showMenu}
-    class:dragging
-  >
-    <div
-      class="flex-between pt-4 pb-4 pr-4 pl-2 w-full"
-      on:dragover|preventDefault|stopPropagation={(evt) => {
-        dragOver = value
-      }}
-      on:dragend|preventDefault|stopPropagation={() => {
+    class="flex-between pt-4 pb-4 pr-4 pl-2 w-full"
+    on:dragover|preventDefault|stopPropagation={(evt) => {
+      dragOver = value
+    }}
+    on:dragend|preventDefault|stopPropagation={() => {
+      dragPerson = undefined
+      closeTooltip()
+    }}
+    on:drop|preventDefault={(itm) => {
+      closeTooltip()
+      addMember(client, dragPerson, value).then(() => {
         dragPerson = undefined
-        closeTooltip()
-      }}
-      on:drop|preventDefault={(itm) => {
-        closeTooltip()
-        addMember(client, dragPerson, value).then(() => {
-          dragPerson = undefined
-          dragOver = undefined
-        })
-      }}
-    >
-      <div class="flex-center">
-        <div class="mr-2">
-          <Button icon={IconAdd} kind={'list'} on:click={createChild} />
-        </div>
-        <Avatar size={'medium'} avatar={value.avatar} icon={hr.icon.Department} />
-        <div class="flex-row ml-2 mr-4">
-          <div class="fs-title">
-            {value.name}
-          </div>
-          <Label label={hr.string.MemberCount} params={{ count: value.members.length }} />
-        </div>
-        <PersonsPresenter value={values} bind:dragPerson showDragPerson={dragging} />
+        dragOver = undefined
+      })
+    }}
+  >
+    <div class="flex-center">
+      <div class="mr-2">
+        <Button icon={IconAdd} kind={'list'} on:click={createChild} />
       </div>
-      <div class="flex-center mr-2">
-        <div class="mr-2">
-          <EmployeePresenter
-            value={value.$lookup?.teamLead}
-            avatarSize={'small'}
-            shouldShowAvatar
-            shouldShowPlaceholder
-            shouldShowName={false}
-            tooltipLabels={{
-              personLabel: hr.string.TeamLeadTooltip,
-              placeholderLabel: hr.string.AssignLead
-            }}
-            onEmployeeEdit={openLeadEditor}
-          />
+      <Avatar size={'medium'} avatar={value.avatar} icon={hr.icon.Department} />
+      <div class="flex-row ml-2 mr-4">
+        <div class="fs-title">
+          {value.name}
         </div>
+        <Label label={hr.string.MemberCount} params={{ count: value.members.length }} />
+      </div>
+      <PersonsPresenter value={values} bind:dragPerson showDragPerson={dragging} />
+    </div>
+    <div class="flex-center mr-2">
+      <div class="mr-2">
+        <EmployeePresenter
+          value={value.$lookup?.teamLead}
+          avatarSize={'small'}
+          shouldShowAvatar
+          shouldShowPlaceholder
+          shouldShowName={false}
+          tooltipLabels={{
+            personLabel: hr.string.TeamLeadTooltip,
+            placeholderLabel: hr.string.AssignLead
+          }}
+          onEmployeeEdit={openLeadEditor}
+        />
       </div>
     </div>
   </div>
 </div>
-<div class="ml-8">
-  {#each currentDescendants as nested}
-    <DepartmentCard value={nested} {descendants} {allEmployees} bind:dragPerson bind:dragOver />
-  {/each}
-</div>
+{#if currentDescendants.length > 0}
+  <div class="flex-col ml-8">
+    {#each currentDescendants as nested}
+      <DepartmentCard value={nested} {descendants} {allEmployees} bind:dragPerson bind:dragOver />
+    {/each}
+  </div>
+{/if}
 
 <style lang="scss">
   .container {
-    background-color: var(--noborder-bg-color);
-    border: 1px solid transparent;
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.5rem;
 
     &:hover {
-      background-color: var(--noborder-bg-hover);
+      background-color: var(--theme-button-hovered);
       cursor: pointer;
     }
     &.dragging {
-      border-color: var(--divider-color);
+      border-color: var(--primary-button-focused-border);
     }
   }
 </style>
diff --git a/plugins/hr-resources/src/components/Schedule.svelte b/plugins/hr-resources/src/components/Schedule.svelte
index 35723bdb85..4e17ef6478 100644
--- a/plugins/hr-resources/src/components/Schedule.svelte
+++ b/plugins/hr-resources/src/components/Schedule.svelte
@@ -20,7 +20,8 @@
   import { createQuery, getClient, SpaceSelector } from '@hcengineering/presentation'
   import {
     Button,
-    Icon,
+    ActionIcon,
+    IconMoreH,
     IconBack,
     IconForward,
     Label,
@@ -105,97 +106,80 @@
   ]
 </script>
 
-<div class="ac-header divide {twoRows ? 'flex-col-reverse' : 'full'} withSettings">
-  <div class="ac-header__wrap-title" class:mt-2={twoRows}>
-    {#if !twoRows}
-      <div class="ac-header__icon"><Icon icon={calendar.icon.Calendar} size={'small'} /></div>
-      <span class="ac-header__title"><Label label={hr.string.Schedule} /></span>
-    {:else}
-      <div class="fs-title mr-4 flex-row-center flex-grow firstLetter">
-        {#if mode === CalendarMode.Month}
-          <span class="mr-2 overflow-label">{getMonthName(currentDate)}</span>
-        {/if}
-        {currentDate.getFullYear()}
-      </div>
-    {/if}
-    <div class="flex-row-center gap-2 flex-no-shrink" class:ml-6={!twoRows}>
-      <TabList
-        items={[
-          { id: 'ModeMonth', labelIntl: calendar.string.ModeMonth },
-          { id: 'ModeYear', labelIntl: calendar.string.ModeYear }
-        ]}
-        multiselect={false}
-        size={'small'}
-        on:select={handleSelect}
-      />
-      <div class="buttons-divider" />
-      <Button
-        icon={IconBack}
-        size={'small'}
-        kind={'link-bordered'}
-        on:click={() => {
-          inc(-1)
-        }}
-      />
-      <Button
-        size={'small'}
-        label={calendar.string.Today}
-        kind={'link-bordered'}
-        on:click={() => {
-          currentDate = new Date()
-        }}
-      />
-      <Button
-        icon={IconForward}
-        size={'small'}
-        kind={'link-bordered'}
-        on:click={() => {
-          inc(1)
-        }}
-      />
-    </div>
-    {#if !twoRows}
-      <div class="fs-title ml-4 flex-row-center firstLetter">
-        {#if mode === CalendarMode.Month}
-          <span class="overflow-label mr-2">{getMonthName(currentDate)}</span>
-        {/if}
-        {currentDate.getFullYear()}
-      </div>
-    {/if}
+<div class="ac-header full divide caption-height">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label label={hr.string.Schedule} /></span>
   </div>
 
-  <div class="ac-header__wrap-title {twoRows ? 'mt-1' : 'ml-4'}">
-    {#if twoRows}
-      <div class="ac-header__icon flex-center"><Icon icon={calendar.icon.Calendar} size={'small'} /></div>
-      <span class="ac-header__title" class:flex-grow={twoRows}><Label label={hr.string.Schedule} /></span>
-    {/if}
-    <div class="flex-row-center gap-2">
-      {#if mode === CalendarMode.Month}
-        <TabList
-          items={viewslist}
-          multiselect={false}
-          selected={display}
-          kind={'secondary'}
-          size={'small'}
-          on:select={(result) => {
-            if (result.detail !== undefined) display = result.detail.id
-          }}
-        />
-      {/if}
-      <SearchEdit
-        bind:value={search}
-        on:change={() => {
-          updateResultQuery(search)
+  <div class="ac-header-full medium-gap mb-1">
+    {#if mode === CalendarMode.Month}
+      <TabList
+        items={viewslist}
+        multiselect={false}
+        selected={display}
+        on:select={(result) => {
+          if (result.detail !== undefined) display = result.detail.id
         }}
       />
-      <SpaceSelector
-        _class={hr.class.Department}
-        label={hr.string.Department}
-        bind:space={department}
-        kind={'secondary'}
-      />
+    {/if}
+    <SpaceSelector
+      _class={hr.class.Department}
+      label={hr.string.Department}
+      bind:space={department}
+      size={'medium'}
+      kind={'secondary'}
+    />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={() => updateResultQuery(search)} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+  </div>
+  <div class="ac-header-full medium-gap">
+    <!-- <ViewletSettingButton bind:viewOptions {viewlet} /> -->
+    <!-- <ActionIcon icon={IconMoreH} size={'small'} /> -->
+  </div>
+</div>
+<div class="ac-header full divide">
+  <div class="ac-header-full small-gap">
+    <Button
+      icon={IconBack}
+      kind={'transparent'}
+      on:click={() => {
+        inc(-1)
+      }}
+    />
+    <Button
+      label={calendar.string.Today}
+      kind={'transparent'}
+      on:click={() => {
+        currentDate = new Date()
+      }}
+    />
+    <Button
+      icon={IconForward}
+      kind={'transparent'}
+      on:click={() => {
+        inc(1)
+      }}
+    />
+    <div class="buttons-divider" />
+    <div class="fs-title flex-row-center flex-grow firstLetter">
+      {#if mode === CalendarMode.Month}
+        <span class="mr-2 overflow-label">{getMonthName(currentDate)}</span>
+      {/if}
+      {currentDate.getFullYear()}
     </div>
   </div>
+  <TabList
+    items={[
+      { id: 'ModeMonth', labelIntl: calendar.string.ModeMonth },
+      { id: 'ModeYear', labelIntl: calendar.string.ModeYear }
+    ]}
+    multiselect={false}
+    on:select={handleSelect}
+  />
 </div>
 
 <ScheduleView
diff --git a/plugins/hr-resources/src/components/Structure.svelte b/plugins/hr-resources/src/components/Structure.svelte
index 5db850acc1..7788445818 100644
--- a/plugins/hr-resources/src/components/Structure.svelte
+++ b/plugins/hr-resources/src/components/Structure.svelte
@@ -21,12 +21,13 @@
     Button,
     deviceOptionsStore as deviceInfo,
     eventToHTMLElement,
-    Icon,
-    IconAdd,
+    ActionIcon,
+    IconMoreH,
     Label,
     Scroller,
     SearchEdit,
-    showPopup
+    showPopup,
+    IconAdd
   } from '@hcengineering/ui'
   import hr from '../plugin'
   import CreateDepartment from './CreateDepartment.svelte'
@@ -77,32 +78,23 @@
   $: twoRows = $deviceInfo.twoRows
 </script>
 
-<div class="ac-header withSettings divide" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      <div class="ac-header__icon"><Icon icon={hr.icon.Structure} size={'small'} /></div>
-      <span class="ac-header__title"><Label label={hr.string.Structure} /></span>
-    </div>
-
-    <SearchEdit
-      bind:value={search}
-      on:change={() => {
-        updateResultQuery(search)
-      }}
-    />
+<div class="ac-header full divide caption-height">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label label={hr.string.Structure} /></span>
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
-    <Button
-      label={hr.string.CreateDepartmentLabel}
-      icon={IconAdd}
-      kind={'primary'}
-      size={'small'}
-      on:click={showCreateDialog}
-    />
+
+  <div class="mb-1 clear-mins">
+    <Button icon={IconAdd} label={hr.string.CreateDepartmentLabel} kind={'primary'} on:click={showCreateDialog} />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={() => updateResultQuery(search)} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
   </div>
 </div>
 
-<Scroller>
+<Scroller padding={'1rem 2.5rem'}>
   {#if head}
     <DepartmentCard value={head} {descendants} {allEmployees} dragOver={undefined} dragPerson={undefined} />
   {/if}
diff --git a/plugins/hr-resources/src/components/schedule/MonthTableView.svelte b/plugins/hr-resources/src/components/schedule/MonthTableView.svelte
index 525b571a89..438745a914 100644
--- a/plugins/hr-resources/src/components/schedule/MonthTableView.svelte
+++ b/plugins/hr-resources/src/components/schedule/MonthTableView.svelte
@@ -18,12 +18,12 @@
   import type { Request, RequestType, Staff } from '@hcengineering/hr'
   import { getEmbeddedLabel } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import { Button, Label, Loading, Scroller, showPopup, tableSP, tableToCSV } from '@hcengineering/ui'
+  import { Button, Label, Loading, showPopup, tableToCSV } from '@hcengineering/ui'
   import view, { BuildModelKey, Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
     getViewOptions,
     setActiveViewletId,
-    Table,
+    TableBrowser,
     viewOptionStore,
     ViewletSettingButton
   } from '@hcengineering/view-resources'
@@ -398,31 +398,28 @@
 </script>
 
 {#if departmentStaff.length}
-  <Scroller fade={tableSP}>
-    <div class="p-2">
-      {#if descr}
-        {#if loading}
-          <Loading />
-        {:else}
-          <div class="flex-row-center flex-reverse">
-            <div class="ml-1">
-              <ViewletSettingButton bind:viewOptions viewlet={descr} />
-            </div>
-            <Button label={getEmbeddedLabel('Export')} size={'small'} on:click={(evt) => exportTable(evt)} />
-          </div>
-          {#await createConfig(descr, preference, month) then config}
-            <Table
-              tableId={'exportableData'}
-              _class={hr.mixin.Staff}
-              query={{ _id: { $in: departmentStaff.map((it) => it._id) } }}
-              {config}
-              options={descr.options}
-            />
-          {/await}
-        {/if}
-      {/if}
-    </div>
-  </Scroller>
+  {#if descr}
+    {#if loading}
+      <Loading />
+    {:else}
+      <div class="ac-header full divide">
+        <div class="clear-mins" />
+        <div class="ac-header-full small-gap">
+          <Button label={getEmbeddedLabel('Export')} on:click={(evt) => exportTable(evt)} />
+          <ViewletSettingButton bind:viewOptions viewlet={descr} />
+        </div>
+      </div>
+      {#await createConfig(descr, preference, month) then config}
+        <TableBrowser
+          tableId={'exportableData'}
+          _class={hr.mixin.Staff}
+          query={{ _id: { $in: departmentStaff.map((it) => it._id) } }}
+          {config}
+          options={descr.options}
+        />
+      {/await}
+    {/if}
+  {/if}
 {:else}
   <div class="flex-center h-full w-full flex-grow fs-title">
     <Label label={hr.string.NoEmployeesInDepartment} />
diff --git a/plugins/hr-resources/src/components/schedule/MonthView.svelte b/plugins/hr-resources/src/components/schedule/MonthView.svelte
index 15057ebd67..e9147bd253 100644
--- a/plugins/hr-resources/src/components/schedule/MonthView.svelte
+++ b/plugins/hr-resources/src/components/schedule/MonthView.svelte
@@ -23,7 +23,6 @@
     day as getDay,
     daysInMonth,
     eventToHTMLElement,
-    FadeOptions,
     floorFractionDigits,
     getWeekDayName,
     isWeekend,
@@ -31,8 +30,8 @@
     LabelAndProps,
     Scroller,
     showPopup,
-    tableSP,
-    tooltip
+    tooltip,
+    deviceOptionsStore as deviceInfo
   } from '@hcengineering/ui'
   import hr from '../../plugin'
   import { EmployeeReports, getHolidayDatesForEmployee, getRequests, getTotal, isHoliday } from '../../utils'
@@ -121,14 +120,6 @@
     )
   }
 
-  const fade: FadeOptions = {
-    ...tableSP,
-    multipler: {
-      ...tableSP.multipler,
-      bottom: 3.5
-    }
-  }
-
   function showReportInfo (employee: Staff, rTime: EmployeeReports | undefined): void {
     if (rTime === undefined) {
       return
@@ -142,15 +133,20 @@
 
   export let staffDepartmentMap: Map<Ref<Staff>, Department[]>
   export let holidays: Map<Ref<Department>, Date[]>
+
+  let colWidth: number
+  $: colWidthRem = colWidth / $deviceInfo.fontSize
 </script>
 
 {#if departmentStaff.length}
-  <Scroller {fade} horizontal>
+  <Scroller fade={{ multipler: { top: 3, bottom: 0, left: colWidthRem } }} horizontal>
     <table class="scroller-first-column">
       <thead class="scroller-thead">
         <tr class="scroller-thead__tr">
           <th>
-            <Label label={contact.string.Employee} />
+            <div class="fullfill center">
+              <Label label={contact.string.Employee} />
+            </div>
           </th>
           <th>#</th>
           <th>##</th>
@@ -180,8 +176,10 @@
           {@const requests = employeeRequests.get(employee._id) ?? []}
           {@const rTime = timeReports.get(employee._id)}
           <tr>
-            <td>
-              <EmployeePresenter value={employee} />
+            <td bind:clientWidth={colWidth}>
+              <div class="fullfill">
+                <EmployeePresenter value={employee} />
+              </div>
             </td>
             <td
               class="flex-center p-1 whitespace-nowrap text-center"
@@ -258,7 +256,9 @@
       <tfoot class="scroller-tfoot">
         <tr>
           <td class="summary">
-            <Label label={hr.string.Summary} />
+            <div class="fullfill">
+              <Label label={hr.string.Summary} />
+            </div>
           </td>
           <td class="flex-center p-1 whitespace-nowrap text-center summary">
             {getTotal(
@@ -316,7 +316,6 @@
       border: none;
       &:first-child {
         width: 15rem;
-        padding: 0.5rem;
       }
     }
     th {
diff --git a/plugins/inventory-resources/src/components/Categories.svelte b/plugins/inventory-resources/src/components/Categories.svelte
index 22710c28bd..fe2c7fc198 100644
--- a/plugins/inventory-resources/src/components/Categories.svelte
+++ b/plugins/inventory-resources/src/components/Categories.svelte
@@ -15,12 +15,12 @@
 -->
 <script lang="ts">
   import { DocumentQuery } from '@hcengineering/core'
-  import { Button, Icon, Label, Scroller, SearchEdit, showPopup, IconAdd } from '@hcengineering/ui'
+  import { Button, ActionIcon, Label, Scroller, SearchEdit, showPopup, IconMoreH, IconAdd } from '@hcengineering/ui'
   import type { Category } from '@hcengineering/inventory'
   import inventory from '../plugin'
   import CreateCategory from './CreateCategory.svelte'
   import HierarchyView from './HierarchyView.svelte'
-  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  // import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
   let search = ''
   let resultQuery: DocumentQuery<Category> = {}
@@ -33,31 +33,23 @@
     showPopup(CreateCategory, { space: inventory.space.Category }, 'top')
   }
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      <div class="ac-header__icon"><Icon icon={inventory.icon.Categories} size={'small'} /></div>
-      <span class="ac-header__title"><Label label={inventory.string.Categories} /></span>
-    </div>
-
-    <SearchEdit
-      bind:value={search}
-      on:change={() => {
-        updateResultQuery(search)
-      }}
-    />
+<div class="ac-header full divide caption-height">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label label={inventory.string.Categories} /></span>
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
-    <Button
-      label={inventory.string.CategoryCreateLabel}
-      icon={IconAdd}
-      kind={'primary'}
-      size={'small'}
-      on:click={showCreateDialog}
-    />
+
+  <div class="mb-1 clear-mins">
+    <Button icon={IconAdd} label={inventory.string.CategoryCreateLabel} kind={'primary'} on:click={showCreateDialog} />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={() => updateResultQuery(search)} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
   </div>
 </div>
 
diff --git a/plugins/inventory-resources/src/components/CreateProduct.svelte b/plugins/inventory-resources/src/components/CreateProduct.svelte
index e9a9381218..6632242aa4 100644
--- a/plugins/inventory-resources/src/components/CreateProduct.svelte
+++ b/plugins/inventory-resources/src/components/CreateProduct.svelte
@@ -85,6 +85,8 @@
   <svelte:fragment slot="pool">
     <DropdownLabels
       items={categories}
+      kind={'secondary'}
+      size={'large'}
       bind:selected={doc.attachedTo}
       placeholder={inventory.string.Categories}
       label={inventory.string.Category}
diff --git a/plugins/lead-resources/src/components/CreateCustomer.svelte b/plugins/lead-resources/src/components/CreateCustomer.svelte
index 0ce1fe1c4a..f0f1bbe9ac 100644
--- a/plugins/lead-resources/src/components/CreateCustomer.svelte
+++ b/plugins/lead-resources/src/components/CreateCustomer.svelte
@@ -168,14 +168,7 @@
   on:changeContent
 >
   <svelte:fragment slot="header">
-    <Button
-      icon={targetClass.icon}
-      label={targetClass.label}
-      size={'small'}
-      kind={'no-border'}
-      on:click={selectTarget}
-      focusIndex={100}
-    />
+    <Button icon={targetClass.icon} label={targetClass.label} size={'large'} on:click={selectTarget} focusIndex={100} />
   </svelte:fragment>
   {#if targetClass._id === contact.class.Person}
     <div class="flex-between flex-row-top">
@@ -236,6 +229,8 @@
     <ChannelsDropdown
       bind:value={channels}
       focusIndex={10}
+      kind={'secondary'}
+      size={'large'}
       editable
       highlighted={matchedChannels.map((it) => it.provider)}
     />
diff --git a/plugins/lead-resources/src/components/CreateLead.svelte b/plugins/lead-resources/src/components/CreateLead.svelte
index 1696b278ef..a5ae42069c 100644
--- a/plugins/lead-resources/src/components/CreateLead.svelte
+++ b/plugins/lead-resources/src/components/CreateLead.svelte
@@ -114,6 +114,8 @@
     <SpaceSelector
       _class={lead.class.Funnel}
       label={lead.string.FunnelName}
+      kind={'secondary'}
+      size={'large'}
       bind:space={_space}
       create={{
         component: lead.component.CreateFunnel,
@@ -132,8 +134,8 @@
           label={lead.string.Leads}
           placeholder={lead.string.Leads}
           bind:value={customer}
-          kind={'no-border'}
-          size={'small'}
+          kind={'secondary'}
+          size={'large'}
         />
       {/if}
       <Label label={lead.string.CreateLead} />
@@ -152,6 +154,8 @@
     <EmployeeBox
       focusIndex={2}
       label={lead.string.Assignee}
+      kind={'secondary'}
+      size={'large'}
       bind:value={assignee}
       allowDeselect
       showNavigate={false}
@@ -164,8 +168,8 @@
         label={lead.string.Customer}
         placeholder={lead.string.SelectCustomer}
         bind:value={customer}
-        kind={'no-border'}
-        size={'small'}
+        kind={'secondary'}
+        size={'large'}
         create={{ component: lead.component.CreateCustomer, label: lead.string.CreateCustomer }}
       />
     {/if}
diff --git a/plugins/login-resources/src/components/Form.svelte b/plugins/login-resources/src/components/Form.svelte
index 0c3b1688f6..85204b706e 100644
--- a/plugins/login-resources/src/components/Form.svelte
+++ b/plugins/login-resources/src/components/Form.svelte
@@ -186,7 +186,7 @@
     .title {
       font-weight: 600;
       font-size: 1.5rem;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
     .status {
       min-height: 7.5rem;
@@ -214,13 +214,13 @@
     .footer {
       margin-top: 3.5rem;
       font-size: 0.8rem;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
       span {
         opacity: 0.3;
       }
       a {
         text-decoration: none;
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
         opacity: 0.8;
         &:hover {
           opacity: 1;
diff --git a/plugins/login-resources/src/components/LoginApp.svelte b/plugins/login-resources/src/components/LoginApp.svelte
index ebc138f6b6..2535d951b5 100644
--- a/plugins/login-resources/src/components/LoginApp.svelte
+++ b/plugins/login-resources/src/components/LoginApp.svelte
@@ -80,7 +80,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: var(--popup-bg-color);
+    background: var(--theme-list-row-color);
     box-shadow: var(--popup-aside-shadow);
 
     &.minHeight {
diff --git a/plugins/login-resources/src/components/SelectWorkspace.svelte b/plugins/login-resources/src/components/SelectWorkspace.svelte
index fa94b218c5..de642f5e12 100644
--- a/plugins/login-resources/src/components/SelectWorkspace.svelte
+++ b/plugins/login-resources/src/components/SelectWorkspace.svelte
@@ -79,6 +79,7 @@
     <Scroller padding={'.125rem 0'}>
       <div class="form">
         {#each workspaces as workspace}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div
             class="workspace flex-center fs-title cursor-pointer focused-button bordered form-row"
             on:click={() => select(workspace.workspace)}
@@ -120,7 +121,7 @@
     .title {
       font-weight: 600;
       font-size: 1.5rem;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
     .status {
       min-height: 7.5rem;
@@ -150,13 +151,13 @@
     .footer {
       margin-top: 3.5rem;
       font-size: 0.8rem;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
       span {
         opacity: 0.3;
       }
       a {
         text-decoration: none;
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
         opacity: 0.8;
         &:hover {
           opacity: 1;
diff --git a/plugins/login-resources/src/components/StatusControl.svelte b/plugins/login-resources/src/components/StatusControl.svelte
index 7bc77cd063..91a1e10ebc 100644
--- a/plugins/login-resources/src/components/StatusControl.svelte
+++ b/plugins/login-resources/src/components/StatusControl.svelte
@@ -30,15 +30,15 @@
 <style lang="scss">
   .container {
     padding: 0.75rem 1rem;
-    background-color: var(--accent-bg-color);
-    border: 1px solid var(--divider-color);
+    background-color: var(--theme-comp-header-color);
+    border: 1px solid var(--theme-divider-color);
     border-radius: 0.5rem;
   }
 
   .error {
     color: var(--system-error-color);
     fill: var(--system-error-color);
-    background-color: var(--accent-bg-color);
+    background-color: var(--theme-comp-header-color);
     border-color: var(--system-error-60-color);
   }
 </style>
diff --git a/plugins/notification-resources/src/components/NotificationView.svelte b/plugins/notification-resources/src/components/NotificationView.svelte
index d81ceffaf0..198c70a6d9 100644
--- a/plugins/notification-resources/src/components/NotificationView.svelte
+++ b/plugins/notification-resources/src/components/NotificationView.svelte
@@ -128,7 +128,7 @@
     font-weight: 600;
     font-size: 0.75rem;
     color: var(--theme-accent-color);
-    border: 1px solid var(--divider-color);
+    border: 1px solid var(--highlight-red);
     border-radius: 50%;
   }
 </style>
diff --git a/plugins/recruit-resources/src/components/CandidateCard.svelte b/plugins/recruit-resources/src/components/CandidateCard.svelte
index c418819520..e3fc6dff7e 100644
--- a/plugins/recruit-resources/src/components/CandidateCard.svelte
+++ b/plugins/recruit-resources/src/components/CandidateCard.svelte
@@ -86,8 +86,8 @@
 <style lang="scss">
   .card-container {
     padding: 1rem 1.5rem 1.25rem;
-    background-color: var(--board-card-bg-color);
-    border: 1px solid var(--divider-color);
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.5rem;
     transition-property: box-shadow, background-color, border-color;
     transition-timing-function: var(--timing-shadow);
@@ -97,8 +97,7 @@
     min-height: 15rem;
 
     &:hover {
-      background-color: var(--board-card-bg-hover);
-      border-color: var(--button-border-color);
+      background-color: var(--theme-button-hovered);
       box-shadow: var(--accent-shadow);
     }
 
@@ -106,17 +105,17 @@
       margin-bottom: 1.75rem;
       font-weight: 500;
       font-size: 0.625rem;
-      color: var(--dark-color);
+      color: var(--theme-dark-color);
     }
     .name {
       margin: 1rem 0 0.25rem;
       font-weight: 500;
       font-size: 1rem;
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
     }
     .description {
       font-size: 0.75rem;
-      color: var(--dark-color);
+      color: var(--theme-dark-color);
     }
     .footer {
       margin-top: 1.5rem;
diff --git a/plugins/recruit-resources/src/components/CreateApplication.svelte b/plugins/recruit-resources/src/components/CreateApplication.svelte
index 9e4100f241..265eab9145 100644
--- a/plugins/recruit-resources/src/components/CreateApplication.svelte
+++ b/plugins/recruit-resources/src/components/CreateApplication.svelte
@@ -390,14 +390,15 @@
         bind:value={doc.assignee}
         allowDeselect
         showNavigate={false}
+        kind={'secondary'}
+        size={'large'}
         titleDeselect={recruit.string.UnAssignRecruiter}
       />
       {#if states.length > 0}
         <Button
           focusIndex={3}
           width="min-content"
-          size="small"
-          kind="no-border"
+          size="large"
           bind:input={btn}
           on:click={() => {
             showPopup(
diff --git a/plugins/recruit-resources/src/components/CreateCandidate.svelte b/plugins/recruit-resources/src/components/CreateCandidate.svelte
index 3b9626398a..ca9db2cc46 100644
--- a/plugins/recruit-resources/src/components/CreateCandidate.svelte
+++ b/plugins/recruit-resources/src/components/CreateCandidate.svelte
@@ -56,11 +56,11 @@
     IconInfo,
     Label,
     showPopup,
-    Spinner
+    Spinner,
+    IconAttachment
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import recruit from '../plugin'
-  import FileUpload from './icons/FileUpload.svelte'
   import YesNo from './YesNo.svelte'
 
   export let shouldSaveDraft: boolean = false
@@ -521,14 +521,7 @@
   on:changeContent
 >
   <svelte:fragment slot="header">
-    <Button
-      icon={contact.icon.Person}
-      label={contact.string.Person}
-      size={'small'}
-      kind={'no-border'}
-      disabled
-      on:click={() => {}}
-    />
+    <Button icon={contact.icon.Person} label={contact.string.Person} size={'large'} disabled on:click={() => {}} />
   </svelte:fragment>
   <div class="flex-between">
     <div class="flex-col">
@@ -585,6 +578,8 @@
       focusIndex={10}
       bind:value={object.channels}
       highlighted={matchedChannels.map((it) => it.provider)}
+      kind={'secondary'}
+      size={'large'}
     />
     <YesNo
       disabled={loading}
@@ -592,6 +587,8 @@
       label={recruit.string.Onsite}
       tooltip={recruit.string.WorkLocationPreferences}
       bind:value={object.onsite}
+      kind={'secondary'}
+      size={'large'}
     />
     <YesNo
       disabled={loading}
@@ -599,6 +596,8 @@
       label={recruit.string.Remote}
       tooltip={recruit.string.WorkLocationPreferences}
       bind:value={object.remote}
+      kind={'secondary'}
+      size={'large'}
     />
     <Component
       is={tags.component.TagsDropdownEditor}
@@ -611,7 +610,9 @@
         showTitle: false,
         elements,
         newElements,
-        countLabel: recruit.string.NumberSkills
+        countLabel: recruit.string.NumberSkills,
+        kind: 'secondary',
+        size: 'large'
       }}
       on:open={(evt) => {
         addTagRef(evt.detail)
@@ -621,8 +622,7 @@
       }}
     />
     {#if object.skills.length > 0}
-      <div class="flex-break" />
-      <div class="antiComponent antiEmphasized flex-grow mt-2">
+      <div class="antiComponent antiEmphasized w-full flex-grow mt-2">
         <Component
           is={tags.component.TagsEditor}
           props={{
@@ -648,19 +648,19 @@
           }}
         />
       </div>
+    {:else}
+      <div class="flex-grow w-full" style="margin: 0" />
     {/if}
-    <div class="flex flex-grow flex-wrap">
-      <InlineAttributeBar
-        _class={recruit.mixin.Candidate}
-        {object}
-        toClass={contact.class.Contact}
-        {ignoreKeys}
-        extraProps={{ showNavigate: false }}
-        on:update={() => {
-          object = object
-        }}
-      />
-    </div>
+    <InlineAttributeBar
+      _class={recruit.mixin.Candidate}
+      {object}
+      toClass={contact.class.Contact}
+      {ignoreKeys}
+      extraProps={{ showNavigate: false }}
+      on:update={() => {
+        object = object
+      }}
+    />
   </svelte:fragment>
 
   <svelte:fragment slot="footer">
@@ -676,14 +676,13 @@
       on:drop|preventDefault|stopPropagation={drop}
     >
       {#if loading && object.resumeUuid}
-        <Button label={recruit.string.Parsing} kind="link" icon={Spinner} disabled />
+        <Button label={recruit.string.Parsing} icon={Spinner} disabled />
       {:else}
         {#if loading}
-          <Button label={recruit.string.Uploading} kind="link" icon={Spinner} disabled />
+          <Button label={recruit.string.Uploading} icon={Spinner} disabled />
         {:else if object.resumeUuid}
           <Button
             disabled={loading}
-            kind={'transparent'}
             focusIndex={103}
             icon={FileIcon}
             on:click={() => {
@@ -700,10 +699,9 @@
           </Button>
         {:else}
           <Button
-            kind={'transparent'}
             focusIndex={103}
             label={recruit.string.AddDropHere}
-            icon={FileUpload}
+            icon={IconAttachment}
             on:click={() => {
               inputFile.click()
             }}
@@ -728,20 +726,18 @@
 
 <style lang="scss">
   .resume {
-    margin: -0.375rem 0rem -0.375rem -0.375rem;
-    padding: 0.375rem;
-    background: var(--accent-bg-color);
-    border: 1px dashed var(--divider-color);
+    box-shadow: 0 0 0 0 var(--primary-button-focused-border);
     border-radius: 0.5rem;
+    transition: box-shadow 0.15s ease-in-out;
 
     &.solid {
-      border-style: solid;
+      box-shadow: 0 0 0 2px var(--primary-button-focused-border);
     }
   }
   .skills-box {
     padding: 0.5rem 0.75rem;
-    background: var(--accent-bg-color);
-    border: 1px dashed var(--divider-color);
+    background: var(--theme-comp-header-color);
+    border: 1px dashed var(--theme-divider-color);
     border-radius: 0.5rem;
   }
 </style>
diff --git a/plugins/recruit-resources/src/components/CreateVacancy.svelte b/plugins/recruit-resources/src/components/CreateVacancy.svelte
index 0d8c1cc515..b831b3b6b4 100644
--- a/plugins/recruit-resources/src/components/CreateVacancy.svelte
+++ b/plugins/recruit-resources/src/components/CreateVacancy.svelte
@@ -281,8 +281,8 @@
       bind:value={company}
       allowDeselect
       titleDeselect={recruit.string.UnAssignCompany}
-      kind={'no-border'}
-      size={'small'}
+      kind={'secondary'}
+      size={'large'}
       icon={Company}
       readonly={preserveCompany}
       showNavigate={false}
@@ -293,7 +293,9 @@
       props={{
         folders: [recruit.space.VacancyTemplates],
         template: templateId,
-        focusIndex: 4
+        focusIndex: 4,
+        kind: 'secondary',
+        size: 'large'
       }}
       on:change={handleTemplateChange}
     />
@@ -311,7 +313,7 @@
   <svelte:fragment slot="footer">
     <Button
       icon={IconAttachment}
-      kind={'transparent'}
+      size={'large'}
       on:click={() => {
         descriptionBox.attach()
       }}
diff --git a/plugins/recruit-resources/src/components/EditVacancy.svelte b/plugins/recruit-resources/src/components/EditVacancy.svelte
index 7e183fd462..79fa6a6c35 100644
--- a/plugins/recruit-resources/src/components/EditVacancy.svelte
+++ b/plugins/recruit-resources/src/components/EditVacancy.svelte
@@ -26,6 +26,9 @@
   import { createEventDispatcher } from 'svelte'
   import recruit from '../plugin'
   import VacancyApplications from './VacancyApplications.svelte'
+  import { getResource } from '@hcengineering/platform'
+  import notification from '@hcengineering/notification'
+  import { onDestroy } from 'svelte'
 
   export let _id: Ref<Vacancy>
   export let embedded = false
@@ -33,10 +36,16 @@
   let object: Required<Vacancy>
   let rawName: string = ''
   let rawDesc: string = ''
+  let lastId: Ref<Vacancy> | undefined = undefined
 
   let showAllMixins = false
 
   const dispatch = createEventDispatcher()
+  const notificationClient = getResource(notification.function.GetNotificationClient).then((res) => res())
+
+  onDestroy(async () => {
+    notificationClient.then((client) => client.updateLastView(_id, recruit.class.Vacancy))
+  })
 
   const client = getClient()
 
@@ -44,11 +53,18 @@
   const clazz = client.getHierarchy().getClass(recruit.class.Vacancy)
 
   function updateObject (_id: Ref<Vacancy>): void {
-    query.query(recruit.class.Vacancy, { _id }, (result) => {
-      object = result[0] as Required<Vacancy>
-      rawName = object.name
-      rawDesc = object.description
-    })
+    if (lastId !== _id) {
+      const prev = lastId
+      lastId = _id
+      if (prev) {
+        notificationClient.then((client) => client.updateLastView(prev, recruit.class.Vacancy))
+      }
+      query.query(recruit.class.Vacancy, { _id }, (result) => {
+        object = result[0] as Required<Vacancy>
+        rawName = object.name
+        rawDesc = object.description
+      })
+    }
   }
 
   $: updateObject(_id)
diff --git a/plugins/recruit-resources/src/components/KanbanCard.svelte b/plugins/recruit-resources/src/components/KanbanCard.svelte
index 35128bef7d..49a1d349bf 100644
--- a/plugins/recruit-resources/src/components/KanbanCard.svelte
+++ b/plugins/recruit-resources/src/components/KanbanCard.svelte
@@ -24,7 +24,7 @@
   import recruit from '@hcengineering/recruit'
   import { AssigneePresenter, StateRefPresenter } from '@hcengineering/task-resources'
   import tracker from '@hcengineering/tracker'
-  import { Component, showPanel } from '@hcengineering/ui'
+  import { Component, DueDatePresenter, showPanel } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import { ObjectPresenter } from '@hcengineering/view-resources'
   import ApplicationPresenter from './ApplicationPresenter.svelte'
@@ -90,6 +90,13 @@
         </div>
         <Component is={tracker.component.RelatedIssueSelector} props={{ object }} />
       </div>
+      <DueDatePresenter
+        value={object.dueDate}
+        shouldRender={object.dueDate !== null && object.dueDate !== undefined}
+        onChange={async (e) => {
+          await client.update(object, { dueDate: e })
+        }}
+      />
       {#if (object.attachments ?? 0) > 0}
         <div class="step-lr75">
           <AttachmentsPresenter value={object.attachments} {object} />
diff --git a/plugins/recruit-resources/src/components/Organizations.svelte b/plugins/recruit-resources/src/components/Organizations.svelte
index 34f1fd7656..2e852116e0 100644
--- a/plugins/recruit-resources/src/components/Organizations.svelte
+++ b/plugins/recruit-resources/src/components/Organizations.svelte
@@ -17,16 +17,7 @@
   import core, { Doc, DocumentQuery, Ref } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Applicant, Vacancy } from '@hcengineering/recruit'
-  import {
-    Button,
-    deviceOptionsStore as deviceInfo,
-    Icon,
-    IconAdd,
-    Label,
-    Loading,
-    SearchEdit,
-    showPopup
-  } from '@hcengineering/ui'
+  import { Button, ActionIcon, IconMoreH, Label, Loading, SearchEdit, showPopup, IconAdd } from '@hcengineering/ui'
   import view, { BuildModelKey, Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
     FilterBar,
@@ -230,34 +221,29 @@
     return result
   }
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 
   $: viewOptions = getViewOptions(descr, $viewOptionStore)
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      <div class="ac-header__icon"><Icon icon={recruit.icon.Vacancy} size={'small'} /></div>
-      <span class="ac-header__title"><Label label={recruit.string.Organizations} /></span>
-      <div class="ml-4"><FilterButton _class={recruit.class.Vacancy} /></div>
-    </div>
-    <SearchEdit
-      bind:value={search}
-      on:change={(e) => {
-        search = e.detail
-      }}
-    />
+<div class="ac-header full divide">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label label={recruit.string.Organizations} /></span>
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
-    <Button
-      icon={IconAdd}
-      label={recruit.string.CompanyCreateLabel}
-      size={'small'}
-      kind={'primary'}
-      on:click={showCreateDialog}
-    />
+  <div class="clear-mins mb-1">
+    <Button icon={IconAdd} label={recruit.string.CompanyCreateLabel} kind={'primary'} on:click={showCreateDialog} />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={(e) => (search = e.detail)} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
+    <FilterButton _class={recruit.class.Vacancy} />
+  </div>
+  <div class="ac-header-full medium-gap">
     <ViewletSettingButton bind:viewOptions viewlet={descr} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
   </div>
 </div>
 
diff --git a/plugins/recruit-resources/src/components/SkillsView.svelte b/plugins/recruit-resources/src/components/SkillsView.svelte
index d7eb394b1c..17df7541dd 100644
--- a/plugins/recruit-resources/src/components/SkillsView.svelte
+++ b/plugins/recruit-resources/src/components/SkillsView.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import tags, { selectedTagElements, TagElement } from '@hcengineering/tags'
-  import { Component, getCurrentLocation, navigate } from '@hcengineering/ui'
+  import { Component, getCurrentResolvedLocation, navigate } from '@hcengineering/ui'
   import recruit from '../plugin'
 
   function onTag (tag: TagElement): void {
     selectedTagElements.set([tag._id])
-    const loc = getCurrentLocation()
+    const loc = getCurrentResolvedLocation()
     loc.path[2] = 'recruit'
     loc.path[3] = 'candidates'
     loc.path.length = 4
diff --git a/plugins/recruit-resources/src/components/Vacancies.svelte b/plugins/recruit-resources/src/components/Vacancies.svelte
index b681d270a5..8a7cae5a9d 100644
--- a/plugins/recruit-resources/src/components/Vacancies.svelte
+++ b/plugins/recruit-resources/src/components/Vacancies.svelte
@@ -18,14 +18,14 @@
   import { Vacancy } from '@hcengineering/recruit'
   import {
     Button,
-    Icon,
-    IconAdd,
+    ActionIcon,
+    IconMoreH,
     Label,
     Loading,
     SearchEdit,
-    deviceOptionsStore as deviceInfo,
     showPopup,
-    tableToCSV
+    tableToCSV,
+    IconAdd
   } from '@hcengineering/ui'
   import view, { BuildModelKey, Viewlet, ViewletPreference } from '@hcengineering/view'
   import {
@@ -157,37 +157,18 @@
     return result
   }
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 
   $: viewOptions = getViewOptions(descr, $viewOptionStore)
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      <div class="ac-header__icon"><Icon icon={recruit.icon.Vacancy} size={'small'} /></div>
-      <span class="ac-header__title"><Label label={recruit.string.Vacancies} /></span>
-      <div class="ml-4"><FilterButton _class={recruit.class.Vacancy} /></div>
-    </div>
-    <SearchEdit
-      bind:value={search}
-      on:change={(e) => {
-        search = e.detail
-      }}
-    />
+<div class="ac-header full divide">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label label={recruit.string.Vacancies} /></span>
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
-    <Button
-      icon={IconAdd}
-      label={recruit.string.VacancyCreateLabel}
-      size={'small'}
-      kind={'primary'}
-      on:click={showCreateDialog}
-    />
-    <ViewletSettingButton bind:viewOptions viewlet={descr} />
+  <div class="ac-header-full medium-gap mb-1">
     <Button
       label={recruit.string.Export}
-      size={'small'}
       on:click={() => {
         // Download it
         const filename = 'vacancies' + new Date().toLocaleDateString() + '.csv'
@@ -204,6 +185,19 @@
         document.body.removeChild(link)
       }}
     />
+    <Button icon={IconAdd} label={recruit.string.VacancyCreateLabel} kind={'primary'} on:click={showCreateDialog} />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={(e) => (search = e.detail)} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
+    <FilterButton _class={recruit.class.Vacancy} />
+  </div>
+  <div class="ac-header-full medium-gap">
+    <ViewletSettingButton bind:viewOptions viewlet={descr} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
   </div>
 </div>
 
diff --git a/plugins/recruit-resources/src/components/VacancyCard.svelte b/plugins/recruit-resources/src/components/VacancyCard.svelte
index 93f353a7e0..ccbe712856 100644
--- a/plugins/recruit-resources/src/components/VacancyCard.svelte
+++ b/plugins/recruit-resources/src/components/VacancyCard.svelte
@@ -124,8 +124,8 @@
 <style lang="scss">
   .card-container {
     padding: 1rem 1.5rem 1.25rem;
-    background-color: var(--board-card-bg-color);
-    border: 1px solid var(--divider-color);
+    background-color: var(--theme-button-enabled);
+    border: 1px solid var(--theme-button-border);
     border-radius: 0.5rem;
     transition-property: box-shadow, background-color, border-color;
     transition-timing-function: var(--timing-shadow);
@@ -135,8 +135,7 @@
     min-height: 15rem;
 
     &:hover {
-      background-color: var(--board-card-bg-hover);
-      border-color: var(--button-border-color);
+      background-color: var(--theme-button-hovered);
       box-shadow: var(--accent-shadow);
     }
 
diff --git a/plugins/recruit-resources/src/components/VacancyCountPresenter.svelte b/plugins/recruit-resources/src/components/VacancyCountPresenter.svelte
index 55592f678a..ca16c19c70 100644
--- a/plugins/recruit-resources/src/components/VacancyCountPresenter.svelte
+++ b/plugins/recruit-resources/src/components/VacancyCountPresenter.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { Ref } from '@hcengineering/core'
   import { recruitId, Vacancy } from '@hcengineering/recruit'
-  import { closeTooltip, getCurrentLocation, Icon, navigate, tooltip } from '@hcengineering/ui'
+  import { closeTooltip, getCurrentResolvedLocation, Icon, navigate, tooltip } from '@hcengineering/ui'
   import recruit from '../plugin'
   import VacancyApplicationsPopup from './VacancyApplicationsPopup.svelte'
 
@@ -24,7 +24,7 @@
 
   function click () {
     closeTooltip()
-    const loc = getCurrentLocation()
+    const loc = getCurrentResolvedLocation()
     loc.fragment = undefined
     loc.query = undefined
     loc.path[2] = recruitId
diff --git a/plugins/recruit-resources/src/components/review/CreateReview.svelte b/plugins/recruit-resources/src/components/review/CreateReview.svelte
index 82ac3604da..fa9d130082 100644
--- a/plugins/recruit-resources/src/components/review/CreateReview.svelte
+++ b/plugins/recruit-resources/src/components/review/CreateReview.svelte
@@ -165,8 +165,8 @@
         bind:value={doc.attachedTo}
         label={recruit.string.Talent}
         placeholder={recruit.string.Talents}
-        kind={'no-border'}
-        size={'small'}
+        kind={'secondary'}
+        size={'large'}
         create={{ component: recruit.component.CreateCandidate, label: recruit.string.CreateTalent }}
       />
     {/if}
@@ -174,8 +174,8 @@
       _class={contact.class.Organization}
       bind:value={company}
       label={recruit.string.Company}
-      kind={'no-border'}
-      size={'small'}
+      kind={'secondary'}
+      size={'large'}
       showNavigate={false}
       create={{ component: contact.component.CreateOrganization, label: contact.string.CreateOrganization }}
     />
@@ -184,9 +184,9 @@
       bind:value={application}
       label={recruit.string.Application}
       placeholder={recruit.string.ApplicationCreateLabel}
-      kind={'no-border'}
+      kind={'secondary'}
+      size={'large'}
       searchField={'number'}
-      size={'small'}
       showNavigate={false}
       allowCategory={[recruit.completion.ApplicationCategory]}
     />
@@ -195,6 +195,8 @@
       labelNull={recruit.string.StartDate}
       mode={DateRangeMode.DATETIME}
       editable
+      kind={'secondary'}
+      size={'large'}
       on:change={updateStart}
     />
     <DateRangePresenter
@@ -202,7 +204,9 @@
       labelNull={recruit.string.DueDate}
       mode={DateRangeMode.DATETIME}
       editable
+      kind={'secondary'}
+      size={'large'}
     />
-    <UserBoxList bind:items={doc.participants} label={calendar.string.Participants} />
+    <UserBoxList bind:items={doc.participants} label={calendar.string.Participants} kind={'secondary'} size={'large'} />
   </svelte:fragment>
 </Card>
diff --git a/plugins/recruit-resources/src/utils.ts b/plugins/recruit-resources/src/utils.ts
index 977546382e..f0ee3f601f 100644
--- a/plugins/recruit-resources/src/utils.ts
+++ b/plugins/recruit-resources/src/utils.ts
@@ -1,16 +1,16 @@
+import contact, { getName } from '@hcengineering/contact'
 import { Class, Client, Doc, Hierarchy, Ref } from '@hcengineering/core'
 import { getClient } from '@hcengineering/presentation'
-import { Applicant, Candidate, recruitId, Review, Vacancy, VacancyList } from '@hcengineering/recruit'
-import { getCurrentLocation, getPanelURI, Location, ResolvedLocation } from '@hcengineering/ui'
+import { Applicant, Candidate, Review, Vacancy, VacancyList, recruitId } from '@hcengineering/recruit'
+import { Location, ResolvedLocation, getCurrentResolvedLocation, getPanelURI } from '@hcengineering/ui'
 import view from '@hcengineering/view'
-import contact, { getName } from '@hcengineering/contact'
 import { workbenchId } from '@hcengineering/workbench'
 import recruit from './plugin'
 
 type RecruitDocument = Vacancy | Applicant | Review
 
 export async function objectLinkProvider (doc: RecruitDocument): Promise<string> {
-  const location = getCurrentLocation()
+  const location = getCurrentResolvedLocation()
   return await Promise.resolve(
     `${window.location.protocol}//${window.location.host}/${workbenchId}/${
       location.path[1]
@@ -77,7 +77,6 @@ async function generateIdLocation (loc: Location, shortLink: string): Promise<Re
       path: [appComponent, workspace],
       fragment: getPanelURI(component, doc._id, _class, 'content')
     },
-    shouldNavigate: false,
     defaultLocation: {
       path: defaultPath,
       fragment: getPanelURI(component, doc._id, _class, 'content')
@@ -127,7 +126,6 @@ async function generateLocation (loc: Location, shortLink: string): Promise<Reso
       path: [appComponent, workspace],
       fragment: getPanelURI(component, doc._id, doc._class, 'content')
     },
-    shouldNavigate: false,
     defaultLocation: {
       path: defaultPath,
       fragment: getPanelURI(component, doc._id, doc._class, 'content')
@@ -136,7 +134,7 @@ async function generateLocation (loc: Location, shortLink: string): Promise<Reso
 }
 
 export async function getSequenceLink (doc: RecruitDocument): Promise<Location> {
-  const loc = getCurrentLocation()
+  const loc = getCurrentResolvedLocation()
   loc.path.length = 2
   loc.fragment = undefined
   loc.query = undefined
@@ -150,7 +148,7 @@ export async function getObjectLink (doc: Candidate | VacancyList): Promise<Loca
   const _class = Hierarchy.mixinOrClass(doc)
   const client = getClient()
   const clazz = client.getHierarchy().getClass(_class)
-  const loc = getCurrentLocation()
+  const loc = getCurrentResolvedLocation()
   loc.path.length = 2
   loc.fragment = undefined
   loc.query = undefined
diff --git a/plugins/setting-resources/src/components/Settings.svelte b/plugins/setting-resources/src/components/Settings.svelte
index c0956f36ba..b4820b3308 100644
--- a/plugins/setting-resources/src/components/Settings.svelte
+++ b/plugins/setting-resources/src/components/Settings.svelte
@@ -13,24 +13,24 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { EmployeeAccount } from '@hcengineering/contact'
+  import { AccountRole, getCurrentAccount } from '@hcengineering/core'
+  import login, { loginId } from '@hcengineering/login'
+  import { setMetadata } from '@hcengineering/platform'
   import presentation, { createQuery } from '@hcengineering/presentation'
   import setting, { SettingsCategory } from '@hcengineering/setting'
   import {
     Component,
-    fetchMetadataLocalStorage,
-    getCurrentLocation,
     Label,
-    location,
+    fetchMetadataLocalStorage,
+    getCurrentResolvedLocation,
     navigate,
+    resolvedLocationStore,
     setMetadataLocalStorage,
     showPopup
   } from '@hcengineering/ui'
   import { onDestroy } from 'svelte'
   import CategoryElement from './CategoryElement.svelte'
-  import login, { loginId } from '@hcengineering/login'
-  import { AccountRole, getCurrentAccount } from '@hcengineering/core'
-  import { EmployeeAccount } from '@hcengineering/contact'
-  import { setMetadata } from '@hcengineering/platform'
 
   export let visibileNav = true
   let category: SettingsCategory | undefined
@@ -51,7 +51,7 @@
   )
 
   onDestroy(
-    location.subscribe(async (loc) => {
+    resolvedLocationStore.subscribe(async (loc) => {
       categoryId = loc.path[3]
       category = findCategory(categoryId)
     })
@@ -61,7 +61,7 @@
     return categories.find((x) => x.name === name)
   }
   function selectCategory (id: string): void {
-    const loc = getCurrentLocation()
+    const loc = getCurrentResolvedLocation()
     loc.path[3] = id
     loc.path.length = 4
     navigate(loc)
@@ -69,7 +69,7 @@
   function signOut (): void {
     const tokens = fetchMetadataLocalStorage(login.metadata.LoginTokens)
     if (tokens !== null) {
-      const loc = getCurrentLocation()
+      const loc = getCurrentResolvedLocation()
       delete tokens[loc.path[1]]
       setMetadataLocalStorage(login.metadata.LoginTokens, tokens)
     }
diff --git a/plugins/setting-resources/src/components/WorkspaceSettings.svelte b/plugins/setting-resources/src/components/WorkspaceSettings.svelte
index 34c55bac54..e1ba5a0730 100644
--- a/plugins/setting-resources/src/components/WorkspaceSettings.svelte
+++ b/plugins/setting-resources/src/components/WorkspaceSettings.svelte
@@ -17,7 +17,7 @@
   import { AccountRole, getCurrentAccount } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import setting, { SettingsCategory } from '@hcengineering/setting'
-  import { Component, getCurrentLocation, Label, location, navigate } from '@hcengineering/ui'
+  import { Component, Label, getCurrentResolvedLocation, resolvedLocationStore, navigate } from '@hcengineering/ui'
   import { onDestroy } from 'svelte'
   import CategoryElement from './CategoryElement.svelte'
 
@@ -45,14 +45,14 @@
   }
 
   onDestroy(
-    location.subscribe(async (loc) => {
+    resolvedLocationStore.subscribe(async (loc) => {
       categoryId = loc.path[4]
       category = findCategory(categoryId)
     })
   )
 
   function selectCategory (id: string): void {
-    const loc = getCurrentLocation()
+    const loc = getCurrentResolvedLocation()
     loc.path[4] = id
     loc.path.length = 5
     navigate(loc)
diff --git a/plugins/tags-resources/src/components/CategoryBar.svelte b/plugins/tags-resources/src/components/CategoryBar.svelte
index 268a51e5b2..15fed0225c 100644
--- a/plugins/tags-resources/src/components/CategoryBar.svelte
+++ b/plugins/tags-resources/src/components/CategoryBar.svelte
@@ -154,7 +154,7 @@
 </script>
 
 {#if visibleCategories.length > 0}
-  <div class="flex-between header">
+  <div class="ac-header full divide">
     <div class="buttons-group small-gap">
       <Button
         label={tags.string.AllCategories}
diff --git a/plugins/tags-resources/src/components/CreateTagElement.svelte b/plugins/tags-resources/src/components/CreateTagElement.svelte
index 79aca66d02..43af3d7e4f 100644
--- a/plugins/tags-resources/src/components/CreateTagElement.svelte
+++ b/plugins/tags-resources/src/components/CreateTagElement.svelte
@@ -136,6 +136,8 @@
       <DropdownLabels
         icon={IconFolder}
         label={tags.string.CategoryLabel}
+        kind={'secondary'}
+        size={'large'}
         bind:selected={category}
         items={categoryItems}
         on:selected={() => {
diff --git a/plugins/tags-resources/src/components/LabelsPresenter.svelte b/plugins/tags-resources/src/components/LabelsPresenter.svelte
index e9aac1acfd..b75a003e68 100644
--- a/plugins/tags-resources/src/components/LabelsPresenter.svelte
+++ b/plugins/tags-resources/src/components/LabelsPresenter.svelte
@@ -11,7 +11,7 @@
   export let object: WithLookup<Doc>
   export let full: boolean
   export let ckeckFilled: boolean = false
-  export let kind: 'short' | 'full' = 'short'
+  export let kind: 'short' | 'full' | 'list' = 'short'
   export let isEditable: boolean = false
   export let action: (evt: MouseEvent) => Promise<void> | void = async () => {}
   export let compression: boolean = false
@@ -46,27 +46,35 @@
   })
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-  class="labels-container"
-  style:justify-content={kind === 'short' ? 'space-between' : 'flex-start'}
-  class:w-full={kind === 'full'}
-  style:flex-wrap={kind === 'short' || compression ? 'nowrap' : 'wrap'}
-  style:flex-shrink={compression ? 1 : 0}
-  use:resizeObserver={(element) => {
-    allWidth = element.clientWidth
-  }}
-  on:click|stopPropagation={(evt) => {
-    if (isEditable) tagsHandler(evt)
-    else action(evt)
-  }}
->
-  {#each items as value, i}
-    <div class="label-box wrap-{kind}" title={value.title}>
-      <TagReferencePresenter attr={undefined} {value} kind={'kanban-labels'} bind:realWidth={widths[i]} />
+{#if kind === 'list'}
+  {#each items as value}
+    <div class="label-box no-shrink" title={value.title}>
+      <TagReferencePresenter attr={undefined} {value} kind={'labels'} />
     </div>
   {/each}
-</div>
+{:else}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div
+    class="labels-container"
+    style:justify-content={kind === 'short' ? 'space-between' : 'flex-start'}
+    class:w-full={kind === 'full'}
+    style:flex-wrap={kind === 'short' || compression ? 'nowrap' : 'wrap'}
+    style:flex-shrink={compression ? 1 : 0}
+    use:resizeObserver={(element) => {
+      allWidth = element.clientWidth
+    }}
+    on:click|stopPropagation={(evt) => {
+      if (isEditable) tagsHandler(evt)
+      else action(evt)
+    }}
+  >
+    {#each items as value, i}
+      <div class="label-box wrap-{kind}" title={value.title}>
+        <TagReferencePresenter attr={undefined} {value} kind={'kanban-labels'} bind:realWidth={widths[i]} />
+      </div>
+    {/each}
+  </div>
+{/if}
 
 <style lang="scss">
   .labels-container {
@@ -87,7 +95,7 @@
     border-radius: 0.25rem;
     transition: box-shadow 0.15s ease-in-out;
 
-    &:last-child {
+    &:not(.no-shrink):last-child {
       flex-shrink: 0;
     }
   }
diff --git a/plugins/tags-resources/src/components/TagReferencePresenter.svelte b/plugins/tags-resources/src/components/TagReferencePresenter.svelte
index cbb148e112..b7faedb8fa 100644
--- a/plugins/tags-resources/src/components/TagReferencePresenter.svelte
+++ b/plugins/tags-resources/src/components/TagReferencePresenter.svelte
@@ -74,11 +74,12 @@
     align-items: center;
     flex-shrink: 0;
     padding-left: 0.5rem;
-    height: 1.5rem;
+    height: 1.75rem;
     min-width: 0;
     min-height: 0;
-    border: 1px solid var(--divider-color);
-    border-radius: 0.75rem;
+    background-color: var(--theme-list-button-color);
+    border: 1px solid var(--theme-button-border);
+    border-radius: 1.5rem;
 
     .btn-close {
       flex-shrink: 0;
diff --git a/plugins/tags-resources/src/components/TagsView.svelte b/plugins/tags-resources/src/components/TagsView.svelte
index 4a5ca00e21..9c3e5372c8 100644
--- a/plugins/tags-resources/src/components/TagsView.svelte
+++ b/plugins/tags-resources/src/components/TagsView.svelte
@@ -17,12 +17,21 @@
   import { Asset, IntlString, translate } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import { TagCategory, TagElement } from '@hcengineering/tags'
-  import { AnySvelteComponent, Button, Icon, IconAdd, Label, SearchEdit, showPopup } from '@hcengineering/ui'
+  import {
+    AnySvelteComponent,
+    Button,
+    ActionIcon,
+    IconMoreH,
+    Label,
+    SearchEdit,
+    showPopup,
+    IconAdd
+  } from '@hcengineering/ui'
   import { TableBrowser } from '@hcengineering/view-resources'
   import tags from '../plugin'
   import CategoryBar from './CategoryBar.svelte'
   import CreateTagElement from './CreateTagElement.svelte'
-  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  // import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
   export let title: IntlString = tags.string.Tags
   export let icon: Asset | AnySvelteComponent = tags.icon.Tags
@@ -86,25 +95,22 @@
     (tagElements?.get(b._id as Ref<TagElement>)?.count ?? 0) -
       (tagElements?.get(a._id as Ref<TagElement>)?.count ?? 0) ?? 0
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      <div class="ac-header__icon"><Icon {icon} size={'small'} /></div>
-      <span class="ac-header__title"><Label label={title} /></span>
-    </div>
-
-    <SearchEdit
-      bind:value={search}
-      on:change={() => {
-        updateResultQuery(search, category)
-      }}
-    />
+<div class="ac-header full divide">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label label={title} /></span>
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
-    <Button icon={IconAdd} label={сreateItemLabel} kind={'primary'} size={'small'} on:click={showCreateDialog} />
+
+  <div class="clear-mins mb-1">
+    <Button icon={IconAdd} label={сreateItemLabel} kind={'primary'} on:click={showCreateDialog} />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={() => updateResultQuery(search, category)} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
   </div>
 </div>
 
diff --git a/plugins/task-assets/assets/icons.svg b/plugins/task-assets/assets/icons.svg
index 4d26e20ad5..b5df454c64 100644
--- a/plugins/task-assets/assets/icons.svg
+++ b/plugins/task-assets/assets/icons.svg
@@ -5,13 +5,8 @@
       <path d="M19.2,11.4c-0.3,0-0.6,0.3-0.6,0.6v6.6c0,0.7-0.5,1.3-1.2,1.3H4.8c-0.7,0-1.2-0.6-1.2-1.3V5.4 c0-0.7,0.5-1.3,1.2-1.3h9.9c0.3,0,0.6-0.3,0.6-0.6S15,2.9,14.7,2.9H4.8C3.5,2.9,2.4,4,2.4,5.4v13.2c0,1.4,1.1,2.5,2.4,2.5h12.6 c1.3,0,2.4-1.1,2.4-2.5V12C19.8,11.7,19.5,11.4,19.2,11.4z"/>
     </g>
   </symbol>
-  <symbol id="kanban" viewBox="0 0 16 16">
-    <path d="M1 2.6C1 2.03995 1 1.75992 1.10899 1.54601C1.20487 1.35785 1.35785 1.20487 1.54601 1.10899C1.75992 1 2.03995 1 2.6 1H5.4C5.96005 1 6.24008 1 6.45399 1.10899C6.64215 1.20487 6.79513 1.35785 6.89101 1.54601C7 1.75992 7 2.03995 7 2.6V3.4C7 3.96005 7 4.24008 6.89101 4.45399C6.79513 4.64215 6.64215 4.79513 6.45399 4.89101C6.24008 5 5.96005 5 5.4 5H2.6C2.03995 5 1.75992 5 1.54601 4.89101C1.35785 4.79513 1.20487 4.64215 1.10899 4.45399C1 4.24008 1 3.96005 1 3.4V2.6Z" />
-    <path d="M9 2.6C9 2.03995 9 1.75992 9.10899 1.54601C9.20487 1.35785 9.35785 1.20487 9.54601 1.10899C9.75992 1 10.0399 1 10.6 1H13.4C13.9601 1 14.2401 1 14.454 1.10899C14.6422 1.20487 14.7951 1.35785 14.891 1.54601C15 1.75992 15 2.03995 15 2.6V3.4C15 3.96005 15 4.24008 14.891 4.45399C14.7951 4.64215 14.6422 4.79513 14.454 4.89101C14.2401 5 13.9601 5 13.4 5H10.6C10.0399 5 9.75992 5 9.54601 4.89101C9.35785 4.79513 9.20487 4.64215 9.10899 4.45399C9 4.24008 9 3.96005 9 3.4V2.6Z" />
-    <path d="M1 7.6C1 7.03995 1 6.75992 1.10899 6.54601C1.20487 6.35785 1.35785 6.20487 1.54601 6.10899C1.75992 6 2.03995 6 2.6 6H5.4C5.96005 6 6.24008 6 6.45399 6.10899C6.64215 6.20487 6.79513 6.35785 6.89101 6.54601C7 6.75992 7 7.03995 7 7.6V8.4C7 8.96005 7 9.24008 6.89101 9.45399C6.79513 9.64215 6.64215 9.79513 6.45399 9.89101C6.24008 10 5.96005 10 5.4 10H2.6C2.03995 10 1.75992 10 1.54601 9.89101C1.35785 9.79513 1.20487 9.64215 1.10899 9.45399C1 9.24008 1 8.96005 1 8.4V7.6Z" />
-    <path d="M9 7.6C9 7.03995 9 6.75992 9.10899 6.54601C9.20487 6.35785 9.35785 6.20487 9.54601 6.10899C9.75992 6 10.0399 6 10.6 6H13.4C13.9601 6 14.2401 6 14.454 6.10899C14.6422 6.20487 14.7951 6.35785 14.891 6.54601C15 6.75992 15 7.03995 15 7.6V8.4C15 8.96005 15 9.24008 14.891 9.45399C14.7951 9.64215 14.6422 9.79513 14.454 9.89101C14.2401 10 13.9601 10 13.4 10H10.6C10.0399 10 9.75992 10 9.54601 9.89101C9.35785 9.79513 9.20487 9.64215 9.10899 9.45399C9 9.24008 9 8.96005 9 8.4V7.6Z" />
-    <path d="M1 12.6C1 12.0399 1 11.7599 1.10899 11.546C1.20487 11.3578 1.35785 11.2049 1.54601 11.109C1.75992 11 2.03995 11 2.6 11H5.4C5.96005 11 6.24008 11 6.45399 11.109C6.64215 11.2049 6.79513 11.3578 6.89101 11.546C7 11.7599 7 12.0399 7 12.6V13.4C7 13.9601 7 14.2401 6.89101 14.454C6.79513 14.6422 6.64215 14.7951 6.45399 14.891C6.24008 15 5.96005 15 5.4 15H2.6C2.03995 15 1.75992 15 1.54601 14.891C1.35785 14.7951 1.20487 14.6422 1.10899 14.454C1 14.2401 1 13.9601 1 13.4V12.6Z" />
-    <path d="M9 12.6C9 12.0399 9 11.7599 9.10899 11.546C9.20487 11.3578 9.35785 11.2049 9.54601 11.109C9.75992 11 10.0399 11 10.6 11H13.4C13.9601 11 14.2401 11 14.454 11.109C14.6422 11.2049 14.7951 11.3578 14.891 11.546C15 11.7599 15 12.0399 15 12.6V13.4C15 13.9601 15 14.2401 14.891 14.454C14.7951 14.6422 14.6422 14.7951 14.454 14.891C14.2401 15 13.9601 15 13.4 15H10.6C10.0399 15 9.75992 15 9.54601 14.891C9.35785 14.7951 9.20487 14.6422 9.10899 14.454C9 14.2401 9 13.9601 9 13.4V12.6Z" />
+  <symbol id="kanban" viewBox="0 0 20 20">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 12.5H3.75L3.75 16.25H7.5V12.5ZM7.5 3.75H3.75L3.75 7.5H7.5V3.75ZM16.25 12.5H12.5V16.25H16.25V12.5ZM16.25 3.75H12.5V7.5H16.25V3.75ZM3.75 2.5C3.05964 2.5 2.5 3.05964 2.5 3.75V7.5C2.5 8.19036 3.05964 8.75 3.75 8.75H7.5C8.19036 8.75 8.75 8.19036 8.75 7.5V3.75C8.75 3.05964 8.19036 2.5 7.5 2.5H3.75ZM3.75 11.25C3.05964 11.25 2.5 11.8096 2.5 12.5V16.25C2.5 16.9404 3.05964 17.5 3.75 17.5H7.5C8.19036 17.5 8.75 16.9404 8.75 16.25V12.5C8.75 11.8096 8.19036 11.25 7.5 11.25H3.75ZM11.25 12.5C11.25 11.8096 11.8096 11.25 12.5 11.25H16.25C16.9404 11.25 17.5 11.8096 17.5 12.5V16.25C17.5 16.9404 16.9404 17.5 16.25 17.5H12.5C11.8096 17.5 11.25 16.9404 11.25 16.25V12.5ZM12.5 2.5C11.8096 2.5 11.25 3.05964 11.25 3.75V7.5C11.25 8.19036 11.8096 8.75 12.5 8.75H16.25C16.9404 8.75 17.5 8.19036 17.5 7.5V3.75C17.5 3.05964 16.9404 2.5 16.25 2.5H12.5Z" />
   </symbol>
   <symbol id='todo-check' viewBox="0 0 16 16">
     <path d="M8,14.5c-3.6,0-6.5-2.9-6.5-6.5S4.4,1.5,8,1.5s6.5,2.9,6.5,6.5S11.6,14.5,8,14.5z M8,2.5C5,2.5,2.5,5,2.5,8 c0,3,2.5,5.5,5.5,5.5c3,0,5.5-2.5,5.5-5.5C13.5,5,11,2.5,8,2.5z"/>
diff --git a/plugins/task-resources/src/components/AssignedTasks.svelte b/plugins/task-resources/src/components/AssignedTasks.svelte
index 9f2b9a5dd9..81469789fb 100644
--- a/plugins/task-resources/src/components/AssignedTasks.svelte
+++ b/plugins/task-resources/src/components/AssignedTasks.svelte
@@ -18,7 +18,7 @@
   import { createQuery, getClient } from '@hcengineering/presentation'
   import tags, { selectedTagElements, TagCategory, TagElement } from '@hcengineering/tags'
   import { DoneState, Task } from '@hcengineering/task'
-  import { Component, Icon, Label, SearchEdit } from '@hcengineering/ui'
+  import { Component, Label, SearchEdit } from '@hcengineering/ui'
   import { TableBrowser } from '@hcengineering/view-resources'
   import task from '../plugin'
 
@@ -70,9 +70,8 @@
   const handleChange = (evt: any) => updateCategory(evt.detail)
 </script>
 
-<div class="ac-header full">
+<div class="ac-header full divide caption-height">
   <div class="ac-header__wrap-title">
-    <div class="ac-header__icon"><Icon icon={task.icon.Task} size={'small'} /></div>
     <span class="ac-header__title"><Label label={labelTasks} /></span>
   </div>
 
diff --git a/plugins/task-resources/src/components/Dashboard.svelte b/plugins/task-resources/src/components/Dashboard.svelte
index f2ee3f6a49..bf65637e49 100644
--- a/plugins/task-resources/src/components/Dashboard.svelte
+++ b/plugins/task-resources/src/components/Dashboard.svelte
@@ -143,8 +143,9 @@
   $: updateDocs(_class, states, resultQuery)
 </script>
 
+<div class="min-h-4 max-h-4 h-4 flex-no-shrink" />
 <CreateFilter bind:value={modified} />
 
-<div class="ml-10 mt-4">
+<div class="mx-10 mt-4">
   <BarDashboard {items} />
 </div>
diff --git a/plugins/task-resources/src/components/StatusTableView.svelte b/plugins/task-resources/src/components/StatusTableView.svelte
index d6b0f23e95..8c6981925a 100644
--- a/plugins/task-resources/src/components/StatusTableView.svelte
+++ b/plugins/task-resources/src/components/StatusTableView.svelte
@@ -145,18 +145,17 @@
   }
 </script>
 
-<div class="header">
+<div class="ac-header full divide">
   <TabList
     items={[
       { id: 'AllStates', labelIntl: task.string.AllStates },
       { id: 'DoneStates', labelIntl: task.string.DoneStates }
     ]}
     multiselect={false}
-    size={'small'}
     on:select={handleSelect}
   />
   {#if doneStatusesView}
-    <TabList items={itemsDS} bind:selected={selectedDS} multiselect on:select={handleDoneSelect} size={'small'} />
+    <TabList items={itemsDS} bind:selected={selectedDS} multiselect on:select={handleDoneSelect} />
   {:else}
     <StatesBar bind:state {space} gap={'none'} on:change={() => updateQuery(query, selectedDoneStates)} />
   {/if}
@@ -171,20 +170,4 @@
     min-height: 0;
     height: 100%;
   }
-
-  .header {
-    display: grid;
-    grid-template-columns: auto auto;
-    justify-content: space-between;
-    align-items: center;
-    column-gap: 1rem;
-    padding: 0.75rem 0.75rem 0.75rem 2.5rem;
-    width: 100%;
-    min-height: 3.25rem;
-    min-width: 0;
-    background-color: var(--board-bg-color);
-
-    border-top: 1px solid var(--divider-color);
-    // border-bottom: 1px solid var(--divider-color);
-  }
 </style>
diff --git a/plugins/task-resources/src/components/kanban/KanbanTemplateSelector.svelte b/plugins/task-resources/src/components/kanban/KanbanTemplateSelector.svelte
index 88762b88d1..cc43d4db62 100644
--- a/plugins/task-resources/src/components/kanban/KanbanTemplateSelector.svelte
+++ b/plugins/task-resources/src/components/kanban/KanbanTemplateSelector.svelte
@@ -18,12 +18,14 @@
   import type { KanbanTemplate, KanbanTemplateSpace } from '@hcengineering/task'
   import task from '@hcengineering/task'
   import type { DropdownTextItem } from '@hcengineering/ui'
-  import { DropdownLabels } from '@hcengineering/ui'
+  import { DropdownLabels, ButtonKind, ButtonSize } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import plugin from '../../plugin'
 
   export let folders: Ref<KanbanTemplateSpace>[]
   export let template: Ref<KanbanTemplate> | undefined = undefined
+  export let kind: ButtonKind = 'no-border'
+  export let size: ButtonSize = 'small'
   export let focusIndex = -1
 
   let templates: KanbanTemplate[] = []
@@ -51,6 +53,8 @@
 <DropdownLabels
   {focusIndex}
   {items}
+  {kind}
+  {size}
   icon={task.icon.ManageTemplates}
   bind:selected={selectedItem}
   label={plugin.string.States}
diff --git a/plugins/task-resources/src/components/kanban/KanbanView.svelte b/plugins/task-resources/src/components/kanban/KanbanView.svelte
index 4d6738aecd..c1228698a3 100644
--- a/plugins/task-resources/src/components/kanban/KanbanView.svelte
+++ b/plugins/task-resources/src/components/kanban/KanbanView.svelte
@@ -106,7 +106,7 @@
 
   let kanbanUI: KanbanUI
   const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
-    kanbanUI.select(offset, of, dir)
+    kanbanUI?.select(offset, of, dir)
   })
   onMount(() => {
     ;(document.activeElement as HTMLElement)?.blur()
@@ -144,6 +144,7 @@
       }
     }
   )
+  $: listProvider.update(tasks)
 
   let categories: CategoryType[] = []
 
@@ -247,9 +248,6 @@
     {setGroupByValues}
     {getUpdateProps}
     {groupByDocs}
-    on:content={(evt) => {
-      listProvider.update(evt.detail)
-    }}
     on:obj-focus={(evt) => {
       listProvider.updateFocus(evt.detail)
     }}
diff --git a/plugins/tracker-assets/assets/icons.svg b/plugins/tracker-assets/assets/icons.svg
index 25958e8702..a1d7131f4c 100644
--- a/plugins/tracker-assets/assets/icons.svg
+++ b/plugins/tracker-assets/assets/icons.svg
@@ -84,29 +84,27 @@
     <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M7,14c3.9,0,7-3.1,7-7c0-3.9-3.1-7-7-7C3.1,0,0,3.1,0,7C0,10.9,3.1,14,7,14z M5,4C4.7,3.7,4.3,3.7,4,4S3.7,4.7,4,5l2,2L4,9C3.7,9.3,3.7,9.7,4,10c0.3,0.3,0.8,0.3,1.1,0l2-2l2,2c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1.1l-2-2l2-2c0.3-0.3,0.3-0.8,0-1.1C9.7,3.7,9.3,3.7,9,4l-2,2L5,4z" />
   </symbol>
 
-  <symbol id="priority-nopriority" viewBox="0 0 14 14">
-    <rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 5 6)" />
-    <rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 8 6)" />
-    <rect width="2" height="2" rx="1" transform="matrix(-1 0 0 1 11 6)" />
+  <symbol id="priority-nopriority" viewBox="0 0 16 16">
+    <rect opacity="0.6" x="2" y="7.5" width="12" height="1" rx="0.5" />
   </symbol>
   <symbol id="priority-urgent" viewBox="-1 -1 16 16">
     <path fill="var(--warning-color)" d="M2 0a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V2a2 2 0 00-2-2H2zm3.914 3h1.738L7.5 8.602H6.07L5.914 3zm1.809 7.164a.95.95 0 01-.938.938.934.934 0 110-1.867c.5 0 .934.417.938.93z" />
   </symbol>
   <symbol id="priority-high" viewBox="0 0 16 16">
-    <rect x="1" y="8" width="3" height="6" rx="1" />
-    <rect x="6" y="5" width="3" height="9" rx="1" />
-    <rect x="11" y="2" width="3" height="12" rx="1" />
-  </symbol>
-  <symbol id="priority-medium" viewBox="0 0 16 16">
-    <rect x="1" y="8" width="3" height="6" rx="1" />
-    <rect x="6" y="5" width="3" height="9" rx="1" />
-    <rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".4" />
-  </symbol>
-  <symbol id="priority-low" viewBox="0 0 16 16">
-    <rect x="1" y="8" width="3" height="6" rx="1" />
+    <rect x="1" y="8" width="3" height="6" rx="1" fill-opacity=".4" />
     <rect x="6" y="5" width="3" height="9" rx="1" fill-opacity=".4" />
     <rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".4" />
   </symbol>
+  <symbol id="priority-medium" viewBox="0 0 16 16">
+    <rect x="1" y="8" width="3" height="6" rx="1" fill-opacity=".4" />
+    <rect x="6" y="5" width="3" height="9" rx="1" fill-opacity=".4" />
+    <rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".15" />
+  </symbol>
+  <symbol id="priority-low" viewBox="0 0 16 16">
+    <rect x="1" y="8" width="3" height="6" rx="1" fill-opacity=".4" />
+    <rect x="6" y="5" width="3" height="9" rx="1" fill-opacity=".15" />
+    <rect x="11" y="2" width="3" height="12" rx="1" fill-opacity=".15" />
+  </symbol>
 
   <symbol id="list" viewBox="0 0 16 16">
     <path d="M1 1.8C1 1.51997 1 1.37996 1.0545 1.273C1.10243 1.17892 1.17892 1.10243 1.273 1.0545C1.37996 1 1.51997 1 1.8 1H14.2C14.48 1 14.62 1 14.727 1.0545C14.8211 1.10243 14.8976 1.17892 14.9455 1.273C15 1.37996 15 1.51997 15 1.8V2.2C15 2.48003 15 2.62004 14.9455 2.727C14.8976 2.82108 14.8211 2.89757 14.727 2.9455C14.62 3 14.48 3 14.2 3H1.8C1.51997 3 1.37996 3 1.273 2.9455C1.17892 2.89757 1.10243 2.82108 1.0545 2.727C1 2.62004 1 2.48003 1 2.2V1.8Z" />
diff --git a/plugins/tracker-assets/lang/en.json b/plugins/tracker-assets/lang/en.json
index 07b3ae3bd5..4f82219e0a 100644
--- a/plugins/tracker-assets/lang/en.json
+++ b/plugins/tracker-assets/lang/en.json
@@ -113,10 +113,6 @@
     "NewIssueDialogCloseNote": "All changes will be lost",
     "RemoveComponentDialogClose": "Delete the component?",
     "RemoveComponentDialogCloseNote": "Are you sure you want to delete this component? This operation cannot be undone",
-    "DueDatePopupTitle": "Due on {value}",
-    "DueDatePopupOverdueTitle": "Was due on {value}",
-    "DueDatePopupDescription": "{value, plural, =0 {Today} =1 {Tomorrow} other {# days remaining}}",
-    "DueDatePopupOverdueDescription": "{value, plural, =1 {1 day overdue} other {# days overdue}}",
     "Grouping": "Grouping",
     "Ordering": "Ordering",
     "CompletedIssues": "Completed issues",
diff --git a/plugins/tracker-assets/lang/ru.json b/plugins/tracker-assets/lang/ru.json
index d6366ee1c2..0b330e032d 100644
--- a/plugins/tracker-assets/lang/ru.json
+++ b/plugins/tracker-assets/lang/ru.json
@@ -113,10 +113,6 @@
     "NewIssueDialogCloseNote": "Все внесенные изменения будут потеряны",
     "RemoveComponentDialogClose": "Удалить компонент?",
     "RemoveComponentDialogCloseNote": "Уверены, что хотите удалить этот компонент? Эта операция не может быть отменена",
-    "DueDatePopupTitle": "Срок {value}",
-    "DueDatePopupOverdueTitle": "Должна была завершится {value}",
-    "DueDatePopupDescription": "{value, plural, =0 {Сегодня} =1 {Завтра} other {# дней осталось}}",
-    "DueDatePopupOverdueDescription": "{value, plural, =1 {1 день опозщдания} other {# дней опазданий}}",
     "Grouping": "Группировка",
     "Ordering": "Сортировка",
     "CompletedIssues": "Завершённые задачи",
diff --git a/plugins/tracker-resources/src/components/AccountPopup.svelte b/plugins/tracker-resources/src/components/AccountPopup.svelte
index c46db3c513..d90c7d5b47 100644
--- a/plugins/tracker-resources/src/components/AccountPopup.svelte
+++ b/plugins/tracker-resources/src/components/AccountPopup.svelte
@@ -14,22 +14,21 @@
 -->
 <script lang="ts">
   import { EmployeeAccount, formatName } from '@hcengineering/contact'
-  import { employeeByIdStore } from '@hcengineering/contact-resources'
+  import { Avatar, employeeByIdStore } from '@hcengineering/contact-resources'
   import { getCurrentAccount } from '@hcengineering/core'
   import login, { loginId } from '@hcengineering/login'
   import { setMetadata } from '@hcengineering/platform'
-  import { Avatar } from '@hcengineering/contact-resources'
-  import setting, { settingId, SettingsCategory } from '@hcengineering/setting'
+  import presentation from '@hcengineering/presentation'
+  import setting, { SettingsCategory, settingId } from '@hcengineering/setting'
   import {
-    closePopup,
-    fetchMetadataLocalStorage,
-    getCurrentLocation,
     Icon,
     Label,
+    closePopup,
+    fetchMetadataLocalStorage,
+    getCurrentResolvedLocation,
     navigate,
     setMetadataLocalStorage
   } from '@hcengineering/ui'
-  import presentation from '@hcengineering/presentation'
 
   // const client = getClient()
   async function getItems (): Promise<SettingsCategory[]> {
@@ -41,7 +40,7 @@
 
   function selectCategory (sp: SettingsCategory): void {
     closePopup()
-    const loc = getCurrentLocation()
+    const loc = getCurrentResolvedLocation()
     loc.path[2] = settingId
     loc.path[3] = sp.name
     loc.path.length = 4
@@ -51,7 +50,7 @@
   function signOut (): void {
     const tokens = fetchMetadataLocalStorage(login.metadata.LoginTokens)
     if (tokens !== null) {
-      const loc = getCurrentLocation()
+      const loc = getCurrentResolvedLocation()
       delete tokens[loc.path[1]]
       setMetadataLocalStorage(login.metadata.LoginTokens, tokens)
     }
diff --git a/plugins/tracker-resources/src/components/CommonTrackerDatePresenter.svelte b/plugins/tracker-resources/src/components/CommonTrackerDatePresenter.svelte
deleted file mode 100644
index 75baa91ced..0000000000
--- a/plugins/tracker-resources/src/components/CommonTrackerDatePresenter.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<!--
-// 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 { Timestamp } from '@hcengineering/core'
-  import { DatePresenter, tooltip, getDaysDifference } from '@hcengineering/ui'
-  import DueDatePopup from './DueDatePopup.svelte'
-  import { getDueDateIconModifier } from '../utils'
-
-  export let dateMs: number | null = null
-  export let shouldRender: boolean = true
-  export let onDateChange: (newDate: number | null) => void
-  export let kind: 'transparent' | 'primary' | 'link' | 'list' = 'primary'
-  export let editable: boolean = true
-
-  $: today = new Date(new Date(Date.now()).setHours(0, 0, 0, 0))
-  $: isOverdue = dateMs !== null && dateMs < today.getTime()
-  $: dueDate = dateMs === null ? null : new Date(dateMs)
-  $: daysDifference = dueDate === null ? null : getDaysDifference(today, dueDate)
-  $: iconModifier = getDueDateIconModifier(isOverdue, daysDifference)
-  $: formattedDate = !dateMs ? '' : new Date(dateMs).toLocaleString('default', { month: 'short', day: 'numeric' })
-
-  const handleDueDateChanged = async (event: CustomEvent<Timestamp>) => {
-    const newDate = event.detail
-
-    if (newDate === undefined || dateMs === newDate || !editable) {
-      return
-    }
-
-    onDateChange(newDate)
-  }
-</script>
-
-{#if shouldRender}
-  {#if formattedDate}
-    <div
-      class="clear-mins"
-      use:tooltip={{
-        direction: 'top',
-        component: DueDatePopup,
-        props: {
-          formattedDate,
-          daysDifference,
-          isOverdue,
-          iconModifier
-        }
-      }}
-    >
-      <DatePresenter
-        value={dateMs}
-        {editable}
-        shouldShowLabel={false}
-        icon={iconModifier}
-        {kind}
-        on:change={handleDueDateChanged}
-      />
-    </div>
-  {:else}
-    <DatePresenter
-      value={dateMs}
-      {editable}
-      shouldShowLabel={false}
-      icon={iconModifier}
-      {kind}
-      on:change={handleDueDateChanged}
-    />
-  {/if}
-{/if}
diff --git a/plugins/tracker-resources/src/components/ComponentSelector.svelte b/plugins/tracker-resources/src/components/ComponentSelector.svelte
index c836a24f7f..407d9a4e33 100644
--- a/plugins/tracker-resources/src/components/ComponentSelector.svelte
+++ b/plugins/tracker-resources/src/components/ComponentSelector.svelte
@@ -32,7 +32,8 @@
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = 'min-content'
   export let onlyIcon: boolean = false
-  export let enlargedText = false
+  export let enlargedText: boolean = false
+  export let short: boolean = false
 
   let selectedComponent: Component | undefined
   let defaultComponentLabel = ''
@@ -105,6 +106,7 @@
     icon={tracker.icon.Components}
     disabled={!isEditable}
     {loading}
+    {short}
     on:click={handleComponentEditorOpened}
   />
 {:else}
@@ -117,6 +119,7 @@
     icon={tracker.icon.Components}
     disabled={!isEditable}
     {loading}
+    {short}
     on:click={handleComponentEditorOpened}
     ><svelte:fragment slot="content">
       <span
diff --git a/plugins/tracker-resources/src/components/CreateIssue.svelte b/plugins/tracker-resources/src/components/CreateIssue.svelte
index 4132c0c672..142f283337 100644
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@@ -540,7 +540,13 @@
 >
   <svelte:fragment slot="header">
     <div class="flex-row-center">
-      <SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space={_space} />
+      <SpaceSelector
+        _class={tracker.class.Project}
+        label={tracker.string.Project}
+        bind:space={_space}
+        kind={'secondary'}
+        size={'large'}
+      />
     </div>
     <ObjectBox
       _class={tracker.class.IssueTemplate}
@@ -549,7 +555,8 @@
         space: _space
       }}
       on:change={handleTemplateChange}
-      size={'small'}
+      kind={'secondary'}
+      size={'large'}
       label={tracker.string.NoIssueTemplate}
       icon={tracker.icon.Issues}
       searchField={'title'}
@@ -615,8 +622,8 @@
     <div id="status-editor">
       <StatusEditor
         value={object}
-        kind="no-border"
-        size="small"
+        kind={'secondary'}
+        size={'large'}
         shouldShowLabel={true}
         on:change={({ detail }) => (object.status = detail)}
       />
@@ -626,8 +633,8 @@
         value={object}
         shouldShowLabel
         isEditable
-        kind="no-border"
-        size="small"
+        kind={'secondary'}
+        size={'large'}
         justify="center"
         on:change={({ detail }) => (object.priority = detail)}
       />
@@ -635,8 +642,8 @@
     <div id="assignee-editor">
       <AssigneeEditor
         value={object}
-        size="small"
-        kind="no-border"
+        kind={'secondary'}
+        size={'large'}
         width={'min-content'}
         on:change={({ detail }) => (object.assignee = detail)}
       />
@@ -647,7 +654,9 @@
         items: object.labels,
         key,
         targetClass: tracker.class.Issue,
-        countLabel: tracker.string.NumberLabels
+        countLabel: tracker.string.NumberLabels,
+        kind: 'secondary',
+        size: 'large'
       }}
       on:open={(evt) => {
         addTagRef(evt.detail)
@@ -657,23 +666,31 @@
       }}
     />
     <div id="estimation-editor">
-      <EstimationEditor kind={'no-border'} size={'small'} value={object} />
+      <EstimationEditor kind={'secondary'} size={'large'} value={object} />
     </div>
-    <ComponentSelector value={object.component} onChange={handleComponentIdChanged} isEditable={true} />
+    <ComponentSelector
+      value={object.component}
+      onChange={handleComponentIdChanged}
+      isEditable={true}
+      kind={'secondary'}
+      size={'large'}
+    />
     <SprintSelector
       value={object.sprint}
       onChange={handleSprintIdChanged}
       useComponent={(!originalIssue && object.component) || undefined}
+      kind={'secondary'}
+      size={'large'}
     />
     {#if object.dueDate !== null}
-      <DatePresenter bind:value={object.dueDate} editable />
+      <DatePresenter bind:value={object.dueDate} kind={'secondary'} size={'large'} editable />
     {/if}
     <div id="more-actions"><ActionIcon icon={IconMoreH} size={'medium'} action={showMoreActions} /></div>
   </svelte:fragment>
   <svelte:fragment slot="footer">
     <Button
       icon={IconAttachment}
-      kind={'transparent'}
+      size={'large'}
       on:click={() => {
         descriptionBox.attach()
       }}
diff --git a/plugins/tracker-resources/src/components/ModeSelector.svelte b/plugins/tracker-resources/src/components/ModeSelector.svelte
index 20b70fa2ab..93a20476c5 100644
--- a/plugins/tracker-resources/src/components/ModeSelector.svelte
+++ b/plugins/tracker-resources/src/components/ModeSelector.svelte
@@ -1,51 +1,29 @@
 <script lang="ts">
   import { IntlString } from '@hcengineering/platform'
-  import { Button } from '@hcengineering/ui'
+  import { TabList } from '@hcengineering/ui'
 
   export let mode: string
   export let config: [string, IntlString, object][]
   export let onChange: (_mode: string) => void
 
-  function getButtonShape (i: number) {
-    if (config.length === 1) return 'round'
-    switch (i) {
-      case 0:
-        return 'rectangle-right'
-      case config.length - 1:
-        return 'rectangle-left'
-      default:
-        return 'rectangle'
+  $: modeList = config.map((c) => {
+    return {
+      id: c[0],
+      labelIntl: c[1],
+      action: () => onChange(c[0])
     }
-  }
+  })
 </script>
 
-<div class="itemsContainer">
-  {#each config as [_mode, label, params], i}
-    <div class="buttonWrapper">
-      <Button
-        {label}
-        labelParams={params}
-        size="small"
-        on:click={() => onChange(_mode)}
-        selected={_mode === mode}
-        shape={getButtonShape(i)}
-      />
-    </div>
-  {/each}
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <TabList
+      items={modeList}
+      selected={mode}
+      kind={'normal'}
+      on:select={(result) => {
+        if (result.detail !== undefined && result.detail.action) result.detail.action()
+      }}
+    />
+  </div>
 </div>
-
-<style lang="scss">
-  .itemsContainer {
-    display: flex;
-    align-items: center;
-    padding: 0.65rem 1.35rem 0.65rem 2.25rem;
-    border-top: 1px solid var(--divider-color);
-  }
-  .buttonWrapper {
-    margin-right: 1px;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-</style>
diff --git a/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte b/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte
index c07e407caf..bf1916b42b 100644
--- a/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte
+++ b/plugins/tracker-resources/src/components/components/ComponentBrowser.svelte
@@ -90,17 +90,27 @@
   const retrieveMembers = (p: Component) => p.members
 </script>
 
-<div class="fs-title flex-between header">
-  <div class="flex-center">
-    <Label {label} />
-    <div class="componentTitle">
+<div class="ac-header full divide caption-height">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label {label} /></span>
+    <span class="componentTitle">
       › <Label label={title} />
-    </div>
+    </span>
+  </div>
+
+  <div class="ac-header-full medium-gap mb-1">
+    <TabList
+      items={viewList}
+      selected={viewMode}
+      on:select={(result) => {
+        if (result.detail !== undefined && result.detail.id !== viewMode) viewMode = result.detail.id
+      }}
+    />
+    <Button icon={IconAdd} label={tracker.string.Component} kind={'primary'} on:click={showCreateDialog} />
   </div>
-  <Button size="small" icon={IconAdd} label={tracker.string.Component} kind={'primary'} on:click={showCreateDialog} />
 </div>
-<div class="itemsContainer">
-  <div class="flex-row-center">
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
     <TabList
       items={modeList}
       selected={mode}
@@ -109,26 +119,9 @@
         if (result.detail !== undefined && result.detail.action) result.detail.action()
       }}
     />
-    <!-- <div class="ml-3 filterButton">
-      <BuComponet      size="small"
-        icon={IconAdd}
-        kind={'link-bordered'}
-        borderStyle={'dashed'}
-        label={tracker.string.Filter}
-        on:click={() => {}}
-      />
-    </div> -->
   </div>
-  <TabList
-    items={viewList}
-    selected={viewMode}
-    kind={'secondary'}
-    size={'small'}
-    on:select={(result) => {
-      if (result.detail !== undefined && result.detail.id !== viewMode) viewMode = result.detail.id
-    }}
-  />
 </div>
+
 <ComponentsListBrowser
   _class={tracker.class.Component}
   itemsConfig={[
diff --git a/plugins/tracker-resources/src/components/components/ComponentEditor.svelte b/plugins/tracker-resources/src/components/components/ComponentEditor.svelte
index db6a12e93f..6a8c4aac49 100644
--- a/plugins/tracker-resources/src/components/components/ComponentEditor.svelte
+++ b/plugins/tracker-resources/src/components/components/ComponentEditor.svelte
@@ -52,7 +52,7 @@
   <div
     class="clear-mins"
     class:minus-margin={kind === 'list-header'}
-    class:compression
+    class:label-wrapper={compression}
     use:tooltip={{ label: value.component ? tracker.string.MoveToComponent : tracker.string.AddToComponent }}
   >
     <ComponentSelector
@@ -67,6 +67,7 @@
       {onlyIcon}
       {enlargedText}
       value={value.component}
+      short={compression}
       onChange={handleComponentIdChanged}
     />
   </div>
@@ -76,8 +77,4 @@
   .minus-margin {
     margin-left: -0.5rem;
   }
-  .compression {
-    flex-shrink: 5;
-    min-width: 1rem;
-  }
 </style>
diff --git a/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte b/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte
index 5ecc619366..cad67a26a1 100644
--- a/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte
+++ b/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { WithLookup } from '@hcengineering/core'
   import { Component } from '@hcengineering/tracker'
-  import { getCurrentLocation, Icon, navigate, tooltip } from '@hcengineering/ui'
+  import { Icon, getCurrentResolvedLocation, navigate, tooltip } from '@hcengineering/ui'
   import tracker from '../../plugin'
 
   export let value: WithLookup<Component>
@@ -32,7 +32,7 @@
       onClick()
     }
 
-    const loc = getCurrentLocation()
+    const loc = getCurrentResolvedLocation()
     loc.path[4] = 'components'
     loc.path[5] = value._id
     loc.path.length = 6
diff --git a/plugins/tracker-resources/src/components/components/Components.svelte b/plugins/tracker-resources/src/components/components/Components.svelte
index 7c0dfce5db..9dd92701fe 100644
--- a/plugins/tracker-resources/src/components/components/Components.svelte
+++ b/plugins/tracker-resources/src/components/components/Components.svelte
@@ -17,12 +17,18 @@
   import { IntlString } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import { Component } from '@hcengineering/tracker'
-  import { closePopup, closeTooltip, getCurrentLocation, location, navigate } from '@hcengineering/ui'
+  import {
+    closePopup,
+    closeTooltip,
+    getCurrentResolvedLocation,
+    navigate,
+    resolvedLocationStore
+  } from '@hcengineering/ui'
   import { onDestroy } from 'svelte'
   import tracker from '../../plugin'
   import { ComponentsViewMode } from '../../utils'
-  import EditComponent from './EditComponent.svelte'
   import ComponentBrowser from './ComponentBrowser.svelte'
+  import EditComponent from './EditComponent.svelte'
 
   export let label: IntlString = tracker.string.Components
   export let query: DocumentQuery<Component> = {}
@@ -33,7 +39,7 @@
   let component: Component | undefined
 
   onDestroy(
-    location.subscribe(async (loc) => {
+    resolvedLocationStore.subscribe(async (loc) => {
       closeTooltip()
       closePopup()
 
@@ -56,7 +62,7 @@
   <EditComponent
     {component}
     on:component={(evt) => {
-      const loc = getCurrentLocation()
+      const loc = getCurrentResolvedLocation()
       loc.path[5] = evt.detail
       navigate(loc)
     }}
diff --git a/plugins/tracker-resources/src/components/components/ComponentsListBrowser.svelte b/plugins/tracker-resources/src/components/components/ComponentsListBrowser.svelte
index 00c45163fe..3880853b68 100644
--- a/plugins/tracker-resources/src/components/components/ComponentsListBrowser.svelte
+++ b/plugins/tracker-resources/src/components/components/ComponentsListBrowser.svelte
@@ -1,14 +1,14 @@
 <!--
 // 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.
 -->
@@ -27,6 +27,7 @@
   import { onMount } from 'svelte'
   import ComponentsList from './ComponentsList.svelte'
   import ComponentTimeline from './ComponentTimeline.svelte'
+  import { Scroller } from '@hcengineering/ui'
 
   export let _class: Ref<Class<Doc>>
   export let itemsConfig: (BuildModelKey | string)[]
@@ -60,21 +61,23 @@
 />
 
 {#if viewMode === 'list'}
-  <ComponentsList
-    bind:this={componentsList}
-    {_class}
-    {itemsConfig}
-    {loadingProps}
-    {components}
-    selectedObjectIds={$selectionStore ?? []}
-    selectedRowIndex={listProvider.current($focusStore)}
-    on:row-focus={(event) => {
-      listProvider.updateFocus(event.detail ?? undefined)
-    }}
-    on:check={(event) => {
-      listProvider.updateSelection(event.detail.docs, event.detail.value)
-    }}
-  />
+  <Scroller>
+    <ComponentsList
+      bind:this={componentsList}
+      {_class}
+      {itemsConfig}
+      {loadingProps}
+      {components}
+      selectedObjectIds={$selectionStore ?? []}
+      selectedRowIndex={listProvider.current($focusStore)}
+      on:row-focus={(event) => {
+        listProvider.updateFocus(event.detail ?? undefined)
+      }}
+      on:check={(event) => {
+        listProvider.updateSelection(event.detail.docs, event.detail.value)
+      }}
+    />
+  </Scroller>
 {:else}
   <ComponentTimeline
     bind:this={componentTimeline}
diff --git a/plugins/tracker-resources/src/components/components/NewComponent.svelte b/plugins/tracker-resources/src/components/components/NewComponent.svelte
index 43a5faf910..f7bca5ac6f 100644
--- a/plugins/tracker-resources/src/components/components/NewComponent.svelte
+++ b/plugins/tracker-resources/src/components/components/NewComponent.svelte
@@ -62,7 +62,13 @@
   on:changeContent
 >
   <svelte:fragment slot="header">
-    <SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space />
+    <SpaceSelector
+      _class={tracker.class.Project}
+      label={tracker.string.Project}
+      bind:space
+      kind={'secondary'}
+      size={'large'}
+    />
   </svelte:fragment>
   <EditBox bind:value={object.label} placeholder={tracker.string.ComponentNamePlaceholder} kind={'large-style'} focus />
   <StyledTextArea
@@ -74,6 +80,8 @@
     <ComponentStatusSelector
       selectedComponentStatus={object.status}
       onComponentStatusChange={handleComponentStatusChanged}
+      kind={'secondary'}
+      size={'large'}
     />
     <EmployeeBox
       label={tracker.string.ComponentLead}
@@ -82,10 +90,29 @@
       allowDeselect
       titleDeselect={tracker.string.Unassigned}
       showNavigate={false}
+      kind={'secondary'}
+      size={'large'}
+    />
+    <UserBoxList
+      bind:items={object.members}
+      label={tracker.string.ComponentMembersSearchPlaceholder}
+      kind={'secondary'}
+      size={'large'}
     />
-    <UserBoxList bind:items={object.members} label={tracker.string.ComponentMembersSearchPlaceholder} />
     <!-- TODO: add labels after customize IssueNeedsToBeCompletedByThisDate -->
-    <DatePresenter bind:value={object.startDate} labelNull={tracker.string.StartDate} editable />
-    <DatePresenter bind:value={object.targetDate} labelNull={tracker.string.TargetDate} editable />
+    <DatePresenter
+      bind:value={object.startDate}
+      labelNull={tracker.string.StartDate}
+      kind={'secondary'}
+      size={'large'}
+      editable
+    />
+    <DatePresenter
+      bind:value={object.targetDate}
+      labelNull={tracker.string.TargetDate}
+      kind={'secondary'}
+      size={'large'}
+      editable
+    />
   </svelte:fragment>
 </Card>
diff --git a/plugins/tracker-resources/src/components/components/TargetDatePresenter.svelte b/plugins/tracker-resources/src/components/components/TargetDatePresenter.svelte
index aea60ac320..1194d0c969 100644
--- a/plugins/tracker-resources/src/components/components/TargetDatePresenter.svelte
+++ b/plugins/tracker-resources/src/components/components/TargetDatePresenter.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { Component } from '@hcengineering/tracker'
   import { getClient } from '@hcengineering/presentation'
-  import CommonTrackerDatePresenter from '../CommonTrackerDatePresenter.svelte'
+  import { DueDatePresenter } from '@hcengineering/ui'
 
   export let value: Component
 
@@ -28,4 +28,4 @@
   }
 </script>
 
-<CommonTrackerDatePresenter dateMs={dueDateMs} shouldRender={true} onDateChange={handleDueDateChanged} />
+<DueDatePresenter value={dueDateMs} shouldRender={true} onChange={handleDueDateChanged} />
diff --git a/plugins/tracker-resources/src/components/icons/StatusIcon.svelte b/plugins/tracker-resources/src/components/icons/StatusIcon.svelte
index 719c9c0581..e54a90ad66 100644
--- a/plugins/tracker-resources/src/components/icons/StatusIcon.svelte
+++ b/plugins/tracker-resources/src/components/icons/StatusIcon.svelte
@@ -17,41 +17,57 @@
   {fill}
   id={category._id}
   style:transform={category._id === tracker.issueStatusCategory.Started ? 'rotate(-90deg)' : ''}
-  viewBox="0 0 14 14"
+  viewBox="0 0 16 16"
   xmlns="http://www.w3.org/2000/svg"
 >
   {#if category._id === tracker.issueStatusCategory.Backlog}
     <path
-      d="M13.9,7.9l-2-0.3c0-0.2,0-0.4,0-0.7s0-0.4,0-0.7l2-0.3C14,6.4,14,6.7,14,7S14,7.6,13.9,7.9z M13.5,4.3c-0.2-0.6-0.5-1.1-0.9-1.6L11,4c0.3,0.3,0.5,0.7,0.7,1.1L13.5,4.3z M11.3,1.4L10,3C9.7,2.8,9.3,2.5,8.9,2.4l0.8-1.8C10.2,0.8,10.8,1.1,11.3,1.4z M7.9,0.1L7.7,2C7.4,2,7.2,2,7,2S6.6,2,6.3,2l-0.3-2C6.4,0,6.7,0,7,0S7.6,0,7.9,0.1z M4.3,0.5l0.8,1.8C4.7,2.5,4.3,2.8,4,3L2.7,1.4C3.2,1.1,3.8,0.8,4.3,0.5z M1.4,2.7L3,4C2.8,4.3,2.5,4.7,2.4,5.1L0.5,4.3C0.8,3.8,1.1,3.2,1.4,2.7z M0.1,6.1C0,6.4,0,6.7,0,7s0,0.6,0.1,0.9l2-0.3C2,7.4,2,7.2,2,7s0-0.4,0-0.7L0.1,6.1z M0.5,9.7l1.8-0.8C2.5,9.3,2.8,9.7,3,10l-1.6,1.2C1.1,10.8,0.8,10.2,0.5,9.7z M2.7,12.6L4,11c0.3,0.3,0.7,0.5,1.1,0.7l-0.8,1.8C3.8,13.2,3.2,12.9,2.7,12.6z M6.1,13.9l0.3-2c0.2,0,0.4,0,0.7,0s0.4,0,0.7,0l0.3,2C7.6,14,7.3,14,7,14S6.4,14,6.1,13.9z M9.7,13.5l-0.8-1.8c0.4-0.2,0.8-0.4,1.1-0.7l1.2,1.6C10.8,12.9,10.2,13.2,9.7,13.5z M12.6,11.3L11,10c0.3-0.3,0.5-0.7,0.7-1.1l1.8,0.8C13.2,10.2,12.9,10.8,12.6,11.3z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.97975 1.07389C3.92356 1.52014 1.50831 3.94118 1.0708 7.0002H2.08287C2.50337 4.49345 4.47822 2.51374 6.9825 2.08599L6.97975 1.07389ZM8.98249 2.08014L8.97974 1.06812C12.055 1.49885 14.4896 3.92773 14.9291 7.0002H13.917C13.4945 4.48183 11.5033 2.4954 8.98249 2.08014ZM9.01467 13.9146C11.5201 13.4879 13.4962 11.5077 13.917 9.00019H14.929C14.4913 12.06 12.0748 14.4815 9.01742 14.9267L9.01467 13.9146ZM2.0829 9.0002C2.50529 11.5176 4.49522 13.5034 7.01468 13.9196L7.01743 14.9317C3.94351 14.4999 1.51022 12.0717 1.07083 9.0002H2.0829Z"
     />
   {:else if category._id === tracker.issueStatusCategory.Unstarted}
     <path
-      d="M7,0C3.1,0,0,3.1,0,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C14,3.1,10.9,0,7,0z M7,12c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S9.8,12,7,12z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z"
     />
   {:else if category._id === tracker.issueStatusCategory.Started}
     <path
-      d="M7,0C3.1,0,0,3.1,0,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C14,3.1,10.9,0,7,0z M7,12c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S9.8,12,7,12z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15Z"
     />
+
     {#if statusIcon.count && statusIcon.index}
       <path
-        d="M 3.5 3.5 L 7 3.5 A 3.5 3.5 0 {statusIcon.index > (statusIcon.count - 1) / 2 ? 1 : 0} 1 {Math.cos(
+        d="M 4.5 4.5 L 9 4.5 A 4.5 4.5 0 {statusIcon.index > (statusIcon.count - 1) / 2 ? 1 : 0} 1 {Math.cos(
           ((2 * Math.PI) / statusIcon.count) * statusIcon.index - 0.01
         ) *
-          3.5 +
-          3.5} {Math.sin(((2 * Math.PI) / statusIcon.count) * statusIcon.index - 0.01) * 3.5 + 3.5} Z"
+          4.5 +
+          4.5} {Math.sin(((2 * Math.PI) / statusIcon.count) * statusIcon.index - 0.01) * 4.5 + 4.5} Z"
         transform="translate(3.5,3.5)"
       />
     {:else}
-      <circle cx="7" cy="7" r="3.5" fill="var(--error-color)" opacity=".15" />
+      <circle cx="8" cy="8" r="4" fill="var(--error-color)" opacity=".15" />
     {/if}
   {:else if category._id === tracker.issueStatusCategory.Completed}
     <path
-      d="M7,0C3.1,0,0,3.1,0,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C14,3.1,10.9,0,7,0z M9.9,3.9c0.3-0.3,0.8-0.3,1.2,0l0,0c0.3,0.3,0.3,0.9,0,1.2l-5,5c-0.3,0.3-0.9,0.3-1.2,0l-2-2c-0.3-0.3-0.3-0.9,0-1.2c0.2-0.2,0.4-0.2,0.6-0.2s0.4,0.1,0.6,0.2l1.4,1.4l4-4v0L9.9,3.9z"
+      d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C15,4.1,11.9,1,8,1z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S11.3,14,8,14z"
+    />
+    <path
+      d="M10.6,6.1L7.5,9.2L5.9,7.6c-0.2-0.2-0.6-0.2-0.8,0s-0.2,0.6,0,0.8l2,2c0.1,0.1,0.3,0.2,0.4,0.2s0.3-0.1,0.4-0.2l3.5-3.5c0.2-0.2,0.2-0.6,0-0.8S10.8,5.8,10.6,6.1z"
     />
   {:else if category._id === tracker.issueStatusCategory.Canceled}
     <path
-      style="fill-rule:evenodd;clip-rule:evenodd;"
-      d="M7,14c3.9,0,7-3.1,7-7c0-3.9-3.1-7-7-7C3.1,0,0,3.1,0,7C0,10.9,3.1,14,7,14z M5,4C4.7,3.7,4.3,3.7,4,4S3.7,4.7,4,5l2,2L4,9C3.7,9.3,3.7,9.7,4,10c0.3,0.3,0.8,0.3,1.1,0l2-2l2,2c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1.1l-2-2l2-2c0.3-0.3,0.3-0.8,0-1.1C9.7,3.7,9.3,3.7,9,4l-2,2L5,4z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C15,4.1,11.9,1,8,1z M8,14c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S11.3,14,8,14z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.5,5.5c-0.2-0.2-0.6-0.2-0.8,0L8,7.2L6.3,5.5c-0.2-0.2-0.6-0.2-0.8,0s-0.2,0.6,0,0.8L7.2,8L5.5,9.7c-0.2,0.2-0.2,0.6,0,0.8s0.6,0.2,0.8,0L8,8.8l1.7,1.7c0.2,0.2,0.6,0.2,0.8,0c0.2-0.2,0.2-0.6,0-0.8L8.8,8l1.7-1.7C10.8,6.1,10.8,5.7,10.5,5.5z"
     />
   {/if}
 </svg>
diff --git a/plugins/tracker-resources/src/components/issues/DueDateEditor.svelte b/plugins/tracker-resources/src/components/issues/DueDateEditor.svelte
index 22b6505f24..2267b60a2c 100644
--- a/plugins/tracker-resources/src/components/issues/DueDateEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/DueDateEditor.svelte
@@ -15,14 +15,13 @@
 <script lang="ts">
   import { getClient } from '@hcengineering/presentation'
   import { Issue } from '@hcengineering/tracker'
-  import { DatePresenter, getDaysDifference } from '@hcengineering/ui'
-  import { getDueDateIconModifier } from '../../utils'
+  import { DueDatePresenter } from '@hcengineering/ui'
 
   export let value: Issue
 
   const client = getClient()
 
-  const handleDueDateChanged = async (newDueDate: number | undefined) => {
+  const handleDueDateChanged = async (newDueDate: number | undefined | null) => {
     if (newDueDate === undefined || value.dueDate === newDueDate) {
       return
     }
@@ -37,21 +36,8 @@
       { dueDate: newDueDate }
     )
   }
-
-  $: today = new Date(new Date(Date.now()).setHours(0, 0, 0, 0))
-  $: isOverdue = value.dueDate !== null && value.dueDate < today.getTime()
-  $: dueDate = value.dueDate === null ? null : new Date(value.dueDate)
-  $: daysDifference = dueDate === null ? null : getDaysDifference(today, dueDate)
-  $: iconModifier = getDueDateIconModifier(isOverdue, daysDifference)
 </script>
 
 {#if value}
-  <!-- TODO: fix button style and alignment -->
-  <DatePresenter
-    kind={'link'}
-    value={value.dueDate}
-    icon={iconModifier}
-    editable
-    on:change={({ detail }) => handleDueDateChanged(detail)}
-  />
+  <DueDatePresenter kind={'link'} value={value.dueDate} editable onChange={(e) => handleDueDateChanged(e)} />
 {/if}
diff --git a/plugins/tracker-resources/src/components/issues/DueDatePresenter.svelte b/plugins/tracker-resources/src/components/issues/DueDatePresenter.svelte
index 018e96b9f9..01cae56b66 100644
--- a/plugins/tracker-resources/src/components/issues/DueDatePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/DueDatePresenter.svelte
@@ -16,11 +16,11 @@
   import { WithLookup } from '@hcengineering/core'
   import { Issue } from '@hcengineering/tracker'
   import { getClient } from '@hcengineering/presentation'
-  import CommonTrackerDatePresenter from '../CommonTrackerDatePresenter.svelte'
   import tracker from '../../plugin'
+  import { ButtonKind, DueDatePresenter } from '@hcengineering/ui'
 
   export let value: WithLookup<Issue>
-  export let kind: 'transparent' | 'primary' | 'link' | 'list' = 'primary'
+  export let kind: ButtonKind = 'link'
   export let isEditable = true
 
   const client = getClient()
@@ -41,14 +41,15 @@
 
   $: shouldRenderPresenter =
     dueDateMs !== null &&
+    dueDateMs !== undefined &&
     value.$lookup?.status?.category !== tracker.issueStatusCategory.Completed &&
     value.$lookup?.status?.category !== tracker.issueStatusCategory.Canceled
 </script>
 
-<CommonTrackerDatePresenter
-  dateMs={dueDateMs}
+<DueDatePresenter
+  value={dueDateMs}
   shouldRender={shouldRenderPresenter}
-  onDateChange={handleDueDateChanged}
+  onChange={handleDueDateChanged}
   editable={isEditable}
   {kind}
 />
diff --git a/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte b/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
index 3dbc677862..34d63afd69 100644
--- a/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuePresenter.svelte
@@ -26,6 +26,7 @@
   export let shouldShowAvatar: boolean = false
   export let noUnderline = false
   export let inline = false
+  export let kind: 'list' | undefined = undefined
 
   // Extra properties
   export let projects: Map<Ref<Project>, Project> | undefined = undefined
@@ -48,7 +49,7 @@
 
 {#if value}
   <DocNavLink object={value} {onClick} {disableClick} {noUnderline} {inline} component={tracker.component.EditIssue}>
-    <span class="issuePresenterRoot" class:inline>
+    <span class="issuePresenterRoot" class:inline class:list={kind === 'list'}>
       {#if !inline && shouldShowAvatar}
         <div class="icon" use:tooltip={{ label: tracker.string.Issue }}>
           <Icon icon={tracker.icon.Issues} size={'small'} />
@@ -67,12 +68,17 @@
     align-items: center;
     flex-shrink: 0;
     max-width: 5rem;
-    color: var(--content-color);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     cursor: pointer;
 
+    &:not(.list) {
+      color: var(--theme-content-color);
+    }
+    &.list {
+      color: var(--theme-halfcontent-color);
+    }
     .icon {
       margin-right: 0.5rem;
       color: var(--dark-color);
diff --git a/plugins/tracker-resources/src/components/issues/IssuesHeader.svelte b/plugins/tracker-resources/src/components/issues/IssuesHeader.svelte
index 33315ca2cb..faafae270e 100644
--- a/plugins/tracker-resources/src/components/issues/IssuesHeader.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesHeader.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { Ref, Space } from '@hcengineering/core'
-  import { Icon, TabList, SearchEdit } from '@hcengineering/ui'
+  import { ActionIcon, TabList, SearchEdit, IconMoreH } from '@hcengineering/ui'
   import { Viewlet } from '@hcengineering/view'
   import { FilterButton, setActiveViewletId } from '@hcengineering/view-resources'
   import tracker from '../../plugin'
   import { WithLookup } from '@hcengineering/core'
-  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  // import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
 
   export let space: Ref<Space> | undefined = undefined
   export let viewlet: WithLookup<Viewlet> | undefined
@@ -22,30 +22,24 @@
     }
   })
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      {#if showLabelSelector}
-        <slot name="label_selector" />
-      {:else}
-        <div class="ac-header__icon"><Icon icon={tracker.icon.Issues} size={'small'} /></div>
-        <span class="ac-header__title">{label}</span>
-      {/if}
-      <div class="ml-4"><FilterButton _class={tracker.class.Issue} {space} /></div>
-    </div>
-    <SearchEdit bind:value={search} on:change={() => {}} />
+<div class="ac-header full divide">
+  <div class="ac-header__wrap-title">
+    {#if showLabelSelector}
+      <slot name="label_selector" />
+    {:else}
+      <span class="ac-header__title">{label}</span>
+    {/if}
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
+  <div class="mb-1 clear-mins">
     {#if viewlets.length > 1}
       <TabList
         items={viewslist}
         multiselect={false}
         selected={viewlet?._id}
-        kind={'secondary'}
-        size={'small'}
+        onlyIcons
         on:select={(result) => {
           if (result.detail !== undefined) {
             if (viewlet?._id === result.detail.id) return
@@ -56,6 +50,18 @@
         }}
       />
     {/if}
-    <slot name="extra" />
+    <slot name="header-tools" />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} on:change={() => {}} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
+    <FilterButton _class={tracker.class.Issue} {space} />
+  </div>
+  <div class="ac-header-full medium-gap">
+    <slot name="extra" />
+    <ActionIcon icon={IconMoreH} size={'small'} />
   </div>
 </div>
diff --git a/plugins/tracker-resources/src/components/issues/IssuesView.svelte b/plugins/tracker-resources/src/components/issues/IssuesView.svelte
index dc93980e9c..66d81b0124 100644
--- a/plugins/tracker-resources/src/components/issues/IssuesView.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesView.svelte
@@ -3,7 +3,7 @@
   import { IntlString, translate } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import { Issue } from '@hcengineering/tracker'
-  import { Button, IconDetails, IconDetailsFilled, location } from '@hcengineering/ui'
+  import { Button, IconDetails, IconDetailsFilled, resolvedLocationStore } from '@hcengineering/ui'
   import view, { Viewlet } from '@hcengineering/view'
   import {
     FilterBar,
@@ -11,7 +11,7 @@
     activeViewlet,
     getViewOptions,
     makeViewletKey,
-    setActiveViewletId,
+    updateActiveViewlet,
     viewOptionStore
   } from '@hcengineering/view-resources'
   import { onDestroy } from 'svelte'
@@ -35,9 +35,9 @@
   $: if (query) updateSearchQuery(search)
   let resultQuery: DocumentQuery<Issue> = { ...searchQuery }
 
-  let viewlets: WithLookup<Viewlet>[] = []
+  let viewlets: WithLookup<Viewlet>[] | undefined
 
-  $: update(viewlets, active)
+  $: viewlet = viewlets && updateActiveViewlet(viewlets, active)
   const viewletQuery = createQuery()
   viewletQuery.query(
     view.class.Viewlet,
@@ -53,20 +53,13 @@
   let key = makeViewletKey()
 
   onDestroy(
-    location.subscribe((loc) => {
+    resolvedLocationStore.subscribe((loc) => {
       key = makeViewletKey(loc)
     })
   )
 
   $: active = $activeViewlet[key]
 
-  async function update (viewlets: WithLookup<Viewlet>[], active: Ref<Viewlet> | null): Promise<void> {
-    viewlet = viewlets.find((viewlet) => viewlet._id === active) ?? viewlets[0]
-    if (viewlet !== undefined) {
-      setActiveViewletId(viewlet._id)
-    }
-  }
-
   $: if (!label && title) {
     translate(title, {}).then((res) => {
       label = res
@@ -110,8 +103,8 @@
     {/if}
   </svelte:fragment>
 </IssuesHeader>
-<slot name="afterHeader" />
 <FilterBar _class={tracker.class.Issue} query={searchQuery} {viewOptions} on:change={(e) => (resultQuery = e.detail)} />
+<slot name="afterHeader" />
 <div class="flex w-full h-full clear-mins">
   {#if viewlet}
     <IssuesContent {viewlet} query={resultQuery} {space} {viewOptions} />
diff --git a/plugins/tracker-resources/src/components/issues/KanbanView.svelte b/plugins/tracker-resources/src/components/issues/KanbanView.svelte
index c87310a3ac..9e6075071b 100644
--- a/plugins/tracker-resources/src/components/issues/KanbanView.svelte
+++ b/plugins/tracker-resources/src/components/issues/KanbanView.svelte
@@ -78,6 +78,7 @@
   import PriorityEditor from './PriorityEditor.svelte'
   import StatusEditor from './StatusEditor.svelte'
   import EstimationEditor from './timereport/EstimationEditor.svelte'
+  import DueDatePresenter from './DueDatePresenter.svelte'
 
   export let space: Ref<Project> | undefined = undefined
   export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
@@ -142,7 +143,7 @@
 
   let kanbanUI: Kanban
   const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
-    kanbanUI.select(offset, of, dir)
+    kanbanUI?.select(offset, of, dir)
   })
   onMount(() => {
     ;(document.activeElement as HTMLElement)?.blur()
@@ -171,6 +172,8 @@
     }
   )
 
+  $: listProvider.update(issues)
+
   let categories: CategoryType[] = []
 
   const queryId = generateId()
@@ -264,9 +267,6 @@
     {setGroupByValues}
     {getUpdateProps}
     {groupByDocs}
-    on:content={(evt) => {
-      listProvider.update(evt.detail)
-    }}
     on:obj-focus={(evt) => {
       listProvider.updateFocus(evt.detail)
     }}
@@ -341,7 +341,7 @@
               <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
             </div>
           </div>
-          <div class="buttons-group xsmall-gap states-bar">
+          <div class="xsmall-gap states-bar">
             {#if issue && issue.subIssues > 0}
               <SubIssuesSelector value={issue} {currentProject} />
             {/if}
@@ -355,6 +355,7 @@
               width={''}
               bind:onlyIcon={fullFilled[issueId]}
             />
+            <DueDatePresenter value={issue} kind={'link-bordered'} />
             <EstimationEditor kind={'list'} size={'small'} value={issue} />
             <div
               class="clear-mins"
@@ -385,12 +386,12 @@
 
   .header {
     padding-bottom: 0.75rem;
-    border-bottom: 1px solid var(--divider-color);
+    border-bottom: 1px solid var(--theme-divider-color);
 
     .label {
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
       .counter {
-        color: rgba(var(--caption-color), 0.8);
+        color: rgba(var(--theme-caption-color), 0.8);
       }
     }
   }
@@ -403,8 +404,9 @@
     min-height: 6.5rem;
   }
   .states-bar {
-    flex-shrink: 10;
-    width: fit-content;
-    margin: 0.625rem 1rem 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+    margin: 0.625rem 1rem;
   }
 </style>
diff --git a/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte b/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte
index ab4446bc4f..953154d818 100644
--- a/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/PriorityEditor.svelte
@@ -118,11 +118,11 @@
       flex-shrink: 0;
       width: 1rem;
       height: 1rem;
-      color: var(--content-color);
+      color: var(--theme-caption-color);
     }
     &:hover {
       .icon {
-        color: var(--caption-color) !important;
+        color: var(--theme-caption-color) !important;
       }
     }
   }
diff --git a/plugins/tracker-resources/src/components/issues/PriorityRefPresenter.svelte b/plugins/tracker-resources/src/components/issues/PriorityRefPresenter.svelte
index d3cbc2b07e..bfc3193bdd 100644
--- a/plugins/tracker-resources/src/components/issues/PriorityRefPresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/PriorityRefPresenter.svelte
@@ -19,6 +19,8 @@
 
   export let value: IssuePriority
   export let size: 'small' | 'medium' = 'small'
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
   export let inline: boolean = false
 
   $: icon = issuePriorities[value]?.icon
@@ -27,9 +29,14 @@
 
 <div class="flex-presenter cursor-default">
   {#if !inline && icon}
-    <Icon {icon} {size} />
+    <Icon {icon} {size} fill={'var(--theme-caption-color)'} />
   {/if}
-  <span class="overflow-label" class:ml-2={!inline && icon}>
+  <span
+    class="overflow-label"
+    class:ml-2={!inline && icon}
+    style:color={colorInherit ? 'inherit' : 'var(--theme-content-color)'}
+    class:fs-bold={accent}
+  >
     <Label {label} />
   </span>
 </div>
diff --git a/plugins/tracker-resources/src/components/issues/StatusEditor.svelte b/plugins/tracker-resources/src/components/issues/StatusEditor.svelte
index 1db3a12cd8..d24f1d9323 100644
--- a/plugins/tracker-resources/src/components/issues/StatusEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/StatusEditor.svelte
@@ -99,9 +99,14 @@
 {#if value && statuses}
   {#if kind === 'list' || kind === 'list-header'}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div class="flex-row-center flex-no-shrink" class:cursor-pointer={isEditable} on:click={handleStatusEditorOpened}>
+    <div
+      class="flex-row-center flex-no-shrink"
+      class:fix-margin={kind === 'list'}
+      class:cursor-pointer={isEditable}
+      on:click={handleStatusEditorOpened}
+    >
       <div class="flex-center flex-no-shrink square-4">
-        {#if selectedStatus}<IssueStatusIcon value={selectedStatus} size={kind === 'list' ? 'inline' : 'medium'} />{/if}
+        {#if selectedStatus}<IssueStatusIcon value={selectedStatus} size={kind === 'list' ? 'small' : 'medium'} />{/if}
       </div>
       {#if selectedStatusLabel}
         <span
diff --git a/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte b/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte
index 40927657f8..3d9953448f 100644
--- a/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte
@@ -18,16 +18,34 @@
 
   export let value: IssueStatus | undefined
   export let size: 'small' | 'medium' = 'small'
+  export let kind: 'list-header' | undefined = undefined
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
   export let inline: boolean = false
 </script>
 
 {#if value}
-  <div class="flex-presenter cursor-default">
+  <div class="flex-presenter cursor-default" style:color={'inherit'}>
     {#if !inline}
       <IssueStatusIcon {value} {size} />
     {/if}
-    <span class="overflow-label" class:ml-2={!inline}>
+    <span
+      class="overflow-label"
+      class:ml-2={!inline}
+      class:list-header={kind === 'list-header'}
+      class:colorInherit
+      class:fs-bold={accent}
+    >
       {value.name}
     </span>
   </div>
 {/if}
+
+<style lang="scss">
+  .list-header:not(.colorInherit) {
+    color: var(--theme-content-color);
+  }
+  .list-header.colorInherit {
+    color: inherit;
+  }
+</style>
diff --git a/plugins/tracker-resources/src/components/issues/StatusRefPresenter.svelte b/plugins/tracker-resources/src/components/issues/StatusRefPresenter.svelte
index ea3e8d1bac..8ebf78a56b 100644
--- a/plugins/tracker-resources/src/components/issues/StatusRefPresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/StatusRefPresenter.svelte
@@ -19,8 +19,17 @@
 
   export let value: Ref<Status> | StatusValue | undefined
   export let size: 'small' | 'medium' = 'medium'
+  export let kind: 'list-header' | undefined = undefined
+  export let colorInherit: boolean = false
+  export let accent: boolean = false
 </script>
 
 {#if value}
-  <StatusPresenter value={$statusStore.get(typeof value === 'string' ? value : value.values?.[0]?._id)} {size} />
+  <StatusPresenter
+    value={$statusStore.get(typeof value === 'string' ? value : value.values?.[0]?._id)}
+    {size}
+    {kind}
+    {colorInherit}
+    {accent}
+  />
 {/if}
diff --git a/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte b/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte
index 5bfaec4fb8..9c1689a259 100644
--- a/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/TitlePresenter.svelte
@@ -22,6 +22,7 @@
   export let value: WithLookup<Issue>
   export let shouldUseMargin: boolean = false
   export let showParent = true
+  export let kind: 'list' | undefined = undefined
   export let onClick: (() => void) | undefined = undefined
 </script>
 
@@ -29,10 +30,11 @@
   <span
     class="name overflow-label select-text"
     class:with-margin={shouldUseMargin}
+    class:list={kind === 'list'}
     style:max-width={showParent ? `${value.parents.length !== 0 ? 95 : 100}%` : '100%'}
     title={value.title}
   >
-    <DocNavLink object={value} {onClick} component={tracker.component.EditIssue} inline shrink={1}>
+    <DocNavLink object={value} {onClick} component={tracker.component.EditIssue} inline shrink={1} colorInherit>
       {value.title}
     </DocNavLink>
   </span>
@@ -45,12 +47,15 @@
   .name {
     flex-shrink: 1;
     min-width: 1rem;
+
+    &.list {
+      color: var(--theme-caption-color);
+    }
     &:hover {
       text-decoration: underline;
     }
-
     &:active {
-      color: var(--accent-color);
+      color: var(--theme-content-color);
     }
   }
 
diff --git a/plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte b/plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte
index 3bbe0c1324..ef71fb12fa 100644
--- a/plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/CreateSubIssue.svelte
@@ -27,6 +27,7 @@
   import PriorityEditor from '../PriorityEditor.svelte'
   import StatusEditor from '../StatusEditor.svelte'
   import EstimationEditor from '../timereport/EstimationEditor.svelte'
+  import { generateIssueShortLink, getIssueId } from '../../../issues'
 
   export let parentIssue: Issue
   export let currentProject: Project
@@ -151,7 +152,8 @@
 
       addNotification(await translate(tracker.string.IssueCreated, {}), getTitle(object.title), IssueNotification, {
         issueId: _id,
-        subTitlePostfix: (await translate(tracker.string.Created, { value: 1 })).toLowerCase()
+        subTitlePostfix: (await translate(tracker.string.Created, { value: 1 })).toLowerCase(),
+        issueUrl: currentProject && generateIssueShortLink(getIssueId(currentProject, value as Issue))
       })
       draftController.remove()
     } finally {
diff --git a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
index f9e2243ba0..f9daf8c370 100644
--- a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
@@ -24,13 +24,13 @@
   import {
     Button,
     EditBox,
-    getCurrentLocation,
     IconMixin,
     IconMoreH,
     Label,
+    Spinner,
+    getCurrentResolvedLocation,
     navigate,
-    showPopup,
-    Spinner
+    showPopup
   } from '@hcengineering/ui'
   import { ContextMenu, UpDownNavigator } from '@hcengineering/view-resources'
   import { createEventDispatcher, onDestroy, onMount } from 'svelte'
@@ -39,8 +39,8 @@
   import IssueStatusActivity from '../IssueStatusActivity.svelte'
   import ControlPanel from './ControlPanel.svelte'
   import CopyToClipboard from './CopyToClipboard.svelte'
-  import SubIssues from './SubIssues.svelte'
   import SubIssueSelector from './SubIssueSelector.svelte'
+  import SubIssues from './SubIssues.svelte'
 
   export let _id: Ref<Issue>
   export let _class: Ref<Class<Issue>>
@@ -225,7 +225,7 @@
         showTooltip={{ label: setting.string.ClassSetting }}
         on:click={(ev) => {
           ev.stopPropagation()
-          const loc = getCurrentLocation()
+          const loc = getCurrentResolvedLocation()
           loc.path[2] = settingId
           loc.path[3] = 'setting'
           loc.path[4] = 'classes'
diff --git a/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte b/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte
index 762d15a7fd..9b10dc5941 100644
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte
@@ -25,7 +25,7 @@
     IconScaleFull,
     Label,
     closeTooltip,
-    getCurrentLocation,
+    getCurrentResolvedLocation,
     navigate
   } from '@hcengineering/ui'
   import view, { Viewlet } from '@hcengineering/view'
@@ -104,7 +104,7 @@
           const filter = createFilter(tracker.class.Issue, 'attachedTo', [issue._id])
           if (filter !== undefined) {
             closeTooltip()
-            const loc = getCurrentLocation()
+            const loc = getCurrentResolvedLocation()
             loc.fragment = undefined
             loc.query = undefined
             loc.path[2] = trackerId
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte
index 2582dc8f84..e3807383d7 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationEditor.svelte
@@ -73,7 +73,7 @@
 
 {#if value}
   {#if kind === 'list' && '_class' in value}
-    <EstimationStatsPresenter {value} on:click={handleestimationEditorOpened} />
+    <EstimationStatsPresenter {value} {kind} on:click={handleestimationEditorOpened} />
   {:else}
     <Button
       showTooltip={isEditable ? { label: tracker.string.Estimation } : undefined}
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte
index a4e008eee7..49ead718ae 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationProgressCircle.svelte
@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { FernColor, FlamingoColor, IconSize, PlatinumColor } from '@hcengineering/ui'
+  import { FernColor, FlamingoColor, IconSize } from '@hcengineering/ui'
 
   export let value: number
   export let min: number = 0
@@ -21,7 +21,7 @@
   export let size: IconSize = 'small'
   export let primary: boolean = false
 
-  export let color: string = PlatinumColor
+  export let color: string = 'var(--theme-progress-color)'
   export let greenColor: string = FernColor
   export let overdueColor = FlamingoColor
 
@@ -29,7 +29,7 @@
   $: procC = lenghtC / (max - min)
   $: dashOffset = (Math.min(value, max) - min) * procC
 
-  $: color = value > max ? overdueColor : value === min ? color : greenColor
+  $: color = value > max ? overdueColor : value < max ? color : greenColor
 </script>
 
 <svg class="svg-{size}" fill="none" viewBox="0 0 16 16">
@@ -38,8 +38,8 @@
     cy={8}
     r={7}
     class="progress-circle"
-    style:stroke={'var(--divider-color)'}
-    style:opacity={'.5'}
+    style:stroke={'var(--theme-caption-color)'}
+    style:opacity={'.15'}
     style:transform={`rotate(${-78 + ((dashOffset + 1) * 360) / (lenghtC + 1)}deg)`}
     style:stroke-dasharray={lenghtC}
     style:stroke-dashoffset={dashOffset === 0 ? 0 : dashOffset + 3}
diff --git a/plugins/tracker-resources/src/components/issues/timereport/EstimationStatsPresenter.svelte b/plugins/tracker-resources/src/components/issues/timereport/EstimationStatsPresenter.svelte
index 96b54d29a1..39877f7d43 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationStatsPresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationStatsPresenter.svelte
@@ -22,6 +22,7 @@
 
   export let value: Issue | AttachedData<Issue>
   export let estimation: number | undefined = undefined
+  export let kind: 'normal' | 'list' = 'normal'
 
   $: _estimation = estimation ?? value.estimation
 
@@ -40,18 +41,24 @@
       max={childEstimationTime || _estimation}
     />
   </div>
-  <span class="overflow-label label flex-row-center flex-nowrap text-md">
+  <span class="overflow-label label flex-row-center flex-nowrap {kind}">
     {#if value.reportedTime > 0 || childReportTime > 0}
       {#if childReportTime}
         {@const rchildReportTime = childReportTime}
         {@const reportDiff = floorFractionDigits(rchildReportTime - value.reportedTime, 3)}
         {#if reportDiff !== 0 && value.reportedTime !== 0}
-          <div class="flex flex-nowrap mr-1" class:showError={reportDiff > 0}>
+          <div
+            class="flex flex-nowrap"
+            class:mr-1={kind !== 'list'}
+            class:showError={reportDiff > 0 && kind !== 'list'}
+          >
             <TimePresenter value={rchildReportTime} />
           </div>
-          <div class="romColor">
-            (<TimePresenter value={value.reportedTime} />)
-          </div>
+          {#if kind !== 'list'}
+            <div class="romColor">
+              (<TimePresenter value={value.reportedTime} />)
+            </div>
+          {/if}
         {:else if value.reportedTime === 0}
           <TimePresenter value={childReportTime} />
         {:else}
@@ -60,16 +67,20 @@
       {:else}
         <TimePresenter value={value.reportedTime} />
       {/if}
-      <div class="p-1">/</div>
+      <span>/</span>
     {/if}
     {#if childEstimationTime}
       {@const childEstTime = Math.round(childEstimationTime)}
       {@const estimationDiff = childEstTime - Math.round(_estimation)}
       {#if estimationDiff !== 0}
-        <div class="flex flex-nowrap mr-1" class:showWarning={estimationDiff !== 0}>
+        <div
+          class="flex flex-nowrap"
+          class:mr-1={kind !== 'list'}
+          class:showWarning={estimationDiff !== 0 && kind !== 'list'}
+        >
           <TimePresenter value={childEstTime} />
         </div>
-        {#if _estimation !== 0}
+        {#if _estimation !== 0 && kind !== 'list'}
           <div class="romColor">
             (<TimePresenter value={_estimation} />)
           </div>
@@ -98,17 +109,22 @@
       flex-shrink: 0;
       width: 1rem;
       height: 1rem;
-      color: var(--content-color);
+      color: var(--theme-dark-color);
     }
     .label {
-      margin-left: 0.5rem;
-      font-weight: 500;
       font-size: 0.8125rem;
-      color: var(--accent-color);
+      margin-left: 0.5rem;
+
+      &.normal {
+        color: var(--theme-content-color);
+      }
+      &.list {
+        color: var(--theme-halfcontent-color);
+      }
     }
     &:hover {
       .icon {
-        color: var(--caption-color) !important;
+        color: var(--theme-caption-color) !important;
       }
     }
 
@@ -119,7 +135,7 @@
       color: var(--warning-color) !important;
     }
     .romColor {
-      color: var(--content-color) !important;
+      color: var(--theme-content-color) !important;
     }
   }
 </style>
diff --git a/plugins/tracker-resources/src/components/issues/timereport/TimePresenter.svelte b/plugins/tracker-resources/src/components/issues/timereport/TimePresenter.svelte
index df80caa175..df5ee8d56d 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/TimePresenter.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimePresenter.svelte
@@ -19,6 +19,7 @@
   export let id: string | undefined = undefined
   export let kind: 'link' | undefined = undefined
   export let value: number
+  export let noSymbol: boolean = false
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -31,7 +32,11 @@
     props: { label: tracker.string.TimeSpendHours, params: { value: floorFractionDigits(value * 8, 2) } }
   }}
 >
-  <Label label={tracker.string.TimeSpendValue} params={{ value: floorFractionDigits(value, 3) }} />
+  {#if noSymbol}
+    {floorFractionDigits(value, 3)}
+  {:else}
+    <Label label={tracker.string.TimeSpendValue} params={{ value: floorFractionDigits(value, 3) }} />
+  {/if}
 </span>
 
 <style lang="scss">
@@ -39,15 +44,15 @@
     white-space: nowrap;
 
     font-size: 0.8125rem;
-    color: var(--content-color);
+    color: var(--theme-content-color);
     cursor: pointer;
 
     &:hover {
-      color: var(--caption-color);
+      color: var(--theme-caption-color);
       text-decoration: underline;
     }
     &:active {
-      color: var(--accent-color);
+      color: var(--theme-accent-color);
     }
   }
 </style>
diff --git a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
index dc812b1ca2..e2894eb7e0 100644
--- a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
@@ -72,7 +72,7 @@
     <div
       class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2"
       on:contextmenu|preventDefault={(ev) => showContextMenu(ev, report)}
-      on:mouseover={() => {
+      on:mouseenter={() => {
         listProvider.updateFocus(report)
       }}
       on:focus={() => {
diff --git a/plugins/tracker-resources/src/components/scrums/ScrumHeader.svelte b/plugins/tracker-resources/src/components/scrums/ScrumHeader.svelte
index 913ecd47d7..5e6cb8ca59 100644
--- a/plugins/tracker-resources/src/components/scrums/ScrumHeader.svelte
+++ b/plugins/tracker-resources/src/components/scrums/ScrumHeader.svelte
@@ -13,19 +13,19 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { SortingOrder, WithLookup } from '@hcengineering/core'
+  import { Scrum } from '@hcengineering/tracker'
   import {
     Button,
-    deviceOptionsStore as deviceInfo,
-    getCurrentLocation,
     Icon,
+    deviceOptionsStore as deviceInfo,
+    getCurrentResolvedLocation,
     navigate,
     showPopup
   } from '@hcengineering/ui'
   import tracker from '../../plugin'
-  import ScrumPopup from './ScrumPopup.svelte'
   import Expanded from '../icons/Expanded.svelte'
-  import { SortingOrder, WithLookup } from '@hcengineering/core'
-  import { Scrum } from '@hcengineering/tracker'
+  import ScrumPopup from './ScrumPopup.svelte'
 
   export let scrum: WithLookup<Scrum>
 
@@ -44,7 +44,7 @@
       container,
       (value) => {
         if (value != null) {
-          const loc = getCurrentLocation()
+          const loc = getCurrentResolvedLocation()
           loc.path[5] = value._id
           navigate(loc)
         }
diff --git a/plugins/tracker-resources/src/components/scrums/ScrumPresenter.svelte b/plugins/tracker-resources/src/components/scrums/ScrumPresenter.svelte
index 2ab47915e9..ea511ff49f 100644
--- a/plugins/tracker-resources/src/components/scrums/ScrumPresenter.svelte
+++ b/plugins/tracker-resources/src/components/scrums/ScrumPresenter.svelte
@@ -14,11 +14,11 @@
 -->
 <script lang="ts">
   import { Scrum } from '@hcengineering/tracker'
-  import { getCurrentLocation, navigate } from '@hcengineering/ui'
+  import { getCurrentResolvedLocation, navigate } from '@hcengineering/ui'
 
   export let value: Scrum
   function navigateToScrum () {
-    const loc = getCurrentLocation()
+    const loc = getCurrentResolvedLocation()
     loc.path[5] = value._id
     loc.path.length = 6
     navigate(loc)
diff --git a/plugins/tracker-resources/src/components/scrums/Scrums.svelte b/plugins/tracker-resources/src/components/scrums/Scrums.svelte
index baa7070609..af06717507 100644
--- a/plugins/tracker-resources/src/components/scrums/Scrums.svelte
+++ b/plugins/tracker-resources/src/components/scrums/Scrums.svelte
@@ -15,8 +15,8 @@
 <script lang="ts">
   import { Ref } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
-  import { Scrum, ScrumRecord, Project } from '@hcengineering/tracker'
-  import { closePopup, closeTooltip, location } from '@hcengineering/ui'
+  import { Project, Scrum, ScrumRecord } from '@hcengineering/tracker'
+  import { closePopup, closeTooltip, resolvedLocationStore } from '@hcengineering/ui'
   import { onDestroy } from 'svelte'
   import tracker from '../../plugin'
   import ScrumRecordsView from './ScrumRecordsView.svelte'
@@ -32,7 +32,7 @@
   const scrumQuery = createQuery()
 
   onDestroy(
-    location.subscribe(async (loc) => {
+    resolvedLocationStore.subscribe(async (loc) => {
       closeTooltip()
       closePopup()
 
diff --git a/plugins/tracker-resources/src/components/sprints/NewSprint.svelte b/plugins/tracker-resources/src/components/sprints/NewSprint.svelte
index 5cd42fa4f1..bbc326a36c 100644
--- a/plugins/tracker-resources/src/components/sprints/NewSprint.svelte
+++ b/plugins/tracker-resources/src/components/sprints/NewSprint.svelte
@@ -63,7 +63,13 @@
   on:changeContent
 >
   <svelte:fragment slot="header">
-    <SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space />
+    <SpaceSelector
+      _class={tracker.class.Project}
+      label={tracker.string.Project}
+      kind={'secondary'}
+      size={'large'}
+      bind:space
+    />
   </svelte:fragment>
   <EditBox bind:value={object.label} placeholder={tracker.string.SprintNamePlaceholder} kind={'large-style'} focus />
   <StyledTextArea
@@ -72,27 +78,43 @@
     emphasized
   />
   <svelte:fragment slot="pool">
-    <SprintStatusSelector selectedSprintStatus={object.status} onSprintStatusChange={handleComponentStatusChanged} />
+    <SprintStatusSelector
+      selectedSprintStatus={object.status}
+      onSprintStatusChange={handleComponentStatusChanged}
+      kind={'secondary'}
+      size={'large'}
+    />
     <EmployeeBox
       label={tracker.string.SprintLead}
       placeholder={tracker.string.AssignTo}
+      kind={'secondary'}
+      size={'large'}
       bind:value={object.lead}
       allowDeselect
       titleDeselect={tracker.string.Unassigned}
       showNavigate={false}
     />
-    <UserBoxList bind:items={object.members} label={tracker.string.SprintMembersSearchPlaceholder} />
+    <UserBoxList
+      bind:items={object.members}
+      label={tracker.string.SprintMembersSearchPlaceholder}
+      kind={'secondary'}
+      size={'large'}
+    />
     <DatePresenter
       bind:value={object.startDate}
       editable
       label={tracker.string.StartDate}
       detail={ui.string.SelectDate}
+      kind={'secondary'}
+      size={'large'}
     />
     <DatePresenter
       bind:value={object.targetDate}
       editable
       label={tracker.string.TargetDate}
       detail={ui.string.SelectDate}
+      kind={'secondary'}
+      size={'large'}
     />
   </svelte:fragment>
 </Card>
diff --git a/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte b/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
index 5ddc29fbdb..69701d6ffd 100644
--- a/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
+++ b/plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
@@ -13,11 +13,22 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { DocumentQuery, Ref, WithLookup } from '@hcengineering/core'
+  import { DocumentQuery, WithLookup } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import { Sprint } from '@hcengineering/tracker'
-  import { Button, IconAdd, Label, SearchEdit, location, showPopup } from '@hcengineering/ui'
+  import {
+    ActionIcon,
+    Button,
+    IconAdd,
+    IconMoreH,
+    Label,
+    SearchEdit,
+    TabItem,
+    TabList,
+    resolvedLocationStore,
+    showPopup
+  } from '@hcengineering/ui'
   import view, { Viewlet } from '@hcengineering/view'
   import {
     FilterBar,
@@ -26,7 +37,7 @@
     activeViewlet,
     getViewOptions,
     makeViewletKey,
-    setActiveViewletId,
+    updateActiveViewlet,
     viewOptionStore
   } from '@hcengineering/view-resources'
   import { onDestroy } from 'svelte'
@@ -61,9 +72,9 @@
 
   let resultQuery: DocumentQuery<Sprint> = { ...searchQuery }
 
-  let viewlets: WithLookup<Viewlet>[] = []
+  let viewlets: WithLookup<Viewlet>[] | undefined
 
-  $: update(viewlets, active)
+  $: viewlet = viewlets && updateActiveViewlet(viewlets, active)
 
   const viewletQuery = createQuery()
   viewletQuery.query(view.class.Viewlet, { attachTo: tracker.class.Sprint }, (res) => (viewlets = res), {
@@ -75,18 +86,13 @@
   let key = makeViewletKey()
 
   onDestroy(
-    location.subscribe((loc) => {
+    resolvedLocationStore.subscribe((loc) => {
       key = makeViewletKey(loc)
     })
   )
 
   $: active = $activeViewlet[key]
 
-  async function update (viewlets: WithLookup<Viewlet>[], active: Ref<Viewlet> | null): Promise<void> {
-    viewlet = viewlets.find((viewlet) => viewlet._id === active) ?? viewlets[0]
-    setActiveViewletId(viewlet._id)
-  }
-
   let asideFloat: boolean = false
   let asideShown: boolean = true
   $: if (panelWidth < 900 && !asideFloat) asideFloat = true
@@ -108,74 +114,61 @@
 
     mode = newMode
   }
+
+  const modeList: TabItem[] = [
+    { id: 'all', labelIntl: tracker.string.AllSprints, action: () => handleViewModeChanged('all') },
+    { id: 'planned', labelIntl: tracker.string.PlannedSprints, action: () => handleViewModeChanged('planned') },
+    { id: 'active', labelIntl: tracker.string.ActiveSprints, action: () => handleViewModeChanged('active') },
+    { id: 'closed', labelIntl: tracker.string.ClosedSprints, action: () => handleViewModeChanged('closed') }
+  ]
 </script>
 
-<div class="fs-title flex-between header">
-  <div class="flex-row-center">
-    <Label {label} />
-    <div class="title">
+<div class="ac-header full divide caption-height">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label {label} /></span>
+    <span class="componentTitle">
       › <Label label={title} />
-    </div>
-    <div class="ml-4">
-      <FilterButton _class={tracker.class.Issue} {space} />
-    </div>
+    </span>
   </div>
-  <div class="flex-row-center gap-2">
+
+  <div class="ac-header-full medium-gap mb-1">
+    <Button icon={IconAdd} label={tracker.string.Sprint} kind={'primary'} on:click={showCreateDialog} />
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
     <SearchEdit bind:value={search} on:change={() => {}} />
-    <Button size="small" icon={IconAdd} label={tracker.string.Sprint} kind={'primary'} on:click={showCreateDialog} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
+    <FilterButton _class={tracker.class.Issue} {space} />
+  </div>
+  <div class="ac-header-full medium-gap">
     {#if viewlet}
       <ViewletSettingButton bind:viewOptions {viewlet} />
+      <ActionIcon icon={IconMoreH} size={'small'} />
     {/if}
   </div>
 </div>
-<div class="itemsContainer">
-  <div class="flex-center">
-    <div class="flex-center">
-      <div class="buttonWrapper">
-        <Button
-          size="small"
-          shape="rectangle-right"
-          selected={mode === 'all'}
-          label={tracker.string.AllSprints}
-          on:click={() => handleViewModeChanged('all')}
-        />
-      </div>
-      <div class="buttonWrapper">
-        <Button
-          size="small"
-          shape="rectangle"
-          selected={mode === 'planned'}
-          label={tracker.string.PlannedSprints}
-          on:click={() => handleViewModeChanged('planned')}
-        />
-      </div>
-      <div class="buttonWrapper">
-        <Button
-          size="small"
-          shape="rectangle"
-          selected={mode === 'active'}
-          label={tracker.string.ActiveSprints}
-          on:click={() => handleViewModeChanged('active')}
-        />
-      </div>
-      <div class="buttonWrapper">
-        <Button
-          size="small"
-          shape="rectangle-left"
-          selected={mode === 'closed'}
-          label={tracker.string.ClosedSprints}
-          on:click={() => handleViewModeChanged('closed')}
-        />
-      </div>
-    </div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <TabList
+      items={modeList}
+      selected={mode}
+      kind={'normal'}
+      on:select={(result) => {
+        if (result.detail !== undefined && result.detail.action) result.detail.action()
+      }}
+    />
   </div>
 </div>
+
 <FilterBar
   _class={tracker.class.Sprint}
   query={searchQuery}
   {viewOptions}
   on:change={(e) => (resultQuery = e.detail)}
 />
+
 <div class="flex w-full h-full clear-mins">
   {#if viewlet}
     <SprintContent {viewlet} query={{ ...resultQuery, ...includedSprintsQuery }} {space} {viewOptions} />
diff --git a/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte b/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte
index f2e4ad6220..ff633a1f64 100644
--- a/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte
+++ b/plugins/tracker-resources/src/components/sprints/SprintEditor.svelte
@@ -67,55 +67,78 @@
   $: twoRows = $deviceInfo.twoRows
 </script>
 
-<div
-  class="flex flex-wrap clear-mins"
-  class:minus-margin={kind === 'list-header'}
-  class:compression
-  style:flex-direction={twoRows ? 'column' : 'row'}
->
-  {#if (value.sprint && value.sprint !== $activeSprint && groupBy !== 'sprint') || shouldShowPlaceholder}
-    <div class="flex-row-center" class:minus-margin-vSpace={kind === 'list-header'} class:compression style:width>
+{#if value.sprint || sprint}
+  {#if kind === 'list'}
+    <div class="clear-mins" class:label-wrapper={compression}>
       <SprintSelector
         {kind}
         {size}
         {shape}
-        width={compression ? 'min-content' : width}
+        {width}
         {justify}
         {isEditable}
         {shouldShowLabel}
         {popupPlaceholder}
         {onlyIcon}
         {enlargedText}
+        short={compression}
         showTooltip={{ label: value.sprint ? tracker.string.MoveToSprint : tracker.string.AddToSprint }}
         value={value.sprint}
         onChange={handleSprintIdChanged}
       />
     </div>
-  {/if}
+  {:else}
+    <div
+      class="flex flex-wrap clear-mins"
+      class:minus-margin={kind === 'list-header'}
+      class:label-wrapper={compression}
+      style:flex-direction={twoRows ? 'column' : 'row'}
+    >
+      {#if (value.sprint && value.sprint !== $activeSprint && groupBy !== 'sprint') || shouldShowPlaceholder}
+        <div class="flex-row-center" class:minus-margin-vSpace={kind === 'list-header'} class:compression style:width>
+          <SprintSelector
+            {kind}
+            {size}
+            {shape}
+            {width}
+            {justify}
+            {isEditable}
+            {shouldShowLabel}
+            {popupPlaceholder}
+            {onlyIcon}
+            {enlargedText}
+            showTooltip={{ label: value.sprint ? tracker.string.MoveToSprint : tracker.string.AddToSprint }}
+            value={value.sprint}
+            onChange={handleSprintIdChanged}
+          />
+        </div>
+      {/if}
 
-  {#if sprint && kind === 'list-header'}
-    <div class="flex-row-center" class:minus-margin-space={kind === 'list-header'} class:text-sm={twoRows}>
-      {#if sprint}
-        {@const now = Date.now()}
-        {@const sprintDaysFrom =
-          now < sprint.startDate
-            ? 0
-            : now > sprint.targetDate
-            ? getDayOfSprint(sprint.startDate, sprint.targetDate)
-            : getDayOfSprint(sprint.startDate, now)}
-        {@const sprintDaysTo = getDayOfSprint(sprint.startDate, sprint.targetDate)}
-        <DatePresenter value={sprint.startDate} kind={'transparent'} />
-        <span class="p-1"> / </span>
-        <DatePresenter value={sprint.targetDate} kind={'transparent'} />
-        <div class="w-2 min-w-2" />
-        <!-- Active sprint in time -->
-        <TimePresenter value={sprintDaysFrom} />
-        /
-        <TimePresenter value={sprintDaysTo} />
+      {#if sprint && kind === 'list-header'}
+        <div class="flex-row-center" class:minus-margin-space={kind === 'list-header'} class:text-sm={twoRows}>
+          {#if sprint}
+            {@const now = Date.now()}
+            {@const sprintDaysFrom =
+              now < sprint.startDate
+                ? 0
+                : now > sprint.targetDate
+                ? getDayOfSprint(sprint.startDate, sprint.targetDate)
+                : getDayOfSprint(sprint.startDate, now)}
+            {@const sprintDaysTo = getDayOfSprint(sprint.startDate, sprint.targetDate)}
+            <DatePresenter value={sprint.startDate} kind={'transparent'} />
+            <span class="p-1"> / </span>
+            <DatePresenter value={sprint.targetDate} kind={'transparent'} />
+            <div class="w-2 min-w-2" />
+            <!-- Active sprint in time -->
+            <TimePresenter value={sprintDaysFrom} />
+            /
+            <TimePresenter value={sprintDaysTo} />
+          {/if}
+        </div>
       {/if}
     </div>
   {/if}
-</div>
+{/if}
 
 <style lang="scss">
   .minus-margin {
@@ -127,8 +150,4 @@
       margin: -0.25rem 0 -0.25rem 0.5rem;
     }
   }
-  .compression {
-    flex-shrink: 5;
-    min-width: 1rem;
-  }
 </style>
diff --git a/plugins/tracker-resources/src/components/sprints/SprintPresenter.svelte b/plugins/tracker-resources/src/components/sprints/SprintPresenter.svelte
index fd8afb15c3..2f474aba29 100644
--- a/plugins/tracker-resources/src/components/sprints/SprintPresenter.svelte
+++ b/plugins/tracker-resources/src/components/sprints/SprintPresenter.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import { WithLookup } from '@hcengineering/core'
   import { Sprint } from '@hcengineering/tracker'
-  import { getCurrentLocation, Icon, navigate, tooltip } from '@hcengineering/ui'
+  import { Icon, getCurrentResolvedLocation, navigate, tooltip } from '@hcengineering/ui'
   import tracker from '../../plugin'
 
   export let value: WithLookup<Sprint>
@@ -32,7 +32,7 @@
       onClick()
     }
 
-    const loc = getCurrentLocation()
+    const loc = getCurrentResolvedLocation()
     loc.path[4] = 'sprints'
     loc.path[5] = value._id
     loc.path.length = 6
diff --git a/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte b/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
index bf03e40e01..aec218a716 100644
--- a/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
+++ b/plugins/tracker-resources/src/components/sprints/SprintSelector.svelte
@@ -33,7 +33,8 @@
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = 'min-content'
   export let onlyIcon: boolean = false
-  export let enlargedText = false
+  export let enlargedText: boolean = false
+  export let short: boolean = false
 
   export let useComponent: Ref<Component> | undefined = undefined
   export let showTooltip: LabelAndProps | undefined = undefined
@@ -105,6 +106,7 @@
     {showTooltip}
     icon={sprintIcon}
     disabled={!isEditable}
+    {short}
     on:click={handleSprintEditorOpened}
   />
 {:else}
@@ -117,6 +119,7 @@
     {showTooltip}
     icon={sprintIcon}
     disabled={!isEditable}
+    {short}
     on:click={handleSprintEditorOpened}
   >
     <svelte:fragment slot="content">
diff --git a/plugins/tracker-resources/src/components/sprints/Sprints.svelte b/plugins/tracker-resources/src/components/sprints/Sprints.svelte
index c8e86c467b..283059e232 100644
--- a/plugins/tracker-resources/src/components/sprints/Sprints.svelte
+++ b/plugins/tracker-resources/src/components/sprints/Sprints.svelte
@@ -17,7 +17,13 @@
   import { IntlString } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import { Sprint, Project } from '@hcengineering/tracker'
-  import { closePopup, closeTooltip, getCurrentLocation, location, navigate } from '@hcengineering/ui'
+  import {
+    closePopup,
+    closeTooltip,
+    getCurrentResolvedLocation,
+    navigate,
+    resolvedLocationStore
+  } from '@hcengineering/ui'
   import { onDestroy } from 'svelte'
   import tracker from '../../plugin'
   import { SprintViewMode } from '../../utils'
@@ -33,7 +39,7 @@
   let sprint: Sprint | undefined
 
   onDestroy(
-    location.subscribe(async (loc) => {
+    resolvedLocationStore.subscribe(async (loc) => {
       closeTooltip()
       closePopup()
 
@@ -56,7 +62,7 @@
   <EditSprint
     {sprint}
     on:sprint={(evt) => {
-      const loc = getCurrentLocation()
+      const loc = getCurrentResolvedLocation()
       loc.path[5] = evt.detail
       navigate(loc)
     }}
diff --git a/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte b/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
index eb8ef6a94c..80ab915781 100644
--- a/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
+++ b/plugins/tracker-resources/src/components/templates/CreateIssueTemplate.svelte
@@ -132,7 +132,13 @@
   on:changeContent
 >
   <svelte:fragment slot="header">
-    <SpaceSelector _class={tracker.class.Project} label={tracker.string.Project} bind:space={_space} />
+    <SpaceSelector
+      _class={tracker.class.Project}
+      label={tracker.string.Project}
+      bind:space={_space}
+      kind={'secondary'}
+      size={'large'}
+    />
   </svelte:fragment>
   <svelte:fragment slot="title" let:label>
     <Label {label} />
@@ -158,15 +164,15 @@
       value={object}
       shouldShowLabel
       isEditable
-      kind="no-border"
-      size="small"
+      kind={'secondary'}
+      size={'large'}
       justify="center"
       on:change={({ detail }) => (object.priority = detail)}
     />
     <AssigneeEditor
       value={object}
-      size="small"
-      kind="no-border"
+      kind={'secondary'}
+      size={'large'}
       width={'min-content'}
       on:change={({ detail }) => (object.assignee = detail)}
     />
@@ -176,7 +182,9 @@
         items: labels,
         key,
         targetClass: tracker.class.Issue,
-        countLabel: tracker.string.NumberLabels
+        countLabel: tracker.string.NumberLabels,
+        kind: 'secondary',
+        size: 'large'
       }}
       on:open={(evt) => {
         addTagRef(evt.detail)
@@ -185,12 +193,20 @@
         labels = labels.filter((it) => it._id !== evt.detail)
       }}
     />
-    <EstimationEditor kind={'no-border'} size={'small'} value={object} />
-    <ComponentSelector value={object.component} onChange={handleComponentIdChanged} isEditable={true} />
+    <EstimationEditor kind={'secondary'} size={'large'} value={object} />
+    <ComponentSelector
+      value={object.component}
+      onChange={handleComponentIdChanged}
+      isEditable={true}
+      kind={'secondary'}
+      size={'large'}
+    />
     <SprintSelector
       value={object.sprint}
       onChange={handleSprintIdChanged}
       useComponent={object.component ?? undefined}
+      kind={'secondary'}
+      size={'large'}
     />
   </svelte:fragment>
 </Card>
diff --git a/plugins/tracker-resources/src/components/templates/EditIssueTemplate.svelte b/plugins/tracker-resources/src/components/templates/EditIssueTemplate.svelte
index 8cadbe9b63..e115376087 100644
--- a/plugins/tracker-resources/src/components/templates/EditIssueTemplate.svelte
+++ b/plugins/tracker-resources/src/components/templates/EditIssueTemplate.svelte
@@ -18,20 +18,20 @@
   import notification from '@hcengineering/notification'
   import { Panel } from '@hcengineering/panel'
   import { getResource } from '@hcengineering/platform'
-  import presentation, { createQuery, getClient, MessageViewer } from '@hcengineering/presentation'
+  import presentation, { MessageViewer, createQuery, getClient } from '@hcengineering/presentation'
   import setting, { settingId } from '@hcengineering/setting'
   import tags from '@hcengineering/tags'
   import type { IssueTemplate, IssueTemplateChild, Project } from '@hcengineering/tracker'
   import {
     Button,
     EditBox,
-    getCurrentLocation,
     IconAttachment,
     IconEdit,
     IconMoreH,
     Label,
-    navigate,
     Scroller,
+    getCurrentResolvedLocation,
+    navigate,
     showPopup
   } from '@hcengineering/ui'
   import { ContextMenu, UpDownNavigator } from '@hcengineering/view-resources'
@@ -279,7 +279,7 @@
         showTooltip={{ label: setting.string.ClassSetting }}
         on:click={(ev) => {
           ev.stopPropagation()
-          const loc = getCurrentLocation()
+          const loc = getCurrentResolvedLocation()
           loc.path[2] = settingId
           loc.path[3] = 'setting'
           loc.path[4] = 'classes'
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
index 459399525a..a77b186e87 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
@@ -3,7 +3,7 @@
   import { IntlString, translate } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import { IssueTemplate } from '@hcengineering/tracker'
-  import { Button, IconAdd, IconDetails, IconDetailsFilled, location, showPopup } from '@hcengineering/ui'
+  import { Button, IconAdd, IconDetails, IconDetailsFilled, resolvedLocationStore, showPopup } from '@hcengineering/ui'
   import view, { Viewlet } from '@hcengineering/view'
   import {
     FilterBar,
@@ -11,7 +11,7 @@
     activeViewlet,
     getViewOptions,
     makeViewletKey,
-    setActiveViewletId,
+    updateActiveViewlet,
     viewOptionStore
   } from '@hcengineering/view-resources'
   import { onDestroy } from 'svelte'
@@ -37,9 +37,9 @@
   $: if (query) updateSearchQuery(search)
   let resultQuery: DocumentQuery<IssueTemplate> = { ...searchQuery }
 
-  let viewlets: WithLookup<Viewlet>[] = []
+  let viewlets: WithLookup<Viewlet>[] | undefined
 
-  $: update(viewlets, active)
+  $: viewlet = viewlets && updateActiveViewlet(viewlets, active)
 
   const viewletQuery = createQuery()
   viewletQuery.query(view.class.Viewlet, { attachTo: tracker.class.IssueTemplate }, (res) => (viewlets = res), {
@@ -51,18 +51,13 @@
   let key = makeViewletKey()
 
   onDestroy(
-    location.subscribe((loc) => {
+    resolvedLocationStore.subscribe((loc) => {
       key = makeViewletKey(loc)
     })
   )
 
   $: active = $activeViewlet[key]
 
-  async function update (viewlets: WithLookup<Viewlet>[], active: Ref<Viewlet> | null): Promise<void> {
-    viewlet = viewlets.find((viewlet) => viewlet._id === active) ?? viewlets[0]
-    setActiveViewletId(viewlet._id)
-  }
-
   $: if (!label && title) {
     translate(title, {}).then((res) => {
       label = res
@@ -92,21 +87,11 @@
   <svelte:fragment slot="label_selector">
     <slot name="label_selector" />
   </svelte:fragment>
+  <svelte:fragment slot="header-tools">
+    <Button icon={IconAdd} label={tracker.string.IssueTemplate} kind={'primary'} on:click={showCreateDialog} />
+  </svelte:fragment>
   <svelte:fragment slot="extra">
-    <Button
-      size={'small'}
-      icon={IconAdd}
-      label={tracker.string.IssueTemplate}
-      kind={'primary'}
-      on:click={showCreateDialog}
-    />
-
-    {#if viewlet}
-      <ViewletSettingButton bind:viewOptions {viewlet} />
-    {/if}
-
     {#if asideFloat && $$slots.aside}
-      <div class="buttons-divider" />
       <Button
         icon={asideShown ? IconDetailsFilled : IconDetails}
         kind={'transparent'}
@@ -116,6 +101,10 @@
           asideShown = !asideShown
         }}
       />
+      <div class="buttons-divider" />
+    {/if}
+    {#if viewlet}
+      <ViewletSettingButton bind:viewOptions {viewlet} />
     {/if}
   </svelte:fragment>
 </IssuesHeader>
diff --git a/plugins/tracker-resources/src/issues.ts b/plugins/tracker-resources/src/issues.ts
index 4d03813756..093b4ba17d 100644
--- a/plugins/tracker-resources/src/issues.ts
+++ b/plugins/tracker-resources/src/issues.ts
@@ -1,7 +1,7 @@
 import { Doc, DocumentUpdate, Ref, RelatedDocument, TxOperations } from '@hcengineering/core'
 import { getClient } from '@hcengineering/presentation'
 import { Component, Issue, Project, Sprint, trackerId } from '@hcengineering/tracker'
-import { getCurrentLocation, getPanelURI, Location, ResolvedLocation } from '@hcengineering/ui'
+import { Location, ResolvedLocation, getPanelURI, getCurrentResolvedLocation } from '@hcengineering/ui'
 import { workbenchId } from '@hcengineering/workbench'
 import { writable } from 'svelte/store'
 import tracker from './plugin'
@@ -44,7 +44,7 @@ export async function issueIdProvider (doc: Doc): Promise<string> {
 }
 
 export async function issueLinkFragmentProvider (doc: Doc): Promise<Location> {
-  const loc = getCurrentLocation()
+  const loc = getCurrentResolvedLocation()
   loc.path.length = 2
   loc.fragment = undefined
   loc.query = undefined
@@ -63,7 +63,7 @@ export async function issueLinkProvider (doc: Doc): Promise<string> {
 }
 
 export function generateIssueShortLink (issueId: string): string {
-  const location = getCurrentLocation()
+  const location = getCurrentResolvedLocation()
   return `${window.location.protocol}//${window.location.host}/${workbenchId}/${location.path[1]}/${trackerId}/${issueId}`
 }
 
@@ -94,7 +94,6 @@ export async function generateIssueLocation (loc: Location, issueId: string): Pr
       path: [appComponent, workspace],
       fragment: generateIssuePanelUri(issue)
     },
-    shouldNavigate: false,
     defaultLocation: {
       path: [appComponent, workspace, trackerId, project._id, 'issues'],
       fragment: generateIssuePanelUri(issue)
diff --git a/plugins/tracker-resources/src/plugin.ts b/plugins/tracker-resources/src/plugin.ts
index 92bcba9840..10490a2a24 100644
--- a/plugins/tracker-resources/src/plugin.ts
+++ b/plugins/tracker-resources/src/plugin.ts
@@ -141,10 +141,6 @@ export default mergeIds(trackerId, tracker, {
     DocumentIcon: '' as IntlString,
     DocumentColor: '' as IntlString,
     Rank: '' as IntlString,
-    DueDatePopupTitle: '' as IntlString,
-    DueDatePopupOverdueTitle: '' as IntlString,
-    DueDatePopupDescription: '' as IntlString,
-    DueDatePopupOverdueDescription: '' as IntlString,
     Grouping: '' as IntlString,
     Ordering: '' as IntlString,
     CompletedIssues: '' as IntlString,
diff --git a/plugins/tracker-resources/src/utils.ts b/plugins/tracker-resources/src/utils.ts
index af23f6cff5..4884e64ca0 100644
--- a/plugins/tracker-resources/src/utils.ts
+++ b/plugins/tracker-resources/src/utils.ts
@@ -227,25 +227,6 @@ export const getArraysUnion = (a: any[], b: any[]): any[] => {
   return Array.from(union)
 }
 
-const WARNING_DAYS = 7
-
-export const getDueDateIconModifier = (
-  isOverdue: boolean,
-  daysDifference: number | null
-): 'overdue' | 'critical' | 'warning' | undefined => {
-  if (isOverdue) {
-    return 'overdue'
-  }
-
-  if (daysDifference === 0) {
-    return 'critical'
-  }
-
-  if (daysDifference !== null && daysDifference <= WARNING_DAYS) {
-    return 'warning'
-  }
-}
-
 export type ComponentsViewMode = 'all' | 'backlog' | 'active' | 'closed'
 
 export type SprintViewMode = 'all' | 'planned' | 'active' | 'closed'
diff --git a/plugins/view-assets/assets/icons.svg b/plugins/view-assets/assets/icons.svg
index 72cafacdfe..1b967e306d 100644
--- a/plugins/view-assets/assets/icons.svg
+++ b/plugins/view-assets/assets/icons.svg
@@ -5,11 +5,13 @@
     <path d="M1 9.8C1 9.51997 1 9.37996 1.0545 9.273C1.10243 9.17892 1.17892 9.10243 1.273 9.0545C1.37996 9 1.51997 9 1.8 9H14.2C14.48 9 14.62 9 14.727 9.0545C14.8211 9.10243 14.8976 9.17892 14.9455 9.273C15 9.37996 15 9.51997 15 9.8V10.2C15 10.48 15 10.62 14.9455 10.727C14.8976 10.8211 14.8211 10.8976 14.727 10.9455C14.62 11 14.48 11 14.2 11H1.8C1.51997 11 1.37996 11 1.273 10.9455C1.17892 10.8976 1.10243 10.8211 1.0545 10.727C1 10.62 1 10.48 1 10.2V9.8Z" />
     <path d="M1 5.8C1 5.51997 1 5.37996 1.0545 5.273C1.10243 5.17892 1.17892 5.10243 1.273 5.0545C1.37996 5 1.51997 5 1.8 5H14.2C14.48 5 14.62 5 14.727 5.0545C14.8211 5.10243 14.8976 5.17892 14.9455 5.273C15 5.37996 15 5.51997 15 5.8V6.2C15 6.48003 15 6.62004 14.9455 6.727C14.8976 6.82108 14.8211 6.89757 14.727 6.9455C14.62 7 14.48 7 14.2 7H1.8C1.51997 7 1.37996 7 1.273 6.9455C1.17892 6.89757 1.10243 6.82108 1.0545 6.727C1 6.62004 1 6.48003 1 6.2V5.8Z" />
   </symbol>
-   <symbol id="list" viewBox="0 0 16 16">
-    <path d="M1 1.8C1 1.51997 1 1.37996 1.0545 1.273C1.10243 1.17892 1.17892 1.10243 1.273 1.0545C1.37996 1 1.51997 1 1.8 1H14.2C14.48 1 14.62 1 14.727 1.0545C14.8211 1.10243 14.8976 1.17892 14.9455 1.273C15 1.37996 15 1.51997 15 1.8V2.2C15 2.48003 15 2.62004 14.9455 2.727C14.8976 2.82108 14.8211 2.89757 14.727 2.9455C14.62 3 14.48 3 14.2 3H1.8C1.51997 3 1.37996 3 1.273 2.9455C1.17892 2.89757 1.10243 2.82108 1.0545 2.727C1 2.62004 1 2.48003 1 2.2V1.8Z" />
-    <path d="M1 13.8C1 13.52 1 13.38 1.0545 13.273C1.10243 13.1789 1.17892 13.1024 1.273 13.0545C1.37996 13 1.51997 13 1.8 13H14.2C14.48 13 14.62 13 14.727 13.0545C14.8211 13.1024 14.8976 13.1789 14.9455 13.273C15 13.38 15 13.52 15 13.8V14.2C15 14.48 15 14.62 14.9455 14.727C14.8976 14.8211 14.8211 14.8976 14.727 14.9455C14.62 15 14.48 15 14.2 15H1.8C1.51997 15 1.37996 15 1.273 14.9455C1.17892 14.8976 1.10243 14.8211 1.0545 14.727C1 14.62 1 14.48 1 14.2V13.8Z" />
-    <path d="M1 9.8C1 9.51997 1 9.37996 1.0545 9.273C1.10243 9.17892 1.17892 9.10243 1.273 9.0545C1.37996 9 1.51997 9 1.8 9H14.2C14.48 9 14.62 9 14.727 9.0545C14.8211 9.10243 14.8976 9.17892 14.9455 9.273C15 9.37996 15 9.51997 15 9.8V10.2C15 10.48 15 10.62 14.9455 10.727C14.8976 10.8211 14.8211 10.8976 14.727 10.9455C14.62 11 14.48 11 14.2 11H1.8C1.51997 11 1.37996 11 1.273 10.9455C1.17892 10.8976 1.10243 10.8211 1.0545 10.727C1 10.62 1 10.48 1 10.2V9.8Z" />
-    <path d="M1 5.8C1 5.51997 1 5.37996 1.0545 5.273C1.10243 5.17892 1.17892 5.10243 1.273 5.0545C1.37996 5 1.51997 5 1.8 5H14.2C14.48 5 14.62 5 14.727 5.0545C14.8211 5.10243 14.8976 5.17892 14.9455 5.273C15 5.37996 15 5.51997 15 5.8V6.2C15 6.48003 15 6.62004 14.9455 6.727C14.8976 6.82108 14.8211 6.89757 14.727 6.9455C14.62 7 14.48 7 14.2 7H1.8C1.51997 7 1.37996 7 1.273 6.9455C1.17892 6.89757 1.10243 6.82108 1.0545 6.727C1 6.62004 1 6.48003 1 6.2V5.8Z" />
+   <symbol id="list" viewBox="0 0 20 20">
+    <path d="M5 3.75H18.75V5H5V3.75Z" />
+    <path d="M5 9.375H18.75V10.625H5V9.375Z" />
+    <path d="M5 15H18.75V16.25H5V15Z" />
+    <path d="M1.25 3.75H3.125V5H1.25V3.75Z" />
+    <path d="M1.25 9.375H3.125V10.625H1.25V9.375Z" />
+    <path d="M1.25 15H3.125V16.25H1.25V15Z" />
   </symbol>
   <symbol id="card" viewBox="0 0 16 16">
     <path d="M1 2.6C1 2.03995 1 1.75992 1.10899 1.54601C1.20487 1.35785 1.35785 1.20487 1.54601 1.10899C1.75992 1 2.03995 1 2.6 1H5.4C5.96005 1 6.24008 1 6.45399 1.10899C6.64215 1.20487 6.79513 1.35785 6.89101 1.54601C7 1.75992 7 2.03995 7 2.6V3.4C7 3.96005 7 4.24008 6.89101 4.45399C6.79513 4.64215 6.64215 4.79513 6.45399 4.89101C6.24008 5 5.96005 5 5.4 5H2.6C2.03995 5 1.75992 5 1.54601 4.89101C1.35785 4.79513 1.20487 4.64215 1.10899 4.45399C1 4.24008 1 3.96005 1 3.4V2.6Z" />
@@ -71,7 +73,7 @@
     <path d="M17.2,7.8h3.6c1.1,0,2-0.9,2-2V4.2c0-1.1-0.9-2-2-2h-3.6c-1.1,0-2,0.9-2,2v0H9.8V4c0-1.5-1.2-2.8-2.8-2.8H4 C2.5,1.2,1.2,2.5,1.2,4v2c0,1.5,1.2,2.8,2.8,2.8h3c1.5,0,2.8-1.2,2.8-2.8V5.8h2V18c0,1.5,1.2,2.8,2.8,2.8h0.8v0c0,1.1,0.9,2,2,2h3.6 c1.1,0,2-0.9,2-2v-1.6c0-1.1-0.9-2-2-2h-3.6c-1.1,0-2,0.9-2,2v0h-0.8c-0.7,0-1.2-0.6-1.2-1.2v-4.8h2v0c0,1.1,0.9,2,2,2h3.6 c1.1,0,2-0.9,2-2v-1.6c0-1.1-0.9-2-2-2h-3.6c-1.1,0-2,0.9-2,2v0h-2v-6h2v0C15.2,6.9,16.1,7.8,17.2,7.8z M8.2,6 c0,0.7-0.6,1.2-1.2,1.2H4C3.3,7.2,2.8,6.7,2.8,6V4c0-0.7,0.6-1.2,1.2-1.2h3c0.7,0,1.2,0.6,1.2,1.2V6z M16.8,19.2 c0-0.2,0.2-0.5,0.5-0.5h3.6c0.2,0,0.5,0.2,0.5,0.5v1.6c0,0.2-0.2,0.5-0.5,0.5h-3.6c-0.2,0-0.5-0.2-0.5-0.5V19.2z M16.8,11.7 c0-0.2,0.2-0.5,0.5-0.5h3.6c0.2,0,0.5,0.2,0.5,0.5v1.6c0,0.2-0.2,0.5-0.5,0.5h-3.6c-0.2,0-0.5-0.2-0.5-0.5V11.7z M16.8,4.2 c0-0.2,0.2-0.5,0.5-0.5h3.6c0.2,0,0.5,0.2,0.5,0.5v1.6c0,0.2-0.2,0.5-0.5,0.5h-3.6c-0.2,0-0.5-0.2-0.5-0.5V4.2z" />
   </symbol>
   <symbol id="viewButton" viewBox="0 0 16 16">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 10.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-1A.5.5 0 0 1 8 14v-3a.5.5 0 0 1 .5-.5h1Zm-2.5 1V13H1.75a.75.75 0 0 1 0-1.5H7Zm7.25 0a.75.75 0 0 1 0 1.5H11v-1.5h3.25ZM5.5 6a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h1ZM3 7.25v1.5H1.75a.75.75 0 0 1 0-1.5H3Zm11.25 0a.75.75 0 0 1 0 1.5H7v-1.5h7.25Zm-2.75-5.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5h1ZM9 3v1.5H1.75a.75.75 0 0 1 0-1.5H9Zm5.25 0a.75.75 0 0 1 0 1.5H13V3h1.25Z" />
+    <path d="M10.5,5.5c-0.3-2.2-2.2-4-4.5-4c-2.5,0-4.5,2.1-4.5,4.5c0,2.3,1.8,4.2,4,4.5c0.3,2.2,2.2,4,4.5,4c2.5,0,4.5-2.1,4.5-4.5C14.6,7.6,12.7,5.8,10.5,5.5z M2.5,6C2.5,4,4,2.5,6,2.5c1.8,0,3.3,1.4,3.4,3.1c-2.1,0.2-3.7,1.8-4,3.9C3.8,9.2,2.5,7.7,2.5,6z M10,13.5c-2,0-3.5-1.5-3.5-3.5S8,6.4,10,6.4S13.5,8,13.5,10S12,13.5,10,13.5z" />
   </symbol>
   <symbol id="filter" viewBox="0 0 24 24">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M2.3,4.2C2.4,3.9,2.7,3.8,3,3.8h18c0.3,0,0.6,0.2,0.7,0.4c0.1,0.3,0.1,0.6-0.1,0.8l-7,8.2V21c0,0.3-0.1,0.5-0.4,0.6c-0.2,0.1-0.5,0.2-0.7,0l-3.6-1.8c-0.3-0.1-0.4-0.4-0.4-0.7v-6L2.4,5C2.2,4.8,2.2,4.5,2.3,4.2z M4.6,5.2l6.1,7.2c0.1,0.1,0.2,0.3,0.2,0.5v5.8l2.1,1v-6.9c0-0.2,0.1-0.4,0.2-0.5l6.1-7.2H4.6z" />
diff --git a/plugins/view-resources/src/components/ClassAttributeBar.svelte b/plugins/view-resources/src/components/ClassAttributeBar.svelte
index 84ed2739f1..3df2d3c477 100644
--- a/plugins/view-resources/src/components/ClassAttributeBar.svelte
+++ b/plugins/view-resources/src/components/ClassAttributeBar.svelte
@@ -15,9 +15,9 @@
 <script lang="ts">
   import core, { Class, Doc, Ref } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
-  import { AttributesBar, getAttribute, getClient, KeyedAttribute } from '@hcengineering/presentation'
+  import { AttributesBar, KeyedAttribute, getAttribute, getClient } from '@hcengineering/presentation'
   import setting, { settingId } from '@hcengineering/setting'
-  import { Button, getCurrentLocation, Label, navigate } from '@hcengineering/ui'
+  import { Button, Label, getCurrentResolvedLocation, navigate } from '@hcengineering/ui'
   import { getFiltredKeys, isCollectionAttr } from '../utils'
 
   export let object: Doc | Record<string, any>
@@ -80,7 +80,7 @@
         showTooltip={{ label: setting.string.ClassSetting }}
         on:click={(ev) => {
           ev.stopPropagation()
-          const loc = getCurrentLocation()
+          const loc = getCurrentResolvedLocation()
           loc.path[2] = settingId
           loc.path[3] = 'setting'
           loc.path[4] = 'classes'
@@ -107,8 +107,8 @@
     margin: 0.25rem -0.5rem 0.75rem;
     padding: 0 0 0 0.5rem;
     font-weight: 600;
-    color: var(--dark-color);
-    border: 1px solid var(--divider-color);
+    color: var(--theme-dark-color);
+    border: 1px solid var(--theme-divider-color);
     border-radius: 0.25rem;
     cursor: pointer;
     transition-property: color, background-color, border-color;
@@ -135,7 +135,7 @@
       transition: opacity 0.15s var(--timing-main);
     }
     &.collapsed {
-      background-color: var(--divider-color);
+      background-color: var(--theme-divider-color);
       border-color: transparent;
 
       .icon-arrow {
@@ -144,8 +144,8 @@
       }
     }
     &:hover {
-      color: var(--caption-color);
-      background-color: var(--menu-bg-select);
+      color: var(--theme-caption-color);
+      background-color: var(--theme-navpanel-hovered);
       border-color: transparent;
 
       .icon-arrow {
diff --git a/plugins/view-resources/src/components/DateEditor.svelte b/plugins/view-resources/src/components/DateEditor.svelte
index 536439e739..97634dc7f7 100644
--- a/plugins/view-resources/src/components/DateEditor.svelte
+++ b/plugins/view-resources/src/components/DateEditor.svelte
@@ -21,7 +21,8 @@
   export let type: TypeDate | undefined
   export let label: IntlString | undefined = undefined
   export let onChange: (value: any) => void
-  export let kind: 'no-border' | 'link' = 'no-border'
+  export let kind: 'no-border' | 'link' | 'secondary' = 'no-border'
+  export let size: 'small' | 'medium' | 'large' = 'small'
 </script>
 
 <DateRangePresenter
@@ -31,6 +32,7 @@
   noShift={!type?.withShift}
   editable
   {kind}
+  {size}
   on:change={(res) => {
     if (res.detail !== undefined) onChange(res.detail)
   }}
diff --git a/plugins/view-resources/src/components/DocNavLink.svelte b/plugins/view-resources/src/components/DocNavLink.svelte
index 1454004c04..5b4cf64280 100644
--- a/plugins/view-resources/src/components/DocNavLink.svelte
+++ b/plugins/view-resources/src/components/DocNavLink.svelte
@@ -24,6 +24,7 @@
   export let onClick: ((event: MouseEvent) => void) | undefined = undefined
   export let noUnderline = false
   export let inline = false
+  export let colorInherit: boolean = false
   export let component: AnyComponent = view.component.EditDoc
   export let props: Record<string, any> = {}
   export let shrink: number = 0
@@ -48,4 +49,4 @@
   $: if (object !== undefined) getHref(object)
 </script>
 
-<NavLink {disableClick} {onClick} {noUnderline} {inline} {shrink} {href}><slot /></NavLink>
+<NavLink {disableClick} {onClick} {noUnderline} {inline} {shrink} {href} {colorInherit}><slot /></NavLink>
diff --git a/plugins/view-resources/src/components/ObjectBox.svelte b/plugins/view-resources/src/components/ObjectBox.svelte
index 01426475f7..3549529632 100644
--- a/plugins/view-resources/src/components/ObjectBox.svelte
+++ b/plugins/view-resources/src/components/ObjectBox.svelte
@@ -137,7 +137,7 @@
           {:else}
             <div class="flex-row-center">
               {#if icon}
-                <Icon {icon} size={kind === 'link' ? 'small' : size} />
+                <Icon {icon} size={kind === 'link' || kind === 'secondary' ? 'small' : size} />
               {/if}
               <div class="ml-2">
                 <Label {label} />
diff --git a/plugins/view-resources/src/components/StringEditor.svelte b/plugins/view-resources/src/components/StringEditor.svelte
index f886bea5fb..cc5a19e162 100644
--- a/plugins/view-resources/src/components/StringEditor.svelte
+++ b/plugins/view-resources/src/components/StringEditor.svelte
@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@hcengineering/platform'
-  import type { ButtonSize } from '@hcengineering/ui'
+  import type { ButtonSize, ButtonKind } from '@hcengineering/ui'
   import { EditBox, Label, showPopup, eventToHTMLElement, Button } from '@hcengineering/ui'
   import EditBoxPopup from './EditBoxPopup.svelte'
 
@@ -24,7 +24,7 @@
   export let value: string
   export let focus: boolean = false
   export let onChange: (value: string) => void = () => {}
-  export let kind: 'no-border' | 'link' = 'no-border'
+  export let kind: ButtonKind | undefined = undefined
   export let readonly = false
   export let size: ButtonSize = 'small'
   export let justify: 'left' | 'center' = 'center'
@@ -37,7 +37,7 @@
   }
 </script>
 
-{#if kind === 'link'}
+{#if kind}
   <Button
     {kind}
     {size}
diff --git a/plugins/view-resources/src/components/Table.svelte b/plugins/view-resources/src/components/Table.svelte
index 3f0652dc88..c0e5bf7462 100644
--- a/plugins/view-resources/src/components/Table.svelte
+++ b/plugins/view-resources/src/components/Table.svelte
@@ -22,8 +22,6 @@
     CheckBox,
     Component,
     getEventPositionElement,
-    IconDown,
-    IconUp,
     Label,
     Loading,
     resizeObserver,
@@ -35,6 +33,7 @@
   import view from '../plugin'
   import { buildConfigLookup, buildModel, LoadingProps } from '../utils'
   import Menu from './Menu.svelte'
+  import IconUpDown from './icons/UpDown.svelte'
 
   export let _class: Ref<Class<Doc>>
   export let query: DocumentQuery<Doc>
@@ -261,11 +260,7 @@
                 {/if}
                 {#if attribute.sortingKey === _sortKey}
                   <div class="icon">
-                    {#if sortOrder === SortingOrder.Ascending}
-                      <IconUp size={'small'} />
-                    {:else}
-                      <IconDown size={'small'} />
-                    {/if}
+                    <IconUpDown size={'small'} descending={sortOrder === SortingOrder.Descending} />
                   </div>
                 {/if}
               </div>
@@ -282,7 +277,7 @@
             class:checking={checkedSet.has(object._id)}
             class:fixed={row === selection}
             class:selected={row === selection}
-            on:mouseover={() => onRow(object)}
+            on:mouseenter={() => onRow(object)}
             on:focus={() => {}}
             bind:this={refs[row]}
             on:contextmenu|preventDefault={(ev) => {
@@ -391,14 +386,13 @@
 
   .footer {
     width: 100%;
-    background-color: var(--body-color);
+    background-color: var(--theme-comp-header-color);
     display: flex;
     align-items: flex-end;
     height: 2.5rem;
     z-index: 2;
     position: sticky;
     bottom: 0;
-    box-shadow: inset 0 1px 0 0 var(--divider-color);
 
     .content {
       display: flex;
diff --git a/plugins/view-resources/src/components/ViewletSettingButton.svelte b/plugins/view-resources/src/components/ViewletSettingButton.svelte
index c5ce44c78d..f0e66ba0a6 100644
--- a/plugins/view-resources/src/components/ViewletSettingButton.svelte
+++ b/plugins/view-resources/src/components/ViewletSettingButton.svelte
@@ -13,13 +13,14 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Button, ButtonKind, eventToHTMLElement, IconDownOutline, Label, showPopup } from '@hcengineering/ui'
+  import { Button, ButtonKind, eventToHTMLElement, showPopup } from '@hcengineering/ui'
   import { Viewlet, ViewOptions } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import view from '../plugin'
   import { setViewOptions } from '../viewOptions'
   import ViewletSetting from './ViewletSetting.svelte'
   import ViewOptionsEditor from './ViewOptions.svelte'
+  import IconArrowDown from './icons/ArrowDown.svelte'
 
   export let viewlet: Viewlet | undefined
   export let kind: ButtonKind = 'secondary'
@@ -54,26 +55,11 @@
 {#if viewlet}
   <Button
     icon={view.icon.ViewButton}
+    label={view.string.View}
+    iconRight={IconArrowDown}
     {kind}
-    size={'small'}
     showTooltip={{ label: view.string.CustomizeView }}
     bind:input={btn}
     on:click={clickHandler}
-  >
-    <svelte:fragment slot="content">
-      <div class="flex-row-center clear-mins pointer-events-none">
-        <span class="text-sm font-medium"><Label label={view.string.View} /></span>
-        <div class="icon"><IconDownOutline size={'full'} /></div>
-      </div>
-    </svelte:fragment>
-  </Button>
+  />
 {/if}
-
-<style lang="scss">
-  .icon {
-    margin-left: 0.25rem;
-    width: 0.875rem;
-    height: 0.875rem;
-    color: var(--content-color);
-  }
-</style>
diff --git a/plugins/view-resources/src/components/filter/FilterBar.svelte b/plugins/view-resources/src/components/filter/FilterBar.svelte
index 262062b1ee..1405a5ac0c 100644
--- a/plugins/view-resources/src/components/filter/FilterBar.svelte
+++ b/plugins/view-resources/src/components/filter/FilterBar.svelte
@@ -146,13 +146,7 @@
       </div>
     </div>
 
-    <Button
-      icon={view.icon.Views}
-      label={view.string.Save}
-      size={'small'}
-      width={'fit-content'}
-      on:click={() => saveFilteredView()}
-    />
+    <Button icon={view.icon.Views} label={view.string.Save} width={'fit-content'} on:click={() => saveFilteredView()} />
   </div>
 {/if}
 
@@ -162,12 +156,11 @@
     grid-template-columns: auto auto;
     justify-content: space-between;
     align-items: center;
-    padding: 0.75rem 1.5rem 0.75rem 2.5rem;
+    padding: 0.5rem 2.25rem;
     width: 100%;
     min-width: 0;
-    border: 1px solid var(--divider-color);
-    border-left: none;
-    border-right: none;
+    background-color: var(--theme-comp-header-color);
+    border-bottom: 1px solid var(--theme-divider-color);
 
     .filters {
       display: flex;
diff --git a/plugins/view-resources/src/components/filter/FilterButton.svelte b/plugins/view-resources/src/components/filter/FilterButton.svelte
index 6d392cca4d..a9f18c65a8 100644
--- a/plugins/view-resources/src/components/filter/FilterButton.svelte
+++ b/plugins/view-resources/src/components/filter/FilterButton.svelte
@@ -15,11 +15,13 @@
 <script lang="ts">
   import { Class, Doc, Ref, Space } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
-  import { Button, Icon, IconAdd, IconClose, Label, eventToHTMLElement, showPopup } from '@hcengineering/ui'
+  import { Button, IconClose, eventToHTMLElement, showPopup } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import { filterStore, setFilters } from '../../filter'
   import view from '../../plugin'
   import FilterTypePopup from './FilterTypePopup.svelte'
+  import IconFilter from '../icons/Filter.svelte'
+  import IconArrowDown from '../icons/ArrowDown.svelte'
 
   export let _class: Ref<Class<Doc>> | undefined
   export let space: Ref<Space> | undefined = undefined
@@ -57,24 +59,12 @@
 
 {#if visible}
   <Button
-    size="small"
-    kind={'link-bordered'}
-    borderStyle={'dashed'}
+    icon={IconFilter}
+    label={$filterStore.length === 0 ? view.string.Filter : view.string.ClearFilters}
+    iconRight={$filterStore.length === 0 ? IconArrowDown : IconClose}
     on:click={(ev) => {
       if ($filterStore.length === 0) add(ev)
       else setFilters([])
     }}
-  >
-    <svelte:fragment slot="content">
-      <div class="flex-row-center pointer-events-none">
-        {#if $filterStore.length === 0}
-          <Icon icon={IconAdd} size={'x-small'} />
-          <span class="overflow-label ml-1"><Label label={view.string.Filter} /></span>
-        {:else}
-          <span class="overflow-label mr-1"><Label label={view.string.ClearFilters} /></span>
-          <Icon icon={IconClose} size={'x-small'} />
-        {/if}
-      </div>
-    </svelte:fragment>
-  </Button>
+  />
 {/if}
diff --git a/plugins/view-resources/src/components/filter/FilterSave.svelte b/plugins/view-resources/src/components/filter/FilterSave.svelte
index 019697cd21..711a4dfee8 100644
--- a/plugins/view-resources/src/components/filter/FilterSave.svelte
+++ b/plugins/view-resources/src/components/filter/FilterSave.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { Card, getClient } from '@hcengineering/presentation'
-  import view from '../../plugin'
-  import { EditBox, getCurrentLocation, Button } from '@hcengineering/ui'
+  import { Class, Doc, Ref } from '@hcengineering/core'
   import preference from '@hcengineering/preference'
+  import { Card, getClient } from '@hcengineering/presentation'
+  import { Button, EditBox, getCurrentResolvedLocation } from '@hcengineering/ui'
+  import { ViewOptions } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import { filterStore } from '../../filter'
-  import { ViewOptions } from '@hcengineering/view'
-  import { Class, Doc, Ref } from '@hcengineering/core'
+  import view from '../../plugin'
   import { getActiveViewletId } from '../../utils'
 
   export let viewOptions: ViewOptions | undefined = undefined
@@ -16,7 +16,7 @@
   const client = getClient()
 
   async function saveFilter () {
-    const loc = getCurrentLocation()
+    const loc = getCurrentResolvedLocation()
     loc.fragment = undefined
     loc.query = undefined
     const filters = JSON.stringify($filterStore)
diff --git a/plugins/view-resources/src/components/filter/FilterSection.svelte b/plugins/view-resources/src/components/filter/FilterSection.svelte
index 4a591f70db..06a27e01b7 100644
--- a/plugins/view-resources/src/components/filter/FilterSection.svelte
+++ b/plugins/view-resources/src/components/filter/FilterSection.svelte
@@ -187,14 +187,14 @@
     height: 1.5rem;
     min-width: 1.5rem;
     white-space: nowrap;
-    color: var(--accent-color);
-    background-color: var(--noborder-bg-color);
+    color: var(--theme-content-color);
+    background-color: var(--theme-button-enabled);
     border: 1px solid transparent;
     transition-property: border, background-color, color, box-shadow;
     transition-duration: 0.15s;
 
     .btn-icon {
-      color: var(--content-color);
+      color: var(--theme-dark-color);
       transition: color 0.15s;
       pointer-events: none;
     }
@@ -205,11 +205,11 @@
       max-width: 10rem;
     }
     &:hover {
-      color: var(--caption-color);
-      background-color: var(--noborder-bg-hover);
+      color: var(--theme-caption-color);
+      background-color: var(--theme-button-hovered);
 
       .btn-icon {
-        color: var(--caption-color);
+        color: var(--theme-caption-color);
       }
     }
 
diff --git a/plugins/view-resources/src/components/icons/ArrowDown.svelte b/plugins/view-resources/src/components/icons/ArrowDown.svelte
new file mode 100644
index 0000000000..495b556b8a
--- /dev/null
+++ b/plugins/view-resources/src/components/icons/ArrowDown.svelte
@@ -0,0 +1,24 @@
+<!--
+//
+// 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">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="10.1,3.4 6,7.5 1.9,3.4 1.1,4.1 6,9 10.9,4.1" />
+</svg>
diff --git a/plugins/view-resources/src/components/icons/Filter.svelte b/plugins/view-resources/src/components/icons/Filter.svelte
new file mode 100644
index 0000000000..fad112394f
--- /dev/null
+++ b/plugins/view-resources/src/components/icons/Filter.svelte
@@ -0,0 +1,26 @@
+<!--
+//
+// 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">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="3.5" width="14" height="1.5" />
+  <rect x="2.5" y="7.5" width="11" height="1.5" />
+  <rect x="4.5" y="11.5" width="7" height="1.5" />
+</svg>
diff --git a/plugins/view-resources/src/components/icons/UpDown.svelte b/plugins/view-resources/src/components/icons/UpDown.svelte
new file mode 100644
index 0000000000..3c61e38132
--- /dev/null
+++ b/plugins/view-resources/src/components/icons/UpDown.svelte
@@ -0,0 +1,26 @@
+<!--
+//
+// 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">
+  export let size: 'small' | 'medium' | 'large'
+  export let descending: boolean = false
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <polygon style:opacity={descending ? 1 : 0.4} points="8,3.4 4.7,6.7 11.3,6.7" />
+  <polygon style:opacity={descending ? 0.4 : 1} points="8,12.6 11.3,9.3 4.7,9.3" />
+</svg>
diff --git a/plugins/view-resources/src/components/list/DividerPresenter.svelte b/plugins/view-resources/src/components/list/DividerPresenter.svelte
new file mode 100644
index 0000000000..e5b048d837
--- /dev/null
+++ b/plugins/view-resources/src/components/list/DividerPresenter.svelte
@@ -0,0 +1,12 @@
+<span class="root" />
+
+<style lang="scss">
+  .root {
+    flex-shrink: 0;
+    margin: 0 0.375rem 0 0.875rem;
+    width: 1px;
+    height: 1.5rem;
+    min-width: 1px;
+    background-color: var(--theme-list-divider-color);
+  }
+</style>
diff --git a/plugins/view-resources/src/components/list/List.svelte b/plugins/view-resources/src/components/list/List.svelte
index 40756abafd..3abd22eccf 100644
--- a/plugins/view-resources/src/components/list/List.svelte
+++ b/plugins/view-resources/src/components/list/List.svelte
@@ -37,13 +37,10 @@
   export let flatHeaders = false
   export let disableHeader = false
   export let props: Record<string, any> = {}
+  export let selection: number | undefined = undefined
 
   export let documents: Doc[] | undefined = undefined
 
-  const elementByIndex: Map<number, HTMLDivElement> = new Map()
-  const docByIndex: Map<number, Doc> = new Map()
-  const indexById: Map<Ref<Doc>, number> = new Map()
-
   let docs: Doc[] = []
 
   $: orderBy = viewOptions.orderBy
@@ -63,16 +60,16 @@
       resultQuery,
       (res) => {
         docs = res
-        dispatch('content', docs)
       },
       resultOptions
     )
   } else {
     docsQuery.unsubscribe()
     docs = documents
-    dispatch('content', docs)
   }
 
+  $: dispatch('content', docs)
+
   const dispatch = createEventDispatcher()
 
   const client = getClient()
@@ -100,26 +97,7 @@
   }
 
   export function select (offset: 1 | -1 | 0, of?: Doc): void {
-    let pos = (of !== undefined ? indexById.get(of._id) : -1) ?? -1
-    pos += offset
-    if (pos < 0) {
-      pos = 0
-    }
-    if (pos >= docs.length) {
-      pos = docs.length - 1
-    }
-    const target = docByIndex.get(pos)
-    if (target !== undefined) {
-      onRow(target)
-    }
-    const r = elementByIndex.get(pos)
-    if (r !== undefined) {
-      r.scrollIntoView({ behavior: 'auto', block: 'nearest' })
-    }
-  }
-
-  function onRow (object: Doc): void {
-    dispatch('row-focus', object)
+    listCategories?.select(offset, of)
   }
 
   const getLoadingElementsLength = (props: LoadingProps | undefined, options?: FindOptions<Doc>) => {
@@ -137,23 +115,23 @@
   } = {}
 
   let listDiv: HTMLDivElement
+  let listCategories: ListCategories
 </script>
 
 <div class="list-container" bind:this={listDiv}>
   <ListCategories
+    bind:this={listCategories}
     newObjectProps={() => (space ? { space } : {})}
-    {elementByIndex}
-    {indexById}
     {docs}
     {_class}
     {space}
+    {selection}
     query={resultQuery}
     {lookup}
     loadingPropsLength={getLoadingElementsLength(loadingProps, options)}
     {baseMenuClass}
     {config}
     {viewOptions}
-    {docByIndex}
     {viewOptionsConfig}
     {selectedObjectIds}
     level={0}
@@ -167,6 +145,9 @@
     {props}
     {listDiv}
     bind:dragItem
+    on:select={(evt) => {
+      select(0, evt.detail)
+    }}
   />
 </div>
 
diff --git a/plugins/view-resources/src/components/list/ListCategories.svelte b/plugins/view-resources/src/components/list/ListCategories.svelte
index 713db288e2..07c9f670db 100644
--- a/plugins/view-resources/src/components/list/ListCategories.svelte
+++ b/plugins/view-resources/src/components/list/ListCategories.svelte
@@ -18,7 +18,7 @@
   import { getClient, statusStore } from '@hcengineering/presentation'
   import { AnyComponent } from '@hcengineering/ui'
   import { AttributeModel, BuildModelKey, CategoryOption, ViewOptionModel, ViewOptions } from '@hcengineering/view'
-  import { createEventDispatcher, onDestroy } from 'svelte'
+  import { createEventDispatcher, onDestroy, SvelteComponentTyped } from 'svelte'
   import {
     buildModel,
     concatCategories,
@@ -31,8 +31,6 @@
   import { CategoryQuery, noCategory } from '../../viewOptions'
   import ListCategory from './ListCategory.svelte'
 
-  export let elementByIndex: Map<number, HTMLDivElement>
-  export let indexById: Map<Ref<Doc>, number>
   export let docs: Doc[]
   export let _class: Ref<Class<Doc>>
   export let space: Ref<Space> | undefined
@@ -51,13 +49,13 @@
   export let level: number
   export let initIndex = 0
   export let newObjectProps: (doc: Doc) => Record<string, any> | undefined
-  export let docByIndex: Map<number, Doc>
   export let viewOptionsConfig: ViewOptionModel[] | undefined
   export let dragItem: {
     doc?: Doc
     revert?: () => void
   }
   export let listDiv: HTMLDivElement
+  export let selection: number | undefined = undefined
 
   $: groupByKey = viewOptions.groupBy[level] ?? noCategory
   let categories: CategoryType[] = []
@@ -129,28 +127,123 @@
   $: extraHeaders = getAdditionalHeader(client, _class)
 
   const dispatch = createEventDispatcher()
+
+  function getState (doc: Doc): number {
+    let pos = 0
+    for (const st of categories) {
+      const stateObjs = getGroupByValues(groupByDocs, st) ?? []
+      if (stateObjs.findIndex((it) => it._id === doc._id) !== -1) {
+        return pos
+      }
+      pos++
+    }
+    return -1
+  }
+
+  export function select (offset: 1 | -1 | 0, of?: Doc, dir?: 'vertical' | 'horizontal'): void {
+    let pos = (of != null ? docs.findIndex((it) => it._id === of._id) : selection) ?? -1
+    if (pos === -1) {
+      for (const st of categories) {
+        const stateObjs = getGroupByValues(groupByDocs, st) ?? []
+        if (stateObjs.length > 0) {
+          pos = docs.findIndex((it) => it._id === stateObjs[0]._id)
+          break
+        }
+      }
+    }
+
+    if (pos < 0) {
+      pos = 0
+    }
+    if (pos >= docs.length) {
+      pos = docs.length - 1
+    }
+
+    const obj = docs[pos]
+    if (obj === undefined) {
+      return
+    }
+
+    // We found group
+    const objState = getState(obj)
+    if (objState === -1) {
+      return
+    }
+
+    if (level + 1 >= viewOptions.groupBy.length) {
+      const stateObjs = getGroupByValues(groupByDocs, categories[objState]) ?? []
+
+      const statePos = stateObjs.findIndex((it) => it._id === obj._id)
+      if (statePos === undefined) {
+        return
+      }
+
+      console.log(statePos, objState, offset)
+      if (offset === -1) {
+        if (dir === undefined || dir === 'vertical') {
+          if (statePos - 1 < 0 && objState > 0) {
+            const pstateObjs = getGroupByValues(groupByDocs, categories[objState - 1]) ?? []
+            dispatch('select', pstateObjs[pstateObjs.length - 1])
+          } else {
+            const obj = stateObjs[statePos - 1] ?? stateObjs[0]
+            scrollInto(objState, obj)
+            dispatch('row-focus', obj)
+          }
+          return
+        }
+      }
+      if (offset === 1) {
+        if (dir === undefined || dir === 'vertical') {
+          if (statePos + 1 >= stateObjs.length && objState < categories.length) {
+            const pstateObjs = getGroupByValues(groupByDocs, categories[objState + 1]) ?? []
+            if (pstateObjs[0] !== undefined) {
+              dispatch('select', pstateObjs[0])
+            }
+          } else {
+            const obj = stateObjs[statePos + 1] ?? stateObjs[stateObjs.length - 1]
+            scrollInto(objState, obj)
+            dispatch('row-focus', obj)
+          }
+          return
+        }
+      }
+      if (offset === 0) {
+        // scrollInto(objState, obj)
+        dispatch('row-focus', obj)
+      }
+    } else {
+      listCategory[objState]?.select(offset, of, dir)
+    }
+  }
+  function scrollInto (statePos: number, obj: Doc): void {
+    // listCategory[statePos]?.scrollIntoView({ behavior: 'auto', block: 'nearest' })
+    listListCategory[statePos]?.scroll(obj)
+    listCategory[statePos]?.scroll(obj)
+  }
+
+  const listCategory: SvelteComponentTyped[] = []
+  const listListCategory: ListCategory[] = []
 </script>
 
 {#each categories as category, i (typeof category === 'object' ? category.name : category)}
   {@const items = groupByKey === noCategory ? docs : getGroupByValues(groupByDocs, category)}
   <ListCategory
-    {elementByIndex}
-    {indexById}
+    bind:this={listListCategory[i]}
     {extraHeaders}
     {space}
     {selectedObjectIds}
     {headerComponent}
-    initIndex={getInitIndex(categories, i)}
     {baseMenuClass}
     {level}
     {viewOptions}
     {groupByKey}
     {lookup}
     {config}
-    {docByIndex}
     {itemModels}
     {_class}
     singleCat={level === 0 && categories.length === 1}
+    oneCat={viewOptions.groupBy.length === 1}
+    lastCat={i === categories.length - 1}
     {category}
     {items}
     {newObjectProps}
@@ -175,8 +268,6 @@
   >
     <svelte:fragment
       slot="category"
-      let:elementByIndex
-      let:indexById
       let:docs
       let:_class
       let:space
@@ -192,16 +283,13 @@
       let:flatHeaders
       let:props
       let:level
-      let:initIndex
-      let:docByIndex
       let:viewOptionsConfig
       let:listDiv
       let:dragstart
     >
       <svelte:self
-        {elementByIndex}
-        {indexById}
         {docs}
+        bind:this={listCategory[i]}
         {_class}
         {space}
         {lookup}
@@ -217,7 +305,6 @@
         {props}
         {level}
         {initIndex}
-        {docByIndex}
         {viewOptionsConfig}
         {listDiv}
         on:dragItem
@@ -225,6 +312,9 @@
         on:uncheckAll
         on:row-focus
         on:dragstart={dragstart}
+        on:select={(evt) => {
+          select(0, evt.detail)
+        }}
       />
     </svelte:fragment>
   </ListCategory>
diff --git a/plugins/view-resources/src/components/list/ListCategory.svelte b/plugins/view-resources/src/components/list/ListCategory.svelte
index 1c6e87ada5..561c86adfe 100644
--- a/plugins/view-resources/src/components/list/ListCategory.svelte
+++ b/plugins/view-resources/src/components/list/ListCategory.svelte
@@ -16,17 +16,18 @@
   import { Class, Doc, DocumentUpdate, Lookup, PrimitiveType, Ref, Space, StatusValue } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
-  import { calcRank, DocWithRank } from '@hcengineering/task'
+  import { DocWithRank, calcRank } from '@hcengineering/task'
   import {
     AnyComponent,
     CheckBox,
     ExpandCollapse,
+    Spinner,
     getEventPositionElement,
-    showPopup,
-    Spinner
+    mouseAttractor,
+    showPopup
   } from '@hcengineering/ui'
   import { AttributeModel, BuildModelKey, ViewOptionModel, ViewOptions } from '@hcengineering/view'
-  import { createEventDispatcher } from 'svelte'
+  import { createEventDispatcher, tick } from 'svelte'
   import { FocusSelection, focusStore } from '../../selection'
   import Menu from '../Menu.svelte'
   import ListHeader from './ListHeader.svelte'
@@ -35,11 +36,12 @@
   export let category: PrimitiveType | StatusValue
   export let headerComponent: AttributeModel | undefined
   export let singleCat: boolean
+  export let oneCat: boolean
+  export let lastCat: boolean
   export let groupByKey: string
   export let space: Ref<Space> | undefined
   export let baseMenuClass: Ref<Class<Doc>> | undefined
   export let items: Doc[]
-  export let initIndex: number
   export let createItemDialog: AnyComponent | undefined
   export let createItemLabel: IntlString | undefined
   export let loadingPropsLength: number | undefined
@@ -50,14 +52,11 @@
   export let disableHeader = false
   export let props: Record<string, any> = {}
   export let level: number
-  export let elementByIndex: Map<number, HTMLDivElement>
-  export let indexById: Map<Ref<Doc>, number>
   export let lookup: Lookup<Doc>
   export let _class: Ref<Class<Doc>>
   export let config: (string | BuildModelKey)[]
   export let viewOptions: ViewOptions
   export let newObjectProps: (doc: Doc) => Record<string, any> | undefined
-  export let docByIndex: Map<number, Doc>
   export let viewOptionsConfig: ViewOptionModel[] | undefined
   export let dragItem: {
     doc?: Doc
@@ -92,7 +91,7 @@
     dispatch('row-focus', object)
   }
 
-  const handleMenuOpened = async (event: MouseEvent, object: Doc, rowIndex: number) => {
+  const handleMenuOpened = async (event: MouseEvent, object: Doc) => {
     event.preventDefault()
     handleRowFocused(object)
 
@@ -300,10 +299,30 @@
       index: i
     })
   }
+  export function scroll (item: Doc): void {
+    const pos = items.findIndex((it) => it._id === item._id)
+    if (pos >= 0) {
+      if (collapsed) {
+        collapsed = false
+        tick().then(() => scroll(item))
+        return
+      }
+      if (pos >= limited.length) {
+        limit = (limit ?? 0) + 20
+
+        tick().then(() => scroll(item))
+      } else {
+        listItems[pos]?.scroll()
+      }
+    }
+  }
+  const listItems: ListItem[] = []
 </script>
 
 <div
   bind:this={div}
+  class="category-container"
+  class:zero-container={level === 0}
   on:drop|preventDefault={drop}
   on:dragover={dragOverCat}
   on:dragenter={dragEnterCat}
@@ -323,7 +342,9 @@
       {extraHeaders}
       newObjectProps={_newObjectProps}
       flat={flatHeaders}
+      {collapsed}
       {props}
+      {lastCat}
       on:more={() => {
         if (limit !== undefined) limit += 20
       }}
@@ -332,49 +353,42 @@
       }}
     />
   {/if}
-  <ExpandCollapse isExpanded={!collapsed || dragItemIndex !== undefined}>
+  <ExpandCollapse isExpanded={!collapsed || dragItemIndex !== undefined} duration={0}>
     {#if !lastLevel}
-      <div class="p-2">
-        <slot
-          name="category"
-          {elementByIndex}
-          {indexById}
-          docs={items}
-          {_class}
-          {space}
-          {lookup}
-          {loadingPropsLength}
-          {baseMenuClass}
-          {config}
-          {selectedObjectIds}
-          {createItemDialog}
-          {createItemLabel}
-          {viewOptions}
-          newObjectProps={_newObjectProps}
-          {flatHeaders}
-          {props}
-          level={level + 1}
-          {initIndex}
-          {docByIndex}
-          {viewOptionsConfig}
-          {listDiv}
-          dragItem
-          dragstart={dragStartHandler}
-        />
-      </div>
+      <slot
+        name="category"
+        docs={items}
+        {_class}
+        {space}
+        {lookup}
+        {loadingPropsLength}
+        {baseMenuClass}
+        {config}
+        {selectedObjectIds}
+        {createItemDialog}
+        {createItemLabel}
+        {viewOptions}
+        newObjectProps={_newObjectProps}
+        {flatHeaders}
+        {props}
+        level={level + 1}
+        {viewOptionsConfig}
+        {listDiv}
+        dragItem
+        dragstart={dragStartHandler}
+      />
     {:else if itemModels && (!collapsed || dragItemIndex !== undefined)}
       {#if limited}
         {#each limited as docObject, i (docObject._id)}
           <ListItem
+            bind:this={listItems[i]}
             {docObject}
-            {elementByIndex}
-            {docByIndex}
-            {indexById}
             model={itemModels}
-            index={initIndex + i}
             {groupByKey}
             selected={isSelected(docObject, $focusStore)}
             checked={selectedObjectIdsSet.has(docObject._id)}
+            last={i === limited.length - 1}
+            lastCat={i === limited.length - 1 && (oneCat || lastCat)}
             on:dragstart={(e) => dragStart(e, docObject, i)}
             on:dragenter={(e) => {
               if (dragItemIndex !== undefined) {
@@ -386,9 +400,9 @@
             on:dragover={(e) => dragover(e, i)}
             on:drop={dropItemHandle}
             on:check={(ev) => dispatch('check', { docs: ev.detail.docs, value: ev.detail.value })}
-            on:contextmenu={(event) => handleMenuOpened(event, docObject, initIndex + i)}
+            on:contextmenu={(event) => handleMenuOpened(event, docObject)}
             on:focus={() => {}}
-            on:mouseover={() => handleRowFocused(docObject)}
+            on:mouseover={mouseAttractor(() => handleRowFocused(docObject))}
             {props}
           />
         {/each}
@@ -411,7 +425,16 @@
 </div>
 
 <style lang="scss">
-  .row:not(:last-child) {
-    border-bottom: 1px solid var(--accent-bg-color);
+  .expandCollapse {
+    overflow: hidden;
+    transition: height 0.3s ease-out;
+    height: auto;
+  }
+  .zero-container {
+    border-radius: 0.25rem;
+
+    &:not(:first-child) {
+      margin-top: 0.5rem;
+    }
   }
 </style>
diff --git a/plugins/view-resources/src/components/list/ListHeader.svelte b/plugins/view-resources/src/components/list/ListHeader.svelte
index 6738c684e3..1df59738b3 100644
--- a/plugins/view-resources/src/components/list/ListHeader.svelte
+++ b/plugins/view-resources/src/components/list/ListHeader.svelte
@@ -17,17 +17,14 @@
   import ui, {
     ActionIcon,
     AnyComponent,
-    Button,
-    Component,
-    eventToHTMLElement,
-    IconAdd,
     IconMoreH,
     Label,
-    showPopup
+    hsvToRGB,
+    IconCollapseArrow,
+    deviceOptionsStore as deviceInfo
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import { noCategory } from '../../viewOptions'
-  import FixedColumn from '../FixedColumn.svelte'
   import view from '../../plugin'
   import { Doc, Ref, Space } from '@hcengineering/core'
   import { AttributeModel } from '@hcengineering/view'
@@ -42,48 +39,72 @@
   export let items: Doc[]
   export let extraHeaders: AnyComponent[] | undefined
   export let flat = false
+  export let collapsed = false
+  export let lastCat = false
   export let props: Record<string, any> = {}
   export let level: number
   export let newObjectProps: (doc: Doc) => Record<string, any> | undefined
 
   const dispatch = createEventDispatcher()
 
-  const handleCreateItem = (event: MouseEvent) => {
-    if (createItemDialog === undefined) return
-    showPopup(createItemDialog, newObjectProps(items[0]), eventToHTMLElement(event))
-  }
+  // const handleCreateItem = (event: MouseEvent) => {
+  //   if (createItemDialog === undefined) return
+  //   showPopup(createItemDialog, newObjectProps(items[0]), eventToHTMLElement(event))
+  // }
+  const hue = Math.random()
+  $: lth = $deviceInfo.theme === 'theme-light'
+  $: headerBGColor = lth ? hsvToRGB(hue, 0.15, 0.9) : hsvToRGB(hue, 0.15, 0.3)
+  $: headerTextColor = lth ? hsvToRGB(hue, 0.5, 0.5) : hsvToRGB(hue, 0.6, 0.95)
 </script>
 
 {#if headerComponent || groupByKey === noCategory}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
-    class="flex-between categoryHeader row"
     style:z-index={10 - level}
+    style:--list-header-color={headerBGColor.rgb}
+    style:--list-header-rgb-color={`${headerBGColor.r}, ${headerBGColor.g}, ${headerBGColor.b}`}
+    class="flex-between categoryHeader row"
+    class:gradient={!lth}
     class:flat
+    class:collapsed
     class:subLevel={level !== 0}
+    class:lastCat
     on:click={() => dispatch('collapse')}
   >
-    <div class="flex-row-center gap-2 clear-mins caption-color">
-      <FixedColumn key={`list_groupBy_${groupByKey}`} justify={'left'}>
-        {#if groupByKey === noCategory}
-          <span class="text-base fs-bold overflow-label content-accent-color pointer-events-none">
-            <Label label={view.string.NoGrouping} />
-          </span>
-        {:else if headerComponent}
-          <svelte:component this={headerComponent.presenter} value={category} {space} kind={'list-header'} />
-        {/if}
-      </FixedColumn>
-      {#if extraHeaders}
+    <div class="flex-row-center clear-mins">
+      {#if level === 0}
+        <div class="chevron"><IconCollapseArrow size={'small'} /></div>
+      {/if}
+      <!-- <FixedColumn key={`list_groupBy_${groupByKey}`} justify={'left'}> -->
+      {#if groupByKey === noCategory}
+        <span style:color={headerTextColor.rgb} class="text-base fs-bold overflow-label pointer-events-none">
+          <Label label={view.string.NoGrouping} />
+        </span>
+      {:else if headerComponent}
+        <span class="clear-mins" style:color={headerTextColor.rgb}>
+          <svelte:component
+            this={headerComponent.presenter}
+            value={category}
+            {space}
+            size={'small'}
+            kind={'list-header'}
+            colorInherit={lth && level === 0}
+            accent={level === 0}
+          />
+        </span>
+      {/if}
+      <!-- </FixedColumn> -->
+      <!-- {#if extraHeaders}
         {#each extraHeaders as extra}
           <FixedColumn key={`list_groupBy_${groupByKey}_extra_${extra}`} justify={'left'}>
             <Component is={extra} props={{ ...props, value: category, docs: items }} />
           </FixedColumn>
         {/each}
-      {/if}
+      {/if} -->
       {#if limited < items.length}
-        <div class="antiSection-header__counter ml-4">
-          {limited}
-          <div class="text-xs mx-1">/</div>
+        <div class="antiSection-header__counter flex-row-center mx-2">
+          <span class="caption-color">{limited}</span>
+          <span class="text-xs mx-0-5">/</span>
           {items.length}
         </div>
         <ActionIcon
@@ -95,35 +116,86 @@
           }}
         />
       {:else}
-        <span class="antiSection-header__counter ml-4">{items.length}</span>
+        <span class="antiSection-header__counter ml-2">{items.length}</span>
       {/if}
     </div>
-    {#if createItemDialog !== undefined && createItemLabel !== undefined}
+    <!-- {#if createItemDialog !== undefined && createItemLabel !== undefined}
       <Button
         icon={IconAdd}
         kind={'transparent'}
         showTooltip={{ label: createItemLabel }}
         on:click={handleCreateItem}
       />
-    {/if}
+    {/if} -->
   </div>
 {/if}
 
 <style lang="scss">
   .categoryHeader {
+    position: relative;
     position: sticky;
     top: 0;
-    padding: 0 0.75rem 0 2.25rem;
-    height: 3rem;
-    min-height: 3rem;
+    padding: 0 2.5rem 0 0.75rem;
+    height: 2.75rem;
+    min-height: 2.75rem;
     min-width: 0;
-    background: var(--header-bg-color);
+    background: var(--theme-bg-color);
 
+    .chevron {
+      flex-shrink: 0;
+      min-width: 0;
+      margin-right: 0.75rem;
+      color: var(--theme-caption-color);
+      transform-origin: center;
+      transform: rotate(90deg);
+      transition: transform 0.15s ease-in-out;
+    }
+    &:not(.gradient)::before {
+      background: var(--list-header-color);
+    }
+    &.gradient::before {
+      background: linear-gradient(90deg, var(--list-header-color), rgba(var(--list-header-rgb-color), 0.3));
+    }
+    &::before {
+      box-sizing: border-box;
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: 1px solid var(--theme-list-border-color);
+      border-bottom-color: transparent;
+      border-radius: 0.25rem 0.25rem 0 0;
+      z-index: -1;
+    }
+
+    /* Global styles in components.scss and there is an influence from the Scroller component */
+    &.collapsed {
+      .chevron {
+        transform: rotate(0deg);
+      }
+      &::before {
+        border-bottom-color: var(--theme-list-border-color);
+        border-radius: 0.25rem;
+      }
+    }
     &.subLevel {
-      min-height: 2.25rem;
-      height: 2.25rem;
-      padding: 0 0.75rem 0 2.25rem;
+      top: 2.75rem;
+      padding: 0 2.5rem;
+      background: var(--theme-list-subheader-color);
+      border-left: 1px solid var(--theme-list-border-color);
+      border-right: 1px solid var(--theme-list-border-color);
+      border-bottom: 1px solid var(--theme-list-subheader-divider);
       // here shoul be top 3rem for sticky, but with ExpandCollapse it gives strange behavior
+
+      &::before {
+        content: none;
+      }
+      &.collapsed.lastCat {
+        border-bottom: 1px solid var(--theme-list-border-color);
+        border-radius: 0 0 0.25rem 0.25rem;
+      }
     }
 
     &.flat {
@@ -135,7 +207,7 @@
     }
   }
 
-  .row:not(:last-child) {
-    border-bottom: 1px solid var(--accent-bg-color);
-  }
+  // .row:not(:last-child) {
+  //   border-bottom: 1px solid var(--accent-bg-color);
+  // }
 </style>
diff --git a/plugins/view-resources/src/components/list/ListItem.svelte b/plugins/view-resources/src/components/list/ListItem.svelte
index 60b5564fa5..21e67524e6 100644
--- a/plugins/view-resources/src/components/list/ListItem.svelte
+++ b/plugins/view-resources/src/components/list/ListItem.svelte
@@ -13,25 +13,27 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import core, { AnyAttribute, Doc, getObjectValue, Ref } from '@hcengineering/core'
+  import core, { AnyAttribute, Doc, getObjectValue } from '@hcengineering/core'
   import notification from '@hcengineering/notification'
   import { getClient, updateAttribute } from '@hcengineering/presentation'
-  import { CheckBox, Component, deviceOptionsStore as deviceInfo, tooltip, IconCircles } from '@hcengineering/ui'
+  import { CheckBox, Component, deviceOptionsStore as deviceInfo, IconCircles, tooltip } from '@hcengineering/ui'
   import { AttributeModel } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import { FixedColumn } from '../..'
   import view from '../../plugin'
 
   export let docObject: Doc
-  export let index: number
   export let model: AttributeModel[]
   export let groupByKey: string | undefined
   export let checked: boolean
   export let selected: boolean
+  export let last: boolean = false
+  export let lastCat: boolean = false
   export let props: Record<string, any> = {}
-  export let elementByIndex: Map<number, HTMLDivElement>
-  export let indexById: Map<Ref<Doc>, number>
-  export let docByIndex: Map<number, Doc>
+
+  export function scroll () {
+    elem?.scrollIntoView({ behavior: 'auto', block: 'nearest' })
+  }
 
   let elem: HTMLDivElement
 
@@ -47,10 +49,6 @@
 
   $: compactMode = $deviceInfo.twoRows
 
-  $: elem && elementByIndex.set(index, elem)
-  $: indexById.set(docObject._id, index)
-  $: docByIndex.set(index, docObject)
-
   const client = getClient()
 
   function onChange (value: any, doc: Doc, key: string, attribute: AnyAttribute) {
@@ -91,9 +89,12 @@
   class="listGrid antiList__row row gap-2 flex-grow"
   class:checking={checked}
   class:mListGridSelected={selected}
+  class:last
+  class:lastCat
   draggable={true}
   on:contextmenu
   on:focus
+  on:mouseenter
   on:mouseover
   on:dragover
   on:dragenter
@@ -102,13 +103,18 @@
   on:dragstart
 >
   <div class="draggable-container">
-    <div class="draggable-mark"><IconCircles /></div>
+    <div class="draggable-mark">
+      <IconCircles />
+      <div class="space" />
+      <IconCircles />
+    </div>
   </div>
-  <div class="flex-center relative" use:tooltip={{ label: view.string.Select, direction: 'bottom' }}>
+  <div class="flex-center relative mr-1" use:tooltip={{ label: view.string.Select, direction: 'bottom' }}>
     <div class="antiList-cells__notifyCell">
       <div class="antiList-cells__checkCell">
         <CheckBox
           {checked}
+          size={'medium'}
           on:value={(event) => {
             dispatch('check', { docs: [docObject], value: event.detail })
           }}
@@ -121,13 +127,32 @@
       />
     </div>
   </div>
-  {#each model as attributeModel, i}
+  {#each model.filter((m) => !m.props?.listProps?.optional) as attributeModel, i}
     {@const listProps = attributeModel.props?.listProps}
     {#if attributeModel.props?.type === 'grow'}
       <svelte:component this={attributeModel.presenter} />
-    {:else if (!groupByKey || listProps?.excludeByKey !== groupByKey) && !(listProps?.optional && compactMode)}
+
+      {#if !compactMode}
+        <div class="optional-bar">
+          {#each model.filter((m) => m.props?.listProps?.optional) as attrModel, j}
+            {@const lp = attrModel.props?.listProps}
+            {@const v = getObjectValue(attrModel.key, docObject)}
+            {#if lp?.excludeByKey !== groupByKey && v !== undefined}
+              <svelte:component
+                this={attrModel.presenter}
+                value={getObjectValue(attrModel.key, docObject) ?? ''}
+                onChange={getOnChange(docObject, attrModel)}
+                kind={'list'}
+                compression
+                {...joinProps(attrModel, docObject, props)}
+              />
+            {/if}
+          {/each}
+        </div>
+      {/if}
+    {:else if (!groupByKey || listProps?.excludeByKey !== groupByKey) && !listProps?.optional}
       {#if listProps?.fixed}
-        <FixedColumn key={`list_item_${attributeModel.key}`} justify={listProps.fixed}>
+        <FixedColumn key={`list_item_${attributeModel.props?.listProps.key}`} justify={listProps.fixed}>
           <svelte:component
             this={attributeModel.presenter}
             value={getObjectValue(attributeModel.key, docObject) ?? ''}
@@ -161,10 +186,10 @@
         <IconCircles />
       </div>
       <div class="scroll-box gap-2">
-        {#each model as attributeModel}
+        {#each model.filter((m) => m.props?.listProps?.optional) as attributeModel}
           {@const listProps = attributeModel.props?.listProps}
           {@const value = getObjectValue(attributeModel.key, docObject)}
-          {#if listProps?.optional && listProps?.excludeByKey !== groupByKey && value !== undefined}
+          {#if listProps?.excludeByKey !== groupByKey && value !== undefined}
             <svelte:component
               this={attributeModel.presenter}
               value={getObjectValue(attributeModel.key, docObject) ?? ''}
@@ -180,54 +205,70 @@
 </div>
 
 <style lang="scss">
-  .row:not(:last-child) {
-    border-bottom: 1px solid var(--accent-bg-color);
+  .row {
+    border-left: 1px solid var(--theme-list-border-color);
+    border-right: 1px solid var(--theme-list-border-color);
+  }
+  .row:not(.lastCat, .last) {
+    border-bottom: 1px solid var(--theme-divider-color);
+  }
+  .row.last {
+    border-bottom: 1px solid var(--theme-list-subheader-divider);
+  }
+  .row.lastCat {
+    border-radius: 0 0 0.25rem 0.25rem;
+    border-bottom: 1px solid var(--theme-list-border-color);
   }
 
+  /* Global styles in components.scss */
   .listGrid {
     position: relative;
     display: flex;
     align-items: center;
-    padding: 0 0.75rem 0 0.875rem;
+    padding: 0 2.5rem 0 0.25rem;
     width: 100%;
     height: 2.75rem;
     min-height: 2.75rem;
     color: var(--caption-color);
-
-    &.checking {
-      background-color: var(--highlight-select);
-      border-bottom-color: var(--highlight-select);
-
-      &:hover {
-        background-color: var(--highlight-select-hover);
-        border-bottom-color: var(--highlight-select-hover);
-      }
-    }
+    background-color: var(--theme-list-row-color);
 
     &.mListGridSelected {
       background-color: var(--highlight-hover);
     }
 
+    &.checking {
+      background-color: var(--highlight-select);
+      // border-bottom-color: var(--highlight-select);
+
+      &:hover {
+        background-color: var(--highlight-select-hover);
+        // border-bottom-color: var(--highlight-select-hover);
+      }
+    }
+
     .draggable-container {
       position: absolute;
       left: 0;
       display: flex;
       align-items: center;
       height: 100%;
-      width: 1.5rem;
+      width: 1rem;
       cursor: grabbing;
 
       .draggable-mark {
-        opacity: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-left: 0.125rem;
         width: 0.375rem;
-        height: 1rem;
-        margin-left: 0.75rem;
-        transition: opacity 0.1s;
+        height: 100%;
+        opacity: 0;
       }
     }
     &:hover {
       .draggable-mark {
-        opacity: 0.4;
+        opacity: 0.1;
       }
     }
 
diff --git a/plugins/view-resources/src/components/list/ListView.svelte b/plugins/view-resources/src/components/list/ListView.svelte
index bbc72eb0b3..a4fbba5cea 100644
--- a/plugins/view-resources/src/components/list/ListView.svelte
+++ b/plugins/view-resources/src/components/list/ListView.svelte
@@ -1,10 +1,17 @@
 <script lang="ts">
   import { Class, Doc, DocumentQuery, FindOptions, Ref, Space } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
-  import { AnyComponent, issueSP, Scroller } from '@hcengineering/ui'
+  import { AnyComponent, Scroller } from '@hcengineering/ui'
   import { BuildModelKey, Viewlet, ViewOptions } from '@hcengineering/view'
   import { onMount } from 'svelte'
-  import { ActionContext, ListSelectionProvider, LoadingProps, SelectDirection, selectionStore } from '../..'
+  import {
+    ActionContext,
+    ListSelectionProvider,
+    LoadingProps,
+    SelectDirection,
+    focusStore,
+    selectionStore
+  } from '../..'
 
   import List from './List.svelte'
 
@@ -40,8 +47,13 @@
   }}
 />
 
-<div class="w-full h-full clear-mins">
-  <Scroller fade={issueSP}>
+<div class="w-full h-full py-4 clear-mins">
+  <Scroller
+    fade={{ multipler: { top: 2.75 * viewOptions.groupBy.length, bottom: 0 } }}
+    padding={'0 1rem'}
+    noFade
+    checkForHeaders
+  >
     <List
       bind:this={list}
       {_class}
@@ -56,6 +68,7 @@
       {props}
       viewOptionsConfig={viewlet.viewOptions?.other}
       selectedObjectIds={$selectionStore ?? []}
+      selection={listProvider.current($focusStore)}
       on:row-focus={(event) => {
         listProvider.updateFocus(event.detail ?? undefined)
       }}
diff --git a/plugins/view-resources/src/components/status/StatusPresenter.svelte b/plugins/view-resources/src/components/status/StatusPresenter.svelte
index 0ffc97f44a..5f2a0bf528 100644
--- a/plugins/view-resources/src/components/status/StatusPresenter.svelte
+++ b/plugins/view-resources/src/components/status/StatusPresenter.svelte
@@ -30,7 +30,7 @@
     {:else if icon !== undefined && typeof icon !== 'string'}
       <svelte:component this={icon} {value} {size} />
     {/if}
-    <span class="overflow-label" class:ml-2={icon !== undefined}>
+    <span class="overflow-label" class:ml-1-5={icon !== undefined}>
       {value.name}
     </span>
   </div>
diff --git a/plugins/view-resources/src/filter.ts b/plugins/view-resources/src/filter.ts
index adb51e68d0..1fd1462a9c 100644
--- a/plugins/view-resources/src/filter.ts
+++ b/plugins/view-resources/src/filter.ts
@@ -11,7 +11,7 @@ import core, {
 } from '@hcengineering/core'
 import { getResource } from '@hcengineering/platform'
 import { LiveQuery, createQuery, getClient } from '@hcengineering/presentation'
-import { AnyComponent, getCurrentLocation, locationToUrl } from '@hcengineering/ui'
+import { AnyComponent, locationToUrl, getCurrentResolvedLocation } from '@hcengineering/ui'
 import { Filter, FilterMode, KeyFilter } from '@hcengineering/view'
 import { get, writable } from 'svelte/store'
 import view from './plugin'
@@ -198,7 +198,7 @@ export function createFilter (_class: Ref<Class<Doc>>, key: string, value: any[]
 }
 
 export function getFilterKey (_class: Ref<Class<Doc>>): string {
-  const loc = getCurrentLocation()
+  const loc = getCurrentResolvedLocation()
   loc.fragment = undefined
   loc.query = undefined
   return 'filter' + locationToUrl(loc) + _class
diff --git a/plugins/view-resources/src/index.ts b/plugins/view-resources/src/index.ts
index 764ac0d1c3..b0f0715b6a 100644
--- a/plugins/view-resources/src/index.ts
+++ b/plugins/view-resources/src/index.ts
@@ -45,6 +45,7 @@ import IntlStringPresenter from './components/IntlStringPresenter.svelte'
 import GithubPresenter from './components/linkPresenters/GithubPresenter.svelte'
 import YoutubePresenter from './components/linkPresenters/YoutubePresenter.svelte'
 import GrowPresenter from './components/list/GrowPresenter.svelte'
+import DividerPresenter from './components/list/DividerPresenter.svelte'
 import ListView from './components/list/ListView.svelte'
 import SortableList from './components/list/SortableList.svelte'
 import SortableListItem from './components/list/SortableListItem.svelte'
@@ -197,6 +198,7 @@ export default async (): Promise<Resources> => ({
     HTMLEditor,
     ListView,
     GrowPresenter,
+    DividerPresenter,
     IndexedDocumentPreview,
     SpaceRefPresenter,
     EnumArrayEditor,
diff --git a/plugins/view-resources/src/utils.ts b/plugins/view-resources/src/utils.ts
index e04ac2ba3d..4851f3a27d 100644
--- a/plugins/view-resources/src/utils.ts
+++ b/plugins/view-resources/src/utils.ts
@@ -45,7 +45,7 @@ import { AttributeCategory, createQuery, getAttributePresenterClass, KeyedAttrib
 import {
   AnyComponent,
   ErrorPresenter,
-  getCurrentLocation,
+  getCurrentResolvedLocation,
   getPanelURI,
   getPlatformColorForText,
   Location,
@@ -482,7 +482,7 @@ export function categorizeFields (
 }
 
 export function makeViewletKey (loc?: Location): string {
-  loc = loc != null ? { path: loc.path } : getCurrentLocation()
+  loc = loc != null ? { path: loc.path } : getCurrentResolvedLocation()
   loc.fragment = undefined
   loc.query = undefined
   return 'viewlet' + locationToUrl(loc)
@@ -520,6 +520,35 @@ export function getActiveViewletId (): Ref<Viewlet> | null {
   return localStorage.getItem(key) as Ref<Viewlet> | null
 }
 
+/**
+ * Updates the active viewlet, if one was found.
+ * Otherwise sets the default viewlet.
+ *
+ * @export
+ * @param {readonly Viewlet[]} viewlets
+ * @param {(Ref<Viewlet> | null | undefined)} activeViewletId
+ * @returns {(Viewlet | undefined)}
+ */
+export function updateActiveViewlet (
+  viewlets: readonly Viewlet[],
+  activeViewletId: Ref<Viewlet> | null | undefined
+): Viewlet | undefined {
+  if (viewlets.length === 0) {
+    return
+  }
+
+  let viewlet: Viewlet | undefined
+
+  if (activeViewletId !== null && activeViewletId !== undefined) {
+    viewlet = viewlets.find((viewlet) => viewlet._id === activeViewletId)
+  }
+  viewlet ??= viewlets[0]
+
+  setActiveViewletId(viewlet._id)
+
+  return viewlet
+}
+
 export type FixedWidthStore = Record<string, number>
 
 export const fixedWidthStore = writable<FixedWidthStore>({})
@@ -861,7 +890,7 @@ export async function getObjectLinkFragment (
       return res
     }
   }
-  const loc = getCurrentLocation()
+  const loc = getCurrentResolvedLocation()
   loc.fragment = getPanelURI(component, object._id, Hierarchy.mixinOrClass(object), 'content')
   return loc
 }
diff --git a/plugins/view-resources/src/viewOptions.ts b/plugins/view-resources/src/viewOptions.ts
index 8043327b9b..9c59363b2b 100644
--- a/plugins/view-resources/src/viewOptions.ts
+++ b/plugins/view-resources/src/viewOptions.ts
@@ -11,7 +11,7 @@ import core, {
 } from '@hcengineering/core'
 import { getResource } from '@hcengineering/platform'
 import { LiveQuery, createQuery, getAttributePresenterClass, getClient } from '@hcengineering/presentation'
-import { getCurrentLocation, locationToUrl } from '@hcengineering/ui'
+import { locationToUrl, getCurrentResolvedLocation } from '@hcengineering/ui'
 import {
   DropdownViewOption,
   ToggleViewOption,
@@ -42,7 +42,7 @@ export function isDropdownType (viewOption: ViewOptionModel): viewOption is Drop
 
 export function makeViewOptionsKey (viewlet: Ref<Viewlet>, variant?: string): string {
   const prefix = viewlet + (variant !== undefined ? `-${variant}` : '')
-  const loc = getCurrentLocation()
+  const loc = getCurrentResolvedLocation()
   loc.fragment = undefined
   loc.query = undefined
   return `viewOptions:${prefix}:${locationToUrl(loc)}`
diff --git a/plugins/view/src/index.ts b/plugins/view/src/index.ts
index 704f441bf2..baf6daefb2 100644
--- a/plugins/view/src/index.ts
+++ b/plugins/view/src/index.ts
@@ -662,7 +662,8 @@ const view = plugin(viewId, {
     SpacePresenter: '' as AnyComponent,
     BooleanTruePresenter: '' as AnyComponent,
     ValueSelector: '' as AnyComponent,
-    GrowPresenter: '' as AnyComponent
+    GrowPresenter: '' as AnyComponent,
+    DividerPresenter: '' as AnyComponent
   },
   string: {
     CustomizeView: '' as IntlString,
diff --git a/plugins/workbench-resources/src/components/AccountPopup.svelte b/plugins/workbench-resources/src/components/AccountPopup.svelte
index 627b5bd123..96bfe95c2e 100644
--- a/plugins/workbench-resources/src/components/AccountPopup.svelte
+++ b/plugins/workbench-resources/src/components/AccountPopup.svelte
@@ -18,22 +18,26 @@
   import login, { loginId } from '@hcengineering/login'
   import { setMetadata } from '@hcengineering/platform'
   import presentation, { createQuery } from '@hcengineering/presentation'
-  import setting, { settingId, SettingsCategory } from '@hcengineering/setting'
-  import { Action, Component, fetchMetadataLocalStorage } from '@hcengineering/ui'
+  import setting, { SettingsCategory, settingId } from '@hcengineering/setting'
   import {
+    Action,
+    Component,
+    Menu,
     closePanel,
     closePopup,
+    deviceOptionsStore as deviceInfo,
+    fetchMetadataLocalStorage,
     getCurrentLocation,
-    navigate,
-    setMetadataLocalStorage,
-    showPopup,
-    Menu,
+    getCurrentResolvedLocation,
     locationToUrl,
-    deviceOptionsStore as deviceInfo
+    navigate,
+    resolvedLocationStore,
+    setMetadataLocalStorage,
+    showPopup
   } from '@hcengineering/ui'
   import view from '@hcengineering/view'
-  import HelpAndSupport from './HelpAndSupport.svelte'
   import workbench from '../plugin'
+  import HelpAndSupport from './HelpAndSupport.svelte'
   import SelectWorkspaceMenu from './SelectWorkspaceMenu.svelte'
 
   let items: SettingsCategory[] = []
@@ -66,7 +70,7 @@
   function selectCategory (sp: SettingsCategory): void {
     closePopup()
     closePanel()
-    const loc = getCurrentLocation()
+    const loc = getCurrentResolvedLocation()
     loc.path[2] = settingId
     loc.path[3] = sp.name
     loc.path.length = 4
@@ -107,7 +111,7 @@
   }
 
   function getURLCategory (sp: SettingsCategory): string {
-    const loc = getCurrentLocation()
+    const loc = getCurrentResolvedLocation()
     loc.path[2] = settingId
     loc.path[3] = sp.name
     loc.path.length = 4
@@ -175,7 +179,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <svelte:component this={Menu} bind:this={menu} {actions} {addClass} on:close>
   <svelte:fragment slot="header">
-    <div class="p-1 ml-2 overflow-label fs-bold caption-color">{getCurrentLocation().path[1]}</div>
+    <div class="p-1 ml-2 overflow-label fs-bold caption-color">{$resolvedLocationStore.path[1]}</div>
     <div
       class="ap-menuHeader mb-2"
       on:mousemove={() => {
diff --git a/plugins/workbench-resources/src/components/Header.svelte b/plugins/workbench-resources/src/components/Header.svelte
index 685bfcc20d..f8c35d0261 100644
--- a/plugins/workbench-resources/src/components/Header.svelte
+++ b/plugins/workbench-resources/src/components/Header.svelte
@@ -15,11 +15,11 @@
 <script lang="ts">
   import type { Class, Doc, Ref, Space } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
-  import { AnyComponent, Icon } from '@hcengineering/ui'
+  import { AnyComponent } from '@hcengineering/ui'
   import view from '@hcengineering/view'
-  import { DocNavLink, FilterButton } from '@hcengineering/view-resources'
+  import { DocNavLink } from '@hcengineering/view-resources'
   import plugin from '../plugin'
-  import { classIcon } from '../utils'
+  // import { classIcon } from '../utils'
 
   export let space: Space
   export let _class: Ref<Class<Doc>> | undefined = undefined
@@ -36,7 +36,7 @@
     return editorMixin.editor
   }
 
-  const icon = classIcon(client, space._class)
+  // const icon = classIcon(client, space._class)
   const editor = getEditor(space._class) ?? plugin.component.SpacePanel
 </script>
 
@@ -45,11 +45,10 @@
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <DocNavLink object={space} component={editor}>
       <div class="ac-header__wrap-title">
-        {#if icon}<div class="ac-header__icon"><Icon {icon} size={'small'} /></div>{/if}
+        <!-- {#if icon}<div class="ac-header__icon"><Icon {icon} size={'small'} /></div>{/if} -->
         <span class="ac-header__title">{space.name}</span>
       </div>
     </DocNavLink>
-    {#if _class}<div class="ml-4"><FilterButton {_class} /></div>{/if}
   </div>
   {#if description}
     <span class="ac-header__description">
diff --git a/plugins/workbench-resources/src/components/HelpAndSupport.svelte b/plugins/workbench-resources/src/components/HelpAndSupport.svelte
index 7228d4adde..3d4a779656 100644
--- a/plugins/workbench-resources/src/components/HelpAndSupport.svelte
+++ b/plugins/workbench-resources/src/components/HelpAndSupport.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
+  import { getClient } from '@hcengineering/presentation'
+  import setting, { settingId } from '@hcengineering/setting'
   import {
     Button,
     closePopup,
-    getCurrentLocation,
+    getCurrentResolvedLocation,
     Icon,
     IconArrowLeft,
     Label,
@@ -11,13 +13,11 @@
     Scroller,
     topSP
   } from '@hcengineering/ui'
-  import setting, { settingId } from '@hcengineering/setting'
   import view, { Action, ActionCategory } from '@hcengineering/view'
-  import { getClient } from '@hcengineering/presentation'
-  import RightArrowIcon from './icons/Collapsed.svelte'
-  import KeyboardIcon from './icons/Keyboard.svelte'
-  import DocumentationIcon from './icons/Documentation.svelte'
   import workbench from '../plugin'
+  import RightArrowIcon from './icons/Collapsed.svelte'
+  import DocumentationIcon from './icons/Documentation.svelte'
+  import KeyboardIcon from './icons/Keyboard.svelte'
 
   let shortcuts = false
   let actions: Action[] = []
@@ -27,7 +27,7 @@
 
   function navigateToSettings () {
     closePopup()
-    const loc = getCurrentLocation()
+    const loc = getCurrentResolvedLocation()
     loc.path[2] = loc.path[3] = settingId
     loc.path.length = 4
     navigate(loc)
diff --git a/plugins/workbench-resources/src/components/NavHeader.svelte b/plugins/workbench-resources/src/components/NavHeader.svelte
index 8989c12e6b..eea0eb02d5 100644
--- a/plugins/workbench-resources/src/components/NavHeader.svelte
+++ b/plugins/workbench-resources/src/components/NavHeader.svelte
@@ -14,11 +14,9 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@hcengineering/platform'
-  import { getCurrentLocation, Label } from '@hcengineering/ui'
+  import { Label, resolvedLocationStore } from '@hcengineering/ui'
 
   export let label: IntlString
-
-  const loc = getCurrentLocation()
 </script>
 
 <div class="antiNav-header">
@@ -26,6 +24,6 @@
     <Label {label} />
   </span>
   <span class="bottom overflow-label">
-    {loc.path[1]}
+    {$resolvedLocationStore.path[1]}
   </span>
 </div>
diff --git a/plugins/workbench-resources/src/components/SpaceBrowser.svelte b/plugins/workbench-resources/src/components/SpaceBrowser.svelte
index 155c777579..6f05285119 100644
--- a/plugins/workbench-resources/src/components/SpaceBrowser.svelte
+++ b/plugins/workbench-resources/src/components/SpaceBrowser.svelte
@@ -23,21 +23,23 @@
     SortingQuery,
     Space
   } from '@hcengineering/core'
+  import { IntlString } from '@hcengineering/platform'
+  import presentation, { createQuery, getClient } from '@hcengineering/presentation'
   import {
     AnyComponent,
     Button,
-    getCurrentLocation,
+    getCurrentResolvedLocation,
     Icon,
     Label,
     navigate,
     Scroller,
     SearchEdit,
-    showPopup
+    showPopup,
+    IconMoreH,
+    ActionIcon
   } from '@hcengineering/ui'
-  import presentation, { createQuery, getClient } from '@hcengineering/presentation'
-  import plugin from '../plugin'
   import { FilterBar, FilterButton, SpacePresenter } from '@hcengineering/view-resources'
-  import { IntlString } from '@hcengineering/platform'
+  import plugin from '../plugin'
   import { classIcon } from '../utils'
 
   export let _class: Ref<Class<Space>>
@@ -106,7 +108,7 @@
   }
 
   async function view (space: Space): Promise<void> {
-    const loc = getCurrentLocation()
+    const loc = getCurrentResolvedLocation()
     loc.path[3] = space._id
     navigate(loc)
   }
@@ -118,40 +120,50 @@
       <span class="ac-header__title"><Label {label} /></span>
     </div>
     {#if createItemDialog}
-      <Button label={createItemLabel} size={'small'} on:click={(ev) => showCreateDialog(ev)} />
+      <div class="mb-1 clear-mins">
+        <Button label={createItemLabel} kind={'primary'} size={'medium'} on:click={(ev) => showCreateDialog(ev)} />
+      </div>
     {/if}
   </div>
-  <div class="ml-8 mr-8 mt-4 mb-4">
-    <SearchEdit
-      bind:value={search}
-      on:change={(ev) => {
-        updateSearchQuery(search)
-        update(sort, resultQuery)
-      }}
-    />
+  <div class="ac-header full divide search-start">
+    <div class="ac-header-full small-gap">
+      <SearchEdit
+        bind:value={search}
+        on:change={() => {
+          updateSearchQuery(search)
+          update(sort, resultQuery)
+        }}
+      />
+      <ActionIcon icon={IconMoreH} size={'small'} />
+      <div class="buttons-divider" />
+      {#if withFilterButton}
+        <FilterButton {_class} />
+      {/if}
+    </div>
   </div>
-{/if}
-{#if withFilterButton}
-  <div class="ml-10 mt-4 mb-4">
-    <FilterButton {_class} />
+{:else if withFilterButton}
+  <div class="ac-header full divide">
+    <div class="ac-header-full small-gap">
+      <FilterButton {_class} />
+    </div>
   </div>
 {/if}
 <FilterBar {_class} query={searchQuery} on:change={(e) => (resultQuery = e.detail)} />
 <Scroller padding={'2.5rem'}>
-  <div class="flex-col">
+  <div class="spaces-container">
     {#each spaces as space (space._id)}
       {@const icon = classIcon(client, space._class)}
       {@const joined = space.members.includes(me)}
-      <div class="divider" />
-      <div class="item flex-between">
-        <div>
-          <div class="fs-title flex">
+      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+      <div class="item flex-between" tabindex="0">
+        <div class="flex-col clear-mins">
+          <div class="fs-title flex-row-center">
             {#if icon}
-              <Icon {icon} size={'small'} />
+              <div class="icon"><Icon {icon} size={'small'} /></div>
             {/if}
             <SpacePresenter value={space} />
           </div>
-          <div>
+          <div class="flex-row-center">
             {#if joined}
               <Label label={plugin.string.Joined} />
               &#183
@@ -161,48 +173,58 @@
             {space.description}
           </div>
         </div>
-        <div class="tools flex">
+        <div class="tools flex-row-center gap-2">
           {#if joined}
             <Button size={'x-large'} label={plugin.string.Leave} on:click={() => leave(space)} />
           {:else}
-            <div class="mr-2">
-              <Button size={'x-large'} label={plugin.string.View} on:click={() => view(space)} />
-            </div>
+            <Button size={'x-large'} label={plugin.string.View} on:click={() => view(space)} />
             <Button size={'x-large'} kind={'primary'} label={plugin.string.Join} on:click={() => join(space)} />
           {/if}
         </div>
       </div>
     {/each}
-    {#if createItemDialog}
-      <div class="flex-center mt-10">
-        <Button size={'x-large'} kind={'primary'} label={createItemLabel} on:click={(ev) => showCreateDialog(ev)} />
-      </div>
-    {/if}
   </div>
+  {#if createItemDialog}
+    <div class="flex-center mt-10">
+      <Button size={'x-large'} kind={'primary'} label={createItemLabel} on:click={(ev) => showCreateDialog(ev)} />
+    </div>
+  {/if}
 </Scroller>
 
 <style lang="scss">
-  .divider {
-    background-color: var(--divider-color);
-    height: 1px;
-  }
+  .spaces-container {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--theme-list-border-color);
+    border-radius: 0.25rem;
 
-  .item {
-    color: var(--caption-color);
-    cursor: pointer;
-    padding: 1rem 0.75rem;
+    .item {
+      padding: 1rem 0.75rem;
+      color: var(--theme-caption-color);
+      cursor: pointer;
 
-    &:hover,
-    &:focus {
-      background-color: var(--popup-bg-hover);
-
-      .tools {
-        visibility: visible;
+      .icon {
+        margin-right: 0.375rem;
+        color: var(--theme-trans-color);
+      }
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--theme-divider-color);
+      }
+      &:hover,
+      &:focus {
+        background-color: var(--highlight-hover);
+
+        .icon {
+          color: var(--theme-caption-color);
+        }
+        .tools {
+          visibility: visible;
+        }
+      }
+      .tools {
+        position: relative;
+        visibility: hidden;
       }
-    }
-    .tools {
-      position: relative;
-      visibility: hidden;
     }
   }
 </style>
diff --git a/plugins/workbench-resources/src/components/SpaceHeader.svelte b/plugins/workbench-resources/src/components/SpaceHeader.svelte
index 9e0f8821a2..6f0a16e2ee 100644
--- a/plugins/workbench-resources/src/components/SpaceHeader.svelte
+++ b/plugins/workbench-resources/src/components/SpaceHeader.svelte
@@ -18,21 +18,24 @@
   import { IntlString } from '@hcengineering/platform'
   import presentation, { createQuery } from '@hcengineering/presentation'
   import {
+    ActionIcon,
     AnyComponent,
     Button,
     IconAdd,
+    IconMoreH,
     SearchEdit,
     TabList,
-    deviceOptionsStore as deviceInfo,
-    location,
+    resolvedLocationStore,
     showPopup
   } from '@hcengineering/ui'
   import { ViewOptions, Viewlet } from '@hcengineering/view'
   import {
+    FilterButton,
     ViewletSettingButton,
     activeViewlet,
     makeViewletKey,
-    setActiveViewletId
+    setActiveViewletId,
+    updateActiveViewlet
   } from '@hcengineering/view-resources'
   import { createEventDispatcher, onDestroy } from 'svelte'
   import Header from './Header.svelte'
@@ -60,7 +63,7 @@
     showPopup(createItemDialog as AnyComponent, { space: spaceId }, 'top')
   }
 
-  $: update(viewlets, active)
+  $: viewlet = updateActiveViewlet(viewlets, active)
 
   $: if (prevSpaceId !== spaceId) {
     search = ''
@@ -70,18 +73,13 @@
   let key = makeViewletKey()
 
   onDestroy(
-    location.subscribe((loc) => {
+    resolvedLocationStore.subscribe((loc) => {
       key = makeViewletKey(loc)
     })
   )
 
   $: active = $activeViewlet[key]
 
-  async function update (viewlets: WithLookup<Viewlet>[], active: Ref<Viewlet> | null): Promise<void> {
-    viewlet = viewlets.find((viewlet) => viewlet._id === active) ?? viewlets[0]
-    setActiveViewletId(viewlet._id)
-  }
-
   $: viewslist = viewlets.map((views) => {
     return {
       id: views._id,
@@ -90,37 +88,19 @@
     }
   })
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  {#if space}
-    <div class:ac-header-full={!twoRows} class:flex-stretch={twoRows}>
-      <Header {space} {_class} />
-      <SearchEdit
-        bind:value={search}
-        on:change={() => {
-          dispatch('search', search)
-        }}
-      />
-    </div>
-    <div class="ac-header-full" class:secondRow={twoRows}>
-      {#if createItemDialog}
-        <Button
-          icon={IconAdd}
-          label={createItemLabel}
-          kind={'primary'}
-          size={'small'}
-          on:click={(ev) => showCreateDialog(ev)}
-        />
-      {/if}
+{#if space}
+  <div class="ac-header full divide caption-height">
+    <Header {space} {_class} />
+
+    <div class="ac-header-full medium-gap mb-1">
       {#if viewlets.length > 1}
         <TabList
           items={viewslist}
           multiselect={false}
           selected={viewlet?._id}
-          kind={'secondary'}
-          size={'small'}
           on:select={(result) => {
             if (result.detail !== undefined) {
               viewlet = viewlets.find((vl) => vl._id === result.detail.id)
@@ -129,7 +109,23 @@
           }}
         />
       {/if}
-      <ViewletSettingButton bind:viewOptions {viewlet} />
+      {#if createItemDialog}
+        <Button icon={IconAdd} label={createItemLabel} kind={'primary'} on:click={(ev) => showCreateDialog(ev)} />
+      {/if}
     </div>
-  {/if}
-</div>
+  </div>
+  <div class="ac-header full divide search-start">
+    <div class="ac-header-full small-gap">
+      <SearchEdit bind:value={search} on:change={() => dispatch('search', search)} />
+      <ActionIcon icon={IconMoreH} size={'small'} />
+      <div class="buttons-divider" />
+      <FilterButton {_class} />
+    </div>
+    <div class="ac-header-full medium-gap">
+      <ViewletSettingButton bind:viewOptions {viewlet} />
+      <ActionIcon icon={IconMoreH} size={'small'} />
+    </div>
+  </div>
+{:else}
+  <div class="ac-header full divide caption-height" />
+{/if}
diff --git a/plugins/workbench-resources/src/components/SpaceView.svelte b/plugins/workbench-resources/src/components/SpaceView.svelte
index 21e406635a..ab662e54ca 100644
--- a/plugins/workbench-resources/src/components/SpaceView.svelte
+++ b/plugins/workbench-resources/src/components/SpaceView.svelte
@@ -16,13 +16,13 @@
   import core, { Class, Doc, Ref, Space, WithLookup } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
-  import { AnyComponent, Component, location } from '@hcengineering/ui'
+  import { AnyComponent, Component, resolvedLocationStore } from '@hcengineering/ui'
   import view, { Viewlet } from '@hcengineering/view'
   import {
     activeViewlet,
     getViewOptions,
     makeViewletKey,
-    setActiveViewletId,
+    updateActiveViewlet,
     viewOptionStore
   } from '@hcengineering/view-resources'
   import type { ViewConfiguration } from '@hcengineering/workbench'
@@ -47,7 +47,7 @@
 
   let key = makeViewletKey()
   onDestroy(
-    location.subscribe((loc) => {
+    resolvedLocationStore.subscribe((loc) => {
       key = makeViewletKey(loc)
     })
   )
@@ -82,8 +82,7 @@
         }
       )
       if (header !== undefined) {
-        viewlet = viewlets.find((viewlet) => viewlet._id === active) ?? viewlets[0]
-        setActiveViewletId(viewlet._id)
+        viewlet = updateActiveViewlet(viewlets, active)
       }
       _class = attachTo
     }
diff --git a/plugins/workbench-resources/src/components/SpecialView.svelte b/plugins/workbench-resources/src/components/SpecialView.svelte
index 91311423a8..7cdf048e15 100644
--- a/plugins/workbench-resources/src/components/SpecialView.svelte
+++ b/plugins/workbench-resources/src/components/SpecialView.svelte
@@ -17,17 +17,17 @@
   import { Asset, IntlString } from '@hcengineering/platform'
   import { createQuery } from '@hcengineering/presentation'
   import {
+    ActionIcon,
     AnyComponent,
     Button,
     Component,
-    Icon,
     IconAdd,
+    IconMoreH,
     Label,
     Loading,
     SearchEdit,
     TabList,
-    deviceOptionsStore as deviceInfo,
-    location,
+    resolvedLocationStore,
     showPopup
   } from '@hcengineering/ui'
   import view, { Viewlet, ViewletDescriptor, ViewletPreference } from '@hcengineering/view'
@@ -83,7 +83,7 @@
   let key = makeViewletKey()
 
   onDestroy(
-    location.subscribe((loc) => {
+    resolvedLocationStore.subscribe((loc) => {
       key = makeViewletKey(loc)
     })
   )
@@ -127,7 +127,7 @@
     showPopup(createComponent, createComponentProps, 'top')
   }
 
-  $: twoRows = $deviceInfo.twoRows
+  // $: twoRows = $deviceInfo.twoRows
 
   $: viewOptions = getViewOptions(viewlet, $viewOptionStore)
 
@@ -140,24 +140,17 @@
   })
 </script>
 
-<div class="ac-header withSettings" class:full={!twoRows} class:mini={twoRows}>
-  <div class:ac-header-full={!twoRows} class:flex-between={twoRows}>
-    <div class="ac-header__wrap-title mr-3">
-      <span class="ac-header__icon"><Icon {icon} size={'small'} /></span>
-      <span class="ac-header__title"><Label {label} /></span>
-      <div class="ml-4"><FilterButton {_class} /></div>
-    </div>
-
-    <SearchEdit bind:value={search} />
+<div class="ac-header full divide caption-height">
+  <div class="ac-header__wrap-title mr-3">
+    <span class="ac-header__title"><Label {label} /></span>
   </div>
-  <div class="ac-header-full" class:secondRow={twoRows}>
+
+  <div class="ac-header-full medium-gap mb-1">
     {#if viewlets.length > 1}
       <TabList
         items={viewslist}
         multiselect={false}
         selected={viewlet?._id}
-        kind={'secondary'}
-        size={'small'}
         on:select={(result) => {
           if (result.detail !== undefined) {
             if (viewlet?._id === result.detail.id) {
@@ -171,18 +164,27 @@
         }}
       />
     {/if}
-
     {#if createLabel && createComponent}
       <Button
-        label={createLabel}
         icon={IconAdd}
+        label={createLabel}
         kind={'primary'}
-        size={'small'}
         disabled={isCreationDisabled}
         on:click={() => showCreateDialog()}
       />
     {/if}
+  </div>
+</div>
+<div class="ac-header full divide search-start">
+  <div class="ac-header-full small-gap">
+    <SearchEdit bind:value={search} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
+    <div class="buttons-divider" />
+    <FilterButton {_class} />
+  </div>
+  <div class="ac-header-full medium-gap">
     <ViewletSettingButton bind:viewOptions {viewlet} />
+    <ActionIcon icon={IconMoreH} size={'small'} />
   </div>
 </div>
 
diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte
index 0058a7f0a4..20080503eb 100644
--- a/plugins/workbench-resources/src/components/Workbench.svelte
+++ b/plugins/workbench-resources/src/components/Workbench.svelte
@@ -46,6 +46,7 @@
     openPanel,
     popupstore,
     resizeObserver,
+    setResolvedLocation,
     showPopup
   } from '@hcengineering/ui'
   import view from '@hcengineering/view'
@@ -266,14 +267,11 @@
   async function syncLoc (loc: Location): Promise<void> {
     const originalLoc = JSON.stringify(loc)
     // resolve short links
-    const resolvedLocation = await resolveShortLink(loc)
-    if (resolvedLocation && !areLocationsEqual(loc, resolvedLocation.loc)) {
-      loc = mergeLoc(loc, resolvedLocation)
-      if (resolvedLocation.shouldNavigate) {
-        navigate(loc)
-        return
-      }
+    const resolvedLoc = await resolveShortLink(loc)
+    if (resolvedLoc && !areLocationsEqual(loc, resolvedLoc.loc)) {
+      loc = mergeLoc(loc, resolvedLoc)
     }
+    setResolvedLocation(loc)
     const app = loc.path[2]
     let space = loc.path[3] as Ref<Space>
     let special = loc.path[4]
@@ -637,10 +635,7 @@
       {#if currentApplication && navigatorModel && navigator && visibileNav}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         {#if visibileNav && navFloat}<div class="cover shown" on:click={() => (visibileNav = false)} />{/if}
-        <div
-          class="antiPanel-navigator {appsDirection === 'horizontal' ? 'portrait' : 'landscape'}"
-          style="box-shadow: -1px 0px 2px rgba(0, 0, 0, .1)"
-        >
+        <div class="antiPanel-navigator {appsDirection === 'horizontal' ? 'portrait' : 'landscape'}">
           {#if currentApplication}
             <NavHeader label={currentApplication.label} />
             {#if currentApplication.navHeaderComponent}
@@ -662,7 +657,6 @@
       {/if}
       <div
         class="antiPanel-component antiComponent"
-        class:border-left={!$deviceInfo.isPortrait}
         bind:this={contentPanel}
         use:resizeObserver={(element) => {
           componentWidth = element.clientWidth
diff --git a/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte b/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
index 557f87242d..4a8d68a13c 100644
--- a/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
+++ b/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
@@ -20,7 +20,15 @@
   import { getResource } from '@hcengineering/platform'
   import preference from '@hcengineering/preference'
   import { getClient } from '@hcengineering/presentation'
-  import { Action, IconAdd, IconEdit, IconSearch, getCurrentLocation, navigate, showPopup } from '@hcengineering/ui'
+  import {
+    Action,
+    IconAdd,
+    IconEdit,
+    IconSearch,
+    navigate,
+    getCurrentResolvedLocation,
+    showPopup
+  } from '@hcengineering/ui'
   import {
     NavLink,
     TreeItem,
@@ -58,7 +66,7 @@
     label: plugin.string.BrowseSpaces,
     icon: IconSearch,
     action: async (_id: Ref<Doc>): Promise<void> => {
-      const loc = getCurrentLocation()
+      const loc = getCurrentResolvedLocation()
       loc.path[3] = 'spaceBrowser'
       loc.path.length = 4
       dispatch('open')
diff --git a/server/mongo/src/storage.ts b/server/mongo/src/storage.ts
index 967c7ce1e0..6c1892c3ed 100644
--- a/server/mongo/src/storage.ts
+++ b/server/mongo/src/storage.ts
@@ -1063,7 +1063,7 @@ function fillDateSort (key: string, pipeline: any[], sort: any, options: FindOpt
   }
   pipeline.push({
     $addFields: {
-      [`sort_isNull_${key}`]: { $eq: [`$${key}`, null] }
+      [`sort_isNull_${key}`]: { $or: [{ $eq: [`$${key}`, null] }, { $eq: [{ $type: `$${key}` }, 'missing'] }] }
     }
   })
   sort[`sort_isNull_${key}`] = options.sort[_key] === SortingOrder.Ascending ? 1 : -1
diff --git a/tests/sanity/tests/hr.spec.ts b/tests/sanity/tests/hr.spec.ts
index f21f929eb6..a46132b6e5 100644
--- a/tests/sanity/tests/hr.spec.ts
+++ b/tests/sanity/tests/hr.spec.ts
@@ -6,7 +6,7 @@ test.use({
 })
 
 export async function createDepartment (page: Page, departmentName: string): Promise<void> {
-  await page.click('text=Structure Department Organization no employees >> button >> nth=1')
+  await page.click('text=Structure Department Organization no employees >> button >> nth=2')
   const departmentNameField = page.locator('[placeholder="Department"]')
   await departmentNameField.click()
   await departmentNameField.fill(departmentName)
@@ -29,7 +29,7 @@ test.describe('hr tests', () => {
     await createDepartment(page, department2)
 
     // Click .ml-8 > div > div > .flex-between >> nth=0
-    await page.locator('.ml-8 > div > div > .flex-between').first().click()
+    await page.locator('.flex-col > div > .flex-between >> nth=0').click()
 
     // Click [id="hr\:string\:AddEmployee"]
     await page.locator('[id="hr\\:string\\:AddEmployee"]').click()
@@ -57,7 +57,7 @@ test.describe('hr tests', () => {
     await page.locator('text=Structure').click()
 
     // Click div:nth-child(3) > div > .flex-between
-    await page.locator('div:nth-child(3) > div > .flex-between').click()
+    await page.locator('div:nth-child(2) > .flex-between').click()
 
     // Click [id="hr\:string\:AddEmployee"]
     await page.locator('[id="hr\\:string\\:AddEmployee"]').click()
diff --git a/tests/sanity/tests/org.members.spec.ts b/tests/sanity/tests/org.members.spec.ts
index 330d7ae3b6..b0a89f8873 100644
--- a/tests/sanity/tests/org.members.spec.ts
+++ b/tests/sanity/tests/org.members.spec.ts
@@ -18,7 +18,7 @@ test.describe('recruit tests', () => {
     await page.click('[placeholder="Company name"]')
     const orgId = 'Company-' + generateId()
     await page.fill('[placeholder="Company name"]', orgId)
-    await page.click('button:has-text("Create")')
+    await page.click('[id="contact\\:string\\:CreateOrganization"] button:has-text("Create")')
     await page.waitForSelector('form.antiCard', { state: 'detached' })
     await page.click(`text=${orgId}`)
 
diff --git a/tests/sanity/tests/tracker.spec.ts b/tests/sanity/tests/tracker.spec.ts
index d548b2b708..6b3d20bdd0 100644
--- a/tests/sanity/tests/tracker.spec.ts
+++ b/tests/sanity/tests/tracker.spec.ts
@@ -104,11 +104,11 @@ test('my-issues', async ({ page }) => {
   await navigate(page)
   await createIssue(page, { name })
   await page.click('text="My issues"')
-  await page.click('button:has-text("Assigned")')
+  await page.click('[data-id="tab-assigned"]')
   await expect(page.locator('.antiPanel-component')).not.toContainText(name)
-  await page.click('button:has-text("Created")')
+  await page.click('[data-id="tab-created"]')
   await expect(page.locator('.antiPanel-component')).toContainText(name)
-  await page.click('button:has-text("Subscribed")')
+  await page.click('[data-id="tab-subscribed"]')
   await expect(page.locator('.antiPanel-component')).toContainText(name)
   await openIssue(page, name)
   // click "Don't track"
diff --git a/tests/sanity/tests/workbench.spec.ts b/tests/sanity/tests/workbench.spec.ts
index e8f6eb433c..c1cc2ba6b9 100644
--- a/tests/sanity/tests/workbench.spec.ts
+++ b/tests/sanity/tests/workbench.spec.ts
@@ -17,7 +17,7 @@ test.describe('workbench tests', () => {
     await page.click('text=Applications')
     await expect(page).toHaveURL(`${PlatformURI}/workbench/sanity-ws/recruit/candidates`)
     // Click text=Applications Application >> span
-    await expect(page.locator('text=Applications Filter')).toBeVisible()
+    await expect(page.locator('text=Applications >> nth=1')).toBeVisible()
     await expect(page.locator('text="APP-1')).toBeDefined()
 
     // Click text=Talents