diff --git a/src/bin/BinSVGV2.tsx b/src/bin/BinSVGV2.tsx
index d53d15c..bfd18db 100644
--- a/src/bin/BinSVGV2.tsx
+++ b/src/bin/BinSVGV2.tsx
@@ -1,5 +1,6 @@
 import { Box, Theme, ToggleButton, ToggleButtonGroup, darken } from "@mui/material";
 import { makeStyles, withStyles } from "@mui/styles";
+import ButtonGroup from "common/ButtonGroup";
 import { ExtractMoisture } from "grain";
 import { GrainCable } from "models/GrainCable";
 import { describeMeasurement } from "pbHelpers/MeasurementDescriber";
@@ -212,54 +213,54 @@ export default function BinSVGV2(props: Props) {
   const [extraDetails, setExtraDetails] = useState<"temps" | "hums">("temps");
   const [nodeWarning, setNodeWarning] = useState(false);
 
-  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 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 = 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);
+  // 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);
 
   const gradients = () => {
     const burning = "#8a1f0d";
@@ -1047,10 +1048,26 @@ export default function BinSVGV2(props: Props) {
     <React.Fragment>
       {showTempHum && (
         <Box
+          display="flex"
+          alignContent="center"
+          justifyContent="center"
           textAlign="center"
           //visibility={showTempHum ? "visible" : "hidden"}
           className={!isFullScreen ? classes.smallToggle : classes.fullToggle}>
-          <StyledToggleButtonGroup
+          <ButtonGroup 
+            buttons={[
+              {
+                title: isFullScreen ? "Temperature" : "Temp",
+                function: () => setExtraDetails("temps")
+              },
+              {
+                title: grainType ? (isFullScreen ? "Moisture" : "EMC") : isFullScreen ? "Humidity" : "Hum",
+                function: () => setExtraDetails("hums")
+              }
+            ]}
+            toggle
+          />
+          {/* <StyledToggleButtonGroup
             value={extraDetails}
             exclusive
             size="small"
@@ -1067,7 +1084,7 @@ export default function BinSVGV2(props: Props) {
               aria-label="Node Humidity">
               {grainType ? (isFullScreen ? "Moisture" : "EMC") : isFullScreen ? "Humidity" : "Hum"}
             </StyledToggle>
-          </StyledToggleButtonGroup>
+          </StyledToggleButtonGroup> */}
         </Box>
       )}
       <Box
diff --git a/src/gate/GateDevice.tsx b/src/gate/GateDevice.tsx
index 7ab8efc..3deef9e 100644
--- a/src/gate/GateDevice.tsx
+++ b/src/gate/GateDevice.tsx
@@ -22,6 +22,7 @@ import GateSVG from "./GateSVG";
 import GateGraphs from "./GateGraphs";
 //import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
 import { getThemeType } from "theme";
+import ButtonGroup from "common/ButtonGroup";
 
 interface Props {
   gate: Gate;
@@ -344,7 +345,20 @@ export default function GateDevice(props: Props) {
           alignItems="center"
           marginBottom={2}>
           <Typography style={{ fontWeight: 650, fontSize: 20 }}>{device.name()}</Typography>
-          <ToggleButtonGroup value={detail} exclusive size="small" aria-label="detail">
+          <ButtonGroup 
+            toggle
+            buttons={[
+              {
+                title: "Analysis",
+                function: () => setDetail("analytics")
+              },
+              {
+                title: "Sensors",
+                function: () => setDetail("sensors")
+              }
+            ]}
+          />
+          {/* <ToggleButtonGroup value={detail} exclusive size="small" aria-label="detail">
             <ToggleButton
               onClick={() => setDetail("analytics")}
               value={"analytics"}
@@ -357,7 +371,7 @@ export default function GateDevice(props: Props) {
               aria-label="Sensor Graphs">
               Sensors
             </ToggleButton>
-          </ToggleButtonGroup>
+          </ToggleButtonGroup> */}
         </Box>
         <Card raised>
           <GateSVG
diff --git a/src/pages/Bin.tsx b/src/pages/Bin.tsx
index a13611c..114ea0e 100644
--- a/src/pages/Bin.tsx
+++ b/src/pages/Bin.tsx
@@ -66,6 +66,7 @@ import { makeStyles, styled } from "@mui/styles";
 import { useNavigate, useParams } from "react-router-dom";
 import { Controller } from "models/Controller";
 import TaskViewer from "tasks/TaskViewer";
+import ButtonGroup from "common/ButtonGroup";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -214,54 +215,54 @@ export default function Bin(props: Props) {
     setValue(newValue);
   };
 
-  const StyledToggle = styled(ToggleButton)(() => ({
-    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: {}
-  }))
+  // const StyledToggle = styled(ToggleButton)(() => ({
+  //   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: {}
+  // }))
 
-  const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: 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"
-    }
-  }))
+  // const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: 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"
+  //   }
+  // }))
 
   const load = useCallback(() => {
     if (loadRef.current || user.id() === "") return;
@@ -862,8 +863,33 @@ export default function Bin(props: Props) {
             </Box>
           </Grid>
           <Grid id="tour-graphs" size={{ xs: 12, sm: 12, md: 12, lg: 5.3 }}>
-            <Box paddingBottom={2}>
-              <StyledToggleButtonGroup
+            <Box paddingBottom={2} display="flex">
+              <ButtonGroup 
+                toggle
+                buttons={[
+                  {
+                    title: "Inventory",
+                    function: () => setDetail("inventory")
+                  },
+                  {
+                    title: "Sensors",
+                    function: () => setDetail("sensors")
+                  },
+                  {
+                    title: "Analysis",
+                    function: () => setDetail("analytics")
+                  },
+                  {
+                    title: "Alerts",
+                    function: () => setDetail("alerts")
+                  },
+                  {
+                    title: "Presets",
+                    function: () => setDetail("presets")
+                  }
+                ]}
+              />
+              {/* <StyledToggleButtonGroup
                 id="tour-graph-tabs"
                 value={detail}
                 exclusive
@@ -899,7 +925,7 @@ export default function Bin(props: Props) {
                   aria-label="Bin Mode Presets">
                   Presets
                 </StyledToggle>
-              </StyledToggleButtonGroup>
+              </StyledToggleButtonGroup> */}
             </Box>
             {detail === "alerts" && (
               <Box>
diff --git a/src/pages/Bins.tsx b/src/pages/Bins.tsx
index 5043b96..ae8f6b5 100644
--- a/src/pages/Bins.tsx
+++ b/src/pages/Bins.tsx
@@ -81,6 +81,7 @@ import { getThemeType } from "theme/themeType";
 import GrainBagSettings from "grainBag/grainBagSettings";
 import GrainBagList from "grainBag/grainBagList";
 import BinYards from "bin/BinYards";
+import ButtonGroup from "common/ButtonGroup";
 // import { useHistory } from "react-router";
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -200,56 +201,56 @@ export default function Bins(props: Props) {
   //   fertilizer: 0
   // });
 
-  const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({
-    '& .MuiToggleButtonGroup-grouped': {
-      // border: 'none' replaces the old 'grouped' border: "none"
-      border: 'none',
-      padding: theme.spacing(1),
-      // Middle buttons
-      '&:not(:first-child):not(:last-child)': {
-        borderRadius: 24,
-        marginRight: theme.spacing(0.5),
-        marginLeft: theme.spacing(0.5),
-      },
-      // First button
-      '&:first-child': {
-        borderRadius: 24,
-        marginLeft: theme.spacing(0.25),
-      },
-      // Last button
-      '&:last-child': {
-        borderRadius: 24,
-        marginRight: theme.spacing(0.25),
-      },
-    },
-    // Root styles
-    backgroundColor: darken(
-      theme.palette.background.paper,
-      getThemeType() === 'light' ? 0.05 : 0.25
-    ),
-    borderRadius: 24,
-    boxSizing: 'content-box', // Fixed 'content: "border-box"' typo from original
-  }));
+  // const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({
+  //   '& .MuiToggleButtonGroup-grouped': {
+  //     // border: 'none' replaces the old 'grouped' border: "none"
+  //     border: 'none',
+  //     padding: theme.spacing(1),
+  //     // Middle buttons
+  //     '&:not(:first-child):not(:last-child)': {
+  //       borderRadius: 24,
+  //       marginRight: theme.spacing(0.5),
+  //       marginLeft: theme.spacing(0.5),
+  //     },
+  //     // First button
+  //     '&:first-child': {
+  //       borderRadius: 24,
+  //       marginLeft: theme.spacing(0.25),
+  //     },
+  //     // Last button
+  //     '&:last-child': {
+  //       borderRadius: 24,
+  //       marginRight: theme.spacing(0.25),
+  //     },
+  //   },
+  //   // Root styles
+  //   backgroundColor: darken(
+  //     theme.palette.background.paper,
+  //     getThemeType() === 'light' ? 0.05 : 0.25
+  //   ),
+  //   borderRadius: 24,
+  //   boxSizing: 'content-box', // Fixed 'content: "border-box"' typo from original
+  // }));
 
-  const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({
-    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: {}
-  }));
+  // const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({
+  //   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: {}
+  // }));
 
   useEffect(() => {
     let ebt = sessionStorage.getItem("expandBinTotal");
@@ -502,6 +503,17 @@ export default function Bins(props: Props) {
     }
   }, [loadBins, props.insert, contentFilter]);
 
+  const determineNodeToggle = () => {
+    switch(cardValDisplay) {
+      case "low":
+        return [0]
+      case "high":
+        return [2]
+      default:
+        return [1]
+    }
+  }
+
   const duplicateBin = (bin: Bin) => {
     binAPI.addBin(bin.settings, as).then(resp => {
       loadBins();
@@ -1154,7 +1166,25 @@ export default function Bins(props: Props) {
                     Load All
                   </Button>
                 )}
-              <StyledToggleButtonGroup
+              <ButtonGroup 
+                toggle
+                toggledButtons={determineNodeToggle()}
+                buttons={[
+                  {
+                    title: "Low",
+                    function: () => {setCardValDisplay("low")}
+                  },
+                  {
+                    title: "Average",
+                    function: () => {setCardValDisplay("average")}
+                  },
+                  {
+                    title: "High",
+                    function: () => {setCardValDisplay("high")}
+                  }
+                ]}
+              />
+              {/* <StyledToggleButtonGroup
                 id="cardValueDisplay"
                 value={cardValDisplay}
                 exclusive
@@ -1184,12 +1214,33 @@ export default function Bins(props: Props) {
                   }}>
                   High
                 </StyledToggle>
-              </StyledToggleButtonGroup>
+              </StyledToggleButtonGroup> */}
             </Box>
           </Grid>
           <Grid >
             <Box display="flex" paddingY={1} alignContent="center" alignItems="center">
-              <StyledToggleButtonGroup
+              <ButtonGroup 
+                toggle
+                buttons={[
+                  {
+                    title: "Grid",
+                    icon: <ViewComfy />,
+                    function: () => {
+                      setBinView("grid");
+                      sessionStorage.setItem("binsView", "grid");
+                    }
+                  },
+                  {
+                    title: "List",
+                    icon: <ViewList />,
+                    function: () => {
+                      setBinView("list");
+                      sessionStorage.setItem("binsView", "list");
+                    }
+                  }
+                ]}
+              />
+              {/* <StyledToggleButtonGroup
                 id="tour-graph-tabs"
                 value={binView}
                 exclusive
@@ -1203,7 +1254,7 @@ export default function Bins(props: Props) {
                     sessionStorage.setItem("binsView", "grid");
                   }}>
                   <ViewComfy />
-                </StyledToggle>
+                </StyledToggle> */}
                 {/* hidden at dustins request so that grid view and list are the only two */}
                 {/* <StyledToggle
                   value={"scroll"}
@@ -1214,7 +1265,7 @@ export default function Bins(props: Props) {
                   }}>
                   <ViewColumn />
                 </StyledToggle> */}
-                <StyledToggle
+                {/* <StyledToggle
                   value={"list"}
                   aria-label="list view"
                   onClick={() => {
@@ -1223,7 +1274,7 @@ export default function Bins(props: Props) {
                   }}>
                   <ViewList />
                 </StyledToggle>
-              </StyledToggleButtonGroup>
+              </StyledToggleButtonGroup> */}
               <MoreVert
                 className={classes.icon}
                 onClick={event => {
@@ -1261,7 +1312,28 @@ export default function Bins(props: Props) {
           </Grid>
           <Grid >
             <Box display="flex" paddingY={1} alignContent="center" alignItems="center">
-              <StyledToggleButtonGroup
+            <ButtonGroup 
+                toggle
+                buttons={[
+                  {
+                    title: "Grid",
+                    icon: <ViewComfy />,
+                    function: () => {
+                      setBagView("grid");
+                      sessionStorage.setItem("bagsView", "grid");
+                    }
+                  },
+                  {
+                    title: "List",
+                    icon: <ViewList />,
+                    function: () => {
+                      setBagView("list");
+                      sessionStorage.setItem("bagsView", "list");
+                    }
+                  }
+                ]}
+              />
+              {/* <StyledToggleButtonGroup
                 id="tour-graph-tabs"
                 value={bagView}
                 exclusive
@@ -1275,7 +1347,7 @@ export default function Bins(props: Props) {
                     sessionStorage.setItem("bagsView", "grid");
                   }}>
                   <ViewComfy />
-                </StyledToggle>
+                </StyledToggle> */}
                 {/* hidden at dustins request so that grid view and list are the only two */}
                 {/* <StyledToggle
                   value={"scroll"}
@@ -1286,7 +1358,7 @@ export default function Bins(props: Props) {
                   }}>
                   <ViewColumn />
                 </StyledToggle> */}
-                <StyledToggle
+                {/* <StyledToggle
                   value={"list"}
                   aria-label="list view"
                   onClick={() => {
@@ -1295,7 +1367,7 @@ export default function Bins(props: Props) {
                   }}>
                   <ViewList />
                 </StyledToggle>
-              </StyledToggleButtonGroup>
+              </StyledToggleButtonGroup> */}
               <IconButton
                 className={classes.icon}
                 onClick={() => {
diff --git a/src/tasks/TaskList.tsx b/src/tasks/TaskList.tsx
index 9844f68..6803831 100644
--- a/src/tasks/TaskList.tsx
+++ b/src/tasks/TaskList.tsx
@@ -8,6 +8,7 @@ import { Task } from "models";
 //import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
 import TasksIcon from "products/Construction/TasksIcon";
 import moment from "moment";
+import ButtonGroup from "common/ButtonGroup";
 
 interface Props {
   tasks: Task[];
@@ -147,8 +148,21 @@ export default function TaskList(props: Props) {
   return (
     <Box padding="5px" textAlign="center">
       <Typography variant="h5">{label ? label : ""}</Typography>
-      <Box textAlign="center">
-        <ToggleButtonGroup value={viewing} exclusive size="small" aria-label="Bin Mode">
+      <Box textAlign="center" display="flex" justifyContent="center">
+        <ButtonGroup 
+          toggle
+          buttons={[
+            {
+              title: "Upcoming",
+              function: () => setViewing("upcoming")
+            },
+            {
+              title: "Complete",
+              function: () => setViewing("complete")
+            }
+          ]}
+        />
+        {/* <ToggleButtonGroup value={viewing} exclusive size="small" aria-label="Bin Mode">
           <ToggleButton
             value={"upcoming"}
             aria-label="upcoming"
@@ -161,7 +175,7 @@ export default function TaskList(props: Props) {
             aria-label="complete">
             Complete
           </ToggleButton>
-        </ToggleButtonGroup>
+        </ToggleButtonGroup> */}
         {location !== "/tasks" && (
           <IconButton id="tasks" component={Link} to="/tasks">
             <TasksIcon />