diff --git a/src/components/WindowThumbnailSettings.js b/src/components/WindowThumbnailSettings.js
index e25dc0553e..042355e4d0 100644
--- a/src/components/WindowThumbnailSettings.js
+++ b/src/components/WindowThumbnailSettings.js
@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import { styled } from '@mui/material/styles';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import ListSubheader from '@mui/material/ListSubheader';
 import MenuItem from '@mui/material/MenuItem';
@@ -6,6 +7,19 @@ import ThumbnailsOffIcon from '@mui/icons-material/CropDinSharp';
 import PropTypes from 'prop-types';
 import ThumbnailNavigationBottomIcon from './icons/ThumbnailNavigationBottomIcon';
 import ThumbnailNavigationRightIcon from './icons/ThumbnailNavigationRightIcon';
+
+const ThumbnailOption = styled(MenuItem, { name: 'WindowThumbnailSettings', slot: 'option' })(({ selected, theme }) => ({
+  '& .MuiFormControlLabel-label': {
+    borderBottom: '2px solid transparent',
+    ...(selected && {
+      borderBottomColor: theme.palette.secondary.main,
+    }),
+  },
+  backgroundColor: 'transparent !important',
+  color: selected ? theme.palette.secondary.main : undefined,
+  display: 'inline-block',
+}));
+
 /**
  *
  */
@@ -41,60 +55,40 @@ export class WindowThumbnailSettings extends Component {
       <>
         <ListSubheader role="presentation" disableSticky tabIndex={-1}>{t('thumbnails')}</ListSubheader>
 
-        <MenuItem sx={{ display: 'inline-block' }} onClick={() => { this.handleChange('off'); handleClose(); }}>
+        <ThumbnailOption selected={thumbnailNavigationPosition === 'off'} onClick={() => { this.handleChange('off'); handleClose(); }}>
           <FormControlLabel
             value="off"
-            sx={{
-              '&.MuiFormControlLabel-label': {
-                borderBottom: '2px solid',
-                borderBottomColor: thumbnailNavigationPosition === 'off' ? 'secondary.main' : 'transparent',
-                color: thumbnailNavigationPosition === 'off' ? 'secondary.main' : undefined,
-              },
-            }}
             control={
-              <ThumbnailsOffIcon color={thumbnailNavigationPosition === 'off' ? 'secondary' : undefined} />
+              <ThumbnailsOffIcon color={thumbnailNavigationPosition === 'off' ? 'secondary' : undefined} fill="currentcolor" />
             }
             label={t('off')}
             labelPlacement="bottom"
           />
-        </MenuItem>
-        <MenuItem sx={{ display: 'inline-block' }} onClick={() => { this.handleChange('far-bottom'); handleClose(); }}>
+        </ThumbnailOption>
+        <ThumbnailOption selected={thumbnailNavigationPosition === 'far-bottom'} onClick={() => { this.handleChange('far-bottom'); handleClose(); }}>
           <FormControlLabel
             value="far-bottom"
-            sx={{
-              '&.MuiFormControlLabel-label': {
-                borderBottom: '2px solid',
-                borderBottomColor: thumbnailNavigationPosition === 'off' ? 'secondary.main' : 'transparent',
-                color: thumbnailNavigationPosition === 'off' ? 'secondary.main' : undefined,
-              },
-            }}
             control={
-              <ThumbnailNavigationBottomIcon color={thumbnailNavigationPosition === 'far-bottom' ? 'secondary' : undefined} />
+              <ThumbnailNavigationBottomIcon color={thumbnailNavigationPosition === 'far-bottom' ? 'secondary' : undefined} fill="currentcolor" />
             }
             label={t('bottom')}
             labelPlacement="bottom"
           />
-        </MenuItem>
-        <MenuItem sx={{ display: 'inline-block' }} onClick={() => { this.handleChange('far-right'); handleClose(); }}>
+        </ThumbnailOption>
+        <ThumbnailOption selected={thumbnailNavigationPosition === 'far-right'} onClick={() => { this.handleChange('far-right'); handleClose(); }}>
           <FormControlLabel
             value="far-right"
-            sx={{
-              '&.MuiFormControlLabel-label': {
-                borderBottom: '2px solid',
-                borderBottomColor: thumbnailNavigationPosition === 'off' ? 'secondary.main' : 'transparent',
-                color: thumbnailNavigationPosition === 'off' ? 'secondary.main' : undefined,
-              },
-            }}
             control={(
               <ThumbnailNavigationRightIcon
                 color={thumbnailNavigationPosition === 'far-right' ? 'secondary' : undefined}
+                fill="currentcolor"
                 style={direction === 'rtl' ? { transform: 'rotate(180deg)' } : {}}
               />
             )}
             label={t('right')}
             labelPlacement="bottom"
           />
-        </MenuItem>
+        </ThumbnailOption>
       </>
     );
   }
diff --git a/src/components/WindowViewSettings.js b/src/components/WindowViewSettings.js
index 1895516550..e693b2ffcd 100644
--- a/src/components/WindowViewSettings.js
+++ b/src/components/WindowViewSettings.js
@@ -1,4 +1,5 @@
 import { Component } from 'react';
+import { styled } from '@mui/material/styles';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import MenuItem from '@mui/material/MenuItem';
 import ListSubheader from '@mui/material/ListSubheader';
@@ -8,6 +9,18 @@ import PropTypes from 'prop-types';
 import BookViewIcon from './icons/BookViewIcon';
 import GalleryViewIcon from './icons/GalleryViewIcon';
 
+const ViewOption = styled(MenuItem, { name: 'WindowViewSettings', slot: 'option' })(({ selected, theme }) => ({
+  '& .MuiFormControlLabel-label': {
+    borderBottom: '2px solid transparent',
+    ...(selected && {
+      borderBottomColor: theme.palette.secondary.main,
+    }),
+  },
+  backgroundColor: 'transparent !important',
+  color: selected ? theme.palette.secondary.main : undefined,
+  display: 'inline-block',
+}));
+
 /**
  *
  */
@@ -49,26 +62,19 @@ export class WindowViewSettings extends Component {
     /** Suspiciously similar to a component, yet if it is invoked through JSX
         none of the click handlers work? */
     const menuItem = ({ value, Icon }) => (
-      <MenuItem
+      <ViewOption
+        selected={windowViewType === value}
         key={value}
-        sx={{ display: 'inline-block' }}
         autoFocus={windowViewType === value}
         onClick={() => { this.handleChange(value); handleClose(); }}
       >
         <FormControlLabel
           value={value}
-          sx={{
-            '&.MuiFormControlLabel-label': {
-              borderBottom: '2px solid',
-              borderBottomColor: windowViewType === value ? 'secondary.main' : 'transparent',
-              color: 'secondary.main',
-            },
-          }}
-          control={<Icon color={windowViewType === value ? 'secondary' : undefined} />}
+          control={<Icon fill="currentcolor" color={windowViewType === value ? 'secondary' : undefined} />}
           label={t(value)}
           labelPlacement="bottom"
         />
-      </MenuItem>
+      </ViewOption>
     );
 
     if (viewTypes.length === 0) return null;