diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
index f4c4117f73..5e860ef197 100644
--- a/src/components/NcAppSidebar/NcAppSidebar.vue
+++ b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -158,19 +158,19 @@ export default {
 	<NcAppSidebar
 		title="cat-picture.jpg"
 		subtitle="last edited 3 weeks ago">
-		<NcAppSidebarTab name="Search" id="search-tab" order="3">
+		<NcAppSidebarTab name="Search" id="search-tab" :order="3">
 			<template #icon>
 				<Magnify :size="20" />
 			</template>
 			Search tab content
 		</NcAppSidebarTab>
-		<NcAppSidebarTab name="Settings" id="settings-tab" order="2">
+		<NcAppSidebarTab name="Settings" id="settings-tab" :order="2">
 			<template #icon>
 				<Cog :size="20" />
 			</template>
 			Settings tab content
 		</NcAppSidebarTab>
-		<NcAppSidebarTab name="Sharing" id="share-tab" order="1">
+		<NcAppSidebarTab name="Sharing" id="share-tab" :order="1">
 			<template #icon>
 				<ShareVariant :size="20" />
 			</template>
diff --git a/src/components/NcAppSidebar/NcAppSidebarTabs.vue b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
index b3f32fb884..5afe46719c 100644
--- a/src/components/NcAppSidebar/NcAppSidebarTabs.vue
+++ b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
@@ -3,8 +3,9 @@
   - @copyright Copyright (c) 2020 Simon Belbeoch <simon.belbeoch@gmail.com>
   -
   - @author John Molakvoæ <skjnldsv@protonmail.com>
+  - @author Ferdinand Thiessen <opensource@fthiessen.de>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -37,24 +38,25 @@
 			@keydown.end.exact.prevent="focusLastTab"
 			@keydown.33.exact.prevent="focusFirstTab"
 			@keydown.34.exact.prevent="focusLastTab">
-			<ul>
-				<li v-for="tab in tabs" :key="tab.id" class="app-sidebar-tabs__tab">
-					<a :id="tab.id"
-						:aria-controls="`tab-${tab.id}`"
-						:aria-selected="activeTab === tab.id"
-						:class="{ active: activeTab === tab.id }"
-						:data-id="tab.id"
-						:href="`#tab-${tab.id}`"
-						:tabindex="activeTab === tab.id ? 0 : -1"
-						role="tab"
-						@click.prevent="setActive(tab.id)">
-						<span class="app-sidebar-tabs__tab-icon">
-							<NcVNodes :vnodes="tab.renderIcon()" />
-						</span>
-						{{ tab.name }}
-					</a>
-				</li>
-			</ul>
+			<NcCheckboxRadioSwitch v-for="tab in tabs"
+				:key="tab.id"
+				:aria-controls="`tab-${tab.id}`"
+				:aria-selected="activeTab === tab.id"
+				:button-variant="true"
+				:checked="activeTab === tab.id"
+				:data-id="tab.id"
+				:tabindex="activeTab === tab.id ? 0 : -1"
+				button-variant-grouped="horizontal"
+				class="app-sidebar-tabs__tab"
+				:class="{ active: tab.id === activeTab }"
+				role="tab"
+				type="radio"
+				@update:checked="setActive(tab.id)">
+				{{ tab.name }}
+				<template #icon>
+					<NcVNodes :vnodes="tab.renderIcon()" />
+				</template>
+			</NcCheckboxRadioSwitch>
 		</nav>
 
 		<!-- tabs content -->
@@ -68,11 +70,13 @@
 
 <script>
 import NcVNodes from '../NcVNodes/index.js'
+import NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/index.js'
 
 export default {
 	name: 'NcAppSidebarTabs',
 
 	components: {
+		NcCheckboxRadioSwitch,
 		NcVNodes,
 	},
 
@@ -193,7 +197,7 @@ export default {
 		 * Focus the current active tab
 		 */
 		focusActiveTab() {
-			this.$el.querySelector('#' + this.activeTab).focus()
+			this.$el.querySelector(`[data-id="${this.activeTab}"]`).focus()
 		},
 
 		/**
@@ -259,74 +263,16 @@ export default {
 	flex: 1 1 100%;
 
 	&__nav {
+		display: flex;
+		justify-content: stretch;
 		margin-top: 10px;
-		ul {
-			display: flex;
-			justify-content: stretch;
-		}
+		padding: 0 4px;
 	}
+
 	&__tab {
-		display: block;
 		flex: 1 1;
-		min-width: 0;
-		text-align: center;
-		a {
-			position: relative;
-			display: block;
-			overflow: hidden;
-			padding: 25px 5px 5px 5px;
-			transition: color var(--animation-quick), opacity var(--animation-quick), border-color var(--animation-quick);
-			text-align: center;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			opacity: $opacity_normal;
-			color: var(--color-main-text);
-			border-bottom: 1px solid var(--color-border);
-
-			&:hover,
-			&:focus,
-			&:active,
-			&.active {
-				opacity: $opacity_full;
-				.app-sidebar-tabs__tab-icon {
-					opacity: $opacity_full;
-				}
-			}
-			&:not(.active):hover,
-			&:not(.active):focus {
-				border-bottom-color: var(--color-background-darker);
-				box-shadow: inset 0 -1px 0 var(--color-background-darker);
-			}
-			&.active {
-				color: var(--color-main-text);
-				border-bottom-color: var(--color-main-text);
-				box-shadow: inset 0 -1px 0 var(--color-main-text);
-				font-weight: bold;
-			}
-			// differentiate the two for accessibility purpose
-			// make sure the user knows she's focusing the navigation
-			// and can use arrows/home/pageup...
-			&:focus {
-				border-bottom-color: var(--color-primary-element);
-				box-shadow: inset 0 -1px 0 var(--color-primary-element);
-			}
-		}
-	}
-
-	&__tab-icon {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 25px;
-		transition: opacity var(--animation-quick);
-		opacity: $opacity_normal;
-
-		& > span {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			background-size: 16px;
+		&.active {
+			color: var(--color-primary);
 		}
 	}
 
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
index d947fd9539..7597b70fe6 100644
--- a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
+++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -2,8 +2,9 @@
   - @copyright Copyright (c) 2021 John Molakvoæ <skjnldsv@protonmail.com>
   -
   - @author John Molakvoæ <skjnldsv@protonmail.com>
+  - @author Ferdinand Thiessen <opensource@fthiessen.de>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -85,9 +86,48 @@ export default {
 ```vue
 <template>
 	<div>
-		<NcCheckboxRadioSwitch :checked.sync="sharingPermission" value="r" name="sharing_permission_radio" type="radio" :button-variant="true" button-variant-grouped="vertical">Default permission read</NcCheckboxRadioSwitch>
-		<NcCheckboxRadioSwitch :checked.sync="sharingPermission" value="rw" name="sharing_permission_radio" type="radio" :button-variant="true" button-variant-grouped="vertical">Default permission read+write</NcCheckboxRadioSwitch>
-		<br>
+		<h4>Horizontal</h4>
+		<div style="display: flex">
+			<NcCheckboxRadioSwitch
+				:button-variant="true"
+				:checked.sync="sharingPermission"
+				value="r"
+				name="sharing_permission_radio"
+				type="radio"
+				button-variant-grouped="horizontal">
+				Default permission read
+			</NcCheckboxRadioSwitch>
+			<NcCheckboxRadioSwitch
+				:button-variant="true"
+				:checked.sync="sharingPermission"
+				value="rw"
+				name="sharing_permission_radio"
+				type="radio"
+				button-variant-grouped="horizontal">
+				Default permission read+write
+			</NcCheckboxRadioSwitch>
+		</div>
+		<h4>Vertically</h4>
+		<div style="width: fit-content">
+			<NcCheckboxRadioSwitch
+				:button-variant="true"
+				:checked.sync="sharingPermission"
+				value="r"
+				name="sharing_permission_radio"
+				type="radio"
+				button-variant-grouped="vertical">
+				Default permission read
+			</NcCheckboxRadioSwitch>
+			<NcCheckboxRadioSwitch
+				:button-variant="true"
+				:checked.sync="sharingPermission"
+				value="rw"
+				name="sharing_permission_radio"
+				type="radio"
+				button-variant-grouped="vertical">
+				Default permission read+write
+			</NcCheckboxRadioSwitch>
+		</div>
 		sharingPermission: {{ sharingPermission }}
 	</div>
 </template>
@@ -160,21 +200,30 @@ export default {
 		}"
 		:style="cssVars"
 		class="checkbox-radio-switch">
+		<input :id="id"
+			:checked="isChecked"
+			:disabled="disabled"
+			:indeterminate="indeterminate"
+			:name="name"
+			:type="inputType"
+			:value="value"
+			class="checkbox-radio-switch__input"
+			@change="onToggle">
 		<label :for="id" class="checkbox-radio-switch__label">
-			<input :id="id"
-				:checked="isChecked"
-				:disabled="disabled"
-				:indeterminate="indeterminate"
-				:name="name"
-				:type="inputType"
-				:value="value"
-				class="checkbox-radio-switch__input"
-				@change="onToggle">
-			<NcLoadingIcon v-if="loading" class="checkbox-radio-switch__icon" />
-			<component :is="checkboxRadioIconElement"
-				v-else-if="!buttonVariant"
-				:size="size"
-				class="checkbox-radio-switch__icon" />
+			<div class="checkbox-radio-switch__icon">
+				<!-- @slot The checkbox/radio icon, you can use it for adding an icon to the button variant
+						@binding {bool} checked The input checked state
+						@binding {bool} loading The loading state
+				-->
+				<slot name="icon"
+					:checked="isChecked"
+					:loading="loading">
+					<NcLoadingIcon v-if="loading" />
+					<component :is="checkboxRadioIconElement"
+						v-else-if="!buttonVariant"
+						:size="size" />
+				</slot>
+			</div>
 
 			<!-- @slot The checkbox/radio label -->
 			<slot />
@@ -468,7 +517,6 @@ $spacing: 4px;
 
 	&__label {
 		display: flex;
-		position: relative;
 		align-items: center;
 		user-select: none;
 		min-height: $clickable-area;
@@ -481,7 +529,7 @@ $spacing: 4px;
 		}
 	}
 
-	&__icon {
+	&__icon > * {
 		margin-right: $spacing;
 		// Remove the left margin of material design icons to align text
 		margin-left: -2px;
@@ -492,75 +540,104 @@ $spacing: 4px;
 
 	&--disabled &__label {
 		opacity: $opacity_disabled;
-		.checkbox-radio-switch__icon {
+		.checkbox-radio-switch__icon > * {
 			color: var(--color-main-text)
 		}
 	}
 
-	&:not(&--disabled) &__label:hover,
-	&:not(&--disabled) &__label:focus-within {
-		background-color: var(--color-primary-light);
+	&:not(&--disabled, &--checked):focus-within &__label,
+	&:not(&--disabled, &--checked) &__label:hover {
+		background-color: var(--color-background-hover);
+	}
+
+	&--checked:not(&--disabled):focus-within &__label,
+	&--checked:not(&--disabled) &__label:hover {
+		background-color: var(--color-primary-light-hover);
 	}
 
 	// Switch specific rules
-	&-switch:not(&--checked) &__icon {
+	&-switch:not(&--checked) &__icon > * {
 		color: var(--color-text-maxcontrast);
 	}
 
 	// If switch is checked AND disabled, use the fade primary colour
-	&-switch.checkbox-radio-switch--disabled.checkbox-radio-switch--checked &__icon {
+	&-switch.checkbox-radio-switch--disabled.checkbox-radio-switch--checked &__icon > * {
 		color: var(--color-primary-element-light);
 	}
 
+	$border-radius: calc(var(--default-clickable-area) / 2);
+	// keep inner border width in mind
+	$border-radius-outer: calc($border-radius + 2px);
+
 	&--button-variant &__label {
-		border-radius: 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
 		width: 100%;
 		margin: 0;
 	}
+	&--button-variant:not(&--button-variant-h-grouped) &__label {
+		align-items: flex-start;
+	}
+
+	&--button-variant:not(&--checked) &__icon > * {
+		color: var(--color-main-text);
+	}
+	&--button-variant &__icon {
+		flex-basis: 100%;
+
+		// Hide icon container if empty to remove virtual padding
+		&:empty {
+			display: none;
+		}
+	}
 
-	&--button-variant:not(&--button-variant-v-grouped):not(&--button-variant-h-grouped) {
-		border-radius: var(--border-radius-large);
+	&--button-variant:not(&--button-variant-v-grouped):not(&--button-variant-h-grouped),
+	&--button-variant &__label {
+		border-radius: $border-radius;
 	}
 
 	&--button-variant-v-grouped {
 		&:first-of-type {
-			border-top-left-radius: var(--border-radius-large);
-			border-top-right-radius: var(--border-radius-large);
+			border-top-left-radius: $border-radius-outer;
+			border-top-right-radius: $border-radius-outer;
 		}
 		&:last-of-type {
-			border-bottom-left-radius: var(--border-radius-large);
-			border-bottom-right-radius: var(--border-radius-large);
+			border-bottom-left-radius: $border-radius-outer;
+			border-bottom-right-radius: $border-radius-outer;
 		}
 
-		// avoid double borders between elements
-		& + &:not(&.checkbox-radio-switch--checked) {
-			border-top: 0;
+		// remove borders between elements
+		&:not(:last-of-type) {
+			border-bottom: 0!important;
+			.checkbox-radio-switch__label {
+				margin-bottom: 2px;
+			}
 		}
-		& + &.checkbox-radio-switch--checked {
-			// as the selected element has all borders:
-			// small trick to cover the previous bottom border (only if there is one)
-			margin-top: -2px;
+		&:not(:first-of-type) {
+			border-top: 0!important;
 		}
 	}
 
 	&--button-variant-h-grouped {
 		&:first-of-type {
-			border-top-left-radius: var(--border-radius-large);
-			border-bottom-left-radius: var(--border-radius-large);
+			border-top-left-radius: $border-radius-outer;
+			border-bottom-left-radius: $border-radius-outer;
 		}
 		&:last-of-type {
-			border-top-right-radius: var(--border-radius-large);
-			border-bottom-right-radius: var(--border-radius-large);
+			border-top-right-radius: $border-radius-outer;
+			border-bottom-right-radius: $border-radius-outer;
 		}
 
-		// avoid double borders between elements
-		& + &:not(&.checkbox-radio-switch--checked) {
-			border-left: 0;
+		// remove borders between elements
+		&:not(:last-of-type) {
+			border-right: 0!important;
+			.checkbox-radio-switch__label {
+				margin-right: 2px;
+			}
 		}
-		& + &.checkbox-radio-switch--checked {
-			// as the selected element has all borders:
-			// small trick to cover the previous bottom border (only if there is one)
-			margin-left: -2px;
+		&:not(:first-of-type) {
+			border-left: 0!important;
 		}
 	}
 
@@ -569,16 +646,15 @@ $spacing: 4px;
 		// better than setting border-radius on labels (producing a small gap)
 		overflow: hidden;
 
+		&__label {
+			text-overflow: ellipsis;
+		}
+
 		&--checked {
 			font-weight: bold;
-			border: 2px solid var(--color-primary-element-light);
-
-			&:hover {
-				border: 2px solid var(--color-primary);
-			}
 
 			label {
-				background-color: var(--color-background-dark);
+				background-color: var(--color-primary-light);
 			}
 		}
 	}
diff --git a/tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js b/tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js
index 2f20724c31..9d8c6aeb98 100644
--- a/tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js
+++ b/tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js
@@ -107,6 +107,7 @@ describe('NcAppSidebarTabs.vue', () => {
 					// used to register custom components
 						NcAppSidebarTab,
 					},
+					attachTo: document.body,
 				})
 			})
 			it('Issues no warning.', () => {
@@ -115,22 +116,22 @@ describe('NcAppSidebarTabs.vue', () => {
 			it('display the nav element', () => {
 				expect(wrapper.find('nav').exists()).toBe(true)
 			})
-			it('display all the 3 elements in li', () => {
-				const liList = wrapper.findAll('nav>ul>li')
+			it('display all the 3 elements', () => {
+				const liList = wrapper.findAll('nav>.checkbox-radio-switch')
 				expect(liList.length).toEqual(3)
 			})
 			it('emit "update:active" event with the selected tab id when clicking on a tab', () => {
-				const lastLink = wrapper.find('nav>ul>li:last-of-type>a')
+				const lastLink = wrapper.find('nav>.checkbox-radio-switch:last-of-type>label')
 				lastLink.trigger('click')
 				expect(wrapper.emitted('update:active')[0]).toEqual(['last'])
 			})
 			it('emit "update:active" event with the first tab id when keydown pageup is pressed', () => {
-				const lastLink = wrapper.find('nav>ul>li:last-of-type>a')
+				const lastLink = wrapper.find('nav>.checkbox-radio-switch:last-of-type>label')
 				lastLink.trigger('keydown.pageup')
 				expect(wrapper.emitted('update:active')[0]).toEqual(['first'])
 			})
 			it('emit "update:active" event with the last tab id when keydown pagedown is pressed', () => {
-				const lastLink = wrapper.find('nav>ul>li:last-of-type>a')
+				const lastLink = wrapper.find('nav>.checkbox-radio-switch:last-of-type>label')
 				lastLink.trigger('keydown.pagedown')
 				expect(wrapper.emitted('update:active')[0]).toEqual(['last'])
 			})
@@ -140,12 +141,12 @@ describe('NcAppSidebarTabs.vue', () => {
 				})
 				it('does not emit "update:active" event when keydown left is pressed', () => {
 					expect(wrapper.emitted('update:active')).toBeFalsy()
-					const firstLink = wrapper.find('nav>ul>li>a')
+					const firstLink = wrapper.find('nav>.checkbox-radio-switch>label')
 					firstLink.trigger('keydown.left')
 					expect(wrapper.emitted('update:active')).toBeFalsy()
 				})
 				it('emit "update:active" event with the next tab id when keydown right is pressed', () => {
-					const firstLink = wrapper.find('nav>ul>li>a')
+					const firstLink = wrapper.find('nav>.checkbox-radio-switch>label')
 					firstLink.trigger('keydown.right')
 					expect(wrapper.emitted('update:active')[0]).toEqual(['second'])
 				})
@@ -155,13 +156,13 @@ describe('NcAppSidebarTabs.vue', () => {
 					wrapper.setData({ activeTab: 'last' })
 				})
 				it('emit "update:active" event with the previous tab id when keydown left is pressed', () => {
-					const lastLink = wrapper.find('nav>ul>li:last-of-type>a')
+					const lastLink = wrapper.find('nav>.checkbox-radio-switch:last-of-type>label')
 					lastLink.trigger('keydown.left')
 					expect(wrapper.emitted('update:active')[0]).toEqual(['second'])
 				})
 				it('does not emit "update:active" event when keydown right is pressed', () => {
 					expect(wrapper.emitted('update:active')).toBeFalsy()
-					const lastLink = wrapper.find('nav>ul>li:last-of-type>a')
+					const lastLink = wrapper.find('nav>.checkbox-radio-switch:last-of-type>label')
 					lastLink.trigger('keydown.right')
 					expect(wrapper.emitted('update:active')).toBeFalsy()
 				})