diff --git a/package-lock.json b/package-lock.json
index 8182dba..55c27be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,19 +9,24 @@
       "version": "0.1.1",
       "dependencies": {
         "@datadog/browser-logs": "^3.11.0",
+        "@date-io/date-fns": "1.x",
+        "@date-io/moment": "1.x",
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
         "@material-ui/core": "^4.12.4",
         "@material-ui/icons": "^4.11.3",
+        "@material-ui/pickers": "^3.3.10",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^12.1.4",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^0.26.1",
         "clsx": "^1.1.1",
+        "date-fns": "^2.29.2",
         "email-validator": "^2.0.4",
         "env-cmd": "^10.1.0",
         "leaflet": "^1.8.0",
         "material-ui-dropzone": "^3.5.0",
+        "moment": "^2.29.4",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-leaflet": "^3.2.5",
@@ -3396,6 +3401,33 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "node_modules/@date-io/core": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
+      "integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
+    },
+    "node_modules/@date-io/date-fns": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-1.3.13.tgz",
+      "integrity": "sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==",
+      "dependencies": {
+        "@date-io/core": "^1.3.13"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.0.0"
+      }
+    },
+    "node_modules/@date-io/moment": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-1.3.13.tgz",
+      "integrity": "sha512-3kJYusJtQuOIxq6byZlzAHoW/18iExJer9qfRF5DyyzdAk074seTuJfdofjz4RFfTd/Idk8WylOQpWtERqvFuQ==",
+      "dependencies": {
+        "@date-io/core": "^1.3.13"
+      },
+      "peerDependencies": {
+        "moment": "^2.24.0"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.7.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
@@ -3591,6 +3623,21 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/@eslint/eslintrc/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -3629,6 +3676,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -4148,6 +4200,26 @@
         }
       }
     },
+    "node_modules/@material-ui/pickers": {
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.3.10.tgz",
+      "integrity": "sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.0",
+        "@date-io/core": "1.x",
+        "@types/styled-jsx": "^2.2.8",
+        "clsx": "^1.0.2",
+        "react-transition-group": "^4.0.0",
+        "rifm": "^0.7.0"
+      },
+      "peerDependencies": {
+        "@date-io/core": "^1.3.6",
+        "@material-ui/core": "^4.0.0",
+        "prop-types": "^15.6.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/@material-ui/styles": {
       "version": "4.11.5",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
@@ -5103,6 +5175,14 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "node_modules/@types/styled-jsx": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/@types/styled-jsx/-/styled-jsx-2.2.9.tgz",
+      "integrity": "sha512-W/iTlIkGEyTBGTEvZCey8EgQlQ5l0DwMqi3iOXlLs2kyBwYTXHKEiU6IZ5EwoRwngL8/dGYuzezSup89ttVHLw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.3",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz",
@@ -5629,13 +5709,13 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       },
       "funding": {
@@ -5659,34 +5739,6 @@
         }
       }
     },
-    "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
-    "node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "peerDependencies": {
-        "ajv": "^6.9.1"
-      }
-    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -5996,6 +6048,34 @@
         "webpack": ">=2"
       }
     },
+    "node_modules/babel-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/babel-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/babel-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/babel-loader/node_modules/json5": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -6505,13 +6585,19 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001314",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz",
-      "integrity": "sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/browserslist"
-      }
+      "version": "1.0.30001387",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001387.tgz",
+      "integrity": "sha512-fKDH0F1KOJvR+mWSOvhj8lVRr/Q/mc5u5nabU2vi1/sgvlSqEsE8dOq0Hy/BqVbDkCYQPRRHB1WRjW6PGB/7PA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        }
+      ]
     },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
@@ -7112,21 +7198,6 @@
         }
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -7138,11 +7209,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -7397,6 +7463,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -8596,6 +8674,21 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/eslint/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -8652,6 +8745,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/espree": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.1.tgz",
@@ -9143,6 +9241,29 @@
         }
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -9187,6 +9308,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -11414,9 +11540,9 @@
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
     },
     "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -11931,21 +12057,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -11957,11 +12068,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -12012,6 +12118,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -14905,6 +15019,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rifm": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.7.0.tgz",
+      "integrity": "sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -15084,6 +15209,34 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/schema-utils/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/schema-utils/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/schema-utils/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -16167,6 +16320,19 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -16473,21 +16639,6 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -16499,11 +16650,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -16573,21 +16719,6 @@
         }
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -16610,11 +16741,6 @@
         "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/webpack-dev-server/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -16875,21 +17001,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/workbox-build/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/workbox-build/node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -16904,11 +17015,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/workbox-build/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/workbox-build/node_modules/source-map": {
       "version": "0.8.0-beta.0",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
@@ -19680,6 +19786,27 @@
         }
       }
     },
+    "@date-io/core": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
+      "integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
+    },
+    "@date-io/date-fns": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-1.3.13.tgz",
+      "integrity": "sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==",
+      "requires": {
+        "@date-io/core": "^1.3.13"
+      }
+    },
+    "@date-io/moment": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-1.3.13.tgz",
+      "integrity": "sha512-3kJYusJtQuOIxq6byZlzAHoW/18iExJer9qfRF5DyyzdAk074seTuJfdofjz4RFfTd/Idk8WylOQpWtERqvFuQ==",
+      "requires": {
+        "@date-io/core": "^1.3.13"
+      }
+    },
     "@emotion/babel-plugin": {
       "version": "11.7.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
@@ -19841,6 +19968,17 @@
         "strip-json-comments": "^3.1.1"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
         "argparse": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -19866,6 +20004,11 @@
           "requires": {
             "argparse": "^2.0.1"
           }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
         }
       }
     },
@@ -20251,6 +20394,19 @@
         "@babel/runtime": "^7.4.4"
       }
     },
+    "@material-ui/pickers": {
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.3.10.tgz",
+      "integrity": "sha512-hS4pxwn1ZGXVkmgD4tpFpaumUaAg2ZzbTrxltfC5yPw4BJV+mGkfnQOB4VpWEYZw2jv65Z0wLwDE/piQiPPZ3w==",
+      "requires": {
+        "@babel/runtime": "^7.6.0",
+        "@date-io/core": "1.x",
+        "@types/styled-jsx": "^2.2.8",
+        "clsx": "^1.0.2",
+        "react-transition-group": "^4.0.0",
+        "rifm": "^0.7.0"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.11.5",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
@@ -20946,6 +21102,14 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "@types/styled-jsx": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/@types/styled-jsx/-/styled-jsx-2.2.9.tgz",
+      "integrity": "sha512-W/iTlIkGEyTBGTEvZCey8EgQlQ5l0DwMqi3iOXlLs2kyBwYTXHKEiU6IZ5EwoRwngL8/dGYuzezSup89ttVHLw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/testing-library__jest-dom": {
       "version": "5.14.3",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz",
@@ -21333,13 +21497,13 @@
       }
     },
     "ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "requires": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       }
     },
@@ -21349,32 +21513,8 @@
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "requires": {
         "ajv": "^8.0.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        }
       }
     },
-    "ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "requires": {}
-    },
     "ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -21587,6 +21727,28 @@
         "schema-utils": "^2.6.5"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        },
         "json5": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
@@ -21996,9 +22158,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001314",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz",
-      "integrity": "sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw=="
+      "version": "1.0.30001387",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001387.tgz",
+      "integrity": "sha512-fKDH0F1KOJvR+mWSOvhj8lVRr/Q/mc5u5nabU2vi1/sgvlSqEsE8dOq0Hy/BqVbDkCYQPRRHB1WRjW6PGB/7PA=="
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
@@ -22424,17 +22586,6 @@
         "source-map": "^0.6.1"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -22443,11 +22594,6 @@
             "fast-deep-equal": "^3.1.3"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -22647,6 +22793,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+    },
     "debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -23216,6 +23367,17 @@
         "v8-compile-cache": "^2.0.3"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
         "argparse": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -23250,6 +23412,11 @@
           "requires": {
             "argparse": "^2.0.1"
           }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
         }
       }
     },
@@ -23944,6 +24111,23 @@
         "tapable": "^1.0.0"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
         "chalk": {
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -23976,6 +24160,11 @@
             "universalify": "^2.0.0"
           }
         },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        },
         "schema-utils": {
           "version": "2.7.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -25585,9 +25774,9 @@
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
     },
     "json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -25982,17 +26171,6 @@
         "schema-utils": "^4.0.0"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -26001,11 +26179,6 @@
             "fast-deep-equal": "^3.1.3"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -26045,6 +26218,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -28035,6 +28213,14 @@
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
+    "rifm": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.7.0.tgz",
+      "integrity": "sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1"
+      }
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -28144,6 +28330,30 @@
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
         "ajv-keywords": "^3.5.2"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        }
       }
     },
     "select-hose": {
@@ -28983,6 +29193,12 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "typescript": {
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
+      "peer": true
+    },
     "unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -29227,17 +29443,6 @@
         "schema-utils": "^4.0.0"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -29246,11 +29451,6 @@
             "fast-deep-equal": "^3.1.3"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -29301,17 +29501,6 @@
         "ws": "^8.4.2"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -29325,11 +29514,6 @@
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
           "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -29511,17 +29695,6 @@
         "workbox-window": "6.5.1"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "fs-extra": {
           "version": "9.1.0",
           "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -29533,11 +29706,6 @@
             "universalify": "^2.0.0"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "source-map": {
           "version": "0.8.0-beta.0",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",
diff --git a/package.json b/package.json
index a6539a1..11daec5 100644
--- a/package.json
+++ b/package.json
@@ -4,19 +4,24 @@
   "private": true,
   "dependencies": {
     "@datadog/browser-logs": "^3.11.0",
+    "@date-io/date-fns": "1.x",
+    "@date-io/moment": "1.x",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
+    "@material-ui/pickers": "^3.3.10",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.26.1",
     "clsx": "^1.1.1",
+    "date-fns": "^2.29.2",
     "email-validator": "^2.0.4",
     "env-cmd": "^10.1.0",
     "leaflet": "^1.8.0",
     "material-ui-dropzone": "^3.5.0",
+    "moment": "^2.29.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-leaflet": "^3.2.5",
@@ -62,7 +67,7 @@
     "coverageThreshold": {
       "global": {
         "branches": 39,
-        "functions": 47,
+        "functions": 45.5,
         "lines": 50,
         "statements": 49
       }
diff --git a/src/components/App/App.test.js b/src/components/App/App.test.js
index 1c40617..f5de9f0 100644
--- a/src/components/App/App.test.js
+++ b/src/components/App/App.test.js
@@ -1,7 +1,6 @@
 jest.mock("../Contexts/CarUpdatesContext");
 jest.mock("../Contexts/FileUploadContext");
 jest.mock("../Contexts/VehicleContext");
-jest.mock("../Contexts/ManifestCreateContext");
 jest.mock("../Contexts/ManifestsContext");
 jest.mock("../Contexts/UserContext");
 jest.mock("../../services/monitoring");
@@ -73,10 +72,6 @@ describe("App", () => {
     await check("/package-deploy/1", "span.MuiButton-label", "Sign In");
   });
 
-  it("Route /package-create unauthenticated", async () => {
-    await check("/package-create", "span.MuiButton-label", "Sign In");
-  });
-
   it("Route /vehicle-add unauthenticated", async () => {
     await check("/vehicle-add", "span.MuiButton-label", "Sign In");
   });
@@ -146,11 +141,6 @@ describe("App", () => {
     await check("/package-deploy/1", "h6", "Deploy Test Manifest 1.0");
   });
 
-  it("Route /package-create authenticated", async () => {
-    setToken(TEST_AUTH_OBJECT);
-    await check("/package-create", "h6", "Create Deployments");
-  });
-
   it("Route /vehicle-add authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
     await check("/vehicle-add", "h6", "Add Vehicle");
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 582864f..ad4b43a 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -1068,1523 +1068,6 @@ exports[`App Route /home unauthenticated 1`] = `
 </div>
 `;
 
-exports[`App Route /package-create authenticated 1`] = `
-<div>
-  <div
-    data-testid="mocked-userprovider"
-  >
-    <div
-      class="makeStyles-root-0"
-    >
-      <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-0 makeStyles-appBarShift-0 mui-fixed MuiPaper-elevation4"
-      >
-        <div
-          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
-        >
-          <div>
-            <h6
-              class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
-            >
-              Create Deployments
-            </h6>
-            <nav
-              aria-label="breadcrumb"
-              class="MuiTypography-root MuiBreadcrumbs-root MuiTypography-body1 MuiTypography-colorInherit"
-              style="font-size: 10px;"
-            >
-              <ol
-                class="MuiBreadcrumbs-ol"
-              >
-                <li
-                  class="MuiBreadcrumbs-li"
-                >
-                  <a
-                    class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit"
-                    href="/packages"
-                  >
-                    Deployments
-                  </a>
-                </li>
-                <li
-                  aria-hidden="true"
-                  class="MuiBreadcrumbs-separator"
-                >
-                  /
-                </li>
-                <li
-                  class="MuiBreadcrumbs-li"
-                >
-                  <a
-                    class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit"
-                    href="/package-create"
-                  >
-                    Create Deployments
-                  </a>
-                </li>
-              </ol>
-            </nav>
-          </div>
-          <div
-            class="makeStyles-rightToolbar-0"
-            color="inherit"
-          >
-            <button
-              aria-controls="fade-menu"
-              aria-haspopup="true"
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label"
-              >
-                John
-              </span>
-              <span
-                class="MuiTouchRipple-root"
-              />
-            </button>
-          </div>
-        </div>
-      </header>
-      <div
-        class="MuiDrawer-root MuiDrawer-docked makeStyles-drawer-0"
-      >
-        <div
-          class="MuiPaper-root MuiDrawer-paper makeStyles-drawerPaper-0 MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft MuiPaper-elevation0"
-        >
-          <div
-            class="makeStyles-drawerHeader-0 makeStyles-drawerHeaderLogo-0"
-          >
-            <img
-              alt="Fisker Admin Portal"
-              class="makeStyles-logo-0"
-              src="fisker-badge.svg"
-            />
-          </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="MuiListItemIcon-root"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Home
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/packages"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root"
-                    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.96zM17 13l-5 5-5-5h3V9h4v4h3z"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Deployments
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/vehicles"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Vehicles
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/fleets"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M12 4H5C3.34 4 2 5.34 2 7v8c0 1.66 1.34 3 3 3l-1 1v1h1l2-2.03L9 18v-5H4V5.98L13 6v2h2V7c0-1.66-1.34-3-3-3zM5 14c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm15.57-4.34c-.14-.4-.52-.66-.97-.66h-7.19c-.46 0-.83.26-.98.66L10 13.77l.01 5.51c0 .38.31.72.69.72h.62c.38 0 .68-.38.68-.76V18h8v1.24c0 .38.31.76.69.76h.61c.38 0 .69-.34.69-.72l.01-1.37v-4.14l-1.43-4.11zm-8.16.34h7.19l1.03 3h-9.25l1.03-3zM12 16c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm8 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Fleets
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-            <li>
-              <a
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                href="/datascope"
-                role="button"
-                tabindex="0"
-              >
-                <div
-                  class="MuiListItemIcon-root"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"
-                    />
-                  </svg>
-                </div>
-                <div
-                  class="MuiListItemText-root"
-                >
-                  <span
-                    class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                  >
-                    Datascope
-                  </span>
-                </div>
-                <span
-                  class="MuiTouchRipple-root"
-                />
-              </a>
-            </li>
-            <span>
-              <li>
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/certificates/add"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiListItemIcon-root"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"
-                      />
-                    </svg>
-                  </div>
-                  <div
-                    class="MuiListItemText-root"
-                  >
-                    <span
-                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                    >
-                      Tools
-                    </span>
-                  </div>
-                  <span
-                    class="MuiTouchRipple-root"
-                  />
-                </a>
-              </li>
-            </span>
-            <ul
-              style="margin-left: 50px;"
-            >
-              <li>
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/certificates/add"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiListItemText-root"
-                  >
-                    <span
-                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                    >
-                      Certificate
-                    </span>
-                  </div>
-                  <span
-                    class="MuiTouchRipple-root"
-                  />
-                </a>
-              </li>
-              <li>
-                <a
-                  aria-disabled="false"
-                  class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-                  href="/tools/sms/send"
-                  role="button"
-                  tabindex="0"
-                >
-                  <div
-                    class="MuiListItemText-root"
-                  >
-                    <span
-                      class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-                    >
-                      SMS
-                    </span>
-                  </div>
-                  <span
-                    class="MuiTouchRipple-root"
-                  />
-                </a>
-              </li>
-            </ul>
-          </ul>
-        </div>
-      </div>
-      <main
-        class="makeStyles-content-0 makeStyles-contentShift-0"
-      >
-        <div
-          class="makeStyles-drawerHeader-0"
-        />
-        <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
-        >
-          <div
-            data-testid="mocked-manifestcreateprovider"
-          >
-            <div
-              class="makeStyles-paper-0"
-            >
-              <form
-                action="{onSubmit}"
-                class="makeStyles-form-0"
-                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-0 MuiOutlinedInput-notchedOutline"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-0"
-                      >
-                        <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-0 MuiOutlinedInput-notchedOutline"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-0"
-                      >
-                        <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 Mui-required Mui-required"
-                    data-shrink="false"
-                    for="description"
-                    id="description-label"
-                  >
-                    Description
-                    <span
-                      aria-hidden="true"
-                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
-                    >
-                       
-                      *
-                    </span>
-                  </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"
-                      required=""
-                      rows="4"
-                      style="height: 0px; overflow: hidden;"
-                    />
-                    <textarea
-                      aria-hidden="true"
-                      class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline"
-                      readonly=""
-                      style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); width: 100%;"
-                      tabindex="-1"
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-0"
-                      >
-                        <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 Mui-required Mui-required"
-                    data-shrink="false"
-                    for="release_notes"
-                    id="release_notes-label"
-                  >
-                    Release Notes URL
-                    <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="release_notes"
-                      maxlength="1024"
-                      name="release_notes"
-                      placeholder="Release Notes URL"
-                      required=""
-                      type="text"
-                      value=""
-                    />
-                    <fieldset
-                      aria-hidden="true"
-                      class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                    >
-                      <legend
-                        class="PrivateNotchedOutline-legendLabelled-0"
-                      >
-                        <span>
-                          Release Notes URL
-                           *
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                </div>
-                <h6
-                  class="MuiTypography-root MuiTypography-h6"
-                >
-                  ECU Files
-                </h6>
-                <table
-                  class="MuiTable-root"
-                >
-                  <thead
-                    class="MuiTableHead-root"
-                  >
-                    <tr
-                      class="MuiTableRow-root MuiTableRow-head"
-                    >
-                      <th
-                        class="MuiTableCell-root MuiTableCell-head"
-                        scope="col"
-                      >
-                        ID
-                      </th>
-                      <th
-                        class="MuiTableCell-root MuiTableCell-head"
-                        scope="col"
-                      >
-                        ECU
-                      </th>
-                      <th
-                        class="MuiTableCell-root MuiTableCell-head"
-                        scope="col"
-                      >
-                        Version
-                      </th>
-                      <th
-                        class="MuiTableCell-root MuiTableCell-head"
-                        scope="col"
-                      >
-                        Hardware
-                      </th>
-                      <th
-                        class="MuiTableCell-root MuiTableCell-head"
-                        scope="col"
-                      />
-                    </tr>
-                  </thead>
-                  <tbody
-                    class="MuiTableBody-root"
-                  >
-                    <tr
-                      class="MuiTableRow-root"
-                    >
-                      <td
-                        class="MuiTableCell-root MuiTableCell-body"
-                      >
-                        0
-                      </td>
-                      <td
-                        class="MuiTableCell-root MuiTableCell-body"
-                      >
-                        <div
-                          class="MuiInputBase-root MuiOutlinedInput-root"
-                        >
-                          <select
-                            class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
-                            id="name"
-                          >
-                            <option
-                              value="AGS"
-                            >
-                              Active Grille Shutter
-                            </option>
-                            <option
-                              value="ADB"
-                            >
-                              Adaptive Driving Beam
-                            </option>
-                            <option
-                              value="ADAS"
-                            >
-                              Advanced Driver Assist System
-                            </option>
-                            <option
-                              value="ACU"
-                            >
-                              Airbag Control Unit
-                            </option>
-                            <option
-                              value="ACP"
-                            >
-                              Airconditioning Control Panel
-                            </option>
-                            <option
-                              value="AMP"
-                            >
-                              Amplifier
-                            </option>
-                            <option
-                              value="AP_FL"
-                            >
-                              Anti-Pinch Front Left
-                            </option>
-                            <option
-                              value="AP_FR"
-                            >
-                              Anti-Pinch Front Right
-                            </option>
-                            <option
-                              value="AP_RL"
-                            >
-                              Anti-Pinch Rear Left
-                            </option>
-                            <option
-                              value="AP_RR"
-                            >
-                              Anti-Pinch Rear Right
-                            </option>
-                            <option
-                              value="AL"
-                            >
-                              Atmosphere Lamp
-                            </option>
-                            <option
-                              value="BCS"
-                            >
-                              Battery HV Current Sensor
-                            </option>
-                            <option
-                              value="BMS"
-                            >
-                              Battery Management System
-                            </option>
-                            <option
-                              value="BMU"
-                            >
-                              Battery Management Unit
-                            </option>
-                            <option
-                              value="BCM"
-                            >
-                              Body Control Module
-                            </option>
-                            <option
-                              value="CDS"
-                            >
-                              Center Display Screen
-                            </option>
-                            <option
-                              value="CCU"
-                            >
-                              Charging Control Unit
-                            </option>
-                            <option
-                              value="CIM"
-                            >
-                              Column Integrated Module
-                            </option>
-                            <option
-                              value="CVM"
-                            >
-                              Coolant Valve Module
-                            </option>
-                            <option
-                              value="CFM"
-                            >
-                              Cooling Fan Module
-                            </option>
-                            <option
-                              value="CMRR_FL"
-                            >
-                              Corner Mid Range Radar Front Left
-                            </option>
-                            <option
-                              value="CMRR_FR"
-                            >
-                              Corner Mid Range Radar Front Right
-                            </option>
-                            <option
-                              value="CMRR_RL"
-                            >
-                              Corner Mid Range Radar Rear Left
-                            </option>
-                            <option
-                              value="CMRR_RR"
-                            >
-                              Corner Mid Range Radar Rear Right
-                            </option>
-                            <option
-                              value="DVRC"
-                            >
-                              Digital Video Recorder Camera
-                            </option>
-                            <option
-                              value="DC-CHM"
-                            >
-                              Direct Current Charge Machine
-                            </option>
-                            <option
-                              value="DMC"
-                            >
-                              Driver Monitor Camera
-                            </option>
-                            <option
-                              value="DSMC"
-                            >
-                              Driver Seat Memory Controller
-                            </option>
-                            <option
-                              value="DWSG"
-                            >
-                              Driver Window Switch Group
-                            </option>
-                            <option
-                              value="EKS"
-                            >
-                              ElectroKnox
-                            </option>
-                            <option
-                              value="EPS"
-                            >
-                              Electric Power Steering
-                            </option>
-                            <option
-                              value="EAS"
-                            >
-                              Electrical Air Compressor System
-                            </option>
-                            <option
-                              value="ECC"
-                            >
-                              Electrical Climate Controller
-                            </option>
-                            <option
-                              value="EWP_B"
-                            >
-                              Electrical Water Pump Battery
-                            </option>
-                            <option
-                              value="EWP_FD"
-                            >
-                              Electrical Water Pump Front Drive
-                            </option>
-                            <option
-                              value="EWP_H"
-                            >
-                              Electrical Water Pump Heat
-                            </option>
-                            <option
-                              value="EWP_RD"
-                            >
-                              Electrical Water Pump Rear Drive
-                            </option>
-                            <option
-                              value="EWM"
-                            >
-                              Electrical Wiper Motor
-                            </option>
-                            <option
-                              value="EXV_B"
-                            >
-                              Electronic Expansion Value Battery
-                            </option>
-                            <option
-                              value="EXV_HP"
-                            >
-                              Electronic Expansion Valve HPC
-                            </option>
-                            <option
-                              value="ESP"
-                            >
-                              Electronic Stability Program
-                            </option>
-                            <option
-                              value="FDHA_FL"
-                            >
-                              Flush Door Handle Actuator Front Left
-                            </option>
-                            <option
-                              value="FDHA_FR"
-                            >
-                              Flush Door Handle Actuator Front Right
-                            </option>
-                            <option
-                              value="FDHA_RL"
-                            >
-                              Flush Door Handle Actuator Rear Left
-                            </option>
-                            <option
-                              value="FDHA_RR"
-                            >
-                              Flush Door Handle Actuator Rear Right
-                            </option>
-                            <option
-                              value="Lumber"
-                            >
-                              Four-Way Lumber
-                            </option>
-                            <option
-                              value="FBM_L"
-                            >
-                              Front Beam Module Left
-                            </option>
-                            <option
-                              value="FBM_R"
-                            >
-                              Front Beam Module Right
-                            </option>
-                            <option
-                              value="FVC"
-                            >
-                              Front Video Camera
-                            </option>
-                            <option
-                              value="GW"
-                            >
-                              Gateway
-                            </option>
-                            <option
-                              value="HUD"
-                            >
-                              Head-Up Display
-                            </option>
-                            <option
-                              value="IDS"
-                            >
-                              Instrument Display Screen
-                            </option>
-                            <option
-                              value="ICC"
-                            >
-                              Integrated Cockpit Controller
-                            </option>
-                            <option
-                              value="IBS"
-                            >
-                              Intelligent Battery Sensor
-                            </option>
-                            <option
-                              value="iBooster"
-                            >
-                              Intelligent Booster
-                            </option>
-                            <option
-                              value="KS"
-                            >
-                              Kick Sensor
-                            </option>
-                            <option
-                              value="LSC"
-                            >
-                              Left Side Camera
-                            </option>
-                            <option
-                              value="MRR"
-                            >
-                              Mid Range Radar
-                            </option>
-                            <option
-                              value="MCU_F"
-                            >
-                              Motor Control Unit Front
-                            </option>
-                            <option
-                              value="MCU_R"
-                            >
-                              Motor Control Unit Rear
-                            </option>
-                            <option
-                              value="MDV"
-                            >
-                              Motorized Deco-Vent
-                            </option>
-                            <option
-                              value="MFS"
-                            >
-                              Multifunction Steering
-                            </option>
-                            <option
-                              value="MIS"
-                            >
-                              Multimedia Interactive Switch
-                            </option>
-                            <option
-                              value="MPC"
-                            >
-                              Multipurpose Camera
-                            </option>
-                            <option
-                              value="OMC"
-                            >
-                              Occupant Monitor Camera
-                            </option>
-                            <option
-                              value="OHC"
-                            >
-                              Overhead Console
-                            </option>
-                            <option
-                              value="PAS"
-                            >
-                              Parking Assistant System
-                            </option>
-                            <option
-                              value="PCU"
-                            >
-                              Parking Control Unit
-                            </option>
-                            <option
-                              value="PMS"
-                            >
-                              Particulate Matter Sensor
-                            </option>
-                            <option
-                              value="PSM"
-                            >
-                              Passenger Seat Module
-                            </option>
-                            <option
-                              value="PEPS"
-                            >
-                              Passive Entry And Passive Start
-                            </option>
-                            <option
-                              value="PKC"
-                            >
-                              Phone Key Controller
-                            </option>
-                            <option
-                              value="PKC_ANT_L"
-                            >
-                              Phone Key Controller Antenna Left
-                            </option>
-                            <option
-                              value="PKC_ANT_R"
-                            >
-                              Phone Key Controller Antenna Right
-                            </option>
-                            <option
-                              value="PWC"
-                            >
-                              Phone Wireless Charging
-                            </option>
-                            <option
-                              value="PASC"
-                            >
-                              Power Adjust Steering Column
-                            </option>
-                            <option
-                              value="PDU"
-                            >
-                              Power Distribution Unit
-                            </option>
-                            <option
-                              value="PLGM"
-                            >
-                              Power Lift Gate Module
-                            </option>
-                            <option
-                              value="RLS"
-                            >
-                              Rain Light Sensor
-                            </option>
-                            <option
-                              value="RAC"
-                            >
-                              Rear Airconditioning Control
-                            </option>
-                            <option
-                              value="RVC"
-                            >
-                              Rear View Camera
-                            </option>
-                            <option
-                              value="RSC"
-                            >
-                              Right Side Camera
-                            </option>
-                            <option
-                              value="RCM"
-                            >
-                              Roof Control Module
-                            </option>
-                            <option
-                              value="RSM"
-                            >
-                              Roof Shade Module
-                            </option>
-                            <option
-                              value="TBOX"
-                            >
-                              Telematics Box
-                            </option>
-                            <option
-                              value="TPMS"
-                            >
-                              Tire Pressure Monitoring System
-                            </option>
-                            <option
-                              value="TDS"
-                            >
-                              Touch Display Screen
-                            </option>
-                            <option
-                              value="USB Box"
-                            >
-                              USB Box
-                            </option>
-                            <option
-                              value="VCU"
-                            >
-                              Vehicle Control Unit
-                            </option>
-                            <option
-                              value="VSP"
-                            >
-                              Vehicle Sound For Pedestraion
-                            </option>
-                            <option
-                              value="WTC_B"
-                            >
-                              Water Thermal Controller Battery
-                            </option>
-                            <option
-                              value="WTC_H"
-                            >
-                              Water Thermal Controller Heat
-                            </option>
-                          </select>
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M7 10l5 5 5-5z"
-                            />
-                          </svg>
-                          <fieldset
-                            aria-hidden="true"
-                            class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                            style="padding-left: 8px;"
-                          >
-                            <legend
-                              class="PrivateNotchedOutline-legend-0"
-                              style="width: 0.01px;"
-                            >
-                              <span>
-                                ​
-                              </span>
-                            </legend>
-                          </fieldset>
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root MuiTableCell-body"
-                      >
-                        <div
-                          class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
-                          requried="true"
-                        >
-                          <div
-                            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input MuiInput-input"
-                              id="version"
-                              name="version"
-                              placeholder="Version"
-                              type="text"
-                              value=""
-                            />
-                          </div>
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root MuiTableCell-body"
-                      >
-                        <div
-                          class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
-                          requried="false"
-                        >
-                          <div
-                            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input MuiInput-input"
-                              id="hw_version"
-                              name="hw_version"
-                              placeholder="Hardware"
-                              type="text"
-                              value=""
-                            />
-                          </div>
-                        </div>
-                      </td>
-                      <td
-                        class="MuiTableCell-root MuiTableCell-body"
-                        width="25"
-                      >
-                        <a
-                          href="/package-create"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="MuiSvgIcon-root"
-                            focusable="false"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                            />
-                          </svg>
-                        </a>
-                      </td>
-                    </tr>
-                    <tr
-                      class="MuiTableRow-root"
-                    >
-                      <td
-                        class="MuiTableCell-root MuiTableCell-body"
-                        colspan="5"
-                      >
-                        <table
-                          class="MuiTable-root"
-                        >
-                          <thead
-                            class="MuiTableHead-root"
-                          >
-                            <tr
-                              class="MuiTableRow-root MuiTableRow-head"
-                            >
-                              <th
-                                class="MuiTableCell-root MuiTableCell-head"
-                                scope="col"
-                              >
-                                Filename
-                              </th>
-                              <th
-                                class="MuiTableCell-root MuiTableCell-head"
-                                scope="col"
-                              >
-                                Offset
-                              </th>
-                              <th
-                                class="MuiTableCell-root MuiTableCell-head"
-                                scope="col"
-                              >
-                                Checksum
-                              </th>
-                              <th
-                                class="MuiTableCell-root MuiTableCell-head"
-                                scope="col"
-                              >
-                                Type
-                              </th>
-                              <th
-                                class="MuiTableCell-root MuiTableCell-head"
-                                scope="col"
-                              />
-                            </tr>
-                          </thead>
-                          <tbody
-                            class="MuiTableBody-root"
-                          >
-                            <tr
-                              class="MuiTableRow-root"
-                            >
-                              <td
-                                class="MuiTableCell-root MuiTableCell-body"
-                              >
-                                test.bin
-                              </td>
-                              <td
-                                class="MuiTableCell-root MuiTableCell-body"
-                              >
-                                <div
-                                  class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
-                                  requried="false"
-                                >
-                                  <div
-                                    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
-                                  >
-                                    <input
-                                      aria-invalid="false"
-                                      class="MuiInputBase-input MuiInput-input"
-                                      id="offset"
-                                      name="offset"
-                                      placeholder="Offset"
-                                      type="text"
-                                      value="0"
-                                    />
-                                  </div>
-                                </div>
-                              </td>
-                              <td
-                                class="MuiTableCell-root MuiTableCell-body"
-                              >
-                                <div
-                                  class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
-                                  requried="false"
-                                >
-                                  <div
-                                    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
-                                  >
-                                    <input
-                                      aria-invalid="false"
-                                      class="MuiInputBase-input MuiInput-input"
-                                      id="checksum"
-                                      name="checksum"
-                                      placeholder="Checksum"
-                                      type="text"
-                                      value=""
-                                    />
-                                  </div>
-                                </div>
-                              </td>
-                              <td
-                                class="MuiTableCell-root MuiTableCell-body"
-                              >
-                                <div
-                                  class="MuiInputBase-root MuiOutlinedInput-root"
-                                >
-                                  <select
-                                    class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
-                                    id="type"
-                                  >
-                                    <option
-                                      value="bootloader"
-                                    >
-                                      Bootloader
-                                    </option>
-                                    <option
-                                      value="software"
-                                    >
-                                      Software
-                                    </option>
-                                    <option
-                                      value="calibration"
-                                    >
-                                      Calibration
-                                    </option>
-                                    <option
-                                      value="configuration"
-                                    >
-                                      Configuration
-                                    </option>
-                                    <option
-                                      value="none"
-                                    >
-                                      None
-                                    </option>
-                                  </select>
-                                  <svg
-                                    aria-hidden="true"
-                                    class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
-                                    focusable="false"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M7 10l5 5 5-5z"
-                                    />
-                                  </svg>
-                                  <fieldset
-                                    aria-hidden="true"
-                                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
-                                    style="padding-left: 8px;"
-                                  >
-                                    <legend
-                                      class="PrivateNotchedOutline-legend-0"
-                                      style="width: 0.01px;"
-                                    >
-                                      <span>
-                                        ​
-                                      </span>
-                                    </legend>
-                                  </fieldset>
-                                </div>
-                              </td>
-                              <td
-                                class="MuiTableCell-root MuiTableCell-body"
-                                width="25"
-                              >
-                                <a
-                                  href="/package-create"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="MuiSvgIcon-root"
-                                    focusable="false"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                                    />
-                                  </svg>
-                                </a>
-                              </td>
-                            </tr>
-                          </tbody>
-                          <tfoot
-                            class="MuiTableFooter-root"
-                          >
-                            <tr
-                              class="MuiTableRow-root MuiTableRow-footer"
-                            >
-                              <td
-                                class="MuiTableCell-root MuiTableCell-footer"
-                                colspan="5"
-                              >
-                                <div
-                                  class="makeStyles-fileDropArea-0 makeStyles-clickable-0"
-                                >
-                                  ADD FILES
-                                </div>
-                                <input
-                                  class="makeStyles-hidden-0"
-                                  type="file"
-                                />
-                              </td>
-                            </tr>
-                          </tfoot>
-                        </table>
-                      </td>
-                    </tr>
-                  </tbody>
-                  <tfoot
-                    class="MuiTableFooter-root"
-                  >
-                    <tr
-                      class="MuiTableRow-root MuiTableRow-footer"
-                    >
-                      <td
-                        class="MuiTableCell-root MuiTableCell-footer MuiTableCell-alignCenter"
-                        colspan="5"
-                      >
-                        <button
-                          class="MuiButtonBase-root MuiButton-root MuiButton-text"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label"
-                          >
-                            Add ECU
-                          </span>
-                          <span
-                            class="MuiTouchRipple-root"
-                          />
-                        </button>
-                      </td>
-                    </tr>
-                  </tfoot>
-                </table>
-                <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 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 /package-create unauthenticated 1`] = `
-<div>
-  <div
-    data-testid="mocked-userprovider"
-  >
-    <div
-      class="makeStyles-root-0"
-    >
-      <header
-        class="MuiPaper-root MuiAppBar-root MuiAppBar-positionFixed MuiAppBar-colorPrimary makeStyles-appBar-0 mui-fixed MuiPaper-elevation4"
-      >
-        <div
-          class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
-        >
-          <div>
-            <h6
-              class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
-            />
-          </div>
-        </div>
-      </header>
-      <main
-        class="makeStyles-content-0"
-      >
-        <div
-          class="makeStyles-drawerHeader-0"
-        />
-        <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
-        >
-          <div
-            class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
-          >
-            <a
-              aria-disabled="false"
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 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>
-`;
-
 exports[`App Route /package-deploy authenticated 1`] = `
 <div>
   <div
@@ -2965,112 +1448,154 @@ exports[`App Route /package-deploy authenticated 1`] = `
           class="MuiContainer-root MuiContainer-maxWidthLg"
         >
           <div
-            data-testid="mocked-vehicleprovider"
+            data-testid="mocked-manifestsprovider"
           >
             <div
-              data-testid="mocked-manifestsprovider"
+              data-testid="mocked-carupdatesprovider"
             >
               <div
-                data-testid="mocked-carupdatesprovider"
+                class="makeStyles-paper-0"
               >
-                <div
-                  class="makeStyles-paper-0"
+                <form
+                  action="{onSubmit}"
+                  class="makeStyles-form-0"
+                  novalidate=""
                 >
-                  <form
-                    action="{onSubmit}"
-                    class="makeStyles-form-0"
-                    novalidate=""
+                  <p
+                    class="MuiTypography-root MuiTypography-body2"
+                  >
+                    Created 
+                    7/1/2021 10:40:07 PM
+                    .
+                  </p>
+                  <div
+                    class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
                   >
-                    <p
-                      class="MuiTypography-root MuiTypography-body2"
-                    >
-                      Created 
-                      7/1/2021 10:40:07 PM
-                      .
-                    </p>
                     <div
-                      class="MuiGrid-root makeStyles-root-0 MuiGrid-container MuiGrid-spacing-xs-2"
+                      class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-2"
                     >
                       <div
-                        class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-4"
+                        class="makeStyles-labelInline-0"
                       >
-                        <div
-                          class="makeStyles-labelInline-0"
-                        >
-                          0 Selected
-                        </div>
+                        0 Selected
                       </div>
-                      <div
-                        class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                    </div>
+                    <div
+                      class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-2"
+                    >
+                      <label
+                        class="MuiFormControlLabel-root"
                       >
-                        <div
-                          class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
+                        <span
+                          class="MuiSwitch-root"
                         >
-                          <label
-                            class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
-                            data-shrink="false"
-                            for="search"
+                          <span
+                            aria-disabled="false"
+                            class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiSwitch-switchBase MuiSwitch-colorSecondary PrivateSwitchBase-checked-0 Mui-checked"
                           >
-                            Search
-                          </label>
-                          <div
-                            class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
-                          >
-                            <input
-                              aria-invalid="false"
-                              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
-                              id="search"
-                              type="text"
-                              value=""
-                            />
-                            <div
-                              class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                            <span
+                              class="MuiIconButton-label"
                             >
-                              <button
-                                aria-label="search"
-                                class="MuiButtonBase-root MuiIconButton-root"
-                                tabindex="0"
-                                type="button"
+                              <input
+                                aria-label="controlled"
+                                checked=""
+                                class="PrivateSwitchBase-input-0 MuiSwitch-input"
+                                type="checkbox"
+                                value=""
+                              />
+                              <span
+                                class="MuiSwitch-thumb"
+                              />
+                            </span>
+                            <span
+                              class="MuiTouchRipple-root"
+                            />
+                          </span>
+                          <span
+                            class="MuiSwitch-track"
+                          />
+                        </span>
+                        <span
+                          class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                        >
+                          Car(default) or Fleet
+                        </span>
+                      </label>
+                    </div>
+                    <div
+                      class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                    >
+                      <div
+                        class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
+                      >
+                        <label
+                          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+                          data-shrink="false"
+                          for="search"
+                        >
+                          Search
+                        </label>
+                        <div
+                          class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+                        >
+                          <input
+                            aria-invalid="false"
+                            class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+                            id="search"
+                            type="text"
+                            value=""
+                          />
+                          <div
+                            class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                          >
+                            <button
+                              aria-label="search"
+                              class="MuiButtonBase-root MuiIconButton-root"
+                              tabindex="0"
+                              type="button"
+                            >
+                              <span
+                                class="MuiIconButton-label"
                               >
-                                <span
-                                  class="MuiIconButton-label"
+                                <svg
+                                  aria-hidden="true"
+                                  class="MuiSvgIcon-root"
+                                  focusable="false"
+                                  viewBox="0 0 24 24"
                                 >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="MuiSvgIcon-root"
-                                    focusable="false"
-                                    viewBox="0 0 24 24"
-                                  >
-                                    <path
-                                      d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-                                    />
-                                  </svg>
-                                </span>
-                                <span
-                                  class="MuiTouchRipple-root"
-                                />
-                              </button>
-                            </div>
+                                  <path
+                                    d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                                  />
+                                </svg>
+                              </span>
+                              <span
+                                class="MuiTouchRipple-root"
+                              />
+                            </button>
                           </div>
                         </div>
                       </div>
-                      <div
-                        class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
-                      >
-                        <button
-                          class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-formControl-0 makeStyles-textField-0 MuiButton-containedPrimary Mui-disabled Mui-disabled"
-                          disabled=""
-                          tabindex="-1"
-                          type="submit"
-                        >
-                          <span
-                            class="MuiButton-label"
-                          >
-                            Deploy
-                          </span>
-                        </button>
-                      </div>
                     </div>
+                    <div
+                      class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+                    >
+                      <button
+                        class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-formControl-0 makeStyles-textField-0 MuiButton-containedPrimary Mui-disabled Mui-disabled"
+                        disabled=""
+                        tabindex="-1"
+                        type="submit"
+                      >
+                        <span
+                          class="MuiButton-label"
+                        >
+                          Deploy
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    data-testid="mocked-vehicleprovider"
+                  >
                     <div
                       class="makeStyles-paper-0 makeStyles-tableSize-0"
                     >
@@ -3393,8 +1918,8 @@ exports[`App Route /package-deploy authenticated 1`] = `
                         </tfoot>
                       </table>
                     </div>
-                  </form>
-                </div>
+                  </div>
+                </form>
               </div>
             </div>
           </div>
@@ -3909,6 +2434,10 @@ exports[`App Route /package-status authenticated 1`] = `
                       >
                         Updated
                       </th>
+                      <th
+                        class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                        scope="col"
+                      />
                     </tr>
                   </thead>
                   <tbody
@@ -3947,6 +2476,26 @@ exports[`App Route /package-status authenticated 1`] = `
                       >
                         7/12/2021 6:22:13 PM
                       </td>
+                      <td
+                        class="MuiTableCell-root MuiTableCell-body"
+                      >
+                        <a
+                          class=""
+                          href="/package-status/1"
+                          title="Send cancel for 1G1FP87S3GN100062"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+                            />
+                          </svg>
+                        </a>
+                      </td>
                     </tr>
                   </tbody>
                   <tfoot
@@ -3957,7 +2506,7 @@ exports[`App Route /package-status authenticated 1`] = `
                     >
                       <td
                         class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                        colspan="5"
+                        colspan="6"
                       >
                         <div
                           class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
@@ -4762,23 +3311,26 @@ exports[`App Route /packages authenticated 1`] = `
                           />
                         </svg>
                       </a>
-                      <a
-                        class=""
-                        href="/packages"
-                        title="Delete \\"Test Manifest 1.0\\""
-                      >
-                        <svg
-                          aria-hidden="true"
-                          aria-label="Delete Test Manifest 1.0"
-                          class="MuiSvgIcon-root"
-                          focusable="false"
-                          viewBox="0 0 24 24"
+                      <div>
+                        <a
+                          class=""
+                          href="/packages"
+                          title="Delete \\"Test Manifest 1.0\\""
                         >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </a>
+                          <svg
+                            aria-hidden="true"
+                            aria-label="Delete Test Manifest 1.0"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                            />
+                          </svg>
+                        </a>
+                        <div />
+                      </div>
                     </td>
                   </tr>
                 </tbody>
@@ -8244,7 +6796,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
             class="makeStyles-paper-0 makeStyles-tableSize-0"
           >
             <div
-              class="MuiBox-root MuiBox-root-1532 makeStyles-tableToolbar-0"
+              class="MuiBox-root MuiBox-root-0 makeStyles-tableToolbar-0"
             >
               <div
                 class="MuiTabs-root"
@@ -8348,6 +6900,24 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                         class="MuiTouchRipple-root"
                       />
                     </button>
+                    <button
+                      aria-controls="tabpanel-5"
+                      aria-selected="false"
+                      class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                      id="tab-5"
+                      role="tab"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiTab-wrapper"
+                      >
+                        Remote Commands
+                      </span>
+                      <span
+                        class="MuiTouchRipple-root"
+                      />
+                    </button>
                   </div>
                   <span
                     class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -8362,7 +6932,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               role="tabpanel"
             >
               <div
-                class="MuiBox-root MuiBox-root-1537"
+                class="MuiBox-root MuiBox-root-0"
               >
                 <div
                   class="makeStyles-paper-0 makeStyles-tableSize-0"
@@ -8481,6 +7051,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                           </a>
                         </div>
                       </div>
+                      <div />
                     </div>
                   </div>
                 </div>
@@ -8511,6 +7082,13 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               id="tabpanel-4"
               role="tabpanel"
             />
+            <div
+              aria-labelledby="tab-5"
+              class="makeStyles-fullWidth-0"
+              hidden=""
+              id="tabpanel-5"
+              role="tabpanel"
+            />
           </div>
         </main>
       </main>
diff --git a/src/components/CANFilter/Table/__snapshots__/index.test.jsx.snap b/src/components/CANFilter/Table/__snapshots__/index.test.jsx.snap
index cee527c..7c01ca1 100644
--- a/src/components/CANFilter/Table/__snapshots__/index.test.jsx.snap
+++ b/src/components/CANFilter/Table/__snapshots__/index.test.jsx.snap
@@ -149,6 +149,29 @@ exports[`CANFiltersTable Render 1`] = `
                       </svg>
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      Fleet
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
                   <th
                     class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                     scope="col"
@@ -173,6 +196,13 @@ exports[`CANFiltersTable Render 1`] = `
                   >
                     1000
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/fleet/undefined"
+                    />
+                  </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
@@ -226,6 +256,13 @@ exports[`CANFiltersTable Render 1`] = `
                   >
                     2000
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/fleet/undefined"
+                    />
+                  </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
@@ -279,6 +316,13 @@ exports[`CANFiltersTable Render 1`] = `
                   >
                     0
                   </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    <a
+                      href="/fleet/undefined"
+                    />
+                  </td>
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
diff --git a/src/components/CANFilter/Table/index.jsx b/src/components/CANFilter/Table/index.jsx
index c4fe4a2..61b2a7a 100644
--- a/src/components/CANFilter/Table/index.jsx
+++ b/src/components/CANFilter/Table/index.jsx
@@ -39,6 +39,10 @@ const tableColumns = [
     id: "interval",
     label: "Interval (ms)"
   },
+  {
+    id: "fleet",
+    label: "Fleet"
+  },
   {
     id: "",
     label: "Actions"
@@ -178,6 +182,9 @@ const MainForm = ({ vin }) => {
             <TableRow key={row.can_id}>
               <TableCell align="center">{row.can_id}</TableCell>
               <TableCell align="center">{row.interval}</TableCell>
+              <TableCell align="center">
+                <Link to={`/fleet/${row.fleet}`}>{row.fleet}</Link>
+              </TableCell>
               <TableCell align="center">{Actions(row)}</TableCell>
             </TableRow>
           ))}
diff --git a/src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap
index 3dcc0a7..d38148b 100644
--- a/src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/Details/__snapshots__/index.test.jsx.snap
@@ -28,6 +28,7 @@ exports[`VehicleDetailsTab Render 1`] = `
                     VIN
                   </b>
                   : 
+                  TESTVIN1234567890
                 </p>
                 <p>
                   <b>
@@ -84,13 +85,13 @@ exports[`VehicleDetailsTab Render 1`] = `
               >
                 <a
                   class=""
-                  href="/vehicle-update?vin=undefined"
+                  href="/vehicle-update?vin=TESTVIN1234567890"
                   style="margin: 5px;"
-                  title="Update \\"undefined\\""
+                  title="Update \\"TESTVIN1234567890\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Update \\"undefined\\""
+                    aria-label="Update \\"TESTVIN1234567890\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -103,11 +104,11 @@ exports[`VehicleDetailsTab Render 1`] = `
                 <a
                   class=""
                   href="/"
-                  title="Delete \\"undefined\\""
+                  title="Delete \\"TESTVIN1234567890\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Delete \\"undefined\\""
+                    aria-label="Delete \\"TESTVIN1234567890\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -119,6 +120,7 @@ exports[`VehicleDetailsTab Render 1`] = `
                 </a>
               </div>
             </div>
+            <div />
           </div>
         </div>
       </div>
diff --git a/src/components/Cars/Status/Details/index.jsx b/src/components/Cars/Status/Details/index.jsx
index 243151f..7692078 100644
--- a/src/components/Cars/Status/Details/index.jsx
+++ b/src/components/Cars/Status/Details/index.jsx
@@ -14,12 +14,14 @@ import { useStatusContext } from "../../../Contexts/StatusContext";
 import useStyles from "../../../useStyles";
 import { logger } from "../../../../services/monitoring";
 import { useVehicleContext, VehicleProvider } from "../../../Contexts/VehicleContext";
+import DeleteConfirmation from "../../../DeleteConfirmation";
 
 const MainForm = ({ vin }) => {
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { vehicle, getVehicle, deleteVehicle } = useVehicleContext();
   const [redirect, setRedirect] = useState(null);
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
 
   useEffect(() => {
@@ -76,12 +78,13 @@ const MainForm = ({ vin }) => {
             </Link>
           </Tooltip>
           <Tooltip key={`delete-${vin}`} title={`Delete "${vin}"`}>
-            <Link to="#" onClick={onDelete}>
+            <Link to="#" onClick={() => setShowDeleteModal(true)}>
               <DeleteIcon aria-label={`Delete "${vin}"`} />
             </Link>
           </Tooltip>
         </Grid>
       </Grid>
+      <DeleteConfirmation message={vin} open={showDeleteModal} close={()=> setShowDeleteModal(false)} deleteFunction={onDelete}/>
     </div >
   );
 };
diff --git a/src/components/Cars/Status/Details/index.test.jsx b/src/components/Cars/Status/Details/index.test.jsx
index 2334a9e..708c415 100644
--- a/src/components/Cars/Status/Details/index.test.jsx
+++ b/src/components/Cars/Status/Details/index.test.jsx
@@ -4,6 +4,7 @@ jest.mock("../../../Contexts/UserContext");
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { VehicleProvider } from "../../../Contexts/VehicleContext";
 import { StatusProvider } from "../../../Contexts/StatusContext";
@@ -18,7 +19,7 @@ const renderVehicleDetailsTab = async () => {
       <StatusProvider>
         <UserProvider>
           <BrowserRouter>
-            <MainForm />
+            <MainForm vin="TESTVIN1234567890"/>
           </BrowserRouter>
         </UserProvider>
       </StatusProvider>
@@ -35,6 +36,11 @@ describe("VehicleDetailsTab", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ vin: "TESTVIN1234567890" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderVehicleDetailsTab();
diff --git a/src/components/Cars/Status/RemoteCommandsTab.jsx b/src/components/Cars/Status/RemoteCommandsTab.jsx
new file mode 100644
index 0000000..819e8a0
--- /dev/null
+++ b/src/components/Cars/Status/RemoteCommandsTab.jsx
@@ -0,0 +1,26 @@
+import useStyles from "../../useStyles";
+import clsx from "clsx";
+import Typography from "@material-ui/core/Typography";
+import SendCommand from "../../Controls/SendCommand";
+import PropTypes from "prop-types";
+import {VehicleProvider} from "../../Contexts/VehicleContext";
+
+const RemoteCommandsTab = (props) => {
+  const { vin } = props;
+  const classes = useStyles();
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6">Vehicle Commands</Typography>
+      <VehicleProvider>
+        <SendCommand vins={[vin]}></SendCommand>
+      </VehicleProvider>
+    </div>
+  )
+}
+
+RemoteCommandsTab.propTypes = {
+  vin: PropTypes.string,
+}
+
+export default RemoteCommandsTab
\ No newline at end of file
diff --git a/src/components/Cars/Status/RemoteCommandsTab.test.jsx b/src/components/Cars/Status/RemoteCommandsTab.test.jsx
new file mode 100644
index 0000000..c1d7882
--- /dev/null
+++ b/src/components/Cars/Status/RemoteCommandsTab.test.jsx
@@ -0,0 +1,40 @@
+jest.mock("../../Contexts/VehicleContext");
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
+);
+
+import {render, waitFor} from "@testing-library/react";
+import {StatusProvider} from "../../Contexts/StatusContext";
+import {setToken, UserProvider} from "../../Contexts/UserContext";
+import RemoteCommandsTab from "./RemoteCommandsTab";
+import addSnapshotSerializer from "../../../utils/snapshot";
+import {TEST_AUTH_OBJECT} from "../../../utils/testing";
+import React from "react";
+
+const renderRemoteCommandsTab = async () => {
+  const { container } = render(
+    <StatusProvider>
+      <UserProvider>
+        <RemoteCommandsTab vin="TESTVIN1234567890" />
+      </UserProvider>
+    </StatusProvider>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("RemoteCommandsTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    const container = await renderRemoteCommandsTab();
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/Cars/Status/__snapshots__/CANFiltersTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/CANFiltersTab.test.jsx.snap
index 5aca30a..bf2a936 100644
--- a/src/components/Cars/Status/__snapshots__/CANFiltersTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/CANFiltersTab.test.jsx.snap
@@ -148,6 +148,29 @@ exports[`CANFiltersTab Render 1`] = `
                   </svg>
                 </span>
               </th>
+              <th
+                class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                scope="col"
+              >
+                <span
+                  aria-disabled="false"
+                  class="MuiButtonBase-root MuiTableSortLabel-root"
+                  role="button"
+                  tabindex="0"
+                >
+                  Fleet
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                    />
+                  </svg>
+                </span>
+              </th>
               <th
                 class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                 scope="col"
@@ -172,6 +195,13 @@ exports[`CANFiltersTab Render 1`] = `
               >
                 1000
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                <a
+                  href="/fleet/undefined"
+                />
+              </td>
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
@@ -225,6 +255,13 @@ exports[`CANFiltersTab Render 1`] = `
               >
                 2000
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                <a
+                  href="/fleet/undefined"
+                />
+              </td>
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
@@ -278,6 +315,13 @@ exports[`CANFiltersTab Render 1`] = `
               >
                 0
               </td>
+              <td
+                class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+              >
+                <a
+                  href="/fleet/undefined"
+                />
+              </td>
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
diff --git a/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
index 17cb8e8..2efa75e 100644
--- a/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
@@ -149,6 +149,10 @@ exports[`CarUpdatesTab Render 1`] = `
                     </svg>
                   </span>
                 </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                />
               </tr>
             </thead>
             <tbody
@@ -162,7 +166,7 @@ exports[`CarUpdatesTab Render 1`] = `
               >
                 <td
                   class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                  colspan="5"
+                  colspan="6"
                 >
                   <div
                     class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
diff --git a/src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap
index 3c50755..c2a24b3 100644
--- a/src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/DetailsTab.test.jsx.snap
@@ -128,6 +128,7 @@ exports[`DetailsTab Render 1`] = `
                   </a>
                 </div>
               </div>
+              <div />
             </div>
           </div>
         </div>
diff --git a/src/components/Cars/Status/__snapshots__/RemoteCommandsTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/RemoteCommandsTab.test.jsx.snap
new file mode 100644
index 0000000..b6bfec5
--- /dev/null
+++ b/src/components/Cars/Status/__snapshots__/RemoteCommandsTab.test.jsx.snap
@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RemoteCommandsTab Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-statusprovider"
+  >
+    <div
+      data-testid="mocked-userprovider"
+    >
+      <div
+        class="makeStyles-paper-0 makeStyles-tableSize-0"
+      >
+        <h6
+          class="MuiTypography-root MuiTypography-h6"
+        >
+          Vehicle Commands
+        </h6>
+        <div
+          data-testid="mocked-vehicleprovider"
+        >
+          <div
+            class="makeStyles-paper-0"
+            style="margin-top: 20px;"
+          >
+            <div
+              class="MuiFormControl-root makeStyles-formControl-0"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled"
+                data-shrink="true"
+                for="send-command"
+              >
+                Command
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
+              >
+                <select
+                  aria-invalid="false"
+                  class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
+                  id="send-command"
+                  name="send-command"
+                >
+                  <option
+                    value="doors_lock"
+                  >
+                    Lock doors
+                  </option>
+                  <option
+                    value="doors_unlock"
+                  >
+                    Unlock doors
+                  </option>
+                  <option
+                    value="vent_windows"
+                  >
+                    Vent windows
+                  </option>
+                  <option
+                    value="close_windows"
+                  >
+                    Close windows
+                  </option>
+                  <option
+                    value="flash_headlights"
+                  >
+                    Flash headlights
+                  </option>
+                  <option
+                    value="trunk_close"
+                  >
+                    Close trunk
+                  </option>
+                  <option
+                    value="alert"
+                  >
+                    Alert
+                  </option>
+                  <option
+                    value="precondition"
+                  >
+                    Precondition
+                  </option>
+                  <option
+                    value="california_mode"
+                  >
+                    California mode
+                  </option>
+                  <option
+                    value="trunk_open"
+                  >
+                    Open trunk
+                  </option>
+                  <option
+                    value="temp_cabin"
+                  >
+                    Set cabin temperature(°C)
+                  </option>
+                  <option
+                    value="defrost"
+                  >
+                    Defrost
+                  </option>
+                  <option
+                    value="driver_seat_preheat"
+                  >
+                    Driver seat preheat
+                  </option>
+                  <option
+                    value="passenger_seat_preheat"
+                  >
+                    Preheat passenger seat
+                  </option>
+                  <option
+                    value="steering_wheel_preheat"
+                  >
+                    Preheat Steering wheel
+                  </option>
+                  <option
+                    value="charging"
+                  >
+                    Charging
+                  </option>
+                </select>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  style="padding-left: 8px;"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legend-0"
+                    style="width: 0.01px;"
+                  >
+                    <span>
+                      ​
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
+            <button
+              aria-label="send command"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
+              tabindex="0"
+              type="submit"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                Send
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index ca532b7..02f5063 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
@@ -15,7 +15,7 @@ exports[`CarStatus Render 1`] = `
           class="makeStyles-paper-0 makeStyles-tableSize-0"
         >
           <div
-            class="MuiBox-root MuiBox-root-64 makeStyles-tableToolbar-0"
+            class="MuiBox-root MuiBox-root-0 makeStyles-tableToolbar-0"
           >
             <div
               class="MuiTabs-root"
@@ -119,6 +119,24 @@ exports[`CarStatus Render 1`] = `
                       class="MuiTouchRipple-root"
                     />
                   </button>
+                  <button
+                    aria-controls="tabpanel-5"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-5"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      Remote Commands
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <span
                   class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -133,7 +151,7 @@ exports[`CarStatus Render 1`] = `
             role="tabpanel"
           >
             <div
-              class="MuiBox-root MuiBox-root-69"
+              class="MuiBox-root MuiBox-root-0"
             >
               <div
                 class="makeStyles-paper-0 makeStyles-tableSize-0"
@@ -157,6 +175,7 @@ exports[`CarStatus Render 1`] = `
                           VIN
                         </b>
                         : 
+                        TESTVIN1234567890
                       </p>
                     </div>
                     <div
@@ -164,13 +183,13 @@ exports[`CarStatus Render 1`] = `
                     >
                       <a
                         class=""
-                        href="/vehicle-update?vin=undefined"
+                        href="/vehicle-update?vin=TESTVIN1234567890"
                         style="margin: 5px;"
-                        title="Update \\"undefined\\""
+                        title="Update \\"TESTVIN1234567890\\""
                       >
                         <svg
                           aria-hidden="true"
-                          aria-label="Update \\"undefined\\""
+                          aria-label="Update \\"TESTVIN1234567890\\""
                           class="MuiSvgIcon-root"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -183,11 +202,11 @@ exports[`CarStatus Render 1`] = `
                       <a
                         class=""
                         href="/"
-                        title="Delete \\"undefined\\""
+                        title="Delete \\"TESTVIN1234567890\\""
                       >
                         <svg
                           aria-hidden="true"
-                          aria-label="Delete \\"undefined\\""
+                          aria-label="Delete \\"TESTVIN1234567890\\""
                           class="MuiSvgIcon-root"
                           focusable="false"
                           viewBox="0 0 24 24"
@@ -199,6 +218,7 @@ exports[`CarStatus Render 1`] = `
                       </a>
                     </div>
                   </div>
+                  <div />
                 </div>
               </div>
             </div>
@@ -228,6 +248,13 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-4"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-5"
+            class="makeStyles-fullWidth-0"
+            hidden=""
+            id="tabpanel-5"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>
diff --git a/src/components/Cars/Status/index.jsx b/src/components/Cars/Status/index.jsx
index 97f6122..0943eb7 100644
--- a/src/components/Cars/Status/index.jsx
+++ b/src/components/Cars/Status/index.jsx
@@ -12,6 +12,7 @@ import TabPanel from "../../Controls/TabPanel";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import CANSignalsTab from "./CANSignalsTab";
+import RemoteCommandsTab from "./RemoteCommandsTab";
 
 const tabHashes = ["details", "updates", "filters"];
 
@@ -64,6 +65,7 @@ const CarStatus = () => {
           <Tab label="CAN Filters" {...tabProps(2)} />
           <Tab label="Digital Twin" {...tabProps(3)} />
           <Tab label="CAN Signals" {...tabProps(4)} />
+          <Tab label="Remote Commands" {...tabProps(5)} />
         </Tabs>
       </Box>
 
@@ -86,6 +88,10 @@ const CarStatus = () => {
       <TabPanel value={tabIndex} index={4} className={classes.fullWidth}>
         <CANSignalsTab vin={vin} />
       </TabPanel>
+
+      <TabPanel value={tabIndex} index={5} className={classes.fullWidth}>
+        <RemoteCommandsTab vin={vin} />
+      </TabPanel>
     </div>
   );
 };
diff --git a/src/components/Cars/Status/index.test.jsx b/src/components/Cars/Status/index.test.jsx
index 9eaed1a..8083078 100644
--- a/src/components/Cars/Status/index.test.jsx
+++ b/src/components/Cars/Status/index.test.jsx
@@ -7,6 +7,7 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
@@ -38,6 +39,11 @@ describe("CarStatus", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ vin: "TESTVIN1234567890" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCarStatus();
diff --git a/src/components/Contexts/CarUpdatesContext.jsx b/src/components/Contexts/CarUpdatesContext.jsx
index 97c2802..1ec447b 100644
--- a/src/components/Contexts/CarUpdatesContext.jsx
+++ b/src/components/Contexts/CarUpdatesContext.jsx
@@ -6,7 +6,7 @@ import { validateStatusMessage } from "../../utils/statusMessage";
 const FINAL_UPDATE_STATES = ["package_install_complete"];
 const CarUpdatesContext = React.createContext();
 
-const validateDeployCarUpdates = (data) => {
+const validateDeployClosure = (data, propertyName, errPfx) => {
   if (data === null) {
     throw new Error("No car update data");
   }
@@ -15,11 +15,20 @@ const validateDeployCarUpdates = (data) => {
     throw new Error("Manifest id required");
   }
 
-  if (!data.vins || data.vins.length === 0) {
-    throw new Error("Cars are required");
+  const { [propertyName]: value } = data;
+  if (!value || value.length === 0) {
+    throw new Error(`${errPfx} are required`);
   }
 };
 
+const validateDeployCarUpdates = (data) => {
+  return validateDeployClosure(data, "vins", "Cars");
+};
+
+const validateDeployFleetUpdates = (data) => {
+  return validateDeployClosure(data, "fleet_names", "Fleets");
+};
+
 export const CarUpdatesProvider = ({ children }) => {
   const [busy, setBusy] = useState(false);
   const [carUpdates, setCarUpdates] = useState([]);
@@ -43,6 +52,22 @@ export const CarUpdatesProvider = ({ children }) => {
     return result;
   };
 
+  const deployFleetUpdates = async (data, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+      validateDeployFleetUpdates(data);
+      result = await api.createFleetUpdates(data, token);
+      if (result.error)
+        throw new Error(`Deploy fleet updates error. ${result.message}`);
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  };
+
   const getCarUpdates = async (search, token) => {
     let result;
 
@@ -197,13 +222,30 @@ export const CarUpdatesProvider = ({ children }) => {
     return result;
   };
 
+  const cancelUpdate = async (id, token) => {
+    let result;
+
+    try {
+      setBusy(true);
+      result = await api.cancelCarUpdate(id, token);
+      if (result.error)
+        throw new Error(`Cancel car update error. ${result.message}`);
+    } finally {
+      setBusy(false);
+    }
+
+    return result;
+  };
+
   return (
     <CarUpdatesContext.Provider
       value={{
         busy,
         carUpdates,
         totalCarUpdates,
+        cancelUpdate,
         deployCarUpdates,
+        deployFleetUpdates,
         getCarUpdates,
         getLog,
         getVINUpdates,
diff --git a/src/components/Contexts/ManifestCreateContext.jsx b/src/components/Contexts/ManifestCreateContext.jsx
deleted file mode 100644
index 6243787..0000000
--- a/src/components/Contexts/ManifestCreateContext.jsx
+++ /dev/null
@@ -1,247 +0,0 @@
-import React, { useContext, useState } from "react";
-
-import api from "../../services/manifestsAPI";
-import { uploadFile, getCancelToken } from "../../services/uploadFile";
-import { useStatusContext } from "./StatusContext";
-import {
-  validateManifest,
-  validateManifestECUs,
-} from "../../utils/manifestValidation";
-
-const ManifestCreateContext = React.createContext();
-
-const checkExistingManifest = async (data, token) => {
-  const check = {
-    name: data.name,
-    version: data.version,
-  };
-  const { data: result } = await api.getManifests(check, token);
-  if (result.length > 0)
-    throw new Error(`Update ${data.name} ${data.version} already exists`);
-};
-
-const ECUTemplate = {
-  name: "AGS",
-  version: "",
-  hw_version: "",
-  configuration_mask: "",
-  configuration: "",
-  files: [],
-  manifest_id: 0,
-};
-
-const FileTemplate = {
-  offset: "0",
-  checksum: "",
-  type: "none",
-};
-
-export const ManifestCreateProvider = ({ children }) => {
-  const { setMessage } = useStatusContext();
-  const [busy, setBusy] = useState(false);
-  const [uploadProgress, setUploadProgress] = useState(0);
-  const [uploadStatus, setUploadStatus] = useState(null);
-  const [cancelUploadToken, setCancelUploadToken] = useState(null);
-  const [uploadFileIndex, setUploadFileIndex] = useState(0);
-  const [uploadedFiles, setUploadedFiles] = useState([]);
-  const [ecus, setECUs] = useState([]);
-  const [ecuIndex, setECUIndex] = useState(0);
-
-  const addECU = () => {
-    try {
-      const result = ecus.concat(
-        Object.assign({ data_id: ecuIndex }, ECUTemplate)
-      );
-      setECUIndex(ecuIndex + 1);
-      setECUs(result);
-    } catch (err) {
-      setMessage(err.message);
-    }
-  };
-
-  const deleteECU = (data_id) => {
-    try {
-      const result = ecus.filter((item) => item.data_id !== data_id);
-      setECUs(result);
-    } catch (err) {
-      setMessage(err.message);
-    }
-  };
-
-  const getECU = (ecu_data_id) =>
-    ecus.find((item) => item.data_id === ecu_data_id);
-
-  const getECUFile = (ecu, filename) =>
-    ecu.files.find((file) => file.filename === filename);
-
-  const validateECUFiles = (ecu, files) => {
-    files.forEach((file) => {
-      if (file.size === 0) throw new Error(`${file.name} is 0 size`);
-      const result = getECUFile(ecu, file.name);
-      if (result) throw new Error(`${file.name} already exists`);
-    });
-  };
-
-  const getAllECUFiles = () => {
-    let result = [];
-
-    for (let i = 0, len = ecus.length; i < len; i++) {
-      const ecu = ecus[i];
-      result = result.concat(ecu.files);
-    }
-
-    return result;
-  };
-
-  const addECUFile = (ecu_data_id, items) => {
-    try {
-      const ecu = getECU(ecu_data_id);
-      if (ecu === undefined) return;
-
-      const files = Array.from(items);
-      validateECUFiles(ecu, files);
-
-      const total = ecu.files.length;
-      const result = files.map((file, index) =>
-        Object.assign(
-          { order: total + index, file: file, filename: file.name },
-          FileTemplate
-        )
-      );
-      ecu.files = ecu.files.concat(result);
-      updateECUs();
-    } catch (err) {
-      setMessage(err.message);
-    }
-  };
-
-  const sortECUFiles = (ecu) => {
-    ecu.files.sort((x, y) => {
-      if (x.order === y.order) return 0;
-      return x.order < y.order ? -1 : 1;
-    });
-  };
-
-  const deleteECUFile = (ecu_data_id, filename) => {
-    try {
-      const ecu = getECU(ecu_data_id);
-      if (ecu === undefined) return;
-      ecu.files = ecu.files.filter((file) => file.filename !== filename);
-      sortECUFiles(ecu);
-      updateECUs();
-    } catch (err) {
-      setMessage(err.message);
-    }
-  };
-
-  const updateECUs = () => {
-    setECUs(ecus.concat([]));
-  };
-
-  const createManifest = async (data, token) => {
-    let result;
-    let currentFileIndex = 0;
-    const incremFileIndex = () => {
-      setUploadFileIndex(currentFileIndex);
-      currentFileIndex++;
-    };
-
-    try {
-      setBusy(true);
-      validateManifest(data, token);
-      validateManifestECUs(ecus);
-      await checkExistingManifest(data, token);
-
-      setUploadedFiles(getAllECUFiles());
-      if (result !== null) result = await api.createManifest(data, token);
-      if (result.error)
-        throw new Error(`Create manifest error. ${result.message}`);
-
-      for (let i = 0, len = ecus.length; i < len; i++) {
-        const ecu = ecus[i];
-        ecu.manifest_id = result.id;
-        await createManifestECU(ecu, token, incremFileIndex);
-      }
-    } finally {
-      setBusy(false);
-      setUploadFileIndex(0);
-      setUploadedFiles([]);
-    }
-
-    return result;
-  };
-
-  const createManifestECU = async (ecu, token, incremFileIndexFn) => {
-    const { files, ...data } = ecu;
-
-    const result = await api.createManifestECU(data, token);
-    if (result.error)
-      throw new Error(`Create manifest error. ${result.message}`);
-
-    for (let i = 0, len = ecu.files.length; i < len; i++) {
-      const file = ecu.files[i];
-      file.manifest_ecu_id = result.id;
-      incremFileIndexFn();
-      const resp = await uploadECUFile(file, token);
-      if (resp.error)
-        throw new Error(`Upload manifest file error. ${resp.error}`);
-    }
-  };
-
-  const cancelUpload = () => {
-    if (cancelUploadToken) cancelUploadToken.cancel();
-    setBusy(false);
-    setUploadStatus("Upload cancelled");
-    setCancelUploadToken(null);
-    setUploadProgress(0);
-  };
-
-  const uploadECUFile = async (file, accessToken) => {
-    const cancel = getCancelToken();
-
-    setUploadProgress(0);
-    setUploadStatus(`Uploading ${file.filename}`);
-    setCancelUploadToken(cancel);
-
-    const result = await uploadFile(
-      file,
-      accessToken,
-      setUploadProgress,
-      cancel.token
-    );
-    if (result.message) {
-      throw new Error(`${result.error}. ${result.message}`);
-    }
-
-    setUploadStatus(`Uploaded ${file.filename}`);
-    setCancelUploadToken(null);
-    setUploadProgress(100);
-
-    return result;
-  };
-
-  return (
-    <ManifestCreateContext.Provider
-      value={{
-        busy,
-        ecus,
-        uploadedFiles,
-        uploadFileIndex,
-        uploadProgress,
-        uploadStatus,
-        addECU,
-        addECUFile,
-        cancelUpload,
-        createManifest,
-        createManifestECU,
-        deleteECU,
-        deleteECUFile,
-        updateECUs,
-      }}
-    >
-      {children}
-    </ManifestCreateContext.Provider>
-  );
-};
-
-export const useManifestCreateContext = () => useContext(ManifestCreateContext);
diff --git a/src/components/Contexts/VehicleContext.jsx b/src/components/Contexts/VehicleContext.jsx
index d6aac72..82d9c2f 100644
--- a/src/components/Contexts/VehicleContext.jsx
+++ b/src/components/Contexts/VehicleContext.jsx
@@ -164,10 +164,10 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
-  const sendCommand = async (vins, command, parameters, token) => {
+  const sendCommand = async (vins, command, token) => {
     try {
       setBusy(true);
-      const result = await api.sendCommand(vins, command, parameters, token);
+      const result = await api.sendCommand(vins, command, token);
       if (result.error)
         throw new Error(`Send command error. ${result.message}`);
       return result;
diff --git a/src/components/Contexts/VehicleContext.test.jsx b/src/components/Contexts/VehicleContext.test.jsx
index c371cfe..b97cf25 100644
--- a/src/components/Contexts/VehicleContext.test.jsx
+++ b/src/components/Contexts/VehicleContext.test.jsx
@@ -317,6 +317,55 @@ describe("VehicleContext", () => {
       checkBaseResults("", "false");
     });
   });
+
+  describe("sendCommand", () => {
+    beforeEach(async () => {
+      const TestComp = () => {
+        const {busy, sendCommand} = useVehicleContext();
+        const { message, setMessage } = useStatusContext();
+
+        const sendC = async (vin, command) => {
+          try {
+            await sendCommand(vin, command);
+          } catch (e) {
+            setMessage(e.message);
+          }
+        };
+
+        return (
+          <>
+            <div data-testid="error">{message}</div>
+            <div data-testid="busy">{busy.toString()}</div>
+            <button data-testid="sendCommandNullVin" onClick={() => sendC(null, {command:"doors_lock"})} />
+            <button data-testid="sendCommandNonexistentVin" onClick={() => sendC(["11111111111111111"], {command:"doors_lock"})} />
+            <button
+              data-testid="sendCommandVin"
+              onClick={() => sendC("3C4PDCBG0ET127145", {command:"doors_lock"})}
+            />
+            <button
+              data-testid="sendCommandWrongCommand"
+              onClick={() => sendC("3C4PDCBG0ET127145", {command:"noSuchCommand"})}
+            />
+            </>
+        );}
+        render(
+          <StatusProvider>
+            <VehicleProvider>
+              <TestComp />
+            </VehicleProvider>
+          </StatusProvider>
+        );
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("initial state", () => {
+      checkBaseResults("", "false");
+    });
+
+  })
 });
 
 const expectedFilters = [
diff --git a/src/components/Contexts/__mocks__/ManifestCreateContext.jsx b/src/components/Contexts/__mocks__/ManifestCreateContext.jsx
deleted file mode 100644
index 87a5f78..0000000
--- a/src/components/Contexts/__mocks__/ManifestCreateContext.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from "react";
-
-const ManifestsContext = React.createContext();
-
-let busy = false;
-let ecus = [
-  {
-    data_id: 0,
-    name: "AGS",
-    version: "",
-    hw_version: "",
-    manifest_id: 0,
-    files: [
-      {
-        filename: "test.bin",
-        order: 0,
-        offset: "0",
-        checksum: "",
-        self_download: false,
-        mode: "D",
-        type: 1,
-      },
-    ],
-  },
-];
-let uploadedFiles = [];
-let uploadFileIndex = 0;
-let uploadProgress = 0;
-let uploadStatus = null;
-
-export const ManifestCreateProvider = ({ children }) => {
-  return <div data-testid="mocked-manifestcreateprovider">{children}</div>;
-};
-
-export const useManifestCreateContext = () => ({
-  busy,
-  ecus,
-  uploadedFiles,
-  uploadFileIndex,
-  uploadProgress,
-  uploadStatus,
-  addECU: jest.fn(),
-  addECUFile: jest.fn(),
-  cancelUpload: jest.fn(),
-  createManifest: jest.fn(),
-  createManifestECU: jest.fn(),
-  deleteECU: jest.fn(),
-  deleteECUFile: jest.fn(),
-  updateECUs: jest.fn(),
-});
diff --git a/src/components/Controls/CarSelectionTable/index.jsx b/src/components/Controls/CarSelectionTable/index.jsx
index 7a5d741..219e69b 100644
--- a/src/components/Controls/CarSelectionTable/index.jsx
+++ b/src/components/Controls/CarSelectionTable/index.jsx
@@ -60,6 +60,7 @@ const CarSelectionTable = (props) => {
     onSelect,
     onSelectAll,
   } = props;
+
   const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("vin");
@@ -67,7 +68,8 @@ const CarSelectionTable = (props) => {
   const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
   const { setMessage } = useStatusContext();
   const { search: searchTerm } = search;
-  const sortHandler = (_event, property) => {
+
+  const handleSort = (_event, property) => {
     if (property === orderBy) {
       if (order === "asc") {
         setOrder("desc");
@@ -137,7 +139,7 @@ const CarSelectionTable = (props) => {
           orderBy={orderBy}
           order={order}
           columnData={tableColumns}
-          onSortRequest={sortHandler}
+          onSortRequest={handleSort}
           multiSelect={multiSelect}
           onSelectAll={handleSelectAll}
           selectCount={selected ? selected.length : 0}
diff --git a/src/components/Controls/CarUpdatesTable/index.jsx b/src/components/Controls/CarUpdatesTable/index.jsx
index a543777..b4aa071 100644
--- a/src/components/Controls/CarUpdatesTable/index.jsx
+++ b/src/components/Controls/CarUpdatesTable/index.jsx
@@ -6,8 +6,10 @@ import {
   TableFooter,
   TablePagination,
   TableRow,
+  Tooltip,
 } from "@material-ui/core";
 import { Link } from "react-router-dom";
+import CancelIcon from "@material-ui/icons/Cancel";
 
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
@@ -18,7 +20,7 @@ import {
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { logger } from "../../../services/monitoring";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -41,6 +43,10 @@ const tableColumns = [
     id: "updated_at",
     label: "Updated",
   },
+  {
+    id: "",
+    label: "",
+  },
 ];
 
 const PAGE_SIZE = "CAR_UPDATES_TABLE_PAGE_SIZE";
@@ -51,7 +57,8 @@ const MainForm = ({ vin, token }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
-  const { getCarUpdates, carUpdates, totalCarUpdates } = useCarUpdatesContext();
+  const { cancelUpdate, getCarUpdates, carUpdates, totalCarUpdates } =
+    useCarUpdatesContext();
   const { setMessage } = useStatusContext();
 
   useEffect(() => {
@@ -107,6 +114,15 @@ const MainForm = ({ vin, token }) => {
     return "None";
   };
 
+  const sendCancel = async (row) => {
+    try {
+      await cancelUpdate(row.id, token);
+      setMessage(`Sent cancel for ${updateName(row)}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
   return (
     <Table>
       <TableHeaderSortable
@@ -132,6 +148,13 @@ const MainForm = ({ vin, token }) => {
             <TableCell align="center">
               {LocalDateTimeString(row.updated)}
             </TableCell>
+            <TableCell>
+              <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
+                <Link to="#" onClick={() => sendCancel(row)}>
+                  <CancelIcon />
+                </Link>
+              </Tooltip>
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
@@ -139,7 +162,7 @@ const MainForm = ({ vin, token }) => {
         <TableRow>
           <TablePagination
             rowsPerPageOptions={[5, 10, 25, 100]}
-            colSpan={5}
+            colSpan={6}
             count={totalCarUpdates}
             rowsPerPage={pageSize}
             page={pageIndex}
diff --git a/src/components/Controls/FleetSelectionTable/index.jsx b/src/components/Controls/FleetSelectionTable/index.jsx
new file mode 100644
index 0000000..e75df0e
--- /dev/null
+++ b/src/components/Controls/FleetSelectionTable/index.jsx
@@ -0,0 +1,199 @@
+import React, {useEffect, useState} from "react";
+import {Link} from 'react-router-dom';
+import {Checkbox, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow} from "@material-ui/core";
+import clsx from "clsx";
+
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import {useStatusContext} from "../../Contexts/StatusContext";
+import {useFleetContext} from "../../Contexts/FleetContext"
+import {logger} from "../../../services/monitoring";
+import {useLocalStorage} from "../../useLocalStorage";
+import PropTypes from "prop-types";
+
+const tableColumns = [
+  {
+    id: "name",
+    label: "Name"
+  },
+  {
+    id: "log_level",
+    label: "Log Level"
+  },
+  {
+    id: "canbus_enabled",
+    label: "CAN Bus Enabled"
+  },
+  {
+    id: "data_logger_enabled",
+    label: "Data Logger Enabled"
+  },
+  {
+    id: "num_vehicles",
+    label: "Vehicles"
+  },
+  {
+    id: "num_filters",
+    label: "Filters"
+  }
+];
+
+const PAGE_SIZE = "FLEET_SELECTION_TABLE_PAGE_SIZE";
+
+const FleetSelectionTable = (props) => {
+  const {
+    token,
+    classes,
+    search,
+    multiSelect,
+    selected,
+    onSelect,
+    onSelectAll,
+  } = props;
+
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [orderBy, setOrderBy] = useState("id");
+  const [order, setOrder] = useState("desc");
+  const { fleets, getFleets, totalFleets } = useFleetContext();
+  const { setMessage } = useStatusContext();
+  const { search: searchTerm } = search;
+
+  const handleSort = (_event, property) => {
+    try {
+      if (property === orderBy) {
+        if (order === "asc") {
+          setOrder("desc");
+        } else {
+          setOrder("asc");
+        }
+      } else {
+        setOrderBy(property);
+        setOrder("asc");
+      }
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
+  const handleChangePageIndex = (_event, newIndex) => {
+    setPageIndex(newIndex);
+  };
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+  };
+
+  const handleSelectAll = (event) => {
+    if (!onSelectAll) return;
+
+    const newSelected = [];
+    if (event.target.checked) {
+      fleets.forEach((car) => {
+        newSelected.push(car.name);
+      });
+    }
+
+    onSelectAll(newSelected);
+  };
+
+  const handleSelect = (event, key) => {
+    if (!onSelect) return;
+
+    onSelect(event, key);
+  };
+
+
+  useEffect(() => {
+    const options = { search: searchTerm,
+        limit: pageSize,
+        offset: pageSize * pageIndex,
+        order: `${orderBy} ${order}`,
+    };
+    (async () => {
+      try {
+        if (!token) return;
+        await getFleets(options, token);
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token, pageIndex, pageSize, orderBy, order, searchTerm]);
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Table>
+        <TableHeaderSortable
+          classes={classes}
+          orderBy={orderBy}
+          order={order}
+          columnData={tableColumns}
+          onSortRequest={handleSort}
+          multiSelect={multiSelect}
+          onSelectAll={handleSelectAll}
+          selectCount={selected ? selected.length : 0}
+          rowCount={fleets ? fleets.length : 0}
+        />
+        <TableBody>
+          {fleets.map((row) => {
+              const isSelected = selected
+                ? selected.indexOf(row.name) !== -1
+                : false;
+              return (
+                <TableRow key={row.name}>
+                  {multiSelect && (
+                    <TableCell padding="checkbox">
+                      <Checkbox
+                        checked={isSelected}
+                        onChange={(event) => handleSelect(event, row.name)}
+                      />
+                    </TableCell>
+                  )}
+                  <TableCell align="center">
+                    <Link to={`/fleet/${row.name}`}>{row.name}</Link>
+                  </TableCell>
+                  <TableCell align="center">{row.log_level}</TableCell>
+                  <TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
+                  <TableCell align="center">{row.canbus.data_logger_enabled ? "true" : "false"}</TableCell>
+                  <TableCell align="center">{!row.vehicles ? 0 : row.vehicles.length}</TableCell>
+                  <TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
+                </TableRow>)
+            }
+          )}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[5, 10, 25, 100]}
+              colSpan={8}
+              count={totalFleets}
+              rowsPerPage={pageSize}
+              page={pageIndex}
+              SelectProps={{
+                inputProps: {"aria-label": "rows per page"},
+                native: true,
+              }}
+              onPageChange={handleChangePageIndex}
+              onRowsPerPageChange={handleChangePageSize}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div>
+  );
+};
+
+FleetSelectionTable.propTypes = {
+  token: PropTypes.string.isRequired,
+  classes: PropTypes.object.isRequired,
+  search: PropTypes.object.isRequired,
+  multiSelect: PropTypes.bool.isRequired,
+  selected: PropTypes.array,
+  onSelect: PropTypes.func,
+  onSelectAll: PropTypes.func,
+  connectionStatus: PropTypes.bool,
+}
+
+export default FleetSelectionTable;
diff --git a/src/components/Controls/ManifestECUFileList/index.jsx b/src/components/Controls/ManifestECUFileList/index.jsx
deleted file mode 100644
index 4f7b401..0000000
--- a/src/components/Controls/ManifestECUFileList/index.jsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from "react";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableRow,
-} from "@material-ui/core";
-
-import FileDragArea from "../FileDragArea";
-import ListHead from "../ListHead";
-import SubListItem from "../SubListItem";
-import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
-import ManifestECUFileTypes from "../ManifestECUFileTypes";
-
-const options = [
-  {
-    label: "Filename",
-    field: "filename",
-    readonly: true,
-  },
-  {
-    label: "Offset",
-    field: "offset",
-  },
-  {
-    label: "Checksum",
-    field: "checksum",
-  },
-  {
-    label: "Type",
-    field: "type",
-    control: ManifestECUFileTypes,
-  },
-  {
-    label: "",
-    field: "filename",
-    delete: true,
-  },
-];
-
-const ManifestECUFileList = ({ data }) => {
-  const { addECUFile, deleteECUFile } = useManifestCreateContext();
-
-  const onAddFile = (files) => {
-    addECUFile(data.data_id, files);
-  };
-
-  const onDeletFile = (filename) => {
-    deleteECUFile(data.data_id, filename);
-  };
-
-  return (
-    <Table>
-      {data && data.files && data.files.length > 0 && (
-        <ListHead options={options} />
-      )}
-      <TableBody>
-        {data.files.map((file) => (
-          <SubListItem
-            key={file.filename}
-            data={file}
-            options={options}
-            onDelete={onDeletFile}
-          />
-        ))}
-      </TableBody>
-      <TableFooter>
-        <TableRow>
-          <TableCell colSpan={options.length}>
-            <FileDragArea onFileSelect={onAddFile}>ADD FILES</FileDragArea>
-          </TableCell>
-        </TableRow>
-      </TableFooter>
-    </Table>
-  );
-};
-
-export default ManifestECUFileList;
diff --git a/src/components/Controls/ManifestECUList/index.jsx b/src/components/Controls/ManifestECUList/index.jsx
deleted file mode 100644
index c082449..0000000
--- a/src/components/Controls/ManifestECUList/index.jsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from "react";
-import {
-  Button,
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TableRow,
-} from "@material-ui/core";
-
-import ECUDropDrop from "../ECUDropDown";
-import ListHead from "../ListHead";
-import ManifestECURow from "../ManifestECURow";
-import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
-import PageDragPreventDefault from "../PageDragPreventDefault";
-
-const options = [
-  {
-    label: "ID",
-    field: "data_id",
-    readonly: true,
-  },
-  {
-    label: "ECU",
-    field: "name",
-    control: ECUDropDrop,
-    required: true,
-  },
-  {
-    label: "Version",
-    field: "version",
-    required: true,
-  },
-  {
-    label: "Hardware",
-    field: "hw_version",
-  },
-  {
-    label: "",
-    delete: true,
-  },
-];
-
-const ManifestECUList = () => {
-  const { ecus, addECU } = useManifestCreateContext();
-
-  return (
-    <>
-      <PageDragPreventDefault />
-      <Table>
-        <ListHead options={options} />
-        <TableBody>
-          {ecus.map((item) => {
-            return (
-              <ManifestECURow
-                key={item.data_id}
-                data={item}
-                options={options}
-              />
-            );
-          })}
-        </TableBody>
-        <TableFooter>
-          <TableRow>
-            <TableCell colSpan={5} align="center">
-              <Button onClick={addECU}>Add ECU</Button>
-            </TableCell>
-          </TableRow>
-        </TableFooter>
-      </Table>
-    </>
-  );
-};
-
-export default ManifestECUList;
diff --git a/src/components/Controls/ManifestECURow/index.jsx b/src/components/Controls/ManifestECURow/index.jsx
deleted file mode 100644
index e39c35e..0000000
--- a/src/components/Controls/ManifestECURow/index.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-
-import { TableCell, TableRow } from "@material-ui/core";
-
-import ManifestECUFileList from "../ManifestECUFileList";
-import SubListItem from "../SubListItem";
-import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
-
-const ManifestECURow = ({ data, options }) => {
-  const { deleteECU } = useManifestCreateContext();
-
-  const onDeleteECU = () => {
-    deleteECU(data.data_id);
-  };
-
-  return (
-    <>
-      <SubListItem
-        key={data.data_id}
-        data={data}
-        options={options}
-        onDelete={onDeleteECU}
-      />
-      <TableRow>
-        <TableCell colSpan={options.length}>
-          <ManifestECUFileList data={data} />
-        </TableCell>
-      </TableRow>
-    </>
-  );
-};
-
-export default ManifestECURow;
diff --git a/src/components/Controls/ManifestUploadProgress/index.jsx b/src/components/Controls/ManifestUploadProgress/index.jsx
deleted file mode 100644
index dfc5088..0000000
--- a/src/components/Controls/ManifestUploadProgress/index.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Button, Grid, LinearProgress, Typography } from "@material-ui/core";
-
-import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
-
-const ManifestUploadProgress = (props) => {
-  const { uploadProgress, uploadStatus, uploadFileIndex, uploadedFiles } =
-    useManifestCreateContext();
-  const [progress, setProgress] = useState(0);
-  const [completed, setCompleted] = useState(0);
-  const [total, setTotal] = useState(0);
-
-  useEffect(() => {
-    const x = uploadedFiles.reduce(
-      (current, { file }) => current + file.size,
-      0
-    );
-    setTotal(x);
-  }, [uploadedFiles]);
-
-  useEffect(() => {
-    if (uploadFileIndex === 0 || uploadFileIndex >= uploadedFiles.length)
-      return;
-    let uploaded = 0;
-    uploadedFiles.forEach(({ file }, i) => {
-      if (i < uploadFileIndex) uploaded += file.size;
-    });
-    setCompleted(uploaded);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uploadFileIndex]);
-
-  useEffect(() => {
-    if (total === 0 || uploadFileIndex >= uploadedFiles.length) return;
-    const { file } = uploadedFiles[uploadFileIndex];
-    const uploaded = completed + file.size * uploadProgress;
-    const x = Math.min(99, Math.floor((uploaded / total) * 100));
-    setProgress(x);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [uploadProgress, completed]);
-
-  return (
-    <>
-      <Grid container>
-        <Grid xs={12}>
-          <Typography align="center">
-            {`File ${uploadFileIndex + 1} of ${
-              uploadedFiles.length
-            }. ${uploadStatus}`}
-          </Typography>
-        </Grid>
-      </Grid>
-      <Grid container alignContent="center" spacing={0}>
-        <Grid xs={11}>
-          <LinearProgress
-            variant="determinate"
-            value={progress}
-            style={{ marginTop: 16 }}
-          />
-        </Grid>
-        <Grid xs={1} alignContent="flex-end" align="right">
-          <Button onClick={props.onCancel}>Cancel</Button>
-        </Grid>
-      </Grid>
-    </>
-  );
-};
-
-export default ManifestUploadProgress;
diff --git a/src/components/Controls/SendCommand/Commands.jsx b/src/components/Controls/SendCommand/Commands.jsx
new file mode 100644
index 0000000..c43cf83
--- /dev/null
+++ b/src/components/Controls/SendCommand/Commands.jsx
@@ -0,0 +1,251 @@
+import {Grid, Slider, Switch} from "@material-ui/core";
+import Typography from "@material-ui/core/Typography";
+
+const tempMarks = [...[{value: 0, label: "Off"}, {value: 1, label: "On"},],
+  ...Array.from({length: 26}, (_, i) => {
+    return {value: i + 2, label: `${i + 15}°C`}
+  })];
+
+const valuetext = (value) => {
+  return `${value}`;
+}
+
+const highMidLowOffMarks = [{
+  value: 3, label: "High",
+}, {
+  value: 2, label: "Mid",
+}, {
+  value: 1, label: "Low",
+}, {
+  value: 0, label: "Off",
+},]
+
+const precondMarks = [
+  {value: 0, label: "Battery"},
+  {value: 1, label: "All"},
+  {value: 2, label: "Climate"},
+  {value: 3, label: "Stop"},
+]
+
+const labelFunc = (marks) => (value) => marks.find(mark => mark.value === value)?.label;
+
+const labelRemoved = (marks) => Array.from(marks).map((mark) => {
+  return {value: mark.value}
+})
+
+const Commands = [
+  {value: "doors_lock", label: "Lock doors"},
+  {value: "doors_unlock", label: "Unlock doors"},
+  {value: "vent_windows", label: "Vent windows"},
+  {value: "close_windows", label: "Close windows"},
+  {value: "flash_headlights", label: "Flash headlights"},
+  {value: "trunk_close", label: "Close trunk"},
+  {value: "alert", label: "Alert"},
+  {
+    value: "precondition", label: "Precondition", params: {
+      dataFunc: (val, handleValChange) => <span>
+          <Typography id="precondition-slider" gutterBottom>
+            Set driver seat preheat
+          </Typography>
+          <Slider
+            valueLabelFormat={labelFunc(precondMarks)}
+            getAriaValueText={labelFunc(precondMarks)}
+            defaultValue={0}
+            value={val}
+            aria-labelledby="precondition-slider"
+            valueLabelDisplay="auto"
+            step={null}
+            min={0}
+            max={3}
+            marks={precondMarks}
+            size="small"
+            onChange={handleValChange}
+          />
+        </span>,
+    }
+  },
+  {
+    value: "california_mode", label: "California mode", params: {
+      dataFunc: (val, handleValChange) => {
+        if (typeof val !== "boolean") {
+          val = false
+        }
+        return <span>
+      <Typography id="california_mode-slider" gutterBottom>
+        Set California mode
+      </Typography>
+      <Typography component="div">
+        <Grid component="label" container alignItems="center" spacing={1}>
+          <Grid item>Off</Grid>
+          <Grid item>
+            <Switch checked={val} onChange={handleValChange} name="checkedC"/>
+          </Grid>
+          <Grid item>On</Grid>
+        </Grid>
+      </Typography>
+      </span>
+      },
+    },
+  }, {
+    value: "trunk_open", label: "Open trunk", params: {
+      dataFunc: (val, handleValChange) => <span>
+          <Typography id="trunk_open-slider" gutterBottom>
+            Set trunk's openness level
+          </Typography>
+          <Slider
+            defaultValue={1}
+            value={val}
+            getAriaValueText={valuetext}
+            aria-label="Open trunk"
+            aria-labelledby="trunk_open-slider"
+            valueLabelDisplay="auto"
+            step={1}
+            marks
+            size="small"
+            min={1}
+            max={5}
+            onChange={handleValChange}
+          />
+        </span>,
+    }
+  }, {
+    value: "temp_cabin", label: "Set cabin temperature(°C)", params: {
+      dataFunc: (val, handleValChange) => {
+        return <span>
+          <Typography id="temp_cabin-slider" gutterBottom>
+            Set cabin temperature
+          </Typography>
+          <Slider
+            valueLabelFormat={labelFunc(tempMarks)}
+            getAriaValueText={labelFunc(tempMarks)}
+            defaultValue={0}
+            value={val}
+            aria-labelledby="temp_cabin-slider"
+            valueLabelDisplay="auto"
+            step={1}
+            min={0}
+            max={27}
+            marks={labelRemoved(tempMarks)}
+            size="small"
+            onChange={handleValChange}
+          />
+        </span>
+      }
+    }
+  }, {
+    value: "defrost", label: "Defrost", params: {
+      dataFunc: (val, handleValChange) => {
+        if (typeof val !== "boolean") {
+          val = false
+        }
+        return <span>
+          <Typography id="defrost-slider" gutterBottom>
+            Set defrost
+          </Typography>
+      <Typography component="div">
+        <Grid component="label" container alignItems="center" spacing={1}>
+          <Grid item>Off</Grid>
+          <Grid item>
+            <Switch checked={val} onChange={handleValChange} name="checkedC"/>
+          </Grid>
+          <Grid item>On</Grid>
+        </Grid>
+      </Typography>
+        </span>
+      },
+
+    },
+  }, {
+    value: "driver_seat_preheat", label: "Driver seat preheat", params: {
+      dataFunc: (val, handleValChange) => <span>
+          <Typography id="driver_seat_preheat-slider" gutterBottom>
+            Set driver seat preheat
+          </Typography>
+          <Slider
+            valueLabelFormat={labelFunc(highMidLowOffMarks)}
+            getAriaValueText={labelFunc(highMidLowOffMarks)}
+            defaultValue={0}
+            value={val}
+            aria-labelledby="driver_seat_preheat-slider"
+            valueLabelDisplay="auto"
+            step={null}
+            min={0}
+            max={3}
+            marks={highMidLowOffMarks}
+            size="small"
+            onChange={handleValChange}
+          />
+        </span>,
+    }
+  }, {
+    value: "passenger_seat_preheat", label: "Preheat passenger seat", params: {
+      dataFunc: (val, handleValChange) => <span>
+          <Typography id="passenger_seat_preheat-slider" gutterBottom>
+            Set passenger seat preheat
+          </Typography>
+          <Slider
+            valueLabelFormat={labelFunc(highMidLowOffMarks)}
+            getAriaValueText={labelFunc(highMidLowOffMarks)}
+            defaultValue={0}
+            value={val}
+            aria-labelledby="passenger_seat_preheat-slider"
+            valueLabelDisplay="auto"
+            step={null}
+            min={0}
+            max={3}
+            marks={highMidLowOffMarks}
+            size="small"
+            onChange={handleValChange}
+          />
+        </span>,
+    }
+  }, {
+    value: "steering_wheel_preheat", label: "Preheat Steering wheel", params: {
+      dataFunc: (val, handleValChange) => {
+        if (typeof val !== "boolean") {
+          val = false
+        }
+
+        return <span>
+          <Typography id="steering_wheel_preheat-slider" gutterBottom>
+            Set steering wheel preheat on/off
+          </Typography>
+      <Typography component="div">
+        <Grid component="label" container alignItems="center" spacing={1}>
+          <Grid item>Off</Grid>
+          <Grid item>
+            <Switch checked={val} onChange={handleValChange} name="checkedC"/>
+          </Grid>
+          <Grid item>On</Grid>
+        </Grid>
+      </Typography>
+        </span>
+      },
+
+    },
+  }, {
+    value: "charging", label: "Charging", params: {
+      dataFunc: (val, handleValChange) => {
+        if (typeof val !== "boolean") {
+          val = false
+        }
+        return <span>
+          <Typography id="charging-slider" gutterBottom>
+            Set charging on/off
+          </Typography>
+      <Typography component="div">
+        <Grid component="label" container alignItems="center" spacing={1}>
+          <Grid item>Off</Grid>
+          <Grid item>
+            <Switch checked={val} onChange={handleValChange} name="checkedC"/>
+          </Grid>
+          <Grid item>On</Grid>
+        </Grid>
+      </Typography>
+        </span>
+      },
+
+    },
+  }]
+
+export default Commands;
diff --git a/src/components/Controls/SendCommand/Parameters.jsx b/src/components/Controls/SendCommand/Parameters.jsx
new file mode 100644
index 0000000..ca1b2d4
--- /dev/null
+++ b/src/components/Controls/SendCommand/Parameters.jsx
@@ -0,0 +1,73 @@
+import PropTypes from "prop-types";
+import {FormControl} from "@material-ui/core";
+import useStyles from "../../useStyles";
+import {MuiPickersUtilsProvider} from "@material-ui/pickers";
+import DateFnsUtils from "@date-io/date-fns";
+
+export const Dates = (
+  {
+    startDateFunc,
+    endDateFunc,
+    startDate,
+    handleStartChange,
+    endDate,
+    handleEndChange,
+  }) => {
+  if (startDateFunc && endDateFunc) {
+    return (<MuiPickersUtilsProvider utils={DateFnsUtils}>
+      {startDateFunc(startDate, handleStartChange)}
+      {endDateFunc(endDate, handleEndChange, startDate)}
+    </MuiPickersUtilsProvider>);
+  }
+
+  return null;
+}
+
+Dates.propTypes = {
+  startDateFunc: PropTypes.func,
+  endDateFunc: PropTypes.func,
+  startDate: PropTypes.instanceOf(Date),
+  handleStartChange: PropTypes.func,
+  endDate: PropTypes.instanceOf(Date),
+  handleEndChange: PropTypes.func
+}
+
+export const Parameters = (props) => {
+  const {params} = props;
+
+  const classes = useStyles();
+
+  if (params === null || params === undefined || params === "") {
+    return null;
+  }
+
+  const {data, handleDataChange} = props;
+  const {startDate, handleStartChange} = props;
+  const {endDate, handleEndChange} = props;
+
+  return (
+    <FormControl size="small" className={classes.formControl}>
+      <div style={{width: "300px", marginTop: "1em"}}>
+        {params.dataFunc(data, handleDataChange)}
+      </div>
+      <Dates
+        startDateFunc={params.startDateFunc}
+        endDateFunc={params.endDateFunc}
+        startDate={startDate}
+        handleStartChange={handleStartChange}
+        endDate={endDate}
+        handleEndChange={handleEndChange}
+      ></Dates>
+    </FormControl>
+  )
+}
+
+Parameters.propTypes = {
+  params: PropTypes.any,
+  data: PropTypes.any,
+  handleDataChange: PropTypes.func,
+  startDate: PropTypes.instanceOf(Date),
+  handleStartChange: PropTypes.func,
+  endDate: PropTypes.instanceOf(Date),
+  handleEndChange: PropTypes.func
+};
\ No newline at end of file
diff --git a/src/components/Controls/SendCommand/Parameters.test.jsx b/src/components/Controls/SendCommand/Parameters.test.jsx
new file mode 100644
index 0000000..ff2040f
--- /dev/null
+++ b/src/components/Controls/SendCommand/Parameters.test.jsx
@@ -0,0 +1,140 @@
+jest.mock("@material-ui/pickers/MuiPickersUtilsProvider")
+
+
+import {render, waitFor} from "@testing-library/react";
+import {Dates, Parameters} from "./Parameters";
+import addSnapshotSerializer from "../../../utils/snapshot";
+
+
+const date = Date.parse("2011-10-10T14:48:00")
+
+const renderDates = async (empty) => {
+  if (empty) {
+    await waitFor(() => {
+      /* render */
+    });
+    const { container } = render(<Dates startDateFunc={null} endDateFunc={null}/>)
+
+    return container;
+  }
+
+
+  const [start, setStart] = [date, (_) => {}];
+  const [end, setEnd] = [date, (_) => {}];
+
+  const handleStartChange = (val) => {
+    setStart(val)
+  }
+
+  const handleEndChange = (val) => {
+    setEnd(val)
+  }
+
+  await waitFor(() => {
+    /* render */
+  });
+
+  const {container} = render(
+    <div>
+      <Dates
+        startDateFunc={(val, handleValChange) => <div>{val.toString()}</div>}
+        endDateFunc={(val, handleValChange, prevVal) => <div>{val.toString()}, {prevVal.toString()}</div>}
+        startDate={start}
+        endDate={end}
+        handleStartChange={handleStartChange}
+        handleEndChange={handleEndChange}
+      />
+    </div>
+  )
+
+  return container
+}
+
+describe("Dates", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  })
+
+  it("Render empty", async () => {
+    const container = await renderDates(true);
+    expect(container).toMatchSnapshot();
+  })
+
+  it("Render filled", async () => {
+    const container = await renderDates(false);
+    expect(container).toMatchSnapshot();
+  })
+})
+
+const renderState = {
+  EMPTY: 0,
+  JUST_DATA: 1,
+  WITH_DATE: 2,
+}
+
+const renderParameters = async (rs) => {
+  await waitFor(() => {
+    /* render */
+  });
+
+  if (rs===renderState.EMPTY) {
+    const { container } = render(<Parameters/>)
+
+    return container;
+  }
+  const params = {dataFunc:(val, handleValChange) => <div>val.toString()</div>}
+  const [data, handleDataChange] = [true, (_)=>{}];
+
+  if (rs===renderState.JUST_DATA) {
+    const { container } = render(<Parameters
+      params={params}
+      data={data}
+      handleDataChange={handleDataChange}
+    />)
+
+    return container;
+  }
+
+  params.startDateFunc = (val, handleValChange) => (<div>val.toString()</div>)
+  params.endDateFunc = (val, handleValChange, prevVal) => (<div>val.toString(), prevVal.toString()</div>)
+
+  const [start, handleStartChange] = [date, (_)=>{}];
+  const [end, handleEndChange] = [date, (_)=>{}];
+
+  if (rs===renderState.WITH_DATE) {
+    const {container} = render(<Parameters
+        params={params}
+        data={data}
+        handleDataChange={handleDataChange}
+        start={start}
+        handleStartChange={handleStartChange}
+        end={end}
+        handleEndChange={handleEndChange}
+      />
+    )
+
+    return container
+  }
+}
+
+
+describe("Params", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  })
+
+  it("Render empty", async () => {
+    const container = await renderParameters(renderState.EMPTY);
+    expect(container).toMatchSnapshot();
+  })
+
+  it("Render just data", async () => {
+    const container = await renderDates(renderState.JUST_DATA);
+    expect(container).toMatchSnapshot();
+  })
+
+  it("Render with date", async () => {
+    const container = await renderDates(renderState.WITH_DATE);
+    expect(container).toMatchSnapshot();
+  })
+})
diff --git a/src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap b/src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap
new file mode 100644
index 0000000..9159f93
--- /dev/null
+++ b/src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dates Render empty 1`] = `<div />`;
+
+exports[`Dates Render filled 1`] = `
+<div>
+  <div>
+    <div>
+      1318258080000
+    </div>
+    <div>
+      1318258080000
+      , 
+      1318258080000
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Params Render empty 1`] = `<div />`;
+
+exports[`Params Render just data 1`] = `<div />`;
+
+exports[`Params Render with date 1`] = `<div />`;
diff --git a/src/components/Controls/SendCommand/index.jsx b/src/components/Controls/SendCommand/index.jsx
index 4de4635..89776b2 100644
--- a/src/components/Controls/SendCommand/index.jsx
+++ b/src/components/Controls/SendCommand/index.jsx
@@ -1,31 +1,32 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
 import PropTypes from "prop-types";
-import { FormControl, IconButton, InputLabel, Select } from "@material-ui/core";
-import SendIcon from "@material-ui/icons/Send";
+import {Button, FormControl, InputLabel, Select} from "@material-ui/core";
 
-import { useVehicleContext } from "../../Contexts/VehicleContext";
-import commands from "../../../services/commands";
+import {useVehicleContext} from "../../Contexts/VehicleContext";
+import commands from "./Commands";
 import useStyles from "../../useStyles";
-import { useUserContext } from "../../Contexts/UserContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
-import { logger } from "../../../services/monitoring";
+import {useUserContext} from "../../Contexts/UserContext";
+import {useStatusContext} from "../../Contexts/StatusContext";
+import {logger} from "../../../services/monitoring";
+import {Parameters} from "./Parameters";
+import clsx from "clsx";
+import {sanitize} from "./sanitize";
 
-const SendCommand = ({ vins }) => {
+const SendCommand = ({vins}) => {
   const classes = useStyles();
-  const { sendCommand, busy } = useVehicleContext();
+  const {busy, sendCommand} = useVehicleContext();
   const {
     token: {
-      idToken: { jwtToken: token },
+      idToken: {jwtToken: token},
     },
   } = useUserContext();
-  const NoParameters = {
-    value: "",
-    label: "None",
-  };
-  const { setMessage } = useStatusContext();
+  const {setMessage} = useStatusContext();
   const [command, setCommand] = useState("");
-  const [parameters, setParameters] = useState([NoParameters]);
-  const [parameter, setParameter] = useState("");
+  const [parameters, setParameters] = useState(null);
+  const [data, setData] = useState(null);
+  const [startTime, setStartTime] = useState(null)
+  const [endTime, setEndTime] = useState(null)
+
   const changeCommandHandler = (e) => {
     selectCommand(e.target.value);
   };
@@ -34,16 +35,27 @@ const SendCommand = ({ vins }) => {
     const params = getParameters(cmd);
     setCommand(cmd);
     setParameters(params);
-    setParameter(params[0].value);
+    setData(null);
+    setStartTime(null);
+    setEndTime(null);
   };
 
-  const changeParametersHandler = (e) => {
-    setParameter(e.target.value);
+  const handleDataChange = (_, value) => {
+    setData(value);
   };
 
-  const clickHandler = async (e) => {
+  const handleStartChange = (date, _) => {
+    setStartTime(date);
+  }
+
+  const handleEndChange = (date, _) => {
+    setEndTime(date)
+  }
+
+  const clickHandler = async (_) => {
     try {
-      await sendCommand(vins, command, parameter, token);
+      const cmd = sanitize({command: command, data: data, start: startTime, end: endTime});
+      await sendCommand(vins, cmd, token);
       if (vins.length === 1) {
         setMessage(`Sent command to ${vins[0]}`);
       } else {
@@ -59,13 +71,13 @@ const SendCommand = ({ vins }) => {
     for (let i = 0, len = commands.length; i < len; i += 1) {
       const item = commands[i];
       if (item.value === cmd) {
-        if (!item.parameters) {
+        if (!item.params) {
           break;
         }
-        return item.parameters;
+        return item.params;
       }
     }
-    return [NoParameters];
+    return null;
   };
 
   useEffect(() => {
@@ -75,9 +87,9 @@ const SendCommand = ({ vins }) => {
   }, []);
 
   return (
-    <div className={classes.form} style={{ marginTop: 20 }}>
+    <div className={clsx(classes.paper)} style={{marginTop: 20}}>
       <FormControl
-        className={classes.formControlInline}
+        className={classes.formControl}
         variant="outlined"
         size="small"
       >
@@ -101,45 +113,27 @@ const SendCommand = ({ vins }) => {
           ))}
         </Select>
       </FormControl>
-      <FormControl
-        className={classes.formControlInline}
-        variant="outlined"
-        size="small"
-      >
-        <InputLabel
-          htmlFor="send-parameter"
-          className={classes.whiteBackground}
-        >
-          Parameter
-        </InputLabel>
-        <Select
-          native
-          value={parameter}
-          variant="outlined"
-          inputProps={{
-            name: "send-parameter",
-            id: "send-parameter",
-          }}
-          onChange={changeParametersHandler}
-          disabled={parameters.length === 0}
-        >
-          {parameters.map((item) => (
-            <option key={item.value} value={item.value}>
-              {item.label}
-            </option>
-          ))}
-        </Select>
-      </FormControl>
-      <IconButton
-        color="primary"
+      <Parameters
+        params={parameters}
+        data={data}
+        handleDataChange={handleDataChange}
+        startDate={startTime}
+        handleStartChange={handleStartChange}
+        endDate={endTime}
+        handleEndChange={handleEndChange}
+      />
+      <Button
+        type="submit"
         aria-label="send command"
-        component="span"
-        onClick={clickHandler}
-        size="small"
         disabled={busy || vins.length === 0}
+        fullWidth
+        variant="contained"
+        color="primary"
+        className={classes.submit}
+        onClick={clickHandler}
       >
-        <SendIcon fontSize="large" />
-      </IconButton>
+        {busy ? "Sending..." : "Send"}
+      </Button>
     </div>
   );
 };
diff --git a/src/components/Controls/SendCommand/sanitize.js b/src/components/Controls/SendCommand/sanitize.js
new file mode 100644
index 0000000..45560e5
--- /dev/null
+++ b/src/components/Controls/SendCommand/sanitize.js
@@ -0,0 +1,115 @@
+export const onOff = {
+  false: "off",
+  true: "on",
+}
+
+export const onOffTemp = {
+  0: "off",
+  1: "on",
+  ...Object.fromEntries(Array.from({length: 26}, (_, i) => [i+2, `${i+15}`]))
+}
+
+export const precond = {
+  0: "battery",
+  1: "all",
+  2: "climate",
+  3: "stop"
+}
+
+export const hmol = {
+  0: "off",
+  1: "low",
+  2: "mid",
+  3: "high"
+}
+
+export const emptyCommands = [
+  "doors_lock", "doors_unlock", "vent_windows",
+  "close_windows", "trunk_close", "flash_headlights",
+  "alert"
+]
+
+export const onOffCommands = ["california_mode", "steering_wheel_preheat", "defrost", "charging"]
+
+export const hmolCommands = ["passenger_seat_preheat", "driver_seat_preheat"]
+
+
+const removeIfFieldsAreEmpty = (cmd, fields) => {
+  for (const field of fields) {
+    if (cmd[field] == null) {
+      delete cmd[field]
+    }
+  }
+
+  return cmd
+}
+
+const tempCabinPeriodConvert = (cmd) => {
+  if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 0 || cmd.data > 27) {
+    cmd.data = 0
+  }
+
+  cmd.data = onOffTemp[cmd.data]
+
+  return cmd
+}
+
+const onOffConvert = (cmd) => {
+  if (cmd.data == null || cmd.data !== true) {
+    cmd.data = false
+  }
+
+  cmd.data = onOff[cmd.data]
+
+  return cmd
+}
+
+const precondConvert = cmd => {
+  if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 0 || cmd.data > 3) {
+    cmd.data = 0
+  }
+
+  cmd.data = precond[cmd.data]
+
+  return cmd
+}
+
+const hmolConvert = (cmd) => {
+  if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 0 || cmd.data > 3) {
+    cmd.data = 0
+  }
+
+  cmd.data = hmol[cmd.data]
+
+  return cmd
+}
+
+const trunkOpenConvert = (cmd) => {
+  if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 1 || cmd.data > 5) {
+    cmd.data = 1
+  }
+
+  cmd.data = cmd.data.toString()
+
+  return cmd
+}
+
+export const sanitize = (cmd) => {
+  cmd = removeIfFieldsAreEmpty(cmd, ["data", "start", "end"])
+
+  if (onOffCommands.includes(cmd.command)) {
+    cmd = onOffConvert(cmd)
+  } else if (hmolCommands.includes(cmd.command)) {
+    cmd = hmolConvert(cmd)
+  } else if (cmd.command === "precondition") {
+    cmd = precondConvert(cmd)
+  } else if (cmd.command === "trunk_open") {
+    cmd = trunkOpenConvert(cmd)
+  } else if (cmd.command === "temp_cabin") {
+    cmd = tempCabinPeriodConvert(cmd)
+  } else {
+    delete cmd.data;
+  }
+
+  return cmd
+}
diff --git a/src/components/Controls/SendCommand/sanitize.test.js b/src/components/Controls/SendCommand/sanitize.test.js
new file mode 100644
index 0000000..4e748f6
--- /dev/null
+++ b/src/components/Controls/SendCommand/sanitize.test.js
@@ -0,0 +1,150 @@
+import {emptyCommands, hmol, hmolCommands, onOff, onOffCommands, onOffTemp, precond, sanitize,} from "./sanitize";
+
+const randomValues = [null, undefined, "someString", 33]
+
+describe("Sanitize test", () => {
+  it("empty commands", () => {
+    for (const command of emptyCommands) {
+      const cmd = sanitize({command})
+      expect(cmd.command).toEqual(command)
+      expect("data" in cmd).toEqual(false);
+      expect("start" in cmd).toEqual(false);
+      expect("end" in cmd).toEqual(false);
+    }
+  })
+
+  it("on-off commands with proper values", () => {
+    for (const command of onOffCommands) {
+      for (const data of [false, true]) {
+        const cmd = sanitize({command, data})
+
+        expect(cmd.data).toEqual(onOff[data])
+        expect(cmd.command).toEqual(command)
+        expect("start" in cmd).toEqual(false);
+        expect("end" in cmd).toEqual(false);
+      }
+    }
+  })
+
+  it("on-off commands with dirty values", () => {
+    for (const command of onOffCommands) {
+      const cmd = {command}
+      for (const rVal of randomValues) {
+        if (rVal !== undefined) {
+          cmd.data = rVal
+        }
+        const res = sanitize(cmd)
+
+        expect(res.data).toEqual("off")
+        expect(res.command).toEqual(command)
+        expect("start" in res).toEqual(false);
+        expect("end" in res).toEqual(false);
+      }
+    }
+  })
+
+  it("high-mid-low-off with proper values", () => {
+    for (const command of hmolCommands) {
+      for (const data of [0,1,2,3]) {
+        const cmd = sanitize({command, data})
+
+        expect(cmd.data).toEqual(hmol[data])
+        expect(cmd.command).toEqual(command)
+        expect("start" in cmd).toEqual(false);
+        expect("end" in cmd).toEqual(false);
+      }
+    }
+  })
+
+  it("precondition with proper values", () => {
+      for (const data of [0,1,2,3]) {
+        const cmd = sanitize({command:"precondition", data})
+
+        expect(cmd.data).toEqual(precond[data])
+        expect(cmd.command).toEqual("precondition")
+        expect("start" in cmd).toEqual(false);
+        expect("end" in cmd).toEqual(false);
+      }
+  })
+
+  it("precondition with wrong values", () => {
+      const cmd = {command:"precondition"}
+      for (const rVal of randomValues) {
+        if (rVal !== undefined) {
+          cmd.data = rVal
+        }
+        const res = sanitize(cmd)
+
+        expect(res.data).toEqual("battery")
+        expect(res.command).toEqual("precondition")
+        expect("start" in res).toEqual(false);
+        expect("end" in res).toEqual(false);
+      }
+  })
+
+
+
+  it("high-mid-low-off with wrong values", () => {
+    for (const command of hmolCommands) {
+      const cmd = {command}
+      for (const rVal of randomValues) {
+        if (rVal !== undefined) {
+          cmd.data = rVal
+        }
+        const res = sanitize(cmd)
+
+        expect(res.data).toEqual("off")
+        expect(res.command).toEqual(command)
+        expect("start" in res).toEqual(false);
+        expect("end" in res).toEqual(false);
+      }
+    }
+  })
+
+  it("open trunk", () => {
+    const cmd = {command: "trunk_open"}
+    for (let i = 1; i <= 5; i++) {
+      cmd.data = i
+
+      const res = sanitize(cmd)
+
+      expect(res.data).toEqual(i.toString())
+      expect(res.command).toEqual("trunk_open")
+      expect("start" in res).toEqual(false);
+      expect("end" in res).toEqual(false);
+    }
+  })
+
+  it("open trunk with wrong values", () => {
+    const cmd = {command: "trunk_open"}
+    for (const rVal of randomValues) {
+      if (rVal !== undefined) {
+        cmd.data = rVal
+      }
+      const res = sanitize(cmd)
+
+      expect(res.data).toEqual("1")
+      expect(res.command).toEqual("trunk_open")
+      expect("start" in res).toEqual(false);
+      expect("end" in res).toEqual(false);
+    }
+  })
+
+
+  it("cabin temp with period with proper values", () => {
+    for (let i = 0; i <= 27; i++) {
+      const res = sanitize({
+        command: "temp_cabin",
+        data: i,
+        start: new Date(),
+        end: new Date(),
+      })
+
+
+      expect(res.command).toEqual("temp_cabin")
+      expect(res.data).toEqual(onOffTemp[i])
+      expect(typeof res.start).toEqual("object")
+      expect(typeof res.end).toEqual("object")
+    }
+  })
+})
\ No newline at end of file
diff --git a/src/components/Controls/TabPanel/__snapshots__/index.test.jsx.snap b/src/components/Controls/TabPanel/__snapshots__/index.test.jsx.snap
index 184822a..c712355 100644
--- a/src/components/Controls/TabPanel/__snapshots__/index.test.jsx.snap
+++ b/src/components/Controls/TabPanel/__snapshots__/index.test.jsx.snap
@@ -8,7 +8,7 @@ exports[`TabPanel Render 1`] = `
     role="tabpanel"
   >
     <div
-      class="MuiBox-root MuiBox-root-1"
+      class="MuiBox-root MuiBox-root-0"
     >
       <div>
         Test
diff --git a/src/components/Controls/TabPanel/index.jsx b/src/components/Controls/TabPanel/index.jsx
index d97a74f..a63ff80 100644
--- a/src/components/Controls/TabPanel/index.jsx
+++ b/src/components/Controls/TabPanel/index.jsx
@@ -3,7 +3,7 @@ import { Box } from "@material-ui/core";
 
 function TabPanel(props) {
     const { children, value, index, ...other } = props;
-
+  
     return (
         <div
             role="tabpanel"
diff --git a/src/components/DeleteConfirmation/__snapshots__/index.test.jsx.snap b/src/components/DeleteConfirmation/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000..1d827d7
--- /dev/null
+++ b/src/components/DeleteConfirmation/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Delete Confirmation Modal Should render 1`] = `
+<div
+  aria-hidden="true"
+>
+  <div />
+</div>
+`;
diff --git a/src/components/DeleteConfirmation/index.jsx b/src/components/DeleteConfirmation/index.jsx
new file mode 100644
index 0000000..877a622
--- /dev/null
+++ b/src/components/DeleteConfirmation/index.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {Dialog, DialogTitle, DialogContentText, Button, DialogActions, DialogContent} from '@material-ui/core';
+
+const DeleteConfirmation = (props) => {
+    return (
+      <div>
+      <Dialog open={props.open}
+      onClose={props.close}>
+        <DialogTitle id="alert-dialog-title">
+          {"Delete Resource?"}
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            {"Are you sure you want to delete: " + props.message}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={props.close}>Cancel</Button>
+          <Button variant="contained" color="secondary" onClick={() => { props.close(); props.deleteFunction()}} autoFocus>
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+      </div>
+    )
+}
+
+DeleteConfirmation.propTypes={
+  open: PropTypes.bool.isRequired, // Boolean that determines if the modal should be open
+  close: PropTypes.func.isRequired, // Function that sets the open state to false i.e. () => setOpen(false)
+  message: PropTypes.any.isRequired, // What the user will see if being confirmed to be deleted
+  deleteFunction: PropTypes.func.isRequired, // Function that runs when user clicks delete
+}
+
+export default DeleteConfirmation;
\ No newline at end of file
diff --git a/src/components/DeleteConfirmation/index.test.jsx b/src/components/DeleteConfirmation/index.test.jsx
new file mode 100644
index 0000000..33da9de
--- /dev/null
+++ b/src/components/DeleteConfirmation/index.test.jsx
@@ -0,0 +1,20 @@
+jest.mock("../Contexts/UserContext");
+
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+import DeleteConfirmation from "./index";
+import addSnapshotSerializer from "../../utils/snapshot";
+
+describe("Delete Confirmation Modal", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Should render", () => {
+    const { container } = render(
+      <DeleteConfirmation open={true} close={()=>{}} message="Test Message" deleteFunction={()=>{}}/>
+    );
+    expect(container).toMatchSnapshot();
+    cleanup();
+  });
+});
diff --git a/src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap
index f49c5ea..1019037 100644
--- a/src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/Details/__snapshots__/index.test.jsx.snap
@@ -28,6 +28,7 @@ exports[`FleetDetailsTab Render 1`] = `
                     Name
                   </b>
                   : 
+                  Test Fleet
                 </p>
                 <p>
                   <b>
@@ -91,13 +92,13 @@ exports[`FleetDetailsTab Render 1`] = `
               >
                 <a
                   class=""
-                  href="/fleet-update?name=undefined"
+                  href="/fleet-update?name=Test Fleet"
                   style="margin: 5px;"
-                  title="Update \\"undefined\\""
+                  title="Update \\"Test Fleet\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Update \\"undefined\\""
+                    aria-label="Update \\"Test Fleet\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -110,11 +111,11 @@ exports[`FleetDetailsTab Render 1`] = `
                 <a
                   class=""
                   href="/"
-                  title="Delete \\"undefined\\""
+                  title="Delete \\"Test Fleet\\""
                 >
                   <svg
                     aria-hidden="true"
-                    aria-label="Delete \\"undefined\\""
+                    aria-label="Delete \\"Test Fleet\\""
                     class="MuiSvgIcon-root"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -126,6 +127,7 @@ exports[`FleetDetailsTab Render 1`] = `
                 </a>
               </div>
             </div>
+            <div />
           </div>
         </div>
       </div>
diff --git a/src/components/Fleets/Status/Details/index.jsx b/src/components/Fleets/Status/Details/index.jsx
index 9b5b31f..3cf7c95 100644
--- a/src/components/Fleets/Status/Details/index.jsx
+++ b/src/components/Fleets/Status/Details/index.jsx
@@ -14,12 +14,14 @@ import { useStatusContext } from "../../../Contexts/StatusContext";
 import { FleetProvider, useFleetContext } from "../../../Contexts/FleetContext"
 import useStyles from "../../../useStyles";
 import { logger } from "../../../../services/monitoring";
+import DeleteConfirmation from "../../../DeleteConfirmation";
 
 const MainForm = ({ name }) => {
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { fleet, getFleet, deleteFleet } = useFleetContext();
   const [redirect, setRedirect] = useState(null);
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
 
   useEffect(() => {
@@ -77,12 +79,13 @@ const MainForm = ({ name }) => {
             </Link>
           </Tooltip>
           <Tooltip key={`delete-${name}`} title={`Delete "${name}"`}>
-            <Link to="#" onClick={onDelete}>
+            <Link to="#" onClick={() => setShowDeleteModal(true)}>
               <DeleteIcon aria-label={`Delete "${name}"`} />
             </Link>
           </Tooltip>
         </Grid>
       </Grid>
+      <DeleteConfirmation message={name} open={showDeleteModal} close={()=> setShowDeleteModal(false)} deleteFunction={onDelete}/>
     </div >
   );
 };
diff --git a/src/components/Fleets/Status/Details/index.test.jsx b/src/components/Fleets/Status/Details/index.test.jsx
index 8ba6fbf..6cd7f4b 100644
--- a/src/components/Fleets/Status/Details/index.test.jsx
+++ b/src/components/Fleets/Status/Details/index.test.jsx
@@ -4,6 +4,7 @@ jest.mock("../../../Contexts/UserContext");
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { FleetProvider } from "../../../Contexts/FleetContext";
 import { StatusProvider } from "../../../Contexts/StatusContext";
@@ -18,7 +19,7 @@ const renderFleetDetailsTab = async () => {
       <StatusProvider>
         <UserProvider>
           <BrowserRouter>
-            <MainForm />
+            <MainForm name="Test Fleet"/>
           </BrowserRouter>
         </UserProvider>
       </StatusProvider>
@@ -35,6 +36,11 @@ describe("FleetDetailsTab", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ name: "Test Fleet" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderFleetDetailsTab();
diff --git a/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
index 8fc325e..34f3767 100644
--- a/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/Vehicles/Table/__snapshots__/index.test.jsx.snap
@@ -153,23 +153,26 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <a
-                      class=""
-                      href="/"
-                      title="Delete \\"USWESTVIN12345678\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Delete USWESTVIN12345678"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
+                    <div>
+                      <a
+                        class=""
+                        href="/"
+                        title="Delete \\"USWESTVIN12345678\\""
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </a>
+                        <svg
+                          aria-hidden="true"
+                          aria-label="Delete USWESTVIN12345678"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </a>
+                      <div />
+                    </div>
                   </td>
                 </tr>
                 <tr
@@ -187,23 +190,26 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <a
-                      class=""
-                      href="/"
-                      title="Delete \\"USWESTVIN12345679\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Delete USWESTVIN12345679"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
+                    <div>
+                      <a
+                        class=""
+                        href="/"
+                        title="Delete \\"USWESTVIN12345679\\""
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </a>
+                        <svg
+                          aria-hidden="true"
+                          aria-label="Delete USWESTVIN12345679"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </a>
+                      <div />
+                    </div>
                   </td>
                 </tr>
                 <tr
@@ -221,23 +227,26 @@ exports[`FleetVehiclesTable Render 1`] = `
                   <td
                     class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                   >
-                    <a
-                      class=""
-                      href="/"
-                      title="Delete \\"USWESTVIN12345670\\""
-                    >
-                      <svg
-                        aria-hidden="true"
-                        aria-label="Delete USWESTVIN12345670"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
+                    <div>
+                      <a
+                        class=""
+                        href="/"
+                        title="Delete \\"USWESTVIN12345670\\""
                       >
-                        <path
-                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                        />
-                      </svg>
-                    </a>
+                        <svg
+                          aria-hidden="true"
+                          aria-label="Delete USWESTVIN12345670"
+                          class="MuiSvgIcon-root"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                          />
+                        </svg>
+                      </a>
+                      <div />
+                    </div>
                   </td>
                 </tr>
               </tbody>
diff --git a/src/components/Fleets/Status/Vehicles/Table/index.jsx b/src/components/Fleets/Status/Vehicles/Table/index.jsx
index 8d08b82..0fdbdfe 100644
--- a/src/components/Fleets/Status/Vehicles/Table/index.jsx
+++ b/src/components/Fleets/Status/Vehicles/Table/index.jsx
@@ -22,7 +22,8 @@ import useStyles from "../../../../useStyles";
 import SearchField from "../../../../Controls/SearchField";
 import { logger } from "../../../../../services/monitoring";
 import { Roles, hasRole } from "../../../../../utils/roles";
-import {useLocalStorage} from "../../../../useLocalStorage";
+import { useLocalStorage } from "../../../../useLocalStorage";
+import DeleteConfirmation from "../../../../DeleteConfirmation";
 
 const tableColumns = [
   {
@@ -42,11 +43,17 @@ const MainForm = ({ name }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
+  const [search, setSearch] = useState("");
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
   const classes = useStyles();
   const { setMessage } = useStatusContext();
   const { fleetVehicles, totalFleetVehicles, getFleetVehicles, deleteFleetVehicle } = useFleetContext();
   const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
 
+  const handleSearch = (query) => {
+    setSearch(query);
+  };
+
   useEffect(() => {
     (async () => {
       try {
@@ -54,6 +61,7 @@ const MainForm = ({ name }) => {
         await getFleetVehicles(
           name,
           {
+            search,
             limit: pageSize,
             offset: pageSize * pageIndex,
             order: `${orderBy} ${order}`,
@@ -66,7 +74,7 @@ const MainForm = ({ name }) => {
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token, pageIndex, pageSize, orderBy, order]);
+  }, [token, pageIndex, pageSize, orderBy, order, search]);
 
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
@@ -126,11 +134,15 @@ const MainForm = ({ name }) => {
         );
       } else {
         return (
-          <Tooltip key={`delete-${action.id}`} title={action.tip}>
-            <Link to="#" onClick={() => onDelete(action.id)}>
-              {action.icon}
-            </Link>
-          </Tooltip>
+          <div>
+            <Tooltip key={`delete-${action.id}`} title={action.tip}>
+              <Link to="#" onClick={() => onDelete(action.id)}>
+                {action.icon}
+              </Link>
+            </Tooltip>
+            <DeleteConfirmation message={action.id} open={showDeleteModal} close={() => setShowDeleteModal(false)} deleteFunction={() => onDelete(action.id)} />
+          </div>
+
         );
       }
     });
@@ -145,7 +157,7 @@ const MainForm = ({ name }) => {
           </Link>
         </Grid>
         <Grid item md={8} align="right" className={classes.textCenterAlign}>
-          <SearchField classes={classes} />
+          <SearchField classes={classes} onSearch={handleSearch} />
         </Grid>
       </Grid>
       <Table>
diff --git a/src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap
index 5b8cd0e..fd28656 100644
--- a/src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/DetailsTab.test.jsx.snap
@@ -135,6 +135,7 @@ exports[`DetailsTab Render 1`] = `
                   </a>
                 </div>
               </div>
+              <div />
             </div>
           </div>
         </div>
diff --git a/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
index ea291f7..905f4f2 100644
--- a/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/VehiclesTab.test.jsx.snap
@@ -152,23 +152,26 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"USWESTVIN12345678\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete USWESTVIN12345678"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
+                <div>
+                  <a
+                    class=""
+                    href="/"
+                    title="Delete \\"USWESTVIN12345678\\""
                   >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </a>
+                    <svg
+                      aria-hidden="true"
+                      aria-label="Delete USWESTVIN12345678"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </a>
+                  <div />
+                </div>
               </td>
             </tr>
             <tr
@@ -186,23 +189,26 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"USWESTVIN12345679\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete USWESTVIN12345679"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
+                <div>
+                  <a
+                    class=""
+                    href="/"
+                    title="Delete \\"USWESTVIN12345679\\""
                   >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </a>
+                    <svg
+                      aria-hidden="true"
+                      aria-label="Delete USWESTVIN12345679"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </a>
+                  <div />
+                </div>
               </td>
             </tr>
             <tr
@@ -220,23 +226,26 @@ exports[`VehiclesTab Render 1`] = `
               <td
                 class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
               >
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"USWESTVIN12345670\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete USWESTVIN12345670"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
+                <div>
+                  <a
+                    class=""
+                    href="/"
+                    title="Delete \\"USWESTVIN12345670\\""
                   >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </a>
+                    <svg
+                      aria-hidden="true"
+                      aria-label="Delete USWESTVIN12345670"
+                      class="MuiSvgIcon-root"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </a>
+                  <div />
+                </div>
               </td>
             </tr>
           </tbody>
diff --git a/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
index 7cd8290..7eee5c3 100644
--- a/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
@@ -15,7 +15,7 @@ exports[`FleetStatus Render 1`] = `
           class="makeStyles-paper-0 makeStyles-tableSize-0"
         >
           <div
-            class="MuiBox-root MuiBox-root-64 makeStyles-tableToolbar-0"
+            class="MuiBox-root MuiBox-root-0 makeStyles-tableToolbar-0"
           >
             <div
               class="MuiTabs-root"
@@ -97,7 +97,7 @@ exports[`FleetStatus Render 1`] = `
             role="tabpanel"
           >
             <div
-              class="MuiBox-root MuiBox-root-69"
+              class="MuiBox-root MuiBox-root-0"
             >
               <div
                 class="makeStyles-paper-0 makeStyles-tableSize-0"
@@ -124,6 +124,7 @@ exports[`FleetStatus Render 1`] = `
                             Name
                           </b>
                           : 
+                          Fleet Name
                         </p>
                         <p>
                           <b>
@@ -187,13 +188,13 @@ exports[`FleetStatus Render 1`] = `
                       >
                         <a
                           class=""
-                          href="/fleet-update?name=undefined"
+                          href="/fleet-update?name=Fleet Name"
                           style="margin: 5px;"
-                          title="Update \\"undefined\\""
+                          title="Update \\"Fleet Name\\""
                         >
                           <svg
                             aria-hidden="true"
-                            aria-label="Update \\"undefined\\""
+                            aria-label="Update \\"Fleet Name\\""
                             class="MuiSvgIcon-root"
                             focusable="false"
                             viewBox="0 0 24 24"
@@ -206,11 +207,11 @@ exports[`FleetStatus Render 1`] = `
                         <a
                           class=""
                           href="/"
-                          title="Delete \\"undefined\\""
+                          title="Delete \\"Fleet Name\\""
                         >
                           <svg
                             aria-hidden="true"
-                            aria-label="Delete \\"undefined\\""
+                            aria-label="Delete \\"Fleet Name\\""
                             class="MuiSvgIcon-root"
                             focusable="false"
                             viewBox="0 0 24 24"
@@ -222,6 +223,7 @@ exports[`FleetStatus Render 1`] = `
                         </a>
                       </div>
                     </div>
+                    <div />
                   </div>
                 </div>
               </div>
diff --git a/src/components/Fleets/Status/index.test.jsx b/src/components/Fleets/Status/index.test.jsx
index 8ecfca1..bc5cb8c 100644
--- a/src/components/Fleets/Status/index.test.jsx
+++ b/src/components/Fleets/Status/index.test.jsx
@@ -7,6 +7,7 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import routeData from "react-router";
 
 import { FleetProvider } from "../../Contexts/FleetContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
@@ -38,6 +39,11 @@ describe("FleetStatus", () => {
     addSnapshotSerializer(expect);
   });
 
+  beforeEach(() => {
+    // Does not work if placed in beforeAll
+    jest.spyOn(routeData, 'useParams').mockReturnValue({ name: "Fleet Name" })
+  })
+
   it("Render", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderCarStatus();
diff --git a/src/components/Fleets/Table/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Table/__snapshots__/index.test.jsx.snap
index c8e656b..5f9f641 100644
--- a/src/components/Fleets/Table/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Table/__snapshots__/index.test.jsx.snap
@@ -24,7 +24,6 @@ exports[`FleetTable Render 1`] = `
                 class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <a
-                  class="makeStyles-labelInline-0"
                   href="/fleet-add"
                 >
                   <svg
@@ -40,7 +39,6 @@ exports[`FleetTable Render 1`] = `
                 </a>
               </div>
               <div
-                align="right"
                 class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               >
                 <div
@@ -98,397 +96,401 @@ exports[`FleetTable Render 1`] = `
                 class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
               />
             </div>
-            <table
-              class="MuiTable-root"
+            <div
+              class="makeStyles-paper-0 makeStyles-tableSize-0"
             >
-              <thead
-                class="MuiTableHead-root"
+              <table
+                class="MuiTable-root"
               >
-                <tr
-                  class="MuiTableRow-root MuiTableRow-head"
+                <thead
+                  class="MuiTableHead-root"
                 >
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
+                  <tr
+                    class="MuiTableRow-root MuiTableRow-head"
                   >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
-                      role="button"
-                      tabindex="0"
+                    <th
+                      class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                      scope="col"
                     >
-                      Name
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                        focusable="false"
-                        viewBox="0 0 24 24"
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root MuiTableSortLabel-root"
+                        role="button"
+                        tabindex="0"
                       >
-                        <path
-                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
-                      role="button"
-                      tabindex="0"
-                    >
-                      Log Level
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
-                      role="button"
-                      tabindex="0"
-                    >
-                      CAN Bus Enabled
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
-                      role="button"
-                      tabindex="0"
-                    >
-                      Data Logger Enabled
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
-                      role="button"
-                      tabindex="0"
-                    >
-                      Vehicles
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
-                      role="button"
-                      tabindex="0"
-                    >
-                      Filters
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody
-                class="MuiTableBody-root"
-              >
-                <tr
-                  class="MuiTableRow-root"
-                >
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    <a
-                      href="/fleet/US-WEST"
-                    >
-                      US-WEST
-                    </a>
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    info
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    true
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    true
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    3
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    3
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root"
-                >
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    <a
-                      href="/fleet/US-CENTRAL"
-                    >
-                      US-CENTRAL
-                    </a>
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    warn
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    false
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    false
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    3
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    0
-                  </td>
-                </tr>
-                <tr
-                  class="MuiTableRow-root"
-                >
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    <a
-                      href="/fleet/US-EAST"
-                    >
-                      US-EAST
-                    </a>
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    error
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    true
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    false
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    3
-                  </td>
-                  <td
-                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
-                  >
-                    0
-                  </td>
-                </tr>
-              </tbody>
-              <tfoot
-                class="MuiTableFooter-root"
-              >
-                <tr
-                  class="MuiTableRow-root MuiTableRow-footer"
-                >
-                  <td
-                    class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                    colspan="8"
-                  >
-                    <div
-                      class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
-                    >
-                      <div
-                        class="MuiTablePagination-spacer"
-                      />
-                      <p
-                        class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
-                      >
-                        Rows per page:
-                      </p>
-                      <div
-                        class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
-                      >
-                        <select
-                          aria-label="rows per page"
-                          class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
-                        >
-                          <option
-                            class="MuiTablePagination-menuItem"
-                            value="5"
-                          >
-                            5
-                          </option>
-                          <option
-                            class="MuiTablePagination-menuItem"
-                            value="10"
-                          >
-                            10
-                          </option>
-                          <option
-                            class="MuiTablePagination-menuItem"
-                            value="25"
-                          >
-                            25
-                          </option>
-                          <option
-                            class="MuiTablePagination-menuItem"
-                            value="100"
-                          >
-                            100
-                          </option>
-                        </select>
+                        Name
                         <svg
                           aria-hidden="true"
-                          class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
+                          class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
                           focusable="false"
                           viewBox="0 0 24 24"
                         >
                           <path
-                            d="M7 10l5 5 5-5z"
+                            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
                           />
                         </svg>
-                      </div>
-                      <p
-                        class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root MuiTableSortLabel-root"
+                        role="button"
+                        tabindex="0"
                       >
-                        1-3 of 3
-                      </p>
+                        Log Level
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                          />
+                        </svg>
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root MuiTableSortLabel-root"
+                        role="button"
+                        tabindex="0"
+                      >
+                        CAN Bus Enabled
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                          />
+                        </svg>
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root MuiTableSortLabel-root"
+                        role="button"
+                        tabindex="0"
+                      >
+                        Data Logger Enabled
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                          />
+                        </svg>
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root MuiTableSortLabel-root"
+                        role="button"
+                        tabindex="0"
+                      >
+                        Vehicles
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                          />
+                        </svg>
+                      </span>
+                    </th>
+                    <th
+                      class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                      scope="col"
+                    >
+                      <span
+                        aria-disabled="false"
+                        class="MuiButtonBase-root MuiTableSortLabel-root"
+                        role="button"
+                        tabindex="0"
+                      >
+                        Filters
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                          />
+                        </svg>
+                      </span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody
+                  class="MuiTableBody-root"
+                >
+                  <tr
+                    class="MuiTableRow-root"
+                  >
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      <a
+                        href="/fleet/US-WEST"
+                      >
+                        US-WEST
+                      </a>
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      info
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      true
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      true
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      3
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      3
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root"
+                  >
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      <a
+                        href="/fleet/US-CENTRAL"
+                      >
+                        US-CENTRAL
+                      </a>
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      warn
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      false
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      false
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      3
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      0
+                    </td>
+                  </tr>
+                  <tr
+                    class="MuiTableRow-root"
+                  >
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      <a
+                        href="/fleet/US-EAST"
+                      >
+                        US-EAST
+                      </a>
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      error
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      true
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      false
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      3
+                    </td>
+                    <td
+                      class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                    >
+                      0
+                    </td>
+                  </tr>
+                </tbody>
+                <tfoot
+                  class="MuiTableFooter-root"
+                >
+                  <tr
+                    class="MuiTableRow-root MuiTableRow-footer"
+                  >
+                    <td
+                      class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
+                      colspan="8"
+                    >
                       <div
-                        class="MuiTablePagination-actions"
+                        class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
                       >
-                        <button
-                          aria-label="Previous page"
-                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
-                          disabled=""
-                          tabindex="-1"
-                          title="Previous page"
-                          type="button"
+                        <div
+                          class="MuiTablePagination-spacer"
+                        />
+                        <p
+                          class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
                         >
-                          <span
-                            class="MuiIconButton-label"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root"
-                              focusable="false"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-                              />
-                            </svg>
-                          </span>
-                        </button>
-                        <button
-                          aria-label="Next page"
-                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
-                          disabled=""
-                          tabindex="-1"
-                          title="Next page"
-                          type="button"
+                          Rows per page:
+                        </p>
+                        <div
+                          class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
                         >
-                          <span
-                            class="MuiIconButton-label"
+                          <select
+                            aria-label="rows per page"
+                            class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="MuiSvgIcon-root"
-                              focusable="false"
-                              viewBox="0 0 24 24"
+                            <option
+                              class="MuiTablePagination-menuItem"
+                              value="5"
                             >
-                              <path
-                                d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-                              />
-                            </svg>
-                          </span>
-                        </button>
+                              5
+                            </option>
+                            <option
+                              class="MuiTablePagination-menuItem"
+                              value="10"
+                            >
+                              10
+                            </option>
+                            <option
+                              class="MuiTablePagination-menuItem"
+                              value="25"
+                            >
+                              25
+                            </option>
+                            <option
+                              class="MuiTablePagination-menuItem"
+                              value="100"
+                            >
+                              100
+                            </option>
+                          </select>
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M7 10l5 5 5-5z"
+                            />
+                          </svg>
+                        </div>
+                        <p
+                          class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                        >
+                          1-3 of 3
+                        </p>
+                        <div
+                          class="MuiTablePagination-actions"
+                        >
+                          <button
+                            aria-label="Previous page"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                            disabled=""
+                            tabindex="-1"
+                            title="Previous page"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root"
+                                focusable="false"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                          <button
+                            aria-label="Next page"
+                            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                            disabled=""
+                            tabindex="-1"
+                            title="Next page"
+                            type="button"
+                          >
+                            <span
+                              class="MuiIconButton-label"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="MuiSvgIcon-root"
+                                focusable="false"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                                />
+                              </svg>
+                            </span>
+                          </button>
+                        </div>
                       </div>
-                    </div>
-                  </td>
-                </tr>
-              </tfoot>
-            </table>
+                    </td>
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/Fleets/Table/index.jsx b/src/components/Fleets/Table/index.jsx
index 2ffccf9..2a34897 100644
--- a/src/components/Fleets/Table/index.jsx
+++ b/src/components/Fleets/Table/index.jsx
@@ -1,66 +1,26 @@
-import React, { useEffect, useState } from "react";
-import { Link } from 'react-router-dom';
-import {
-  Grid,
-  Table,
-  TableBody,
-  TableCell,
-  TableFooter,
-  TablePagination,
-  TableRow
-} from "@material-ui/core";
+import React, {useEffect, useState} from "react";
+import {Link} from 'react-router-dom';
+import {Grid,} from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import clsx from "clsx";
 
-import TableHeaderSortable from "../../Table/HeaderSortable";
-import {
-  useUserContext
-} from "../../Contexts/UserContext"
-import { useStatusContext } from "../../Contexts/StatusContext";
-import { FleetProvider, useFleetContext } from "../../Contexts/FleetContext"
+import {useUserContext} from "../../Contexts/UserContext"
+import {useStatusContext} from "../../Contexts/StatusContext";
+import {FleetProvider} from "../../Contexts/FleetContext"
 import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
-import { logger } from "../../../services/monitoring";
-import {useLocalStorage} from "../../useLocalStorage";
+import FleetSelectionTable from "../../Controls/FleetSelectionTable";
 
-const tableColumns = [
-  {
-    id: "name",
-    label: "Name"
-  },
-  {
-    id: "log_level",
-    label: "Log Level"
-  },
-  {
-    id: "canbus_enabled",
-    label: "CAN Bus Enabled"
-  },
-  {
-    id: "data_logger_enabled",
-    label: "Data Logger Enabled"
-  },
-  {
-    id: "num_vehicles",
-    label: "Vehicles"
-  },
-  {
-    id: "num_filters",
-    label: "Filters"
-  }
-];
-
-const PAGE_SIZE = "FLEET_TABLE_PAGE_SIZE";
 
 const MainForm = () => {
-  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
-  const [pageIndex, setPageIndex] = useState(0);
-  const [orderBy, setOrderBy] = useState("id");
-  const [order, setOrder] = useState("desc");
   const classes = useStyles();
-  const { setMessage, setSitePath, setTitle } = useStatusContext();
-  const { fleets, totalFleets, getFleets } = useFleetContext();
-  const { token: { idToken: { jwtToken: token } } } = useUserContext();
+  const [search, setSearch] = useState("");
+  const {setSitePath, setTitle} = useStatusContext();
+  const {token: {idToken: {jwtToken: token}}} = useUserContext();
+
+  const handleSearch = (query) => {
+    setSearch(query);
+  };
 
   useEffect(() => {
     setTitle("Fleets");
@@ -68,106 +28,26 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    (async () => {
-      try {
-        if (!token) return;
-        await getFleets(
-          {
-            limit: pageSize,
-            offset: pageSize * pageIndex,
-            order: `${orderBy} ${order}`,
-          },
-          token
-        );
-      } catch (e) {
-        setMessage(e.message);
-        logger.warn(e.stack);
-      }
-    })();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [token, pageIndex, pageSize, orderBy, order]);
-
-  const handleChangePageIndex = (_event, newIndex) => {
-    setPageIndex(newIndex);
-  };
-
-  const handleChangePageSize = (event) => {
-    setPageSize(parseInt(event.target.value, 10));
-    setPageIndex(0);
-  };
-
-  const handleSort = (_event, property) => {
-    try {
-      if (property === orderBy) {
-        if (order === "asc") {
-          setOrder("desc");
-        } else {
-          setOrder("asc");
-        }
-      } else {
-        setOrderBy(property);
-        setOrder("asc");
-      }
-    } catch (e) {
-      logger.warn(e.stack);
-    }
-  };
-
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={4} className={classes.textJustifyAlign}>
-          <Link to={"/fleet-add"} className={classes.labelInline}>
-            <AddCircleIcon fontSize="large" />
+          <Link to={"/fleet-add"}>
+            <AddCircleIcon fontSize="large"/>
           </Link>
         </Grid>
-        <Grid item md={4} align="right" className={classes.textCenterAlign}>
-          <SearchField classes={classes} />
+        <Grid item md={4} className={classes.textCenterAlign}>
+          <SearchField classes={classes} onSearch={handleSearch}/>
         </Grid>
         <Grid item md={4} className={classes.textRightAlign}></Grid>
       </Grid>
-      <Table>
-        <TableHeaderSortable
-          classes={classes}
-          orderBy={orderBy}
-          order={order}
-          columnData={tableColumns}
-          onSortRequest={handleSort}
-        />
-        <TableBody>
-          {fleets.map((row) => (
-            <TableRow key={row.name}>
-              <TableCell align="center">
-                <Link to={`/fleet/${row.name}`}>{row.name}</Link>
-              </TableCell>
-              <TableCell align="center">{row.log_level}</TableCell>
-              <TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
-              <TableCell align="center">{row.canbus.data_logger_enabled ? "true" : "false"}</TableCell>
-              <TableCell align="center">{!row.vehicles ? 0 : row.vehicles.length}</TableCell>
-              <TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-        <TableFooter>
-          <TableRow>
-            <TablePagination
-              rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={8}
-              count={totalFleets}
-              rowsPerPage={pageSize}
-              page={pageIndex}
-              SelectProps={{
-                inputProps: { "aria-label": "rows per page" },
-                native: true,
-              }}
-              onPageChange={handleChangePageIndex}
-              onRowsPerPageChange={handleChangePageSize}
-            />
-          </TableRow>
-        </TableFooter>
-      </Table>
-    </div >
+      <FleetSelectionTable
+        token={token}
+        classes={classes}
+        search={{search}}
+        multiSelect={false}
+      />
+    </div>
   );
 };
 
diff --git a/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap b/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
index 484d38d..1293291 100644
--- a/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
+++ b/src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
@@ -26,7 +26,7 @@ exports[`FleetUpdate Render 1`] = `
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
               >
                 <label
-                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-disabled Mui-disabled Mui-required Mui-required"
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
                   data-shrink="false"
                   for="name"
                   id="name-label"
@@ -41,16 +41,14 @@ exports[`FleetUpdate Render 1`] = `
                   </span>
                 </label>
                 <div
-                  class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
                 >
                   <input
                     aria-invalid="false"
-                    class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
-                    disabled=""
+                    class="MuiInputBase-input MuiOutlinedInput-input"
                     id="name"
                     maxlength="255"
                     name="name"
-                    readonly=""
                     required=""
                     type="text"
                     value=""
diff --git a/src/components/Fleets/Update/index.jsx b/src/components/Fleets/Update/index.jsx
index 9c22f49..909f014 100644
--- a/src/components/Fleets/Update/index.jsx
+++ b/src/components/Fleets/Update/index.jsx
@@ -24,7 +24,6 @@ import { logger } from "../../../services/monitoring";
 
 const MainForm = () => {
   const queries = new URLSearchParams(useLocation().search);
-  const name = queries.get("name") ?? "";
 
   const { fleet, getFleet, updateFleet, busy } = useFleetContext();
   const { token: { idToken: { jwtToken: token } } } = useUserContext();
@@ -32,6 +31,8 @@ const MainForm = () => {
   const [redirect, setRedirect] = useState(null);
   const classes = useStyles();
 
+  const [name, setName] = useState(queries.get("name") ?? "");
+  const [oldName, ] = useState(name);
   const [selectedLogLevel, setSelectedLogLevel] = useState("info");
   const [canbusEnabled, setCANBusEnabled] = useState(true);
   const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
@@ -56,7 +57,7 @@ const MainForm = () => {
     (async () => {
       try {
         if (!name || !token) return;
-        await getFleet(name, token);
+        await getFleet(oldName, token);
       } catch (e) {
         setMessage(e.message);
         logger.warn(e.stack);
@@ -77,6 +78,10 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fleet]);
 
+  const onNameChange = (event) => {
+    setName(event.target.value);
+  }
+
   const onLogLevelChange = (event) => {
     setSelectedLogLevel(event.target.value);
   }
@@ -110,7 +115,10 @@ const MainForm = () => {
           max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0
         }
       };
-      const result = await updateFleet(name, formData, token);
+
+      console.log(oldName);
+
+      const result = await updateFleet(oldName, formData, token);
       if (!result || result.error) return;
 
       setMessage(`Updated ${result.name}`);
@@ -136,12 +144,11 @@ const MainForm = () => {
           margin="normal"
           inputProps={{
             maxLength: "255",
-            readOnly: true,
           }}
-          disabled
           value={name}
           required
           fullWidth
+          onChange={onNameChange}
         />
         <FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
         <RadioGroup
diff --git a/src/components/Manifest/Create/index.jsx b/src/components/Manifest/Create/index.jsx
deleted file mode 100644
index 381e2f3..0000000
--- a/src/components/Manifest/Create/index.jsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Redirect } from "react-router";
-import { Button, TextField, Typography } from "@material-ui/core";
-
-import { useUserContext } from "../../Contexts/UserContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
-import {
-  ManifestCreateProvider,
-  useManifestCreateContext,
-} from "../../Contexts/ManifestCreateContext";
-import useStyles from "../../useStyles";
-import { logger } from "../../../services/monitoring";
-import ManifestECUList from "../../Controls/ManifestECUList";
-import ManifestUploadProgress from "../../Controls/ManifestUploadProgress";
-
-const MainForm = () => {
-  const { createManifest, cancelUpload, busy } = useManifestCreateContext();
-  const { token } = useUserContext();
-  const { setMessage, setTitle, setSitePath } = useStatusContext();
-  const [redirect, setRedirect] = useState(null);
-  const classes = useStyles();
-  const packagenameEl = useRef(null);
-  const versionEl = useRef(null);
-  const descEl = useRef(null);
-  const releasenotesEl = useRef(null);
-
-  useEffect(() => {
-    setTitle("Create Deployments");
-    setSitePath([
-      {
-        label: "Deployments",
-        link: "/packages",
-      },
-      {
-        label: "Create Deployments",
-      },
-    ]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onSubmit = async (event) => {
-    try {
-      event.preventDefault();
-      const {
-        idToken: { jwtToken: authToken },
-      } = token;
-      const formData = {
-        name: packagenameEl.current.value,
-        version: versionEl.current.value,
-        description: descEl.current.value,
-        release_notes: releasenotesEl.current.value,
-      };
-      const manifest = await createManifest(formData, authToken);
-
-      if (!manifest || manifest.error) return;
-
-      cancelUpload();
-      setMessage(`Package uploaded`);
-      setRedirect(`/package-deploy/${manifest.id}`);
-    } catch (e) {
-      setMessage(e.message);
-      logger.warn(e.stack);
-    }
-  };
-
-  if (redirect && redirect.length > 0) {
-    return <Redirect to={redirect} />;
-  }
-
-  return (
-    <div className={classes.paper}>
-      <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",
-          }}
-          required
-          fullWidth
-          multiline
-          minRows={4}
-          placeholder="Package description"
-          inputRef={descEl}
-        />
-        <TextField
-          id="release_notes"
-          name="release_notes"
-          label="Release Notes URL"
-          variant="outlined"
-          margin="normal"
-          inputProps={{
-            maxLength: "1024",
-          }}
-          required
-          fullWidth
-          placeholder="Release Notes URL"
-          inputRef={releasenotesEl}
-        />
-        <Typography variant="h6">ECU Files</Typography>
-        <ManifestECUList />
-        {busy ? (
-          <ManifestUploadProgress onCancel={cancelUpload} />
-        ) : (
-          <Button
-            type="submit"
-            disabled={busy}
-            fullWidth
-            variant="contained"
-            color="primary"
-            className={classes.submit}
-            onClick={onSubmit}
-          >
-            Submit
-          </Button>
-        )}
-      </form>
-    </div>
-  );
-};
-
-export default function FileUploadForm() {
-  return (
-    <ManifestCreateProvider>
-      <MainForm />
-    </ManifestCreateProvider>
-  );
-}
diff --git a/src/components/Manifest/Deploy/FleetDeployForm.jsx b/src/components/Manifest/Deploy/FleetDeployForm.jsx
new file mode 100644
index 0000000..59890d4
--- /dev/null
+++ b/src/components/Manifest/Deploy/FleetDeployForm.jsx
@@ -0,0 +1,177 @@
+import React, { useEffect, useState } from "react";
+import { useParams, Redirect } from "react-router";
+import { Button, Grid, Typography } from "@material-ui/core";
+import clsx from "clsx";
+
+import {
+  ManifestsProvider,
+  useManifestsContext,
+} from "../../Contexts/ManifestsContext";
+import {
+  CarUpdatesProvider,
+  useCarUpdatesContext,
+} from "../../Contexts/CarUpdatesContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import useStyles from "../../useStyles";
+import SearchField from "../../Controls/SearchField";
+import
+  CarSelectionTable from "../../Controls/CarSelectionTable";
+import { logger } from "../../../services/monitoring";
+import { LocalDateTimeString } from "../../../utils/dates";
+import {FleetProvider} from "../../Contexts/FleetContext";
+
+const MainForm = () => {
+  const { manifest_id } = useParams();
+  const { getManifests, manifests, busy } = useManifestsContext();
+  const { deployCarUpdates } = useCarUpdatesContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const [manifestName, setManifestName] = useState("");
+  const [version, setVersion] = useState("");
+  const [createDate, setCreateDate] = useState("");
+  const [selected, setSelected] = useState([]);
+  const [search, setSearch] = useState("");
+  const [redirect, setRedirect] = useState("");
+  const classes = useStyles();
+
+  const handleSearch = (query) => {
+    setSelected([]);
+    setSearch(query);
+  };
+
+  const handleSelectAll = (cars) => {
+    setSelected(cars);
+  };
+
+  const handleSelect = (event, key) => {
+    try {
+      let newSelected;
+      if (event.target.checked) {
+        newSelected = [...selected];
+        newSelected.push(key);
+      } else {
+        newSelected = selected.filter((vin) => vin !== key);
+      }
+      setSelected(newSelected);
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
+  const onSubmit = async (event) => {
+    try {
+      event.preventDefault();
+      const data = {
+        manifest_id: parseInt(manifest_id),
+        vins: selected,
+      };
+      await deployCarUpdates(data, token);
+      setMessage(
+        `Deployed ${manifestName} ${version} to ${selected.length} cars`
+      );
+      setRedirect(`/package-status/${manifest_id}`);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  const getData = async () => {
+    try {
+      getManifests({ id: parseInt(manifest_id) }, token);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  useEffect(() => {
+    getData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  useEffect(() => {
+    const title = `Deploy ${manifestName} ${version}`;
+    setTitle(title);
+    setSitePath([
+      {
+        label: "Deployments",
+        link: "/packages",
+      },
+      {
+        label: title,
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [manifestName, version]);
+
+  useEffect(() => {
+    if (!manifests || manifests.length === 0) return;
+    const data = manifests[0];
+
+    setManifestName(data.name);
+    setVersion(data.version);
+    setCreateDate(LocalDateTimeString(data.created));
+  }, [manifests]);
+
+  if (redirect.length > 0) {
+    return <Redirect to={redirect} />;
+  }
+
+  return (
+    <div className={classes.paper}>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <Typography variant="body2">Created {createDate}.</Typography>
+        <Grid container className={classes.root} spacing={2}>
+          <Grid item md={4}>
+            <div
+              className={classes.labelInline}
+            >{`${selected.length} Selected`}</div>
+          </Grid>
+          <Grid item md={4} className={classes.textCenterAlign}>
+            <SearchField classes={classes} onSearch={handleSearch} />
+          </Grid>
+          <Grid item md={4} className={classes.textRightAlign}>
+            <Button
+              type="submit"
+              disabled={busy || selected.length === 0}
+              variant="contained"
+              color="primary"
+              className={clsx(classes.formControl, classes.textField)}
+              onClick={onSubmit}
+            >
+              {busy ? "Deploying..." : "Deploy"}
+            </Button>
+          </Grid>
+        </Grid>
+        <CarSelectionTable
+          classes={classes}
+          token={token}
+          multiSelect={true}
+          search={{ search }}
+          selected={selected}
+          onSelect={handleSelect}
+          onSelectAll={handleSelectAll}
+        />
+      </form>
+    </div>
+  );
+};
+
+const FleetDeployForm = () => (
+  <FleetProvider>
+    <ManifestsProvider>
+      <CarUpdatesProvider>
+        <MainForm />
+      </CarUpdatesProvider>
+    </ManifestsProvider>
+  </FleetProvider>
+);
+
+export default FleetDeployForm;
diff --git a/src/components/Manifest/Deploy/VehicleDeployForm.jsx b/src/components/Manifest/Deploy/VehicleDeployForm.jsx
new file mode 100644
index 0000000..e26f8c2
--- /dev/null
+++ b/src/components/Manifest/Deploy/VehicleDeployForm.jsx
@@ -0,0 +1,175 @@
+import React, { useEffect, useState } from "react";
+import { useParams, Redirect } from "react-router";
+import { Button, Grid, Typography } from "@material-ui/core";
+import clsx from "clsx";
+
+import {
+  ManifestsProvider,
+  useManifestsContext,
+} from "../../Contexts/ManifestsContext";
+import {
+  CarUpdatesProvider,
+  useCarUpdatesContext,
+} from "../../Contexts/CarUpdatesContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import useStyles from "../../useStyles";
+import SearchField from "../../Controls/SearchField";
+import CarSelectionTable from "../../Controls/CarSelectionTable";
+import { logger } from "../../../services/monitoring";
+import { LocalDateTimeString } from "../../../utils/dates";
+
+const MainForm = () => {
+  const { manifest_id } = useParams();
+  const { getManifests, manifests, busy } = useManifestsContext();
+  const { deployCarUpdates } = useCarUpdatesContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const [manifestName, setManifestName] = useState("");
+  const [version, setVersion] = useState("");
+  const [createDate, setCreateDate] = useState("");
+  const [selected, setSelected] = useState([]);
+  const [search, setSearch] = useState("");
+  const [redirect, setRedirect] = useState("");
+  const classes = useStyles();
+
+  const handleSearch = (query) => {
+    setSelected([]);
+    setSearch(query);
+  };
+
+  const handleSelectAll = (cars) => {
+    setSelected(cars);
+  };
+
+  const handleSelect = (event, key) => {
+    try {
+      let newSelected;
+      if (event.target.checked) {
+        newSelected = [...selected];
+        newSelected.push(key);
+      } else {
+        newSelected = selected.filter((vin) => vin !== key);
+      }
+      setSelected(newSelected);
+    } catch (e) {
+      logger.warn(e.stack);
+    }
+  };
+
+  const onSubmit = async (event) => {
+    try {
+      event.preventDefault();
+      const data = {
+        manifest_id: parseInt(manifest_id),
+        vins: selected,
+      };
+      await deployCarUpdates(data, token);
+      setMessage(
+        `Deployed ${manifestName} ${version} to ${selected.length} cars`
+      );
+      setRedirect(`/package-status/${manifest_id}`);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  const getData = async () => {
+    try {
+      getManifests({ id: parseInt(manifest_id) }, token);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
+  useEffect(() => {
+    getData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  useEffect(() => {
+    const title = `Deploy ${manifestName} ${version}`;
+    setTitle(title);
+    setSitePath([
+      {
+        label: "Deployments",
+        link: "/packages",
+      },
+      {
+        label: title,
+      },
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [manifestName, version]);
+
+  useEffect(() => {
+    if (!manifests || manifests.length === 0) return;
+    const data = manifests[0];
+
+    setManifestName(data.name);
+    setVersion(data.version);
+    setCreateDate(LocalDateTimeString(data.created));
+  }, [manifests]);
+
+  if (redirect.length > 0) {
+    return <Redirect to={redirect} />;
+  }
+
+  return (
+    <div className={classes.paper}>
+      <form className={classes.form} noValidate action="{onSubmit}">
+        <Typography variant="body2">Created {createDate}.</Typography>
+        <Grid container className={classes.root} spacing={2}>
+          <Grid item md={4}>
+            <div
+              className={classes.labelInline}
+            >{`${selected.length} Selected`}</div>
+          </Grid>
+          <Grid item md={4} className={classes.textCenterAlign}>
+            <SearchField classes={classes} onSearch={handleSearch} />
+          </Grid>
+          <Grid item md={4} className={classes.textRightAlign}>
+            <Button
+              type="submit"
+              disabled={busy || selected.length === 0}
+              variant="contained"
+              color="primary"
+              className={clsx(classes.formControl, classes.textField)}
+              onClick={onSubmit}
+            >
+              {busy ? "Deploying..." : "Deploy"}
+            </Button>
+          </Grid>
+        </Grid>
+        <CarSelectionTable
+          classes={classes}
+          token={token}
+          multiSelect={true}
+          search={{ search }}
+          selected={selected}
+          onSelect={handleSelect}
+          onSelectAll={handleSelectAll}
+        />
+      </form>
+    </div>
+  );
+};
+
+const VehicleDeployForm = () => (
+  <VehicleProvider>
+    <ManifestsProvider>
+      <CarUpdatesProvider>
+        <MainForm />
+      </CarUpdatesProvider>
+    </ManifestsProvider>
+  </VehicleProvider>
+);
+
+export default VehicleDeployForm;
diff --git a/src/components/Manifest/Deploy/index.jsx b/src/components/Manifest/Deploy/index.jsx
index 23318c8..eeb825b 100644
--- a/src/components/Manifest/Deploy/index.jsx
+++ b/src/components/Manifest/Deploy/index.jsx
@@ -1,35 +1,37 @@
-import React, { useEffect, useState } from "react";
-import { useParams, Redirect } from "react-router";
-import { Button, Grid, Typography } from "@material-ui/core";
+import React, {useEffect, useState} from "react";
+import {Redirect, useParams} from "react-router";
+import {Button, FormControlLabel, Grid, Switch, Typography} from "@material-ui/core";
 import clsx from "clsx";
 
-import {
-  ManifestsProvider,
-  useManifestsContext,
-} from "../../Contexts/ManifestsContext";
-import {
-  CarUpdatesProvider,
-  useCarUpdatesContext,
-} from "../../Contexts/CarUpdatesContext";
-import { VehicleProvider } from "../../Contexts/VehicleContext";
-import { useUserContext } from "../../Contexts/UserContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
+import {ManifestsProvider, useManifestsContext,} from "../../Contexts/ManifestsContext";
+import {CarUpdatesProvider, useCarUpdatesContext,} from "../../Contexts/CarUpdatesContext";
+import {VehicleProvider} from "../../Contexts/VehicleContext";
+import {useUserContext} from "../../Contexts/UserContext";
+import {useStatusContext} from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
 import CarSelectionTable from "../../Controls/CarSelectionTable";
-import { logger } from "../../../services/monitoring";
-import { LocalDateTimeString } from "../../../utils/dates";
+import {logger} from "../../../services/monitoring";
+import {LocalDateTimeString} from "../../../utils/dates";
+import FleetSelectionTable from "../../Controls/FleetSelectionTable";
+import {FleetProvider} from "../../Contexts/FleetContext";
+
+
+const CAR_UPDATE = false;
+const FLEET_UPDATE = true;
 
 const MainForm = () => {
-  const { manifest_id } = useParams();
-  const { getManifests, manifests, busy } = useManifestsContext();
-  const { deployCarUpdates } = useCarUpdatesContext();
+  const [updateType, setUpdateType] = useState(CAR_UPDATE);
+
+  const {manifest_id} = useParams();
+  const {getManifests, manifests, busy} = useManifestsContext();
+  const {deployCarUpdates, deployFleetUpdates} = useCarUpdatesContext();
   const {
     token: {
-      idToken: { jwtToken: token },
+      idToken: {jwtToken: token},
     },
   } = useUserContext();
-  const { setMessage, setTitle, setSitePath } = useStatusContext();
+  const {setMessage, setTitle, setSitePath} = useStatusContext();
   const [manifestName, setManifestName] = useState("");
   const [version, setVersion] = useState("");
   const [createDate, setCreateDate] = useState("");
@@ -38,6 +40,11 @@ const MainForm = () => {
   const [redirect, setRedirect] = useState("");
   const classes = useStyles();
 
+  const handleChange = (_) => {
+    setSelected([]);
+    setUpdateType(updateType === CAR_UPDATE ? FLEET_UPDATE : CAR_UPDATE);
+  }
+
   const handleSearch = (query) => {
     setSelected([]);
     setSearch(query);
@@ -54,7 +61,7 @@ const MainForm = () => {
         newSelected = [...selected];
         newSelected.push(key);
       } else {
-        newSelected = selected.filter((vin) => vin !== key);
+        newSelected = selected.filter((vinOrName) => vinOrName !== key);
       }
       setSelected(newSelected);
     } catch (e) {
@@ -67,9 +74,14 @@ const MainForm = () => {
       event.preventDefault();
       const data = {
         manifest_id: parseInt(manifest_id),
-        vins: selected,
-      };
-      await deployCarUpdates(data, token);
+      }
+      if (updateType === CAR_UPDATE) {
+        data.vins = selected;
+        await deployCarUpdates(data, token);
+      } else {
+        data.fleet_names = selected;
+        await deployFleetUpdates(data, token);
+      }
       setMessage(
         `Deployed ${manifestName} ${version} to ${selected.length} cars`
       );
@@ -82,7 +94,7 @@ const MainForm = () => {
 
   const getData = async () => {
     try {
-      getManifests({ id: parseInt(manifest_id) }, token);
+      getManifests({id: parseInt(manifest_id)}, token);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
@@ -119,7 +131,7 @@ const MainForm = () => {
   }, [manifests]);
 
   if (redirect.length > 0) {
-    return <Redirect to={redirect} />;
+    return <Redirect to={redirect}/>;
   }
 
   return (
@@ -127,13 +139,21 @@ const MainForm = () => {
       <form className={classes.form} noValidate action="{onSubmit}">
         <Typography variant="body2">Created {createDate}.</Typography>
         <Grid container className={classes.root} spacing={2}>
-          <Grid item md={4}>
+          <Grid item md={2}>
             <div
               className={classes.labelInline}
             >{`${selected.length} Selected`}</div>
           </Grid>
+          <Grid item md={2} className={classes.textCenterAlign}>
+            <FormControlLabel control={<Switch
+              checked={updateType === CAR_UPDATE}
+              onChange={handleChange}
+              inputProps={{'aria-label': 'controlled'}}
+            />} label="Car(default) or Fleet"/>
+
+          </Grid>
           <Grid item md={4} className={classes.textCenterAlign}>
-            <SearchField classes={classes} onSearch={handleSearch} />
+            <SearchField classes={classes} onSearch={handleSearch}/>
           </Grid>
           <Grid item md={4} className={classes.textRightAlign}>
             <Button
@@ -148,28 +168,39 @@ const MainForm = () => {
             </Button>
           </Grid>
         </Grid>
-        <CarSelectionTable
-          classes={classes}
-          token={token}
-          multiSelect={true}
-          search={{ search }}
-          selected={selected}
-          onSelect={handleSelect}
-          onSelectAll={handleSelectAll}
-        />
+        {updateType === CAR_UPDATE ?
+          <VehicleProvider>
+            <CarSelectionTable
+              classes={classes}
+              token={token}
+              multiSelect={true}
+              search={{search}}
+              selected={selected}
+              onSelect={handleSelect}
+              onSelectAll={handleSelectAll}
+            /></VehicleProvider> :
+          <FleetProvider>
+            <FleetSelectionTable
+              classes={classes}
+              token={token}
+              multiSelect={true}
+              search={{search}}
+              selected={selected}
+              onSelect={handleSelect}
+              onSelectAll={handleSelectAll}/>
+          </FleetProvider>
+        }
       </form>
     </div>
   );
 };
 
 const ManifestDeployForm = () => (
-  <VehicleProvider>
-    <ManifestsProvider>
-      <CarUpdatesProvider>
-        <MainForm />
-      </CarUpdatesProvider>
-    </ManifestsProvider>
-  </VehicleProvider>
+  <ManifestsProvider>
+    <CarUpdatesProvider>
+      <MainForm/>
+    </CarUpdatesProvider>
+  </ManifestsProvider>
 );
 
 export default ManifestDeployForm;
diff --git a/src/components/Manifest/List/index.jsx b/src/components/Manifest/List/index.jsx
index c339079..907ed71 100644
--- a/src/components/Manifest/List/index.jsx
+++ b/src/components/Manifest/List/index.jsx
@@ -28,7 +28,9 @@ import SearchField from "../../Controls/SearchField";
 import { logger } from "../../../services/monitoring";
 import ECUList from "../../Controls/ECUList";
 import { Roles, hasRole } from "../../../utils/roles";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
+import { TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
+import DeleteConfirmation from "../../DeleteConfirmation";
 
 const tableColumns = [
   {
@@ -57,7 +59,7 @@ const tableColumns = [
   },
 ];
 
-const PAGE_SIZE="MANIFEST_LIST_PAGE_SIZE";
+const PAGE_SIZE = "MANIFEST_LIST_PAGE_SIZE";
 
 const MainForm = () => {
   const classes = useStyles();
@@ -66,6 +68,7 @@ const MainForm = () => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("asc");
   const [search, setSearch] = useState("");
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
   const { getManifests, deleteManifest, manifests, totalManifests } =
     useManifestsContext();
   const { setMessage, setTitle, setSitePath } = useStatusContext();
@@ -103,6 +106,7 @@ const MainForm = () => {
             limit: pageSize,
             offset: pageSize * pageIndex,
             order: `${orderBy} ${order}`,
+            manifest_type: TYPE_MANIFEST_SOFTWARE,
             search,
           },
           token
@@ -176,11 +180,19 @@ const MainForm = () => {
         );
       } else {
         return (
-          <Tooltip key={`delete-${action.id}`} title={action.tip}>
-            <Link to="#" onClick={() => onDelete(action.id)}>
-              {action.icon}
-            </Link>
-          </Tooltip>
+          <div>
+            <Tooltip key={`delete-${action.id}`} title={action.tip}>
+              <Link to="#" onClick={() => onDelete(action.id)}>
+                {action.icon}
+              </Link>
+            </Tooltip>
+            <DeleteConfirmation
+              message={action.id}
+              open={showDeleteModal}
+              close={() => setShowDeleteModal(false)}
+              deleteFunction={() => onDelete(action.id)}
+            />
+          </div>
         );
       }
     });
diff --git a/src/components/Manifest/Status/index.jsx b/src/components/Manifest/Status/index.jsx
index cb6e865..b57686f 100644
--- a/src/components/Manifest/Status/index.jsx
+++ b/src/components/Manifest/Status/index.jsx
@@ -10,7 +10,9 @@ import {
   TableHead,
   TablePagination,
   TableRow,
+  Tooltip,
 } from "@material-ui/core";
+import CancelIcon from "@material-ui/icons/Cancel";
 import clsx from "clsx";
 
 import {
@@ -27,9 +29,9 @@ import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
 import { logger } from "../../../services/monitoring";
 import ManifestDetails from "../Details";
-import {useLocalStorage} from "../../useLocalStorage";
+import { useLocalStorage } from "../../useLocalStorage";
 
-const PAGE_SIZE="MANIFEST_STATUS_PAGE_SIZE";
+const PAGE_SIZE = "MANIFEST_STATUS_PAGE_SIZE";
 
 const MainForm = () => {
   const { manifest_id } = useParams();
@@ -38,6 +40,7 @@ const MainForm = () => {
   const [pageIndex, setPageIndex] = useState(0);
   const { getManifests, manifests } = useManifestsContext();
   const {
+    cancelUpdate,
     getCarUpdates,
     carUpdates,
     totalCarUpdates,
@@ -127,6 +130,15 @@ const MainForm = () => {
     setPageIndex(0);
   };
 
+  const sendCancel = async ({ id, vin }) => {
+    try {
+      await cancelUpdate(id, token);
+      setMessage(`Sent cancel for ${vin}`);
+    } catch (e) {
+      setMessage(e.message);
+    }
+  };
+
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Table>
@@ -137,6 +149,7 @@ const MainForm = () => {
             <TableCell align="center">Status</TableCell>
             <TableCell align="center">Created</TableCell>
             <TableCell align="center">Updated</TableCell>
+            <TableCell align="center"></TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -158,6 +171,13 @@ const MainForm = () => {
               <TableCell align="center">
                 {LocalDateTimeString(row.updated)}
               </TableCell>
+              <TableCell>
+                <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
+                  <Link to="#" onClick={() => sendCancel(row)}>
+                    <CancelIcon />
+                  </Link>
+                </Tooltip>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
@@ -165,7 +185,7 @@ const MainForm = () => {
           <TableRow>
             <TablePagination
               rowsPerPageOptions={[5, 10, 25, 100]}
-              colSpan={5}
+              colSpan={6}
               count={totalCarUpdates}
               rowsPerPage={pageSize}
               page={pageIndex}
diff --git a/src/components/Routes/SiteRoutes.jsx b/src/components/Routes/SiteRoutes.jsx
index 87d9e61..626b014 100644
--- a/src/components/Routes/SiteRoutes.jsx
+++ b/src/components/Routes/SiteRoutes.jsx
@@ -28,7 +28,6 @@ const Home = React.lazy(() => import("../Home"));
 const Manifests = React.lazy(() => import("../Manifest/List"));
 const ManifestDeploy = React.lazy(() => import("../Manifest/Deploy"));
 const ManifestStatus = React.lazy(() => import("../Manifest/Status"));
-const ManifestCreate = React.lazy(() => import("../Manifest/Create"));
 const PageNotFound = React.lazy(() => import("../404"));
 const SSOForm = React.lazy(() => import("../SSOForm"));
 const VehicleAddForm = React.lazy(() => import("../Cars/Add"));
@@ -137,14 +136,6 @@ const SiteRoutes = () => {
           groups={groups}
           roles={[Roles.READ, Roles.CREATE]}
         />
-        <AuthRoute
-          path="/package-create"
-          render={() => <ManifestCreate />}
-          type={TYPES.PROTECTED}
-          token={token}
-          groups={groups}
-          roles={[Roles.CREATE]}
-        />
         <AuthRoute
           path="/package-deploy/:manifest_id"
           render={() => <ManifestDeploy />}
diff --git a/src/services/__mocks__/updatesAPI.js b/src/services/__mocks__/updatesAPI.js
index 58c3ca6..3491a12 100644
--- a/src/services/__mocks__/updatesAPI.js
+++ b/src/services/__mocks__/updatesAPI.js
@@ -5,6 +5,12 @@ const updatesAPI = {
     return data;
   },
 
+  createFleetUpdates: async (data, token) => {
+    if (!data.id) data.id = 0;
+    data.id++;
+    return data;
+  },
+
   getCarUpdates: async (filter, token) => {
     return { data: [] };
   },
@@ -16,6 +22,10 @@ const updatesAPI = {
   getCarUpdateProgress: async (carupdateids, token) => {
     return { statuses: [] };
   },
+
+  cancelCarUpdate: async (id, token) => {
+    return { message: "OK" };
+  },
 };
 
 export default updatesAPI;
diff --git a/src/services/__mocks__/vehiclesAPI.js b/src/services/__mocks__/vehiclesAPI.js
index ea3d879..b66976c 100644
--- a/src/services/__mocks__/vehiclesAPI.js
+++ b/src/services/__mocks__/vehiclesAPI.js
@@ -94,11 +94,10 @@ const vehiclesAPI = {
       data: [2021, 2022],
     };
   },
-  sendCommand: async (vin, command, parameters) => {
+  sendCommand: async (vin, command) => {
     return {
       vin,
       command,
-      parameters,
     };
   },
   updateVehicle: async (vin, vehicle) => {
diff --git a/src/services/commands.js b/src/services/commands.js
index ac1c305..53806da 100644
--- a/src/services/commands.js
+++ b/src/services/commands.js
@@ -1,81 +1,26 @@
-const Locks = [
+const Commands = [
+  {value: "doors_lock", label: "Lock doors"},
+  {value: "doors_unlock", label: "Unlock doors"},
+  {value: "vent_windows", label: "Vent windows"},
+  {value: "close_windows", label: "Close windows"},
+  {value: "california_mode", label: "California mode"},
+  {value: "trunk_open", label: "Open trunk"},
+  {value: "trunk_close", label: "Close trunk "},
+  {value: "flash_headlights", label: "Flash headlights"},
+  {value: "alert", label: "Alert"},
+  {value: "temp_cabin", label: "Set cabin temperature"},
   {
-    value: "right_front",
-    label: "Front right door",
-  },{
-    value: "left_front",
-    label: "Front left door",
-  },{
-    value: "right_rear",
-    label: "Rear right door",
-  },{
-    value: "left_rear",
-    label: "Rear left door",
-  },{
-    value: "trunk",
-    label: "Trunk",
+    value: "temp_cabin",
+    label: "Set cabin temperature for period",
+    params: {
+      data: ""
+    },
   },
-];
-
-const Windows = [
-  {
-    value: "right_front",
-    label: "Front right window",
-  },{
-    value: "left_front",
-    label: "Front left window",
-  },{
-    value: "right_rear",
-    label: "Rear right window",
-  },{
-    value: "left_rear",
-    label: "Rear left window",
-  },
-];
-
-const Commands = [{
-    value: "lock",
-    label: "Lock door",
-    parameters: Locks,
-  },
-  {
-    value: "unlock",
-    label: "Unlock door",
-    parameters: Locks,
-  },{
-    value: "open",
-    label: "Open window",
-    parameters: Windows,
-  },
-  {
-    value: "close",
-    label: "Close window",
-    parameters: Windows,
-  },
-  {
-    value: "ecu",
-    label: "ECU Versions",
-  },
-  {
-    value: "log",
-    label: "Log level",
-    parameters: [
-      {
-        value: "info",
-        label: "Info",
-      },
-      {
-        value: "debug",
-        label: "Debug",
-      },
-      {
-        value: "trace",
-        label: "Trace",
-      },
-    ],
-  },{
-    value: "headlights",
-    label: "Flash headlights",
-  }];
+  {value: "defrost", label: "Defrost"},
+  {value: "driver_seat_preheat", label: "Driver seat preheat"},
+  {value: "passenger_seat_preheat", label: "Preheat passenger seat"},
+  {value: "steering_wheel_preheat", label: "Preheat Steering wheel"},
+  {value: "precondition", label: "Precondition"},
+  {value: "charging", label: "Charging"}]
 
 export default Commands;
diff --git a/src/services/updatesAPI.js b/src/services/updatesAPI.js
index e5c56f7..5e8dda9 100644
--- a/src/services/updatesAPI.js
+++ b/src/services/updatesAPI.js
@@ -7,9 +7,9 @@ import {
 
 const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
 
-const updatesAPI = {
-  createCarUpdates: async (data, token) =>
-    fetch(`${API_ENDPOINT}/carupdate`, {
+const createDeployUpdatesClosure = (suffix) => {
+  return async (data, token) =>
+    fetch(`${API_ENDPOINT}/${suffix}`, {
       method: "POST",
       headers: Object.assign(
         { "Content-Type": "application/json" },
@@ -18,7 +18,13 @@ const updatesAPI = {
       body: JSON.stringify(data),
     })
       .then(fetchRespHandler)
-      .catch(errorHandler),
+      .catch(errorHandler);
+};
+
+const updatesAPI = {
+  createFleetUpdates: createDeployUpdatesClosure("fleetupdate"),
+
+  createCarUpdates: createDeployUpdatesClosure("carupdate"),
 
   getCarUpdateLog: async (query, token) => {
     const u = addQueryParams(`${API_ENDPOINT}/carupdateslog`, query);
@@ -71,6 +77,18 @@ const updatesAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler);
   },
+
+  cancelCarUpdate: async (id, token) => {
+    return fetch(`${API_ENDPOINT}/carupdate/${id}/cancel`, {
+      method: "POST",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler);
+  },
 };
 
 export default updatesAPI;
diff --git a/src/services/vehiclesAPI.js b/src/services/vehiclesAPI.js
index d57c1d0..d99c1d2 100644
--- a/src/services/vehiclesAPI.js
+++ b/src/services/vehiclesAPI.js
@@ -125,7 +125,7 @@ const vehiclesAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler),
 
-  sendCommand: async (vins, command, parameters, token) =>
+  sendCommand: async (vins, command, token) =>
     fetch(`${API_ENDPOINT}/vehiclecommand`, {
       method: "POST",
       headers: Object.assign(
@@ -134,8 +134,7 @@ const vehiclesAPI = {
       ),
       body: JSON.stringify({
         vins,
-        command,
-        parameters,
+        ...command,
       }),
     })
       .then(fetchRespHandler)
diff --git a/src/utils/manifest_types.js b/src/utils/manifest_types.js
new file mode 100644
index 0000000..a04dbcc
--- /dev/null
+++ b/src/utils/manifest_types.js
@@ -0,0 +1,2 @@
+export const TYPE_MANIFEST_SOFTWARE = 1;
+export const TYPE_MANIFEST_CONFIG = 2;
diff --git a/src/utils/snapshot.js b/src/utils/snapshot.js
index 819cc59..f3e3cde 100644
--- a/src/utils/snapshot.js
+++ b/src/utils/snapshot.js
@@ -1,4 +1,4 @@
-const rxStyles = /(mui|makeStyles|Private)([^\s]*)-\d+/g;
+const rxStyles = /(mui|MuiBox-root|makeStyles|Private)([^\s]*)-\d+/g;
 
 const snapshotSerializers = [
   {