diff --git a/.changeset/green-lies-hammer.md b/.changeset/green-lies-hammer.md
index fc7f6e301d..af1c2e6e92 100644
--- a/.changeset/green-lies-hammer.md
+++ b/.changeset/green-lies-hammer.md
@@ -5,6 +5,4 @@
 '@backstage/plugin-catalog': patch
 ---
 
-Changing the layout of the Catalog & API page to use responsive wrappers for table & filters. The goal is to enforce a responsive layout & that the Catalog & API page are better useable on smaller screens by showing more of the main content. To apply this changes to your custom catalog page, you can add the wrappers following the updated documentation on catalog customization.
-
-Additionally, the tests for Material UI breakpoints were adjusted & used to test the responsive wrappers.
+Updated the layout of catalog and API index pages to handle smaller screen sizes. This adds responsive wrappers to the entity tables, and switches filters to a drawer when width-constrained. If you have created a custom catalog or API index page, you will need to update the page structure to match the updated [catalog customization](https://backstage.io/docs/features/software-catalog/catalog-customization) documentation.
diff --git a/docs/features/software-catalog/catalog-customization.md b/docs/features/software-catalog/catalog-customization.md
index 4049b005f1..0c11d8f476 100644
--- a/docs/features/software-catalog/catalog-customization.md
+++ b/docs/features/software-catalog/catalog-customization.md
@@ -27,7 +27,11 @@ default catalog page and create a component in a
 ```tsx
 // imports, etc omitted for brevity. for full source see:
 // https://github.com/backstage/backstage/blob/master/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
-export const CustomCatalogPage = () => {
+export const CustomCatalogPage = ({
+  columns,
+  actions,
+  initiallySelectedFilter = 'owned',
+}: CatalogPageProps) => {
   return (
     <PageWithHeader title={`${orgName} Catalog`} themeId="home">
       <Content>
@@ -139,23 +143,27 @@ export const EntitySecurityTierPicker = () => {
 Now we can add the component to `CustomCatalogPage`:
 
 ```diff
-export const CustomCatalogPage = () => {
+export const CustomCatalogPage = ({
+  columns,
+  actions,
+  initiallySelectedFilter = 'owned',
+}: CatalogPageProps) => {
   return (
     ...
-          <EntityListProvider>
-            <FilteredEntityLayout>
-              <FilterContainer>
-                <EntityKindPicker initialFilter="component" hidden />
-                <EntityTypePicker />
-                <UserListPicker />
-+               <EntitySecurityTierPicker />
-                <EntityTagPicker />
-              <FilterContainer>
-              <EntityListContainer>
-                <CatalogTable />
-              </EntityListContainer>
-            </FilteredEntityLayout>
-          </EntityListProvider>
+        <EntityListProvider>
+          <FilteredEntityLayout>
+            <FilterContainer>
+              <EntityKindPicker initialFilter="component" hidden />
+              <EntityTypePicker />
+              <UserListPicker initialFilter={initiallySelectedFilter} />
++             <EntitySecurityTierPicker />
+              <EntityTagPicker />
+            <FilterContainer>
+            <EntityListContainer>
+              <CatalogTable columns={columns} actions={actions} />
+            </EntityListContainer>
+          </FilteredEntityLayout>
+        </EntityListProvider>
     ...
 };
 ```
diff --git a/packages/core-components/src/components/SupportButton/SupportButton.tsx b/packages/core-components/src/components/SupportButton/SupportButton.tsx
index 45012e50a4..3e719acb95 100644
--- a/packages/core-components/src/components/SupportButton/SupportButton.tsx
+++ b/packages/core-components/src/components/SupportButton/SupportButton.tsx
@@ -28,7 +28,7 @@ import {
   makeStyles,
   Popover,
 } from '@material-ui/core';
-import React, { Fragment, MouseEventHandler, useState } from 'react';
+import React, { MouseEventHandler, useState } from 'react';
 import { SupportItem, SupportItemLink, useSupportConfig } from '../../hooks';
 import { Link } from '../Link';
 
@@ -94,17 +94,17 @@ export const SupportButton = ({ title, children }: SupportButtonProps) => {
   };
 
   return (
-    <Fragment>
-      <Button
-        data-testid="support-button"
-        color="primary"
-        onClick={onClickHandler}
-      >
-        <Box mr={1} height={24}>
-          <HelpIcon />
-        </Box>
-        Support
-      </Button>
+    <>
+      <Box ml={1}>
+        <Button
+          data-testid="support-button"
+          color="primary"
+          onClick={onClickHandler}
+          startIcon={<HelpIcon />}
+        >
+          Support
+        </Button>
+      </Box>
       <Popover
         data-testid="support-button-popover"
         open={popoverOpen}
@@ -141,6 +141,6 @@ export const SupportButton = ({ title, children }: SupportButtonProps) => {
           </Button>
         </DialogActions>
       </Popover>
-    </Fragment>
+    </>
   );
 };
diff --git a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx
index 0bd377e5af..62cb80cffa 100644
--- a/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx
+++ b/packages/core-components/src/layout/ContentHeader/ContentHeader.tsx
@@ -18,7 +18,7 @@
  * TODO favoriteable capability
  */
 
-import React, { ComponentType, Fragment, PropsWithChildren } from 'react';
+import React, { ComponentType, PropsWithChildren } from 'react';
 import { Typography, makeStyles } from '@material-ui/core';
 import { Helmet } from 'react-helmet';
 
@@ -98,7 +98,7 @@ export const ContentHeader = ({
     <ContentHeaderTitle title={title} className={classes.title} />
   );
   return (
-    <Fragment>
+    <>
       <Helmet title={title} />
       <div className={classes.container}>
         <div className={classes.leftItemsBox}>
@@ -111,6 +111,6 @@ export const ContentHeader = ({
         </div>
         <div className={classes.rightItemsBox}>{children}</div>
       </div>
-    </Fragment>
+    </>
   );
 };
diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md
index 5a4ddefaca..1b6e2cd4d0 100644
--- a/plugins/catalog/api-report.md
+++ b/plugins/catalog/api-report.md
@@ -104,6 +104,11 @@ export type CatalogTableRow = {
   };
 };
 
+// Warning: (ae-missing-release-tag) "CreateComponentButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const CreateComponentButton: () => JSX.Element | null;
+
 // Warning: (ae-missing-release-tag) "createMetadataDescriptionColumn" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index 0fe3504c6d..963e04e5e2 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
@@ -36,7 +36,7 @@ import {
 import React from 'react';
 import { CatalogTable } from '../CatalogTable';
 import { EntityRow } from '../CatalogTable/types';
-import { CreateComponentButton } from '../CreateComponentButton/CreateComponentButton';
+import { CreateComponentButton } from '../CreateComponentButton';
 import {
   FilteredEntityLayout,
   EntityListContainer,
diff --git a/plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx b/plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx
index d38e800f46..f21f9c77a3 100644
--- a/plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx
+++ b/plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx
@@ -32,27 +32,21 @@ export const FilterContainer = ({ children }: PropsWithChildren<{}>) => {
     theme.breakpoints.down('md'),
   );
   const theme = useTheme<BackstageTheme>();
-  const [showFiltersDrawer, toggleFiltersDrawer] = useState<boolean>(false);
+  const [filterDrawerOpen, setFilterDrawerOpen] = useState<boolean>(false);
 
   return isMidSizeScreen ? (
     <>
       <Button
         style={{ marginTop: theme.spacing(1), marginLeft: theme.spacing(1) }}
-        onClick={() => toggleFiltersDrawer(!showFiltersDrawer)}
+        onClick={() => setFilterDrawerOpen(true)}
+        startIcon={<FilterListIcon />}
       >
-        <Box display="flex" alignItems="center">
-          <FilterListIcon style={{ marginRight: theme.spacing(1) }} />
-          Filters
-        </Box>
+        Filters
       </Button>
       <Drawer
-        title="Filters"
         data-testid="entity-filters-drawer"
-        open={showFiltersDrawer}
-        onClose={() => {
-          toggleFiltersDrawer(false);
-        }}
-        elevation={0}
+        open={filterDrawerOpen}
+        onClose={() => setFilterDrawerOpen(false)}
         anchor="left"
         disableAutoFocus
         keepMounted
diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts
index 4b348580f7..2ac7f10227 100644
--- a/plugins/catalog/src/index.ts
+++ b/plugins/catalog/src/index.ts
@@ -15,13 +15,16 @@
  */
 
 export * from './components/AboutCard';
-export { CatalogResultListItem } from './components/CatalogResultListItem';
+export * from './components/CatalogResultListItem';
 export { CatalogTable } from './components/CatalogTable';
 export type { EntityRow as CatalogTableRow } from './components/CatalogTable';
-export { EntityLayout } from './components/EntityLayout';
+export * from './components/CatalogTable/columns';
+export * from './components/CreateComponentButton';
+export * from './components/EntityLayout';
 export * from './components/EntityOrphanWarning';
-export { EntityPageLayout } from './components/EntityPageLayout';
+export * from './components/EntityPageLayout';
 export * from './components/EntitySwitch';
+export * from './components/FilteredEntityLayout';
 export { Router } from './components/Router';
 export {
   CatalogEntityPage,
@@ -39,5 +42,3 @@ export {
   EntityLinksCard,
   EntitySystemDiagramCard,
 } from './plugin';
-export * from './components/CatalogTable/columns';
-export * from './components/FilteredEntityLayout';