diff --git a/front-end/package-lock.json b/front-end/package-lock.json
index 31d56d9..34a591a 100644
--- a/front-end/package-lock.json
+++ b/front-end/package-lock.json
@@ -1043,6 +1043,11 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/hash": {
+      "version": "0.7.4",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@emotion/hash/-/hash-0.7.4.tgz",
+      "integrity": "sha1-8UkyiHQiyQVrFajSIqkHSn36KDE="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -1268,6 +1273,96 @@
         "@types/yargs": "^13.0.0"
       }
     },
+    "@material-ui/core": {
+      "version": "4.9.3",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@material-ui/core/-/core-4.9.3.tgz",
+      "integrity": "sha1-Ka1R9NNsvDr3qdsn2S+T+k+kLVA=",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/styles": "^4.9.0",
+        "@material-ui/system": "^4.9.3",
+        "@material-ui/types": "^5.0.0",
+        "@material-ui/utils": "^4.7.1",
+        "@types/react-transition-group": "^4.2.0",
+        "clsx": "^1.0.2",
+        "convert-css-length": "^2.0.1",
+        "hoist-non-react-statics": "^3.3.2",
+        "popper.js": "^1.14.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0",
+        "react-transition-group": "^4.3.0"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "5.1.3",
+          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/dom-helpers/-/dom-helpers-5.1.3.tgz",
+          "integrity": "sha1-cjMkjrOi0fdKr8ox5SxSmcyM6CE=",
+          "requires": {
+            "@babel/runtime": "^7.6.3",
+            "csstype": "^2.6.7"
+          }
+        },
+        "react-transition-group": {
+          "version": "4.3.0",
+          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/react-transition-group/-/react-transition-group-4.3.0.tgz",
+          "integrity": "sha1-/qgy44bPh5bFi2GHSjMZcE9c5oM=",
+          "requires": {
+            "@babel/runtime": "^7.5.5",
+            "dom-helpers": "^5.0.1",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2"
+          }
+        }
+      }
+    },
+    "@material-ui/styles": {
+      "version": "4.9.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@material-ui/styles/-/styles-4.9.0.tgz",
+      "integrity": "sha1-EMMYWfaGjPqdOt9rbD4yydZ2vHY=",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.7.4",
+        "@material-ui/types": "^5.0.0",
+        "@material-ui/utils": "^4.7.1",
+        "clsx": "^1.0.2",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.2.1",
+        "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/system": {
+      "version": "4.9.3",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@material-ui/system/-/system-4.9.3.tgz",
+      "integrity": "sha1-7kiZDXlBI3/a8ht7OZmB1hS7CHU=",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.7.1",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@material-ui/types": {
+      "version": "5.0.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@material-ui/types/-/types-5.0.0.tgz",
+      "integrity": "sha1-JtYlncazn0wuHprO/3oR4DGUF0E="
+    },
+    "@material-ui/utils": {
+      "version": "4.7.1",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@material-ui/utils/-/utils-4.7.1.tgz",
+      "integrity": "sha1-3BbH8NLNAvvN1c/mAf1oY648xlI=",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -1490,11 +1585,33 @@
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha1-KrDV2i5YFflLC51LldHl8kOrLKc="
+    },
     "@types/q": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
       "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw=="
     },
+    "@types/react": {
+      "version": "16.9.19",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@types/react/-/react-16.9.19.tgz",
+      "integrity": "sha1-yEKqg+pJAAfSmTgUb/Lk2eQ2DEA=",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.2.3",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/@types/react-transition-group/-/react-transition-group-4.2.3.tgz",
+      "integrity": "sha1-SSQTP3JoaUBY5BW/euotTCETFHA=",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -2635,6 +2752,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
     },
+    "bowser": {
+      "version": "1.9.4",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/bowser/-/bowser-1.9.4.tgz",
+      "integrity": "sha1-iQxYooE6nTJDcEM0+oG5alwVDJo="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2939,6 +3061,11 @@
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
       "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
     },
+    "chain-function": {
+      "version": "1.0.1",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/chain-function/-/chain-function-1.0.1.tgz",
+      "integrity": "sha1-xjBF5bS2Y/uG8cbhhq2vHeQCocw="
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -2949,6 +3076,11 @@
         "supports-color": "^5.3.0"
       }
     },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/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",
@@ -3614,6 +3746,11 @@
         "shallow-clone": "^0.1.2"
       }
     },
+    "clsx": {
+      "version": "1.1.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/clsx/-/clsx-1.1.0.tgz",
+      "integrity": "sha1-YpN8at/qdxJHw0tU0yD7mWJPVwI="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -3825,6 +3962,11 @@
       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
       "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
     },
+    "convert-css-length": {
+      "version": "2.0.1",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/convert-css-length/-/convert-css-length-2.0.1.tgz",
+      "integrity": "sha1-kKdr3lv9JNcogaW0XQIkmywdJXw="
+    },
     "convert-source-map": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
@@ -4045,6 +4187,15 @@
         }
       }
     },
+    "css-in-js-utils": {
+      "version": "2.0.1",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
+      "integrity": "sha1-O0crOYeHKRtHz+PkT+z92ekUupk=",
+      "requires": {
+        "hyphenate-style-name": "^1.0.2",
+        "isobject": "^3.0.1"
+      }
+    },
     "css-loader": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.2.0.tgz",
@@ -4116,6 +4267,15 @@
       "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz",
       "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY="
     },
+    "css-vendor": {
+      "version": "2.0.7",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/css-vendor/-/css-vendor-2.0.7.tgz",
+      "integrity": "sha1-Tm1T2VPBh5gVdtalQqzJ+1cXS9o=",
+      "requires": {
+        "@babel/runtime": "^7.6.2",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
@@ -4223,6 +4383,11 @@
         "cssom": "0.3.x"
       }
     },
+    "csstype": {
+      "version": "2.6.9",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/csstype/-/csstype-2.6.9.tgz",
+      "integrity": "sha1-BRQdDNVXpWuIkTlMGRHEDIqY0Jg="
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -4537,6 +4702,14 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha1-6bNpcA+Vn2Ls3lprq95LzNkWmvg=",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -4694,6 +4867,14 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/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",
@@ -5663,6 +5844,35 @@
         "bser": "2.1.1"
       }
     },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/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"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        },
+        "promise": {
+          "version": "7.3.1",
+          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/promise/-/promise-7.3.1.tgz",
+          "integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=",
+          "requires": {
+            "asap": "~2.0.3"
+          }
+        }
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -6512,6 +6722,11 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.3",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
+      "integrity": "sha1-CXu3+guPGpzwvVxzTPlYmZgam0g="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -6629,6 +6844,15 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
       "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
     },
+    "inline-style-prefixer": {
+      "version": "3.0.8",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
+      "integrity": "sha1-hVG45bTVcyROZqNLBPfTIHaitTQ=",
+      "requires": {
+        "bowser": "^1.7.3",
+        "css-in-js-utils": "^2.0.0"
+      }
+    },
     "inquirer": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.4.tgz",
@@ -6816,6 +7040,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -6947,6 +7176,15 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/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",
@@ -8160,6 +8398,83 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.0.4",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/jss/-/jss-10.0.4.tgz",
+      "integrity": "sha1-Ruvd4cQMmgedZPMzTLiK4o/ZC/0=",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^2.6.5",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.0.4",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.4.tgz",
+      "integrity": "sha1-Pe3s7B5bugv2FBwsBeKrEepLRo0=",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.0.4"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.0.4",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.4.tgz",
+      "integrity": "sha1-3wOIXeIPIKH8HCG9t8Yuhl7kANk=",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.0.4"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.0.4",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/jss-plugin-global/-/jss-plugin-global-10.0.4.tgz",
+      "integrity": "sha1-QSJFtWEzzIi+xlSnDYLVkiYZ9MU=",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.0.4"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.0.4",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/jss-plugin-nested/-/jss-plugin-nested-10.0.4.tgz",
+      "integrity": "sha1-TRWtE5lftuQSVhgAZHOgltJHXXU=",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.0.4",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.0.4",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.4.tgz",
+      "integrity": "sha1-Q8iA/438+Fj4CfZj7OXmWh2UW1o=",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.0.4"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.0.4",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.4.tgz",
+      "integrity": "sha1-L0z0qGrT66h1u0jLn0p+01yzVOc=",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.0.4"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.0.4",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.4.tgz",
+      "integrity": "sha1-FibvYSpFQc/xfPloFeF0AVUhTtI=",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.7",
+        "jss": "10.0.4"
+      }
+    },
     "jsx-ast-utils": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
@@ -8169,6 +8484,11 @@
         "object.assign": "^4.1.0"
       }
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -8347,6 +8667,11 @@
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha1-VYqlO0O2YeGSWgr9+japoQhf5Xo="
+    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -8369,6 +8694,11 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -8462,6 +8792,24 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-ui": {
+      "version": "0.20.2",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/material-ui/-/material-ui-0.20.2.tgz",
+      "integrity": "sha1-X8m0titpHTsWyJ2OVFl6BBK1LH0=",
+      "requires": {
+        "babel-runtime": "^6.23.0",
+        "inline-style-prefixer": "^3.0.8",
+        "keycode": "^2.1.8",
+        "lodash.merge": "^4.6.0",
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.5.7",
+        "react-event-listener": "^0.6.2",
+        "react-transition-group": "^1.2.1",
+        "recompose": "^0.26.0",
+        "simple-assign": "^0.1.0",
+        "warning": "^3.0.0"
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -8876,6 +9224,15 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha1-mA9vcthSEaU0fGsrwYxbhMPrR+8=",
+      "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",
@@ -9623,6 +9980,11 @@
         "ts-pnp": "^1.1.2"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha1-KiI8s9x7YhPXQOQDcr5A3kPmWxs="
+    },
     "portfinder": {
       "version": "1.0.25",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
@@ -11026,6 +11388,26 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.4.tgz",
       "integrity": "sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA=="
     },
+    "react-event-listener": {
+      "version": "0.6.6",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/react-event-listener/-/react-event-listener-0.6.6.tgz",
+      "integrity": "sha1-dY97mRytkIbdOf0p+tchJ+HYlio=",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "prop-types": "^15.6.0",
+        "warning": "^4.0.1"
+      },
+      "dependencies": {
+        "warning": {
+          "version": "4.0.3",
+          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/warning/-/warning-4.0.3.tgz",
+          "integrity": "sha1-Fungd+uKhtavfWSqHgX9hbRnjKM=",
+          "requires": {
+            "loose-envify": "^1.0.0"
+          }
+        }
+      }
+    },
     "react-is": {
       "version": "16.12.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
@@ -11154,6 +11536,18 @@
         "workbox-webpack-plugin": "4.3.1"
       }
     },
+    "react-transition-group": {
+      "version": "1.2.1",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/react-transition-group/-/react-transition-group-1.2.1.tgz",
+      "integrity": "sha1-4R9yslf5IbITIpp3TfRmEjRsfKY=",
+      "requires": {
+        "chain-function": "^1.0.0",
+        "dom-helpers": "^3.2.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.5.6",
+        "warning": "^3.0.0"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -11225,6 +11619,24 @@
         "util.promisify": "^1.0.0"
       }
     },
+    "recompose": {
+      "version": "0.26.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/recompose/-/recompose-0.26.0.tgz",
+      "integrity": "sha1-m6v/A5y3K6W9FzZtVdcjL737LTA=",
+      "requires": {
+        "change-emitter": "^0.1.2",
+        "fbjs": "^0.8.1",
+        "hoist-non-react-statics": "^2.3.1",
+        "symbol-observable": "^1.0.4"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha1-xZA89AnA39kI84jmGdhrnBF0y0c="
+        }
+      }
+    },
     "recursive-readdir": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
@@ -11997,6 +12409,11 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
     },
+    "simple-assign": {
+      "version": "0.1.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/simple-assign/-/simple-assign-0.1.0.tgz",
+      "integrity": "sha1-F/0wZqXz13OPUDIbsPFMooHMS6o="
+    },
     "simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -12872,8 +13289,7 @@
     "tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
-      "dev": true
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
     "tmp": {
       "version": "0.0.33",
@@ -13016,6 +13432,11 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "ua-parser-js": {
+      "version": "0.7.21",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
+      "integrity": "sha1-hTz5zpP2QvZxdCc8w0Vlrm8wh3c="
+    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
@@ -13329,6 +13750,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "3.0.0",
+      "resolved": "https://repo.symphony.com/artifactory/api/npm/npm-virtual-dev/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
diff --git a/front-end/package.json b/front-end/package.json
index bb863ca..2508772 100644
--- a/front-end/package.json
+++ b/front-end/package.json
@@ -3,13 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.9.3",
     "cra-template": "1.0.0",
+    "material-ui": "^0.20.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "redux-logger": "^3.0.1",
     "react-redux": "^7.1.3",
     "react-scripts": "3.3.0",
     "redux": "^4.0.5",
+    "redux-logger": "^3.0.1",
     "redux-thunk": "^2.2.0"
   },
   "scripts": {
diff --git a/front-end/src/Components/Home/index.js b/front-end/src/Components/Home/index.js
index 19326cc..08550d1 100644
--- a/front-end/src/Components/Home/index.js
+++ b/front-end/src/Components/Home/index.js
@@ -60,4 +60,4 @@ function Home(properties) {
     )
 }
 
-export default Home
+export default Home
\ No newline at end of file
diff --git a/front-end/src/Components/LoginForm/LoginForm.css b/front-end/src/Components/LoginForm/LoginForm.css
index a94c222..11a2d95 100644
--- a/front-end/src/Components/LoginForm/LoginForm.css
+++ b/front-end/src/Components/LoginForm/LoginForm.css
@@ -7,8 +7,11 @@ form[name="loginForm"] {
   
   .form-group {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     margin-bottom: 10px;
+    width: 100%;
+    display: flex;
+    align-items: center;
   }
   
   label {
@@ -24,6 +27,7 @@ form[name="loginForm"] {
     padding: 3px;
     flex-grow: 1;
     font-size: 25px;
+    width: 50%;
   }
   
   input[type="submit"] {
@@ -40,4 +44,39 @@ form[name="loginForm"] {
     font-size: 25px;
     margin-top: 10px;
     text-align: right;
-  }
\ No newline at end of file
+  }
+
+  #buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    width: 92%;
+  }
+
+  .button {
+    width: 27%;
+  }
+
+  .form-group-collection {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .rootDiv {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    
+  }
+
+  .card{
+    width: 30%;
+    min-width: 400px;
+    margin-bottom: 3%;
+    color: #69585F; 
+  }
+
+  
\ No newline at end of file
diff --git a/front-end/src/Components/LoginForm/LoginForm.js b/front-end/src/Components/LoginForm/LoginForm.js
index 195f588..4162612 100644
--- a/front-end/src/Components/LoginForm/LoginForm.js
+++ b/front-end/src/Components/LoginForm/LoginForm.js
@@ -5,6 +5,20 @@ import {SET_LOGIN_PENDING} from "../../store/actions/LoginPending";
 import {SET_LOGIN_SUCCESS} from "../../store/actions/LoginSuccess";
 import {SET_LOGIN_ERROR} from "../../store/actions/LoginError";
 
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+}));
+
 class LoginForm extends Component {
 
 
@@ -15,23 +29,59 @@ class LoginForm extends Component {
   }
 
   render() {
+
     let {email, password} = this.state;
     let {isLoginPending, isLoginSuccess, loginError} = this.props;
     return (
+      <div className="rootDiv">
+        <Card raised={"true"} className={"card"} >
+            <CardContent >
       <form name="loginForm" onSubmit={this.onSubmit}>
         <div className="form-group-collection">
           <div className="form-group">
-            <label>Email:</label>
-            <input type="email" name="email" onChange={e => this.setState({email: e.target.value})} value={email}/>
+              <TextField
+              required
+              id="outlined-required"
+              label="Adresse email"
+            type="email"
+            defaultValue=""
+            variant="outlined"
+            onChange={e => this.setState({email: e.target.value})}
+            value={email}
+          />
           </div>
 
           <div className="form-group">
-            <label>Password:</label>
-            <input type="password" name="password" onChange={e => this.setState({password: e.target.value})} value={password}/>
+          
+          
+            <TextField
+          required
+          id="outlined-required"
+          label="Mot de passe"
+          type="password"
+          name="password"
+          onChange={e => this.setState({password: e.target.value})} 
+          value={password}
+          defaultValue=""
+          variant="outlined"
+          helperText= {this.state.loginFailed == true ? "Incorrect logins !" : ""} 
+        />
           </div>
+
+
+          <div id="buttons">
+        <Button className="button" variant="contained" color="secondary" value="Login" onClick={this.register}>
+          Register
+        </Button>
+        <Button className="button" variant="contained" color="secondary" value="Login" onClick={this.onSubmit}>
+          Login
+        </Button>
         </div>
 
-        <input type="submit" value="Login" />
+
+        </div>
+
+        
 
         <div className="message">
           { isLoginPending && <div>Please wait...</div> }
@@ -39,6 +89,9 @@ class LoginForm extends Component {
           { loginError && <div>Authentication failed.</div> }
         </div>
       </form>
+      </CardContent>
+      </Card>
+      </div>
     )
   }
 
@@ -48,9 +101,15 @@ class LoginForm extends Component {
     this.props.login(email, password)
     this.setState({
       email: '',
-      password: ''
+      password: '',
+      loginFailed: true
     });
   }
+  
+register() {
+  console.log("Unavailable feature : Register new user ! It should arrive soon !")
+}
+
 }