From 0d706d82520154dacede2f80a82876f47ec79b3f Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Fri, 5 Aug 2022 21:32:57 -0700
Subject: [PATCH] CEC-2211 Add CAN signals component to map (#182)

Fix timer memory leak
---
 .../App/__snapshots__/App.test.js.snap        | 154 +++++++++---------
 .../Add/__snapshots__/index.test.jsx.snap     |  12 +-
 .../Update/__snapshots__/index.test.jsx.snap  |  12 +-
 .../Add/__snapshots__/index.test.jsx.snap     |  80 ++++-----
 src/components/Cars/CANSignals/index.jsx      |  81 ++-------
 .../Status/__snapshots__/index.test.jsx.snap  |   6 +-
 .../Update/__snapshots__/index.test.jsx.snap  |  80 ++++-----
 src/components/Contexts/CANSignalsContext.jsx |  89 ++++++++++
 src/components/DigitalTwin/index.js           |   3 +
 .../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  |   6 +-
 .../Update/__snapshots__/index.test.jsx.snap  |  68 ++++----
 .../Details/__snapshots__/index.test.js.snap  |  24 +--
 src/components/VehicleMap/popup.jsx           |  34 +++-
 src/components/useStyles.jsx                  |   6 +
 18 files changed, 407 insertions(+), 344 deletions(-)
 create mode 100644 src/components/Contexts/CANSignalsContext.jsx

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index e6a4999..b642c4e 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -1459,10 +1459,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1307 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1309"
+                        class="PrivateNotchedOutline-legendLabelled-1330"
                       >
                         <span>
                           Package name
@@ -1505,10 +1505,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1307 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1309"
+                        class="PrivateNotchedOutline-legendLabelled-1330"
                       >
                         <span>
                           Version
@@ -1559,10 +1559,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1307 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1309"
+                        class="PrivateNotchedOutline-legendLabelled-1330"
                       >
                         <span>
                           Description
@@ -1606,10 +1606,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1307 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1309"
+                        class="PrivateNotchedOutline-legendLabelled-1330"
                       >
                         <span>
                           Release Notes URL
@@ -2157,11 +2157,11 @@ exports[`App Route /package-create authenticated 1`] = `
                           </svg>
                           <fieldset
                             aria-hidden="true"
-                            class="PrivateNotchedOutline-root-1307 MuiOutlinedInput-notchedOutline"
+                            class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
                             style="padding-left: 8px;"
                           >
                             <legend
-                              class="PrivateNotchedOutline-legend-1308"
+                              class="PrivateNotchedOutline-legend-1329"
                               style="width: 0.01px;"
                             >
                               <span>
@@ -2384,11 +2384,11 @@ exports[`App Route /package-create authenticated 1`] = `
                                   </svg>
                                   <fieldset
                                     aria-hidden="true"
-                                    class="PrivateNotchedOutline-root-1307 MuiOutlinedInput-notchedOutline"
+                                    class="PrivateNotchedOutline-root-1328 MuiOutlinedInput-notchedOutline"
                                     style="padding-left: 8px;"
                                   >
                                     <legend
-                                      class="PrivateNotchedOutline-legend-1308"
+                                      class="PrivateNotchedOutline-legend-1329"
                                       style="width: 0.01px;"
                                     >
                                       <span>
@@ -3057,14 +3057,14 @@ exports[`App Route /package-deploy authenticated 1`] = `
                             >
                               <span
                                 aria-disabled="false"
-                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1241 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1261 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                               >
                                 <span
                                   class="MuiIconButton-label"
                                 >
                                   <input
                                     aria-label="select all desserts"
-                                    class="PrivateSwitchBase-input-1244"
+                                    class="PrivateSwitchBase-input-1264"
                                     data-indeterminate="false"
                                     type="checkbox"
                                     value=""
@@ -5820,10 +5820,10 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-1576 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-1601 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-1578"
+                      class="PrivateNotchedOutline-legendLabelled-1603"
                     >
                       <span>
                         VIN
@@ -5850,20 +5850,20 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1580 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1581 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1605 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1606 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-1583"
+                        class="PrivateSwitchBase-input-1608"
                         name="cert-type"
                         type="radio"
                         value="TBOX"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-1584 PrivateRadioButtonIcon-checked-1586"
+                        class="PrivateRadioButtonIcon-root-1609 PrivateRadioButtonIcon-checked-1611"
                       >
                         <svg
                           aria-hidden="true"
@@ -5877,7 +5877,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1585"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1610"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -5902,19 +5902,19 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1580 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1605 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-1583"
+                        class="PrivateSwitchBase-input-1608"
                         name="cert-type"
                         type="radio"
                         value="ICC"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-1584"
+                        class="PrivateRadioButtonIcon-root-1609"
                       >
                         <svg
                           aria-hidden="true"
@@ -5928,7 +5928,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1585"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1610"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -5953,19 +5953,19 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1580 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1605 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-1583"
+                        class="PrivateSwitchBase-input-1608"
                         name="cert-type"
                         type="radio"
                         value="Charging"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-1584"
+                        class="PrivateRadioButtonIcon-root-1609"
                       >
                         <svg
                           aria-hidden="true"
@@ -5979,7 +5979,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1585"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1610"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
@@ -6500,10 +6500,10 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-1649 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-1675 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-1651"
+                      class="PrivateNotchedOutline-legendLabelled-1677"
                     >
                       <span>
                         ICCID
@@ -6546,10 +6546,10 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-1649 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-1675 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-1651"
+                      class="PrivateNotchedOutline-legendLabelled-1677"
                     >
                       <span>
                         Message
@@ -6564,13 +6564,13 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
               >
                 <span
                   aria-disabled="false"
-                  class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1653 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary"
+                  class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1679 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary"
                 >
                   <span
                     class="MuiIconButton-label"
                   >
                     <input
-                      class="PrivateSwitchBase-input-1656"
+                      class="PrivateSwitchBase-input-1682"
                       data-indeterminate="false"
                       type="checkbox"
                       value="isAwaited"
@@ -7098,10 +7098,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1373 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1375"
+                        class="PrivateNotchedOutline-legendLabelled-1397"
                       >
                         <span>
                           VIN
@@ -7144,10 +7144,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1373 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1375 PrivateNotchedOutline-legendNotched-1376"
+                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
                       >
                         <span>
                           Model
@@ -7191,10 +7191,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1373 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1375 PrivateNotchedOutline-legendNotched-1376"
+                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
                       >
                         <span>
                           Year
@@ -7238,10 +7238,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1373 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1375 PrivateNotchedOutline-legendNotched-1376"
+                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
                       >
                         <span>
                           Trim
@@ -7268,19 +7268,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1377 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1380"
+                          class="PrivateSwitchBase-input-1402"
                           name="log-level-group"
                           type="radio"
                           value="trace"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1381"
+                          class="PrivateRadioButtonIcon-root-1403"
                         >
                           <svg
                             aria-hidden="true"
@@ -7294,7 +7294,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1382"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7319,19 +7319,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1377 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1380"
+                          class="PrivateSwitchBase-input-1402"
                           name="log-level-group"
                           type="radio"
                           value="debug"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1381"
+                          class="PrivateRadioButtonIcon-root-1403"
                         >
                           <svg
                             aria-hidden="true"
@@ -7345,7 +7345,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1382"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7370,20 +7370,20 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1377 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1378 Mui-checked MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-1400 Mui-checked MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
                           checked=""
-                          class="PrivateSwitchBase-input-1380"
+                          class="PrivateSwitchBase-input-1402"
                           name="log-level-group"
                           type="radio"
                           value="info"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1381 PrivateRadioButtonIcon-checked-1383"
+                          class="PrivateRadioButtonIcon-root-1403 PrivateRadioButtonIcon-checked-1405"
                         >
                           <svg
                             aria-hidden="true"
@@ -7397,7 +7397,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1382"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7422,19 +7422,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1377 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1380"
+                          class="PrivateSwitchBase-input-1402"
                           name="log-level-group"
                           type="radio"
                           value="warn"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1381"
+                          class="PrivateRadioButtonIcon-root-1403"
                         >
                           <svg
                             aria-hidden="true"
@@ -7448,7 +7448,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1382"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7473,19 +7473,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1377 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1380"
+                          class="PrivateSwitchBase-input-1402"
                           name="log-level-group"
                           type="radio"
                           value="error"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1381"
+                          class="PrivateRadioButtonIcon-root-1403"
                         >
                           <svg
                             aria-hidden="true"
@@ -7499,7 +7499,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1382"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7524,19 +7524,19 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1377 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1380"
+                          class="PrivateSwitchBase-input-1402"
                           name="log-level-group"
                           type="radio"
                           value="critical"
                         />
                         <div
-                          class="PrivateRadioButtonIcon-root-1381"
+                          class="PrivateRadioButtonIcon-root-1403"
                         >
                           <svg
                             aria-hidden="true"
@@ -7550,7 +7550,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                           </svg>
                           <svg
                             aria-hidden="true"
-                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1382"
+                            class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-1404"
                             focusable="false"
                             viewBox="0 0 24 24"
                           >
@@ -7585,14 +7585,14 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1377 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-1378 Mui-checked MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-1400 Mui-checked MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
                           checked=""
-                          class="PrivateSwitchBase-input-1380"
+                          class="PrivateSwitchBase-input-1402"
                           data-indeterminate="false"
                           type="checkbox"
                           value=""
@@ -7651,10 +7651,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                       />
                       <fieldset
                         aria-hidden="true"
-                        class="PrivateNotchedOutline-root-1373 MuiOutlinedInput-notchedOutline"
+                        class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
                       >
                         <legend
-                          class="PrivateNotchedOutline-legendLabelled-1375 PrivateNotchedOutline-legendNotched-1376"
+                          class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
                         >
                           <span>
                             Max Memory Buffer Size (0 uses default size)
@@ -7669,13 +7669,13 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   >
                     <span
                       aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1377 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1399 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                     >
                       <span
                         class="MuiIconButton-label"
                       >
                         <input
-                          class="PrivateSwitchBase-input-1380"
+                          class="PrivateSwitchBase-input-1402"
                           data-indeterminate="false"
                           type="checkbox"
                           value=""
@@ -7736,10 +7736,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1373 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1395 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1375 PrivateNotchedOutline-legendNotched-1376"
+                        class="PrivateNotchedOutline-legendLabelled-1397 PrivateNotchedOutline-legendNotched-1398"
                       >
                         <span>
                           Max Disk Buffer Size (0 uses default size)
@@ -8212,7 +8212,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
             class="makeStyles-paper-0 makeStyles-tableSize-0"
           >
             <div
-              class="MuiBox-root MuiBox-root-1508 makeStyles-tableToolbar-0"
+              class="MuiBox-root MuiBox-root-1532 makeStyles-tableToolbar-0"
             >
               <div
                 class="MuiTabs-root"
@@ -8318,7 +8318,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                     </button>
                   </div>
                   <span
-                    class="PrivateTabIndicator-root-1509 PrivateTabIndicator-colorSecondary-1511 MuiTabs-indicator"
+                    class="PrivateTabIndicator-root-1533 PrivateTabIndicator-colorSecondary-1535 MuiTabs-indicator"
                     style="left: 0px; width: 0px;"
                   />
                 </div>
@@ -8330,7 +8330,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               role="tabpanel"
             >
               <div
-                class="MuiBox-root MuiBox-root-1513"
+                class="MuiBox-root MuiBox-root-1537"
               >
                 <div
                   class="makeStyles-paper-0 makeStyles-tableSize-0"
diff --git a/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap b/src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
index 49c6fd5..5414382 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-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <span>
                         VIN
@@ -102,10 +102,10 @@ exports[`CANFiltersAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <span>
                         CAN ID
@@ -140,10 +140,10 @@ exports[`CANFiltersAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <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 5f55d67..bf0505d 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-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <span>
                         VIN
@@ -103,10 +103,10 @@ exports[`CANFiltersUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <span>
                         CAN ID
@@ -149,10 +149,10 @@ exports[`CANFiltersUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <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 946a22b..c5bf8c5 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-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <span>
                         VIN
@@ -101,10 +101,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                     >
                       <span>
                         Model
@@ -148,10 +148,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                     >
                       <span>
                         Year
@@ -195,10 +195,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                     >
                       <span>
                         Trim
@@ -225,19 +225,19 @@ exports[`VehicleAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -251,7 +251,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -302,7 +302,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71 PrivateRadioButtonIcon-checked-73"
+                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
                       >
                         <svg
                           aria-hidden="true"
@@ -354,7 +354,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -405,7 +405,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -456,7 +456,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -507,7 +507,7 @@ exports[`VehicleAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -608,10 +608,10 @@ exports[`VehicleAddForm Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                       >
                         <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-67 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -693,10 +693,10 @@ exports[`VehicleAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
diff --git a/src/components/Cars/CANSignals/index.jsx b/src/components/Cars/CANSignals/index.jsx
index f7f1a39..a3e9aa9 100644
--- a/src/components/Cars/CANSignals/index.jsx
+++ b/src/components/Cars/CANSignals/index.jsx
@@ -1,3 +1,4 @@
+import React, { useEffect } from "react";
 import {
   Table,
   TableBody,
@@ -5,77 +6,19 @@ import {
   TableHead,
   TableRow,
 } from "@material-ui/core";
-import React, { useEffect, useState } from "react";
-import { logger } from "../../../services/monitoring";
-import { LocalDateTimeString } from "../../../utils/dates";
 
-import { useVehicleContext } from "../../Contexts/VehicleContext";
+import {
+  CANSignalProvider,
+  useCANSignalContext,
+} from "../../Contexts/CANSignalsContext";
 
-const BlankSignal = (msg) => ({
-  timestamp: "",
-  signal: msg,
-  value: "",
-});
-
-const transformSignals = (signals) =>
-  signals
-    .map((signal) => {
-      const { Timestamp, ...Settings } = signal;
-      const keys = Object.keys(Settings);
-
-      return keys.map((key) => ({
-        timestamp: LocalDateTimeString(Timestamp),
-        signal: key,
-        value: Settings[key],
-      }));
-    })
-    .flat();
-
-const CANSignals = (props) => {
-  const { vin, token } = props;
-  const { getCANSignals } = useVehicleContext();
-  const [signals, setSignals] = useState([]);
-  const delay = 500;
-  let timer = 0;
-
-  const stopTimer = async () => {
-    if (timer === 0) return;
-    clearTimeout(timer);
-    timer = 0;
-  };
-
-  const startTimer = () => {
-    stopTimer();
-    timer = setTimeout(() => {
-      updateSignals();
-    }, delay);
-  };
-
-  const updateSignals = async () => {
-    try {
-      const result = await getCANSignals(vin, token);
-      const items = transformSignals(result.data);
-
-      if (items.length > 0) {
-        setSignals(items);
-      } else {
-        setSignals([BlankSignal("No signals")]);
-      }
-
-      if (delay > 0) startTimer();
-    } catch (e) {
-      setSignals([BlankSignal(e.message)]);
-      logger.warn(e.stack);
-    }
-  };
+const Main = ({ vin }) => {
+  const { signals, setVIN } = useCANSignalContext();
 
   useEffect(() => {
-    startTimer();
-    return () => {
-      stopTimer();
-    };
+    setVIN(vin);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [vin]);
 
   if (!signals || signals.length === 0) return <h3>Loading...</h3>;
 
@@ -101,4 +44,10 @@ const CANSignals = (props) => {
   );
 };
 
+const CANSignals = (props) => (
+  <CANSignalProvider>
+    <Main {...props} />
+  </CANSignalProvider>
+);
+
 export default CANSignals;
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index 34e37ea..8fc16ca 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
@@ -15,7 +15,7 @@ exports[`CarStatus Render 1`] = `
           class="makeStyles-paper-0 makeStyles-tableSize-0"
         >
           <div
-            class="MuiBox-root MuiBox-root-63 makeStyles-tableToolbar-0"
+            class="MuiBox-root MuiBox-root-64 makeStyles-tableToolbar-0"
           >
             <div
               class="MuiTabs-root"
@@ -121,7 +121,7 @@ exports[`CarStatus Render 1`] = `
                   </button>
                 </div>
                 <span
-                  class="PrivateTabIndicator-root-64 PrivateTabIndicator-colorSecondary-66 MuiTabs-indicator"
+                  class="PrivateTabIndicator-root-65 PrivateTabIndicator-colorSecondary-67 MuiTabs-indicator"
                   style="left: 0px; width: 0px;"
                 />
               </div>
@@ -133,7 +133,7 @@ exports[`CarStatus Render 1`] = `
             role="tabpanel"
           >
             <div
-              class="MuiBox-root MuiBox-root-68"
+              class="MuiBox-root MuiBox-root-69"
             >
               <div
                 class="makeStyles-paper-0 makeStyles-tableSize-0"
diff --git a/src/components/Cars/Update/__snapshots__/index.test.jsx.snap b/src/components/Cars/Update/__snapshots__/index.test.jsx.snap
index 78c7610..0a01194 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-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <span>
                         VIN
@@ -103,10 +103,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                     >
                       <span>
                         Model
@@ -150,10 +150,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                     >
                       <span>
                         Year
@@ -197,10 +197,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                     >
                       <span>
                         Trim
@@ -227,19 +227,19 @@ exports[`VehicleUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -253,7 +253,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -304,7 +304,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71 PrivateRadioButtonIcon-checked-73"
+                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
                       >
                         <svg
                           aria-hidden="true"
@@ -356,7 +356,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -407,7 +407,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -458,7 +458,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -509,7 +509,7 @@ exports[`VehicleUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -610,10 +610,10 @@ exports[`VehicleUpdate Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                       >
                         <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-67 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -694,10 +694,10 @@ exports[`VehicleUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                     >
                       <span>
                         Max Disk Buffer Size (0 uses default size)
diff --git a/src/components/Contexts/CANSignalsContext.jsx b/src/components/Contexts/CANSignalsContext.jsx
new file mode 100644
index 0000000..9ef74d0
--- /dev/null
+++ b/src/components/Contexts/CANSignalsContext.jsx
@@ -0,0 +1,89 @@
+import React, { useContext, useState } from "react";
+import { useEffect } from "react";
+
+import api from "../../services/vehiclesAPI";
+import { useUserContext } from "./UserContext";
+import { LocalDateTimeString } from "../../utils/dates";
+
+const CANSignalContext = React.createContext();
+
+const BlankSignal = (msg) => ({
+  timestamp: "",
+  signal: msg,
+  value: "",
+});
+
+const transformSignals = (signals) =>
+  signals
+    .map((signal) => {
+      const { Timestamp, ...Settings } = signal;
+      const keys = Object.keys(Settings);
+
+      return keys.map((key) => ({
+        timestamp: LocalDateTimeString(Timestamp),
+        signal: key,
+        value: Settings[key],
+      }));
+    })
+    .flat();
+
+export const CANSignalProvider = ({ children }) => {
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const [vin, setVIN] = useState(null);
+  const [signals, setSignals] = useState([]);
+  let delay = 500;
+
+  useEffect(() => {
+    getCANSignals();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vin]);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      getCANSignals();
+    }, delay);
+    return () => {
+      clearTimeout(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [signals]);
+
+  const getCANSignals = async () => {
+    try {
+      if (!vin) return;
+
+      const result = await api.getCANSignals(vin, token);
+      if (result.error)
+        throw new Error(`Get CAN signals error. ${result.message}`);
+
+      const items = transformSignals(result.data);
+
+      if (items.length > 0) {
+        delay = 500;
+        setSignals(items);
+      } else {
+        delay = 1000;
+        setSignals([BlankSignal("No signals")]);
+      }
+    } catch (e) {
+      setSignals([BlankSignal(e.message)]);
+    }
+  };
+
+  return (
+    <CANSignalContext.Provider
+      value={{
+        signals,
+        setVIN,
+      }}
+    >
+      {children}
+    </CANSignalContext.Provider>
+  );
+};
+
+export const useCANSignalContext = () => useContext(CANSignalContext);
diff --git a/src/components/DigitalTwin/index.js b/src/components/DigitalTwin/index.js
index d868d45..44f0090 100644
--- a/src/components/DigitalTwin/index.js
+++ b/src/components/DigitalTwin/index.js
@@ -18,6 +18,9 @@ const DigitalTwin = (props) => {
 
   return (
     <div>
+      {!battery && !doors && !location && !windows && (
+        <p>No vehicle data to display.</p>
+      )}
       {battery != null && keyValueTemplate("Battery", `${battery.percent}%`)}
       {doors != null && (
         <div className={classes.popupSection}>
diff --git a/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
index 142a363..c6ad998 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-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <span>
                         Name
@@ -85,19 +85,19 @@ exports[`FleetAddForm Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -111,7 +111,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -162,7 +162,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71 PrivateRadioButtonIcon-checked-73"
+                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
                       >
                         <svg
                           aria-hidden="true"
@@ -214,7 +214,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -265,7 +265,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -316,7 +316,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -367,7 +367,7 @@ exports[`FleetAddForm Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -468,10 +468,10 @@ exports[`FleetAddForm Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                       >
                         <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-67 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -553,10 +553,10 @@ exports[`FleetAddForm Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                     >
                       <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 046cf04..9d3d430 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-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <span>
                         Fleet Name
@@ -102,10 +102,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <span>
                         CAN ID
@@ -140,10 +140,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <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 d0feec8..f93a306 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-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <span>
                         Fleet Name
@@ -103,10 +103,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <span>
                         CAN ID
@@ -149,10 +149,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <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 56c2572..02f201a 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-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <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 3991a05..0422987 100644
--- a/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
@@ -15,7 +15,7 @@ exports[`FleetStatus Render 1`] = `
           class="makeStyles-paper-0 makeStyles-tableSize-0"
         >
           <div
-            class="MuiBox-root MuiBox-root-63 makeStyles-tableToolbar-0"
+            class="MuiBox-root MuiBox-root-64 makeStyles-tableToolbar-0"
           >
             <div
               class="MuiTabs-root"
@@ -85,7 +85,7 @@ exports[`FleetStatus Render 1`] = `
                   </button>
                 </div>
                 <span
-                  class="PrivateTabIndicator-root-64 PrivateTabIndicator-colorSecondary-66 MuiTabs-indicator"
+                  class="PrivateTabIndicator-root-65 PrivateTabIndicator-colorSecondary-67 MuiTabs-indicator"
                   style="left: 0px; width: 0px;"
                 />
               </div>
@@ -97,7 +97,7 @@ exports[`FleetStatus Render 1`] = `
             role="tabpanel"
           >
             <div
-              class="MuiBox-root MuiBox-root-68"
+              class="MuiBox-root MuiBox-root-69"
             >
               <div
                 class="makeStyles-paper-0 makeStyles-tableSize-0"
diff --git a/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
index 24169cd..6d14f03 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-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65"
+                      class="PrivateNotchedOutline-legendLabelled-66"
                     >
                       <span>
                         Name
@@ -87,19 +87,19 @@ exports[`FleetUpdate Render 1`] = `
                 >
                   <span
                     aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="trace"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -113,7 +113,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="debug"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -164,7 +164,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="info"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71 PrivateRadioButtonIcon-checked-73"
+                        class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
                       >
                         <svg
                           aria-hidden="true"
@@ -216,7 +216,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="warn"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -267,7 +267,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="error"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -318,7 +318,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         name="log-level-group"
                         type="radio"
                         value="critical"
                       />
                       <div
-                        class="PrivateRadioButtonIcon-root-71"
+                        class="PrivateRadioButtonIcon-root-72"
                       >
                         <svg
                           aria-hidden="true"
@@ -369,7 +369,7 @@ exports[`FleetUpdate Render 1`] = `
                         </svg>
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-72"
+                          class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
                           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-67 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
                         checked=""
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -470,10 +470,10 @@ exports[`FleetUpdate Render 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                        class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                       >
                         <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-67 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-68 Mui-checked MuiIconButton-colorSecondary"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
                   >
                     <span
                       class="MuiIconButton-label"
                     >
                       <input
-                        class="PrivateSwitchBase-input-70"
+                        class="PrivateSwitchBase-input-71"
                         data-indeterminate="false"
                         type="checkbox"
                         value=""
@@ -554,10 +554,10 @@ exports[`FleetUpdate Render 1`] = `
                   />
                   <fieldset
                     aria-hidden="true"
-                    class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                    class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                   >
                     <legend
-                      class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                      class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                     >
                       <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 c1b6e24..d3ecb44 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-63 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                   >
                     <span>
                       Contact
@@ -98,10 +98,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                   >
                     <span>
                       Company
@@ -144,10 +144,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                   >
                     <span>
                       Address
@@ -190,10 +190,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                   >
                     <span>
                       Telephone
@@ -236,10 +236,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                   >
                     <span>
                       Program
@@ -282,10 +282,10 @@ exports[`Supplier page Render 1`] = `
                 />
                 <fieldset
                   aria-hidden="true"
-                  class="PrivateNotchedOutline-root-63 MuiOutlinedInput-notchedOutline"
+                  class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
                 >
                   <legend
-                    class="PrivateNotchedOutline-legendLabelled-65 PrivateNotchedOutline-legendNotched-66"
+                    class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
                   >
                     <span>
                       ECUs
diff --git a/src/components/VehicleMap/popup.jsx b/src/components/VehicleMap/popup.jsx
index b990691..8cf387b 100644
--- a/src/components/VehicleMap/popup.jsx
+++ b/src/components/VehicleMap/popup.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import Dialog from "@material-ui/core/Dialog";
 import MuiDialogTitle from "@material-ui/core/DialogTitle";
 import IconButton from "@material-ui/core/IconButton";
@@ -7,31 +7,47 @@ import Typography from "@material-ui/core/Typography";
 
 import useStyles from "../useStyles";
 import DigitalTwin from "../DigitalTwin";
+import clsx from "clsx";
+import CANSignals from "../Cars/CANSignals";
 
 const VehiclePopUp = (props) => {
   const classes = useStyles();
-  const { vin, online, battery, doors, location, windows, onClose } = props;
+  const [viewCAN, setViewCAN] = useState(false);
+  const { vin, online, onClose } = props;
+
+  const toggleView = (e) => {
+    e.preventDefault();
+    setViewCAN(!viewCAN);
+  };
+
+  const close = (e) => {
+    setViewCAN(false);
+    onClose(e);
+  };
 
   return (
     <Dialog
       fullWidth
       classes={{ paper: classes.popUp }}
       open={true}
-      onClose={onClose}
+      onClose={close}
     >
       <DialogTitle align="center" onClose={onClose}>
         {vin}
+        {"  "}
+        <span
+          className={clsx(classes.pseudoLink, classes.breadcrumbs)}
+          onClick={toggleView}
+        >
+          {viewCAN ? "View Digital Twin" : "View CAN Signals"}
+        </span>
       </DialogTitle>
       <div align="center" className={classes.popUpContent}>
         <p>
           <b>Connected</b>: {online.toString()}
         </p>
-        {online && <DigitalTwin {...props} />}
-        {(!online ||
-          (battery == null &&
-            doors == null &&
-            location == null &&
-            windows == null)) && <p>No vehicle data to display.</p>}
+        {viewCAN && <CANSignals vin={vin} />}
+        {!viewCAN && <DigitalTwin {...props} />}
       </div>
     </Dialog>
   );
diff --git a/src/components/useStyles.jsx b/src/components/useStyles.jsx
index df12ed4..9e81aa7 100644
--- a/src/components/useStyles.jsx
+++ b/src/components/useStyles.jsx
@@ -201,6 +201,7 @@ const useStyles = makeStyles((theme) => ({
   },
   popUp: {
     minHeight: "15vh",
+    maxHeight: "50%",
   },
   popUpTitle: {
     margin: 0,
@@ -270,6 +271,11 @@ const useStyles = makeStyles((theme) => ({
     color: "Black",
   },
   overHighlight: { background: "green" },
+  pseudoLink: {
+    cursor: "pointer",
+    color: "blue",
+    textDecoration: "underline",
+  },
 }));
 
 export default useStyles;