diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentCopyModal.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentCopyModal.vue
index ba3e3eb70c7..549aed44e9c 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentCopyModal.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentCopyModal.vue
@@ -12,14 +12,16 @@
       v-if="stage === Stages.SELECT_CLASSROOM"
       id="select-classroom"
     >
-      <KRadioButton
-        v-for="classroom in availableClassrooms"
-        :key="classroom.id"
-        v-model="selectedClassroomId"
-        :label="classroomLabel(classroom)"
-        :buttonValue="classroom.id"
-        data-test="radio-button"
-      />
+      <KRadioButtonGroup>
+        <KRadioButton
+          v-for="classroom in availableClassrooms"
+          :key="classroom.id"
+          v-model="selectedClassroomId"
+          :label="classroomLabel(classroom)"
+          :buttonValue="classroom.id"
+          data-test="radio-button"
+        />
+      </KRadioButtonGroup>
     </div>
     <!-- Learner Group Selection Form -->
     <div
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/RecipientSelector.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/RecipientSelector.vue
index 775c80a6f7c..785cb89189c 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/RecipientSelector.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/RecipientSelector.vue
@@ -2,18 +2,19 @@
 
   <div>
     <!-- Entire class -->
-    <KRadioButton
-      :buttonValue="true"
-      :currentValue="entireClassIsSelected"
-      :disabled="disabled"
-      @change="selectEntireClass()"
-    >
-      <KLabeledIcon
-        :label="coachString('entireClassLabel')"
-        icon="classes"
-      />
-    </KRadioButton>
-
+    <KRadioButtonGroup>
+      <KRadioButton
+        :buttonValue="true"
+        :currentValue="entireClassIsSelected"
+        :disabled="disabled"
+        @change="selectEntireClass()"
+      >
+        <KLabeledIcon
+          :label="coachString('entireClassLabel')"
+          icon="classes"
+        />
+      </KRadioButton>
+    </KRadioButtonGroup>
     <!-- Learner groups -->
     <KCheckbox
       v-for="group in groups"
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue
index a51d24ce780..f562d89a7ce 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonResourceSelectionPage/ContentCardList.vue
@@ -9,53 +9,56 @@
         :indeterminate="selectAllIndeterminate"
         @change="$emit('changeselectall', $event)"
       />
-      <li
-        v-for="content in contentList"
-        :key="content.id"
-        class="content-list-item"
-        :aria-selected="contentIsChecked(content)"
-      >
-        <KCheckbox
-          v-if="contentHasCheckbox(content) && !showRadioButtons"
-          class="content-checkbox"
-          :label="content.title"
-          :showLabel="false"
-          :checked="contentIsChecked(content)"
-          :indeterminate="contentIsIndeterminate(content)"
-          :disabled="contentCheckboxDisabled(content)"
-          @change="handleCheckboxChange(content, $event)"
-        />
-        <KRadioButton
-          v-else-if="contentHasCheckbox(content) && showRadioButtons"
-          class="content-checkbox"
-          :label="content.title"
-          :showLabel="false"
-          :currentValue="contentIsChecked(content) ? content.id : 'none'"
-          :buttonValue="content.id"
-          :disabled="contentCheckboxDisabled(content)"
-          @change="handleCheckboxChange(content, true)"
-        />
-        <!--
+      <KRadioButtonGroup>
+        <li
+          v-for="content in contentList"
+          :key="content.id"
+          class="content-list-item"
+          :aria-selected="contentIsChecked(content)"
+        >
+          <KCheckbox
+            v-if="contentHasCheckbox(content) && !showRadioButtons"
+            class="content-checkbox"
+            :label="content.title"
+            :showLabel="false"
+            :checked="contentIsChecked(content)"
+            :indeterminate="contentIsIndeterminate(content)"
+            :disabled="contentCheckboxDisabled(content)"
+            @change="handleCheckboxChange(content, $event)"
+          />
+          <KRadioButton
+            v-else-if="contentHasCheckbox(content) && showRadioButtons"
+            class="content-checkbox"
+            :label="content.title"
+            :showLabel="false"
+            :currentValue="contentIsChecked(content) ? content.id : 'none'"
+            :buttonValue="content.id"
+            :disabled="contentCheckboxDisabled(content)"
+            @change="handleCheckboxChange(content, true)"
+          />
+          <!--
           disabled, tabindex, is-leaf class set here to hack making the card not clickable
           if you're trying to make the card clickable remove these properties
         -->
-        <LessonContentCard
-          class="content-card"
-          :disabled="content.is_leaf"
-          :tabindex="content.is_leaf ? -1 : 0"
-          :class="{ 'with-checkbox': needCheckboxes }"
-          :content="content"
-          :message="contentCardMessage(content)"
-          :link="contentCardLink(content)"
-        >
-          <template #notice>
-            <slot
-              name="notice"
-              :content="content"
-            ></slot>
-          </template>
-        </LessonContentCard>
-      </li>
+          <LessonContentCard
+            class="content-card"
+            :disabled="content.is_leaf"
+            :tabindex="content.is_leaf ? -1 : 0"
+            :class="{ 'with-checkbox': needCheckboxes }"
+            :content="content"
+            :message="contentCardMessage(content)"
+            :link="contentCardLink(content)"
+          >
+            <template #notice>
+              <slot
+                name="notice"
+                :content="content"
+              >
+              </slot>
+            </template>
+          </LessonContentCard>
+        </li>
+      </KRadioButtonGroup>
     </ul>
 
     <template>
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionEditor.vue
index 25c23ab75d1..7e493da2391 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionEditor.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionEditor.vue
@@ -32,30 +32,32 @@
         {{ questionOrder$() }}
       </h5>
       <KGrid>
-        <KGridItem
-          :layout12="{ span: 6 }"
-          :layout8="{ span: 4 }"
-          :layout4="{ span: 2 }"
-        >
-          <KRadioButton
-            v-model="learners_see_fixed_order"
-            :label="randomizedLabel$()"
-            :buttonValue="false"
-            :description="randomizedOptionDescription$()"
-          />
-        </KGridItem>
-        <KGridItem
-          :layout12="{ span: 6 }"
-          :layout8="{ span: 4 }"
-          :layout4="{ span: 2 }"
-        >
-          <KRadioButton
-            v-model="learners_see_fixed_order"
-            :label="fixedLabel$()"
-            :buttonValue="true"
-            :description="fixedOptionDescription$()"
-          />
-        </KGridItem>
+        <KRadioButtonGroup>
+          <KGridItem
+            :layout12="{ span: 6 }"
+            :layout8="{ span: 4 }"
+            :layout4="{ span: 2 }"
+          >
+            <KRadioButton
+              v-model="learners_see_fixed_order"
+              :label="randomizedLabel$()"
+              :buttonValue="false"
+              :description="randomizedOptionDescription$()"
+            />
+          </KGridItem>
+          <KGridItem
+            :layout12="{ span: 6 }"
+            :layout8="{ span: 4 }"
+            :layout4="{ span: 2 }"
+          >
+            <KRadioButton
+              v-model="learners_see_fixed_order"
+              :label="fixedLabel$()"
+              :buttonValue="true"
+              :description="fixedOptionDescription$()"
+            />
+          </KGridItem>
+        </KRadioButtonGroup>
       </KGrid>
     </div>
 
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue
index 063c3f73aa0..ec3e5bae556 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue
@@ -30,39 +30,41 @@
           {{ sectionOrderLabel$() }}
         </h5>
         <KGrid>
-          <KGridItem
-            :layout12="{ span: 6 }"
-            :layout8="{ span: 4 }"
-            :layout4="{ span: 2 }"
-          >
-            <KRadioButton
-              :currentValue="quiz.learners_see_fixed_order"
-              :label="randomizedLabel$()"
-              :buttonValue="false"
-              :description="randomizedSectionOptionDescription$()"
-              @input="value => updateQuiz({ learners_see_fixed_order: value })"
-            />
-          </KGridItem>
-          <KGridItem
-            :layout12="{ span: 6 }"
-            :layout8="{ span: 4 }"
-            :layout4="{ span: 2 }"
-          >
-            <KRadioButton
-              :currentValue="quiz.learners_see_fixed_order"
-              :label="fixedLabel$()"
-              :buttonValue="true"
-              :description="fixedSectionOptionDescription$()"
-              @input="value => updateQuiz({ learners_see_fixed_order: value })"
-            />
-            <KButton
-              v-if="quiz.learners_see_fixed_order"
-              :text="coreString('editAction') + ' - ' + sectionOrderLabel$()"
-              class="edit-section-order-btn"
-              appearance="basic-link"
-              @click="editSectionOrder"
-            />
-          </KGridItem>
+          <KRadioButtonGroup>
+            <KGridItem
+              :layout12="{ span: 6 }"
+              :layout8="{ span: 4 }"
+              :layout4="{ span: 2 }"
+            >
+              <KRadioButton
+                :currentValue="quiz.learners_see_fixed_order"
+                :label="randomizedLabel$()"
+                :buttonValue="false"
+                :description="randomizedSectionOptionDescription$()"
+                @input="value => updateQuiz({ learners_see_fixed_order: value })"
+              />
+            </KGridItem>
+            <KGridItem
+              :layout12="{ span: 6 }"
+              :layout8="{ span: 4 }"
+              :layout4="{ span: 2 }"
+            >
+              <KRadioButton
+                :currentValue="quiz.learners_see_fixed_order"
+                :label="fixedLabel$()"
+                :buttonValue="true"
+                :description="fixedSectionOptionDescription$()"
+                @input="value => updateQuiz({ learners_see_fixed_order: value })"
+              />
+              <KButton
+                v-if="quiz.learners_see_fixed_order"
+                :text="coreString('editAction') + ' - ' + sectionOrderLabel$()"
+                class="edit-section-order-btn"
+                appearance="basic-link"
+                @click="editSectionOrder"
+              />
+            </KGridItem>
+          </KRadioButtonGroup>
         </KGrid>
       </div>
 
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectTransferSourceModal/DriveList.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectTransferSourceModal/DriveList.vue
index 2e28604faee..50107d97444 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectTransferSourceModal/DriveList.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectTransferSourceModal/DriveList.vue
@@ -11,15 +11,19 @@
     </div>
 
     <div v-else>
-      <h2>{{ $tr('drivesFound') }}</h2>
-      <KRadioButton
-        v-for="drive in drives"
-        :key="drive.id"
-        :label="enabledDriveLabel(drive)"
-        :buttonValue="drive.id"
-        :currentValue="value"
-        @change="$emit('input', drive.id)"
-      />
+      <h2>
+        {{ $tr('drivesFound') }}
+      </h2>
+      <KRadioButtonGroup>
+        <KRadioButton
+          v-for="drive in drives"
+          :key="drive.id"
+          :label="enabledDriveLabel(drive)"
+          :buttonValue="drive.id"
+          :currentValue="value"
+          @change="$emit('input', drive.id)"
+        />
+      </KRadioButtonGroup>
     </div>
   </div>
 
diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectTransferSourceModal/SelectImportSourceModal.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectTransferSourceModal/SelectImportSourceModal.vue
index 10e8230da7e..5da815db8a3 100644
--- a/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectTransferSourceModal/SelectImportSourceModal.vue
+++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/SelectTransferSourceModal/SelectImportSourceModal.vue
@@ -6,28 +6,30 @@
     @submit="handleSubmit"
     @cancel="handleCancel"
   >
-    <KRadioButton
-      v-model="source"
-      :label="$tr('network')"
-      :buttonValue="ContentSources.KOLIBRI_STUDIO"
-      :disabled="kolibriStudioIsOffline || formIsDisabled"
-      :autofocus="!kolibriStudioIsOffline"
-      :description="$tr('studioDescription')"
-    />
-    <KRadioButton
-      v-model="source"
-      :label="$tr('localNetworkOrInternet')"
-      :buttonValue="ContentSources.PEER_KOLIBRI_SERVER"
-      :disabled="formIsDisabled"
-      :description="$tr('networkDescription')"
-    />
-    <KRadioButton
-      v-model="source"
-      :label="$tr('localDrives')"
-      :buttonValue="ContentSources.LOCAL_DRIVE"
-      :disabled="formIsDisabled"
-      :description="$tr('localDescription')"
-    />
+    <KRadioButtonGroup>
+      <KRadioButton
+        v-model="source"
+        :label="$tr('network')"
+        :buttonValue="ContentSources.KOLIBRI_STUDIO"
+        :disabled="kolibriStudioIsOffline || formIsDisabled"
+        :autofocus="!kolibriStudioIsOffline"
+        :description="$tr('studioDescription')"
+      />
+      <KRadioButton
+        v-model="source"
+        :label="$tr('localNetworkOrInternet')"
+        :buttonValue="ContentSources.PEER_KOLIBRI_SERVER"
+        :disabled="formIsDisabled"
+        :description="$tr('networkDescription')"
+      />
+      <KRadioButton
+        v-model="source"
+        :label="$tr('localDrives')"
+        :buttonValue="ContentSources.LOCAL_DRIVE"
+        :disabled="formIsDisabled"
+        :description="$tr('localDescription')"
+      />
+    </KRadioButtonGroup>
   </SelectSourceModal>
 
 </template>
diff --git a/kolibri/plugins/facility/assets/src/views/UserCreatePage.vue b/kolibri/plugins/facility/assets/src/views/UserCreatePage.vue
index 97c75729e49..c15af7515fd 100644
--- a/kolibri/plugins/facility/assets/src/views/UserCreatePage.vue
+++ b/kolibri/plugins/facility/assets/src/views/UserCreatePage.vue
@@ -57,20 +57,22 @@
             v-if="coachIsSelected"
             class="coach-selector"
           >
-            <KRadioButton
-              v-model="classCoachIsSelected"
-              :disabled="busy"
-              :label="coreString('classCoachLabel')"
-              :description="coreString('classCoachDescription')"
-              :buttonValue="true"
-            />
-            <KRadioButton
-              v-model="classCoachIsSelected"
-              :disabled="busy"
-              :label="coreString('facilityCoachLabel')"
-              :description="coreString('facilityCoachDescription')"
-              :buttonValue="false"
-            />
+            <KRadioButtonGroup>
+              <KRadioButton
+                v-model="classCoachIsSelected"
+                :disabled="busy"
+                :label="coreString('classCoachLabel')"
+                :description="coreString('classCoachDescription')"
+                :buttonValue="true"
+              />
+              <KRadioButton
+                v-model="classCoachIsSelected"
+                :disabled="busy"
+                :label="coreString('facilityCoachLabel')"
+                :description="coreString('facilityCoachDescription')"
+                :buttonValue="false"
+              />
+            </KRadioButtonGroup>
           </fieldset>
 
           <IdentifierTextbox
diff --git a/kolibri/plugins/facility/assets/src/views/UserEditPage.vue b/kolibri/plugins/facility/assets/src/views/UserEditPage.vue
index 88fc5322ac0..98a2339a25c 100644
--- a/kolibri/plugins/facility/assets/src/views/UserEditPage.vue
+++ b/kolibri/plugins/facility/assets/src/views/UserEditPage.vue
@@ -65,20 +65,22 @@
               v-if="coachIsSelected"
               class="coach-selector"
             >
-              <KRadioButton
-                v-model="classCoachIsSelected"
-                :disabled="formDisabled"
-                :label="coreString('classCoachLabel')"
-                :description="coreString('classCoachDescription')"
-                :buttonValue="true"
-              />
-              <KRadioButton
-                v-model="classCoachIsSelected"
-                :disabled="formDisabled"
-                :label="coreString('facilityCoachLabel')"
-                :description="coreString('facilityCoachDescription')"
-                :buttonValue="false"
-              />
+              <KRadioButtonGroup>
+                <KRadioButton
+                  v-model="classCoachIsSelected"
+                  :disabled="formDisabled"
+                  :label="coreString('classCoachLabel')"
+                  :description="coreString('classCoachDescription')"
+                  :buttonValue="true"
+                />
+                <KRadioButton
+                  v-model="classCoachIsSelected"
+                  :disabled="formDisabled"
+                  :label="coreString('facilityCoachLabel')"
+                  :description="coreString('facilityCoachDescription')"
+                  :buttonValue="false"
+                />
+              </KRadioButtonGroup>
             </fieldset>
           </template>
 
diff --git a/kolibri/plugins/media_player/assets/src/views/MediaPlayerLanguages/LanguagesMenu.vue b/kolibri/plugins/media_player/assets/src/views/MediaPlayerLanguages/LanguagesMenu.vue
index f01650a278c..0b835d77586 100644
--- a/kolibri/plugins/media_player/assets/src/views/MediaPlayerLanguages/LanguagesMenu.vue
+++ b/kolibri/plugins/media_player/assets/src/views/MediaPlayerLanguages/LanguagesMenu.vue
@@ -5,6 +5,9 @@
     class="languages-menu"
   >
     <!-- Languages get added dynamically through video.js -->
+    <KRadioButtonGroup>
+      <slot></slot>
+    </KRadioButtonGroup>
   </MediaPlayerMenu>
 
 </template>
diff --git a/kolibri/plugins/setup_wizard/assets/src/views/JoinOrNewLOD.vue b/kolibri/plugins/setup_wizard/assets/src/views/JoinOrNewLOD.vue
index 1ca32a868dd..c3006629296 100644
--- a/kolibri/plugins/setup_wizard/assets/src/views/JoinOrNewLOD.vue
+++ b/kolibri/plugins/setup_wizard/assets/src/views/JoinOrNewLOD.vue
@@ -5,20 +5,22 @@
     :description="$tr('setUpFacilityDescription')"
     @continue="handleContinue"
   >
-    <KRadioButton
-      v-model="selected"
-      :label="$tr('joinFacilityLabel')"
-      :buttonValue="Options.JOIN"
-      class="radio-button"
-      :autofocus="isJoinSetup"
-    />
-    <KRadioButton
-      v-model="selected"
-      :label="$tr('importFromFacilityLabel')"
-      :buttonValue="Options.IMPORT"
-      class="radio-button"
-      :autofocus="isImportSetup"
-    />
+    <KRadioButtonGroup>
+      <KRadioButton
+        v-model="selected"
+        :label="$tr('joinFacilityLabel')"
+        :buttonValue="Options.JOIN"
+        class="radio-button"
+        :autofocus="isJoinSetup"
+      />
+      <KRadioButton
+        v-model="selected"
+        :label="$tr('importFromFacilityLabel')"
+        :buttonValue="Options.IMPORT"
+        class="radio-button"
+        :autofocus="isImportSetup"
+      />
+    </KRadioButtonGroup>
     <SelectDeviceModalGroup
       v-if="showSelectAddressModal"
       :filterLODAvailable="true"
diff --git a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/CreateLearnerAccountForm.vue b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/CreateLearnerAccountForm.vue
index 774e5bceabb..21ed1104f4a 100644
--- a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/CreateLearnerAccountForm.vue
+++ b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/CreateLearnerAccountForm.vue
@@ -8,22 +8,24 @@
     :eventOnGoBack="backEvent"
     @continue="handleContinue"
   >
-    <KRadioButton
-      ref="yesRadio"
-      v-model="setting"
-      class="radio-button"
-      :label="$tr('yesOptionLabel')"
-      :buttonValue="true"
-      :autofocus="setting"
-    />
-    <KRadioButton
-      ref="noRadio"
-      v-model="setting"
-      class="radio-button"
-      :label="$tr('noOptionLabel')"
-      :buttonValue="false"
-      :autofocus="!setting"
-    />
+    <KRadioButtonGroup>
+      <KRadioButton
+        ref="yesRadio"
+        v-model="setting"
+        class="radio-button"
+        :label="$tr('yesOptionLabel')"
+        :buttonValue="true"
+        :autofocus="setting"
+      />
+      <KRadioButton
+        ref="noRadio"
+        v-model="setting"
+        class="radio-button"
+        :label="$tr('noOptionLabel')"
+        :buttonValue="false"
+        :autofocus="!setting"
+      />
+    </KRadioButtonGroup>
     <p class="description">
       {{ getCommonSyncString('changeLater') }}
     </p>
diff --git a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/FacilityPermissionsForm.vue b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/FacilityPermissionsForm.vue
index ae3beea3ff3..c6dcd141b14 100644
--- a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/FacilityPermissionsForm.vue
+++ b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/FacilityPermissionsForm.vue
@@ -7,33 +7,35 @@
     :steps="5"
     @continue="handleContinue"
   >
-    <KRadioButton
-      ref="first-button"
-      v-model="selected"
-      class="permission-preset-radio-button"
-      :buttonValue="Presets.NONFORMAL"
-      :label="$tr('nonFormalLabel')"
-      :description="$tr('nonFormalDescription')"
-    />
-    <FacilityNameTextbox
-      v-if="selected === Presets.NONFORMAL"
-      ref="facility-name"
-      v-model="facilityName"
-      class="textbox"
-    />
-    <KRadioButton
-      v-model="selected"
-      class="permission-preset-radio-button"
-      :buttonValue="Presets.FORMAL"
-      :label="$tr('formalLabel')"
-      :description="$tr('formalDescription')"
-    />
-    <FacilityNameTextbox
-      v-if="selected === Presets.FORMAL"
-      ref="facility-name"
-      v-model="facilityName"
-      class="textbox"
-    />
+    <KRadioButtonGroup>
+      <KRadioButton
+        ref="first-button"
+        v-model="selected"
+        class="permission-preset-radio-button"
+        :buttonValue="Presets.NONFORMAL"
+        :label="$tr('nonFormalLabel')"
+        :description="$tr('nonFormalDescription')"
+      />
+      <FacilityNameTextbox
+        v-if="selected === Presets.NONFORMAL"
+        ref="facility-name"
+        v-model="facilityName"
+        class="textbox"
+      />
+      <KRadioButton
+        v-model="selected"
+        class="permission-preset-radio-button"
+        :buttonValue="Presets.FORMAL"
+        :label="$tr('formalLabel')"
+        :description="$tr('formalDescription')"
+      />
+      <FacilityNameTextbox
+        v-if="selected === Presets.FORMAL"
+        ref="facility-name"
+        v-model="facilityName"
+        class="textbox"
+      />
+    </KRadioButtonGroup>
   </OnboardingStepBase>
 
 </template>
diff --git a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/FullOrLearnOnlyDeviceForm.vue b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/FullOrLearnOnlyDeviceForm.vue
index 2210c6f6189..2bfb9af40df 100644
--- a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/FullOrLearnOnlyDeviceForm.vue
+++ b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/FullOrLearnOnlyDeviceForm.vue
@@ -4,20 +4,22 @@
     :title="$tr('whatKindOfDeviceTitle')"
     @continue="handleContinue"
   >
-    <KRadioButton
-      v-model="selected"
-      :label="$tr('fullDeviceLabel')"
-      :buttonValue="Options.FULL"
-      :description="$tr('fullDeviceDescription')"
-      :autofocus="isFullSetup"
-    />
-    <KRadioButton
-      v-model="selected"
-      :label="$tr('learnOnlyDeviceLabel')"
-      :buttonValue="Options.LOD"
-      :description="$tr('learnOnlyDeviceDescription')"
-      :autofocus="isLODSetup"
-    />
+    <KRadioButtonGroup>
+      <KRadioButton
+        v-model="selected"
+        :label="$tr('fullDeviceLabel')"
+        :buttonValue="Options.FULL"
+        :description="$tr('fullDeviceDescription')"
+        :autofocus="isFullSetup"
+      />
+      <KRadioButton
+        v-model="selected"
+        :label="$tr('learnOnlyDeviceLabel')"
+        :buttonValue="Options.LOD"
+        :description="$tr('learnOnlyDeviceDescription')"
+        :autofocus="isLODSetup"
+      />
+    </KRadioButtonGroup>
   </OnboardingStepBase>
 
 </template>
diff --git a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/GettingStartedForm.vue b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/GettingStartedForm.vue
index 6c142f0f5da..23e5888f0d1 100644
--- a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/GettingStartedForm.vue
+++ b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/GettingStartedForm.vue
@@ -4,18 +4,20 @@
     :header="getCommonSyncString('howAreYouUsingKolibri')"
     @submit="handleSubmit"
   >
-    <KRadioButton
-      v-model="selected"
-      :buttonValue="Options.PERSONAL"
-      :label="$tr('quickStartLabel')"
-      :description="getCommonSyncString('onMyOwn')"
-    />
-    <KRadioButton
-      v-model="selected"
-      :buttonValue="Options.PUBLIC"
-      :label="$tr('advancedSetupLabel')"
-      :description="$tr('advancedSetupDescription')"
-    />
+    <KRadioButtonGroup>
+      <KRadioButton
+        v-model="selected"
+        :buttonValue="Options.PERSONAL"
+        :label="$tr('quickStartLabel')"
+        :description="getCommonSyncString('onMyOwn')"
+      />
+      <KRadioButton
+        v-model="selected"
+        :buttonValue="Options.PUBLIC"
+        :label="$tr('advancedSetupLabel')"
+        :description="$tr('advancedSetupDescription')"
+      />
+    </KRadioButtonGroup>
   </OnboardingForm>
 
 </template>
diff --git a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/GuestAccessForm.vue b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/GuestAccessForm.vue
index 614dca6523b..0cf441064c3 100644
--- a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/GuestAccessForm.vue
+++ b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/GuestAccessForm.vue
@@ -9,20 +9,22 @@
     :eventOnGoBack="backEvent"
     @continue="handleContinue"
   >
-    <KRadioButton
-      ref="yesRadio"
-      v-model="setting"
-      :label="$tr('yesOptionLabel')"
-      :buttonValue="true"
-      :autofocus="setting"
-    />
-    <KRadioButton
-      ref="noRadio"
-      v-model="setting"
-      :label="$tr('noOptionLabel')"
-      :buttonValue="false"
-      :autofocus="!setting"
-    />
+    <KRadioButtonGroup>
+      <KRadioButton
+        ref="yesRadio"
+        v-model="setting"
+        :label="$tr('yesOptionLabel')"
+        :buttonValue="true"
+        :autofocus="setting"
+      />
+      <KRadioButton
+        ref="noRadio"
+        v-model="setting"
+        :label="$tr('noOptionLabel')"
+        :buttonValue="false"
+        :autofocus="!setting"
+      />
+    </KRadioButtonGroup>
     <p class="form">
       {{ $tr('changeLater') }}
     </p>
diff --git a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/HowAreYouUsingKolibri.vue b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/HowAreYouUsingKolibri.vue
index 1fff71c11d6..9a7d22dd98b 100644
--- a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/HowAreYouUsingKolibri.vue
+++ b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/HowAreYouUsingKolibri.vue
@@ -6,21 +6,23 @@
     :title="getCommonSyncString('howAreYouUsingKolibri')"
     @continue="handleContinue"
   >
-    <KRadioButton
-      v-model="selected"
-      style="margin-bottom: 1em"
-      :buttonValue="Presets.PERSONAL"
-      :label="$tr('onMyOwnLabel')"
-      :description="getCommonSyncString('onMyOwn')"
-      :autofocus="selected !== UsePresets.GROUP"
-    />
-    <KRadioButton
-      v-model="selected"
-      :buttonValue="UsePresets.GROUP"
-      :label="$tr('groupLearningLabel')"
-      :description="$tr('groupLearningDescription')"
-      :autofocus="selected === UsePresets.GROUP"
-    />
+    <KRadioButtonGroup>
+      <KRadioButton
+        v-model="selected"
+        style="margin-bottom: 1em"
+        :buttonValue="Presets.PERSONAL"
+        :label="$tr('onMyOwnLabel')"
+        :description="getCommonSyncString('onMyOwn')"
+        :autofocus="selected !== UsePresets.GROUP"
+      />
+      <KRadioButton
+        v-model="selected"
+        :buttonValue="UsePresets.GROUP"
+        :label="$tr('groupLearningLabel')"
+        :description="$tr('groupLearningDescription')"
+        :autofocus="selected === UsePresets.GROUP"
+      />
+    </KRadioButtonGroup>
   </OnboardingStepBase>
 
 </template>
diff --git a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/RequirePasswordForLearnersForm.vue b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/RequirePasswordForLearnersForm.vue
index bdb6bd1d179..98648eede11 100644
--- a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/RequirePasswordForLearnersForm.vue
+++ b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/RequirePasswordForLearnersForm.vue
@@ -8,22 +8,24 @@
     :eventOnGoBack="backEvent"
     @continue="handleContinue"
   >
-    <KRadioButton
-      ref="yesRadio"
-      v-model="setting"
-      class="radio-button"
-      :label="$tr('yesOptionLabel')"
-      :buttonValue="true"
-      :autofocus="setting"
-    />
-    <KRadioButton
-      ref="noRadio"
-      v-model="setting"
-      class="radio-button"
-      :label="$tr('noOptionLabel')"
-      :buttonValue="false"
-      :autofocus="!setting"
-    />
+    <KRadioButtonGroup>
+      <KRadioButton
+        ref="yesRadio"
+        v-model="setting"
+        class="radio-button"
+        :label="$tr('yesOptionLabel')"
+        :buttonValue="true"
+        :autofocus="setting"
+      />
+      <KRadioButton
+        ref="noRadio"
+        v-model="setting"
+        class="radio-button"
+        :label="$tr('noOptionLabel')"
+        :buttonValue="false"
+        :autofocus="!setting"
+      />
+    </KRadioButtonGroup>
     <p class="description">
       {{ getCommonSyncString('changeLater') }}
     </p>
diff --git a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/SetUpLearningFacilityForm.vue b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/SetUpLearningFacilityForm.vue
index 0a391ef0674..a42dc3e233c 100644
--- a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/SetUpLearningFacilityForm.vue
+++ b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/SetUpLearningFacilityForm.vue
@@ -5,20 +5,22 @@
     :description="$tr('setUpFacilityDescription')"
     @continue="handleContinue"
   >
-    <KRadioButton
-      v-model="selected"
-      :label="$tr('createFacilityLabel')"
-      :buttonValue="Options.NEW"
-      class="radio-button"
-      :autofocus="isNewFacilitySetup"
-    />
-    <KRadioButton
-      v-model="selected"
-      :label="$tr('importFacilityLabel')"
-      :buttonValue="Options.IMPORT"
-      class="radio-button"
-      :autofocus="isImportFacilitySetup"
-    />
+    <KRadioButtonGroup>
+      <KRadioButton
+        v-model="selected"
+        :label="$tr('createFacilityLabel')"
+        :buttonValue="Options.NEW"
+        class="radio-button"
+        :autofocus="isNewFacilitySetup"
+      />
+      <KRadioButton
+        v-model="selected"
+        :label="$tr('importFacilityLabel')"
+        :buttonValue="Options.IMPORT"
+        class="radio-button"
+        :autofocus="isImportFacilitySetup"
+      />
+    </KRadioButtonGroup>
     <SelectDeviceModalGroup
       v-if="showSelectAddressModal"
       :filterByOnMyOwnFacility="false"
diff --git a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/YesNoForm.vue b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/YesNoForm.vue
index 1b87a0afe3d..e7d55ddaa69 100644
--- a/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/YesNoForm.vue
+++ b/kolibri/plugins/setup_wizard/assets/src/views/onboarding-forms/YesNoForm.vue
@@ -6,20 +6,21 @@
     :description="description"
     @submit="emitSetting"
   >
-    <KRadioButton
-      ref="yesRadio"
-      v-model="setting"
-      :label="yesOptionLabel"
-      :buttonValue="true"
-    />
-    <KRadioButton
-      ref="noRadio"
-      v-model="setting"
-      :label="noOptionLabel"
-      :buttonValue="false"
-      :description="noOptionDescription"
-    />
-
+    <KRadioButtonGroup>
+      <KRadioButton
+        ref="yesRadio"
+        v-model="setting"
+        :label="yesOptionLabel"
+        :buttonValue="true"
+      />
+      <KRadioButton
+        ref="noRadio"
+        v-model="setting"
+        :label="noOptionLabel"
+        :buttonValue="false"
+        :description="noOptionDescription"
+      />
+    </KRadioButtonGroup>
     <template #footer>
       <p>
         {{ $tr('details') }}
diff --git a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/SelectFacility.vue b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/SelectFacility.vue
index dd3300b59b2..94f402e4988 100644
--- a/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/SelectFacility.vue
+++ b/kolibri/plugins/user_profile/assets/src/views/ChangeFacility/SelectFacility.vue
@@ -20,19 +20,20 @@
     <p v-if="hasFetched && !availableFacilities.length">
       {{ $tr('noFacilitiesText') }}
     </p>
-    <div
-      v-for="f in availableFacilities"
-      :key="`div-${f.id}`"
-    >
-      <KRadioButton
-        :key="f.id"
-        v-model="selectedFacilityId"
-        :buttonValue="f.id"
-        :label="formatNameAndId(f.name, f.id)"
-        :disabled="facilityDisabled(f)"
-      />
-    </div>
-
+    <KRadioButtonGroup>
+      <div
+        v-for="f in availableFacilities"
+        :key="`div-${f.id}`"
+      >
+        <KRadioButton
+          :key="f.id"
+          v-model="selectedFacilityId"
+          :buttonValue="f.id"
+          :label="formatNameAndId(f.name, f.id)"
+          :disabled="facilityDisabled(f)"
+        />
+      </div>
+    </KRadioButtonGroup>
     <KGrid
       :style="{
         marginTop: '34px',
diff --git a/packages/kolibri-common/components/MeteredConnectionNotificationModal.vue b/packages/kolibri-common/components/MeteredConnectionNotificationModal.vue
index 49c25cdb96e..9e83bdc511b 100644
--- a/packages/kolibri-common/components/MeteredConnectionNotificationModal.vue
+++ b/packages/kolibri-common/components/MeteredConnectionNotificationModal.vue
@@ -8,22 +8,25 @@
     @submit="submit"
   >
     <div>
-      <p>{{ $tr('modalDescription') }}</p>
-
-      <KRadioButton
-        v-model="selected"
-        :label="$tr('doNotUseMetered')"
-        :buttonValue="Options.DO_NOT_USE_METERED"
-        :disabled="loading"
-        class="radio-button"
-      />
-      <KRadioButton
-        v-model="selected"
-        :label="$tr('useMetered')"
-        :buttonValue="Options.USE_METERED"
-        :disabled="loading"
-        class="radio-button"
-      />
+      <p>
+        {{ $tr('modalDescription') }}
+      </p>
+      <KRadioButtonGroup>
+        <KRadioButton
+          v-model="selected"
+          :label="$tr('doNotUseMetered')"
+          :buttonValue="Options.DO_NOT_USE_METERED"
+          :disabled="loading"
+          class="radio-button"
+        />
+        <KRadioButton
+          v-model="selected"
+          :label="$tr('useMetered')"
+          :buttonValue="Options.USE_METERED"
+          :disabled="loading"
+          class="radio-button"
+        />
+      </KRadioButtonGroup>
     </div>
   </KModal>
 
diff --git a/packages/kolibri-common/components/UserTable/index.vue b/packages/kolibri-common/components/UserTable/index.vue
index 201ebe08519..4dcb03b2926 100644
--- a/packages/kolibri-common/components/UserTable/index.vue
+++ b/packages/kolibri-common/components/UserTable/index.vue
@@ -79,35 +79,165 @@
 
       <template #tbody>
         <tbody>
-          <tr
-            v-for="user in users"
-            :key="user.id"
-            :style="isSelectedStyle(user.id)"
-          >
-            <td>
-              <KCheckbox
-                v-if="selectable && enableMultipleSelection"
-                :disabled="disabled"
-                :checked="userIsSelected(user.id)"
-                class="user-checkbox"
-                data-test="userCheckbox"
-                @change="selectUser(user.id, $event)"
+          <KRadioButtonGroup v-if="selectable && !enableMultipleSelection">
+            <template v-if="users && users.length">
+              <tr
+                v-for="user in users"
+                :key="user.id"
+                :style="isSelectedStyle(user.id)"
               >
-                <KLabeledIcon
-                  :icon="isCoach ? 'coach' : 'person'"
-                  :label="user.full_name"
-                  data-test="fullName"
-                />
-                <UserTypeDisplay
-                  aria-hidden="true"
-                  :userType="user.kind"
-                  :omitLearner="true"
-                  class="role-badge"
-                  data-test="userRoleBadge"
-                  :class="$computedClass(userRoleBadgeStyle)"
-                />
-              </KCheckbox>
-              <!--
+                <td>
+                  <KCheckbox
+                    v-if="selectable && enableMultipleSelection"
+                    :disabled="disabled"
+                    :checked="userIsSelected(user.id)"
+                    class="user-checkbox"
+                    data-test="userCheckbox"
+                    @change="selectUser(user.id, $event)"
+                  >
+                    <KLabeledIcon
+                      :icon="isCoach ? 'coach' : 'person'"
+                      :label="user.full_name"
+                      data-test="fullName"
+                    />
+                    <UserTypeDisplay
+                      aria-hidden="true"
+                      :userType="user.kind"
+                      :omitLearner="true"
+                      class="role-badge"
+                      data-test="userRoleBadge"
+                      :class="$computedClass(userRoleBadgeStyle)"
+                    />
+                  </KCheckbox>
+                  <!--
+                  @MisRob: It's possible to pass `<label>` content to `KRadioButton`
+                  via the default slot, however it's not what this slot has been
+                  made for so doing so is hackish, even though resulting
+                  markup seems fine. To be able to do this, I also needed to pass
+                  the empty label to required `label` prop to avoid Vue warnings.
+                  I still find this to be better solution in regards to a11y than
+                  not providing label content. Reported related KDS issue
+                  https://github.com/learningequality/kolibri-design-system/issues/348
+                -->
+                  <KRadioButton
+                    v-else-if="selectable && !enableMultipleSelection"
+                    :disabled="disabled"
+                    :buttonValue="user.id"
+                    :currentValue="firstSelectedUser"
+                    :label="''"
+                    data-test="userRadioButton"
+                    @change="selectSingleUser(user.id)"
+                  >
+                    <!--
+                    override muted color in the disabled state with
+                    the normal text color in `style` (using `color`
+                    prop won't work for this purpose)
+                  -->
+                    <KLabeledIcon
+                      :icon="isCoach ? 'coach' : 'person'"
+                      :label="user.full_name"
+                      data-test="fullName"
+                      :style="{ color: $themeTokens.text }"
+                    />
+                    <UserTypeDisplay
+                      aria-hidden="true"
+                      :userType="user.kind"
+                      :omitLearner="true"
+                      class="role-badge"
+                      data-test="userRoleBadge"
+                      :class="$computedClass(userRoleBadgeStyle)"
+                    />
+                  </KRadioButton>
+                  <template v-else>
+                    <KLabeledIcon
+                      :icon="isCoach ? 'coach' : 'person'"
+                      :label="user.full_name"
+                      :style="{ color: $themeTokens.text }"
+                      data-test="fullName"
+                    />
+                    <UserTypeDisplay
+                      aria-hidden="true"
+                      :userType="user.kind"
+                      :omitLearner="true"
+                      class="role-badge"
+                      data-test="userRoleBadge"
+                      :class="$computedClass(userRoleBadgeStyle)"
+                    />
+                  </template>
+                </td>
+                <td
+                  class="visuallyhidden"
+                  data-test="userRoleLabel"
+                >
+                  {{ typeDisplayMap[user.kind] }}
+                </td>
+                <td
+                  data-test="username"
+                  :style="{ color: $themeTokens.text }"
+                >
+                  <span dir="auto">
+                    {{ user.username }}
+                  </span>
+                </td>
+                <template v-if="showDemographicInfo">
+                  <td class="id-col">
+                    <KOptionalText :text="user.id_number ? user.id_number : ''" />
+                  </td>
+                  <td>
+                    <GenderDisplayText :gender="user.gender" />
+                  </td>
+                  <td>
+                    <BirthYearDisplayText :birthYear="user.birth_year" />
+                  </td>
+                </template>
+                <td v-if="$scopedSlots.info">
+                  <slot
+                    name="info"
+                    :user="user"
+                  ></slot>
+                </td>
+                <td
+                  v-if="$scopedSlots.action"
+                  class="core-table-button-col"
+                >
+                  <slot
+                    name="action"
+                    :user="user"
+                  ></slot>
+                </td>
+              </tr>
+            </template>
+          </KRadioButtonGroup>
+          <template v-else>
+            <tr
+              v-for="user in users"
+              :key="user.id"
+              :style="isSelectedStyle(user.id)"
+            >
+              <td>
+                <KCheckbox
+                  v-if="selectable && enableMultipleSelection"
+                  :disabled="disabled"
+                  :checked="userIsSelected(user.id)"
+                  class="user-checkbox"
+                  data-test="userCheckbox"
+                  @change="selectUser(user.id, $event)"
+                >
+                  <KLabeledIcon
+                    :icon="isCoach ? 'coach' : 'person'"
+                    :label="user.full_name"
+                    data-test="fullName"
+                  />
+                  <UserTypeDisplay
+                    aria-hidden="true"
+                    :userType="user.kind"
+                    :omitLearner="true"
+                    class="role-badge"
+                    data-test="userRoleBadge"
+                    :class="$computedClass(userRoleBadgeStyle)"
+                  />
+                </KCheckbox>
+                <!--
                 @MisRob: It's possible to pass `<label>` content to `KRadioButton`
                 via the default slot, however it's not what this slot has been
                 made for so doing so is hackish, even though resulting
@@ -117,93 +247,94 @@
                 not providing label content. Reported related KDS issue
                 https://github.com/learningequality/kolibri-design-system/issues/348
               -->
-              <KRadioButton
-                v-else-if="selectable && !enableMultipleSelection"
-                :disabled="disabled"
-                :buttonValue="user.id"
-                :currentValue="firstSelectedUser"
-                :label="''"
-                data-test="userRadioButton"
-                @change="selectSingleUser(user.id)"
-              >
-                <!--
+                <KRadioButton
+                  v-else-if="selectable && !enableMultipleSelection"
+                  :disabled="disabled"
+                  :buttonValue="user.id"
+                  :currentValue="firstSelectedUser"
+                  :label="''"
+                  data-test="userRadioButton"
+                  @change="selectSingleUser(user.id)"
+                >
+                  <!--
                   override muted color in the disabled state with
                   the normal text color in `style` (using `color`
                   prop won't work for this purpose)
                 -->
-                <KLabeledIcon
-                  :icon="isCoach ? 'coach' : 'person'"
-                  :label="user.full_name"
-                  data-test="fullName"
-                  :style="{ color: $themeTokens.text }"
-                />
-                <UserTypeDisplay
-                  aria-hidden="true"
-                  :userType="user.kind"
-                  :omitLearner="true"
-                  class="role-badge"
-                  data-test="userRoleBadge"
-                  :class="$computedClass(userRoleBadgeStyle)"
-                />
-              </KRadioButton>
-              <template v-else>
-                <KLabeledIcon
-                  :icon="isCoach ? 'coach' : 'person'"
-                  :label="user.full_name"
-                  :style="{ color: $themeTokens.text }"
-                  data-test="fullName"
-                />
-                <UserTypeDisplay
-                  aria-hidden="true"
-                  :userType="user.kind"
-                  :omitLearner="true"
-                  class="role-badge"
-                  data-test="userRoleBadge"
-                  :class="$computedClass(userRoleBadgeStyle)"
-                />
-              </template>
-            </td>
-            <td
-              class="visuallyhidden"
-              data-test="userRoleLabel"
-            >
-              {{ typeDisplayMap[user.kind] }}
-            </td>
-            <td
-              data-test="username"
-              :style="{ color: $themeTokens.text }"
-            >
-              <span dir="auto">
-                {{ user.username }}
-              </span>
-            </td>
-            <template v-if="showDemographicInfo">
-              <td class="id-col">
-                <KOptionalText :text="user.id_number ? user.id_number : ''" />
+                  <KLabeledIcon
+                    :icon="isCoach ? 'coach' : 'person'"
+                    :label="user.full_name"
+                    data-test="fullName"
+                    :style="{ color: $themeTokens.text }"
+                  />
+                  <UserTypeDisplay
+                    aria-hidden="true"
+                    :userType="user.kind"
+                    :omitLearner="true"
+                    class="role-badge"
+                    data-test="userRoleBadge"
+                    :class="$computedClass(userRoleBadgeStyle)"
+                  />
+                </KRadioButton>
+                <template v-else>
+                  <KLabeledIcon
+                    :icon="isCoach ? 'coach' : 'person'"
+                    :label="user.full_name"
+                    :style="{ color: $themeTokens.text }"
+                    data-test="fullName"
+                  />
+                  <UserTypeDisplay
+                    aria-hidden="true"
+                    :userType="user.kind"
+                    :omitLearner="true"
+                    class="role-badge"
+                    data-test="userRoleBadge"
+                    :class="$computedClass(userRoleBadgeStyle)"
+                  />
+                </template>
               </td>
-              <td>
-                <GenderDisplayText :gender="user.gender" />
+              <td
+                class="visuallyhidden"
+                data-test="userRoleLabel"
+              >
+                {{ typeDisplayMap[user.kind] }}
               </td>
-              <td>
-                <BirthYearDisplayText :birthYear="user.birth_year" />
+              <td
+                data-test="username"
+                :style="{ color: $themeTokens.text }"
+              >
+                <span dir="auto">
+                  {{ user.username }}
+                </span>
               </td>
-            </template>
-            <td v-if="$scopedSlots.info">
-              <slot
-                name="info"
-                :user="user"
-              ></slot>
-            </td>
-            <td
-              v-if="$scopedSlots.action"
-              class="core-table-button-col"
-            >
-              <slot
-                name="action"
-                :user="user"
-              ></slot>
-            </td>
-          </tr>
+              <template v-if="showDemographicInfo">
+                <td class="id-col">
+                  <KOptionalText :text="user.id_number ? user.id_number : ''" />
+                </td>
+                <td>
+                  <GenderDisplayText :gender="user.gender" />
+                </td>
+                <td>
+                  <BirthYearDisplayText :birthYear="user.birth_year" />
+                </td>
+              </template>
+              <td v-if="$scopedSlots.info">
+                <slot
+                  name="info"
+                  :user="user"
+                ></slot>
+              </td>
+              <td
+                v-if="$scopedSlots.action"
+                class="core-table-button-col"
+              >
+                <slot
+                  name="action"
+                  :user="user"
+                ></slot>
+              </td>
+            </tr>
+          </template>
         </tbody>
       </template>
     </CoreTable>
diff --git a/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/SelectDeviceForm.vue b/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/SelectDeviceForm.vue
index 7676aa00578..e6f7ebdb750 100644
--- a/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/SelectDeviceForm.vue
+++ b/packages/kolibri-common/components/syncComponentSet/SelectDeviceModalGroup/SelectDeviceForm.vue
@@ -32,26 +32,28 @@
       </UiAlert>
 
       <!-- Static Devices -->
-      <template v-for="(d, idx) in savedDevices">
-        <div :key="`div-${idx}`">
-          <KRadioButton
-            :key="idx"
-            v-model="selectedDeviceId"
-            class="radio-button"
-            :buttonValue="d.id"
-            :label="d.nickname"
-            :description="d.base_url"
-            :disabled="formDisabled || !isDeviceAvailable(d.id)"
-          />
-          <KButton
-            :key="`forget-${idx}`"
-            :text="coreString('removeAction')"
-            class="remove-device-button"
-            appearance="basic-link"
-            @click="removeSavedDevice(d.id)"
-          />
-        </div>
-      </template>
+      <KRadioButtonGroup>
+        <template v-for="(d, idx) in savedDevices">
+          <div :key="`div-${idx}`">
+            <KRadioButton
+              :key="idx"
+              v-model="selectedDeviceId"
+              class="radio-button"
+              :buttonValue="d.id"
+              :label="d.nickname"
+              :description="d.base_url"
+              :disabled="formDisabled || !isDeviceAvailable(d.id)"
+            />
+            <KButton
+              :key="`forget-${idx}`"
+              :text="coreString('removeAction')"
+              class="remove-device-button"
+              appearance="basic-link"
+              @click="removeSavedDevice(d.id)"
+            />
+          </div>
+        </template>
+      </KRadioButtonGroup>
 
       <hr
         v-if="savedDevices.length > 0 && discoveredDevices.length > 0"
@@ -59,19 +61,21 @@
       >
 
       <!-- Dynamic Devices -->
-      <template v-for="d in discoveredDevices">
-        <div :key="`div-${d.id}`">
-          <KRadioButton
-            :key="d.id"
-            v-model="selectedDeviceId"
-            class="radio-button"
-            :buttonValue="d.instance_id"
-            :label="formatNameAndId(d.device_name, d.id)"
-            :description="formatBaseDevice(d)"
-            :disabled="formDisabled || fetchFailed || !isDeviceAvailable(d.id)"
-          />
-        </div>
-      </template>
+      <KRadioButtonGroup>
+        <template v-for="d in discoveredDevices">
+          <div :key="`div-${d.id}`">
+            <KRadioButton
+              :key="d.id"
+              v-model="selectedDeviceId"
+              class="radio-button"
+              :buttonValue="d.instance_id"
+              :label="formatNameAndId(d.device_name, d.id)"
+              :description="formatBaseDevice(d)"
+              :disabled="formDisabled || fetchFailed || !isDeviceAvailable(d.id)"
+            />
+          </div>
+        </template>
+      </KRadioButtonGroup>
     </template>
 
     <template #actions>
diff --git a/packages/kolibri-common/components/syncComponentSet/SelectSyncSourceModal.vue b/packages/kolibri-common/components/syncComponentSet/SelectSyncSourceModal.vue
index 39a5cd4302b..f5f59ca3f8f 100644
--- a/packages/kolibri-common/components/syncComponentSet/SelectSyncSourceModal.vue
+++ b/packages/kolibri-common/components/syncComponentSet/SelectSyncSourceModal.vue
@@ -6,21 +6,23 @@
     @submit="handleSubmit"
     @cancel="handleCancel"
   >
-    <KRadioButton
-      v-model="source"
-      :label="$tr('dataPortalLabel')"
-      :buttonValue="SyncSources.PORTAL"
-      :disabled="portalIsOffline || formIsDisabled"
-      :autofocus="!portalIsOffline"
-      :description="$tr('dataPortalDescription')"
-    />
-    <KRadioButton
-      v-model="source"
-      :label="$tr('localNetworkLabel')"
-      :buttonValue="SyncSources.PEER"
-      :disabled="formIsDisabled"
-      :description="$tr('localNetworkDescription')"
-    />
+    <KRadioButtonGroup>
+      <KRadioButton
+        v-model="source"
+        :label="$tr('dataPortalLabel')"
+        :buttonValue="SyncSources.PORTAL"
+        :disabled="portalIsOffline || formIsDisabled"
+        :autofocus="!portalIsOffline"
+        :description="$tr('dataPortalDescription')"
+      />
+      <KRadioButton
+        v-model="source"
+        :label="$tr('localNetworkLabel')"
+        :buttonValue="SyncSources.PEER"
+        :disabled="formIsDisabled"
+        :description="$tr('localNetworkDescription')"
+      />
+    </KRadioButtonGroup>
   </SelectSourceModal>
 
 </template>