diff --git a/src/common/StatusGas.tsx b/src/common/StatusGas.tsx
index a714ba5..dd9737f 100644
--- a/src/common/StatusGas.tsx
+++ b/src/common/StatusGas.tsx
@@ -26,6 +26,16 @@ const useStyles = makeStyles((theme: Theme) => {
       width: theme.spacing(14),
       height: theme.spacing(6),
     },
+    boxTall: {
+      display: "inline-block",
+      borderRadius: "6px",
+      backgroundColor: lightMode ? "rgb(210, 210, 210)" : "rgb(50, 50, 50)",
+      padding: theme.spacing(0.75),
+      marginRight: "auto",
+      margin: theme.spacing(1),
+      width: theme.spacing(14),
+      height: theme.spacing(8),
+    },
     carouselContainer: {
       position: 'relative',
       height: '40px',
@@ -55,8 +65,21 @@ export default function StatusGas(props: Props) {
   const { device, gasType } = props;
   const classes = useStyles()
   // console.log(noDust)
-  const colors = or(device.status.o2?.overlays.map(overlay => overlay.color), []);
-  const messages = or(device.status.o2?.overlays.map(overlay => overlay.message), []);
+  let colors: string[] = []
+  let messages: string[] = []
+  if (gasType === "all") {
+    colors = or(device.status.o2?.overlays.map(overlay => overlay.color), []);
+    colors.push(...or(device.status.co2?.overlays.map(overlay => overlay.color), []));
+    colors.push(...or(device.status.no2?.overlays.map(overlay => overlay.color), []));
+    colors.push(...or(device.status.co?.overlays.map(overlay => overlay.color), []));
+    messages = or(device.status.o2?.overlays.map(overlay => overlay.message), []);
+    messages.push(...or(device.status.co2?.overlays.map(overlay => overlay.message), []));
+    messages.push(...or(device.status.no2?.overlays.map(overlay => overlay.message), []));
+    messages.push(...or(device.status.co?.overlays.map(overlay => overlay.message), []));
+  } else {
+    colors = or(device.status[gasType]?.overlays.map(overlay => overlay.color), []);
+    messages = or(device.status[gasType]?.overlays.map(overlay => overlay.message), []);
+  }
 
   const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
   const [, setColorIndex] = useState(0)
@@ -85,8 +108,8 @@ export default function StatusGas(props: Props) {
     }
     const interval = setInterval(() => {
       if (gasType === "all") setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
-      setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
-    }, 5000); 
+      else setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
+    }, 6000); 
 
     return () => clearInterval(interval); // Cleanup on unmount
   }, [gasType]);
@@ -105,19 +128,24 @@ export default function StatusGas(props: Props) {
         </Grid2>
         {messages.map((message, index) => {
           return (
-            <Grid2 key={"tooltip-overly-message-" + message} container direction="row" alignItems={"center"}>
-              <Box
-                sx={{
-                  width: 10, // Size of the square
-                  height: 10,
-                  backgroundColor: colors[index], // Passed color prop
-                  borderRadius: 1, // Optional: slight rounding, remove for sharp square
-                  border: "1px solid black",
-                }}
-              />
-              <Typography variant="caption" sx={{ marginLeft: 1 }}>
-                {message}
-              </Typography>
+            <Grid2 key={"tooltip-overly-message-" + message} container direction="row" alignContent={"center"}>
+              <Grid2 size={{xs: 1}} alignContent={"center"}>
+                <Box
+                  sx={{
+                    width: 12, // Size of the square
+                    height: 12,
+                    backgroundColor: colors[index], // Passed color prop
+                    borderRadius: 3, // Optional: slight rounding, remove for sharp square
+                    border: "1px solid black",
+                    marginBottom: 0.4
+                  }}
+                />
+              </Grid2>
+              <Grid2 size={{ xs: 11 }} alignContent={"center"}>
+                <Typography variant="caption">
+                  {message}
+                </Typography>
+              </Grid2>
             </Grid2>
           )
         })}
@@ -130,8 +158,13 @@ export default function StatusGas(props: Props) {
     // if (gasType !== "all") {
     return (
       <Tooltip title={tooltip()}>
-        <PulseBox color={color} className={classes.box} >
+        <PulseBox color={color} className={gasType === "all" ? classes.boxTall : classes.box}>
           <Grid2 container direction="column" >
+            { gasType === "all" &&
+              <Typography variant="body2">
+                {gas.toUpperCase()}
+              </Typography>
+            }
             <Grid2 container direction="column">
               <Grid2>
                 {gas !== "o2" ?