diff --git a/src/components/SidebarIndexItem.js b/src/components/SidebarIndexItem.js
index e3a1204a6d39324992f80db8c5e3bfac62703ada..11bb4af9c08171d10ee6a9a8be4c059a3a7711b1 100644
--- a/src/components/SidebarIndexItem.js
+++ b/src/components/SidebarIndexItem.js
@@ -12,7 +12,6 @@ export class SidebarIndexItem extends Component {
 
     return (
       <Typography
-        sx={{ paddingLeft: 1 }}
         variant="body1"
       >
         {label}
diff --git a/src/components/SidebarIndexList.js b/src/components/SidebarIndexList.js
index 59c8f76737d51ebaf78c4a9840e7213e18cc947c..d19394ef97ec83f0718e161c4171f37446829a0d 100644
--- a/src/components/SidebarIndexList.js
+++ b/src/components/SidebarIndexList.js
@@ -2,11 +2,20 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
+import { styled } from '@mui/material/styles';
 import { ScrollTo } from './ScrollTo';
 import MiradorCanvas from '../lib/MiradorCanvas';
 import SidebarIndexItem from '../containers/SidebarIndexItem';
 import SidebarIndexThumbnail from '../containers/SidebarIndexThumbnail';
 
+const StyledItem = styled(MenuItem, { name: 'SidebarIndexList', slot: 'item' })(({ theme }) => ({
+  alignItems: 'flex-start',
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(1),
+  position: 'initial',
+  whiteSpace: 'normal',
+}));
+
 /** */
 export class SidebarIndexList extends Component {
   /** @private */
@@ -55,21 +64,14 @@ export class SidebarIndexList extends Component {
                 selected={selectedCanvasIds.includes(canvas.id)}
                 scrollTo={selectedCanvasIds.includes(canvas.id)}
               >
-                <MenuItem
+                <StyledItem
                   key={canvas.id}
-                  disableGutters
-                  sx={{
-                    paddingLeft: 2,
-                    paddingRight: 1,
-                    position: 'initial',
-                    whiteSpace: 'normal',
-                  }}
                   divider
                   onClick={onClick}
                   component="li"
                 >
                   <Item label={canvas.label} canvas={canvases[canvasIndex]} />
-                </MenuItem>
+                </StyledItem>
               </ScrollTo>
             );
           })
diff --git a/src/components/SidebarIndexThumbnail.js b/src/components/SidebarIndexThumbnail.js
index 3abf2902c46fdafa6c34178d38416f05ea6fda30..05126d8de02dc6d6d184bea3d94bb838607e9335 100644
--- a/src/components/SidebarIndexThumbnail.js
+++ b/src/components/SidebarIndexThumbnail.js
@@ -21,10 +21,7 @@ export class SidebarIndexThumbnail extends Component {
             maxWidth={width}
           />
         </div>
-        <Typography
-          sx={{ paddingLeft: 1 }}
-          variant="body1"
-        >
+        <Typography>
           {label}
         </Typography>
       </>