diff --git a/package.json b/package.json
index 789b9ca..6441d25 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.6.0",
     "axios": "^0.21.1",
+    "clsx": "^1.1.1",
     "material-ui-dropzone": "^3.5.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js
index 150a38a..c816b0d 100644
--- a/src/components/App/App.test.js
+++ b/src/components/App/App.test.js
@@ -1,5 +1,6 @@
 jest.mock("../Contexts/UserContext");
 jest.mock("../Contexts/FileUploadContext");
+jest.mock("../Contexts/VehicleContext");
 
 import { render, screen, cleanup, waitForElementToBeRemoved } from "@testing-library/react";
 import { setToken } from "../Contexts/UserContext";
@@ -26,27 +27,40 @@ describe("App", () => {
 
   it("Route / unauthenticated", async () => {
     const container = await renderRoute("/");
-    expect(container.querySelector("h1").innerHTML).toEqual("Fisker OTA Portal");
+    expect(container.querySelector("span.MuiButton-label").innerHTML).toEqual("Sign In");
     expect(container).toMatchSnapshot();
   });
 
   it("Route /home unauthenticated", async () => {
     const container = await renderRoute("/home");
-    expect(container.querySelector("h1").innerHTML).toEqual("Fisker OTA Portal");
+    expect(container.querySelector("span.MuiButton-label").innerHTML).toEqual("Sign In");
+    expect(container).toMatchSnapshot();
+  });
+
+  it("Route /vehicle-add unauthenticated", async () => {
+    const container = await renderRoute("/vehicle-add");
+    expect(container.querySelector("span.MuiButton-label").innerHTML).toEqual("Sign In");
     expect(container).toMatchSnapshot();
   });
 
   it("Route / authenticated", async () => {
     setToken(TEST_TOKEN);
     const container = await renderRoute("/");
-    expect(container.querySelector("h1").innerHTML).toEqual("Upload file");
+    expect(container.querySelector("h1").innerHTML).toEqual("Upload Update Package");
     expect(container).toMatchSnapshot();
   });
 
   it("Route /home authenticated", async () => {
     setToken(TEST_TOKEN);
     const container = await renderRoute("/home");
-    expect(container.querySelector("h1").innerHTML).toEqual("Upload file");
+    expect(container.querySelector("h1").innerHTML).toEqual("Upload Update Package");
+    expect(container).toMatchSnapshot();
+  });
+
+  it("Route /vehicle-add authenticated", async () => {
+    setToken(TEST_TOKEN);
+    const container = await renderRoute("/vehicle-add");
+    expect(container.querySelector("h1").innerHTML).toEqual("Add Vehicle");
     expect(container).toMatchSnapshot();
   });
 
@@ -62,5 +76,4 @@ describe("App", () => {
     expect(container.querySelector("h1").innerHTML).toEqual("Page Not Found");
     expect(container).toMatchSnapshot();
   });
-
 })
\ No newline at end of file
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 21b2926..f2b0a88 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -5,81 +5,440 @@ exports[`App Route / authenticated 1`] = `
   <div
     data-testid="mocked-userprovider"
   >
-    <main
-      class="MuiContainer-root MuiContainer-maxWidthXs"
+    <div
+      class="makeStyles-root-70"
     >
-      <div
-        class="makeStyles-paper-9"
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-71 mui-fixed MuiPaper-elevation4"
       >
-        <h1
-          class="MuiTypography-root MuiTypography-h5"
-        >
-          Upload file
-        </h1>
         <div
-          data-testid="mocked-fileuploadprovider"
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
-          <form
-            class="makeStyles-form-11"
-            novalidate=""
+          <button
+            aria-label="open drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-73 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiDropzoneArea-root"
-              tabindex="0"
+            <span
+              class="MuiIconButton-label"
             >
-              <input
-                accept=""
-                autocomplete="off"
-                style="display: none;"
-                tabindex="-1"
-                type="file"
-              />
-              <div
-                class="MuiDropzoneArea-textContainer"
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
               >
-                <p
-                  class="MuiTypography-root MuiDropzoneArea-text MuiTypography-h5"
-                >
-                  Drag and drop a file here or click
-                </p>
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiDropzoneArea-icon"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"
-                  />
-                </svg>
-              </div>
-            </div>
-          </form>
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <h6
+            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
+          >
+            Fisker OTA Portal
+          </h6>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-80 MuiButton-colorInherit"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label"
+            >
+              Sign Out
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
         </div>
+      </header>
+      <div
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-75"
+      >
         <div
-          class="MuiGrid-root MuiGrid-container"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-76 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          style="visibility: hidden; webkit-transform: translateX(-0px); transform: translateX(-0px);"
         >
           <div
-            class="MuiGrid-root MuiGrid-item"
+            class="makeStyles-drawerHeader-77"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text"
+              class="MuiButtonBase-root MuiIconButton-root"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiButton-label"
+                class="MuiIconButton-label"
               >
-                Sign Out
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+                  />
+                </svg>
               </span>
               <span
                 class="MuiTouchRipple-root"
               />
             </button>
           </div>
+          <hr
+            class="MuiDivider-root"
+          />
+          <ul
+            class="MuiList-root MuiList-padding"
+          >
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/home"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Upload Update Package
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/vehicle-add"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Add Vehicles
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+          </ul>
         </div>
       </div>
-    </main>
+      <main
+        class="makeStyles-content-78"
+      >
+        <div
+          class="makeStyles-drawerHeader-77"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthMd"
+        >
+          <div
+            data-testid="mocked-vehicleprovider"
+          >
+            <div
+              data-testid="mocked-fileuploadprovider"
+            >
+              <div
+                class="makeStyles-paper-61"
+              >
+                <h1
+                  class="MuiTypography-root MuiTypography-h5"
+                >
+                  Upload Update Package
+                </h1>
+                <form
+                  action="{onSubmit}"
+                  class="makeStyles-form-63"
+                  novalidate=""
+                >
+                  <div
+                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                  >
+                    <label
+                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                      data-shrink="false"
+                      for="packagename"
+                      id="packagename-label"
+                    >
+                      Package name
+                      <span
+                        aria-hidden="true"
+                        class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                      >
+                         
+                        *
+                      </span>
+                    </label>
+                    <div
+                      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input MuiOutlinedInput-input"
+                        id="packagename"
+                        maxlength="255"
+                        name="packagename"
+                        required=""
+                        type="text"
+                        value=""
+                      />
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-81 MuiOutlinedInput-notchedOutline"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legendLabelled-83"
+                        >
+                          <span>
+                            Package name
+                             *
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
+                  <div
+                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                  >
+                    <label
+                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                      data-shrink="false"
+                      for="version"
+                      id="version-label"
+                    >
+                      Version
+                      <span
+                        aria-hidden="true"
+                        class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                      >
+                         
+                        *
+                      </span>
+                    </label>
+                    <div
+                      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input MuiOutlinedInput-input"
+                        id="version"
+                        maxlength="255"
+                        name="version"
+                        required=""
+                        type="text"
+                        value=""
+                      />
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-81 MuiOutlinedInput-notchedOutline"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legendLabelled-83"
+                        >
+                          <span>
+                            Version
+                             *
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
+                  <div
+                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                  >
+                    <label
+                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+                      data-shrink="false"
+                      for="description"
+                      id="description-label"
+                    >
+                      Description
+                    </label>
+                    <div
+                      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline MuiOutlinedInput-multiline"
+                    >
+                      <textarea
+                        aria-invalid="false"
+                        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline"
+                        id="description"
+                        maxlength="5120"
+                        name="description"
+                        placeholder="Package description"
+                        rows="4"
+                      />
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-81 MuiOutlinedInput-notchedOutline"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legendLabelled-83"
+                        >
+                          <span>
+                            Description
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
+                  <div
+                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                  >
+                    <label
+                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+                      data-shrink="false"
+                      for="releasenotes"
+                      id="releasenotes-label"
+                    >
+                      Release Notes URL
+                    </label>
+                    <div
+                      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input MuiOutlinedInput-input"
+                        id="releasenotes"
+                        maxlength="1024"
+                        name="releasenotes"
+                        placeholder="Release Notes URL"
+                        type="text"
+                        value=""
+                      />
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-81 MuiOutlinedInput-notchedOutline"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legendLabelled-83"
+                        >
+                          <span>
+                            Release Notes URL
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
+                  <div
+                    class="MuiFormControl-root makeStyles-formControl-65 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-68 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>
+                  <div
+                    class="MuiDropzoneArea-root"
+                    tabindex="0"
+                  >
+                    <input
+                      accept=""
+                      autocomplete="off"
+                      style="display: none;"
+                      tabindex="-1"
+                      type="file"
+                    />
+                    <div
+                      class="MuiDropzoneArea-textContainer"
+                    >
+                      <p
+                        class="MuiTypography-root MuiDropzoneArea-text MuiTypography-h5"
+                      >
+                        Drag and drop a file here or click
+                      </p>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiDropzoneArea-icon"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <button
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-64 MuiButton-containedPrimary MuiButton-fullWidth"
+                    tabindex="0"
+                    type="submit"
+                  >
+                    <span
+                      class="MuiButton-label"
+                    >
+                      Submit
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                </form>
+              </div>
+            </div>
+          </div>
+        </main>
+      </main>
+    </div>
   </div>
 </div>
 `;
@@ -89,40 +448,54 @@ exports[`App Route / unauthenticated 1`] = `
   <div
     data-testid="mocked-userprovider"
   >
-    <main
-      class="MuiContainer-root MuiContainer-maxWidthXs"
+    <div
+      class="makeStyles-root-10"
     >
-      <div
-        class="makeStyles-paper-1"
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-11 mui-fixed MuiPaper-elevation4"
       >
-        <h1
-          class="MuiTypography-root MuiTypography-h5"
+        <div
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
-          Fisker OTA Portal
-        </h1>
-        <form
-          action="{onSubmit}"
-          class="makeStyles-form-3"
-          novalidate=""
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-containedPrimary MuiButton-fullWidth"
-            href="https://cognito.com/authorize?redirect=https://example.com/callback"
-            tabindex="0"
+          <h6
+            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
           >
-            <span
-              class="MuiButton-label"
+            Fisker OTA Portal
+          </h6>
+        </div>
+      </header>
+      <main
+        class="makeStyles-content-18"
+      >
+        <div
+          class="makeStyles-drawerHeader-17"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthMd"
+        >
+          <div
+            class="makeStyles-paper-1"
+            style="justify-content: center;"
+          >
+            <a
+              aria-disabled="false"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-containedPrimary"
+              href="https://cognito.com/authorize?redirect=https://example.com/callback"
+              tabindex="0"
             >
-              Sign In
-            </span>
-            <span
-              class="MuiTouchRipple-root"
-            />
-          </a>
-        </form>
-      </div>
-    </main>
+              <span
+                class="MuiButton-label"
+              >
+                Sign In
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </a>
+          </div>
+        </main>
+      </main>
+    </div>
   </div>
 </div>
 `;
@@ -132,81 +505,440 @@ exports[`App Route /home authenticated 1`] = `
   <div
     data-testid="mocked-userprovider"
   >
-    <main
-      class="MuiContainer-root MuiContainer-maxWidthXs"
+    <div
+      class="makeStyles-root-94"
     >
-      <div
-        class="makeStyles-paper-13"
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-95 mui-fixed MuiPaper-elevation4"
       >
-        <h1
-          class="MuiTypography-root MuiTypography-h5"
-        >
-          Upload file
-        </h1>
         <div
-          data-testid="mocked-fileuploadprovider"
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
-          <form
-            class="makeStyles-form-15"
-            novalidate=""
+          <button
+            aria-label="open drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-97 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
           >
-            <div
-              class="MuiDropzoneArea-root"
-              tabindex="0"
+            <span
+              class="MuiIconButton-label"
             >
-              <input
-                accept=""
-                autocomplete="off"
-                style="display: none;"
-                tabindex="-1"
-                type="file"
-              />
-              <div
-                class="MuiDropzoneArea-textContainer"
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
               >
-                <p
-                  class="MuiTypography-root MuiDropzoneArea-text MuiTypography-h5"
-                >
-                  Drag and drop a file here or click
-                </p>
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiDropzoneArea-icon"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"
-                  />
-                </svg>
-              </div>
-            </div>
-          </form>
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <h6
+            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
+          >
+            Fisker OTA Portal
+          </h6>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-104 MuiButton-colorInherit"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label"
+            >
+              Sign Out
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
         </div>
+      </header>
+      <div
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-99"
+      >
         <div
-          class="MuiGrid-root MuiGrid-container"
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-100 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          style="visibility: hidden; webkit-transform: translateX(-0px); transform: translateX(-0px);"
         >
           <div
-            class="MuiGrid-root MuiGrid-item"
+            class="makeStyles-drawerHeader-101"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text"
+              class="MuiButtonBase-root MuiIconButton-root"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiButton-label"
+                class="MuiIconButton-label"
               >
-                Sign Out
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+                  />
+                </svg>
               </span>
               <span
                 class="MuiTouchRipple-root"
               />
             </button>
           </div>
+          <hr
+            class="MuiDivider-root"
+          />
+          <ul
+            class="MuiList-root MuiList-padding"
+          >
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/home"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Upload Update Package
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/vehicle-add"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Add Vehicles
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+          </ul>
         </div>
       </div>
-    </main>
+      <main
+        class="makeStyles-content-102"
+      >
+        <div
+          class="makeStyles-drawerHeader-101"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthMd"
+        >
+          <div
+            data-testid="mocked-vehicleprovider"
+          >
+            <div
+              data-testid="mocked-fileuploadprovider"
+            >
+              <div
+                class="makeStyles-paper-85"
+              >
+                <h1
+                  class="MuiTypography-root MuiTypography-h5"
+                >
+                  Upload Update Package
+                </h1>
+                <form
+                  action="{onSubmit}"
+                  class="makeStyles-form-87"
+                  novalidate=""
+                >
+                  <div
+                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                  >
+                    <label
+                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                      data-shrink="false"
+                      for="packagename"
+                      id="packagename-label"
+                    >
+                      Package name
+                      <span
+                        aria-hidden="true"
+                        class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                      >
+                         
+                        *
+                      </span>
+                    </label>
+                    <div
+                      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input MuiOutlinedInput-input"
+                        id="packagename"
+                        maxlength="255"
+                        name="packagename"
+                        required=""
+                        type="text"
+                        value=""
+                      />
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-105 MuiOutlinedInput-notchedOutline"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legendLabelled-107"
+                        >
+                          <span>
+                            Package name
+                             *
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
+                  <div
+                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                  >
+                    <label
+                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                      data-shrink="false"
+                      for="version"
+                      id="version-label"
+                    >
+                      Version
+                      <span
+                        aria-hidden="true"
+                        class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                      >
+                         
+                        *
+                      </span>
+                    </label>
+                    <div
+                      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input MuiOutlinedInput-input"
+                        id="version"
+                        maxlength="255"
+                        name="version"
+                        required=""
+                        type="text"
+                        value=""
+                      />
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-105 MuiOutlinedInput-notchedOutline"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legendLabelled-107"
+                        >
+                          <span>
+                            Version
+                             *
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
+                  <div
+                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                  >
+                    <label
+                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+                      data-shrink="false"
+                      for="description"
+                      id="description-label"
+                    >
+                      Description
+                    </label>
+                    <div
+                      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline MuiOutlinedInput-multiline"
+                    >
+                      <textarea
+                        aria-invalid="false"
+                        class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline"
+                        id="description"
+                        maxlength="5120"
+                        name="description"
+                        placeholder="Package description"
+                        rows="4"
+                      />
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-105 MuiOutlinedInput-notchedOutline"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legendLabelled-107"
+                        >
+                          <span>
+                            Description
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
+                  <div
+                    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                  >
+                    <label
+                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+                      data-shrink="false"
+                      for="releasenotes"
+                      id="releasenotes-label"
+                    >
+                      Release Notes URL
+                    </label>
+                    <div
+                      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input MuiOutlinedInput-input"
+                        id="releasenotes"
+                        maxlength="1024"
+                        name="releasenotes"
+                        placeholder="Release Notes URL"
+                        type="text"
+                        value=""
+                      />
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-105 MuiOutlinedInput-notchedOutline"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legendLabelled-107"
+                        >
+                          <span>
+                            Release Notes URL
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
+                  </div>
+                  <div
+                    class="MuiFormControl-root makeStyles-formControl-89 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-92 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>
+                  <div
+                    class="MuiDropzoneArea-root"
+                    tabindex="0"
+                  >
+                    <input
+                      accept=""
+                      autocomplete="off"
+                      style="display: none;"
+                      tabindex="-1"
+                      type="file"
+                    />
+                    <div
+                      class="MuiDropzoneArea-textContainer"
+                    >
+                      <p
+                        class="MuiTypography-root MuiDropzoneArea-text MuiTypography-h5"
+                      >
+                        Drag and drop a file here or click
+                      </p>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiDropzoneArea-icon"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <button
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-88 MuiButton-containedPrimary MuiButton-fullWidth"
+                    tabindex="0"
+                    type="submit"
+                  >
+                    <span
+                      class="MuiButton-label"
+                    >
+                      Submit
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                </form>
+              </div>
+            </div>
+          </div>
+        </main>
+      </main>
+    </div>
   </div>
 </div>
 `;
@@ -216,40 +948,54 @@ exports[`App Route /home unauthenticated 1`] = `
   <div
     data-testid="mocked-userprovider"
   >
-    <main
-      class="MuiContainer-root MuiContainer-maxWidthXs"
+    <div
+      class="makeStyles-root-30"
     >
-      <div
-        class="makeStyles-paper-5"
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-31 mui-fixed MuiPaper-elevation4"
       >
-        <h1
-          class="MuiTypography-root MuiTypography-h5"
+        <div
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
-          Fisker OTA Portal
-        </h1>
-        <form
-          action="{onSubmit}"
-          class="makeStyles-form-7"
-          novalidate=""
-        >
-          <a
-            aria-disabled="false"
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-8 MuiButton-containedPrimary MuiButton-fullWidth"
-            href="https://cognito.com/authorize?redirect=https://example.com/callback"
-            tabindex="0"
+          <h6
+            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
           >
-            <span
-              class="MuiButton-label"
+            Fisker OTA Portal
+          </h6>
+        </div>
+      </header>
+      <main
+        class="makeStyles-content-38"
+      >
+        <div
+          class="makeStyles-drawerHeader-37"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthMd"
+        >
+          <div
+            class="makeStyles-paper-21"
+            style="justify-content: center;"
+          >
+            <a
+              aria-disabled="false"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-24 MuiButton-containedPrimary"
+              href="https://cognito.com/authorize?redirect=https://example.com/callback"
+              tabindex="0"
             >
-              Sign In
-            </span>
-            <span
-              class="MuiTouchRipple-root"
-            />
-          </a>
-        </form>
-      </div>
-    </main>
+              <span
+                class="MuiButton-label"
+              >
+                Sign In
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </a>
+          </div>
+        </main>
+      </main>
+    </div>
   </div>
 </div>
 `;
@@ -260,13 +1006,166 @@ exports[`App Route /page-not-found authenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-paper-21"
+      class="makeStyles-root-162"
     >
-      <h1
-        class="MuiTypography-root MuiTypography-h2"
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-163 mui-fixed MuiPaper-elevation4"
       >
-        Page Not Found
-      </h1>
+        <div
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+        >
+          <button
+            aria-label="open drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-165 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <h6
+            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
+          >
+            Fisker OTA Portal
+          </h6>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-172 MuiButton-colorInherit"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label"
+            >
+              Sign Out
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+      </header>
+      <div
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-167"
+      >
+        <div
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-168 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          style="visibility: hidden; webkit-transform: translateX(-0px); transform: translateX(-0px);"
+        >
+          <div
+            class="makeStyles-drawerHeader-169"
+          >
+            <button
+              class="MuiButtonBase-root MuiIconButton-root"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+                  />
+                </svg>
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+          <hr
+            class="MuiDivider-root"
+          />
+          <ul
+            class="MuiList-root MuiList-padding"
+          >
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/home"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Upload Update Package
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/vehicle-add"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Add Vehicles
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <main
+        class="makeStyles-content-170"
+      >
+        <div
+          class="makeStyles-drawerHeader-169"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthMd"
+        >
+          <div
+            class="makeStyles-paper-153"
+          >
+            <h1
+              class="MuiTypography-root MuiTypography-h2"
+            >
+              Page Not Found
+            </h1>
+          </div>
+        </main>
+      </main>
     </div>
   </div>
 </div>
@@ -278,13 +1177,339 @@ exports[`App Route /page-not-found unauthenticated 1`] = `
     data-testid="mocked-userprovider"
   >
     <div
-      class="makeStyles-paper-17"
+      class="makeStyles-root-142"
     >
-      <h1
-        class="MuiTypography-root MuiTypography-h2"
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-143 mui-fixed MuiPaper-elevation4"
       >
-        Page Not Found
-      </h1>
+        <div
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+        >
+          <h6
+            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
+          >
+            Fisker OTA Portal
+          </h6>
+        </div>
+      </header>
+      <main
+        class="makeStyles-content-150"
+      >
+        <div
+          class="makeStyles-drawerHeader-149"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthMd"
+        >
+          <div
+            class="makeStyles-paper-133"
+          >
+            <h1
+              class="MuiTypography-root MuiTypography-h2"
+            >
+              Page Not Found
+            </h1>
+          </div>
+        </main>
+      </main>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`App Route /vehicle-add authenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      class="makeStyles-root-118"
+    >
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-119 mui-fixed MuiPaper-elevation4"
+      >
+        <div
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+        >
+          <button
+            aria-label="open drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-121 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+          <h6
+            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
+          >
+            Fisker OTA Portal
+          </h6>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-rightToolbar-128 MuiButton-colorInherit"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiButton-label"
+            >
+              Sign Out
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+      </header>
+      <div
+        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-123"
+      >
+        <div
+          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-124 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
+          style="visibility: hidden; webkit-transform: translateX(-0px); transform: translateX(-0px);"
+        >
+          <div
+            class="makeStyles-drawerHeader-125"
+          >
+            <button
+              class="MuiButtonBase-root MuiIconButton-root"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiIconButton-label"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+                  />
+                </svg>
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+          <hr
+            class="MuiDivider-root"
+          />
+          <ul
+            class="MuiList-root MuiList-padding"
+          >
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/home"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Upload Update Package
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+            <li>
+              <a
+                aria-disabled="false"
+                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+                href="/vehicle-add"
+                role="button"
+                tabindex="0"
+              >
+                <div
+                  class="MuiListItemText-root"
+                >
+                  <span
+                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+                  >
+                    Add Vehicles
+                  </span>
+                </div>
+                <span
+                  class="MuiTouchRipple-root"
+                />
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <main
+        class="makeStyles-content-126"
+      >
+        <div
+          class="makeStyles-drawerHeader-125"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthMd"
+        >
+          <div
+            data-testid="mocked-vehicleprovider"
+          >
+            <div
+              class="makeStyles-paper-109"
+            >
+              <h1
+                class="MuiTypography-root MuiTypography-h5"
+              >
+                Add Vehicle
+              </h1>
+              <form
+                action="{onSubmit}"
+                class="makeStyles-form-111"
+                novalidate=""
+              >
+                <div
+                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+                    data-shrink="false"
+                    for="vin"
+                    id="vin-label"
+                  >
+                    VIN
+                    <span
+                      aria-hidden="true"
+                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                    >
+                       
+                      *
+                    </span>
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiOutlinedInput-input"
+                      id="vin"
+                      maxlength="17"
+                      name="vin"
+                      required=""
+                      type="text"
+                      value=""
+                    />
+                    <fieldset
+                      aria-hidden="true"
+                      class="PrivateNotchedOutline-root-129 MuiOutlinedInput-notchedOutline"
+                    >
+                      <legend
+                        class="PrivateNotchedOutline-legendLabelled-131"
+                      >
+                        <span>
+                          VIN
+                           *
+                        </span>
+                      </legend>
+                    </fieldset>
+                  </div>
+                </div>
+                <button
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-112 MuiButton-containedPrimary MuiButton-fullWidth"
+                  tabindex="0"
+                  type="submit"
+                >
+                  <span
+                    class="MuiButton-label"
+                  >
+                    Submit
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </button>
+              </form>
+            </div>
+          </div>
+        </main>
+      </main>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`App Route /vehicle-add unauthenticated 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      class="makeStyles-root-50"
+    >
+      <header
+        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-51 mui-fixed MuiPaper-elevation4"
+      >
+        <div
+          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
+        >
+          <h6
+            class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
+          >
+            Fisker OTA Portal
+          </h6>
+        </div>
+      </header>
+      <main
+        class="makeStyles-content-58"
+      >
+        <div
+          class="makeStyles-drawerHeader-57"
+        />
+        <main
+          class="MuiContainer-root MuiContainer-maxWidthMd"
+        >
+          <div
+            class="makeStyles-paper-41"
+            style="justify-content: center;"
+          >
+            <a
+              aria-disabled="false"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-44 MuiButton-containedPrimary"
+              href="https://cognito.com/authorize?redirect=https://example.com/callback"
+              tabindex="0"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                Sign In
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </a>
+          </div>
+        </main>
+      </main>
     </div>
   </div>
 </div>
diff --git a/src/components/App/index.jsx b/src/components/App/index.jsx
index 156e5d8..f7a4f12 100644
--- a/src/components/App/index.jsx
+++ b/src/components/App/index.jsx
@@ -1,12 +1,23 @@
 import React from "react";
+import { BrowserRouter } from "react-router-dom";
 import { UserProvider } from "../Contexts/UserContext";
+import { StatusProvider } from "../Contexts/StatusContext";
+import { CssBaseline } from "@material-ui/core";
+import MenuDrawer from "../Layouts/MenuDrawer";
 import SiteRoutes from "../Routes/SiteRoutes";
 
 function App() {
   return (
-    <UserProvider>
-      <SiteRoutes />
-    </UserProvider>
+    <StatusProvider>
+      <UserProvider>
+        <CssBaseline />
+        <BrowserRouter>
+          <MenuDrawer>
+            <SiteRoutes />
+          </MenuDrawer>
+        </BrowserRouter>
+      </UserProvider>
+    </StatusProvider>
   );
 }
 
diff --git a/src/components/Contexts/FileUploadContext.jsx b/src/components/Contexts/FileUploadContext.jsx
index 0c462a0..c4aa1a1 100644
--- a/src/components/Contexts/FileUploadContext.jsx
+++ b/src/components/Contexts/FileUploadContext.jsx
@@ -9,6 +9,7 @@ export const FileUploadProvider = ({ children }) => {
   const [status, setStatus] = useState(null);
   const [cancelUpload, setCancelUpload] = useState(null);
   const [linkURL, setLinkURL] = useState(null);
+  const [files, setFiles] = useState(null);
 
   const done = () => {
     setCancelUpload(null);
@@ -24,15 +25,37 @@ export const FileUploadProvider = ({ children }) => {
     done();
   };
 
-  const upload = async (files, accessToken) => {
+  const validateUpload = (formData, accessToken, uploadFiles) => {
+    if (!formData) {
+      throw new Error("Missing package update data");
+    }
+
+    if (!formData.packagename || formData.packagename.length === 0) {
+      throw new Error("Package name required");
+    }
+
+    if (!formData.version || formData.version.length === 0) {
+      throw new Error("Package update version required");
+    }
+
+    if (!formData.vehicles || formData.vehicles.length === 0) {
+      throw new Error("Vehicles required");
+    }
+
+    if (!uploadFiles || uploadFiles.length === 0) {
+      throw new Error("File required");
+    }
+
+    if (!accessToken || accessToken.length === 0) {
+      throw new Error("Access token required");
+    }
+  };
+
+  const upload = async (formData, accessToken, uploadFiles) => {
+    validateUpload(formData, accessToken, uploadFiles);
+
     try {
-      if (!files || files.length === 0) {
-        throw new Error("File required");
-      }
-      if (!accessToken || accessToken.length === 0) {
-        throw new Error("Access token required");
-      }
-      const file = files[0].file;
+      const file = uploadFiles[0];
       const filename = file.name;
 
       setUploading(true);
@@ -43,6 +66,7 @@ export const FileUploadProvider = ({ children }) => {
 
       const { data } = await uploadFile(
         file,
+        formData,
         accessToken,
         setProgress,
         cancelUpload
@@ -56,18 +80,12 @@ export const FileUploadProvider = ({ children }) => {
       setCancelUpload(null);
       setProgress(100);
     } catch (e) {
+      setUploading(true);
       setStatus(`Error occured: ${e.message}`);
       setProgress(-1);
     }
   };
 
-  const rejectedFile = (files) => {
-    if (files.length === 0) return;
-    setUploading(true);
-    setStatus(`Rejected ${files[0].name} too large`);
-    setProgress(-1);
-  };
-
   return (
     <FileUploadContext.Provider
       value={{
@@ -75,9 +93,10 @@ export const FileUploadProvider = ({ children }) => {
         progress,
         status,
         linkURL,
+        files,
         upload,
         cancel,
-        rejectedFile,
+        setFiles,
       }}
     >
       {children}
diff --git a/src/components/Contexts/FileUploadContext.test.jsx b/src/components/Contexts/FileUploadContext.test.jsx
index 52e88e6..3ddb38b 100644
--- a/src/components/Contexts/FileUploadContext.test.jsx
+++ b/src/components/Contexts/FileUploadContext.test.jsx
@@ -1,10 +1,5 @@
 jest.mock("../../services/uploadFile");
 
-import { setUploadFileDelay } from "../../services/uploadFile";
-import {
-  FileUploadProvider,
-  useFileUploadContext,
-} from "../Contexts/FileUploadContext";
 import {
   render,
   cleanup,
@@ -13,11 +8,19 @@ import {
   waitFor,
 } from "@testing-library/react";
 
-const checkState = (uploading, progress, status, linkURL) => {
+import { setUploadFileDelay } from "../../services/uploadFile";
+import {
+  FileUploadProvider,
+  useFileUploadContext,
+} from "../Contexts/FileUploadContext";
+import { StatusProvider, useStatusContext } from "../Contexts/StatusContext";
+
+const checkState = (uploading, progress, status, linkURL, message) => {
   expect(screen.getByTestId("uploading").innerHTML).toEqual(uploading);
   expect(screen.getByTestId("progress").innerHTML).toEqual(progress);
   expect(screen.getByTestId("status").innerHTML).toEqual(status);
   expect(screen.getByTestId("linkURL").innerHTML).toEqual(linkURL);
+  expect(screen.getByTestId("message").innerHTML).toEqual(message);
 };
 
 describe("FileUploadContext", () => {
@@ -30,32 +33,63 @@ describe("FileUploadContext", () => {
         linkURL,
         upload,
         cancel,
+        setFiles,
       } = useFileUploadContext();
-      const TEST_FILE = [{ file: { name: "test.jpg", size: 0 } }];
+      const { message, setMessage } = useStatusContext();
+      const TEST_FILE = [{ name: "test.jpg", size: 0 }];
       const TEST_ACCESSTOKEN = "ACCESSTOKEN";
+      const TEST_FORMDATA = {
+        packagename: "TEST",
+        version: "VERSION",
+        vehicles: ["VIN"],
+      };
+      const exec = async (form, token, file) => {
+        try {
+          await upload(form, token, file);
+        } catch (e) {
+          setMessage(e.message);
+        }
+      };
+
       return (
         <>
           <div data-testid="uploading">{uploading.toString()}</div>
           <div data-testid="progress">{progress.toString()}</div>
           <div data-testid="status">{status}</div>
+          <div data-testid="message">{message}</div>
           <div data-testid="linkURL">{linkURL}</div>
-          <button data-testid="uploadNoFile" onClick={() => upload()} />
+          <button
+            data-testid="uploadNoFile"
+            onClick={() => {
+              exec(TEST_FORMDATA, TEST_ACCESSTOKEN, null);
+            }}
+          />
           <button
             data-testid="uploadNoToken"
-            onClick={() => upload(TEST_FILE)}
+            onClick={() => {
+              exec(TEST_FORMDATA, null, TEST_FILE);
+            }}
+          />
+          <button
+            data-testid="uploadNoFormData"
+            onClick={() => {
+              exec({}, TEST_ACCESSTOKEN, TEST_FILE);
+            }}
           />
           <button
             data-testid="upload"
-            onClick={() => upload(TEST_FILE, TEST_ACCESSTOKEN)}
+            onClick={() => exec(TEST_FORMDATA, TEST_ACCESSTOKEN, TEST_FILE)}
           />
           <button data-testid="cancel" onClick={() => cancel()} />
         </>
       );
     };
     render(
-      <FileUploadProvider>
-        <TestComp />
-      </FileUploadProvider>
+      <StatusProvider>
+        <FileUploadProvider>
+          <TestComp />
+        </FileUploadProvider>
+      </StatusProvider>
     );
   });
 
@@ -64,17 +98,31 @@ describe("FileUploadContext", () => {
   });
 
   it("Initial state", async () => {
-    checkState("false", "0", "", "");
+    checkState("false", "0", "", "", "");
   });
 
   it("Upload no file", async () => {
     fireEvent.click(screen.getByTestId("uploadNoFile"));
-    checkState("false", "-1", "Error occured: File required", "");
+    await waitFor(() =>
+      expect(screen.getByTestId("message").innerHTML).not.toBe("")
+    );
+    checkState("false", "0", "", "", "File required");
   });
 
   it("Upload no access token", async () => {
     fireEvent.click(screen.getByTestId("uploadNoToken"));
-    checkState("false", "-1", "Error occured: Access token required", "");
+    await waitFor(() =>
+      expect(screen.getByTestId("message").innerHTML).not.toBe("")
+    );
+    checkState("false", "0", "", "", "Access token required");
+  });
+
+  it("Upload no form data", async () => {
+    fireEvent.click(screen.getByTestId("uploadNoFormData"));
+    await waitFor(() =>
+      expect(screen.getByTestId("message").innerHTML).not.toBe("")
+    );
+    checkState("false", "0", "", "", "Package name required");
   });
 
   it("Upload file", async () => {
@@ -82,7 +130,7 @@ describe("FileUploadContext", () => {
     await waitFor(() =>
       expect(screen.getByTestId("progress").innerHTML).toEqual("100")
     );
-    checkState("true", "100", "Uploaded test.jpg", "CLOUDFRONT_URL");
+    checkState("true", "100", "Uploaded test.jpg", "CLOUDFRONT_URL", "");
   });
 
   it("Cancel upload", async () => {
@@ -91,12 +139,12 @@ describe("FileUploadContext", () => {
     await waitFor(() =>
       expect(screen.getByTestId("progress").innerHTML).toEqual("50")
     );
-    checkState("true", "50", "Uploading test.jpg", "");
+    checkState("true", "50", "Uploading test.jpg", "", "");
 
     fireEvent.click(screen.getByTestId("cancel"));
     await waitFor(() =>
       expect(screen.getByTestId("progress").innerHTML).toEqual("0")
     );
-    checkState("false", "0", "Upload cancelled", "");
+    checkState("false", "0", "Upload cancelled", "", "");
   });
 });
diff --git a/src/components/Contexts/StatusContext.jsx b/src/components/Contexts/StatusContext.jsx
new file mode 100644
index 0000000..83453a8
--- /dev/null
+++ b/src/components/Contexts/StatusContext.jsx
@@ -0,0 +1,20 @@
+import React, { useContext, useState } from "react";
+
+const StatusContext = React.createContext();
+
+export const StatusProvider = ({ children }) => {
+  const [message, setMessage] = useState(null);
+
+  return (
+    <StatusContext.Provider
+      value={{
+        message,
+        setMessage,
+      }}
+    >
+      {children}
+    </StatusContext.Provider>
+  );
+};
+
+export const useStatusContext = () => useContext(StatusContext);
diff --git a/src/components/Contexts/UserContext.jsx b/src/components/Contexts/UserContext.jsx
index 1b78922..4bf408a 100644
--- a/src/components/Contexts/UserContext.jsx
+++ b/src/components/Contexts/UserContext.jsx
@@ -34,13 +34,13 @@ export const UserProvider = ({ children }) => {
     if (!token || !token.refreshToken || !token.refreshToken.token) return null;
     const result = await refresh(token.refreshToken.token);
     return result;
-  }
+  };
 
   const isError = (resp) => {
     if (resp === null) return true;
     if (resp && resp.error) return true;
     return false;
-  }
+  };
 
   const startSessionTimer = () => {
     const duration = 1000 * token.idToken.payload.exp - new Date().getTime();
@@ -62,7 +62,7 @@ export const UserProvider = ({ children }) => {
       const result = await auth.verify(idToken);
 
       if (
-        !result.authenticated ||
+        (!result.valid && !result.authenticated) ||
         !token.idToken.payload ||
         !token.idToken.payload.exp
       ) {
@@ -71,10 +71,9 @@ export const UserProvider = ({ children }) => {
         signOut();
         return;
       }
-  
-      startSessionTimer();  
-    }
-    catch (e) {
+
+      startSessionTimer();
+    } catch (e) {
       setError(e.message);
     }
   };
diff --git a/src/components/Contexts/UserContext.test.jsx b/src/components/Contexts/UserContext.test.jsx
index e5f3eb0..873face 100644
--- a/src/components/Contexts/UserContext.test.jsx
+++ b/src/components/Contexts/UserContext.test.jsx
@@ -26,14 +26,14 @@ const INVALID_TOKEN_RESPONSE = {
   message: "Bad Request Message",
 };
 
-const setupRefreshEnv = (refreshResponse, authenticated) => {
+const setupRefreshEnv = (refreshResponse, valid) => {
   auth.setRefreshResponse(refreshResponse);
-  auth.setVerifyResponse({ authenticated });
+  auth.setVerifyResponse({ valid });
 };
 
-const setupSignInEnv = (refreshResponse, authenticated) => {
+const setupSignInEnv = (refreshResponse, valid) => {
   auth.setSignInResponse(refreshResponse);
-  auth.setVerifyResponse({ authenticated });
+  auth.setVerifyResponse({ valid });
 };
 
 const checkBaseResults = (error, fetching, token) => {
@@ -57,12 +57,7 @@ describe("UseContext", () => {
   describe("Signin", () => {
     beforeEach(() => {
       const TestComp = () => {
-        const {
-          signIn,
-          error,
-          token,
-          fetching,
-        } = useUserContext();
+        const { signIn, error, token, fetching } = useUserContext();
 
         return (
           <>
@@ -171,12 +166,7 @@ describe("UseContext", () => {
   describe("Refresh", () => {
     beforeEach(() => {
       const TestComp = () => {
-        const {
-          refresh,
-          error,
-          token,
-          fetching,
-        } = useUserContext();
+        const { refresh, error, token, fetching } = useUserContext();
 
         return (
           <>
@@ -188,7 +178,10 @@ describe("UseContext", () => {
               data-testid="refreshInvalidToken"
               onClick={() => refresh("INVALID_TOKEN")}
             />
-            <button data-testid="refreshValidToken" onClick={() => refresh("TEST_TOKEN")} />
+            <button
+              data-testid="refreshValidToken"
+              onClick={() => refresh("TEST_TOKEN")}
+            />
           </>
         );
       };
diff --git a/src/components/Contexts/VehicleContext.jsx b/src/components/Contexts/VehicleContext.jsx
new file mode 100644
index 0000000..5b00eae
--- /dev/null
+++ b/src/components/Contexts/VehicleContext.jsx
@@ -0,0 +1,60 @@
+import React, { useContext, useState } from "react";
+import api from "../../services/vehicles";
+
+const VehicleContext = React.createContext();
+
+const validateAdd = (vehicle) => {
+  if (vehicle === null) {
+    throw new Error("No vehicle data");
+  }
+
+  if (!vehicle.vin || vehicle.vin.length === 0) {
+    throw new Error("VIN required");
+  }
+
+  if (vehicle.vin.length > 17) {
+    throw new Error("VIN cannot be larger than 17 characters");
+  }
+};
+
+export const VehicleProvider = ({ children }) => {
+  const [busy, setBusy] = useState(false);
+  const [vehicles, setVehicles] = useState([]);
+
+  const getVehicles = async (search, token) => {
+    try {
+      setBusy(true);
+      const {
+        data: { data },
+      } = await api.getVehicles(search, token);
+      setVehicles(data);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const addVehicle = async (vehicle, token) => {
+    try {
+      setBusy(true);
+      validateAdd(vehicle);
+      await api.addVehicle(vehicle, token);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <VehicleContext.Provider
+      value={{
+        busy,
+        vehicles,
+        getVehicles,
+        addVehicle,
+      }}
+    >
+      {children}
+    </VehicleContext.Provider>
+  );
+};
+
+export const useVehicleContext = () => useContext(VehicleContext);
diff --git a/src/components/Contexts/VehicleContext.test.jsx b/src/components/Contexts/VehicleContext.test.jsx
new file mode 100644
index 0000000..f06719f
--- /dev/null
+++ b/src/components/Contexts/VehicleContext.test.jsx
@@ -0,0 +1,142 @@
+jest.mock("../../services/vehicles");
+
+import {
+  render,
+  cleanup,
+  screen,
+  fireEvent,
+  waitFor,
+} from "@testing-library/react";
+import { VehicleProvider, useVehicleContext } from "./VehicleContext";
+import { StatusProvider, useStatusContext } from "./StatusContext";
+
+const checkVehicleResults = (error, busy, vehicles) => {
+  checkBaseResults(error, busy);
+  expect(screen.getByTestId("vehicles").innerHTML).toEqual(vehicles);
+};
+
+const checkBaseResults = (error, busy) => {
+  expect(screen.getByTestId("error").innerHTML).toEqual(error);
+  expect(screen.getByTestId("busy").innerHTML).toEqual(busy);
+};
+
+describe("VehicleContext", () => {
+  describe("getVehicles", () => {
+    beforeEach(() => {
+      const TestComp = () => {
+        const { busy, error, vehicles, getVehicles } = useVehicleContext();
+
+        return (
+          <>
+            <div data-testid="error">{error}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <div data-testid="vehicles">{JSON.stringify(vehicles)}</div>
+            <button
+              data-testid="getVehicles"
+              onClick={() => getVehicles(null)}
+            />
+          </>
+        );
+      };
+      render(
+        <VehicleProvider>
+          <TestComp />
+        </VehicleProvider>
+      );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("Initial state", () => {
+      checkVehicleResults("", "false", "[]");
+    });
+
+    it("getVehicles", async () => {
+      fireEvent.click(screen.getByTestId("getVehicles"));
+      await waitFor(() =>
+        expect(screen.getByTestId("vehicles").innerHTML).not.toBe("[]")
+      );
+      checkVehicleResults("", "false", JSON.stringify(expectedVehicleData));
+    });
+  });
+
+  describe("AddVehicles", () => {
+    beforeEach(async () => {
+      const TestComp = () => {
+        const { busy, addVehicle } = useVehicleContext();
+        const { message, setMessage } = useStatusContext();
+        const add = async (data) => {
+          try {
+            await addVehicle(data);
+          } catch (e) {
+            setMessage(e.message);
+          }
+        };
+
+        return (
+          <>
+            <div data-testid="error">{message}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <button data-testid="addVehiclesNull" onClick={() => add(null)} />
+            <button data-testid="addVehiclesNoVIN" onClick={() => add({})} />
+            <button
+              data-testid="addVehicles"
+              onClick={() => add({ vin: "XXXXXXXXXXX" })}
+            />
+          </>
+        );
+      };
+      render(
+        <StatusProvider>
+          <VehicleProvider>
+            <TestComp />
+          </VehicleProvider>
+        </StatusProvider>
+      );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("Initial state", () => {
+      checkBaseResults("", "false");
+    });
+
+    it("addVehiclesNull", async () => {
+      fireEvent.click(screen.getByTestId("addVehiclesNull"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("No vehicle data", "false");
+    });
+
+    it("addVehiclesNoVIN", async () => {
+      fireEvent.click(screen.getByTestId("addVehiclesNoVIN"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("VIN required", "false");
+    });
+
+    it("addVehicles", async () => {
+      fireEvent.click(screen.getByTestId("addVehicles"));
+      await waitFor(() =>
+        expect(screen.getByTestId("busy").innerHTML).toEqual("false")
+      );
+      checkBaseResults("", "false");
+    });
+  });
+});
+
+const expectedVehicleData = [
+  { vin: "3C4PDCBG0ET127145" },
+  { vin: "1G1FP87S3GN100062" },
+  { vin: "1HGCG325XYA062256" },
+  { vin: "1J4GZ78YXWC160024" },
+  { vin: "2C3CCAAG8CH222800" },
+  { vin: "KNADM4A39C6028108" },
+  { vin: "1G11C5SL9FF153507" },
+];
diff --git a/src/components/Contexts/__mocks__/FileUploadContext.jsx b/src/components/Contexts/__mocks__/FileUploadContext.jsx
index 2fa1bfc..7bc859a 100644
--- a/src/components/Contexts/__mocks__/FileUploadContext.jsx
+++ b/src/components/Contexts/__mocks__/FileUploadContext.jsx
@@ -3,6 +3,7 @@ import React from "react";
 let uploading = false;
 let progress = 0;
 let status = null;
+let files = null;
 
 export const FileUploadProvider = ({ children }) => {
   return <div data-testid="mocked-fileuploadprovider">{children}</div>;
@@ -12,6 +13,10 @@ export const useFileUploadContext = () => ({
   uploading,
   progress,
   status,
+  files,
   upload: jest.fn(),
   cancel: jest.fn(),
+  setFiles: jest.fn((value) => {
+    files = value;
+  }),
 });
diff --git a/src/components/Contexts/__mocks__/VehicleContext.jsx b/src/components/Contexts/__mocks__/VehicleContext.jsx
new file mode 100644
index 0000000..4813960
--- /dev/null
+++ b/src/components/Contexts/__mocks__/VehicleContext.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+
+let busy = false;
+let vehicles = [];
+let error = null;
+
+export const VehicleProvider = ({ children }) => {
+  return <div data-testid="mocked-vehicleprovider">{children}</div>;
+};
+
+export const useVehicleContext = () => ({
+  busy,
+  vehicles,
+  getVehicles: jest.fn(() => vehicles),
+  addVehicle: jest.fn(),
+});
+
+export const setBusy = (val) => {
+  busy = val;
+};
+
+export const setVehicles = (val) => {
+  vehicles = val;
+};
diff --git a/src/components/FileUploadForm/FileUploadForm.test.js b/src/components/FileUploadForm/FileUploadForm.test.js
index 498a34c..2d06c30 100644
--- a/src/components/FileUploadForm/FileUploadForm.test.js
+++ b/src/components/FileUploadForm/FileUploadForm.test.js
@@ -1,16 +1,18 @@
 jest.mock("../Contexts/UserContext");
 jest.mock("../Contexts/FileUploadContext");
+jest.mock("../Contexts/VehicleContext");
 
 import { BrowserRouter } from "react-router-dom";
-import { render, cleanup } from "@testing-library/react";
+import { render, cleanup, waitFor } from "@testing-library/react";
 import FileUploadForm from "./index";
 import { setToken } from "../Contexts/UserContext";
+import { StatusProvider } from "../Contexts/StatusContext";
 
 describe("File Upload Form", () => {
-
-  it("Should render", () => {
+  it("Should render", async () => {
     setToken({ idToken: { jwtToken: "TEST" } });
-    const { container } = render(<BrowserRouter><FileUploadForm /></BrowserRouter>);
+    const { container } = render(<StatusProvider><BrowserRouter><FileUploadForm /></BrowserRouter></StatusProvider>);
+    await waitFor(() => {});
     expect(container).toMatchSnapshot();
     cleanup();
   })
diff --git a/src/components/FileUploadForm/__snapshots__/FileUploadForm.test.js.snap b/src/components/FileUploadForm/__snapshots__/FileUploadForm.test.js.snap
index f72bfed..c8322db 100644
--- a/src/components/FileUploadForm/__snapshots__/FileUploadForm.test.js.snap
+++ b/src/components/FileUploadForm/__snapshots__/FileUploadForm.test.js.snap
@@ -2,24 +2,238 @@
 
 exports[`File Upload Form Should render 1`] = `
 <div>
-  <main
-    class="MuiContainer-root MuiContainer-maxWidthXs"
+  <div
+    data-testid="mocked-vehicleprovider"
   >
     <div
-      class="makeStyles-paper-1"
+      data-testid="mocked-fileuploadprovider"
     >
-      <h1
-        class="MuiTypography-root MuiTypography-h5"
-      >
-        Upload file
-      </h1>
       <div
-        data-testid="mocked-fileuploadprovider"
+        class="makeStyles-paper-1"
       >
+        <h1
+          class="MuiTypography-root MuiTypography-h5"
+        >
+          Upload Update Package
+        </h1>
         <form
+          action="{onSubmit}"
           class="makeStyles-form-3"
           novalidate=""
         >
+          <div
+            class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+          >
+            <label
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+              data-shrink="false"
+              for="packagename"
+              id="packagename-label"
+            >
+              Package name
+              <span
+                aria-hidden="true"
+                class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+              >
+                 
+                *
+              </span>
+            </label>
+            <div
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+            >
+              <input
+                aria-invalid="false"
+                class="MuiInputBase-input MuiOutlinedInput-input"
+                id="packagename"
+                maxlength="255"
+                name="packagename"
+                required=""
+                type="text"
+                value=""
+              />
+              <fieldset
+                aria-hidden="true"
+                class="PrivateNotchedOutline-root-21 MuiOutlinedInput-notchedOutline"
+              >
+                <legend
+                  class="PrivateNotchedOutline-legendLabelled-23"
+                >
+                  <span>
+                    Package name
+                     *
+                  </span>
+                </legend>
+              </fieldset>
+            </div>
+          </div>
+          <div
+            class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+          >
+            <label
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+              data-shrink="false"
+              for="version"
+              id="version-label"
+            >
+              Version
+              <span
+                aria-hidden="true"
+                class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+              >
+                 
+                *
+              </span>
+            </label>
+            <div
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+            >
+              <input
+                aria-invalid="false"
+                class="MuiInputBase-input MuiOutlinedInput-input"
+                id="version"
+                maxlength="255"
+                name="version"
+                required=""
+                type="text"
+                value=""
+              />
+              <fieldset
+                aria-hidden="true"
+                class="PrivateNotchedOutline-root-21 MuiOutlinedInput-notchedOutline"
+              >
+                <legend
+                  class="PrivateNotchedOutline-legendLabelled-23"
+                >
+                  <span>
+                    Version
+                     *
+                  </span>
+                </legend>
+              </fieldset>
+            </div>
+          </div>
+          <div
+            class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+          >
+            <label
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+              data-shrink="false"
+              for="description"
+              id="description-label"
+            >
+              Description
+            </label>
+            <div
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline MuiOutlinedInput-multiline"
+            >
+              <textarea
+                aria-invalid="false"
+                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline"
+                id="description"
+                maxlength="5120"
+                name="description"
+                placeholder="Package description"
+                rows="4"
+              />
+              <fieldset
+                aria-hidden="true"
+                class="PrivateNotchedOutline-root-21 MuiOutlinedInput-notchedOutline"
+              >
+                <legend
+                  class="PrivateNotchedOutline-legendLabelled-23"
+                >
+                  <span>
+                    Description
+                  </span>
+                </legend>
+              </fieldset>
+            </div>
+          </div>
+          <div
+            class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+          >
+            <label
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
+              data-shrink="false"
+              for="releasenotes"
+              id="releasenotes-label"
+            >
+              Release Notes URL
+            </label>
+            <div
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+            >
+              <input
+                aria-invalid="false"
+                class="MuiInputBase-input MuiOutlinedInput-input"
+                id="releasenotes"
+                maxlength="1024"
+                name="releasenotes"
+                placeholder="Release Notes URL"
+                type="text"
+                value=""
+              />
+              <fieldset
+                aria-hidden="true"
+                class="PrivateNotchedOutline-root-21 MuiOutlinedInput-notchedOutline"
+              >
+                <legend
+                  class="PrivateNotchedOutline-legendLabelled-23"
+                >
+                  <span>
+                    Release Notes URL
+                  </span>
+                </legend>
+              </fieldset>
+            </div>
+          </div>
+          <div
+            class="MuiFormControl-root makeStyles-formControl-5 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-8 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>
           <div
             class="MuiDropzoneArea-root"
             tabindex="0"
@@ -51,31 +265,23 @@ exports[`File Upload Form Should render 1`] = `
               </svg>
             </div>
           </div>
-        </form>
-      </div>
-      <div
-        class="MuiGrid-root MuiGrid-container"
-      >
-        <div
-          class="MuiGrid-root MuiGrid-item"
-        >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-containedPrimary MuiButton-fullWidth"
             tabindex="0"
-            type="button"
+            type="submit"
           >
             <span
               class="MuiButton-label"
             >
-              Sign Out
+              Submit
             </span>
             <span
               class="MuiTouchRipple-root"
             />
           </button>
-        </div>
+        </form>
       </div>
     </div>
-  </main>
+  </div>
 </div>
 `;
diff --git a/src/components/FileUploadForm/index.jsx b/src/components/FileUploadForm/index.jsx
index 3942980..7ee812d 100644
--- a/src/components/FileUploadForm/index.jsx
+++ b/src/components/FileUploadForm/index.jsx
@@ -1,65 +1,224 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   Button,
-  Container,
-  CssBaseline,
-  Grid,
+  Chip,
+  FormControl,
+  Input,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
   Typography,
+  useTheme,
 } from "@material-ui/core";
-import { DropzoneAreaBase } from "material-ui-dropzone";
+import { DropzoneArea } from "material-ui-dropzone";
 import { useUserContext } from "../Contexts/UserContext";
+import { useStatusContext } from "../Contexts/StatusContext";
+import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
 import {
   useFileUploadContext,
   FileUploadProvider,
 } from "../Contexts/FileUploadContext";
 import ModalProgressBar from "../ModalProgressBar";
 import useStyles from "../useStyles";
+import menuItemStyle from "../menuItemStyle";
 
 const FileUploadZone = ({ classes, token }) => {
-  const { upload, rejectedFile } = useFileUploadContext();
-  const {
-    token: {
-      idToken: { jwtToken: authToken },
-    },
-  } = useUserContext();
+  const { setFiles } = useFileUploadContext();
+  const { setMessage } = useStatusContext();
 
   return (
-    <form className={classes.form} noValidate>
-      <DropzoneAreaBase
+    <>
+      <DropzoneArea
         id="dropzone"
+        showPreviews={true}
+        showPreviewsInDropzone={false}
+        useChipsForPreview
+        previewGridProps={{ container: { spacing: 1, direction: "row" } }}
+        previewChipProps={{ classes: { root: classes.previewChip } }}
+        previewText="Selected files"
         maxFileSize={1e9}
         filesLimit={1}
         showAlerts={false}
-        onAdd={(files) => upload(files, authToken)}
+        onChange={(files) => setFiles(files)}
+        onDelete={(files) => setFiles(files)}
         onDropRejected={(files) => {
-          rejectedFile(files);
+          console.log("Rejected files", files);
+          setMessage(`Rejected ${files[0].name} too large`);
         }}
       />
       <ModalProgressBar />
-    </form>
+    </>
+  );
+};
+
+const MainForm = () => {
+  const { uploading, upload, files } = useFileUploadContext();
+  const { token } = useUserContext();
+  const { getVehicles, vehicles } = useVehicleContext();
+  const { setMessage } = useStatusContext();
+  const [selectedVehicles, setSelectedVehicles] = useState([]);
+  const theme = useTheme();
+  const classes = useStyles();
+  const packagenameEl = useRef(null);
+  const versionEl = useRef(null);
+  const descEl = useRef(null);
+  const releasenotesEl = useRef(null);
+  const handleVehiclesChange = (event) => {
+    setSelectedVehicles(event.target.value);
+  };
+  const onSubmit = async (event) => {
+    try {
+      event.preventDefault();
+      const {
+        idToken: { jwtToken: authToken },
+      } = token;
+      const formData = {
+        packagename: packagenameEl.current.value,
+        version: versionEl.current.value,
+        description: descEl.current.value,
+        releasenotes: releasenotesEl.current.value,
+        vehicles: selectedVehicles,
+      };
+
+      await upload(formData, authToken, files);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
+  useEffect(() => {
+    const {
+      idToken: { jwtToken: authToken },
+    } = token;
+    (async () => {
+      try {
+        await getVehicles(null, authToken);
+      } catch (e) {
+        setMessage(e.message);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className={classes.paper}>
+      <Typography component="h1" variant="h5">
+        Upload Update Package
+      </Typography>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <TextField
+          id="packagename"
+          name="packagename"
+          label="Package name"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+          }}
+          required
+          fullWidth
+          inputRef={packagenameEl}
+        />
+        <TextField
+          id="version"
+          name="version"
+          label="Version"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+          }}
+          required
+          fullWidth
+          inputRef={versionEl}
+        />
+        <TextField
+          id="description"
+          name="description"
+          label="Description"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "5120",
+          }}
+          fullWidth
+          multiline
+          rows={4}
+          placeholder="Package description"
+          inputRef={descEl}
+        />
+        <TextField
+          id="releasenotes"
+          name="releasenotes"
+          label="Release Notes URL"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "1024",
+          }}
+          fullWidth
+          placeholder="Release Notes URL"
+          inputRef={releasenotesEl}
+        />
+        <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}
+            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>
+        <FileUploadZone classes={classes} />
+        <Button
+          type="submit"
+          disabled={uploading}
+          fullWidth
+          variant="contained"
+          color="primary"
+          className={classes.submit}
+          onClick={onSubmit}
+        >
+          {uploading ? "Uploading..." : "Submit"}
+        </Button>
+      </form>
+    </div>
   );
 };
 
 export default function FileUploadForm() {
-  const { signOut } = useUserContext();
-  const classes = useStyles();
-
   return (
-    <Container component="main" maxWidth="xs">
-      <CssBaseline />
-      <div className={classes.paper}>
-        <Typography component="h1" variant="h5">
-          Upload file
-        </Typography>
-        <FileUploadProvider>
-          <FileUploadZone classes={classes} />
-        </FileUploadProvider>
-        <Grid container>
-          <Grid item>
-            <Button onClick={signOut}>Sign Out</Button>
-          </Grid>
-        </Grid>
-      </div>
-    </Container>
+    <VehicleProvider>
+      <FileUploadProvider>
+        <MainForm />
+      </FileUploadProvider>
+    </VehicleProvider>
   );
 }
diff --git a/src/components/Layouts/MenuDrawer.jsx b/src/components/Layouts/MenuDrawer.jsx
new file mode 100644
index 0000000..9499a45
--- /dev/null
+++ b/src/components/Layouts/MenuDrawer.jsx
@@ -0,0 +1,105 @@
+import React from "react";
+import clsx from "clsx";
+import { useTheme } from "@material-ui/core/styles";
+import Drawer from "@material-ui/core/Drawer";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import Divider from "@material-ui/core/Divider";
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import ChevronRightIcon from "@material-ui/icons/ChevronRight";
+
+import SideMenu from "./SideMenu";
+import useStyles from "../useStyles";
+import { useUserContext } from "../Contexts/UserContext";
+import { Button, Container } from "@material-ui/core";
+
+export default function MenuDrawer({ children }) {
+  const classes = useStyles();
+  const theme = useTheme();
+  const { signOut, token } = useUserContext();
+  const [open, setOpen] = React.useState(false);
+
+  const handleDrawerOpen = () => {
+    setOpen(true);
+  };
+
+  const handleDrawerClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div className={classes.root}>
+      <AppBar
+        position="fixed"
+        className={clsx(classes.appBar, {
+          [classes.appBarShift]: open && token !== null,
+        })}
+      >
+        <Toolbar>
+          {token !== null && (
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              onClick={handleDrawerOpen}
+              edge="start"
+              className={clsx(
+                classes.menuButton,
+                open && classes.hide && token !== null
+              )}
+            >
+              <MenuIcon />
+            </IconButton>
+          )}
+          <Typography variant="h6" noWrap>
+            Fisker OTA Portal
+          </Typography>
+          {token !== null && (
+            <Button
+              color="inherit"
+              onClick={signOut}
+              className={classes.rightToolbar}
+            >
+              Sign Out
+            </Button>
+          )}
+        </Toolbar>
+      </AppBar>
+      {token !== null && (
+        <Drawer
+          className={classes.drawer}
+          variant="persistent"
+          anchor="left"
+          open={open}
+          classes={{
+            paper: classes.drawerPaper,
+          }}
+        >
+          <div className={classes.drawerHeader}>
+            <IconButton onClick={handleDrawerClose}>
+              {theme.direction === "ltr" ? (
+                <ChevronLeftIcon />
+              ) : (
+                <ChevronRightIcon />
+              )}
+            </IconButton>
+          </div>
+          <Divider />
+          <SideMenu />
+        </Drawer>
+      )}
+      <main
+        className={clsx(classes.content, {
+          [classes.contentShift]: open && token !== null,
+        })}
+      >
+        <div className={classes.drawerHeader} />
+        <Container component="main" maxWidth="md">
+          {children}
+        </Container>
+      </main>
+    </div>
+  );
+}
diff --git a/src/components/Layouts/SideMenu.jsx b/src/components/Layouts/SideMenu.jsx
new file mode 100644
index 0000000..53338a3
--- /dev/null
+++ b/src/components/Layouts/SideMenu.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { List } from "@material-ui/core";
+import ListItemLink from "../ListItemLink";
+
+export default function SideMenu() {
+  const menuData = [
+    { label: "Upload Update Package", to: "/home" },
+    { label: "Add Vehicles", to: "/vehicle-add" },
+  ];
+
+  return (
+    <List>
+      {menuData.map((item, index) => (
+        <ListItemLink key={index} primary={item.label} to={item.to} />
+      ))}
+    </List>
+  );
+}
diff --git a/src/components/ListItemLink.jsx b/src/components/ListItemLink.jsx
new file mode 100644
index 0000000..317a42c
--- /dev/null
+++ b/src/components/ListItemLink.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import { Link as RouterLink } from "react-router-dom";
+
+function ListItemLink(props) {
+  const { icon, primary, to } = props;
+
+  const renderLink = React.useMemo(
+    () =>
+      React.forwardRef((itemProps, ref) => (
+        <RouterLink to={to} ref={ref} {...itemProps} />
+      )),
+    [to]
+  );
+
+  return (
+    <li>
+      <ListItem button component={renderLink}>
+        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
+        <ListItemText primary={primary} />
+      </ListItem>
+    </li>
+  );
+}
+
+ListItemLink.propTypes = {
+  icon: PropTypes.element,
+  primary: PropTypes.string.isRequired,
+  to: PropTypes.string.isRequired,
+};
+
+export default ListItemLink;
diff --git a/src/components/MessageBar.jsx b/src/components/MessageBar.jsx
index f57d280..1211cbd 100644
--- a/src/components/MessageBar.jsx
+++ b/src/components/MessageBar.jsx
@@ -1,18 +1,24 @@
 import React from "react";
 import { Snackbar } from "@material-ui/core";
+import { useStatusContext } from "./Contexts/StatusContext";
 import { useUserContext } from "./Contexts/UserContext";
 
 export const MessageBar = () => {
+  const { message, setMessage } = useStatusContext();
   const { error, setError } = useUserContext();
-  const open = error !== null;
+  const open = message !== null || error !== null;
+  const msg = message || error;
 
   return (
     <Snackbar
       open={open}
-      message={error}
+      message={msg}
       anchorOrigin={{ vertical: "top", horizontal: "center" }}
       autoHideDuration={10000}
-      onClose={() => setError(null)}
+      onClose={() => {
+        setMessage(null);
+        setError(null);
+      }}
     />
   );
 };
diff --git a/src/components/Routes/ProtectedRoute.jsx b/src/components/Routes/ProtectedRoute.jsx
index d8ca0e5..003c190 100644
--- a/src/components/Routes/ProtectedRoute.jsx
+++ b/src/components/Routes/ProtectedRoute.jsx
@@ -1,12 +1,13 @@
 import React from "react";
 import { Redirect, Route } from "react-router-dom";
 import { useUserContext } from "../Contexts/UserContext";
+import { useStatusContext } from "../Contexts/StatusContext";
 
 export const ProtectedRoute = ({ render, ...others }) => {
-  const context = useUserContext();
-  const { token, setError } = context;
+  const { token } = useUserContext();
+  const { setMessage } = useStatusContext();
   if (!token) {
-    setError("Please sign in to access");
+    setMessage("Please sign in to access");
     return <Redirect to="/" />;
   }
   return <Route render {...others} />;
diff --git a/src/components/Routes/SiteRoutes.jsx b/src/components/Routes/SiteRoutes.jsx
index 79a0f4c..de80a44 100644
--- a/src/components/Routes/SiteRoutes.jsx
+++ b/src/components/Routes/SiteRoutes.jsx
@@ -1,5 +1,5 @@
 import React, { Suspense } from "react";
-import { BrowserRouter, Switch } from "react-router-dom";
+import { Switch } from "react-router-dom";
 
 import { AuthRoute, TYPES } from "../Routes/AuthRoute";
 import { MessageBar } from "../MessageBar";
@@ -7,6 +7,7 @@ import { useUserContext } from "../Contexts/UserContext";
 
 const SSOForm = React.lazy(() => import("../SSOForm"));
 const FileUploadForm = React.lazy(() => import("../FileUploadForm"));
+const VehicleAddForm = React.lazy(() => import("../VehicleAddForm"));
 const PageNotFound = React.lazy(() => import("../404"));
 
 const SiteRoutes = () => {
@@ -14,24 +15,28 @@ const SiteRoutes = () => {
   return (
     <Suspense fallback={"Loading..."}>
       <MessageBar />
-      <BrowserRouter>
-        <Switch>
-          <AuthRoute
-            path="/"
-            exact
-            render={() => <SSOForm />}
-            type={TYPES.GUEST}
-            token={token}
-          />
-          <AuthRoute
-            path="/home"
-            render={() => <FileUploadForm />}
-            type={TYPES.PROTECTED}
-            token={token}
-          />
-          <PageNotFound />
-        </Switch>
-      </BrowserRouter>
+      <Switch>
+        <AuthRoute
+          path="/"
+          exact
+          render={() => <SSOForm />}
+          type={TYPES.GUEST}
+          token={token}
+        />
+        <AuthRoute
+          path="/home"
+          render={() => <FileUploadForm />}
+          type={TYPES.PROTECTED}
+          token={token}
+        />
+        <AuthRoute
+          path="/vehicle-add"
+          render={() => <VehicleAddForm />}
+          type={TYPES.PROTECTED}
+          token={token}
+        />
+        <PageNotFound />
+      </Switch>
     </Suspense>
   );
 };
diff --git a/src/components/SSOForm/__snapshots__/SSOForm.test.js.snap b/src/components/SSOForm/__snapshots__/SSOForm.test.js.snap
index 0979c84..d7bb611 100644
--- a/src/components/SSOForm/__snapshots__/SSOForm.test.js.snap
+++ b/src/components/SSOForm/__snapshots__/SSOForm.test.js.snap
@@ -2,39 +2,25 @@
 
 exports[`Sign In Form Should render 1`] = `
 <div>
-  <main
-    class="MuiContainer-root MuiContainer-maxWidthXs"
+  <div
+    class="makeStyles-paper-1"
+    style="justify-content: center;"
   >
-    <div
-      class="makeStyles-paper-1"
+    <a
+      aria-disabled="false"
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-containedPrimary"
+      href="https://cognito.com/authorize?redirect=https://example.com/callback"
+      tabindex="0"
     >
-      <h1
-        class="MuiTypography-root MuiTypography-h5"
+      <span
+        class="MuiButton-label"
       >
-        Fisker OTA Portal
-      </h1>
-      <form
-        action="{onSubmit}"
-        class="makeStyles-form-3"
-        novalidate=""
-      >
-        <a
-          aria-disabled="false"
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-containedPrimary MuiButton-fullWidth"
-          href="https://cognito.com/authorize?redirect=https://example.com/callback"
-          tabindex="0"
-        >
-          <span
-            class="MuiButton-label"
-          >
-            Sign In
-          </span>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </a>
-      </form>
-    </div>
-  </main>
+        Sign In
+      </span>
+      <span
+        class="MuiTouchRipple-root"
+      />
+    </a>
+  </div>
 </div>
 `;
diff --git a/src/components/SSOForm/index.jsx b/src/components/SSOForm/index.jsx
index e4009c8..36c4b7e 100644
--- a/src/components/SSOForm/index.jsx
+++ b/src/components/SSOForm/index.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Button, Container, CssBaseline, Typography } from "@material-ui/core";
+import { Button } from "@material-ui/core";
 import { useUserContext } from "../Contexts/UserContext";
 import useStyles from "../useStyles";
 
@@ -11,7 +11,7 @@ const getCode = (search) => {
 
 export default function SignInForm() {
   const classes = useStyles();
-  const { getAuthorizeURL, signIn } = useUserContext();
+  const { getAuthorizeURL, signIn, fetching } = useUserContext();
 
   useEffect(() => {
     const code = getCode(document.location.search);
@@ -21,25 +21,17 @@ export default function SignInForm() {
   }, []);
 
   return (
-    <Container component="main" maxWidth="xs">
-      <CssBaseline />
-      <div className={classes.paper}>
-        <Typography component="h1" variant="h5">
-          Fisker OTA Portal
-        </Typography>
-        <form className={classes.form} noValidate action="{onSubmit}">
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            color="primary"
-            className={classes.submit}
-            href={getAuthorizeURL()}
-          >
-            Sign In
-          </Button>
-        </form>
-      </div>
-    </Container>
+    <div className={classes.paper} style={{ justifyContent: "center" }}>
+      <Button
+        type="submit"
+        variant="contained"
+        color="primary"
+        className={classes.submit}
+        href={getAuthorizeURL()}
+        disabled={fetching}
+      >
+        {fetching ? "Please wait..." : "Sign In"}
+      </Button>
+    </div>
   );
 }
diff --git a/src/components/VehicleAddForm/index.jsx b/src/components/VehicleAddForm/index.jsx
new file mode 100644
index 0000000..e9dcaad
--- /dev/null
+++ b/src/components/VehicleAddForm/index.jsx
@@ -0,0 +1,77 @@
+import React, { useRef } from "react";
+
+import useStyles from "../useStyles";
+import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
+import { useStatusContext } from "../Contexts/StatusContext";
+import { useUserContext } from "../Contexts/UserContext";
+import { Button, TextField, Typography } from "@material-ui/core";
+
+const MainForm = () => {
+  const { addVehicle, busy } = useVehicleContext();
+  const { setMessage } = useStatusContext();
+  const { token } = useUserContext();
+  const classes = useStyles();
+  const vinEl = useRef(null);
+
+  const onSubmit = async (event) => {
+    try {
+      event.preventDefault();
+
+      const {
+        idToken: { jwtToken: authToken },
+      } = token;
+      const formData = {
+        vin: vinEl.current.value,
+      };
+
+      await addVehicle(formData, authToken);
+
+      setMessage(`Added ${vinEl.current.value}`);
+      vinEl.current.value = "";
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
+  return (
+    <div className={classes.paper}>
+      <Typography component="h1" variant="h5">
+        Add Vehicle
+      </Typography>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <TextField
+          id="vin"
+          name="vin"
+          label="VIN"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "17",
+          }}
+          required
+          fullWidth
+          inputRef={vinEl}
+        />
+        <Button
+          type="submit"
+          disabled={busy}
+          fullWidth
+          variant="contained"
+          color="primary"
+          className={classes.submit}
+          onClick={onSubmit}
+        >
+          {busy ? "Submitting..." : "Submit"}
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+const VehicleAddForm = () => (
+  <VehicleProvider>
+    <MainForm />
+  </VehicleProvider>
+);
+
+export default VehicleAddForm;
diff --git a/src/components/menuItemStyle.jsx b/src/components/menuItemStyle.jsx
new file mode 100644
index 0000000..c0d0965
--- /dev/null
+++ b/src/components/menuItemStyle.jsx
@@ -0,0 +1,10 @@
+function menuItemStyle(item, selectedItems, theme) {
+  return {
+    fontWeight:
+      selectedItems.indexOf(item) === -1
+        ? theme.typography.fontWeightRegular
+        : theme.typography.fontWeightMedium,
+  };
+};
+
+export default menuItemStyle
diff --git a/src/components/useStyles.jsx b/src/components/useStyles.jsx
index 1493f7b..17552d4 100644
--- a/src/components/useStyles.jsx
+++ b/src/components/useStyles.jsx
@@ -1,5 +1,9 @@
 import { makeStyles } from "@material-ui/core/styles";
 
+const MENUITEM_HEIGHT = 48;
+const MENUITEM_PADDING_TOP = 8;
+const DRAWER_WIDTH = 240;
+
 const useStyles = makeStyles((theme) => ({
   paper: {
     marginTop: theme.spacing(8),
@@ -17,6 +21,89 @@ const useStyles = makeStyles((theme) => ({
   },
   submit: {
     margin: theme.spacing(3, 0, 2),
+    textAlign: "center",
+  },
+  formControl: {
+    margin: theme.spacing(1),
+    width: "100%",
+    minWidth: 120,
+  },
+  chips: {
+    display: "flex",
+    flexWrap: "wrap",
+  },
+  chip: {
+    margin: 2,
+  },
+  menuProps: {
+    PaperProps: {
+      style: {
+        maxHeight: MENUITEM_HEIGHT * 4.5 + MENUITEM_PADDING_TOP,
+        width: 250,
+      },
+    },
+  },
+  previewChip: {
+    minWidth: 160,
+    maxWidth: 210,
+  },
+  root: {
+    display: "flex",
+  },
+  appBar: {
+    transition: theme.transitions.create(["margin", "width"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  appBarShift: {
+    width: `calc(100% - ${DRAWER_WIDTH}px)`,
+    marginLeft: DRAWER_WIDTH,
+    transition: theme.transitions.create(["margin", "width"], {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  hide: {
+    display: "none",
+  },
+  drawer: {
+    width: DRAWER_WIDTH,
+    flexShrink: 0,
+  },
+  drawerPaper: {
+    width: DRAWER_WIDTH,
+  },
+  drawerHeader: {
+    display: "flex",
+    alignItems: "center",
+    padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
+    ...theme.mixins.toolbar,
+    justifyContent: "flex-end",
+  },
+  content: {
+    flexGrow: 1,
+    padding: theme.spacing(3),
+    transition: theme.transitions.create("margin", {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    marginLeft: -DRAWER_WIDTH,
+  },
+  contentShift: {
+    transition: theme.transitions.create("margin", {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    marginLeft: 0,
+  },
+  rightToolbar: {
+    marginLeft: "auto",
+    marginRight: -12,
   },
 }));
 
diff --git a/src/services/__mocks__/uploadFile.js b/src/services/__mocks__/uploadFile.js
index 4443a17..6e39b1e 100644
--- a/src/services/__mocks__/uploadFile.js
+++ b/src/services/__mocks__/uploadFile.js
@@ -11,7 +11,7 @@ export const getCancelToken = () => {
   return issuedCancelToken;
 }
 
-export const uploadFile = async (file, token, onProgress, cancelToken) => {
+export const uploadFile = async (file, data, token, onProgress, cancelToken) => {
   if (!uploadFileDelay) return uploadFileResponse;
   onProgress(50);
   await delay(10000);
diff --git a/src/services/__mocks__/vehicles.js b/src/services/__mocks__/vehicles.js
new file mode 100644
index 0000000..6e1a6dd
--- /dev/null
+++ b/src/services/__mocks__/vehicles.js
@@ -0,0 +1,17 @@
+
+const data = [
+  { vin: "3C4PDCBG0ET127145" },
+  { vin: "1G1FP87S3GN100062" },
+  { vin: "1HGCG325XYA062256" },
+  { vin: "1J4GZ78YXWC160024" },
+  { vin: "2C3CCAAG8CH222800" },
+  { vin: "KNADM4A39C6028108" },
+  { vin: "1G11C5SL9FF153507" },
+];
+
+const vehiclesAPI = {
+  getVehicles: async (search, token) => { return { data: { data } }; },
+  addVehicle: async (vehicle, token) => { data.push(vehicle); },
+};
+
+export default vehiclesAPI;
diff --git a/src/services/uploadFile.js b/src/services/uploadFile.js
index c5f45e1..64206ba 100644
--- a/src/services/uploadFile.js
+++ b/src/services/uploadFile.js
@@ -7,7 +7,7 @@ export const getCancelToken = () => {
   return token.source();
 }
 
-export const uploadFile = (file, token, onProgress, cancelToken) => {
+export const uploadFile = (file, data, token, onProgress, cancelToken) => {
   const form = new FormData();
   let options = {
     method: "POST",
@@ -24,7 +24,10 @@ export const uploadFile = (file, token, onProgress, cancelToken) => {
         onProgress(Math.min(99, Math.floor((event.loaded / event.total) * 100)));
       }
     }
-  } 
-  form.append('file', file);
-  return axios.post(UPLOAD_ENDPOINT, form, options);
+  }
+  for (let key in data) {
+    form.append(key, data[key]);
+  }
+  form.append("file", file);
+  return axios.post(`${UPLOAD_ENDPOINT}/upload`, form, options);
 };
diff --git a/src/services/vehicles.js b/src/services/vehicles.js
new file mode 100644
index 0000000..3d7fcf8
--- /dev/null
+++ b/src/services/vehicles.js
@@ -0,0 +1,20 @@
+import axios from 'axios';
+
+const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL || "https://gw-dev.fiskerdps.com/ota_update";
+
+const getOptions = (token) => ({
+  headers: {
+    "Authorization": `Bearer ${token}`,
+  },
+});
+
+const vehiclesAPI = {
+  getVehicles: async (search, token) => {
+    return axios.get(`${API_ENDPOINT}/vehicles`, getOptions(token));
+  },
+  addVehicle: async (vehicle, token) => {
+    return axios.post(`${API_ENDPOINT}/vehicle`, vehicle, getOptions(token));
+  } 
+};
+
+export default vehiclesAPI;