diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 01892a6b8a..b614101298 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -38,6 +38,15 @@
   --negative-button-pressed: #BF3636;
   --negative-button-focused: #CA4242;
 
+  --theme-primary-default: #205DC2;
+  --theme-primary-hovered: #3575DE;
+  --theme-primary-pressed: #1C52AB;
+  --theme-primary-disabled: #0000001F;
+  --theme-primary-accented-default: #D3E1F8;
+  --theme-primary-accented-hovered: #BDD2F5;
+  --theme-primary-accented-pressed: #A7C3F1;
+  --theme-primary-accented-focused: #BDD2F5;
+
   --white-color: #fff;
   --duotone-color: rgba(126, 134, 158, .25);
 
@@ -144,7 +153,6 @@
 
   --theme-editbox-focus-color: rgba(255, 255, 255, .04);
   --theme-editbox-focus-border: #5190EC;
-  --theme-editbox-default-focus-border: #205DC2; // Light
   --theme-tablist-color: rgba(0, 0, 0, .02);
   --theme-tablist-plain-color: #2A64C4; // Light
   --theme-tablist-plain-divider: rgba(255, 255, 255, .07); // Light invert
@@ -340,7 +348,6 @@
 
   --theme-editbox-focus-color: rgba(0, 0, 0, .08);
   --theme-editbox-focus-border: #5190EC;
-  --theme-editbox-default-focus-border: #205DC2;
   --theme-tablist-color: rgba(0, 0, 0, .02);
   --theme-tablist-plain-color: #2A64C4;
   --theme-tablist-plain-divider: rgba(0, 0, 0, .07);
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 8fa86252e2..c67f841c40 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -303,70 +303,115 @@
 
 /* Radio Button */
 .antiRadio {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  border: 0;
-  padding: 0;
-  clip: rect(0 0 0 0);
-  overflow: hidden;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: min-content;
+  min-width: 0;
+  outline: none;
 
-  & + label {
-    position: relative;
-    margin-top: .375rem;
+  input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    clip: rect(0 0 0 0);
+    overflow: hidden;
+  }
+
+  &.gap-none { margin-bottom: 0; }
+  &.gap-small { margin-bottom: .25rem; }
+  &.gap-medium { margin-bottom: .5rem; }
+
+  label {
     padding-left: 1.375rem;
     font-size: .8125rem;
+    color: var(--theme-content-color);
 
-    &.gap-none { margin-bottom: .375rem; }
-    &.gap-small { margin-bottom: .625rem; }
-    &.gap-medium { margin-bottom: .875rem; }
-
-    &::before,
     &::after {
       position: absolute;
-      border-radius: 50%;
-    }
-    &::before {
-      content: '';
-      top: .0625rem;
-      left: 0;
-      width: 1rem;
-      height: 1rem;
-      background-color: var(--theme-button-default);
-      border: 1px solid var(--theme-button-border);
-    }
-    &::after {
-      top: .3125rem;
+      top: .25rem;
       left: .25rem;
       width: .5rem;
       height: .5rem;
       background-color: var(--accented-button-color);
+      border-radius: 50%;
+      opacity: .8;
+      z-index: 1;
     }
   }
-  &:not(:disabled, :checked) + label:hover::before { background-color: var(--theme-button-hovered); }
-  &:not(:disabled):active + label::before { background-color: var(--theme-button-pressed); }
-  &:disabled + label::before {
-    background-color: var(--theme-button-border);
-    border-color: transparent;
+
+  &::before,
+  &::after {
+    position: absolute;
+    border-radius: 50%;
   }
-  &:focus + label::before { box-shadow: 0 0 0 2px var(--accented-button-outline); }
-  &:focus:not(:checked) + label::before {
-    background-color: var(--theme-button-focused);
-    border-color: var(--theme-button-focused-border);
+  &::before {
+    top: -.1875rem;
+    left: -.1875rem;
+    width: 1.375rem;
+    height: 1.375rem;
+    border: 1px solid var(--theme-primary-default);
   }
-  &:checked + label::before {
-    background-color: var(--accented-button-default);
-    border-color: var(--accented-button-border);
+  &::after {
+    content: '';
+    top: 0rem;
+    left: 0rem;
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--theme-button-default);
+    border: 1px solid var(--theme-divider-color);
   }
-  &:checked:focus + label::before { background-color: var(--accented-button-focused); }
-  &:checked:hover + label::before { background-color: var(--accented-button-hovered); }
-  &:checked:active + label::before { background-color: var(--accented-button-pressed); }
-  &:checked:disabled + label::before {
-    background-color: var(--accented-button-disabled);
-    border-color: var(--theme-button-border);
+  &:not(.disabled, .checked):hover {
+    &::after { background-color: var(--theme-button-hovered); }
+    label { color: var(--theme-caption-color); }
+  }
+  &.checked:not(.disabled):hover {
+    &::after { background-color: var(--theme-primary-hovered); }
+    label {
+      color: var(--theme-caption-color);
+      &::after { opacity: 1; }
+    }
+  }
+  &:focus-within:not(.disabled) {
+    &::before { content: ''; }
+    label { color: var(--theme-caption-color); }
+    &.checked {
+      label::after { opacity: 1; }
+      &:active::after { background-color: var(--theme-primary-pressed); }
+    }
+  }
+  &.checked:not(.disabled) {
+    &::after { background-color: var(--theme-primary-default); }
+    label::after { content: ''; }
+  }
+  &.disabled {
+    cursor: not-allowed;
+
+    &::after {
+      background-color: var(--theme-primary-disabled);
+      border-color: transparent;
+    }
+    label {
+      color: var(--theme-darker-color);
+      cursor: not-allowed;
+    }
+    &.checked label::after {
+      content: '';
+      opacity: .4;
+    }
+  }
+  &:not(.disabled),
+  &:not(.disabled) label { cursor: pointer; }
+  &:not(.disabled):active {
+    &::after { background-color: var(--theme-primary-pressed); }
+    label::after {
+      content: '';
+      opacity: 1;
+    }
   }
-  &:checked + label::after { content: ''; }
 }
 
 /* StatesBar */
@@ -811,7 +856,7 @@
     bottom: -.125rem;
     left: -.125rem;
     right: -.125rem;
-    border: 1px solid var(--theme-editbox-default-focus-border);
+    border: 1px solid var(--theme-primary-default);
     border-radius: .5rem;
     z-index: -1;
   }
diff --git a/packages/theme/styles/editors.scss b/packages/theme/styles/editors.scss
index 1a2228ed31..520bfaaadc 100644
--- a/packages/theme/styles/editors.scss
+++ b/packages/theme/styles/editors.scss
@@ -85,7 +85,7 @@
     &:hover { background-color: var(--theme-button-hovered); }
     &.focusable:focus-within {
       background-color: var(--theme-button-focused);
-      border-color: var(--theme-editbox-default-focus-border);
+      border-color: var(--theme-primary-default);
     }
     &.disabled {
       color: var(--theme-dark-color);
diff --git a/packages/ui/src/components/CircleButton.svelte b/packages/ui/src/components/CircleButton.svelte
index fb7a9a4cec..3be53af988 100644
--- a/packages/ui/src/components/CircleButton.svelte
+++ b/packages/ui/src/components/CircleButton.svelte
@@ -13,6 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte'
   import type { Asset } from '@hcengineering/platform'
   import type { AnySvelteComponent, ButtonSize } from '../types'
   import Icon from './Icon.svelte'
@@ -22,16 +23,30 @@
   export let ghost: boolean = false
   export let selected: boolean = false
   export let accented: boolean = false
+  export let disabled: boolean = false
   export let id: string | undefined = undefined
+
+  const dispatch = createEventDispatcher()
+
+  function onKeydown (key: KeyboardEvent): void {
+    if (key.code === 'Space') {
+      key.preventDefault()
+      key.stopPropagation()
+      dispatch('selected')
+    }
+  }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 <div
   {id}
   class="flex-center icon-button icon-{size}"
   class:selected
   class:ghost
   class:accented
+  class:disabled
+  tabindex="0"
+  on:keydown={onKeydown}
   on:click|stopPropagation
   on:mousemove
 >
@@ -46,14 +61,39 @@
 
 <style lang="scss">
   .icon-button {
+    position: relative;
     flex-shrink: 0;
-    color: var(--caption-color);
-    border: 1px solid var(--trans-content-20);
+    color: var(--theme-content-color);
+    background-color: var(--theme-button-default);
+    border: 1px solid var(--theme-divider-color);
     border-radius: 50%;
+    outline: none;
     cursor: pointer;
 
+    &::before {
+      position: absolute;
+      top: -0.25rem;
+      bottom: -0.25rem;
+      left: -0.25rem;
+      right: -0.25rem;
+      border: 1px solid var(--theme-primary-default);
+      border-radius: 50%;
+    }
     &: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);
+
+      &::before {
+        content: '';
+      }
+    }
+    &.disabled {
+      background-color: transparent;
     }
     .content {
       pointer-events: none;
@@ -69,14 +109,18 @@
       }
     }
     &.accented {
-      color: var(--accented-button-color);
-      background-color: var(--accented-button-default);
-      border-color: var(--accented-button-border);
+      background-color: var(--theme-primary-accented-default);
       &:hover {
-        background-color: var(--accented-button-hovered);
+        background-color: var(--theme-primary-accented-hovered);
       }
       &:active {
-        background-color: var(--accented-button-pressed);
+        background-color: var(--theme-primary-accented-pressed);
+      }
+      &:focus {
+        background-color: var(--theme-primary-accented-focused);
+      }
+      &.disabled {
+        background-color: var(--theme-primary-disabled);
       }
     }
   }
diff --git a/packages/ui/src/components/Grid.svelte b/packages/ui/src/components/Grid.svelte
index e44a65beed..b1254555da 100755
--- a/packages/ui/src/components/Grid.svelte
+++ b/packages/ui/src/components/Grid.svelte
@@ -17,11 +17,15 @@
   export let rowGap: number = 2.5
   export let columnGap: number = 1.5
   export let topGap: boolean = false
+  export let equalHeight: boolean = false
+  export let alignItems: 'start' | 'center' | 'end' | 'stretch' = 'center'
 
-  $: style = `grid-template-columns: repeat(${column}, 1fr); row-gap: ${rowGap}rem; column-gap: ${columnGap}rem;`
+  $: style = `grid-template-columns: repeat(${column}, 1fr); row-gap: ${rowGap}rem; column-gap: ${columnGap}rem;${
+    equalHeight ? ' grid-auto-rows: 1fr;' : ''
+  }`
 </script>
 
-<div class="grid" {style} style:margin-top={topGap ? `${rowGap}rem` : 0}>
+<div class="grid" {style} style:margin-top={topGap ? `${rowGap}rem` : 0} style:align-items={alignItems}>
   <slot />
 </div>
 
diff --git a/packages/ui/src/components/RadioButton.svelte b/packages/ui/src/components/RadioButton.svelte
index 918380f0ba..3d8b10ff6f 100644
--- a/packages/ui/src/components/RadioButton.svelte
+++ b/packages/ui/src/components/RadioButton.svelte
@@ -21,6 +21,7 @@
   export let group: any
   export let value: any
   export let disabled: boolean = false
+  export let labelOverflow: boolean = false
   export let label: string | undefined = undefined
   export let labelIntl: IntlString | undefined = undefined
   export let labelParams: Record<string, any> | undefined = undefined
@@ -28,22 +29,32 @@
   export let gap: 'small' | 'medium' | 'none' = 'none'
 </script>
 
-<input
-  class="antiRadio"
-  {id}
-  type="radio"
-  bind:group
-  {value}
-  {disabled}
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div
+  class="antiRadio gap-{gap}"
+  class:disabled
+  class:checked={group === value}
+  tabindex="-1"
   on:click={() => {
     if (!disabled && group !== value) action()
   }}
-/>
-<label for={id} class="gap-{gap}">
-  <slot />
-  {#if labelIntl}
-    <Label label={labelIntl} params={labelParams} />
-  {:else}
-    {label}
-  {/if}
-</label>
+>
+  <input
+    {id}
+    type="radio"
+    bind:group
+    {value}
+    {disabled}
+    on:click={() => {
+      if (!disabled && group !== value) action()
+    }}
+  />
+  <label for={id} class:overflow-label={labelOverflow}>
+    <slot />
+    {#if labelIntl}
+      <Label label={labelIntl} params={labelParams} />
+    {:else}
+      {label}
+    {/if}
+  </label>
+</div>
diff --git a/plugins/board-resources/src/components/EditCard.svelte b/plugins/board-resources/src/components/EditCard.svelte
index ebc6b41c37..e61c5ff7c6 100644
--- a/plugins/board-resources/src/components/EditCard.svelte
+++ b/plugins/board-resources/src/components/EditCard.svelte
@@ -111,6 +111,7 @@
 </script>
 
 {#if object !== undefined}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <Panel
     icon={board.icon.Card}
     title={object?.title}
diff --git a/plugins/calendar-resources/src/components/ReccurancePopup.svelte b/plugins/calendar-resources/src/components/ReccurancePopup.svelte
index 6d681b0f22..466ff16312 100644
--- a/plugins/calendar-resources/src/components/ReccurancePopup.svelte
+++ b/plugins/calendar-resources/src/components/ReccurancePopup.svelte
@@ -20,6 +20,7 @@
     DropdownIntlItem,
     DropdownLabelsIntl,
     Grid,
+    Row,
     Label,
     NumberInput,
     RadioButton
@@ -121,12 +122,13 @@
     {#if periodType === 'WEEKLY'}
       <div class="flex-row-center mt-3">
         <span class="min-w-12"><Label label={calendar.string.On} /></span>
-        <div class="flex-row-center flex-gap-2 ml-1-5">
+        <div class="flex-row-center gap-1-5 ml-1-5">
           {#each weekdays as day}
             <CircleButton
-              size="medium"
+              size={'medium'}
               accented={isActive(day.id, selectedWeekdays)}
               on:click={() => weekdayClick(day.id)}
+              on:selected={() => weekdayClick(day.id)}
             >
               <div class="flex-row-center weekday" slot="content">
                 <Label label={day.label} />
@@ -139,16 +141,17 @@
     <div class="flex-row-center mt-3 mb-3 min-h-8">
       <Label label={calendar.string.Ends} />
     </div>
-    <Grid columnGap={0.375} rowGap={0.75}>
-      <RadioButton
-        labelIntl={calendar.string.Never}
-        value={'never'}
-        group={selected}
-        action={() => {
-          selected = 'never'
-        }}
-      />
-      <div />
+    <Grid columnGap={0.375} rowGap={0.75} equalHeight>
+      <Row>
+        <RadioButton
+          labelIntl={calendar.string.Never}
+          value={'never'}
+          group={selected}
+          action={() => {
+            selected = 'never'
+          }}
+        />
+      </Row>
       <RadioButton
         labelIntl={calendar.string.OnUntil}
         value={'on'}
@@ -215,7 +218,7 @@
 
     .weekday {
       overflow: hidden;
-      font-size: 0.75rem;
+      font-size: 0.6875rem;
     }
 
     .pool {