diff --git a/src/components/ColumnMultiFilterButton.tsx b/src/components/ColumnMultiFilterButton.tsx
index 787a306b2..17332a9ae 100644
--- a/src/components/ColumnMultiFilterButton.tsx
+++ b/src/components/ColumnMultiFilterButton.tsx
@@ -20,6 +20,7 @@ import { CheckIcon, Funnel } from "lucide-react";
 import { cn } from "@app/lib/cn";
 import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
 import { Badge } from "./ui/badge";
+import { Checkbox } from "./ui/checkbox";
 
 type FilterOption = {
     value: string;
@@ -130,13 +131,11 @@ export function ColumnMultiFilterButton({
                                         toggle(option.value);
                                     }}
                                 >
-                                    <CheckIcon
-                                        className={cn(
-                                            "mr-2 h-4 w-4",
-                                            selectedSet.has(option.value)
-                                                ? "opacity-100"
-                                                : "opacity-0"
-                                        )}
+                                    <Checkbox
+                                        className="pointer-events-none shrink-0"
+                                        checked={selectedSet.has(option.value)}
+                                        aria-hidden
+                                        tabIndex={-1}
                                     />
                                     {option.label}
                                 </CommandItem>
diff --git a/src/components/LabelColumnFilterButton.tsx b/src/components/LabelColumnFilterButton.tsx
index da35707d8..c6b083967 100644
--- a/src/components/LabelColumnFilterButton.tsx
+++ b/src/components/LabelColumnFilterButton.tsx
@@ -25,6 +25,7 @@ import { useDebounce } from "use-debounce";
 import { LabelBadge } from "./label-badge";
 import { LabelOverflowBadge } from "./label-overflow-badge";
 import { LABEL_COLORS } from "./labels-selector";
+import { Checkbox } from "./ui/checkbox";
 
 function areSelectionsEqual(a: string[], b: string[]) {
     if (a.length !== b.length) {
@@ -179,13 +180,11 @@ export function LabelColumnFilterButton({
                                         }}
                                         className="flex items-center gap-2"
                                     >
-                                        <CheckIcon
-                                            className={cn(
-                                                "mr-2 h-4 w-4",
-                                                draftSet.has(label.name)
-                                                    ? "opacity-100"
-                                                    : "opacity-0"
-                                            )}
+                                        <Checkbox
+                                            className="pointer-events-none shrink-0"
+                                            checked={draftSet.has(label.name)}
+                                            aria-hidden
+                                            tabIndex={-1}
                                         />
                                         <div
                                             className="size-2 rounded-full bg-(--color) flex-none"
diff --git a/src/components/multi-select/multi-select-content.tsx b/src/components/multi-select/multi-select-content.tsx
index 60e7d4abf..15b23827f 100644
--- a/src/components/multi-select/multi-select-content.tsx
+++ b/src/components/multi-select/multi-select-content.tsx
@@ -10,6 +10,7 @@ import {
 import { cn } from "@app/lib/cn";
 import { CheckIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+import { Checkbox } from "../ui/checkbox";
 
 export type TagValue = { text: string; id: string; isAdmin?: boolean };
 
@@ -70,13 +71,11 @@ export function MultiSelectContent<T extends TagValue>({
                                     onChange(newValues);
                                 }}
                             >
-                                <CheckIcon
-                                    className={cn(
-                                        "mr-2 h-4 w-4",
-                                        selectedValues.has(option.id)
-                                            ? "opacity-100"
-                                            : "opacity-0"
-                                    )}
+                                <Checkbox
+                                    className="pointer-events-none shrink-0"
+                                    checked={selectedValues.has(option.id)}
+                                    aria-hidden
+                                    tabIndex={-1}
                                 />
                                 {`${option.text}`}
                             </CommandItem>