diff --git a/.changeset/healthy-lions-sin.md b/.changeset/healthy-lions-sin.md
new file mode 100644
index 0000000000..632b87067c
--- /dev/null
+++ b/.changeset/healthy-lions-sin.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+The `ScaffolderPage` now uses the `CatalogFilterLayout`, which means the filters are put in a drawer on smaller screens.
diff --git a/.changeset/lucky-scissors-play.md b/.changeset/lucky-scissors-play.md
new file mode 100644
index 0000000000..dca966d515
--- /dev/null
+++ b/.changeset/lucky-scissors-play.md
@@ -0,0 +1,9 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+**DEPRECATION**: The `FilteredEntityLayout` and related components have been moved to `@backstage/plugin-catalog-react` and renamed. The original components are now deprecated and should be replaced as follows:
+
+- `FilteredEntityLayout` -> `CatalogFilterLayout`
+- `FilterContainer` -> `CatalogFilterLayout.Filters`
+- `EntityListContainer` -> `CatalogFilterLayout.Content`
diff --git a/.changeset/nasty-chefs-dream.md b/.changeset/nasty-chefs-dream.md
new file mode 100644
index 0000000000..198f280fcc
--- /dev/null
+++ b/.changeset/nasty-chefs-dream.md
@@ -0,0 +1,16 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Added `CatalogFilterLayout`, which replaces `FilteredEntityLayout` from `@backstage/plugin-catalog`, as well as `FilterContainer` and `EntityListContainer`. It is used like this:
+
+```tsx
+<CatalogFilterLayout>
+  <CatalogFilterLayout.Filters>
+    {/* filter drawer, for example <EntityTypePicker /> and friends */}
+  </CatalogFilterLayout.Filters>
+  <CatalogFilterLayout.Content>
+    {/* content view, for example a <CatalogTable /> */}
+  </CatalogFilterLayout.Content>
+</CatalogFilterLayout>
+```
diff --git a/.changeset/nice-seals-decide.md b/.changeset/nice-seals-decide.md
new file mode 100644
index 0000000000..999b2db6a5
--- /dev/null
+++ b/.changeset/nice-seals-decide.md
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-api-docs': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Switched to using `CatalogFilterLayout` from `@backstage/plugin-catalog-react`.
diff --git a/docs/features/software-catalog/catalog-customization.md b/docs/features/software-catalog/catalog-customization.md
index 80c9458aee..1b5535a464 100644
--- a/docs/features/software-catalog/catalog-customization.md
+++ b/docs/features/software-catalog/catalog-customization.md
@@ -41,16 +41,16 @@ export const CustomCatalogPage = ({
             <CreateButton title="Create Component" to={createComponentLink()} />
             <SupportButton>All your software catalog entities</SupportButton>
           </ContentHeader>
-          <FilteredEntityLayout>
-            <FilterContainer>
+          <CatalogFilterLayout>
+            <CatalogFilterLayout.Filters>
               <EntityTypePicker />
               <UserListPicker initialFilter={initiallySelectedFilter} />
               <EntityTagPicker />
-            </FilterContainer>
-            <EntityListContainer>
+            </CatalogFilterLayout.Filters>
+            <CatalogFilterLayout.Content>
               <CatalogTable columns={columns} actions={actions} />
-            </EntityListContainer>
-          </FilteredEntityLayout>
+            </CatalogFilterLayout.Content>
+          </CatalogFilterLayout>
         </Content>
       </EntityListProvider>
     </PageWithHeader>
@@ -151,18 +151,18 @@ export const CustomCatalogPage = ({
   return (
     ...
         <EntityListProvider>
-          <FilteredEntityLayout>
-            <FilterContainer>
+          <CatalogFilterLayout>
+            <CatalogFilterLayout.Filters>
               <EntityKindPicker initialFilter="component" hidden />
               <EntityTypePicker />
               <UserListPicker initialFilter={initiallySelectedFilter} />
 +             <EntitySecurityTierPicker />
               <EntityTagPicker />
-            <FilterContainer>
-            <EntityListContainer>
+            <CatalogFilterLayout.Filters>
+            <CatalogFilterLayout.Content>
               <CatalogTable columns={columns} actions={actions} />
-            </EntityListContainer>
-          </FilteredEntityLayout>
+            </CatalogFilterLayout.Content>
+          </CatalogFilterLayout>
         </EntityListProvider>
     ...
 };
diff --git a/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx b/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx
index d38383f004..9fc6b2c3c2 100644
--- a/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx
+++ b/plugins/api-docs/src/components/ApiExplorerPage/DefaultApiExplorerPage.tsx
@@ -24,13 +24,7 @@ import {
   TableProps,
 } from '@backstage/core-components';
 import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
-import {
-  CatalogTable,
-  CatalogTableRow,
-  FilteredEntityLayout,
-  EntityListContainer,
-  FilterContainer,
-} from '@backstage/plugin-catalog';
+import { CatalogTable, CatalogTableRow } from '@backstage/plugin-catalog';
 import {
   EntityKindPicker,
   EntityLifecyclePicker,
@@ -40,6 +34,7 @@ import {
   EntityTypePicker,
   UserListFilterKind,
   UserListPicker,
+  CatalogFilterLayout,
 } from '@backstage/plugin-catalog-react';
 import React from 'react';
 import { registerComponentRouteRef } from '../../routes';
@@ -95,22 +90,22 @@ export const DefaultApiExplorerPage = ({
           <SupportButton>All your APIs</SupportButton>
         </ContentHeader>
         <EntityListProvider>
-          <FilteredEntityLayout>
-            <FilterContainer>
+          <CatalogFilterLayout>
+            <CatalogFilterLayout.Filters>
               <EntityKindPicker initialFilter="api" hidden />
               <EntityTypePicker />
               <UserListPicker initialFilter={initiallySelectedFilter} />
               <EntityOwnerPicker />
               <EntityLifecyclePicker />
               <EntityTagPicker />
-            </FilterContainer>
-            <EntityListContainer>
+            </CatalogFilterLayout.Filters>
+            <CatalogFilterLayout.Content>
               <CatalogTable
                 columns={columns || defaultColumns}
                 actions={actions}
               />
-            </EntityListContainer>
-          </FilteredEntityLayout>
+            </CatalogFilterLayout.Content>
+          </CatalogFilterLayout>
         </EntityListProvider>
       </Content>
     </PageWithHeader>
diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md
index 265fce417d..a1541b555e 100644
--- a/plugins/catalog-react/api-report.md
+++ b/plugins/catalog-react/api-report.md
@@ -63,6 +63,13 @@ export { CatalogApi };
 // @public
 export const catalogApiRef: ApiRef<CatalogApi>;
 
+// @public (undocumented)
+export const CatalogFilterLayout: {
+  (props: { children: React_2.ReactNode }): JSX.Element;
+  Filters: (props: { children: React_2.ReactNode }) => JSX.Element;
+  Content: (props: { children: React_2.ReactNode }) => JSX.Element;
+};
+
 // @public (undocumented)
 export type CatalogReactComponentsNameToClassKey = {
   CatalogReactUserListPicker: CatalogReactUserListPickerClassKey;
diff --git a/plugins/catalog-react/package.json b/plugins/catalog-react/package.json
index 5ba52e8ac7..39180ad5fb 100644
--- a/plugins/catalog-react/package.json
+++ b/plugins/catalog-react/package.json
@@ -42,6 +42,7 @@
     "@backstage/integration": "^0.8.0",
     "@backstage/plugin-permission-common": "^0.5.2",
     "@backstage/plugin-permission-react": "^0.3.3",
+    "@backstage/theme": "^0.2.15",
     "@backstage/types": "^0.1.3",
     "@backstage/version-bridge": "^0.1.2",
     "@material-ui/core": "^4.12.2",
diff --git a/plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx
similarity index 78%
rename from plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx
rename to plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx
index 4c0d17599d..751eb35f1d 100644
--- a/plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx
+++ b/plugins/catalog-react/src/components/CatalogFilterLayout/CatalogFilterLayout.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { BackstageTheme } from '@backstage/theme';
+import React, { useState } from 'react';
 import {
   Box,
   Button,
@@ -25,10 +25,10 @@ import {
   useTheme,
 } from '@material-ui/core';
 import FilterListIcon from '@material-ui/icons/FilterList';
-import React, { useState } from 'react';
+import { BackstageTheme } from '@backstage/theme';
 
 /** @public */
-export function FilterContainer(props: { children: React.ReactNode }) {
+export const Filters = (props: { children: React.ReactNode }) => {
   const isMidSizeScreen = useMediaQuery<BackstageTheme>(theme =>
     theme.breakpoints.down('md'),
   );
@@ -69,4 +69,25 @@ export function FilterContainer(props: { children: React.ReactNode }) {
       {props.children}
     </Grid>
   );
-}
+};
+
+/** @public */
+export const Content = (props: { children: React.ReactNode }) => {
+  return (
+    <Grid item xs={12} lg={10}>
+      {props.children}
+    </Grid>
+  );
+};
+
+/** @public */
+export const CatalogFilterLayout = (props: { children: React.ReactNode }) => {
+  return (
+    <Grid container style={{ position: 'relative' }}>
+      {props.children}
+    </Grid>
+  );
+};
+
+CatalogFilterLayout.Filters = Filters;
+CatalogFilterLayout.Content = Content;
diff --git a/plugins/catalog/src/components/FilteredEntityLayout/EntityListContainer.tsx b/plugins/catalog-react/src/components/CatalogFilterLayout/index.ts
similarity index 71%
rename from plugins/catalog/src/components/FilteredEntityLayout/EntityListContainer.tsx
rename to plugins/catalog-react/src/components/CatalogFilterLayout/index.ts
index d210d551fb..b69aab56ed 100644
--- a/plugins/catalog/src/components/FilteredEntityLayout/EntityListContainer.tsx
+++ b/plugins/catalog-react/src/components/CatalogFilterLayout/index.ts
@@ -14,14 +14,4 @@
  * limitations under the License.
  */
 
-import { Grid } from '@material-ui/core';
-import React from 'react';
-
-/** @public */
-export function EntityListContainer(props: { children: React.ReactNode }) {
-  return (
-    <Grid item xs={12} lg={10}>
-      {props.children}
-    </Grid>
-  );
-}
+export { CatalogFilterLayout } from './CatalogFilterLayout';
diff --git a/plugins/catalog-react/src/components/index.ts b/plugins/catalog-react/src/components/index.ts
index 807d6bb702..7a26a72bf9 100644
--- a/plugins/catalog-react/src/components/index.ts
+++ b/plugins/catalog-react/src/components/index.ts
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+export * from './CatalogFilterLayout';
 export * from './EntityKindPicker';
 export * from './EntityLifecyclePicker';
 export * from './EntityOwnerPicker';
diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md
index 43cde23c57..eddbe913d7 100644
--- a/plugins/catalog/api-report.md
+++ b/plugins/catalog/api-report.md
@@ -283,10 +283,10 @@ export interface EntityLinksCardProps {
 // @public (undocumented)
 export type EntityLinksEmptyStateClassKey = 'code';
 
-// @public (undocumented)
-export function EntityListContainer(props: {
-  children: React_2.ReactNode;
-}): JSX.Element;
+// @public @deprecated (undocumented)
+export const EntityListContainer: (props: {
+  children: ReactNode;
+}) => JSX.Element;
 
 // @public
 export function EntityOrphanWarning(): JSX.Element;
@@ -319,15 +319,13 @@ export interface EntitySwitchProps {
   children: ReactNode;
 }
 
-// @public (undocumented)
-export function FilterContainer(props: {
-  children: React_2.ReactNode;
-}): JSX.Element;
+// @public @deprecated (undocumented)
+export const FilterContainer: (props: { children: ReactNode }) => JSX.Element;
 
-// @public (undocumented)
-export function FilteredEntityLayout(props: {
-  children: React_2.ReactNode;
-}): JSX.Element;
+// @public @deprecated (undocumented)
+export const FilteredEntityLayout: (props: {
+  children: React.ReactNode;
+}) => JSX.Element;
 
 // @public
 export function hasCatalogProcessingErrors(
diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx
index 8bb9bae764..2a2861ac29 100644
--- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx
+++ b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx
@@ -25,6 +25,7 @@ import {
 } from '@backstage/core-components';
 import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
 import {
+  CatalogFilterLayout,
   EntityLifecyclePicker,
   EntityListProvider,
   EntityOwnerPicker,
@@ -36,11 +37,6 @@ import {
 import React from 'react';
 import { createComponentRouteRef } from '../../routes';
 import { CatalogTable, CatalogTableRow } from '../CatalogTable';
-import {
-  FilteredEntityLayout,
-  EntityListContainer,
-  FilterContainer,
-} from '../FilteredEntityLayout';
 import { CatalogKindHeader } from '../CatalogKindHeader';
 
 /**
@@ -71,18 +67,18 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
             />
             <SupportButton>All your software catalog entities</SupportButton>
           </ContentHeader>
-          <FilteredEntityLayout>
-            <FilterContainer>
+          <CatalogFilterLayout>
+            <CatalogFilterLayout.Filters>
               <EntityTypePicker />
               <UserListPicker initialFilter={initiallySelectedFilter} />
               <EntityOwnerPicker />
               <EntityLifecyclePicker />
               <EntityTagPicker />
-            </FilterContainer>
-            <EntityListContainer>
+            </CatalogFilterLayout.Filters>
+            <CatalogFilterLayout.Content>
               <CatalogTable columns={columns} actions={actions} />
-            </EntityListContainer>
-          </FilteredEntityLayout>
+            </CatalogFilterLayout.Content>
+          </CatalogFilterLayout>
         </Content>
       </EntityListProvider>
     </PageWithHeader>
diff --git a/plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx b/plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx
deleted file mode 100644
index 8e595fe5cd..0000000000
--- a/plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * Copyright 2021 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Grid } from '@material-ui/core';
-import React from 'react';
-
-/** @public */
-export function FilteredEntityLayout(props: { children: React.ReactNode }) {
-  return (
-    <Grid container style={{ position: 'relative' }}>
-      {props.children}
-    </Grid>
-  );
-}
diff --git a/plugins/catalog/src/components/FilteredEntityLayout/index.ts b/plugins/catalog/src/components/FilteredEntityLayout/index.ts
index ded61a4edc..892aa34147 100644
--- a/plugins/catalog/src/components/FilteredEntityLayout/index.ts
+++ b/plugins/catalog/src/components/FilteredEntityLayout/index.ts
@@ -14,6 +14,24 @@
  * limitations under the License.
  */
 
-export { FilteredEntityLayout } from './FilteredEntityLayout';
-export { FilterContainer } from './FilterContainer';
-export { EntityListContainer } from './EntityListContainer';
+import { CatalogFilterLayout } from '@backstage/plugin-catalog-react';
+
+/**
+ * @public
+ * @deprecated Use `FilteredCatalogLayout` from `@backstage/plugin-catalog-react` instead.
+ */
+export const FilteredEntityLayout = CatalogFilterLayout as (props: {
+  children: React.ReactNode;
+}) => JSX.Element;
+
+/**
+ * @public
+ * @deprecated Use `FilteredCatalogLayout.Filters` from `@backstage/plugin-catalog-react` instead.
+ */
+export const FilterContainer = CatalogFilterLayout.Filters;
+
+/**
+ * @public
+ * @deprecated Use `FilteredCatalogLayout.Content` from `@backstage/plugin-catalog-react` instead.
+ */
+export const EntityListContainer = CatalogFilterLayout.Content;
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
index 13ab2e7d37..a60a60554a 100644
--- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
+++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
@@ -26,13 +26,13 @@ import { Entity } from '@backstage/catalog-model';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import {
+  CatalogFilterLayout,
   EntityKindPicker,
   EntityListProvider,
   EntitySearchBar,
   EntityTagPicker,
   UserListPicker,
 } from '@backstage/plugin-catalog-react';
-import { makeStyles } from '@material-ui/core';
 import React, { ComponentType } from 'react';
 import { registerComponentRouteRef } from '../../routes';
 import { TemplateList } from '../TemplateList';
@@ -40,15 +40,6 @@ import { TemplateTypePicker } from '../TemplateTypePicker';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
 import { usePermission } from '@backstage/plugin-permission-react';
 
-const useStyles = makeStyles(theme => ({
-  contentWrapper: {
-    display: 'grid',
-    gridTemplateAreas: "'filters' 'grid'",
-    gridTemplateColumns: '250px 1fr',
-    gridColumnGap: theme.spacing(2),
-  },
-}));
-
 export type ScaffolderPageProps = {
   TemplateCardComponent?:
     | ComponentType<{ template: TemplateEntityV1beta3 }>
@@ -65,7 +56,6 @@ export const ScaffolderPageContents = ({
   TemplateCardComponent,
   groups,
 }: ScaffolderPageProps) => {
-  const styles = useStyles();
   const registerComponentLink = useRouteRef(registerComponentRouteRef);
   const otherTemplatesGroup = {
     title: groups ? 'Other Templates' : 'Templates',
@@ -99,8 +89,8 @@ export const ScaffolderPageContents = ({
           </SupportButton>
         </ContentHeader>
 
-        <div className={styles.contentWrapper}>
-          <div>
+        <CatalogFilterLayout>
+          <CatalogFilterLayout.Filters>
             <EntitySearchBar />
             <EntityKindPicker initialFilter="template" hidden />
             <UserListPicker
@@ -109,8 +99,8 @@ export const ScaffolderPageContents = ({
             />
             <TemplateTypePicker />
             <EntityTagPicker />
-          </div>
-          <div>
+          </CatalogFilterLayout.Filters>
+          <CatalogFilterLayout.Content>
             {groups &&
               groups.map((group, index) => (
                 <TemplateList
@@ -124,8 +114,8 @@ export const ScaffolderPageContents = ({
               TemplateCardComponent={TemplateCardComponent}
               group={otherTemplatesGroup}
             />
-          </div>
-        </div>
+          </CatalogFilterLayout.Content>
+        </CatalogFilterLayout>
       </Content>
     </Page>
   );
diff --git a/plugins/techdocs/package.json b/plugins/techdocs/package.json
index e02e4e1fa1..54e8aa4c28 100644
--- a/plugins/techdocs/package.json
+++ b/plugins/techdocs/package.json
@@ -42,7 +42,6 @@
     "@backstage/errors": "^0.2.2",
     "@backstage/integration": "^0.8.0",
     "@backstage/integration-react": "^0.1.25",
-    "@backstage/plugin-catalog": "^0.10.0",
     "@backstage/plugin-catalog-react": "^0.9.0",
     "@backstage/plugin-search": "^0.7.3",
     "@backstage/theme": "^0.2.15",
diff --git a/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx b/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx
index 4dcff501ed..bdbb4877ac 100644
--- a/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx
+++ b/plugins/techdocs/src/home/components/DefaultTechDocsHome.tsx
@@ -23,11 +23,7 @@ import {
   TableProps,
 } from '@backstage/core-components';
 import {
-  EntityListContainer,
-  FilterContainer,
-  FilteredEntityLayout,
-} from '@backstage/plugin-catalog';
-import {
+  CatalogFilterLayout,
   EntityListProvider,
   EntityOwnerPicker,
   EntityTagPicker,
@@ -65,17 +61,17 @@ export const DefaultTechDocsHome = (props: DefaultTechDocsHomeProps) => {
           </SupportButton>
         </ContentHeader>
         <EntityListProvider>
-          <FilteredEntityLayout>
-            <FilterContainer>
+          <CatalogFilterLayout>
+            <CatalogFilterLayout.Filters>
               <TechDocsPicker />
               <UserListPicker initialFilter={initialFilter} />
               <EntityOwnerPicker />
               <EntityTagPicker />
-            </FilterContainer>
-            <EntityListContainer>
+            </CatalogFilterLayout.Filters>
+            <CatalogFilterLayout.Content>
               <EntityListDocsTable actions={actions} columns={columns} />
-            </EntityListContainer>
-          </FilteredEntityLayout>
+            </CatalogFilterLayout.Content>
+          </CatalogFilterLayout>
         </EntityListProvider>
       </Content>
     </TechDocsPageWrapper>