diff --git a/packages/admin/admin/src/index.ts b/packages/admin/admin/src/index.ts
index 56eade5d8b..a80881ec70 100644
--- a/packages/admin/admin/src/index.ts
+++ b/packages/admin/admin/src/index.ts
@@ -149,8 +149,7 @@ export {
     FilterBarActiveFilterBadgeClassKey,
     FilterBarActiveFilterBadgeProps,
 } from "./table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge";
-export { FilterBarButton, FilterBarButtonProps } from "./table/filterbar/filterBarButton/FilterBarButton";
-export { FilterBarButtonClassKey } from "./table/filterbar/filterBarButton/FilterBarButton.styles";
+export { FilterBarButton, FilterBarButtonClassKey, FilterBarButtonProps } from "./table/filterbar/filterBarButton/FilterBarButton";
 export {
     FilterBarMoreFilters,
     FilterBarMoreFiltersClassKey,
diff --git a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.styles.tsx b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.styles.tsx
deleted file mode 100644
index 0fa375ec16..0000000000
--- a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.styles.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { buttonClasses, svgIconClasses, Theme } from "@mui/material";
-import createStyles from "@mui/styles/createStyles";
-
-import { FilterBarButtonProps } from "./FilterBarButton";
-
-/**
- * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
- */
-export type FilterBarButtonClassKey = "root" | "open" | "hasDirtyFields" | "filterBadge";
-
-export const styles = (theme: Theme) => {
-    return createStyles<FilterBarButtonClassKey, FilterBarButtonProps>({
-        root: {
-            position: "relative",
-            cursor: "pointer",
-            display: "flex",
-            backgroundColor: theme.palette.common.white,
-            borderColor: theme.palette.grey[100],
-            borderRadius: 2,
-
-            [`& .${buttonClasses.startIcon} .${svgIconClasses.root}, & .${buttonClasses.endIcon} .${svgIconClasses.root}`]: {
-                fontSize: 12,
-            },
-
-            "&:hover": {
-                borderColor: theme.palette.grey[100],
-                backgroundColor: theme.palette.common.white,
-            },
-
-            "&:focus": {
-                borderColor: theme.palette.primary.main,
-                backgroundColor: theme.palette.common.white,
-            },
-        },
-        open: {
-            borderColor: theme.palette.primary.main,
-        },
-        hasDirtyFields: {
-            borderColor: theme.palette.grey[400],
-            fontWeight: theme.typography.fontWeightBold,
-
-            "&:disabled": {
-                borderColor: theme.palette.grey[100],
-            },
-        },
-        filterBadge: {
-            marginLeft: "6px",
-        },
-    });
-};
diff --git a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx
index 9fc6a2e30b..bf5233f0a9 100644
--- a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx
+++ b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx
@@ -1,60 +1,120 @@
 import { ChevronDown } from "@comet/admin-icons";
-import { Button, ComponentsOverrides, Theme } from "@mui/material";
-import { ButtonProps } from "@mui/material/Button";
-import { WithStyles } from "@mui/styles";
-import withStyles from "@mui/styles/withStyles";
-import clsx from "clsx";
+import { buttonClasses, ButtonProps, ComponentsOverrides, svgIconClasses } from "@mui/material";
+import Button from "@mui/material/Button";
+import { css, styled, Theme } from "@mui/material/styles";
+import { useThemeProps } from "@mui/system";
+import { ThemedComponentBaseProps } from "helpers/ThemedComponentBaseProps";
 import * as React from "react";
 
 import { FilterBarActiveFilterBadge, FilterBarActiveFilterBadgeProps } from "../filterBarActiveFilterBadge/FilterBarActiveFilterBadge";
-import { FilterBarButtonClassKey, styles } from "./FilterBarButton.styles";
 
 /**
  * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
  */
-export interface FilterBarButtonProps extends ButtonProps {
+export type FilterBarButtonClassKey = "root" | "open" | "hasDirtyFields" | "filterBadge";
+
+type OwnerState = { hasDirtyFields: boolean; openPopover: boolean | undefined };
+
+const Root = styled(Button, {
+    name: "CometAdminFilterBarButton",
+    slot: "root",
+    overridesResolver({ ownerState }: { ownerState: OwnerState }, styles) {
+        return [styles.root, ownerState.openPopover && styles.open, ownerState.hasDirtyFields && styles.hasDirtyFields];
+    },
+})<{ ownerState: OwnerState }>(
+    ({ theme, ownerState }) => css`
+        position: relative;
+        cursor: pointer;
+        display: flex;
+        background-color: ${theme.palette.common.white};
+        border-color: ${theme.palette.grey[100]};
+        border-radius: 2px;
+
+        && .${buttonClasses.startIcon} .${svgIconClasses.root}, && .${buttonClasses.endIcon} .${svgIconClasses.root} {
+            font-size: 12px;
+        }
+
+        &:hover {
+            border-color: ${theme.palette.grey[100]};
+            background-color: ${theme.palette.common.white};
+        }
+
+        &:focus {
+            border-color: ${theme.palette.primary.main};
+            background-color: ${theme.palette.common.white};
+        }
+
+        ${ownerState.openPopover &&
+        css`
+            border-color: ${theme.palette.primary.main};
+        `}
+
+        ${ownerState.hasDirtyFields &&
+        css`
+            border-color: ${theme.palette.grey[400]};
+            font-weight: ${theme.typography.fontWeightBold};
+
+            &:disabled {
+                border-color: ${theme.palette.grey[100]};
+            }
+        `}
+    `,
+);
+
+const FilterBadge = styled("span", {
+    name: "CometAdminFilterBarButton",
+    slot: "filterBadge",
+    overridesResolver(_, styles) {
+        return [styles.filterBadge];
+    },
+})(
+    css`
+        margin-left: 6px;
+    `,
+);
+
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
+export interface FilterBarButtonProps extends ThemedComponentBaseProps<{ root: typeof Button; filterBadge: "span" }>, ButtonProps {
     dirtyFieldsBadge?: React.ComponentType<FilterBarActiveFilterBadgeProps>;
     numberDirtyFields?: number;
     openPopover?: boolean;
 }
 
-const FilterBarButton = ({
-    children,
-    dirtyFieldsBadge,
-    numberDirtyFields,
-    openPopover,
-    classes,
-    endIcon = <ChevronDown />,
-    className,
-    ...buttonProps
-}: FilterBarButtonProps & WithStyles<typeof styles>): React.ReactElement => {
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
+export function FilterBarButton(inProps: FilterBarButtonProps) {
+    const {
+        children,
+        dirtyFieldsBadge,
+        numberDirtyFields,
+        openPopover,
+        endIcon = <ChevronDown />,
+        slotProps,
+        ...restProps
+    } = useThemeProps({
+        props: inProps,
+        name: "CometAdminFilterBarButton",
+    });
+
     const hasDirtyFields = !!(numberDirtyFields && numberDirtyFields > 0);
     const FilterBarActiveFilterBadgeComponent = dirtyFieldsBadge ? dirtyFieldsBadge : FilterBarActiveFilterBadge;
 
+    const ownerState: OwnerState = { hasDirtyFields, openPopover };
+
     return (
-        <Button
-            className={clsx(className, classes.root, hasDirtyFields && classes.hasDirtyFields, openPopover && classes.open)}
-            disableRipple
-            endIcon={endIcon}
-            variant="outlined"
-            {...buttonProps}
-        >
+        <Root ownerState={ownerState} disableRipple endIcon={endIcon} variant="outlined" {...slotProps?.root} {...restProps}>
             {children}
             {hasDirtyFields && (
-                <span className={classes.filterBadge}>
+                <FilterBadge {...slotProps?.filterBadge}>
                     <FilterBarActiveFilterBadgeComponent countValue={numberDirtyFields} />
-                </span>
+                </FilterBadge>
             )}
-        </Button>
+        </Root>
     );
-};
-
-/**
- * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
- */
-const FilterBarButtonWithStyles = withStyles(styles, { name: "CometAdminFilterBarButton" })(FilterBarButton);
-
-export { FilterBarButtonWithStyles as FilterBarButton };
+}
 
 declare module "@mui/material/styles" {
     interface ComponentNameToClassKey {