diff --git a/frontend/dashboard/package.json b/frontend/dashboard/package.json
index 369c44570..a544f1a2d 100644
--- a/frontend/dashboard/package.json
+++ b/frontend/dashboard/package.json
@@ -15,10 +15,12 @@
     "@tabler/icons-vue": "^2.24.0",
     "@tanstack/vue-query": "^4.24.10",
     "@twir/grpc": "workspace:^",
+    "@types/lodash.chunk": "^4.2.7",
     "@vueuse/components": "^10.2.1",
     "@vueuse/core": "^9.13.0",
     "date-fns": "^2.30.0",
     "grid-layout-plus": "^1.0.2",
+    "lodash.chunk": "^4.2.0",
     "naive-ui": "^2.34.4",
     "plyr": "^3.7.8",
     "vue": "^3.3.4",
diff --git a/frontend/dashboard/src/components/commands/modal.vue b/frontend/dashboard/src/components/commands/modal.vue
index b1e9278d5..a333e0ed6 100644
--- a/frontend/dashboard/src/components/commands/modal.vue
+++ b/frontend/dashboard/src/components/commands/modal.vue
@@ -1,5 +1,6 @@
 <script setup lang='ts'>
-import { IconArrowNarrowDown, IconArrowNarrowUp, IconPlus, IconShieldHalfFilled, IconTrash } from '@tabler/icons-vue';
+import { IconArrowNarrowDown, IconArrowNarrowUp, IconPlus, IconSquareCheck, IconSquare, IconTrash } from '@tabler/icons-vue';
+import chunk from 'lodash.chunk';
 import {
 	type FormInst,
 	type FormItemRule,
@@ -22,6 +23,7 @@ import {
 	NSpace,
 	NSwitch,
 	NText,
+	NButtonGroup,
 } from 'naive-ui';
 import { computed, onMounted, reactive, ref, toRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -269,38 +271,49 @@ async function save() {
 		</n-divider>
 
 		<n-form-item :label="t('commands.modal.permissions.name')" path="rolesIds">
-			<n-select
-				v-model:value="formValue.rolesIds"
-				multiple
-				:options="rolesSelectOptions"
-				:loading="roles.isLoading.value"
-				:placeholder="t('commands.modal.permissions.placeholder')"
-			>
-				<template #arrow>
-					<IconShieldHalfFilled />
-				</template>
-			</n-select>
+			<div style="display: flex; flex-direction: column; gap: 5px;">
+				<n-button-group
+					v-for="(group, index) of chunk(rolesSelectOptions.sort(), 5)"
+					:key="index"
+				>
+					<n-button
+						v-for="option of group"
+						:key="option.value"
+						:type="formValue.rolesIds.includes(option.value) ? 'success' : 'default'"
+						secondary
+						@click="() => {
+							if (formValue.rolesIds.includes(option.value)) {
+								formValue.rolesIds = formValue.rolesIds.filter(r => r !== option.value)
+							} else {
+								formValue.rolesIds.push(option.value)
+							}
+						}"
+					>
+						<template #icon>
+							<IconSquareCheck v-if="formValue.rolesIds.includes(option.value)" />
+							<IconSquare v-else />
+						</template>
+						{{ option.label }}
+					</n-button>
+				</n-button-group>
+			</div>
 		</n-form-item>
 
-		<n-grid cols="1 s:2 m:2 l:2" responsive="screen" :x-gap="5">
-			<n-grid-item :span="1">
-				<n-form-item :label="t('commands.modal.permissions.deniedUsers')" path="deniedUsersIds">
-					<twitch-users-multiple
-						v-model="formValue.deniedUsersIds"
-						:initial-users-ids="formValue.deniedUsersIds"
-					/>
-				</n-form-item>
-			</n-grid-item>
 
-			<n-grid-item :span="1">
-				<n-form-item :label="t('commands.modal.permissions.allowedUsers')" path="allowedUsersIds">
-					<twitch-users-multiple
-						v-model="formValue.allowedUsersIds"
-						:initial-users-ids="formValue.allowedUsersIds"
-					/>
-				</n-form-item>
-			</n-grid-item>
-		</n-grid>
+
+		<n-form-item :label="t('commands.modal.permissions.deniedUsers')" path="deniedUsersIds">
+			<twitch-users-multiple
+				v-model="formValue.deniedUsersIds"
+				:initial-users-ids="formValue.deniedUsersIds"
+			/>
+		</n-form-item>
+
+		<n-form-item :label="t('commands.modal.permissions.allowedUsers')" path="allowedUsersIds">
+			<twitch-users-multiple
+				v-model="formValue.allowedUsersIds"
+				:initial-users-ids="formValue.allowedUsersIds"
+			/>
+		</n-form-item>
 
 		<n-divider>
 			{{ t('commands.modal.restrictions.name') }}
@@ -446,12 +459,32 @@ async function save() {
 		</n-divider>
 
 		<n-form-item :label="t('commands.modal.settings.other.commandGroup')" path="groupId">
-			<n-select
-				v-model:value="formValue.groupId"
-				:options="commandsGroupsOptions"
-				clearable
-				:fallback-option="undefined"
-			/>
+			<div style="display: flex; flex-direction: column; gap: 5px;">
+				<n-button-group
+					v-for="(group, index) of chunk(commandsGroupsOptions.sort(), 4)"
+					:key="index"
+				>
+					<n-button
+						v-for="option of group"
+						:key="option.value"
+						:type="formValue.groupId === option.value ? 'success' : 'default'"
+						secondary
+						@click="() => {
+							if (formValue.groupId === option.value) {
+								formValue.groupId = undefined
+							} else {
+								formValue.groupId = option.value
+							}
+						}"
+					>
+						<template #icon>
+							<IconSquareCheck v-if="formValue.groupId === option.value" />
+							<IconSquare v-else />
+						</template>
+						{{ option.label }}
+					</n-button>
+				</n-button-group>
+			</div>
 		</n-form-item>
 
 		<n-button secondary type="success" block @click="save">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2305dabd0..9f1b42885 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -176,6 +176,9 @@ importers:
       '@twir/grpc':
         specifier: workspace:^
         version: link:../../libs/grpc
+      '@types/lodash.chunk':
+        specifier: ^4.2.7
+        version: 4.2.7
       '@vueuse/components':
         specifier: ^10.2.1
         version: 10.2.1(vue@3.3.4)
@@ -188,6 +191,9 @@ importers:
       grid-layout-plus:
         specifier: ^1.0.2
         version: 1.0.2(vue@3.3.4)
+      lodash.chunk:
+        specifier: ^4.2.0
+        version: 4.2.0
       naive-ui:
         specifier: ^2.34.4
         version: 2.34.4(vue@3.3.4)
@@ -3451,6 +3457,12 @@ packages:
       '@types/lodash': 4.14.191
     dev: false
 
+  /@types/lodash.chunk@4.2.7:
+    resolution: {integrity: sha512-//tmaWHiANgToom/YYYKKqiCtlNz11fwYtMUUbaemNSbWTI+2zHtYW5nt1PHNCRWHPAJHHhn4UVFD9LKUFvatA==}
+    dependencies:
+      '@types/lodash': 4.14.191
+    dev: false
+
   /@types/lodash@4.14.191:
     resolution: {integrity: sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==}
 
@@ -7362,6 +7374,10 @@ packages:
   /lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
 
+  /lodash.chunk@4.2.0:
+    resolution: {integrity: sha512-ZzydJKfUHJwHa+hF5X66zLFCBrWn5GeF28OHEr4WVWtNDXlQ/IjWKPBiikqKo2ne0+v6JgCgJ0GzJp8k8bHC7w==}
+    dev: false
+
   /lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
     dev: true