diff --git a/src/components/WatchFolder/styledComponents.tsx b/src/components/WatchFolder/styledComponents.tsx
index 3e6d595c1..2af051bbe 100644
--- a/src/components/WatchFolder/styledComponents.tsx
+++ b/src/components/WatchFolder/styledComponents.tsx
@@ -3,15 +3,12 @@ import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import VerticallyCentered from 'components/Container';
 
-export const MappingsContainer = styled(Box)(({ theme }) => ({
+export const MappingsContainer = styled(Box)(() => ({
     height: '278px',
     overflow: 'auto',
     '&::-webkit-scrollbar': {
         width: '4px',
     },
-    '&::-webkit-scrollbar-thumb': {
-        backgroundColor: theme.palette.secondary.main,
-    },
 }));
 
 export const NoMappingsContainer = styled(VerticallyCentered)({
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index ed219cfd2..20af67d7b 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -239,7 +239,7 @@ export default function App({ Component, err }) {
             </Head>
 
             <ThemeProvider theme={darkThemeOptions}>
-                <CssBaseline />
+                <CssBaseline enableColorScheme />
                 {showNavbar && <AppNavbar />}
                 <MessageContainer>
                     {offline && constants.OFFLINE_MSG}