From f273e25cf829ddee345b26274a8a18db2421b7ce Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Thu, 12 Aug 2021 17:51:40 -0700
Subject: [PATCH] CEC-381 Fix install progress (#77)

* Fix install progress

* Remove unused components and inline styles

* Update test

* errors are not the final update state

* Remove max width for main container

* Progress starts at 0
---
 .../App/__snapshots__/App.test.js.snap        | 702 ++++++++----------
 src/components/CarUpdates/Status/index.jsx    |   4 +-
 src/components/Cars/CarSelection/index.jsx    | 158 ----
 .../Cars/CarSelectionTable/index.jsx          |   2 +-
 src/components/Cars/SendCommand/index.jsx     |   4 +-
 src/components/Cars/SendCommandBulk/index.jsx |  10 +-
 src/components/Contexts/CarUpdatesContext.jsx |  77 +-
 src/components/Layouts/MenuDrawer.jsx         |   4 +-
 .../__snapshots__/SideMenu.test.jsx.snap      |   3 +-
 src/components/ListItemExternalLink.jsx       |  19 +-
 src/components/Manifest/Deploy/index.jsx      |   4 +-
 src/components/Manifest/List/index.jsx        |   8 +-
 src/components/Manifest/Status/index.jsx      |   4 +-
 .../__snapshots__/SSOForm.test.js.snap        |   3 +-
 src/components/SSOForm/index.jsx              |   2 +-
 src/components/useStyles.jsx                  |  26 +
 src/utils/statusMessage.js                    |  23 +
 src/utils/statusMessage.test.js               |  48 ++
 18 files changed, 489 insertions(+), 612 deletions(-)
 delete mode 100644 src/components/Cars/CarSelection/index.jsx
 create mode 100644 src/utils/statusMessage.js
 create mode 100644 src/utils/statusMessage.test.js

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 0d7a7a5..3def351 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -6,10 +6,10 @@ exports[`App Route / authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-625"
+      class="makeStyles-root-729"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-626 makeStyles-appBarShift-627 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-730 makeStyles-appBarShift-731 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -22,7 +22,7 @@ exports[`App Route / authenticated 1`] = `
             </h6>
           </div>
           <div
-            class="makeStyles-rightToolbar-636"
+            class="makeStyles-rightToolbar-740"
             color="inherit"
           >
             <button
@@ -45,17 +45,17 @@ exports[`App Route / authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-630"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-734"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-631 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-735 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-632 makeStyles-drawerHeaderLogo-633"
+            class="makeStyles-drawerHeader-736 makeStyles-drawerHeaderLogo-737"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-642"
+              class="makeStyles-logo-746"
               src="fisker-badge.svg"
             />
           </div>
@@ -239,11 +239,10 @@ exports[`App Route / authenticated 1`] = `
               <li>
                 <a
                   aria-disabled="false"
-                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-768 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
                   href="https://grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
-                  style="text-decoration: inherit;"
                   tabindex="0"
                   target="_blank"
                 >
@@ -266,16 +265,16 @@ exports[`App Route / authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-634 makeStyles-contentShift-635"
+        class="makeStyles-content-738 makeStyles-contentShift-739"
       >
         <div
-          class="makeStyles-drawerHeader-632"
+          class="makeStyles-drawerHeader-736"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-614"
+            class="makeStyles-paper-718"
           >
             <div
               data-testid="mocked-vehicleprovider"
@@ -424,8 +423,7 @@ exports[`App Route / unauthenticated 1`] = `
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-3"
-            style="justify-content: center;"
+            class="makeStyles-paper-3 makeStyles-textJustifyAlign-48"
           >
             <a
               aria-disabled="false"
@@ -456,10 +454,10 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-1013"
+      class="makeStyles-root-1181"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1014 makeStyles-appBarShift-1015 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1182 makeStyles-appBarShift-1183 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -472,7 +470,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
             </h6>
           </div>
           <div
-            class="makeStyles-rightToolbar-1024"
+            class="makeStyles-rightToolbar-1192"
             color="inherit"
           >
             <button
@@ -495,17 +493,17 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1018"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1186"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1019 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1187 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-1020 makeStyles-drawerHeaderLogo-1021"
+            class="makeStyles-drawerHeader-1188 makeStyles-drawerHeaderLogo-1189"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-1030"
+              class="makeStyles-logo-1198"
               src="fisker-badge.svg"
             />
           </div>
@@ -689,11 +687,10 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
               <li>
                 <a
                   aria-disabled="false"
-                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1220 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
                   href="https://grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
-                  style="text-decoration: inherit;"
                   tabindex="0"
                   target="_blank"
                 >
@@ -716,10 +713,10 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-1022 makeStyles-contentShift-1023"
+        class="makeStyles-content-1190 makeStyles-contentShift-1191"
       >
         <div
-          class="makeStyles-drawerHeader-1020"
+          class="makeStyles-drawerHeader-1188"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -731,11 +728,11 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
               data-testid="mocked-updatesprovider"
             >
               <div
-                class="makeStyles-paper-1002"
+                class="makeStyles-paper-1170"
               >
                 <form
                   action="{onSubmit}"
-                  class="makeStyles-form-1004"
+                  class="makeStyles-form-1172"
                   novalidate=""
                 >
                   <p
@@ -747,13 +744,13 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
                     Description
                   </p>
                   <div
-                    class="MuiGrid-root makeStyles-root-1013 MuiGrid-container MuiGrid-spacing-xs-2"
+                    class="MuiGrid-root makeStyles-root-1181 MuiGrid-container MuiGrid-spacing-xs-2"
                   >
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-10"
                     >
                       <div
-                        class="MuiFormControl-root makeStyles-margin-1027 makeStyles-textField-1028"
+                        class="MuiFormControl-root makeStyles-margin-1195 makeStyles-textField-1196"
                       >
                         <label
                           class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
@@ -803,7 +800,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
                         </div>
                       </div>
                       <div
-                        class="makeStyles-labelInline-1008"
+                        class="makeStyles-labelInline-1176"
                       >
                         0 Selected
                       </div>
@@ -813,7 +810,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
                       style="text-align: right;"
                     >
                       <button
-                        class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-formControl-1006 MuiButton-containedPrimary Mui-disabled MuiButton-fullWidth Mui-disabled"
+                        class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-formControl-1174 MuiButton-containedPrimary Mui-disabled MuiButton-fullWidth Mui-disabled"
                         disabled=""
                         tabindex="-1"
                         type="submit"
@@ -827,8 +824,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-paper-1002"
-                    style="height: 700px; width: 100%;"
+                    class="makeStyles-paper-1170 makeStyles-tableSize-1221"
                   >
                     <table
                       class="MuiTable-root"
@@ -845,14 +841,14 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
                           >
                             <span
                               aria-disabled="false"
-                              class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1047 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                              class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1223 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                             >
                               <span
                                 class="MuiIconButton-label"
                               >
                                 <input
                                   aria-label="select all desserts"
-                                  class="PrivateSwitchBase-input-1050"
+                                  class="PrivateSwitchBase-input-1226"
                                   data-indeterminate="false"
                                   type="checkbox"
                                   value=""
@@ -886,7 +882,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
                             >
                               VIN
                               <span
-                                class="makeStyles-hiddenSortSpan-1026"
+                                class="makeStyles-hiddenSortSpan-1194"
                               >
                                 sorted ascending
                               </span>
@@ -1166,10 +1162,10 @@ exports[`App Route /carupdate-deploy unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-155"
+      class="makeStyles-root-179"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-156 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-180 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -1182,21 +1178,20 @@ exports[`App Route /carupdate-deploy unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-164"
+        class="makeStyles-content-188"
       >
         <div
-          class="makeStyles-drawerHeader-162"
+          class="makeStyles-drawerHeader-186"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-144"
-            style="justify-content: center;"
+            class="makeStyles-paper-168 makeStyles-textJustifyAlign-213"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-147 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-171 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -1223,10 +1218,10 @@ exports[`App Route /carupdate-status authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-770"
+      class="makeStyles-root-898"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-771 makeStyles-appBarShift-772 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-899 makeStyles-appBarShift-900 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -1239,7 +1234,7 @@ exports[`App Route /carupdate-status authenticated 1`] = `
             </h6>
           </div>
           <div
-            class="makeStyles-rightToolbar-781"
+            class="makeStyles-rightToolbar-909"
             color="inherit"
           >
             <button
@@ -1262,17 +1257,17 @@ exports[`App Route /carupdate-status authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-775"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-903"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-776 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-904 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-777 makeStyles-drawerHeaderLogo-778"
+            class="makeStyles-drawerHeader-905 makeStyles-drawerHeaderLogo-906"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-787"
+              class="makeStyles-logo-915"
               src="fisker-badge.svg"
             />
           </div>
@@ -1456,11 +1451,10 @@ exports[`App Route /carupdate-status authenticated 1`] = `
               <li>
                 <a
                   aria-disabled="false"
-                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-937 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
                   href="https://grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
-                  style="text-decoration: inherit;"
                   tabindex="0"
                   target="_blank"
                 >
@@ -1483,10 +1477,10 @@ exports[`App Route /carupdate-status authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-779 makeStyles-contentShift-780"
+        class="makeStyles-content-907 makeStyles-contentShift-908"
       >
         <div
-          class="makeStyles-drawerHeader-777"
+          class="makeStyles-drawerHeader-905"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -1495,8 +1489,7 @@ exports[`App Route /carupdate-status authenticated 1`] = `
             data-testid="mocked-updatesprovider"
           >
             <div
-              class="makeStyles-paper-759"
-              style="height: 700px; width: 100%;"
+              class="makeStyles-paper-887 makeStyles-tableSize-938"
             >
               <table
                 class="MuiTable-root"
@@ -1683,10 +1676,10 @@ exports[`App Route /carupdate-status unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-202"
+      class="makeStyles-root-234"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-203 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-235 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -1699,21 +1692,20 @@ exports[`App Route /carupdate-status unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-211"
+        class="makeStyles-content-243"
       >
         <div
-          class="makeStyles-drawerHeader-209"
+          class="makeStyles-drawerHeader-241"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-191"
-            style="justify-content: center;"
+            class="makeStyles-paper-223 makeStyles-textJustifyAlign-268"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-194 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-226 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -1740,10 +1732,10 @@ exports[`App Route /datascope authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-1064"
+      class="makeStyles-root-1240"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1065 makeStyles-appBarShift-1066 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1241 makeStyles-appBarShift-1242 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -1756,7 +1748,7 @@ exports[`App Route /datascope authenticated 1`] = `
             </h6>
           </div>
           <div
-            class="makeStyles-rightToolbar-1075"
+            class="makeStyles-rightToolbar-1251"
             color="inherit"
           >
             <button
@@ -1779,17 +1771,17 @@ exports[`App Route /datascope authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1069"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1245"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1070 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1246 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-1071 makeStyles-drawerHeaderLogo-1072"
+            class="makeStyles-drawerHeader-1247 makeStyles-drawerHeaderLogo-1248"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-1081"
+              class="makeStyles-logo-1257"
               src="fisker-badge.svg"
             />
           </div>
@@ -1973,11 +1965,10 @@ exports[`App Route /datascope authenticated 1`] = `
               <li>
                 <a
                   aria-disabled="false"
-                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1279 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
                   href="https://grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
-                  style="text-decoration: inherit;"
                   tabindex="0"
                   target="_blank"
                 >
@@ -2000,34 +1991,34 @@ exports[`App Route /datascope authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-1073 makeStyles-contentShift-1074"
+        class="makeStyles-content-1249 makeStyles-contentShift-1250"
       >
         <div
-          class="makeStyles-drawerHeader-1071"
+          class="makeStyles-drawerHeader-1247"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-1053"
+            class="makeStyles-paper-1229"
           >
             <div
-              class="MuiGrid-root makeStyles-root-1064 MuiGrid-container MuiGrid-spacing-xs-2"
+              class="MuiGrid-root makeStyles-root-1240 MuiGrid-container MuiGrid-spacing-xs-2"
             >
               <div
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-6"
               >
                 <div
-                  class="MuiPaper-root makeStyles-grafanaContainer-1095 MuiPaper-elevation1 MuiPaper-rounded"
+                  class="MuiPaper-root makeStyles-grafanaContainer-1271 MuiPaper-elevation1 MuiPaper-rounded"
                   style="height: 150px;"
                 >
                   <h1
-                    class="makeStyles-datascopeContainerValue-1097"
+                    class="makeStyles-datascopeContainerValue-1273"
                   >
                     500
                   </h1>
                   <h2
-                    class="makeStyles-datascopeContainerText-1096"
+                    class="makeStyles-datascopeContainerText-1272"
                   >
                     Cars
                   </h2>
@@ -2037,16 +2028,16 @@ exports[`App Route /datascope authenticated 1`] = `
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-6"
               >
                 <div
-                  class="MuiPaper-root makeStyles-grafanaContainer-1095 MuiPaper-elevation1 MuiPaper-rounded"
+                  class="MuiPaper-root makeStyles-grafanaContainer-1271 MuiPaper-elevation1 MuiPaper-rounded"
                   style="height: 150px;"
                 >
                   <h1
-                    class="makeStyles-datascopeContainerValue-1097"
+                    class="makeStyles-datascopeContainerValue-1273"
                   >
                     1,234,567,890
                   </h1>
                   <h2
-                    class="makeStyles-datascopeContainerText-1096"
+                    class="makeStyles-datascopeContainerText-1272"
                   >
                     Signals Collected
                   </h2>
@@ -2056,10 +2047,10 @@ exports[`App Route /datascope authenticated 1`] = `
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-12"
               >
                 <div
-                  class="MuiPaper-root makeStyles-grafanaContainer-1095 MuiPaper-elevation1 MuiPaper-rounded"
+                  class="MuiPaper-root makeStyles-grafanaContainer-1271 MuiPaper-elevation1 MuiPaper-rounded"
                 >
                   <div
-                    class="makeStyles-embeddedWrapper-1083"
+                    class="makeStyles-embeddedWrapper-1259"
                   >
                     <iframe
                       frameborder="0"
@@ -2115,10 +2106,10 @@ exports[`App Route /datascope unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-343"
+      class="makeStyles-root-399"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-344 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-400 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -2131,21 +2122,20 @@ exports[`App Route /datascope unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-352"
+        class="makeStyles-content-408"
       >
         <div
-          class="makeStyles-drawerHeader-350"
+          class="makeStyles-drawerHeader-406"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-332"
-            style="justify-content: center;"
+            class="makeStyles-paper-388 makeStyles-textJustifyAlign-433"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-335 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-391 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -2172,10 +2162,10 @@ exports[`App Route /datascope/battery authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-1111"
+      class="makeStyles-root-1295"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1112 makeStyles-appBarShift-1113 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1296 makeStyles-appBarShift-1297 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -2224,7 +2214,7 @@ exports[`App Route /datascope/battery authenticated 1`] = `
             </nav>
           </div>
           <div
-            class="makeStyles-rightToolbar-1122"
+            class="makeStyles-rightToolbar-1306"
             color="inherit"
           >
             <button
@@ -2247,17 +2237,17 @@ exports[`App Route /datascope/battery authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1116"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1300"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1117 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1301 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-1118 makeStyles-drawerHeaderLogo-1119"
+            class="makeStyles-drawerHeader-1302 makeStyles-drawerHeaderLogo-1303"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-1128"
+              class="makeStyles-logo-1312"
               src="fisker-badge.svg"
             />
           </div>
@@ -2441,11 +2431,10 @@ exports[`App Route /datascope/battery authenticated 1`] = `
               <li>
                 <a
                   aria-disabled="false"
-                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1334 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
                   href="https://grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
-                  style="text-decoration: inherit;"
                   tabindex="0"
                   target="_blank"
                 >
@@ -2468,16 +2457,16 @@ exports[`App Route /datascope/battery authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-1120 makeStyles-contentShift-1121"
+        class="makeStyles-content-1304 makeStyles-contentShift-1305"
       >
         <div
-          class="makeStyles-drawerHeader-1118"
+          class="makeStyles-drawerHeader-1302"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-1100"
+            class="makeStyles-paper-1284"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2"
@@ -2490,10 +2479,10 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-12"
                 >
                   <div
-                    class="MuiPaper-root makeStyles-grafanaContainer-1142 MuiPaper-elevation1 MuiPaper-rounded"
+                    class="MuiPaper-root makeStyles-grafanaContainer-1326 MuiPaper-elevation1 MuiPaper-rounded"
                   >
                     <form
-                      class="makeStyles-formControl-1104"
+                      class="makeStyles-formControl-1288"
                     >
                       <div
                         class="MuiFormControl-root MuiTextField-root"
@@ -2519,10 +2508,10 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                           />
                           <fieldset
                             aria-hidden="true"
-                            class="PrivateNotchedOutline-root-1145 MuiOutlinedInput-notchedOutline"
+                            class="PrivateNotchedOutline-root-1337 MuiOutlinedInput-notchedOutline"
                           >
                             <legend
-                              class="PrivateNotchedOutline-legendLabelled-1147 PrivateNotchedOutline-legendNotched-1148"
+                              class="PrivateNotchedOutline-legendLabelled-1339 PrivateNotchedOutline-legendNotched-1340"
                             >
                               <span>
                                 VIN
@@ -2533,7 +2522,7 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                       </div>
                     </form>
                     <div
-                      class="MuiFormControl-root makeStyles-formControl-1104"
+                      class="MuiFormControl-root makeStyles-formControl-1288"
                     >
                       <label
                         class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
@@ -2573,10 +2562,10 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                         </svg>
                         <fieldset
                           aria-hidden="true"
-                          class="PrivateNotchedOutline-root-1145 MuiOutlinedInput-notchedOutline"
+                          class="PrivateNotchedOutline-root-1337 MuiOutlinedInput-notchedOutline"
                         >
                           <legend
-                            class="PrivateNotchedOutline-legendLabelled-1147 PrivateNotchedOutline-legendNotched-1148"
+                            class="PrivateNotchedOutline-legendLabelled-1339 PrivateNotchedOutline-legendNotched-1340"
                           >
                             <span>
                               Cell
@@ -2591,12 +2580,12 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-12"
                 >
                   <div
-                    class="MuiPaper-root makeStyles-grafanaContainer-1142 MuiPaper-elevation1 MuiPaper-rounded"
+                    class="MuiPaper-root makeStyles-grafanaContainer-1326 MuiPaper-elevation1 MuiPaper-rounded"
                   >
                     Cell Voltage 
                     1
                     <div
-                      class="makeStyles-embeddedWrapper-1130"
+                      class="makeStyles-embeddedWrapper-1314"
                     >
                       <iframe
                         frameborder="0"
@@ -2611,12 +2600,12 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-12"
                 >
                   <div
-                    class="MuiPaper-root makeStyles-grafanaContainer-1142 MuiPaper-elevation1 MuiPaper-rounded"
+                    class="MuiPaper-root makeStyles-grafanaContainer-1326 MuiPaper-elevation1 MuiPaper-rounded"
                   >
                     Cell Temperature 
                     1
                     <div
-                      class="makeStyles-embeddedWrapper-1130"
+                      class="makeStyles-embeddedWrapper-1314"
                     >
                       <iframe
                         frameborder="0"
@@ -2631,10 +2620,10 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-12"
                 >
                   <div
-                    class="MuiPaper-root makeStyles-grafanaContainer-1142 MuiPaper-elevation1 MuiPaper-rounded"
+                    class="MuiPaper-root makeStyles-grafanaContainer-1326 MuiPaper-elevation1 MuiPaper-rounded"
                   >
                     <div
-                      class="makeStyles-embeddedWrapper-1130"
+                      class="makeStyles-embeddedWrapper-1314"
                     >
                       <iframe
                         frameborder="0"
@@ -2654,10 +2643,10 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-12"
                 >
                   <div
-                    class="MuiPaper-root makeStyles-grafanaContainer-1142 MuiPaper-elevation1 MuiPaper-rounded"
+                    class="MuiPaper-root makeStyles-grafanaContainer-1326 MuiPaper-elevation1 MuiPaper-rounded"
                   >
                     <div
-                      class="makeStyles-embeddedWrapper-1130"
+                      class="makeStyles-embeddedWrapper-1314"
                     >
                       <iframe
                         frameborder="0"
@@ -2672,10 +2661,10 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-12"
                 >
                   <div
-                    class="MuiPaper-root makeStyles-grafanaContainer-1142 MuiPaper-elevation1 MuiPaper-rounded"
+                    class="MuiPaper-root makeStyles-grafanaContainer-1326 MuiPaper-elevation1 MuiPaper-rounded"
                   >
                     <div
-                      class="makeStyles-embeddedWrapper-1130"
+                      class="makeStyles-embeddedWrapper-1314"
                     >
                       <iframe
                         frameborder="0"
@@ -2690,10 +2679,10 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-6"
                 >
                   <div
-                    class="MuiPaper-root makeStyles-grafanaContainer-1142 MuiPaper-elevation1 MuiPaper-rounded"
+                    class="MuiPaper-root makeStyles-grafanaContainer-1326 MuiPaper-elevation1 MuiPaper-rounded"
                   >
                     <div
-                      class="makeStyles-embeddedWrapper-1130"
+                      class="makeStyles-embeddedWrapper-1314"
                     >
                       <iframe
                         frameborder="0"
@@ -2708,10 +2697,10 @@ exports[`App Route /datascope/battery authenticated 1`] = `
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-6"
                 >
                   <div
-                    class="MuiPaper-root makeStyles-grafanaContainer-1142 MuiPaper-elevation1 MuiPaper-rounded"
+                    class="MuiPaper-root makeStyles-grafanaContainer-1326 MuiPaper-elevation1 MuiPaper-rounded"
                   >
                     <div
-                      class="makeStyles-embeddedWrapper-1130"
+                      class="makeStyles-embeddedWrapper-1314"
                     >
                       <iframe
                         frameborder="0"
@@ -2738,10 +2727,10 @@ exports[`App Route /datascope/battery unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-390"
+      class="makeStyles-root-454"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-391 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-455 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -2754,21 +2743,20 @@ exports[`App Route /datascope/battery unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-399"
+        class="makeStyles-content-463"
       >
         <div
-          class="makeStyles-drawerHeader-397"
+          class="makeStyles-drawerHeader-461"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-379"
-            style="justify-content: center;"
+            class="makeStyles-paper-443 makeStyles-textJustifyAlign-488"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-382 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-446 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -2795,10 +2783,10 @@ exports[`App Route /home authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-672"
+      class="makeStyles-root-784"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-673 makeStyles-appBarShift-674 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-785 makeStyles-appBarShift-786 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -2811,7 +2799,7 @@ exports[`App Route /home authenticated 1`] = `
             </h6>
           </div>
           <div
-            class="makeStyles-rightToolbar-683"
+            class="makeStyles-rightToolbar-795"
             color="inherit"
           >
             <button
@@ -2834,17 +2822,17 @@ exports[`App Route /home authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-677"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-789"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-678 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-790 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-679 makeStyles-drawerHeaderLogo-680"
+            class="makeStyles-drawerHeader-791 makeStyles-drawerHeaderLogo-792"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-689"
+              class="makeStyles-logo-801"
               src="fisker-badge.svg"
             />
           </div>
@@ -3028,11 +3016,10 @@ exports[`App Route /home authenticated 1`] = `
               <li>
                 <a
                   aria-disabled="false"
-                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-823 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
                   href="https://grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
-                  style="text-decoration: inherit;"
                   tabindex="0"
                   target="_blank"
                 >
@@ -3055,16 +3042,16 @@ exports[`App Route /home authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-681 makeStyles-contentShift-682"
+        class="makeStyles-content-793 makeStyles-contentShift-794"
       >
         <div
-          class="makeStyles-drawerHeader-679"
+          class="makeStyles-drawerHeader-791"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-661"
+            class="makeStyles-paper-773"
           >
             <div
               data-testid="mocked-vehicleprovider"
@@ -3188,10 +3175,10 @@ exports[`App Route /home unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-61"
+      class="makeStyles-root-69"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-62 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-70 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -3204,21 +3191,20 @@ exports[`App Route /home unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-70"
+        class="makeStyles-content-78"
       >
         <div
-          class="makeStyles-drawerHeader-68"
+          class="makeStyles-drawerHeader-76"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-50"
-            style="justify-content: center;"
+            class="makeStyles-paper-58 makeStyles-textJustifyAlign-103"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-53 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-61 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -3245,10 +3231,10 @@ exports[`App Route /package-create authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-1307"
+      class="makeStyles-root-1523"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1308 makeStyles-appBarShift-1309 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1524 makeStyles-appBarShift-1525 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -3297,7 +3283,7 @@ exports[`App Route /package-create authenticated 1`] = `
             </nav>
           </div>
           <div
-            class="makeStyles-rightToolbar-1318"
+            class="makeStyles-rightToolbar-1534"
             color="inherit"
           >
             <button
@@ -3320,17 +3306,17 @@ exports[`App Route /package-create authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1312"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1528"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1313 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1529 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-1314 makeStyles-drawerHeaderLogo-1315"
+            class="makeStyles-drawerHeader-1530 makeStyles-drawerHeaderLogo-1531"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-1324"
+              class="makeStyles-logo-1540"
               src="fisker-badge.svg"
             />
           </div>
@@ -3514,11 +3500,10 @@ exports[`App Route /package-create authenticated 1`] = `
               <li>
                 <a
                   aria-disabled="false"
-                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1562 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
                   href="https://grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
-                  style="text-decoration: inherit;"
                   tabindex="0"
                   target="_blank"
                 >
@@ -3541,10 +3526,10 @@ exports[`App Route /package-create authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-1316 makeStyles-contentShift-1317"
+        class="makeStyles-content-1532 makeStyles-contentShift-1533"
       >
         <div
-          class="makeStyles-drawerHeader-1314"
+          class="makeStyles-drawerHeader-1530"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -3553,11 +3538,11 @@ exports[`App Route /package-create authenticated 1`] = `
             data-testid="mocked-manifestsprovider"
           >
             <div
-              class="makeStyles-paper-1296"
+              class="makeStyles-paper-1512"
             >
               <form
                 action="{onSubmit}"
-                class="makeStyles-form-1298"
+                class="makeStyles-form-1514"
                 novalidate=""
               >
                 <div
@@ -3593,10 +3578,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1341 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1565 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1343"
+                        class="PrivateNotchedOutline-legendLabelled-1567"
                       >
                         <span>
                           Package name
@@ -3639,10 +3624,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1341 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1565 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1343"
+                        class="PrivateNotchedOutline-legendLabelled-1567"
                       >
                         <span>
                           Version
@@ -3685,10 +3670,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1341 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1565 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1343"
+                        class="PrivateNotchedOutline-legendLabelled-1567"
                       >
                         <span>
                           Description
@@ -3732,10 +3717,10 @@ exports[`App Route /package-create authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-1341 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-1565 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-1343"
+                        class="PrivateNotchedOutline-legendLabelled-1567"
                       >
                         <span>
                           Release Notes URL
@@ -3832,7 +3817,7 @@ exports[`App Route /package-create authenticated 1`] = `
                   </div>
                 </div>
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-1299 MuiButton-containedPrimary MuiButton-fullWidth"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-1515 MuiButton-containedPrimary MuiButton-fullWidth"
                   tabindex="0"
                   type="submit"
                 >
@@ -3861,10 +3846,10 @@ exports[`App Route /package-create unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-578"
+      class="makeStyles-root-674"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-579 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-675 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -3877,21 +3862,20 @@ exports[`App Route /package-create unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-587"
+        class="makeStyles-content-683"
       >
         <div
-          class="makeStyles-drawerHeader-585"
+          class="makeStyles-drawerHeader-681"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-567"
-            style="justify-content: center;"
+            class="makeStyles-paper-663 makeStyles-textJustifyAlign-708"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-570 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-666 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -3918,10 +3902,10 @@ exports[`App Route /package-deploy authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-1256"
+      class="makeStyles-root-1464"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1257 makeStyles-appBarShift-1258 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1465 makeStyles-appBarShift-1466 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -3970,7 +3954,7 @@ exports[`App Route /package-deploy authenticated 1`] = `
             </nav>
           </div>
           <div
-            class="makeStyles-rightToolbar-1267"
+            class="makeStyles-rightToolbar-1475"
             color="inherit"
           >
             <button
@@ -3993,17 +3977,17 @@ exports[`App Route /package-deploy authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1261"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1469"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1262 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1470 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-1263 makeStyles-drawerHeaderLogo-1264"
+            class="makeStyles-drawerHeader-1471 makeStyles-drawerHeaderLogo-1472"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-1273"
+              class="makeStyles-logo-1481"
               src="fisker-badge.svg"
             />
           </div>
@@ -4187,11 +4171,10 @@ exports[`App Route /package-deploy authenticated 1`] = `
               <li>
                 <a
                   aria-disabled="false"
-                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1503 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
                   href="https://grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
-                  style="text-decoration: inherit;"
                   tabindex="0"
                   target="_blank"
                 >
@@ -4214,10 +4197,10 @@ exports[`App Route /package-deploy authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-1265 makeStyles-contentShift-1266"
+        class="makeStyles-content-1473 makeStyles-contentShift-1474"
       >
         <div
-          class="makeStyles-drawerHeader-1263"
+          class="makeStyles-drawerHeader-1471"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -4232,11 +4215,11 @@ exports[`App Route /package-deploy authenticated 1`] = `
                 data-testid="mocked-carupdatesprovider"
               >
                 <div
-                  class="makeStyles-paper-1245"
+                  class="makeStyles-paper-1453"
                 >
                   <form
                     action="{onSubmit}"
-                    class="makeStyles-form-1247"
+                    class="makeStyles-form-1455"
                     novalidate=""
                   >
                     <p
@@ -4247,23 +4230,22 @@ exports[`App Route /package-deploy authenticated 1`] = `
                       .
                     </p>
                     <div
-                      class="MuiGrid-root makeStyles-root-1256 MuiGrid-container MuiGrid-spacing-xs-2"
+                      class="MuiGrid-root makeStyles-root-1464 MuiGrid-container MuiGrid-spacing-xs-2"
                     >
                       <div
                         class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-2"
                       >
                         <div
-                          class="makeStyles-labelInline-1251"
+                          class="makeStyles-labelInline-1459"
                         >
                           0 Selected
                         </div>
                       </div>
                       <div
-                        class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-8"
-                        style="text-align: center;"
+                        class="MuiGrid-root makeStyles-textCenterAlign-1499 MuiGrid-item MuiGrid-grid-md-8"
                       >
                         <div
-                          class="MuiFormControl-root makeStyles-margin-1270 makeStyles-textField-1271"
+                          class="MuiFormControl-root makeStyles-margin-1478 makeStyles-textField-1479"
                         >
                           <label
                             class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
@@ -4314,11 +4296,10 @@ exports[`App Route /package-deploy authenticated 1`] = `
                         </div>
                       </div>
                       <div
-                        class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-2"
-                        style="text-align: right;"
+                        class="MuiGrid-root makeStyles-textRightAlign-1500 MuiGrid-item MuiGrid-grid-md-2"
                       >
                         <button
-                          class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-formControl-1249 MuiButton-containedPrimary Mui-disabled Mui-disabled"
+                          class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-formControl-1457 MuiButton-containedPrimary Mui-disabled Mui-disabled"
                           disabled=""
                           tabindex="-1"
                           type="submit"
@@ -4332,8 +4313,7 @@ exports[`App Route /package-deploy authenticated 1`] = `
                       </div>
                     </div>
                     <div
-                      class="makeStyles-paper-1245"
-                      style="height: 700px; width: 100%;"
+                      class="makeStyles-paper-1453 makeStyles-tableSize-1504"
                     >
                       <table
                         class="MuiTable-root"
@@ -4350,14 +4330,14 @@ exports[`App Route /package-deploy authenticated 1`] = `
                             >
                               <span
                                 aria-disabled="false"
-                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1290 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1506 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                               >
                                 <span
                                   class="MuiIconButton-label"
                                 >
                                   <input
                                     aria-label="select all desserts"
-                                    class="PrivateSwitchBase-input-1293"
+                                    class="PrivateSwitchBase-input-1509"
                                     data-indeterminate="false"
                                     type="checkbox"
                                     value=""
@@ -4391,7 +4371,7 @@ exports[`App Route /package-deploy authenticated 1`] = `
                               >
                                 VIN
                                 <span
-                                  class="makeStyles-hiddenSortSpan-1269"
+                                  class="makeStyles-hiddenSortSpan-1477"
                                 >
                                   sorted ascending
                                 </span>
@@ -4672,10 +4652,10 @@ exports[`App Route /package-deploy unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-531"
+      class="makeStyles-root-619"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-532 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-620 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -4688,21 +4668,20 @@ exports[`App Route /package-deploy unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-540"
+        class="makeStyles-content-628"
       >
         <div
-          class="makeStyles-drawerHeader-538"
+          class="makeStyles-drawerHeader-626"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-520"
-            style="justify-content: center;"
+            class="makeStyles-paper-608 makeStyles-textJustifyAlign-653"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-523 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-611 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -4729,10 +4708,10 @@ exports[`App Route /package-status authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-1209"
+      class="makeStyles-root-1409"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1210 makeStyles-appBarShift-1211 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1410 makeStyles-appBarShift-1411 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -4781,7 +4760,7 @@ exports[`App Route /package-status authenticated 1`] = `
             </nav>
           </div>
           <div
-            class="makeStyles-rightToolbar-1220"
+            class="makeStyles-rightToolbar-1420"
             color="inherit"
           >
             <button
@@ -4804,17 +4783,17 @@ exports[`App Route /package-status authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1214"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1414"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1215 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1415 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-1216 makeStyles-drawerHeaderLogo-1217"
+            class="makeStyles-drawerHeader-1416 makeStyles-drawerHeaderLogo-1417"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-1226"
+              class="makeStyles-logo-1426"
               src="fisker-badge.svg"
             />
           </div>
@@ -4998,11 +4977,10 @@ exports[`App Route /package-status authenticated 1`] = `
               <li>
                 <a
                   aria-disabled="false"
-                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1448 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
                   href="https://grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
-                  style="text-decoration: inherit;"
                   tabindex="0"
                   target="_blank"
                 >
@@ -5025,10 +5003,10 @@ exports[`App Route /package-status authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-1218 makeStyles-contentShift-1219"
+        class="makeStyles-content-1418 makeStyles-contentShift-1419"
       >
         <div
-          class="makeStyles-drawerHeader-1216"
+          class="makeStyles-drawerHeader-1416"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -5040,8 +5018,7 @@ exports[`App Route /package-status authenticated 1`] = `
               data-testid="mocked-carupdatesprovider"
             >
               <div
-                class="makeStyles-paper-1198"
-                style="height: 700px; width: 100%;"
+                class="makeStyles-paper-1398 makeStyles-tableSize-1449"
               >
                 <table
                   class="MuiTable-root"
@@ -5263,10 +5240,10 @@ exports[`App Route /package-status unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-484"
+      class="makeStyles-root-564"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-485 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-565 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -5279,21 +5256,20 @@ exports[`App Route /package-status unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-493"
+        class="makeStyles-content-573"
       >
         <div
-          class="makeStyles-drawerHeader-491"
+          class="makeStyles-drawerHeader-571"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-473"
-            style="justify-content: center;"
+            class="makeStyles-paper-553 makeStyles-textJustifyAlign-598"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-476 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-556 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -5320,10 +5296,10 @@ exports[`App Route /packages authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-1162"
+      class="makeStyles-root-1354"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1163 makeStyles-appBarShift-1164 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1355 makeStyles-appBarShift-1356 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -5336,7 +5312,7 @@ exports[`App Route /packages authenticated 1`] = `
             </h6>
           </div>
           <div
-            class="makeStyles-rightToolbar-1173"
+            class="makeStyles-rightToolbar-1365"
             color="inherit"
           >
             <button
@@ -5359,17 +5335,17 @@ exports[`App Route /packages authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1167"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1359"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1168 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1360 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-1169 makeStyles-drawerHeaderLogo-1170"
+            class="makeStyles-drawerHeader-1361 makeStyles-drawerHeaderLogo-1362"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-1179"
+              class="makeStyles-logo-1371"
               src="fisker-badge.svg"
             />
           </div>
@@ -5553,11 +5529,10 @@ exports[`App Route /packages authenticated 1`] = `
               <li>
                 <a
                   aria-disabled="false"
-                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1393 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
                   href="https://grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
-                  style="text-decoration: inherit;"
                   tabindex="0"
                   target="_blank"
                 >
@@ -5580,10 +5555,10 @@ exports[`App Route /packages authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-1171 makeStyles-contentShift-1172"
+        class="makeStyles-content-1363 makeStyles-contentShift-1364"
       >
         <div
-          class="makeStyles-drawerHeader-1169"
+          class="makeStyles-drawerHeader-1361"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -5592,18 +5567,16 @@ exports[`App Route /packages authenticated 1`] = `
             data-testid="mocked-manifestsprovider"
           >
             <div
-              class="makeStyles-paper-1151"
-              style="height: 700px; width: 100%;"
+              class="makeStyles-paper-1343 makeStyles-tableSize-1394"
             >
               <div
-                class="MuiGrid-root makeStyles-root-1162 MuiGrid-container MuiGrid-spacing-xs-2"
+                class="MuiGrid-root makeStyles-root-1354 MuiGrid-container MuiGrid-spacing-xs-2"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-4"
-                  style="text-align: justify;"
+                  class="MuiGrid-root makeStyles-textJustifyAlign-1388 MuiGrid-item MuiGrid-grid-md-4"
                 >
                   <a
-                    class="makeStyles-labelInline-1157"
+                    class="makeStyles-labelInline-1349"
                     href="/package-create"
                   >
                     <svg
@@ -5619,11 +5592,10 @@ exports[`App Route /packages authenticated 1`] = `
                   </a>
                 </div>
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-4"
-                  style="text-align: center;"
+                  class="MuiGrid-root makeStyles-textCenterAlign-1389 MuiGrid-item MuiGrid-grid-md-4"
                 >
                   <div
-                    class="MuiFormControl-root makeStyles-margin-1176 makeStyles-textField-1177"
+                    class="MuiFormControl-root makeStyles-margin-1368 makeStyles-textField-1369"
                   >
                     <label
                       class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
@@ -5674,8 +5646,7 @@ exports[`App Route /packages authenticated 1`] = `
                   </div>
                 </div>
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-4"
-                  style="text-align: right;"
+                  class="MuiGrid-root makeStyles-textRightAlign-1390 MuiGrid-item MuiGrid-grid-md-4"
                 />
               </div>
               <table
@@ -5700,7 +5671,7 @@ exports[`App Route /packages authenticated 1`] = `
                       >
                         ID
                         <span
-                          class="makeStyles-hiddenSortSpan-1175"
+                          class="makeStyles-hiddenSortSpan-1367"
                         >
                           sorted ascending
                         </span>
@@ -6047,10 +6018,10 @@ exports[`App Route /packages unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-437"
+      class="makeStyles-root-509"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-438 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-510 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -6063,21 +6034,20 @@ exports[`App Route /packages unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-446"
+        class="makeStyles-content-518"
       >
         <div
-          class="makeStyles-drawerHeader-444"
+          class="makeStyles-drawerHeader-516"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-426"
-            style="justify-content: center;"
+            class="makeStyles-paper-498 makeStyles-textJustifyAlign-543"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-429 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-501 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -6104,10 +6074,10 @@ exports[`App Route /page-not-found authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-966"
+      class="makeStyles-root-1126"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-967 makeStyles-appBarShift-968 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1127 makeStyles-appBarShift-1128 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -6118,7 +6088,7 @@ exports[`App Route /page-not-found authenticated 1`] = `
             />
           </div>
           <div
-            class="makeStyles-rightToolbar-977"
+            class="makeStyles-rightToolbar-1137"
             color="inherit"
           >
             <button
@@ -6141,17 +6111,17 @@ exports[`App Route /page-not-found authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-971"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1131"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-972 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1132 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-973 makeStyles-drawerHeaderLogo-974"
+            class="makeStyles-drawerHeader-1133 makeStyles-drawerHeaderLogo-1134"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-983"
+              class="makeStyles-logo-1143"
               src="fisker-badge.svg"
             />
           </div>
@@ -6335,11 +6305,10 @@ exports[`App Route /page-not-found authenticated 1`] = `
               <li>
                 <a
                   aria-disabled="false"
-                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1165 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
                   href="https://grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
-                  style="text-decoration: inherit;"
                   tabindex="0"
                   target="_blank"
                 >
@@ -6362,16 +6331,16 @@ exports[`App Route /page-not-found authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-975 makeStyles-contentShift-976"
+        class="makeStyles-content-1135 makeStyles-contentShift-1136"
       >
         <div
-          class="makeStyles-drawerHeader-973"
+          class="makeStyles-drawerHeader-1133"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-955"
+            class="makeStyles-paper-1115"
           >
             <h1
               class="MuiTypography-root MuiTypography-h2"
@@ -6392,10 +6361,10 @@ exports[`App Route /page-not-found unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-919"
+      class="makeStyles-root-1071"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-920 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1072 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -6408,16 +6377,16 @@ exports[`App Route /page-not-found unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-928"
+        class="makeStyles-content-1080"
       >
         <div
-          class="makeStyles-drawerHeader-926"
+          class="makeStyles-drawerHeader-1078"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-908"
+            class="makeStyles-paper-1060"
           >
             <h1
               class="MuiTypography-root MuiTypography-h2"
@@ -6438,10 +6407,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-719"
+      class="makeStyles-root-839"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-720 makeStyles-appBarShift-721 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-840 makeStyles-appBarShift-841 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -6490,7 +6459,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
             </nav>
           </div>
           <div
-            class="makeStyles-rightToolbar-730"
+            class="makeStyles-rightToolbar-850"
             color="inherit"
           >
             <button
@@ -6513,17 +6482,17 @@ exports[`App Route /vehicle-add authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-724"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-844"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-725 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-845 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-726 makeStyles-drawerHeaderLogo-727"
+            class="makeStyles-drawerHeader-846 makeStyles-drawerHeaderLogo-847"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-736"
+              class="makeStyles-logo-856"
               src="fisker-badge.svg"
             />
           </div>
@@ -6707,11 +6676,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
               <li>
                 <a
                   aria-disabled="false"
-                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-878 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
                   href="https://grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
-                  style="text-decoration: inherit;"
                   tabindex="0"
                   target="_blank"
                 >
@@ -6734,10 +6702,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-728 makeStyles-contentShift-729"
+        class="makeStyles-content-848 makeStyles-contentShift-849"
       >
         <div
-          class="makeStyles-drawerHeader-726"
+          class="makeStyles-drawerHeader-846"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -6746,11 +6714,11 @@ exports[`App Route /vehicle-add authenticated 1`] = `
             data-testid="mocked-vehicleprovider"
           >
             <div
-              class="makeStyles-paper-708"
+              class="makeStyles-paper-828"
             >
               <form
                 action="{onSubmit}"
-                class="makeStyles-form-710"
+                class="makeStyles-form-830"
                 novalidate=""
               >
                 <div
@@ -6786,10 +6754,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-753 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-881 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-755"
+                        class="PrivateNotchedOutline-legendLabelled-883"
                       >
                         <span>
                           VIN
@@ -6832,10 +6800,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-753 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-881 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-755 PrivateNotchedOutline-legendNotched-756"
+                        class="PrivateNotchedOutline-legendLabelled-883 PrivateNotchedOutline-legendNotched-884"
                       >
                         <span>
                           Model
@@ -6879,10 +6847,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-753 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-881 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-755 PrivateNotchedOutline-legendNotched-756"
+                        class="PrivateNotchedOutline-legendLabelled-883 PrivateNotchedOutline-legendNotched-884"
                       >
                         <span>
                           Year
@@ -6926,10 +6894,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-753 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-881 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-755 PrivateNotchedOutline-legendNotched-756"
+                        class="PrivateNotchedOutline-legendLabelled-883 PrivateNotchedOutline-legendNotched-884"
                       >
                         <span>
                           Trim
@@ -6940,7 +6908,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   </div>
                 </div>
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-711 MuiButton-containedPrimary MuiButton-fullWidth"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-831 MuiButton-containedPrimary MuiButton-fullWidth"
                   tabindex="0"
                   type="submit"
                 >
@@ -6969,10 +6937,10 @@ exports[`App Route /vehicle-add unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-108"
+      class="makeStyles-root-124"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-109 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-125 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -6985,21 +6953,20 @@ exports[`App Route /vehicle-add unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-117"
+        class="makeStyles-content-133"
       >
         <div
-          class="makeStyles-drawerHeader-115"
+          class="makeStyles-drawerHeader-131"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-97"
-            style="justify-content: center;"
+            class="makeStyles-paper-113 makeStyles-textJustifyAlign-158"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-100 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-116 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -7026,10 +6993,10 @@ exports[`App Route /vehicle-status authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-872"
+      class="makeStyles-root-1016"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-873 makeStyles-appBarShift-874 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-1017 makeStyles-appBarShift-1018 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -7078,7 +7045,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
             </nav>
           </div>
           <div
-            class="makeStyles-rightToolbar-883"
+            class="makeStyles-rightToolbar-1027"
             color="inherit"
           >
             <button
@@ -7101,17 +7068,17 @@ exports[`App Route /vehicle-status authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-877"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-1021"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-878 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-1022 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-879 makeStyles-drawerHeaderLogo-880"
+            class="makeStyles-drawerHeader-1023 makeStyles-drawerHeaderLogo-1024"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-889"
+              class="makeStyles-logo-1033"
               src="fisker-badge.svg"
             />
           </div>
@@ -7295,11 +7262,10 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               <li>
                 <a
                   aria-disabled="false"
-                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-1055 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
                   href="https://grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
-                  style="text-decoration: inherit;"
                   tabindex="0"
                   target="_blank"
                 >
@@ -7322,10 +7288,10 @@ exports[`App Route /vehicle-status authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-881 makeStyles-contentShift-882"
+        class="makeStyles-content-1025 makeStyles-contentShift-1026"
       >
         <div
-          class="makeStyles-drawerHeader-879"
+          class="makeStyles-drawerHeader-1023"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -7337,7 +7303,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               data-testid="mocked-updatesprovider"
             >
               <div
-                class="makeStyles-paper-861"
+                class="makeStyles-paper-1005"
                 style="height: 700px; width: 100%;"
               >
                 <table
@@ -7362,7 +7328,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                         >
                           ID
                           <span
-                            class="makeStyles-hiddenSortSpan-885"
+                            class="makeStyles-hiddenSortSpan-1029"
                           >
                             sorted descending
                           </span>
@@ -7617,10 +7583,10 @@ exports[`App Route /vehicle-status unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-296"
+      class="makeStyles-root-344"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-297 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-345 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -7633,21 +7599,20 @@ exports[`App Route /vehicle-status unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-305"
+        class="makeStyles-content-353"
       >
         <div
-          class="makeStyles-drawerHeader-303"
+          class="makeStyles-drawerHeader-351"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-285"
-            style="justify-content: center;"
+            class="makeStyles-paper-333 makeStyles-textJustifyAlign-378"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-288 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-336 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -7674,10 +7639,10 @@ exports[`App Route /vehicles authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-817"
+      class="makeStyles-root-953"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-818 makeStyles-appBarShift-819 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-954 makeStyles-appBarShift-955 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -7690,7 +7655,7 @@ exports[`App Route /vehicles authenticated 1`] = `
             </h6>
           </div>
           <div
-            class="makeStyles-rightToolbar-828"
+            class="makeStyles-rightToolbar-964"
             color="inherit"
           >
             <button
@@ -7713,17 +7678,17 @@ exports[`App Route /vehicles authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-822"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-958"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-823 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-959 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-824 makeStyles-drawerHeaderLogo-825"
+            class="makeStyles-drawerHeader-960 makeStyles-drawerHeaderLogo-961"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-834"
+              class="makeStyles-logo-970"
               src="fisker-badge.svg"
             />
           </div>
@@ -7907,11 +7872,10 @@ exports[`App Route /vehicles authenticated 1`] = `
               <li>
                 <a
                   aria-disabled="false"
-                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+                  class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-992 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
                   href="https://grafana.fiskerdps.com"
                   rel="noopener"
                   role="button"
-                  style="text-decoration: inherit;"
                   tabindex="0"
                   target="_blank"
                 >
@@ -7934,10 +7898,10 @@ exports[`App Route /vehicles authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-826 makeStyles-contentShift-827"
+        class="makeStyles-content-962 makeStyles-contentShift-963"
       >
         <div
-          class="makeStyles-drawerHeader-824"
+          class="makeStyles-drawerHeader-960"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -7946,15 +7910,13 @@ exports[`App Route /vehicles authenticated 1`] = `
             data-testid="mocked-vehicleprovider"
           >
             <div
-              class="makeStyles-paper-806"
-              style="height: 700px; width: 100%;"
+              class="makeStyles-paper-942 makeStyles-tableSize-993"
             >
               <div
-                class="MuiGrid-root makeStyles-root-817 MuiGrid-container MuiGrid-spacing-xs-2"
+                class="MuiGrid-root makeStyles-root-953 MuiGrid-container MuiGrid-spacing-xs-2"
               >
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-4"
-                  style="text-align: justify;"
+                  class="MuiGrid-root makeStyles-textJustifyAlign-987 MuiGrid-item MuiGrid-grid-md-4"
                 >
                   <a
                     href="/vehicle-add"
@@ -7971,17 +7933,16 @@ exports[`App Route /vehicles authenticated 1`] = `
                     </svg>
                   </a>
                   <div
-                    class="makeStyles-labelInline-812"
+                    class="makeStyles-labelInline-948"
                   >
                     0 Selected
                   </div>
                 </div>
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-4"
-                  style="text-align: center;"
+                  class="MuiGrid-root makeStyles-textCenterAlign-988 MuiGrid-item MuiGrid-grid-md-4"
                 >
                   <div
-                    class="MuiFormControl-root makeStyles-margin-831 makeStyles-textField-832"
+                    class="MuiFormControl-root makeStyles-margin-967 makeStyles-textField-968"
                   >
                     <label
                       class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
@@ -8032,21 +7993,19 @@ exports[`App Route /vehicles authenticated 1`] = `
                   </div>
                 </div>
                 <div
-                  class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-4"
-                  style="text-align: right;"
+                  class="MuiGrid-root makeStyles-textRightAlign-989 MuiGrid-item MuiGrid-grid-md-4"
                 >
                   <div
-                    class="makeStyles-form-808"
+                    class="makeStyles-form-944"
                     style="margin-top: 20px;"
                   >
                     <div
-                      class="MuiFormControl-root makeStyles-formControlInline-811"
+                      class="MuiFormControl-root makeStyles-formControlInline-947"
                     >
                       <label
-                        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled"
+                        class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-994 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled"
                         data-shrink="true"
                         for="send-command"
-                        style="background-color: White;"
                       >
                         Command
                       </label>
@@ -8102,11 +8061,11 @@ exports[`App Route /vehicles authenticated 1`] = `
                         </svg>
                         <fieldset
                           aria-hidden="true"
-                          class="PrivateNotchedOutline-root-851 MuiOutlinedInput-notchedOutline"
+                          class="PrivateNotchedOutline-root-995 MuiOutlinedInput-notchedOutline"
                           style="padding-left: 8px;"
                         >
                           <legend
-                            class="PrivateNotchedOutline-legend-852"
+                            class="PrivateNotchedOutline-legend-996"
                             style="width: 0.01px;"
                           >
                             <span>
@@ -8117,13 +8076,12 @@ exports[`App Route /vehicles authenticated 1`] = `
                       </div>
                     </div>
                     <div
-                      class="MuiFormControl-root makeStyles-formControlInline-811"
+                      class="MuiFormControl-root makeStyles-formControlInline-947"
                     >
                       <label
-                        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled"
+                        class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-994 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled"
                         data-shrink="true"
                         for="send-parameter"
-                        style="background-color: White;"
                       >
                         Parameter
                       </label>
@@ -8174,11 +8132,11 @@ exports[`App Route /vehicles authenticated 1`] = `
                         </svg>
                         <fieldset
                           aria-hidden="true"
-                          class="PrivateNotchedOutline-root-851 MuiOutlinedInput-notchedOutline"
+                          class="PrivateNotchedOutline-root-995 MuiOutlinedInput-notchedOutline"
                           style="padding-left: 8px;"
                         >
                           <legend
-                            class="PrivateNotchedOutline-legend-852"
+                            class="PrivateNotchedOutline-legend-996"
                             style="width: 0.01px;"
                           >
                             <span>
@@ -8214,8 +8172,7 @@ exports[`App Route /vehicles authenticated 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-paper-806"
-                style="height: 700px; width: 100%;"
+                class="makeStyles-paper-942 makeStyles-tableSize-993"
               >
                 <table
                   class="MuiTable-root"
@@ -8232,14 +8189,14 @@ exports[`App Route /vehicles authenticated 1`] = `
                       >
                         <span
                           aria-disabled="false"
-                          class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-855 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                          class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-999 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                         >
                           <span
                             class="MuiIconButton-label"
                           >
                             <input
                               aria-label="select all desserts"
-                              class="PrivateSwitchBase-input-858"
+                              class="PrivateSwitchBase-input-1002"
                               data-indeterminate="false"
                               type="checkbox"
                               value=""
@@ -8273,7 +8230,7 @@ exports[`App Route /vehicles authenticated 1`] = `
                         >
                           VIN
                           <span
-                            class="makeStyles-hiddenSortSpan-830"
+                            class="makeStyles-hiddenSortSpan-966"
                           >
                             sorted ascending
                           </span>
@@ -8551,10 +8508,10 @@ exports[`App Route /vehicles unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-249"
+      class="makeStyles-root-289"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-250 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-290 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -8567,21 +8524,20 @@ exports[`App Route /vehicles unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-258"
+        class="makeStyles-content-298"
       >
         <div
-          class="makeStyles-drawerHeader-256"
+          class="makeStyles-drawerHeader-296"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-238"
-            style="justify-content: center;"
+            class="makeStyles-paper-278 makeStyles-textJustifyAlign-323"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-241 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-281 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
diff --git a/src/components/CarUpdates/Status/index.jsx b/src/components/CarUpdates/Status/index.jsx
index 9771ada..1b11b2c 100644
--- a/src/components/CarUpdates/Status/index.jsx
+++ b/src/components/CarUpdates/Status/index.jsx
@@ -105,7 +105,7 @@ const MainForm = () => {
   };
 
   return (
-    <div className={classes.paper} style={{ height: 700, width: "100%" }}>
+    <div className={`${classes.paper} ${classes.tableSize}`}>
       <Table>
         <TableHead>
           <TableRow>
@@ -125,7 +125,7 @@ const MainForm = () => {
               </TableCell>
               <TableCell align="center">
                 {row.status}
-                {row.progress > 0 && (
+                {row.progress > -1 && (
                   <LinearProgress variant="determinate" value={row.progress} />
                 )}
               </TableCell>
diff --git a/src/components/Cars/CarSelection/index.jsx b/src/components/Cars/CarSelection/index.jsx
deleted file mode 100644
index baaa909..0000000
--- a/src/components/Cars/CarSelection/index.jsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import { FormControl, InputLabel, Select } from "@material-ui/core";
-
-import {
-  useVehicleContext,
-  VehicleProvider,
-} from "../../Contexts/VehicleContext";
-import { useUserContext } from "../../Contexts/UserContext";
-import useStyles from "../../useStyles";
-
-const Control = (props) => {
-  const classes = useStyles();
-  const { models, years, vehicles, getModels, getYears, getVehicles } =
-    useVehicleContext();
-  const {
-    token: {
-      idToken: { jwtToken: token },
-    },
-  } = useUserContext();
-  const [model, setModel] = useState("");
-  const [year, setYear] = useState(-1);
-  const [trim, setTrim] = useState("");
-
-  const handleChangeModel = (event) => {
-    setModel(event.target.value);
-  };
-  const handleChangeYear = (event) => {
-    setYear(event.target.value);
-  };
-  const handleChangeTrim = (event) => {
-    setTrim(event.target.value);
-  };
-
-  useEffect(() => {
-    if (!token) return;
-    (async () => {
-      try {
-        await getModels(token);
-        await getYears(token);
-      } catch (e) {}
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token]);
-
-  useEffect(() => {
-    if (!models || models.length === 0) return;
-    setModel(models[0]);
-  }, [models]);
-
-  useEffect(() => {
-    if (!years || years.length === 0) return;
-    setYear(years[0]);
-  }, [years]);
-
-  useEffect(() => {
-    if (model === null || year === -1) return;
-    getVehicles({ model, year, trim }, token);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [model, year, trim]);
-
-  useEffect(() => {
-    if (!props.onSelection) return;
-    const vins = vehicles.map((item) => item.vin);
-    props.onSelection(vins);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vehicles]);
-
-  return (
-    <div className={classes.paper}>
-      <div className={classes.form}>
-        <FormControl className={classes.formControlInline} variant="outlined">
-          <InputLabel htmlFor="car-model" style={{ backgroundColor: "White" }}>
-            Model
-          </InputLabel>
-          <Select
-            native
-            value={model}
-            onChange={handleChangeModel}
-            variant="outlined"
-            inputProps={{
-              name: "car-model",
-              id: "car-model",
-            }}
-          >
-            {models.map((item) => (
-              <option key={item} value={item}>
-                {item}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl className={classes.formControlInline} variant="outlined">
-          <InputLabel htmlFor="car-year" style={{ backgroundColor: "White" }}>
-            Year
-          </InputLabel>
-          <Select
-            native
-            value={year}
-            onChange={handleChangeYear}
-            variant="outlined"
-            inputProps={{
-              name: "car-year",
-              id: "car-year",
-            }}
-          >
-            {years.map((item) => (
-              <option key={item} value={item}>
-                {item}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl className={classes.formControlInline} variant="outlined">
-          <InputLabel htmlFor="car-trim" style={{ backgroundColor: "White" }}>
-            Trim
-          </InputLabel>
-          <Select
-            native
-            value={year}
-            onChange={handleChangeTrim}
-            variant="outlined"
-            inputProps={{
-              name: "car-trim",
-              id: "car-trim",
-            }}
-          >
-            {years.map((item) => (
-              <option key={item} value={item}>
-                {item}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <div className={classes.labelInline}>
-          {vehicles.length === 0
-            ? "No Cars Selected"
-            : vehicles.length === 1
-            ? "1 Car Selected"
-            : `${vehicles.length} Cars Selected`}
-        </div>
-      </div>
-      <div className={classes.form}></div>
-    </div>
-  );
-};
-
-const CarSelection = (props) => (
-  <VehicleProvider>
-    <Control {...props} />
-  </VehicleProvider>
-);
-
-CarSelection.propTypes = {
-  onSelection: PropTypes.func,
-};
-
-export default CarSelection;
diff --git a/src/components/Cars/CarSelectionTable/index.jsx b/src/components/Cars/CarSelectionTable/index.jsx
index b3b39d2..109de4e 100644
--- a/src/components/Cars/CarSelectionTable/index.jsx
+++ b/src/components/Cars/CarSelectionTable/index.jsx
@@ -114,7 +114,7 @@ const CarSelectionTable = (props) => {
   }, [pageIndex, pageSize, orderBy, order, search, token]);
 
   return (
-    <div className={classes.paper} style={{ height: 700, width: "100%" }}>
+    <div className={`${classes.paper} ${classes.tableSize}`}>
       <Table>
         <TableHeaderSortable
           classes={classes}
diff --git a/src/components/Cars/SendCommand/index.jsx b/src/components/Cars/SendCommand/index.jsx
index 5bc661e..e1e1977 100644
--- a/src/components/Cars/SendCommand/index.jsx
+++ b/src/components/Cars/SendCommand/index.jsx
@@ -81,7 +81,7 @@ const SendCommand = ({ vins }) => {
         variant="outlined"
         size="small"
       >
-        <InputLabel htmlFor="send-command" style={{ backgroundColor: "White" }}>
+        <InputLabel htmlFor="send-command" className={classes.whiteBackground}>
           Command
         </InputLabel>
         <Select
@@ -108,7 +108,7 @@ const SendCommand = ({ vins }) => {
       >
         <InputLabel
           htmlFor="send-parameter"
-          style={{ backgroundColor: "White" }}
+          className={classes.whiteBackground}
         >
           Parameter
         </InputLabel>
diff --git a/src/components/Cars/SendCommandBulk/index.jsx b/src/components/Cars/SendCommandBulk/index.jsx
index 9aee46a..cae15e8 100644
--- a/src/components/Cars/SendCommandBulk/index.jsx
+++ b/src/components/Cars/SendCommandBulk/index.jsx
@@ -54,9 +54,9 @@ const MainForm = () => {
   }, []);
 
   return (
-    <div className={classes.paper} style={{ height: 700, width: "100%" }}>
+    <div className={`${classes.paper} ${classes.tableSize}`}>
       <Grid container className={classes.root} spacing={2}>
-        <Grid item md={4} style={{ textAlign: "justify" }}>
+        <Grid item md={4} className={classes.textJustifyAlign}>
           <Link to="/vehicle-add">
             <AddCircleIcon fontSize="large" />
           </Link>
@@ -64,11 +64,11 @@ const MainForm = () => {
             className={classes.labelInline}
           >{`${selected.length} Selected`}</div>
         </Grid>
-        <Grid item md={4} style={{ textAlign: "center" }}>
+        <Grid item md={4} className={classes.textCenterAlign}>
           <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
-        <Grid item md={4} style={{ textAlign: "right" }}>
-          <SendCommand vins={selected} style={{ display: "flex" }} />
+        <Grid item md={4} className={classes.textRightAlign}>
+          <SendCommand vins={selected} />
         </Grid>
       </Grid>
       <CarSelectionTable
diff --git a/src/components/Contexts/CarUpdatesContext.jsx b/src/components/Contexts/CarUpdatesContext.jsx
index b54aa42..a33de65 100644
--- a/src/components/Contexts/CarUpdatesContext.jsx
+++ b/src/components/Contexts/CarUpdatesContext.jsx
@@ -1,7 +1,9 @@
 import React, { useContext, useState } from "react";
 
 import api from "../../services/updates";
+import { validateStatusMessage } from "../../utils/statusMessage";
 
+const FINAL_UPDATE_STATES = ["package_install_complete"];
 const CarUpdatesContext = React.createContext();
 
 const validateDeployCarUpdates = (data) => {
@@ -49,6 +51,8 @@ export const CarUpdatesProvider = ({ children }) => {
       result = await api.getCarUpdates(search, token);
       if (result.error)
         throw new Error(`Get car updates error. ${result.message}`);
+      result.data.forEach((item) => (item.progress = 0));
+      console.log(result.data);
       setCarUpdates(result.data);
       if (search && search.offset === 0 && result.total) {
         setTotalCarUpdates(result.total);
@@ -75,47 +79,40 @@ export const CarUpdatesProvider = ({ children }) => {
     return result;
   };
 
+  const getDownloadProgress = (status) => {
+    if (status.package_total > 0)
+      return Math.floor((100 * status.package_current) / status.package_total);
+    return 0;
+  };
+
+  const getInstallProgress = (status) => {
+    if (status.total_files > 0)
+      return Math.floor((100 * status.installed) / status.total_files);
+    return 0;
+  };
+
   const applyProgressStatus = (item, status) => {
-    if (
-      status.msg === "package_download_start" ||
-      status.msg === "download_start"
-    ) {
-      item.progress = 1;
-      item.status = "downloading";
-    } else if (status.msg === "package_download_complete") {
-      item.status = "downloaded";
-    } else if (
-      status.msg === "downloading" &&
-      status.package_current &&
-      status.package_total &&
-      status.package_total > 0
-    ) {
-      let progress = Math.floor(
-        (100 * status.package_current) / status.package_total
-      );
-      if (progress > 99) progress = 0;
-      item.progress = progress;
-      item.status = `downloading ${progress}%`;
-    } else if (status.error > 0 || status.msg === "download_error") {
-      item.status = "download error";
-    } else if (status.msg === "package_install_start") {
-      item.progress = 1;
-      item.status = "installing";
-    } else if (
-      status.msg === "installing" &&
-      status.installed &&
-      status.total_files &&
-      status.total_files > 0
-    ) {
-      let progress = Math.floor((100 * status.installed) / status.total_files);
-      item.progress = progress;
-      item.status = `installing ${progress}%`;
-    } else if (status.msg === "package_install_complete") {
-      item.status = "installed";
-    } else {
-      delete item.progress;
-      item.status = status.msg;
+    if (validateStatusMessage(status)) {
+      if (status.msg === "downloading") {
+        item.progress = getDownloadProgress(status);
+        item.status = `downloading ${item.progress}%`;
+        return;
+      } else if (status.msg === "package_download_complete") {
+        item.progress = 100;
+        item.status = "downloaded";
+        return;
+      } else if (status.msg === "installing") {
+        item.progress = getInstallProgress(status);
+        item.status = `installing ${item.progress}%`;
+        return;
+      } else if (status.msg === "package_install_complete") {
+        item.progress = 100;
+        item.status = "installed";
+        return;
+      }
     }
+    delete item.progress;
+    item.status = status.msg;
   };
 
   const applyProgressStatuses = (statuses) => {
@@ -163,7 +160,7 @@ export const CarUpdatesProvider = ({ children }) => {
       return 1000;
     }
     for (let i = 0, len = carUpdates.length; i < len; i++) {
-      if (carUpdates[i].status.indexOf("downloading") > -1) return 1000;
+      if (FINAL_UPDATE_STATES.indexOf(carUpdates[i].status) === -1) return 1000;
     }
     return 10000;
   };
diff --git a/src/components/Layouts/MenuDrawer.jsx b/src/components/Layouts/MenuDrawer.jsx
index d66c254..60d0f26 100644
--- a/src/components/Layouts/MenuDrawer.jsx
+++ b/src/components/Layouts/MenuDrawer.jsx
@@ -71,9 +71,7 @@ export default function MenuDrawer({ children }) {
         })}
       >
         <div className={classes.drawerHeader} />
-        <Container component="main" maxWidth="lg">
-          {children}
-        </Container>
+        <Container component="main">{children}</Container>
       </main>
     </div>
   );
diff --git a/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
index f36fe51..17dba3d 100644
--- a/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
+++ b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
@@ -182,11 +182,10 @@ exports[`SideMenu Authenticated 1`] = `
         <li>
           <a
             aria-disabled="false"
-            class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
+            class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiButtonBase-root MuiListItem-root makeStyles-menuExternalLink-53 MuiListItem-gutters MuiListItem-button MuiTypography-colorPrimary"
             href="https://grafana.fiskerdps.com"
             rel="noopener"
             role="button"
-            style="text-decoration: inherit;"
             tabindex="0"
             target="_blank"
           >
diff --git a/src/components/ListItemExternalLink.jsx b/src/components/ListItemExternalLink.jsx
index 13568a5..3e1e29f 100644
--- a/src/components/ListItemExternalLink.jsx
+++ b/src/components/ListItemExternalLink.jsx
@@ -5,31 +5,20 @@ import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
 import { Link } from "@material-ui/core";
 
+import useStyles from "./useStyles";
+
 function ListItemExternalLink(props) {
   const { icon, primary, url } = props;
-  const style = {
-    textDecoration: "inherit",
-    color: "inherit",
-    "&:link": {
-      textDecoration: "inherit",
-      color: "inherit",
-      cursor: "auto",
-    },
-    "&:visited": {
-      textDecoration: "inherit",
-      color: "inherit",
-      cursor: "auto",
-    },
-  };
+  const classes = useStyles();
 
   return (
     <ListItem
       button
       component={Link}
-      style={style}
       href={url}
       rel="noopener"
       target="_blank"
+      className={classes.menuExternalLink}
     >
       {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
       <ListItemText primary={primary} />
diff --git a/src/components/Manifest/Deploy/index.jsx b/src/components/Manifest/Deploy/index.jsx
index 33ae550..0e218fe 100644
--- a/src/components/Manifest/Deploy/index.jsx
+++ b/src/components/Manifest/Deploy/index.jsx
@@ -131,10 +131,10 @@ const MainForm = () => {
               className={classes.labelInline}
             >{`${selected.length} Selected`}</div>
           </Grid>
-          <Grid item md={8} style={{ textAlign: "center" }}>
+          <Grid item md={8} className={classes.textCenterAlign}>
             <SearchField classes={classes} onSearch={handleSearch} />
           </Grid>
-          <Grid item md={2} style={{ textAlign: "right" }}>
+          <Grid item md={2} className={classes.textRightAlign}>
             <Button
               type="submit"
               disabled={busy || selected.length === 0}
diff --git a/src/components/Manifest/List/index.jsx b/src/components/Manifest/List/index.jsx
index 3d7e0eb..e4d6c9a 100644
--- a/src/components/Manifest/List/index.jsx
+++ b/src/components/Manifest/List/index.jsx
@@ -184,17 +184,17 @@ const MainForm = () => {
   };
 
   return (
-    <div className={classes.paper} style={{ height: 700, width: "100%" }}>
+    <div className={`${classes.paper} ${classes.tableSize}`}>
       <Grid container className={classes.root} spacing={2}>
-        <Grid item md={4} style={{ textAlign: "justify" }}>
+        <Grid item md={4} className={classes.textJustifyAlign}>
           <Link to="/package-create" className={classes.labelInline}>
             <AddCircleIcon fontSize="large" />
           </Link>
         </Grid>
-        <Grid item md={4} style={{ textAlign: "center" }}>
+        <Grid item md={4} className={classes.textCenterAlign}>
           <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
-        <Grid item md={4} style={{ textAlign: "right" }}></Grid>
+        <Grid item md={4} className={classes.textRightAlign}></Grid>
       </Grid>
       <Table>
         <TableHeaderSortable
diff --git a/src/components/Manifest/Status/index.jsx b/src/components/Manifest/Status/index.jsx
index b1bc624..fc9e525 100644
--- a/src/components/Manifest/Status/index.jsx
+++ b/src/components/Manifest/Status/index.jsx
@@ -119,7 +119,7 @@ const MainForm = () => {
   };
 
   return (
-    <div className={classes.paper} style={{ height: 700, width: "100%" }}>
+    <div className={`${classes.paper} ${classes.tableSize}`}>
       <Table>
         <TableHead>
           <TableRow>
@@ -139,7 +139,7 @@ const MainForm = () => {
               </TableCell>
               <TableCell align="center">
                 {row.status}
-                {row.progress > 0 && (
+                {row.progress > -1 && (
                   <LinearProgress variant="determinate" value={row.progress} />
                 )}
               </TableCell>
diff --git a/src/components/SSOForm/__snapshots__/SSOForm.test.js.snap b/src/components/SSOForm/__snapshots__/SSOForm.test.js.snap
index 0779f27..c9b4462 100644
--- a/src/components/SSOForm/__snapshots__/SSOForm.test.js.snap
+++ b/src/components/SSOForm/__snapshots__/SSOForm.test.js.snap
@@ -3,8 +3,7 @@
 exports[`Sign In Form Should render 1`] = `
 <div>
   <div
-    class="makeStyles-paper-3"
-    style="justify-content: center;"
+    class="makeStyles-paper-3 makeStyles-textJustifyAlign-48"
   >
     <a
       aria-disabled="false"
diff --git a/src/components/SSOForm/index.jsx b/src/components/SSOForm/index.jsx
index 36c4b7e..76bb0cc 100644
--- a/src/components/SSOForm/index.jsx
+++ b/src/components/SSOForm/index.jsx
@@ -21,7 +21,7 @@ export default function SignInForm() {
   }, []);
 
   return (
-    <div className={classes.paper} style={{ justifyContent: "center" }}>
+    <div className={`${classes.paper} ${classes.textJustifyAlign}`}>
       <Button
         type="submit"
         variant="contained"
diff --git a/src/components/useStyles.jsx b/src/components/useStyles.jsx
index 06bc062..f88cea7 100644
--- a/src/components/useStyles.jsx
+++ b/src/components/useStyles.jsx
@@ -236,6 +236,32 @@ const useStyles = makeStyles((theme) => ({
   datascopeContainerValue: {
     margin: 0,
   },
+  textJustifyAlign: { textAlign: "justifyContent" },
+  textCenterAlign: { textAlign: "center" },
+  textRightAlign: { textAlign: "right" },
+  fullWidth: { width: "100%" },
+  pageCenter: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+  },
+  menuExternalLink: {
+    textDecoration: "inherit",
+    color: "inherit",
+    "&:link": {
+      textDecoration: "inherit",
+      color: "inherit",
+      cursor: "auto",
+    },
+    "&:visited": {
+      textDecoration: "inherit",
+      color: "inherit",
+      cursor: "auto",
+    },
+  },
+  tableSize: { height: 700, width: "100%" },
+  whiteBackground: { backgroundColor: "White" },
 }));
 
 export default useStyles;
diff --git a/src/utils/statusMessage.js b/src/utils/statusMessage.js
new file mode 100644
index 0000000..69c0e17
--- /dev/null
+++ b/src/utils/statusMessage.js
@@ -0,0 +1,23 @@
+const DOWNLOAD_STATUSES = ["download_start", "downloading", "download_complete", "download_error", "package_download_complete"];
+const INSTALL_STATUSES = ["install_start", "installing", "install_complete", "install_error", "pacakge_install_complete"];
+
+export const isDownloadStatusMessage = (status) => {
+  return DOWNLOAD_STATUSES.indexOf(status.msg) > -1;
+};
+
+export const isInstallStatusMessage = (status) => {
+  return INSTALL_STATUSES.indexOf(status.msg) > -1;
+};
+
+export const validateStatusMessage = (status) => {
+  if (isDownloadStatusMessage(status)) {
+    if (!(status.package_current > -1 && status.package_total > -1)) return false;
+    if (status.package_current > status.package_total) return false;
+    return true;
+  } else if (isInstallStatusMessage(status)) {
+    if (!(status.installed > -1 && status.total_files > -1)) return false;
+    if (status.installed > status.total_files) return false;
+    return true;
+  }
+  return false;
+};
diff --git a/src/utils/statusMessage.test.js b/src/utils/statusMessage.test.js
new file mode 100644
index 0000000..511766a
--- /dev/null
+++ b/src/utils/statusMessage.test.js
@@ -0,0 +1,48 @@
+import { isDownloadStatusMessage, isInstallStatusMessage, validateStatusMessage} from "./statusMessage";
+
+describe("validatons", () => {
+  it("isDownloadStatusMessage", () => {
+    expect(isDownloadStatusMessage({ msg: "download_start"})).toEqual(true);
+    expect(isDownloadStatusMessage({ msg: "downloading"})).toEqual(true);
+    expect(isDownloadStatusMessage({ msg: "download_complete"})).toEqual(true);
+    expect(isDownloadStatusMessage({ msg: "download_error"})).toEqual(true);
+    expect(isDownloadStatusMessage({ msg: "package_download_complete"})).toEqual(true);
+    
+    expect(isDownloadStatusMessage({ msg: "installing"})).toEqual(false);
+    expect(isDownloadStatusMessage({ msg: "install_start"})).toEqual(false);
+    expect(isDownloadStatusMessage({ msg: "install_complete"})).toEqual(false);
+    expect(isDownloadStatusMessage({ msg: "install_error"})).toEqual(false);
+    expect(isDownloadStatusMessage({ msg: "pacakge_install_complete"})).toEqual(false);
+  });
+  it("isInstallStatusMessage", () => {
+    expect(isInstallStatusMessage({ msg: "download_start"})).toEqual(false);
+    expect(isInstallStatusMessage({ msg: "downloading"})).toEqual(false);
+    expect(isInstallStatusMessage({ msg: "download_complete"})).toEqual(false);
+    expect(isInstallStatusMessage({ msg: "download_error"})).toEqual(false);
+    expect(isInstallStatusMessage({ msg: "package_download_complete"})).toEqual(false);
+    
+    expect(isInstallStatusMessage({ msg: "installing"})).toEqual(true);
+    expect(isInstallStatusMessage({ msg: "install_start"})).toEqual(true);
+    expect(isInstallStatusMessage({ msg: "install_complete"})).toEqual(true);
+    expect(isInstallStatusMessage({ msg: "install_error"})).toEqual(true);
+    expect(isInstallStatusMessage({ msg: "pacakge_install_complete"})).toEqual(true);
+  });
+  it("validateStatusMessage", () => {
+    expect(validateStatusMessage({ msg: "download_start", package_current: 0, package_total: 0})).toEqual(true);
+    expect(validateStatusMessage({ msg: "downloading", package_current: 0, package_total: 0})).toEqual(true);
+    expect(validateStatusMessage({ msg: "download_complete", package_current: 0, package_total: 0})).toEqual(true);
+    expect(validateStatusMessage({ msg: "download_error", package_current: 0, package_total: 0})).toEqual(true);
+    expect(validateStatusMessage({ msg: "package_download_complete", package_current: 0, package_total: 0})).toEqual(true);
+    
+    expect(validateStatusMessage({ msg: "installing", installed: 0, total_files: 0 })).toEqual(true);
+    expect(validateStatusMessage({ msg: "install_start", installed: 0, total_files: 0 })).toEqual(true);
+    expect(validateStatusMessage({ msg: "install_complete", installed: 0, total_files: 0 })).toEqual(true);
+    expect(validateStatusMessage({ msg: "install_error", installed: 0, total_files: 0 })).toEqual(true);
+    expect(validateStatusMessage({ msg: "pacakge_install_complete", installed: 0, total_files: 0 })).toEqual(true);
+
+    expect(validateStatusMessage({ msg: "downloading", package_current: -1, package_total: -1})).toEqual(false);
+    expect(validateStatusMessage({ msg: "installing", installed: -1, total_files: -1})).toEqual(false);
+    expect(validateStatusMessage({ msg: "download_start", package_current: 100, package_total: 50})).toEqual(false);
+    expect(validateStatusMessage({ msg: "install_start", installed: 10, total_files: 9})).toEqual(false);
+  });
+})
\ No newline at end of file