diff --git a/.changeset/poor-weeks-act.md b/.changeset/poor-weeks-act.md
new file mode 100644
index 0000000000..152ce4bfc6
--- /dev/null
+++ b/.changeset/poor-weeks-act.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Change the Categories filter to a dropdown component
diff --git a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.test.tsx b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.test.tsx
index 534b3b6ce9..3d0267ff1f 100644
--- a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.test.tsx
+++ b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.test.tsx
@@ -94,6 +94,7 @@ describe('<TemplateTypePicker/>', () => {
       </ApiProvider>,
     );
     expect(rendered.getByText('Categories')).toBeInTheDocument();
+    fireEvent.click(rendered.getByTestId('categories-picker-expand'));
 
     entities.forEach(entity => {
       expect(
@@ -116,22 +117,27 @@ describe('<TemplateTypePicker/>', () => {
       </ApiProvider>,
     );
 
+    fireEvent.click(rendered.getByTestId('categories-picker-expand'));
     expect(rendered.getByLabelText('Service')).not.toBeChecked();
     expect(rendered.getByLabelText('Website')).not.toBeChecked();
 
     fireEvent.click(rendered.getByLabelText('Service'));
+    fireEvent.click(rendered.getByTestId('categories-picker-expand'));
     expect(rendered.getByLabelText('Service')).toBeChecked();
     expect(rendered.getByLabelText('Website')).not.toBeChecked();
 
     fireEvent.click(rendered.getByLabelText('Website'));
+    fireEvent.click(rendered.getByTestId('categories-picker-expand'));
     expect(rendered.getByLabelText('Service')).toBeChecked();
     expect(rendered.getByLabelText('Website')).toBeChecked();
 
     fireEvent.click(rendered.getByLabelText('Service'));
+    fireEvent.click(rendered.getByTestId('categories-picker-expand'));
     expect(rendered.getByLabelText('Service')).not.toBeChecked();
     expect(rendered.getByLabelText('Website')).toBeChecked();
 
     fireEvent.click(rendered.getByLabelText('Website'));
+    fireEvent.click(rendered.getByTestId('categories-picker-expand'));
     expect(rendered.getByLabelText('Service')).not.toBeChecked();
     expect(rendered.getByLabelText('Website')).not.toBeChecked();
   });
diff --git a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx
index 7151446f4f..a8418cfded 100644
--- a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx
+++ b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx
@@ -21,22 +21,20 @@ import {
   Box,
   Checkbox,
   FormControlLabel,
-  FormGroup,
-  makeStyles,
-  Theme,
+  TextField,
   Typography,
 } from '@material-ui/core';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { Autocomplete } from '@material-ui/lab';
 import { useEntityTypeFilter } from '@backstage/plugin-catalog-react';
 import { alertApiRef, useApi } from '@backstage/core-plugin-api';
 
-const useStyles = makeStyles<Theme>(theme => ({
-  checkbox: {
-    padding: theme.spacing(1, 1, 1, 2),
-  },
-}));
+const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
+const checkedIcon = <CheckBoxIcon fontSize="small" />;
 
 export const TemplateTypePicker = () => {
-  const classes = useStyles();
   const alertApi = useApi(alertApiRef);
   const { error, loading, availableTypes, selectedTypes, setSelectedTypes } =
     useEntityTypeFilter();
@@ -53,32 +51,31 @@ export const TemplateTypePicker = () => {
     return null;
   }
 
-  function toggleSelection(type: string) {
-    setSelectedTypes(
-      selectedTypes.includes(type)
-        ? selectedTypes.filter(t => t !== type)
-        : [...selectedTypes, type],
-    );
-  }
-
   return (
     <Box pb={1} pt={1}>
       <Typography variant="button">Categories</Typography>
-      <FormGroup>
-        {availableTypes.map(type => (
+      <Autocomplete<string>
+        multiple
+        aria-label="Categories"
+        options={availableTypes}
+        value={selectedTypes}
+        onChange={(_: object, value: string[]) => setSelectedTypes(value)}
+        renderOption={(option, { selected }) => (
           <FormControlLabel
             control={
               <Checkbox
-                checked={selectedTypes.includes(type)}
-                onChange={() => toggleSelection(type)}
-                className={classes.checkbox}
+                icon={icon}
+                checkedIcon={checkedIcon}
+                checked={selected}
               />
             }
-            label={capitalize(type)}
-            key={type}
+            label={capitalize(option)}
           />
-        ))}
-      </FormGroup>
+        )}
+        size="small"
+        popupIcon={<ExpandMoreIcon data-testid="categories-picker-expand" />}
+        renderInput={params => <TextField {...params} variant="outlined" />}
+      />
     </Box>
   );
 };