diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index e5543fce9..bcf72655b 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -222,14 +222,13 @@ function CamerasFilterButton({
 
   const trigger = (
     <Button
-      className={`flex items-center gap-2 capitalize ${selectedCameras?.length ? "bg-selected hover:bg-selected" : ""}`}
+      className="flex items-center gap-2 capitalize"
+      variant={selectedCameras?.length == undefined ? "secondary" : "select"}
       size="sm"
     >
-      <FaVideo
-        className={`${selectedCameras?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
-      />
+      <FaVideo />
       <div
-        className={`hidden md:block ${selectedCameras?.length ? "text-background dark:text-primary" : "text-primary"}`}
+        className={`hidden md:block ${selectedCameras?.length ? "text-selected-foreground" : "text-primary"}`}
       >
         {selectedCameras == undefined
           ? "All Cameras"
@@ -391,13 +390,12 @@ function ShowReviewFilter({
       </div>
 
       <Button
-        className={`block md:hidden duration-0 ${showReviewedSwitch == 1 ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
+        className="block md:hidden duration-0"
+        variant={showReviewedSwitch == 1 ? "select" : "secondary"}
         size="sm"
         onClick={() => setShowReviewedSwitch(showReviewedSwitch == 0 ? 1 : 0)}
       >
-        <FaCheckCircle
-          className={`${showReviewedSwitch == 1 ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
-        />
+        <FaCheckCircle />
       </Button>
     </>
   );
@@ -420,14 +418,13 @@ function CalendarFilterButton({
 
   const trigger = (
     <Button
+      className="flex items-center gap-2"
+      variant={day == undefined ? "secondary" : "select"}
       size="sm"
-      className={`flex items-center gap-2 ${day == undefined ? "bg-secondary hover:bg-secondary/80" : "bg-selected hover:bg-selected"}`}
     >
-      <FaCalendarAlt
-        className={`${day == undefined ? "text-secondary-foreground" : "text-background dark:text-primary"}`}
-      />
+      <FaCalendarAlt />
       <div
-        className={`hidden md:block ${day == undefined ? "text-primary" : "text-background dark:text-primary"}`}
+        className={`hidden md:block ${day == undefined ? "text-primary" : "text-selected-foreground"}`}
       >
         {day == undefined ? "Last 24 Hours" : selectedDate}
       </div>
@@ -488,13 +485,12 @@ function GeneralFilterButton({
   const trigger = (
     <Button
       size="sm"
-      className={`flex items-center gap-2 capitalize ${selectedLabels?.length ? "bg-selected hover:bg-selected" : ""}`}
+      variant={selectedLabels?.length ? "select" : "secondary"}
+      className="flex items-center gap-2 capitalize"
     >
-      <FaFilter
-        className={`${selectedLabels?.length ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
-      />
+      <FaFilter />
       <div
-        className={`hidden md:block ${selectedLabels?.length ? "text-background dark:text-primary" : "text-primary"}`}
+        className={`hidden md:block ${selectedLabels?.length ? "text-selected-foreground" : "text-primary"}`}
       >
         Filter
       </div>
@@ -685,12 +681,11 @@ function ShowMotionOnlyButton({
       <div className="block md:hidden">
         <Button
           size="sm"
-          className={`duration-0 ${motionOnlyButton ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
+          className="duration-0"
+          variant={motionOnlyButton ? "select" : "secondary"}
           onClick={() => setMotionOnlyButton(!motionOnlyButton)}
         >
-          <FaRunning
-            className={`${motionOnlyButton ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
-          />
+          <FaRunning />
         </Button>
       </div>
     </>
diff --git a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
index e650f583d..5cb1663e6 100644
--- a/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
+++ b/web/src/components/overlay/MobileReviewSettingsDrawer.tsx
@@ -146,23 +146,21 @@ export default function MobileReviewSettingsDrawer({
         )}
         {features.includes("calendar") && (
           <Button
-            className={`w-full flex justify-center items-center gap-2 ${filter?.after ? "bg-selected text-background dark:text-primary" : ""}`}
+            className="w-full flex justify-center items-center gap-2"
+            variant={filter?.after ? "select" : "secondary"}
             onClick={() => setDrawerMode("calendar")}
           >
-            <FaCalendarAlt
-              className={`${filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
-            />
+            <FaCalendarAlt />
             Calendar
           </Button>
         )}
         {features.includes("filter") && (
           <Button
-            className={`w-full flex justify-center items-center gap-2 ${filter?.labels ? "bg-selected text-background dark:text-primary" : ""}`}
+            className="w-full flex justify-center items-center gap-2"
+            variant={filter?.labels ? "select" : "secondary"}
             onClick={() => setDrawerMode("filter")}
           >
-            <FaFilter
-              className={`${filter?.labels ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
-            />
+            <FaFilter />
             Filter
           </Button>
         )}
@@ -283,13 +281,12 @@ export default function MobileReviewSettingsDrawer({
       >
         <DrawerTrigger asChild>
           <Button
-            className={`rounded-lg capitalize ${filter?.labels || filter?.after ? "bg-selected hover:bg-selected" : "bg-secondary hover:bg-secondary/80"}`}
+            className="rounded-lg capitalize"
+            variant={filter?.labels || filter?.after ? "select" : "secondary"}
             size="sm"
             onClick={() => setDrawerMode("select")}
           >
-            <FaCog
-              className={`${filter?.labels || filter?.after ? "text-background dark:text-primary" : "text-secondary-foreground"}`}
-            />
+            <FaCog />
           </Button>
         </DrawerTrigger>
         <DrawerContent className="max-h-[80dvh] overflow-hidden flex flex-col items-center gap-2 px-4 pb-4 mx-1 rounded-t-2xl">