diff --git a/interface/package-lock.json b/interface/package-lock.json
index e1fb81411..6de544137 100644
--- a/interface/package-lock.json
+++ b/interface/package-lock.json
@@ -30,7 +30,7 @@
         "react-dom": "^17.0.2",
         "react-dropzone": "^12.0.4",
         "react-icons": "^4.3.1",
-        "react-router-dom": "^6.2.2",
+        "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.0",
         "sockette": "^2.0.6",
         "typescript": "^4.6.3"
@@ -14524,9 +14524,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz",
-      "integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
       "dependencies": {
         "history": "^5.2.0"
       },
@@ -14535,12 +14535,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz",
-      "integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
       "dependencies": {
         "history": "^5.2.0",
-        "react-router": "6.2.2"
+        "react-router": "6.3.0"
       },
       "peerDependencies": {
         "react": ">=16.8",
@@ -27978,20 +27978,20 @@
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
     "react-router": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz",
-      "integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
       "requires": {
         "history": "^5.2.0"
       }
     },
     "react-router-dom": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz",
-      "integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
       "requires": {
         "history": "^5.2.0",
-        "react-router": "6.2.2"
+        "react-router": "6.3.0"
       }
     },
     "react-scripts": {
diff --git a/interface/package.json b/interface/package.json
index adf5abcec..d821af756 100644
--- a/interface/package.json
+++ b/interface/package.json
@@ -26,7 +26,7 @@
     "react-app-rewired": "^2.2.1",
     "react-dropzone": "^12.0.4",
     "react-icons": "^4.3.1",
-    "react-router-dom": "^6.2.2",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "sockette": "^2.0.6",
     "typescript": "^4.6.3"
diff --git a/interface/src/project/SettingsCustomization.tsx b/interface/src/project/SettingsCustomization.tsx
index e9c6cedb8..1e43fcfe8 100644
--- a/interface/src/project/SettingsCustomization.tsx
+++ b/interface/src/project/SettingsCustomization.tsx
@@ -41,12 +41,12 @@ import { DeviceShort, Devices, DeviceEntity } from './types';
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {
-    backgroundColor: '#607d8b',
-    color: theme.palette.common.white,
-    fontSize: 11
+    backgroundColor: '#607d8b'
+    // color: theme.palette.common.white,
+    // fontSize: 12
   },
   [`&.${tableCellClasses.body}`]: {
-    fontSize: 12
+    // fontSize: 12
   }
 }));
 
@@ -119,19 +119,19 @@ const SettingsCustomization: FC = () => {
         <Box color="warning.main">
           <Typography variant="body2">Select a device and customize each of its entities using the options:</Typography>
           <Typography mt={1} ml={2} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
-            <FavoriteBorderOutlinedIcon color="success" fontSize="small" />
+            <FavoriteBorderOutlinedIcon color="success" sx={{ fontSize: 13 }} />
             &nbsp;mark it as favorite to be listed at the top of the Dashboard
           </Typography>
           <Typography ml={2} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
-            <EditOffOutlinedIcon color="action" fontSize="small" />
+            <EditOffOutlinedIcon color="action" sx={{ fontSize: 13 }} />
             &nbsp;make it read-only, only if it has write operation available
           </Typography>
           <Typography ml={2} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
-            <CommentsDisabledOutlinedIcon color="action" fontSize="small" />
+            <CommentsDisabledOutlinedIcon color="action" sx={{ fontSize: 13 }} />
             &nbsp;excluded it from MQTT and API outputs
           </Typography>
           <Typography ml={2} mb={1} display="block" variant="body2" sx={{ alignItems: 'center', display: 'flex' }}>
-            <VisibilityOffOutlinedIcon color="action" fontSize="small" />
+            <VisibilityOffOutlinedIcon color="action" sx={{ fontSize: 13 }} />
             &nbsp;hide it from the Dashboard
           </Typography>
         </Box>
@@ -233,16 +233,16 @@ const SettingsCustomization: FC = () => {
                   }}
                 >
                   <ToggleButton value="8" color="success" disabled={(de.m & 1) !== 0 || de.n === ''}>
-                    <FavoriteBorderOutlinedIcon fontSize="small" />
+                    <FavoriteBorderOutlinedIcon sx={{ fontSize: 14 }} />
                   </ToggleButton>
                   <ToggleButton value="4" disabled={!de.w}>
-                    <EditOffOutlinedIcon fontSize="small" />
+                    <EditOffOutlinedIcon sx={{ fontSize: 14 }} />
                   </ToggleButton>
                   <ToggleButton value="2">
-                    <CommentsDisabledOutlinedIcon fontSize="small" />
+                    <CommentsDisabledOutlinedIcon sx={{ fontSize: 14 }} />
                   </ToggleButton>
                   <ToggleButton value="1">
-                    <VisibilityOffOutlinedIcon fontSize="small" />
+                    <VisibilityOffOutlinedIcon sx={{ fontSize: 14 }} />
                   </ToggleButton>
                 </ToggleButtonGroup>
               </StyledTableCell>