From fe6739a7364242a2523f3cf578fbb0ea42d0e87d Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Fri, 7 May 2021 15:27:14 -0700
Subject: [PATCH] CEC-231 Bulk car selection control (#38)

* Bulk car selection control

* Tweak control alignment
---
 .vscode/launch.json                           |  30 +
 src/components/App/App.test.js                |  14 +-
 .../App/__snapshots__/App.test.js.snap        | 865 ++++++++++--------
 src/components/CarUpdates/Deploy/index.jsx    |  80 +-
 src/components/Cars/CarSelection/index.jsx    | 136 +++
 src/components/Contexts/UpdatesContext.jsx    |   2 +-
 .../Contexts/UpdatesContext.test.jsx          |   2 +-
 src/components/Contexts/VehicleContext.jsx    |  28 +
 .../Contexts/__mocks__/VehicleContext.jsx     |  10 +
 src/components/Layouts/SideMenu.jsx           |   4 +-
 .../__snapshots__/SideMenu.test.jsx.snap      |   4 +-
 .../Create/__snapshots__/Create.test.js.snap  |  16 +-
 src/components/useStyles.jsx                  |   9 +
 src/services/__mocks__/vehicles.js            |  10 +
 src/services/vehicles.js                      |  27 +-
 15 files changed, 743 insertions(+), 494 deletions(-)
 create mode 100644 .vscode/launch.json
 create mode 100644 src/components/Cars/CarSelection/index.jsx

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..7a61a6f
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,30 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-node",
+      "request": "launch",
+      "name": "Launch Program",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "program": "${file}"
+    },
+    {
+      "name": "Debug CRA Tests",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
+      "args": ["test", "--runInBand", "--no-cache", "--watchAll=false"],
+      "cwd": "${workspaceRoot}",
+      "protocol": "inspector",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "env": { "CI": "true" },
+      "disableOptimisticBPs": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js
index f819255..2a898f9 100644
--- a/src/components/App/App.test.js
+++ b/src/components/App/App.test.js
@@ -117,17 +117,12 @@ describe("App", () => {
     await check("/update/1", "h1", "Edit Update Package 1");
   });
 
-  it("Route /carupdate-deploy authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    await check("/carupdate-deploy/1", "h1", "Deploy   [1]");
-  });
-
   it("Route /carupdate-status authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
     await check("/carupdate-status/1", "h1", "");
   });
 
-  it("Route /vehicles authenticated", async () => {
+ it("Route /vehicles authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
     await check("/vehicles", "h1", "Vehicles");
   });
@@ -145,4 +140,9 @@ describe("App", () => {
     setToken(TEST_AUTH_OBJECT);
     await check("/page-not-found", "h1", "Page Not Found");
   });
-})
\ No newline at end of file
+
+  it("Route /carupdate-deploy authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    await check("/carupdate-deploy/1", "h1", "Deploy   [1]");
+  });
+});
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index e01a2c4..3d8e35f 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -6,17 +6,17 @@ exports[`App Route / authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-242"
+      class="makeStyles-root-264"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-243 makeStyles-appBarShift-244 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-265 makeStyles-appBarShift-266 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-245 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-267 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -44,7 +44,7 @@ exports[`App Route / authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-252 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-274 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -60,13 +60,13 @@ exports[`App Route / authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-247"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-269"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-248 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-270 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-249"
+            class="makeStyles-drawerHeader-271"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -156,7 +156,7 @@ exports[`App Route / authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Create Packages
+                    Create Package
                   </span>
                 </div>
                 <span
@@ -200,7 +200,7 @@ exports[`App Route / authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Add Vehicles
+                    Add Vehicle
                   </span>
                 </div>
                 <span
@@ -212,16 +212,16 @@ exports[`App Route / authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-250 makeStyles-contentShift-251"
+        class="makeStyles-content-272 makeStyles-contentShift-273"
       >
         <div
-          class="makeStyles-drawerHeader-249"
+          class="makeStyles-drawerHeader-271"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-233"
+            class="makeStyles-paper-253"
           >
             <h1
               class="MuiTypography-root MuiTypography-h5"
@@ -242,10 +242,10 @@ exports[`App Route / unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-12"
+      class="makeStyles-root-14"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-13 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-15 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -258,10 +258,10 @@ exports[`App Route / unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-20"
+        class="makeStyles-content-22"
       >
         <div
-          class="makeStyles-drawerHeader-19"
+          class="makeStyles-drawerHeader-21"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -299,17 +299,17 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-392"
+      class="makeStyles-root-551"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-393 makeStyles-appBarShift-394 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-552 makeStyles-appBarShift-553 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-395 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-554 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -337,7 +337,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-402 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-561 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -353,13 +353,13 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-397"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-556"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-398 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-557 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-399"
+            class="makeStyles-drawerHeader-558"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -449,7 +449,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Create Packages
+                    Create Package
                   </span>
                 </div>
                 <span
@@ -493,7 +493,7 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Add Vehicles
+                    Add Vehicle
                   </span>
                 </div>
                 <span
@@ -505,193 +505,270 @@ exports[`App Route /carupdate-deploy authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-400 makeStyles-contentShift-401"
+        class="makeStyles-content-559 makeStyles-contentShift-560"
       >
         <div
-          class="makeStyles-drawerHeader-399"
+          class="makeStyles-drawerHeader-558"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            data-testid="mocked-vehicleprovider"
+            data-testid="mocked-updatesprovider"
           >
             <div
-              data-testid="mocked-updatesprovider"
+              class="makeStyles-paper-540"
             >
-              <div
-                class="makeStyles-paper-383"
+              <h1
+                class="MuiTypography-root MuiTypography-h5"
               >
-                <h1
-                  class="MuiTypography-root MuiTypography-h5"
-                >
-                  Deploy 
-                    [1]
-                </h1>
-                <form
-                  action="{onSubmit}"
-                  class="makeStyles-form-385"
-                  novalidate=""
+                Deploy 
+                  [1]
+              </h1>
+              <form
+                action="{onSubmit}"
+                class="makeStyles-form-542"
+                novalidate=""
+              >
+                <div
+                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
                 >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-filled"
+                    data-shrink="false"
+                  >
+                    Create Date
+                  </label>
                   <div
-                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                    class="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiFilledInput-marginDense"
                   >
-                    <label
-                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-filled"
-                      data-shrink="false"
-                    >
-                      Create Date
-                    </label>
-                    <div
-                      class="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiFilledInput-marginDense"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input MuiFilledInput-input MuiInputBase-inputMarginDense MuiFilledInput-inputMarginDense"
-                        readonly=""
-                        type="text"
-                        value=""
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-                  >
-                    <label
-                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-filled"
-                      data-shrink="false"
-                      for="link"
-                      id="link-label"
-                    >
-                      Package link
-                    </label>
-                    <div
-                      class="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiFilledInput-marginDense"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input MuiFilledInput-input MuiInputBase-inputMarginDense MuiFilledInput-inputMarginDense"
-                        id="link"
-                        name="link"
-                        readonly=""
-                        type="text"
-                        value=""
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-                  >
-                    <label
-                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-filled"
-                      data-shrink="false"
-                      for="description"
-                      id="description-label"
-                    >
-                      Description
-                    </label>
-                    <div
-                      class="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline MuiFilledInput-multiline MuiInputBase-marginDense MuiFilledInput-marginDense"
-                    >
-                      <textarea
-                        aria-invalid="false"
-                        class="MuiInputBase-input MuiFilledInput-input MuiInputBase-inputMultiline MuiFilledInput-inputMultiline MuiInputBase-inputMarginDense MuiFilledInput-inputMarginDense"
-                        id="description"
-                        name="description"
-                        placeholder="Package description"
-                        readonly=""
-                        rows="4"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
-                  >
-                    <label
-                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-filled"
-                      data-shrink="false"
-                      for="releasenotes"
-                      id="releasenotes-label"
-                    >
-                      Release Notes URL
-                    </label>
-                    <div
-                      class="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiFilledInput-marginDense"
-                    >
-                      <input
-                        aria-invalid="false"
-                        class="MuiInputBase-input MuiFilledInput-input MuiInputBase-inputMarginDense MuiFilledInput-inputMarginDense"
-                        id="releasenotes"
-                        name="releasenotes"
-                        placeholder="Release Notes URL"
-                        readonly=""
-                        type="text"
-                        value=""
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="MuiFormControl-root makeStyles-formControl-387 MuiFormControl-fullWidth"
-                  >
-                    <label
-                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
-                      data-shrink="false"
-                      for="vehicles"
-                    >
-                      Vehicles
-                    </label>
-                    <div
-                      class="MuiInputBase-root MuiInput-root MuiInput-underline makeStyles-menuProps-390 MuiInputBase-formControl MuiInput-formControl"
-                    >
-                      <div
-                        aria-haspopup="listbox"
-                        aria-labelledby="vehicles"
-                        class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiInput-input"
-                        id="vehicles"
-                        role="button"
-                        tabindex="0"
-                      >
-                        <span>
-                          ​
-                        </span>
-                      </div>
-                      <input
-                        aria-hidden="true"
-                        class="MuiSelect-nativeInput"
-                        id="select-multiple-chip"
-                        name="vehicles"
-                        placeholder="Select vehicles"
-                        tabindex="-1"
-                        value=""
-                      />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M7 10l5 5 5-5z"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                  <button
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-386 MuiButton-containedPrimary MuiButton-fullWidth"
-                    tabindex="0"
-                    type="submit"
-                  >
-                    <span
-                      class="MuiButton-label"
-                    >
-                      Deploy
-                    </span>
-                    <span
-                      class="MuiTouchRipple-root"
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiFilledInput-input MuiInputBase-inputMarginDense MuiFilledInput-inputMarginDense"
+                      readonly=""
+                      type="text"
+                      value=""
                     />
-                  </button>
-                </form>
-              </div>
+                  </div>
+                </div>
+                <div
+                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-filled"
+                    data-shrink="false"
+                    for="link"
+                    id="link-label"
+                  >
+                    Package link
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiFilledInput-marginDense"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiFilledInput-input MuiInputBase-inputMarginDense MuiFilledInput-inputMarginDense"
+                      id="link"
+                      name="link"
+                      readonly=""
+                      type="text"
+                      value=""
+                    />
+                  </div>
+                </div>
+                <div
+                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-filled"
+                    data-shrink="false"
+                    for="description"
+                    id="description-label"
+                  >
+                    Description
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline MuiFilledInput-multiline MuiInputBase-marginDense MuiFilledInput-marginDense"
+                  >
+                    <textarea
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiFilledInput-input MuiInputBase-inputMultiline MuiFilledInput-inputMultiline MuiInputBase-inputMarginDense MuiFilledInput-inputMarginDense"
+                      id="description"
+                      name="description"
+                      placeholder="Package description"
+                      readonly=""
+                      rows="4"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-filled"
+                    data-shrink="false"
+                    for="releasenotes"
+                    id="releasenotes-label"
+                  >
+                    Release Notes URL
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiFilledInput-root MuiFilledInput-underline MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiFilledInput-marginDense"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiFilledInput-input MuiInputBase-inputMarginDense MuiFilledInput-inputMarginDense"
+                      id="releasenotes"
+                      name="releasenotes"
+                      placeholder="Release Notes URL"
+                      readonly=""
+                      type="text"
+                      value=""
+                    />
+                  </div>
+                </div>
+                <div
+                  data-testid="mocked-vehicleprovider"
+                >
+                  <div
+                    class="makeStyles-form-542"
+                  >
+                    <div
+                      class="MuiFormControl-root makeStyles-formControlInline-545"
+                    >
+                      <label
+                        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                        data-shrink="true"
+                        for="car-model"
+                        style="background-color: White;"
+                      >
+                        Model
+                      </label>
+                      <div
+                        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+                      >
+                        <select
+                          aria-invalid="false"
+                          class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
+                          id="car-model"
+                          name="car-model"
+                        >
+                          <option
+                            value="Ocean"
+                          >
+                            Ocean
+                          </option>
+                          <option
+                            value="PEAR"
+                          >
+                            PEAR
+                          </option>
+                        </select>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                        <fieldset
+                          aria-hidden="true"
+                          class="PrivateNotchedOutline-root-563 MuiOutlinedInput-notchedOutline"
+                          style="padding-left: 8px;"
+                        >
+                          <legend
+                            class="PrivateNotchedOutline-legend-564"
+                            style="width: 0.01px;"
+                          >
+                            <span>
+                              ​
+                            </span>
+                          </legend>
+                        </fieldset>
+                      </div>
+                    </div>
+                    <div
+                      class="MuiFormControl-root makeStyles-formControlInline-545"
+                    >
+                      <label
+                        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                        data-shrink="true"
+                        for="car-year"
+                        style="background-color: White;"
+                      >
+                        Year
+                      </label>
+                      <div
+                        class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+                      >
+                        <select
+                          aria-invalid="false"
+                          class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
+                          id="car-year"
+                          name="car-year"
+                        >
+                          <option
+                            value="2023"
+                          >
+                            2023
+                          </option>
+                          <option
+                            value="2024"
+                          >
+                            2024
+                          </option>
+                        </select>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                        <fieldset
+                          aria-hidden="true"
+                          class="PrivateNotchedOutline-root-563 MuiOutlinedInput-notchedOutline"
+                          style="padding-left: 8px;"
+                        >
+                          <legend
+                            class="PrivateNotchedOutline-legend-564"
+                            style="width: 0.01px;"
+                          >
+                            <span>
+                              ​
+                            </span>
+                          </legend>
+                        </fieldset>
+                      </div>
+                    </div>
+                    <div
+                      class="makeStyles-labelInline-546"
+                    >
+                      No Cars Selected
+                    </div>
+                  </div>
+                </div>
+                <button
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-543 MuiButton-containedPrimary MuiButton-fullWidth"
+                  tabindex="0"
+                  type="submit"
+                >
+                  <span
+                    class="MuiButton-label"
+                  >
+                    Deploy
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </button>
+              </form>
             </div>
           </div>
         </main>
@@ -707,10 +784,10 @@ exports[`App Route /carupdate-deploy unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-150"
+      class="makeStyles-root-164"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-151 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-165 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -723,21 +800,21 @@ exports[`App Route /carupdate-deploy unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-158"
+        class="makeStyles-content-172"
       >
         <div
-          class="makeStyles-drawerHeader-157"
+          class="makeStyles-drawerHeader-171"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-141"
+            class="makeStyles-paper-153"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-144 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-156 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -764,17 +841,17 @@ exports[`App Route /carupdate-status authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-415"
+      class="makeStyles-root-426"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-416 makeStyles-appBarShift-417 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-427 makeStyles-appBarShift-428 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-418 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-429 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -802,7 +879,7 @@ exports[`App Route /carupdate-status authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-425 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-436 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -818,13 +895,13 @@ exports[`App Route /carupdate-status authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-420"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-431"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-421 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-432 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-422"
+            class="makeStyles-drawerHeader-433"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -914,7 +991,7 @@ exports[`App Route /carupdate-status authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Create Packages
+                    Create Package
                   </span>
                 </div>
                 <span
@@ -958,7 +1035,7 @@ exports[`App Route /carupdate-status authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Add Vehicles
+                    Add Vehicle
                   </span>
                 </div>
                 <span
@@ -970,10 +1047,10 @@ exports[`App Route /carupdate-status authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-423 makeStyles-contentShift-424"
+        class="makeStyles-content-434 makeStyles-contentShift-435"
       >
         <div
-          class="makeStyles-drawerHeader-422"
+          class="makeStyles-drawerHeader-433"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -982,7 +1059,7 @@ exports[`App Route /carupdate-status authenticated 1`] = `
             data-testid="mocked-updatesprovider"
           >
             <div
-              class="makeStyles-paper-406"
+              class="makeStyles-paper-415"
               style="height: 700px; width: 100%;"
             >
               <h1
@@ -1172,10 +1249,10 @@ exports[`App Route /carupdate-status unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-173"
+      class="makeStyles-root-189"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-174 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-190 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -1188,21 +1265,21 @@ exports[`App Route /carupdate-status unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-181"
+        class="makeStyles-content-197"
       >
         <div
-          class="makeStyles-drawerHeader-180"
+          class="makeStyles-drawerHeader-196"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-164"
+            class="makeStyles-paper-178"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-167 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-181 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -1229,17 +1306,17 @@ exports[`App Route /home authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-265"
+      class="makeStyles-root-289"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-266 makeStyles-appBarShift-267 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-290 makeStyles-appBarShift-291 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-268 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-292 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -1267,7 +1344,7 @@ exports[`App Route /home authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-275 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-299 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -1283,13 +1360,13 @@ exports[`App Route /home authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-270"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-294"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-271 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-295 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-272"
+            class="makeStyles-drawerHeader-296"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -1379,7 +1456,7 @@ exports[`App Route /home authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Create Packages
+                    Create Package
                   </span>
                 </div>
                 <span
@@ -1423,7 +1500,7 @@ exports[`App Route /home authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Add Vehicles
+                    Add Vehicle
                   </span>
                 </div>
                 <span
@@ -1435,16 +1512,16 @@ exports[`App Route /home authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-273 makeStyles-contentShift-274"
+        class="makeStyles-content-297 makeStyles-contentShift-298"
       >
         <div
-          class="makeStyles-drawerHeader-272"
+          class="makeStyles-drawerHeader-296"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-256"
+            class="makeStyles-paper-278"
           >
             <h1
               class="MuiTypography-root MuiTypography-h5"
@@ -1465,10 +1542,10 @@ exports[`App Route /home unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-35"
+      class="makeStyles-root-39"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-36 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-40 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -1481,21 +1558,21 @@ exports[`App Route /home unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-43"
+        class="makeStyles-content-47"
       >
         <div
-          class="makeStyles-drawerHeader-42"
+          class="makeStyles-drawerHeader-46"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-26"
+            class="makeStyles-paper-28"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-29 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-31 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -1522,17 +1599,17 @@ exports[`App Route /package-upload authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-288"
+      class="makeStyles-root-314"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-289 makeStyles-appBarShift-290 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-315 makeStyles-appBarShift-316 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-291 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-317 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -1560,7 +1637,7 @@ exports[`App Route /package-upload authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-298 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-324 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -1576,13 +1653,13 @@ exports[`App Route /package-upload authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-293"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-319"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-294 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-320 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-295"
+            class="makeStyles-drawerHeader-321"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -1672,7 +1749,7 @@ exports[`App Route /package-upload authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Create Packages
+                    Create Package
                   </span>
                 </div>
                 <span
@@ -1716,7 +1793,7 @@ exports[`App Route /package-upload authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Add Vehicles
+                    Add Vehicle
                   </span>
                 </div>
                 <span
@@ -1728,10 +1805,10 @@ exports[`App Route /package-upload authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-296 makeStyles-contentShift-297"
+        class="makeStyles-content-322 makeStyles-contentShift-323"
       >
         <div
-          class="makeStyles-drawerHeader-295"
+          class="makeStyles-drawerHeader-321"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -1740,7 +1817,7 @@ exports[`App Route /package-upload authenticated 1`] = `
             data-testid="mocked-fileuploadprovider"
           >
             <div
-              class="makeStyles-paper-279"
+              class="makeStyles-paper-303"
             >
               <h1
                 class="MuiTypography-root MuiTypography-h5"
@@ -1749,7 +1826,7 @@ exports[`App Route /package-upload authenticated 1`] = `
               </h1>
               <form
                 action="{onSubmit}"
-                class="makeStyles-form-281"
+                class="makeStyles-form-305"
                 novalidate=""
               >
                 <div
@@ -1785,10 +1862,10 @@ exports[`App Route /package-upload authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-300 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-326 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-302"
+                        class="PrivateNotchedOutline-legendLabelled-328"
                       >
                         <span>
                           Package name
@@ -1831,10 +1908,10 @@ exports[`App Route /package-upload authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-300 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-326 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-302"
+                        class="PrivateNotchedOutline-legendLabelled-328"
                       >
                         <span>
                           Version
@@ -1877,10 +1954,10 @@ exports[`App Route /package-upload authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-300 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-326 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-302"
+                        class="PrivateNotchedOutline-legendLabelled-328"
                       >
                         <span>
                           Description
@@ -1924,10 +2001,10 @@ exports[`App Route /package-upload authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-300 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-326 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-302"
+                        class="PrivateNotchedOutline-legendLabelled-328"
                       >
                         <span>
                           Release Notes URL
@@ -1969,7 +2046,7 @@ exports[`App Route /package-upload authenticated 1`] = `
                   </div>
                 </div>
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-282 MuiButton-containedPrimary MuiButton-fullWidth"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-306 MuiButton-containedPrimary MuiButton-fullWidth"
                   tabindex="0"
                   type="submit"
                 >
@@ -1998,10 +2075,10 @@ exports[`App Route /package-upload unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-58"
+      class="makeStyles-root-64"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-59 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-65 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -2014,21 +2091,21 @@ exports[`App Route /package-upload unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-66"
+        class="makeStyles-content-72"
       >
         <div
-          class="makeStyles-drawerHeader-65"
+          class="makeStyles-drawerHeader-71"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-49"
+            class="makeStyles-paper-53"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-52 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-56 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -2055,17 +2132,17 @@ exports[`App Route /page-not-found authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-507"
+      class="makeStyles-root-526"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-508 makeStyles-appBarShift-509 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-527 makeStyles-appBarShift-528 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-510 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-529 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -2093,7 +2170,7 @@ exports[`App Route /page-not-found authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-517 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-536 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -2109,13 +2186,13 @@ exports[`App Route /page-not-found authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-512"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-531"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-513 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-532 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-514"
+            class="makeStyles-drawerHeader-533"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -2205,7 +2282,7 @@ exports[`App Route /page-not-found authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Create Packages
+                    Create Package
                   </span>
                 </div>
                 <span
@@ -2249,7 +2326,7 @@ exports[`App Route /page-not-found authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Add Vehicles
+                    Add Vehicle
                   </span>
                 </div>
                 <span
@@ -2261,16 +2338,16 @@ exports[`App Route /page-not-found authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-515 makeStyles-contentShift-516"
+        class="makeStyles-content-534 makeStyles-contentShift-535"
       >
         <div
-          class="makeStyles-drawerHeader-514"
+          class="makeStyles-drawerHeader-533"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-498"
+            class="makeStyles-paper-515"
           >
             <h1
               class="MuiTypography-root MuiTypography-h2"
@@ -2291,10 +2368,10 @@ exports[`App Route /page-not-found unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-484"
+      class="makeStyles-root-501"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-485 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-502 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -2307,16 +2384,16 @@ exports[`App Route /page-not-found unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-492"
+        class="makeStyles-content-509"
       >
         <div
-          class="makeStyles-drawerHeader-491"
+          class="makeStyles-drawerHeader-508"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-475"
+            class="makeStyles-paper-490"
           >
             <h1
               class="MuiTypography-root MuiTypography-h2"
@@ -2337,17 +2414,17 @@ exports[`App Route /update authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-365"
+      class="makeStyles-root-397"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-366 makeStyles-appBarShift-367 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-398 makeStyles-appBarShift-399 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-368 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-400 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -2375,7 +2452,7 @@ exports[`App Route /update authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-375 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-407 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -2391,13 +2468,13 @@ exports[`App Route /update authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-370"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-402"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-371 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-403 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-372"
+            class="makeStyles-drawerHeader-404"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -2487,7 +2564,7 @@ exports[`App Route /update authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Create Packages
+                    Create Package
                   </span>
                 </div>
                 <span
@@ -2531,7 +2608,7 @@ exports[`App Route /update authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Add Vehicles
+                    Add Vehicle
                   </span>
                 </div>
                 <span
@@ -2543,10 +2620,10 @@ exports[`App Route /update authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-373 makeStyles-contentShift-374"
+        class="makeStyles-content-405 makeStyles-contentShift-406"
       >
         <div
-          class="makeStyles-drawerHeader-372"
+          class="makeStyles-drawerHeader-404"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -2555,7 +2632,7 @@ exports[`App Route /update authenticated 1`] = `
             data-testid="mocked-updatesprovider"
           >
             <div
-              class="makeStyles-paper-356"
+              class="makeStyles-paper-386"
             >
               <h1
                 class="MuiTypography-root MuiTypography-h5"
@@ -2565,7 +2642,7 @@ exports[`App Route /update authenticated 1`] = `
               </h1>
               <form
                 action="{onSubmit}"
-                class="makeStyles-form-358"
+                class="makeStyles-form-388"
                 novalidate=""
               >
                 <div
@@ -2623,10 +2700,10 @@ exports[`App Route /update authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-377 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-409 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-379"
+                        class="PrivateNotchedOutline-legendLabelled-411"
                       >
                         <span>
                           Package name
@@ -2669,10 +2746,10 @@ exports[`App Route /update authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-377 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-409 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-379"
+                        class="PrivateNotchedOutline-legendLabelled-411"
                       >
                         <span>
                           Version
@@ -2715,10 +2792,10 @@ exports[`App Route /update authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-377 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-409 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-379"
+                        class="PrivateNotchedOutline-legendLabelled-411"
                       >
                         <span>
                           Package link
@@ -2753,10 +2830,10 @@ exports[`App Route /update authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-377 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-409 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-379"
+                        class="PrivateNotchedOutline-legendLabelled-411"
                       >
                         <span>
                           Description
@@ -2791,10 +2868,10 @@ exports[`App Route /update authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-377 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-409 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-379"
+                        class="PrivateNotchedOutline-legendLabelled-411"
                       >
                         <span>
                           Release Notes URL
@@ -2804,7 +2881,7 @@ exports[`App Route /update authenticated 1`] = `
                   </div>
                 </div>
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-359 MuiButton-containedPrimary MuiButton-fullWidth"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-389 MuiButton-containedPrimary MuiButton-fullWidth"
                   tabindex="0"
                   type="submit"
                 >
@@ -2833,10 +2910,10 @@ exports[`App Route /update unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-127"
+      class="makeStyles-root-139"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-128 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-140 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -2849,21 +2926,21 @@ exports[`App Route /update unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-135"
+        class="makeStyles-content-147"
       >
         <div
-          class="makeStyles-drawerHeader-134"
+          class="makeStyles-drawerHeader-146"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-118"
+            class="makeStyles-paper-128"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-121 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-131 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -2890,17 +2967,17 @@ exports[`App Route /updates authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-342"
+      class="makeStyles-root-372"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-343 makeStyles-appBarShift-344 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-373 makeStyles-appBarShift-374 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-345 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-375 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -2928,7 +3005,7 @@ exports[`App Route /updates authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-352 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-382 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -2944,13 +3021,13 @@ exports[`App Route /updates authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-347"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-377"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-348 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-378 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-349"
+            class="makeStyles-drawerHeader-379"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -3040,7 +3117,7 @@ exports[`App Route /updates authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Create Packages
+                    Create Package
                   </span>
                 </div>
                 <span
@@ -3084,7 +3161,7 @@ exports[`App Route /updates authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Add Vehicles
+                    Add Vehicle
                   </span>
                 </div>
                 <span
@@ -3096,10 +3173,10 @@ exports[`App Route /updates authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-350 makeStyles-contentShift-351"
+        class="makeStyles-content-380 makeStyles-contentShift-381"
       >
         <div
-          class="makeStyles-drawerHeader-349"
+          class="makeStyles-drawerHeader-379"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -3108,7 +3185,7 @@ exports[`App Route /updates authenticated 1`] = `
             data-testid="mocked-updatesprovider"
           >
             <div
-              class="makeStyles-paper-333"
+              class="makeStyles-paper-361"
               style="height: 700px; width: 100%;"
             >
               <h1
@@ -3299,10 +3376,10 @@ exports[`App Route /updates unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-104"
+      class="makeStyles-root-114"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-105 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-115 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -3315,21 +3392,21 @@ exports[`App Route /updates unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-112"
+        class="makeStyles-content-122"
       >
         <div
-          class="makeStyles-drawerHeader-111"
+          class="makeStyles-drawerHeader-121"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-95"
+            class="makeStyles-paper-103"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-98 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-106 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -3356,17 +3433,17 @@ exports[`App Route /vehicle-add authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-315"
+      class="makeStyles-root-343"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-316 makeStyles-appBarShift-317 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-344 makeStyles-appBarShift-345 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-318 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-346 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -3394,7 +3471,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-325 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-353 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -3410,13 +3487,13 @@ exports[`App Route /vehicle-add authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-320"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-348"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-321 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-349 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-322"
+            class="makeStyles-drawerHeader-350"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -3506,7 +3583,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Create Packages
+                    Create Package
                   </span>
                 </div>
                 <span
@@ -3550,7 +3627,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Add Vehicles
+                    Add Vehicle
                   </span>
                 </div>
                 <span
@@ -3562,10 +3639,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-323 makeStyles-contentShift-324"
+        class="makeStyles-content-351 makeStyles-contentShift-352"
       >
         <div
-          class="makeStyles-drawerHeader-322"
+          class="makeStyles-drawerHeader-350"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -3574,7 +3651,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
             data-testid="mocked-vehicleprovider"
           >
             <div
-              class="makeStyles-paper-306"
+              class="makeStyles-paper-332"
             >
               <h1
                 class="MuiTypography-root MuiTypography-h5"
@@ -3583,7 +3660,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
               </h1>
               <form
                 action="{onSubmit}"
-                class="makeStyles-form-308"
+                class="makeStyles-form-334"
                 novalidate=""
               >
                 <div
@@ -3619,10 +3696,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-327 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-355 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-329"
+                        class="PrivateNotchedOutline-legendLabelled-357"
                       >
                         <span>
                           VIN
@@ -3665,10 +3742,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-327 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-355 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-329 PrivateNotchedOutline-legendNotched-330"
+                        class="PrivateNotchedOutline-legendLabelled-357 PrivateNotchedOutline-legendNotched-358"
                       >
                         <span>
                           Model
@@ -3712,10 +3789,10 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                     />
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root-327 MuiOutlinedInput-notchedOutline"
+                      class="PrivateNotchedOutline-root-355 MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled-329 PrivateNotchedOutline-legendNotched-330"
+                        class="PrivateNotchedOutline-legendLabelled-357 PrivateNotchedOutline-legendNotched-358"
                       >
                         <span>
                           Year
@@ -3726,7 +3803,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
                   </div>
                 </div>
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-309 MuiButton-containedPrimary MuiButton-fullWidth"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-335 MuiButton-containedPrimary MuiButton-fullWidth"
                   tabindex="0"
                   type="submit"
                 >
@@ -3755,10 +3832,10 @@ exports[`App Route /vehicle-add unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-81"
+      class="makeStyles-root-89"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-82 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-90 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -3771,21 +3848,21 @@ exports[`App Route /vehicle-add unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-89"
+        class="makeStyles-content-97"
       >
         <div
-          class="makeStyles-drawerHeader-88"
+          class="makeStyles-drawerHeader-96"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-72"
+            class="makeStyles-paper-78"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-75 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-81 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -3812,17 +3889,17 @@ exports[`App Route /vehicle-status authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-461"
+      class="makeStyles-root-476"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-462 makeStyles-appBarShift-463 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-477 makeStyles-appBarShift-478 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-464 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-479 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -3850,7 +3927,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-471 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-486 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -3866,13 +3943,13 @@ exports[`App Route /vehicle-status authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-466"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-481"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-467 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-482 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-468"
+            class="makeStyles-drawerHeader-483"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -3962,7 +4039,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Create Packages
+                    Create Package
                   </span>
                 </div>
                 <span
@@ -4006,7 +4083,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Add Vehicles
+                    Add Vehicle
                   </span>
                 </div>
                 <span
@@ -4018,10 +4095,10 @@ exports[`App Route /vehicle-status authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-469 makeStyles-contentShift-470"
+        class="makeStyles-content-484 makeStyles-contentShift-485"
       >
         <div
-          class="makeStyles-drawerHeader-468"
+          class="makeStyles-drawerHeader-483"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -4030,7 +4107,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
             data-testid="mocked-updatesprovider"
           >
             <div
-              class="makeStyles-paper-452"
+              class="makeStyles-paper-465"
               style="height: 700px; width: 100%;"
             >
               <h1
@@ -4222,10 +4299,10 @@ exports[`App Route /vehicle-status unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-219"
+      class="makeStyles-root-239"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-220 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-240 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -4238,21 +4315,21 @@ exports[`App Route /vehicle-status unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-227"
+        class="makeStyles-content-247"
       >
         <div
-          class="makeStyles-drawerHeader-226"
+          class="makeStyles-drawerHeader-246"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-210"
+            class="makeStyles-paper-228"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-213 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-231 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
@@ -4279,17 +4356,17 @@ exports[`App Route /vehicles authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-438"
+      class="makeStyles-root-451"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-439 makeStyles-appBarShift-440 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-452 makeStyles-appBarShift-453 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
           <button
             aria-label="open drawer"
-            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-441 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-454 MuiIconButton-colorInherit MuiIconButton-edgeStart"
             tabindex="0"
             type="button"
           >
@@ -4317,7 +4394,7 @@ exports[`App Route /vehicles authenticated 1`] = `
             Fisker OTA Portal
           </h6>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-448 MuiButton-colorInherit"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-461 MuiButton-colorInherit"
             tabindex="0"
             type="button"
           >
@@ -4333,13 +4410,13 @@ exports[`App Route /vehicles authenticated 1`] = `
         </div>
       </header>
       <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-443"
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-456"
       >
         <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-444 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-457 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
         >
           <div
-            class="makeStyles-drawerHeader-445"
+            class="makeStyles-drawerHeader-458"
           >
             <button
               class="MuiButtonBase-root MuiIconButton-root"
@@ -4429,7 +4506,7 @@ exports[`App Route /vehicles authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Create Packages
+                    Create Package
                   </span>
                 </div>
                 <span
@@ -4473,7 +4550,7 @@ exports[`App Route /vehicles authenticated 1`] = `
                   <span
                     class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
                   >
-                    Add Vehicles
+                    Add Vehicle
                   </span>
                 </div>
                 <span
@@ -4485,10 +4562,10 @@ exports[`App Route /vehicles authenticated 1`] = `
         </div>
       </div>
       <main
-        class="makeStyles-content-446 makeStyles-contentShift-447"
+        class="makeStyles-content-459 makeStyles-contentShift-460"
       >
         <div
-          class="makeStyles-drawerHeader-445"
+          class="makeStyles-drawerHeader-458"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
@@ -4497,7 +4574,7 @@ exports[`App Route /vehicles authenticated 1`] = `
             data-testid="mocked-vehicleprovider"
           >
             <div
-              class="makeStyles-paper-429"
+              class="makeStyles-paper-440"
               style="height: 700px; width: 100%;"
             >
               <h1
@@ -4688,10 +4765,10 @@ exports[`App Route /vehicles unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-root-196"
+      class="makeStyles-root-214"
     >
       <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-197 mui-00000fixed MuiPaper-elevation4"
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-215 mui-00000fixed MuiPaper-elevation4"
       >
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
@@ -4704,21 +4781,21 @@ exports[`App Route /vehicles unauthenticated 1`] = `
         </div>
       </header>
       <main
-        class="makeStyles-content-204"
+        class="makeStyles-content-222"
       >
         <div
-          class="makeStyles-drawerHeader-203"
+          class="makeStyles-drawerHeader-221"
         />
         <main
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            class="makeStyles-paper-187"
+            class="makeStyles-paper-203"
             style="justify-content: center;"
           >
             <a
               aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-190 MuiButton-containedPrimary"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-206 MuiButton-containedPrimary"
               href="https://cognito.com/authorize?redirect=https://example.com/callback"
               tabindex="0"
             >
diff --git a/src/components/CarUpdates/Deploy/index.jsx b/src/components/CarUpdates/Deploy/index.jsx
index 0e2870a..b198fd2 100644
--- a/src/components/CarUpdates/Deploy/index.jsx
+++ b/src/components/CarUpdates/Deploy/index.jsx
@@ -1,36 +1,20 @@
 import React, { useEffect, useState } from "react";
 import { useParams, Redirect } from "react-router";
-import {
-  Button,
-  Chip,
-  FormControl,
-  Input,
-  InputLabel,
-  MenuItem,
-  Select,
-  TextField,
-  Typography,
-  useTheme,
-} from "@material-ui/core";
+import { Button, TextField, Typography } from "@material-ui/core";
 
 import {
   UpdatesProvider,
   useUpdatesContext,
 } from "../../Contexts/UpdatesContext";
-import {
-  useVehicleContext,
-  VehicleProvider,
-} from "../../Contexts/VehicleContext";
 import { useUserContext } from "../../Contexts/UserContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
+import CarSelection from "../../Cars/CarSelection";
 import useStyles from "../../useStyles";
 import { tsLocalDateTimeString } from "../../../utils/dates";
-import menuItemStyle from "../../menuItemStyle";
 
 const MainForm = () => {
   const { packageid } = useParams();
   const { getPackages, createCarUpdates, packages, busy } = useUpdatesContext();
-  const { getVehicles, vehicles } = useVehicleContext();
   const {
     token: {
       idToken: { jwtToken: token },
@@ -46,10 +30,7 @@ const MainForm = () => {
   const [selectedVehicles, setSelectedVehicles] = useState([]);
   const [redirect, setRedirect] = useState("");
   const classes = useStyles();
-  const theme = useTheme();
-  const handleVehiclesChange = (event) => {
-    setSelectedVehicles(event.target.value);
-  };
+
   const onSubmit = async (event) => {
     try {
       event.preventDefault();
@@ -73,17 +54,12 @@ const MainForm = () => {
       setMessage(e.message);
     }
   };
-  const handleCarOpen = async () => {
-    try {
-      await getVehicles(null, token);
-    } catch (e) {
-      setMessage(e.message);
-    }
-  };
+
   useEffect(() => {
     getData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token]);
+
   useEffect(() => {
     if (!packages || packages.length === 0) return;
     var data = packages[0];
@@ -160,43 +136,7 @@ const MainForm = () => {
           fullWidth
           placeholder="Release Notes URL"
         />
-        <FormControl
-          className={classes.formControl}
-          variant="outlined"
-          fullWidth
-        >
-          <InputLabel htmlFor="vehicles">Vehicles</InputLabel>
-          <Select
-            label="Vehicles"
-            placeholder="Select vehicles"
-            id="vehicles"
-            name="vehicles"
-            multiple
-            className={classes.menuProps}
-            variant="outlined"
-            onOpen={handleCarOpen}
-            onChange={handleVehiclesChange}
-            value={selectedVehicles}
-            input={<Input id="select-multiple-chip" />}
-            renderValue={(selected) => (
-              <div className={classes.chips}>
-                {selected.map((value) => (
-                  <Chip key={value} label={value} className={classes.chip} />
-                ))}
-              </div>
-            )}
-          >
-            {vehicles.map((vehicle) => (
-              <MenuItem
-                key={vehicle.vin}
-                value={vehicle.vin}
-                style={menuItemStyle(vehicle, selectedVehicles, theme)}
-              >
-                {vehicle.vin}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+        <CarSelection onSelection={setSelectedVehicles} />
         <Button
           type="submit"
           disabled={busy}
@@ -214,11 +154,9 @@ const MainForm = () => {
 };
 
 const UpdatePackageDeployForm = () => (
-  <VehicleProvider>
-    <UpdatesProvider>
-      <MainForm />
-    </UpdatesProvider>
-  </VehicleProvider>
+  <UpdatesProvider>
+    <MainForm />
+  </UpdatesProvider>
 );
 
 export default UpdatePackageDeployForm;
diff --git a/src/components/Cars/CarSelection/index.jsx b/src/components/Cars/CarSelection/index.jsx
new file mode 100644
index 0000000..1dd8498
--- /dev/null
+++ b/src/components/Cars/CarSelection/index.jsx
@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { FormControl, InputLabel, Select } from "@material-ui/core";
+
+import {
+  useVehicleContext,
+  VehicleProvider,
+} from "../../Contexts/VehicleContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import useStyles from "../../useStyles";
+
+const Control = (props) => {
+  const classes = useStyles();
+  const {
+    models,
+    years,
+    vehicles,
+    getModels,
+    getYears,
+    getVehicles,
+  } = useVehicleContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const [model, setModel] = useState("");
+  const [year, setYear] = useState(-1);
+
+  const handleChangeModel = (event) => {
+    setModel(event.target.value);
+  };
+  const handleChangeYear = (event) => {
+    setYear(event.target.value);
+  };
+
+  useEffect(() => {
+    if (!token) return;
+    (async () => {
+      try {
+        await getModels(token);
+        await getYears(token);
+      } catch (e) {}
+    })();
+    // eslint-disable-next-line
+  }, [token]);
+
+  useEffect(() => {
+    if (!models || models.length === 0) return;
+    setModel(models[0]);
+  }, [models]);
+
+  useEffect(() => {
+    if (!years || years.length === 0) return;
+    setYear(years[0]);
+  }, [years]);
+
+  useEffect(() => {
+    if (model === null || year === -1) return;
+    getVehicles({ model, year }, token);
+    // eslint-disable-next-line
+  }, [model, year]);
+
+  useEffect(() => {
+    if (!props.onSelection) return;
+    const vins = vehicles.map((item) => item.vin);
+    props.onSelection(vins);
+    // eslint-disable-next-line
+  }, [vehicles]);
+
+  return (
+    <div className={classes.form}>
+      <FormControl className={classes.formControlInline} variant="outlined">
+        <InputLabel htmlFor="car-model" style={{ backgroundColor: "White" }}>
+          Model
+        </InputLabel>
+        <Select
+          native
+          value={model}
+          onChange={handleChangeModel}
+          variant="outlined"
+          inputProps={{
+            name: "car-model",
+            id: "car-model",
+          }}
+        >
+          {models.map((item) => (
+            <option key={item} value={item}>
+              {item}
+            </option>
+          ))}
+        </Select>
+      </FormControl>
+      <FormControl className={classes.formControlInline} variant="outlined">
+        <InputLabel htmlFor="car-year" style={{ backgroundColor: "White" }}>
+          Year
+        </InputLabel>
+        <Select
+          native
+          value={year}
+          onChange={handleChangeYear}
+          variant="outlined"
+          inputProps={{
+            name: "car-year",
+            id: "car-year",
+          }}
+        >
+          {years.map((item) => (
+            <option key={item} value={item}>
+              {item}
+            </option>
+          ))}
+        </Select>
+      </FormControl>
+      <div className={classes.labelInline}>
+        {vehicles.length === 0
+          ? "No Cars Selected"
+          : vehicles.length === 1
+          ? "1 Car Selected"
+          : `${vehicles.length} Cars Selected`}
+      </div>
+    </div>
+  );
+};
+
+const CarSelection = (props) => (
+  <VehicleProvider>
+    <Control {...props} />
+  </VehicleProvider>
+);
+
+CarSelection.propTypes = {
+  onSelection: PropTypes.func,
+};
+
+export default CarSelection;
diff --git a/src/components/Contexts/UpdatesContext.jsx b/src/components/Contexts/UpdatesContext.jsx
index d4f7cb6..87b6c50 100644
--- a/src/components/Contexts/UpdatesContext.jsx
+++ b/src/components/Contexts/UpdatesContext.jsx
@@ -226,6 +226,6 @@ const validateCreateCarUpdates = (data) => {
   }
 
   if (!data.vins || data.vins.length === 0) {
-    throw new Error("Car ids required");
+    throw new Error("Cars are required");
   }
 };
diff --git a/src/components/Contexts/UpdatesContext.test.jsx b/src/components/Contexts/UpdatesContext.test.jsx
index 8baa89d..bf033ad 100644
--- a/src/components/Contexts/UpdatesContext.test.jsx
+++ b/src/components/Contexts/UpdatesContext.test.jsx
@@ -273,7 +273,7 @@ describe("UpdatesContext", () => {
       await waitFor(() =>
         expect(screen.getByTestId("busy").innerHTML).toBe("false")
       );
-      checkState("false", "Car ids required", null);
+      checkState("false", "Cars are required", null);
     });
 
     it("with-good-data", async () => {
diff --git a/src/components/Contexts/VehicleContext.jsx b/src/components/Contexts/VehicleContext.jsx
index c35f888..0ea3d84 100644
--- a/src/components/Contexts/VehicleContext.jsx
+++ b/src/components/Contexts/VehicleContext.jsx
@@ -29,6 +29,8 @@ export const VehicleProvider = ({ children }) => {
   const [busy, setBusy] = useState(false);
   const [vehicles, setVehicles] = useState([]);
   const [totalVehicles, setTotalVehicles] = useState(0);
+  const [models, setModels] = useState([]);
+  const [years, setYears] = useState([]);
 
   const getVehicles = async (search, token) => {
     try {
@@ -60,14 +62,40 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
+  const getModels = async (token) => {
+    try {
+      setBusy(true);
+      const result = await api.getModels(token);
+      if (result.error) throw new Error(`Get models error. ${result.message}`);
+      setModels(result.data);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const getYears = async (token) => {
+    try {
+      setBusy(true);
+      const result = await api.getYears(token);
+      if (result.error) throw new Error(`Get years error. ${result.message}`);
+      setYears(result.data);
+    } finally {
+      setBusy(false);
+    }
+  };
+
   return (
     <VehicleContext.Provider
       value={{
         busy,
         vehicles,
         totalVehicles,
+        models,
+        years,
         getVehicles,
         addVehicle,
+        getModels,
+        getYears,
       }}
     >
       {children}
diff --git a/src/components/Contexts/__mocks__/VehicleContext.jsx b/src/components/Contexts/__mocks__/VehicleContext.jsx
index 566826c..0a1b6f0 100644
--- a/src/components/Contexts/__mocks__/VehicleContext.jsx
+++ b/src/components/Contexts/__mocks__/VehicleContext.jsx
@@ -2,6 +2,8 @@ import React from "react";
 
 let busy = false;
 let vehicles = [];
+let models = ["Ocean", "PEAR"];
+let years = [2023, 2024];
 let totalVehicles = 0;
 let error = null;
 
@@ -13,8 +15,16 @@ export const useVehicleContext = () => ({
   busy,
   vehicles,
   totalVehicles,
+  models,
+  years,
   getVehicles: jest.fn(() => vehicles),
   addVehicle: jest.fn(),
+  getModels: jest.fn(() => {
+    models = ["Ocean", "PEAR"];
+  }),
+  getYears: jest.fn(() => {
+    years = [2023, 2024];
+  }),
 });
 
 export const setBusy = (val) => {
diff --git a/src/components/Layouts/SideMenu.jsx b/src/components/Layouts/SideMenu.jsx
index a5d59f3..ec06068 100644
--- a/src/components/Layouts/SideMenu.jsx
+++ b/src/components/Layouts/SideMenu.jsx
@@ -16,7 +16,7 @@ const menuData = [
     roles: [Roles.CREATE, Roles.READ],
   },
   {
-    label: "Create Packages",
+    label: "Create Package",
     to: "/package-upload",
     roles: [Roles.CREATE],
   },
@@ -26,7 +26,7 @@ const menuData = [
     roles: [Roles.CREATE, Roles.READ],
   },
   {
-    label: "Add Vehicles",
+    label: "Add Vehicle",
     to: "/vehicle-add",
     roles: [Roles.CREATE],
   },
diff --git a/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
index 4b28629..705928e 100644
--- a/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
+++ b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap
@@ -66,7 +66,7 @@ exports[`SideMenu Authenticated 1`] = `
             <span
               class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
             >
-              Create Packages
+              Create Package
             </span>
           </div>
           <span
@@ -110,7 +110,7 @@ exports[`SideMenu Authenticated 1`] = `
             <span
               class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
             >
-              Add Vehicles
+              Add Vehicle
             </span>
           </div>
           <span
diff --git a/src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap b/src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap
index c8ab055..09707cf 100644
--- a/src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap
+++ b/src/components/UpdatePackages/Create/__snapshots__/Create.test.js.snap
@@ -51,10 +51,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-24 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-26 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-26"
+                class="PrivateNotchedOutline-legendLabelled-28"
               >
                 <span>
                   Package name
@@ -97,10 +97,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-24 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-26 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-26"
+                class="PrivateNotchedOutline-legendLabelled-28"
               >
                 <span>
                   Version
@@ -143,10 +143,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-24 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-26 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-26"
+                class="PrivateNotchedOutline-legendLabelled-28"
               >
                 <span>
                   Description
@@ -190,10 +190,10 @@ exports[`File Upload Form Should render 1`] = `
             />
             <fieldset
               aria-hidden="true"
-              class="PrivateNotchedOutline-root-24 MuiOutlinedInput-notchedOutline"
+              class="PrivateNotchedOutline-root-26 MuiOutlinedInput-notchedOutline"
             >
               <legend
-                class="PrivateNotchedOutline-legendLabelled-26"
+                class="PrivateNotchedOutline-legendLabelled-28"
               >
                 <span>
                   Release Notes URL
diff --git a/src/components/useStyles.jsx b/src/components/useStyles.jsx
index a1b6ee1..f44a3f0 100644
--- a/src/components/useStyles.jsx
+++ b/src/components/useStyles.jsx
@@ -39,6 +39,15 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
     minWidth: 120,
   },
+  formControlInline: {
+    margin: theme.spacing(2, 2, 1, 0),
+    minWidth: 120,
+  },
+  labelInline: {
+    fontSize: "1.25em",
+    margin: theme.spacing(4, 2, 2, 0),
+    display: "inline-flex",
+  },
   chips: {
     display: "flex",
     flexWrap: "wrap",
diff --git a/src/services/__mocks__/vehicles.js b/src/services/__mocks__/vehicles.js
index 74f7c8f..b405b0b 100644
--- a/src/services/__mocks__/vehicles.js
+++ b/src/services/__mocks__/vehicles.js
@@ -15,6 +15,16 @@ const vehiclesAPI = {
     data.push(vehicle);
     return vehicle;
   },
+  getModels: async (token) => {
+    return {
+      data: ["Ocean", "Pear"],
+    };
+  },
+  getYears: async (token) => {
+    return {
+      data: [2021, 2022],
+    };
+  },
 };
 
 export default vehiclesAPI;
diff --git a/src/services/vehicles.js b/src/services/vehicles.js
index 8825c66..0ac6c19 100644
--- a/src/services/vehicles.js
+++ b/src/services/vehicles.js
@@ -10,15 +10,26 @@ const vehiclesAPI = {
   })
     .then(fetchRespHandler),
   
-    getVehicles: async (search, token) => {
-      const u = addQueryParams(`${API_ENDPOINT}/vehicles`, search);
-      return  fetch(u, {
-        method: "GET",
-        headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
-    
-      })
-        .then(fetchRespHandler);
+  getVehicles: async (search, token) => {
+    const u = addQueryParams(`${API_ENDPOINT}/vehicles`, search);
+    return  fetch(u, {
+      method: "GET",
+      headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
+    })
+      .then(fetchRespHandler)
   },
+
+  getModels: async (token) => fetch(`${API_ENDPOINT}/vehiclemodels`, {
+      method: "GET",
+      headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
+    })
+      .then(fetchRespHandler),
+
+  getYears: async (token) => fetch(`${API_ENDPOINT}/vehicleyears`, {
+    method: "GET",
+    headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
+  })
+    .then(fetchRespHandler),
 };
 
 export default vehiclesAPI;