diff --git a/src/grainBag/grainBagCard.tsx b/src/grainBag/grainBagCard.tsx
index 51f055e..c48feb5 100644
--- a/src/grainBag/grainBagCard.tsx
+++ b/src/grainBag/grainBagCard.tsx
@@ -1,8 +1,8 @@
-import { Box, Card, Typography } from "@material-ui/core";
+import { Box, Card, Typography } from "@mui/material";
 import GrainDescriber from "grain/GrainDescriber";
 import { GrainBag } from "models/GrainBag";
 import moment from "moment";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import GrainBagSVG from "./grainBagSVG";
 
 interface Props {
diff --git a/src/grainBag/grainBagList.tsx b/src/grainBag/grainBagList.tsx
index 9ef6717..b403dd3 100644
--- a/src/grainBag/grainBagList.tsx
+++ b/src/grainBag/grainBagList.tsx
@@ -1,11 +1,19 @@
-import { Box, Button, createStyles, Grid, makeStyles, Theme, Typography } from "@material-ui/core";
+import { 
+  Box, 
+  Button, 
+  Grid, 
+  Theme, 
+  Typography 
+} from "@mui/material";
 import React from "react";
-import ScrollMenu from "react-horizontal-scroll-menu";
-import { useHistory } from "react-router";
-import { ArrowForward, ArrowBack } from "@material-ui/icons";
+// import ScrollMenu from "react-horizontal-scroll-menu";
+// import { useHistory } from "react-router";
+import { ArrowForward, ArrowBack } from "@mui/icons-material";
 import { useMobile } from "hooks";
 import { GrainBag } from "models/GrainBag";
 import GrainBagCard from "./grainBagCard";
+import { makeStyles } from "@mui/styles";
+import { useNavigate } from "react-router-dom";
 
 interface Props {
   grainBags: GrainBag[];
@@ -13,8 +21,8 @@ interface Props {
   gridView?: boolean;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
     gridListTile: {
       minHeight: "184px",
       height: "auto !important",
@@ -25,23 +33,25 @@ const useStyles = makeStyles((theme: Theme) =>
       visibility: "hidden"
     }
   })
-);
+});
 
 export default function GrainBagList(props: Props) {
   const { grainBags, title, gridView } = props;
   const classes = useStyles();
-  const history = useHistory();
+  // const history = useHistory();
+  const navigate = useNavigate()
   const isMobile = useMobile();
 
   const goToBag = (i: number) => {
     let path = "/grainbags/" + grainBags[i].key();
-    history.replace(path);
+    // history.replace(path);
+    navigate(path, { replace: true })
   };
 
   const scroll = () => {
     return (
       <React.Fragment>
-        <ScrollMenu
+        {/* <ScrollMenu
           wheel={false}
           alignCenter={false}
           inertiaScrolling
@@ -66,7 +76,7 @@ export default function GrainBagList(props: Props) {
               <GrainBagCard grainBag={b} />
             </Box>
           ))}
-        />
+        /> */}
       </React.Fragment>
     );
   };
@@ -86,7 +96,8 @@ export default function GrainBagList(props: Props) {
   return (
     <React.Fragment>
       {title && <Typography>{title}</Typography>}
-      {gridView ? grid() : scroll()}
+      {/* {gridView ? grid() : scroll()} */}
+      {grid()}
     </React.Fragment>
   );
 }
diff --git a/src/grainBag/grainBagSVG.tsx b/src/grainBag/grainBagSVG.tsx
index 384eba4..5b070bc 100644
--- a/src/grainBag/grainBagSVG.tsx
+++ b/src/grainBag/grainBagSVG.tsx
@@ -1,12 +1,12 @@
-import { Box, makeStyles, Theme, createStyles } from "@material-ui/core";
-import React from "react";
+import { Box, Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
 
 const GRAIN_COLOUR = "#b5a962";
 
 const useStyles = makeStyles((theme: Theme) => {
-  return createStyles({
+  return ({
     bag: {
-      fill: theme.palette.type === "light" ? "#373737" : "#292929",
+      fill: theme.palette.mode === "light" ? "#373737" : "#292929",
       fillOpacity: 1
     },
     inventory: {
diff --git a/src/pages/Bins.tsx b/src/pages/Bins.tsx
index 2a3aefd..95d53f0 100644
--- a/src/pages/Bins.tsx
+++ b/src/pages/Bins.tsx
@@ -13,7 +13,7 @@ import {
   Divider,
   FormControl,
   FormControlLabel,
-  Grid,
+  Grid2 as Grid,
   // GridList,
   // GridListTile,
   IconButton,
@@ -85,6 +85,7 @@ import AddBinFab from "bin/AddBinFab";
 import { GrainBag } from "models/GrainBag";
 import { getThemeType } from "theme/themeType";
 import GrainBagSettings from "grainBag/grainBagSettings";
+import GrainBagList from "grainBag/grainBagList";
 // import { useHistory } from "react-router";
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -233,35 +234,6 @@ export default function Bins(props: Props) {
     boxSizing: 'content-box', // Fixed 'content: "border-box"' typo from original
   }));
 
-  // const StyledToggleButtonGroup = withStyles(theme => ({
-  //   grouped: {
-  //     //margin: theme.spacing(-0.5),
-  //     border: "none",
-  //     padding: theme.spacing(1),
-  //     "&:not(:first-child):not(:last-child)": {
-  //       borderRadius: 24,
-  //       marginRight: theme.spacing(0.5),
-  //       marginLeft: theme.spacing(0.5)
-  //     },
-  //     "&:first-child": {
-  //       borderRadius: 24,
-  //       marginLeft: theme.spacing(0.25)
-  //     },
-  //     "&:last-child": {
-  //       borderRadius: 24,
-  //       marginRight: theme.spacing(0.25)
-  //     }
-  //   },
-  //   root: {
-  //     backgroundColor: darken(
-  //       theme.palette.background.paper,
-  //       getThemeType() === "light" ? 0.05 : 0.25
-  //     ),
-  //     borderRadius: 24,
-  //     content: "border-box"
-  //   }
-  // }))(ToggleButtonGroup);
-
   const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({
     root: {
       backgroundColor: "transparent",
@@ -282,26 +254,6 @@ export default function Bins(props: Props) {
     selected: {}
   }));
 
-  // const StyledToggle = withStyles({
-  //   root: {
-  //     backgroundColor: "transparent",
-  //     overflow: "visible",
-  //     content: "content-box",
-  //     "&$selected": {
-  //       backgroundColor: "gold",
-  //       color: "black",
-  //       borderRadius: 24,
-  //       fontWeight: "bold"
-  //     },
-  //     "&$selected:hover": {
-  //       backgroundColor: "rgb(255, 255, 0)",
-  //       color: "black",
-  //       borderRadius: 24
-  //     }
-  //   },
-  //   selected: {}
-  // })(ToggleButton);
-
   useEffect(() => {
     let ebt = sessionStorage.getItem("expandBinTotal");
     if (ebt === "true") {
@@ -666,10 +618,10 @@ export default function Bins(props: Props) {
         <Grid container>
           {displayGrain && (
             <React.Fragment>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <Divider />
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <BinsList
                   valDisplay={cardValDisplay}
                   gridView={binView === "grid"}
@@ -688,10 +640,10 @@ export default function Bins(props: Props) {
           )}
           {displayFert && (
             <React.Fragment>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <Divider />
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <BinsList
                   valDisplay={cardValDisplay}
                   gridView={binView === "grid"}
@@ -711,10 +663,10 @@ export default function Bins(props: Props) {
           )}
           {displayEmpty && (
             <React.Fragment>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <Divider />
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <BinsList
                   valDisplay={cardValDisplay}
                   gridView={binView === "grid"}
@@ -767,15 +719,15 @@ export default function Bins(props: Props) {
       <React.Fragment>
         <Grid container>
           <React.Fragment>
-            <Grid item xs={12}>
+            <Grid size={{ xs: 12 }}>
               <Divider />
             </Grid>
-            <Grid item xs={12}>
-              {/* <GrainBagList
+            <Grid size={{ xs: 12 }}>
+              <GrainBagList
                 gridView={bagView === "grid"}
                 grainBags={grainBags}
                 title={"Grain Bags"}
-              /> */}
+              />
             </Grid>
           </React.Fragment>
         </Grid>
@@ -842,7 +794,7 @@ export default function Bins(props: Props) {
     return (
       <React.Fragment>
         <Grid container direction="row" alignContent="center" alignItems="center">
-          <Grid item xs={2}>
+          <Grid size={{ xs: 2 }}>
             <Button
               style={{ height: 160 }}
               onClick={() => {
@@ -852,12 +804,12 @@ export default function Bins(props: Props) {
               <ArrowBackIos />
             </Button>
           </Grid>
-          <Grid item xs={8}>
+          <Grid size={{ xs: 8 }}>
             <Box height={"180px"} flexDirection="row" display="flex">
               {charts[carouselIndex]}
             </Box>
           </Grid>
-          <Grid item xs={2}>
+          <Grid size={{ xs: 2 }}>
             <Button
               style={{ height: 160 }}
               onClick={() => {
@@ -876,7 +828,7 @@ export default function Bins(props: Props) {
     return (
       <React.Fragment>
         <Grid container direction="row" alignContent="center" alignItems="center">
-          <Grid style={{ height: "200px" }} item xs={6}>
+          <Grid style={{ height: "200px" }} size={{ xs: 6 }}>
             <BinInventoryChart
               customLabel="Grain"
               inventory={displayedInventory}
@@ -893,7 +845,7 @@ export default function Bins(props: Props) {
               //activeGrain={grainFilter}
             />
           </Grid>
-          <Grid style={{ height: "200px" }} item xs={6}>
+          <Grid style={{ height: "200px" }} size={{ xs: 6 }}>
             <BinInventoryChart
               customLabel="Fertilizer"
               inventory={displayedFertilizer}
@@ -1172,7 +1124,7 @@ export default function Bins(props: Props) {
           alignContent="center"
           alignItems="center"
           justifyContent="space-between">
-          <Grid item>
+          <Grid >
             <Box display="flex" paddingY={1} alignContent="center" alignItems="center">
               <Typography variant="h6" style={{ fontWeight: 650 }}>
                 Bins - ({paginatedBins.bins.length} of {paginatedBins.binsTotal})
@@ -1238,7 +1190,7 @@ export default function Bins(props: Props) {
               </StyledToggleButtonGroup>
             </Box>
           </Grid>
-          <Grid item>
+          <Grid >
             <Box display="flex" paddingY={1} alignContent="center" alignItems="center">
               <StyledToggleButtonGroup
                 id="tour-graph-tabs"
@@ -1300,17 +1252,17 @@ export default function Bins(props: Props) {
           alignContent="center"
           alignItems="center"
           justifyContent="space-between">
-          <Grid item xs={12}>
+          <Grid size={{ xs: 12 }}>
             <Divider />
           </Grid>
-          <Grid item>
+          <Grid >
             <Box display="flex" paddingY={1} alignContent="center" alignItems="center">
               <Typography variant="h6" style={{ fontWeight: 650 }}>
                 Bags
               </Typography>
             </Box>
           </Grid>
-          <Grid item>
+          <Grid >
             <Box display="flex" paddingY={1} alignContent="center" alignItems="center">
               <StyledToggleButtonGroup
                 id="tour-graph-tabs"
@@ -1390,31 +1342,31 @@ export default function Bins(props: Props) {
             paddingX={isMobile || props.insert ? 1 : 2}>
             <Grid container>
               {(showing === "all" || showing === "bins") && (
-                <Grid item xs={12}>
+                <Grid size={{ xs: 12 }}>
                   {binsByGrainType()}
                 </Grid>
               )}
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 {allLoading ? <Skeleton variant="rectangular" height="200px" /> : totalInventory()}
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <Divider />
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 {allLoading ? <Skeleton variant="rectangular" height="200px" /> : binUtilizationList()}
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <Divider />
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 {allLoading ? <Skeleton variant="rectangular" height="200px" /> : binFanTable()}
               </Grid>
-              <Grid item xs={12}>
+              <Grid size={{ xs: 12 }}>
                 <Divider />
               </Grid>
 
               {(showing === "all" || showing === "bags") && (
-                <Grid item xs={12}>
+                <Grid size={{ xs: 12 }}>
                   {grainBagDisplay()}
                 </Grid>
               )}