diff --git a/src/views/Feed/Feed.vue b/src/views/Feed/Feed.vue
index 29cd9494..1a1c96a6 100644
--- a/src/views/Feed/Feed.vue
+++ b/src/views/Feed/Feed.vue
@@ -11,9 +11,20 @@
                 <div style="margin: 0 0 10px; display: flex; align-items: center">
                     <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
                         <TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
-                            <span class="inline-flex">
-                                <Switch v-model="feedTable.vip" @update:modelValue="feedTableLookup" />
-                            </span>
+                            <div>
+                                <Toggle
+                                    variant="outline"
+                                    size="sm"
+                                    :model-value="feedTable.vip"
+                                    @update:modelValue="
+                                        (v) => {
+                                            feedTable.vip = v;
+                                            feedTableLookup();
+                                        }
+                                    ">
+                                    <Star />
+                                </Toggle>
+                            </div>
                         </TooltipWrapper>
                     </div>
                     <ToggleGroup
@@ -69,8 +80,8 @@
 
 <script setup>
     import { computed, ref, watch } from 'vue';
+    import { Funnel, Star } from 'lucide-vue-next';
     import { getLocalTimeZone, today } from '@internationalized/date';
-    import { Funnel } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -83,7 +94,7 @@
     import { DataTableLayout } from '../../components/ui/data-table';
     import { InputGroupField } from '../../components/ui/input-group';
     import { RangeCalendar } from '../../components/ui/range-calendar';
-    import { Switch } from '../../components/ui/switch';
+    import { Toggle } from '../../components/ui/toggle';
     import { columns as baseColumns } from './columns.jsx';
     import { useDataTableScrollHeight } from '../../composables/useDataTableScrollHeight';
     import { useVrcxVueTable } from '../../lib/table/useVrcxVueTable';
diff --git a/src/views/FriendList/FriendList.vue b/src/views/FriendList/FriendList.vue
index f2fc0324..e7449de1 100644
--- a/src/views/FriendList/FriendList.vue
+++ b/src/views/FriendList/FriendList.vue
@@ -15,11 +15,20 @@
                     <div class="mb-2 flex items-center justify-between">
                         <div class="flex flex-none mr-2 items-center">
                             <TooltipWrapper side="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
-                                <span class="inline-flex">
-                                    <Switch
-                                        v-model="friendsListSearchFilterVIP"
-                                        @update:modelValue="friendsListSearchChange" />
-                                </span>
+                                <div>
+                                    <Toggle
+                                        variant="outline"
+                                        size="sm"
+                                        :model-value="friendsListSearchFilterVIP"
+                                        @update:modelValue="
+                                            (v) => {
+                                                friendsListSearchFilterVIP = v;
+                                                friendsListSearchChange();
+                                            }
+                                        ">
+                                        <Star />
+                                    </Toggle>
+                                </div>
                             </TooltipWrapper>
                             <Select
                                 multiple
@@ -118,6 +127,7 @@
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
+    import { Star } from 'lucide-vue-next';
     import { useRoute } from 'vue-router';
 
     import {
@@ -131,6 +141,7 @@
     import { friendRequest, userRequest } from '../../api';
     import { DataTableLayout } from '../../components/ui/data-table';
     import { Switch } from '../../components/ui/switch';
+    import { Toggle } from '../../components/ui/toggle';
     import { createColumns } from './columns.jsx';
     import { localeIncludes } from '../../shared/utils';
     import removeConfusables, { removeWhitespace } from '../../service/confusables';
diff --git a/src/views/GameLog/GameLog.vue b/src/views/GameLog/GameLog.vue
index 1766d6be..dbb5507b 100644
--- a/src/views/GameLog/GameLog.vue
+++ b/src/views/GameLog/GameLog.vue
@@ -11,9 +11,20 @@
                 <div style="margin: 0 0 10px; display: flex; align-items: center">
                     <div style="flex: none; margin-right: 10px; display: flex; align-items: center">
                         <TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
-                            <span class="inline-flex">
-                                <Switch v-model="gameLogTable.vip" @update:modelValue="gameLogTableLookup" />
-                            </span>
+                            <div>
+                                <Toggle
+                                    variant="outline"
+                                    size="sm"
+                                    :model-value="gameLogTable.vip"
+                                    @update:modelValue="
+                                        (v) => {
+                                            gameLogTable.vip = v;
+                                            gameLogTableLookup();
+                                        }
+                                    ">
+                                    <Star />
+                                </Toggle>
+                            </div>
                         </TooltipWrapper>
                     </div>
                     <Select
@@ -59,7 +70,8 @@
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { computed, ref, watch } from 'vue';
-    import { Switch } from '@/components/ui/switch';
+    import { Star } from 'lucide-vue-next';
+    import { Toggle } from '@/components/ui/toggle';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';