diff --git a/frontend/src/components/sidebar.tsx b/frontend/src/components/sidebar.tsx
index eb94318..a834606 100644
--- a/frontend/src/components/sidebar.tsx
+++ b/frontend/src/components/sidebar.tsx
@@ -1,4 +1,4 @@
-import { Autocomplete, Box, Divider, Grid, InputLabel, MenuItem, Paper, Rating, Select, SelectChangeEvent, TextField, ToggleButton, Typography } from "@mui/material";
+import { Autocomplete, Box, Divider, Grid, InputLabel, MenuItem, Paper, Rating, Select, SelectChangeEvent, Switch, TextField, ToggleButton, Typography } from "@mui/material";
 import getCities from "../functions/getCities";
 import FilterState from "../models/filterState";
 import { useEffect, useState } from "react";
@@ -35,111 +35,107 @@ export default function Sidebar(props : SidebarProps) {
                 <Typography variant='h5' component='h2'>Filter Conveyancers</Typography>
             </Box>
             <Box sx={{ p: 2}}>
-                <Grid container spacing={1} sx={{width: '100%'}}>
-                    <Grid size={10}>
-                        <Typography component='legend'>Firm Name</Typography>
-                        <TextField
-                            label='Firm Name'
-                            variant='standard'
-                            value={props.filters.namePart}
-                            onChange={e => props.onChange(Object.assign({}, {...props.filters}, {namePart: (e.target as any).value}))}
-                        />
-                    </Grid>
-                    <Grid size={2}>
-                        <ToggleButton
-                            value="check"
-                            selected={props.filters.nameOnly}
-                            onChange={() => props.onChange(Object.assign({}, {...props.filters}, {nameOnly: !props.filters.nameOnly}))}
-                        >
-                            {props.filters.nameOnly
-                                ? <CheckIcon color='success' />
-                                : <ClearIcon color='error' />}
-                        </ToggleButton>
-                    </Grid>
-                </Grid>
+                <Typography component='legend'>Firm Name</Typography>
+                <TextField
+                    label='Firm Name'
+                    variant='standard'
+                    value={props.filters.namePart}
+                    onChange={e => props.onChange(Object.assign({}, {...props.filters}, {namePart: (e.target as any).value}))}
+                />
             </Box>
             <Divider />
             <Box sx={{ p: 2}}>
-                <Typography component='legend'>Cities</Typography>
-                <Autocomplete
-                    multiple
-                    options={cities}
-                    value={props.filters.cities}
-                    getOptionLabel={capitaliseFirstLetter}
-                    onChange={(_, value) => props.onChange(Object.assign({}, {...props.filters}, {cities: value}))}
-                    renderInput={(params) => (
-                        <TextField
-                            {...params}
-                            variant="standard"
-                            label="Cities"
-                            placeholder=""
-                        />
-                    )}
+                <Typography component='legend'>Search by Firm Name Only</Typography>
+                <Switch
+                    value={props.filters.nameOnly}
+                    onChange={(_, value) => props.onChange(Object.assign({}, {...props.filters}, {nameOnly: value}))}
                 />
             </Box>
-            <Divider />
-            <Box sx={{p: 2}}>
-                <Grid container spacing={1} sx={{width: '100%'}}>
-                    <Grid size={6}>
-                        <Typography component='legend'>Min. Rating</Typography>
-                        <Rating
-                            name='Min. Rating'
-                            precision={0.5}
-                            value={props.filters.minRating}
-                            size='medium'  
-                            onChange={(_, value) => props.onChange(Object.assign({}, {...props.filters}, {minRating: value}))}
-                        />
-                    </Grid>
-                    <Grid size={6}>
-                        <InputLabel id='ratings-label'>Rating Provider</InputLabel>
-                        <Select
-                            labelId='ratings-label'
-                            value={props.filters.ratingsProvider}
-                            onChange={(e : SelectChangeEvent) => props.onChange(Object.assign({}, {...props.filters}, {ratingsProvider: (e.target as any).value}))}
-                        >
-                            {ratingsProviders.map(provider => {
-                                return (
-                                    <MenuItem 
-                                        value={provider} 
-                                        selected={provider === props.filters.ratingsProvider}>{capitaliseFirstLetter(provider)}
-                                    </MenuItem>
-                                )
-                            })}
-                        </Select>
-                    </Grid>
-                </Grid>
-            </Box>
-            <Divider />
-            <Box sx={{p: 2}}>
-                <Typography component='legend'>Results per Page</Typography>
-                <NumberField 
-                    label="" 
-                    value={props.filters.resultsPerPage}
-                    onValueChange={value => props.onChange(Object.assign({}, {...props.filters}, {resultsPerPage: value, currentPage: 1}))}
-                    min={10} 
-                    max={40} 
-                />
-            </Box>
-            <Divider />
-            <Box sx={{p: 2}}>
-                <InputLabel id='sort-label'>Sort By</InputLabel>
-                <Select
-                    labelId='sort-label'
-                    value={props.filters.sortBy}
-                    onChange={(e : SelectChangeEvent) => props.onChange(Object.assign({}, {...props.filters}, {sortBy: (e.target as any).value}))}
-                >
-                    {sortingOptions.map(option => {
-                        return (
-                            <MenuItem 
-                                value={option.value} 
-                                selected={option.value === props.filters.sortBy}
+            {!props.filters.nameOnly && 
+            <>
+                <Divider />
+                <Box sx={{ p: 2}}>
+                    <Typography component='legend'>Cities</Typography>
+                    <Autocomplete
+                        multiple
+                        options={cities}
+                        value={props.filters.cities}
+                        getOptionLabel={capitaliseFirstLetter}
+                        onChange={(_, value) => props.onChange(Object.assign({}, {...props.filters}, {cities: value}))}
+                        renderInput={(params) => (
+                            <TextField
+                                {...params}
+                                variant="standard"
+                                label="Cities"
+                                placeholder=""
+                            />
+                        )}
+                    />
+                </Box>
+                <Divider />
+                <Box sx={{p: 2}}>
+                    <Grid container spacing={1} sx={{width: '100%'}}>
+                        <Grid size={6}>
+                            <Typography component='legend'>Min. Rating</Typography>
+                            <Rating
+                                name='Min. Rating'
+                                precision={0.5}
+                                value={props.filters.minRating}
+                                size='medium'  
+                                onChange={(_, value) => props.onChange(Object.assign({}, {...props.filters}, {minRating: value}))}
+                            />
+                        </Grid>
+                        <Grid size={6}>
+                            <InputLabel id='ratings-label'>Rating Provider</InputLabel>
+                            <Select
+                                labelId='ratings-label'
+                                value={props.filters.ratingsProvider}
+                                onChange={(e : SelectChangeEvent) => props.onChange(Object.assign({}, {...props.filters}, {ratingsProvider: (e.target as any).value}))}
                             >
-                                {option.name}
-                            </MenuItem>
-                        )
-                    })}
-                </Select>
-            </Box>
+                                {ratingsProviders.map(provider => {
+                                    return (
+                                        <MenuItem 
+                                            value={provider} 
+                                            selected={provider === props.filters.ratingsProvider}>{capitaliseFirstLetter(provider)}
+                                        </MenuItem>
+                                    )
+                                })}
+                            </Select>
+                        </Grid>
+                    </Grid>
+                </Box>
+                <Divider />
+                <Box sx={{p: 2}}>
+                    <Typography component='legend'>Results per Page</Typography>
+                    <NumberField 
+                        label="" 
+                        value={props.filters.resultsPerPage}
+                        onValueChange={value => props.onChange(Object.assign({}, {...props.filters}, {resultsPerPage: value, currentPage: 1}))}
+                        min={10} 
+                        max={40} 
+                    />
+                </Box>
+                <Divider />
+                <Box sx={{p: 2}}>
+                    <InputLabel id='sort-label'>Sort By</InputLabel>
+                    <Select
+                        labelId='sort-label'
+                        value={props.filters.sortBy}
+                        onChange={(e : SelectChangeEvent) => props.onChange(Object.assign({}, {...props.filters}, {sortBy: (e.target as any).value}))}
+                    >
+                        {sortingOptions.map(option => {
+                            return (
+                                <MenuItem 
+                                    value={option.value} 
+                                    selected={option.value === props.filters.sortBy}
+                                >
+                                    {option.name}
+                                </MenuItem>
+                            )
+                        })}
+                    </Select>
+                </Box>
+            </>}
         </Paper>
     )
 }