diff --git a/pkg/ui/v1beta1/frontend/package-lock.json b/pkg/ui/v1beta1/frontend/package-lock.json
index 88020f445cc..e462547aad9 100644
--- a/pkg/ui/v1beta1/frontend/package-lock.json
+++ b/pkg/ui/v1beta1/frontend/package-lock.json
@@ -1169,11 +1169,6 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-9.0.1.tgz",
       "integrity": "sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA=="
     },
-    "@emotion/hash": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.4.tgz",
-      "integrity": "sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A=="
-    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -1464,103 +1459,86 @@
       "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
     },
     "@material-ui/core": {
-      "version": "3.9.4",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-3.9.4.tgz",
-      "integrity": "sha512-r8QFLSexcYZbnqy/Hn4v8xzmAJV41yaodUVjmbGLi1iGDLG3+W941hEtEiBmxTRRqv2BdK3r4ijILcqKmDv/Sw==",
-      "requires": {
-        "@babel/runtime": "^7.2.0",
-        "@material-ui/system": "^3.0.0-alpha.0",
-        "@material-ui/utils": "^3.0.0-alpha.2",
-        "@types/jss": "^9.5.6",
-        "@types/react-transition-group": "^2.0.8",
-        "brcast": "^3.0.1",
-        "classnames": "^2.2.5",
-        "csstype": "^2.5.2",
-        "debounce": "^1.1.0",
-        "deepmerge": "^3.0.0",
-        "dom-helpers": "^3.2.1",
-        "hoist-non-react-statics": "^3.2.1",
-        "is-plain-object": "^2.0.4",
-        "jss": "^9.8.7",
-        "jss-camel-case": "^6.0.0",
-        "jss-default-unit": "^8.0.2",
-        "jss-global": "^3.0.0",
-        "jss-nested": "^6.0.1",
-        "jss-props-sort": "^6.0.0",
-        "jss-vendor-prefixer": "^7.0.0",
-        "normalize-scroll-left": "^0.1.2",
-        "popper.js": "^1.14.1",
-        "prop-types": "^15.6.0",
-        "react-event-listener": "^0.6.2",
-        "react-transition-group": "^2.2.1",
-        "recompose": "0.28.0 - 0.30.0",
-        "warning": "^4.0.1"
-      }
-    },
-    "@material-ui/icons": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-3.0.2.tgz",
-      "integrity": "sha512-QY/3gJnObZQ3O/e6WjH+0ah2M3MOgLOzCy8HTUoUx9B6dDrS18vP7Ycw3qrDEKlB6q1KNxy6CZHm5FCauWGy2g==",
-      "requires": {
-        "@babel/runtime": "^7.2.0",
-        "recompose": "0.28.0 - 0.30.0"
-      }
-    },
-    "@material-ui/styles": {
-      "version": "3.0.0-alpha.10",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-3.0.0-alpha.10.tgz",
-      "integrity": "sha512-qJ5eiupBPRCNlMCDZ2G5h8auBtBtm8uT/oCUAJ/FqhO5oC7POLmmvDN1Cq1cgAmqQnaL6uN5mAM1Gc90GpKr9A==",
-      "requires": {
-        "@babel/runtime": "^7.2.0",
-        "@emotion/hash": "^0.7.1",
-        "@material-ui/utils": "^3.0.0-alpha.2",
-        "classnames": "^2.2.5",
-        "deepmerge": "^3.0.0",
-        "hoist-non-react-statics": "^3.2.1",
-        "jss": "^10.0.0-alpha.7",
-        "jss-plugin-camel-case": "^10.0.0-alpha.7",
-        "jss-plugin-default-unit": "^10.0.0-alpha.7",
-        "jss-plugin-global": "^10.0.0-alpha.7",
-        "jss-plugin-nested": "^10.0.0-alpha.7",
-        "jss-plugin-props-sort": "^10.0.0-alpha.7",
-        "jss-plugin-rule-value-function": "^10.0.0-alpha.7",
-        "jss-plugin-vendor-prefixer": "^10.0.0-alpha.7",
-        "prop-types": "^15.6.0",
-        "warning": "^4.0.1"
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.0.tgz",
+      "integrity": "sha512-bYo9uIub8wGhZySHqLQ833zi4ZML+XCBE1XwJ8EuUVSpTWWG57Pm+YugQToJNFsEyiKFhPh8DPD0bgupz8n01g==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.10.0",
+        "@material-ui/system": "^4.9.14",
+        "@material-ui/types": "^5.1.0",
+        "@material-ui/utils": "^4.10.2",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.4",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "1.16.1-lts",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0",
+        "react-transition-group": "^4.4.0"
       },
       "dependencies": {
-        "jss": {
-          "version": "10.3.0",
-          "resolved": "https://registry.npmjs.org/jss/-/jss-10.3.0.tgz",
-          "integrity": "sha512-B5sTRW9B6uHaUVzSo9YiMEOEp3UX8lWevU0Fsv+xtRnsShmgCfIYX44bTH8bPJe6LQKqEXku3ulKuHLbxBS97Q==",
+        "@emotion/hash": {
+          "version": "0.8.0",
+          "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+          "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+        },
+        "@material-ui/styles": {
+          "version": "4.10.0",
+          "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
+          "integrity": "sha512-XPwiVTpd3rlnbfrgtEJ1eJJdFCXZkHxy8TrdieaTvwxNYj42VnnCyFzxYeNW9Lhj4V1oD8YtQ6S5Gie7bZDf7Q==",
           "requires": {
-            "@babel/runtime": "^7.3.1",
-            "csstype": "^2.6.5",
-            "is-in-browser": "^1.1.3",
-            "tiny-warning": "^1.0.2"
+            "@babel/runtime": "^7.4.4",
+            "@emotion/hash": "^0.8.0",
+            "@material-ui/types": "^5.1.0",
+            "@material-ui/utils": "^4.9.6",
+            "clsx": "^1.0.4",
+            "csstype": "^2.5.2",
+            "hoist-non-react-statics": "^3.3.2",
+            "jss": "^10.0.3",
+            "jss-plugin-camel-case": "^10.0.3",
+            "jss-plugin-default-unit": "^10.0.3",
+            "jss-plugin-global": "^10.0.3",
+            "jss-plugin-nested": "^10.0.3",
+            "jss-plugin-props-sort": "^10.0.3",
+            "jss-plugin-rule-value-function": "^10.0.3",
+            "jss-plugin-vendor-prefixer": "^10.0.3",
+            "prop-types": "^15.7.2"
           }
         }
       }
     },
+    "@material-ui/icons": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz",
+      "integrity": "sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
     "@material-ui/system": {
-      "version": "3.0.0-alpha.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.2.tgz",
-      "integrity": "sha512-odmxQ0peKpP7RQBQ8koly06YhsPzcoVib1vByVPBH4QhwqBXuYoqlCjt02846fYspAqkrWzjxnWUD311EBbxOA==",
+      "version": "4.9.14",
+      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.14.tgz",
+      "integrity": "sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==",
       "requires": {
-        "@babel/runtime": "^7.2.0",
-        "deepmerge": "^3.0.0",
-        "prop-types": "^15.6.0",
-        "warning": "^4.0.1"
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.9.6",
+        "csstype": "^2.5.2",
+        "prop-types": "^15.7.2"
       }
     },
+    "@material-ui/types": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
+    },
     "@material-ui/utils": {
-      "version": "3.0.0-alpha.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-3.0.0-alpha.3.tgz",
-      "integrity": "sha512-rwMdMZptX0DivkqBuC+Jdq7BYTXwqKai5G5ejPpuEDKpWzi1Oxp+LygGw329FrKpuKeiqpcymlqJTjmy+quWng==",
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz",
+      "integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==",
       "requires": {
-        "@babel/runtime": "^7.2.0",
-        "prop-types": "^15.6.0",
-        "react-is": "^16.6.3"
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
       }
     },
     "@mrmlnc/readdir-enhanced": {
@@ -1868,15 +1846,6 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
       "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ=="
     },
-    "@types/jss": {
-      "version": "9.5.8",
-      "resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.8.tgz",
-      "integrity": "sha512-bBbHvjhm42UKki+wZpR89j73ykSXg99/bhuKuYYePtpma3ZAnmeGnl0WxXiZhPGsIfzKwCUkpPC0jlrVMBfRxA==",
-      "requires": {
-        "csstype": "^2.0.0",
-        "indefinite-observable": "^1.0.1"
-      }
-    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -1893,18 +1862,18 @@
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
     },
     "@types/react": {
-      "version": "16.9.38",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.38.tgz",
-      "integrity": "sha512-pHAeZbjjNRa/hxyNuLrvbxhhnKyKNiLC6I5fRF2Zr/t/S6zS41MiyzH4+c+1I9vVfvuRt1VS2Lodjr4ZWnxrdA==",
+      "version": "16.9.41",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.41.tgz",
+      "integrity": "sha512-6cFei7F7L4wwuM+IND/Q2cV1koQUvJ8iSV+Gwn0c3kvABZ691g7sp3hfEQHOUBJtccl1gPi+EyNjMIl9nGA0ug==",
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^2.2.0"
       }
     },
     "@types/react-transition-group": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.9.2.tgz",
-      "integrity": "sha512-5Fv2DQNO+GpdPZcxp2x/OQG/H19A01WlmpjVD9cKvVFmoVLOZ9LvBgSWG6pSXIU4og5fgbvGPaCV5+VGkWAEHA==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
+      "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
       "requires": {
         "@types/react": "*"
       }
@@ -3423,11 +3392,6 @@
         }
       }
     },
-    "brcast": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.2.tgz",
-      "integrity": "sha512-f5XwwFCCuvgqP2nMH/hJ74FqnGmb4X3D+NC//HphxJzzhsZvSZa+Hk/syB7j3ZHpPDLMoYU8oBgviRWfNvEfKA=="
-    },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -3781,11 +3745,6 @@
         "supports-color": "^5.3.0"
       }
     },
-    "change-emitter": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
-      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
-    },
     "chardet": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@@ -3916,11 +3875,6 @@
         }
       }
     },
-    "classnames": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
-    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -4000,6 +3954,11 @@
         "shallow-clone": "^0.1.2"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -4399,11 +4358,6 @@
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
-    "core-js": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-      "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
-    },
     "core-js-compat": {
       "version": "3.6.5",
       "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.6.5.tgz",
@@ -4675,14 +4629,6 @@
         "source-map": "^0.6.1"
       }
     },
-    "css-vendor": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
-      "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
-      "requires": {
-        "is-in-browser": "^1.0.2"
-      }
-    },
     "css-what": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz",
@@ -4812,9 +4758,9 @@
       }
     },
     "csstype": {
-      "version": "2.6.10",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz",
-      "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w=="
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.11.tgz",
+      "integrity": "sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw=="
     },
     "cubic-hermite": {
       "version": "1.0.0",
@@ -5015,11 +4961,6 @@
         }
       }
     },
-    "debounce": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz",
-      "integrity": "sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg=="
-    },
     "debug": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
@@ -5061,11 +5002,6 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
-    "deepmerge": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
-      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA=="
-    },
     "default-gateway": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@@ -5299,11 +5235,12 @@
       }
     },
     "dom-helpers": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
-      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
+      "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
       "requires": {
-        "@babel/runtime": "^7.1.2"
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^2.6.7"
       }
     },
     "dom-serializer": {
@@ -5538,14 +5475,6 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
-    "encoding": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
-      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
-      "requires": {
-        "iconv-lite": "~0.4.13"
-      }
-    },
     "end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -6530,20 +6459,6 @@
         "bser": "2.1.1"
       }
     },
-    "fbjs": {
-      "version": "0.8.17",
-      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
-      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
-      "requires": {
-        "core-js": "^1.0.0",
-        "isomorphic-fetch": "^2.1.1",
-        "loose-envify": "^1.0.0",
-        "object-assign": "^4.1.0",
-        "promise": "^7.1.1",
-        "setimmediate": "^1.0.5",
-        "ua-parser-js": "^0.7.18"
-      }
-    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -8257,14 +8172,6 @@
         "simplicial-complex": "^1.0.0"
       }
     },
-    "indefinite-observable": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-1.0.2.tgz",
-      "integrity": "sha512-Mps0898zEduHyPhb7UCgNmfzlqNZknVmaFz5qzr0mm04YQ5FGLhAyK/dJ+NaRxGyR6juQXIxh5Ev0xx+qq0nYA==",
-      "requires": {
-        "symbol-observable": "1.2.0"
-      }
-    },
     "indexes-of": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
@@ -8731,15 +8638,6 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
-    "isomorphic-fetch": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
-      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
-      "requires": {
-        "node-fetch": "^1.0.1",
-        "whatwg-fetch": ">=0.10.0"
-      }
-    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -9471,59 +9369,14 @@
       }
     },
     "jss": {
-      "version": "9.8.7",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.7.tgz",
-      "integrity": "sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.3.0.tgz",
+      "integrity": "sha512-B5sTRW9B6uHaUVzSo9YiMEOEp3UX8lWevU0Fsv+xtRnsShmgCfIYX44bTH8bPJe6LQKqEXku3ulKuHLbxBS97Q==",
       "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^2.6.5",
         "is-in-browser": "^1.1.3",
-        "symbol-observable": "^1.1.0",
-        "warning": "^3.0.0"
-      },
-      "dependencies": {
-        "warning": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
-          "requires": {
-            "loose-envify": "^1.0.0"
-          }
-        }
-      }
-    },
-    "jss-camel-case": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.1.0.tgz",
-      "integrity": "sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==",
-      "requires": {
-        "hyphenate-style-name": "^1.0.2"
-      }
-    },
-    "jss-default-unit": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz",
-      "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg=="
-    },
-    "jss-global": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
-      "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q=="
-    },
-    "jss-nested": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz",
-      "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==",
-      "requires": {
-        "warning": "^3.0.0"
-      },
-      "dependencies": {
-        "warning": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-          "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
-          "requires": {
-            "loose-envify": "^1.0.0"
-          }
-        }
+        "tiny-warning": "^1.0.2"
       }
     },
     "jss-plugin-camel-case": {
@@ -9693,19 +9546,6 @@
         }
       }
     },
-    "jss-props-sort": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
-      "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g=="
-    },
-    "jss-vendor-prefixer": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
-      "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==",
-      "requires": {
-        "css-vendor": "^0.3.8"
-      }
-    },
     "jsx-ast-utils": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz",
@@ -10686,15 +10526,6 @@
         "lower-case": "^1.1.1"
       }
     },
-    "node-fetch": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
-      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
-      "requires": {
-        "encoding": "^0.1.11",
-        "is-stream": "^1.0.1"
-      }
-    },
     "node-forge": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
@@ -10871,11 +10702,6 @@
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
     },
-    "normalize-scroll-left": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-scroll-left/-/normalize-scroll-left-0.1.2.tgz",
-      "integrity": "sha512-F9YMRls0zCF6BFIE2YnXDRpHPpfd91nOIaNdDgrx5YMoPLo8Wqj+6jNXHQsYBavJeXP4ww8HCt0xQAKc5qk2Fg=="
-    },
     "normalize-svg-path": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/normalize-svg-path/-/normalize-svg-path-0.1.0.tgz",
@@ -11721,9 +11547,9 @@
       }
     },
     "popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+      "version": "1.16.1-lts",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
     },
     "portfinder": {
       "version": "1.0.26",
@@ -12618,14 +12444,6 @@
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
       "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
     },
-    "promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "requires": {
-        "asap": "~2.0.3"
-      }
-    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -13119,26 +12937,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz",
       "integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA=="
     },
-    "react-event-listener": {
-      "version": "0.6.6",
-      "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz",
-      "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==",
-      "requires": {
-        "@babel/runtime": "^7.2.0",
-        "prop-types": "^15.6.0",
-        "warning": "^4.0.1"
-      }
-    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
     "react-plotly.js": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/react-plotly.js/-/react-plotly.js-2.4.0.tgz",
@@ -13266,14 +13069,14 @@
       }
     },
     "react-transition-group": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
-      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
       "requires": {
-        "dom-helpers": "^3.4.0",
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
         "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2",
-        "react-lifecycles-compat": "^3.0.4"
+        "prop-types": "^15.6.2"
       }
     },
     "read-pkg": {
@@ -13398,26 +13201,6 @@
         "util.promisify": "^1.0.0"
       }
     },
-    "recompose": {
-      "version": "0.30.0",
-      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz",
-      "integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==",
-      "requires": {
-        "@babel/runtime": "^7.0.0",
-        "change-emitter": "^0.1.2",
-        "fbjs": "^0.8.1",
-        "hoist-non-react-statics": "^2.3.1",
-        "react-lifecycles-compat": "^3.0.2",
-        "symbol-observable": "^1.0.4"
-      },
-      "dependencies": {
-        "hoist-non-react-statics": {
-          "version": "2.5.5",
-          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
-          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
-        }
-      }
-    },
     "recursive-readdir": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
@@ -15784,11 +15567,6 @@
         "typescript-compare": "^0.0.2"
       }
     },
-    "ua-parser-js": {
-      "version": "0.7.21",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
-      "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
-    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
diff --git a/pkg/ui/v1beta1/frontend/package.json b/pkg/ui/v1beta1/frontend/package.json
index a4e06e330a0..3874ce0b984 100644
--- a/pkg/ui/v1beta1/frontend/package.json
+++ b/pkg/ui/v1beta1/frontend/package.json
@@ -4,9 +4,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
-    "@material-ui/icons": "^3.0.2",
-    "@material-ui/styles": "^3.0.0-alpha.10",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
     "ace-builds": "^1.4.8",
     "axios": "^0.18.0",
     "graphviz-react": "^1.0.6",
diff --git a/pkg/ui/v1beta1/frontend/src/components/App.jsx b/pkg/ui/v1beta1/frontend/src/components/App.jsx
index 9941aaf7fbf..2dc0965f35f 100644
--- a/pkg/ui/v1beta1/frontend/src/components/App.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/App.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
 
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
 import Main from './Menu/Main';
 import HPJobInfo from './HP/Monitor/HPJobInfo';
diff --git a/pkg/ui/v1beta1/frontend/src/components/Common/Create/Params/MetricsCollector.jsx b/pkg/ui/v1beta1/frontend/src/components/Common/Create/Params/MetricsCollector.jsx
index a3f1baf7045..31c06de1d53 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Common/Create/Params/MetricsCollector.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Common/Create/Params/MetricsCollector.jsx
@@ -5,7 +5,7 @@ import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/theme-sqlserver';
 import 'ace-builds/src-noconflict/mode-yaml';
 
-import withStyles from '@material-ui/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import Tooltip from '@material-ui/core/Tooltip';
@@ -13,7 +13,6 @@ import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
 import FormControl from '@material-ui/core/FormControl';
 import InputLabel from '@material-ui/core/InputLabel';
 import Select from '@material-ui/core/Select';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
@@ -220,7 +219,7 @@ class MetricsCollectorSpec extends React.Component {
       <div>
         <Grid container alignItems={'center'} className={classes.grid}>
           <Grid item xs={3}>
-            <Typography variant={'subheading'}>
+            <Typography variant={'subtitle1'}>
               <Tooltip title={'Kind for the Metrics Collector Spec'}>
                 <HelpOutlineIcon className={classes.help} color={'primary'} />
               </Tooltip>
@@ -237,7 +236,7 @@ class MetricsCollectorSpec extends React.Component {
                     : this.props.mcSpecNAS.collector.kind
                 }
                 onChange={this.onMCKindChange}
-                input={<OutlinedInput labelWidth={35} />}
+                label="Kind"
               >
                 {this.props.mcKindsList.map((kind, i) => {
                   return (
@@ -260,7 +259,7 @@ class MetricsCollectorSpec extends React.Component {
               this.props.mcSpecNAS.collector.kind === constants.MC_KIND_CUSTOM))) && (
           <Grid container alignItems={'center'} className={classes.grid}>
             <Grid item xs={3}>
-              <Typography variant={'subheading'}>
+              <Typography variant={'subtitle1'}>
                 <Tooltip
                   title={
                     'Kind of the file path and path to the metrics file, path must be absolute'
@@ -281,7 +280,7 @@ class MetricsCollectorSpec extends React.Component {
                       : this.props.mcSpecNAS.source.fileSystemPath.kind
                   }
                   onChange={this.onMCFileSystemKindChange}
-                  input={<OutlinedInput labelWidth={120} />}
+                  label="File System Kind"
                 >
                   {((this.props.jobType === constants.EXPERIMENT_TYPE_HP &&
                     this.props.mcSpecHP.collector.kind === constants.MC_KIND_FILE) ||
@@ -342,7 +341,7 @@ class MetricsCollectorSpec extends React.Component {
           <div>
             <Grid container alignItems={'center'} className={classes.grid}>
               <Grid item xs={3}>
-                <Typography variant={'subheading'}>
+                <Typography variant={'subtitle1'}>
                   <Tooltip
                     title={
                       'Port and Path to access on the HTTP server. Port must be a positive integer value. Path must start with "/"'
@@ -381,7 +380,7 @@ class MetricsCollectorSpec extends React.Component {
             </Grid>
             <Grid container alignItems={'center'} className={classes.grid}>
               <Grid item xs={3}>
-                <Typography variant={'subheading'}>
+                <Typography variant={'subtitle1'}>
                   <Tooltip
                     title={
                       'Scheme to use for connecting to the host. Host name to make connection, defaults to the pod IP'
@@ -402,7 +401,7 @@ class MetricsCollectorSpec extends React.Component {
                         : this.props.mcSpecNAS.source.httpGet.scheme
                     }
                     onChange={this.onMCHttpGetSchemeChange}
-                    input={<OutlinedInput labelWidth={60} />}
+                    label="Scheme"
                   >
                     {this.props.mcURISchemesList.map((scheme, i) => {
                       return (
@@ -429,7 +428,7 @@ class MetricsCollectorSpec extends React.Component {
             </Grid>
             <Grid container alignItems={'center'} className={classes.grid}>
               <Grid item xs={3}>
-                <Typography variant={'subheading'}>
+                <Typography variant={'subtitle1'}>
                   <Tooltip title={'Custom headers to set in the request'}>
                     <HelpOutlineIcon className={classes.help} color={'primary'} />
                   </Tooltip>
@@ -522,7 +521,7 @@ class MetricsCollectorSpec extends React.Component {
             this.props.mcSpecNAS.collector.kind === constants.MC_KIND_CUSTOM)) && (
           <Grid container alignItems={'center'} className={classes.grid}>
             <Grid item xs={3}>
-              <Typography variant={'subheading'}>
+              <Typography variant={'subtitle1'}>
                 <Tooltip title={'Yaml structure for the custom metrics collector container'}>
                   <HelpOutlineIcon className={classes.help} color={'primary'} />
                 </Tooltip>
diff --git a/pkg/ui/v1beta1/frontend/src/components/Common/Create/Params/Trial/TrialConfigMap.jsx b/pkg/ui/v1beta1/frontend/src/components/Common/Create/Params/Trial/TrialConfigMap.jsx
index b1ed42acdc7..bdac26a88e1 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Common/Create/Params/Trial/TrialConfigMap.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Common/Create/Params/Trial/TrialConfigMap.jsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-import withStyles from '@material-ui/styles/withStyles';
+import AceEditor from 'react-ace';
+
+import { withStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Tooltip from '@material-ui/core/Tooltip';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
 import Typography from '@material-ui/core/Typography';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
 import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
@@ -15,11 +16,9 @@ import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import AceEditor from 'react-ace';
 
 import { filterTemplatesExperiment } from '../../../../../actions/generalActions';
 import { fetchTrialTemplates } from '../../../../../actions/templateActions';
-
 import { GENERAL_MODULE } from '../../../../../constants/constants';
 
 const styles = theme => ({
@@ -95,7 +94,7 @@ class TrialConfigMap extends React.Component {
         <div className={classes.parameter}>
           <Grid container alignItems={'center'}>
             <Grid item xs={3}>
-              <Typography variant={'subheading'}>
+              <Typography variant={'subtitle1'}>
                 <Tooltip title={'Trial Template ConfigMap Namespace and Name'}>
                   <HelpOutlineIcon className={classes.help} color={'primary'} />
                 </Tooltip>
@@ -113,7 +112,7 @@ class TrialConfigMap extends React.Component {
                           .ConfigMapNamespace
                       }
                       onChange={this.onTemplateConfigMapNamespaceChange}
-                      input={<OutlinedInput labelWidth={90} />}
+                      label="Namespace"
                     >
                       {this.props.trialTemplatesData.map((trialTemplate, i) => {
                         return (
@@ -134,7 +133,7 @@ class TrialConfigMap extends React.Component {
                           .ConfigMaps[this.props.configMapNameIndex].ConfigMapName
                       }
                       onChange={this.onTemplateConfigMapNameChange}
-                      input={<OutlinedInput labelWidth={50} />}
+                      label="Name"
                     >
                       {this.props.trialTemplatesData[
                         this.props.configMapNamespaceIndex
@@ -155,7 +154,7 @@ class TrialConfigMap extends React.Component {
         <div className={classes.parameter}>
           <Grid container alignItems={'center'}>
             <Grid item xs={3}>
-              <Typography variant={'subheading'}>
+              <Typography variant={'subtitle1'}>
                 <Tooltip title={'Trial Template Path in ConfigMap'}>
                   <HelpOutlineIcon className={classes.help} color={'primary'} />
                 </Tooltip>
@@ -175,7 +174,7 @@ class TrialConfigMap extends React.Component {
                         ].Path
                       }
                       onChange={this.onTemplateConfigMapPathChange}
-                      input={<OutlinedInput labelWidth={110} />}
+                      label="Template Path"
                     >
                       {this.props.trialTemplatesData[this.props.configMapNamespaceIndex].ConfigMaps[
                         this.props.configMapNameIndex
diff --git a/pkg/ui/v1beta1/frontend/src/components/Common/Create/Params/Trial/TrialParameters.jsx b/pkg/ui/v1beta1/frontend/src/components/Common/Create/Params/Trial/TrialParameters.jsx
index 1aa050e550e..251f3c4fb7c 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Common/Create/Params/Trial/TrialParameters.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Common/Create/Params/Trial/TrialParameters.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import makeStyles from '@material-ui/styles/makeStyles';
 
+import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
@@ -58,7 +58,7 @@ const TrialParameters = props => {
       {props.trialParameters.length > 0 ? (
         <Grid container alignItems={'center'}>
           <Grid item xs={3}>
-            <Typography variant={'subheading'}>
+            <Typography variant={'subtitle1'}>
               <Tooltip
                 title={
                   'Parameters for the Trial Template. Name - parameter that must be replaced in Template, Reference - parameter from Suggestion assignments'
diff --git a/pkg/ui/v1beta1/frontend/src/components/Common/Create/TabPanel.jsx b/pkg/ui/v1beta1/frontend/src/components/Common/Create/TabPanel.jsx
index 18b4b974f76..02d17db7e6f 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Common/Create/TabPanel.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Common/Create/TabPanel.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { withStyles } from '@material-ui/core/styles';
-import makeStyles from '@material-ui/styles/makeStyles';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 
diff --git a/pkg/ui/v1beta1/frontend/src/components/Common/ExperimentInfoDialog.jsx b/pkg/ui/v1beta1/frontend/src/components/Common/ExperimentInfoDialog.jsx
index a07ad8748e7..c6cf56314b6 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Common/ExperimentInfoDialog.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Common/ExperimentInfoDialog.jsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-import { withStyles } from '@material-ui/styles';
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
-
 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/theme-xcode';
 import 'ace-builds/src-noconflict/mode-json';
 
+import { withStyles } from '@material-ui/core/styles';
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import DialogContent from '@material-ui/core/DialogContent';
+
 import { closeDialogExperiment } from '../../actions/generalActions';
 
 import { GENERAL_MODULE } from '../../constants/constants';
diff --git a/pkg/ui/v1beta1/frontend/src/components/Common/Monitor/DeleteDialog.jsx b/pkg/ui/v1beta1/frontend/src/components/Common/Monitor/DeleteDialog.jsx
index 432a2f92647..7308c519a8b 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Common/Monitor/DeleteDialog.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Common/Monitor/DeleteDialog.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { connect } from 'react-redux';
+
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
@@ -6,7 +8,6 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 
-import { connect } from 'react-redux';
 import { deleteExperiment, closeDeleteExperimentDialog } from '../../../actions/generalActions';
 
 import { GENERAL_MODULE } from '../../../constants/constants';
diff --git a/pkg/ui/v1beta1/frontend/src/components/Common/Monitor/FilterPanel.jsx b/pkg/ui/v1beta1/frontend/src/components/Common/Monitor/FilterPanel.jsx
index 5844840066c..dd93c1ff518 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Common/Monitor/FilterPanel.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Common/Monitor/FilterPanel.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
 
+import { withStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -31,6 +31,9 @@ const styles = theme => ({
     height: 56,
     textAlign: 'left',
   },
+  selectLabel: {
+    marginLeft: '8px',
+  },
 });
 
 class FilterPanel extends React.Component {
@@ -62,12 +65,13 @@ class FilterPanel extends React.Component {
       <div className={classes.filter}>
         <FormGroup row>
           <FormControl variant="outlined">
-            <InputLabel>Namespace</InputLabel>
+            <InputLabel className={classes.selectLabel}>Namespace</InputLabel>
             {this.props.globalNamespace === '' ? (
               <Select
                 value={this.props.experimentNamespace}
                 onChange={this.onNamespaceChange}
                 className={classes.selectBox}
+                label="Namespace"
               >
                 {this.props.namespaces.map((namespace, i) => {
                   return (
@@ -78,7 +82,12 @@ class FilterPanel extends React.Component {
                 })}
               </Select>
             ) : (
-              <Select value={this.props.experimentNamespace} className={classes.selectBox} disabled>
+              <Select
+                value={this.props.experimentNamespace}
+                className={classes.selectBox}
+                disabled
+                label="Namespace"
+              >
                 <MenuItem value={this.props.experimentNamespace}>
                   {this.props.experimentNamespace}
                 </MenuItem>
@@ -91,7 +100,6 @@ class FilterPanel extends React.Component {
             className={classes.textField}
             value={this.props.experimentName}
             onChange={this.onNameChange}
-            margin="normal"
             variant="outlined"
           />
           {Object.keys(this.props.filterStatus).map((filter, i) => {
diff --git a/pkg/ui/v1beta1/frontend/src/components/Common/SuggestionInfoDialog.jsx b/pkg/ui/v1beta1/frontend/src/components/Common/SuggestionInfoDialog.jsx
index 15d084ad92c..6e4f3d47203 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Common/SuggestionInfoDialog.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Common/SuggestionInfoDialog.jsx
@@ -1,12 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-import { withStyles } from '@material-ui/styles';
-
 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/theme-xcode';
 import 'ace-builds/src-noconflict/mode-json';
 
+import { withStyles } from '@material-ui/core/styles';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';
diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Create/HPParameters.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Create/HPParameters.jsx
index 3becff8b9a8..c4901fe32c7 100644
--- a/pkg/ui/v1beta1/frontend/src/components/HP/Create/HPParameters.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/HP/Create/HPParameters.jsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 
 import jsyaml from 'js-yaml';
 
-import withStyles from '@material-ui/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
@@ -14,9 +14,9 @@ import Objective from './Params/Objective';
 import TrialTemplate from '../../Common/Create/Params/Trial/TrialTemplate';
 import Parameters from './Params/Parameters';
 import Algorithm from './Params/Algorithm';
+import MetricsCollectorSpec from '../../Common/Create/Params/MetricsCollector';
 
 import { submitHPJob } from '../../../actions/hpCreateActions';
-import MetricsCollectorSpec from '../../Common/Create/Params/MetricsCollector';
 
 import { validationError } from '../../../actions/generalActions';
 import * as constants from '../../../constants/constants';
diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Algorithm.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Algorithm.jsx
index bc384cab405..d0425a029c1 100644
--- a/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Algorithm.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Algorithm.jsx
@@ -1,21 +1,20 @@
 import React from 'react';
-import makeStyles from '@material-ui/styles/makeStyles';
+import { connect } from 'react-redux';
+
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Tooltip from '@material-ui/core/Tooltip';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
 import Typography from '@material-ui/core/Typography';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 import InputLabel from '@material-ui/core/InputLabel';
 import TextField from '@material-ui/core/TextField';
 import IconButton from '@material-ui/core/IconButton';
-
 import DeleteIcon from '@material-ui/icons/Delete';
 
-import { connect } from 'react-redux';
 import {
   changeAlgorithmName,
   addAlgorithmSetting,
@@ -98,7 +97,7 @@ const Algorithm = props => {
               <Select
                 value={props.algorithmName}
                 onChange={onAlgorithmNameChange}
-                input={<OutlinedInput labelWidth={160} />}
+                label="Algorithm Name"
                 className={classes.select}
               >
                 {props.allAlgorithms.map((algorithm, i) => {
diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/CommonMeta.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/CommonMeta.jsx
index 3e835e40b4e..c0d5bc27d69 100644
--- a/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/CommonMeta.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/CommonMeta.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
+
+import { withStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Tooltip from '@material-ui/core/Tooltip';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
@@ -7,7 +9,6 @@ import Typography from '@material-ui/core/Typography';
 import TextField from '@material-ui/core/TextField';
 
 import { changeMeta } from '../../../../actions/hpCreateActions';
-import { withStyles } from '@material-ui/core';
 
 import { GENERAL_MODULE, HP_CREATE_MODULE } from '../../../../constants/constants';
 
@@ -49,7 +50,7 @@ class CommonParametersMeta extends React.Component {
             <div key={i} className={classes.parameter}>
               <Grid container alignItems={'center'}>
                 <Grid item xs={12} sm={3}>
-                  <Typography variant={'subheading'}>
+                  <Typography variant={'subtitle1'}>
                     <Tooltip title={param.description}>
                       <HelpOutlineIcon className={classes.help} color={'primary'} />
                     </Tooltip>
diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/CommonSpec.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/CommonSpec.jsx
index 4d412eda97a..0de34d27154 100644
--- a/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/CommonSpec.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/CommonSpec.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import makeStyles from '@material-ui/styles/makeStyles';
+
+import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Tooltip from '@material-ui/core/Tooltip';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
@@ -42,7 +43,7 @@ const CommonParametersSpec = props => {
           <div key={i} className={classes.parameter}>
             <Grid container alignItems={'center'}>
               <Grid item xs={12} sm={3}>
-                <Typography variant={'subheading'}>
+                <Typography variant={'subtitle1'}>
                   <Tooltip title={param.description}>
                     <HelpOutlineIcon className={classes.help} color={'primary'} />
                   </Tooltip>
diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Objective.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Objective.jsx
index 9ee40b0b6c8..c0b04fa609d 100644
--- a/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Objective.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Objective.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import makeStyles from '@material-ui/styles/makeStyles';
+
+import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Tooltip from '@material-ui/core/Tooltip';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
@@ -13,7 +14,6 @@ import AddIcon from '@material-ui/icons/Add';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 import InputLabel from '@material-ui/core/InputLabel';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
 import MenuItem from '@material-ui/core/MenuItem';
 
 import {
@@ -80,8 +80,8 @@ const Objective = props => {
                   <Select
                     value={param.value}
                     onChange={onObjectiveChange(param.name)}
-                    input={<OutlinedInput labelWidth={160} />}
                     className={classes.selectBox}
+                    label="Objective Type"
                   >
                     {props.allObjectiveTypes.map((type, i) => {
                       return (
@@ -99,7 +99,7 @@ const Objective = props => {
           <div key={i} className={classes.parameter}>
             <Grid container alignItems={'center'}>
               <Grid item xs={12} sm={3}>
-                <Typography variant={'subheading'}>
+                <Typography variant={'subtitle1'}>
                   <Tooltip title={param.description}>
                     <HelpOutlineIcon className={classes.help} color={'primary'} />
                   </Tooltip>
@@ -120,7 +120,7 @@ const Objective = props => {
       <div className={classes.parameter}>
         <Grid container alignItems={'center'}>
           <Grid item xs={12} sm={3}>
-            <Typography variant={'subheading'}>
+            <Typography variant={'subtitle1'}>
               <Tooltip title={'Additional metrics that you want to collect'}>
                 <HelpOutlineIcon className={classes.help} color={'primary'} />
               </Tooltip>
diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Parameters.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Parameters.jsx
index 96c69460b96..b95087549cd 100644
--- a/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Parameters.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/HP/Create/Params/Parameters.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import makeStyles from '@material-ui/styles/makeStyles';
+
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import TextField from '@material-ui/core/TextField';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
 import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
@@ -117,7 +117,7 @@ const Parameters = props => {
                   <Select
                     value={param.parameterType}
                     onChange={onGeneralEdit(i, 'parameterType')}
-                    input={<OutlinedInput name={'paramType'} labelWidth={120} />}
+                    label="Parameter Type"
                     className={classes.select}
                   >
                     {props.allParameterTypes.map((type, i) => {
diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Create/YAML.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Create/YAML.jsx
index bfed00ada69..146f497ee1b 100644
--- a/pkg/ui/v1beta1/frontend/src/components/HP/Create/YAML.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/HP/Create/YAML.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import makeStyles from '@material-ui/styles/makeStyles';
 
 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/theme-sqlserver';
 import 'ace-builds/src-noconflict/mode-yaml';
 
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobInfo.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobInfo.jsx
index c13b87733aa..9ad2ed8cdea 100644
--- a/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobInfo.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobInfo.jsx
@@ -1,22 +1,22 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-import { withStyles } from '@material-ui/core';
+import { Link } from 'react-router-dom';
+
+import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
-import { Link } from 'react-router-dom';
 import LinearProgress from '@material-ui/core/LinearProgress';
 import Grid from '@material-ui/core/Grid';
 
-import { fetchHPJobInfo } from '../../../actions/hpMonitorActions';
-import { fetchExperiment, fetchSuggestion } from '../../../actions/generalActions';
-
 import HPJobPlot from './HPJobPlot';
 import HPJobTable from './HPJobTable';
 import TrialInfoDialog from './TrialInfoDialog';
 import ExperimentInfoDialog from '../../Common/ExperimentInfoDialog';
 import SuggestionInfoDialog from '../../Common/SuggestionInfoDialog';
 
+import { fetchHPJobInfo } from '../../../actions/hpMonitorActions';
+import { fetchExperiment, fetchSuggestion } from '../../../actions/generalActions';
 import { HP_MONITOR_MODULE } from '../../../constants/constants';
 
 const styles = theme => ({
@@ -73,7 +73,7 @@ class HPJobInfo extends React.Component {
             <Typography className={classes.header} variant={'h5'}>
               Experiment Namespace: {this.props.match.params.namespace}
             </Typography>
-            <Grid container className={classes.grid} justify="center" spacing={24}>
+            <Grid container className={classes.grid} justify="center" spacing={3}>
               <Grid item>
                 <Button
                   variant={'contained'}
diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobPlot.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobPlot.jsx
index a899c85776b..6e4d46bf352 100644
--- a/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobPlot.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/HPJobPlot.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import makeStyles from '@material-ui/styles/makeStyles';
-
 import { connect } from 'react-redux';
+
 import Plot from 'react-plotly.js';
 
+import { makeStyles } from '@material-ui/core/styles';
+
 import { HP_MONITOR_MODULE } from '../../../constants/constants';
 
 const useStyles = makeStyles({
diff --git a/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/TrialInfoDialog.jsx b/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/TrialInfoDialog.jsx
index af9675d19bc..d20c4fccca7 100644
--- a/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/TrialInfoDialog.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/HP/Monitor/TrialInfoDialog.jsx
@@ -1,12 +1,14 @@
 import React from 'react';
-import { withStyles } from '@material-ui/styles';
+
+import Plot from 'react-plotly.js';
+
+import { withStyles } from '@material-ui/core/styles';
 import Dialog from '@material-ui/core/Dialog';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { connect } from 'react-redux';
 
 import { closeDialogTrial } from '../../../actions/hpMonitorActions';
-import Plot from 'react-plotly.js';
 
 import { HP_MONITOR_MODULE } from '../../../constants/constants';
 
diff --git a/pkg/ui/v1beta1/frontend/src/components/KubeflowDashboard.jsx b/pkg/ui/v1beta1/frontend/src/components/KubeflowDashboard.jsx
index bb51b6870d1..65395f436aa 100644
--- a/pkg/ui/v1beta1/frontend/src/components/KubeflowDashboard.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/KubeflowDashboard.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { CHANGE_GLOBAL_NAMESPACE } from '../actions/generalActions';
 import generalReducer from '../reducers/general';
 
diff --git a/pkg/ui/v1beta1/frontend/src/components/Menu/Header.jsx b/pkg/ui/v1beta1/frontend/src/components/Menu/Header.jsx
index 6bbd813887a..46dce7c893c 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Menu/Header.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Menu/Header.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
 
-import makeStyles from '@material-ui/styles/makeStyles';
-import { withStyles } from '@material-ui/core/styles';
+import { Link } from 'react-router-dom';
 
+import { makeStyles, withStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
@@ -50,7 +49,7 @@ const Header = props => {
           >
             <MenuIcon />
           </IconButton>
-          <KatibLink variant={'headline'} color={'secondary'} component={Link} to="/">
+          <KatibLink variant={'h5'} color={'secondary'} component={Link} to="/">
             Katib
           </KatibLink>
         </Toolbar>
diff --git a/pkg/ui/v1beta1/frontend/src/components/Menu/Main.jsx b/pkg/ui/v1beta1/frontend/src/components/Menu/Main.jsx
index 12543b92776..3c563dd86ec 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Menu/Main.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Menu/Main.jsx
@@ -1,7 +1,8 @@
 import React from 'react';
+
 import { Link } from 'react-router-dom';
 
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
@@ -44,7 +45,7 @@ const Main = props => {
       <Typography variant={'h4'}>Welcome to Katib</Typography>
       <Typography variant={'h6'}>Choose type of experiment</Typography>
       <br />
-      <Grid container spacing={40} alignContent={'center'}>
+      <Grid container spacing={5} alignContent={'center'}>
         <Grid item xs={6} className={classes.item} component={Link} to={LINK_HP_CREATE}>
           <Paper className={classes.block}>
             <Typography variant={'h6'} color={'secondary'}>
diff --git a/pkg/ui/v1beta1/frontend/src/components/Menu/Menu.jsx b/pkg/ui/v1beta1/frontend/src/components/Menu/Menu.jsx
index 1f862a63130..91200fef55e 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Menu/Menu.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Menu/Menu.jsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
+
 import { Link } from 'react-router-dom';
 
-import makeStyles from '@material-ui/styles/makeStyles';
+import { makeStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import List from '@material-ui/core/List';
 import Typography from '@material-ui/core/Typography';
@@ -60,11 +61,11 @@ const Menu = props => {
   // Add links
   const color = 'primary';
   const iconColor = 'primary';
-  const variant = 'title';
+  const variant = 'h6';
   return (
     <div>
       <Drawer open={props.menuOpen} onClose={onCloseMenu}>
-        <List>
+        <List className={classes.list}>
           {/* HP */}
           <ListItem button onClick={toggleHP}>
             <ListItemIcon>
diff --git a/pkg/ui/v1beta1/frontend/src/components/Menu/Snack.jsx b/pkg/ui/v1beta1/frontend/src/components/Menu/Snack.jsx
index 04dcabbb713..4fd2b45ba3b 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Menu/Snack.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Menu/Snack.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import makeStyles from '@material-ui/styles/makeStyles';
+import { connect } from 'react-redux';
+
+import { makeStyles } from '@material-ui/core/styles';
 import Snackbar from '@material-ui/core/Snackbar';
 import IconButton from '@material-ui/core/IconButton';
-
 import CloseIcon from '@material-ui/icons/Close';
 
-import { connect } from 'react-redux';
 import { closeSnackbar } from '../../actions/generalActions';
 
 import { GENERAL_MODULE } from '../../constants/constants';
diff --git a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/NASParameters.jsx b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/NASParameters.jsx
index e424dbeada9..e58be290063 100644
--- a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/NASParameters.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/NASParameters.jsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 
 import jsyaml from 'js-yaml';
 
-import withStyles from '@material-ui/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
@@ -14,9 +14,9 @@ import Objective from './Params/Objective';
 import Algorithm from './Params/Algorithm';
 import TrialTemplate from '../../Common/Create/Params/Trial/TrialTemplate';
 import NASConfig from './Params/NASConfig';
+import MetricsCollectorSpec from '../../Common/Create/Params/MetricsCollector';
 
 import { submitNASJob } from '../../../actions/nasCreateActions';
-import MetricsCollectorSpec from '../../Common/Create/Params/MetricsCollector';
 
 import { validationError } from '../../../actions/generalActions';
 import * as constants from '../../../constants/constants';
diff --git a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/Algorithm.jsx b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/Algorithm.jsx
index 5fd6f23d232..cfac4629436 100644
--- a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/Algorithm.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/Algorithm.jsx
@@ -1,21 +1,20 @@
 import React from 'react';
-import makeStyles from '@material-ui/styles/makeStyles';
+import { connect } from 'react-redux';
+
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Tooltip from '@material-ui/core/Tooltip';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
 import Typography from '@material-ui/core/Typography';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 import InputLabel from '@material-ui/core/InputLabel';
 import TextField from '@material-ui/core/TextField';
 import IconButton from '@material-ui/core/IconButton';
-
 import DeleteIcon from '@material-ui/icons/Delete';
 
-import { connect } from 'react-redux';
 import {
   changeAlgorithmName,
   addAlgorithmSetting,
@@ -99,7 +98,7 @@ const Algorithm = props => {
               <Select
                 value={props.algorithmName}
                 onChange={onAlgorithmNameChange}
-                input={<OutlinedInput labelWidth={160} />}
+                label="Algorithm Name"
                 className={classes.select}
               >
                 {props.allAlgorithms.map((algorithm, i) => {
diff --git a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/CommonMeta.jsx b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/CommonMeta.jsx
index a443c7e3461..bd5428106aa 100644
--- a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/CommonMeta.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/CommonMeta.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
+
+import { withStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Tooltip from '@material-ui/core/Tooltip';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
@@ -7,7 +9,6 @@ import Typography from '@material-ui/core/Typography';
 import TextField from '@material-ui/core/TextField';
 
 import { changeMeta } from '../../../../actions/nasCreateActions';
-import { withStyles } from '@material-ui/core';
 
 import { GENERAL_MODULE, NAS_CREATE_MODULE } from '../../../../constants/constants';
 
@@ -49,7 +50,7 @@ class CommonParametersMeta extends React.Component {
             <div key={i} className={classes.parameter}>
               <Grid container alignItems={'center'}>
                 <Grid item xs={12} sm={3}>
-                  <Typography variant={'subheading'}>
+                  <Typography variant={'subtitle1'}>
                     <Tooltip title={param.description}>
                       <HelpOutlineIcon className={classes.help} color={'primary'} />
                     </Tooltip>
diff --git a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/CommonSpec.jsx b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/CommonSpec.jsx
index 55ef975b166..63df6511b66 100644
--- a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/CommonSpec.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/CommonSpec.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import makeStyles from '@material-ui/styles/makeStyles';
+
+import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Tooltip from '@material-ui/core/Tooltip';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
@@ -42,7 +43,7 @@ const CommonParametersSpec = props => {
           <div key={i} className={classes.parameter}>
             <Grid container alignItems={'center'}>
               <Grid item xs={12} sm={3}>
-                <Typography variant={'subheading'}>
+                <Typography variant={'subtitle1'}>
                   <Tooltip title={param.description}>
                     <HelpOutlineIcon className={classes.help} color={'primary'} />
                   </Tooltip>
diff --git a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/NASConfig.jsx b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/NASConfig.jsx
index ffc42a62ef2..ad6ff632c54 100644
--- a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/NASConfig.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/NASConfig.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import makeStyles from '@material-ui/styles/makeStyles';
+
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
 import Tooltip from '@material-ui/core/Tooltip';
@@ -13,11 +14,9 @@ import DeleteIcon from '@material-ui/icons/Delete';
 import Fab from '@material-ui/core/Fab';
 import Divider from '@material-ui/core/Divider';
 import Select from '@material-ui/core/Select';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
 import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
-
 import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -153,7 +152,7 @@ const NASConfig = props => {
       <div className={classes.numLayers}>
         <Grid container alignItems={'center'}>
           <Grid item xs={12} sm={3}>
-            <Typography variant={'subheading'}>
+            <Typography variant={'subtitle1'}>
               <Tooltip title="Number of layers">
                 <HelpOutlineIcon className={classes.help} color={'primary'} />
               </Tooltip>
@@ -173,7 +172,7 @@ const NASConfig = props => {
       <div className={classes.parameter}>
         <Grid container alignItems={'center'}>
           <Grid item xs={12} sm={3}>
-            <Typography variant={'subheading'}>
+            <Typography variant={'subtitle1'}>
               <Tooltip title={'Dimensions of input sizes'}>
                 <HelpOutlineIcon className={classes.help} color={'primary'} />
               </Tooltip>
@@ -213,7 +212,7 @@ const NASConfig = props => {
       <div className={classes.parameter}>
         <Grid container alignItems={'center'}>
           <Grid item xs={12} sm={3}>
-            <Typography variant={'subheading'}>
+            <Typography variant={'subtitle1'}>
               <Tooltip title={'Dimensions of output sizes'}>
                 <HelpOutlineIcon className={classes.help} color={'primary'} />
               </Tooltip>
@@ -265,7 +264,7 @@ const NASConfig = props => {
         return (
           <div key={opIndex}>
             <div className={classes.section}>
-              <Grid container spacing={24}>
+              <Grid container spacing={3}>
                 <Grid item xs={4}>
                   <Typography variant={'h5'}>OperationType</Typography>
                 </Grid>
@@ -318,7 +317,7 @@ const NASConfig = props => {
                         <Select
                           onChange={onChangeParameter(opIndex, paramIndex, 'parameterType')}
                           value={param.parameterType}
-                          input={<OutlinedInput name={'paramType'} labelWidth={120} />}
+                          label="Parameter Type"
                           className={classes.select}
                         >
                           {props.allParameterTypes.map((type, i) => {
diff --git a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/Objective.jsx b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/Objective.jsx
index 493523fb3f7..23a2ee96f02 100644
--- a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/Objective.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/Params/Objective.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import makeStyles from '@material-ui/styles/makeStyles';
+
+import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Tooltip from '@material-ui/core/Tooltip';
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
@@ -13,7 +14,6 @@ import AddIcon from '@material-ui/icons/Add';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 import InputLabel from '@material-ui/core/InputLabel';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
 import MenuItem from '@material-ui/core/MenuItem';
 
 import {
@@ -80,8 +80,8 @@ const Objective = props => {
                   <Select
                     value={param.value}
                     onChange={onObjectiveChange(param.name)}
-                    input={<OutlinedInput labelWidth={160} />}
                     className={classes.selectBox}
+                    label="Objective Type"
                   >
                     {props.allObjectiveTypes.map((type, i) => {
                       return (
@@ -99,7 +99,7 @@ const Objective = props => {
           <div key={i} className={classes.parameter}>
             <Grid container alignItems={'center'}>
               <Grid item xs={12} sm={3}>
-                <Typography variant={'subheading'}>
+                <Typography variant={'subtitle1'}>
                   <Tooltip title={param.description}>
                     <HelpOutlineIcon className={classes.help} color={'primary'} />
                   </Tooltip>
@@ -120,7 +120,7 @@ const Objective = props => {
       <div className={classes.parameter}>
         <Grid container alignItems={'center'}>
           <Grid item xs={12} sm={3}>
-            <Typography variant={'subheading'}>
+            <Typography variant={'subtitle1'}>
               <Tooltip title={'Additional metrics that you want to collect'}>
                 <HelpOutlineIcon className={classes.help} color={'primary'} />
               </Tooltip>
diff --git a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/YAML.jsx b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/YAML.jsx
index b92734c337f..07297be4aad 100644
--- a/pkg/ui/v1beta1/frontend/src/components/NAS/Create/YAML.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/NAS/Create/YAML.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import makeStyles from '@material-ui/styles/makeStyles';
 
 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/theme-sqlserver';
 import 'ace-builds/src-noconflict/mode-yaml';
 
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Typography from '@material-ui/core/Typography';
 
diff --git a/pkg/ui/v1beta1/frontend/src/components/NAS/Monitor/NASJobInfo.jsx b/pkg/ui/v1beta1/frontend/src/components/NAS/Monitor/NASJobInfo.jsx
index 5e7ccee6efa..047d619b9fe 100644
--- a/pkg/ui/v1beta1/frontend/src/components/NAS/Monitor/NASJobInfo.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/NAS/Monitor/NASJobInfo.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
-import { withStyles } from '@material-ui/core';
-import Button from '@material-ui/core/Button';
 import { Link } from 'react-router-dom';
+
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
@@ -12,13 +13,13 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import LinearProgress from '@material-ui/core/LinearProgress';
 import Grid from '@material-ui/core/Grid';
 
-import { fetchNASJobInfo } from '../../../actions/nasMonitorActions';
-import { fetchExperiment, fetchSuggestion } from '../../../actions/generalActions';
-
 import NASJobStepInfo from './NASJobStepInfo';
 import ExperimentInfoDialog from '../../Common/ExperimentInfoDialog';
 import SuggestionInfoDialog from '../../Common/SuggestionInfoDialog';
 
+import { fetchNASJobInfo } from '../../../actions/nasMonitorActions';
+import { fetchExperiment, fetchSuggestion } from '../../../actions/generalActions';
+
 import { NAS_MONITOR_MODULE } from '../../../constants/constants';
 
 const styles = theme => ({
@@ -83,7 +84,7 @@ class NASJobInfo extends React.Component {
               Experiment Namespace: {this.props.match.params.namespace}
             </Typography>
 
-            <Grid container className={classes.grid} justify="center" spacing={24}>
+            <Grid container className={classes.grid} justify="center" spacing={3}>
               <Grid item>
                 <Button
                   variant={'contained'}
diff --git a/pkg/ui/v1beta1/frontend/src/components/NAS/Monitor/NASJobStepInfo.jsx b/pkg/ui/v1beta1/frontend/src/components/NAS/Monitor/NASJobStepInfo.jsx
index d0c6ba4ad06..132f39c1690 100644
--- a/pkg/ui/v1beta1/frontend/src/components/NAS/Monitor/NASJobStepInfo.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/NAS/Monitor/NASJobStepInfo.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core';
-import Typography from '@material-ui/core/Typography';
 
 // TODO: graphviz-react requires --max_old_space_size=4096
 // Think about switching to a different lib
 import { Graphviz } from 'graphviz-react';
 
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+
 const styles = theme => ({
   root: {
     margin: '0 auto',
diff --git a/pkg/ui/v1beta1/frontend/src/components/Templates/Common/AddDialog.jsx b/pkg/ui/v1beta1/frontend/src/components/Templates/Common/AddDialog.jsx
index 664fbcd2a6f..487ff7d0050 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Templates/Common/AddDialog.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Templates/Common/AddDialog.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import withStyles from '@material-ui/styles/withStyles';
 
 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/theme-sqlserver';
 import 'ace-builds/src-noconflict/mode-yaml';
 
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
@@ -17,7 +17,6 @@ import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import InputLabel from '@material-ui/core/InputLabel';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
 
 import { closeDialog, addTemplate, changeTemplate } from '../../../actions/templateActions';
 
@@ -127,7 +126,7 @@ class AddDialog extends React.Component {
                   value={this.props.updatedConfigMapNamespace}
                   onChange={this.onConfigMapNamespaceChange}
                   className={classes.selectBox}
-                  input={<OutlinedInput labelWidth={90} />}
+                  label="Namespace"
                 >
                   {this.props.trialTemplatesData.map((trialTemplate, i) => {
                     return (
@@ -144,7 +143,7 @@ class AddDialog extends React.Component {
                   value={this.props.updatedConfigMapName}
                   onChange={this.onConfigMapNameChange}
                   className={classes.selectBox}
-                  input={<OutlinedInput labelWidth={50} />}
+                  label="Name"
                 >
                   {this.props.trialTemplatesData[this.props.configMapNamespaceIndex].ConfigMaps.map(
                     (configMap, i) => {
diff --git a/pkg/ui/v1beta1/frontend/src/components/Templates/Common/EditDialog.jsx b/pkg/ui/v1beta1/frontend/src/components/Templates/Common/EditDialog.jsx
index 2f6a4011fa5..c01e1e3b588 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Templates/Common/EditDialog.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Templates/Common/EditDialog.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import withStyles from '@material-ui/styles/withStyles';
 
 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/theme-sqlserver';
 import 'ace-builds/src-noconflict/mode-yaml';
 
+import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
diff --git a/pkg/ui/v1beta1/frontend/src/components/Templates/Common/FilterPanel.jsx b/pkg/ui/v1beta1/frontend/src/components/Templates/Common/FilterPanel.jsx
index e7dfcf1d890..914df248804 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Templates/Common/FilterPanel.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Templates/Common/FilterPanel.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
 
+import { withStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import Select from '@material-ui/core/Select';
 import InputLabel from '@material-ui/core/InputLabel';
@@ -24,6 +24,9 @@ const styles = theme => ({
     marginLeft: theme.spacing.unit,
     marginRight: theme.spacing.unit,
   },
+  selectLabel: {
+    marginLeft: '8px',
+  },
 });
 
 class FilterPanel extends React.Component {
@@ -49,11 +52,12 @@ class FilterPanel extends React.Component {
     return (
       <div>
         <FormControl variant="outlined">
-          <InputLabel>ConfigMap Namespace</InputLabel>
+          <InputLabel className={classes.selectLabel}>ConfigMap Namespace</InputLabel>
           <Select
             value={this.props.filteredConfigMapNamespace}
             onChange={this.onConfigMapNamespaceChange}
             className={classes.selectBox}
+            label="ConfigMap Namespace"
           >
             {this.props.namespaces.map((namespace, i) => {
               return (
@@ -69,7 +73,6 @@ class FilterPanel extends React.Component {
           className={classes.textField}
           value={this.props.filteredConfigMapName}
           onChange={this.onConfigMapNameChange}
-          margin="normal"
           variant="outlined"
         />
       </div>
diff --git a/pkg/ui/v1beta1/frontend/src/components/Templates/Common/TemplateList.jsx b/pkg/ui/v1beta1/frontend/src/components/Templates/Common/TemplateList.jsx
index f4bbb6ed416..8823ee22368 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Templates/Common/TemplateList.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Templates/Common/TemplateList.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
 
+import { withStyles } from '@material-ui/core/styles';
 import ExpansionPanel from '@material-ui/core/ExpansionPanel';
 import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
 import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
diff --git a/pkg/ui/v1beta1/frontend/src/components/Templates/Common/TemplatePanel.jsx b/pkg/ui/v1beta1/frontend/src/components/Templates/Common/TemplatePanel.jsx
index fd6d6b715df..e6244633726 100644
--- a/pkg/ui/v1beta1/frontend/src/components/Templates/Common/TemplatePanel.jsx
+++ b/pkg/ui/v1beta1/frontend/src/components/Templates/Common/TemplatePanel.jsx
@@ -5,7 +5,7 @@ import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/theme-sqlserver';
 import 'ace-builds/src-noconflict/mode-yaml';
 
-import makeStyles from '@material-ui/styles/makeStyles';
+import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import DeleteIcon from '@material-ui/icons/Delete';
 import CreateIcon from '@material-ui/icons/Create';
diff --git a/pkg/ui/v1beta1/frontend/src/reducers/general.js b/pkg/ui/v1beta1/frontend/src/reducers/general.js
index d31629753ef..7835b8ecc50 100644
--- a/pkg/ui/v1beta1/frontend/src/reducers/general.js
+++ b/pkg/ui/v1beta1/frontend/src/reducers/general.js
@@ -315,7 +315,7 @@ const generalReducer = (state = initialState, action) => {
         return statuses[key];
       });
 
-      var filteredExperiments = experiments.filter(
+      filteredExperiments = experiments.filter(
         experiment =>
           newFilterStatus.includes(experiment.status) &&
           experiment.name.includes(action.experimentName) &&