From e09ce9bd411cd5859a1dec333a5759a2b65e96dc Mon Sep 17 00:00:00 2001
From: Drew Taylor <dtaylor@fiskerinc.com>
Date: Wed, 21 Jul 2021 17:15:34 -0700
Subject: [PATCH] passing react tests

---
 src/assets/green-car.png                      | Bin 0 -> 676 bytes
 src/assets/red-car.png                        | Bin 0 -> 648 bytes
 src/components/App/App.test.js                |  13 +-
 .../App/__snapshots__/App.test.js.snap        | 736 ++++++++++++------
 src/components/CarUpdates/Status/index.jsx    |   4 +-
 .../Cars/CarSelectionTable/index.jsx          |   4 +-
 src/components/Cars/List/index.jsx            |   4 +-
 src/components/Cars/Status/index.jsx          |   4 +-
 .../Contexts/__mocks__/VehicleContext.jsx     |   3 +
 src/components/Table/HeaderSortable/index.jsx |   2 +-
 .../Create/__snapshots__/Create.test.js.snap  |  16 +-
 src/components/UpdatePackages/List/index.jsx  |   4 +-
 src/components/VehicleMap/index.jsx           | 178 +++--
 src/components/VehicleMap/popup.jsx           |  82 +-
 src/components/useStyles.jsx                  |  22 +
 src/services/__mocks__/vehicles.js            |   7 +-
 16 files changed, 747 insertions(+), 332 deletions(-)
 create mode 100644 src/assets/green-car.png
 create mode 100644 src/assets/red-car.png

diff --git a/src/assets/green-car.png b/src/assets/green-car.png
new file mode 100644
index 0000000000000000000000000000000000000000..f25b6200c0b5b005e09fe275706b695e35f2c8c1
GIT binary patch
literal 676
zcmV;V0$crwP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00006VoOIv0RI60
z0RN!9r;`8x0$E8!K~zYI?UX%e6JZ#~f6t{&uG-?HBA6(CtPVmDY|*6nfdx$w{D_-N
z2ZwfY(Ah3d+JfjN=p>@1Q43YtXi-POS)@%1Qn%9D^b-0$4qnnrbBRf56(s-Vp1bFH
z|G&F?-uHo~{&z{OWF*ynK{3}s4gsM$Jsr?5qTJ5*W}Y?-j-+A(irlFa<|`HHpFKA|
zTsL^<vr{{Qfx<VSO;oQ1gKZDL_KZ69zz)1V6LJd9RnU9DQhud%-`x4JA8YGc{1%4-
z`J^IS5lv?knFsX%i*jG^et0C-gUZ=ZAfE*8uC25D7OTh=08#5vBT%mdc?_UP(l1{D
z4nObSj}jGFFi!5}dcjtQjsWw(k=^NI2mc7hA_<5huVycP%B>eX70)b#i~@*hxwJO#
z(__8tUZasz{07P{wRA5k5uih%U7!`%<}R35C<rV93y5aL$P~hNMWe1)61e51l<n%s
zi`WSjd9&WHtR+!BneENItpM*ycON!JKLGY-fPrO;m7~*%_n*PjV`Fr16QKaM!5S>y
zlzJ@CsjKl#$8H@8I)wq0Qn97dIo&({(a$xKj&-S#Nosfq(pB;*1_~X;IOpi_-088O
zIn9@iI}I4$a}S^^fwKML=iz1ePA=P){_Rg<L$=cI-F|9hGMtK6L7TcfiYh${r{Y?f
z-gwO<CIqUC%)g<32KMc-t9J<PqO|MpNfiRNxH%hWbK@Ma?8ZxgBT!Ib5oHlL-Vk^u
zF%fIz3#zHw-tqqGSub}ZptXEg&#_3KTQs9+-$qe4%eSefs_GYN;oLs0Jw>?y0000<
KMNUMnLSTZBL^~J&

literal 0
HcmV?d00001

diff --git a/src/assets/red-car.png b/src/assets/red-car.png
new file mode 100644
index 0000000000000000000000000000000000000000..af6edbc58d5ab1e8668a79351f8120132c3460ba
GIT binary patch
literal 648
zcmV;30(bq1P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00006VoOIv0RI60
z0RN!9r;`8x0zFAYK~zYI?UX%eQ&AMhe<#U%N!nC5!9~Q6Nhql$2v)I!3Qctst(!{+
zhd4Q?t6iLm1<_5=O($s*s16koHy>s$B32OGYHPk;-a8Jy+Lz>|zJx?U@`nrO-gD3Y
zcQ5w?hWg(nyCrMs*-IjN6Bq~LAw6qANzr?8tN6TYa6O&9fv^}7*2z9+TKT2WU>!fd
z&yL1E0!f7H#&>-zYsFd^lpdLh+hcMKcmR|Qr*TM1E8kk@MS_a$NNf%m708?K3y;D=
z0c5RMGp)iyfn{LS^J-Hd7~v{_tMVi)uvM<`)C<FbtCKT_fegx~nH*W}6>RP)zW_E6
zPE^wuj{XrGb!83^MDz0QS*2I7tgco;ivUq^FSq7ntpkc&0R<#ur?a<IbiW`66%L?`
zA*28U*z1*S05-}N!luAyML&tkSB1<kPv(HTO$+mP?1|a4ioWc1m%B-jbB2|F)dsFl
zUObNLyaf`200UKAJ!yU@THrflb)AI)LIDyQk%jHfZ?Gs+zWBD`G*Y5^$6qNbQ>Imr
zpe7Obbo1PH4^d9Fff2^G!<b!OlG4hLSjA}m?xIfcy9dx{(|rl_@H2uu8b&gw$ENQ$
z;!Y0rdApG}^@(gSSGB3%$zx{?p6V0XfOP+5S_OelU*=!XKLZDzv8UHS3L%AyAwpbX
z#LFdsq!(9!Du6&)l^PN6Cxb2EOjlsjDol5~iy(EnJ3H?fzWB!1`vKj}*9X>lZ_>I5
i^Zf%4#&@WpI_f9<Ez;<ugaz#Y0000<MNUMnLSTaDRv*#;

literal 0
HcmV?d00001

diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js
index e4be513..bf79fc1 100644
--- a/src/components/App/App.test.js
+++ b/src/components/App/App.test.js
@@ -4,7 +4,7 @@ jest.mock("../Contexts/UpdatesContext");
 jest.mock("../Contexts/UserContext");
 jest.mock("../../services/monitoring");
 
-import { render, screen, cleanup, waitForElementToBeRemoved } from "@testing-library/react";
+import { render, screen, cleanup, waitFor, waitForElementToBeRemoved } from "@testing-library/react";
 import { setToken } from "../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../utils/testing"
 import App from ".";
@@ -26,6 +26,13 @@ const check = async (path, selector, compare) => {
   expect(container).toMatchSnapshot();
 };
 
+const sleepAndCheck = async (path, selector, compare) => {
+  const container = await renderRoute(path);
+  await waitFor(() => { });
+  expect(container.querySelector(selector).innerHTML).toEqual(compare);
+  expect(container).toMatchSnapshot();
+};
+
 describe("App", () => {
   beforeAll(() => {
     // Stablize Table Pagination control ids 
@@ -93,12 +100,12 @@ describe("App", () => {
 
   it("Route / authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
-    await check("/", "h1", "Welcome John!");
+    await sleepAndCheck("/", "h1", "Welcome John!");
   });
 
   it("Route /home authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
-    await check("/home", "h1", "Welcome John!");
+    await sleepAndCheck("/home", "h1", "Welcome John!");
   });
 
   it("Route /package-upload authenticated", async () => {
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index f51c82a..4aa434c 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-366"
+      class="makeStyles-root-410"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-367 makeStyles-appBarShift-368 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-411 makeStyles-appBarShift-412 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -18,7 +18,7 @@ exports[`App Route / authenticated 1`] = `
             class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
           />
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-376 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-420 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -34,17 +34,17 @@ exports[`App Route / authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-371"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-415"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-372 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-416 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-373"
+            class="makeStyles-drawerHeader-417"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-382"
+              class="makeStyles-logo-426"
               src="fisker-badge.svg"
             />
           </div>
@@ -212,22 +212,152 @@ exports[`App Route / authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-374 makeStyles-contentShift-375"
+        class="makeStyles-content-418 makeStyles-contentShift-419"
       >
         <div
-          class="makeStyles-drawerHeader-373"
+          class="makeStyles-drawerHeader-417"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-355"
+            class="makeStyles-paper-399"
           >
             <h1
               class="MuiTypography-root MuiTypography-h5"
             >
               Welcome John!
             </h1>
+            <br />
+            <div
+              data-testid="mocked-vehicleprovider"
+            >
+              <div
+                class="leaflet-container leaflet-grab leaflet-touch-drag"
+                style="width: 100%; height: 900px; position: relative;"
+                tabindex="0"
+              >
+                <div
+                  class="leaflet-pane leaflet-map-pane"
+                  style="left: 0px; top: 0px;"
+                >
+                  <div
+                    class="leaflet-pane leaflet-tile-pane"
+                  >
+                    <div
+                      class="leaflet-layer "
+                      style="z-index: 1;"
+                    >
+                      <div
+                        class="leaflet-tile-container leaflet-zoom-animated"
+                        style="z-index: 18; left: 0px; top: 0px;"
+                      >
+                        <img
+                          alt=""
+                          class="leaflet-tile"
+                          role="presentation"
+                          src="https://c.tile.openstreetmap.org/2/1/1.png"
+                          style="width: 256px; height: 256px; left: -256px; top: -256px;"
+                        />
+                        <img
+                          alt=""
+                          class="leaflet-tile"
+                          role="presentation"
+                          src="https://a.tile.openstreetmap.org/2/2/1.png"
+                          style="width: 256px; height: 256px; left: 0px; top: -256px;"
+                        />
+                        <img
+                          alt=""
+                          class="leaflet-tile"
+                          role="presentation"
+                          src="https://a.tile.openstreetmap.org/2/1/2.png"
+                          style="width: 256px; height: 256px; left: -256px; top: 0px;"
+                        />
+                        <img
+                          alt=""
+                          class="leaflet-tile"
+                          role="presentation"
+                          src="https://b.tile.openstreetmap.org/2/2/2.png"
+                          style="width: 256px; height: 256px; left: 0px; top: 0px;"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="leaflet-pane leaflet-shadow-pane"
+                  />
+                  <div
+                    class="leaflet-pane leaflet-overlay-pane"
+                  />
+                  <div
+                    class="leaflet-pane leaflet-marker-pane"
+                  />
+                  <div
+                    class="leaflet-pane leaflet-tooltip-pane"
+                  />
+                  <div
+                    class="leaflet-pane leaflet-popup-pane"
+                  />
+                </div>
+                <div
+                  class="leaflet-control-container"
+                >
+                  <div
+                    class="leaflet-top leaflet-left"
+                  >
+                    <div
+                      class="leaflet-control-zoom leaflet-bar leaflet-control"
+                    >
+                      <a
+                        aria-label="Zoom in"
+                        class="leaflet-control-zoom-in"
+                        href="#"
+                        role="button"
+                        title="Zoom in"
+                      >
+                        +
+                      </a>
+                      <a
+                        aria-label="Zoom out"
+                        class="leaflet-control-zoom-out"
+                        href="#"
+                        role="button"
+                        title="Zoom out"
+                      >
+                        −
+                      </a>
+                    </div>
+                  </div>
+                  <div
+                    class="leaflet-top leaflet-right"
+                  />
+                  <div
+                    class="leaflet-bottom leaflet-left"
+                  />
+                  <div
+                    class="leaflet-bottom leaflet-right"
+                  >
+                    <div
+                      class="leaflet-control-attribution leaflet-control"
+                    >
+                      <a
+                        href="https://leafletjs.com"
+                        title="A JS library for interactive maps"
+                      >
+                        Leaflet
+                      </a>
+                       | © 
+                      <a
+                        href="http://osm.org/copyright"
+                      >
+                        OpenStreetMap
+                      </a>
+                       contributors
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </main>
       </main>
@@ -297,10 +427,10 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-734"
+      class="makeStyles-root-822"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-735 makeStyles-appBarShift-736 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-823 makeStyles-appBarShift-824 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -311,7 +441,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
             Deploy Package 1.0
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-744 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-832 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -327,17 +457,17 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-739"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-827"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-740 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-828 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-741"
+            class="makeStyles-drawerHeader-829"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-750"
+              class="makeStyles-logo-838"
               src="fisker-badge.svg"
             />
           </div>
@@ -505,10 +635,10 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-742 makeStyles-contentShift-743"
+        class="makeStyles-content-830 makeStyles-contentShift-831"
       >
         <div
-          class="makeStyles-drawerHeader-741"
+          class="makeStyles-drawerHeader-829"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -520,11 +650,11 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
               data-testid="mocked-updatesprovider"
             >
               <div
-                class="makeStyles-paper-723"
+                class="makeStyles-paper-811"
               >
                 <form
                   action="{onSubmit}"
-                  class="makeStyles-form-725"
+                  class="makeStyles-form-813"
                   novalidate=""
                 >
                   <p
@@ -536,13 +666,13 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
                     Description
                   </p>
                   <div
-                    class="MuiGrid-root makeStyles-root-734 MuiGrid-container MuiGrid-spacing-xs-2"
+                    class="MuiGrid-root makeStyles-root-822 MuiGrid-container MuiGrid-spacing-xs-2"
                   >
                     <div
                       class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-10"
                     >
                       <div
-                        class="MuiFormControl-root makeStyles-margin-747 makeStyles-textField-748"
+                        class="MuiFormControl-root makeStyles-margin-835 makeStyles-textField-836"
                       >
                         <label
                           class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
@@ -592,7 +722,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
                         </div>
                       </div>
                       <div
-                        class="makeStyles-labelInline-729"
+                        class="makeStyles-labelInline-817"
                       >
                         0 Selected
                       </div>
@@ -602,7 +732,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
                       style="text-align: right;"
                     >
                       <button
-                        class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-formControl-727 MuiButton-containedPrimary Mui-disabled MuiButton-fullWidth Mui-disabled"
+                        class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-formControl-815 MuiButton-containedPrimary Mui-disabled MuiButton-fullWidth Mui-disabled"
                         disabled=""
                         tabindex="-1"
                         type="submit"
@@ -616,7 +746,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-paper-723"
+                    class="makeStyles-paper-811"
                     style="height: 700px; width: 100%;"
                   >
                     <table
@@ -634,14 +764,14 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
                           >
                             <span
                               aria-disabled="false"
-                              class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-753 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                              class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-845 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                             >
                               <span
                                 class="MuiIconButton-label"
                               >
                                 <input
                                   aria-label="select all desserts"
-                                  class="PrivateSwitchBase-input-756"
+                                  class="PrivateSwitchBase-input-848"
                                   data-indeterminate="false"
                                   type="checkbox"
                                   value=""
@@ -675,7 +805,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
                             >
                               VIN
                               <span
-                                class="makeStyles-hiddenSortSpan-746"
+                                class="makeStyles-hiddenSortSpan-834"
                               >
                                 sorted ascending
                               </span>
@@ -955,10 +1085,10 @@ exports[`App Route /carupdate-deploy unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-174"
+      class="makeStyles-root-194"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-175 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-195 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -969,21 +1099,21 @@ exports[`App Route /carupdate-deploy unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-182"
+        class="makeStyles-content-202"
       >
         <div
-          class="makeStyles-drawerHeader-181"
+          class="makeStyles-drawerHeader-201"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-163"
+            class="makeStyles-paper-183"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-166 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-186 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -1010,10 +1140,10 @@ exports[`App Route /carupdate-status authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-534"
+      class="makeStyles-root-598"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-535 makeStyles-appBarShift-536 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-599 makeStyles-appBarShift-600 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -1024,7 +1154,7 @@ exports[`App Route /carupdate-status authenticated 1`] = `
             Package Package 1.0
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-544 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-608 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -1040,17 +1170,17 @@ exports[`App Route /carupdate-status authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-539"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-603"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-540 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-604 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-541"
+            class="makeStyles-drawerHeader-605"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-550"
+              class="makeStyles-logo-614"
               src="fisker-badge.svg"
             />
           </div>
@@ -1218,10 +1348,10 @@ exports[`App Route /carupdate-status authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-542 makeStyles-contentShift-543"
+        class="makeStyles-content-606 makeStyles-contentShift-607"
       >
         <div
-          class="makeStyles-drawerHeader-541"
+          class="makeStyles-drawerHeader-605"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -1230,7 +1360,7 @@ exports[`App Route /carupdate-status authenticated 1`] = `
             data-testid="mocked-updatesprovider"
           >
             <div
-              class="makeStyles-paper-523"
+              class="makeStyles-paper-587"
               style="height: 700px; width: 100%;"
             >
               <table
@@ -1418,10 +1548,10 @@ exports[`App Route /carupdate-status unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-206"
+      class="makeStyles-root-230"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-207 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-231 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -1432,21 +1562,21 @@ exports[`App Route /carupdate-status unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-214"
+        class="makeStyles-content-238"
       >
         <div
-          class="makeStyles-drawerHeader-213"
+          class="makeStyles-drawerHeader-237"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-195"
+            class="makeStyles-paper-219"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-198 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-222 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -1473,10 +1603,10 @@ exports[`App Route /dashboard authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-770"
+      class="makeStyles-root-862"
     >
       <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-863 makeStyles-appBarShift-864 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -1487,7 +1617,7 @@ exports[`App Route /dashboard authenticated 1`] = `
             Dashboard
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-780 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-872 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -1503,17 +1633,17 @@ exports[`App Route /dashboard authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-775"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-867"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-776 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-868 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-777"
+            class="makeStyles-drawerHeader-869"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-786"
+              class="makeStyles-logo-878"
               src="fisker-badge.svg"
             />
           </div>
@@ -1681,25 +1811,25 @@ exports[`App Route /dashboard authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-778 makeStyles-contentShift-779"
+        class="makeStyles-content-870 makeStyles-contentShift-871"
       >
         <div
-          class="makeStyles-drawerHeader-777"
+          class="makeStyles-drawerHeader-869"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-759"
+            class="makeStyles-paper-851"
           >
             <div
-              class="MuiGrid-root makeStyles-root-770 MuiGrid-container MuiGrid-spacing-xs-2"
+              class="MuiGrid-root makeStyles-root-862 MuiGrid-container MuiGrid-spacing-xs-2"
             >
               <div
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-6"
               >
                 <div
-                  class="makeStyles-embeddedWrapper-788"
+                  class="makeStyles-embeddedWrapper-880"
                 >
                   <iframe
                     frameborder="0"
@@ -1713,7 +1843,7 @@ exports[`App Route /dashboard authenticated 1`] = `
                 class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-6"
               >
                 <div
-                  class="makeStyles-embeddedWrapper-788"
+                  class="makeStyles-embeddedWrapper-880"
                 >
                   <iframe
                     frameborder="0"
@@ -1768,10 +1898,10 @@ exports[`App Route /dashboard unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-334"
+      class="makeStyles-root-374"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-335 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-375 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -1782,21 +1912,21 @@ exports[`App Route /dashboard unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-342"
+        class="makeStyles-content-382"
       >
         <div
-          class="makeStyles-drawerHeader-341"
+          class="makeStyles-drawerHeader-381"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-323"
+            class="makeStyles-paper-363"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-326 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-366 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -1823,10 +1953,10 @@ exports[`App Route /home authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-398"
+      class="makeStyles-root-446"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-399 makeStyles-appBarShift-400 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-447 makeStyles-appBarShift-448 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -1835,7 +1965,7 @@ exports[`App Route /home authenticated 1`] = `
             class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
           />
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-408 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-456 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -1851,17 +1981,17 @@ exports[`App Route /home authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-403"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-451"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-404 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-452 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-405"
+            class="makeStyles-drawerHeader-453"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-414"
+              class="makeStyles-logo-462"
               src="fisker-badge.svg"
             />
           </div>
@@ -2029,22 +2159,152 @@ exports[`App Route /home authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-406 makeStyles-contentShift-407"
+        class="makeStyles-content-454 makeStyles-contentShift-455"
       >
         <div
-          class="makeStyles-drawerHeader-405"
+          class="makeStyles-drawerHeader-453"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-387"
+            class="makeStyles-paper-435"
           >
             <h1
               class="MuiTypography-root MuiTypography-h5"
             >
               Welcome John!
             </h1>
+            <br />
+            <div
+              data-testid="mocked-vehicleprovider"
+            >
+              <div
+                class="leaflet-container leaflet-grab leaflet-touch-drag"
+                style="width: 100%; height: 900px; position: relative;"
+                tabindex="0"
+              >
+                <div
+                  class="leaflet-pane leaflet-map-pane"
+                  style="left: 0px; top: 0px;"
+                >
+                  <div
+                    class="leaflet-pane leaflet-tile-pane"
+                  >
+                    <div
+                      class="leaflet-layer "
+                      style="z-index: 1;"
+                    >
+                      <div
+                        class="leaflet-tile-container leaflet-zoom-animated"
+                        style="z-index: 18; left: 0px; top: 0px;"
+                      >
+                        <img
+                          alt=""
+                          class="leaflet-tile"
+                          role="presentation"
+                          src="https://c.tile.openstreetmap.org/2/1/1.png"
+                          style="width: 256px; height: 256px; left: -256px; top: -256px;"
+                        />
+                        <img
+                          alt=""
+                          class="leaflet-tile"
+                          role="presentation"
+                          src="https://a.tile.openstreetmap.org/2/2/1.png"
+                          style="width: 256px; height: 256px; left: 0px; top: -256px;"
+                        />
+                        <img
+                          alt=""
+                          class="leaflet-tile"
+                          role="presentation"
+                          src="https://a.tile.openstreetmap.org/2/1/2.png"
+                          style="width: 256px; height: 256px; left: -256px; top: 0px;"
+                        />
+                        <img
+                          alt=""
+                          class="leaflet-tile"
+                          role="presentation"
+                          src="https://b.tile.openstreetmap.org/2/2/2.png"
+                          style="width: 256px; height: 256px; left: 0px; top: 0px;"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="leaflet-pane leaflet-shadow-pane"
+                  />
+                  <div
+                    class="leaflet-pane leaflet-overlay-pane"
+                  />
+                  <div
+                    class="leaflet-pane leaflet-marker-pane"
+                  />
+                  <div
+                    class="leaflet-pane leaflet-tooltip-pane"
+                  />
+                  <div
+                    class="leaflet-pane leaflet-popup-pane"
+                  />
+                </div>
+                <div
+                  class="leaflet-control-container"
+                >
+                  <div
+                    class="leaflet-top leaflet-left"
+                  >
+                    <div
+                      class="leaflet-control-zoom leaflet-bar leaflet-control"
+                    >
+                      <a
+                        aria-label="Zoom in"
+                        class="leaflet-control-zoom-in"
+                        href="#"
+                        role="button"
+                        title="Zoom in"
+                      >
+                        +
+                      </a>
+                      <a
+                        aria-label="Zoom out"
+                        class="leaflet-control-zoom-out"
+                        href="#"
+                        role="button"
+                        title="Zoom out"
+                      >
+                        −
+                      </a>
+                    </div>
+                  </div>
+                  <div
+                    class="leaflet-top leaflet-right"
+                  />
+                  <div
+                    class="leaflet-bottom leaflet-left"
+                  />
+                  <div
+                    class="leaflet-bottom leaflet-right"
+                  >
+                    <div
+                      class="leaflet-control-attribution leaflet-control"
+                    >
+                      <a
+                        href="https://leafletjs.com"
+                        title="A JS library for interactive maps"
+                      >
+                        Leaflet
+                      </a>
+                       | © 
+                      <a
+                        href="http://osm.org/copyright"
+                      >
+                        OpenStreetMap
+                      </a>
+                       contributors
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </main>
       </main>
@@ -2059,10 +2319,10 @@ exports[`App Route /home unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-46"
+      class="makeStyles-root-50"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-47 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-51 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -2073,21 +2333,21 @@ exports[`App Route /home unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-54"
+        class="makeStyles-content-58"
       >
         <div
-          class="makeStyles-drawerHeader-53"
+          class="makeStyles-drawerHeader-57"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-35"
+            class="makeStyles-paper-39"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-38 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-42 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -2114,10 +2374,10 @@ exports[`App Route /package-upload authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-430"
+      class="makeStyles-root-482"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-431 makeStyles-appBarShift-432 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-483 makeStyles-appBarShift-484 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -2128,7 +2388,7 @@ exports[`App Route /package-upload authenticated 1`] = `
             Create Update Package
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-440 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-492 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -2144,17 +2404,17 @@ exports[`App Route /package-upload authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-435"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-487"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-436 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-488 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-437"
+            class="makeStyles-drawerHeader-489"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-446"
+              class="makeStyles-logo-498"
               src="fisker-badge.svg"
             />
           </div>
@@ -2322,10 +2582,10 @@ exports[`App Route /package-upload authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-438 makeStyles-contentShift-439"
+        class="makeStyles-content-490 makeStyles-contentShift-491"
       >
         <div
-          class="makeStyles-drawerHeader-437"
+          class="makeStyles-drawerHeader-489"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -2334,11 +2594,11 @@ exports[`App Route /package-upload authenticated 1`] = `
             data-testid="mocked-fileuploadprovider"
           >
             <div
-              class="makeStyles-paper-419"
+              class="makeStyles-paper-471"
             >
               <form
                 action="{onSubmit}"
-                class="makeStyles-form-421"
+                class="makeStyles-form-473"
                 novalidate=""
               >
                 <div
@@ -2374,10 +2634,10 @@ exports[`App Route /package-upload authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-449 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-505 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-451"
+                        class="PrivateNotchedOutline-legendLabelled-507"
                       >
                         <span>
                           Package name
@@ -2420,10 +2680,10 @@ exports[`App Route /package-upload authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-449 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-505 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-451"
+                        class="PrivateNotchedOutline-legendLabelled-507"
                       >
                         <span>
                           Version
@@ -2466,10 +2726,10 @@ exports[`App Route /package-upload authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-449 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-505 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-451"
+                        class="PrivateNotchedOutline-legendLabelled-507"
                       >
                         <span>
                           Description
@@ -2513,10 +2773,10 @@ exports[`App Route /package-upload authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-449 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-505 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-451"
+                        class="PrivateNotchedOutline-legendLabelled-507"
                       >
                         <span>
                           Release Notes URL
@@ -2558,7 +2818,7 @@ exports[`App Route /package-upload authenticated 1`] = `
                   </div>
                 </div>
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-422 MuiButton-containedPrimary MuiButton-fullWidth"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-474 MuiButton-containedPrimary MuiButton-fullWidth"
                   tabindex="0"
                   type="submit"
                 >
@@ -2587,10 +2847,10 @@ exports[`App Route /package-upload unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-78"
+      class="makeStyles-root-86"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-79 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-87 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -2601,21 +2861,21 @@ exports[`App Route /package-upload unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-86"
+        class="makeStyles-content-94"
       >
         <div
-          class="makeStyles-drawerHeader-85"
+          class="makeStyles-drawerHeader-93"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-67"
+            class="makeStyles-paper-75"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-70 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-78 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -2642,10 +2902,10 @@ exports[`App Route /page-not-found authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-702"
+      class="makeStyles-root-786"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-703 makeStyles-appBarShift-704 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-787 makeStyles-appBarShift-788 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -2654,7 +2914,7 @@ exports[`App Route /page-not-found authenticated 1`] = `
             class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
           />
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-712 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-796 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -2670,17 +2930,17 @@ exports[`App Route /page-not-found authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-707"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-791"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-708 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-792 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-709"
+            class="makeStyles-drawerHeader-793"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-718"
+              class="makeStyles-logo-802"
               src="fisker-badge.svg"
             />
           </div>
@@ -2848,16 +3108,16 @@ exports[`App Route /page-not-found authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-710 makeStyles-contentShift-711"
+        class="makeStyles-content-794 makeStyles-contentShift-795"
       >
         <div
-          class="makeStyles-drawerHeader-709"
+          class="makeStyles-drawerHeader-793"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-691"
+            class="makeStyles-paper-775"
           >
             <h1
               class="MuiTypography-root MuiTypography-h2"
@@ -2878,10 +3138,10 @@ exports[`App Route /page-not-found unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-670"
+      class="makeStyles-root-750"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-671 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-751 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -2892,16 +3152,16 @@ exports[`App Route /page-not-found unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-678"
+        class="makeStyles-content-758"
       >
         <div
-          class="makeStyles-drawerHeader-677"
+          class="makeStyles-drawerHeader-757"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-659"
+            class="makeStyles-paper-739"
           >
             <h1
               class="MuiTypography-root MuiTypography-h2"
@@ -2922,10 +3182,10 @@ exports[`App Route /updates authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-502"
+      class="makeStyles-root-562"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-503 makeStyles-appBarShift-504 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-563 makeStyles-appBarShift-564 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -2936,7 +3196,7 @@ exports[`App Route /updates authenticated 1`] = `
             Deploy Packages
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-512 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-572 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -2952,17 +3212,17 @@ exports[`App Route /updates authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-507"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-567"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-508 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-568 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-509"
+            class="makeStyles-drawerHeader-569"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-518"
+              class="makeStyles-logo-578"
               src="fisker-badge.svg"
             />
           </div>
@@ -3130,10 +3390,10 @@ exports[`App Route /updates authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-510 makeStyles-contentShift-511"
+        class="makeStyles-content-570 makeStyles-contentShift-571"
       >
         <div
-          class="makeStyles-drawerHeader-509"
+          class="makeStyles-drawerHeader-569"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -3142,14 +3402,14 @@ exports[`App Route /updates authenticated 1`] = `
             data-testid="mocked-updatesprovider"
           >
             <div
-              class="makeStyles-paper-491"
+              class="makeStyles-paper-551"
               style="height: 700px; width: 100%;"
             >
               <div
-                class="MuiToolbar-root MuiToolbar-regular makeStyles-tableToolbar-517 MuiToolbar-gutters"
+                class="MuiToolbar-root MuiToolbar-regular makeStyles-tableToolbar-577 MuiToolbar-gutters"
               >
                 <div
-                  class="MuiFormControl-root makeStyles-margin-515 makeStyles-textField-516"
+                  class="MuiFormControl-root makeStyles-margin-575 makeStyles-textField-576"
                 >
                   <label
                     class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
@@ -3221,7 +3481,7 @@ exports[`App Route /updates authenticated 1`] = `
                       >
                         ID
                         <span
-                          class="makeStyles-hiddenSortSpan-514"
+                          class="makeStyles-hiddenSortSpan-574"
                         >
                           sorted descending
                         </span>
@@ -3540,10 +3800,10 @@ exports[`App Route /updates unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-142"
+      class="makeStyles-root-158"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-143 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-159 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -3554,21 +3814,21 @@ exports[`App Route /updates unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-150"
+        class="makeStyles-content-166"
       >
         <div
-          class="makeStyles-drawerHeader-149"
+          class="makeStyles-drawerHeader-165"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-131"
+            class="makeStyles-paper-147"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-134 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-150 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -3595,10 +3855,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-466"
+      class="makeStyles-root-522"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-467 makeStyles-appBarShift-468 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-523 makeStyles-appBarShift-524 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -3609,7 +3869,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
             Add Vehicle
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-476 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-532 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -3625,17 +3885,17 @@ exports[`App Route /vehicle-add authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-471"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-527"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-472 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-528 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-473"
+            class="makeStyles-drawerHeader-529"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-482"
+              class="makeStyles-logo-538"
               src="fisker-badge.svg"
             />
           </div>
@@ -3803,10 +4063,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-474 makeStyles-contentShift-475"
+        class="makeStyles-content-530 makeStyles-contentShift-531"
       >
         <div
-          class="makeStyles-drawerHeader-473"
+          class="makeStyles-drawerHeader-529"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -3815,11 +4075,11 @@ exports[`App Route /vehicle-add authenticated 1`] = `
             data-testid="mocked-vehicleprovider"
           >
             <div
-              class="makeStyles-paper-455"
+              class="makeStyles-paper-511"
             >
               <form
                 action="{onSubmit}"
-                class="makeStyles-form-457"
+                class="makeStyles-form-513"
                 novalidate=""
               >
                 <div
@@ -3855,10 +4115,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-485 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-545 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-487"
+                        class="PrivateNotchedOutline-legendLabelled-547"
                       >
                         <span>
                           VIN
@@ -3901,10 +4161,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-485 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-545 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-487 PrivateNotchedOutline-legendNotched-488"
+                        class="PrivateNotchedOutline-legendLabelled-547 PrivateNotchedOutline-legendNotched-548"
                       >
                         <span>
                           Model
@@ -3948,10 +4208,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-485 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-545 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-487 PrivateNotchedOutline-legendNotched-488"
+                        class="PrivateNotchedOutline-legendLabelled-547 PrivateNotchedOutline-legendNotched-548"
                       >
                         <span>
                           Year
@@ -3995,10 +4255,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-485 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-545 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-487 PrivateNotchedOutline-legendNotched-488"
+                        class="PrivateNotchedOutline-legendLabelled-547 PrivateNotchedOutline-legendNotched-548"
                       >
                         <span>
                           Trim
@@ -4009,7 +4269,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   </div>
                 </div>
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-458 MuiButton-containedPrimary MuiButton-fullWidth"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-514 MuiButton-containedPrimary MuiButton-fullWidth"
                   tabindex="0"
                   type="submit"
                 >
@@ -4038,10 +4298,10 @@ exports[`App Route /vehicle-add unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-110"
+      class="makeStyles-root-122"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-111 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-123 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -4052,21 +4312,21 @@ exports[`App Route /vehicle-add unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-118"
+        class="makeStyles-content-130"
       >
         <div
-          class="makeStyles-drawerHeader-117"
+          class="makeStyles-drawerHeader-129"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-99"
+            class="makeStyles-paper-111"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-102 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-114 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -4093,10 +4353,10 @@ exports[`App Route /vehicle-status authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-598"
+      class="makeStyles-root-670"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-599 makeStyles-appBarShift-600 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-671 makeStyles-appBarShift-672 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -4107,7 +4367,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
             Vehicle FISKER123 Details
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-608 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-680 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -4123,17 +4383,17 @@ exports[`App Route /vehicle-status authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-603"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-675"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-604 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-676 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-605"
+            class="makeStyles-drawerHeader-677"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-614"
+              class="makeStyles-logo-686"
               src="fisker-badge.svg"
             />
           </div>
@@ -4301,10 +4561,10 @@ exports[`App Route /vehicle-status authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-606 makeStyles-contentShift-607"
+        class="makeStyles-content-678 makeStyles-contentShift-679"
       >
         <div
-          class="makeStyles-drawerHeader-605"
+          class="makeStyles-drawerHeader-677"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -4316,7 +4576,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               data-testid="mocked-updatesprovider"
             >
               <div
-                class="makeStyles-paper-587"
+                class="makeStyles-paper-659"
                 style="height: 700px; width: 100%;"
               >
                 <table
@@ -4341,7 +4601,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                         >
                           ID
                           <span
-                            class="makeStyles-hiddenSortSpan-610"
+                            class="makeStyles-hiddenSortSpan-682"
                           >
                             sorted descending
                           </span>
@@ -4596,10 +4856,10 @@ exports[`App Route /vehicle-status unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-270"
+      class="makeStyles-root-302"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-271 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-303 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -4610,21 +4870,21 @@ exports[`App Route /vehicle-status unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-278"
+        class="makeStyles-content-310"
       >
         <div
-          class="makeStyles-drawerHeader-277"
+          class="makeStyles-drawerHeader-309"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-259"
+            class="makeStyles-paper-291"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-262 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-294 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -4651,10 +4911,10 @@ exports[`App Route /vehicles authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-566"
+      class="makeStyles-root-634"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-567 makeStyles-appBarShift-568 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-635 makeStyles-appBarShift-636 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -4665,7 +4925,7 @@ exports[`App Route /vehicles authenticated 1`] = `
             Vehicles
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-576 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-644 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -4681,17 +4941,17 @@ exports[`App Route /vehicles authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-571"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-639"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-572 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-640 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-573"
+            class="makeStyles-drawerHeader-641"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-582"
+              class="makeStyles-logo-650"
               src="fisker-badge.svg"
             />
           </div>
@@ -4859,10 +5119,10 @@ exports[`App Route /vehicles authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-574 makeStyles-contentShift-575"
+        class="makeStyles-content-642 makeStyles-contentShift-643"
       >
         <div
-          class="makeStyles-drawerHeader-573"
+          class="makeStyles-drawerHeader-641"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -4871,14 +5131,14 @@ exports[`App Route /vehicles authenticated 1`] = `
             data-testid="mocked-vehicleprovider"
           >
             <div
-              class="makeStyles-paper-555"
+              class="makeStyles-paper-623"
               style="height: 700px; width: 100%;"
             >
               <div
-                class="MuiToolbar-root MuiToolbar-regular makeStyles-tableToolbar-581 MuiToolbar-gutters"
+                class="MuiToolbar-root MuiToolbar-regular makeStyles-tableToolbar-649 MuiToolbar-gutters"
               >
                 <div
-                  class="MuiFormControl-root makeStyles-margin-579 makeStyles-textField-580"
+                  class="MuiFormControl-root makeStyles-margin-647 makeStyles-textField-648"
                 >
                   <label
                     class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
@@ -4950,7 +5210,7 @@ exports[`App Route /vehicles authenticated 1`] = `
                       >
                         VIN
                         <span
-                          class="makeStyles-hiddenSortSpan-578"
+                          class="makeStyles-hiddenSortSpan-646"
                         >
                           sorted ascending
                         </span>
@@ -5227,10 +5487,10 @@ exports[`App Route /vehicles unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-238"
+      class="makeStyles-root-266"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-239 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-267 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -5241,21 +5501,21 @@ exports[`App Route /vehicles unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-246"
+        class="makeStyles-content-274"
       >
         <div
-          class="makeStyles-drawerHeader-245"
+          class="makeStyles-drawerHeader-273"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-227"
+            class="makeStyles-paper-255"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-230 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-258 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -5282,10 +5542,10 @@ exports[`App Route /vehicles-command authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-630"
+      class="makeStyles-root-706"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-631 makeStyles-appBarShift-632 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-707 makeStyles-appBarShift-708 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -5296,7 +5556,7 @@ exports[`App Route /vehicles-command authenticated 1`] = `
             Send Command
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-640 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-716 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -5312,17 +5572,17 @@ exports[`App Route /vehicles-command authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-635"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-711"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-636 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-712 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-637"
+            class="makeStyles-drawerHeader-713"
           >
             <img
               alt="Fisker Admin Portal"
-              class="makeStyles-logo-646"
+              class="makeStyles-logo-722"
               src="fisker-badge.svg"
             />
           </div>
@@ -5490,10 +5750,10 @@ exports[`App Route /vehicles-command authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-638 makeStyles-contentShift-639"
+        class="makeStyles-content-714 makeStyles-contentShift-715"
       >
         <div
-          class="makeStyles-drawerHeader-637"
+          class="makeStyles-drawerHeader-713"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -5502,17 +5762,17 @@ exports[`App Route /vehicles-command authenticated 1`] = `
             data-testid="mocked-vehicleprovider"
           >
             <div
-              class="makeStyles-paper-619"
+              class="makeStyles-paper-695"
               style="height: 700px; width: 100%;"
             >
               <div
-                class="MuiGrid-root makeStyles-root-630 MuiGrid-container MuiGrid-spacing-xs-2"
+                class="MuiGrid-root makeStyles-root-706 MuiGrid-container MuiGrid-spacing-xs-2"
               >
                 <div
                   class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-6"
                 >
                   <div
-                    class="MuiFormControl-root makeStyles-margin-643 makeStyles-textField-644"
+                    class="MuiFormControl-root makeStyles-margin-719 makeStyles-textField-720"
                   >
                     <label
                       class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
@@ -5562,7 +5822,7 @@ exports[`App Route /vehicles-command authenticated 1`] = `
                     </div>
                   </div>
                   <div
-                    class="makeStyles-labelInline-625"
+                    class="makeStyles-labelInline-701"
                   >
                     0 Selected
                   </div>
@@ -5572,10 +5832,10 @@ exports[`App Route /vehicles-command authenticated 1`] = `
                   style="text-align: right;"
                 >
                   <div
-                    class="makeStyles-form-621"
+                    class="makeStyles-form-697"
                   >
                     <div
-                      class="MuiFormControl-root makeStyles-formControlInline-624"
+                      class="MuiFormControl-root makeStyles-formControlInline-700"
                     >
                       <label
                         class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
@@ -5637,11 +5897,11 @@ exports[`App Route /vehicles-command authenticated 1`] = `
                         </svg>
                         <fieldset
                           aria-hidden="true"
-                          class="PrivateNotchedOutline-root-649 MuiOutlinedInput-notchedOutline"
+                          class="PrivateNotchedOutline-root-729 MuiOutlinedInput-notchedOutline"
                           style="padding-left: 8px;"
                         >
                           <legend
-                            class="PrivateNotchedOutline-legend-650"
+                            class="PrivateNotchedOutline-legend-730"
                             style="width: 0.01px;"
                           >
                             <span>
@@ -5652,7 +5912,7 @@ exports[`App Route /vehicles-command authenticated 1`] = `
                       </div>
                     </div>
                     <div
-                      class="MuiFormControl-root makeStyles-formControlInline-624"
+                      class="MuiFormControl-root makeStyles-formControlInline-700"
                     >
                       <label
                         class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
@@ -5709,11 +5969,11 @@ exports[`App Route /vehicles-command authenticated 1`] = `
                         </svg>
                         <fieldset
                           aria-hidden="true"
-                          class="PrivateNotchedOutline-root-649 MuiOutlinedInput-notchedOutline"
+                          class="PrivateNotchedOutline-root-729 MuiOutlinedInput-notchedOutline"
                           style="padding-left: 8px;"
                         >
                           <legend
-                            class="PrivateNotchedOutline-legend-650"
+                            class="PrivateNotchedOutline-legend-730"
                             style="width: 0.01px;"
                           >
                             <span>
@@ -5749,7 +6009,7 @@ exports[`App Route /vehicles-command authenticated 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-paper-619"
+                class="makeStyles-paper-695"
                 style="height: 700px; width: 100%;"
               >
                 <table
@@ -5767,14 +6027,14 @@ exports[`App Route /vehicles-command authenticated 1`] = `
                       >
                         <span
                           aria-disabled="false"
-                          class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-653 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                          class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-733 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                         >
                           <span
                             class="MuiIconButton-label"
                           >
                             <input
                               aria-label="select all desserts"
-                              class="PrivateSwitchBase-input-656"
+                              class="PrivateSwitchBase-input-736"
                               data-indeterminate="false"
                               type="checkbox"
                               value=""
@@ -5808,7 +6068,7 @@ exports[`App Route /vehicles-command authenticated 1`] = `
                         >
                           VIN
                           <span
-                            class="makeStyles-hiddenSortSpan-642"
+                            class="makeStyles-hiddenSortSpan-718"
                           >
                             sorted ascending
                           </span>
@@ -6086,10 +6346,10 @@ exports[`App Route /vehicles-command unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-302"
+      class="makeStyles-root-338"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-303 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-339 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -6100,21 +6360,21 @@ exports[`App Route /vehicles-command unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-310"
+        class="makeStyles-content-346"
       >
         <div
-          class="makeStyles-drawerHeader-309"
+          class="makeStyles-drawerHeader-345"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-291"
+            class="makeStyles-paper-327"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-294 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-330 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 b38e816..9771ada 100644
--- a/src/components/CarUpdates/Status/index.jsx
+++ b/src/components/CarUpdates/Status/index.jsx
@@ -150,8 +150,8 @@ const MainForm = () => {
                 inputProps: { "aria-label": "rows per page" },
                 native: true,
               }}
-              onChangePage={handleChangePageIndex}
-              onChangeRowsPerPage={handleChangePageSize}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
             />
           </TableRow>
         </TableFooter>
diff --git a/src/components/Cars/CarSelectionTable/index.jsx b/src/components/Cars/CarSelectionTable/index.jsx
index b37d2ba..9c6fbda 100644
--- a/src/components/Cars/CarSelectionTable/index.jsx
+++ b/src/components/Cars/CarSelectionTable/index.jsx
@@ -169,8 +169,8 @@ const CarSelectionTable = (props) => {
                 inputProps: { "aria-label": "rows per page" },
                 native: true,
               }}
-              onChangePage={handleChangePageIndex}
-              onChangeRowsPerPage={handleChangePageSize}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
             />
           </TableRow>
         </TableFooter>
diff --git a/src/components/Cars/List/index.jsx b/src/components/Cars/List/index.jsx
index 957ebf7..672e0df 100644
--- a/src/components/Cars/List/index.jsx
+++ b/src/components/Cars/List/index.jsx
@@ -163,8 +163,8 @@ const MainForm = () => {
                 inputProps: { "aria-label": "rows per page" },
                 native: true,
               }}
-              onChangePage={handleChangePageIndex}
-              onChangeRowsPerPage={handleChangePageSize}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
             />
           </TableRow>
         </TableFooter>
diff --git a/src/components/Cars/Status/index.jsx b/src/components/Cars/Status/index.jsx
index a4709c3..604b42e 100644
--- a/src/components/Cars/Status/index.jsx
+++ b/src/components/Cars/Status/index.jsx
@@ -147,8 +147,8 @@ const MainForm = () => {
                 inputProps: { "aria-label": "rows per page" },
                 native: true,
               }}
-              onChangePage={handleChangePageIndex}
-              onChangeRowsPerPage={handleChangePageSize}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
             />
           </TableRow>
         </TableFooter>
diff --git a/src/components/Contexts/__mocks__/VehicleContext.jsx b/src/components/Contexts/__mocks__/VehicleContext.jsx
index 92d1ac8..b3afd86 100644
--- a/src/components/Contexts/__mocks__/VehicleContext.jsx
+++ b/src/components/Contexts/__mocks__/VehicleContext.jsx
@@ -39,6 +39,9 @@ export const useVehicleContext = () => ({
 
     return result;
   }),
+  getLocations: jest.fn().mockResolvedValue([
+    { "altitude": 5, "longitude": 10, "latitude": 15, "vin": "TESTVIN123" },
+  ])
 });
 
 export const setBusy = (val) => {
diff --git a/src/components/Table/HeaderSortable/index.jsx b/src/components/Table/HeaderSortable/index.jsx
index 5636249..b7d37eb 100644
--- a/src/components/Table/HeaderSortable/index.jsx
+++ b/src/components/Table/HeaderSortable/index.jsx
@@ -75,7 +75,7 @@ const HeaderSortable = (props) => {
           <TableCell
             key={column.id}
             align={column.numeric ? "right" : "center"}
-            padding={column.disablePadding ? "none" : "default"}
+            padding={column.disablePadding ? "none" : "normal"}
             sortDirection={orderBy === column.id ? order : false}
           >
             {ColumnLabel(column)}
diff --git a/src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap b/src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap
index 345dbcc..2b8762a 100644
--- a/src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap
+++ b/src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap
@@ -46,10 +46,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-33 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-37 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-35"
+                class="PrivateNotchedOutline-legendLabelled-39"
               >
                 <span>
                   Package name
@@ -92,10 +92,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-33 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-37 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-35"
+                class="PrivateNotchedOutline-legendLabelled-39"
               >
                 <span>
                   Version
@@ -138,10 +138,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-33 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-37 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-35"
+                class="PrivateNotchedOutline-legendLabelled-39"
               >
                 <span>
                   Description
@@ -185,10 +185,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-33 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-37 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-35"
+                class="PrivateNotchedOutline-legendLabelled-39"
               >
                 <span>
                   Release Notes URL
diff --git a/src/components/UpdatePackages/List/index.jsx b/src/components/UpdatePackages/List/index.jsx
index 4b46b3a..61c082c 100644
--- a/src/components/UpdatePackages/List/index.jsx
+++ b/src/components/UpdatePackages/List/index.jsx
@@ -216,8 +216,8 @@ const UpdatePackagesList = () => {
                 inputProps: { "aria-label": "rows per page" },
                 native: true,
               }}
-              onChangePage={handleChangePageIndex}
-              onChangeRowsPerPage={handleChangePageSize}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
             />
           </TableRow>
         </TableFooter>
diff --git a/src/components/VehicleMap/index.jsx b/src/components/VehicleMap/index.jsx
index 5e89ab2..8b9180b 100644
--- a/src/components/VehicleMap/index.jsx
+++ b/src/components/VehicleMap/index.jsx
@@ -1,74 +1,127 @@
 import React, { useEffect, useState } from "react";
 import useStyles from "../useStyles";
-import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet'
+import L from "leaflet";
+import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
+import { Button } from "@material-ui/core";
 
 import { useUserContext } from "../Contexts/UserContext";
 import { useStatusContext } from "../Contexts/StatusContext";
 import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
 import { VehiclePopUp } from "./popup";
+import GreenCarIcon from "../../assets/green-car.png";
+import RedCarIcon from "../../assets/red-car.png";
 
 const Component = () => {
   const classes = useStyles();
   const { token } = useUserContext();
   const { setTitle } = useStatusContext();
-  const { getLocations, getState } = useVehicleContext();
+  const { getConnections, getLocations, getState } = useVehicleContext();
+
+  const REQUEST_INTERVAL = 10000;
 
   useEffect(() => {
     setTitle("");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const [center, setCenter] = useState([0, 0])
+  const [center, setCenter] = useState([0, 0]);
   const [zoom, setZoom] = useState(2);
   const [markers, setMarkers] = useState([]);
 
-  const retrieveLocations = () => {
-    return getLocations(token)
-      .then((result) => {
-        var points = result.data.map(point => [point.latitude, point.longitude, point.vin]);
-        setMarkers(points);
-        console.log(points);
-        return points
+  useEffect(() => {
+    retrieveAndStoreLocations()
+      .then(points => {
+        centerAroundMarkers(points);
       })
-      .catch(() => console.log("token error"));
+    const id = setInterval(function () {
+      retrieveAndStoreLocations();
+    }, REQUEST_INTERVAL);
+    return () => { clearInterval(id) };
+  }, []);
+
+  const retrieveAndStoreLocations = () => {
+    return getLocations(token)
+      .then(result => {
+        if (result.data != null) {
+          var points = result.data.map(point => [point.latitude, point.longitude, point.vin]);
+          setMarkers(points);
+          return points
+        }
+        return []
+      })
+      .catch(error => console.log(error));
   }
 
   const centerAroundMarkers = (markers) => {
+    if (markers == null) {
+      markers = []
+    }
     var coord = markers.reduce((coord, marker) => {
       coord[0] += marker[0] / markers.length;
       coord[1] += marker[1] / markers.length;
       return coord;
     }, [0, 0])
 
-    console.log(coord);
     setCenter(coord);
     setZoom(4);
   }
 
-  useEffect(() => {
-    retrieveLocations()
-      .then(points => {
-        centerAroundMarkers(points);
-      })
-  }, []);
+  const [connections, setConnections] = useState({});
 
   useEffect(() => {
-    const id = setInterval(function () {
-      retrieveLocations();
-    }, 10000)
-    return () => { clearInterval(id) }
-  }, []);
+    if (markers.length > 0) {
+      var vins = markers.map(marker => marker[2]);
+      getConnections(vins, token)
+        .then(connections => {
+          setConnections(connections);
+        })
+    }
+  }, [markers])
 
-  const retrieveState = (e) => {
-    var vin = e.target.options.title;
+  const [selectedVIN, setSelectedVIN] = useState(null);
+  const [carState, setCarState] = useState(null);
+
+  useEffect(() => {
+    if (selectedVIN != null) {
+      retrieveAndStoreCarState(selectedVIN);
+      const id = setInterval(function () {
+        retrieveAndStoreCarState(selectedVIN);
+      }, REQUEST_INTERVAL);
+      return () => { clearInterval(id) };
+    }
+  }, [selectedVIN]);
+
+  const selectCar = (e, vin) => {
+    e.preventDefault();
+    setSelectedVIN(vin);
+  }
+
+  const retrieveAndStoreCarState = (vin) => {
     getState(token, vin)
       .then(results => {
-        console.log(results);
-        setSelected({ ...results.data, vin: vin });
+        setCarState({ ...results.data, vin: vin });
       });
   }
 
-  const [selected, setSelected] = useState(null);
+  const handleClose = () => {
+    setSelectedVIN(null);
+    setCarState(null);
+  };
+
+  function getCarIcon(vin) {
+    var icon = RedCarIcon;
+
+    if (connections[vin]) {
+      icon = GreenCarIcon;
+    } else {
+      icon = RedCarIcon;
+    }
+
+    return new L.Icon({
+      iconUrl: icon,
+      iconAnchor: [15, 0]
+    });
+  }
 
   return (
     <MapContainer
@@ -83,45 +136,60 @@ const Component = () => {
         attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <ChangeView center={center} zoom={zoom} />
+      <CenterFocus center={center} zoom={zoom} />
 
-      {
-        markers.map((marker) => (
-          <Marker
-            key={marker[2]}
-            position={[marker[0], marker[1]]}
-            title={marker[2]}
-            opacity={0.9}
-            eventHandlers={{
-              click: retrieveState
-            }}
-          >
-            <Popup>
-              {marker[2]} <br /> see more
-            </Popup>
-          </Marker>
-        ))
+      {markers.map((marker) => (
+        <Marker
+          icon={getCarIcon(marker[2])}
+          key={marker[2]}
+          position={[marker[0], marker[1]]}
+          title={marker[2]}
+          opacity={0.9}
+        >
+          <Popup>
+            <div align="center">
+              <p className={classes.markerTitle}><b>{marker[2]}</b></p>
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                onClick={e => selectCar(e, marker[2])}
+              >
+                View Stats
+              </Button>
+            </div>
+          </Popup>
+        </Marker>
+      ))
       }
 
       {
-        selected != null && (
+        carState ? (
           <VehiclePopUp
-            vin={selected.vin}
-            online={selected.online}
-            doors={selected.doors}
-            location={selected.location}
-            windows={selected.windows}
+            vin={carState.vin}
+            online={carState.online}
+            battery={carState.battery}
+            doors={carState.doors}
+            location={carState.location}
+            windows={carState.windows}
+            className={classes.popup}
+            onClose={handleClose}
           />
-        )
+        ) : null
       }
     </MapContainer >
   );
 };
 
-const ChangeView = ({ center, zoom }) => {
+const CenterFocus = ({ center, zoom }) => {
   const map = useMap();
-  map.flyTo(center, zoom, { duration: 1.5 });
-  console.log("centered");
+  useEffect(() => {
+    if (center[0] === 0 && center[1] === 0) {
+      center = [0, 0]
+      zoom = 2
+    }
+    map.flyTo(center, zoom, { duration: 1.5 });
+  }, [center, zoom]);
   return null;
 }
 
diff --git a/src/components/VehicleMap/popup.jsx b/src/components/VehicleMap/popup.jsx
index 4c7c5d8..6cacd2a 100644
--- a/src/components/VehicleMap/popup.jsx
+++ b/src/components/VehicleMap/popup.jsx
@@ -1,22 +1,74 @@
 import React from "react";
+import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import MuiDialogTitle from '@material-ui/core/DialogTitle';
+import MuiDialogContent from '@material-ui/core/DialogContent';
+import MuiDialogActions from '@material-ui/core/DialogActions';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+import Typography from '@material-ui/core/Typography';
+
+import useStyles from "../useStyles";
+
+const VehiclePopUp = (props) => {
+    const classes = useStyles();
+    const { vin, online, battery, doors, location, windows, onClose } = props;
 
-const VehiclePopUp = ({ vin, online, doors, location, windows }) => {
-    console.log(location);
     return (
-        <Dialog aria-labelledby="simple-dialog-title" open={true}>
-            <DialogTitle>{vin}</DialogTitle>
-            <p>{online.toString()}</p>
-            {/* {doors != null && (
-                <ul>
-                    {doors.forEach((value, key) => (<li>{key}: {value.toString()}</li>))}
-                </ul>
-            )}
-            <ul>
-                {location != null && location.forEach((value, key) => (<li>{key}: {value.toString()}</li>))}
-            </ul> */}
-        </Dialog>
+        <Dialog
+            fullWidth
+            classes={{ paper: classes.popUp }}
+            open={true}
+            onClose={onClose}
+        >
+            <DialogTitle align="center" onClose={onClose}>{vin}</DialogTitle>
+            <div align="center" className={classes.popUpContent}>
+                <p><b>Connected</b>: {online.toString()}</p>
+                {online && (
+                    <div>
+                        {battery != null && (
+                            <p><b>battery</b>: {battery.percent}%</p>
+                        )}
+                        {doors != null && (
+                            <div>
+                                <h3>Doors</h3>
+                                {Object.entries(doors).map((value) => (<p><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
+                            </div>
+                        )}
+                        {windows != null && (
+                            <div>
+                                <h3>Windows</h3>
+                                {Object.entries(windows).map((value) => (<p><b>{value[0]}</b>: {value[1] ? "open" : "closed"}</p>))}
+                            </div>
+                        )}
+                        {location != null && (
+                            <div>
+                                <h3>Location</h3>
+                                {Object.entries(location).map((value) => (<p><b>{value[0]}</b>: {value[1]}</p>))}
+                            </div>
+                        )}
+                    </div>
+                )}
+                {(!online || (battery == null && doors == null && location == null && windows == null)) && (
+                    <p>No vehicle data to display.</p>
+                )}
+            </div>
+        </Dialog >
+    );
+};
+
+const DialogTitle = (props) => {
+    const { children, onClose, ...other } = props;
+    const classes = useStyles();
+    return (
+        <MuiDialogTitle disableTypography className={classes.root} {...other}>
+            <Typography variant="h6">{children}</Typography>
+            {onClose ? (
+                <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
+                    <CloseIcon />
+                </IconButton>
+            ) : null}
+        </MuiDialogTitle>
     );
 };
 
diff --git a/src/components/useStyles.jsx b/src/components/useStyles.jsx
index 8982fe9..cdaac37 100644
--- a/src/components/useStyles.jsx
+++ b/src/components/useStyles.jsx
@@ -173,6 +173,28 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
     paddingTop: "56.25%",
   },
+  root: {
+    margin: 0,
+    padding: theme.spacing(2),
+  },
+  closeButton: {
+    position: 'absolute',
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+    color: theme.palette.grey[500],
+  },
+  markerTitle: {
+    margin: 5,
+  },
+  popUp: {
+    minHeight: "15vh",
+  },
+  popUpContent: {
+    "& p": {
+      margin: 0,
+    },
+    paddingBottom: "2vh",
+  },
 }));
 
 export default useStyles;
diff --git a/src/services/__mocks__/vehicles.js b/src/services/__mocks__/vehicles.js
index 1f6662b..b64d0df 100644
--- a/src/services/__mocks__/vehicles.js
+++ b/src/services/__mocks__/vehicles.js
@@ -11,7 +11,7 @@ const data = [
 
 const vehiclesAPI = {
   getVehicles: async (search, token) => { return { data }; },
-  addVehicle: async (vehicle, token) => { 
+  addVehicle: async (vehicle, token) => {
     data.push(vehicle);
     return vehicle;
   },
@@ -38,7 +38,10 @@ const vehiclesAPI = {
     });
 
     return result;
-  }
+  },
+  getLocations: jest.fn().mockResolvedValue([
+    { "altitude": 5, "longitude": 10, "latitude": 15, "vin": "TESTVIN123" },
+  ]),
 };
 
 export default vehiclesAPI;