diff --git a/src/gate/GateDevice.tsx b/src/gate/GateDevice.tsx
index cbf87e6..9f86191 100644
--- a/src/gate/GateDevice.tsx
+++ b/src/gate/GateDevice.tsx
@@ -56,55 +56,6 @@ export default function GateDevice(props: Props) {
   const [lastTemps, setLastTemps] = useState({ t1: 0, t2: 0 });
   const [lastPressures, setLastPressures] = useState({ p1: 0, p2: 0 });
 
-  // 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);
-
   useEffect(() => {
     if (comprehensiveDevice.device) {
       setDevice(Device.any(comprehensiveDevice.device));
@@ -340,7 +291,8 @@ export default function GateDevice(props: Props) {
       container
       direction={(isMobile) ? "column" : "row"}
       width="100%"
-      alignItems="center"
+      spacing={(isMobile) ? 7 : 0}
+      //alignItems="center"
       >
       <Grid size={{ sm: 12, lg: isMobile || drawerView ? 12 : 4}} style={{ padding: 10 }}>
         <Box
@@ -363,7 +315,7 @@ export default function GateDevice(props: Props) {
             ]}
           />
         </Box>
-        <Card raised>
+        <Card>
           <GateSVG
             finalTemp={
               gate.gateMutations[device.id().toString()] &&
diff --git a/src/gate/GateFlowGraph.tsx b/src/gate/GateFlowGraph.tsx
index fae1c98..6835b63 100644
--- a/src/gate/GateFlowGraph.tsx
+++ b/src/gate/GateFlowGraph.tsx
@@ -70,8 +70,9 @@ export default function GateFlowGraph(props: Props) {
   const classes = useStyles();
   const [flowEvents, setFlowEvents] = useState<pond.AirFlowEvent[]>([]);
   const [eventsLoading, setEventsLoading] = useState(false);
-  const eventThreshold = 5;
-  const idleFlow = 2.44;
+  //these two constants could be entered by the user at time of retrieval
+  const eventThreshold = 5; //the threshold that if crossed from one measurement to the next during a flow event will end the current flow event and start a new one
+  const idleFlow = 3.5; //the mass air flow that must be crossed in order to start a flow event, anything below this will not start an event but must go below this to end an event
 
   useEffect(() => {
     if (loadingChartData) return;
@@ -102,7 +103,6 @@ export default function GateFlowGraph(props: Props) {
                 timestamp: time.valueOf(),
                 value: val.airFlow ?? 0
               };
-
               data.push(newPoint);
               if (!recent || recent.timestamp < newPoint.timestamp) {
                 recent = newPoint;