diff --git a/src/components/dialogs/NewInstanceDialog.vue b/src/components/dialogs/NewInstanceDialog.vue
index a6359e9c..eeb19a26 100644
--- a/src/components/dialogs/NewInstanceDialog.vue
+++ b/src/components/dialogs/NewInstanceDialog.vue
@@ -9,65 +9,85 @@
             <el-tab-pane name="Normal" :label="t('dialog.new_instance.normal')">
                 <el-form :model="newInstanceDialog" label-width="150px">
                     <el-form-item :label="t('dialog.new_instance.access_type')">
-                        <el-radio-group v-model="newInstanceDialog.accessType" size="small" @change="buildInstance">
-                            <el-radio-button value="public">{{
+                        <ToggleGroup
+                            type="single"
+                            required
+                            variant="outline"
+                            size="sm"
+                            :model-value="newInstanceDialog.accessType"
+                            @update:model-value="(value) => {
+                                newInstanceDialog.accessType = value;
+                                buildInstance();
+                            }">
+                            <ToggleGroupItem value="public">{{
                                 t('dialog.new_instance.access_type_public')
-                            }}</el-radio-button>
-                            <el-radio-button value="group">{{
+                            }}</ToggleGroupItem>
+                            <ToggleGroupItem value="group">{{
                                 t('dialog.new_instance.access_type_group')
-                            }}</el-radio-button>
-                            <el-radio-button value="friends+">{{
+                            }}</ToggleGroupItem>
+                            <ToggleGroupItem value="friends+">{{
                                 t('dialog.new_instance.access_type_friend_plus')
-                            }}</el-radio-button>
-                            <el-radio-button value="friends">{{
+                            }}</ToggleGroupItem>
+                            <ToggleGroupItem value="friends">{{
                                 t('dialog.new_instance.access_type_friend')
-                            }}</el-radio-button>
-                            <el-radio-button value="invite+">{{
+                            }}</ToggleGroupItem>
+                            <ToggleGroupItem value="invite+">{{
                                 t('dialog.new_instance.access_type_invite_plus')
-                            }}</el-radio-button>
-                            <el-radio-button value="invite">{{
+                            }}</ToggleGroupItem>
+                            <ToggleGroupItem value="invite">{{
                                 t('dialog.new_instance.access_type_invite')
-                            }}</el-radio-button>
-                        </el-radio-group>
+                            }}</ToggleGroupItem>
+                        </ToggleGroup>
                     </el-form-item>
                     <el-form-item
                         v-if="newInstanceDialog.accessType === 'group'"
                         :label="t('dialog.new_instance.group_access_type')">
-                        <el-radio-group
-                            v-model="newInstanceDialog.groupAccessType"
-                            size="small"
-                            @change="buildInstance">
-                            <el-radio-button
+                        <ToggleGroup
+                            type="single"
+                            required
+                            variant="outline"
+                            size="sm"
+                            :model-value="newInstanceDialog.groupAccessType"
+                            @update:model-value="(value) => {
+                                newInstanceDialog.groupAccessType = value;
+                                buildInstance();
+                            }">
+                            <ToggleGroupItem
                                 value="members"
-                                :disabled="
-                                    !hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-open-create')
-                                "
-                                >{{ t('dialog.new_instance.group_access_type_members') }}</el-radio-button
+                                :disabled="!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-open-create')"
+                                >{{ t('dialog.new_instance.group_access_type_members') }}</ToggleGroupItem
                             >
-                            <el-radio-button
+                            <ToggleGroupItem
                                 value="plus"
-                                :disabled="
-                                    !hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-plus-create')
-                                "
-                                >{{ t('dialog.new_instance.group_access_type_plus') }}</el-radio-button
+                                :disabled="!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-plus-create')"
+                                >{{ t('dialog.new_instance.group_access_type_plus') }}</ToggleGroupItem
                             >
-                            <el-radio-button
+                            <ToggleGroupItem
                                 value="public"
                                 :disabled="
                                     !hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-public-create') ||
                                     newInstanceDialog.groupRef.privacy === 'private'
                                 "
-                                >{{ t('dialog.new_instance.group_access_type_public') }}</el-radio-button
+                                >{{ t('dialog.new_instance.group_access_type_public') }}</ToggleGroupItem
                             >
-                        </el-radio-group>
+                        </ToggleGroup>
                     </el-form-item>
                     <el-form-item :label="t('dialog.new_instance.region')">
-                        <el-radio-group v-model="newInstanceDialog.region" size="small" @change="buildInstance">
-                            <el-radio-button value="US West">{{ t('dialog.new_instance.region_usw') }}</el-radio-button>
-                            <el-radio-button value="US East">{{ t('dialog.new_instance.region_use') }}</el-radio-button>
-                            <el-radio-button value="Europe">{{ t('dialog.new_instance.region_eu') }}</el-radio-button>
-                            <el-radio-button value="Japan">{{ t('dialog.new_instance.region_jp') }}</el-radio-button>
-                        </el-radio-group>
+                        <ToggleGroup
+                            type="single"
+                            required
+                            variant="outline"
+                            size="sm"
+                            :model-value="newInstanceDialog.region"
+                            @update:model-value="(value) => {
+                                newInstanceDialog.region = value;
+                                buildInstance();
+                            }">
+                            <ToggleGroupItem value="US West">{{ t('dialog.new_instance.region_usw') }}</ToggleGroupItem>
+                            <ToggleGroupItem value="US East">{{ t('dialog.new_instance.region_use') }}</ToggleGroupItem>
+                            <ToggleGroupItem value="Europe">{{ t('dialog.new_instance.region_eu') }}</ToggleGroupItem>
+                            <ToggleGroupItem value="Japan">{{ t('dialog.new_instance.region_jp') }}</ToggleGroupItem>
+                        </ToggleGroup>
                     </el-form-item>
                     <el-form-item
                         v-if="newInstanceDialog.accessType === 'group'"
@@ -172,55 +192,76 @@
             <el-tab-pane name="Legacy" :label="t('dialog.new_instance.legacy')">
                 <el-form :model="newInstanceDialog" label-width="150px">
                     <el-form-item :label="t('dialog.new_instance.access_type')">
-                        <el-radio-group
-                            v-model="newInstanceDialog.accessType"
-                            size="small"
-                            @change="buildLegacyInstance">
-                            <el-radio-button value="public">{{
+                        <ToggleGroup
+                            type="single"
+                            required
+                            variant="outline"
+                            size="sm"
+                            :model-value="newInstanceDialog.accessType"
+                            @update:model-value="(value) => {
+                                newInstanceDialog.accessType = value;
+                                buildLegacyInstance();
+                            }">
+                            <ToggleGroupItem value="public">{{
                                 t('dialog.new_instance.access_type_public')
-                            }}</el-radio-button>
-                            <el-radio-button value="group">{{
+                            }}</ToggleGroupItem>
+                            <ToggleGroupItem value="group">{{
                                 t('dialog.new_instance.access_type_group')
-                            }}</el-radio-button>
-                            <el-radio-button value="friends+">{{
+                            }}</ToggleGroupItem>
+                            <ToggleGroupItem value="friends+">{{
                                 t('dialog.new_instance.access_type_friend_plus')
-                            }}</el-radio-button>
-                            <el-radio-button value="friends">{{
+                            }}</ToggleGroupItem>
+                            <ToggleGroupItem value="friends">{{
                                 t('dialog.new_instance.access_type_friend')
-                            }}</el-radio-button>
-                            <el-radio-button value="invite+">{{
+                            }}</ToggleGroupItem>
+                            <ToggleGroupItem value="invite+">{{
                                 t('dialog.new_instance.access_type_invite_plus')
-                            }}</el-radio-button>
-                            <el-radio-button value="invite">{{
+                            }}</ToggleGroupItem>
+                            <ToggleGroupItem value="invite">{{
                                 t('dialog.new_instance.access_type_invite')
-                            }}</el-radio-button>
-                        </el-radio-group>
+                            }}</ToggleGroupItem>
+                        </ToggleGroup>
                     </el-form-item>
                     <el-form-item
                         v-if="newInstanceDialog.accessType === 'group'"
                         :label="t('dialog.new_instance.group_access_type')">
-                        <el-radio-group
-                            v-model="newInstanceDialog.groupAccessType"
-                            size="small"
-                            @change="buildLegacyInstance">
-                            <el-radio-button value="members">{{
+                        <ToggleGroup
+                            type="single"
+                            required
+                            variant="outline"
+                            size="sm"
+                            :model-value="newInstanceDialog.groupAccessType"
+                            @update:model-value="(value) => {
+                                newInstanceDialog.groupAccessType = value;
+                                buildLegacyInstance();
+                            }">
+                            <ToggleGroupItem value="members">{{
                                 t('dialog.new_instance.group_access_type_members')
-                            }}</el-radio-button>
-                            <el-radio-button value="plus">{{
+                            }}</ToggleGroupItem>
+                            <ToggleGroupItem value="plus">{{
                                 t('dialog.new_instance.group_access_type_plus')
-                            }}</el-radio-button>
-                            <el-radio-button value="public">{{
+                            }}</ToggleGroupItem>
+                            <ToggleGroupItem value="public">{{
                                 t('dialog.new_instance.group_access_type_public')
-                            }}</el-radio-button>
-                        </el-radio-group>
+                            }}</ToggleGroupItem>
+                        </ToggleGroup>
                     </el-form-item>
                     <el-form-item :label="t('dialog.new_instance.region')">
-                        <el-radio-group v-model="newInstanceDialog.region" size="small" @change="buildLegacyInstance">
-                            <el-radio-button value="US West">{{ t('dialog.new_instance.region_usw') }}</el-radio-button>
-                            <el-radio-button value="US East">{{ t('dialog.new_instance.region_use') }}</el-radio-button>
-                            <el-radio-button value="Europe">{{ t('dialog.new_instance.region_eu') }}</el-radio-button>
-                            <el-radio-button value="Japan">{{ t('dialog.new_instance.region_jp') }}</el-radio-button>
-                        </el-radio-group>
+                        <ToggleGroup
+                            type="single"
+                            required
+                            variant="outline"
+                            size="sm"
+                            :model-value="newInstanceDialog.region"
+                            @update:model-value="(value) => {
+                                newInstanceDialog.region = value;
+                                buildLegacyInstance();
+                            }">
+                            <ToggleGroupItem value="US West">{{ t('dialog.new_instance.region_usw') }}</ToggleGroupItem>
+                            <ToggleGroupItem value="US East">{{ t('dialog.new_instance.region_use') }}</ToggleGroupItem>
+                            <ToggleGroupItem value="Europe">{{ t('dialog.new_instance.region_eu') }}</ToggleGroupItem>
+                            <ToggleGroupItem value="Japan">{{ t('dialog.new_instance.region_jp') }}</ToggleGroupItem>
+                        </ToggleGroup>
                     </el-form-item>
                     <el-form-item
                         v-if="newInstanceDialog.accessType === 'group'"
@@ -483,6 +524,8 @@
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
+    import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
+
     import {
         copyToClipboard,
         getLaunchURL,
diff --git a/src/components/ui/toggle-group/ToggleGroup.vue b/src/components/ui/toggle-group/ToggleGroup.vue
new file mode 100644
index 00000000..bf75fbe5
--- /dev/null
+++ b/src/components/ui/toggle-group/ToggleGroup.vue
@@ -0,0 +1,57 @@
+<script setup>
+    import { ToggleGroupRoot, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { provide } from 'vue';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        rovingFocus: { type: Boolean, required: false },
+        disabled: { type: Boolean, required: false },
+        orientation: { type: String, required: false },
+        dir: { type: String, required: false },
+        loop: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        name: { type: String, required: false },
+        required: { type: Boolean, required: false },
+        type: { type: String, required: false },
+        modelValue: { type: null, required: false },
+        defaultValue: { type: null, required: false },
+        class: { type: null, required: false },
+        variant: { type: null, required: false },
+        size: { type: null, required: false },
+        spacing: { type: Number, required: false, default: 0 }
+    });
+
+    const emits = defineEmits(['update:modelValue']);
+
+    provide('toggleGroup', {
+        variant: props.variant,
+        size: props.size,
+        spacing: props.spacing
+    });
+
+    const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant');
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <ToggleGroupRoot
+        v-slot="slotProps"
+        data-slot="toggle-group"
+        :data-size="size"
+        :data-variant="variant"
+        :data-spacing="spacing"
+        :style="{
+            '--gap': spacing
+        }"
+        v-bind="forwarded"
+        :class="
+            cn(
+                'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
+                props.class
+            )
+        ">
+        <slot v-bind="slotProps" />
+    </ToggleGroupRoot>
+</template>
diff --git a/src/components/ui/toggle-group/ToggleGroupItem.vue b/src/components/ui/toggle-group/ToggleGroupItem.vue
new file mode 100644
index 00000000..cfaabfca
--- /dev/null
+++ b/src/components/ui/toggle-group/ToggleGroupItem.vue
@@ -0,0 +1,45 @@
+<script setup>
+    import { ToggleGroupItem, useForwardProps } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { inject } from 'vue';
+    import { reactiveOmit } from '@vueuse/core';
+    import { toggleVariants } from '@/components/ui/toggle';
+
+    const props = defineProps({
+        value: { type: null, required: true },
+        disabled: { type: Boolean, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        class: { type: null, required: false },
+        variant: { type: null, required: false },
+        size: { type: null, required: false }
+    });
+
+    const context = inject('toggleGroup');
+
+    const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant');
+    const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <ToggleGroupItem
+        v-slot="slotProps"
+        data-slot="toggle-group-item"
+        :data-variant="context?.variant || variant"
+        :data-size="context?.size || size"
+        :data-spacing="context?.spacing"
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                toggleVariants({
+                    variant: context?.variant || variant,
+                    size: context?.size || size
+                }),
+                'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
+                'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
+                props.class
+            )
+        ">
+        <slot v-bind="slotProps" />
+    </ToggleGroupItem>
+</template>
diff --git a/src/components/ui/toggle-group/index.js b/src/components/ui/toggle-group/index.js
new file mode 100644
index 00000000..ac3e34bb
--- /dev/null
+++ b/src/components/ui/toggle-group/index.js
@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from './ToggleGroup.vue';
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue';
diff --git a/src/components/ui/toggle/Toggle.vue b/src/components/ui/toggle/Toggle.vue
new file mode 100644
index 00000000..14574863
--- /dev/null
+++ b/src/components/ui/toggle/Toggle.vue
@@ -0,0 +1,35 @@
+<script setup>
+    import { Toggle, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    import { toggleVariants } from '.';
+
+    const props = defineProps({
+        defaultValue: { type: Boolean, required: false },
+        modelValue: { type: [Boolean, null], required: false },
+        disabled: { type: Boolean, required: false, default: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        name: { type: String, required: false },
+        required: { type: Boolean, required: false },
+        class: { type: null, required: false },
+        variant: { type: null, required: false, default: 'default' },
+        size: { type: null, required: false, default: 'default' }
+    });
+
+    const emits = defineEmits(['update:modelValue']);
+
+    const delegatedProps = reactiveOmit(props, 'class', 'size', 'variant');
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <Toggle
+        v-slot="slotProps"
+        data-slot="toggle"
+        v-bind="forwarded"
+        :class="cn(toggleVariants({ variant, size }), props.class)">
+        <slot v-bind="slotProps" />
+    </Toggle>
+</template>
diff --git a/src/components/ui/toggle/index.js b/src/components/ui/toggle/index.js
new file mode 100644
index 00000000..970be6cd
--- /dev/null
+++ b/src/components/ui/toggle/index.js
@@ -0,0 +1,25 @@
+import { cva } from 'class-variance-authority';
+
+export { default as Toggle } from './Toggle.vue';
+
+export const toggleVariants = cva(
+    "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+    {
+        variants: {
+            variant: {
+                default: 'bg-transparent',
+                outline:
+                    'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground'
+            },
+            size: {
+                default: 'h-9 px-2 min-w-9',
+                sm: 'h-8 px-1.5 min-w-8',
+                lg: 'h-10 px-2.5 min-w-10'
+            }
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default'
+        }
+    }
+);
diff --git a/src/views/Settings/components/PhotonSettings.vue b/src/views/Settings/components/PhotonSettings.vue
index 3eeea1b3..1bf12ced 100644
--- a/src/views/Settings/components/PhotonSettings.vue
+++ b/src/views/Settings/components/PhotonSettings.vue
@@ -12,24 +12,27 @@
         </div>
         <div class="options-container-item">
             <span class="name">{{ t('view.settings.advanced.photon.event_hud.filter') }}</span>
-            <el-radio-group
+            <ToggleGroup
+                type="single"
+                required
+                variant="outline"
+                size="sm"
                 :model-value="photonEventOverlayFilter"
-                size="small"
                 :disabled="!openVR || !photonEventOverlay"
-                @change="
+                @update:model-value="
                     setPhotonEventOverlayFilter($event);
                     saveEventOverlay();
                 ">
-                <el-radio-button value="VIP">{{
+                <ToggleGroupItem value="VIP">{{
                     t('view.settings.advanced.photon.event_hud.filter_favorites')
-                }}</el-radio-button>
-                <el-radio-button value="Friends">{{
+                }}</ToggleGroupItem>
+                <ToggleGroupItem value="Friends">{{
                     t('view.settings.advanced.photon.event_hud.filter_friends')
-                }}</el-radio-button>
-                <el-radio-button value="Everyone">{{
+                }}</ToggleGroupItem>
+                <ToggleGroupItem value="Everyone">{{
                     t('view.settings.advanced.photon.event_hud.filter_everyone')
-                }}</el-radio-button>
-            </el-radio-group>
+                }}</ToggleGroupItem>
+            </ToggleGroup>
         </div>
         <div class="options-container-item">
             <el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonOverlayMessageTimeout">{{
@@ -65,24 +68,27 @@
             @change="saveEventOverlay('VRCX_TimeoutHudOverlay')"></simple-switch>
         <div class="options-container-item">
             <span class="name">{{ t('view.settings.advanced.photon.timeout_hud.filter') }}</span>
-            <el-radio-group
+            <ToggleGroup
+                type="single"
+                required
+                variant="outline"
+                size="sm"
                 :model-value="timeoutHudOverlayFilter"
-                size="small"
                 :disabled="!openVR || !timeoutHudOverlay"
-                @change="
+                @update:model-value="
                     setTimeoutHudOverlayFilter($event);
                     saveEventOverlay();
                 ">
-                <el-radio-button label="VIP">{{
+                <ToggleGroupItem value="VIP">{{
                     t('view.settings.advanced.photon.timeout_hud.filter_favorites')
-                }}</el-radio-button>
-                <el-radio-button label="Friends">{{
+                }}</ToggleGroupItem>
+                <ToggleGroupItem value="Friends">{{
                     t('view.settings.advanced.photon.timeout_hud.filter_friends')
-                }}</el-radio-button>
-                <el-radio-button label="Everyone">{{
+                }}</ToggleGroupItem>
+                <ToggleGroupItem value="Everyone">{{
                     t('view.settings.advanced.photon.timeout_hud.filter_everyone')
-                }}</el-radio-button>
-            </el-radio-group>
+                }}</ToggleGroupItem>
+            </ToggleGroup>
         </div>
         <div class="options-container-item">
             <el-button size="small" :icon="Timer" :disabled="!openVR" @click="promptPhotonLobbyTimeoutThreshold">{{
@@ -99,6 +105,7 @@
 
     import { useNotificationsSettingsStore, usePhotonStore } from '../../../stores';
     import { photonEventTableTypeFilterList } from '../../../shared/constants/photon';
+    import { ToggleGroup, ToggleGroupItem } from '../../../components/ui/toggle-group';
 
     import SimpleSwitch from './SimpleSwitch.vue';
 
diff --git a/src/views/Settings/components/Tabs/GeneralTab.vue b/src/views/Settings/components/Tabs/GeneralTab.vue
index e95e4335..9d036ebf 100644
--- a/src/views/Settings/components/Tabs/GeneralTab.vue
+++ b/src/views/Settings/components/Tabs/GeneralTab.vue
@@ -45,21 +45,24 @@
             <div v-if="!noUpdater" class="options-container-item">
                 <span class="name">{{ t('view.settings.general.vrcx_updater.update_action') }}</span>
                 <br />
-                <el-radio-group
+                <ToggleGroup
+                    type="single"
+                    required
+                    variant="outline"
+                    size="sm"
                     :model-value="autoUpdateVRCX"
-                    size="small"
                     style="margin-top: 5px"
-                    @change="setAutoUpdateVRCX">
-                    <el-radio-button value="Off">{{
+                    @update:model-value="setAutoUpdateVRCX">
+                    <ToggleGroupItem value="Off">{{
                         t('view.settings.general.vrcx_updater.auto_update_off')
-                    }}</el-radio-button>
-                    <el-radio-button value="Notify">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Notify">{{
                         t('view.settings.general.vrcx_updater.auto_update_notify')
-                    }}</el-radio-button>
-                    <el-radio-button value="Auto Download">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Auto Download">{{
                         t('view.settings.general.vrcx_updater.auto_update_download')
-                    }}</el-radio-button>
-                </el-radio-group>
+                    }}</ToggleGroupItem>
+                </ToggleGroup>
             </div>
             <div v-else class="options-container-item">
                 <span>{{ t('view.settings.general.vrcx_updater.updater_disabled') }}</span>
@@ -242,21 +245,24 @@
                     </TooltipWrapper>
                 </span>
                 <br />
-                <el-radio-group
+                <ToggleGroup
+                    type="single"
+                    required
+                    variant="outline"
+                    size="sm"
                     :model-value="autoAcceptInviteRequests"
-                    size="small"
                     style="margin-top: 5px"
-                    @change="setAutoAcceptInviteRequests">
-                    <el-radio-button value="Off">{{
+                    @update:model-value="setAutoAcceptInviteRequests">
+                    <ToggleGroupItem value="Off">{{
                         t('view.settings.general.automation.auto_invite_request_accept_off')
-                    }}</el-radio-button>
-                    <el-radio-button value="All Favorites">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="All Favorites">{{
                         t('view.settings.general.automation.auto_invite_request_accept_favs')
-                    }}</el-radio-button>
-                    <el-radio-button value="Selected Favorites">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Selected Favorites">{{
                         t('view.settings.general.automation.auto_invite_request_accept_selected_favs')
-                    }}</el-radio-button>
-                </el-radio-group>
+                    }}</ToggleGroupItem>
+                </ToggleGroup>
             </div>
         </div>
         <div class="options-container">
@@ -301,6 +307,8 @@
     import { links } from '../../../../shared/constants';
     import { openExternalLink } from '../../../../shared/utils';
 
+    import { ToggleGroup, ToggleGroupItem } from '../../../../components/ui/toggle-group';
+
     import SimpleSwitch from '../SimpleSwitch.vue';
 
     const { t } = useI18n();
diff --git a/src/views/Settings/components/Tabs/NotificationsTab.vue b/src/views/Settings/components/Tabs/NotificationsTab.vue
index 2e9c2f3f..10a0f63c 100644
--- a/src/views/Settings/components/Tabs/NotificationsTab.vue
+++ b/src/views/Settings/components/Tabs/NotificationsTab.vue
@@ -17,9 +17,12 @@
                     t('view.settings.notifications.notifications.desktop_notifications.when_to_display')
                 }}</span>
                 <br />
-                <el-radio-group
+                <ToggleGroup
+                    type="single"
+                    required
+                    variant="outline"
+                    size="sm"
                     :model-value="overlayToast"
-                    size="small"
                     :disabled="
                         (!overlayNotifications || !openVR) &&
                         !xsNotifications &&
@@ -27,23 +30,23 @@
                         !ovrtWristNotifications
                     "
                     style="margin-top: 5px"
-                    @change="
+                    @update:model-value="
                         setOverlayToast($event);
                         saveOpenVROption();
                     ">
-                    <el-radio-button value="Never">{{
+                    <ToggleGroupItem value="Never">{{
                         t('view.settings.notifications.notifications.conditions.never')
-                    }}</el-radio-button>
-                    <el-radio-button value="Game Running">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Game Running">{{
                         t('view.settings.notifications.notifications.conditions.inside_vrchat')
-                    }}</el-radio-button>
-                    <el-radio-button value="Game Closed">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Game Closed">{{
                         t('view.settings.notifications.notifications.conditions.outside_vrchat')
-                    }}</el-radio-button>
-                    <el-radio-button value="Always">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Always">{{
                         t('view.settings.notifications.notifications.conditions.always')
-                    }}</el-radio-button>
-                </el-radio-group>
+                    }}</ToggleGroupItem>
+                </ToggleGroup>
             </div>
             <simple-switch
                 :label="t('view.settings.notifications.notifications.steamvr_notifications.steamvr_overlay')"
@@ -155,33 +158,36 @@
                     t('view.settings.notifications.notifications.desktop_notifications.when_to_display')
                 }}</span>
                 <br />
-                <el-radio-group
+                <ToggleGroup
+                    type="single"
+                    required
+                    variant="outline"
+                    size="sm"
                     :model-value="desktopToast"
-                    size="small"
                     style="margin-top: 5px"
-                    @change="setDesktopToast(String($event))">
-                    <el-radio-button value="Never">{{
+                    @update:model-value="setDesktopToast(String($event))">
+                    <ToggleGroupItem value="Never">{{
                         t('view.settings.notifications.notifications.conditions.never')
-                    }}</el-radio-button>
-                    <el-radio-button value="Desktop Mode">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Desktop Mode">{{
                         t('view.settings.notifications.notifications.conditions.desktop')
-                    }}</el-radio-button>
-                    <el-radio-button value="Inside VR">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Inside VR">{{
                         t('view.settings.notifications.notifications.conditions.inside_vr')
-                    }}</el-radio-button>
-                    <el-radio-button value="Outside VR">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Outside VR">{{
                         t('view.settings.notifications.notifications.conditions.outside_vr')
-                    }}</el-radio-button>
-                    <el-radio-button value="Game Running">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Game Running">{{
                         t('view.settings.notifications.notifications.conditions.inside_vrchat')
-                    }}</el-radio-button>
-                    <el-radio-button value="Game Closed">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Game Closed">{{
                         t('view.settings.notifications.notifications.conditions.outside_vrchat')
-                    }}</el-radio-button>
-                    <el-radio-button value="Always">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Always">{{
                         t('view.settings.notifications.notifications.conditions.always')
-                    }}</el-radio-button>
-                </el-radio-group>
+                    }}</ToggleGroupItem>
+                </ToggleGroup>
             </div>
             <simple-switch
                 :label="
@@ -197,27 +203,30 @@
                     t('view.settings.notifications.notifications.text_to_speech.when_to_play')
                 }}</span>
                 <br />
-                <el-radio-group
+                <ToggleGroup
+                    type="single"
+                    required
+                    variant="outline"
+                    size="sm"
                     :model-value="notificationTTS"
-                    size="small"
                     style="margin-top: 5px"
-                    @change="saveNotificationTTS">
-                    <el-radio-button value="Never">{{
+                    @update:model-value="saveNotificationTTS">
+                    <ToggleGroupItem value="Never">{{
                         t('view.settings.notifications.notifications.conditions.never')
-                    }}</el-radio-button>
-                    <el-radio-button value="Inside VR">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Inside VR">{{
                         t('view.settings.notifications.notifications.conditions.inside_vr')
-                    }}</el-radio-button>
-                    <el-radio-button value="Game Running">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Game Running">{{
                         t('view.settings.notifications.notifications.conditions.inside_vrchat')
-                    }}</el-radio-button>
-                    <el-radio-button value="Game Closed">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Game Closed">{{
                         t('view.settings.notifications.notifications.conditions.outside_vrchat')
-                    }}</el-radio-button>
-                    <el-radio-button value="Always">{{
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="Always">{{
                         t('view.settings.notifications.notifications.conditions.always')
-                    }}</el-radio-button>
-                </el-radio-group>
+                    }}</ToggleGroupItem>
+                </ToggleGroup>
             </div>
             <div class="options-container-item">
                 <span class="name">{{ t('view.settings.notifications.notifications.text_to_speech.tts_voice') }}</span>
@@ -272,6 +281,7 @@
 
     import { useAdvancedSettingsStore, useNotificationsSettingsStore, useVrStore } from '../../../../stores';
     import { Slider } from '../../../../components/ui/slider';
+    import { ToggleGroup, ToggleGroupItem } from '../../../../components/ui/toggle-group';
 
     import FeedFiltersDialog from '../../dialogs/FeedFiltersDialog.vue';
     import NotificationPositionDialog from '../../dialogs/NotificationPositionDialog.vue';
diff --git a/src/views/Settings/components/WristOverlaySettings.vue b/src/views/Settings/components/WristOverlaySettings.vue
index 19559807..fd8912dc 100644
--- a/src/views/Settings/components/WristOverlaySettings.vue
+++ b/src/views/Settings/components/WristOverlaySettings.vue
@@ -73,23 +73,26 @@
         </div>
         <div class="options-container-item">
             <span class="name">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on') }}</span>
-            <el-radio-group
-                :model-value="overlayHand"
-                size="small"
-                @change="
-                    setOverlayHand($event);
-                    saveOpenVROption();
-                ">
-                <el-radio-button value="1">{{
-                    t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_left')
-                }}</el-radio-button>
-                <el-radio-button value="2">{{
-                    t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_right')
-                }}</el-radio-button>
-                <el-radio-button value="0">{{
-                    t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_both')
-                }}</el-radio-button>
-            </el-radio-group>
+                <ToggleGroup
+                    type="single"
+                    required
+                    variant="outline"
+                    size="sm"
+                    :model-value="overlayHand"
+                    @update:model-value="
+                        setOverlayHand($event);
+                        saveOpenVROption();
+                    ">
+                    <ToggleGroupItem value="1">{{
+                        t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_left')
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="2">{{
+                        t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_right')
+                    }}</ToggleGroupItem>
+                    <ToggleGroupItem value="0">{{
+                        t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_both')
+                    }}</ToggleGroupItem>
+                </ToggleGroup>
         </div>
         <simple-switch
             :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.grey_background')"
@@ -148,6 +151,7 @@
     import { useI18n } from 'vue-i18n';
 
     import { useNotificationsSettingsStore, useVrStore, useWristOverlaySettingsStore } from '../../../stores';
+    import { ToggleGroup, ToggleGroupItem } from '../../../components/ui/toggle-group';
 
     import SimpleSwitch from './SimpleSwitch.vue';
 
diff --git a/src/views/Settings/dialogs/FeedFiltersDialog.vue b/src/views/Settings/dialogs/FeedFiltersDialog.vue
index 30793bfd..b3b81700 100644
--- a/src/views/Settings/dialogs/FeedFiltersDialog.vue
+++ b/src/views/Settings/dialogs/FeedFiltersDialog.vue
@@ -2,7 +2,7 @@
     <el-dialog
         :model-value="!!feedFiltersDialogMode"
         :title="dialogTitle"
-        width="550px"
+        width="600px"
         destroy-on-close
         @close="handleDialogClose">
         <div class="toggle-list" style="height: 75vh; overflow-y: auto">
@@ -19,14 +19,22 @@
                     </TooltipWrapper>
                 </span>
 
-                <el-radio-group
-                    v-model="currentSharedFeedFilters[setting.key]"
-                    size="small"
-                    @change="saveSharedFeedFilters">
-                    <el-radio-button v-for="option in setting.options" :key="option.label" :value="option.label">
+                <ToggleGroup
+                    type="single"
+                    required
+                    variant="outline"
+                    size="sm"
+                    :model-value="currentSharedFeedFilters[setting.key]"
+                    @update:model-value="
+                        (value) => {
+                            currentSharedFeedFilters[setting.key] = value;
+                            saveSharedFeedFilters();
+                        }
+                    ">
+                    <ToggleGroupItem v-for="option in setting.options" :key="option.label" :value="option.label">
                         {{ t(option.textKey) }}
-                    </el-radio-button>
-                </el-radio-group>
+                    </ToggleGroupItem>
+                </ToggleGroup>
             </div>
 
             <template v-if="photonLoggingEnabled">
@@ -36,14 +44,22 @@
                 </div>
                 <div v-for="setting in photonFeedFiltersOptions" :key="setting.key" class="toggle-item">
                     <span class="toggle-name">{{ setting.name }}</span>
-                    <el-radio-group
-                        v-model="currentSharedFeedFilters[setting.key]"
-                        size="small"
-                        @change="saveSharedFeedFilters">
-                        <el-radio-button v-for="option in setting.options" :key="option.label" :value="option.label">
+                    <ToggleGroup
+                        type="single"
+                        required
+                        variant="outline"
+                        size="sm"
+                        :model-value="currentSharedFeedFilters[setting.key]"
+                        @update:model-value="
+                            (value) => {
+                                currentSharedFeedFilters[setting.key] = value;
+                                saveSharedFeedFilters();
+                            }
+                        ">
+                        <ToggleGroupItem v-for="option in setting.options" :key="option.label" :value="option.label">
                             {{ t(option.textKey) }}
-                        </el-radio-button>
-                    </el-radio-group>
+                        </ToggleGroupItem>
+                    </ToggleGroup>
                 </div>
             </template>
         </div>
@@ -64,6 +80,7 @@
     import { useI18n } from 'vue-i18n';
 
     import { useNotificationsSettingsStore, usePhotonStore, useSharedFeedStore } from '../../../stores';
+    import { ToggleGroup, ToggleGroupItem } from '../../../components/ui/toggle-group';
     import { feedFiltersOptions, sharedFeedFiltersDefaults } from '../../../shared/constants';
 
     import configRepository from '../../../service/config';
@@ -130,3 +147,11 @@
         emit('update:feedFiltersDialogMode', '');
     }
 </script>
+
+<style scoped>
+    .toggle-list .toggle-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+    }
+</style>