From 03931434c4f73280a19ffe64720a194b5c6cd7f1 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Mon, 15 Aug 2022 09:27:15 -0700
Subject: [PATCH] Update stage (#189)

* CEC-2056 safari map (#186)

* CEC-2056 Fix Safari map popup

* Snapshot serializer for Private styles

* Combine serializers

* CEC-2207  Add is-online filter for vehicles list (#187)

* Add OptionsDropdown component

* Add is-online filter

* CEC-2237 Track sign in and keys (#188)

Co-authored-by: arpanetus <arpanetus@protonmail.com>
---
 package-lock.json                             |  14 +-
 package.json                                  |   2 +-
 .../App/__snapshots__/App.test.js.snap        | 242 +++++++++++-------
 .../Add/__snapshots__/index.test.jsx.snap     |  12 +-
 .../Update/__snapshots__/index.test.jsx.snap  |  12 +-
 .../Add/__snapshots__/index.test.jsx.snap     |  80 +++---
 .../List/__snapshots__/index.test.jsx.snap    |  32 ++-
 src/components/Cars/List/index.jsx            |  24 +-
 .../Status/__snapshots__/index.test.jsx.snap  |   2 +-
 .../Update/__snapshots__/index.test.jsx.snap  |  80 +++---
 .../Controls/OptionsDropdown/index.jsx        |  77 ++++++
 .../Add/__snapshots__/index.test.jsx.snap     |  68 ++---
 .../Add/__snapshots__/index.test.jsx.snap     |  12 +-
 .../Update/__snapshots__/index.test.jsx.snap  |  12 +-
 .../Add/__snapshots__/index.test.jsx.snap     |   4 +-
 .../Status/__snapshots__/index.test.jsx.snap  |   2 +-
 .../Update/__snapshots__/index.test.jsx.snap  |  68 ++---
 .../Details/__snapshots__/index.test.js.snap  |  24 +-
 .../List/__snapshots__/index.test.jsx.snap    |  64 +++++
 src/components/Suppliers/Table/index.jsx      |  18 +-
 src/utils/snapshot.js                         |  18 +-
 21 files changed, 560 insertions(+), 307 deletions(-)
 create mode 100644 src/components/Controls/OptionsDropdown/index.jsx

diff --git a/package-lock.json b/package-lock.json
index ea0312a..8182dba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
         "clsx": "^1.1.1",
         "email-validator": "^2.0.4",
         "env-cmd": "^10.1.0",
-        "leaflet": "^1.7.1",
+        "leaflet": "^1.8.0",
         "material-ui-dropzone": "^3.5.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -11593,9 +11593,9 @@
       }
     },
     "node_modules/leaflet": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
-      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
+      "integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
     },
     "node_modules/leven": {
       "version": "3.1.0",
@@ -25739,9 +25739,9 @@
       }
     },
     "leaflet": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
-      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
+      "integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
     },
     "leven": {
       "version": "3.1.0",
diff --git a/package.json b/package.json
index c1c5967..a6539a1 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "clsx": "^1.1.1",
     "email-validator": "^2.0.4",
     "env-cmd": "^10.1.0",
-    "leaflet": "^1.7.1",
+    "leaflet": "^1.8.0",
     "material-ui-dropzone": "^3.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index b642c4e..a004604 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -350,7 +350,7 @@ exports[`App Route / authenticated 1`] = `
               data-testid="mocked-vehicleprovider"
             >
               <div
-                class="leaflet-container leaflet-grab leaflet-touch-drag"
+                class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
                 style="width: 100%; height: 900px; position: relative;"
                 tabindex="0"
               >
@@ -380,10 +380,10 @@ exports[`App Route / authenticated 1`] = `
                     </div>
                   </div>
                   <div
-                    class="leaflet-pane leaflet-shadow-pane"
+                    class="leaflet-pane leaflet-overlay-pane"
                   />
                   <div
-                    class="leaflet-pane leaflet-overlay-pane"
+                    class="leaflet-pane leaflet-shadow-pane"
                   />
                   <div
                     class="leaflet-pane leaflet-marker-pane"
@@ -405,22 +405,32 @@ exports[`App Route / authenticated 1`] = `
                       class="leaflet-control-zoom leaflet-bar leaflet-control"
                     >
                       <a
+                        aria-disabled="false"
                         aria-label="Zoom in"
                         class="leaflet-control-zoom-in"
                         href="#"
                         role="button"
                         title="Zoom in"
                       >
-                        +
+                        <span
+                          aria-hidden="true"
+                        >
+                          +
+                        </span>
                       </a>
                       <a
+                        aria-disabled="false"
                         aria-label="Zoom out"
                         class="leaflet-control-zoom-out"
                         href="#"
                         role="button"
                         title="Zoom out"
                       >
-                        −
+                        <span
+                          aria-hidden="true"
+                        >
+                          −
+                        </span>
                       </a>
                     </div>
                   </div>
@@ -438,11 +448,17 @@ exports[`App Route / authenticated 1`] = `
                     >
                       <a
                         href="https://leafletjs.com"
-                        title="A JS library for interactive maps"
+                        title="A JavaScript library for interactive maps"
                       >
                         Leaflet
                       </a>
-                       | © 
+                       
+                      <span
+                        aria-hidden="true"
+                      >
+                        |
+                      </span>
+                       © 
                       <a
                         href="http://osm.org/copyright"
                       >
@@ -868,7 +884,7 @@ exports[`App Route /home authenticated 1`] = `
               data-testid="mocked-vehicleprovider"
             >
               <div
-                class="leaflet-container leaflet-grab leaflet-touch-drag"
+                class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
                 style="width: 100%; height: 900px; position: relative;"
                 tabindex="0"
               >
@@ -898,10 +914,10 @@ exports[`App Route /home authenticated 1`] = `
                     </div>
                   </div>
                   <div
-                    class="leaflet-pane leaflet-shadow-pane"
+                    class="leaflet-pane leaflet-overlay-pane"
                   />
                   <div
-                    class="leaflet-pane leaflet-overlay-pane"
+                    class="leaflet-pane leaflet-shadow-pane"
                   />
                   <div
                     class="leaflet-pane leaflet-marker-pane"
@@ -923,22 +939,32 @@ exports[`App Route /home authenticated 1`] = `
                       class="leaflet-control-zoom leaflet-bar leaflet-control"
                     >
                       <a
+                        aria-disabled="false"
                         aria-label="Zoom in"
                         class="leaflet-control-zoom-in"
                         href="#"
                         role="button"
                         title="Zoom in"
                       >
-                        +
+                        <span
+                          aria-hidden="true"
+                        >
+                          +
+                        </span>
                       </a>
                       <a
+                        aria-disabled="false"
                         aria-label="Zoom out"
                         class="leaflet-control-zoom-out"
                         href="#"
                         role="button"
                         title="Zoom out"
                       >
-                        −
+                        <span
+                          aria-hidden="true"
+                        >
+                          −
+                        </span>
                       </a>
                     </div>
                   </div>
@@ -956,11 +982,17 @@ exports[`App Route /home authenticated 1`] = `
                     >
                       <a
                         href="https://leafletjs.com"
-                        title="A JS library for interactive maps"
+                        title="A JavaScript library for interactive maps"
                       >
                         Leaflet
                       </a>
-                       | © 
+                       
+                      <span
+                        aria-hidden="true"
+                      >
+                        |
+                      </span>
+                       © 
                       <a
                         href="http://osm.org/copyright"
                       >
@@ -1459,10 +1491,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1330"
+                        class="PrivateNotchedOutline-legendLabelled-0"
                       >
                         <span>
                           Package name
@@ -1505,10 +1537,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1330"
+                        class="PrivateNotchedOutline-legendLabelled-0"
                       >
                         <span>
                           Version
@@ -1559,10 +1591,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1330"
+                        class="PrivateNotchedOutline-legendLabelled-0"
                       >
                         <span>
                           Description
@@ -1606,10 +1638,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1330"
+                        class="PrivateNotchedOutline-legendLabelled-0"
                       >
                         <span>
                           Release Notes URL
@@ -2157,11 +2189,11 @@ exports[`App Route /package-create authenticated 1`] = `
                           </svg>
                           <fieldset
                             aria-hidden="true"
-                            class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                            class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                             style="padding-left: 8px;"
                           >
                             <legend
-                              class="PrivateNotchedOutline-legend-1329"
+                              class="PrivateNotchedOutline-legend-0"
                               style="width: 0.01px;"
                             >
                               <span>
@@ -2384,11 +2416,11 @@ exports[`App Route /package-create authenticated 1`] = `
                                   </svg>
                                   <fieldset
                                     aria-hidden="true"
-                                    class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
+                                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                                     style="padding-left: 8px;"
                                   >
                                     <legend
-                                      class="PrivateNotchedOutline-legend-1329"
+                                      class="PrivateNotchedOutline-legend-0"
                                       style="width: 0.01px;"
                                     >
                                       <span>
@@ -3057,14 +3089,14 @@ exports[`App Route /package-deploy authenticated 1`] = `
                             >
                               <span
                                 aria-disabled="false"
-                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1261 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                               >
                                 <span
                                   class="MuiIconButton-label"
                                 >
                                   <input
                                     aria-label="select all desserts"
-                                    class="PrivateSwitchBase-input-1264"
+                                    class="PrivateSwitchBase-input-0"
                                     data-indeterminate="false"
                                     type="checkbox"
                                     value=""
@@ -5820,10 +5852,10 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-1601 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-1603"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
@@ -5850,20 +5882,20 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1605 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1606 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-1608"
+                        class="PrivateSwitchBase-input-0"
                         name="cert-type"
                         type="radio"
                         value="TBOX"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-1609 PrivateRadioButtonIcon-checked-1611"
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -5877,7 +5909,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1610"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -5902,19 +5934,19 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1605 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-1608"
+                        class="PrivateSwitchBase-input-0"
                         name="cert-type"
                         type="radio"
                         value="ICC"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-1609"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -5928,7 +5960,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1610"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -5953,19 +5985,19 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1605 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-1608"
+                        class="PrivateSwitchBase-input-0"
                         name="cert-type"
                         type="radio"
                         value="Charging"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-1609"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -5979,7 +6011,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1610"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -6500,10 +6532,10 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-1675 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-1677"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         ICCID
@@ -6546,10 +6578,10 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-1675 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-1677"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Message
@@ -6564,13 +6596,13 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
               >
                 <span
                   aria-disabled="false"
-                  class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1679 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary"
+                  class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary"
                 >
                   <span
                     class="MuiIconButton-label"
                   >
                     <input
-                      class="PrivateSwitchBase-input-1682"
+                      class="PrivateSwitchBase-input-0"
                       data-indeterminate="false"
                       type="checkbox"
                       value="isAwaited"
@@ -7098,10 +7130,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1397"
+                        class="PrivateNotchedOutline-legendLabelled-0"
                       >
                         <span>
                           VIN
@@ -7144,10 +7176,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Model
@@ -7191,10 +7223,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Year
@@ -7238,10 +7270,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Trim
@@ -7268,19 +7300,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="trace"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403"
+                          class="PrivateRadioButtonIcon-root-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7294,7 +7326,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7319,19 +7351,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="debug"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403"
+                          class="PrivateRadioButtonIcon-root-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7345,7 +7377,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7370,20 +7402,20 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1400 Mui-checked MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
                           checked=""
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="info"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403 PrivateRadioButtonIcon-checked-1405"
+                          class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7397,7 +7429,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7422,19 +7454,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="warn"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403"
+                          class="PrivateRadioButtonIcon-root-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7448,7 +7480,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7473,19 +7505,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="error"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403"
+                          class="PrivateRadioButtonIcon-root-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7499,7 +7531,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7524,19 +7556,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           name="log-level-group"
                           type="radio"
                           value="critical"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1403"
+                          class="PrivateRadioButtonIcon-root-0"
                         >
                           <svg
                             aria-hidden="true"
@@ -7550,7 +7582,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7585,14 +7617,14 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-1400 Mui-checked MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
                           checked=""
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           data-indeterminate="false"
                           type="checkbox"
                           value=""
@@ -7651,10 +7683,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                       />
                       <fieldset
                         aria-hidden="true"
-                        class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                       >
                         <legend
-                          class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
+                          class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                         >
                           <span>
                             Max Memory Buffer Size (0 uses default size)
@@ -7669,13 +7701,13 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1402"
+                          class="PrivateSwitchBase-input-0"
                           data-indeterminate="false"
                           type="checkbox"
                           value=""
@@ -7736,10 +7768,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Max Disk Buffer Size (0 uses default size)
@@ -8318,7 +8350,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                     </button>
                   </div>
                   <span
-                    class="PrivateTabIndicator-root-1533 PrivateTabIndicator-colorSecondary-1535 MuiTabs-indicator"
+                    class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
                     style="left: 0px; width: 0px;"
                   />
                 </div>
@@ -9024,7 +9056,37 @@ exports[`App Route /vehicles authenticated 1`] = `
                   </div>
                 </div>
                 <div
-                  class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                  class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
+                >
+                  <div>
+                    <button
+                      aria-haspopup="true"
+                      class="MuiButtonBase-root MuiIconButton-root"
+                      tabindex="0"
+                      type="button"
+                    >
+                      <span
+                        class="MuiIconButton-label"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="MuiTouchRipple-root"
+                      />
+                    </button>
+                  </div>
+                </div>
+                <div
+                  class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-2"
                 />
               </div>
               <div
diff --git a/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap b/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
index 5414382..fff30da 100644
--- a/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
@@ -56,10 +56,10 @@ exports[`CANFiltersAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
@@ -102,10 +102,10 @@ exports[`CANFiltersAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         CAN ID
@@ -140,10 +140,10 @@ exports[`CANFiltersAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Interval
diff --git a/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap b/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap
index bf0505d..f7f60a2 100644
--- a/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap
@@ -56,10 +56,10 @@ exports[`CANFiltersUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
@@ -103,10 +103,10 @@ exports[`CANFiltersUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         CAN ID
@@ -149,10 +149,10 @@ exports[`CANFiltersUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Interval
diff --git a/src/components/Cars/Add/__snapshots__/index.test.jsx.snap b/src/components/Cars/Add/__snapshots__/index.test.jsx.snap
index c5bf8c5..95c6340 100644
--- a/src/components/Cars/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Add/__snapshots__/index.test.jsx.snap
@@ -55,10 +55,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
@@ -101,10 +101,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Model
@@ -148,10 +148,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Year
@@ -195,10 +195,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Trim
@@ -225,19 +225,19 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -251,7 +251,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -276,19 +276,19 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -302,7 +302,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -327,20 +327,20 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -354,7 +354,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -379,19 +379,19 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -405,7 +405,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -430,19 +430,19 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -456,7 +456,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -481,19 +481,19 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -507,7 +507,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -542,14 +542,14 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -608,10 +608,10 @@ exports[`VehicleAddForm Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Max Memory Buffer Size (0 uses default size)
@@ -626,13 +626,13 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -693,10 +693,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
diff --git a/src/components/Cars/List/__snapshots__/index.test.jsx.snap b/src/components/Cars/List/__snapshots__/index.test.jsx.snap
index 11f684d..cc2b5f0 100644
--- a/src/components/Cars/List/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/List/__snapshots__/index.test.jsx.snap
@@ -93,7 +93,37 @@ exports[`VehicleTable Render 1`] = `
                 </div>
               </div>
               <div
-                class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
+              >
+                <div>
+                  <button
+                    aria-haspopup="true"
+                    class="MuiButtonBase-root MuiIconButton-root"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                </div>
+              </div>
+              <div
+                class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-2"
               />
             </div>
             <div
diff --git a/src/components/Cars/List/index.jsx b/src/components/Cars/List/index.jsx
index 72ec03d..69e5d18 100644
--- a/src/components/Cars/List/index.jsx
+++ b/src/components/Cars/List/index.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Grid } from "@material-ui/core";
+import { Checkbox, FormControlLabel, Grid, MenuItem } from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import { Link } from "react-router-dom";
 import clsx from "clsx";
@@ -10,10 +10,12 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
 import CarSelectionTable from "../../Controls/CarSelectionTable";
+import OptionsDropdown from "../../Controls/OptionsDropdown";
 
 const MainForm = () => {
   const classes = useStyles();
   const [search, setSearch] = useState("");
+  const [online, setOnline] = useState(false);
   const { setTitle, setSitePath } = useStatusContext();
   const {
     token: {
@@ -25,6 +27,10 @@ const MainForm = () => {
     setSearch(query);
   };
 
+  const handleOnline = (event) => {
+    setOnline(event.target.checked);
+  }
+
   useEffect(() => {
     setTitle("Vehicles");
     setSitePath([]);
@@ -42,13 +48,25 @@ const MainForm = () => {
         <Grid item md={4} className={classes.textCenterAlign}>
           <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
-        <Grid item md={4} className={classes.textRightAlign} />
+        <Grid item md={2} className={classes.textJustifyAlign}>
+          <OptionsDropdown listId='filter-menu'>
+            <MenuItem>
+              <FormControlLabel control={
+                <Checkbox
+                  checked={online}
+                  onChange={handleOnline}
+                />
+              } label="Only online" />
+            </MenuItem>
+          </OptionsDropdown>
+        </Grid>
+        <Grid item md={2} className={classes.textRightAlign} />
       </Grid>
       <CarSelectionTable
         classes={classes}
         token={token}
         multiSelect={false}
-        search={{ search }}
+        search={{ search, online: online? true : null}}
       />
     </div>
   );
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index 8fc16ca..ca532b7 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
@@ -121,7 +121,7 @@ exports[`CarStatus Render 1`] = `
                   </button>
                 </div>
                 <span
-                  class="PrivateTabIndicator-root-65 PrivateTabIndicator-colorSecondary-67 MuiTabs-indicator"
+                  class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
                   style="left: 0px; width: 0px;"
                 />
               </div>
diff --git a/src/components/Cars/Update/__snapshots__/index.test.jsx.snap b/src/components/Cars/Update/__snapshots__/index.test.jsx.snap
index 0a01194..0a175dd 100644
--- a/src/components/Cars/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Update/__snapshots__/index.test.jsx.snap
@@ -57,10 +57,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
@@ -103,10 +103,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Model
@@ -150,10 +150,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Year
@@ -197,10 +197,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Trim
@@ -227,19 +227,19 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -253,7 +253,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -278,19 +278,19 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -304,7 +304,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -329,20 +329,20 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -356,7 +356,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -381,19 +381,19 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -407,7 +407,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -432,19 +432,19 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -458,7 +458,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -483,19 +483,19 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -509,7 +509,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -544,14 +544,14 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -610,10 +610,10 @@ exports[`VehicleUpdate Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Max Memory Buffer Size (0 uses default size)
@@ -628,13 +628,13 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -694,10 +694,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
diff --git a/src/components/Controls/OptionsDropdown/index.jsx b/src/components/Controls/OptionsDropdown/index.jsx
new file mode 100644
index 0000000..81a8403
--- /dev/null
+++ b/src/components/Controls/OptionsDropdown/index.jsx
@@ -0,0 +1,77 @@
+import React, {useEffect, useRef, useState} from "react";
+import {ClickAwayListener, Grow, IconButton, MenuList, Paper, Popper} from "@material-ui/core";
+import TuneIcon from "@material-ui/icons/Tune";
+
+
+const OptionsDropdown = ({listId, children}) => {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+  const prevOpen = useRef(open);
+
+  const handleToggle = () => {
+    setOpen((pOpen) => !pOpen);
+  };
+
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const handleListKeyDown = (event) => {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      setOpen(false);
+    }
+  }
+
+  useEffect(() => {
+    if (prevOpen.current === true && open === false) {
+      anchorRef.current.focus();
+    }
+
+    prevOpen.current = open;
+  }, [open]);
+
+  return (<div>
+      <IconButton
+        ref={anchorRef}
+        aria-controls={open ? listId : undefined}
+        aria-haspopup="true"
+        onClick={handleToggle}
+      >
+        <TuneIcon />
+      </IconButton>
+      <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition>
+        {({TransitionProps, placement}) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement ===
+                'bottom' ?
+                  'center top' :
+                  'center bottom'
+            }}
+          >
+            <Paper>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MenuList
+                  autoFocusItem={open}
+                  id={listId}
+                  onKeyDown={handleListKeyDown}
+                >
+                  {children}
+                </MenuList>
+              </ClickAwayListener>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </div>
+  );
+}
+
+export default OptionsDropdown;
\ No newline at end of file
diff --git a/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
index c6ad998..f95f4c7 100644
--- a/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
@@ -55,10 +55,10 @@ exports[`FleetAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Name
@@ -85,19 +85,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -111,7 +111,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -136,19 +136,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -162,7 +162,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -187,20 +187,20 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -214,7 +214,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -239,19 +239,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -265,7 +265,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -290,19 +290,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -316,7 +316,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -341,19 +341,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -367,7 +367,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -402,14 +402,14 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -468,10 +468,10 @@ exports[`FleetAddForm Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Max Memory Buffer Size (0 uses default size)
@@ -486,13 +486,13 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -553,10 +553,10 @@ exports[`FleetAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
diff --git a/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap
index 9d3d430..c6d26c2 100644
--- a/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap
@@ -56,10 +56,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Fleet Name
@@ -102,10 +102,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         CAN ID
@@ -140,10 +140,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Interval
diff --git a/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap
index f93a306..1fb8994 100644
--- a/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap
@@ -56,10 +56,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Fleet Name
@@ -103,10 +103,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         CAN ID
@@ -149,10 +149,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Interval
diff --git a/src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap
index 02f201a..d6cb489 100644
--- a/src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap
@@ -55,10 +55,10 @@ exports[`FleetVehicleAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         VIN
diff --git a/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
index 0422987..7cd8290 100644
--- a/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
@@ -85,7 +85,7 @@ exports[`FleetStatus Render 1`] = `
                   </button>
                 </div>
                 <span
-                  class="PrivateTabIndicator-root-65 PrivateTabIndicator-colorSecondary-67 MuiTabs-indicator"
+                  class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
                   style="left: 0px; width: 0px;"
                 />
               </div>
diff --git a/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
index 6d14f03..484d38d 100644
--- a/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
@@ -57,10 +57,10 @@ exports[`FleetUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66"
+                      class="PrivateNotchedOutline-legendLabelled-0"
                     >
                       <span>
                         Name
@@ -87,19 +87,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -113,7 +113,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -138,19 +138,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -164,7 +164,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -189,20 +189,20 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
+                        class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -216,7 +216,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -241,19 +241,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -267,7 +267,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -292,19 +292,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -318,7 +318,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -343,19 +343,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-72"
+                        class="PrivateRadioButtonIcon-root-0"
                       >
                         <svg
                           aria-hidden="true"
@@ -369,7 +369,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -404,14 +404,14 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -470,10 +470,10 @@ exports[`FleetUpdate Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                        class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                       >
                         <span>
                           Max Memory Buffer Size (0 uses default size)
@@ -488,13 +488,13 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-71"
+                        class="PrivateSwitchBase-input-0"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -554,10 +554,10 @@ exports[`FleetUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
diff --git a/src/components/Suppliers/Details/__snapshots__/index.test.js.snap b/src/components/Suppliers/Details/__snapshots__/index.test.js.snap
index d3ecb44..d84a806 100644
--- a/src/components/Suppliers/Details/__snapshots__/index.test.js.snap
+++ b/src/components/Suppliers/Details/__snapshots__/index.test.js.snap
@@ -52,10 +52,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       Contact
@@ -98,10 +98,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       Company
@@ -144,10 +144,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       Address
@@ -190,10 +190,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       Telephone
@@ -236,10 +236,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       Program
@@ -282,10 +282,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
                   >
                     <span>
                       ECUs
diff --git a/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap b/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
index 5b0c8cd..054ef55 100644
--- a/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
+++ b/src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
@@ -190,6 +190,52 @@ exports[`Suppliers page Render 1`] = `
                     </svg>
                   </span>
                 </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Sign In
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Keys
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
               </tr>
             </thead>
             <tbody
@@ -239,6 +285,12 @@ exports[`Suppliers page Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
               </tr>
               <tr
                 class="MuiTableRow-root"
@@ -284,6 +336,12 @@ exports[`Suppliers page Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
               </tr>
               <tr
                 class="MuiTableRow-root"
@@ -329,6 +387,12 @@ exports[`Suppliers page Render 1`] = `
                 <td
                   class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
               </tr>
             </tbody>
             <tfoot
diff --git a/src/components/Suppliers/Table/index.jsx b/src/components/Suppliers/Table/index.jsx
index 4be3ef8..a356f7c 100644
--- a/src/components/Suppliers/Table/index.jsx
+++ b/src/components/Suppliers/Table/index.jsx
@@ -16,7 +16,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import { logger } from "../../../services/monitoring";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -47,9 +47,17 @@ const tableColumns = [
     id: "activated_at",
     label: "Activated",
   },
+  {
+    id: "signin_at",
+    label: "Sign In",
+  },
+  {
+    id: "keys_at",
+    label: "Keys",
+  },
 ];
 
-const PAGE_SIZE="SUPPLIER_TABLE_PAGE_SIZE";
+const PAGE_SIZE = "SUPPLIER_TABLE_PAGE_SIZE";
 
 const SupplierTable = (props) => {
   const { token, classes } = props;
@@ -137,6 +145,12 @@ const SupplierTable = (props) => {
                 <TableCell align="center">
                   {LocalDateTimeString(row.activated)}
                 </TableCell>
+                <TableCell align="center">
+                  {LocalDateTimeString(row.signin_at)}
+                </TableCell>
+                <TableCell align="center">
+                  {LocalDateTimeString(row.keys_at)}
+                </TableCell>
               </TableRow>
             );
           })}
diff --git a/src/utils/snapshot.js b/src/utils/snapshot.js
index 54395e8..819cc59 100644
--- a/src/utils/snapshot.js
+++ b/src/utils/snapshot.js
@@ -1,25 +1,13 @@
-const rxMakeStyles = /makeStyles-(\w+)-(\d+)/gi;
-const rxMUIStyles = /mui-\d*/g;
+const rxStyles = /(mui|makeStyles|Private)([^\s]*)-\d+/g;
 
 const snapshotSerializers = [
   {
     test: (val) => {
-      return val && typeof val === "string" && val.indexOf("mui-") > -1;
+      return val && typeof val === "string" && val.search(rxStyles) > -1;
     },
     print: (val) => {
       let str = val;
-      str = str.replace(rxMUIStyles, "mui-0");
-
-      return `"${str}"`;
-    },
-  },
-  {
-    test: (val) => {
-      return val && typeof val === "string" && val.search(rxMakeStyles) > -1;
-    },
-    print: (val) => {
-      let str = val;
-      str = str.replace(rxMakeStyles, "makeStyles-$1-0");
+      str = str.replace(rxStyles, "$1$2-0");
 
       return `"${str}"`;
     },