diff --git a/package.json b/package.json
index 0c40d0c..f6ed8df 100644
--- a/package.json
+++ b/package.json
@@ -62,12 +62,10 @@
     "@mui/icons-material": "^6.5.0",
     "@mui/lab": "^6.0.1-beta.36",
     "@mui/material": "^6.5.0",
-    "@mui/styles": "^6.5.0",
     "@sentry/electron": "^4.0.2",
     "allotment": "^1.20.4",
     "classnames": "^2.3.2",
     "clean-stack": "3.0.1",
-    "clsx": "^1.2.1",
     "computed-async-mobx": "^4.2.0",
     "cpus": "^1.0.3",
     "d3-array": "^3.2.4",
diff --git a/src/app/AlignmentCard.js b/src/app/AlignmentCard.js
index 2c138a3..6e6b97c 100644
--- a/src/app/AlignmentCard.js
+++ b/src/app/AlignmentCard.js
@@ -1,11 +1,9 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { makeStyles, withStyles } from '@mui/styles';
 import IconButton from '@mui/material/IconButton';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
-import classNames from 'classnames';
 import CircularProgress from '@mui/material/CircularProgress';
 import Chip from '@mui/material/Chip';
 import Switch from '@mui/material/Switch';
@@ -23,132 +21,21 @@ import CardActions from '@mui/material/CardActions';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 
-const InputSwitch = withStyles((theme) => ({
-  switchBase: {
-    color: theme.palette.input.secondaryText,
-    '&.Mui-checked': {
-      color: theme.palette.input.dark,
-    },
-    '&.Mui-checked + .Mui-track': {
-      backgroundColor: theme.palette.input.dark,
-    },
-  },
-  checked: {},
-  track: {},
-}))(Switch);
-
-// const useStyles = makeStyles(theme => ({
-const useStyles = makeStyles((theme) => {
-  return {
-    AlignmentCard: {
-      backgroundColor: theme.palette.input.light,
-      border: `1px solid ${theme.palette.input.border}`,
-    },
-    cardHeaderRoot: {
-      overflow: "hidden"
-    },
-    cardHeaderContent: {
-      overflow: "hidden"
-    },
-    heading: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-    content: {
-      display: 'flex',
-      alignItems: 'center',
-      marginLeft: '-10px',
-    },
-    name: {
-      marginRight: theme.spacing(1),
-    },
-    chip: {
-      height: '30px',
-      color: theme.palette.input.contrastText,
-      backgroundColor: theme.palette.input.main,
-      border: `1px solid ${theme.palette.input.darker}`,
-    },
-    link: {
-      cursor: 'pointer',
-      color: theme.palette.secondary.main,
-    },
-    secondaryText: {
-      color: theme.palette.primary.secondaryText,
-    },
-    divider: {
-      margin: '0 4px',
-    },
-    fileInfo: {
-      color: '#ccc',
-      fontSize: '0.75em',
-      marginTop: '0.25em',
-      overflowWrap: 'break-word',
-    },
-    partitionFileContainer: {
-      overflowY: 'auto',
-      height: 50,
-    },
-    partitionFileContent: {
-      color: theme.palette.primary.contrastText,
-      fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
-      fontSize: '10px',
-      height: '100%',
-      overflowWrap: 'break-word',
-      whiteSpace: 'pre-wrap',
-    },
-    path: {
-      cursor: 'pointer',
-      color: theme.palette.secondary.main,
-      marginLeft: 4,
-    },
-    button: {
-      margin: theme.spacing(1),
-    },
-    primaryButton: {
-      backgroundColor: theme.palette.input.main,
-      border: `1px solid ${theme.palette.input.darker}`,
-      color: theme.palette.input.contrastText,
-      '&:hover': {
-        backgroundColor: theme.palette.input.main,
-      },
-    },
-    rightIcon: {
-      marginLeft: theme.spacing(1),
-    },
-    iconSmall: {
-      fontSize: 20,
-    },
-    outputButton: {
-      marginLeft: theme.spacing(1),
-    },
-    loading: {
-      marginLeft: '10px',
-    },
-    remove: {
-      flexGrow: 1,
-      display: 'flex',
-      justifyContent: 'flex-end',
-    },
-    select: {
-      marginLeft: '10px',
-      minWidth: '150px',
-    },
-    selectWide: {
-      marginLeft: '10px',
-      minWidth: '200px',
-    },
-  };
-});
-
 function _ModelTestButton({ alignment }) {
-  const classes = useStyles();
   if (!alignment.modelTestCanRun) {
     return null;
   }
   return (
     <Button
-      style={{ marginLeft: 10 }}
-      className={classes.primaryButton}
+      sx={{
+        marginLeft: '10px',
+        backgroundColor: (theme) => theme.palette.input.main,
+        border: (theme) => `1px solid ${theme.palette.input.darker}`,
+        color: (theme) => theme.palette.input.contrastText,
+        '&:hover': {
+          backgroundColor: (theme) => theme.palette.input.main,
+        },
+      }}
       variant="contained"
       loading={alignment.modeltestLoading}
       loadingPosition="end"
@@ -165,10 +52,9 @@ _ModelTestButton.propTypes = {
 
 const ModelTestButton = observer(_ModelTestButton);
 
-function AlignmentCard({ className, alignment }) {
+function AlignmentCard({ alignment }) {
   const { dataType, numSequences, length } = alignment;
 
-  const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState(null);
 
   function handleMenuClick(event) {
@@ -187,49 +73,87 @@ function AlignmentCard({ className, alignment }) {
   }
 
   const Size = alignment.parsingComplete ? (
-    <span className={classes.secondaryText}>
+    <Box
+      component="span"
+      sx={{ color: (theme) => theme.palette.primary.secondaryText }}
+    >
       {numSequences} sequences of length {length}
-    </span>
+    </Box>
   ) : (
-    <span className={classes.secondaryText}>
+    <Box
+      component="span"
+      sx={{ color: (theme) => theme.palette.primary.secondaryText }}
+    >
       Parsing... {alignment.numSequencesParsed}{' '}
-    </span>
+    </Box>
   );
 
   const Type = dataType ? (
-    <Chip classes={{ root: classes.chip }} label={dataType} />
+    <Chip
+      sx={{
+        height: '30px',
+        color: (theme) => theme.palette.input.contrastText,
+        backgroundColor: (theme) => theme.palette.input.main,
+        border: (theme) => `1px solid ${theme.palette.input.darker}`,
+      }}
+      label={dataType}
+    />
   ) : (
     <CircularProgress variant="indeterminate" size={20} />
   );
 
   const Content = (
-    <div className={classes.content}>
-      <div>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: '-10px',
+      }}
+    >
+      <Box>
         {alignment.run.usesRaxmlNg ? (
           <Box display="flex">
             <Box display="flex" flexWrap="wrap" alignItems="center">
               <OptionSelect
-                className={classes.select}
+                sx={{
+                  marginLeft: '10px',
+                  minWidth: '150px',
+                }}
                 option={alignment.substitutionModel}
               />
               <OptionTextField
-                className={classes.select}
+                sx={{
+                  marginLeft: '10px',
+                  minWidth: '150px',
+                }}
                 option={alignment.multistateNumber}
               />
               <OptionSelect
-                className={classes.select}
+                sx={{
+                  marginLeft: '10px',
+                  minWidth: '150px',
+                }}
                 option={alignment.ngStationaryFrequencies}
               />
               <OptionSelect
-                className={classes.select}
+                sx={{
+                  marginLeft: '10px',
+                  minWidth: '150px',
+                }}
                 option={alignment.ngInvariantSites}
               />
               <OptionSelect
-                className={classes.select}
+                sx={{
+                  marginLeft: '10px',
+                  minWidth: '150px',
+                }}
                 option={alignment.ngRateHeterogeneity}
               />
               <OptionSelect
-                className={classes.select}
+                sx={{
+                  marginLeft: '10px',
+                  minWidth: '150px',
+                }}
                 option={alignment.ngAscertainmentBias}
               />
               <ModelTestButton alignment={alignment} />
@@ -239,7 +163,10 @@ function AlignmentCard({ className, alignment }) {
           <Box display="flex" flexWrap="wrap" alignItems="center">
             {alignment.modelExtra ? (
               <OptionSelect
-                className={classes.select}
+                sx={{
+                  marginLeft: '10px',
+                  minWidth: '150px',
+                }}
                 option={{
                   ...alignment.modelExtra,
                   setValue: alignment.modelExtra.onChange,
@@ -256,16 +183,25 @@ function AlignmentCard({ className, alignment }) {
             <ModelTestButton alignment={alignment} />
           </Box>
         )}
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 
   return (
-    <Card className={classNames(className, classes.AlignmentCard)}>
+    <Card
+      sx={{
+        backgroundColor: (theme) => theme.palette.input.light,
+        border: (theme) => `1px solid ${theme.palette.input.border}`,
+        width: '550px',
+        height: '200px',
+      }}
+    >
       <CardHeader
-        classes={{
-          root: classes.cardHeaderRoot,
-          content: classes.cardHeaderContent,
+        sx={{
+          overflow: 'hidden',
+          '& .MuiCardHeader-content': {
+            overflow: 'hidden',
+          },
         }}
         avatar={Type}
         action={
@@ -316,13 +252,13 @@ function AlignmentCard({ className, alignment }) {
         title={alignment.filename}
         subheader={Size}
       />
-      <div>
+      <Box>
         {alignment.loading ? (
-          <div className={classes.loading}>
+          <Box sx={{ marginLeft: '10px' }}>
             <CircularProgress variant="indeterminate" />
-          </div>
+          </Box>
         ) : null}
-      </div>
+      </Box>
       <CardContent>{Content}</CardContent>
       <CardActions>
         {alignment.partition.isComplete || alignment.showPartition ? null : (
@@ -342,8 +278,7 @@ function AlignmentCard({ className, alignment }) {
   );
 }
 
-function FinalAlignmentCard({ className, alignment }) {
-  const classes = useStyles();
+function FinalAlignmentCard({ sx, alignment }) {
   const [anchorEl, setAnchorEl] = React.useState(null);
 
   function handleMenuClick(event) {
@@ -362,23 +297,40 @@ function FinalAlignmentCard({ className, alignment }) {
   }
 
   const Size = alignment.parsingComplete ? (
-    <span className={classes.secondaryText}>
+    <Box
+      component="span"
+      sx={{ color: (theme) => theme.palette.primary.secondaryText }}
+    >
       {alignment.numSequences} sequences of length {alignment.length} from{' '}
       {alignment.numAlignments} alignment
       {alignment.numAlignments > 1 ? 's' : ''}
-    </span>
+    </Box>
   ) : (
-    <span className={classes.secondaryText}>
+    <Box
+      component="span"
+      sx={{ color: (theme) => theme.palette.primary.secondaryText }}
+    >
       Parsing... {alignment.numSequencesParsed}{' '}
-    </span>
+    </Box>
   );
 
   return (
-    <Card className={classNames(className, classes.AlignmentCard)}>
+    <Card
+      sx={{
+        backgroundColor: (theme) => theme.palette.input.light,
+        border: (theme) => `1px solid ${theme.palette.input.border}`,
+        ...sx,
+      }}
+    >
       <CardHeader
         avatar={
           <Chip
-            className={classes.chip}
+            sx={{
+              height: '30px',
+              color: (theme) => theme.palette.input.contrastText,
+              backgroundColor: (theme) => theme.palette.input.main,
+              border: (theme) => `1px solid ${theme.palette.input.darker}`,
+            }}
             label={alignment.dataType}
             color="secondary"
           />
@@ -419,7 +371,7 @@ function FinalAlignmentCard({ className, alignment }) {
         <FormControlLabel
           title="Use union (on) or intersection (off) of taxons from all alignments"
           control={
-            <InputSwitch
+            <Switch
               checked={alignment.fillTaxonGapsWithEmptySeqeunces}
               onChange={(event) => {
                 alignment.setFillTaxonGapsWithEmptySeqeunces(
@@ -427,6 +379,14 @@ function FinalAlignmentCard({ className, alignment }) {
                 );
               }}
               value="fillTaxonGapsWithEmptySeqeunces"
+              sx={{
+                '& .MuiSwitch-switchBase': {
+                  color: (theme) => theme.palette.input.secondaryText,
+                  '&.Mui-checked': {
+                    color: (theme) => theme.palette.input.dark,
+                  },
+                },
+              }}
             />
           }
           label={
@@ -435,11 +395,26 @@ function FinalAlignmentCard({ className, alignment }) {
             </Typography>
           }
         />
-        <div className={classes.partitionFileContainer}>
-          <code className={classes.partitionFileContent}>
+        <Box
+          sx={{
+            overflowY: 'auto',
+            height: 50,
+          }}
+        >
+          <Box
+            component="code"
+            sx={{
+              color: (theme) => theme.palette.primary.contrastText,
+              fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
+              fontSize: '10px',
+              height: '100%',
+              overflowWrap: 'break-word',
+              whiteSpace: 'pre-wrap',
+            }}
+          >
             {alignment.partition.text}
-          </code>
-        </div>
+          </Box>
+        </Box>
       </CardContent>
     </Card>
   );
@@ -448,12 +423,11 @@ function FinalAlignmentCard({ className, alignment }) {
 
 AlignmentCard.propTypes = {
   alignment: PropTypes.object.isRequired,
-  className: PropTypes.string,
 };
 
 FinalAlignmentCard.propTypes = {
   alignment: PropTypes.object.isRequired,
-  className: PropTypes.string,
+  sx: PropTypes.object,
 };
 
 const AlignmentCardObserver = observer(AlignmentCard);
diff --git a/src/app/App.css b/src/app/App.css
index 19dc42a..d0c4304 100644
--- a/src/app/App.css
+++ b/src/app/App.css
@@ -6,12 +6,3 @@
   height: 100vh;
   overflow-y: auto;
 }
-
-.alignment {
-  width: 550px;
-  height: 200px;
-}
-
-.alignment + .alignment {
-  margin-left: 10px;
-}
diff --git a/src/app/App.js b/src/app/App.js
index 02b7e0d..293d51c 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import clsx from 'clsx';
 import { Allotment } from 'allotment';
 import 'allotment/dist/style.css';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import IconButton from '@mui/material/IconButton';
 import Chip from '@mui/material/Chip';
@@ -37,175 +36,35 @@ import ModifiedDialog from './components/ModifiedDialog';
 
 import './App.css';
 
-const useStyles = makeStyles((theme) => ({
-  App: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100vh',
-    backgroundColor: theme.palette.primary.background,
-  },
-  ioContainer: {
-    // height: 'calc(100vh - 20px)',
-    height: '100%',
-    overflowY: 'auto',
-    paddingBottom: '20px',
-  },
-  statusBar: {
-    top: 'auto',
-    bottom: 0,
-    height: 20,
-    minHeight: 20,
-    width: '100%',
-    margin: 0,
-    padding: 0,
-    backgroundColor: theme.palette.status.main,
-    borderTop: `1px solid ${theme.palette.status.border}`,
-    color: theme.palette.status.contrastText,
-    fontSize: 12,
-  },
-  statusToolbar: {
-    minHeight: 20,
-    margin: 0,
-    padding: '0 8px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  statusVersion: {
-    marginRight: 20,
-  },
-  statusCite: {
-    color: theme.palette.status.contrastText,
-    cursor: 'pointer',
-    marginLeft: 20,
-  },
-  statusFeedback: {
-    color: theme.palette.status.contrastText,
-    marginLeft: 20,
-  },
-  AppBar: {
-    display: 'flex',
-    flexDirection: 'row',
-    backgroundColor: theme.palette.input.background,
-  },
-  Toolbar: {
-    minHeight: 0,
-  },
-  tab: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: '0 40px',
-    position: 'relative',
-  },
-  tabChip: {
-    border: 'none',
-  },
-  tabIcon: {},
-  leftPanel: {},
-  rightPanel: {
-    borderLeft: '1px solid #ccc',
-  },
-  ioWrapper: {
-    width: '100%',
-  },
-  ioItem: {
-    width: '100%',
-    height: '100%',
-    overflowX: 'hidden',
-  },
-  model: {
-    borderTop: '2px solid #ccc',
-    borderBottom: '2px solid #ccc',
-    backgroundColor: theme.palette.model.background,
-  },
-  input: {
-    backgroundColor: theme.palette.input.background,
-  },
-  output: {
-    flexGrow: 1,
-    backgroundColor: theme.palette.output.background,
-  },
-  verticalHeading: {
-    writingMode: 'vertical-rl',
-    textOrientation: 'upright',
-    // textAlign: 'right',
-    // transform: 'rotate(180deg)',
-    // textAlign: 'center',
-    padding: '10px 5px',
-    // fontWeight: 'bold',
-    letterSpacing: '0.25em',
-    textTransform: 'uppercase',
-    borderRight: '1px solid #ccc',
-  },
-  inputHeading: {
-    backgroundColor: theme.palette.input.main,
-    borderRight: `1px solid ${theme.palette.input.border}`,
-    // boxShadow: `2px 0 5px ${theme.palette.input.shadow}`,
-  },
-  modelHeading: {
-    backgroundColor: theme.palette.model.main,
-    borderRight: `1px solid ${theme.palette.model.border}`,
-    // boxShadow: `2px 0 5px ${theme.palette.model.shadow}`,
-  },
-  outputHeading: {
-    backgroundColor: theme.palette.output.main,
-    borderRight: `1px solid ${theme.palette.output.border}`,
-    // boxShadow: `2px 0 5px ${theme.palette.output.shadow}`,
-  },
-  raxmlHeading: {
-    backgroundColor: theme.palette.raxml.main,
-    // boxShadow: `2px 0 5px ${theme.palette.raxml.shadow}`,
-  },
-  consoleHeading: {
-    backgroundColor: theme.palette.console.main,
-    // boxShadow: `2px 0 5px ${theme.palette.console.shadow}`,
-    zIndex: 10,
-  },
-  inputContainer: {
-    // backgroundColor: theme.palette.input.dark,
-  },
-  modelContainer: {
-    // backgroundColor: theme.palette.model.dark,
-  },
-  outputContainer: {
-    // backgroundColor: theme.palette.output.dark,
-  },
-  raxml: {
-    backgroundColor: theme.palette.raxml.background,
-  },
-  console: {
-    backgroundColor: theme.palette.console.background,
-    height: '100%',
-    borderTop: '2px solid #ccc',
-  },
-  deleteIcon: {
-    '&:hover': {
-      color: '#999',
-    },
-  },
-  Modal: {
-    margin: 'auto',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
+const VerticalHeading = styled(Typography)(({ theme }) => ({
+  writingMode: 'vertical-rl',
+  textOrientation: 'upright',
+  padding: '10px 5px',
+  letterSpacing: '0.25em',
+  textTransform: 'uppercase',
+  borderRight: '1px solid #ccc',
 }));
 
 const App = () => {
-  const classes = useStyles();
 
   const TabItems = store.runs.map((run) => (
     <Tab
       key={run.id}
       icon={
-        <span className={classes.tab}>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            padding: '0 40px',
+            position: 'relative',
+          }}
+        >
           <Chip
-            classes={{ root: classes.tabChip }}
+            sx={{ border: 'none' }}
             icon={
               <CircularProgress
                 color="inherit"
                 size={20}
-                className={classes.tabIcon}
                 variant={run.running ? 'indeterminate' : 'determinate'}
                 value={0}
               />
@@ -216,7 +75,7 @@ const App = () => {
             }}
             variant="outlined"
           />
-        </span>
+        </Box>
       }
     />
   ));
@@ -276,16 +135,33 @@ const App = () => {
   return (
     <React.Fragment>
       <CssBaseline />
-      <div className={classes.App}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100vh',
+          backgroundColor: (theme) => theme.palette.primary.background,
+        }}
+      >
         {store.runs.length <= 1 ? null : (
-          <AppBar position="static" elevation={1} className={classes.AppBar}>
+          <AppBar
+            position="static"
+            elevation={1}
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              backgroundColor: (theme) => theme.palette.input.background,
+              borderBottom: (theme) =>
+                `1px solid ${theme.palette.status.border}`,
+            }}
+          >
             <Tabs
               value={store.activeIndex}
               onChange={(event, value) => store.setActive(value)}
             >
               {TabItems}
             </Tabs>
-            <Toolbar variant="dense" className={classes.Toolbar}>
+            <Toolbar variant="dense" sx={{ minHeight: 0 }}>
               <IconButton onClick={store.addRun} size="large">
                 <IconAdd />
               </IconButton>
@@ -298,46 +174,92 @@ const App = () => {
             <Box
               display="flex"
               flexDirection="column"
-              className={clsx(classes.ioContainer, classes.leftPanel)}
+              sx={{
+                height: '100%',
+                overflowY: 'auto',
+                paddingBottom: '20px',
+              }}
             >
               <Box
                 display="flex"
-                className={`${classes.ioWrapper} ${classes.input}`}
+                sx={{
+                  width: '100%',
+                  backgroundColor: (theme) => theme.palette.input.background,
+                }}
               >
-                <Typography
-                  className={`${classes.verticalHeading} ${classes.inputHeading}`}
+                <VerticalHeading
+                  sx={{
+                    backgroundColor: (theme) => theme.palette.input.main,
+                    borderRight: (theme) =>
+                      `1px solid ${theme.palette.input.border}`,
+                  }}
                 >
                   Input
-                </Typography>
-                <div className={clsx(classes.ioItem, classes.inputContainer)}>
+                </VerticalHeading>
+                <Box
+                  sx={{
+                    width: '100%',
+                    height: '100%',
+                    overflowX: 'hidden',
+                  }}
+                >
                   <Input run={run} />
-                </div>
+                </Box>
               </Box>
               <Box
                 display="flex"
-                className={`${classes.ioWrapper} ${classes.model}`}
+                sx={{
+                  width: '100%',
+                  borderTop: '2px solid #ccc',
+                  borderBottom: '2px solid #ccc',
+                  backgroundColor: (theme) => theme.palette.model.background,
+                }}
               >
-                <Typography
-                  className={`${classes.verticalHeading} ${classes.modelHeading}`}
+                <VerticalHeading
+                  sx={{
+                    backgroundColor: (theme) => theme.palette.model.main,
+                    borderRight: (theme) =>
+                      `1px solid ${theme.palette.model.border}`,
+                  }}
                 >
                   Analysis
-                </Typography>
-                <div className={clsx(classes.ioItem, classes.modelContainer)}>
+                </VerticalHeading>
+                <Box
+                  sx={{
+                    width: '100%',
+                    height: '100%',
+                    overflowX: 'hidden',
+                  }}
+                >
                   <Model run={run} />
-                </div>
+                </Box>
               </Box>
               <Box
                 display="flex"
-                className={`${classes.ioWrapper} ${classes.output}`}
+                sx={{
+                  width: '100%',
+                  flexGrow: 1,
+                  backgroundColor: (theme) => theme.palette.output.background,
+                }}
               >
-                <Typography
-                  className={`${classes.verticalHeading} ${classes.outputHeading}`}
+                <VerticalHeading
+                  sx={{
+                    backgroundColor: (theme) => theme.palette.output.main,
+                    borderRight: (theme) =>
+                      `1px solid ${theme.palette.output.border}`,
+                  }}
                 >
                   Output
-                </Typography>
-                <div className={clsx(classes.ioItem, classes.outputContainer)}>
+                </VerticalHeading>
+                <Box
+                  sx={{
+                    width: '100%',
+                    height: '100%',
+                    overflowX: 'hidden',
+                  }}
+                >
                   <Output run={run} />
-                </div>
+                </Box>
               </Box>
             </Box>
           </Allotment.Pane>
@@ -346,46 +268,123 @@ const App = () => {
             <Box
               display="flex"
               flexDirection="column"
-              className={clsx(classes.ioContainer, classes.rightPanel)}
+              sx={{
+                height: '100%',
+                overflowY: 'auto',
+                paddingBottom: '20px',
+                borderLeft: '1px solid #ccc'
+              }}
             >
               <Box
                 display="flex"
-                className={`${classes.ioWrapper} ${classes.raxml}`}
+                sx={{
+                  width: '100%',
+                  backgroundColor: (theme) => theme.palette.raxml.background,
+                }}
               >
-                <Typography
-                  className={`${classes.verticalHeading} ${classes.raxmlHeading}`}
+                <VerticalHeading
+                  sx={{
+                    backgroundColor: (theme) => theme.palette.raxml.main,
+                  }}
                 >
                   RAxML
-                </Typography>
-                <div className={classes.ioItem}>
+                </VerticalHeading>
+                <Box
+                  sx={{
+                    width: '100%',
+                    height: '100%',
+                    overflowX: 'hidden',
+                  }}
+                >
                   <Raxml run={run} store={store} />
-                </div>
+                </Box>
               </Box>
               <Box
                 display="flex"
-                className={`${classes.ioWrapper} ${classes.console}`}
+                sx={{
+                  width: '100%',
+                  backgroundColor: (theme) => theme.palette.console.background,
+                  height: '100%',
+                  borderTop: '2px solid #ccc',
+                }}
               >
-                <Typography
-                  className={`${classes.verticalHeading} ${classes.consoleHeading}`}
+                <VerticalHeading
+                  sx={{
+                    backgroundColor: (theme) => theme.palette.console.main,
+                    zIndex: 10,
+                  }}
                 >
                   Console
                   {run.stdout === '' && run.stderr === '' ? null : (
                     <DeleteIcon
                       onClick={run.clearConsole}
-                      className={classes.deleteIcon}
+                      sx={{
+                        '&:hover': {
+                          color: '#999',
+                        },
+                      }}
                       title="Clear console"
                     />
                   )}
-                </Typography>
-                <div className={classes.ioItem}>
+                </VerticalHeading>
+                <Box
+                  sx={{
+                    width: '100%',
+                    height: '100%',
+                    overflowX: 'hidden',
+                  }}
+                >
                   <Console run={run} />
-                </div>
+                </Box>
               </Box>
             </Box>
           </Allotment.Pane>
         </Allotment>
-        <AppBar position="fixed" color="primary" className={classes.statusBar}>
-          <Toolbar className={classes.statusToolbar}>
+        <AppBar
+          position="fixed"
+          color="primary"
+          sx={{
+            top: 'auto',
+            bottom: 0,
+            height: 20,
+            minHeight: 20,
+            width: '100%',
+            margin: 0,
+            padding: 0,
+            backgroundColor: (theme) => theme.palette.status.main,
+            borderTop: (theme) => `1px solid ${theme.palette.status.border}`,
+            color: (theme) => theme.palette.status.contrastText,
+            fontSize: 12,
+          }}
+        >
+          <Toolbar
+            sx={{
+              minHeight: '20px !important',
+              height: '20px !important',
+              margin: 0,
+              padding: '0 8px !important',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              // Override Material-UI's default Toolbar height (64px) and padding (24px) with !important
+              '&.MuiToolbar-root': {
+                minHeight: '20px !important',
+                height: '20px !important',
+                paddingLeft: '8px !important',
+                paddingRight: '8px !important',
+              },
+              '& .MuiToolbar-regular': {
+                minHeight: '20px !important',
+                paddingLeft: '8px !important',
+                paddingRight: '8px !important',
+              },
+              '& .MuiToolbar-dense': {
+                minHeight: '20px !important',
+                paddingLeft: '8px !important',
+                paddingRight: '8px !important',
+              },
+            }}
+          >
             <IconButton
               onClick={() => store.config.setDarkMode(!store.config.isDarkMode)}
               size="small"
@@ -404,27 +403,36 @@ const App = () => {
             </IconButton>
             <Box display="flex">
               {/* In dev mode the app version shown is from electron, in production it is ours */}
-              <div className={classes.statusVersion}>
+              <Box sx={{ marginRight: '20px' }}>
                 raxmlGUI {store.version}
-              </div>
-              <div className={classes.statusVersion}>
+              </Box>
+              <Box sx={{ marginRight: '20px' }}>
                 {binary.value} {binary.version}
-              </div>
+              </Box>
             </Box>
             <Box sx={{ flexGrow: 1 }} />
             <Box display="flex">
-              <span
-                className={classes.statusCite}
+              <Box
+                component="span"
+                sx={{
+                  color: (theme) => theme.palette.status.contrastText,
+                  cursor: 'pointer',
+                  marginLeft: '20px',
+                }}
                 onClick={store.citation.show}
               >
                 How to cite?
-              </span>
-              <a
-                className={classes.statusFeedback}
+              </Box>
+              <Box
+                component="a"
                 href="mailto:raxmlgui.help@googlemail.com?subject=Feedback"
+                sx={{
+                  color: (theme) => theme.palette.status.contrastText,
+                  marginLeft: '20px',
+                }}
               >
                 For questions or suggestions contact us!
-              </a>
+              </Box>
             </Box>
           </Toolbar>
         </AppBar>
@@ -463,7 +471,12 @@ const App = () => {
             aria-labelledby="show-partition"
             open={true}
             onClose={run.hidePartition}
-            className={classes.Modal}
+            sx={{
+              margin: 'auto',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
           >
             <div id="show-partition">
               <PartitionEditor alignment={run.showPartitionFor} />
@@ -475,7 +488,12 @@ const App = () => {
             aria-labelledby="show-citation"
             open={true}
             onClose={store.citation.hide}
-            className={classes.Modal}
+            sx={{
+              margin: 'auto',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
           >
             <div id="show-citation">
               <CitationModal citation={store.citation} />
@@ -483,7 +501,7 @@ const App = () => {
           </Modal>
         ) : null}
         <ErrorDialog error={store.error} onClose={store.clearError} />
-      </div>
+      </Box>
     </React.Fragment>
   );
 };
diff --git a/src/app/AstralTreeCard.js b/src/app/AstralTreeCard.js
index b7227b7..95af325 100644
--- a/src/app/AstralTreeCard.js
+++ b/src/app/AstralTreeCard.js
@@ -1,11 +1,9 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import IconButton from '@mui/material/IconButton';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
-import classNames from 'classnames';
 import CircularProgress from '@mui/material/CircularProgress';
 import Chip from '@mui/material/Chip';
 import Menu from '@mui/material/Menu';
@@ -17,37 +15,9 @@ import CardContent from '@mui/material/CardContent';
 import CardActions from '@mui/material/CardActions';
 import Box from '@mui/material/Box';
 
-// const useStyles = makeStyles(theme => ({
-const useStyles = makeStyles((theme) => {
-  return {
-    AstralTreeCard: {
-      backgroundColor: theme.palette.input.light,
-      border: `1px solid ${theme.palette.input.border}`,
-    },
-    cardHeaderRoot: {
-      overflow: "hidden"
-    },
-    cardHeaderContent: {
-      overflow: "hidden"
-    },
-    content: {
-      display: 'flex',
-      alignItems: 'center',
-      marginLeft: '-10px',
-    },
-    chip: {
-      height: '30px',
-      color: theme.palette.input.contrastText,
-      backgroundColor: theme.palette.input.main,
-      border: `1px solid ${theme.palette.input.darker}`,
-    },
-  };
-});
-
-function AstralTreeCard({ className, astralTree }) {
+function AstralTreeCard({ astralTree }) {
   const { } = astralTree;
 
-  const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState(null);
 
   function handleMenuClick(event) {
@@ -66,25 +36,45 @@ function AstralTreeCard({ className, astralTree }) {
   }
 
   const Content = (
-    <div className={classes.content}>
-      <div>
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        marginLeft: '-10px',
+      }}
+    >
+      <Box>
         <Box display="flex" flexWrap="wrap" alignItems="center">
 
         </Box>
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 
   return (
-    <Card className={classNames(className, classes.AstralTreeCard)}>
+    <Card
+      sx={{
+        backgroundColor: (theme) => theme.palette.input.light,
+        border: (theme) => `1px solid ${theme.palette.input.border}`,
+        width: '550px',
+        height: '200px',
+      }}
+    >
       <CardHeader
-        classes={{
-          root: classes.cardHeaderRoot,
-          content: classes.cardHeaderContent,
+        sx={{
+          overflow: 'hidden',
+          '& .MuiCardHeader-content': {
+            overflow: 'hidden',
+          },
         }}
         avatar={
           <Chip
-            className={classes.chip}
+            sx={{
+              height: '30px',
+              color: (theme) => theme.palette.input.contrastText,
+              backgroundColor: (theme) => theme.palette.input.main,
+              border: (theme) => `1px solid ${theme.palette.input.darker}`,
+            }}
             label={"trees"}
             color="secondary"
           />
@@ -135,7 +125,6 @@ function AstralTreeCard({ className, astralTree }) {
 
 AstralTreeCard.propTypes = {
   astralTree: PropTypes.object.isRequired,
-  className: PropTypes.string,
 };
 
 const AstralTreeCardObserver = observer(AstralTreeCard);
diff --git a/src/app/CitationModal.js b/src/app/CitationModal.js
index d320dbe..8dd56a6 100644
--- a/src/app/CitationModal.js
+++ b/src/app/CitationModal.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
@@ -13,31 +12,25 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
 import CodeHighlight from './components/CodeHighlight';
 
-const useStyles = makeStyles(theme => ({
-  CitationModal: {
-    backgroundColor: theme.palette.output.background,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    maxWidth: '700px'
-  },
-  content: {
-    maxHeight: '600px',
-    overflowY: 'auto'
-  },
-  code: {
-    backgroundColor: theme.palette.console.background,
-    borderRadius: '4px',
-    padding: '4px'
-  }
-}));
-
 function CitationModal({ citation }) {
-  const classes = useStyles();
 
   return (
-    <Card className={classes.CitationModal} elevation={0}>
-      <CardContent className={classes.content}>
+    <Card
+      elevation={0}
+      sx={{
+        backgroundColor: (theme) => theme.palette.output.background,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        maxWidth: '700px'
+      }}
+    >
+      <CardContent
+        sx={{
+          maxHeight: '600px',
+          overflowY: 'auto'
+        }}
+      >
         <Typography variant="h4">How to cite?</Typography>
         <Box>
           Please include the following references in your preferred format:
@@ -67,19 +60,23 @@ function CitationModal({ citation }) {
             <CodeHighlight
               code={article[citation.format]}
               language={citation.format}
-              className={classes.code}
+              sx={{
+                backgroundColor: (theme) => theme.palette.output.background,
+                borderRadius: '4px',
+                padding: '4px'
+              }}
             />
           </Box>
         ))}
       </CardContent>
-      <CardActions style={{ width: '100%' }}>
+      <CardActions sx={{ width: '100%' }}>
         <Box display="flex" justifyContent="flex-end" sx={{ width: '100%' }}>
           <Button
             aria-label="Copy to clipboard"
             variant="contained"
             color="secondary"
             onClick={citation.copyToClipboard}
-            style={{ marginRight: 10 }}
+            sx={{ marginRight: 10 }}
           >
             Copy to clipboard
           </Button>
diff --git a/src/app/Console.js b/src/app/Console.js
index e4a5ad5..15ae338 100644
--- a/src/app/Console.js
+++ b/src/app/Console.js
@@ -1,37 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@mui/styles';
-import clsx from 'clsx';
-
-
-const styles = theme => ({
-  Console: {
-    color: theme.palette.console.contrastText,
-    background: theme.palette.console.background,
-    // flexGrow: 1,
-    // padding: '0 4px',
-    padding: '10px',
-    width: '100% ',
-    height: '100%',
-  },
-  stdoutContainer: {
-    overflowY: 'auto',
-    height: '100%',
-    position: 'relative',
-  },
-  code: {
-    color: theme.palette.console.contrastText,
-    fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
-    fontSize: '12px',
-    height: '100%',
-    position: 'absolute',
-    width: '100%',
-    // overflowWrap: 'anywhere', // currently not available in Chrome
-    whiteSpace: 'pre-wrap',
-    wordBreak: 'break-all',
-  }
-});
+import Box from '@mui/material/Box';
 
 @observer
 class Console extends React.Component {
@@ -61,17 +31,57 @@ class Console extends React.Component {
   };
 
   render() {
-    const { run, classes } = this.props;
+    const { run } = this.props;
     return (
-      <div
-        className={clsx(classes.Console, classes.stdoutContainer)}
+      <Box
         ref={this.onMountStdoutContainer}
+        sx={{
+          color: (theme) => theme.palette.console.contrastText,
+          background: (theme) => theme.palette.console.background,
+          padding: '10px',
+          width: '100%',
+          height: '100%',
+          overflowY: 'auto',
+          position: 'relative',
+        }}
       >
         <div>
-          {run.stdout && <code className={classes.code}>{run.stdout}</code>}
-          {run.stderr && <code className={classes.code}>{run.stderr}</code>}
+          {run.stdout && (
+            <Box
+              component="code"
+              sx={{
+                color: (theme) => theme.palette.console.contrastText,
+                fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
+                fontSize: '12px',
+                height: '100%',
+                position: 'absolute',
+                width: '100%',
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-all',
+              }}
+            >
+              {run.stdout}
+            </Box>
+          )}
+          {run.stderr && (
+            <Box
+              component="code"
+              sx={{
+                color: (theme) => theme.palette.console.contrastText,
+                fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
+                fontSize: '12px',
+                height: '100%',
+                position: 'absolute',
+                width: '100%',
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-all',
+              }}
+            >
+              {run.stderr}
+            </Box>
+          )}
         </div>
-      </div>
+      </Box>
     );
   }
 }
@@ -80,4 +90,4 @@ Console.propTypes = {
   run: PropTypes.object.isRequired
 };
 
-export default withStyles(styles)(Console);
+export default Console;
diff --git a/src/app/Input.js b/src/app/Input.js
index c872c3a..cfc71c2 100644
--- a/src/app/Input.js
+++ b/src/app/Input.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import Button from '@mui/material/Button';
 import AlignmentCard, { FinalAlignmentCard } from './AlignmentCard';
 import AstralTreeCard from './AstralTreeCard';
@@ -12,90 +11,7 @@ import { Typography } from '@mui/material';
 import Dropzone from 'react-dropzone';
 import { webUtils } from 'electron';
 
-const useStyles = makeStyles((theme) => ({
-  Input: {
-    width: '100%',
-  },
-  alignmentList: {
-    display: 'flex',
-    width: '100%',
-    flexWrap: 'nowrap',
-    overflowX: 'auto',
-    // borderLeft: `5px solid ${theme.palette.primary.main}`,
-    // paddingLeft: 10,
-    padding: '10px',
-  },
-  treeList: {
-    display: 'flex',
-    flexWrap: 'nowrap',
-    overflowX: 'auto',
-    // borderLeft: `5px solid ${theme.palette.secondary.main}`,
-    padding: '10px',
-  },
-  alignments: {
-    display: 'flex',
-  },
-  addAlignment: {
-    width: '200px',
-    height: '200px',
-  },
-  addAlignmentOrPartition: {
-    minWidth: '200px',
-    flexGrow: 1,
-  },
-  treeCard: {
-    width: '380px',
-    height: '100px',
-  },
-  finalInput: {
-    padding: '10px',
-  },
-  concatenatedAlignment: {
-    width: '550px',
-    height: '200px',
-  },
-  resultingPartitionCard: {
-    width: '350px',
-    height: '200px',
-  },
-  output: {
-    marginTop: '20px',
-  },
-  fileInfo: {
-    fontSize: '0.75em',
-    marginTop: '0.25em',
-    overflowWrap: 'break-word',
-  },
-  path: {
-    cursor: 'pointer',
-    color: theme.palette.secondary.main,
-    marginLeft: 4,
-  },
-  button: {
-    margin: theme.spacing(1),
-  },
-  rightIcon: {
-    marginLeft: theme.spacing(1),
-  },
-  iconSmall: {
-    fontSize: 20,
-  },
-  outputButton: {
-    marginLeft: theme.spacing(1),
-  },
-  outputDir: {
-    // flex: 'flex-grow',
-  },
-  gridList: {
-    flexWrap: 'nowrap',
-    // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
-    transform: 'translateZ(0)',
-    width: 500,
-  },
-}));
-
 const Input = ({ run }) => {
-  const classes = useStyles();
   // run.hasAstralTree is the condition on which to show an astral tree card
   // For some reason when changed in the mobx store a rerender is not triggered with this boolean with the conditional below alone
   // With this if the component rerenders as should be
@@ -104,12 +20,21 @@ const Input = ({ run }) => {
   }
   // const SelectNumRuns = run.
   return (
-    <Box display="flex" flexDirection="column" className={classes.Input}>
+    <Box
+      display="flex"
+      flexDirection="column"
+      sx={{ width: '100%' }}
+    >
       <Box
         display="flex"
         mb={1}
         alignItems="center"
-        className={classes.alignmentList}
+        sx={{
+          width: '100%',
+          flexWrap: 'nowrap',
+          overflowX: 'auto',
+          padding: '10px',
+        }}
       >
         <Dropzone
           noClick
@@ -124,20 +49,22 @@ const Input = ({ run }) => {
         >
           {({ getRootProps, getInputProps }) => (
             <div {...getRootProps()}>
-              <Box display="flex" alignItems="center">
+              <Box
+                display="flex"
+                alignItems="center"
+                sx={{ gap: '10px' }}
+              >
                 {run.inputIsAlignment
                   ? run.alignments.map((alignment) => (
                       <AlignmentCard
                         key={alignment.path}
                         alignment={alignment}
-                        className="alignment"
                       />
                     ))
                   : null}
                 {run.inputIsTree && run.hasAstralTree ? (
                   <AstralTreeCard
                     astralTree={run.astralTree}
-                    className="alignment"
                   />
                 ) : null}
                 <Box paddingX={1}>
@@ -146,7 +73,10 @@ const Input = ({ run }) => {
                 {run.canLoadAstralTree ? (
                   <Button
                     variant="outlined"
-                    className={`alignment ${classes.addAlignment}`}
+                    sx={{
+                      width: '200px',
+                      height: '200px',
+                    }}
                     onClick={run.loadAstralTree}
                   >
                     Load input trees
@@ -155,7 +85,10 @@ const Input = ({ run }) => {
                 {run.canLoadAlignment && !run.canLoadPartitionFile ? (
                   <Button
                     variant="outlined"
-                    className={`alignment ${classes.addAlignment}`}
+                    sx={{
+                      width: '200px',
+                      height: '200px',
+                    }}
                     onClick={run.loadAlignmentFiles}
                     title={
                       run.haveAlignments
@@ -180,7 +113,10 @@ const Input = ({ run }) => {
           >
             <Button
               variant="outlined"
-              className={classes.addAlignmentOrPartition}
+              sx={{
+                minWidth: '200px',
+                flexGrow: 1,
+              }}
               onClick={run.loadAlignmentFiles}
               title="Concatenate new alignments and automatically generate a partition"
             >
@@ -189,7 +125,10 @@ const Input = ({ run }) => {
             <Box paddingX={2}>OR</Box>
             <Button
               variant="outlined"
-              className={classes.addAlignmentOrPartition}
+              sx={{
+                minWidth: '200px',
+                flexGrow: 1,
+              }}
               onClick={run.loadPartitionFile}
               title="Load a partition file for the current alignment"
             >
@@ -203,69 +142,114 @@ const Input = ({ run }) => {
       </Box>
 
       {run.tree.notAvailable ? null : (
-        <Box className={classes.treeList}>
-          <div className={classes.alignments}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexWrap: 'nowrap',
+            overflowX: 'auto',
+            padding: '10px',
+          }}
+        >
+          <Box sx={{ display: 'flex' }}>
             {run.tree.haveFile ? (
-              <TreeCard tree={run.tree} className={classes.treeCard} />
+              <TreeCard
+                tree={run.tree}
+                sx={{
+                  width: '380px',
+                  height: '100px',
+                }}
+              />
             ) : (
               <Button
                 variant="outlined"
-                className={classes.treeCard}
+                sx={{
+                  width: '380px',
+                  height: '100px',
+                }}
                 onClick={run.loadTreeFile}
               >
                 Add Tree
               </Button>
             )}
-          </div>
+          </Box>
         </Box>
       )}
       {run.backboneConstraint.notAvailable ? null : (
-        <Box className={classes.treeList}>
-          <div className={classes.alignments}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexWrap: 'nowrap',
+            overflowX: 'auto',
+            padding: '10px',
+          }}
+        >
+          <Box sx={{ display: 'flex' }}>
             {run.backboneConstraint.haveFile ? (
               <TreeCard
                 tree={run.backboneConstraint}
-                className={classes.treeCard}
+                sx={{
+                  width: '380px',
+                  height: '100px',
+                }}
               />
             ) : (
               <Button
                 variant="outlined"
-                className={classes.treeCard}
+                sx={{
+                  width: '380px',
+                  height: '100px',
+                }}
                 onClick={run.loadBackboneConstraintFile}
               >
                 Add Backbone Constraint
               </Button>
             )}
-          </div>
+          </Box>
         </Box>
       )}
       {run.multifurcatingConstraint.notAvailable ? null : (
-        <Box className={classes.treeList}>
-          <div className={classes.alignments}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexWrap: 'nowrap',
+            overflowX: 'auto',
+            padding: '10px',
+          }}
+        >
+          <Box sx={{ display: 'flex' }}>
             {run.multifurcatingConstraint.haveFile ? (
               <TreeCard
                 tree={run.multifurcatingConstraint}
-                className={classes.treeCard}
+                sx={{
+                  width: '380px',
+                  height: '100px',
+                }}
               />
             ) : (
               <Button
                 variant="outlined"
-                className={classes.treeCard}
+                sx={{
+                  width: '380px',
+                  height: '100px',
+                }}
                 onClick={run.loadMultifurcatingConstraintFile}
               >
                 Add Multifurcating Constraint
               </Button>
             )}
-          </div>
+          </Box>
         </Box>
       )}
 
       {run.alignments.length <= 1 ? null : (
-        <Box className={classes.finalInput}>
+        <Box sx={{ padding: '10px' }}>
           <Typography variant="h5">Concatenated alignment</Typography>
           <FinalAlignmentCard
             alignment={run.finalAlignment}
-            className={classes.concatenatedAlignment}
+            sx={{
+              width: '550px',
+              height: '200px',
+            }}
           />
         </Box>
       )}
diff --git a/src/app/Model.js b/src/app/Model.js
index b4dc3f2..a88cdee 100644
--- a/src/app/Model.js
+++ b/src/app/Model.js
@@ -1,59 +1,63 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import Box from '@mui/material/Box';
 import OptionSelect from './components/OptionSelect';
 import OptionCheck from './components/OptionCheck';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 
-const useStyles = makeStyles(theme => ({
-  Model: {
-    padding: '10px',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  form: {
-    '& > *': {
-      marginRight: '10px',
-    }
-  },
-}));
-
 const Model = ({ run }) => {
 
-  const classes = useStyles();
-
   // TODO: Check marginTop: 2 hack, doesn't seem exactly aligned to top
   if (run.usesModeltestNg) {
     return (
-      <div className={classes.Model}>
+      <Box
+        sx={{
+          padding: '10px',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
         <Typography variant="body1">
           Select the best-fit model of evolution for a single DNA or protein
           alignment
         </Typography>
-      </div>
+      </Box>
     );
   }
   if (run.usesAstral) {
     return (
-      <div className={classes.Model}>
+      <Box
+        sx={{
+          padding: '10px',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
         <Typography variant="body1">
           Calculate species tree from a set of gene trees
         </Typography>
-      </div>
+      </Box>
     );
   }
   return (
-    <div className={classes.Model}>
+    <Box
+      sx={{
+        padding: '10px',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
       <Box
         component="form"
         mt={1}
         mb={2}
         display="flex"
         alignItems="start"
-        className={classes.form}
+        sx={{
+          gap: '10px',
+        }}
         noValidate
         autoComplete="off"
       >
@@ -72,7 +76,9 @@ const Model = ({ run }) => {
         mb={2}
         display="flex"
         alignItems="start"
-        className={classes.form}
+        sx={{
+          gap: '10px',
+        }}
         noValidate
         autoComplete="off"
       >
@@ -82,7 +88,7 @@ const Model = ({ run }) => {
             variant="standard"
             helperText="Seed"
             title="Random seed"
-            style={{ width: 60 }}
+            sx={{ width: 60 }}
             value={run.randomSeed}
             onChange={(e) => run.setRandomSeed(e.target.value)} />
         ) : null}
@@ -93,7 +99,9 @@ const Model = ({ run }) => {
         mb={2}
         display="flex"
         alignItems="start"
-        className={classes.form}
+        sx={{
+          gap: '10px',
+        }}
         noValidate
         autoComplete="off"
       >
@@ -106,7 +114,9 @@ const Model = ({ run }) => {
         mb={2}
         display="flex"
         alignItems="start"
-        className={classes.form}
+        sx={{
+          gap: '10px',
+        }}
         noValidate
         autoComplete="off"
       >
@@ -116,7 +126,7 @@ const Model = ({ run }) => {
         <OptionCheck option={run.estimatedFrequencies} />
         <OptionSelect option={run.baseFrequencies} />
       </Box>
-    </div>
+    </Box>
   );
 };
 
diff --git a/src/app/Output.js b/src/app/Output.js
index 2e92401..a77f0c3 100644
--- a/src/app/Output.js
+++ b/src/app/Output.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
@@ -9,49 +8,35 @@ import { Link, Typography } from '@mui/material';
 import FileIcon from '@mui/icons-material/InsertDriveFileSharp';
 import { join } from 'path';
 
-const useStyles = makeStyles((theme) => ({
-  Output: {
-    width: '100%',
-    padding: '10px',
-  },
-  form: {
-    width: '100%',
-    '& > *:not(:first-child)': {
-      marginTop: theme.spacing(3),
-    },
-  },
-  formItem: {},
-  result: {
-    // maxHeight: 200,
-    // overflowY: 'auto',
-  },
-  resultFilenameRow: {
-    color: theme.palette.primary.contrastText,
-    display: 'flex',
-    alignItems: 'flex-end',
-    cursor: 'pointer',
-  },
-  resultFilename: {
-    color: theme.palette.primary.contrastText,
-  },
-}));
-
 const Output = ({ run }) => {
-
-  const classes = useStyles();
-
   const { resultFilenames } = run;
   const haveResult = resultFilenames.length > 0;
 
   return (
-    (<div className={classes.Output}>
-      <Box component="form" mt={1} mb={2} display="flex" flexDirection="column" className={classes.form} noValidate autoComplete="off">
+    (<Box
+      sx={{
+        width: '100%',
+        padding: '10px',
+      }}
+    >
+      <Box
+        component="form"
+        mt={1}
+        mb={2}
+        display="flex"
+        flexDirection="column"
+        sx={{
+          width: '100%',
+          gap: 3,
+        }}
+        noValidate
+        autoComplete="off"
+      >
         <TextField
           variant="standard"
           id="output-dir"
           helperText="Select output directory"
           fullWidth
-          className={classes.formItem}
           value={run.outputDir}
           onClick={run.selectOutputDir}
           slotProps={{
@@ -63,22 +48,33 @@ const Output = ({ run }) => {
           variant="standard"
           id="output-name"
           helperText={run.outputNameNotice || "Select output name"}
-          className={classes.formItem}
           value={run.outputName}
           placeholder={run.outputNamePlaceholder}
           onChange={e => run.setOutputName(e.target.value)}
           error={!run.outputNameOk} />
       </Box>
-      <Box mt={1} display="flex" flexDirection="column" alignItems="stretch" className={classes.result}>
+      <Box mt={1} display="flex" flexDirection="column" alignItems="stretch">
       { haveResult ? <Typography>Result for output id '{run.outputName}' </Typography> : null }
       { resultFilenames.map(filename =>
         <Link
           key={filename}
-          className={classes.resultFilenameRow}
+          sx={{
+            color: (theme) => theme.palette.primary.contrastText,
+            display: 'flex',
+            alignItems: 'flex-end',
+            cursor: 'pointer',
+          }}
           onClick={() => run.openFile(join(run.outputDir, filename))}
           underline="hover">
           <FileIcon/>
-          <span className={classes.resultFilename}>{filename}</span>
+          <Box
+            component="span"
+            sx={{
+              color: (theme) => theme.palette.primary.contrastText,
+            }}
+          >
+            {filename}
+          </Box>
         </Link>
       )}
       </Box>
@@ -87,7 +83,7 @@ const Output = ({ run }) => {
           <Button onClick={run.openOutputDir} variant="outlined">Open folder</Button>
         </Box>
       ) : null }
-    </div>)
+    </Box>)
   );
 };
 
diff --git a/src/app/PartitionEditor.js b/src/app/PartitionEditor.js
index befcdb9..f717343 100644
--- a/src/app/PartitionEditor.js
+++ b/src/app/PartitionEditor.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
 import Card from '@mui/material/Card';
@@ -14,51 +13,7 @@ import Grid from '@mui/material/Grid2';
 import LinearProgress from '@mui/material/LinearProgress';
 import Typography from '@mui/material/Typography';
 
-const useStyles = makeStyles(theme => ({
-  Partition: {
-    backgroundColor: theme.palette.input.background,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start'
-  },
-  formControl: {
-    marginLeft: 5,
-    marginRight: 10
-  },
-  content: {
-    padding: 0
-  },
-  textField: {
-    // height: 80,
-    width: 250,
-    padding: 0,
-    marginTop: 10,
-    marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(1)
-  },
-  type: {
-    width: 100,
-  },
-  aaType: {
-    width: 120,
-  },
-  name: {
-    width: 200,
-  },
-  start: {
-    width: 70,
-  },
-  end: {
-    width: 70,
-  },
-  codon: {
-    width: 200,
-  },
-}));
-
 function PartitionEditor({ alignment }) {
-  const classes = useStyles();
-
   function handleAdd(event) {
     alignment.partition.addPart();
   }
@@ -71,7 +26,16 @@ function PartitionEditor({ alignment }) {
   const { partToAdd } = partition;
 
   return (
-    (<Box p={4} pt={2} className={classes.Partition}>
+    (<Box
+      p={4}
+      pt={2}
+      sx={{
+        backgroundColor: (theme) => theme.palette.input.background,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start'
+      }}
+    >
       <Typography variant="h6">Partition editor</Typography>
       <Box mb={2} sx={{ width: '100%' }}>
         <LinearProgress variant="determinate" color="primary" value={partition.progress} />
@@ -83,22 +47,40 @@ function PartitionEditor({ alignment }) {
       <Box>
         <Grid container spacing={1} alignItems="flex-end">
           <Grid>
-            <OptionSelect option={partToAdd.type} className={classes.type} />
+            <OptionSelect
+              option={partToAdd.type}
+              sx={{ width: 100 }}
+            />
           </Grid>
           <Grid>
-            <OptionSelect option={partToAdd.aaType} className={classes.aaType} />
+            <OptionSelect
+              option={partToAdd.aaType}
+              sx={{ width: 120 }}
+            />
           </Grid>
           <Grid>
-            <OptionTextField option={partToAdd.name} className={classes.name} />
+            <OptionTextField
+              option={partToAdd.name}
+              sx={{ width: 200 }}
+            />
           </Grid>
           <Grid>
-            <OptionTextField option={partToAdd.start} className={classes.start} />
+            <OptionTextField
+              option={partToAdd.start}
+              sx={{ width: 70 }}
+            />
           </Grid>
           <Grid>
-            <OptionTextField option={partToAdd.end} className={classes.end} />
+            <OptionTextField
+              option={partToAdd.end}
+              sx={{ width: 70 }}
+            />
           </Grid>
           <Grid>
-            <OptionSelect option={partToAdd.codon} className={classes.codon} />
+            <OptionSelect
+              option={partToAdd.codon}
+              sx={{ width: 200 }}
+            />
           </Grid>
           <Grid>
             <Button variant="outlined" disabled={partition.addPartDisabled} onClick={handleAdd}>Add</Button>
@@ -109,29 +91,24 @@ function PartitionEditor({ alignment }) {
         </Box>
       </Box>
       <Box mt={2} sx={{ width: '100%' }}>
-        <form className={classes.form} noValidate autoComplete="off">
-          <TextField
-            className="pre"
-            style={{ width: '100%' }}
-            id="partition"
-            label="Partition"
-            disabled={partition.isDefault}
-            multiline
-            rows="6"
-            value={partition.text}
-            onChange={() => {}}
-            margin="normal"
-            helperText={alignment.partitionHelperText || ''}
-            variant="outlined"
-            slotProps={{
-              input: {
-                classes: {
-                  input: 'pre',
-                }
-              }
-            }}
-          />
-        </form>
+        <TextField
+          sx={{
+            width: '100%',
+            '& .MuiInputBase-input': {
+              fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
+            },
+          }}
+          id="partition"
+          label="Partition"
+          disabled={partition.isDefault}
+          multiline
+          rows="6"
+          value={partition.text}
+          onChange={() => {}}
+          margin="normal"
+          helperText={alignment.partitionHelperText || ''}
+          variant="outlined"
+        />
       </Box>
       <Grid container spacing={1} justifyContent="flex-end" sx={{ width: '100%' }}>
         { partition.isDefault ? null : (
@@ -154,28 +131,7 @@ PartitionEditor.propTypes = {
 
 const PartitionEditorObserver = observer(PartitionEditor);
 
-const useStylesOnCard = makeStyles(theme => ({
-  partition: {
-    padding: 0,
-    marginTop: -30,
-    backgroundColor: 'rgba(0,0,0,0)', // transparent background
-    display: 'flex',
-    alignItems: 'flex-start'
-  },
-  content: {
-    padding: 0
-  },
-  form: {},
-  textField: {
-    width: 250,
-    padding: 0,
-    marginTop: 10,
-    marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(1)
-  }
-}));
 function PartitionOnCard({ alignment }) {
-  const classes = useStylesOnCard();
   // const [partitionText, setPartitionText] = React.useState(alignment.partitionText);
   const [partitionText, setPartitionText] = React.useState(
     alignment.partitionFileContent
@@ -197,22 +153,35 @@ function PartitionOnCard({ alignment }) {
   const hasChange = partitionText !== alignment.partitionText;
 
   return (
-    <Card className={classes.partition} elevation={0}>
-      <CardContent className={classes.content}>
-        <form className={classes.form} noValidate autoComplete="off">
-          <TextField
-            id="partition"
-            label="Partition"
-            multiline
-            rows="3"
-            value={partitionText}
-            onChange={handleChange}
-            className={classes.textField}
-            margin="normal"
-            helperText={alignment.partitionHelperText || ''}
-            variant="outlined"
-          />
-        </form>
+    <Card
+      sx={{
+        padding: 0,
+        marginTop: -30,
+        backgroundColor: 'rgba(0,0,0,0)', // transparent background
+        display: 'flex',
+        alignItems: 'flex-start'
+      }}
+      elevation={0}
+    >
+      <CardContent sx={{ padding: 0 }}>
+        <TextField
+          id="partition"
+          label="Partition"
+          multiline
+          rows="3"
+          value={partitionText}
+          onChange={handleChange}
+          sx={{
+            width: 250,
+            padding: 0,
+            marginTop: '10px',
+            marginLeft: 1,
+            marginRight: 1
+          }}
+          margin="normal"
+          helperText={alignment.partitionHelperText || ''}
+          variant="outlined"
+        />
       </CardContent>
       <CardActions>
         <Button aria-label="Cancel" variant="outlined" onClick={onClickCancel}>
diff --git a/src/app/PartitionFileCard.js b/src/app/PartitionFileCard.js
index c542910..a9fc114 100644
--- a/src/app/PartitionFileCard.js
+++ b/src/app/PartitionFileCard.js
@@ -1,72 +1,37 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
-import classNames from 'classnames';
 import Chip from '@mui/material/Chip';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
 import CardContent from '@mui/material/CardContent';
+import Box from '@mui/material/Box';
 
-// const useStyles = makeStyles(theme => ({
-const useStyles = makeStyles((theme) => {
-  return {
-    PartitionFileCard: {
-      backgroundColor: theme.palette.input.light,
-      border: `1px solid ${theme.palette.input.border}`,
-      height: '200px',
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    chip: {
-      height: '30px',
-      color: theme.palette.input.contrastText,
-      backgroundColor: theme.palette.input.main,
-      border: `1px solid ${theme.palette.input.darker}`,
-    },
-    deleteChip: {
-      backgroundColor: 'transparent',
-      border: 'none',
-      marginRight: -5,
-    },
-    deleteChipIcon: {
-      opacity: 1,
-    },
-    partitionFileContainer: {
-      overflowY: 'auto',
-      height: '150px',
-    },
-    partitionFileContent: {
-      color: theme.palette.primary.contrastText,
-      fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
-      fontSize: '12px',
-      height: '100%',
-      overflowWrap: 'break-word',
-      whiteSpace: 'pre-wrap',
-    },
-    path: {
-      cursor: 'pointer',
-      color: theme.palette.secondary.main,
-      marginLeft: 4,
-    },
-  };
-});
-
-
-function PartitionFileCard({ className, run }) {
-  const classes = useStyles();
-
+function PartitionFileCard({ run }) {
   if (!run.havePartitionFile) {
     return null;
   }
 
   return (
-    <Card className={classNames(className, classes.PartitionFileCard)}>
+    <Card
+      sx={{
+        backgroundColor: (theme) => theme.palette.input.light,
+        border: (theme) => `1px solid ${theme.palette.input.border}`,
+        height: '200px',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
       <CardHeader
         avatar={
           <Chip
-            className={classes.chip}
+            sx={{
+              height: '30px',
+              color: (theme) => theme.palette.input.contrastText,
+              backgroundColor: (theme) => theme.palette.input.main,
+              border: (theme) => `1px solid ${theme.palette.input.darker}`,
+            }}
             label="Partition"
             color="secondary"
           />
@@ -74,9 +39,13 @@ function PartitionFileCard({ className, run }) {
         action={
           <div>
             <Chip
-              classes={{
-                root: classes.deleteChip,
-                deleteIcon: classes.deleteChipIcon,
+              sx={{
+                backgroundColor: 'transparent',
+                border: 'none',
+                marginRight: '-5px',
+                '& .MuiChip-deleteIcon': {
+                  opacity: 1,
+                },
               }}
               deleteIcon={<DeleteForeverIcon />}
               onDelete={run.removePartitionFile}
@@ -88,11 +57,26 @@ function PartitionFileCard({ className, run }) {
         style={{ paddingBottom: 4 }}
       />
       <CardContent style={{ flexGrow: 1, paddingTop: 5, paddingBottom: 5 }}>
-        <div className={classes.partitionFileContainer}>
-          <code className={classes.partitionFileContent}>
+        <Box
+          sx={{
+            overflowY: 'auto',
+            height: '150px',
+          }}
+        >
+          <Box
+            component="code"
+            sx={{
+              color: (theme) => theme.palette.primary.contrastText,
+              fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
+              fontSize: '12px',
+              height: '100%',
+              overflowWrap: 'break-word',
+              whiteSpace: 'pre-wrap',
+            }}
+          >
             { run.partitionFileContent }
-          </code>
-        </div>
+          </Box>
+        </Box>
       </CardContent>
     </Card>
   );
@@ -100,7 +84,6 @@ function PartitionFileCard({ className, run }) {
 
 PartitionFileCard.propTypes = {
   run: PropTypes.object.isRequired,
-  className: PropTypes.string,
 };
 
 const PartitionFileCardObserver = observer(PartitionFileCard);
diff --git a/src/app/Raxml.js b/src/app/Raxml.js
index b823ce0..41475ad 100644
--- a/src/app/Raxml.js
+++ b/src/app/Raxml.js
@@ -3,7 +3,6 @@ import { clipboard } from 'electron';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
-import { withStyles } from '@mui/styles';
 import OptionSelect from './components/OptionSelect';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
@@ -12,41 +11,6 @@ import IconButton from '@mui/material/IconButton';
 import FileCopyIcon from '@mui/icons-material/FileCopy';
 import { FormHelperText } from '@mui/material';
 
-const styles = (theme) => ({
-  Raxml: {
-    padding: '10px',
-    width: '100%',
-    flexShrink: 0,
-  },
-  form: {
-    // '& > *:not(:first-child)': {
-    '& > *+*': {
-      marginLeft: '20px',
-    },
-  },
-  formItem: {
-    // marginRight: '20px',
-  },
-  button: {
-    marginRight: theme.spacing(1),
-  },
-  run: {
-    marginTop: '20px',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  code: {
-    color: theme.palette.console.contrastText,
-    fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
-    fontSize: '12px',
-    height: '100%',
-    width: '100%',
-    // overflowWrap: 'anywhere', // currently not available in Chrome
-    whiteSpace: 'pre-wrap',
-    wordBreak: 'break-all',
-  },
-});
-
 @observer
 class Raxml extends React.Component {
   copyCommand = () => {
@@ -56,22 +20,30 @@ class Raxml extends React.Component {
   };
 
   render() {
-    const { classes, run } = this.props;
+    const { run } = this.props;
 
     return (
-      <div className={classes.Raxml}>
+      <Box
+        sx={{
+          padding: '10px',
+          width: '100%',
+          flexShrink: 0,
+        }}
+      >
         <Box
           component="form"
           mt={1}
           mb={2}
           display="flex"
-          className={classes.form}
           noValidate
           autoComplete="off"
           alignItems="center"
+          sx={{
+            gap: '20px',
+          }}
         >
-          <OptionSelect className={classes.formItem} option={run.binary} />
-          <OptionSelect className={classes.formItem} option={run.numThreads} />
+          <OptionSelect option={run.binary} />
+          <OptionSelect option={run.numThreads} />
           {run.modelTestIsRunningOnAlignment ? (
             <Button
               size="small"
@@ -82,7 +54,7 @@ class Raxml extends React.Component {
             </Button>
           ) : null}
           {run.running ? (
-            <Button size="small" variant="outlined" onClick={run.cancel}>
+            <Button variant="outlined" onClick={run.cancel}>
               Cancel
             </Button>
           ) : null}
@@ -113,14 +85,13 @@ class Raxml extends React.Component {
           </Box>
           <FormHelperText>Command</FormHelperText>
         </Box>
-      </div>
+      </Box>
     );
   }
 }
 
 Raxml.propTypes = {
-  classes: PropTypes.object.isRequired,
   run: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(Raxml);
+export default Raxml;
diff --git a/src/app/TreeCard.js b/src/app/TreeCard.js
index 86fc0b7..2fedc38 100644
--- a/src/app/TreeCard.js
+++ b/src/app/TreeCard.js
@@ -1,10 +1,8 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import IconButton from '@mui/material/IconButton';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import classNames from 'classnames';
 import CircularProgress from "@mui/material/CircularProgress";
 import Chip from "@mui/material/Chip";
 import Menu from '@mui/material/Menu';
@@ -12,75 +10,9 @@ import MenuItem from '@mui/material/MenuItem';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
 import CardContent from '@mui/material/CardContent';
+import Box from '@mui/material/Box';
 
-const useStyles = makeStyles(theme => ({
-  TreeCard: {
-    backgroundColor: theme.palette.input.main,
-    border: `1px solid ${theme.palette.input.light}`,
-  },
-  heading: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  content: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  name: {
-    marginRight: theme.spacing(1),
-  },
-  chip: {
-    height: '30px',
-    backgroundColor: theme.palette.input.dark,
-    border: `1px solid ${theme.palette.input.light}`,
-  },
-  link: {
-    cursor: 'pointer',
-    color: theme.palette.secondary.main
-  },
-  secondaryText: {
-    color: theme.palette.input.secondaryText,
-  },
-  divider: {
-    margin: '0 4px',
-  },
-  fileInfo: {
-    color: '#ccc',
-    fontSize: '0.75em',
-    marginTop: '0.25em',
-    overflowWrap: 'break-word',
-  },
-  path: {
-    cursor: 'pointer',
-    color: theme.palette.secondary.main,
-    marginLeft: 4,
-  },
-  button: {
-    margin: theme.spacing(1),
-  },
-  rightIcon: {
-    marginLeft: theme.spacing(1),
-  },
-  iconSmall: {
-    fontSize: 20,
-  },
-  outputButton: {
-    marginLeft: theme.spacing(1),
-  },
-  loading: {
-    marginLeft: '10px',
-  },
-  remove: {
-    flexGrow: 1,
-    display: 'flex',
-    justifyContent: 'flex-end',
-  }
-
-}));
-
-function TreeCard({ className, tree }) {
-
-  const classes = useStyles();
+function TreeCard({ sx, tree }) {
   const [anchorEl, setAnchorEl] = React.useState(null);
 
   function handleMenuClick(event) {
@@ -99,13 +31,29 @@ function TreeCard({ className, tree }) {
   }
 
   return (
-    <Card className={classNames(className, classes.TreeCard)} raised>
+    <Card
+      raised
+      sx={{
+        backgroundColor: (theme) => theme.palette.input.main,
+        border: (theme) => `1px solid ${theme.palette.input.light}`,
+        ...sx,
+      }}
+    >
       <CardHeader
         avatar={
-          <Chip classes={{ colorSecondary: classes.chip }} label="tree" color="secondary" />
+          <Chip
+            label="tree"
+            color="secondary"
+            sx={{
+              height: '30px',
+              color: (theme) => theme.palette.input.contrastText,
+              backgroundColor: (theme) => theme.palette.input.main,
+              border: (theme) => `1px solid ${theme.palette.input.darker}`,
+            }}
+          />
         }
         action={
-          <div>
+          <Box>
             <IconButton
               aria-owns={anchorEl ? 'tree-menu' : undefined}
               aria-haspopup="true"
@@ -119,18 +67,18 @@ function TreeCard({ className, tree }) {
               <MenuItem onClick={closeMenuAndRun(tree.openFolder)}>Show folder</MenuItem>
               <MenuItem onClick={closeMenuAndRun(tree.remove)}>Remove</MenuItem>
             </Menu>
-          </div>
+          </Box>
         }
         title={ tree.name }
         subheader={ '' }
       />
-      <div>
+      <Box>
         { tree.loading ? (
-          <div className={classes.loading}>
+          <Box sx={{ marginLeft: '10px' }}>
             <CircularProgress variant="indeterminate" />
-          </div>
+          </Box>
         ) : null }
-      </div>
+      </Box>
       <CardContent>
       </CardContent>
     </Card>
@@ -141,7 +89,7 @@ function TreeCard({ className, tree }) {
 
 TreeCard.propTypes = {
   tree: PropTypes.object.isRequired,
-  className: PropTypes.string,
+  sx: PropTypes.object,
 };
 
 export default observer(TreeCard);
diff --git a/src/app/components/CodeHighlight.js b/src/app/components/CodeHighlight.js
index 24db98b..7edd331 100644
--- a/src/app/components/CodeHighlight.js
+++ b/src/app/components/CodeHighlight.js
@@ -1,25 +1,15 @@
 import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
+import { Box } from '@mui/material';
 import Prism from 'prismjs';
 import 'prismjs-bibtex';
 import 'prismjs/themes/prism.css';
 import 'prismjs/themes/prism-okaidia.css'; // coy, dark, funky, okaidia, solarizedlight, tomorrow, twilight
 
-const useStyles = makeStyles(() => ({
-  code: {
-    fontSize: 10,
-    overflowWrap: 'break-word',
-    whiteSpace: 'pre-wrap',
-  }
-}));
-
-function CodeHighlight({ code, language, className }) {
+function CodeHighlight({ code, language, sx }) {
   const codeNode = useRef(null);
-  const classes = useStyles();
 
   useEffect(() => {
-    // const code = codeNode.current.textContent;
     if (Prism.languages.hasOwnProperty(language)) {
       const highlightHTML = Prism.highlight(code, Prism.languages[language], language);
       codeNode.current.innerHTML = highlightHTML;
@@ -27,18 +17,26 @@ function CodeHighlight({ code, language, className }) {
   }, [code, language]);
 
   return (
-    <pre className={className}>
-      <code ref={codeNode} className={classes.code}>
+    <Box component="pre" sx={sx}>
+      <Box
+        component="code"
+        ref={codeNode}
+        sx={{
+          fontSize: 10,
+          overflowWrap: 'break-word',
+          whiteSpace: 'pre-wrap',
+        }}
+      >
         { code }
-      </code>
-    </pre>
+      </Box>
+    </Box>
   );
 }
 
 CodeHighlight.propTypes = {
   code: PropTypes.string.isRequired,
   language: PropTypes.string.isRequired,
-  className: PropTypes.string,
+  sx: PropTypes.object,
 };
 
 export default CodeHighlight;
diff --git a/src/app/components/OptionCheck.js b/src/app/components/OptionCheck.js
index eea1ebf..3e604e4 100644
--- a/src/app/components/OptionCheck.js
+++ b/src/app/components/OptionCheck.js
@@ -6,14 +6,13 @@ import Checkbox from '@mui/material/Checkbox';
 import { FormControl } from '@mui/material';
 
 
-const OptionCheck = observer(({ option, className }) => {
+const OptionCheck = observer(({ option, sx }) => {
   if (option.notAvailable) {
     return null;
   }
   return (
-    <FormControl variant="standard" title={option.hoverInfo}>
+    <FormControl variant="standard" sx={sx} title={option.hoverInfo}>
       <FormControlLabel
-        className={className}
         control={
           <Checkbox
             checked={option.value}
@@ -30,7 +29,7 @@ const OptionCheck = observer(({ option, className }) => {
 
 OptionCheck.propTypes = {
   option: PropTypes.object.isRequired,
-  className: PropTypes.string,
+  sx: PropTypes.object,
 };
 
 export default OptionCheck;
diff --git a/src/app/components/OptionSelect.js b/src/app/components/OptionSelect.js
index 83381c3..4a30c9a 100644
--- a/src/app/components/OptionSelect.js
+++ b/src/app/components/OptionSelect.js
@@ -8,7 +8,7 @@ import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
 
 
-const OptionSelect = observer(({ option, className }) => {
+const OptionSelect = observer(({ option, sx }) => {
   if (option.notAvailable || option.options.length === 0) {
     return null;
   }
@@ -19,7 +19,7 @@ const OptionSelect = observer(({ option, className }) => {
         variant="standard"
         id={option.title}
         helperText={option.title}
-        className={className}
+        sx={sx}
         value={option.value}
         placeholder={option.placeholder}
         error={option.error}
@@ -32,7 +32,7 @@ const OptionSelect = observer(({ option, className }) => {
   }
 
   return (
-    <FormControl variant="standard" className={className} title={option.hoverInfo}>
+    <FormControl variant="standard" sx={sx} title={option.hoverInfo}>
       <Select
         value={option.value}
         onChange={(e) => option.setValue(e.target.value)}
@@ -55,7 +55,7 @@ const OptionSelect = observer(({ option, className }) => {
 
 OptionSelect.propTypes = {
   option: PropTypes.object.isRequired,
-  className: PropTypes.string,
+  sx: PropTypes.object,
 };
 
 export default OptionSelect;
diff --git a/src/app/components/OptionTextField.js b/src/app/components/OptionTextField.js
index 1ed109e..6b9d6c1 100644
--- a/src/app/components/OptionTextField.js
+++ b/src/app/components/OptionTextField.js
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import PropTypes from 'prop-types';
 import TextField from '@mui/material/TextField';
 
-const OptionTextField = observer(({ option, className }) => {
+const OptionTextField = observer(({ option, sx }) => {
   if (option.notAvailable) {
     return null;
   }
@@ -14,7 +14,7 @@ const OptionTextField = observer(({ option, className }) => {
       helperText={option.title}
       title={option.hoverInfo}
       disabled={option.disabled}
-      className={className}
+      sx={sx}
       value={option.value}
       placeholder={option.placeholder}
       onChange={(e) => option.setValue(e.target.value)}
@@ -24,7 +24,7 @@ const OptionTextField = observer(({ option, className }) => {
 
 OptionTextField.propTypes = {
   option: PropTypes.object.isRequired,
-  className: PropTypes.string,
+  sx: PropTypes.object,
 };
 
 export default OptionTextField;
diff --git a/yarn.lock b/yarn.lock
index 205e498..dcde2b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1848,7 +1848,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.26.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.26.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.27.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.27.6.tgz#ec4070a04d76bae8ddbb10770ba55714a417b7c6"
   integrity sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==
@@ -2743,29 +2743,6 @@
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/styles@^6.5.0":
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/@mui/styles/-/styles-6.5.0.tgz#52f67c5b10b66b84300717923d20aba13d6d05bd"
-  integrity sha512-DeE/S/l6adnMpKfgx6l7UaQwYuf+gD4FCp6En3Vdg2Er+CTArj4DcHNFVzb8HZ2nNqACwmSm16/P08m1vAxv2w==
-  dependencies:
-    "@babel/runtime" "^7.26.0"
-    "@emotion/hash" "^0.9.2"
-    "@mui/private-theming" "^6.4.9"
-    "@mui/types" "~7.2.24"
-    "@mui/utils" "^6.4.9"
-    clsx "^2.1.1"
-    csstype "^3.1.3"
-    hoist-non-react-statics "^3.3.2"
-    jss "^10.10.0"
-    jss-plugin-camel-case "^10.10.0"
-    jss-plugin-default-unit "^10.10.0"
-    jss-plugin-global "^10.10.0"
-    jss-plugin-nested "^10.10.0"
-    jss-plugin-props-sort "^10.10.0"
-    jss-plugin-rule-value-function "^10.10.0"
-    jss-plugin-vendor-prefixer "^10.10.0"
-    prop-types "^15.8.1"
-
 "@mui/system@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@mui/system/-/system-6.5.0.tgz#52751ac4e3a546f53bc34fd2ef2731c28a824b92"
@@ -5368,11 +5345,6 @@ clone-response@^1.0.2:
   dependencies:
     mimic-response "^1.0.0"
 
-clsx@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
-  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
-
 clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
@@ -5859,14 +5831,6 @@ css-tree@^1.1.2, css-tree@^1.1.3:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
-css-vendor@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
-  integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
-  dependencies:
-    "@babel/runtime" "^7.8.3"
-    is-in-browser "^1.0.2"
-
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
@@ -8398,7 +8362,7 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -8662,11 +8626,6 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
-hyphenate-style-name@^1.0.3:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz#1797bf50369588b47b72ca6d5e65374607cf4436"
-  integrity sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==
-
 iconv-corefoundation@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/iconv-corefoundation/-/iconv-corefoundation-1.1.7.tgz#31065e6ab2c9272154c8b0821151e2c88f1b002a"
@@ -9084,11 +9043,6 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-is-in-browser@^1.0.2, is-in-browser@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
-  integrity sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==
-
 is-map@^2.0.2, is-map@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
@@ -10124,76 +10078,6 @@ jsprim@^1.2.2:
     json-schema "0.4.0"
     verror "1.10.0"
 
-jss-plugin-camel-case@^10.10.0:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz#27ea159bab67eb4837fa0260204eb7925d4daa1c"
-  integrity sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    hyphenate-style-name "^1.0.3"
-    jss "10.10.0"
-
-jss-plugin-default-unit@^10.10.0:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz#db3925cf6a07f8e1dd459549d9c8aadff9804293"
-  integrity sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.10.0"
-
-jss-plugin-global@^10.10.0:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz#1c55d3c35821fab67a538a38918292fc9c567efd"
-  integrity sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.10.0"
-
-jss-plugin-nested@^10.10.0:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz#db872ed8925688806e77f1fc87f6e62264513219"
-  integrity sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.10.0"
-    tiny-warning "^1.0.2"
-
-jss-plugin-props-sort@^10.10.0:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz#67f4dd4c70830c126f4ec49b4b37ccddb680a5d7"
-  integrity sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.10.0"
-
-jss-plugin-rule-value-function@^10.10.0:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz#7d99e3229e78a3712f78ba50ab342e881d26a24b"
-  integrity sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.10.0"
-    tiny-warning "^1.0.2"
-
-jss-plugin-vendor-prefixer@^10.10.0:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz#c01428ef5a89f2b128ec0af87a314d0c767931c7"
-  integrity sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    css-vendor "^2.0.8"
-    jss "10.10.0"
-
-jss@10.10.0, jss@^10.10.0:
-  version "10.10.0"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-10.10.0.tgz#a75cc85b0108c7ac8c7b7d296c520a3e4fbc6ccc"
-  integrity sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    csstype "^3.0.2"
-    is-in-browser "^1.1.3"
-    tiny-warning "^1.0.2"
-
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.5:
   version "3.3.5"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
@@ -14538,11 +14422,6 @@ timed-out@^4.0.1:
   resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
   integrity sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA==
 
-tiny-warning@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
-  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
-
 tmp-promise@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/tmp-promise/-/tmp-promise-3.0.3.tgz#60a1a1cc98c988674fcbfd23b6e3367bdeac4ce7"