diff --git a/package-lock.json b/package-lock.json
index 39f3e924184b0960267e08b4d6d2b6bb1ff4a88e..9ba8779d9d0d7875e92167fa3fb0979661f8398e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -710,8 +710,7 @@
     "abbrev": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz",
-      "integrity": "sha1-kbR5JYinc4wl813W9jdSovh3YTU=",
-      "dev": true
+      "integrity": "sha1-kbR5JYinc4wl813W9jdSovh3YTU="
     },
     "accepts": {
       "version": "1.3.5",
@@ -815,8 +814,7 @@
     "amdefine": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
-      "dev": true
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
     "amqplib": {
       "version": "0.5.2",
@@ -961,7 +959,6 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
       "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
-      "optional": true,
       "requires": {
         "delegates": "^1.0.0",
         "readable-stream": "^2.0.6"
@@ -994,8 +991,7 @@
     "array-find-index": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
-      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
-      "dev": true
+      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
     },
     "array-flatten": {
       "version": "1.1.1",
@@ -1133,9 +1129,7 @@
     "async-foreach": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
-      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
-      "dev": true,
-      "optional": true
+      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI="
     },
     "async-limiter": {
       "version": "1.0.0",
@@ -1494,8 +1488,6 @@
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
       "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
-      "dev": true,
-      "optional": true,
       "requires": {
         "inherits": "~2.0.0"
       }
@@ -1939,7 +1931,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
-      "dev": true,
       "requires": {
         "camelcase": "^2.0.0",
         "map-obj": "^1.0.0"
@@ -1948,8 +1939,7 @@
         "camelcase": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
-          "dev": true
+          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
         }
       }
     },
@@ -2366,8 +2356,7 @@
     "console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "optional": true
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
     },
     "constants-browserify": {
       "version": "1.0.0",
@@ -2520,8 +2509,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
       "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
-      "dev": true,
-      "optional": true,
       "requires": {
         "lru-cache": "^4.0.1",
         "which": "^1.2.9"
@@ -2622,7 +2609,6 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
       "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
-      "dev": true,
       "requires": {
         "array-find-index": "^1.0.1"
       }
@@ -2686,8 +2672,7 @@
     "decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "dev": true
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
     },
     "decode-uri-component": {
       "version": "0.2.0",
@@ -2847,8 +2832,7 @@
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "optional": true
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
     },
     "depd": {
       "version": "1.1.2",
@@ -3221,7 +3205,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "requires": {
         "is-arrayish": "^0.2.1"
       }
@@ -3972,8 +3955,7 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
       "version": "1.2.4",
@@ -4457,11 +4439,9 @@
       }
     },
     "fstream": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
-      "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
-      "dev": true,
-      "optional": true,
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
       "requires": {
         "graceful-fs": "^4.1.2",
         "inherits": "~2.0.0",
@@ -4524,7 +4504,6 @@
       "version": "2.7.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
-      "optional": true,
       "requires": {
         "aproba": "^1.0.3",
         "console-control-strings": "^1.0.0",
@@ -4540,8 +4519,6 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
       "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "globule": "^1.0.0"
       }
@@ -4566,14 +4543,12 @@
     "get-caller-file": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
-      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
-      "dev": true
+      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
     },
     "get-stdin": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true
+      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
     },
     "get-stream": {
       "version": "3.0.0",
@@ -4613,7 +4588,6 @@
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
       "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -4704,15 +4678,20 @@
       }
     },
     "globule": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
-      "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
-      "dev": true,
-      "optional": true,
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.1.tgz",
+      "integrity": "sha512-OVyWOHgw29yosRHCHo7NncwR1hW5ew0W/UrvtwvjefVJeQ26q4/8r8FmPsSF1hJ93IgWkyv16pCTz6WblMzm/g==",
       "requires": {
         "glob": "~7.1.1",
-        "lodash": "~4.17.10",
+        "lodash": "~4.17.12",
         "minimatch": "~3.0.2"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.15",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+          "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+        }
       }
     },
     "good-listener": {
@@ -4843,7 +4822,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
       "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-      "dev": true,
       "requires": {
         "ansi-regex": "^2.0.0"
       }
@@ -4885,8 +4863,7 @@
     "has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "optional": true
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
     },
     "has-value": {
       "version": "1.0.0",
@@ -5311,17 +5288,14 @@
       "dev": true
     },
     "in-publish": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
-      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
-      "dev": true,
-      "optional": true
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz",
+      "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ=="
     },
     "indent-string": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
       "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
-      "dev": true,
       "requires": {
         "repeating": "^2.0.0"
       }
@@ -5343,7 +5317,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -5381,8 +5354,7 @@
     "invert-kv": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
-      "dev": true
+      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY="
     },
     "ip": {
       "version": "1.1.5",
@@ -5416,8 +5388,7 @@
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
-      "dev": true
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
     },
     "is-binary-path": {
       "version": "1.0.1",
@@ -5529,7 +5500,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
       "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
-      "dev": true,
       "requires": {
         "number-is-nan": "^1.0.0"
       }
@@ -5701,8 +5671,7 @@
     "is-utf8": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
-      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true
+      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI="
     },
     "is-windows": {
       "version": "1.0.2",
@@ -5731,8 +5700,7 @@
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
-      "dev": true
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
     },
     "isobject": {
       "version": "3.0.1",
@@ -6001,11 +5969,9 @@
       "dev": true
     },
     "js-base64": {
-      "version": "2.4.8",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.8.tgz",
-      "integrity": "sha512-hm2nYpDrwoO/OzBhdcqs/XGT6XjSuSSCVEpia+Kl2J6x4CYt5hISlVL/AYU1khoDXv0AQVgxtdJySb9gjAn56Q==",
-      "dev": true,
-      "optional": true
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
+      "integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ=="
     },
     "js-tokens": {
       "version": "3.0.2",
@@ -6278,7 +6244,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
       "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
-      "dev": true,
       "requires": {
         "invert-kv": "^1.0.0"
       }
@@ -6393,7 +6358,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "parse-json": "^2.2.0",
@@ -6405,8 +6369,7 @@
         "pify": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
         }
       }
     },
@@ -6440,15 +6403,7 @@
     "lodash": {
       "version": "4.17.10",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
-      "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
-      "dev": true
-    },
-    "lodash.assign": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
-      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
     },
     "lodash.clonedeep": {
       "version": "4.5.0",
@@ -6461,13 +6416,6 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
-    "lodash.mergewith": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
-      "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
-      "dev": true,
-      "optional": true
-    },
     "lodash.tail": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz",
@@ -6732,7 +6680,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
       "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
-      "dev": true,
       "requires": {
         "currently-unhandled": "^0.4.1",
         "signal-exit": "^3.0.0"
@@ -6754,7 +6701,6 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.3.tgz",
       "integrity": "sha512-fFEhvcgzuIoJVUF8fYr5KR0YqxD238zgObTps31YdADwPPAp82a4M8TrckkWyx7ekNlf9aBcVn81cFwwXngrJA==",
-      "dev": true,
       "requires": {
         "pseudomap": "^1.0.2",
         "yallist": "^2.1.2"
@@ -6834,8 +6780,7 @@
     "map-obj": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true
+      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
     },
     "map-visit": {
       "version": "1.0.0",
@@ -6893,7 +6838,6 @@
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
       "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
-      "dev": true,
       "requires": {
         "camelcase-keys": "^2.0.0",
         "decamelize": "^1.1.2",
@@ -7209,8 +7153,6 @@
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
       "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "fstream": "^1.0.0",
         "glob": "^7.0.3",
@@ -7229,9 +7171,7 @@
         "semver": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
-          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
-          "dev": true,
-          "optional": true
+          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
         }
       }
     },
@@ -7275,11 +7215,9 @@
       }
     },
     "node-sass": {
-      "version": "4.9.3",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.9.3.tgz",
-      "integrity": "sha512-XzXyGjO+84wxyH7fV6IwBOTrEBe2f0a6SBze9QWWYR/cL74AcQUks2AsqcCZenl/Fp/JVbuEaLpgrLtocwBUww==",
-      "dev": true,
-      "optional": true,
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz",
+      "integrity": "sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==",
       "requires": {
         "async-foreach": "^0.1.3",
         "chalk": "^1.1.1",
@@ -7288,46 +7226,27 @@
         "get-stdin": "^4.0.1",
         "glob": "^7.0.3",
         "in-publish": "^2.0.0",
-        "lodash.assign": "^4.2.0",
-        "lodash.clonedeep": "^4.3.2",
-        "lodash.mergewith": "^4.6.0",
+        "lodash": "^4.17.15",
         "meow": "^3.7.0",
         "mkdirp": "^0.5.1",
-        "nan": "^2.10.0",
+        "nan": "^2.13.2",
         "node-gyp": "^3.8.0",
         "npmlog": "^4.0.0",
-        "request": "2.87.0",
+        "request": "^2.88.0",
         "sass-graph": "^2.2.4",
         "stdout-stream": "^1.4.0",
         "true-case-path": "^1.0.2"
       },
       "dependencies": {
-        "ajv": {
-          "version": "5.5.2",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
-          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "co": "^4.6.0",
-            "fast-deep-equal": "^1.0.0",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.3.0"
-          }
-        },
         "ansi-styles": {
           "version": "2.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-          "dev": true,
-          "optional": true
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
         },
         "chalk": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
-          "optional": true,
           "requires": {
             "ansi-styles": "^2.2.1",
             "escape-string-regexp": "^1.0.2",
@@ -7336,76 +7255,20 @@
             "supports-color": "^2.0.0"
           }
         },
-        "har-validator": {
-          "version": "5.0.3",
-          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.0.3.tgz",
-          "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ajv": "^5.1.0",
-            "har-schema": "^2.0.0"
-          }
+        "lodash": {
+          "version": "4.17.15",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+          "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
         },
-        "oauth-sign": {
-          "version": "0.8.2",
-          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
-          "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=",
-          "dev": true,
-          "optional": true
-        },
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-          "dev": true,
-          "optional": true
-        },
-        "request": {
-          "version": "2.87.0",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.87.0.tgz",
-          "integrity": "sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "aws-sign2": "~0.7.0",
-            "aws4": "^1.6.0",
-            "caseless": "~0.12.0",
-            "combined-stream": "~1.0.5",
-            "extend": "~3.0.1",
-            "forever-agent": "~0.6.1",
-            "form-data": "~2.3.1",
-            "har-validator": "~5.0.3",
-            "http-signature": "~1.2.0",
-            "is-typedarray": "~1.0.0",
-            "isstream": "~0.1.2",
-            "json-stringify-safe": "~5.0.1",
-            "mime-types": "~2.1.17",
-            "oauth-sign": "~0.8.2",
-            "performance-now": "^2.1.0",
-            "qs": "~6.5.1",
-            "safe-buffer": "^5.1.1",
-            "tough-cookie": "~2.3.3",
-            "tunnel-agent": "^0.6.0",
-            "uuid": "^3.1.0"
-          }
+        "nan": {
+          "version": "2.14.0",
+          "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
+          "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg=="
         },
         "supports-color": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-          "dev": true,
-          "optional": true
-        },
-        "tough-cookie": {
-          "version": "2.3.4",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz",
-          "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "punycode": "^1.4.1"
-          }
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
         }
       }
     },
@@ -7501,7 +7364,6 @@
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
       "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
-      "dev": true,
       "requires": {
         "abbrev": "1"
       }
@@ -7573,7 +7435,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
       "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
-      "optional": true,
       "requires": {
         "are-we-there-yet": "~1.1.2",
         "console-control-strings": "~1.1.0",
@@ -7801,8 +7662,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
       "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
-      "dev": true,
-      "optional": true,
       "requires": {
         "lcid": "^1.0.0"
       }
@@ -7992,7 +7851,6 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
       "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-      "dev": true,
       "requires": {
         "error-ex": "^1.2.0"
       }
@@ -8130,14 +7988,12 @@
     "pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
-      "dev": true
+      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA="
     },
     "pinkie-promise": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
       "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
-      "dev": true,
       "requires": {
         "pinkie": "^2.0.0"
       }
@@ -8476,8 +8332,7 @@
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
-      "dev": true
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
     },
     "psl": {
       "version": "1.1.29",
@@ -8672,7 +8527,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
       "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
-      "dev": true,
       "requires": {
         "load-json-file": "^1.0.0",
         "normalize-package-data": "^2.3.2",
@@ -8683,7 +8537,6 @@
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
           "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
-          "dev": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "pify": "^2.0.0",
@@ -8693,8 +8546,7 @@
         "pify": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
         }
       }
     },
@@ -8702,7 +8554,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
       "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
-      "dev": true,
       "requires": {
         "find-up": "^1.0.0",
         "read-pkg": "^1.0.0"
@@ -8712,7 +8563,6 @@
           "version": "1.1.2",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
           "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
-          "dev": true,
           "requires": {
             "path-exists": "^2.0.0",
             "pinkie-promise": "^2.0.0"
@@ -8722,7 +8572,6 @@
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
           "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
-          "dev": true,
           "requires": {
             "pinkie-promise": "^2.0.0"
           }
@@ -8758,7 +8607,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
       "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
-      "dev": true,
       "requires": {
         "indent-string": "^2.1.0",
         "strip-indent": "^1.0.1"
@@ -8928,7 +8776,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
       "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
-      "dev": true,
       "requires": {
         "is-finite": "^1.0.0"
       }
@@ -8985,8 +8832,7 @@
     "require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
-      "dev": true
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
     },
     "require-from-string": {
       "version": "2.0.2",
@@ -8997,8 +8843,7 @@
     "require-main-filename": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
-      "dev": true
+      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
     },
     "requires-port": {
       "version": "1.0.0",
@@ -9058,7 +8903,6 @@
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
       "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
-      "dev": true,
       "requires": {
         "glob": "^7.0.5"
       }
@@ -9112,8 +8956,6 @@
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
       "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
-      "dev": true,
-      "optional": true,
       "requires": {
         "glob": "^7.0.0",
         "lodash": "^4.0.0",
@@ -9124,16 +8966,12 @@
         "camelcase": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
-          "dev": true,
-          "optional": true
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
         },
         "cliui": {
           "version": "3.2.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
           "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
-          "dev": true,
-          "optional": true,
           "requires": {
             "string-width": "^1.0.1",
             "strip-ansi": "^3.0.1",
@@ -9143,16 +8981,12 @@
         "y18n": {
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
-          "dev": true,
-          "optional": true
+          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
         },
         "yargs": {
           "version": "7.1.0",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
           "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
-          "dev": true,
-          "optional": true,
           "requires": {
             "camelcase": "^3.0.0",
             "cliui": "^3.2.0",
@@ -9173,8 +9007,6 @@
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
           "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
-          "dev": true,
-          "optional": true,
           "requires": {
             "camelcase": "^3.0.0"
           }
@@ -9224,8 +9056,6 @@
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
       "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
-      "dev": true,
-      "optional": true,
       "requires": {
         "js-base64": "^2.1.8",
         "source-map": "^0.4.2"
@@ -9235,8 +9065,6 @@
           "version": "0.4.4",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
           "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
-          "dev": true,
-          "optional": true,
           "requires": {
             "amdefine": ">=0.0.4"
           }
@@ -9939,11 +9767,9 @@
       "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
     },
     "stdout-stream": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz",
-      "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=",
-      "dev": true,
-      "optional": true,
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
+      "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
       "requires": {
         "readable-stream": "^2.0.1"
       }
@@ -10047,7 +9873,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
       "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
-      "dev": true,
       "requires": {
         "is-utf8": "^0.2.0"
       }
@@ -10062,7 +9887,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
       "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
-      "dev": true,
       "requires": {
         "get-stdin": "^4.0.1"
       }
@@ -10153,14 +9977,12 @@
       "dev": true
     },
     "tar": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
-      "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
-      "dev": true,
-      "optional": true,
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
+      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
       "requires": {
         "block-stream": "*",
-        "fstream": "^1.0.2",
+        "fstream": "^1.0.12",
         "inherits": "2"
       }
     },
@@ -10332,8 +10154,7 @@
     "trim-newlines": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
-      "dev": true
+      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
     },
     "trim-right": {
       "version": "1.0.1",
@@ -10342,29 +10163,11 @@
       "dev": true
     },
     "true-case-path": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.2.tgz",
-      "integrity": "sha1-fskRMJJHZsf1c74wIMNPj9/QDWI=",
-      "dev": true,
-      "optional": true,
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
+      "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
       "requires": {
-        "glob": "^6.0.4"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "6.0.4",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
-          "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "2 || 3",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        }
+        "glob": "^7.1.2"
       }
     },
     "ts-node": {
@@ -11323,7 +11126,6 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
       "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "dev": true,
       "requires": {
         "isexe": "^2.0.0"
       }
@@ -11331,15 +11133,12 @@
     "which-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
-      "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=",
-      "dev": true,
-      "optional": true
+      "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8="
     },
     "wide-align": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
       "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
-      "optional": true,
       "requires": {
         "string-width": "^1.0.2 || 2"
       }
@@ -11419,7 +11218,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
-      "dev": true,
       "requires": {
         "string-width": "^1.0.1",
         "strip-ansi": "^3.0.1"
@@ -11519,8 +11317,7 @@
     "yallist": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-      "dev": true
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
     },
     "yargs": {
       "version": "3.10.0",
diff --git a/package.json b/package.json
index 88923fc1f9ebf41e3625097cfa30d7d8e9742dd1..7891f206e7c2131007ac0226e6b59b965660a2a1 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "ng2-emoji": "^0.2.0",
     "ngx-markdown": "^6.0.1",
     "ngx-moment": "^2.0.0",
+    "node-sass": "^4.13.1",
     "remove-markdown": "^0.2.2",
     "rxjs": "^6.2.0",
     "slugify": "^1.3.0",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8c6fa795c2ad7f2e2aa3cc1ad6afb55d0799507a..2210e3c5d6d1421d7764bfea30907dd5b0383454 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -14,6 +14,7 @@ import { MomentModule } from 'ngx-moment';
 import {
   MatFormFieldModule,
   MatInputModule,
+  MatOptionModule,
   MatSelectModule,
   MatButtonModule,
   MatRadioModule,
@@ -60,6 +61,7 @@ registerLocaleData(localeFR);
     AppRoutingModule,
     MatFormFieldModule,
     MatInputModule,
+    MatOptionModule,
     MatSelectModule,
     MatRadioModule,
     MatButtonModule,
diff --git a/src/app/members/account/account-routing.module.ts b/src/app/members/account/account-routing.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e333e17598739d2590e04475a25c2e0c8e7e90fd
--- /dev/null
+++ b/src/app/members/account/account-routing.module.ts
@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { AccountComponent } from './account.component';
+import {MyDataComponent} from './my-data/my-data.component'
+import {EditDataComponent} from './edit-data/edit-data.component'
+import { PersonnalDataResolver } from './core'
+
+
+const routes: Routes = [
+  {
+    path: '',
+    data: { title: 'Mon Compte' },
+    component: AccountComponent,
+    children: [
+      {
+        path: 'donnees', 
+        component: MyDataComponent,
+        // resolve : {
+        //   personnalData : PersonnalDataResolver
+        // },
+        
+      },
+      {
+        path: 'modifier_donnees', component: EditDataComponent,
+        // resolve : {
+        //   personnalData : PersonnalDataResolver
+        // },
+        
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AccountRoutingModule { }
diff --git a/src/app/members/account/account.component.html b/src/app/members/account/account.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..1838fd558330eb6d2434d9755057ec145526e316
--- /dev/null
+++ b/src/app/members/account/account.component.html
@@ -0,0 +1,8 @@
+<h1 class="text-center">Mon Compte</h1>
+<div class="centered-links">
+    <app-nav-group [links]="navLinks" theme="blue"   [theme]="theme"></app-nav-group>
+</div>
+
+<messages></messages>
+<router-outlet></router-outlet>
+
diff --git a/src/app/members/account/account.component.scss b/src/app/members/account/account.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0ac99de35c01c69a3f9e14ff94ed4e4d521d6a75
--- /dev/null
+++ b/src/app/members/account/account.component.scss
@@ -0,0 +1,38 @@
+@import '~app/showcase-site/sass/mixins';
+
+#page {
+  @include margin-page;
+}
+
+$grid-gap: 1em;
+
+ul.tabs {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+  
+  text-align: center;
+  margin-bottom: 2em;
+  li {
+    padding: 1em;
+    cursor: pointer;
+    color: $color-muted;
+    font-weight: bold;
+    &:hover {
+      color: $color-text;
+    }
+    &.active {
+      color: $color-dark-blue;
+    }
+  }
+  border-bottom: 1px solid $color-light-gray;
+}
+
+.centered-links{
+  display:flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
\ No newline at end of file
diff --git a/src/app/members/account/account.component.ts b/src/app/members/account/account.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9955689b95291c8856e1881d40608e0c0e77a98f
--- /dev/null
+++ b/src/app/members/account/account.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Link } from 'app/shared';
+
+@Component({
+  selector: 'app-account',
+  templateUrl: './account.component.html',
+  styleUrls: ['./account.component.scss']
+})
+export class AccountComponent implements OnInit {
+
+  constructor( private router: Router ) { }
+  
+  navLinks: Link[] = [
+    { href: './donnees', text: 'Mes données' },
+    { href: './modifier_donnees', text: 'Modifier mes données' },
+    
+  ];
+  ngOnInit() {
+    this.router.navigate(['./membres/compte/donnees'])
+  }
+
+}
diff --git a/src/app/members/account/account.module.ts b/src/app/members/account/account.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0dbb10aed37bd0a4ff98a4232f751ae7135b7118
--- /dev/null
+++ b/src/app/members/account/account.module.ts
@@ -0,0 +1,61 @@
+import { NgModule } from '@angular/core';
+
+
+// Modules
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { AgmCoreModule } from '@agm/core';
+import { MomentModule } from 'ngx-moment';
+import { CoreModule } from 'app/core';
+import { SharedModule } from 'app/shared';
+import { AccountRoutingModule } from './account-routing.module';
+
+import {
+  MatFormFieldModule,
+  MatInputModule,
+  MatSelectModule,
+  MatButtonModule,
+  MatSnackBarModule,
+  MatCheckboxModule,
+  MatIconModule,
+  MatSlideToggleModule,
+  MatTableModule,
+  MatDividerModule,
+} from '@angular/material';
+
+// Components
+import {AccountComponent} from './account.component'
+import {MyDataComponent} from './my-data/my-data.component'
+import {EditDataComponent} from './edit-data/edit-data.component'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    MomentModule,
+    RouterModule,
+    AgmCoreModule,
+    CoreModule,
+    SharedModule,
+    AccountRoutingModule,
+    ReactiveFormsModule,
+    // Material
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    MatButtonModule,
+    MatSnackBarModule,
+    MatCheckboxModule,
+    MatIconModule,
+    MatSlideToggleModule,
+    MatTableModule,
+    MatDividerModule,
+  ],
+  declarations: [
+    AccountComponent,
+    MyDataComponent,
+    EditDataComponent
+  ],
+})
+export class AccountModule { }
diff --git a/src/app/members/account/core/index.ts b/src/app/members/account/core/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8b4b69f4d7d792e38feaeb18528fd451821c92e4
--- /dev/null
+++ b/src/app/members/account/core/index.ts
@@ -0,0 +1,2 @@
+export * from './personnal-data.model';
+export * from './personnal-data.service';
diff --git a/src/app/members/account/core/personnal-data.model.ts b/src/app/members/account/core/personnal-data.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5657dfa5affb6a043f92459ddc65a0965c2ade21
--- /dev/null
+++ b/src/app/members/account/core/personnal-data.model.ts
@@ -0,0 +1,89 @@
+import { User, UserAdapter, IAdapter } from 'app/core';
+
+
+
+
+
+export class PersonnalDataSchema {
+    user : User;
+    firstName:string;
+    lastName: string;
+    gender: string;
+    adressNumber:string;
+    street:string;
+    zipCode:string;
+    city:string;
+    personnalPhone:string;
+    parentsPhone:string;
+    parentsEmail:string;
+    school:string;
+    grade:string;
+    section:string;
+    specialTeaching:string;
+    scholarship:string;
+    fatherActivity:string;
+    motherActivity:string;
+    parentsStatus:string;
+    dependantsNumber:number;
+}
+
+export class PersonnalData extends PersonnalDataSchema {
+
+  constructor(args: PersonnalDataSchema) {
+    super();
+    Object.assign(this, args);
+  }
+}
+
+export class PersonnalDataAdapter implements IAdapter<PersonnalData> {
+
+    private userAdapter = new UserAdapter();
+
+  adapt(data: any): PersonnalData {
+    
+    return new PersonnalData({
+        user : this.userAdapter.adapt(data.user),
+        firstName: data.firstName,
+        lastName: data.lastName,
+        gender: data.gender,
+        adressNumber: data.adressNumber,
+        street:data.street,
+        zipCode:data.zipCode,
+        city:data.city,
+        personnalPhone:data.personnalPhone,
+        parentsPhone:data.parentsPhone,
+        parentsEmail:data.parentsEmail,
+        school:data.school,
+        grade:data.grade,
+        section:data.section,
+        specialTeaching:data.specialTeaching,
+        scholarship:data.scholarship,
+        fatherActivity:data.fatherActivity,
+        motherActivity:data.motherActivity,
+        parentsStatus:data.parentsStatus,
+        dependantsNumber:data.dependantsNumber
+    });
+  }
+
+  encode(obj: PersonnalData): any {
+    return {
+        gender: obj.gender,
+        adressNumber: obj.adressNumber,
+        street:obj.street,
+        zipCode:obj.zipCode,
+        city:obj.city,
+        personnalPhone:obj.personnalPhone,
+        parentsPhone:obj.parentsPhone,
+        parentsEmail:obj.parentsEmail,
+        school:obj.school,
+        grade:obj.grade,
+        section:obj.section,
+        specialTeaching:obj.specialTeaching,
+        scholarship:obj.scholarship,
+        fatherActivity:obj.fatherActivity,
+        motherActivity:obj.motherActivity,
+        parentsStatus:obj.parentsStatus,
+        dependantsNumber:obj.dependantsNumber
+    }
+  }
+}
diff --git a/src/app/members/account/core/personnal-data.service.ts b/src/app/members/account/core/personnal-data.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..da7817e833287bad83bec532e81900925020494d
--- /dev/null
+++ b/src/app/members/account/core/personnal-data.service.ts
@@ -0,0 +1,52 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Resolve } from '@angular/router';
+import { Observable, of, forkJoin } from 'rxjs';
+import { tap, map, filter } from 'rxjs/operators';
+import { ApiService, AuthService,} from 'app/core';
+import {PersonnalDataAdapter,PersonnalData} from './personnal-data.model'
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PersonnalDataService extends ApiService {
+
+  private baseUrl = this.apiUrl + 'personnalData/';
+  private adapter = new PersonnalDataAdapter();
+
+  constructor(
+    private http: HttpClient,
+  ) { super(); }
+
+  
+   get(filters: any): Observable<PersonnalData> {
+    const url = this.baseUrl;
+    return this.http.get(url, { params: filters }).pipe(
+      map((data: any) => data.map(item => this.adapter.adapt(item))),
+    );
+  }
+  forUser(userId: number): Observable<PersonnalData> {
+    return this.get({ user: String(userId) });
+  }
+
+  edit(personnalData: PersonnalData): Observable<any> {
+    const body: any = this.adapter.encode(personnalData);
+    return this.http.patch(this.baseUrl, body);
+  }  
+}
+
+@Injectable({
+    providedIn: 'root'
+  })
+export class PersonnalDataResolver implements Resolve<PersonnalData>{
+    
+    constructor(private service: PersonnalDataService, private auth: AuthService) { }
+
+  resolve() {
+    const user = this.auth.getUserSnapshot();
+    return this.service.forUser(user.id);
+  }
+}
+
+
diff --git a/src/app/members/account/edit-data/edit-data.component.html b/src/app/members/account/edit-data/edit-data.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..e1785e27cf69176ff38e6b9082e37f4518196b81
--- /dev/null
+++ b/src/app/members/account/edit-data/edit-data.component.html
@@ -0,0 +1,135 @@
+<app-form-page>
+    <form [formGroup]="formGroup" (ngSubmit)="submit()">
+        <h1>Modifier mes données personelles</h1>
+        <p class="text-center">Informations personnelles</p>
+        <mat-form-field class="full-width" >
+            <input matInput   type="text" formControlName="firstName" placeholder="Prénom" required>
+        </mat-form-field>
+        <mat-form-field class="full-width" >
+            <input matInput   type="text" formControlName="lastName" placeholder="Nom" required>
+          </mat-form-field>
+        <mat-form-field>
+            <mat-label>Sexe</mat-label>
+            <mat-select  formControlName="gender">
+              <mat-option value="man">Homme</mat-option>
+              <mat-option value="woman" >Femme</mat-option>
+              <mat-option value="other">Autre</mat-option>
+            </mat-select>
+          </mat-form-field>
+          <p class="text-center">Adresse</p>
+          <div class="form-group">
+            <mat-form-field class="full-width adress-input quarter-display">
+              <input matInput type="text"  formControlName="adressNumber" placeholder="Numéro de rue" required>
+            </mat-form-field>
+            <mat-form-field class="full-width adress-input">
+              <input  matInput  type="text" formControlName="street" placeholder="Rue" required>
+            </mat-form-field>
+          </div>
+          
+          <div class="form-group">
+            <mat-form-field class="full-width adress-input quarter-display">
+              <input matInput type="text" minlength="5" maxlength="5" formControlName="zipCode" placeholder="Code postal" required>
+              <mat-error *ngIf="formGroup.controls['city'].hasError('pattern')">
+                Vous devez rentrer un code postal correct
+              </mat-error>
+            </mat-form-field>
+        
+            <mat-form-field class="full-width adress-input" >
+              <input matInput   type="text" formControlName="city" placeholder="Ville" required>
+            </mat-form-field>
+          </div>
+          <p class="text-center">Informations de contact</p>
+          <mat-form-field class="full-width" >
+            <input matInput   type="text" formControlName="personnalPhone" placeholder="Numéro de téléphone personnel" required>
+          </mat-form-field>
+          <mat-form-field class="full-width" >
+            <input matInput   type="text" formControlName="parentsPhone" placeholder="Numéro de téléphone des parents" required>
+          </mat-form-field>
+    
+          <mat-form-field class="full-width" >
+            <input matInput   type="text" formControlName="parentsEmail" placeholder="Email des parents" required>
+          </mat-form-field>
+    
+          <p class="text-center">Informations scolaires</p>
+    
+          <mat-form-field class="full-width" >
+            <input matInput   type="text" formControlName="school" placeholder="Lycée" required>
+          </mat-form-field>
+          <div class="form-group">
+            <mat-form-field class="horizontal-display">
+              <mat-label>Classe</mat-label>
+              <mat-select  formControlName="grade">
+                <mat-option value="troisieme">Troisième</mat-option>
+                <mat-option value="seconde">Seconde</mat-option>
+                <mat-option value="premiere" >Première</mat-option>
+                <mat-option value="terminale">Terminale</mat-option>
+              </mat-select>
+            </mat-form-field>
+      
+            <mat-form-field class="horizontal-display">
+              <mat-label>Section</mat-label>
+              <mat-select  formControlName="section">
+                <mat-option value="none">Aucune</mat-option>
+                <mat-option value="s">S</mat-option>
+                <mat-option value="es" >ES</mat-option>
+                <mat-option value="l">L</mat-option>
+                <mat-option value="sti2d">STI2D</mat-option>
+                <mat-option value="sti2a">STI2A</mat-option>
+                <mat-option value="stmg">STMG</mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+          
+    
+          <mat-form-field class="full-width" >
+            <input matInput   type="text" formControlName="specialTeaching" placeholder="Enseignement de spécialité" required>
+          </mat-form-field>
+           
+          <mat-form-field>
+            <mat-label>Boursier </mat-label>
+            <mat-select  formControlName="scholarship">
+              <mat-option *ngFor="let scholarship of possibleScholarships" [value]="scholarship.id">{{ scholarship.name }}</mat-option>
+            </mat-select>
+          </mat-form-field>
+         
+          <p class="text-center">Informations parentales</p>  
+          <div class="form-group">
+            <mat-form-field class="horizontal-display">
+              <mat-label>Activité de la mère </mat-label>
+              <mat-select  formControlName="motherActivity">
+                <mat-option *ngFor="let activity of possibleParentsActivities" [value]="activity.id">{{ activity.name }}</mat-option>
+              </mat-select>
+            </mat-form-field>
+      
+            <mat-form-field class="horizontal-display">
+              <mat-label>Activité du père </mat-label>
+              <mat-select  formControlName="fatherActivity">
+                <mat-option *ngFor="let activity of possibleParentsActivities" [value]="activity.id">{{ activity.name }}</mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
+          
+          <div class="form-group">
+            <mat-form-field class="horizontal-display">
+              <mat-label>Statut des parents </mat-label>
+              <mat-select formControlName="parentsStatus" >
+                <mat-option *ngFor="let status of possibleParentsStatus" [value]="status.id">{{ status.name }}</mat-option>
+              </mat-select>
+            </mat-form-field>
+      
+            <mat-form-field class="horizontal-display" >
+              <input matInput   type="number" formControlName="dependantsNumber" placeholder="Nombre de personnes à charge" required>
+            </mat-form-field>
+          </div>
+          
+        
+        <div class="text-center">
+            <button mat-raised-button color="primary" [disabled]="!formGroup.valid || loading">
+              Modifier
+              <app-load-spinner *ngIf="loading" [block]="false"></app-load-spinner>
+            </button>
+          </div>
+    </form>
+</app-form-page>
+<messages></messages>
+<router-outlet></router-outlet>
diff --git a/src/app/members/account/edit-data/edit-data.component.scss b/src/app/members/account/edit-data/edit-data.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dfbe271ae99bd553d6ca059e4c6c01ef988dc191
--- /dev/null
+++ b/src/app/members/account/edit-data/edit-data.component.scss
@@ -0,0 +1,19 @@
+.checkbox-field {
+    display: block;
+    margin: .5em 0;
+  }
+  .form-group{
+    display:flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .horizontal-display{
+    width:45%;
+  }
+  .adress-input{
+    margin:5px;
+  }
+  
+  .quarter-display{
+    width:25%;
+  }
\ No newline at end of file
diff --git a/src/app/members/account/edit-data/edit-data.component.ts b/src/app/members/account/edit-data/edit-data.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d79d66ac853312ad54e8320fb3ca46b8c9ed9ae1
--- /dev/null
+++ b/src/app/members/account/edit-data/edit-data.component.ts
@@ -0,0 +1,138 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { MatSnackBar } from '@angular/material';
+import {ActivatedRoute} from '@angular/router'
+import { PersonnalData,PersonnalDataService } from '../core';
+import { tap, mergeMap } from 'rxjs/operators';
+import { AuthService } from 'app/core';
+import {User} from 'app/core'
+
+
+
+@Component({
+  selector: 'app-edit-data',
+  templateUrl: './edit-data.component.html',
+  styleUrls: ['./edit-data.component.scss']
+})
+export class EditDataComponent implements OnInit {
+  personnalData: PersonnalData;
+  formGroup : FormGroup;
+  loading = false;
+  public possibleParentsStatus = [
+    {id:"maried",name:"Mariés"},
+    {id:"divorced",name:"Divorcés"},
+    {id:"cohabitation",name:"En concubinage"},
+    {id:"monoparental",name:"Famille monoparentale"}
+  ]
+
+  public possibleParentsActivities = [
+    {id:"farmer",name:"Agriculteur"},
+    {id:"artisan",name:"Artisan, commerçant, chef d'entreprise"},
+    {id:"executive",name:"Cadre, profession intellectuelle supérieure"},
+    {id:"teacher",name:"Enseignant et assimilé"},
+    {id:"intermediate",name:"Profession intermédiaire"},
+    {id:"employee",name:"Employé"},
+    {id:"worker",name:"Ouvrier"},
+    {id:"retreated",name:"Retraité"},
+    {id:"inactive",name:"Inactif"},
+    {id:"other",name:"Autre"} 
+  ]
+
+  public possibleScholarships = [
+    {id:"echelon1",name:"Oui, échelon 1"},
+    {id:"echelon2",name:"Oui, échelon 2"},
+    {id:"echelon3",name:"Oui, échelon 3"},
+    {id:"echelon4",name:"Oui, échelon 4"},
+    {id:"echelon5",name:"Oui, échelon 5"},
+    {id:"echelon6",name:"Oui, échelon 6"},
+    {id:"no",name:"Non"},
+  ]
+
+
+
+  constructor(
+    private route: ActivatedRoute,
+    private personnalDataService : PersonnalDataService,
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private auth: AuthService,
+    private snackBar: MatSnackBar,
+    
+  ) { }
+
+
+  ngOnInit() {
+    //this.personnalData = this.route.snapshot.data['personnalData'];
+    //On enlevera l'exemple quand on se connectera au back
+    this.personnalData = {
+      user: new User({id:0}),
+      firstName:"Exemple",
+      lastName: "Exemple",
+      gender: "man",
+      adressNumber:"25",
+      street:"avenue exemple",
+      zipCode:"99 999",
+      city:"Gif sur Yvette",
+      personnalPhone:"06 99 99 99 99",
+      parentsPhone:"06 99 99 99 99",
+      parentsEmail:"email@email.com",
+      school:"ecole",
+      grade:"troisieme",
+      section:"es",
+      specialTeaching:"specialite",
+      scholarship:"echelon2",
+      fatherActivity:"farmer",
+      motherActivity:"teacher",
+      parentsStatus:"divorced",
+      dependantsNumber:3,
+    }
+    this.createForm()
+  }
+
+  
+  createForm() {
+    
+    this.formGroup = this.formBuilder.group({
+      firstName:this.personnalData.firstName,
+      lastName:this.personnalData.lastName,
+      gender:this.personnalData.gender,
+      adressNumber:this.personnalData.adressNumber,
+      street:this.personnalData.street,
+      zipCode:this.personnalData.zipCode,
+      city:this.personnalData.city,
+      personnalPhone:this.personnalData.personnalPhone,
+      parentsPhone:this.personnalData.parentsPhone,
+      parentsEmail:[this.personnalData.parentsEmail,Validators.email],
+      school:this.personnalData.school,
+      grade:this.personnalData.grade,
+      section:this.personnalData.section,
+      specialTeaching:this.personnalData.specialTeaching,
+      scholarship:this.personnalData.scholarship,
+      fatherActivity:this.personnalData.fatherActivity,
+      motherActivity:this.personnalData.motherActivity,
+      parentsStatus:this.personnalData.parentsStatus,
+      dependantsNumber:this.personnalData.dependantsNumber,
+    })
+ 
+  }
+
+  submit(){
+    //this.loading = true;
+    const {firstName,lastName,gender,adressNumber,street,zipCode,city,personnalPhone,parentsPhone,parentsEmail,school,grade,section,specialTeaching,scholarship,fatherActivity,motherActivity,parentsStatus,dependantsNumber} = this.formGroup.value;
+    const personnalData: PersonnalData = {user:this.personnalData.user,firstName,lastName,gender,adressNumber,street,zipCode,city,personnalPhone,parentsPhone,parentsEmail,school,grade,section,specialTeaching,scholarship,fatherActivity,motherActivity,parentsStatus,dependantsNumber};
+    console.log("data",personnalData)
+
+    //La partie commentée sera à rajouter lors de la connexion au back
+    // this.personnalDataService.edit(personnalData).pipe(
+    //   tap(() => this.loading = false),
+    //   tap(() => this.router.navigate(['./membres/compte/donnees'])),
+    // ).subscribe(
+    //   () => {},
+    //   (error) => this.loading = false,
+    // );
+  
+  }
+  
+
+}
diff --git a/src/app/members/account/my-data/my-data.component.html b/src/app/members/account/my-data/my-data.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..2abea25cf4038c6370ef3301505bdce38ea04301
--- /dev/null
+++ b/src/app/members/account/my-data/my-data.component.html
@@ -0,0 +1,27 @@
+<app-form-page>
+    <h1>Mes données</h1>
+    <p><span class='label'>Prénom : </span>{{personnalData.firstName}} </p> 
+    <p><span class='label'>Nom : </span>{{personnalData.lastName}}</p>
+    <p><span class='label'>Sexe : </span>{{gender[personnalData.gender]}}</p>
+    <mat-divider></mat-divider>
+    <p> <span class='label'>Adresse : </span>{{personnalData.adressNumber}} {{personnalData.street}} {{personnalData.zipCode}}, {{personnalData.city}}</p>
+    <mat-divider></mat-divider>
+    <p><span class='label'>Numéro de téléphone personnel : </span>{{personnalData.personnalPhone}}</p>
+    <p><span class='label'>Numéro de téléphone des parents : </span>{{personnalData.parentsPhone}}</p>
+    <p><span class='label'>Email des parents  : </span>{{personnalData.parentsEmail}}</p>
+    <mat-divider></mat-divider>
+    <p><span class='label'>Lycée : </span>{{personnalData.school}}</p>
+    <p><span class='label'>Classe : </span>{{grade[personnalData.grade]}}</p>
+    <p><span class='label'>Section : </span>{{personnalData.section.toUpperCase()}}</p>
+    <p><span class='label'>Enseignement de spécialité : </span>{{personnalData.specialTeaching}}</p>
+    <p><span class='label'>Boursier : </span>{{scholarship[personnalData.scholarship]}}</p>
+    <mat-divider></mat-divider>
+    <p><span class='label'>Activité du père : </span>{{activity[personnalData.fatherActivity]}}</p>
+    <p><span class='label'>Activité de la mère : </span>{{activity[personnalData.motherActivity]}}</p>
+    <p><span class='label'>Statut des parents : </span>{{status[personnalData.parentsStatus]}}</p>
+    <p><span class='label'>Nombre de personnes à charge : </span>{{personnalData.dependantsNumber}}</p>
+</app-form-page>
+<messages></messages>
+<router-outlet></router-outlet>
+
+  
\ No newline at end of file
diff --git a/src/app/members/account/my-data/my-data.component.scss b/src/app/members/account/my-data/my-data.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..80c01087c041cb2478c88bbd9577c9037b6cb8e2
--- /dev/null
+++ b/src/app/members/account/my-data/my-data.component.scss
@@ -0,0 +1,4 @@
+.label{
+    color:grey;
+    font-weight: 600;
+}
\ No newline at end of file
diff --git a/src/app/members/account/my-data/my-data.component.ts b/src/app/members/account/my-data/my-data.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cb08925ce5b3db29731f903e7f852f89fbfd775a
--- /dev/null
+++ b/src/app/members/account/my-data/my-data.component.ts
@@ -0,0 +1,84 @@
+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute} from '@angular/router'
+import {PersonnalData} from '../core'
+import {User} from 'app/core'
+@Component({
+  selector: 'app-my-data',
+  templateUrl: './my-data.component.html',
+  styleUrls: ['./my-data.component.scss']
+})
+export class MyDataComponent implements OnInit {
+    
+  personnalData: PersonnalData;
+  public gender= {
+    "man":"Homme",
+    "woman":"Femme",
+    "other":"Autre"
+  }
+  public grade = {
+    "troisieme": "Troisième",
+    "seconde":"Seconde",
+    "premiere":"Première",
+    "terminale":"Terminale"
+
+  }
+  public scholarship = {
+    "echelon1": "Oui, échelon 1",
+    "echelon2": "Oui, échelon 2",
+    "echelon3": "Oui, échelon 3",
+    "echelon4": "Oui, échelon 4",
+    "echelon5": "Oui, échelon 5",
+    "echelon6": "Oui, échelon 6",
+    "no" : "Non"
+
+  }
+
+  public activity = {
+    "farmer":"Agriculteur",
+    "artisan":"Artisan, commerçant, chef d'entreprise",
+    "executive":"Cadre, profession intellectuelle supérieure",
+    "teacher":"Enseignant et assimilé",
+    "intermediate":"Profession intermédiaire",
+    "employee":"Employé",
+    "worker":"Ouvrier",
+    "retreated":"Retraité",
+    "inactive":"Inactif",
+    "other":"Autre" 
+  }
+  public status = {
+    "maried":"Mariés",
+    "divorced":"Divorcés",
+    "cohabitation":"En concubinage",
+    "monoparental":"Famille monoparentale"
+  }
+
+  constructor(private route: ActivatedRoute) { }
+
+  ngOnInit() {
+    //this.personnalData = this.route.snapshot.data['personnalData'];
+    //On enlevera l'exemple quand on se connectera au back
+    this.personnalData = {
+      user: new User({id:0}),
+      firstName:"Exemple",
+      lastName:"Exemple",
+      gender: "man",
+      adressNumber:"25",
+      street:"avenue exemple",
+      zipCode:"99 999",
+      city:"Gif sur Yvette",
+      personnalPhone:"06 99 99 99 99",
+      parentsPhone:"06 99 99 99 99",
+      parentsEmail:"email@email.com",
+      school:"ecole",
+      grade:"troisieme",
+      section:"es",
+      specialTeaching:"specialite",
+      scholarship:"echelon2",
+      fatherActivity:"farmer",
+      motherActivity:"teacher",
+      parentsStatus:"divorced",
+      dependantsNumber:3,
+    }
+  }
+
+}
diff --git a/src/app/members/members-routing.module.ts b/src/app/members/members-routing.module.ts
index f5f0fac7402fff4276adf573e911780d8f4b964b..01addc9854b6900c3587dda5388799f5e3b3c91a 100644
--- a/src/app/members/members-routing.module.ts
+++ b/src/app/members/members-routing.module.ts
@@ -26,6 +26,11 @@ const routes: Routes = [
         data: { title: 'Projets' },
         loadChildren: './projects/projects.module#ProjectsModule',
       },
+      {
+        path: 'compte',
+        data: { title: 'Mon Compte' },
+        loadChildren : './account/account.module#AccountModule', 
+      }
     ]
   },
 ];
diff --git a/src/app/members/members.component.ts b/src/app/members/members.component.ts
index 18629a484b44034b44057d56b77895cf922a4619..f209352459a0795824391460446f8b2453f53a6a 100644
--- a/src/app/members/members.component.ts
+++ b/src/app/members/members.component.ts
@@ -19,6 +19,7 @@ export class MembersComponent {
     { href: './', text: 'Mon espace' },
     { href: './projets', text: 'Nos projets' },
     { href: './sorties', text: 'Nos sorties' },
+    { href: './compte', text: 'Mon compte' },
     { text: 'Déconnexion', action: () => this.logout() },
   ];
 
diff --git a/src/app/members/student-home/account-overview/account-overview.component.html b/src/app/members/student-home/account-overview/account-overview.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..d940ef584cbd8fd836d06f5cdc2580375ac9d112
--- /dev/null
+++ b/src/app/members/student-home/account-overview/account-overview.component.html
@@ -0,0 +1,12 @@
+<div class="container">
+    <h2 id="title">Mon Compte</h2>
+  
+    <p>
+      Retrouve et modifie tes données personnelles que tu as saisies lors de ton inscription.
+    </p>
+    <a mat-raised-button color="accent" routerLink="compte/donnees">
+      Voir mon compte
+    </a>
+  
+  </div>
+  
\ No newline at end of file
diff --git a/src/app/members/student-home/account-overview/account-overview.component.scss b/src/app/members/student-home/account-overview/account-overview.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7c2d3209e215d6ad3a736555123a3e65c73b4fec
--- /dev/null
+++ b/src/app/members/student-home/account-overview/account-overview.component.scss
@@ -0,0 +1,15 @@
+@import '~sass/variables';
+
+#title {
+  margin: 0;
+  padding: 0;
+}
+
+.row {
+  padding-bottom: 0.5em;
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+}
diff --git a/src/app/members/student-home/account-overview/account-overview.component.ts b/src/app/members/student-home/account-overview/account-overview.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f3194fec84c74d158c152c5da35460d2e853c3e5
--- /dev/null
+++ b/src/app/members/student-home/account-overview/account-overview.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'account-overview',
+  templateUrl: './account-overview.component.html',
+  styleUrls: ['./account-overview.component.scss']
+})
+
+export class AccountOverviewComponent {}
diff --git a/src/app/members/student-home/student-home.component.html b/src/app/members/student-home/student-home.component.html
index 9693f0e68f2da1c7552e9e9500e6b51f8179563f..a2c967ef1430c2de4514eaa4cdeb89b87824d183 100644
--- a/src/app/members/student-home/student-home.component.html
+++ b/src/app/members/student-home/student-home.component.html
@@ -9,6 +9,9 @@
   <app-pane id="projects">
     <projects-overview class="pane-content"></projects-overview>
   </app-pane>
+  <app-pane id="account">
+    <account-overview class="pane-content"></account-overview>
+  </app-pane>
 </app-two-panes>
 
 <div class="container">
diff --git a/src/app/members/student-home/student-home.component.scss b/src/app/members/student-home/student-home.component.scss
index eb3c7e0d7f567ac81c6d58d424a3b9b03a251b1a..62a40567bfae2c5995659c50696d5206a01782d8 100644
--- a/src/app/members/student-home/student-home.component.scss
+++ b/src/app/members/student-home/student-home.component.scss
@@ -14,3 +14,5 @@
   // TODO use a background image?
   background: $color-purple-lighter;
 }
+
+
diff --git a/src/app/members/student-home/student-home.module.ts b/src/app/members/student-home/student-home.module.ts
index bc853c84f3ac76924a877770337f3c6a18df9f4a..778d82db466c6f63ce0d15f959dfaec1486f01a1 100644
--- a/src/app/members/student-home/student-home.module.ts
+++ b/src/app/members/student-home/student-home.module.ts
@@ -12,6 +12,7 @@ import {
 import { StudentHomeComponent } from './student-home.component';
 import { ProjectsOverviewComponent } from './projects-overview/projects-overview.component';
 import { VisitsOverviewComponent } from './visits-overview/visits-overview.component';
+import {AccountOverviewComponent} from './account-overview/account-overview.component';
 
 @NgModule({
   imports:[
@@ -26,6 +27,7 @@ import { VisitsOverviewComponent } from './visits-overview/visits-overview.compo
     StudentHomeComponent,
     ProjectsOverviewComponent,
     VisitsOverviewComponent,
+    AccountOverviewComponent,
   ]
 })
 
diff --git a/src/app/panes/two-panes/two-panes.component.scss b/src/app/panes/two-panes/two-panes.component.scss
index d0f69030f9e766280e287190b6fc70efc6009392..60c5bdc1a6a77686bb7b9979c7334d72dc2f3435 100644
--- a/src/app/panes/two-panes/two-panes.component.scss
+++ b/src/app/panes/two-panes/two-panes.component.scss
@@ -4,6 +4,6 @@
   display: grid;
   grid-template-columns: 1fr;
   @include media-xs {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
   }
 }
diff --git a/src/app/signup/core/index.ts b/src/app/signup/core/index.ts
index b18613ff1e9c9b8a605abda14e7c580b6606dadf..29d5d8235deb95cf8178b9c553beb5a6407e0c28 100644
--- a/src/app/signup/core/index.ts
+++ b/src/app/signup/core/index.ts
@@ -1,3 +1,5 @@
 export * from './registration.model';
 export * from './registration.service';
+export * from './personnalData.model';
+export * from './personnalData.service';
 export * from './password.matcher';
diff --git a/src/app/signup/core/personnalData.model.ts b/src/app/signup/core/personnalData.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..50e4f3ced39e624b076365250c1bfe2b71d82f1c
--- /dev/null
+++ b/src/app/signup/core/personnalData.model.ts
@@ -0,0 +1,60 @@
+import { Injectable } from '@angular/core';
+import { Address, AddressAdapter } from 'app/core';
+
+class PersonnalDataSchema {
+    gender: string;
+    adressNumber:string;
+    street:string;
+    zipCode:string;
+    city:string;
+    personnalPhone:string;
+    parentsPhone:string;
+    parentsEmail:string;
+    school:string;
+    grade:string;
+    section:string;
+    specialTeaching:string;
+    scholarship:string;
+    fatherActivity:string;
+    motherActivity:string;
+    parentsStatus:string;
+    dependantsNumber:number;
+}
+
+export class PersonnalData extends PersonnalDataSchema {
+
+  constructor(args: PersonnalDataSchema) {
+    super();
+    Object.assign(this, args);
+  }
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PersonnalDataAdapter {
+
+  constructor(private addressAdapter: PersonnalDataAdapter) { }
+
+  encode(obj: PersonnalData): any {
+    return {
+        gender: obj.gender,
+        adressNumber: obj.adressNumber,
+        street:obj.street,
+        zipCode:obj.zipCode,
+        city:obj.city,
+        personnalPhone:obj.personnalPhone,
+        parentsPhone:obj.parentsPhone,
+        parentsEmail:obj.parentsEmail,
+        school:obj.school,
+        grade:obj.grade,
+        section:obj.section,
+        specialTeaching:obj.specialTeaching,
+        scholarship:obj.scholarship,
+        fatherActivity:obj.fatherActivity,
+        motherActivity:obj.motherActivity,
+        parentsStatus:obj.parentsStatus,
+        dependantsNumber:obj.dependantsNumber
+    }
+  }
+}
diff --git a/src/app/signup/core/personnalData.service.ts b/src/app/signup/core/personnalData.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1b8a2ab4b850ea25d4577eab71cd10722f6f36c2
--- /dev/null
+++ b/src/app/signup/core/personnalData.service.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { environment } from 'environments/environment';
+import { PersonnalData,PersonnalDataAdapter } from './personnalData.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PersonnalDataService {
+
+  private baseUrl = environment.apiUrl + 'personnalData/';
+
+  constructor(private http: HttpClient, private adapter: PersonnalDataAdapter) { }
+
+  create(personnalData: PersonnalData): Observable<any> {
+    const body: any = this.adapter.encode(personnalData);
+    
+    return this.http.post(this.baseUrl, body);
+  }
+
+}
diff --git a/src/app/signup/signup.module.ts b/src/app/signup/signup.module.ts
index d33e9b53db693a1f90dd14b05031c9ca576ac093..245b3c29f1ab39ba7c6324f80c88bac1bf9fdaa2 100644
--- a/src/app/signup/signup.module.ts
+++ b/src/app/signup/signup.module.ts
@@ -7,10 +7,12 @@ import { RouterModule } from '@angular/router';
 import {
   MatFormFieldModule,
   MatInputModule,
+  MatSelectModule,
   MatButtonModule,
   MatSnackBarModule,
   MatCheckboxModule,
   MatIconModule,
+  MatSlideToggleModule,
 } from '@angular/material';
 
 import { SharedModule } from 'app/shared';
@@ -30,11 +32,13 @@ import { StudentSignupComponent } from './student-signup/student-signup.componen
     SharedModule,
     // Material
     MatFormFieldModule,
+    MatSelectModule,
     MatInputModule,
     MatButtonModule,
     MatSnackBarModule,
     MatCheckboxModule,
     MatIconModule,
+    MatSlideToggleModule,
   ],
 })
 export class SignupModule { }
diff --git a/src/app/signup/student-signup/student-signup.component.html b/src/app/signup/student-signup/student-signup.component.html
index 97d3cb67736766645d9bdeb7b54db909ce6a3fca..b1ce9b1b06623b8a6f9ff8b2f030527cd251714a 100644
--- a/src/app/signup/student-signup/student-signup.component.html
+++ b/src/app/signup/student-signup/student-signup.component.html
@@ -33,11 +33,7 @@
       </mat-hint>
     </mat-form-field>
 
-    <p>
-      Pour assurer ton inscription au tutorat, il est
-      <strong>obligatoire</strong>
-      de remplir le formulaire d'inscription administrative (Google Form).
-    </p>
+    
 
     <p>
       <small>
@@ -57,17 +53,133 @@
 
     </mat-checkbox>
     <p class="text-center">
-      <a mat-raised-button color="accent" [disabled]="formGroup.value.agree == false"
-        href="https://docs.google.com/forms/u/1/d/1mIEy-FVgYvrL0Ntl8YpLKVn0DqpjSl9S_ekjqYo53rI/viewform"
-        target="_blank">
+      <button type="button" (click)="toggleShowPersonnalDataForm()">
         <mat-icon>launch</mat-icon>
         Remplir le formulaire
-      </a>
+      </button>
     </p>
 
-    <mat-checkbox class="checkbox-field" formControlName="filledForm" required>
-      J'ai rempli le formulaire
-    </mat-checkbox>
+
+    <ng-container *ngIf = "showPersonnalDataForm">
+
+      <mat-form-field>
+        <mat-label>Sexe</mat-label>
+        <mat-select  formControlName="gender">
+          <mat-option value="man">Homme</mat-option>
+          <mat-option value="woman" >Femme</mat-option>
+          <mat-option value="other">Autre</mat-option>
+        </mat-select>
+      </mat-form-field>
+      <p class="text-center">Adresse</p>
+      <div class="form-group">
+        <mat-form-field class="full-width adress-input quarter-display">
+          <input matInput type="text"  formControlName="adressNumber" placeholder="Numéro de rue" required>
+        </mat-form-field>
+        <mat-form-field class="full-width adress-input">
+          <input  matInput  type="text" formControlName="street" placeholder="Rue" required>
+        </mat-form-field>
+      </div>
+      
+      <div class="form-group">
+        <mat-form-field class="full-width adress-input quarter-display">
+          <input matInput type="text" minlength="5" maxlength="5" formControlName="zipCode" placeholder="Code postal" required>
+          <mat-error *ngIf="formGroup.controls['city'].hasError('pattern')">
+            Vous devez rentrer un code postal correct
+          </mat-error>
+        </mat-form-field>
+    
+        <mat-form-field class="full-width adress-input" >
+          <input matInput   type="text" formControlName="city" placeholder="Ville" required>
+        </mat-form-field>
+      </div>
+      <p class="text-center">Informations de contact</p>
+      <mat-form-field class="full-width" >
+        <input matInput   type="text" formControlName="personnalPhone" placeholder="Numéro de téléphone personnel" required>
+      </mat-form-field>
+      <mat-form-field class="full-width" >
+        <input matInput   type="text" formControlName="parentsPhone" placeholder="Numéro de téléphone des parents" required>
+      </mat-form-field>
+
+      <mat-form-field class="full-width" >
+        <input matInput   type="text" formControlName="parentsEmail" placeholder="Email des parents" required>
+      </mat-form-field>
+
+      <p class="text-center">Informations scolaires</p>
+
+      <mat-form-field class="full-width" >
+        <input matInput   type="text" formControlName="school" placeholder="Lycée" required>
+      </mat-form-field>
+      <div class="form-group">
+        <mat-form-field class="horizontal-display">
+          <mat-label>Classe</mat-label>
+          <mat-select  formControlName="grade">
+            <mat-option value="troisieme">Troisième</mat-option>
+            <mat-option value="seconde">Seconde</mat-option>
+            <mat-option value="premiere" >Première</mat-option>
+            <mat-option value="terminale">Terminale</mat-option>
+          </mat-select>
+        </mat-form-field>
+  
+        <mat-form-field class="horizontal-display">
+          <mat-label>Section</mat-label>
+          <mat-select  formControlName="section">
+            <mat-option value="none">Aucune</mat-option>
+            <mat-option value="s">S</mat-option>
+            <mat-option value="es" >ES</mat-option>
+            <mat-option value="l">L</mat-option>
+            <mat-option value="sti2d">STI2D</mat-option>
+            <mat-option value="sti2a">STI2A</mat-option>
+            <mat-option value="stmg">STMG</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+      
+
+      <mat-form-field class="full-width" >
+        <input matInput   type="text" formControlName="specialTeaching" placeholder="Enseignement de spécialité" required>
+      </mat-form-field>
+       
+      <mat-form-field>
+        <mat-label>Boursier </mat-label>
+        <mat-select  formControlName="scholarship">
+          <mat-option *ngFor="let scholarship of possibleScholarships" [value]="scholarship.id">{{ scholarship.name }}</mat-option>
+        </mat-select>
+      </mat-form-field>
+     
+      <p class="text-center">Informations parentales</p>  
+      <div class="form-group">
+        <mat-form-field class="horizontal-display">
+          <mat-label>Activité de la mère </mat-label>
+          <mat-select  formControlName="motherActivity">
+            <mat-option *ngFor="let activity of possibleParentsActivities" [value]="activity.id">{{ activity.name }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+  
+        <mat-form-field class="horizontal-display">
+          <mat-label>Activité du père </mat-label>
+          <mat-select  formControlName="fatherActivity">
+            <mat-option *ngFor="let activity of possibleParentsActivities" [value]="activity.id">{{ activity.name }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+      
+      <div class="form-group">
+        <mat-form-field class="horizontal-display">
+          <mat-label>Statut des parents </mat-label>
+          <mat-select formControlName="parentsStatus" >
+            <mat-option *ngFor="let status of possibleParentsStatus" [value]="status.id">{{ status.name }}</mat-option>
+          </mat-select>
+        </mat-form-field>
+  
+        <mat-form-field class="horizontal-display" >
+          <input matInput   type="number" formControlName="dependantsNumber" placeholder="Nombre de personnes à charge" required>
+        </mat-form-field>
+      </div>
+    </ng-container>
+
+    
+    
+    
 
     <p>
       Il ne te reste plus qu'à choisir un mot de passe. :-)
diff --git a/src/app/signup/student-signup/student-signup.component.scss b/src/app/signup/student-signup/student-signup.component.scss
index 3a616f698c8965a1a969a28db5c7403d685f726d..9c39d1abb3430ba8ddec4521194896d92fdaff6a 100644
--- a/src/app/signup/student-signup/student-signup.component.scss
+++ b/src/app/signup/student-signup/student-signup.component.scss
@@ -2,3 +2,18 @@
   display: block;
   margin: .5em 0;
 }
+.form-group{
+  display:flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.horizontal-display{
+  width:45%;
+}
+.adress-input{
+  margin:5px;
+}
+
+.quarter-display{
+  width:25%;
+}
\ No newline at end of file
diff --git a/src/app/signup/student-signup/student-signup.component.ts b/src/app/signup/student-signup/student-signup.component.ts
index 95a4b368511d13f469b3de1aac8728dc5454ceb2..62966ba8a2caecae924d4395dc4baceaa0ba35d0 100644
--- a/src/app/signup/student-signup/student-signup.component.ts
+++ b/src/app/signup/student-signup/student-signup.component.ts
@@ -4,7 +4,7 @@ import { Router } from '@angular/router';
 import { MatSnackBar } from '@angular/material';
 import { Observable } from 'rxjs';
 import { tap, mergeMap } from 'rxjs/operators';
-import { Registration, RegistrationService, PasswordErrorStateMatcher } from '../core';
+import { Registration, RegistrationService, PasswordErrorStateMatcher,PersonnalData,PersonnalDataService } from '../core';
 import { AuthService } from 'app/core';
 
 
@@ -16,17 +16,51 @@ import { AuthService } from 'app/core';
 export class StudentSignupComponent implements OnInit {
 
   registration: Registration;
+  personnalData: PersonnalData
   formGroup: FormGroup;
   loading = false;
+  public showPersonnalDataForm = false;
+  public zipPattern = new RegExp(/^\d{5}(?:\d{2})?$/)
+  public possibleParentsStatus = [
+    {id:"maried",name:"Mariés"},
+    {id:"divorced",name:"Divorcés"},
+    {id:"cohabitation",name:"En concubinage"},
+    {id:"monoparental",name:"Famille monoparentale"}
+  ]
+
+  public possibleParentsActivities = [
+    {id:"farmer",name:"Agriculteur"},
+    {id:"artisan",name:"Artisan, commerçant, chef d'entreprise"},
+    {id:"executive",name:"Cadre, profession intellectuelle supérieure"},
+    {id:"teacher",name:"Enseignant et assimilé"},
+    {id:"intermediate",name:"Profession intermédiaire"},
+    {id:"employee",name:"Employé"},
+    {id:"worker",name:"Ouvrier"},
+    {id:"retreated",name:"Retraité"},
+    {id:"inactive",name:"Inactif"},
+    {id:"other",name:"Autre"} 
+  ]
+
+  public possibleScholarships = [
+    {id:"echelon1",name:"Oui, échelon 1"},
+    {id:"echelon2",name:"Oui, échelon 2"},
+    {id:"echelon3",name:"Oui, échelon 3"},
+    {id:"echelon4",name:"Oui, échelon 4"},
+    {id:"echelon5",name:"Oui, échelon 5"},
+    {id:"echelon6",name:"Oui, échelon 6"},
+    {id:"no",name:"Non"},
+  ]
 
   matcher = new PasswordErrorStateMatcher();
 
   constructor(
     private registrationService: RegistrationService,
+    private personnalDataService : PersonnalDataService,
     private formBuilder: FormBuilder,
     private router: Router,
     private auth: AuthService,
     private snackBar: MatSnackBar,
+    
   ) { }
 
   ngOnInit() {
@@ -34,11 +68,29 @@ export class StudentSignupComponent implements OnInit {
   }
 
   createForm() {
+    
     this.formGroup = this.formBuilder.group({
       firstName: '',
       lastName: '',
       email: ['', Validators.email],
       phoneNumber: '',
+      gender:'',
+      adressNumber:'',
+      street:'',
+      zipCode:['',Validators.pattern(this.zipPattern)],
+      city:'',
+      personnalPhone:'',
+      parentsPhone:'',
+      parentsEmail:['',Validators.email],
+      school:'',
+      grade:'',
+      section:'',
+      specialTeaching:'',
+      scholarship:'',
+      fatherActivity:'',
+      motherActivity:'',
+      parentsStatus:'',
+      dependantsNumber:'',
       password: '',
       passwordConfirm: '',
       agree: [false, Validators.required],
@@ -53,10 +105,16 @@ export class StudentSignupComponent implements OnInit {
     const passwordConfirm = group.controls.passwordConfirm.value;
     return password === passwordConfirm ? null : { passwordsDifferent: true };
   }
-
+  toggleShowPersonnalDataForm(){
+    this.showPersonnalDataForm = !this.showPersonnalDataForm;
+  }
   submit() {
     this.loading = true;
-    const registration: Registration = this.formGroup.value;
+    const {email,firstName,lastName,phoneNumber} = this.formGroup.value
+    const {gender,adressNumber,street,zipCode,city,personnalPhone,parentsPhone,parentsEmail,school,grade,section,specialTeaching,scholarship,fatherActivity,motherActivity,parentsStatus,dependantsNumber} = this.formGroup.value;
+    const registration: Registration = {email,firstName,lastName,phoneNumber};
+    const personnalData: PersonnalData = {gender,adressNumber,street,zipCode,city,personnalPhone,parentsPhone,parentsEmail,school,grade,section,specialTeaching,scholarship,fatherActivity,motherActivity,parentsStatus,dependantsNumber};
+    console.log(registration)
     const password: string = this.formGroup.controls.password.value;
     this.registrationService.create(registration, password).pipe(
       mergeMap(() => this.auth.login(registration.email, password)),
@@ -66,6 +124,12 @@ export class StudentSignupComponent implements OnInit {
         { duration: 3000 },
       )),
       tap(() => this.loading = false),
+    ).subscribe(
+      () => {},
+      (error) => this.loading = false,
+    );
+    this.personnalDataService.create(personnalData).pipe(
+      tap(() => this.loading = false),
       tap(() => this.router.navigate(['/'])),
     ).subscribe(
       () => {},