diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx
index 2818351f41..37717ed158 100644
--- a/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/app/src/components/search/SearchPage.tsx
@@ -30,6 +30,14 @@ import { DocsResultListItem } from '@backstage/plugin-techdocs';
 import { SearchResultSet } from '@backstage/search-common';
 
 const useStyles = makeStyles((theme: Theme) => ({
+  bar: {
+    padding: theme.spacing(1, 0),
+  },
+  filter: {
+    '& + &': {
+      marginTop: theme.spacing(2.5),
+    },
+  },
   filters: {
     padding: theme.spacing(2),
   },
@@ -97,7 +105,9 @@ const SearchPage = () => {
       <Content>
         <Grid container direction="row">
           <Grid item xs={12}>
-            <SearchBar debounceTime={100} />
+            <Paper className={classes.bar}>
+              <SearchBar debounceTime={100} />
+            </Paper>
           </Grid>
           <Grid item xs={3}>
             <Paper className={classes.filters}>
@@ -107,10 +117,12 @@ const SearchPage = () => {
                 defaultValue="software-catalog"
               />
               <SearchFilter.Select
+                className={classes.filter}
                 name="kind"
                 values={['Component', 'Template']}
               />
               <SearchFilter.Checkbox
+                className={classes.filter}
                 name="lifecycle"
                 values={['experimental', 'production']}
               />
diff --git a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx
index 16da352ece..fa2ba0d94e 100644
--- a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx
+++ b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx
@@ -15,7 +15,7 @@
  */
 
 import React from 'react';
-import { Grid } from '@material-ui/core';
+import { Paper, Grid } from '@material-ui/core';
 import { SearchBar, SearchContext } from '../index';
 import { MemoryRouter } from 'react-router';
 
@@ -36,7 +36,9 @@ export const Default = () => {
       <SearchContext.Provider value={defaultValue}>
         <Grid container direction="row">
           <Grid item xs={12}>
-            <SearchBar />
+            <Paper style={{ padding: '8px 0' }}>
+              <SearchBar />
+            </Paper>
           </Grid>
         </Grid>
       </SearchContext.Provider>
diff --git a/plugins/search/src/components/SearchBar/SearchBar.tsx b/plugins/search/src/components/SearchBar/SearchBar.tsx
index e011dcbfec..a1db818488 100644
--- a/plugins/search/src/components/SearchBar/SearchBar.tsx
+++ b/plugins/search/src/components/SearchBar/SearchBar.tsx
@@ -16,14 +16,7 @@
 
 import React, { ChangeEvent, useState } from 'react';
 import { useDebounce } from 'react-use';
-import {
-  Paper,
-  InputBase,
-  InputAdornment,
-  IconButton,
-  Theme,
-  makeStyles,
-} from '@material-ui/core';
+import { InputBase, InputAdornment, IconButton } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 import ClearButton from '@material-ui/icons/Clear';
 
@@ -34,14 +27,7 @@ type Props = {
   debounceTime?: number;
 };
 
-const useStyles = makeStyles((theme: Theme) => ({
-  searchBar: {
-    padding: theme.spacing(1, 0),
-  },
-}));
-
 export const SearchBar = ({ className, debounceTime = 0 }: Props) => {
-  const classes = useStyles();
   const { term, setTerm } = useSearch();
   const [value, setValue] = useState<string>(term);
 
@@ -54,30 +40,28 @@ export const SearchBar = ({ className, debounceTime = 0 }: Props) => {
   const handleClear = () => setValue('');
 
   return (
-    <Paper className={classes.searchBar}>
-      <InputBase
-        className={className}
-        data-testid="search-bar-next"
-        fullWidth
-        placeholder="Search in Backstage"
-        value={value}
-        onChange={handleQuery}
-        inputProps={{ 'aria-label': 'Search term' }}
-        startAdornment={
-          <InputAdornment position="start">
-            <IconButton aria-label="Query term" disabled>
-              <SearchIcon />
-            </IconButton>
-          </InputAdornment>
-        }
-        endAdornment={
-          <InputAdornment position="end">
-            <IconButton aria-label="Clear term" onClick={handleClear}>
-              <ClearButton />
-            </IconButton>
-          </InputAdornment>
-        }
-      />
-    </Paper>
+    <InputBase
+      className={className}
+      data-testid="search-bar-next"
+      fullWidth
+      placeholder="Search in Backstage"
+      value={value}
+      onChange={handleQuery}
+      inputProps={{ 'aria-label': 'Search term' }}
+      startAdornment={
+        <InputAdornment position="start">
+          <IconButton aria-label="Query term" disabled>
+            <SearchIcon />
+          </IconButton>
+        </InputAdornment>
+      }
+      endAdornment={
+        <InputAdornment position="end">
+          <IconButton aria-label="Clear term" onClick={handleClear}>
+            <ClearButton />
+          </IconButton>
+        </InputAdornment>
+      }
+    />
   );
 };
diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.tsx
index d9da3c4dbd..52b03c785b 100644
--- a/plugins/search/src/components/SearchFilter/SearchFilter.tsx
+++ b/plugins/search/src/components/SearchFilter/SearchFilter.tsx
@@ -24,21 +24,15 @@ import {
   Select,
   MenuItem,
   FormLabel,
-  Theme,
 } from '@material-ui/core';
 
 import { useSearch } from '../SearchContext';
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles({
   label: {
     textTransform: 'capitalize',
   },
-  filter: {
-    '& + &': {
-      marginTop: theme.spacing(2.5),
-    },
-  },
-}));
+});
 
 export type Component = {
   className?: string;
@@ -86,7 +80,7 @@ const CheckboxFilter = ({
 
   return (
     <FormControl
-      className={className || classes.filter}
+      className={className}
       fullWidth
       data-testid="search-checkboxfilter-next"
     >
@@ -144,7 +138,7 @@ const SelectFilter = ({
 
   return (
     <FormControl
-      className={className || classes.filter}
+      className={className}
       variant="filled"
       fullWidth
       data-testid="search-selectfilter-next"