diff --git a/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx
index ee51020cbb..793d4741ad 100644
--- a/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx
+++ b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx
@@ -34,8 +34,10 @@ export const Filters = (props: {
     drawerAnchor?: 'left' | 'right' | 'top' | 'bottom';
   };
 }) => {
-  const isScreenSmallerThanBreakpoint = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.down(props.options?.drawerBreakpoint ?? 'md'),
+  const isScreenSmallerThanBreakpoint = useMediaQuery(
+    (theme: Theme) =>
+      theme.breakpoints.down(props.options?.drawerBreakpoint ?? 'md'),
+    { noSsr: true },
   );
   const theme = useTheme();
   const [filterDrawerOpen, setFilterDrawerOpen] = useState<boolean>(false);