diff --git a/interface/src/project/Devices.tsx b/interface/src/project/Devices.tsx
index be13882b1..a7d6e87e2 100644
--- a/interface/src/project/Devices.tsx
+++ b/interface/src/project/Devices.tsx
@@ -36,7 +36,11 @@ import {
   List,
   ListItem,
   ListItemText,
-  Typography
+  Tooltip,
+  type TooltipProps,
+  Typography,
+  styled,
+  tooltipClasses
 } from '@mui/material';
 
 import { useRowSelect } from '@table-library/react-table-library/select';
@@ -234,6 +238,20 @@ const Devices: FC = () => {
     }
   ]);
 
+  const ButtonTooltip = styled(({ className, ...props }: TooltipProps) => (
+    <Tooltip {...props} arrow classes={{ popper: className }} />
+  ))(({ theme }) => ({
+    [`& .${tooltipClasses.arrow}`]: {
+      color: theme.palette.success.main
+    },
+    [`& .${tooltipClasses.tooltip}`]: {
+      backgroundColor: theme.palette.success.main,
+      color: 'rgba(0, 0, 0, 0.87)',
+      boxShadow: theme.shadows[1],
+      fontSize: 10
+    }
+  }));
+
   const getSortIcon = (state: State, sortKey: unknown) => {
     if (state.sortKey === sortKey && state.reverse) {
       return <KeyboardArrowDownOutlinedIcon />;
@@ -399,13 +417,22 @@ const Devices: FC = () => {
         '\r\n'
     );
 
-    const csvFile = new Blob([csvData], { type: 'text/csv;charset:utf-8' });
-    const downloadLink = document.createElement('a');
-    downloadLink.download = filename;
-    downloadLink.href = window.URL.createObjectURL(csvFile);
-    document.body.appendChild(downloadLink);
-    downloadLink.click();
-    document.body.removeChild(downloadLink);
+    const downloadBlob = (blob: Blob) => {
+      const downloadLink = document.createElement('a');
+      downloadLink.download = filename;
+      downloadLink.href = window.URL.createObjectURL(blob);
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      document.body.removeChild(downloadLink);
+    };
+
+    downloadBlob(
+      new Blob([JSON.stringify(deviceData, null, 2)], {
+        type: 'text;charset:utf-8'
+      })
+    );
+
+    downloadBlob(new Blob([csvData], { type: 'text/csv;charset:utf-8' }));
   };
 
   useEffect(() => {
@@ -608,11 +635,11 @@ const Devices: FC = () => {
           backgroundColor: 'black',
           position: 'absolute',
           left: () => leftOffset(),
-          right: 16,
+          right: 0,
           bottom: 0,
-          top: 128,
+          top: 64,
           zIndex: 'modal',
-          maxHeight: () => size[1] - 189,
+          maxHeight: () => size[1] - 126,
           border: '1px solid #177ac9'
         }}
       >
@@ -631,53 +658,65 @@ const Devices: FC = () => {
                 coreData.devices[deviceIndex].e +
                 ' ' +
                 LL.ENTITIES(shown_data.length)}
-              <IconButton onClick={() => setShowDeviceInfo(true)}>
-                <InfoOutlinedIcon
-                  color="primary"
-                  sx={{ fontSize: 18, verticalAlign: 'middle' }}
-                />
-              </IconButton>
-              {me.admin && (
-                <IconButton onClick={customize}>
-                  <FormatListNumberedIcon
+              <ButtonTooltip title="Info">
+                <IconButton onClick={() => setShowDeviceInfo(true)}>
+                  <InfoOutlinedIcon
                     color="primary"
                     sx={{ fontSize: 18, verticalAlign: 'middle' }}
                   />
                 </IconButton>
+              </ButtonTooltip>
+              {me.admin && (
+                <ButtonTooltip title={LL.CUSTOMIZATIONS()}>
+                  <IconButton onClick={customize}>
+                    <FormatListNumberedIcon
+                      color="primary"
+                      sx={{ fontSize: 18, verticalAlign: 'middle' }}
+                    />
+                  </IconButton>
+                </ButtonTooltip>
               )}
-              <IconButton onClick={handleDownloadCsv}>
-                <DownloadIcon
-                  color="primary"
-                  sx={{ fontSize: 18, verticalAlign: 'middle' }}
-                />
-              </IconButton>
-              <IconButton onClick={() => setOnlyFav(!onlyFav)}>
-                {onlyFav ? (
-                  <StarIcon
+              <ButtonTooltip title={LL.EXPORT()}>
+                <IconButton onClick={handleDownloadCsv}>
+                  <DownloadIcon
                     color="primary"
                     sx={{ fontSize: 18, verticalAlign: 'middle' }}
                   />
-                ) : (
-                  <StarBorderOutlinedIcon
+                </IconButton>
+              </ButtonTooltip>
+              <ButtonTooltip title="Favorites">
+                <IconButton onClick={() => setOnlyFav(!onlyFav)}>
+                  {onlyFav ? (
+                    <StarIcon
+                      color="primary"
+                      sx={{ fontSize: 18, verticalAlign: 'middle' }}
+                    />
+                  ) : (
+                    <StarBorderOutlinedIcon
+                      color="primary"
+                      sx={{ fontSize: 18, verticalAlign: 'middle' }}
+                    />
+                  )}
+                </IconButton>
+              </ButtonTooltip>
+              <ButtonTooltip title={LL.REFRESH()}>
+                <IconButton onClick={refreshData}>
+                  <RefreshIcon
                     color="primary"
                     sx={{ fontSize: 18, verticalAlign: 'middle' }}
                   />
-                )}
-              </IconButton>
-              <IconButton onClick={refreshData}>
-                <RefreshIcon
-                  color="primary"
-                  sx={{ fontSize: 18, verticalAlign: 'middle' }}
-                />
-              </IconButton>
+                </IconButton>
+              </ButtonTooltip>
             </Typography>
             <Grid item zeroMinWidth justifyContent="flex-end">
-              <IconButton onClick={resetDeviceSelect}>
-                <HighlightOffIcon
-                  color="primary"
-                  sx={{ fontSize: 18, verticalAlign: 'middle' }}
-                />
-              </IconButton>
+              <ButtonTooltip title={LL.CANCEL()}>
+                <IconButton onClick={resetDeviceSelect}>
+                  <HighlightOffIcon
+                    color="primary"
+                    sx={{ fontSize: 18, verticalAlign: 'middle' }}
+                  />
+                </IconButton>
+              </ButtonTooltip>
             </Grid>
           </Grid>
         </Box>