diff --git a/.circleci/config.yml b/.circleci/config.yml
index 8184820a..7ef89ba5 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -9,7 +9,7 @@ parameters:
 
 defaults: &defaults
   docker:
-    - image: cimg/python:3.11.7-browsers
+    - image: cimg/python:3.11.11-browsers
 
 test_defaults: &test_defaults
   docker:
@@ -74,7 +74,7 @@ builddeploy_steps: &builddeploy_steps
         source awsenvconf
         ./buildenv.sh -e $DEPLOY_ENV -b ${LOGICAL_ENV}-${APPNAME}-deployvar
         source buildenvvar
-        ./master_deploy.sh -d ECS -e $DEPLOY_ENV -t latest -s ${LOGICAL_ENV}-global-appvar,${LOGICAL_ENV}-${APPNAME}-appvar -i ${APPNAME}
+        ./master_deploy.sh -d ECS -e $DEPLOY_ENV -t latest -s ${LOGICAL_ENV}-global-appvar,${LOGICAL_ENV}-${APPNAME}-appvar -i ${APPNAME} -p FARGATE
         #curl --request POST \
         #--url https://circleci.com/api/v2/project/github/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME/pipeline \
         #--header "Circle-Token: ${CIRCLE_TOKEN}" \
@@ -152,7 +152,7 @@ workflows:
           context: org-global
           filters: &filters-dev
             branches:
-              only: ["develop", "multiround", "release_0.20.9", "metadata-fix"]
+              only: ["develop", "PM-803_wm-regression-fixes"]
 
       # Production builds are exectuted only on tagged commits to the
       # master branch.
diff --git a/config/constants/development.js b/config/constants/development.js
index 55db9b79..a728f4ef 100644
--- a/config/constants/development.js
+++ b/config/constants/development.js
@@ -44,8 +44,10 @@ module.exports = {
   CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c', 'ecd58c69-238f-43a4-a4bb-d172719b9f31', '78b37a69-92d5-4ad7-bf85-c79b65420c79', '929bc408-9cf2-4b3e-ba71-adfbf693046c'],
   FILE_PICKER_API_KEY: process.env.FILE_PICKER_API_KEY,
   FILE_PICKER_CONTAINER_NAME: 'tc-challenge-v5-dev',
+  FILE_PICKER_SUBMISSION_CONTAINER_NAME: process.env.FILE_PICKER_SUBMISSION_CONTAINER_NAME || 'submission-staging-dev',
   FILE_PICKER_REGION: 'us-east-1',
   FILE_PICKER_CNAME: 'fs.topcoder.com',
+  FILE_PICKER_LOCATION: 's3',
   // if idle for this many minutes, show user a prompt saying they'll be logged out
   IDLE_TIMEOUT_MINUTES: 10,
   // duration to show the prompt saying user will be logged out, before actually logging out the user
@@ -55,5 +57,8 @@ module.exports = {
   HEADER_AUTH_URLS_HREF: `https://accounts-auth0.${DOMAIN}?utm_source=community-app-main`,
   HEADER_AUTH_URLS_LOCATION: `https://accounts-auth0.${DOMAIN}?retUrl=%S&utm_source=community-app-main`,
   SKILLS_V5_API_URL: `${API_V5}/standardized-skills/skills/autocomplete`,
-  UPDATE_SKILLS_V5_API_URL: `${API_V5}/standardized-skills/challenge-skills`
+  UPDATE_SKILLS_V5_API_URL: `${API_V5}/standardized-skills/challenge-skills`,
+  SALESFORCE_BILLING_ACCOUNT_LINK: 'https://c.cs18.visual.force.com/apex/baredirect?id=',
+  TYPEFORM_URL: 'https://topcoder.typeform.com/to/YJ7AL4p8',
+  PROFILE_URL: 'https://profiles.topcoder-dev.com/'
 }
diff --git a/config/constants/production.js b/config/constants/production.js
index 84fc03c0..bbebe026 100644
--- a/config/constants/production.js
+++ b/config/constants/production.js
@@ -43,8 +43,10 @@ module.exports = {
   CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c', 'ecd58c69-238f-43a4-a4bb-d172719b9f31', '78b37a69-92d5-4ad7-bf85-c79b65420c79', '929bc408-9cf2-4b3e-ba71-adfbf693046c'],
   FILE_PICKER_API_KEY: process.env.FILE_PICKER_API_KEY,
   FILE_PICKER_CONTAINER_NAME: 'tc-challenge-v5-prod',
+  FILE_PICKER_SUBMISSION_CONTAINER_NAME: process.env.FILE_PICKER_SUBMISSION_CONTAINER_NAME || 'submission-staging-prod',
   FILE_PICKER_REGION: 'us-east-1',
   FILE_PICKER_CNAME: 'fs.topcoder.com',
+  FILE_PICKER_LOCATION: 's3',
   IDLE_TIMEOUT_MINUTES: 10,
   IDLE_TIMEOUT_GRACE_MINUTES: 5,
   MULTI_ROUND_CHALLENGE_TEMPLATE_ID: 'd4201ca4-8437-4d63-9957-3f7708184b07',
@@ -52,5 +54,8 @@ module.exports = {
   HEADER_AUTH_URLS_HREF: `https://accounts-auth0.${DOMAIN}?utm_source=community-app-main`,
   HEADER_AUTH_URLS_LOCATION: `https://accounts-auth0.${DOMAIN}?retUrl=%S&utm_source=community-app-main`,
   SKILLS_V5_API_URL: `${API_V5}/standardized-skills/skills/autocomplete`,
-  UPDATE_SKILLS_V5_API_URL: `${API_V5}/standardized-skills/challenge-skills`
+  UPDATE_SKILLS_V5_API_URL: `${API_V5}/standardized-skills/challenge-skills`,
+  SALESFORCE_BILLING_ACCOUNT_LINK: 'https://topcoder.my.salesforce.com/apex/baredirect?id=',
+  TYPEFORM_URL: 'https://topcoder.typeform.com/to/YJ7AL4p8',
+  PROFILE_URL: 'https://profiles.topcoder.com/'
 }
diff --git a/package-lock.json b/package-lock.json
index 224cf9a2..b7ab6daa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2931,6 +2931,11 @@
         "prop-types": "^15.7.2"
       }
     },
+    "@hookform/resolvers": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.10.0.tgz",
+      "integrity": "sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag=="
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
@@ -3137,6 +3142,25 @@
       "resolved": "https://registry.npmjs.org/@tanem/svg-injector/-/svg-injector-1.2.1.tgz",
       "integrity": "sha512-mA5Q5ulPoGQ+e08Vts1R6xw2QU0BKEnMH/KcqoYoS7Gk6imvMTpyFPeu1g+NOZObSIoAzA3/kRzY8m96cEBA2A=="
     },
+    "@toast-ui/editor": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/@toast-ui/editor/-/editor-2.5.4.tgz",
+      "integrity": "sha512-XsuYlPQxhec9dHQREFAigjE4enHSuGMF7D0YQ6wW7phmusvAu0FnJfZUPjJBoU/GKz7WP5U6fKU9/P+8j65D8A==",
+      "requires": {
+        "@types/codemirror": "0.0.71",
+        "codemirror": "^5.48.4"
+      },
+      "dependencies": {
+        "@types/codemirror": {
+          "version": "0.0.71",
+          "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.71.tgz",
+          "integrity": "sha512-b2oEEnno1LIGKMR7uBEsr40al1UijF1HEpRn0+Yf1xOLl24iQgB7DBpZVMM7y54G5wCNoclDrRO65E6KHPNO2w==",
+          "requires": {
+            "@types/tern": "*"
+          }
+        }
+      }
+    },
     "@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -3255,6 +3279,25 @@
         "@types/unist": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz",
+      "integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+          "requires": {
+            "react-is": "^16.7.0"
+          }
+        }
+      }
+    },
     "@types/katex": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.11.1.tgz",
@@ -3318,6 +3361,21 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
+    "@types/react": {
+      "version": "19.0.8",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.8.tgz",
+      "integrity": "sha512-9P/o1IGdfmQxrujGbIMDyYaaCykhLKc0NGCtYcECNUr9UAaDe4gwvV9bR6tvd5Br1SG0j+PBpbKr2UYY8CwqSw==",
+      "requires": {
+        "csstype": "^3.0.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+          "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+        }
+      }
+    },
     "@types/serve-static": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.0.tgz",
@@ -3560,8 +3618,7 @@
     "acorn-jsx": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.0.1.tgz",
-      "integrity": "sha512-HJ7CfNHrfJLlNTzIEUTj43LNWGkqpRLxm3YjAlcD0ACydk9XynzYsCBHxut+iqt+1aBXkx9UP/w/ZqMr13XIzg==",
-      "dev": true
+      "integrity": "sha512-HJ7CfNHrfJLlNTzIEUTj43LNWGkqpRLxm3YjAlcD0ACydk9XynzYsCBHxut+iqt+1aBXkx9UP/w/ZqMr13XIzg=="
     },
     "acorn-walk": {
       "version": "7.1.1",
@@ -3919,7 +3976,6 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/append-transform/-/append-transform-0.4.0.tgz",
       "integrity": "sha1-126/jKlNJ24keja61EpLdKthGZE=",
-      "dev": true,
       "requires": {
         "default-require-extensions": "^1.0.0"
       }
@@ -3984,7 +4040,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-3.0.0.tgz",
       "integrity": "sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=",
-      "dev": true,
       "requires": {
         "ast-types-flow": "0.0.7",
         "commander": "^2.11.0"
@@ -3994,7 +4049,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
       "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
-      "dev": true,
       "requires": {
         "arr-flatten": "^1.0.1"
       }
@@ -4017,8 +4071,7 @@
     "array-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
-      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
-      "dev": true
+      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM="
     },
     "array-filter": {
       "version": "0.0.1",
@@ -4039,7 +4092,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.1.tgz",
       "integrity": "sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==",
-      "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
         "es-abstract": "^1.17.0",
@@ -4072,14 +4124,12 @@
     "array-unique": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
-      "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
-      "dev": true
+      "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM="
     },
     "array.prototype.flat": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz",
       "integrity": "sha512-gBlRZV0VSmfPIeWfuuy56XZMvbVfbEUnOXUvt3F/eUUUSyzlgLxhEX4YAEpxNAogRGehPSnfXyPtYyKAhkzQhQ==",
-      "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
         "es-abstract": "^1.17.0-next.1"
@@ -4157,14 +4207,12 @@
     "ast-types-flow": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
-      "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=",
-      "dev": true
+      "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0="
     },
     "astral-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
-      "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
-      "dev": true
+      "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg=="
     },
     "async": {
       "version": "2.6.3",
@@ -4310,8 +4358,7 @@
     "axobject-query": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.2.tgz",
-      "integrity": "sha512-ICt34ZmrVt8UQnvPl6TVyDTkmhXmAyAT4Jh5ugfGUX4MOrZ+U/ZY6/sdylRw3qGNr9Ub5AJsaHeDMzNLehRdOQ==",
-      "dev": true
+      "integrity": "sha512-ICt34ZmrVt8UQnvPl6TVyDTkmhXmAyAT4Jh5ugfGUX4MOrZ+U/ZY6/sdylRw3qGNr9Ub5AJsaHeDMzNLehRdOQ=="
     },
     "babel-code-frame": {
       "version": "6.26.0",
@@ -4374,7 +4421,6 @@
       "version": "6.26.1",
       "resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.26.1.tgz",
       "integrity": "sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==",
-      "dev": true,
       "requires": {
         "babel-messages": "^6.23.0",
         "babel-runtime": "^6.26.0",
@@ -4389,8 +4435,7 @@
         "jsesc": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
-          "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s=",
-          "dev": true
+          "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s="
         }
       }
     },
@@ -4398,7 +4443,6 @@
       "version": "6.24.1",
       "resolved": "https://registry.npmjs.org/babel-helpers/-/babel-helpers-6.24.1.tgz",
       "integrity": "sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=",
-      "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0",
         "babel-template": "^6.24.1"
@@ -4408,7 +4452,6 @@
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-23.6.0.tgz",
       "integrity": "sha512-lqKGG6LYXYu+DQh/slrQ8nxXQkEkhugdXsU6St7GmhVS7Ilc/22ArwqXNJrf0QaOBjZB0360qZMwXqDYQHXaew==",
-      "dev": true,
       "requires": {
         "babel-plugin-istanbul": "^4.1.6",
         "babel-preset-jest": "^23.2.0"
@@ -4429,7 +4472,6 @@
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
       "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=",
-      "dev": true,
       "requires": {
         "babel-runtime": "^6.22.0"
       }
@@ -4463,7 +4505,6 @@
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz",
       "integrity": "sha512-PWP9FQ1AhZhS01T/4qLSKoHGY/xvkZdVBGlKM/HuxxS3+sC66HhTNR7+MpbO/so/cz/wY94MeSWJuP1hXIPfwQ==",
-      "dev": true,
       "requires": {
         "babel-plugin-syntax-object-rest-spread": "^6.13.0",
         "find-up": "^2.1.0",
@@ -4474,8 +4515,7 @@
     "babel-plugin-jest-hoist": {
       "version": "23.2.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.2.0.tgz",
-      "integrity": "sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=",
-      "dev": true
+      "integrity": "sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc="
     },
     "babel-plugin-macros": {
       "version": "2.5.0",
@@ -4533,8 +4573,7 @@
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
-      "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=",
-      "dev": true
+      "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U="
     },
     "babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
@@ -4545,7 +4584,6 @@
       "version": "23.2.0",
       "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-23.2.0.tgz",
       "integrity": "sha1-jsegOhOPABoaj7HoETZSvxpV2kY=",
-      "dev": true,
       "requires": {
         "babel-plugin-jest-hoist": "^23.2.0",
         "babel-plugin-syntax-object-rest-spread": "^6.13.0"
@@ -4825,7 +4863,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz",
       "integrity": "sha1-btAhFz4vy0htestFxgCahW9kcHE=",
-      "dev": true,
       "requires": {
         "babel-core": "^6.26.0",
         "babel-runtime": "^6.26.0",
@@ -4840,7 +4877,6 @@
           "version": "6.26.3",
           "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
           "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
-          "dev": true,
           "requires": {
             "babel-code-frame": "^6.26.0",
             "babel-generator": "^6.26.0",
@@ -4867,7 +4903,6 @@
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -4875,14 +4910,12 @@
         "json5": {
           "version": "0.5.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
-          "dev": true
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
         },
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         }
       }
     },
@@ -4906,7 +4939,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz",
       "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=",
-      "dev": true,
       "requires": {
         "babel-runtime": "^6.26.0",
         "babel-traverse": "^6.26.0",
@@ -4919,7 +4951,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz",
       "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=",
-      "dev": true,
       "requires": {
         "babel-code-frame": "^6.26.0",
         "babel-messages": "^6.23.0",
@@ -4936,7 +4967,6 @@
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -4944,14 +4974,12 @@
         "globals": {
           "version": "9.18.0",
           "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
-          "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==",
-          "dev": true
+          "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ=="
         },
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         }
       }
     },
@@ -4959,7 +4987,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
       "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
-      "dev": true,
       "requires": {
         "babel-runtime": "^6.26.0",
         "esutils": "^2.0.2",
@@ -4970,16 +4997,14 @@
         "to-fast-properties": {
           "version": "1.0.3",
           "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
-          "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=",
-          "dev": true
+          "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc="
         }
       }
     },
     "babylon": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
-      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
-      "dev": true
+      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
     },
     "backoff": {
       "version": "2.5.0",
@@ -5219,7 +5244,6 @@
       "version": "1.8.5",
       "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
       "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
-      "dev": true,
       "requires": {
         "expand-range": "^1.8.1",
         "preserve": "^0.2.0",
@@ -5240,7 +5264,6 @@
       "version": "1.11.3",
       "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.3.tgz",
       "integrity": "sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==",
-      "dev": true,
       "requires": {
         "resolve": "1.1.7"
       },
@@ -5248,8 +5271,7 @@
         "resolve": {
           "version": "1.1.7",
           "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
-          "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
-          "dev": true
+          "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs="
         }
       }
     },
@@ -5349,7 +5371,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
       "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
-      "dev": true,
       "requires": {
         "node-int64": "^0.4.0"
       }
@@ -5552,7 +5573,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-1.2.0.tgz",
       "integrity": "sha1-HF/MSJ/QqwDU8ax64QcuMXP7q28=",
-      "dev": true,
       "requires": {
         "rsvp": "^3.3.3"
       }
@@ -5725,8 +5745,7 @@
     "ci-info": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.6.0.tgz",
-      "integrity": "sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==",
-      "dev": true
+      "integrity": "sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A=="
     },
     "cipher-base": {
       "version": "1.0.4",
@@ -5740,8 +5759,7 @@
     "circular-json": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz",
-      "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==",
-      "dev": true
+      "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A=="
     },
     "class-utils": {
       "version": "0.3.6",
@@ -5806,7 +5824,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
       "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
-      "dev": true,
       "requires": {
         "string-width": "^2.1.1",
         "strip-ansi": "^4.0.0",
@@ -5816,14 +5833,12 @@
         "ansi-regex": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
         },
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
           "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -5845,8 +5860,7 @@
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true
+      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ="
     },
     "coa": {
       "version": "2.0.2",
@@ -5863,6 +5877,11 @@
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
+    "codemirror": {
+      "version": "5.65.18",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.18.tgz",
+      "integrity": "sha512-Gaz4gHnkbHMGgahNt3CA5HBk5lLQBqmD/pBgeB4kQU6OedZmqMBjlRF0LSrp2tJ4wlLNPm2FfaUd1pDy0mdlpA=="
+    },
     "codemirror-spell-checker": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz",
@@ -6104,8 +6123,7 @@
     "confusing-browser-globals": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.9.tgz",
-      "integrity": "sha512-KbS1Y0jMtyPgIxjO7ZzMAuUpAKMt1SzCL9fsrKsX6b0zJPTaT0SiSPmewwVZg9UAO83HVIlEhZF84LIjZ0lmAw==",
-      "dev": true
+      "integrity": "sha512-KbS1Y0jMtyPgIxjO7ZzMAuUpAKMt1SzCL9fsrKsX6b0zJPTaT0SiSPmewwVZg9UAO83HVIlEhZF84LIjZ0lmAw=="
     },
     "connect-history-api-fallback": {
       "version": "1.6.0",
@@ -6130,8 +6148,7 @@
     "contains-path": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz",
-      "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=",
-      "dev": true
+      "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo="
     },
     "content-disposition": {
       "version": "0.5.3",
@@ -6766,8 +6783,7 @@
     "damerau-levenshtein": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
-      "integrity": "sha512-JVrozIeElnj3QzfUIt8tB8YMluBJom4Vw9qTPpjGYQ9fYlB3D/rb6OordUxf3xeFB35LKWs0xqcO5U6ySvBtug==",
-      "dev": true
+      "integrity": "sha512-JVrozIeElnj3QzfUIt8tB8YMluBJom4Vw9qTPpjGYQ9fYlB3D/rb6OordUxf3xeFB35LKWs0xqcO5U6ySvBtug=="
     },
     "dashdash": {
       "version": "1.14.1",
@@ -6808,8 +6824,7 @@
     "debug-log": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/debug-log/-/debug-log-1.0.1.tgz",
-      "integrity": "sha1-IwdjLUwEOCuN+KMvcLiVBG1SdF8=",
-      "dev": true
+      "integrity": "sha1-IwdjLUwEOCuN+KMvcLiVBG1SdF8="
     },
     "decamelize": {
       "version": "1.2.0",
@@ -6869,6 +6884,11 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ="
     },
+    "deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+    },
     "default-gateway": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz",
@@ -6882,7 +6902,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-1.0.0.tgz",
       "integrity": "sha1-836hXT4T/9m0N9M+GnW1+5eHTLg=",
-      "dev": true,
       "requires": {
         "strip-bom": "^2.0.0"
       }
@@ -6941,7 +6960,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/deglob/-/deglob-2.1.1.tgz",
       "integrity": "sha512-2kjwuGGonL7gWE1XU4Fv79+vVzpoQCl0V+boMwWtOQJV2AGDabCwez++nB1Nli/8BabAfZQ/UuHPlp6AymKdWw==",
-      "dev": true,
       "requires": {
         "find-root": "^1.0.0",
         "glob": "^7.0.5",
@@ -6954,8 +6972,7 @@
         "ignore": {
           "version": "3.3.10",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
-          "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
-          "dev": true
+          "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug=="
         }
       }
     },
@@ -7037,7 +7054,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
       "integrity": "sha1-920GQ1LN9Docts5hnE7jqUdd4gg=",
-      "dev": true,
       "requires": {
         "repeating": "^2.0.0"
       }
@@ -7045,8 +7061,7 @@
     "detect-newline": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz",
-      "integrity": "sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=",
-      "dev": true
+      "integrity": "sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I="
     },
     "detect-node": {
       "version": "2.0.4",
@@ -7080,8 +7095,7 @@
     "diff": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
-      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
-      "dev": true
+      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA=="
     },
     "diffie-hellman": {
       "version": "5.0.3",
@@ -7150,7 +7164,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
       "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-      "dev": true,
       "requires": {
         "esutils": "^2.0.2"
       }
@@ -7394,8 +7407,7 @@
     "emoji-regex": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.5.1.tgz",
-      "integrity": "sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ==",
-      "dev": true
+      "integrity": "sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ=="
     },
     "emojis-list": {
       "version": "3.0.0",
@@ -7569,7 +7581,6 @@
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-5.6.0.tgz",
       "integrity": "sha512-/eVYs9VVVboX286mBK7bbKnO1yamUy2UCRjiY6MryhQL2PaaXCExsCQ2aO83OeYRhU2eCU/FMFP+tVMoOrzNrA==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
         "ajv": "^6.5.3",
@@ -7614,14 +7625,12 @@
         "ansi-regex": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
         },
         "debug": {
           "version": "3.2.6",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
           "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
@@ -7630,7 +7639,6 @@
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
           "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
-          "dev": true,
           "requires": {
             "esrecurse": "^4.1.0",
             "estraverse": "^4.1.1"
@@ -7640,7 +7648,6 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
           "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -7651,7 +7658,6 @@
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-3.0.8.tgz",
       "integrity": "sha512-Ovi6Bva67OjXrom9Y/SLJRkrGqKhMAL0XCH8BizPhjEVEhYczl2ZKiNZI2CuqO5/CJwAfMwRXAVGY0KToWr1aA==",
-      "dev": true,
       "requires": {
         "confusing-browser-globals": "^1.0.6"
       }
@@ -7659,20 +7665,17 @@
     "eslint-config-standard": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-12.0.0.tgz",
-      "integrity": "sha512-COUz8FnXhqFitYj4DTqHzidjIL/t4mumGZto5c7DrBpvWoie+Sn3P4sLEzUGeYhRElWuFEf8K1S1EfvD1vixCQ==",
-      "dev": true
+      "integrity": "sha512-COUz8FnXhqFitYj4DTqHzidjIL/t4mumGZto5c7DrBpvWoie+Sn3P4sLEzUGeYhRElWuFEf8K1S1EfvD1vixCQ=="
     },
     "eslint-config-standard-jsx": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/eslint-config-standard-jsx/-/eslint-config-standard-jsx-6.0.2.tgz",
-      "integrity": "sha512-D+YWAoXw+2GIdbMBRAzWwr1ZtvnSf4n4yL0gKGg7ShUOGXkSOLerI17K4F6LdQMJPNMoWYqepzQD/fKY+tXNSg==",
-      "dev": true
+      "integrity": "sha512-D+YWAoXw+2GIdbMBRAzWwr1ZtvnSf4n4yL0gKGg7ShUOGXkSOLerI17K4F6LdQMJPNMoWYqepzQD/fKY+tXNSg=="
     },
     "eslint-config-standard-react": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/eslint-config-standard-react/-/eslint-config-standard-react-7.0.2.tgz",
       "integrity": "sha512-Zv/vubIfrwx4IbRXAggRjaswLXKdfFeuGfN365cVTaRmfpAy/7dIxMvJRZkUT99zEx8FOjTXL0KC4psfDjK/+w==",
-      "dev": true,
       "requires": {
         "eslint-config-standard-jsx": "^6.0.1"
       }
@@ -7681,7 +7684,6 @@
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz",
       "integrity": "sha512-sfmTqJfPSizWu4aymbPr4Iidp5yKm8yDkHp+Ir3YiTHiiDfxh69mOUsmiqW6RZ9zRXFaF64GtYmN7e+8GHBv6Q==",
-      "dev": true,
       "requires": {
         "debug": "^2.6.9",
         "resolve": "^1.5.0"
@@ -7691,7 +7693,6 @@
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -7699,8 +7700,7 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         }
       }
     },
@@ -7708,7 +7708,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/eslint-loader/-/eslint-loader-2.1.1.tgz",
       "integrity": "sha512-1GrJFfSevQdYpoDzx8mEE2TDWsb/zmFuY09l6hURg1AeFIKQOvZ+vH0UPjzmd1CZIbfTV5HUkMeBmFiDBkgIsQ==",
-      "dev": true,
       "requires": {
         "loader-fs-cache": "^1.0.0",
         "loader-utils": "^1.0.2",
@@ -7721,7 +7720,6 @@
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.4.0.tgz",
       "integrity": "sha512-14tltLm38Eu3zS+mt0KvILC3q8jyIAH518MlG+HO0p+yK885Lb1UHTY/UgR91eOyGdmxAPb+OLoW4znqIT6Ndw==",
-      "dev": true,
       "requires": {
         "debug": "^2.6.8",
         "pkg-dir": "^2.0.0"
@@ -7731,7 +7729,6 @@
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -7739,8 +7736,7 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         }
       }
     },
@@ -7748,7 +7744,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-es/-/eslint-plugin-es-1.4.0.tgz",
       "integrity": "sha512-XfFmgFdIUDgvaRAlaXUkxrRg5JSADoRC8IkKLc/cISeR3yHVMefFHQZpcyXXEUUPHfy5DwviBcrfqlyqEwlQVw==",
-      "dev": true,
       "requires": {
         "eslint-utils": "^1.3.0",
         "regexpp": "^2.0.1"
@@ -7758,7 +7753,6 @@
       "version": "2.50.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.50.1.tgz",
       "integrity": "sha512-9kRxF9hfM/O6WGZcZPszOVPd2W0TLHBtceulLTsGfwMPtiCCLnCW0ssRiOOiXyqrCA20pm1iXdXm7gQeN306zQ==",
-      "dev": true,
       "requires": {
         "lodash": "^4.17.10"
       }
@@ -7767,7 +7761,6 @@
       "version": "2.20.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.20.2.tgz",
       "integrity": "sha512-FObidqpXrR8OnCh4iNsxy+WACztJLXAHBO5hK79T1Hc77PgQZkyDGA5Ag9xAvRpglvLNxhH/zSmZ70/pZ31dHg==",
-      "dev": true,
       "requires": {
         "array-includes": "^3.0.3",
         "array.prototype.flat": "^1.2.1",
@@ -7787,7 +7780,6 @@
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -7796,7 +7788,6 @@
           "version": "1.5.0",
           "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
           "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
-          "dev": true,
           "requires": {
             "esutils": "^2.0.2",
             "isarray": "^1.0.0"
@@ -7806,7 +7797,6 @@
           "version": "2.6.0",
           "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz",
           "integrity": "sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==",
-          "dev": true,
           "requires": {
             "debug": "^2.6.9",
             "pkg-dir": "^2.0.0"
@@ -7816,7 +7806,6 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
           "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
-          "dev": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "parse-json": "^2.2.0",
@@ -7827,14 +7816,12 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         },
         "parse-json": {
           "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"
           }
@@ -7843,7 +7830,6 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
           "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
-          "dev": true,
           "requires": {
             "pify": "^2.0.0"
           }
@@ -7852,7 +7838,6 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
           "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
-          "dev": true,
           "requires": {
             "load-json-file": "^2.0.0",
             "normalize-package-data": "^2.3.2",
@@ -7863,7 +7848,6 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz",
           "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
-          "dev": true,
           "requires": {
             "find-up": "^2.0.0",
             "read-pkg": "^2.0.0"
@@ -7873,7 +7857,6 @@
           "version": "1.17.0",
           "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
           "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
-          "dev": true,
           "requires": {
             "path-parse": "^1.0.6"
           }
@@ -7881,8 +7864,7 @@
         "strip-bom": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
-          "dev": true
+          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
         }
       }
     },
@@ -7890,7 +7872,6 @@
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.1.2.tgz",
       "integrity": "sha512-7gSSmwb3A+fQwtw0arguwMdOdzmKUgnUcbSNlo+GjKLAQFuC2EZxWqG9XHRI8VscBJD5a8raz3RuxQNFW+XJbw==",
-      "dev": true,
       "requires": {
         "aria-query": "^3.0.0",
         "array-includes": "^3.0.3",
@@ -7906,7 +7887,6 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-8.0.1.tgz",
       "integrity": "sha512-ZjOjbjEi6jd82rIpFSgagv4CHWzG9xsQAVp1ZPlhRnnYxcTgENUVBvhYmkQ7GvT1QFijUSo69RaiOJKhMu6i8w==",
-      "dev": true,
       "requires": {
         "eslint-plugin-es": "^1.3.1",
         "eslint-utils": "^1.3.1",
@@ -7919,22 +7899,19 @@
         "ignore": {
           "version": "5.1.4",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz",
-          "integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==",
-          "dev": true
+          "integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A=="
         }
       }
     },
     "eslint-plugin-promise": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-4.2.1.tgz",
-      "integrity": "sha512-VoM09vT7bfA7D+upt+FjeBO5eHIJQBUWki1aPvB+vbNiHS3+oGIJGIeyBtKQTME6UPXXy3vV07OL1tHd3ANuDw==",
-      "dev": true
+      "integrity": "sha512-VoM09vT7bfA7D+upt+FjeBO5eHIJQBUWki1aPvB+vbNiHS3+oGIJGIeyBtKQTME6UPXXy3vV07OL1tHd3ANuDw=="
     },
     "eslint-plugin-react": {
       "version": "7.11.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.11.1.tgz",
       "integrity": "sha512-cVVyMadRyW7qsIUh3FHp3u6QHNhOgVrLQYdQEB1bPWBsgbNCHdFAeNMquBMCcZJu59eNthX053L70l7gRt4SCw==",
-      "dev": true,
       "requires": {
         "array-includes": "^3.0.3",
         "doctrine": "^2.1.0",
@@ -7946,8 +7923,7 @@
     "eslint-plugin-standard": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-standard/-/eslint-plugin-standard-4.0.1.tgz",
-      "integrity": "sha512-v/KBnfyaOMPmZc/dmc6ozOdWqekGp7bBGq4jLAecEfPGmfKiWS4sA8sC0LqiV9w5qmXAtXVn4M3p1jSyhY85SQ==",
-      "dev": true
+      "integrity": "sha512-v/KBnfyaOMPmZc/dmc6ozOdWqekGp7bBGq4jLAecEfPGmfKiWS4sA8sC0LqiV9w5qmXAtXVn4M3p1jSyhY85SQ=="
     },
     "eslint-scope": {
       "version": "3.7.1",
@@ -7962,7 +7938,6 @@
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz",
       "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==",
-      "dev": true,
       "requires": {
         "eslint-visitor-keys": "^1.1.0"
       },
@@ -7970,8 +7945,7 @@
         "eslint-visitor-keys": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz",
-          "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==",
-          "dev": true
+          "integrity": "sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A=="
         }
       }
     },
@@ -7984,7 +7958,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-4.1.0.tgz",
       "integrity": "sha512-I5BycZW6FCVIub93TeVY1s7vjhP9CY6cXCznIRfiig7nRviKZYdRnj/sHEWC6A7WE9RDWOFq9+7OsWSYz8qv2w==",
-      "dev": true,
       "requires": {
         "acorn": "^6.0.2",
         "acorn-jsx": "^5.0.0",
@@ -8000,7 +7973,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.0.1.tgz",
       "integrity": "sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==",
-      "dev": true,
       "requires": {
         "estraverse": "^4.0.0"
       }
@@ -8059,7 +8031,6 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.2.2.tgz",
       "integrity": "sha512-FIUCJz1RbuS0FKTdaAafAByGS0CPvU3R0MeHxgtl+djzCc//F8HakL8GzmVNZanasTbTAY/3DRFA0KpVqj/eAw==",
-      "dev": true,
       "requires": {
         "merge": "^1.2.0"
       }
@@ -8081,14 +8052,12 @@
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-      "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=",
-      "dev": true
+      "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw="
     },
     "expand-brackets": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
       "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
-      "dev": true,
       "requires": {
         "is-posix-bracket": "^0.1.0"
       }
@@ -8097,7 +8066,6 @@
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
       "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
-      "dev": true,
       "requires": {
         "fill-range": "^2.1.0"
       }
@@ -8106,7 +8074,6 @@
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/expect/-/expect-23.6.0.tgz",
       "integrity": "sha512-dgSoOHgmtn/aDGRVFWclQyPDKl2CQRq0hmIEoUAuQs/2rn2NcvCWcSCovm6BLeuB/7EZuLGu2QfnR+qRt5OM4w==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.0",
         "jest-diff": "^23.6.0",
@@ -8216,7 +8183,6 @@
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
       "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
-      "dev": true,
       "requires": {
         "is-extglob": "^1.0.0"
       }
@@ -8579,7 +8545,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
       "integrity": "sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==",
-      "dev": true,
       "requires": {
         "bser": "2.1.1"
       }
@@ -8611,7 +8576,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-2.0.0.tgz",
       "integrity": "sha1-w5KZDD5oR4PYOLjISkXYoEhFg2E=",
-      "dev": true,
       "requires": {
         "flat-cache": "^1.2.1",
         "object-assign": "^4.0.1"
@@ -8640,14 +8604,12 @@
     "filename-regex": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
-      "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
-      "dev": true
+      "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY="
     },
     "fileset": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz",
       "integrity": "sha1-jnVIqW08wjJ+5eZ0FocjozO7oqA=",
-      "dev": true,
       "requires": {
         "glob": "^7.0.3",
         "minimatch": "^3.0.3"
@@ -8704,7 +8666,6 @@
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.4.tgz",
       "integrity": "sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==",
-      "dev": true,
       "requires": {
         "is-number": "^2.1.0",
         "isobject": "^2.0.0",
@@ -8717,7 +8678,6 @@
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
           "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
-          "dev": true,
           "requires": {
             "isarray": "1.0.0"
           }
@@ -8788,7 +8748,6 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.4.tgz",
       "integrity": "sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==",
-      "dev": true,
       "requires": {
         "circular-json": "^0.3.1",
         "graceful-fs": "^4.1.2",
@@ -8904,6 +8863,41 @@
       "resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.6.tgz",
       "integrity": "sha512-KcpbcpuLNOwrEjnbpMC0gS+X8ciDoZE1kkqzat4a8vrprf+s9pKNQ/QIwWfbfs4ltgmFl3MD177SNTkve3BwGQ=="
     },
+    "formik": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz",
+      "integrity": "sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==",
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+          "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+          "requires": {
+            "react-is": "^16.7.0"
+          }
+        },
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        },
+        "tslib": {
+          "version": "2.8.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+          "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+        }
+      }
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -9006,487 +9000,13 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
-      "version": "1.2.12",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.12.tgz",
-      "integrity": "sha512-Ggd/Ktt7E7I8pxZRbGIs7vwqAPscSESMrCSkx2FtWeqmheJgCo2R74fTsZFCifr0VTPwqRpPv17+6b8Zp7th0Q==",
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
       "optional": true,
       "requires": {
         "bindings": "^1.5.0",
-        "nan": "^2.12.1",
-        "node-pre-gyp": "*"
-      },
-      "dependencies": {
-        "abbrev": {
-          "version": "1.1.1",
-          "bundled": true,
-          "optional": true
-        },
-        "ansi-regex": {
-          "version": "2.1.1",
-          "bundled": true,
-          "optional": true
-        },
-        "aproba": {
-          "version": "1.2.0",
-          "bundled": true,
-          "optional": true
-        },
-        "are-we-there-yet": {
-          "version": "1.1.5",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "delegates": "^1.0.0",
-            "readable-stream": "^2.0.6"
-          }
-        },
-        "balanced-match": {
-          "version": "1.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "brace-expansion": {
-          "version": "1.1.11",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "balanced-match": "^1.0.0",
-            "concat-map": "0.0.1"
-          }
-        },
-        "chownr": {
-          "version": "1.1.4",
-          "bundled": true,
-          "optional": true
-        },
-        "code-point-at": {
-          "version": "1.1.0",
-          "bundled": true,
-          "optional": true
-        },
-        "concat-map": {
-          "version": "0.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "console-control-strings": {
-          "version": "1.1.0",
-          "bundled": true,
-          "optional": true
-        },
-        "core-util-is": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "debug": {
-          "version": "3.2.6",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "deep-extend": {
-          "version": "0.6.0",
-          "bundled": true,
-          "optional": true
-        },
-        "delegates": {
-          "version": "1.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "detect-libc": {
-          "version": "1.0.3",
-          "bundled": true,
-          "optional": true
-        },
-        "fs-minipass": {
-          "version": "1.2.7",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "minipass": "^2.6.0"
-          }
-        },
-        "fs.realpath": {
-          "version": "1.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "gauge": {
-          "version": "2.7.4",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "aproba": "^1.0.3",
-            "console-control-strings": "^1.0.0",
-            "has-unicode": "^2.0.0",
-            "object-assign": "^4.1.0",
-            "signal-exit": "^3.0.0",
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1",
-            "wide-align": "^1.1.0"
-          }
-        },
-        "glob": {
-          "version": "7.1.6",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "has-unicode": {
-          "version": "2.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "iconv-lite": {
-          "version": "0.4.24",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
-          }
-        },
-        "ignore-walk": {
-          "version": "3.0.3",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "minimatch": "^3.0.4"
-          }
-        },
-        "inflight": {
-          "version": "1.0.6",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "once": "^1.3.0",
-            "wrappy": "1"
-          }
-        },
-        "inherits": {
-          "version": "2.0.4",
-          "bundled": true,
-          "optional": true
-        },
-        "ini": {
-          "version": "1.3.5",
-          "bundled": true,
-          "optional": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "brace-expansion": "^1.1.7"
-          }
-        },
-        "minimist": {
-          "version": "1.2.5",
-          "bundled": true,
-          "optional": true
-        },
-        "minipass": {
-          "version": "2.9.0",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.0"
-          }
-        },
-        "minizlib": {
-          "version": "1.3.3",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "minipass": "^2.9.0"
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.3",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "minimist": "^1.2.5"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "bundled": true,
-          "optional": true
-        },
-        "needle": {
-          "version": "2.3.3",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "debug": "^3.2.6",
-            "iconv-lite": "^0.4.4",
-            "sax": "^1.2.4"
-          }
-        },
-        "node-pre-gyp": {
-          "version": "0.14.0",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "detect-libc": "^1.0.2",
-            "mkdirp": "^0.5.1",
-            "needle": "^2.2.1",
-            "nopt": "^4.0.1",
-            "npm-packlist": "^1.1.6",
-            "npmlog": "^4.0.2",
-            "rc": "^1.2.7",
-            "rimraf": "^2.6.1",
-            "semver": "^5.3.0",
-            "tar": "^4.4.2"
-          }
-        },
-        "nopt": {
-          "version": "4.0.3",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "abbrev": "1",
-            "osenv": "^0.1.4"
-          }
-        },
-        "npm-bundled": {
-          "version": "1.1.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "npm-normalize-package-bin": "^1.0.1"
-          }
-        },
-        "npm-normalize-package-bin": {
-          "version": "1.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "npm-packlist": {
-          "version": "1.4.8",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "ignore-walk": "^3.0.1",
-            "npm-bundled": "^1.0.1",
-            "npm-normalize-package-bin": "^1.0.1"
-          }
-        },
-        "npmlog": {
-          "version": "4.1.2",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "are-we-there-yet": "~1.1.2",
-            "console-control-strings": "~1.1.0",
-            "gauge": "~2.7.3",
-            "set-blocking": "~2.0.0"
-          }
-        },
-        "number-is-nan": {
-          "version": "1.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "bundled": true,
-          "optional": true
-        },
-        "once": {
-          "version": "1.4.0",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "wrappy": "1"
-          }
-        },
-        "os-homedir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "os-tmpdir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "osenv": {
-          "version": "0.1.5",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "os-homedir": "^1.0.0",
-            "os-tmpdir": "^1.0.0"
-          }
-        },
-        "path-is-absolute": {
-          "version": "1.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "process-nextick-args": {
-          "version": "2.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "rc": {
-          "version": "1.2.8",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "deep-extend": "^0.6.0",
-            "ini": "~1.3.0",
-            "minimist": "^1.2.0",
-            "strip-json-comments": "~2.0.1"
-          }
-        },
-        "readable-stream": {
-          "version": "2.3.7",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
-          }
-        },
-        "rimraf": {
-          "version": "2.7.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "bundled": true,
-          "optional": true
-        },
-        "safer-buffer": {
-          "version": "2.1.2",
-          "bundled": true,
-          "optional": true
-        },
-        "sax": {
-          "version": "1.2.4",
-          "bundled": true,
-          "optional": true
-        },
-        "semver": {
-          "version": "5.7.1",
-          "bundled": true,
-          "optional": true
-        },
-        "set-blocking": {
-          "version": "2.0.0",
-          "bundled": true,
-          "optional": true
-        },
-        "signal-exit": {
-          "version": "3.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
-          }
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        },
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "bundled": true,
-          "optional": true
-        },
-        "tar": {
-          "version": "4.4.13",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "chownr": "^1.1.1",
-            "fs-minipass": "^1.2.5",
-            "minipass": "^2.8.6",
-            "minizlib": "^1.2.1",
-            "mkdirp": "^0.5.0",
-            "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.3"
-          }
-        },
-        "util-deprecate": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "wide-align": {
-          "version": "1.1.3",
-          "bundled": true,
-          "optional": true,
-          "requires": {
-            "string-width": "^1.0.2 || 2"
-          }
-        },
-        "wrappy": {
-          "version": "1.0.2",
-          "bundled": true,
-          "optional": true
-        },
-        "yallist": {
-          "version": "3.1.1",
-          "bundled": true,
-          "optional": true
-        }
+        "nan": "^2.12.1"
       }
     },
     "fstream": {
@@ -9508,8 +9028,7 @@
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
-      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
-      "dev": true
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
     },
     "gauge": {
       "version": "2.7.4",
@@ -9557,8 +9076,7 @@
     "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-intrinsic": {
       "version": "1.2.0",
@@ -9620,7 +9138,6 @@
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
       "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
-      "dev": true,
       "requires": {
         "glob-parent": "^2.0.0",
         "is-glob": "^2.0.0"
@@ -9630,7 +9147,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
       "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
-      "dev": true,
       "requires": {
         "is-glob": "^2.0.0"
       }
@@ -9723,8 +9239,7 @@
     "growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
-      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
-      "dev": true
+      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
     },
     "gzip-size": {
       "version": "5.0.0",
@@ -9799,7 +9314,6 @@
       "version": "4.7.6",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.6.tgz",
       "integrity": "sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==",
-      "dev": true,
       "requires": {
         "minimist": "^1.2.5",
         "neo-async": "^2.6.0",
@@ -9811,14 +9325,12 @@
         "minimist": {
           "version": "1.2.5",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-          "dev": true
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
         },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
@@ -10151,7 +9663,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
       "integrity": "sha1-42w/LSyufXRqhX440Y1fMqeILbg=",
-      "dev": true,
       "requires": {
         "os-homedir": "^1.0.0",
         "os-tmpdir": "^1.0.1"
@@ -10750,8 +10261,7 @@
     "ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-      "dev": true
+      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
     },
     "immer": {
       "version": "1.10.0",
@@ -10787,7 +10297,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-1.0.0.tgz",
       "integrity": "sha512-vAaZHieK9qjGo58agRBg+bhHX3hoTZU/Oa3GESWLz7t1U62fk63aHuDJJEteXoDeTCcPmUT+z38gkHPZkkmpmQ==",
-      "dev": true,
       "requires": {
         "pkg-dir": "^2.0.0",
         "resolve-cwd": "^2.0.0"
@@ -10849,7 +10358,6 @@
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.2.tgz",
       "integrity": "sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==",
-      "dev": true,
       "requires": {
         "ansi-escapes": "^3.2.0",
         "chalk": "^2.4.2",
@@ -10869,14 +10377,12 @@
         "ansi-regex": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
         },
         "chalk": {
           "version": "2.4.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
           "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-          "dev": true,
           "requires": {
             "ansi-styles": "^3.2.1",
             "escape-string-regexp": "^1.0.5",
@@ -10887,7 +10393,6 @@
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
           "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-          "dev": true,
           "requires": {
             "ansi-regex": "^4.1.0"
           }
@@ -10914,8 +10419,7 @@
     "invert-kv": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
-      "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
-      "dev": true
+      "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA=="
     },
     "ip": {
       "version": "1.1.5",
@@ -10992,7 +10496,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz",
       "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==",
-      "dev": true,
       "requires": {
         "ci-info": "^1.5.0"
       }
@@ -11061,14 +10564,12 @@
     "is-dotfile": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
-      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
-      "dev": true
+      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE="
     },
     "is-equal-shallow": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz",
       "integrity": "sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=",
-      "dev": true,
       "requires": {
         "is-primitive": "^2.0.0"
       }
@@ -11081,8 +10582,7 @@
     "is-extglob": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-      "dev": true
+      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA="
     },
     "is-finite": {
       "version": "1.1.0",
@@ -11097,14 +10597,12 @@
     "is-generator-fn": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-1.0.0.tgz",
-      "integrity": "sha1-lp1J4bszKfa7fwkIm+JleLLd1Go=",
-      "dev": true
+      "integrity": "sha1-lp1J4bszKfa7fwkIm+JleLLd1Go="
     },
     "is-glob": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
       "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-      "dev": true,
       "requires": {
         "is-extglob": "^1.0.0"
       }
@@ -11118,7 +10616,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
       "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=",
-      "dev": true,
       "requires": {
         "kind-of": "^3.0.2"
       }
@@ -11165,8 +10662,7 @@
     "is-posix-bracket": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz",
-      "integrity": "sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=",
-      "dev": true
+      "integrity": "sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q="
     },
     "is-potential-custom-element-name": {
       "version": "1.0.0",
@@ -11176,8 +10672,7 @@
     "is-primitive": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
-      "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=",
-      "dev": true
+      "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU="
     },
     "is-promise": {
       "version": "2.1.0",
@@ -11210,8 +10705,7 @@
     "is-string": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz",
-      "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==",
-      "dev": true
+      "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ=="
     },
     "is-svg": {
       "version": "3.0.0",
@@ -11287,7 +10781,6 @@
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/istanbul-api/-/istanbul-api-1.3.7.tgz",
       "integrity": "sha512-4/ApBnMVeEPG3EkSzcw25wDe4N66wxwn+KKn6b47vyek8Xb3NBAcg4xfuQbS7BqcZuTX4wxfD5lVagdggR3gyA==",
-      "dev": true,
       "requires": {
         "async": "^2.1.4",
         "fileset": "^2.0.2",
@@ -11305,14 +10798,12 @@
     "istanbul-lib-coverage": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz",
-      "integrity": "sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ==",
-      "dev": true
+      "integrity": "sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ=="
     },
     "istanbul-lib-hook": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/istanbul-lib-hook/-/istanbul-lib-hook-1.2.2.tgz",
       "integrity": "sha512-/Jmq7Y1VeHnZEQ3TL10VHyb564mn6VrQXHchON9Jf/AEcmQ3ZIiyD1BVzNOKTZf/G3gE+kiGK6SmpF9y3qGPLw==",
-      "dev": true,
       "requires": {
         "append-transform": "^0.4.0"
       }
@@ -11321,7 +10812,6 @@
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.2.tgz",
       "integrity": "sha512-aWHxfxDqvh/ZlxR8BBaEPVSWDPUkGD63VjGQn3jcw8jCp7sHEMKcrj4xfJn/ABzdMEHiQNyvDQhqm5o8+SQg7A==",
-      "dev": true,
       "requires": {
         "babel-generator": "^6.18.0",
         "babel-template": "^6.16.0",
@@ -11336,7 +10826,6 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-1.1.5.tgz",
       "integrity": "sha512-UsYfRMoi6QO/doUshYNqcKJqVmFe9w51GZz8BS3WB0lYxAllQYklka2wP9+dGZeHYaWIdcXUx8JGdbqaoXRXzw==",
-      "dev": true,
       "requires": {
         "istanbul-lib-coverage": "^1.2.1",
         "mkdirp": "^0.5.1",
@@ -11347,14 +10836,12 @@
         "has-flag": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
-          "dev": true
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo="
         },
         "supports-color": {
           "version": "3.2.3",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
           "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
-          "dev": true,
           "requires": {
             "has-flag": "^1.0.0"
           }
@@ -11365,7 +10852,6 @@
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.6.tgz",
       "integrity": "sha512-TtbsY5GIHgbMsMiRw35YBHGpZ1DVFEO19vxxeiDMYaeOFOCzfnYVxvl6pOUIZR4dtPhAGpSMup8OyF8ubsaqEg==",
-      "dev": true,
       "requires": {
         "debug": "^3.1.0",
         "istanbul-lib-coverage": "^1.2.1",
@@ -11378,7 +10864,6 @@
           "version": "3.2.6",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
           "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
@@ -11389,7 +10874,6 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-1.5.1.tgz",
       "integrity": "sha512-+cfoZ0UXzWjhAdzosCPP3AN8vvef8XDkWtTfgaN+7L3YTpNYITnCaEkceo5SEYy644VkHka/P1FvkWvrG/rrJw==",
-      "dev": true,
       "requires": {
         "handlebars": "^4.0.3"
       }
@@ -11403,7 +10887,6 @@
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest/-/jest-23.6.0.tgz",
       "integrity": "sha512-lWzcd+HSiqeuxyhG+EnZds6iO3Y3ZEnMrfZq/OTGvF/C+Z4fPMCdhWTGSAiO2Oym9rbEXfwddHhh6jqrTF3+Lw==",
-      "dev": true,
       "requires": {
         "import-local": "^1.0.0",
         "jest-cli": "^23.6.0"
@@ -11412,14 +10895,12 @@
         "ansi-regex": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
         },
         "jest-cli": {
           "version": "23.6.0",
           "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-23.6.0.tgz",
           "integrity": "sha512-hgeD1zRUp1E1zsiyOXjEn4LzRLWdJBV//ukAHGlx6s5mfCNJTbhbHjgxnDUXA8fsKWN/HqFFF6X5XcCwC/IvYQ==",
-          "dev": true,
           "requires": {
             "ansi-escapes": "^3.0.0",
             "chalk": "^2.0.1",
@@ -11463,7 +10944,6 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
           "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -11474,7 +10954,6 @@
       "version": "23.4.2",
       "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-23.4.2.tgz",
       "integrity": "sha512-EyNhTAUWEfwnK0Is/09LxoqNDOn7mU7S3EHskG52djOFS/z+IT0jT3h3Ql61+dklcG7bJJitIWEMB4Sp1piHmA==",
-      "dev": true,
       "requires": {
         "throat": "^4.0.0"
       }
@@ -11483,7 +10962,6 @@
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.6.0.tgz",
       "integrity": "sha512-i8V7z9BeDXab1+VNo78WM0AtWpBRXJLnkT+lyT+Slx/cbP5sZJ0+NDuLcmBE5hXAoK0aUp7vI+MOxR+R4d8SRQ==",
-      "dev": true,
       "requires": {
         "babel-core": "^6.0.0",
         "babel-jest": "^23.6.0",
@@ -11505,7 +10983,6 @@
           "version": "6.26.3",
           "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
           "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
-          "dev": true,
           "requires": {
             "babel-code-frame": "^6.26.0",
             "babel-generator": "^6.26.0",
@@ -11532,7 +11009,6 @@
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -11540,14 +11016,12 @@
         "json5": {
           "version": "0.5.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
-          "dev": true
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
         },
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         }
       }
     },
@@ -11555,7 +11029,6 @@
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-23.6.0.tgz",
       "integrity": "sha512-Gz9l5Ov+X3aL5L37IT+8hoCUsof1CVYBb2QEkOupK64XyRR3h+uRpYIm97K7sY8diFxowR8pIGEdyfMKTixo3g==",
-      "dev": true,
       "requires": {
         "chalk": "^2.0.1",
         "diff": "^3.2.0",
@@ -11567,7 +11040,6 @@
       "version": "23.2.0",
       "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-23.2.0.tgz",
       "integrity": "sha1-8IXh8YVI2Z/dabICB+b9VdkTg6c=",
-      "dev": true,
       "requires": {
         "detect-newline": "^2.1.0"
       }
@@ -11576,7 +11048,6 @@
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-23.6.0.tgz",
       "integrity": "sha512-x7V6M/WGJo6/kLoissORuvLIeAoyo2YqLOoCDkohgJ4XOXSqOtyvr8FbInlAWS77ojBsZrafbozWoKVRdtxFCg==",
-      "dev": true,
       "requires": {
         "chalk": "^2.0.1",
         "pretty-format": "^23.6.0"
@@ -11586,7 +11057,6 @@
       "version": "23.4.0",
       "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-23.4.0.tgz",
       "integrity": "sha1-BWp5UrP+pROsYqFAosNox52eYCM=",
-      "dev": true,
       "requires": {
         "jest-mock": "^23.2.0",
         "jest-util": "^23.4.0",
@@ -11596,14 +11066,12 @@
         "acorn": {
           "version": "5.7.4",
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz",
-          "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==",
-          "dev": true
+          "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg=="
         },
         "acorn-globals": {
           "version": "4.3.4",
           "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.3.4.tgz",
           "integrity": "sha512-clfQEh21R+D0leSbUdWf3OcfqyaCSAQ8Ryq00bofSekfr9W8u1jyYZo6ir0xu9Gtcf7BjcHJpnbZH7JOCpP60A==",
-          "dev": true,
           "requires": {
             "acorn": "^6.0.1",
             "acorn-walk": "^6.0.1"
@@ -11612,28 +11080,24 @@
             "acorn": {
               "version": "6.4.1",
               "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
-              "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
-              "dev": true
+              "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA=="
             }
           }
         },
         "acorn-walk": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
-          "integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==",
-          "dev": true
+          "integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA=="
         },
         "cssom": {
           "version": "0.3.8",
           "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-          "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
-          "dev": true
+          "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
         },
         "cssstyle": {
           "version": "1.4.0",
           "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-1.4.0.tgz",
           "integrity": "sha512-GBrLZYZ4X4x6/QEoBnIrqb8B/f5l4+8me2dkom/j1Gtbxy0kBv6OGzKuAsGM75bkGwGAFkt56Iwg28S3XTZgSA==",
-          "dev": true,
           "requires": {
             "cssom": "0.3.x"
           }
@@ -11642,7 +11106,6 @@
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.1.0.tgz",
           "integrity": "sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==",
-          "dev": true,
           "requires": {
             "abab": "^2.0.0",
             "whatwg-mimetype": "^2.2.0",
@@ -11653,7 +11116,6 @@
               "version": "7.1.0",
               "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
               "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
-              "dev": true,
               "requires": {
                 "lodash.sortby": "^4.7.0",
                 "tr46": "^1.0.1",
@@ -11666,7 +11128,6 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz",
           "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==",
-          "dev": true,
           "requires": {
             "webidl-conversions": "^4.0.2"
           }
@@ -11675,7 +11136,6 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz",
           "integrity": "sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==",
-          "dev": true,
           "requires": {
             "whatwg-encoding": "^1.0.1"
           }
@@ -11684,7 +11144,6 @@
           "version": "11.12.0",
           "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.12.0.tgz",
           "integrity": "sha512-y8Px43oyiBM13Zc1z780FrfNLJCXTL40EWlty/LXUtcjykRBNgLlCjWXpfSPBl2iv+N7koQN+dvqszHZgT/Fjw==",
-          "dev": true,
           "requires": {
             "abab": "^2.0.0",
             "acorn": "^5.5.3",
@@ -11717,14 +11176,12 @@
         "parse5": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
-          "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==",
-          "dev": true
+          "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA=="
         },
         "tough-cookie": {
           "version": "2.5.0",
           "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
           "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-          "dev": true,
           "requires": {
             "psl": "^1.1.28",
             "punycode": "^2.1.1"
@@ -11734,7 +11191,6 @@
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
           "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
-          "dev": true,
           "requires": {
             "punycode": "^2.1.0"
           }
@@ -11742,14 +11198,12 @@
         "webidl-conversions": {
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
-          "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
-          "dev": true
+          "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
         },
         "whatwg-url": {
           "version": "6.5.0",
           "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.5.0.tgz",
           "integrity": "sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==",
-          "dev": true,
           "requires": {
             "lodash.sortby": "^4.7.0",
             "tr46": "^1.0.1",
@@ -11760,7 +11214,6 @@
           "version": "5.2.2",
           "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.2.tgz",
           "integrity": "sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==",
-          "dev": true,
           "requires": {
             "async-limiter": "~1.0.0"
           }
@@ -11771,7 +11224,6 @@
       "version": "23.4.0",
       "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-23.4.0.tgz",
       "integrity": "sha1-V+gO0IQd6jAxZ8zozXlSHeuv3hA=",
-      "dev": true,
       "requires": {
         "jest-mock": "^23.2.0",
         "jest-util": "^23.4.0"
@@ -11780,14 +11232,12 @@
     "jest-get-type": {
       "version": "22.4.3",
       "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
-      "integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==",
-      "dev": true
+      "integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w=="
     },
     "jest-haste-map": {
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-23.6.0.tgz",
       "integrity": "sha512-uyNhMyl6dr6HaXGHp8VF7cK6KpC6G9z9LiMNsst+rJIZ8l7wY0tk8qwjPmEghczojZ2/ZhtEdIabZ0OQRJSGGg==",
-      "dev": true,
       "requires": {
         "fb-watchman": "^2.0.0",
         "graceful-fs": "^4.1.11",
@@ -11803,7 +11253,6 @@
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-23.6.0.tgz",
       "integrity": "sha512-pe2Ytgs1nyCs8IvsEJRiRTPC0eVYd8L/dXJGU08GFuBwZ4sYH/lmFDdOL3ZmvJR8QKqV9MFuwlsAi/EWkFUbsQ==",
-      "dev": true,
       "requires": {
         "babel-traverse": "^6.0.0",
         "chalk": "^2.0.1",
@@ -11823,7 +11272,6 @@
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-23.6.0.tgz",
       "integrity": "sha512-f/8zA04rsl1Nzj10HIyEsXvYlMpMPcy0QkQilVZDFOaPbv2ur71X5u2+C4ZQJGyV/xvVXtCCZ3wQ99IgQxftCg==",
-      "dev": true,
       "requires": {
         "pretty-format": "^23.6.0"
       }
@@ -11832,7 +11280,6 @@
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-23.6.0.tgz",
       "integrity": "sha512-rosyCHQfBcol4NsckTn01cdelzWLU9Cq7aaigDf8VwwpIRvWE/9zLgX2bON+FkEW69/0UuYslUe22SOdEf2nog==",
-      "dev": true,
       "requires": {
         "chalk": "^2.0.1",
         "jest-get-type": "^22.1.0",
@@ -11843,7 +11290,6 @@
       "version": "23.4.0",
       "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-23.4.0.tgz",
       "integrity": "sha1-F2EMUJQjSVCNAaPR4L2iwHkIap8=",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0-beta.35",
         "chalk": "^2.0.1",
@@ -11855,26 +11301,22 @@
     "jest-mock": {
       "version": "23.2.0",
       "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-23.2.0.tgz",
-      "integrity": "sha1-rRxg8p6HGdR8JuETgJi20YsmETQ=",
-      "dev": true
+      "integrity": "sha1-rRxg8p6HGdR8JuETgJi20YsmETQ="
     },
     "jest-pnp-resolver": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.0.1.tgz",
-      "integrity": "sha512-kzhvJQp+9k0a/hpvIIzOJgOwfOqmnohdrAMZW2EscH3kxR2VWD7EcPa10cio8EK9V7PcD75bhG1pFnO70zGwSQ==",
-      "dev": true
+      "integrity": "sha512-kzhvJQp+9k0a/hpvIIzOJgOwfOqmnohdrAMZW2EscH3kxR2VWD7EcPa10cio8EK9V7PcD75bhG1pFnO70zGwSQ=="
     },
     "jest-regex-util": {
       "version": "23.3.0",
       "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-23.3.0.tgz",
-      "integrity": "sha1-X4ZylUfCeFxAAs6qj4Sf6MpHG8U=",
-      "dev": true
+      "integrity": "sha1-X4ZylUfCeFxAAs6qj4Sf6MpHG8U="
     },
     "jest-resolve": {
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-23.6.0.tgz",
       "integrity": "sha512-XyoRxNtO7YGpQDmtQCmZjum1MljDqUCob7XlZ6jy9gsMugHdN2hY4+Acz9Qvjz2mSsOnPSH7skBmDYCHXVZqkA==",
-      "dev": true,
       "requires": {
         "browser-resolve": "^1.11.3",
         "chalk": "^2.0.1",
@@ -11885,7 +11327,6 @@
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-23.6.0.tgz",
       "integrity": "sha512-EkQWkFWjGKwRtRyIwRwI6rtPAEyPWlUC2MpzHissYnzJeHcyCn1Hc8j7Nn1xUVrS5C6W5+ZL37XTem4D4pLZdA==",
-      "dev": true,
       "requires": {
         "jest-regex-util": "^23.3.0",
         "jest-snapshot": "^23.6.0"
@@ -11895,7 +11336,6 @@
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-23.6.0.tgz",
       "integrity": "sha512-kw0+uj710dzSJKU6ygri851CObtCD9cN8aNkg8jWJf4ewFyEa6kwmiH/r/M1Ec5IL/6VFa0wnAk6w+gzUtjJzA==",
-      "dev": true,
       "requires": {
         "exit": "^0.1.2",
         "graceful-fs": "^4.1.11",
@@ -11915,14 +11355,12 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         },
         "source-map-support": {
           "version": "0.5.18",
           "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.18.tgz",
           "integrity": "sha512-9luZr/BZ2QeU6tO2uG8N2aZpVSli4TSAOAqFOyTO51AJcD9P99c0K1h6dD6r6qo5dyT44BR5exweOaLLeldTkQ==",
-          "dev": true,
           "requires": {
             "buffer-from": "^1.0.0",
             "source-map": "^0.6.0"
@@ -11934,7 +11372,6 @@
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-23.6.0.tgz",
       "integrity": "sha512-ycnLTNPT2Gv+TRhnAYAQ0B3SryEXhhRj1kA6hBPSeZaNQkJ7GbZsxOLUkwg6YmvWGdX3BB3PYKFLDQCAE1zNOw==",
-      "dev": true,
       "requires": {
         "babel-core": "^6.0.0",
         "babel-plugin-istanbul": "^4.1.6",
@@ -11963,7 +11400,6 @@
           "version": "6.26.3",
           "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz",
           "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==",
-          "dev": true,
           "requires": {
             "babel-code-frame": "^6.26.0",
             "babel-generator": "^6.26.0",
@@ -11990,7 +11426,6 @@
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -11998,34 +11433,29 @@
         "json5": {
           "version": "0.5.1",
           "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
-          "dev": true
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
         },
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         },
         "strip-bom": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
-          "dev": true
+          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
         }
       }
     },
     "jest-serializer": {
       "version": "23.0.1",
       "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-23.0.1.tgz",
-      "integrity": "sha1-o3dq6zEekP6D+rnlM+hRAr0WQWU=",
-      "dev": true
+      "integrity": "sha1-o3dq6zEekP6D+rnlM+hRAr0WQWU="
     },
     "jest-snapshot": {
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.6.0.tgz",
       "integrity": "sha512-tM7/Bprftun6Cvj2Awh/ikS7zV3pVwjRYU2qNYS51VZHgaAMBs5l4o/69AiDHhQrj5+LA2Lq4VIvK7zYk/bswg==",
-      "dev": true,
       "requires": {
         "babel-types": "^6.0.0",
         "chalk": "^2.0.1",
@@ -12043,7 +11473,6 @@
       "version": "23.4.0",
       "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-23.4.0.tgz",
       "integrity": "sha1-TQY8uSe68KI4Mf9hvsLLv0l5NWE=",
-      "dev": true,
       "requires": {
         "callsites": "^2.0.0",
         "chalk": "^2.0.1",
@@ -12058,8 +11487,7 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
         }
       }
     },
@@ -12067,7 +11495,6 @@
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-23.6.0.tgz",
       "integrity": "sha512-OFKapYxe72yz7agrDAWi8v2WL8GIfVqcbKRCLbRG9PAxtzF9b1SEDdTpytNDN12z2fJynoBwpMpvj2R39plI2A==",
-      "dev": true,
       "requires": {
         "chalk": "^2.0.1",
         "jest-get-type": "^22.1.0",
@@ -12078,8 +11505,7 @@
         "leven": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz",
-          "integrity": "sha1-wuep93IJTe6dNCAq6KzORoeHVYA=",
-          "dev": true
+          "integrity": "sha1-wuep93IJTe6dNCAq6KzORoeHVYA="
         }
       }
     },
@@ -12087,7 +11513,6 @@
       "version": "23.4.0",
       "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-23.4.0.tgz",
       "integrity": "sha1-0uKM50+NrWxq/JIrksq+9u0FyRw=",
-      "dev": true,
       "requires": {
         "ansi-escapes": "^3.0.0",
         "chalk": "^2.0.1",
@@ -12098,7 +11523,6 @@
       "version": "23.2.0",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-23.2.0.tgz",
       "integrity": "sha1-+vcGqNo2+uYOsmlXJX+ntdjqArk=",
-      "dev": true,
       "requires": {
         "merge-stream": "^1.0.1"
       }
@@ -12210,8 +11634,7 @@
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
-      "dev": true
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE="
     },
     "json-stringify-safe": {
       "version": "5.0.1",
@@ -12301,7 +11724,6 @@
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz",
       "integrity": "sha512-EdIHFMm+1BPynpKOpdPqiOsvnIrInRGJD7bzPZdPkjitQEqpdpUuFpq4T0npZFKTiB3RhWFdGN+oqOJIdhDhQA==",
-      "dev": true,
       "requires": {
         "array-includes": "^3.0.3",
         "object.assign": "^4.1.0"
@@ -12399,8 +11821,7 @@
     "kleur": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-2.0.2.tgz",
-      "integrity": "sha512-77XF9iTllATmG9lSlIv0qdQ2BQ/h9t0bJllHlbvsQ0zUWfU7Yi0S8L5JXzPZgkefIiajLmBJJ4BsMJmqcf7oxQ==",
-      "dev": true
+      "integrity": "sha512-77XF9iTllATmG9lSlIv0qdQ2BQ/h9t0bJllHlbvsQ0zUWfU7Yi0S8L5JXzPZgkefIiajLmBJJ4BsMJmqcf7oxQ=="
     },
     "last-call-webpack-plugin": {
       "version": "3.0.0",
@@ -12420,7 +11841,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
       "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
-      "dev": true,
       "requires": {
         "invert-kv": "^2.0.0"
       }
@@ -12461,8 +11881,7 @@
     "left-pad": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
-      "integrity": "sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==",
-      "dev": true
+      "integrity": "sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA=="
     },
     "levn": {
       "version": "0.3.0",
@@ -12504,7 +11923,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
       "integrity": "sha512-ldcgZpjNJj71n+2Mf6yetz+c9bM4xpKtNds4LbqXzU/PTdeAX0g3ytnU1AJMEcTk2Lex4Smpe3Q/eCTsvUBxbA==",
-      "dev": true,
       "requires": {
         "find-cache-dir": "^0.1.1",
         "mkdirp": "^0.5.1"
@@ -12514,7 +11932,6 @@
           "version": "0.1.1",
           "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-0.1.1.tgz",
           "integrity": "sha1-yN765XyKUqinhPnjHFfHQumToLk=",
-          "dev": true,
           "requires": {
             "commondir": "^1.0.1",
             "mkdirp": "^0.5.1",
@@ -12525,7 +11942,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"
@@ -12535,7 +11951,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"
           }
@@ -12544,7 +11959,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-1.0.0.tgz",
           "integrity": "sha1-ektQio1bstYp1EcFb/TpyTFM89Q=",
-          "dev": true,
           "requires": {
             "find-up": "^1.0.0"
           }
@@ -12787,7 +12201,6 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.11.tgz",
       "integrity": "sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=",
-      "dev": true,
       "requires": {
         "tmpl": "1.0.x"
       }
@@ -12796,7 +12209,6 @@
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
       "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
-      "dev": true,
       "requires": {
         "p-defer": "^1.0.0"
       }
@@ -12830,8 +12242,7 @@
     "math-random": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
-      "integrity": "sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==",
-      "dev": true
+      "integrity": "sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A=="
     },
     "md5.js": {
       "version": "1.3.5",
@@ -12997,7 +12408,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
       "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
-      "dev": true,
       "requires": {
         "map-age-cleaner": "^0.1.1",
         "mimic-fn": "^2.0.0",
@@ -13007,8 +12417,7 @@
         "mimic-fn": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-          "dev": true
+          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
         }
       }
     },
@@ -13070,8 +12479,7 @@
     "merge": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.1.tgz",
-      "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==",
-      "dev": true
+      "integrity": "sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ=="
     },
     "merge-deep": {
       "version": "3.0.2",
@@ -13092,7 +12500,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-1.0.1.tgz",
       "integrity": "sha1-QEEgLVCKNCugAXQAjfDCUbjBNeE=",
-      "dev": true,
       "requires": {
         "readable-stream": "^2.0.1"
       },
@@ -13101,7 +12508,6 @@
           "version": "2.3.7",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
           "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-          "dev": true,
           "requires": {
             "core-util-is": "~1.0.0",
             "inherits": "~2.0.3",
@@ -13116,7 +12522,6 @@
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-          "dev": true,
           "requires": {
             "safe-buffer": "~5.1.0"
           }
@@ -13411,7 +12816,6 @@
       "version": "2.3.11",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
       "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
-      "dev": true,
       "requires": {
         "arr-diff": "^2.0.0",
         "array-unique": "^0.2.1",
@@ -13574,9 +12978,9 @@
       }
     },
     "moment": {
-      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
     },
     "moment-duration-format": {
       "version": "2.3.2",
@@ -13584,11 +12988,11 @@
       "integrity": "sha512-cBMXjSW+fjOb4tyaVHuaVE/A5TqkukDWiOfxxAjY+PEqmmBQlLwn+8OzwPiG3brouXKY5Un4pBjAeB6UToXHaQ=="
     },
     "moment-timezone": {
-      "version": "0.5.34",
-      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.34.tgz",
-      "integrity": "sha512-3zAEHh2hKUs3EXLESx/wsgw6IQdusOT8Bxm3D9UrHPQR7zlMmzwybC8zHEM1tQ4LJwP7fcxrWr8tuBg05fFCbg==",
+      "version": "0.5.46",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.46.tgz",
+      "integrity": "sha512-ZXm9b36esbe7OmdABqIWJuBBiLLwAjrN7CE+7sYdCCx82Nabt1wHDj8TVseS59QIlfFPbOoiBPm6ca9BioG4hw==",
       "requires": {
-        "moment": ">= 2.9.0"
+        "moment": "^2.29.4"
       }
     },
     "morgan": {
@@ -13748,8 +13152,7 @@
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
-      "dev": true
+      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc="
     },
     "ncp": {
       "version": "2.0.0",
@@ -13828,8 +13231,7 @@
     "node-int64": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
-      "integrity": "sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=",
-      "dev": true
+      "integrity": "sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs="
     },
     "node-libs-browser": {
       "version": "2.2.1",
@@ -13896,7 +13298,6 @@
       "version": "5.4.3",
       "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.4.3.tgz",
       "integrity": "sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==",
-      "dev": true,
       "requires": {
         "growly": "^1.3.0",
         "is-wsl": "^1.1.0",
@@ -14097,8 +13498,7 @@
     "object-hash": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-1.3.1.tgz",
-      "integrity": "sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==",
-      "dev": true
+      "integrity": "sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA=="
     },
     "object-inspect": {
       "version": "1.7.0",
@@ -14151,7 +13551,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz",
       "integrity": "sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=",
-      "dev": true,
       "requires": {
         "for-own": "^0.1.4",
         "is-extendable": "^0.1.1"
@@ -14262,7 +13661,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
       "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
-      "dev": true,
       "requires": {
         "execa": "^1.0.0",
         "lcid": "^2.0.0",
@@ -14286,8 +13684,7 @@
     "p-defer": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
-      "dev": true
+      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww="
     },
     "p-finally": {
       "version": "1.0.0",
@@ -14297,8 +13694,7 @@
     "p-is-promise": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz",
-      "integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==",
-      "dev": true
+      "integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg=="
     },
     "p-limit": {
       "version": "1.3.0",
@@ -14424,7 +13820,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
       "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
-      "dev": true,
       "requires": {
         "glob-base": "^0.3.0",
         "is-dotfile": "^1.0.0",
@@ -14561,7 +13956,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pkg-conf/-/pkg-conf-2.1.0.tgz",
       "integrity": "sha1-ISZRTKbyq/69FoWW3xi6V4Z/AFg=",
-      "dev": true,
       "requires": {
         "find-up": "^2.0.0",
         "load-json-file": "^4.0.0"
@@ -14571,7 +13965,6 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
           "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
-          "dev": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "parse-json": "^4.0.0",
@@ -14582,14 +13975,12 @@
         "pify": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-          "dev": true
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
         },
         "strip-bom": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
-          "dev": true
+          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
         }
       }
     },
@@ -14597,7 +13988,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/pkg-config/-/pkg-config-1.1.1.tgz",
       "integrity": "sha1-VX7yLXPaPIg3EHdmxS6tq94pj+Q=",
-      "dev": true,
       "requires": {
         "debug-log": "^1.0.0",
         "find-root": "^1.0.0",
@@ -14623,14 +14013,12 @@
     "pluralize": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz",
-      "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow==",
-      "dev": true
+      "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow=="
     },
     "pn": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
-      "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
-      "dev": true
+      "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA=="
     },
     "pnp-webpack-plugin": {
       "version": "1.1.0",
@@ -18126,8 +17514,7 @@
     "preserve": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
-      "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
-      "dev": true
+      "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks="
     },
     "prettier": {
       "version": "1.19.1",
@@ -18147,7 +17534,6 @@
       "version": "23.6.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-23.6.0.tgz",
       "integrity": "sha512-zf9NV1NSlDLDjycnwm6hpFATCGl/K1lt0R/GdkAK2O5LN/rwJoB+Mh93gGJjut4YbmecbfgLWVGSTCr0Ewvvbw==",
-      "dev": true,
       "requires": {
         "ansi-regex": "^3.0.0",
         "ansi-styles": "^3.2.0"
@@ -18156,8 +17542,7 @@
         "ansi-regex": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
         }
       }
     },
@@ -18179,8 +17564,7 @@
     "progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
     },
     "promise": {
       "version": "8.0.2",
@@ -18199,7 +17583,6 @@
       "version": "0.1.14",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-0.1.14.tgz",
       "integrity": "sha512-rxkyiE9YH6zAz/rZpywySLKkpaj0NMVyNw1qhsubdbjjSgcayjTShDreZGlFMcGSu5sab3bAKPfFk78PB90+8w==",
-      "dev": true,
       "requires": {
         "kleur": "^2.0.1",
         "sisteransi": "^0.1.1"
@@ -18215,6 +17598,11 @@
         "react-is": "^16.8.1"
       }
     },
+    "property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="
+    },
     "property-information": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
@@ -18366,7 +17754,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz",
       "integrity": "sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==",
-      "dev": true,
       "requires": {
         "is-number": "^4.0.0",
         "kind-of": "^6.0.0",
@@ -18376,14 +17763,12 @@
         "is-number": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
-          "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==",
-          "dev": true
+          "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ=="
         },
         "kind-of": {
           "version": "6.0.3",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-          "dev": true
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
         }
       }
     },
@@ -18845,6 +18230,11 @@
         "react-side-effect": "^1.1.0"
       }
     },
+    "react-hook-form": {
+      "version": "7.54.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz",
+      "integrity": "sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg=="
+    },
     "react-hot-loader": {
       "version": "4.13.1",
       "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.1.tgz",
@@ -19194,7 +18584,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/realpath-native/-/realpath-native-1.1.0.tgz",
       "integrity": "sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==",
-      "dev": true,
       "requires": {
         "util.promisify": "^1.0.0"
       }
@@ -19383,7 +18772,6 @@
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.4.tgz",
       "integrity": "sha512-nVIZwtCjkC9YgvWkpM55B5rBhBYRZhAaJbgcFYXXsHnbZ9UZI9nnVWYZpBlCqv9ho2eZryPnWrZGsOdPwVWXWQ==",
-      "dev": true,
       "requires": {
         "is-equal-shallow": "^0.1.3"
       }
@@ -19409,8 +18797,7 @@
     "regexpp": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz",
-      "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==",
-      "dev": true
+      "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw=="
     },
     "regexpu-core": {
       "version": "4.7.0",
@@ -19823,14 +19210,12 @@
     "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="
     },
     "require-uncached": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz",
       "integrity": "sha1-Tg1W1slmL9MeQwEcS5WqSZVUIdM=",
-      "dev": true,
       "requires": {
         "caller-path": "^0.1.0",
         "resolve-from": "^1.0.0"
@@ -19840,7 +19225,6 @@
           "version": "0.1.0",
           "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-0.1.0.tgz",
           "integrity": "sha1-lAhe9jWB7NPaqSREqP6U6CV3dR8=",
-          "dev": true,
           "requires": {
             "callsites": "^0.2.0"
           }
@@ -19848,14 +19232,12 @@
         "callsites": {
           "version": "0.2.0",
           "resolved": "https://registry.npmjs.org/callsites/-/callsites-0.2.0.tgz",
-          "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=",
-          "dev": true
+          "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo="
         },
         "resolve-from": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz",
-          "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=",
-          "dev": true
+          "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY="
         }
       }
     },
@@ -19954,8 +19336,7 @@
     "rsvp": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.6.2.tgz",
-      "integrity": "sha512-OfWGQTb9vnwRjwtA2QwpG2ICclHC3pgXZO5xt8H2EfgDquO0qVdSb5T88L4qJVAEugbS56pAuV4XZM58UX8ulw==",
-      "dev": true
+      "integrity": "sha512-OfWGQTb9vnwRjwtA2QwpG2ICclHC3pgXZO5xt8H2EfgDquO0qVdSb5T88L4qJVAEugbS56pAuV4XZM58UX8ulw=="
     },
     "run-async": {
       "version": "2.3.0",
@@ -19968,8 +19349,7 @@
     "run-parallel": {
       "version": "1.1.9",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz",
-      "integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==",
-      "dev": true
+      "integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q=="
     },
     "run-queue": {
       "version": "1.0.3",
@@ -20023,7 +19403,6 @@
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/sane/-/sane-2.5.2.tgz",
       "integrity": "sha1-tNwYYcIbQn6SlQej51HiosuKs/o=",
-      "dev": true,
       "requires": {
         "anymatch": "^2.0.0",
         "capture-exit": "^1.2.0",
@@ -20039,20 +19418,17 @@
         "arr-diff": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
-          "dev": true
+          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA="
         },
         "array-unique": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
-          "dev": true
+          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
         },
         "braces": {
           "version": "2.3.2",
           "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
           "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-          "dev": true,
           "requires": {
             "arr-flatten": "^1.1.0",
             "array-unique": "^0.3.2",
@@ -20070,7 +19446,6 @@
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -20081,7 +19456,6 @@
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -20090,7 +19464,6 @@
           "version": "2.1.4",
           "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
           "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
-          "dev": true,
           "requires": {
             "debug": "^2.3.3",
             "define-property": "^0.2.5",
@@ -20105,7 +19478,6 @@
               "version": "0.2.5",
               "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
               "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-              "dev": true,
               "requires": {
                 "is-descriptor": "^0.1.0"
               }
@@ -20114,7 +19486,6 @@
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -20123,7 +19494,6 @@
               "version": "0.1.6",
               "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
               "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
-              "dev": true,
               "requires": {
                 "kind-of": "^3.0.2"
               },
@@ -20132,7 +19502,6 @@
                   "version": "3.2.2",
                   "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
                   "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-                  "dev": true,
                   "requires": {
                     "is-buffer": "^1.1.5"
                   }
@@ -20143,7 +19512,6 @@
               "version": "0.1.4",
               "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
               "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
-              "dev": true,
               "requires": {
                 "kind-of": "^3.0.2"
               },
@@ -20152,7 +19520,6 @@
                   "version": "3.2.2",
                   "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
                   "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-                  "dev": true,
                   "requires": {
                     "is-buffer": "^1.1.5"
                   }
@@ -20163,7 +19530,6 @@
               "version": "0.1.6",
               "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
               "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
-              "dev": true,
               "requires": {
                 "is-accessor-descriptor": "^0.1.6",
                 "is-data-descriptor": "^0.1.4",
@@ -20173,8 +19539,7 @@
             "kind-of": {
               "version": "5.1.0",
               "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
-              "dev": true
+              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
             }
           }
         },
@@ -20182,7 +19547,6 @@
           "version": "2.0.4",
           "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
           "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
-          "dev": true,
           "requires": {
             "array-unique": "^0.3.2",
             "define-property": "^1.0.0",
@@ -20198,7 +19562,6 @@
               "version": "1.0.0",
               "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
               "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-              "dev": true,
               "requires": {
                 "is-descriptor": "^1.0.0"
               }
@@ -20207,7 +19570,6 @@
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -20218,7 +19580,6 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
           "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-          "dev": true,
           "requires": {
             "extend-shallow": "^2.0.1",
             "is-number": "^3.0.0",
@@ -20230,7 +19591,6 @@
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -20241,7 +19601,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
           "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
           "requires": {
             "kind-of": "^6.0.0"
           }
@@ -20250,7 +19609,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
           "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
           "requires": {
             "kind-of": "^6.0.0"
           }
@@ -20259,7 +19617,6 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
           "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
           "requires": {
             "is-accessor-descriptor": "^1.0.0",
             "is-data-descriptor": "^1.0.0",
@@ -20270,7 +19627,6 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
           "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "dev": true,
           "requires": {
             "kind-of": "^3.0.2"
           },
@@ -20279,7 +19635,6 @@
               "version": "3.2.2",
               "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
               "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "dev": true,
               "requires": {
                 "is-buffer": "^1.1.5"
               }
@@ -20289,14 +19644,12 @@
         "kind-of": {
           "version": "6.0.3",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-          "dev": true
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
         },
         "micromatch": {
           "version": "3.1.10",
           "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
           "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-          "dev": true,
           "requires": {
             "arr-diff": "^4.0.0",
             "array-unique": "^0.3.2",
@@ -20316,8 +19669,7 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         }
       }
     },
@@ -20826,8 +20178,7 @@
     "shellwords": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
-      "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
-      "dev": true
+      "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww=="
     },
     "shortid": {
       "version": "2.2.16",
@@ -20877,8 +20228,7 @@
     "sisteransi": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-0.1.1.tgz",
-      "integrity": "sha512-PmGOd02bM9YO5ifxpw36nrNMBTptEtfRl4qUYl9SndkolplkrZZOW7PGHjrZL53QvMVj9nQ+TKqUnRsw4tJa4g==",
-      "dev": true
+      "integrity": "sha512-PmGOd02bM9YO5ifxpw36nrNMBTptEtfRl4qUYl9SndkolplkrZZOW7PGHjrZL53QvMVj9nQ+TKqUnRsw4tJa4g=="
     },
     "slash": {
       "version": "1.0.0",
@@ -20889,7 +20239,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-1.0.0.tgz",
       "integrity": "sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==",
-      "dev": true,
       "requires": {
         "is-fullwidth-code-point": "^2.0.0"
       }
@@ -21076,7 +20425,6 @@
       "version": "0.4.18",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
       "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==",
-      "dev": true,
       "requires": {
         "source-map": "^0.5.6"
       }
@@ -21199,14 +20547,12 @@
     "stack-utils": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.2.tgz",
-      "integrity": "sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==",
-      "dev": true
+      "integrity": "sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA=="
     },
     "standard": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/standard/-/standard-12.0.1.tgz",
       "integrity": "sha512-UqdHjh87OG2gUrNCSM4QRLF5n9h3TFPwrCNyVlkqu31Hej0L/rc8hzKqVvkb2W3x0WMq7PzZdkLfEcBhVOR6lg==",
-      "dev": true,
       "requires": {
         "eslint": "~5.4.0",
         "eslint-config-standard": "12.0.0",
@@ -21222,20 +20568,17 @@
         "ansi-regex": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
         },
         "chardet": {
           "version": "0.4.2",
           "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
-          "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=",
-          "dev": true
+          "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I="
         },
         "debug": {
           "version": "3.2.6",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
           "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
@@ -21244,7 +20587,6 @@
           "version": "5.4.0",
           "resolved": "https://registry.npmjs.org/eslint/-/eslint-5.4.0.tgz",
           "integrity": "sha512-UIpL91XGex3qtL6qwyCQJar2j3osKxK9e3ano3OcGEIRM4oWIpCkDg9x95AXEC2wMs7PnxzOkPZ2gq+tsMS9yg==",
-          "dev": true,
           "requires": {
             "ajv": "^6.5.0",
             "babel-code-frame": "^6.26.0",
@@ -21290,7 +20632,6 @@
           "version": "2.14.0",
           "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.14.0.tgz",
           "integrity": "sha512-FpuRtniD/AY6sXByma2Wr0TXvXJ4nA/2/04VPlfpmUDPOpOY264x+ILiwnrk/k4RINgDAyFZByxqPUbSQ5YE7g==",
-          "dev": true,
           "requires": {
             "contains-path": "^0.1.0",
             "debug": "^2.6.8",
@@ -21308,7 +20649,6 @@
               "version": "2.6.9",
               "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
               "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-              "dev": true,
               "requires": {
                 "ms": "2.0.0"
               }
@@ -21317,7 +20657,6 @@
               "version": "1.5.0",
               "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
               "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
-              "dev": true,
               "requires": {
                 "esutils": "^2.0.2",
                 "isarray": "^1.0.0"
@@ -21326,8 +20665,7 @@
             "ms": {
               "version": "2.0.0",
               "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-              "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-              "dev": true
+              "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
             }
           }
         },
@@ -21335,7 +20673,6 @@
           "version": "7.0.1",
           "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-7.0.1.tgz",
           "integrity": "sha512-lfVw3TEqThwq0j2Ba/Ckn2ABdwmL5dkOgAux1rvOk6CO7A6yGyPI2+zIxN6FyNkp1X1X/BSvKOceD6mBWSj4Yw==",
-          "dev": true,
           "requires": {
             "eslint-plugin-es": "^1.3.1",
             "eslint-utils": "^1.3.1",
@@ -21348,14 +20685,12 @@
         "eslint-plugin-promise": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-4.0.1.tgz",
-          "integrity": "sha512-Si16O0+Hqz1gDHsys6RtFRrW7cCTB6P7p3OJmKp3Y3dxpQE2qwOA7d3xnV+0mBmrPoi0RBnxlCKvqu70te6wjg==",
-          "dev": true
+          "integrity": "sha512-Si16O0+Hqz1gDHsys6RtFRrW7cCTB6P7p3OJmKp3Y3dxpQE2qwOA7d3xnV+0mBmrPoi0RBnxlCKvqu70te6wjg=="
         },
         "eslint-scope": {
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
           "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
-          "dev": true,
           "requires": {
             "esrecurse": "^4.1.0",
             "estraverse": "^4.1.1"
@@ -21365,7 +20700,6 @@
           "version": "2.2.0",
           "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz",
           "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==",
-          "dev": true,
           "requires": {
             "chardet": "^0.4.0",
             "iconv-lite": "^0.4.17",
@@ -21376,7 +20710,6 @@
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-5.2.0.tgz",
           "integrity": "sha512-E9BmnJbAKLPGonz0HeWHtbKf+EeSP93paWO3ZYoUpq/aowXvYGjjCSuashhXPpzbArIjBbji39THkxTz9ZeEUQ==",
-          "dev": true,
           "requires": {
             "ansi-escapes": "^3.0.0",
             "chalk": "^2.0.0",
@@ -21397,7 +20730,6 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
           "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
-          "dev": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "parse-json": "^2.2.0",
@@ -21409,7 +20741,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"
           }
@@ -21418,7 +20749,6 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
           "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
-          "dev": true,
           "requires": {
             "pify": "^2.0.0"
           }
@@ -21427,7 +20757,6 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
           "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
-          "dev": true,
           "requires": {
             "load-json-file": "^2.0.0",
             "normalize-package-data": "^2.3.2",
@@ -21438,7 +20767,6 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz",
           "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
-          "dev": true,
           "requires": {
             "find-up": "^2.0.0",
             "read-pkg": "^2.0.0"
@@ -21448,7 +20776,6 @@
           "version": "5.5.12",
           "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz",
           "integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==",
-          "dev": true,
           "requires": {
             "symbol-observable": "1.0.1"
           }
@@ -21457,7 +20784,6 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
           "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -21465,14 +20791,12 @@
         "strip-bom": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
-          "dev": true
+          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
         },
         "symbol-observable": {
           "version": "1.0.1",
           "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
-          "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=",
-          "dev": true
+          "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ="
         }
       }
     },
@@ -21480,7 +20804,6 @@
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/standard-engine/-/standard-engine-9.0.0.tgz",
       "integrity": "sha512-ZfNfCWZ2Xq67VNvKMPiVMKHnMdvxYzvZkf1AH8/cw2NLDBm5LRsxMqvEJpsjLI/dUosZ3Z1d6JlHDp5rAvvk2w==",
-      "dev": true,
       "requires": {
         "deglob": "^2.1.0",
         "get-stdin": "^6.0.0",
@@ -21491,8 +20814,7 @@
         "get-stdin": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
-          "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==",
-          "dev": true
+          "integrity": "sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g=="
         }
       }
     },
@@ -21649,7 +20971,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
       "integrity": "sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=",
-      "dev": true,
       "requires": {
         "astral-regex": "^1.0.0",
         "strip-ansi": "^4.0.0"
@@ -21658,14 +20979,12 @@
         "ansi-regex": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
         },
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
           "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -21791,8 +21110,7 @@
     "strip-json-comments": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
-      "dev": true
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
     },
     "style-loader": {
       "version": "0.23.0",
@@ -22003,7 +21321,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/table/-/table-4.0.3.tgz",
       "integrity": "sha512-S7rnFITmBH1EnyKcvxBh1LjYeQMmnZtCXSEbHcH6S0NoKit24ZuFO/T1vDcLdYsLQkM188PVVhQmzKIuThNkKg==",
-      "dev": true,
       "requires": {
         "ajv": "^6.0.1",
         "ajv-keywords": "^3.0.0",
@@ -22270,7 +21587,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-4.2.3.tgz",
       "integrity": "sha512-SYbXgY64PT+4GAL2ocI3HwPa4Q4TBKm0cwAVeKOt/Aoc0gSpNRjJX8w0pA1LMKZ3LBmd8pYBqApFNQLII9kavA==",
-      "dev": true,
       "requires": {
         "arrify": "^1.0.1",
         "micromatch": "^2.3.11",
@@ -22287,8 +21603,7 @@
     "throat": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
-      "integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=",
-      "dev": true
+      "integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo="
     },
     "through": {
       "version": "2.3.8",
@@ -22346,6 +21661,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+    },
     "tiny-invariant": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
@@ -22367,8 +21687,7 @@
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
-      "integrity": "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=",
-      "dev": true
+      "integrity": "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE="
     },
     "to-arraybuffer": {
       "version": "1.0.1",
@@ -22593,6 +21912,11 @@
         }
       }
     },
+    "toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
     "tough-cookie": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-3.0.1.tgz",
@@ -22624,8 +21948,7 @@
     "trim-right": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
-      "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=",
-      "dev": true
+      "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM="
     },
     "trough": {
       "version": "1.0.5",
@@ -22709,6 +22032,11 @@
         "prelude-ls": "~1.1.2"
       }
     },
+    "type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA=="
+    },
     "type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -23212,7 +22540,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz",
       "integrity": "sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=",
-      "dev": true,
       "requires": {
         "makeerror": "1.0.x"
       }
@@ -23229,7 +22556,6 @@
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/watch/-/watch-0.18.0.tgz",
       "integrity": "sha1-KAlUdsbffJDJYxOJkMClQj60uYY=",
-      "dev": true,
       "requires": {
         "exec-sh": "^0.2.0",
         "minimist": "^1.2.0"
@@ -24938,7 +24264,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"
@@ -24948,7 +24273,6 @@
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "dev": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -24957,7 +24281,6 @@
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "dev": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -24975,7 +24298,6 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/write/-/write-0.2.1.tgz",
       "integrity": "sha1-X8A4KOJkzqP+kUVUdvejxWbLB1c=",
-      "dev": true,
       "requires": {
         "mkdirp": "^0.5.1"
       }
@@ -24984,7 +24306,6 @@
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
       "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.11",
         "imurmurhash": "^0.1.4",
@@ -25028,8 +24349,7 @@
     "y18n": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
-      "dev": true
+      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
     },
     "yallist": {
       "version": "2.1.2",
@@ -25040,7 +24360,6 @@
       "version": "11.1.1",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.1.tgz",
       "integrity": "sha512-PRU7gJrJaXv3q3yQZ/+/X6KBswZiaQ+zOmdprZcouPYtQgvNU35i+68M4b1ZHLZtYFT5QObFLV+ZkmJYcwKdiw==",
-      "dev": true,
       "requires": {
         "cliui": "^4.0.0",
         "decamelize": "^1.1.1",
@@ -25060,7 +24379,6 @@
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-9.0.2.tgz",
       "integrity": "sha1-nM9qQ0YP5O1Aqbto9I1DuKaMwHc=",
-      "dev": true,
       "requires": {
         "camelcase": "^4.1.0"
       },
@@ -25068,8 +24386,7 @@
         "camelcase": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
-          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
-          "dev": true
+          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
         }
       }
     },
@@ -25078,6 +24395,17 @@
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q=="
     },
+    "yup": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.6.1.tgz",
+      "integrity": "sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==",
+      "requires": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
     "zwitch": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
diff --git a/package.json b/package.json
index ed6c1a2f..c0b81e02 100644
--- a/package.json
+++ b/package.json
@@ -7,12 +7,15 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.14",
     "@fortawesome/free-solid-svg-icons": "^5.7.1",
     "@fortawesome/react-fontawesome": "^0.1.4",
+    "@hookform/resolvers": "^3.10.0",
     "@nateradebaugh/react-datetime": "^4.4.11",
     "@popperjs/core": "^2.5.4",
     "@svgr/webpack": "2.4.1",
+    "@toast-ui/editor": "^2.5.1",
     "axios": "^0.19.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
+    "babel-jest": "23.6.0",
     "babel-loader": "8.0.4",
     "babel-plugin-named-asset-import": "^0.3.0",
     "babel-preset-react-app": "^7.0.0",
@@ -25,14 +28,30 @@
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
     "easymde": "^2.18.0",
+    "eslint": "5.6.0",
+    "eslint-config-react-app": "^3.0.6",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-config-standard-react": "^7.0.2",
+    "eslint-loader": "2.1.1",
+    "eslint-plugin-flowtype": "2.50.1",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "6.1.2",
+    "eslint-plugin-node": "^8.0.1",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-react": "7.11.1",
+    "eslint-plugin-standard": "^4.0.0",
     "express": "^4.16.4",
     "fflate": "^0.7.4",
     "file-loader": "2.0.0",
     "filestack-js": "^3.20.0",
     "filestack-react": "^4.0.1",
+    "formik": "^2.4.6",
     "fs-extra": "7.0.0",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",
+    "jest": "23.6.0",
+    "jest-pnp-resolver": "1.0.1",
+    "jest-resolve": "23.6.0",
     "jquery": "^3.4.1",
     "jstimezonedetect": "^1.0.6",
     "jwt-decode": "^2.2.0",
@@ -63,6 +82,7 @@
     "react-dom": "^16.7.0",
     "react-google-charts": "^3.0.13",
     "react-helmet": "^5.2.0",
+    "react-hook-form": "^7.54.2",
     "react-hot-loader": "^4.13.1",
     "react-idle-timer": "^4.6.4",
     "react-js-pagination": "^3.0.3",
@@ -89,6 +109,7 @@
     "remark-parse": "^10.0.1",
     "resolve": "1.8.1",
     "sass-loader": "7.1.0",
+    "standard": "^12.0.1",
     "style-loader": "0.23.0",
     "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.4",
     "terser": "^3.16.1",
@@ -100,23 +121,7 @@
     "webpack-dev-server": "^3.11.0",
     "webpack-manifest-plugin": "2.0.4",
     "xss": "^1.0.6",
-    "standard": "^12.0.1",
-    "eslint": "5.6.0",
-    "eslint-config-react-app": "^3.0.6",
-    "eslint-config-standard": "^12.0.0",
-    "eslint-config-standard-react": "^7.0.2",
-    "eslint-loader": "2.1.1",
-    "eslint-plugin-flowtype": "2.50.1",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "6.1.2",
-    "eslint-plugin-node": "^8.0.1",
-    "eslint-plugin-promise": "^4.0.1",
-    "eslint-plugin-react": "7.11.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "jest": "23.6.0",
-    "jest-pnp-resolver": "1.0.1",
-    "jest-resolve": "23.6.0",
-    "babel-jest": "23.6.0"
+    "yup": "^1.6.1"
   },
   "scripts": {
     "start": "node server.js",
@@ -188,7 +193,7 @@
     ]
   },
   "devDependencies": {
-    "standard": "^12.0.1",
+    "babel-jest": "23.6.0",
     "eslint": "5.6.0",
     "eslint-config-react-app": "^3.0.6",
     "eslint-config-standard": "^12.0.0",
@@ -204,7 +209,7 @@
     "jest": "23.6.0",
     "jest-pnp-resolver": "1.0.1",
     "jest-resolve": "23.6.0",
-    "babel-jest": "23.6.0"
+    "standard": "^12.0.1"
   },
   "volta": {
     "node": "12.17.0"
diff --git a/scripts/build.js b/scripts/build.js
index 60909f24..1cd0ca78 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -10,7 +10,7 @@ process.on('unhandledRejection', err => {
 // Ensure environment variables are read.
 require('../config/env')
 
-console.log(`Build script is run with FILE_PICKER_API_KEY=${process.env.FILE_PICKER_API_KEY}`)
+console.log(`Build script is run`)
 
 const path = require('path')
 const chalk = require('chalk')
@@ -114,8 +114,10 @@ checkBrowsers(paths.appPath, isInteractive)
     }
   )
   .catch(err => {
-    if (err && err.message) {
-      console.error(err.message)
+    if (err && process.env.NODE_ENV === 'development') {
+      console.log(err)
+    } else {
+      console.error('An unexpected error occurred while build')
     }
     process.exit(1)
   })
diff --git a/scripts/start.js b/scripts/start.js
index 57864185..6ea45247 100644
--- a/scripts/start.js
+++ b/scripts/start.js
@@ -111,8 +111,10 @@ checkBrowsers(paths.appPath, isInteractive)
     })
   })
   .catch(err => {
-    if (err && err.message) {
-      console.error(err.message)
+    if (err && process.env.NODE_ENV === 'development') {
+      console.log(err)
+    } else {
+      console.error('An error occurred while starting the development server')
     }
     process.exit(1)
   })
diff --git a/server.js b/server.js
index f5fb9cf6..d81a88a5 100644
--- a/server.js
+++ b/server.js
@@ -40,4 +40,4 @@ app.get('/*', (req, res) => res.sendFile(path.join(__dirname, 'build', 'index.ht
 const port = process.env.PORT || 3000
 app.listen(port)
 
-console.log(`App is listening on port ${port}`)
+console.log(`App is now listening...`)
diff --git a/src/actions/projects.js b/src/actions/projects.js
index db7f5042..5f38015c 100644
--- a/src/actions/projects.js
+++ b/src/actions/projects.js
@@ -3,12 +3,25 @@ import {
   LOAD_CHALLENGE_MEMBERS_SUCCESS,
   LOAD_PROJECT_DETAILS,
   LOAD_PROJECT_PHASES,
-  LOAD_CHALLENGE_MEMBERS
+  LOAD_CHALLENGE_MEMBERS,
+  LOAD_PROJECT_TYPES,
+  CREATE_PROJECT,
+  LOAD_PROJECT_BILLING_ACCOUNTS,
+  UPDATE_PROJECT_PENDING,
+  UPDATE_PROJECT_SUCCESS,
+  UPDATE_PROJECT_FAILURE,
+  ADD_PROJECT_ATTACHMENT_SUCCESS,
+  UPDATE_PROJECT_ATTACHMENT_SUCCESS,
+  REMOVE_PROJECT_ATTACHMENT_SUCCESS
 } from '../config/constants'
 import {
   fetchProjectById,
   fetchBillingAccount,
-  fetchProjectPhases
+  fetchProjectPhases,
+  getProjectTypes,
+  createProjectApi,
+  fetchBillingAccounts,
+  updateProjectApi
 } from '../services/projects'
 
 /**
@@ -26,6 +39,11 @@ export function loadProject (projectId, filterMembers = true) {
             payload: members
           })
         }
+        // Loads billing account
+        dispatch({
+          type: LOAD_PROJECT_BILLING_ACCOUNTS,
+          payload: fetchBillingAccounts(projectId)
+        })
 
         // Loads billing account
         dispatch({
@@ -45,6 +63,82 @@ export function loadProject (projectId, filterMembers = true) {
   }
 }
 
+/**
+ * Loads project types
+ */
+export function loadProjectTypes () {
+  return (dispatch) => {
+    return dispatch({
+      type: LOAD_PROJECT_TYPES,
+      payload: getProjectTypes()
+    })
+  }
+}
+
+/**
+ * Creates a project
+ */
+export function createProject (project) {
+  return (dispatch) => {
+    return dispatch({
+      type: CREATE_PROJECT,
+      payload: createProjectApi(project)
+    })
+  }
+}
+
+/**
+ * Add attachment to project
+ * @param {Object} newAttachment new attachment data
+ */
+export function addAttachment (newAttachment) {
+  return (dispatch) => {
+    return dispatch({
+      type: ADD_PROJECT_ATTACHMENT_SUCCESS,
+      payload: newAttachment
+    })
+  }
+}
+
+/**
+ * Update project attachment
+ * @param {Object} newAttachment new attachment data
+ */
+export function updateAttachment (newAttachment) {
+  return (dispatch) => {
+    return dispatch({
+      type: UPDATE_PROJECT_ATTACHMENT_SUCCESS,
+      payload: newAttachment
+    })
+  }
+}
+
+/**
+ * Remove project attachment
+ * @param {number} attachmentId attachment id
+ */
+export function removeAttachment (attachmentId) {
+  return (dispatch) => {
+    return dispatch({
+      type: REMOVE_PROJECT_ATTACHMENT_SUCCESS,
+      payload: attachmentId
+    })
+  }
+}
+
+/**
+ * Only loads project details
+ * @param {String} projectId Id of the project
+ */
+export function loadOnlyProjectInfo (projectId) {
+  return (dispatch) => {
+    return dispatch({
+      type: LOAD_PROJECT_DETAILS,
+      payload: fetchProjectById(projectId)
+    })
+  }
+}
+
 export function reloadProjectMembers (projectId) {
   return (dispatch) => {
     return dispatch({
@@ -59,3 +153,38 @@ export function reloadProjectMembers (projectId) {
     })
   }
 }
+
+/**
+ * Updates project details
+ * @param {string} projectId - The project ID
+ * @param {object} updatedProps - The updated project details
+ * @returns {Promise<object>} The updated project
+ */
+export function updateProject (projectId, updatedProps) {
+  return async (dispatch) => {
+    dispatch({
+      type: UPDATE_PROJECT_PENDING
+    })
+    return updateProjectApi(projectId, updatedProps).then((project) => {
+      // refresh billing account
+      dispatch({
+        type: LOAD_PROJECT_BILLING_ACCOUNT,
+        payload: fetchBillingAccount(projectId)
+      })
+      dispatch({
+        type: LOAD_PROJECT_BILLING_ACCOUNTS,
+        payload: fetchBillingAccounts(projectId)
+      })
+      return dispatch({
+        type: UPDATE_PROJECT_SUCCESS,
+        payload: project
+      })
+    }).catch((e) => {
+      dispatch({
+        type: UPDATE_PROJECT_FAILURE,
+        error: e
+      })
+      return Promise.reject(e)
+    })
+  }
+}
diff --git a/src/actions/sidebar.js b/src/actions/sidebar.js
index 9f333005..dd521d25 100644
--- a/src/actions/sidebar.js
+++ b/src/actions/sidebar.js
@@ -8,8 +8,10 @@ import {
   LOAD_PROJECTS_PENDING,
   LOAD_PROJECTS_SUCCESS,
   RESET_SIDEBAR_ACTIVE_PARAMS,
-  UNLOAD_PROJECTS_SUCCESS
+  UNLOAD_PROJECTS_SUCCESS,
+  PROJECTS_PAGE_SIZE
 } from '../config/constants'
+import { checkAdmin } from '../util/tc'
 import _ from 'lodash'
 
 /**
@@ -28,13 +30,17 @@ export function setActiveProject (projectId) {
 /**
  * Loads projects of the authenticated user
  */
-export function loadProjects (filterProjectName = '', myProjects = true) {
-  return (dispatch) => {
+export function loadProjects (filterProjectName = '', paramFilters = {}) {
+  return (dispatch, getState) => {
     dispatch({
       type: LOAD_PROJECTS_PENDING
     })
 
-    const filters = {}
+    const filters = {
+      sort: 'lastActivityAt desc',
+      perPage: PROJECTS_PAGE_SIZE,
+      ...paramFilters
+    }
     if (!_.isEmpty(filterProjectName)) {
       if (!isNaN(filterProjectName)) { // if it is number
         filters['id'] = parseInt(filterProjectName, 10)
@@ -42,23 +48,44 @@ export function loadProjects (filterProjectName = '', myProjects = true) {
         filters['keyword'] = decodeURIComponent(filterProjectName)
       }
     }
-    filters['status'] = 'active'
-    filters['sort'] = 'lastActivityAt desc'
-    // filters['perPage'] = 20
-    // filters['page'] = 1
-    if (myProjects) {
+
+    if (!checkAdmin(getState().auth.token)) {
       filters['memberOnly'] = true
     }
 
-    fetchMemberProjects(filters).then(projects => dispatch({
+    // eslint-disable-next-line no-debugger
+    const state = getState().sidebar
+    fetchMemberProjects(filters).then(({ projects, pagination }) => dispatch({
       type: LOAD_PROJECTS_SUCCESS,
-      projects
+      projects: _.uniqBy((state.projects || []).concat(projects), 'id'),
+      total: pagination.xTotal,
+      page: pagination.xPage
     })).catch(() => dispatch({
       type: LOAD_PROJECTS_FAILURE
     }))
   }
 }
 
+/**
+ * Load more projects for the authenticated user
+ */
+export function loadMoreProjects (filterProjectName = '', paramFilters = {}) {
+  return (dispatch, getState) => {
+    const state = getState().sidebar
+
+    loadProjects(filterProjectName, _.assignIn({}, paramFilters, {
+      perPage: PROJECTS_PAGE_SIZE,
+      page: state.page + 1
+    }))(dispatch, getState)
+  }
+}
+
+export function loadTaasProjects (filterProjectName = '', paramFilters = {}) {
+  return loadProjects(filterProjectName, Object.assign({
+    type: 'talent-as-a-service'
+  }, paramFilters))
+}
+
 /**
  * Unloads projects of the authenticated user
  */
diff --git a/src/actions/users.js b/src/actions/users.js
index 92e54cc1..46a9a56f 100644
--- a/src/actions/users.js
+++ b/src/actions/users.js
@@ -28,7 +28,7 @@ export function loadAllUserProjects (isAdmin = true) {
       filters['memberOnly'] = true
     }
 
-    fetchMemberProjects(filters).then(projects => dispatch({
+    fetchMemberProjects(filters).then(({ projects }) => dispatch({
       type: LOAD_ALL_USER_PROJECTS_SUCCESS,
       projects
     })).catch(() => dispatch({
@@ -66,7 +66,7 @@ export function searchUserProjects (isAdmin = true, keyword) {
       filters['memberOnly'] = true
     }
 
-    fetchMemberProjects(filters).then(projects => dispatch({
+    fetchMemberProjects(filters).then(({ projects }) => dispatch({
       type: SEARCH_USER_PROJECTS_SUCCESS,
       projects
     })).catch(() => dispatch({
diff --git a/src/assets/images/files/aac.svg b/src/assets/images/files/aac.svg
new file mode 100644
index 00000000..38d95bbf
--- /dev/null
+++ b/src/assets/images/files/aac.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#D670AD" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#EF8EC3" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M18.11,36l-0.387-1.472h-2.551L14.775,36h-2.331l2.562-7.885h2.831L20.431,36H18.11z M17.283,32.788
+l-0.338-1.289c-0.079-0.286-0.175-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.223-0.977c-0.032,0.182-0.096,0.482-0.191,0.902
+c-0.095,0.418-0.305,1.244-0.631,2.476H17.283z"/>
+<path fill="#FFFFFF" d="M26.097,36l-0.387-1.472h-2.551L22.762,36h-2.331l2.562-7.885h2.831L28.417,36H26.097z M25.27,32.788
+l-0.338-1.289c-0.079-0.286-0.175-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.223-0.977c-0.032,0.182-0.096,0.482-0.191,0.902
+c-0.095,0.418-0.305,1.244-0.631,2.476H25.27z"/>
+<path fill="#FFFFFF" d="M32.763,29.775c-0.505,0-0.899,0.206-1.182,0.62c-0.283,0.413-0.424,0.983-0.424,1.71
+c0,1.512,0.575,2.268,1.724,2.268c0.347,0,0.684-0.049,1.01-0.146s0.653-0.213,0.983-0.349v1.793
+c-0.655,0.291-1.396,0.436-2.224,0.436c-1.185,0-2.094-0.344-2.726-1.031c-0.632-0.688-0.948-1.682-0.948-2.98
+c0-0.813,0.153-1.527,0.459-2.144c0.307-0.616,0.747-1.09,1.321-1.421c0.575-0.331,1.251-0.496,2.028-0.496
+c0.849,0,1.66,0.184,2.433,0.553l-0.65,1.67c-0.29-0.136-0.58-0.25-0.87-0.344C33.407,29.821,33.096,29.775,32.763,29.775z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/ai.svg b/src/assets/images/files/ai.svg
new file mode 100644
index 00000000..33d19427
--- /dev/null
+++ b/src/assets/images/files/ai.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#D86D0E" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.104,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#FF7F00" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M23.758,36l-0.387-1.472H20.82L20.423,36h-2.331l2.562-7.885h2.83L26.078,36H23.758z M22.932,32.788
+l-0.339-1.289c-0.079-0.286-0.175-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.224-0.977c-0.031,0.182-0.096,0.482-0.19,0.902
+c-0.095,0.418-0.306,1.244-0.631,2.476H22.932z"/>
+<path fill="#FFFFFF" d="M26.928,36v-7.853h2.132V36H26.928z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/ase.svg b/src/assets/images/files/ase.svg
new file mode 100644
index 00000000..ad573707
--- /dev/null
+++ b/src/assets/images/files/ase.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#335262" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#5A7A84" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M19.48,36l-0.387-1.472h-2.552L16.145,36h-2.331l2.562-7.885h2.831L21.801,36H19.48z M18.652,32.788
+l-0.338-1.289c-0.078-0.286-0.175-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.223-0.977c-0.033,0.182-0.096,0.482-0.191,0.902
+c-0.095,0.418-0.305,1.244-0.631,2.476H18.652z"/>
+<path fill="#FFFFFF" d="M27.783,33.615c0,0.487-0.123,0.919-0.37,1.297s-0.604,0.672-1.069,0.881
+c-0.465,0.21-1.012,0.314-1.638,0.314c-0.522,0-0.962-0.037-1.315-0.11c-0.355-0.073-0.724-0.201-1.107-0.384v-1.891
+c0.405,0.208,0.826,0.37,1.263,0.486s0.838,0.174,1.203,0.174c0.315,0,0.546-0.054,0.692-0.163c0.147-0.109,0.221-0.25,0.221-0.422
+c0-0.107-0.029-0.201-0.088-0.282c-0.061-0.08-0.154-0.162-0.285-0.244s-0.479-0.251-1.045-0.505
+c-0.512-0.232-0.896-0.458-1.152-0.677s-0.445-0.469-0.568-0.752c-0.125-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.789-1.692s1.25-0.606,2.17-0.606c0.812,0,1.642,0.188,2.486,0.563l-0.649,1.638
+c-0.733-0.336-1.368-0.504-1.901-0.504c-0.275,0-0.477,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.079,0.292,0.238,0.414
+c0.16,0.122,0.592,0.344,1.297,0.666c0.678,0.305,1.146,0.631,1.41,0.98C27.652,32.646,27.783,33.085,27.783,33.615z"/>
+<path fill="#FFFFFF" d="M33.66,36h-4.662v-7.853h4.662v1.702h-2.541v1.236h2.353v1.702h-2.353v1.482h2.541V36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/asp.svg b/src/assets/images/files/asp.svg
new file mode 100644
index 00000000..0a254722
--- /dev/null
+++ b/src/assets/images/files/asp.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#458BC4" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#43A6DD" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M19.024,36l-0.387-1.472h-2.551L15.688,36h-2.331l2.562-7.885h2.831L21.344,36H19.024z M18.197,32.788
+l-0.338-1.289c-0.079-0.286-0.175-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.223-0.977c-0.032,0.182-0.096,0.482-0.191,0.902
+c-0.095,0.418-0.305,1.244-0.631,2.476H18.197z"/>
+<path fill="#FFFFFF" d="M27.328,33.615c0,0.487-0.124,0.919-0.371,1.297s-0.604,0.672-1.069,0.881
+c-0.465,0.21-1.012,0.314-1.638,0.314c-0.523,0-0.961-0.037-1.316-0.11s-0.723-0.201-1.106-0.384v-1.891
+c0.405,0.208,0.825,0.37,1.262,0.486s0.838,0.174,1.203,0.174c0.315,0,0.546-0.054,0.693-0.163s0.22-0.25,0.22-0.422
+c0-0.107-0.03-0.201-0.088-0.282c-0.06-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.512-0.232-0.896-0.458-1.152-0.677c-0.256-0.219-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.79-1.692s1.25-0.606,2.17-0.606c0.813,0,1.642,0.188,2.487,0.563l-0.65,1.638
+c-0.734-0.336-1.368-0.504-1.901-0.504c-0.276,0-0.476,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.08,0.292,0.239,0.414
+c0.159,0.122,0.591,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98C27.196,32.646,27.328,33.085,27.328,33.615z"/>
+<path fill="#FFFFFF" d="M34.24,30.645c0,0.878-0.259,1.556-0.776,2.033c-0.518,0.479-1.252,0.717-2.205,0.717h-0.596V36h-2.122
+v-7.853h2.718c0.992,0,1.737,0.217,2.234,0.649C33.991,29.23,34.24,29.847,34.24,30.645z M30.663,31.666h0.387
+c0.319,0,0.572-0.09,0.76-0.27c0.188-0.179,0.282-0.426,0.282-0.74c0-0.53-0.293-0.795-0.881-0.795h-0.548V31.666z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/aspx.svg b/src/assets/images/files/aspx.svg
new file mode 100644
index 00000000..de4dd224
--- /dev/null
+++ b/src/assets/images/files/aspx.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#4DA34D" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#72C472" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M15.046,36l-0.387-1.472h-2.551L11.711,36H9.38l2.562-7.885h2.831L17.367,36H15.046z M14.219,32.788
+l-0.338-1.289c-0.079-0.286-0.175-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.223-0.977c-0.032,0.182-0.096,0.482-0.191,0.902
+c-0.095,0.418-0.305,1.244-0.631,2.476H14.219z"/>
+<path fill="#FFFFFF" d="M23.35,33.615c0,0.487-0.124,0.919-0.371,1.297s-0.604,0.672-1.069,0.881
+c-0.465,0.21-1.012,0.314-1.638,0.314c-0.523,0-0.961-0.037-1.316-0.11s-0.723-0.201-1.106-0.384v-1.891
+c0.405,0.208,0.825,0.37,1.262,0.486s0.838,0.174,1.203,0.174c0.315,0,0.546-0.054,0.693-0.163s0.22-0.25,0.22-0.422
+c0-0.107-0.03-0.201-0.088-0.282c-0.06-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.512-0.232-0.896-0.458-1.152-0.677c-0.256-0.219-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.79-1.692s1.25-0.606,2.17-0.606c0.813,0,1.642,0.188,2.487,0.563l-0.65,1.638
+c-0.734-0.336-1.368-0.504-1.901-0.504c-0.276,0-0.476,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.08,0.292,0.239,0.414
+c0.159,0.122,0.591,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98C23.218,32.646,23.35,33.085,23.35,33.615z"/>
+<path fill="#FFFFFF" d="M30.263,30.645c0,0.878-0.259,1.556-0.776,2.033c-0.518,0.479-1.252,0.717-2.205,0.717h-0.596V36h-2.122
+v-7.853h2.718c0.992,0,1.737,0.217,2.234,0.649C30.014,29.23,30.263,29.847,30.263,30.645z M26.686,31.666h0.387
+c0.319,0,0.572-0.09,0.76-0.27c0.188-0.179,0.282-0.426,0.282-0.74c0-0.53-0.293-0.795-0.881-0.795h-0.548V31.666z"/>
+<path fill="#FFFFFF" d="M38.588,36h-2.455l-1.531-2.455L33.088,36h-2.401l2.605-4.018l-2.449-3.835h2.353l1.418,2.428l1.364-2.428
+H38.4l-2.487,4.001L38.588,36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/avi.svg b/src/assets/images/files/avi.svg
new file mode 100644
index 00000000..9da8a8c3
--- /dev/null
+++ b/src/assets/images/files/avi.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#5B5BB5" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#8680D8" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M19.942,36l-0.387-1.472h-2.551L16.606,36h-2.331l2.562-7.885h2.831L22.262,36H19.942z M19.115,32.788
+l-0.338-1.289c-0.079-0.286-0.175-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.223-0.977c-0.032,0.182-0.096,0.482-0.191,0.902
+c-0.095,0.418-0.305,1.244-0.631,2.476H19.115z"/>
+<path fill="#FFFFFF" d="M27.521,28.147h2.374L27.322,36h-2.498l-2.562-7.853h2.385l1.069,3.979c0.222,0.885,0.344,1.501,0.365,1.848
+c0.025-0.25,0.075-0.563,0.15-0.939s0.142-0.672,0.199-0.887L27.521,28.147z"/>
+<path fill="#FFFFFF" d="M30.743,36v-7.853h2.132V36H30.743z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/bmp.svg b/src/assets/images/files/bmp.svg
new file mode 100644
index 00000000..d966f646
--- /dev/null
+++ b/src/assets/images/files/bmp.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#CE783E" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#EA9860" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M12.35,28.147h2.74c1.066,0,1.859,0.158,2.377,0.476c0.517,0.316,0.775,0.81,0.775,1.479
+c0,0.44-0.113,0.816-0.338,1.128c-0.227,0.312-0.523,0.512-0.893,0.602v0.054c0.487,0.129,0.84,0.344,1.059,0.645
+s0.328,0.691,0.328,1.171c0,0.713-0.268,1.273-0.803,1.684C17.06,35.795,16.33,36,15.406,36H12.35V28.147z M14.472,31.16h0.64
+c0.304,0,0.539-0.062,0.705-0.188c0.168-0.125,0.25-0.312,0.25-0.559c0-0.44-0.332-0.66-0.998-0.66h-0.597V31.16z M14.472,32.713
+v1.648h0.747c0.662,0,0.993-0.279,0.993-0.838c0-0.261-0.089-0.461-0.267-0.602c-0.176-0.139-0.434-0.209-0.77-0.209H14.472z"/>
+<path fill="#FFFFFF" d="M23.184,36l-1.605-5.656h-0.049c0.075,0.964,0.113,1.712,0.113,2.246V36h-1.881v-7.853h2.826l1.638,5.575
+h0.043l1.606-5.575h2.83V36h-1.949v-3.443c0-0.179,0.002-0.377,0.008-0.596s0.029-0.754,0.072-1.605h-0.049L25.203,36H23.184z"/>
+<path fill="#FFFFFF" d="M36.096,30.645c0,0.878-0.259,1.556-0.775,2.033c-0.518,0.479-1.253,0.717-2.205,0.717h-0.597V36h-2.122
+v-7.853h2.719c0.991,0,1.736,0.217,2.234,0.649C35.847,29.23,36.096,29.847,36.096,30.645z M32.519,31.666h0.387
+c0.319,0,0.571-0.09,0.761-0.27c0.188-0.179,0.281-0.426,0.281-0.74c0-0.53-0.293-0.795-0.881-0.795h-0.548V31.666z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/c++.svg b/src/assets/images/files/c++.svg
new file mode 100644
index 00000000..bbe352c4
--- /dev/null
+++ b/src/assets/images/files/c++.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#A67C52" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#C19F85" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M18.551,29.775c-0.505,0-0.898,0.206-1.182,0.62c-0.283,0.413-0.424,0.983-0.424,1.71
+c0,1.512,0.574,2.268,1.724,2.268c0.347,0,0.685-0.049,1.01-0.146s0.653-0.213,0.983-0.349v1.793
+c-0.656,0.291-1.396,0.436-2.225,0.436c-1.185,0-2.094-0.344-2.725-1.031c-0.633-0.688-0.949-1.682-0.949-2.98
+c0-0.813,0.154-1.527,0.459-2.144c0.307-0.616,0.748-1.09,1.322-1.421s1.25-0.496,2.027-0.496c0.849,0,1.66,0.184,2.434,0.553
+l-0.65,1.67c-0.29-0.136-0.58-0.25-0.87-0.344C19.195,29.821,18.884,29.775,18.551,29.775z"/>
+<path fill="#FFFFFF" d="M23.729,32.842H21.73v-1.439h1.998v-1.971h1.445v1.971h1.998v1.439h-1.998v1.939h-1.445V32.842z"/>
+<path fill="#FFFFFF" d="M29.953,32.842h-1.998v-1.439h1.998v-1.971h1.445v1.971h1.998v1.439h-1.998v1.939h-1.445V32.842z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/cad.svg b/src/assets/images/files/cad.svg
new file mode 100644
index 00000000..16ee1953
--- /dev/null
+++ b/src/assets/images/files/cad.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#CC4842" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#E86C60" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M16.746,29.775c-0.505,0-0.899,0.206-1.182,0.62c-0.283,0.413-0.424,0.983-0.424,1.71
+c0,1.512,0.575,2.268,1.724,2.268c0.347,0,0.684-0.049,1.01-0.146s0.653-0.213,0.983-0.349v1.793
+c-0.655,0.291-1.396,0.436-2.224,0.436c-1.185,0-2.094-0.344-2.726-1.031c-0.632-0.688-0.948-1.682-0.948-2.98
+c0-0.813,0.153-1.527,0.459-2.144c0.307-0.616,0.747-1.09,1.321-1.421c0.575-0.331,1.251-0.496,2.028-0.496
+c0.849,0,1.66,0.184,2.433,0.553l-0.65,1.67c-0.29-0.136-0.58-0.25-0.87-0.344C17.391,29.821,17.079,29.775,16.746,29.775z"/>
+<path fill="#FFFFFF" d="M25.206,36l-0.387-1.472h-2.551L21.87,36h-2.331l2.562-7.885h2.831L27.526,36H25.206z M24.378,32.788
+l-0.338-1.289c-0.079-0.286-0.175-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.223-0.977c-0.032,0.182-0.096,0.482-0.191,0.902
+c-0.095,0.418-0.305,1.244-0.631,2.476H24.378z"/>
+<path fill="#FFFFFF" d="M35.04,31.907c0,1.311-0.361,2.32-1.083,3.029C33.236,35.646,32.222,36,30.915,36h-2.541v-7.853h2.718
+c1.26,0,2.233,0.322,2.919,0.967C34.697,29.759,35.04,30.689,35.04,31.907z M32.838,31.982c0-0.72-0.142-1.253-0.427-1.601
+c-0.284-0.348-0.717-0.521-1.297-0.521h-0.618v4.398h0.473c0.645,0,1.117-0.188,1.418-0.562
+C32.687,33.324,32.838,32.752,32.838,31.982z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/cfm.svg b/src/assets/images/files/cfm.svg
new file mode 100644
index 00000000..79870942
--- /dev/null
+++ b/src/assets/images/files/cfm.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#122E66" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#1D3F8E" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M16.494,29.775c-0.505,0-0.899,0.206-1.182,0.62c-0.283,0.413-0.424,0.983-0.424,1.71
+c0,1.512,0.575,2.268,1.724,2.268c0.347,0,0.684-0.049,1.01-0.146s0.653-0.213,0.983-0.349v1.793
+c-0.655,0.291-1.396,0.436-2.224,0.436c-1.185,0-2.094-0.344-2.726-1.031c-0.632-0.688-0.948-1.682-0.948-2.98
+c0-0.813,0.153-1.527,0.459-2.144c0.307-0.616,0.747-1.09,1.321-1.421c0.575-0.331,1.251-0.496,2.028-0.496
+c0.849,0,1.66,0.184,2.433,0.553l-0.65,1.67c-0.29-0.136-0.58-0.25-0.87-0.344C17.138,29.821,16.827,29.775,16.494,29.775z"/>
+<path fill="#FFFFFF" d="M22.225,36h-2.089v-7.853h4.641v1.702h-2.551v1.499h2.353v1.702h-2.353V36z"/>
+<path fill="#FFFFFF" d="M29.486,36l-1.606-5.656h-0.048c0.075,0.964,0.113,1.712,0.113,2.246V36h-1.88v-7.853h2.825l1.638,5.575
+h0.043l1.606-5.575h2.831V36h-1.95v-3.443c0-0.179,0.003-0.377,0.008-0.596c0.006-0.219,0.03-0.754,0.073-1.605H33.09L31.506,36
+H29.486z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/cgi.svg b/src/assets/images/files/cgi.svg
new file mode 100644
index 00000000..e8811aa6
--- /dev/null
+++ b/src/assets/images/files/cgi.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#03283A" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#003F66" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M18.79,29.775c-0.505,0-0.899,0.206-1.182,0.62c-0.282,0.413-0.425,0.983-0.425,1.71
+c0,1.512,0.575,2.268,1.725,2.268c0.348,0,0.684-0.049,1.01-0.146s0.653-0.213,0.982-0.349v1.793
+c-0.654,0.291-1.396,0.436-2.223,0.436c-1.186,0-2.094-0.344-2.727-1.031c-0.632-0.688-0.947-1.682-0.947-2.98
+c0-0.813,0.152-1.527,0.459-2.144s0.746-1.09,1.32-1.421c0.576-0.331,1.252-0.496,2.028-0.496c0.849,0,1.659,0.184,2.433,0.553
+l-0.649,1.67c-0.29-0.136-0.58-0.25-0.87-0.344C19.435,29.821,19.123,29.775,18.79,29.775z"/>
+<path fill="#FFFFFF" d="M25.584,31.402h3.39v4.232c-0.921,0.315-1.932,0.473-3.034,0.473c-1.211,0-2.146-0.351-2.807-1.053
+c-0.661-0.702-0.991-1.703-0.991-3.002c0-1.268,0.362-2.255,1.085-2.96s1.736-1.058,3.04-1.058c0.494,0,0.96,0.046,1.399,0.139
+c0.438,0.094,0.82,0.212,1.146,0.355l-0.672,1.664c-0.565-0.279-1.187-0.418-1.863-0.418c-0.619,0-1.099,0.201-1.437,0.604
+c-0.339,0.403-0.508,0.979-0.508,1.727c0,0.734,0.153,1.294,0.459,1.679c0.307,0.385,0.747,0.577,1.324,0.577
+c0.315,0,0.604-0.03,0.87-0.091v-1.229h-1.402V31.402z"/>
+<path fill="#FFFFFF" d="M30.574,36v-7.853h2.133V36H30.574z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/csh.svg b/src/assets/images/files/csh.svg
new file mode 100644
index 00000000..eb5cca5d
--- /dev/null
+++ b/src/assets/images/files/csh.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#458BC4" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#43A6DD" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M17.388,29.775c-0.505,0-0.899,0.206-1.182,0.62c-0.283,0.413-0.424,0.983-0.424,1.71
+c0,1.512,0.575,2.268,1.724,2.268c0.347,0,0.684-0.049,1.01-0.146s0.653-0.213,0.983-0.349v1.793
+c-0.655,0.291-1.396,0.436-2.224,0.436c-1.185,0-2.094-0.344-2.726-1.031c-0.632-0.688-0.948-1.682-0.948-2.98
+c0-0.813,0.153-1.527,0.459-2.144c0.307-0.616,0.747-1.09,1.321-1.421c0.575-0.331,1.251-0.496,2.028-0.496
+c0.849,0,1.66,0.184,2.433,0.553l-0.65,1.67c-0.29-0.136-0.58-0.25-0.87-0.344C18.033,29.821,17.721,29.775,17.388,29.775z"/>
+<path fill="#FFFFFF" d="M26.165,33.615c0,0.487-0.124,0.919-0.371,1.297s-0.604,0.672-1.069,0.881
+c-0.465,0.21-1.012,0.314-1.638,0.314c-0.523,0-0.961-0.037-1.316-0.11s-0.723-0.201-1.106-0.384v-1.891
+c0.405,0.208,0.825,0.37,1.262,0.486s0.838,0.174,1.203,0.174c0.315,0,0.546-0.054,0.693-0.163s0.22-0.25,0.22-0.422
+c0-0.107-0.03-0.201-0.088-0.282c-0.06-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.512-0.232-0.896-0.458-1.152-0.677c-0.256-0.219-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.79-1.692s1.25-0.606,2.17-0.606c0.813,0,1.642,0.188,2.487,0.563l-0.65,1.638
+c-0.734-0.336-1.368-0.504-1.901-0.504c-0.276,0-0.476,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.08,0.292,0.239,0.414
+c0.159,0.122,0.591,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98C26.033,32.646,26.165,33.085,26.165,33.615z"/>
+<path fill="#FFFFFF" d="M34.108,36h-2.132v-3.201h-2.465V36h-2.132v-7.853h2.132v2.911h2.465v-2.911h2.132V36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/css.svg b/src/assets/images/files/css.svg
new file mode 100644
index 00000000..59692551
--- /dev/null
+++ b/src/assets/images/files/css.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#4DA34D" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#72C472" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M18.428,29.775c-0.505,0-0.899,0.206-1.182,0.62c-0.283,0.413-0.424,0.983-0.424,1.71
+c0,1.512,0.575,2.268,1.724,2.268c0.347,0,0.684-0.049,1.01-0.146s0.653-0.213,0.983-0.349v1.793
+c-0.655,0.291-1.396,0.436-2.224,0.436c-1.185,0-2.094-0.344-2.726-1.031c-0.632-0.688-0.948-1.682-0.948-2.98
+c0-0.813,0.153-1.527,0.459-2.144c0.307-0.616,0.747-1.09,1.321-1.421c0.575-0.331,1.251-0.496,2.028-0.496
+c0.849,0,1.66,0.184,2.433,0.553l-0.65,1.67c-0.29-0.136-0.58-0.25-0.87-0.344C19.072,29.821,18.761,29.775,18.428,29.775z"/>
+<path fill="#FFFFFF" d="M27.204,33.615c0,0.487-0.124,0.919-0.371,1.297s-0.604,0.672-1.069,0.881
+c-0.465,0.21-1.012,0.314-1.638,0.314c-0.523,0-0.961-0.037-1.316-0.11s-0.723-0.201-1.106-0.384v-1.891
+c0.405,0.208,0.825,0.37,1.262,0.486s0.838,0.174,1.203,0.174c0.315,0,0.546-0.054,0.693-0.163s0.22-0.25,0.22-0.422
+c0-0.107-0.03-0.201-0.088-0.282c-0.06-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.512-0.232-0.896-0.458-1.152-0.677c-0.256-0.219-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.79-1.692s1.25-0.606,2.17-0.606c0.813,0,1.642,0.188,2.487,0.563l-0.65,1.638
+c-0.734-0.336-1.368-0.504-1.901-0.504c-0.276,0-0.476,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.08,0.292,0.239,0.414
+c0.159,0.122,0.591,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98C27.072,32.646,27.204,33.085,27.204,33.615z"/>
+<path fill="#FFFFFF" d="M33.553,33.615c0,0.487-0.124,0.919-0.371,1.297s-0.604,0.672-1.069,0.881
+c-0.465,0.21-1.012,0.314-1.638,0.314c-0.523,0-0.961-0.037-1.316-0.11s-0.723-0.201-1.106-0.384v-1.891
+c0.405,0.208,0.825,0.37,1.262,0.486s0.838,0.174,1.203,0.174c0.315,0,0.546-0.054,0.693-0.163s0.22-0.25,0.22-0.422
+c0-0.107-0.03-0.201-0.088-0.282c-0.06-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.512-0.232-0.896-0.458-1.152-0.677c-0.256-0.219-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.79-1.692s1.25-0.606,2.17-0.606c0.813,0,1.642,0.188,2.487,0.563l-0.65,1.638
+c-0.734-0.336-1.368-0.504-1.901-0.504c-0.276,0-0.476,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.08,0.292,0.239,0.414
+c0.159,0.122,0.591,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98C33.421,32.646,33.553,33.085,33.553,33.615z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/csv.svg b/src/assets/images/files/csv.svg
new file mode 100644
index 00000000..e1dd6611
--- /dev/null
+++ b/src/assets/images/files/csv.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#0E512B" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#1B7343" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M17.786,29.775c-0.505,0-0.899,0.206-1.182,0.62c-0.283,0.413-0.424,0.983-0.424,1.71
+c0,1.512,0.575,2.268,1.724,2.268c0.347,0,0.684-0.049,1.01-0.146s0.653-0.213,0.983-0.349v1.793
+c-0.655,0.291-1.396,0.436-2.224,0.436c-1.185,0-2.094-0.344-2.726-1.031c-0.632-0.688-0.948-1.682-0.948-2.98
+c0-0.813,0.153-1.527,0.459-2.144c0.307-0.616,0.747-1.09,1.321-1.421c0.575-0.331,1.251-0.496,2.028-0.496
+c0.849,0,1.66,0.184,2.433,0.553l-0.65,1.67c-0.29-0.136-0.58-0.25-0.87-0.344C18.43,29.821,18.119,29.775,17.786,29.775z"/>
+<path fill="#FFFFFF" d="M26.562,33.615c0,0.487-0.124,0.919-0.371,1.297s-0.604,0.672-1.069,0.881
+c-0.465,0.21-1.012,0.314-1.638,0.314c-0.523,0-0.961-0.037-1.316-0.11s-0.723-0.201-1.106-0.384v-1.891
+c0.405,0.208,0.825,0.37,1.262,0.486s0.838,0.174,1.203,0.174c0.315,0,0.546-0.054,0.693-0.163s0.22-0.25,0.22-0.422
+c0-0.107-0.03-0.201-0.088-0.282c-0.06-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.512-0.232-0.896-0.458-1.152-0.677c-0.256-0.219-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.79-1.692s1.25-0.606,2.17-0.606c0.813,0,1.642,0.188,2.487,0.563l-0.65,1.638
+c-0.734-0.336-1.368-0.504-1.901-0.504c-0.276,0-0.476,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.08,0.292,0.239,0.414
+c0.159,0.122,0.591,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98C26.43,32.646,26.562,33.085,26.562,33.615z"/>
+<path fill="#FFFFFF" d="M32.186,28.147h2.374L31.987,36h-2.498l-2.562-7.853h2.385l1.069,3.979c0.222,0.885,0.344,1.501,0.365,1.848
+c0.025-0.25,0.075-0.563,0.15-0.939s0.142-0.672,0.199-0.887L32.186,28.147z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/default.svg b/src/assets/images/files/default.svg
new file mode 100644
index 00000000..2676714d
--- /dev/null
+++ b/src/assets/images/files/default.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/dmg.svg b/src/assets/images/files/dmg.svg
new file mode 100644
index 00000000..1e55afb8
--- /dev/null
+++ b/src/assets/images/files/dmg.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#D670AD" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#EF8EC3" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M18.089,31.907c0,1.311-0.361,2.32-1.083,3.029C16.285,35.646,15.271,36,13.964,36h-2.541v-7.853h2.718
+c1.26,0,2.233,0.322,2.919,0.967C17.746,29.759,18.089,30.689,18.089,31.907z M15.887,31.982c0-0.72-0.142-1.253-0.427-1.601
+c-0.284-0.348-0.717-0.521-1.297-0.521h-0.618v4.398h0.473c0.645,0,1.117-0.188,1.418-0.562S15.887,32.752,15.887,31.982z"/>
+<path fill="#FFFFFF" d="M22.917,36l-1.606-5.656h-0.048c0.075,0.964,0.113,1.712,0.113,2.246V36h-1.88v-7.853h2.825l1.638,5.575
+h0.043l1.606-5.575h2.831V36h-1.95v-3.443c0-0.179,0.003-0.377,0.008-0.596c0.006-0.219,0.03-0.754,0.073-1.605h-0.048L24.937,36
+H22.917z"/>
+<path fill="#FFFFFF" d="M33.284,31.402h3.389v4.232c-0.92,0.315-1.932,0.473-3.035,0.473c-1.21,0-2.146-0.351-2.806-1.053
+c-0.661-0.702-0.991-1.703-0.991-3.002c0-1.268,0.362-2.255,1.085-2.96s1.737-1.058,3.04-1.058c0.494,0,0.96,0.046,1.399,0.139
+c0.438,0.094,0.821,0.212,1.146,0.355l-0.671,1.664c-0.566-0.279-1.187-0.418-1.864-0.418c-0.62,0-1.099,0.201-1.437,0.604
+c-0.339,0.403-0.508,0.979-0.508,1.727c0,0.734,0.153,1.294,0.459,1.679c0.307,0.385,0.748,0.577,1.324,0.577
+c0.315,0,0.605-0.03,0.87-0.091v-1.229h-1.402V31.402z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/doc.svg b/src/assets/images/files/doc.svg
new file mode 100644
index 00000000..dee20735
--- /dev/null
+++ b/src/assets/images/files/doc.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#12376B" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#27549B" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M19.525,31.907c0,1.311-0.36,2.32-1.082,3.029C17.723,35.646,16.708,36,15.4,36h-2.54v-7.853h2.718
+c1.26,0,2.233,0.322,2.919,0.967C19.184,29.759,19.525,30.689,19.525,31.907z M17.324,31.982c0-0.72-0.143-1.253-0.428-1.601
+c-0.284-0.348-0.717-0.521-1.297-0.521h-0.617v4.398h0.473c0.645,0,1.117-0.188,1.418-0.562S17.324,32.752,17.324,31.982z"/>
+<path fill="#FFFFFF" d="M28.281,32.062c0,1.322-0.324,2.326-0.973,3.014s-1.598,1.031-2.847,1.031c-1.231,0-2.177-0.346-2.833-1.037
+c-0.657-0.69-0.986-1.697-0.986-3.018c0-1.308,0.327-2.306,0.98-2.995c0.654-0.689,1.604-1.034,2.85-1.034
+c1.25,0,2.197,0.343,2.842,1.026S28.281,30.738,28.281,32.062z M22.877,32.062c0,1.519,0.529,2.277,1.585,2.277
+c0.537,0,0.936-0.184,1.194-0.553c0.26-0.369,0.391-0.943,0.391-1.725c0-0.783-0.133-1.363-0.395-1.737
+c-0.264-0.374-0.656-0.562-1.18-0.562C23.409,29.764,22.877,30.53,22.877,32.062z"/>
+<path fill="#FFFFFF" d="M33.195,29.775c-0.505,0-0.898,0.206-1.182,0.62c-0.283,0.413-0.424,0.983-0.424,1.71
+c0,1.512,0.574,2.268,1.724,2.268c0.347,0,0.685-0.049,1.01-0.146s0.653-0.213,0.983-0.349v1.793
+c-0.656,0.291-1.396,0.436-2.225,0.436c-1.185,0-2.094-0.344-2.725-1.031c-0.633-0.688-0.949-1.682-0.949-2.98
+c0-0.813,0.154-1.527,0.459-2.144c0.307-0.616,0.748-1.09,1.322-1.421s1.25-0.496,2.027-0.496c0.849,0,1.66,0.184,2.434,0.553
+L35,30.258c-0.29-0.136-0.58-0.25-0.87-0.344C33.84,29.821,33.528,29.775,33.195,29.775z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/docx.svg b/src/assets/images/files/docx.svg
new file mode 100644
index 00000000..298c8c0e
--- /dev/null
+++ b/src/assets/images/files/docx.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#12376B" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#27549B" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M15.549,31.907c0,1.311-0.361,2.32-1.083,3.029C13.744,35.646,12.73,36,11.424,36H8.883v-7.853h2.718
+c1.261,0,2.233,0.322,2.919,0.967S15.549,30.689,15.549,31.907z M13.346,31.982c0-0.72-0.142-1.253-0.427-1.601
+c-0.284-0.348-0.717-0.521-1.297-0.521h-0.618v4.398h0.473c0.645,0,1.117-0.188,1.418-0.562S13.346,32.752,13.346,31.982z"/>
+<path fill="#FFFFFF" d="M24.303,32.062c0,1.322-0.324,2.326-0.972,3.014s-1.597,1.031-2.847,1.031c-1.232,0-2.176-0.346-2.834-1.037
+c-0.656-0.69-0.984-1.697-0.984-3.018c0-1.308,0.326-2.306,0.98-2.995c0.652-0.689,1.603-1.034,2.849-1.034
+c1.249,0,2.196,0.343,2.841,1.026S24.303,30.738,24.303,32.062z M18.9,32.062c0,1.519,0.527,2.277,1.584,2.277
+c0.537,0,0.936-0.184,1.195-0.553s0.389-0.943,0.389-1.725c0-0.783-0.131-1.363-0.395-1.737c-0.264-0.374-0.656-0.562-1.179-0.562
+C19.432,29.764,18.9,30.53,18.9,32.062z"/>
+<path fill="#FFFFFF" d="M29.218,29.775c-0.505,0-0.899,0.206-1.182,0.62c-0.282,0.413-0.425,0.983-0.425,1.71
+c0,1.512,0.575,2.268,1.725,2.268c0.348,0,0.684-0.049,1.01-0.146s0.653-0.213,0.982-0.349v1.793
+c-0.654,0.291-1.396,0.436-2.223,0.436c-1.186,0-2.094-0.344-2.727-1.031c-0.632-0.688-0.947-1.682-0.947-2.98
+c0-0.813,0.152-1.527,0.459-2.144s0.746-1.09,1.32-1.421c0.576-0.331,1.252-0.496,2.028-0.496c0.849,0,1.659,0.184,2.433,0.553
+l-0.649,1.67c-0.29-0.136-0.58-0.25-0.87-0.344C29.862,29.821,29.551,29.775,29.218,29.775z"/>
+<path fill="#FFFFFF" d="M39.934,36h-2.455l-1.531-2.455L34.434,36h-2.401l2.604-4.018l-2.449-3.835h2.354l1.418,2.428l1.363-2.428
+h2.423l-2.487,4.001L39.934,36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/eps.svg b/src/assets/images/files/eps.svg
new file mode 100644
index 00000000..35879b7a
--- /dev/null
+++ b/src/assets/images/files/eps.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#D86D0E" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#FF7F00" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M19.843,36h-4.662v-7.853h4.662v1.702h-2.541v1.236h2.353v1.702h-2.353v1.482h2.541V36z"/>
+<path fill="#FFFFFF" d="M26.917,30.645c0,0.878-0.259,1.556-0.776,2.033c-0.518,0.479-1.252,0.717-2.205,0.717h-0.596V36h-2.122
+v-7.853h2.718c0.992,0,1.737,0.217,2.234,0.649C26.667,29.23,26.917,29.847,26.917,30.645z M23.339,31.666h0.387
+c0.319,0,0.572-0.09,0.76-0.27c0.188-0.179,0.282-0.426,0.282-0.74c0-0.53-0.293-0.795-0.881-0.795h-0.548V31.666z"/>
+<path fill="#FFFFFF" d="M33.303,33.615c0,0.487-0.124,0.919-0.371,1.297s-0.604,0.672-1.069,0.881
+c-0.465,0.21-1.012,0.314-1.638,0.314c-0.523,0-0.961-0.037-1.316-0.11s-0.723-0.201-1.106-0.384v-1.891
+c0.405,0.208,0.825,0.37,1.262,0.486s0.838,0.174,1.203,0.174c0.315,0,0.546-0.054,0.693-0.163s0.22-0.25,0.22-0.422
+c0-0.107-0.03-0.201-0.088-0.282c-0.06-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.512-0.232-0.896-0.458-1.152-0.677c-0.256-0.219-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.79-1.692s1.25-0.606,2.17-0.606c0.813,0,1.642,0.188,2.487,0.563l-0.65,1.638
+c-0.734-0.336-1.368-0.504-1.901-0.504c-0.276,0-0.476,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.08,0.292,0.239,0.414
+c0.159,0.122,0.591,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98C33.171,32.646,33.303,33.085,33.303,33.615z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/epub.svg b/src/assets/images/files/epub.svg
new file mode 100644
index 00000000..7e18a411
--- /dev/null
+++ b/src/assets/images/files/epub.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#CC4842" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#E86C60" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M15.148,36h-4.662v-7.853h4.662v1.702h-2.541v1.236h2.354v1.702h-2.354v1.482h2.541V36z"/>
+<path fill="#FFFFFF" d="M22.223,30.645c0,0.878-0.26,1.556-0.776,2.033c-0.518,0.479-1.253,0.717-2.205,0.717h-0.597V36h-2.121
+v-7.853h2.718c0.991,0,1.737,0.217,2.234,0.649C21.973,29.23,22.223,29.847,22.223,30.645z M18.645,31.666h0.387
+c0.319,0,0.572-0.09,0.761-0.27c0.188-0.179,0.282-0.426,0.282-0.74c0-0.53-0.294-0.795-0.881-0.795h-0.549V31.666z"/>
+<path fill="#FFFFFF" d="M30.15,28.147v4.727c0,1.027-0.291,1.823-0.873,2.388c-0.582,0.563-1.421,0.846-2.517,0.846
+c-1.071,0-1.894-0.273-2.468-0.822c-0.575-0.547-0.862-1.335-0.862-2.363v-4.774h2.132v4.608c0,0.555,0.105,0.958,0.313,1.209
+c0.207,0.25,0.514,0.375,0.918,0.375c0.434,0,0.748-0.124,0.942-0.373c0.195-0.249,0.293-0.656,0.293-1.222v-4.598H30.15z"/>
+<path fill="#FFFFFF" d="M31.799,28.147h2.739c1.067,0,1.859,0.158,2.377,0.476c0.517,0.316,0.776,0.81,0.776,1.479
+c0,0.44-0.113,0.816-0.339,1.128s-0.522,0.512-0.892,0.602v0.054c0.486,0.129,0.84,0.344,1.059,0.645
+c0.218,0.301,0.327,0.691,0.327,1.171c0,0.713-0.268,1.273-0.803,1.684C36.508,35.795,35.779,36,34.855,36h-3.057V28.147z
+ M33.92,31.16h0.64c0.304,0,0.54-0.062,0.706-0.188c0.167-0.125,0.25-0.312,0.25-0.559c0-0.44-0.333-0.66-0.999-0.66H33.92V31.16z
+ M33.92,32.713v1.648h0.747c0.663,0,0.993-0.279,0.993-0.838c0-0.261-0.088-0.461-0.266-0.602c-0.177-0.139-0.434-0.209-0.771-0.209
+H33.92z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/exe.svg b/src/assets/images/files/exe.svg
new file mode 100644
index 00000000..6d9238cc
--- /dev/null
+++ b/src/assets/images/files/exe.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#76B5B5" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#9BCED3" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M19.496,36h-4.662v-7.853h4.662v1.702h-2.54v1.236h2.353v1.702h-2.353v1.482h2.54V36z"/>
+<path fill="#FFFFFF" d="M27.945,36H25.49l-1.53-2.455L22.445,36h-2.4l2.604-4.018L20.2,28.147h2.353l1.418,2.428l1.364-2.428h2.423
+l-2.487,4.001L27.945,36z"/>
+<path fill="#FFFFFF" d="M33.488,36h-4.662v-7.853h4.662v1.702h-2.541v1.236h2.354v1.702h-2.354v1.482h2.541V36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/flash.svg b/src/assets/images/files/flash.svg
new file mode 100644
index 00000000..7ead3253
--- /dev/null
+++ b/src/assets/images/files/flash.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#9B131A" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#EB1518" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M9.391,36h-2.09v-7.853h4.641v1.702H9.391v1.499h2.353v1.702H9.391V36z"/>
+<path fill="#FFFFFF" d="M13.23,36v-7.853h2.122v6.14h3.024V36H13.23z"/>
+<path fill="#FFFFFF" d="M24.451,36l-0.387-1.472h-2.551L21.115,36h-2.33l2.562-7.885h2.831L26.771,36H24.451z M23.624,32.788
+l-0.339-1.289c-0.078-0.286-0.174-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.223-0.977c-0.032,0.182-0.096,0.482-0.191,0.902
+c-0.094,0.418-0.305,1.244-0.631,2.476H23.624z"/>
+<path fill="#FFFFFF" d="M32.755,33.615c0,0.487-0.124,0.919-0.37,1.297c-0.248,0.378-0.604,0.672-1.069,0.881
+c-0.466,0.21-1.012,0.314-1.638,0.314c-0.523,0-0.962-0.037-1.316-0.11s-0.723-0.201-1.106-0.384v-1.891
+c0.405,0.208,0.825,0.37,1.263,0.486c0.437,0.116,0.838,0.174,1.203,0.174c0.314,0,0.545-0.054,0.692-0.163s0.22-0.25,0.22-0.422
+c0-0.107-0.029-0.201-0.088-0.282c-0.06-0.08-0.154-0.162-0.285-0.244s-0.479-0.251-1.045-0.505
+c-0.512-0.232-0.896-0.458-1.151-0.677c-0.257-0.219-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.264-1.288,0.789-1.692c0.527-0.404,1.25-0.606,2.17-0.606c0.813,0,1.643,0.188,2.487,0.563l-0.649,1.638
+c-0.734-0.336-1.368-0.504-1.902-0.504c-0.275,0-0.476,0.048-0.602,0.145c-0.125,0.097-0.188,0.217-0.188,0.359
+c0,0.154,0.08,0.292,0.239,0.414c0.159,0.122,0.591,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98
+C32.623,32.646,32.755,33.085,32.755,33.615z"/>
+<path fill="#FFFFFF" d="M40.699,36h-2.133v-3.201h-2.465V36h-2.133v-7.853h2.133v2.911h2.465v-2.911h2.133V36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/flv.svg b/src/assets/images/files/flv.svg
new file mode 100644
index 00000000..375ae6d4
--- /dev/null
+++ b/src/assets/images/files/flv.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#9B131A" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#EB1518" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M16.955,36h-2.089v-7.853h4.641v1.702h-2.552v1.499h2.354v1.702h-2.354V36z"/>
+<path fill="#FFFFFF" d="M20.796,36v-7.853h2.122v6.14h3.023V36H20.796z"/>
+<path fill="#FFFFFF" d="M31.607,28.147h2.375L31.409,36h-2.497l-2.562-7.853h2.385l1.068,3.979c0.223,0.885,0.344,1.501,0.365,1.848
+c0.025-0.25,0.076-0.563,0.15-0.939c0.076-0.376,0.143-0.672,0.199-0.887L31.607,28.147z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/font.svg b/src/assets/images/files/font.svg
new file mode 100644
index 00000000..841cf5a9
--- /dev/null
+++ b/src/assets/images/files/font.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#161616" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#444444" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M11.754,36H9.665v-7.853h4.641v1.702h-2.551v1.499h2.353v1.702h-2.353V36z"/>
+<path fill="#FFFFFF" d="M22.942,32.062c0,1.322-0.324,2.326-0.972,3.014s-1.597,1.031-2.847,1.031c-1.232,0-2.176-0.346-2.833-1.037
+c-0.657-0.69-0.985-1.697-0.985-3.018c0-1.308,0.327-2.306,0.98-2.995c0.653-0.689,1.603-1.034,2.849-1.034
+c1.25,0,2.197,0.343,2.841,1.026S22.942,30.738,22.942,32.062z M17.539,32.062c0,1.519,0.528,2.277,1.584,2.277
+c0.537,0,0.936-0.184,1.195-0.553c0.26-0.369,0.39-0.943,0.39-1.725c0-0.783-0.132-1.363-0.395-1.737
+c-0.264-0.374-0.656-0.562-1.179-0.562C18.07,29.764,17.539,30.53,17.539,32.062z"/>
+<path fill="#FFFFFF" d="M31.836,36h-2.782l-2.868-5.532h-0.048c0.068,0.87,0.102,1.534,0.102,1.993V36h-1.88v-7.853h2.771
+l2.857,5.457h0.032c-0.05-0.791-0.075-1.427-0.075-1.907v-3.55h1.891V36z"/>
+<path fill="#FFFFFF" d="M36.998,36h-2.122v-6.117h-1.917v-1.735h5.951v1.735h-1.912V36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/gif.svg b/src/assets/images/files/gif.svg
new file mode 100644
index 00000000..eefd4a67
--- /dev/null
+++ b/src/assets/images/files/gif.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#0277C6" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#008CFF" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M19.051,31.402h3.389v4.232c-0.92,0.315-1.932,0.473-3.035,0.473c-1.21,0-2.146-0.351-2.806-1.053
+c-0.661-0.702-0.991-1.703-0.991-3.002c0-1.268,0.361-2.255,1.085-2.96s1.737-1.058,3.04-1.058c0.494,0,0.961,0.046,1.399,0.139
+c0.438,0.094,0.821,0.212,1.146,0.355l-0.671,1.664c-0.566-0.279-1.188-0.418-1.864-0.418c-0.62,0-1.099,0.201-1.437,0.604
+c-0.339,0.403-0.508,0.979-0.508,1.727c0,0.734,0.153,1.294,0.459,1.679c0.307,0.385,0.748,0.577,1.324,0.577
+c0.314,0,0.605-0.03,0.87-0.091v-1.229h-1.401V31.402z"/>
+<path fill="#FFFFFF" d="M24.04,36v-7.853h2.132V36H24.04z"/>
+<path fill="#FFFFFF" d="M29.959,36h-2.09v-7.853h4.641v1.702h-2.551v1.499h2.353v1.702h-2.353V36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/gpx.svg b/src/assets/images/files/gpx.svg
new file mode 100644
index 00000000..1052c35c
--- /dev/null
+++ b/src/assets/images/files/gpx.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#C14287" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#ED69AB" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M16.479,31.402h3.389v4.232c-0.92,0.315-1.932,0.473-3.035,0.473c-1.21,0-2.146-0.351-2.806-1.053
+c-0.661-0.702-0.991-1.703-0.991-3.002c0-1.268,0.361-2.255,1.085-2.96s1.737-1.058,3.04-1.058c0.494,0,0.961,0.046,1.399,0.139
+c0.438,0.094,0.821,0.212,1.146,0.355l-0.671,1.664c-0.566-0.279-1.188-0.418-1.864-0.418c-0.62,0-1.099,0.201-1.437,0.604
+c-0.339,0.403-0.508,0.979-0.508,1.727c0,0.734,0.153,1.294,0.459,1.679c0.307,0.385,0.748,0.577,1.324,0.577
+c0.314,0,0.605-0.03,0.87-0.091v-1.229h-1.401V31.402z"/>
+<path fill="#FFFFFF" d="M27.166,30.645c0,0.878-0.258,1.556-0.775,2.033c-0.518,0.479-1.252,0.717-2.205,0.717H23.59V36h-2.122
+v-7.853h2.718c0.992,0,1.736,0.217,2.234,0.649C26.918,29.23,27.166,29.847,27.166,30.645z M23.59,31.666h0.387
+c0.318,0,0.571-0.09,0.76-0.27c0.188-0.179,0.281-0.426,0.281-0.74c0-0.53-0.293-0.795-0.881-0.795H23.59V31.666z"/>
+<path fill="#FFFFFF" d="M35.492,36h-2.455l-1.531-2.455L29.992,36h-2.401l2.604-4.018l-2.449-3.835H30.1l1.418,2.428l1.363-2.428
+h2.423l-2.487,4.001L35.492,36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/gzip.svg b/src/assets/images/files/gzip.svg
new file mode 100644
index 00000000..3547af13
--- /dev/null
+++ b/src/assets/images/files/gzip.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#5B5BB5" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#8680D8" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M15.181,31.402h3.39v4.232c-0.921,0.315-1.932,0.473-3.035,0.473c-1.211,0-2.146-0.351-2.807-1.053
+s-0.99-1.703-0.99-3.002c0-1.268,0.361-2.255,1.084-2.96c0.724-0.705,1.737-1.058,3.041-1.058c0.494,0,0.96,0.046,1.398,0.139
+c0.439,0.094,0.821,0.212,1.146,0.355l-0.671,1.664c-0.565-0.279-1.187-0.418-1.864-0.418c-0.619,0-1.098,0.201-1.436,0.604
+c-0.34,0.403-0.508,0.979-0.508,1.727c0,0.734,0.152,1.294,0.459,1.679s0.747,0.577,1.324,0.577c0.314,0,0.604-0.03,0.869-0.091
+v-1.229h-1.401V31.402z"/>
+<path fill="#FFFFFF" d="M25.768,36h-6.118v-1.311l3.399-4.828H19.73v-1.714h5.951v1.306l-3.4,4.834h3.486V36z"/>
+<path fill="#FFFFFF" d="M26.89,36v-7.853h2.132V36H26.89z"/>
+<path fill="#FFFFFF" d="M36.418,30.645c0,0.878-0.259,1.556-0.775,2.033c-0.518,0.479-1.253,0.717-2.205,0.717h-0.597V36h-2.122
+v-7.853h2.719c0.991,0,1.736,0.217,2.234,0.649C36.169,29.23,36.418,29.847,36.418,30.645z M32.841,31.666h0.387
+c0.319,0,0.571-0.09,0.761-0.27c0.188-0.179,0.281-0.426,0.281-0.74c0-0.53-0.293-0.795-0.881-0.795h-0.548V31.666z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/html.svg b/src/assets/images/files/html.svg
new file mode 100644
index 00000000..5400dc37
--- /dev/null
+++ b/src/assets/images/files/html.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#458BC4" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#43A6DD" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M15.597,36h-2.132v-3.201H11V36H8.867v-7.853H11v2.911h2.465v-2.911h2.132V36z"/>
+<path fill="#FFFFFF" d="M20.759,36h-2.122v-6.117H16.72v-1.735h5.951v1.735h-1.912V36z"/>
+<path fill="#FFFFFF" d="M27.215,36l-1.606-5.656h-0.048c0.075,0.964,0.113,1.712,0.113,2.246V36h-1.88v-7.853h2.825l1.638,5.575
+H28.3l1.606-5.575h2.831V36h-1.95v-3.443c0-0.179,0.003-0.377,0.008-0.596c0.006-0.219,0.03-0.754,0.073-1.605h-0.048L29.234,36
+H27.215z"/>
+<path fill="#FFFFFF" d="M34.428,36v-7.853h2.122v6.14h3.024V36H34.428z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/ics.svg b/src/assets/images/files/ics.svg
new file mode 100644
index 00000000..c5bc30f8
--- /dev/null
+++ b/src/assets/images/files/ics.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#CC4842" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#E86C60" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M16.19,36v-7.853h2.132V36H16.19z"/>
+<path fill="#FFFFFF" d="M23.517,29.775c-0.505,0-0.899,0.206-1.182,0.62c-0.282,0.413-0.425,0.983-0.425,1.71
+c0,1.512,0.575,2.268,1.725,2.268c0.348,0,0.684-0.049,1.01-0.146s0.653-0.213,0.982-0.349v1.793
+c-0.654,0.291-1.396,0.436-2.223,0.436c-1.186,0-2.094-0.344-2.727-1.031c-0.632-0.688-0.947-1.682-0.947-2.98
+c0-0.813,0.152-1.527,0.459-2.144s0.746-1.09,1.32-1.421c0.576-0.331,1.252-0.496,2.028-0.496c0.849,0,1.659,0.184,2.433,0.553
+l-0.649,1.67c-0.29-0.136-0.58-0.25-0.87-0.344C24.161,29.821,23.85,29.775,23.517,29.775z"/>
+<path fill="#FFFFFF" d="M32.293,33.615c0,0.487-0.123,0.919-0.371,1.297c-0.246,0.378-0.604,0.672-1.068,0.881
+c-0.465,0.21-1.012,0.314-1.639,0.314c-0.522,0-0.961-0.037-1.315-0.11s-0.724-0.201-1.106-0.384v-1.891
+c0.404,0.208,0.825,0.37,1.262,0.486c0.438,0.116,0.838,0.174,1.203,0.174c0.315,0,0.547-0.054,0.693-0.163s0.221-0.25,0.221-0.422
+c0-0.107-0.03-0.201-0.089-0.282c-0.06-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.513-0.232-0.896-0.458-1.152-0.677s-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.79-1.692c0.525-0.404,1.249-0.606,2.17-0.606c0.812,0,1.641,0.188,2.486,0.563l-0.65,1.638
+c-0.733-0.336-1.367-0.504-1.9-0.504c-0.276,0-0.477,0.048-0.602,0.145c-0.126,0.097-0.188,0.217-0.188,0.359
+c0,0.154,0.079,0.292,0.239,0.414c0.159,0.122,0.592,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98
+C32.161,32.646,32.293,33.085,32.293,33.615z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/iso.svg b/src/assets/images/files/iso.svg
new file mode 100644
index 00000000..a3154bd5
--- /dev/null
+++ b/src/assets/images/files/iso.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#C6A279" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#DDBE99" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M15.377,36v-7.853h2.132V36H15.377z"/>
+<path fill="#FFFFFF" d="M24.341,33.615c0,0.487-0.124,0.919-0.371,1.297s-0.604,0.672-1.069,0.881
+c-0.465,0.21-1.012,0.314-1.638,0.314c-0.523,0-0.961-0.037-1.316-0.11s-0.723-0.201-1.106-0.384v-1.891
+c0.405,0.208,0.825,0.37,1.262,0.486s0.838,0.174,1.203,0.174c0.315,0,0.546-0.054,0.693-0.163s0.22-0.25,0.22-0.422
+c0-0.107-0.03-0.201-0.088-0.282c-0.06-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.512-0.232-0.896-0.458-1.152-0.677c-0.256-0.219-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.79-1.692s1.25-0.606,2.17-0.606c0.813,0,1.642,0.188,2.487,0.563l-0.65,1.638
+c-0.734-0.336-1.368-0.504-1.901-0.504c-0.276,0-0.476,0.048-0.602,0.145S21,30.094,21,30.236c0,0.154,0.08,0.292,0.239,0.414
+c0.159,0.122,0.591,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98C24.209,32.646,24.341,33.085,24.341,33.615z"/>
+<path fill="#FFFFFF" d="M32.903,32.062c0,1.322-0.324,2.326-0.972,3.014s-1.597,1.031-2.847,1.031c-1.232,0-2.176-0.346-2.833-1.037
+c-0.657-0.69-0.985-1.697-0.985-3.018c0-1.308,0.327-2.306,0.98-2.995c0.653-0.689,1.603-1.034,2.849-1.034
+c1.25,0,2.197,0.343,2.841,1.026S32.903,30.738,32.903,32.062z M27.5,32.062c0,1.519,0.528,2.277,1.584,2.277
+c0.537,0,0.936-0.184,1.195-0.553c0.26-0.369,0.39-0.943,0.39-1.725c0-0.783-0.132-1.363-0.395-1.737
+c-0.264-0.374-0.656-0.562-1.179-0.562C28.031,29.764,27.5,30.53,27.5,32.062z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/jar.svg b/src/assets/images/files/jar.svg
new file mode 100644
index 00000000..73320066
--- /dev/null
+++ b/src/assets/images/files/jar.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#A67C52" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#C19F85" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M14.579,38.465c-0.387,0-0.754-0.037-1.101-0.112v-1.649c0.115,0.021,0.236,0.046,0.365,0.073
+c0.129,0.026,0.269,0.04,0.419,0.04c0.351,0,0.602-0.105,0.752-0.316c0.15-0.212,0.226-0.573,0.226-1.086v-7.267h2.132v7.085
+c0,1.062-0.233,1.868-0.698,2.414S15.51,38.465,14.579,38.465z"/>
+<path fill="#FFFFFF" d="M23.887,36L23.5,34.528h-2.551L20.552,36h-2.331l2.562-7.885h2.831L26.208,36H23.887z M23.06,32.788
+l-0.338-1.289c-0.079-0.286-0.175-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.223-0.977c-0.032,0.182-0.096,0.482-0.191,0.902
+c-0.095,0.418-0.305,1.244-0.631,2.476H23.06z"/>
+<path fill="#FFFFFF" d="M29.178,33.143V36h-2.122v-7.853h2.573c2.134,0,3.201,0.773,3.201,2.32c0,0.909-0.444,1.613-1.332,2.11
+L33.786,36H31.38l-1.665-2.857H29.178z M29.178,31.547h0.397c0.741,0,1.112-0.327,1.112-0.982c0-0.541-0.363-0.811-1.09-0.811
+h-0.419V31.547z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/java.svg b/src/assets/images/files/java.svg
new file mode 100644
index 00000000..b4e93e49
--- /dev/null
+++ b/src/assets/images/files/java.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#990E0E" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#E60000" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M10.492,38.465c-0.387,0-0.754-0.037-1.101-0.112v-1.649c0.115,0.021,0.236,0.046,0.365,0.073
+c0.129,0.026,0.269,0.04,0.419,0.04c0.351,0,0.602-0.105,0.752-0.316c0.15-0.212,0.226-0.573,0.226-1.086v-7.267h2.132v7.085
+c0,1.062-0.233,1.868-0.698,2.414S11.423,38.465,10.492,38.465z"/>
+<path fill="#FFFFFF" d="M19.8,36l-0.387-1.472h-2.551L16.464,36h-2.331l2.562-7.885h2.831L22.12,36H19.8z M18.973,32.788
+l-0.338-1.289c-0.079-0.286-0.175-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.223-0.977c-0.032,0.182-0.096,0.482-0.191,0.902
+c-0.095,0.418-0.305,1.244-0.631,2.476H18.973z"/>
+<path fill="#FFFFFF" d="M27.378,28.147h2.374L27.18,36h-2.498l-2.562-7.853h2.385l1.069,3.979c0.222,0.885,0.344,1.501,0.365,1.848
+c0.025-0.25,0.075-0.563,0.15-0.939s0.142-0.672,0.199-0.887L27.378,28.147z"/>
+<path fill="#FFFFFF" d="M35.419,36l-0.387-1.472h-2.551L32.083,36h-2.331l2.562-7.885h2.831L37.739,36H35.419z M34.592,32.788
+l-0.338-1.289c-0.079-0.286-0.175-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.223-0.977c-0.032,0.182-0.096,0.482-0.191,0.902
+c-0.095,0.418-0.305,1.244-0.631,2.476H34.592z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/jpg.svg b/src/assets/images/files/jpg.svg
new file mode 100644
index 00000000..d2c71c95
--- /dev/null
+++ b/src/assets/images/files/jpg.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#C9AA28" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#EFD358" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M14.748,38.465c-0.387,0-0.754-0.037-1.101-0.112v-1.649c0.115,0.021,0.236,0.046,0.365,0.073
+c0.129,0.026,0.269,0.04,0.419,0.04c0.351,0,0.602-0.105,0.752-0.316c0.15-0.212,0.226-0.573,0.226-1.086v-7.267h2.132v7.085
+c0,1.062-0.233,1.868-0.698,2.414S15.679,38.465,14.748,38.465z"/>
+<path fill="#FFFFFF" d="M24.937,30.645c0,0.878-0.259,1.556-0.776,2.033c-0.518,0.479-1.252,0.717-2.205,0.717H21.36V36h-2.122
+v-7.853h2.718c0.992,0,1.737,0.217,2.234,0.649C24.688,29.23,24.937,29.847,24.937,30.645z M21.36,31.666h0.387
+c0.319,0,0.572-0.09,0.76-0.27c0.188-0.179,0.282-0.426,0.282-0.74c0-0.53-0.293-0.795-0.881-0.795H21.36V31.666z"/>
+<path fill="#FFFFFF" d="M29.341,31.402h3.389v4.232c-0.92,0.315-1.932,0.473-3.035,0.473c-1.21,0-2.146-0.351-2.806-1.053
+c-0.661-0.702-0.991-1.703-0.991-3.002c0-1.268,0.362-2.255,1.085-2.96s1.737-1.058,3.04-1.058c0.494,0,0.96,0.046,1.399,0.139
+c0.438,0.094,0.821,0.212,1.146,0.355l-0.671,1.664c-0.566-0.279-1.187-0.418-1.864-0.418c-0.62,0-1.099,0.201-1.437,0.604
+c-0.339,0.403-0.508,0.979-0.508,1.727c0,0.734,0.153,1.294,0.459,1.679c0.307,0.385,0.748,0.577,1.324,0.577
+c0.315,0,0.605-0.03,0.87-0.091v-1.229h-1.402V31.402z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/js.svg b/src/assets/images/files/js.svg
new file mode 100644
index 00000000..d3830b5c
--- /dev/null
+++ b/src/assets/images/files/js.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#CC4842" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#E86C60" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M19.12,38.465c-0.387,0-0.754-0.037-1.101-0.112v-1.649c0.115,0.021,0.236,0.046,0.365,0.073
+c0.129,0.026,0.269,0.04,0.419,0.04c0.351,0,0.602-0.105,0.752-0.316c0.15-0.212,0.226-0.573,0.226-1.086v-7.267h2.132v7.085
+c0,1.062-0.233,1.868-0.698,2.414S20.051,38.465,19.12,38.465z"/>
+<path fill="#FFFFFF" d="M28.745,33.615c0,0.487-0.124,0.919-0.371,1.297s-0.604,0.672-1.069,0.881
+c-0.465,0.21-1.012,0.314-1.638,0.314c-0.523,0-0.961-0.037-1.316-0.11s-0.723-0.201-1.106-0.384v-1.891
+c0.405,0.208,0.825,0.37,1.262,0.486s0.838,0.174,1.203,0.174c0.315,0,0.546-0.054,0.693-0.163s0.22-0.25,0.22-0.422
+c0-0.107-0.03-0.201-0.088-0.282c-0.06-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.512-0.232-0.896-0.458-1.152-0.677c-0.256-0.219-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.79-1.692s1.25-0.606,2.17-0.606c0.813,0,1.642,0.188,2.487,0.563l-0.65,1.638
+c-0.734-0.336-1.368-0.504-1.901-0.504c-0.276,0-0.476,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.08,0.292,0.239,0.414
+c0.159,0.122,0.591,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98C28.613,32.646,28.745,33.085,28.745,33.615z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/jsp.svg b/src/assets/images/files/jsp.svg
new file mode 100644
index 00000000..7c73e070
--- /dev/null
+++ b/src/assets/images/files/jsp.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#990E0E" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#E60000" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M15.646,38.465c-0.387,0-0.754-0.037-1.101-0.112v-1.649c0.114,0.021,0.236,0.046,0.365,0.073
+c0.129,0.026,0.268,0.04,0.418,0.04c0.352,0,0.602-0.105,0.752-0.316c0.15-0.212,0.227-0.573,0.227-1.086v-7.267h2.132v7.085
+c0,1.062-0.233,1.868-0.698,2.414S16.576,38.465,15.646,38.465z"/>
+<path fill="#FFFFFF" d="M25.271,33.615c0,0.487-0.124,0.919-0.37,1.297c-0.248,0.378-0.604,0.672-1.069,0.881
+c-0.466,0.21-1.012,0.314-1.638,0.314c-0.523,0-0.962-0.037-1.316-0.11s-0.723-0.201-1.106-0.384v-1.891
+c0.405,0.208,0.825,0.37,1.263,0.486c0.437,0.116,0.838,0.174,1.203,0.174c0.314,0,0.545-0.054,0.692-0.163s0.22-0.25,0.22-0.422
+c0-0.107-0.029-0.201-0.088-0.282c-0.06-0.08-0.154-0.162-0.285-0.244s-0.479-0.251-1.045-0.505
+c-0.512-0.232-0.896-0.458-1.151-0.677c-0.257-0.219-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.264-1.288,0.789-1.692c0.527-0.404,1.25-0.606,2.17-0.606c0.813,0,1.643,0.188,2.487,0.563l-0.649,1.638
+c-0.734-0.336-1.368-0.504-1.902-0.504c-0.275,0-0.476,0.048-0.602,0.145c-0.125,0.097-0.188,0.217-0.188,0.359
+c0,0.154,0.08,0.292,0.239,0.414s0.591,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98
+C25.139,32.646,25.271,33.085,25.271,33.615z"/>
+<path fill="#FFFFFF" d="M32.184,30.645c0,0.878-0.26,1.556-0.776,2.033c-0.518,0.479-1.253,0.717-2.205,0.717h-0.597V36h-2.121
+v-7.853h2.718c0.991,0,1.737,0.217,2.234,0.649C31.934,29.23,32.184,29.847,32.184,30.645z M28.605,31.666h0.387
+c0.319,0,0.572-0.09,0.761-0.27c0.188-0.179,0.282-0.426,0.282-0.74c0-0.53-0.294-0.795-0.881-0.795h-0.549V31.666z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/link-12.svg b/src/assets/images/files/link-12.svg
new file mode 100644
index 00000000..c7a68910
--- /dev/null
+++ b/src/assets/images/files/link-12.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 54.1 (76490) - https://sketchapp.com -->
+    <title>DEA252EB-7149-42DE-B34C-229261299CDE</title>
+    <desc>Created with sketchtool.</desc>
+    <g id="Connect-new-UI-2019" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Discussions-tab" transform="translate(-595.000000, -1238.000000)" fill="#2A2A2A" fill-rule="nonzero">
+            <path d="M601.231618,1238.95279 C602.573004,1237.67969 604.67367,1237.68278 606.011321,1238.95983 C607.32956,1240.28637 607.32956,1242.43217 606.011321,1243.75871 L604.532391,1245.27891 C604.345678,1245.47556 604.067944,1245.55638 603.805255,1245.49048 C603.542566,1245.42459 603.335491,1245.22216 603.263112,1244.96051 C603.190733,1244.69887 603.264228,1244.4184 603.455529,1244.22623 L604.940475,1242.69899 C605.434102,1242.22781 605.634777,1241.52565 605.46496,1240.86382 C605.295144,1240.20198 604.781432,1239.68413 604.122319,1239.51035 C603.463206,1239.33658 602.761919,1239.53409 602.28943,1240.02658 L600.758361,1241.52265 C600.459888,1241.80768 599.988223,1241.79868 599.700786,1241.50246 C599.41335,1241.20624 599.417269,1240.73321 599.709573,1240.44182 L601.231618,1238.95279 Z M601.21357,1246.47435 C601.512043,1246.18932 601.983708,1246.19833 602.271145,1246.49454 C602.558581,1246.79076 602.554662,1247.26379 602.262358,1247.55518 L600.740313,1249.0422 C599.41217,1250.33424 597.295354,1250.31694 595.988393,1249.00336 C594.681432,1247.68978 594.669056,1245.56711 595.96061,1244.23829 L597.439541,1242.7181 C597.730499,1242.42582 598.201789,1242.4226 598.496692,1242.71087 C598.791595,1242.99915 598.800382,1243.47167 598.516402,1243.77077 L597.031456,1245.29801 C596.547047,1245.77119 596.353404,1246.4688 596.524345,1247.12489 C596.695287,1247.78099 597.20447,1248.29447 597.85779,1248.46959 C598.511109,1248.64471 599.207886,1248.45448 599.682501,1247.97143 L601.21357,1246.47435 Z M598.449224,1246.54272 C598.308093,1246.40129 598.228798,1246.20942 598.228798,1246.00935 C598.228798,1245.80927 598.308093,1245.6174 598.449224,1245.47597 L602.459883,1241.45428 C602.648783,1241.25835 602.928414,1241.17987 603.191302,1241.249 C603.454189,1241.31813 603.65942,1241.52412 603.728116,1241.7878 C603.796812,1242.05147 603.718281,1242.3318 603.522707,1242.52103 L599.512048,1246.54272 C599.37131,1246.68443 599.18008,1246.76409 598.980636,1246.76409 C598.781192,1246.76409 598.589962,1246.68443 598.449224,1246.54272 Z" id="link-12"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/files/log.svg b/src/assets/images/files/log.svg
new file mode 100644
index 00000000..ddef4c49
--- /dev/null
+++ b/src/assets/images/files/log.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#939393" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#B3B3B3" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M13.193,36v-7.853h2.122v6.14h3.024V36H13.193z"/>
+<path fill="#FFFFFF" d="M26.943,32.062c0,1.322-0.324,2.326-0.972,3.014s-1.597,1.031-2.847,1.031c-1.232,0-2.176-0.346-2.833-1.037
+c-0.657-0.69-0.985-1.697-0.985-3.018c0-1.308,0.327-2.306,0.98-2.995c0.653-0.689,1.603-1.034,2.849-1.034
+c1.25,0,2.197,0.343,2.841,1.026S26.943,30.738,26.943,32.062z M21.54,32.062c0,1.519,0.528,2.277,1.584,2.277
+c0.537,0,0.936-0.184,1.195-0.553c0.26-0.369,0.39-0.943,0.39-1.725c0-0.783-0.132-1.363-0.395-1.737
+c-0.264-0.374-0.656-0.562-1.179-0.562C22.072,29.764,21.54,30.53,21.54,32.062z"/>
+<path fill="#FFFFFF" d="M31.514,31.402h3.389v4.232c-0.92,0.315-1.932,0.473-3.035,0.473c-1.21,0-2.146-0.351-2.806-1.053
+c-0.661-0.702-0.991-1.703-0.991-3.002c0-1.268,0.362-2.255,1.085-2.96s1.737-1.058,3.04-1.058c0.494,0,0.96,0.046,1.399,0.139
+c0.438,0.094,0.821,0.212,1.146,0.355l-0.671,1.664c-0.566-0.279-1.187-0.418-1.864-0.418c-0.62,0-1.099,0.201-1.437,0.604
+c-0.339,0.403-0.508,0.979-0.508,1.727c0,0.734,0.153,1.294,0.459,1.679c0.307,0.385,0.748,0.577,1.324,0.577
+c0.315,0,0.605-0.03,0.87-0.091v-1.229h-1.402V31.402z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/max.svg b/src/assets/images/files/max.svg
new file mode 100644
index 00000000..cda62f32
--- /dev/null
+++ b/src/assets/images/files/max.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#006D6A" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#00AAAB" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M14.982,36l-1.606-5.656h-0.048c0.074,0.964,0.112,1.712,0.112,2.246V36h-1.88v-7.853h2.825l1.638,5.575
+h0.043l1.606-5.575h2.831V36h-1.95v-3.443c0-0.179,0.003-0.377,0.008-0.596c0.006-0.219,0.03-0.754,0.073-1.605h-0.049L17.002,36
+H14.982z"/>
+<path fill="#FFFFFF" d="M27.014,36l-0.387-1.472h-2.552L23.678,36h-2.331l2.562-7.885h2.831L29.334,36H27.014z M26.186,32.788
+l-0.338-1.289c-0.078-0.286-0.175-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.223-0.977c-0.033,0.182-0.096,0.482-0.191,0.902
+c-0.095,0.418-0.305,1.244-0.631,2.476H26.186z"/>
+<path fill="#FFFFFF" d="M37.256,36h-2.455l-1.53-2.455L31.756,36h-2.4l2.604-4.018l-2.449-3.835h2.353l1.418,2.428l1.364-2.428
+h2.423l-2.487,4.001L37.256,36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/md.svg b/src/assets/images/files/md.svg
new file mode 100644
index 00000000..d94d0e8e
--- /dev/null
+++ b/src/assets/images/files/md.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#939393" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#B3B3B3" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M18.771,35.927l-1.605-5.656h-0.049c0.076,0.963,0.113,1.711,0.113,2.245v3.411h-1.88v-7.853h2.825
+l1.639,5.575h0.043l1.605-5.575h2.83v7.853h-1.949v-3.443c0-0.179,0.003-0.378,0.008-0.596c0.006-0.218,0.029-0.754,0.072-1.606
+h-0.048l-1.585,5.645H18.771z"/>
+<path fill="#FFFFFF" d="M32.65,31.834c0,1.311-0.36,2.32-1.082,3.029s-1.735,1.063-3.043,1.063h-2.54v-7.853h2.718
+c1.261,0,2.233,0.322,2.919,0.967S32.65,30.617,32.65,31.834z M30.449,31.909c0-0.72-0.143-1.253-0.428-1.601
+c-0.284-0.347-0.717-0.521-1.297-0.521h-0.617v4.399h0.473c0.645,0,1.117-0.187,1.418-0.562
+C30.298,33.251,30.449,32.679,30.449,31.909z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/mkv.svg b/src/assets/images/files/mkv.svg
new file mode 100644
index 00000000..78ac9de0
--- /dev/null
+++ b/src/assets/images/files/mkv.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#00446D" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#0064AC" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M15.358,36l-1.606-5.656h-0.048c0.075,0.964,0.113,1.712,0.113,2.246V36h-1.88v-7.853h2.825l1.638,5.575
+h0.043l1.606-5.575h2.831V36h-1.95v-3.443c0-0.179,0.003-0.377,0.008-0.596c0.006-0.219,0.03-0.754,0.073-1.605h-0.048L17.377,36
+H15.358z"/>
+<path fill="#FFFFFF" d="M29.28,36h-2.396l-1.552-3.002l-0.628,0.375V36h-2.132v-7.853h2.132v3.411
+c0.107-0.212,0.324-0.547,0.65-1.005l1.649-2.406h2.32l-2.476,3.519L29.28,36z"/>
+<path fill="#FFFFFF" d="M34.538,28.147h2.374L34.339,36h-2.498l-2.562-7.853h2.385l1.069,3.979c0.222,0.885,0.344,1.501,0.365,1.848
+c0.025-0.25,0.075-0.563,0.15-0.939s0.142-0.672,0.199-0.887L34.538,28.147z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/mov.svg b/src/assets/images/files/mov.svg
new file mode 100644
index 00000000..63fdcceb
--- /dev/null
+++ b/src/assets/images/files/mov.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#202D42" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#394968" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M14.753,36l-1.606-5.656h-0.048c0.075,0.964,0.113,1.712,0.113,2.246V36h-1.88v-7.853h2.825l1.638,5.575
+h0.043l1.606-5.575h2.831V36h-1.95v-3.443c0-0.179,0.003-0.377,0.008-0.596c0.006-0.219,0.03-0.754,0.073-1.605h-0.048L16.773,36
+H14.753z"/>
+<path fill="#FFFFFF" d="M29.314,32.063c0,1.322-0.324,2.326-0.972,3.014s-1.597,1.031-2.847,1.031c-1.232,0-2.176-0.346-2.833-1.037
+c-0.657-0.69-0.985-1.697-0.985-3.018c0-1.308,0.327-2.306,0.98-2.995c0.653-0.689,1.603-1.034,2.849-1.034
+c1.25,0,2.197,0.343,2.841,1.026S29.314,30.738,29.314,32.063z M23.911,32.063c0,1.519,0.528,2.277,1.584,2.277
+c0.537,0,0.936-0.184,1.195-0.553c0.26-0.369,0.39-0.943,0.39-1.725c0-0.783-0.132-1.363-0.395-1.737
+c-0.264-0.374-0.656-0.562-1.179-0.562C24.443,29.764,23.911,30.53,23.911,32.063z"/>
+<path fill="#FFFFFF" d="M35.142,28.147h2.374L34.943,36h-2.498l-2.562-7.853h2.385l1.069,3.979c0.222,0.885,0.344,1.501,0.365,1.848
+c0.025-0.25,0.075-0.563,0.15-0.939s0.142-0.672,0.199-0.887L35.142,28.147z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/mp3.svg b/src/assets/images/files/mp3.svg
new file mode 100644
index 00000000..cd0004d7
--- /dev/null
+++ b/src/assets/images/files/mp3.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#CE783E" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#EA9860" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M16.255,36l-1.606-5.656h-0.048c0.075,0.964,0.113,1.712,0.113,2.246V36h-1.88v-7.853h2.825l1.638,5.575
+h0.043l1.606-5.575h2.831V36h-1.95v-3.443c0-0.179,0.003-0.377,0.008-0.596c0.006-0.219,0.03-0.754,0.073-1.605h-0.048L18.274,36
+H16.255z"/>
+<path fill="#FFFFFF" d="M29.167,30.645c0,0.878-0.259,1.556-0.776,2.033c-0.518,0.479-1.252,0.717-2.205,0.717H25.59V36h-2.122
+v-7.853h2.718c0.992,0,1.737,0.217,2.234,0.649C28.918,29.23,29.167,29.847,29.167,30.645z M25.59,31.666h0.387
+c0.319,0,0.572-0.09,0.76-0.27c0.188-0.179,0.282-0.426,0.282-0.74c0-0.53-0.293-0.795-0.881-0.795H25.59V31.666z"/>
+<path fill="#FFFFFF" d="M35.333,29.85c0,0.487-0.148,0.905-0.446,1.255c-0.297,0.349-0.727,0.603-1.289,0.76v0.032
+c1.311,0.165,1.966,0.784,1.966,1.858c0,0.73-0.289,1.306-0.867,1.724c-0.579,0.42-1.381,0.629-2.409,0.629
+c-0.422,0-0.813-0.03-1.174-0.092c-0.359-0.061-0.749-0.172-1.168-0.332v-1.762c0.344,0.175,0.694,0.305,1.05,0.389
+c0.356,0.084,0.685,0.127,0.986,0.127c0.465,0,0.805-0.065,1.018-0.196c0.213-0.131,0.319-0.336,0.319-0.615
+c0-0.215-0.056-0.381-0.167-0.497s-0.29-0.204-0.537-0.263c-0.247-0.06-0.569-0.089-0.967-0.089h-0.483v-1.596h0.494
+c1.078,0,1.617-0.275,1.617-0.826c0-0.208-0.08-0.362-0.239-0.463c-0.159-0.1-0.373-0.15-0.642-0.15
+c-0.501,0-1.021,0.169-1.558,0.506l-0.881-1.418c0.416-0.287,0.841-0.491,1.275-0.613c0.436-0.121,0.934-0.182,1.496-0.182
+c0.813,0,1.45,0.16,1.912,0.482S35.333,29.284,35.333,29.85z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/mp4.svg b/src/assets/images/files/mp4.svg
new file mode 100644
index 00000000..07efa4fb
--- /dev/null
+++ b/src/assets/images/files/mp4.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#458BC4" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#43A6DD" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M16.255,36l-1.606-5.656h-0.048c0.075,0.964,0.113,1.712,0.113,2.246V36h-1.88v-7.853h2.825l1.638,5.575
+h0.043l1.606-5.575h2.831V36h-1.95v-3.443c0-0.179,0.003-0.377,0.008-0.596c0.006-0.219,0.03-0.754,0.073-1.605h-0.048L18.274,36
+H16.255z"/>
+<path fill="#FFFFFF" d="M29.167,30.645c0,0.878-0.259,1.556-0.776,2.033c-0.518,0.479-1.252,0.717-2.205,0.717H25.59V36h-2.122
+v-7.853h2.718c0.992,0,1.737,0.217,2.234,0.649C28.918,29.23,29.167,29.847,29.167,30.645z M25.59,31.666h0.387
+c0.319,0,0.572-0.09,0.76-0.27c0.188-0.179,0.282-0.426,0.282-0.74c0-0.53-0.293-0.795-0.881-0.795H25.59V31.666z"/>
+<path fill="#FFFFFF" d="M35.849,34.48h-0.865V36h-2.095v-1.52h-3.131v-1.559l3.266-4.774h1.96v4.748h0.865V34.48z M32.889,32.896
+v-0.913c0-0.172,0.006-0.403,0.019-0.695c0.013-0.292,0.022-0.445,0.03-0.459h-0.059c-0.122,0.275-0.26,0.533-0.414,0.773
+l-0.87,1.294H32.889z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/mpg.svg b/src/assets/images/files/mpg.svg
new file mode 100644
index 00000000..8f0063bf
--- /dev/null
+++ b/src/assets/images/files/mpg.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#C9AA28" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#EFD358" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M15.406,36l-1.605-5.656h-0.049c0.075,0.964,0.113,1.712,0.113,2.246V36h-1.881v-7.853h2.826l1.638,5.575
+h0.043l1.606-5.575h2.83V36h-1.949v-3.443c0-0.179,0.002-0.377,0.008-0.596s0.029-0.754,0.072-1.605H19.01L17.426,36H15.406z"/>
+<path fill="#FFFFFF" d="M28.318,30.645c0,0.878-0.259,1.556-0.775,2.033c-0.518,0.479-1.253,0.717-2.205,0.717h-0.597V36h-2.122
+v-7.853h2.719c0.991,0,1.736,0.217,2.234,0.649C28.069,29.23,28.318,29.847,28.318,30.645z M24.741,31.666h0.387
+c0.319,0,0.571-0.09,0.761-0.27c0.188-0.179,0.281-0.426,0.281-0.74c0-0.53-0.293-0.795-0.881-0.795h-0.548V31.666z"/>
+<path fill="#FFFFFF" d="M32.723,31.402h3.389v4.232c-0.92,0.315-1.932,0.473-3.034,0.473c-1.21,0-2.146-0.351-2.806-1.053
+c-0.662-0.702-0.992-1.703-0.992-3.002c0-1.268,0.362-2.255,1.086-2.96c0.723-0.705,1.736-1.058,3.039-1.058
+c0.494,0,0.961,0.046,1.4,0.139c0.438,0.094,0.82,0.212,1.146,0.355l-0.672,1.664c-0.566-0.279-1.188-0.418-1.863-0.418
+c-0.62,0-1.1,0.201-1.438,0.604c-0.338,0.403-0.508,0.979-0.508,1.727c0,0.734,0.154,1.294,0.459,1.679
+c0.307,0.385,0.748,0.577,1.324,0.577c0.315,0,0.605-0.03,0.871-0.091v-1.229h-1.402V31.402z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/obj.svg b/src/assets/images/files/obj.svg
new file mode 100644
index 00000000..b10608e5
--- /dev/null
+++ b/src/assets/images/files/obj.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#A67C52" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#C19F85" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M22.171,32.062c0,1.322-0.324,2.326-0.972,3.014s-1.597,1.031-2.847,1.031c-1.232,0-2.176-0.346-2.833-1.037
+c-0.657-0.69-0.985-1.697-0.985-3.018c0-1.308,0.327-2.306,0.98-2.995c0.653-0.689,1.603-1.034,2.849-1.034
+c1.25,0,2.197,0.343,2.841,1.026S22.171,30.738,22.171,32.062z M16.768,32.062c0,1.519,0.528,2.277,1.584,2.277
+c0.537,0,0.936-0.184,1.195-0.553c0.26-0.369,0.39-0.943,0.39-1.725c0-0.783-0.132-1.363-0.395-1.737
+c-0.264-0.374-0.656-0.562-1.179-0.562C17.299,29.764,16.768,30.53,16.768,32.062z"/>
+<path fill="#FFFFFF" d="M23.589,28.147h2.739c1.067,0,1.859,0.158,2.377,0.476c0.517,0.316,0.776,0.81,0.776,1.479
+c0,0.44-0.113,0.816-0.338,1.128s-0.523,0.512-0.892,0.602v0.054c0.487,0.129,0.84,0.344,1.058,0.645s0.328,0.691,0.328,1.171
+c0,0.713-0.268,1.273-0.803,1.684C28.298,35.795,27.569,36,26.645,36h-3.056V28.147z M25.71,31.16h0.639
+c0.304,0,0.54-0.062,0.706-0.188c0.167-0.125,0.25-0.312,0.25-0.559c0-0.44-0.333-0.66-0.999-0.66H25.71V31.16z M25.71,32.713v1.648
+h0.747c0.663,0,0.994-0.279,0.994-0.838c0-0.261-0.088-0.461-0.266-0.602c-0.177-0.139-0.434-0.209-0.771-0.209H25.71z"/>
+<path fill="#FFFFFF" d="M30.383,38.465c-0.387,0-0.754-0.037-1.101-0.112v-1.649c0.115,0.021,0.236,0.046,0.365,0.073
+c0.129,0.026,0.269,0.04,0.419,0.04c0.351,0,0.602-0.105,0.752-0.316c0.15-0.212,0.226-0.573,0.226-1.086v-7.267h2.132v7.085
+c0,1.062-0.233,1.868-0.698,2.414S31.314,38.465,30.383,38.465z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/otf.svg b/src/assets/images/files/otf.svg
new file mode 100644
index 00000000..ec9e8a84
--- /dev/null
+++ b/src/assets/images/files/otf.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#5B5BB5" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#8680D8" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M21.599,32.062c0,1.322-0.324,2.326-0.972,3.014s-1.597,1.031-2.847,1.031c-1.232,0-2.176-0.346-2.833-1.037
+c-0.657-0.69-0.985-1.697-0.985-3.018c0-1.308,0.327-2.306,0.98-2.995c0.653-0.689,1.603-1.034,2.849-1.034
+c1.25,0,2.197,0.343,2.841,1.026S21.599,30.738,21.599,32.062z M16.196,32.062c0,1.519,0.528,2.277,1.584,2.277
+c0.537,0,0.936-0.184,1.195-0.553c0.26-0.369,0.39-0.943,0.39-1.725c0-0.783-0.132-1.363-0.395-1.737
+c-0.264-0.374-0.656-0.562-1.179-0.562C16.728,29.764,16.196,30.53,16.196,32.062z"/>
+<path fill="#FFFFFF" d="M26.481,36H24.36v-6.117h-1.917v-1.735h5.951v1.735h-1.912V36z"/>
+<path fill="#FFFFFF" d="M31.605,36h-2.089v-7.853h4.641v1.702h-2.551v1.499h2.353v1.702h-2.353V36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/pdf.svg b/src/assets/images/files/pdf.svg
new file mode 100644
index 00000000..e51db6af
--- /dev/null
+++ b/src/assets/images/files/pdf.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#870000" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#BD0100" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M20.071,30.645c0,0.878-0.259,1.556-0.776,2.033c-0.518,0.479-1.252,0.717-2.205,0.717h-0.596V36h-2.122
+v-7.853h2.718c0.992,0,1.737,0.217,2.234,0.649C19.822,29.23,20.071,29.847,20.071,30.645z M16.494,31.666h0.387
+c0.319,0,0.572-0.09,0.76-0.27c0.188-0.179,0.282-0.426,0.282-0.74c0-0.53-0.293-0.795-0.881-0.795h-0.548V31.666z"/>
+<path fill="#FFFFFF" d="M27.988,31.907c0,1.311-0.361,2.32-1.083,3.029C26.184,35.646,25.17,36,23.863,36h-2.541v-7.853h2.718
+c1.26,0,2.233,0.322,2.919,0.967C27.645,29.759,27.988,30.689,27.988,31.907z M25.786,31.982c0-0.72-0.142-1.253-0.427-1.601
+c-0.284-0.348-0.717-0.521-1.297-0.521h-0.618v4.398h0.473c0.645,0,1.117-0.188,1.418-0.562S25.786,32.752,25.786,31.982z"/>
+<path fill="#FFFFFF" d="M31.484,36h-2.089v-7.853h4.641v1.702h-2.551v1.499h2.353v1.702h-2.353V36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/php.svg b/src/assets/images/files/php.svg
new file mode 100644
index 00000000..4fa31bf5
--- /dev/null
+++ b/src/assets/images/files/php.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#3E6193" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#5F81BD" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M19.383,30.645c0,0.878-0.258,1.556-0.775,2.033c-0.518,0.479-1.252,0.717-2.205,0.717h-0.596V36h-2.122
+v-7.853h2.718c0.992,0,1.736,0.217,2.234,0.649C19.135,29.23,19.383,29.847,19.383,30.645z M15.807,31.666h0.387
+c0.318,0,0.571-0.09,0.76-0.27c0.188-0.179,0.281-0.426,0.281-0.74c0-0.53-0.293-0.795-0.881-0.795h-0.547V31.666z"/>
+<path fill="#FFFFFF" d="M27.365,36h-2.133v-3.201h-2.465V36h-2.133v-7.853h2.133v2.911h2.465v-2.911h2.133V36z"/>
+<path fill="#FFFFFF" d="M34.761,30.645c0,0.878-0.259,1.556-0.776,2.033c-0.518,0.479-1.252,0.717-2.205,0.717h-0.596V36h-2.121
+v-7.853h2.717c0.992,0,1.737,0.217,2.234,0.649C34.512,29.23,34.761,29.847,34.761,30.645z M31.184,31.666h0.387
+c0.318,0,0.572-0.09,0.76-0.27c0.188-0.179,0.282-0.426,0.282-0.74c0-0.53-0.294-0.795-0.881-0.795h-0.548V31.666z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/png.svg b/src/assets/images/files/png.svg
new file mode 100644
index 00000000..dc79b7b7
--- /dev/null
+++ b/src/assets/images/files/png.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#CE783E" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#EA9860" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M18.414,30.645c0,0.878-0.259,1.556-0.775,2.033c-0.518,0.479-1.253,0.717-2.205,0.717h-0.597V36h-2.122
+v-7.853h2.719c0.991,0,1.736,0.217,2.234,0.649C18.165,29.23,18.414,29.847,18.414,30.645z M14.837,31.666h0.387
+c0.319,0,0.571-0.09,0.761-0.27c0.188-0.179,0.281-0.426,0.281-0.74c0-0.53-0.293-0.795-0.881-0.795h-0.548V31.666z"/>
+<path fill="#FFFFFF" d="M27.143,36h-2.783l-2.867-5.532h-0.049c0.068,0.87,0.102,1.534,0.102,1.993V36h-1.879v-7.853h2.771
+l2.857,5.457h0.031c-0.05-0.791-0.074-1.427-0.074-1.907v-3.55h1.891V36z"/>
+<path fill="#FFFFFF" d="M31.992,31.402h3.389v4.232c-0.92,0.315-1.932,0.473-3.034,0.473c-1.21,0-2.146-0.351-2.806-1.053
+c-0.662-0.702-0.992-1.703-0.992-3.002c0-1.268,0.362-2.255,1.086-2.96c0.723-0.705,1.736-1.058,3.039-1.058
+c0.494,0,0.961,0.046,1.4,0.139c0.438,0.094,0.82,0.212,1.146,0.355l-0.672,1.664c-0.566-0.279-1.188-0.418-1.863-0.418
+c-0.62,0-1.1,0.201-1.438,0.604c-0.338,0.403-0.508,0.979-0.508,1.727c0,0.734,0.154,1.294,0.459,1.679
+c0.307,0.385,0.748,0.577,1.324,0.577c0.315,0,0.605-0.03,0.871-0.091v-1.229h-1.402V31.402z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/pptx.svg b/src/assets/images/files/pptx.svg
new file mode 100644
index 00000000..d6b420ee
--- /dev/null
+++ b/src/assets/images/files/pptx.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#AA3111" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#D44519" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M16.371,30.645c0,0.878-0.259,1.556-0.776,2.033c-0.518,0.479-1.252,0.717-2.205,0.717h-0.596V36h-2.122
+v-7.853h2.718c0.992,0,1.737,0.217,2.234,0.649C16.122,29.23,16.371,29.847,16.371,30.645z M12.793,31.666h0.387
+c0.319,0,0.572-0.09,0.76-0.27c0.188-0.179,0.282-0.426,0.282-0.74c0-0.53-0.293-0.795-0.881-0.795h-0.548V31.666z"/>
+<path fill="#FFFFFF" d="M23.321,30.645c0,0.878-0.259,1.556-0.776,2.033c-0.518,0.479-1.252,0.717-2.205,0.717h-0.596V36h-2.122
+v-7.853h2.718c0.992,0,1.737,0.217,2.234,0.649C23.072,29.23,23.321,29.847,23.321,30.645z M19.744,31.666h0.387
+c0.319,0,0.572-0.09,0.76-0.27c0.188-0.179,0.282-0.426,0.282-0.74c0-0.53-0.293-0.795-0.881-0.795h-0.548V31.666z"/>
+<path fill="#FFFFFF" d="M28.037,36h-2.122v-6.117h-1.917v-1.735h5.951v1.735h-1.912V36z"/>
+<path fill="#FFFFFF" d="M38.145,36H35.69l-1.531-2.455L32.645,36h-2.401l2.605-4.018L30.4,28.147h2.353l1.418,2.428l1.364-2.428
+h2.422l-2.487,4.001L38.145,36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/psd.svg b/src/assets/images/files/psd.svg
new file mode 100644
index 00000000..c9505839
--- /dev/null
+++ b/src/assets/images/files/psd.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#1180CC" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#2098F6" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M19.862,30.645c0,0.878-0.259,1.556-0.776,2.033c-0.518,0.479-1.252,0.717-2.205,0.717h-0.596V36h-2.122
+v-7.853h2.718c0.992,0,1.737,0.217,2.234,0.649C19.613,29.23,19.862,29.847,19.862,30.645z M16.285,31.666h0.387
+c0.319,0,0.572-0.09,0.76-0.27c0.188-0.179,0.282-0.426,0.282-0.74c0-0.53-0.293-0.795-0.881-0.795h-0.548V31.666z"/>
+<path fill="#FFFFFF" d="M26.248,33.615c0,0.487-0.124,0.919-0.371,1.297s-0.604,0.672-1.069,0.881
+c-0.465,0.21-1.012,0.314-1.638,0.314c-0.523,0-0.961-0.037-1.316-0.11s-0.723-0.201-1.106-0.384v-1.891
+c0.405,0.208,0.825,0.37,1.262,0.486s0.838,0.174,1.203,0.174c0.315,0,0.546-0.054,0.693-0.163s0.22-0.25,0.22-0.422
+c0-0.107-0.03-0.201-0.088-0.282c-0.06-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.512-0.232-0.896-0.458-1.152-0.677c-0.256-0.219-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.79-1.692s1.25-0.606,2.17-0.606c0.813,0,1.642,0.188,2.487,0.563l-0.65,1.638
+c-0.734-0.336-1.368-0.504-1.901-0.504c-0.276,0-0.476,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.08,0.292,0.239,0.414
+c0.159,0.122,0.591,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98C26.116,32.646,26.248,33.085,26.248,33.615z"/>
+<path fill="#FFFFFF" d="M34.127,31.907c0,1.311-0.361,2.32-1.083,3.029C32.324,35.646,31.31,36,30.002,36h-2.541v-7.853h2.718
+c1.26,0,2.233,0.322,2.919,0.967C33.785,29.759,34.127,30.689,34.127,31.907z M31.925,31.982c0-0.72-0.142-1.253-0.427-1.601
+c-0.284-0.348-0.717-0.521-1.297-0.521h-0.618v4.398h0.473c0.645,0,1.117-0.188,1.418-0.562S31.925,32.752,31.925,31.982z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/py.svg b/src/assets/images/files/py.svg
new file mode 100644
index 00000000..7ad94154
--- /dev/null
+++ b/src/assets/images/files/py.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#1B5C8C" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#3375AD" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M23.42,30.645c0,0.878-0.259,1.556-0.775,2.033c-0.518,0.479-1.253,0.717-2.205,0.717h-0.597V36h-2.122
+v-7.853h2.719c0.991,0,1.736,0.217,2.234,0.649C23.171,29.23,23.42,29.847,23.42,30.645z M19.843,31.666h0.387
+c0.319,0,0.571-0.09,0.761-0.27c0.188-0.179,0.281-0.426,0.281-0.74c0-0.53-0.293-0.795-0.881-0.795h-0.548V31.666z"/>
+<path fill="#FFFFFF" d="M27.475,31.059l1.354-2.911h2.299l-2.583,4.786V36h-2.138v-3.002l-2.584-4.851h2.311L27.475,31.059z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/rar.svg b/src/assets/images/files/rar.svg
new file mode 100644
index 00000000..c11a7ea1
--- /dev/null
+++ b/src/assets/images/files/rar.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#A67C52" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#C19F85" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M15.533,33.143V36h-2.122v-7.853h2.573c2.134,0,3.201,0.773,3.201,2.32c0,0.909-0.444,1.613-1.332,2.11
+L20.141,36h-2.406l-1.664-2.857H15.533z M15.533,31.547h0.396c0.742,0,1.112-0.327,1.112-0.982c0-0.541-0.363-0.811-1.091-0.811
+h-0.418V31.547z"/>
+<path fill="#FFFFFF" d="M25.674,36l-0.387-1.472h-2.552L22.338,36h-2.331l2.562-7.885h2.831L27.994,36H25.674z M24.846,32.788
+l-0.338-1.289c-0.078-0.286-0.175-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.223-0.977c-0.033,0.182-0.096,0.482-0.191,0.902
+c-0.095,0.418-0.305,1.244-0.631,2.476H24.846z"/>
+<path fill="#FFFFFF" d="M30.964,33.143V36h-2.122v-7.853h2.573c2.134,0,3.201,0.773,3.201,2.32c0,0.909-0.444,1.613-1.332,2.11
+L35.572,36h-2.406l-1.665-2.857H30.964z M30.964,31.547h0.397c0.741,0,1.111-0.327,1.111-0.982c0-0.541-0.363-0.811-1.09-0.811
+h-0.419V31.547z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/raw.svg b/src/assets/images/files/raw.svg
new file mode 100644
index 00000000..f636dace
--- /dev/null
+++ b/src/assets/images/files/raw.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#5B5BB5" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#8680D8" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M13.54,33.143V36h-2.122v-7.853h2.573c2.134,0,3.201,0.773,3.201,2.32c0,0.909-0.444,1.613-1.332,2.11
+L18.148,36h-2.406l-1.665-2.857H13.54z M13.54,31.547h0.397c0.741,0,1.112-0.327,1.112-0.982c0-0.541-0.363-0.811-1.09-0.811H13.54
+V31.547z"/>
+<path fill="#FFFFFF" d="M23.68,36l-0.387-1.472h-2.551L20.345,36h-2.331l2.562-7.885h2.831L26,36H23.68z M22.853,32.788
+l-0.338-1.289c-0.079-0.286-0.175-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.223-0.977c-0.032,0.182-0.096,0.482-0.191,0.902
+c-0.095,0.418-0.305,1.244-0.631,2.476H22.853z"/>
+<path fill="#FFFFFF" d="M35.33,36h-2.508l-0.752-3.422c-0.036-0.143-0.092-0.428-0.169-0.854c-0.077-0.426-0.134-0.782-0.169-1.068
+c-0.029,0.232-0.075,0.521-0.14,0.867s-0.128,0.663-0.191,0.953c-0.062,0.29-0.323,1.465-0.781,3.523h-2.508l-1.944-7.853h2.046
+l0.854,3.937c0.193,0.871,0.326,1.563,0.397,2.079c0.046-0.365,0.13-0.861,0.25-1.487c0.12-0.627,0.232-1.146,0.336-1.559
+l0.693-2.97h1.966l0.671,2.97c0.115,0.477,0.231,1.026,0.349,1.649s0.197,1.089,0.236,1.396c0.046-0.397,0.174-1.087,0.381-2.067
+l0.87-3.948h2.046L35.33,36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/rb.svg b/src/assets/images/files/rb.svg
new file mode 100644
index 00000000..4bec9d8d
--- /dev/null
+++ b/src/assets/images/files/rb.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#AA1D17" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#CE3226" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M19.542,33.143V36H17.42v-7.853h2.573c2.134,0,3.201,0.773,3.201,2.32c0,0.909-0.444,1.613-1.332,2.11
+L24.15,36h-2.406l-1.665-2.857H19.542z M19.542,31.547h0.397c0.741,0,1.112-0.327,1.112-0.982c0-0.541-0.363-0.811-1.09-0.811
+h-0.419V31.547z"/>
+<path fill="#FFFFFF" d="M24.865,28.147h2.739c1.067,0,1.859,0.158,2.377,0.476c0.517,0.316,0.776,0.81,0.776,1.479
+c0,0.44-0.113,0.816-0.338,1.128s-0.523,0.512-0.892,0.602v0.054c0.487,0.129,0.84,0.344,1.058,0.645s0.328,0.691,0.328,1.171
+c0,0.713-0.268,1.273-0.803,1.684C29.574,35.795,28.845,36,27.921,36h-3.056V28.147z M26.986,31.16h0.639
+c0.304,0,0.54-0.062,0.706-0.188c0.167-0.125,0.25-0.312,0.25-0.559c0-0.44-0.333-0.66-0.999-0.66h-0.596V31.16z M26.986,32.713
+v1.648h0.747c0.663,0,0.994-0.279,0.994-0.838c0-0.261-0.088-0.461-0.266-0.602c-0.177-0.139-0.434-0.209-0.771-0.209H26.986z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/rss.svg b/src/assets/images/files/rss.svg
new file mode 100644
index 00000000..ee5e4420
--- /dev/null
+++ b/src/assets/images/files/rss.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#CE783E" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#EA9860" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M16.899,33.143V36h-2.122v-7.853h2.573c2.134,0,3.201,0.773,3.201,2.32c0,0.909-0.444,1.613-1.332,2.11
+L21.508,36h-2.406l-1.665-2.857H16.899z M16.899,31.547h0.397c0.741,0,1.111-0.327,1.111-0.982c0-0.541-0.363-0.811-1.09-0.811
+h-0.419V31.547z"/>
+<path fill="#FFFFFF" d="M27.357,33.615c0,0.487-0.124,0.919-0.371,1.297s-0.604,0.672-1.068,0.881
+c-0.466,0.21-1.012,0.314-1.639,0.314c-0.523,0-0.961-0.037-1.316-0.11c-0.354-0.073-0.723-0.201-1.105-0.384v-1.891
+c0.404,0.208,0.824,0.37,1.262,0.486s0.838,0.174,1.203,0.174c0.314,0,0.546-0.054,0.693-0.163c0.146-0.109,0.22-0.25,0.22-0.422
+c0-0.107-0.03-0.201-0.089-0.282c-0.059-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.513-0.232-0.896-0.458-1.151-0.677c-0.257-0.219-0.447-0.469-0.57-0.752s-0.186-0.617-0.186-1.004
+c0-0.724,0.264-1.288,0.79-1.692s1.249-0.606,2.17-0.606c0.813,0,1.642,0.188,2.487,0.563l-0.65,1.638
+c-0.734-0.336-1.367-0.504-1.901-0.504c-0.276,0-0.476,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.08,0.292,0.24,0.414
+c0.158,0.122,0.591,0.344,1.297,0.666c0.676,0.305,1.146,0.631,1.41,0.98C27.225,32.646,27.357,33.085,27.357,33.615z"/>
+<path fill="#FFFFFF" d="M33.705,33.615c0,0.487-0.123,0.919-0.37,1.297s-0.604,0.672-1.069,0.881
+c-0.465,0.21-1.012,0.314-1.638,0.314c-0.522,0-0.962-0.037-1.315-0.11c-0.355-0.073-0.724-0.201-1.107-0.384v-1.891
+c0.405,0.208,0.826,0.37,1.263,0.486s0.838,0.174,1.203,0.174c0.315,0,0.546-0.054,0.692-0.163c0.147-0.109,0.221-0.25,0.221-0.422
+c0-0.107-0.029-0.201-0.088-0.282c-0.061-0.08-0.154-0.162-0.285-0.244s-0.479-0.251-1.045-0.505
+c-0.512-0.232-0.896-0.458-1.152-0.677s-0.445-0.469-0.568-0.752c-0.125-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.789-1.692s1.25-0.606,2.17-0.606c0.812,0,1.642,0.188,2.486,0.563l-0.649,1.638
+c-0.733-0.336-1.368-0.504-1.901-0.504c-0.275,0-0.477,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.079,0.292,0.238,0.414
+c0.16,0.122,0.592,0.344,1.297,0.666c0.678,0.305,1.146,0.631,1.41,0.98C33.574,32.646,33.705,33.085,33.705,33.615z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/rtf.svg b/src/assets/images/files/rtf.svg
new file mode 100644
index 00000000..d6833570
--- /dev/null
+++ b/src/assets/images/files/rtf.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#161616" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#444444" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M17.033,33.143V36h-2.121v-7.853h2.572c2.135,0,3.201,0.773,3.201,2.32c0,0.909-0.443,1.613-1.332,2.11
+L21.643,36h-2.406l-1.666-2.857H17.033z M17.033,31.547h0.398c0.74,0,1.111-0.327,1.111-0.982c0-0.541-0.363-0.811-1.09-0.811h-0.42
+V31.547z"/>
+<path fill="#FFFFFF" d="M25.82,36h-2.121v-6.117h-1.918v-1.735h5.951v1.735H25.82V36z"/>
+<path fill="#FFFFFF" d="M30.945,36h-2.09v-7.853h4.641v1.702h-2.551v1.499h2.352v1.702h-2.352V36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/sketch.svg b/src/assets/images/files/sketch.svg
new file mode 100644
index 00000000..ebe192e7
--- /dev/null
+++ b/src/assets/images/files/sketch.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#CE9A0B" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#F1BA0F" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M9.53,33.615c0,0.487-0.124,0.919-0.371,1.297s-0.604,0.672-1.069,0.881
+c-0.465,0.21-1.012,0.314-1.638,0.314c-0.523,0-0.961-0.037-1.316-0.11s-0.723-0.201-1.106-0.384v-1.891
+c0.405,0.208,0.825,0.37,1.262,0.486s0.838,0.174,1.203,0.174c0.315,0,0.546-0.054,0.693-0.163s0.22-0.25,0.22-0.422
+c0-0.107-0.03-0.201-0.088-0.282c-0.06-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.512-0.232-0.896-0.458-1.152-0.677c-0.256-0.219-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.79-1.692s1.25-0.606,2.17-0.606c0.813,0,1.642,0.188,2.487,0.563l-0.65,1.638
+c-0.734-0.336-1.368-0.504-1.901-0.504c-0.276,0-0.476,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.08,0.292,0.239,0.414
+c0.159,0.122,0.591,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98C9.398,32.646,9.53,33.085,9.53,33.615z"/>
+<path fill="#FFFFFF" d="M17.232,36h-2.396l-1.552-3.002l-0.628,0.375V36h-2.132v-7.853h2.132v3.411
+c0.107-0.212,0.324-0.547,0.65-1.005l1.649-2.406h2.32l-2.476,3.519L17.232,36z"/>
+<path fill="#FFFFFF" d="M22.523,36h-4.662v-7.853h4.662v1.702h-2.541v1.236h2.353v1.702h-2.353v1.482h2.541V36z"/>
+<path fill="#FFFFFF" d="M27.142,36h-2.122v-6.117h-1.917v-1.735h5.951v1.735h-1.912V36z"/>
+<path fill="#FFFFFF" d="M33.454,29.775c-0.505,0-0.899,0.206-1.182,0.62c-0.283,0.413-0.424,0.983-0.424,1.71
+c0,1.512,0.575,2.268,1.724,2.268c0.347,0,0.684-0.049,1.01-0.146s0.653-0.213,0.983-0.349v1.793
+c-0.655,0.291-1.396,0.436-2.224,0.436c-1.185,0-2.094-0.344-2.726-1.031c-0.632-0.688-0.948-1.682-0.948-2.98
+c0-0.813,0.153-1.527,0.459-2.144c0.307-0.616,0.747-1.09,1.321-1.421c0.575-0.331,1.251-0.496,2.028-0.496
+c0.849,0,1.66,0.184,2.433,0.553l-0.65,1.67c-0.29-0.136-0.58-0.25-0.87-0.344C34.098,29.821,33.787,29.775,33.454,29.775z"/>
+<path fill="#FFFFFF" d="M43.605,36h-2.132v-3.201h-2.465V36h-2.132v-7.853h2.132v2.911h2.465v-2.911h2.132V36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/sql.svg b/src/assets/images/files/sql.svg
new file mode 100644
index 00000000..75b8f3bc
--- /dev/null
+++ b/src/assets/images/files/sql.svg
@@ -0,0 +1 @@
+<svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="m44 27h-40l-3-4 4-4h38l4 4z" fill="#335262"/><path d="m41 47h-34c-1.105 0-2-.895-2-2v-42c0-1.105.895-2 2-2h24l12 12v32c0 1.105-.895 2-2 2z" fill="#e6e6e6"/><path d="m31 1v10c0 1.105.895 2 2 2h10z" fill="#b3b3b3"/><path d="m45 41h-42c-1.105 0-2-.895-2-2v-16h46v16c0 1.105-.895 2-2 2z" fill="#5a7a84"/><g fill="#fff"><path d="m19.225 33.615c0 .487-.124.919-.371 1.297s-.604.672-1.069.881c-.465.21-1.012.314-1.638.314-.523 0-.961-.037-1.316-.11s-.723-.201-1.106-.384v-1.891c.405.208.825.37 1.262.486s.838.174 1.203.174c.315 0 .546-.054.693-.163s.22-.25.22-.422c0-.107-.03-.201-.088-.282-.06-.08-.154-.162-.285-.244-.13-.082-.479-.251-1.044-.505-.512-.232-.896-.458-1.152-.677s-.446-.469-.569-.752c-.124-.283-.186-.617-.186-1.004 0-.724.263-1.288.79-1.692s1.25-.606 2.17-.606c.813 0 1.642.188 2.487.563l-.65 1.638c-.734-.336-1.368-.504-1.901-.504-.276 0-.476.048-.602.145s-.188.217-.188.359c0 .154.08.292.239.414s.591.344 1.297.666c.677.305 1.146.631 1.41.98.262.35.394.789.394 1.319z"/><path d="m27.787 32.062c0 1.78-.566 2.979-1.697 3.6l1.917 2.207h-2.643l-1.386-1.746-.005-.005v-.005l-.005-.006c-1.232 0-2.176-.346-2.833-1.037-.657-.69-.985-1.697-.985-3.018 0-1.308.327-2.306.98-2.995s1.603-1.034 2.849-1.034c1.25 0 2.197.343 2.841 1.026s.967 1.689.967 3.013zm-5.404 0c0 1.519.528 2.277 1.584 2.277.537 0 .936-.184 1.195-.553.26-.369.39-.943.39-1.725 0-.783-.132-1.363-.395-1.737-.264-.374-.656-.562-1.179-.562-1.063.002-1.595.768-1.595 2.3z"/><path d="m29.205 36v-7.853h2.122v6.14h3.024v1.713z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/srt.svg b/src/assets/images/files/srt.svg
new file mode 100644
index 00000000..ab7e8658
--- /dev/null
+++ b/src/assets/images/files/srt.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#161616" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#444444" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M19.837,33.615c0,0.487-0.124,0.919-0.371,1.297s-0.604,0.672-1.069,0.881
+c-0.465,0.21-1.012,0.314-1.638,0.314c-0.523,0-0.961-0.037-1.316-0.11s-0.723-0.201-1.106-0.384v-1.891
+c0.405,0.208,0.825,0.37,1.262,0.486s0.838,0.174,1.203,0.174c0.315,0,0.546-0.054,0.693-0.163s0.22-0.25,0.22-0.422
+c0-0.107-0.03-0.201-0.088-0.282c-0.06-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.512-0.232-0.896-0.458-1.152-0.677c-0.256-0.219-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.79-1.692s1.25-0.606,2.17-0.606c0.813,0,1.642,0.188,2.487,0.563l-0.65,1.638
+c-0.734-0.336-1.368-0.504-1.901-0.504c-0.276,0-0.476,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.08,0.292,0.239,0.414
+c0.159,0.122,0.591,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98C19.706,32.646,19.837,33.085,19.837,33.615z"/>
+<path fill="#FFFFFF" d="M23.173,33.143V36h-2.122v-7.853h2.573c2.134,0,3.201,0.773,3.201,2.32c0,0.909-0.444,1.613-1.332,2.11
+L27.781,36h-2.406l-1.665-2.857H23.173z M23.173,31.547h0.397c0.741,0,1.112-0.327,1.112-0.982c0-0.541-0.363-0.811-1.09-0.811
+h-0.419V31.547z"/>
+<path fill="#FFFFFF" d="M31.96,36h-2.122v-6.117h-1.917v-1.735h5.951v1.735H31.96V36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/svg.svg b/src/assets/images/files/svg.svg
new file mode 100644
index 00000000..9923ee36
--- /dev/null
+++ b/src/assets/images/files/svg.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#DB8E12" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#FFB227" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M18.922,33.615c0,0.487-0.124,0.919-0.371,1.297s-0.604,0.672-1.068,0.881
+c-0.466,0.21-1.012,0.314-1.639,0.314c-0.523,0-0.961-0.037-1.316-0.11c-0.354-0.073-0.723-0.201-1.105-0.384v-1.891
+c0.404,0.208,0.824,0.37,1.262,0.486s0.838,0.174,1.203,0.174c0.314,0,0.546-0.054,0.693-0.163c0.146-0.109,0.22-0.25,0.22-0.422
+c0-0.107-0.03-0.201-0.089-0.282c-0.059-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.513-0.232-0.896-0.458-1.151-0.677c-0.257-0.219-0.447-0.469-0.57-0.752s-0.186-0.617-0.186-1.004
+c0-0.724,0.264-1.288,0.79-1.692s1.249-0.606,2.17-0.606c0.813,0,1.642,0.188,2.487,0.563l-0.65,1.638
+c-0.734-0.336-1.367-0.504-1.901-0.504c-0.276,0-0.476,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.08,0.292,0.24,0.414
+c0.158,0.122,0.591,0.344,1.297,0.666c0.676,0.305,1.146,0.631,1.41,0.98C18.789,32.646,18.922,33.085,18.922,33.615z"/>
+<path fill="#FFFFFF" d="M24.545,28.147h2.374L24.346,36h-2.497l-2.562-7.853h2.385l1.068,3.979c0.223,0.885,0.344,1.501,0.365,1.848
+c0.025-0.25,0.075-0.563,0.15-0.939s0.142-0.672,0.199-0.887L24.545,28.147z"/>
+<path fill="#FFFFFF" d="M30.92,31.402h3.39v4.232c-0.921,0.315-1.932,0.473-3.034,0.473c-1.211,0-2.146-0.351-2.807-1.053
+c-0.661-0.702-0.991-1.703-0.991-3.002c0-1.268,0.362-2.255,1.085-2.96c0.723-0.705,1.736-1.058,3.04-1.058
+c0.494,0,0.96,0.046,1.399,0.139c0.438,0.094,0.82,0.212,1.146,0.355l-0.672,1.664c-0.565-0.279-1.187-0.418-1.863-0.418
+c-0.619,0-1.099,0.201-1.437,0.604c-0.339,0.403-0.508,0.979-0.508,1.727c0,0.734,0.153,1.294,0.459,1.679
+c0.307,0.385,0.747,0.577,1.324,0.577c0.315,0,0.604-0.03,0.87-0.091v-1.229H30.92V31.402z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/tif.svg b/src/assets/images/files/tif.svg
new file mode 100644
index 00000000..ca24a164
--- /dev/null
+++ b/src/assets/images/files/tif.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#4DA34D" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#72C472" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M20.184,36h-2.122v-6.117h-1.917v-1.735h5.951v1.735h-1.912V36z"/>
+<path fill="#FFFFFF" d="M23.219,36v-7.853h2.132V36H23.219z"/>
+<path fill="#FFFFFF" d="M29.138,36h-2.089v-7.853h4.641v1.702h-2.551v1.499h2.353v1.702h-2.353V36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/tiff.svg b/src/assets/images/files/tiff.svg
new file mode 100644
index 00000000..928ce965
--- /dev/null
+++ b/src/assets/images/files/tiff.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#4DA34D" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#72C472" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M17.219,36h-2.122v-6.117H13.18v-1.735h5.951v1.735h-1.912V36z"/>
+<path fill="#FFFFFF" d="M20.254,36v-7.853h2.132V36H20.254z"/>
+<path fill="#FFFFFF" d="M26.173,36h-2.089v-7.853h4.641v1.702h-2.551v1.499h2.353v1.702h-2.353V36z"/>
+<path fill="#FFFFFF" d="M32.103,36h-2.089v-7.853h4.641v1.702h-2.551v1.499h2.353v1.702h-2.353V36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/ttf.svg b/src/assets/images/files/ttf.svg
new file mode 100644
index 00000000..33800659
--- /dev/null
+++ b/src/assets/images/files/ttf.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#161616" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#444444" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M18.85,36h-2.122v-6.117h-1.917v-1.735h5.951v1.735H18.85V36z"/>
+<path fill="#FFFFFF" d="M25.348,36h-2.121v-6.117h-1.918v-1.735h5.951v1.735h-1.912V36z"/>
+<path fill="#FFFFFF" d="M30.473,36h-2.09v-7.853h4.641v1.702h-2.551v1.499h2.352v1.702h-2.352V36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/txt.svg b/src/assets/images/files/txt.svg
new file mode 100644
index 00000000..992f5d5e
--- /dev/null
+++ b/src/assets/images/files/txt.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#939393" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#B3B3B3" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M17.836,36h-2.121v-6.117h-1.918v-1.735h5.951v1.735h-1.912V36z"/>
+<path fill="#FFFFFF" d="M27.945,36H25.49l-1.531-2.455L22.445,36h-2.401l2.604-4.018l-2.449-3.835h2.354l1.418,2.428l1.363-2.428
+h2.423l-2.487,4.001L27.945,36z"/>
+<path fill="#FFFFFF" d="M32.29,36h-2.122v-6.117h-1.917v-1.735h5.951v1.735H32.29V36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/wav.svg b/src/assets/images/files/wav.svg
new file mode 100644
index 00000000..989a380a
--- /dev/null
+++ b/src/assets/images/files/wav.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#D670AD" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#EF8EC3" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M19.805,36h-2.508l-0.752-3.422c-0.036-0.143-0.092-0.428-0.169-0.854c-0.077-0.426-0.134-0.782-0.169-1.068
+c-0.029,0.232-0.075,0.521-0.14,0.867s-0.128,0.663-0.191,0.953c-0.062,0.29-0.323,1.465-0.781,3.523h-2.508l-1.944-7.853h2.046
+l0.854,3.937c0.193,0.871,0.326,1.563,0.397,2.079c0.046-0.365,0.13-0.861,0.25-1.487c0.12-0.627,0.232-1.146,0.336-1.559
+l0.693-2.97h1.966l0.671,2.97c0.115,0.477,0.231,1.026,0.349,1.649s0.197,1.089,0.236,1.396c0.046-0.397,0.174-1.087,0.381-2.067
+l0.87-3.948h2.046L19.805,36z"/>
+<path fill="#FFFFFF" d="M27.572,36l-0.387-1.472h-2.551L24.236,36h-2.331l2.562-7.885h2.831L29.892,36H27.572z M26.745,32.788
+l-0.338-1.289c-0.079-0.286-0.175-0.657-0.287-1.112c-0.113-0.454-0.188-0.78-0.223-0.977c-0.032,0.182-0.096,0.482-0.191,0.902
+c-0.095,0.418-0.305,1.244-0.631,2.476H26.745z"/>
+<path fill="#FFFFFF" d="M35.15,28.147h2.374L34.952,36h-2.498l-2.562-7.853h2.385l1.069,3.979c0.222,0.885,0.344,1.501,0.365,1.848
+c0.025-0.25,0.075-0.563,0.15-0.939s0.142-0.672,0.199-0.887L35.15,28.147z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/xlsx.svg b/src/assets/images/files/xlsx.svg
new file mode 100644
index 00000000..1555d7b3
--- /dev/null
+++ b/src/assets/images/files/xlsx.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#0E512B" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#1B7343" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M17.592,36h-2.455l-1.531-2.455L12.092,36H9.691l2.605-4.018l-2.449-3.835H12.2l1.418,2.428l1.364-2.428
+h2.422l-2.487,4.001L17.592,36z"/>
+<path fill="#FFFFFF" d="M18.473,36v-7.853h2.122v6.14h3.024V36H18.473z"/>
+<path fill="#FFFFFF" d="M30.01,33.615c0,0.487-0.124,0.919-0.371,1.297s-0.604,0.672-1.069,0.881
+c-0.465,0.21-1.012,0.314-1.638,0.314c-0.523,0-0.961-0.037-1.316-0.11s-0.723-0.201-1.106-0.384v-1.891
+c0.405,0.208,0.825,0.37,1.262,0.486s0.838,0.174,1.203,0.174c0.315,0,0.546-0.054,0.693-0.163s0.22-0.25,0.22-0.422
+c0-0.107-0.03-0.201-0.088-0.282c-0.06-0.08-0.154-0.162-0.285-0.244c-0.13-0.082-0.479-0.251-1.044-0.505
+c-0.512-0.232-0.896-0.458-1.152-0.677c-0.256-0.219-0.446-0.469-0.569-0.752c-0.124-0.283-0.186-0.617-0.186-1.004
+c0-0.724,0.263-1.288,0.79-1.692s1.25-0.606,2.17-0.606c0.813,0,1.642,0.188,2.487,0.563l-0.65,1.638
+c-0.734-0.336-1.368-0.504-1.901-0.504c-0.276,0-0.476,0.048-0.602,0.145s-0.188,0.217-0.188,0.359c0,0.154,0.08,0.292,0.239,0.414
+c0.159,0.122,0.591,0.344,1.297,0.666c0.677,0.305,1.146,0.631,1.41,0.98C29.878,32.646,30.01,33.085,30.01,33.615z"/>
+<path fill="#FFFFFF" d="M38.298,36h-2.455l-1.531-2.455L32.798,36h-2.401l2.605-4.018l-2.449-3.835h2.353l1.418,2.428l1.364-2.428
+h2.422l-2.487,4.001L38.298,36z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/xml.svg b/src/assets/images/files/xml.svg
new file mode 100644
index 00000000..f57f8428
--- /dev/null
+++ b/src/assets/images/files/xml.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#458BC4" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#43A6DD" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M19.426,36h-2.455l-1.531-2.455L13.926,36h-2.401l2.605-4.018l-2.449-3.835h2.353l1.418,2.428l1.364-2.428
+h2.422l-2.487,4.001L19.426,36z"/>
+<path fill="#FFFFFF" d="M23.729,36l-1.606-5.656h-0.048c0.075,0.964,0.113,1.712,0.113,2.246V36h-1.88v-7.853h2.825l1.638,5.575
+h0.043l1.606-5.575h2.831V36H27.3v-3.443c0-0.179,0.003-0.377,0.008-0.596c0.006-0.219,0.03-0.754,0.073-1.605h-0.048L25.748,36
+H23.729z"/>
+<path fill="#FFFFFF" d="M30.942,36v-7.853h2.122v6.14h3.024V36H30.942z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/files/zip.svg b/src/assets/images/files/zip.svg
new file mode 100644
index 00000000..ed8c4a95
--- /dev/null
+++ b/src/assets/images/files/zip.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 48 48"><g >
+<polygon fill="#A67C52" points="44,27 4,27 1,23 5,19 43,19 47,23 "/>
+<path fill="#E6E6E6" d="M41,47H7c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2l24,0l12,12v32C43,46.105,42.105,47,41,47z"/>
+<path fill="#B3B3B3" d="M31,1v10c0,1.105,0.895,2,2,2h10L31,1z"/>
+<path fill="#C19F85" d="M45,41H3c-1.105,0-2-0.895-2-2V23h46v16C47,40.105,46.105,41,45,41z"/>
+<path fill="#FFFFFF" d="M21.695,36h-6.117v-1.311l3.4-4.828h-3.32v-1.714h5.951v1.306l-3.399,4.834h3.485V36z"/>
+<path fill="#FFFFFF" d="M22.818,36v-7.853h2.133V36H22.818z"/>
+<path fill="#FFFFFF" d="M32.347,30.645c0,0.878-0.259,1.556-0.776,2.033c-0.518,0.479-1.252,0.717-2.205,0.717H28.77V36h-2.121
+v-7.853h2.717c0.992,0,1.737,0.217,2.234,0.649C32.098,29.23,32.347,29.847,32.347,30.645z M28.77,31.666h0.387
+c0.318,0,0.572-0.09,0.76-0.27c0.188-0.179,0.282-0.426,0.282-0.74c0-0.53-0.294-0.795-0.881-0.795H28.77V31.666z"/>
+</g></svg>
\ No newline at end of file
diff --git a/src/assets/images/plus-gray.svg b/src/assets/images/plus-gray.svg
new file mode 100644
index 00000000..895827a8
--- /dev/null
+++ b/src/assets/images/plus-gray.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M10 0H6v6H0v4h6v6h4v-6h6V6h-6z"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/x-gray.svg b/src/assets/images/x-gray.svg
new file mode 100644
index 00000000..9c9e3359
--- /dev/null
+++ b/src/assets/images/x-gray.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M12.243.929L8 5.172 3.757.929.929 3.757 5.172 8 .929 12.243l2.828 2.828L8 10.828l4.243 4.243 2.828-2.828L10.828 8l4.243-4.243z"></path>
+</svg>
\ No newline at end of file
diff --git a/src/components/AssetsLibrary/DownloadFile/index.js b/src/components/AssetsLibrary/DownloadFile/index.js
new file mode 100644
index 00000000..a76a95ba
--- /dev/null
+++ b/src/components/AssetsLibrary/DownloadFile/index.js
@@ -0,0 +1,63 @@
+/* Component to render button to download project attachment file */
+
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import styles from './styles.module.scss'
+import Loader from '../../Loader'
+import { toastr } from 'react-redux-toastr'
+import cn from 'classnames'
+import { getProjectAttachment } from '../../../services/projects'
+import ReactSVG from 'react-svg'
+const Download = './IconSquareDownload.svg'
+const assets = require.context('../../../assets/images', false, /svg/)
+
+const DownloadFile = ({ classsName, file, projectId }) => {
+  const [isLoading, setIsLoading] = useState(false)
+
+  return (
+    <button
+      type='button'
+      className={cn(styles.container, classsName)}
+      onClick={() => {
+        setIsLoading(true)
+        getProjectAttachment(projectId, file.id)
+          .then(attachment => {
+            setIsLoading(false)
+            window.open(attachment.url, '_blank').focus()
+          })
+          .catch(e => {
+            setIsLoading(false)
+            const errorMessage = _.get(
+              e,
+              'response.data.message',
+              'File unavailable'
+            )
+            toastr.error('Error', errorMessage)
+          })
+      }}
+      disabled={isLoading}
+    >
+      {file.title}
+
+      {isLoading && <Loader classsName={styles.loader} />}
+      {!isLoading && (
+        <span className={styles.downloadIcon}>
+          <ReactSVG path={assets(`${Download}`)} />
+        </span>
+      )}
+    </button>
+  )
+}
+
+DownloadFile.defaultProps = {
+  file: {}
+}
+
+DownloadFile.propTypes = {
+  classsName: PropTypes.string,
+  projectId: PropTypes.string,
+  file: PropTypes.shape()
+}
+
+export default DownloadFile
diff --git a/src/components/AssetsLibrary/DownloadFile/styles.module.scss b/src/components/AssetsLibrary/DownloadFile/styles.module.scss
new file mode 100644
index 00000000..fccd9fd5
--- /dev/null
+++ b/src/components/AssetsLibrary/DownloadFile/styles.module.scss
@@ -0,0 +1,35 @@
+@import '../../../styles/includes';
+
+.container {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none !important;
+  background-color: transparent;
+  color: $tc-gray-90 !important;
+  &:hover .downloadIcon {
+    opacity: 1;
+  }
+}
+
+.loader {
+  width: auto;
+  height: auto;
+  margin-left: 5px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.downloadIcon {
+  opacity: 0;
+  margin-left: 5px;
+  transition: 0.15s ease;
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/AssetsLibrary/ModalAddLink/index.js b/src/components/AssetsLibrary/ModalAddLink/index.js
new file mode 100644
index 00000000..420f287a
--- /dev/null
+++ b/src/components/AssetsLibrary/ModalAddLink/index.js
@@ -0,0 +1,178 @@
+/* Component to render add link modal */
+
+import React, { useMemo, useState, useEffect, useCallback } from 'react'
+import { useForm } from 'react-hook-form'
+import { yupResolver } from '@hookform/resolvers/yup'
+import { connect } from 'react-redux'
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import styles from './styles.module.scss'
+import cn from 'classnames'
+import { toastr } from 'react-redux-toastr'
+import Modal from '../../Modal'
+import PrimaryButton from '../../Buttons/PrimaryButton'
+import OutlineButton from '../../Buttons/OutlineButton'
+import FieldLabelDynamic from '../../FieldLabelDynamic'
+import FieldInput from '../../FieldInput'
+import { assetsLibraryAddLinkSchema } from '../../../util/validation'
+import { addAttachment, updateAttachment } from '../../../actions/projects'
+import {
+  addProjectAttachmentApi,
+  updateProjectAttachmentApi
+} from '../../../services/projects'
+import { ATTACHMENT_TYPE_LINK } from '../../../config/constants'
+
+const ModalAddLink = ({
+  classsName,
+  theme,
+  onCancel,
+  link,
+  addAttachment,
+  updateAttachment,
+  projectId
+}) => {
+  const [isProcessing, setIsProcessing] = useState(false)
+  const buttonText = useMemo(() => (link ? 'Edit Link' : 'Add Link'), [link])
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isValid, isDirty }
+  } = useForm({
+    defaultValues: {
+      title: '',
+      path: ''
+    },
+    resolver: yupResolver(assetsLibraryAddLinkSchema),
+    mode: 'all'
+  })
+
+  useEffect(() => {
+    if (link) {
+      reset({
+        title: link.title,
+        path: link.path
+      })
+    }
+  }, [link])
+
+  const onSubmit = useCallback(
+    data => {
+      if (!link) {
+        setIsProcessing(true)
+        addProjectAttachmentApi(projectId, {
+          ...data,
+          tags: [],
+          type: ATTACHMENT_TYPE_LINK
+        })
+          .then(result => {
+            toastr.success('Success', 'Added link to the project successfully.')
+            setIsProcessing(false)
+            addAttachment(result)
+            onCancel()
+          })
+          .catch(e => {
+            setIsProcessing(false)
+            const errorMessage = _.get(
+              e,
+              'response.data.message',
+              'Failed to add link.'
+            )
+            toastr.error('Error', errorMessage)
+          })
+      } else {
+        setIsProcessing(true)
+        updateProjectAttachmentApi(projectId, link.id, data)
+          .then(result => {
+            toastr.success('Success', 'Updated link successfully.')
+            setIsProcessing(false)
+            updateAttachment(result)
+            onCancel()
+          })
+          .catch(e => {
+            setIsProcessing(false)
+            const errorMessage = _.get(
+              e,
+              'response.data.message',
+              'Failed to update link.'
+            )
+            toastr.error('Error', errorMessage)
+          })
+      }
+    },
+    [link, projectId]
+  )
+
+  return (
+    <Modal theme={theme} onCancel={isProcessing ? _.noop : onCancel}>
+      <div className={cn(styles.container, classsName)}>
+        <div className={styles.title}>{link ? 'EDIT LINK' : 'ADD A LINK'}</div>
+
+        <form className={styles.blockForm} onSubmit={handleSubmit(onSubmit)}>
+          <FieldLabelDynamic
+            className={styles.blockRow}
+            direction='vertical'
+            title='NAME'
+            errorMsg={_.get(errors, 'title.message')}
+          >
+            <FieldInput inputControl={register('title')} />
+          </FieldLabelDynamic>
+          <FieldLabelDynamic
+            className={styles.blockRow}
+            direction='vertical'
+            title='URL'
+            errorMsg={_.get(errors, 'path.message')}
+          >
+            <FieldInput inputControl={register('path')} />
+          </FieldLabelDynamic>
+          <div className={styles.blockBtns}>
+            <div className={styles.button}>
+              <OutlineButton
+                text='Cancel'
+                type={'info'}
+                onClick={onCancel}
+                disabled={isProcessing}
+              />
+            </div>
+            <div className={styles.button}>
+              <PrimaryButton
+                text={isProcessing ? 'Processing...' : buttonText}
+                type={'info'}
+                submit
+                disabled={isProcessing || !isValid || !isDirty}
+              />
+            </div>
+          </div>
+        </form>
+      </div>
+    </Modal>
+  )
+}
+
+ModalAddLink.defaultProps = {
+  isProcessing: false,
+  projectId: '',
+  onCancel: () => {}
+}
+
+ModalAddLink.propTypes = {
+  classsName: PropTypes.string,
+  theme: PropTypes.shape(),
+  onCancel: PropTypes.func,
+  addAttachment: PropTypes.func.isRequired,
+  updateAttachment: PropTypes.func.isRequired,
+  link: PropTypes.shape(),
+  projectId: PropTypes.string
+}
+
+const mapStateToProps = () => {
+  return {}
+}
+
+const mapDispatchToProps = {
+  addAttachment,
+  updateAttachment
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ModalAddLink)
diff --git a/src/components/AssetsLibrary/ModalAddLink/styles.module.scss b/src/components/AssetsLibrary/ModalAddLink/styles.module.scss
new file mode 100644
index 00000000..8ff2a99d
--- /dev/null
+++ b/src/components/AssetsLibrary/ModalAddLink/styles.module.scss
@@ -0,0 +1,51 @@
+@import '../../../styles/includes';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  box-sizing: border-box;
+  background: $white;
+  opacity: 1;
+  position: relative;
+  border-radius: 6px;
+  margin: 0 auto;
+  padding: 15px 20px;
+  width: 600px;
+  max-width: 95vw;
+}
+
+.button {
+  height: 40px;
+
+  span,
+  button {
+    padding: 0 20px;
+  }
+}
+
+.title {
+  @include roboto-medium();
+
+  color: grey;
+  font-size: 16px;
+}
+
+.blockRow {
+  width: 100%;
+}
+
+.blockForm {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  align-items: center;
+  margin-top: 30px;
+  margin-bottom: 10px;
+}
+
+.blockBtns {
+  display: flex;
+  gap: 30px;
+}
diff --git a/src/components/AssetsLibrary/ModalAttachmentOptions/index.js b/src/components/AssetsLibrary/ModalAttachmentOptions/index.js
new file mode 100644
index 00000000..e879746a
--- /dev/null
+++ b/src/components/AssetsLibrary/ModalAttachmentOptions/index.js
@@ -0,0 +1,284 @@
+/* Component to render attachment options modal */
+
+import React, { useEffect, useState, useRef, useCallback } from 'react'
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import styles from './styles.module.scss'
+import { useForm, Controller } from 'react-hook-form'
+import { yupResolver } from '@hookform/resolvers/yup'
+import { toastr } from 'react-redux-toastr'
+import { connect } from 'react-redux'
+import cn from 'classnames'
+import Modal from '../../Modal'
+import FieldUserAutoComplete from '../../FieldUserAutoComplete'
+import FieldLabelDynamic from '../../FieldLabelDynamic'
+import PrimaryButton from '../../Buttons/PrimaryButton'
+import OutlineButton from '../../Buttons/OutlineButton'
+import FieldInput from '../../FieldInput'
+import { assetsLibraryEditFileSchema } from '../../../util/validation'
+import {
+  addProjectAttachmentApi,
+  updateProjectAttachmentApi
+} from '../../../services/projects'
+import { addAttachment, updateAttachment } from '../../../actions/projects'
+
+const ModalAttachmentOptions = ({
+  classsName,
+  theme,
+  onCancel,
+  attachment,
+  members,
+  addAttachment,
+  updateAttachment,
+  projectId,
+  loggedInUser,
+  newAttachments
+}) => {
+  const [isProcessing, setIsProcessing] = useState(false)
+  const shareType = useRef('')
+
+  const {
+    control,
+    register,
+    handleSubmit,
+    reset,
+    watch,
+    formState: { errors, isValid, isDirty }
+  } = useForm({
+    defaultValues: {
+      allowedUsers: []
+    },
+    resolver: attachment ? yupResolver(assetsLibraryEditFileSchema) : null,
+    mode: 'all'
+  })
+
+  const allowedUsers = watch('allowedUsers')
+
+  useEffect(() => {
+    if (attachment) {
+      reset({
+        title: attachment.title,
+        allowedUsers: attachment.allowedUsers || []
+      })
+    }
+  }, [attachment])
+
+  const onEditSubmit = useCallback(
+    data => {
+      setIsProcessing(true)
+      updateProjectAttachmentApi(projectId, attachment.id, data)
+        .then(result => {
+          toastr.success('Success', 'Updated file successfully.')
+          setIsProcessing(false)
+          updateAttachment(result)
+          onCancel()
+        })
+        .catch(e => {
+          setIsProcessing(false)
+          const errorMessage = _.get(
+            e,
+            'response.data.message',
+            'Failed to update file.'
+          )
+          toastr.error('Error', errorMessage)
+        })
+    },
+    [attachment, projectId]
+  )
+
+  const onNewSubmit = useCallback(
+    allowedUsers => {
+      let count = newAttachments.length
+      let errorMessage = ''
+      const checkToFinish = () => {
+        count = count - 1
+        if (count === 0) {
+          setIsProcessing(false)
+          if (errorMessage) {
+            toastr.error('Error', errorMessage)
+          } else {
+            toastr.success('Success', 'Added file to the project successfully.')
+            onCancel()
+          }
+        }
+      }
+      setIsProcessing(true)
+      _.forEach(newAttachments, newAttachment => {
+        addProjectAttachmentApi(projectId, {
+          ...newAttachment,
+          allowedUsers
+        })
+          .then(result => {
+            addAttachment(result)
+            checkToFinish()
+          })
+          .catch(e => {
+            errorMessage = _.get(
+              e,
+              'response.data.message',
+              'Failed to add file.'
+            )
+            checkToFinish()
+          })
+      })
+    },
+    [newAttachments, projectId]
+  )
+
+  return (
+    <Modal theme={theme} onCancel={isProcessing ? _.noop : onCancel}>
+      <div className={cn(styles.container, classsName)}>
+        <div className={styles.title}>
+          {attachment ? 'EDIT FILE' : 'ATTACHMENT OPTIONS'}
+        </div>
+        <form
+          className={cn(styles.blockRow, styles.blockForm, {
+            [styles.blockFormEdit]: !!attachment
+          })}
+          onSubmit={handleSubmit(onEditSubmit)}
+        >
+          {!!attachment && (
+            <FieldLabelDynamic
+              className={styles.blockRow}
+              direction='vertical'
+              title='TITLE'
+              errorMsg={_.get(errors, 'title.message')}
+            >
+              <FieldInput inputControl={register('title')} />
+            </FieldLabelDynamic>
+          )}
+          <div
+            className={cn(styles.blockRow, {
+              [styles.blockAddAttachment]: !attachment
+            })}
+          >
+            {!attachment && (
+              <>
+                <span className={styles.textWhoYouWant}>
+                  Who do you want to share this file with?
+                </span>
+                <div className={styles.button}>
+                  <PrimaryButton
+                    text={
+                      isProcessing && shareType.current === 'all'
+                        ? 'Processing...'
+                        : 'All project members'
+                    }
+                    type={'info'}
+                    onClick={() => {
+                      shareType.current = 'all'
+                      onNewSubmit(null)
+                    }}
+                    disabled={isProcessing}
+                  />
+                </div>
+              </>
+            )}
+            <div
+              className={cn({
+                [styles.blockSelectMember]: !attachment
+              })}
+            >
+              {!attachment && (
+                <span className={styles.textOrOnly}>
+                  OR ONLY SPECIFIC PEOPLE
+                </span>
+              )}
+              <FieldLabelDynamic
+                className={styles.blockRow}
+                direction='vertical'
+                title={attachment ? 'FILE VIEWERS' : ''}
+              >
+                <Controller
+                  control={control}
+                  render={({ field: { onChange, value } }) => (
+                    <FieldUserAutoComplete
+                      value={value}
+                      onChangeValue={onChange}
+                      projectMembers={members}
+                      loggedInUser={loggedInUser}
+                    />
+                  )}
+                  name='allowedUsers'
+                />
+              </FieldLabelDynamic>
+              {!attachment && (
+                <div className={cn(styles.button, styles.btnShareWith)}>
+                  <PrimaryButton
+                    text={
+                      isProcessing && shareType.current === 'selected'
+                        ? 'Processing...'
+                        : 'Share with selected members'
+                    }
+                    type={'info'}
+                    onClick={() => {
+                      shareType.current = 'selected'
+                      onNewSubmit(allowedUsers)
+                    }}
+                    disabled={
+                      isProcessing || !allowedUsers || !allowedUsers.length
+                    }
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+
+          {!!attachment && (
+            <div className={styles.blockBtns}>
+              <div className={styles.button}>
+                <OutlineButton
+                  text='Cancel'
+                  type={'info'}
+                  onClick={onCancel}
+                  disabled={isProcessing}
+                />
+              </div>
+              <div className={styles.button}>
+                <PrimaryButton
+                  text={isProcessing ? 'Processing...' : 'Edit File'}
+                  type={'info'}
+                  submit
+                  disabled={isProcessing || !isValid || !isDirty}
+                />
+              </div>
+            </div>
+          )}
+        </form>
+      </div>
+    </Modal>
+  )
+}
+
+ModalAttachmentOptions.defaultProps = {
+  members: [],
+  newAttachments: [],
+  projectId: ''
+}
+
+ModalAttachmentOptions.propTypes = {
+  classsName: PropTypes.string,
+  theme: PropTypes.shape(),
+  onCancel: PropTypes.func,
+  attachment: PropTypes.shape(),
+  newAttachments: PropTypes.arrayOf(PropTypes.shape()),
+  members: PropTypes.arrayOf(PropTypes.shape()),
+  addAttachment: PropTypes.func.isRequired,
+  updateAttachment: PropTypes.func.isRequired,
+  projectId: PropTypes.string,
+  loggedInUser: PropTypes.object
+}
+
+const mapStateToProps = () => {
+  return {}
+}
+
+const mapDispatchToProps = {
+  addAttachment,
+  updateAttachment
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ModalAttachmentOptions)
diff --git a/src/components/AssetsLibrary/ModalAttachmentOptions/styles.module.scss b/src/components/AssetsLibrary/ModalAttachmentOptions/styles.module.scss
new file mode 100644
index 00000000..cef8ec1e
--- /dev/null
+++ b/src/components/AssetsLibrary/ModalAttachmentOptions/styles.module.scss
@@ -0,0 +1,97 @@
+@import '../../../styles/includes';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  box-sizing: border-box;
+  background: $white;
+  opacity: 1;
+  position: relative;
+  border-radius: 6px;
+  margin: 0 auto;
+  padding: 15px 20px;
+  width: 600px;
+  max-width: 95vw;
+}
+
+.button {
+  height: 40px;
+
+  span,
+  button {
+    padding: 0 20px;
+  }
+}
+
+.title {
+  @include roboto-medium();
+
+  color: grey;
+  font-size: 16px;
+}
+
+.blockRow {
+  width: 100%;
+}
+
+.blockAddAttachment {
+  border-top: 1px solid $tc-gray-30;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.textWhoYouWant {
+  @include roboto;
+
+  width: 100%;
+  margin-top: 30px;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+
+.blockForm {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  align-items: center;
+}
+
+.blockFormEdit {
+  margin-top: 30px;
+  margin-bottom: 10px;
+}
+
+.blockSelectMember {
+  width: calc(100% + 40px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 10px;
+  background: $tc-gray-20;
+  border-top: 1px solid $tc-gray-30;
+  margin: 10px -20px -15px -20px;
+  border-radius: 0 0 10px 10px;
+}
+
+.textOrOnly {
+  @include roboto-medium();
+
+  font-size: 11px;
+  color: grey;
+  text-transform: uppercase;
+}
+
+.btnShareWith {
+  margin-top: 10px;
+  margin-bottom: 30px;
+}
+
+.blockBtns {
+  display: flex;
+  gap: 30px;
+}
diff --git a/src/components/AssetsLibrary/ProjectMember/index.js b/src/components/AssetsLibrary/ProjectMember/index.js
new file mode 100644
index 00000000..f129b17f
--- /dev/null
+++ b/src/components/AssetsLibrary/ProjectMember/index.js
@@ -0,0 +1,33 @@
+/* Component to render project member */
+
+import React, { useMemo } from 'react'
+import PropTypes from 'prop-types'
+import styles from './styles.module.scss'
+import cn from 'classnames'
+import { PROFILE_URL } from '../../../config/constants'
+import { getFullNameWithFallback } from '../../../util/tc'
+
+const ProjectMember = ({ classsName, memberInfo }) => {
+  const fullName = useMemo(() => getFullNameWithFallback(memberInfo), [
+    memberInfo
+  ])
+  return (
+    <a
+      href={`${PROFILE_URL}${memberInfo.handle}`}
+      target='_blank'
+      rel='noopener noreferrer'
+      className={cn(styles.container, classsName)}
+    >
+      {fullName}
+    </a>
+  )
+}
+
+ProjectMember.defaultProps = {}
+
+ProjectMember.propTypes = {
+  classsName: PropTypes.string,
+  memberInfo: PropTypes.shape()
+}
+
+export default ProjectMember
diff --git a/src/components/AssetsLibrary/ProjectMember/styles.module.scss b/src/components/AssetsLibrary/ProjectMember/styles.module.scss
new file mode 100644
index 00000000..4ac6ceeb
--- /dev/null
+++ b/src/components/AssetsLibrary/ProjectMember/styles.module.scss
@@ -0,0 +1,5 @@
+@import '../../../styles/includes';
+
+.container {
+  display: flex;
+}
\ No newline at end of file
diff --git a/src/components/AssetsLibrary/ProjectMembers/index.js b/src/components/AssetsLibrary/ProjectMembers/index.js
new file mode 100644
index 00000000..ad9eeb6c
--- /dev/null
+++ b/src/components/AssetsLibrary/ProjectMembers/index.js
@@ -0,0 +1,60 @@
+/* Component to render list of project member */
+
+import React, { useMemo, useState } from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import styles from './styles.module.scss'
+import ProjectMember from '../ProjectMember'
+import cn from 'classnames'
+
+const ProjectMembers = ({ classsName, members, allowedUsers, maxShownNum }) => {
+  const [showAll, setShowAll] = useState(false)
+  const allowedUserInfos = useMemo(() => {
+    const results = _.uniqBy(
+      _.compact(allowedUsers.map(userId => _.find(members, { userId }))),
+      'userId'
+    )
+    let extra = 0
+    const maxUsers = [...results]
+    if (maxUsers.length > maxShownNum) {
+      extra = results.length - maxShownNum
+      maxUsers.length = maxShownNum
+    }
+
+    return {
+      all: results,
+      maxUsers,
+      extra
+    }
+  }, [members, allowedUsers, maxShownNum])
+
+  return (
+    <div className={cn(styles.container, classsName)}>
+      {(showAll ? allowedUserInfos.all : allowedUserInfos.maxUsers).map(
+        item => (
+          <ProjectMember key={item.userId} memberInfo={item} />
+        )
+      )}
+      {!showAll && allowedUserInfos.extra !== 0 && (
+        <button onClick={() => setShowAll(true)} className={styles.btn}>
+          +{allowedUserInfos.extra}
+        </button>
+      )}
+    </div>
+  )
+}
+
+ProjectMembers.defaultProps = {
+  maxShownNum: 3,
+  allowedUsers: [],
+  members: []
+}
+
+ProjectMembers.propTypes = {
+  classsName: PropTypes.string,
+  maxShownNum: PropTypes.number,
+  allowedUsers: PropTypes.arrayOf(PropTypes.number),
+  members: PropTypes.arrayOf(PropTypes.shape())
+}
+
+export default ProjectMembers
diff --git a/src/components/AssetsLibrary/ProjectMembers/styles.module.scss b/src/components/AssetsLibrary/ProjectMembers/styles.module.scss
new file mode 100644
index 00000000..16cefcce
--- /dev/null
+++ b/src/components/AssetsLibrary/ProjectMembers/styles.module.scss
@@ -0,0 +1,17 @@
+@import '../../../styles/includes';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.btn {
+  border: none;
+  background-color: transparent;
+  margin: 0;
+  outline: none !important;
+  border: 1px solid $tc-gray-30;
+  border-radius: 6px;
+  padding: 0 3px;
+}
\ No newline at end of file
diff --git a/src/components/AssetsLibrary/TabCommon/index.js b/src/components/AssetsLibrary/TabCommon/index.js
new file mode 100644
index 00000000..2b319c04
--- /dev/null
+++ b/src/components/AssetsLibrary/TabCommon/index.js
@@ -0,0 +1,49 @@
+/* Component to render tab ui */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './styles.module.scss'
+import cn from 'classnames'
+
+const TabCommon = ({ items, classsName, selectedIndex, onSelect }) => {
+  return (
+    <div className={cn(styles.container, classsName)}>
+      {items.map((item, index) => (
+        <button
+          className={cn(styles.blockTab, {
+            [styles.selected]: selectedIndex === index
+          })}
+          type='button'
+          key={item.label}
+          onClick={() => onSelect(index)}
+        >
+          <span className={styles.textLabel}>{item.label}</span>
+
+          {item.count !== undefined && (
+            <div className={styles.textCount}>{item.count}</div>
+          )}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+TabCommon.defaultProps = {
+  items: [],
+  classsName: '',
+  onSelect: () => {}
+}
+
+TabCommon.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      count: PropTypes.number
+    })
+  ),
+  classsName: PropTypes.string,
+  selectedIndex: PropTypes.number,
+  onSelect: PropTypes.func
+}
+
+export default TabCommon
diff --git a/src/components/AssetsLibrary/TabCommon/styles.module.scss b/src/components/AssetsLibrary/TabCommon/styles.module.scss
new file mode 100644
index 00000000..191cee55
--- /dev/null
+++ b/src/components/AssetsLibrary/TabCommon/styles.module.scss
@@ -0,0 +1,50 @@
+@import '../../../styles/includes';
+
+.container {
+  display: flex;
+  gap: 20px;
+}
+
+.blockTab {
+  padding: 0 15px;
+  margin: 0;
+  border: none;
+  background: transparent;
+  display: flex;
+  border-radius: 20px;
+  height: 30px;
+  align-items: flex-end;
+  gap: 5px;
+  outline: none !important;
+
+  &.selected {
+    background-color: $tc-gray-30;
+
+    * {
+      font-weight: 700;
+    }
+    .textCount {
+      background-color: $tc-gray-80;
+    }
+  }
+}
+
+.textLabel {
+  @include roboto;
+
+  font-size: 16px;
+  line-height: 30px;
+  color: $tc-gray-90;
+}
+
+.textCount {
+  @include roboto;
+
+  background-color: grey;
+  border-radius: 9px;
+  color: #fff;
+  font-size: 10px;
+  line-height: 12px;
+  padding: 0 4px;
+  margin-bottom: 7px;
+}
diff --git a/src/components/AssetsLibrary/TableAssets/index.js b/src/components/AssetsLibrary/TableAssets/index.js
new file mode 100644
index 00000000..e5dc40c4
--- /dev/null
+++ b/src/components/AssetsLibrary/TableAssets/index.js
@@ -0,0 +1,158 @@
+/* Component to render assets table */
+
+import React, { useMemo } from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import moment from 'moment'
+import styles from './styles.module.scss'
+import Table from '../../Table'
+import IconThreeDot from '../../Icons/IconThreeDot'
+import DropdownMenu from '../../DropdownMenu'
+import DownloadFile from '../DownloadFile'
+import IconFile from '../../Icons/IconFile'
+import cn from 'classnames'
+import {
+  PROJECT_ASSETS_SHARED_WITH_ALL_MEMBERS,
+  PROJECT_ASSETS_SHARED_WITH_ADMIN
+} from '../../../config/constants'
+import ProjectMembers from '../ProjectMembers'
+import ProjectMember from '../ProjectMember'
+
+const TableAssets = ({
+  classsName,
+  title,
+  onEdit,
+  onRemove,
+  datas,
+  isLink,
+  projectId,
+  members,
+  loggedInUser,
+  isAdmin
+}) => {
+  const displayAssets = useMemo(
+    () =>
+      datas.map(item => {
+        const titles = item.title.split('.')
+        const owner = _.find(members, { userId: item.createdBy })
+        const canEdit =
+          `${item.createdBy}` === `${loggedInUser.userId}` || isAdmin
+        return {
+          ...item,
+          fileType: titles[titles.length - 1],
+          owner,
+          updatedAtString: item.updatedAt
+            ? moment(item.updatedAt).format('MM/DD/YYYY h:mm A')
+            : '—',
+          canEdit
+        }
+      }),
+    [datas, members, loggedInUser, isAdmin]
+  )
+  return (
+    <div className={cn(styles.container, classsName)}>
+      <span className={styles.textTitle}>{title}</span>
+
+      <Table
+        options={[
+          {
+            name: 'Type'
+          },
+          {
+            name: 'Name'
+          },
+          {
+            name: 'Shared With'
+          },
+          {
+            name: 'Created By'
+          },
+          {
+            name: 'Date'
+          },
+          {
+            name: ''
+          }
+        ]}
+        rows={displayAssets.map(item => (
+          <Table.Row key={item.id}>
+            <Table.Col className={styles.blockItem}>
+              <IconFile type={isLink ? 'link-12' : item.fileType} />
+            </Table.Col>
+            <Table.Col className={styles.blockItem}>
+              {isLink ? (
+                <a href={item.path} target='_blank' rel='noopener noreferrer'>
+                  {item.title}
+                </a>
+              ) : (
+                <DownloadFile projectId={projectId} file={item} />
+              )}
+            </Table.Col>
+            <Table.Col className={styles.blockItem}>
+              {!item.allowedUsers && PROJECT_ASSETS_SHARED_WITH_ALL_MEMBERS}
+              {item.allowedUsers &&
+                item.allowedUsers === 0 &&
+                PROJECT_ASSETS_SHARED_WITH_ADMIN}
+              {item.allowedUsers && item.allowedUsers !== 0 && (
+                <ProjectMembers
+                  members={members}
+                  allowedUsers={item.allowedUsers}
+                />
+              )}
+            </Table.Col>
+            <Table.Col className={styles.blockItem}>
+              {!item.owner && !item.createdBy && '—'}
+              {!item.owner && item.createdBy !== 'CoderBot' && 'Unknown'}
+              {!item.owner && item.createdBy === 'CoderBot' && 'CoderBot'}
+              {!!item.owner && <ProjectMember memberInfo={item.owner} />}
+            </Table.Col>
+            <Table.Col className={styles.blockItem}>
+              {item.updatedAtString}
+            </Table.Col>
+            <Table.Col className={styles.colMenu}>
+              {item.canEdit && (
+                <DropdownMenu
+                  onSelectMenu={menu => {
+                    if (menu === 'Edit') {
+                      onEdit(item)
+                    } else if (menu === 'Remove') {
+                      onRemove(item)
+                    }
+                  }}
+                  options={['Edit', 'Remove']}
+                >
+                  <IconThreeDot />
+                </DropdownMenu>
+              )}
+            </Table.Col>
+          </Table.Row>
+        ))}
+      />
+    </div>
+  )
+}
+
+TableAssets.defaultProps = {
+  title: '',
+  onEdit: () => {},
+  onRemove: () => {},
+  datas: [],
+  isLink: false,
+  isAdmin: false,
+  members: []
+}
+
+TableAssets.propTypes = {
+  classsName: PropTypes.string,
+  projectId: PropTypes.string,
+  title: PropTypes.string,
+  isAdmin: PropTypes.bool,
+  onEdit: PropTypes.func,
+  onRemove: PropTypes.func,
+  datas: PropTypes.arrayOf(PropTypes.shape()),
+  members: PropTypes.arrayOf(PropTypes.shape()),
+  isLink: PropTypes.bool,
+  loggedInUser: PropTypes.object
+}
+
+export default TableAssets
diff --git a/src/components/AssetsLibrary/TableAssets/styles.module.scss b/src/components/AssetsLibrary/TableAssets/styles.module.scss
new file mode 100644
index 00000000..f719e5c7
--- /dev/null
+++ b/src/components/AssetsLibrary/TableAssets/styles.module.scss
@@ -0,0 +1,34 @@
+@import '../../../styles/includes';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.textTitle {
+  color: $tc-gray-90;
+  @include roboto-bold();
+
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.colMenu {
+  width: 50px;
+}
+
+.blockItem {
+  @include roboto;
+
+  font-size: 14px;
+  color: $tc-gray-90;
+
+  a {
+    color: $tc-gray-90;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
diff --git a/src/components/AssetsLibrary/index.js b/src/components/AssetsLibrary/index.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Buttons/OutlineButton/index.js b/src/components/Buttons/OutlineButton/index.js
index 537d41e3..9d5f6914 100644
--- a/src/components/Buttons/OutlineButton/index.js
+++ b/src/components/Buttons/OutlineButton/index.js
@@ -6,7 +6,7 @@ import cn from 'classnames'
 import styles from './Outline.module.scss'
 import _ from 'lodash'
 
-const OutlineButton = ({ type, text, link, onClick, url, className, submit, disabled }) => {
+const OutlineButton = ({ type, text, link, onClick, url, className, submit, disabled, target = 'self' }) => {
   if (_.isEmpty(link) && _.isEmpty(url)) {
     return (
       <button
@@ -29,7 +29,7 @@ const OutlineButton = ({ type, text, link, onClick, url, className, submit, disa
   }
 
   return (
-    <a className={cn(styles.container, styles[type], className)} href={`${url}`}>
+    <a className={cn(styles.container, styles[type], className)} href={`${url}`} target={target}>
       <span>{text}</span>
     </a>
   )
@@ -43,7 +43,8 @@ OutlineButton.propTypes = {
   className: PropTypes.string,
   onClick: PropTypes.func,
   submit: PropTypes.bool,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  target: PropTypes.oneOf(['_blank', 'self'])
 }
 
 export default OutlineButton
diff --git a/src/components/ChallengeEditor/ChallengeView/index.js b/src/components/ChallengeEditor/ChallengeView/index.js
index 8b658549..b0c3de96 100644
--- a/src/components/ChallengeEditor/ChallengeView/index.js
+++ b/src/components/ChallengeEditor/ChallengeView/index.js
@@ -20,7 +20,6 @@ import { getResourceRoleByName } from '../../../util/tc'
 import { loadGroupDetails } from '../../../actions/challenges'
 import {
   REVIEW_TYPES,
-  CONNECT_APP_URL,
   PHASE_PRODUCT_CHALLENGE_ID_FIELD,
   MULTI_ROUND_CHALLENGE_TEMPLATE_ID,
   DS_TRACK_ID
@@ -118,12 +117,7 @@ const ChallengeView = ({
               </div>
               {selectedMilestone &&
                 <div className={styles.col}>
-                  <span><span className={styles.fieldTitle}>Milestone:</span> {selectedMilestone ? (
-                    <a href={`${CONNECT_APP_URL}/projects/${projectDetail.id}`} target='_blank'
-                      rel='noopener noreferrer'>
-                      {selectedMilestone.name}
-                    </a>
-                  ) : ''}</span>
+                  <span><span className={styles.fieldTitle}>Milestone:</span> {selectedMilestone ? selectedMilestone.name : ''}</span>
                 </div>
               }
               <div className={styles.col}>
diff --git a/src/components/ChallengeEditor/Description-Field/index.js b/src/components/ChallengeEditor/Description-Field/index.js
index c3ee061f..40eeb1b2 100644
--- a/src/components/ChallengeEditor/Description-Field/index.js
+++ b/src/components/ChallengeEditor/Description-Field/index.js
@@ -782,7 +782,11 @@ class DescriptionField extends Component {
     }).then(res => {
       onload(res)
     }).catch(err => {
-      console.log(err)
+      if (process.env.NODE_ENV === 'development') {
+        console.log(err)
+      } else {
+        console.log('An unexpected error occured while uploading image')
+      }
       onerror()
     })
   }
diff --git a/src/components/ChallengeEditor/Milestone-Field/index.js b/src/components/ChallengeEditor/Milestone-Field/index.js
index c6e077d6..346981ba 100644
--- a/src/components/ChallengeEditor/Milestone-Field/index.js
+++ b/src/components/ChallengeEditor/Milestone-Field/index.js
@@ -4,8 +4,6 @@ import _ from 'lodash'
 import Select from '../../Select'
 import cn from 'classnames'
 import styles from './Milestone-Field.module.scss'
-import { CONNECT_APP_URL } from '../../../config/constants'
-import PrimaryButton from '../../Buttons/PrimaryButton'
 
 const MilestoneField = ({ milestones, onUpdateSelect, disabled, projectId, selectedMilestoneId }) => {
   const options = milestones.map(type => ({ label: type.name, value: type.id }))
@@ -28,10 +26,6 @@ const MilestoneField = ({ milestones, onUpdateSelect, disabled, projectId, selec
             isDisabled={disabled}
           />
         </div>
-        <a className={cn(styles.field, styles.manageLink)} href={`${CONNECT_APP_URL}/projects/${projectId}`} target='_blank'
-          rel='noopener noreferrer'>
-          <PrimaryButton type='successDark' text='MANAGE MILESTONES' />
-        </a>
       </div>
     </>
   )
diff --git a/src/components/ChallengeEditor/Submissions/Submissions.module.scss b/src/components/ChallengeEditor/Submissions/Submissions.module.scss
index 59149d21..b741a9ba 100644
--- a/src/components/ChallengeEditor/Submissions/Submissions.module.scss
+++ b/src/components/ChallengeEditor/Submissions/Submissions.module.scss
@@ -3,7 +3,6 @@
 $tc-black : #151516;
 $tc-gray-10: #d5d5d5;
 $tc-gray-50: #808080;
-$tc-gray-90: #2a2a2b;
 $tc-light-blue: #15acec;
 $tc-dark-blue: #0681ff;
 $tc-dark-blue-110: #006ad7;
diff --git a/src/components/ChallengesComponent/ChallengeList/index.js b/src/components/ChallengesComponent/ChallengeList/index.js
index 57b63282..1d8baed8 100644
--- a/src/components/ChallengesComponent/ChallengeList/index.js
+++ b/src/components/ChallengesComponent/ChallengeList/index.js
@@ -22,6 +22,7 @@ import Message from '../Message'
 import SortIcon from '../../../assets/images/sort-icon.svg'
 import Select from '../../Select'
 import Loader from '../../Loader'
+import UpdateBillingAccount from '../../UpdateBillingAccount'
 
 import { CHALLENGE_STATUS, PAGE_SIZE, PAGINATION_PER_PAGE_OPTIONS, PROJECT_ROLES } from '../../../config/constants'
 import { checkAdmin, checkReadOnlyRoles } from '../../../util/tc'
@@ -393,6 +394,10 @@ class ChallengeList extends Component {
       setActiveProject,
       billingStartDate,
       billingEndDate,
+      currentBillingAccount,
+      billingAccounts,
+      isBillingAccountsLoading,
+      updateProject,
       isBillingAccountLoadingFailed,
       isBillingAccountLoading,
       selfService,
@@ -400,6 +405,7 @@ class ChallengeList extends Component {
       loginUserRoleInProject
     } = this.props
     const isReadOnly = checkReadOnlyRoles(this.props.auth.token) || loginUserRoleInProject === PROJECT_ROLES.READ
+    const isAdmin = checkAdmin(this.props.auth.token)
 
     if (warnMessage) {
       return <Message warnMessage={warnMessage} />
@@ -476,40 +482,23 @@ class ChallengeList extends Component {
       <div className={styles.list}>
         {dashboard && <h2>My Challenges</h2>}
         <div className={cn(styles.row, { [styles.dashboardRow]: dashboard })}>
-          {!dashboard &&
-            !isBillingAccountLoading &&
-            !isBillingAccountLoadingFailed &&
-            !isBillingAccountExpired && (
+          {!dashboard ? (
             <div className={styles['col-6']}>
-              <span className={styles.title}>Billing Account: </span>
-              <span className={styles.active}>ACTIVE</span> &nbsp;{' '}
-              <span className={styles.title}>Start Date:</span>{' '}
-              {billingStartDate} &nbsp;{' '}
-              <span className={styles.title}>End Date:</span> {billingEndDate}
-            </div>
-          )}
-          {!dashboard &&
-            !isBillingAccountLoading &&
-            !isBillingAccountLoadingFailed &&
-            isBillingAccountExpired && (
-            <div className={styles['col-6']}>
-              <span className={styles.title}>Billing Account: </span>
-              <span className={styles.inactive}>INACTIVE</span> &nbsp;{' '}
-              <span className={styles.title}>Start Date:</span>{' '}
-              {billingStartDate} &nbsp;{' '}
-              <span className={styles.title}>End Date:</span> {billingEndDate}
-            </div>
-          )}
-          {!dashboard &&
-            !isBillingAccountLoading &&
-            isBillingAccountLoadingFailed && (
-            <div className={styles['col-6']}>
-              <span className={styles.error}>
-                  Billing Account failed to load
-              </span>
+              <UpdateBillingAccount
+                billingAccounts={billingAccounts}
+                isBillingAccountsLoading={isBillingAccountsLoading}
+                isBillingAccountLoading={isBillingAccountLoading}
+                isBillingAccountLoadingFailed={isBillingAccountLoadingFailed}
+                billingStartDate={billingStartDate}
+                billingEndDate={billingEndDate}
+                isBillingAccountExpired={isBillingAccountExpired}
+                isAdmin={isAdmin}
+                currentBillingAccount={currentBillingAccount}
+                updateProject={updateProject}
+                projectId={activeProject.id}
+              />
             </div>
-          )}
-          {dashboard && (
+          ) : (
             <div className={styles['col-6']}>
               <div className={cn(styles.field, styles.input1)}>
                 <label htmlFor='project'>Project :</label>
@@ -888,6 +877,10 @@ ChallengeList.propTypes = {
   deleteChallenge: PropTypes.func.isRequired,
   isBillingAccountExpired: PropTypes.bool,
   billingStartDate: PropTypes.string,
+  currentBillingAccount: PropTypes.number,
+  updateProject: PropTypes.func.isRequired,
+  isBillingAccountsLoading: PropTypes.bool,
+  billingAccounts: PropTypes.arrayOf(PropTypes.shape()).isRequired,
   isLoading: PropTypes.bool,
   billingEndDate: PropTypes.string,
   isBillingAccountLoadingFailed: PropTypes.bool,
diff --git a/src/components/ChallengesComponent/ChallengesComponent.module.scss b/src/components/ChallengesComponent/ChallengesComponent.module.scss
index 291401c1..8908f679 100644
--- a/src/components/ChallengesComponent/ChallengesComponent.module.scss
+++ b/src/components/ChallengesComponent/ChallengesComponent.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles/includes';
+@import "../../styles/includes";
 
 .challenges {
   width: 100%;
@@ -15,6 +15,19 @@
   line-height: 29px;
   color: $challenges-title;
   text-align: left;
+  display: flex;
+  align-items: center;
+}
+
+.status {
+  margin-left: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16px;
+  background-color: #f0f0f0;
+  padding: 4px 8px;
+  border-radius: 25px;
+  color: $challenges-title;
 }
 
 .titleContainer {
@@ -22,7 +35,11 @@
   display: flex;
   justify-content: space-between;
   padding: 0 30px;
+}
 
+.col-6 {
+  flex: 0 0 50%;
+  max-width: 50%;
 }
 
 .titleLinks {
@@ -43,15 +60,19 @@
     margin-left: 20px;
   }
 }
+.projectActionButtonWrapper {
+  display: flex;
+  gap: 5px;
 
-.buttonLaunchNew {
-  min-width: 169px;
-  height: 40px;
-  text-decoration: none;
+  a {
+    min-width: 169px;
+    height: 40px;
+    text-decoration: none;
 
-  :global {
-    span {
-      margin: 0 20px;
+    :global {
+      span {
+        margin: 0 20px;
+      }
     }
   }
 }
diff --git a/src/components/ChallengesComponent/ProjectStatus/ProjectStatus.module.scss b/src/components/ChallengesComponent/ProjectStatus/ProjectStatus.module.scss
new file mode 100644
index 00000000..23b7c893
--- /dev/null
+++ b/src/components/ChallengesComponent/ProjectStatus/ProjectStatus.module.scss
@@ -0,0 +1,48 @@
+
+@import "../../../styles/includes";
+.container {
+    min-height: 22px;
+    width: 86px;
+    border-radius: 3px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin-left: 4px;
+  
+    div {
+      @include roboto;
+  
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 17px;
+      color: $white;
+      text-transform: capitalize;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 4px 8px;
+
+    }
+  
+    &.in_review,
+    &.reviewed {
+      background-color: $status-gray;
+    }
+  
+    &.active {
+      background-color: $status-green;
+    }
+  
+    &.completed {
+      background-color: $status-blue;
+    }
+  
+    &.cancelled {
+      background-color: $tc-black;
+    }
+  
+    &.paused {
+      background-color: $tc-red;
+    }
+  }
\ No newline at end of file
diff --git a/src/components/ChallengesComponent/ProjectStatus/index.js b/src/components/ChallengesComponent/ProjectStatus/index.js
new file mode 100644
index 00000000..9592c53f
--- /dev/null
+++ b/src/components/ChallengesComponent/ProjectStatus/index.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import { PROJECT_STATUSES } from '../../../config/constants'
+import styles from './ProjectStatus.module.scss'
+
+const ProjectStatus = ({ status }) => {
+  return (
+    <div className={cn(styles.container, styles[status])}>
+      <div>{PROJECT_STATUSES.find(item => item.value === status).label}</div>
+    </div>
+  )
+}
+
+ProjectStatus.propTypes = {
+  status: PropTypes.string
+}
+
+export default ProjectStatus
diff --git a/src/components/ChallengesComponent/index.js b/src/components/ChallengesComponent/index.js
index a69bdd9a..5a978a54 100644
--- a/src/components/ChallengesComponent/index.js
+++ b/src/components/ChallengesComponent/index.js
@@ -6,11 +6,12 @@ import _ from 'lodash'
 import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
 import { Link } from 'react-router-dom'
-import { CONNECT_APP_URL, PROJECT_ROLES } from '../../config/constants'
-import { PrimaryButton } from '../Buttons'
+import ProjectStatus from './ProjectStatus'
+import { PROJECT_ROLES, TYPEFORM_URL, PROJECT_STATUS } from '../../config/constants'
+import { PrimaryButton, OutlineButton } from '../Buttons'
 import ChallengeList from './ChallengeList'
 import styles from './ChallengesComponent.module.scss'
-import { checkReadOnlyRoles } from '../../util/tc'
+import { checkAdmin, checkReadOnlyRoles, checkAdminOrCopilot } from '../../util/tc'
 
 const ChallengesComponent = ({
   challenges,
@@ -37,6 +38,10 @@ const ChallengesComponent = ({
   isBillingAccountExpired,
   billingStartDate,
   billingEndDate,
+  billingAccounts,
+  currentBillingAccount,
+  updateProject,
+  isBillingAccountsLoading,
   isBillingAccountLoadingFailed,
   isBillingAccountLoading,
   selfService,
@@ -45,6 +50,7 @@ const ChallengesComponent = ({
 }) => {
   const [loginUserRoleInProject, setLoginUserRoleInProject] = useState('')
   const isReadOnly = checkReadOnlyRoles(auth.token) || loginUserRoleInProject === PROJECT_ROLES.READ
+  const isAdminOrCopilot = checkAdminOrCopilot(auth.token, activeProject)
 
   useEffect(() => {
     const loggedInUser = auth.user
@@ -62,28 +68,49 @@ const ChallengesComponent = ({
         <div className={styles.titleLinks}>
           <div className={styles.title}>
             {activeProject ? activeProject.name : ''}
+            {activeProject && activeProject.status && <ProjectStatus className={styles.status} status={activeProject.status} />}
           </div>
-          {activeProject && activeProject.id && (
+          {activeProject && activeProject.id && isAdminOrCopilot && (
             <span>
               (
-              <a
-                href={`${CONNECT_APP_URL}/projects/${activeProject.id}`}
-                target='_blank'
-                rel='noopener noreferrer'
+              <Link
+                to={`/projects/${activeProject.id}/edit`}
               >
-                View Project
-              </a>
+                Edit Project
+              </Link>
               )
             </span>
           )}
         </div>
         {activeProject && activeProject.id && !isReadOnly ? (
-          <Link
-            className={styles.buttonLaunchNew}
-            to={`/projects/${activeProject.id}/challenges/new`}
-          >
-            <PrimaryButton text={'Launch New'} type={'info'} />
-          </Link>
+          <div className={styles.projectActionButtonWrapper}>
+            {isAdminOrCopilot && (
+              <OutlineButton
+                text={'Assets Library'}
+                type={'info'}
+                submit
+                link={`/projects/${activeProjectId}/assets`}
+                className={styles.btnOutline}
+              />
+            )}
+            {checkAdmin(auth.token) && (
+              <OutlineButton
+                text='Request Copilot'
+                type={'info'}
+                url={`${TYPEFORM_URL}#handle=${auth.user.handle}&projectid=${activeProjectId}`}
+                target={'_blank'}
+              />
+            )}
+            {activeProject.status === PROJECT_STATUS.ACTIVE ? (
+              <Link
+                to={`/projects/${activeProject.id}/challenges/new`}
+              >
+                <PrimaryButton text={'Launch New'} type={'info'} />
+              </Link>
+            ) : (
+              <PrimaryButton text={'Launch New'} type={'info'} disabled />
+            )}
+          </div>
         ) : (
           <span />
         )}
@@ -114,6 +141,10 @@ const ChallengesComponent = ({
           isBillingAccountExpired={isBillingAccountExpired}
           billingStartDate={billingStartDate}
           billingEndDate={billingEndDate}
+          billingAccounts={billingAccounts}
+          currentBillingAccount={currentBillingAccount}
+          updateProject={updateProject}
+          isBillingAccountsLoading={isBillingAccountsLoading}
           isBillingAccountLoadingFailed={isBillingAccountLoadingFailed}
           isBillingAccountLoading={isBillingAccountLoading}
           selfService={selfService}
@@ -154,6 +185,10 @@ ChallengesComponent.propTypes = {
   dashboard: PropTypes.bool,
   billingStartDate: PropTypes.string,
   billingEndDate: PropTypes.string,
+  billingAccounts: PropTypes.arrayOf(PropTypes.shape()),
+  updateProject: PropTypes.func.isRequired,
+  isBillingAccountsLoading: PropTypes.bool,
+  currentBillingAccount: PropTypes.number,
   isBillingAccountLoadingFailed: PropTypes.bool,
   isBillingAccountLoading: PropTypes.bool,
   selfService: PropTypes.bool,
diff --git a/src/components/DropdownMenu/index.js b/src/components/DropdownMenu/index.js
new file mode 100644
index 00000000..60fc7724
--- /dev/null
+++ b/src/components/DropdownMenu/index.js
@@ -0,0 +1,50 @@
+/* Component to render dropdown menu */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import Dropdown from 'rc-dropdown'
+import styles from './styles.module.scss'
+import cn from 'classnames'
+import 'rc-dropdown/assets/index.css'
+import _ from 'lodash'
+
+const DropdownMenu = ({ onSelectMenu, children, options }) => {
+  const menu = (
+    <div className={cn(styles['menus'])}>
+      {_.map(options, r => {
+        return (
+          <div
+            className={styles.menu}
+            key={r}
+            onClick={() => {
+              onSelectMenu(r)
+            }}
+          >
+            {r}
+          </div>
+        )
+      })}
+    </div>
+  )
+
+  return (
+    <Dropdown trigger={['click']} overlay={menu}>
+      <button className={styles.btn} type='button'>
+        {children}
+      </button>
+    </Dropdown>
+  )
+}
+
+DropdownMenu.defaultProps = {
+  onSelectMenu: () => {},
+  options: []
+}
+
+DropdownMenu.propTypes = {
+  onSelectMenu: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  options: PropTypes.arrayOf(PropTypes.string)
+}
+
+export default DropdownMenu
diff --git a/src/components/DropdownMenu/styles.module.scss b/src/components/DropdownMenu/styles.module.scss
new file mode 100644
index 00000000..a504c35b
--- /dev/null
+++ b/src/components/DropdownMenu/styles.module.scss
@@ -0,0 +1,37 @@
+@import "../../styles/includes";
+
+.menus {
+  outline: none;
+  position: relative;
+  list-style-type: none;
+  padding: 10px 0;
+  margin: 2px 0 0 0;
+  text-align: left;
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(21, 21, 22, .2);
+  border: none;
+  background-clip: padding-box;
+  cursor: pointer;
+  min-width: 150px;
+  min-height: 45px;
+
+  .menu {
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px 0 20px;
+    font-size: 13px;
+
+    &:hover {
+      background-color: rgba($tc-dark-blue-10, .5);
+    }
+  }
+}
+
+.btn {
+  border: none;
+  background-color: transparent;
+  outline: none !important;
+  padding: 0;
+  margin: 0;
+}
\ No newline at end of file
diff --git a/src/components/FieldDescription/index.jsx b/src/components/FieldDescription/index.jsx
new file mode 100644
index 00000000..1dbfd516
--- /dev/null
+++ b/src/components/FieldDescription/index.jsx
@@ -0,0 +1,48 @@
+/*
+ *  FieldDescription
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import TuiEditor from '../TuiEditor'
+import styles from './styles.scss'
+
+const FieldDescription = props => (
+  <TuiEditor
+    {...props}
+    toolbarItems={[
+      'heading',
+      'bold',
+      'italic',
+      'strike',
+      'code',
+      'divider',
+      'quote',
+      'codeblock',
+      'hr',
+      'divider',
+      'ul',
+      'ol',
+      'divider',
+      'image',
+      'link'
+    ]}
+    plugins={[]}
+    className={styles['description-editor']}
+    previewStyle='vertical'
+    height='400px'
+    hideModeSwitch
+    initialEditType='wysiwyg'
+    initialValue={props.value}
+  />
+)
+
+FieldDescription.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.string
+}
+
+export default FieldDescription
diff --git a/src/components/FieldDescription/styles.scss b/src/components/FieldDescription/styles.scss
new file mode 100644
index 00000000..43a00cd3
--- /dev/null
+++ b/src/components/FieldDescription/styles.scss
@@ -0,0 +1,20 @@
+@import "../../styles/includes";
+
+.description-editor {
+  width: 100%;
+
+  :global {
+    .tui-editor-contents {
+      code {
+        background-color: transparent;
+        color: inherit;
+      }
+
+      pre {
+        background-color: transparent;
+        color: inherit;
+        padding: 0;
+      }
+    }
+  }
+}
diff --git a/src/components/FieldInput/index.js b/src/components/FieldInput/index.js
new file mode 100644
index 00000000..a75cb1ba
--- /dev/null
+++ b/src/components/FieldInput/index.js
@@ -0,0 +1,49 @@
+/* Component to render input field */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './styles.module.scss'
+
+const FieldInput = ({
+  onChangeValue,
+  placeholder,
+  value,
+  type,
+  inputControl
+}) => {
+  return (
+    <input
+      className={styles.inputField}
+      type={type}
+      placeholder={placeholder}
+      onChange={x => onChangeValue(x.target.value)}
+      value={value}
+      onKeyDown={
+        type === 'number'
+          ? evt => {
+            if (['e', 'E', '+'].includes(evt.key)) {
+              evt.preventDefault()
+            }
+          }
+          : undefined
+      }
+      {...inputControl}
+    />
+  )
+}
+
+FieldInput.defaultProps = {
+  type: 'text',
+  onChangeValue: () => {},
+  inputControl: {}
+}
+
+FieldInput.propTypes = {
+  onChangeValue: PropTypes.func,
+  placeholder: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  type: PropTypes.string,
+  inputControl: PropTypes.any
+}
+
+export default FieldInput
diff --git a/src/components/FieldInput/styles.module.scss b/src/components/FieldInput/styles.module.scss
new file mode 100644
index 00000000..db8f9724
--- /dev/null
+++ b/src/components/FieldInput/styles.module.scss
@@ -0,0 +1,18 @@
+@import '../../styles/includes';
+
+@-moz-document url-prefix() {
+  .inputField {
+    &::-moz-placeholder {
+      /* Mozilla Firefox 19+ */
+      line-height: 38px;
+    }
+    &::-webkit-input-placeholder {
+      /* Webkit */
+      line-height: 38px;
+    }
+    &:-ms-input-placeholder {
+      /* IE */
+      line-height: 38px;
+    }
+  }
+}
diff --git a/src/components/FieldLabelDynamic/index.js b/src/components/FieldLabelDynamic/index.js
new file mode 100644
index 00000000..03c0eb36
--- /dev/null
+++ b/src/components/FieldLabelDynamic/index.js
@@ -0,0 +1,60 @@
+/* Component to render field label */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './styles.module.scss'
+import cn from 'classnames'
+
+const FieldLabelDynamic = ({
+  title,
+  isRequired,
+  children,
+  errorMsg,
+  className,
+  direction,
+  info
+}) => {
+  return (
+    <div
+      className={cn(
+        styles.row,
+        {
+          [styles.vertical]: direction === 'vertical',
+          [styles.horizontal]: direction === 'horizontal'
+        },
+        className
+      )}
+    >
+      {!!title && (
+        <div className={cn(styles.field, styles.col1)}>
+          <label>
+            {title} {isRequired && <span>*</span>}
+          </label>
+        </div>
+      )}
+      <div className={styles.blockContent}>
+        <div className={styles.blockValue}>
+          {info && <div className={styles.blockInfo}>{info}</div>}
+          <div className={cn(styles.field, styles.col2)}>{children}</div>
+        </div>
+        {errorMsg && <div className={cn(styles.error)}>{errorMsg}</div>}
+      </div>
+    </div>
+  )
+}
+
+FieldLabelDynamic.defaultProps = {
+  direction: 'horizontal'
+}
+
+FieldLabelDynamic.propTypes = {
+  direction: PropTypes.oneOf(['horizontal', 'vertical']),
+  title: PropTypes.string,
+  errorMsg: PropTypes.string,
+  className: PropTypes.string,
+  info: PropTypes.string,
+  isRequired: PropTypes.bool,
+  children: PropTypes.node
+}
+
+export default FieldLabelDynamic
diff --git a/src/components/FieldLabelDynamic/styles.module.scss b/src/components/FieldLabelDynamic/styles.module.scss
new file mode 100644
index 00000000..7977edb5
--- /dev/null
+++ b/src/components/FieldLabelDynamic/styles.module.scss
@@ -0,0 +1,74 @@
+@import '../../styles/includes';
+
+.row {
+  box-sizing: border-box;
+  display: flex;
+  align-content: space-between;
+  justify-content: flex-start;
+  gap: 5px;
+
+  &.vertical {
+    flex-direction: column;
+  }
+
+  &.horizontal {
+    gap: 10px;
+
+    .col1 {
+      margin-top: 10px;
+    }
+
+    .blockContent {
+      flex: 1;
+    }
+  }
+
+  .field {
+    label {
+      @include roboto-bold();
+
+      font-size: 16px;
+      line-height: 19px;
+      font-weight: 500;
+      color: $tc-gray-80;
+      margin-bottom: 0;
+    }
+
+    &.col1 {
+      white-space: nowrap;
+      display: flex;
+      flex-direction: column;
+
+      span {
+        color: $tc-red;
+      }
+    }
+
+    &.col2 {
+      width: 100%;
+    }
+  }
+}
+
+.blockContent {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.blockValue {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.blockInfo {
+  font-size: 13px;
+  color: $tc-gray-70;
+  font-weight: 400;
+  font-style: italic;
+}
+
+.error {
+  color: $tc-red;
+}
diff --git a/src/components/FieldSkillsBasic/index.js b/src/components/FieldSkillsBasic/index.js
new file mode 100644
index 00000000..0e8e6180
--- /dev/null
+++ b/src/components/FieldSkillsBasic/index.js
@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react'
+import PropTypes from 'prop-types'
+import Select from '../Select'
+import { searchSkills } from '../../services/skills'
+import { AUTOCOMPLETE_DEBOUNCE_TIME_MS } from '../../config/constants'
+import _ from 'lodash'
+
+const fetchSkills = _.debounce((inputValue, callback) => {
+  searchSkills(inputValue)
+    .then(skills => {
+      const suggestedOptions = skills.map(skillItem => ({
+        label: skillItem.name,
+        value: skillItem.id
+      }))
+      return callback(suggestedOptions)
+    })
+    .catch(() => {
+      return callback(null)
+    })
+}, AUTOCOMPLETE_DEBOUNCE_TIME_MS)
+
+const FieldSkillsBasic = ({ value, onChangeValue, id, placeholder }) => {
+  const selectedSkills = useMemo(
+    () =>
+      value.map(skill => ({
+        label: skill.name,
+        value: skill.skillId
+      })),
+    [value]
+  )
+
+  return (
+    <Select
+      id={id}
+      isMulti
+      simpleValue
+      isAsync
+      value={selectedSkills}
+      onChange={values => {
+        onChangeValue(
+          (values || []).map(value => ({
+            name: value.label,
+            skillId: value.value
+          }))
+        )
+      }}
+      cacheOptions
+      loadOptions={fetchSkills}
+      placeholder={placeholder}
+    />
+  )
+}
+
+FieldSkillsBasic.defaultProps = {
+  onChangeValue: () => {},
+  id: 'skill-select',
+  value: [],
+  placeholder: ''
+}
+
+FieldSkillsBasic.propTypes = {
+  value: PropTypes.arrayOf(PropTypes.shape()),
+  id: PropTypes.string,
+  onChangeValue: PropTypes.func,
+  placeholder: PropTypes.string
+}
+
+export default FieldSkillsBasic
diff --git a/src/components/FieldUserAutoComplete/index.js b/src/components/FieldUserAutoComplete/index.js
new file mode 100644
index 00000000..44fbcff0
--- /dev/null
+++ b/src/components/FieldUserAutoComplete/index.js
@@ -0,0 +1,61 @@
+/* Component to render select user field */
+
+import React, { useMemo } from 'react'
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import Select from '../Select'
+
+const FieldUserAutoComplete = ({
+  value,
+  onChangeValue,
+  id,
+  projectMembers,
+  loggedInUser
+}) => {
+  const selectedUsers = useMemo(() => {
+    return value.map(item => {
+      const selectedUser = _.find(projectMembers, { userId: item })
+      return {
+        label: selectedUser.handle,
+        value: selectedUser.userId
+      }
+    })
+  }, [value, projectMembers])
+
+  return (
+    <Select
+      id={id}
+      createOption={false}
+      isMulti
+      simpleValue
+      placeholder='Enter user handles'
+      value={selectedUsers}
+      onChange={values => {
+        onChangeValue((values || []).map(value => value.value))
+      }}
+      options={(projectMembers || [])
+        .filter(member => member.userId !== loggedInUser.userId)
+        .map(member => ({ value: member.userId, label: member.handle }))}
+    />
+  )
+}
+
+FieldUserAutoComplete.defaultProps = {
+  onChangeValue: () => {},
+  id: 'user-select',
+  value: [],
+  projectMembers: [],
+  loggedInUser: {}
+}
+
+FieldUserAutoComplete.propTypes = {
+  value: PropTypes.arrayOf(
+    PropTypes.oneOfType(PropTypes.string, PropTypes.number)
+  ),
+  id: PropTypes.string,
+  onChangeValue: PropTypes.func,
+  projectMembers: PropTypes.arrayOf(PropTypes.object),
+  loggedInUser: PropTypes.object
+}
+
+export default FieldUserAutoComplete
diff --git a/src/components/FieldUserAutoComplete/styles.module.scss b/src/components/FieldUserAutoComplete/styles.module.scss
new file mode 100644
index 00000000..8e00c5f8
--- /dev/null
+++ b/src/components/FieldUserAutoComplete/styles.module.scss
@@ -0,0 +1,22 @@
+@import '../../styles/includes';
+
+.container {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none !important;
+  background-color: transparent;
+  color: $tc-gray-90 !important;
+}
+
+.loader {
+  width: auto;
+  height: auto;
+  margin-left: 5px;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+}
diff --git a/src/components/Icons/IconFile/index.js b/src/components/Icons/IconFile/index.js
new file mode 100644
index 00000000..70c42561
--- /dev/null
+++ b/src/components/Icons/IconFile/index.js
@@ -0,0 +1,242 @@
+/**
+ * IconFile component
+ *
+ * Renders file icon depend on the file type
+ */
+import React, { useMemo } from 'react'
+import PT from 'prop-types'
+import ReactSVG from 'react-svg'
+import styles from './styles.module.scss'
+
+const assets = require.context('../../../assets/images/files', false, /svg/)
+const IconDefault = './default.svg'
+const IconAac = './aac.svg'
+const IconAi = './ai.svg'
+const IconAse = './ase.svg'
+const IconAsp = './asp.svg'
+const IconAspx = './aspx.svg'
+const IconAvi = './avi.svg'
+const IconBmp = './bmp.svg'
+const IconCpp = './c++.svg'
+const IconCad = './cad.svg'
+const IconCfm = './cfm.svg'
+const IconCgi = './cgi.svg'
+const IconCsh = './csh.svg'
+const IconCss = './css.svg'
+const IconCsv = './csv.svg'
+const IconDmg = './dmg.svg'
+const IconDoc = './doc.svg'
+const IconDocx = './docx.svg'
+const IconEps = './eps.svg'
+const IconEpub = './epub.svg'
+const IconExe = './exe.svg'
+const IconFlash = './flash.svg'
+const IconFlv = './flv.svg'
+const IconFont = './font.svg'
+const IconGif = './gif.svg'
+const IconGpx = './gpx.svg'
+const IconGzip = './gzip.svg'
+const IconHtml = './html.svg'
+const IconIcs = './ics.svg'
+const IconIso = './iso.svg'
+const IconJar = './jar.svg'
+const IconJava = './java.svg'
+const IconJpg = './jpg.svg'
+const IconJs = './js.svg'
+const IconJsp = './jsp.svg'
+const IconLog = './log.svg'
+const IconMax = './max.svg'
+const IconMd = './md.svg'
+const IconMkv = './mkv.svg'
+const IconMov = './mov.svg'
+const IconMp3 = './mp3.svg'
+const IconMp4 = './mp4.svg'
+const IconMpg = './mpg.svg'
+const IconObj = './obj.svg'
+const IconOtf = './otf.svg'
+const IconPdf = './pdf.svg'
+const IconPhp = './php.svg'
+const IconPng = './png.svg'
+const IconPptx = './pptx.svg'
+const IconPsd = './psd.svg'
+const IconPy = './py.svg'
+const IconRar = './rar.svg'
+const IconRaw = './raw.svg'
+const IconRb = './rb.svg'
+const IconRss = './rss.svg'
+const IconRtf = './rtf.svg'
+const IconSketch = './sketch.svg'
+const IconSql = './sql.svg'
+const IconSrt = './srt.svg'
+const IconSvg = './svg.svg'
+const IconTif = './tif.svg'
+const IconTiff = './tiff.svg'
+const IconTtf = './ttf.svg'
+const IconTxt = './txt.svg'
+const IconWav = './wav.svg'
+const IconXlsx = './xlsx.svg'
+const IconXml = './xml.svg'
+const IconZip = './zip.svg'
+const IconLink12 = './link-12.svg'
+
+const IconFile = ({ type }) => {
+  const icon = useMemo(() => {
+    // if type is defined as a relative path to the icon, convert it to icon "id"
+    let iconType = type
+    const typeAsPath =
+      type && type.match(/(?:\.\.\/)+assets\/icons\/([^.]+)\.svg/)
+    if (typeAsPath) {
+      iconType = typeAsPath[1]
+    }
+
+    switch (iconType) {
+      case 'aac':
+        return IconAac
+      case 'ai':
+        return IconAi
+      case 'ase':
+        return IconAse
+      case 'asp':
+        return IconAsp
+      case 'aspx':
+        return IconAspx
+      case 'avi':
+        return IconAvi
+      case 'bmp':
+        return IconBmp
+      case 'c++':
+        return IconCpp
+      case 'cad':
+        return IconCad
+      case 'cfm':
+        return IconCfm
+      case 'cgi':
+        return IconCgi
+      case 'csh':
+        return IconCsh
+      case 'css':
+        return IconCss
+      case 'csv':
+        return IconCsv
+      case 'dmg':
+        return IconDmg
+      case 'doc':
+        return IconDoc
+      case 'docx':
+        return IconDocx
+      case 'eps':
+        return IconEps
+      case 'epub':
+        return IconEpub
+      case 'exe':
+        return IconExe
+      case 'flash':
+        return IconFlash
+      case 'flv':
+        return IconFlv
+      case 'font':
+        return IconFont
+      case 'gif':
+        return IconGif
+      case 'gpx':
+        return IconGpx
+      case 'gzip':
+        return IconGzip
+      case 'html':
+        return IconHtml
+      case 'ics':
+        return IconIcs
+      case 'iso':
+        return IconIso
+      case 'jar':
+        return IconJar
+      case 'java':
+        return IconJava
+      case 'jpg':
+        return IconJpg
+      case 'js':
+        return IconJs
+      case 'jsp':
+        return IconJsp
+      case 'log':
+        return IconLog
+      case 'max':
+        return IconMax
+      case 'md':
+        return IconMd
+      case 'mkv':
+        return IconMkv
+      case 'mov':
+        return IconMov
+      case 'mp3':
+        return IconMp3
+      case 'mp4':
+        return IconMp4
+      case 'mpg':
+        return IconMpg
+      case 'obj':
+        return IconObj
+      case 'otf':
+        return IconOtf
+      case 'pdf':
+        return IconPdf
+      case 'php':
+        return IconPhp
+      case 'png':
+        return IconPng
+      case 'pptx':
+        return IconPptx
+      case 'psd':
+        return IconPsd
+      case 'py':
+        return IconPy
+      case 'rar':
+        return IconRar
+      case 'raw':
+        return IconRaw
+      case 'rb':
+        return IconRb
+      case 'rss':
+        return IconRss
+      case 'rtf':
+        return IconRtf
+      case 'sketch':
+        return IconSketch
+      case 'sql':
+        return IconSql
+      case 'srt':
+        return IconSrt
+      case 'svg':
+        return IconSvg
+      case 'tif':
+        return IconTif
+      case 'tiff':
+        return IconTiff
+      case 'ttf':
+        return IconTtf
+      case 'txt':
+        return IconTxt
+      case 'wav':
+        return IconWav
+      case 'xlsx':
+        return IconXlsx
+      case 'xml':
+        return IconXml
+      case 'zip':
+        return IconZip
+      case 'link-12':
+        return IconLink12
+      default:
+        // this will be default icon
+        return IconDefault
+    }
+  }, [type])
+
+  return <ReactSVG className={styles.icon} path={assets(icon)} />
+}
+
+IconFile.propTypes = {
+  type: PT.string
+}
+
+export default IconFile
diff --git a/src/components/Icons/IconFile/styles.module.scss b/src/components/Icons/IconFile/styles.module.scss
new file mode 100644
index 00000000..877542f0
--- /dev/null
+++ b/src/components/Icons/IconFile/styles.module.scss
@@ -0,0 +1,6 @@
+.icon {
+  svg {
+    width: 30px;
+    height: 30px;
+  }
+}
diff --git a/src/components/Icons/IconThreeDot/index.js b/src/components/Icons/IconThreeDot/index.js
new file mode 100644
index 00000000..7d7b4dc4
--- /dev/null
+++ b/src/components/Icons/IconThreeDot/index.js
@@ -0,0 +1,24 @@
+/* Component to render three dot icon */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './styles.module.scss'
+import cn from 'classnames'
+
+const IconThreeDot = ({ classsName }) => {
+  return (
+    <div className={cn(styles.container, classsName)}>
+      <i />
+      <i />
+      <i />
+    </div>
+  )
+}
+
+IconThreeDot.defaultProps = {}
+
+IconThreeDot.propTypes = {
+  classsName: PropTypes.string
+}
+
+export default IconThreeDot
diff --git a/src/components/Icons/IconThreeDot/styles.module.scss b/src/components/Icons/IconThreeDot/styles.module.scss
new file mode 100644
index 00000000..525c62ad
--- /dev/null
+++ b/src/components/Icons/IconThreeDot/styles.module.scss
@@ -0,0 +1,20 @@
+@import '../../../styles/includes';
+
+.container {
+  border: 1px solid $tc-gray-30;
+  border-radius: 6px;
+  display: flex;
+  line-height: 9px;
+  height: 12px;
+  padding: 0 3px;
+
+  i:before {
+    @include roboto;
+
+    color: $text-color;
+    content: '\B7';
+    display: flex;
+    font-size: 20px;
+    vertical-align: middle;
+  }
+}
diff --git a/src/components/InfiniteLoadTrigger/InfiniteLoadTrigger.module.scss b/src/components/InfiniteLoadTrigger/InfiniteLoadTrigger.module.scss
new file mode 100644
index 00000000..5bd73022
--- /dev/null
+++ b/src/components/InfiniteLoadTrigger/InfiniteLoadTrigger.module.scss
@@ -0,0 +1,11 @@
+.loader {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+
+    > * {
+        width: auto;
+        min-width: 130px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/InfiniteLoadTrigger/index.js b/src/components/InfiniteLoadTrigger/index.js
new file mode 100644
index 00000000..faf17852
--- /dev/null
+++ b/src/components/InfiniteLoadTrigger/index.js
@@ -0,0 +1,52 @@
+import React, { useEffect, useRef, useCallback } from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './InfiniteLoadTrigger.module.scss'
+import { OutlineButton } from '../Buttons'
+
+const InfiniteLoadTrigger = ({ onLoadMore, rootMargin = '100px', threshold = 0.1 }) => {
+  const triggerRef = useRef(null)
+
+  const observerCallback = useCallback(
+    (entries) => {
+      const [entry] = entries
+      if (entry.isIntersecting) {
+        onLoadMore()
+      }
+    },
+    [onLoadMore]
+  )
+
+  useEffect(() => {
+    // eslint-disable-next-line no-undef
+    const observer = new IntersectionObserver(observerCallback, {
+      root: null, // Observe relative to viewport
+      rootMargin,
+      threshold
+    })
+
+    if (triggerRef.current) {
+      observer.observe(triggerRef.current)
+    }
+
+    return () => {
+      if (triggerRef.current) {
+        observer.unobserve(triggerRef.current)
+      }
+    }
+  }, [observerCallback, rootMargin, threshold])
+
+  return (
+    <div ref={triggerRef} className={styles.loader}>
+      <OutlineButton type='info' text='Load More' onClick={() => onLoadMore()} />
+    </div>
+  )
+}
+
+InfiniteLoadTrigger.propTypes = {
+  onLoadMore: PropTypes.func.isRequired,
+  rootMargin: PropTypes.string,
+  threshold: PropTypes.number
+}
+
+export default InfiniteLoadTrigger
diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js
index a6bae410..be36d021 100644
--- a/src/components/Loader/index.js
+++ b/src/components/Loader/index.js
@@ -2,11 +2,13 @@
  * Component to render as a loading indication
  */
 import React from 'react'
+import cn from 'classnames'
+import PropTypes from 'prop-types'
 import styles from './Loader.module.scss'
 
-function Loader () {
+function Loader ({ classsName }) {
   return (
-    <div className={styles.loader}>
+    <div className={cn(styles.loader, classsName)}>
       <svg
         className={styles.container}
         viewBox='0 0 64 64'
@@ -30,4 +32,8 @@ function Loader () {
   )
 }
 
+Loader.propTypes = {
+  classsName: PropTypes.string
+}
+
 export default Loader
diff --git a/src/components/Modal/ConfirmationModal.js b/src/components/Modal/ConfirmationModal.js
index 2de97cce..f563f4a8 100644
--- a/src/components/Modal/ConfirmationModal.js
+++ b/src/components/Modal/ConfirmationModal.js
@@ -1,30 +1,45 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
+import _ from 'lodash'
 import Modal from '.'
 import styles from './ConfirmationModal.module.scss'
 import OutlineButton from '../Buttons/OutlineButton'
 import PrimaryButton from '../Buttons/PrimaryButton'
 
-const ConfirmationModal = ({ title, message, errorMessage, theme, isProcessing, cancelText, confirmText, onCancel, onConfirm, disableConfirmButton }) => (
-  <Modal theme={theme} onCancel={onCancel}>
+const ConfirmationModal = ({
+  title,
+  message,
+  errorMessage,
+  theme,
+  isProcessing,
+  cancelText,
+  confirmText,
+  onCancel,
+  onConfirm,
+  disableConfirmButton,
+  confirmType,
+  cancelType
+}) => (
+  <Modal theme={theme} onCancel={isProcessing ? _.noop : onCancel}>
     <div className={styles.contentContainer}>
-      <div className={styles.title}>{title}</div>
+      <div className={styles.title} title={title}>{title}</div>
       <span>{message}</span>
       <div className={styles.buttonGroup}>
         <div className={styles.button}>
           <OutlineButton
             className={cn({ disabled: isProcessing })}
             text={cancelText || 'Cancel'}
-            type={'danger'}
+            type={cancelType}
             onClick={onCancel}
+            disabled={isProcessing}
           />
         </div>
         <div className={styles.button}>
           <PrimaryButton
             text={isProcessing ? 'Processing...' : confirmText || 'Confirm'}
             disabled={disableConfirmButton || isProcessing}
-            type={'info'}
+            type={confirmType}
             onClick={onConfirm}
           />
         </div>
@@ -34,6 +49,11 @@ const ConfirmationModal = ({ title, message, errorMessage, theme, isProcessing,
   </Modal>
 )
 
+ConfirmationModal.defaultProps = {
+  confirmType: 'info',
+  cancelType: 'danger'
+}
+
 ConfirmationModal.propTypes = {
   title: PropTypes.string,
   message: PropTypes.oneOf(PropTypes.string, PropTypes.node),
@@ -42,7 +62,9 @@ ConfirmationModal.propTypes = {
   isProcessing: PropTypes.bool,
   disableConfirmButton: PropTypes.bool,
   cancelText: PropTypes.string,
+  cancelType: PropTypes.string,
   confirmText: PropTypes.string,
+  confirmType: PropTypes.string,
   onCancel: PropTypes.func,
   onConfirm: PropTypes.func
 }
diff --git a/src/components/Modal/ConfirmationModal.module.scss b/src/components/Modal/ConfirmationModal.module.scss
index 0fc48a82..f8d5ffff 100644
--- a/src/components/Modal/ConfirmationModal.module.scss
+++ b/src/components/Modal/ConfirmationModal.module.scss
@@ -14,6 +14,10 @@
   width: 852px;
   padding: 30px;
 
+  @include xs-to-lg {
+    max-width: 95vw;
+  }
+
   .content {
     padding: 30px;
     width: 100%;
@@ -27,6 +31,11 @@
     line-height: 36px;
     margin-bottom: 30px;
     margin-top: 0;
+
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .message {
@@ -58,7 +67,7 @@
         width: 193px;
         height: 40px;
         margin-right: 33px;
-        
+
         span {
           font-size: 16px;
           line-height: 1;
diff --git a/src/components/ProjectCard/ProjectCard.module.scss b/src/components/ProjectCard/ProjectCard.module.scss
index dab1a372..168de868 100644
--- a/src/components/ProjectCard/ProjectCard.module.scss
+++ b/src/components/ProjectCard/ProjectCard.module.scss
@@ -44,9 +44,13 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    //display: flex;
-    //justify-content: space-between;
-    //align-items: center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .status {
+      opacity: 0.7;
+    }
   }
 
   .icon {
diff --git a/src/components/ProjectCard/index.js b/src/components/ProjectCard/index.js
index 39016cb2..f639259b 100644
--- a/src/components/ProjectCard/index.js
+++ b/src/components/ProjectCard/index.js
@@ -2,10 +2,13 @@ import React from 'react'
 import PT from 'prop-types'
 import { Link } from 'react-router-dom'
 import cn from 'classnames'
+import { find } from 'lodash'
+
+import { PROJECT_STATUSES } from '../../config/constants'
 
 import styles from './ProjectCard.module.scss'
 
-const ProjectCard = ({ projectName, projectId, selected, setActiveProject }) => {
+const ProjectCard = ({ projectName, projectStatus, projectId, selected, setActiveProject }) => {
   return (
     <div className={styles.container}>
       <Link
@@ -13,13 +16,17 @@ const ProjectCard = ({ projectName, projectId, selected, setActiveProject }) =>
         className={cn(styles.projectName, { [styles.selected]: selected })}
         onClick={() => setActiveProject(parseInt(projectId))}
       >
-        <div className={styles.name}>{projectName}</div>
+        <div className={styles.name}>
+          <span>{projectName}</span>
+          <span className={styles.status}>{find(PROJECT_STATUSES, { value: projectStatus }).label}</span>
+        </div>
       </Link>
     </div>
   )
 }
 
 ProjectCard.propTypes = {
+  projectStatus: PT.string.isRequired,
   projectId: PT.number.isRequired,
   projectName: PT.string.isRequired,
   selected: PT.bool.isRequired,
diff --git a/src/components/ProjectForm/GroupsFormField/index.js b/src/components/ProjectForm/GroupsFormField/index.js
new file mode 100644
index 00000000..5106b2dd
--- /dev/null
+++ b/src/components/ProjectForm/GroupsFormField/index.js
@@ -0,0 +1,74 @@
+import React, { useCallback } from 'react'
+import { debounce, map } from 'lodash'
+import PropTypes from 'prop-types'
+import Select from '../../Select'
+import { fetchGroups as fetchGroupsApi } from '../../../services/challenges'
+import { AUTOCOMPLETE_DEBOUNCE_TIME_MS } from '../../../config/constants'
+import { useMapSelectedGroups } from './use-map-selected-groups.hook'
+
+/**
+ * Search & fetch groups from api, filtering by group name
+ */
+const fetchGroups = debounce((inputValue, callback) => {
+  fetchGroupsApi({ name: inputValue })
+    .then(groups => {
+      const suggestedOptions = groups.map(group => ({
+        label: group.name,
+        value: group.id
+      }))
+      return callback(suggestedOptions)
+    })
+    .catch(() => {
+      return callback(null)
+    })
+}, AUTOCOMPLETE_DEBOUNCE_TIME_MS)
+
+/**
+ * Component to handle project groups
+ */
+const GroupsFormField = ({ value, name, onBlur, onChange, id, placeholder, ref }) => {
+  const selectedGroups = useMapSelectedGroups(value)
+
+  const handleChange = useCallback((values) => {
+    onChange({ target: { name, value: map(values, 'value') } })
+  }, [])
+
+  return (
+    <Select
+      id={id}
+      ref={ref}
+      isMulti
+      onBlur={onBlur}
+      simpleValue
+      isAsync
+      name={name}
+      value={selectedGroups}
+      onChange={handleChange}
+      cacheOptions
+      loadOptions={fetchGroups}
+      placeholder={placeholder}
+    />
+  )
+}
+
+GroupsFormField.defaultProps = {
+  onChange: () => {},
+  onBlur: () => {},
+  id: 'group-select',
+  value: [],
+  name: '',
+  ref: undefined,
+  placeholder: ''
+}
+
+GroupsFormField.propTypes = {
+  value: PropTypes.arrayOf(PropTypes.shape()),
+  id: PropTypes.string,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  name: PropTypes.string,
+  ref: PropTypes.ref,
+  placeholder: PropTypes.string
+}
+
+export default GroupsFormField
diff --git a/src/components/ProjectForm/GroupsFormField/use-map-selected-groups.hook.js b/src/components/ProjectForm/GroupsFormField/use-map-selected-groups.hook.js
new file mode 100644
index 00000000..edcfb706
--- /dev/null
+++ b/src/components/ProjectForm/GroupsFormField/use-map-selected-groups.hook.js
@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+import { loadGroupDetails } from '../../../actions/challenges'
+
+export const useMapSelectedGroups = (groupIds) => {
+  const [selectedGroups, setSelectedGroups] = useState([])
+  useEffect(() => {
+    if (!groupIds || !groupIds.length) {
+      setSelectedGroups([])
+      return
+    }
+
+    loadGroupDetails(groupIds).then(res => {
+      setSelectedGroups(res.map(d => ({ label: d.name, value: d.id })))
+    })
+  }, [groupIds])
+  return selectedGroups
+}
diff --git a/src/components/ProjectForm/ProjectForm.module.scss b/src/components/ProjectForm/ProjectForm.module.scss
new file mode 100644
index 00000000..b3f51b9b
--- /dev/null
+++ b/src/components/ProjectForm/ProjectForm.module.scss
@@ -0,0 +1,104 @@
+@import "../../styles/includes";
+form {
+  width: 100%;
+
+  .description:focus {
+    outline-color: $light-blue;
+    outline-width: 1px;
+    outline-style: solid;
+    outline-offset: -1px;
+  }
+  .group {
+    @include form-container-default();
+    @include form-container-common();
+    background-color: $white;
+    width: 100%;
+    border-radius: 6px;
+    box-sizing: border-box;
+
+    .row {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: row;
+      margin: 30px 30px 0 30px;
+      align-content: space-between;
+      justify-content: flex-start;
+      &:last-of-type {
+        margin-bottom: 30px;
+      }
+    }
+    .formLabel {
+      max-width: 185px;
+      min-width: 185px;
+      margin-right: 14px;
+      margin-bottom: auto;
+      padding-top: 10px;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+
+      span {
+        color: $tc-red;
+      }
+    }
+    .formField {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-start;
+      align-self: flex-end;
+      width: 80%;
+      margin-bottom: auto;
+      margin-top: auto;
+      max-width: 600px;
+      min-width: 600px;
+      textarea {
+        width: 100%;
+        height: 100px;
+        box-sizing: border-box;
+        border: 1px solid $tc-gray-40;
+        @include roboto;
+        border-radius: 2px;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 19px;
+        color: $tc-gray-80;
+        padding: 10px 20px;
+      }
+      input[type=radio] {
+        width: 18px;
+      }
+    }
+
+    .flexField {
+      display: flex;
+      flex-direction: row;
+      gap: 15px;
+    }
+
+    .error {
+      padding-right: 40px;
+      padding-bottom: 5px;
+      color: $tc-red;
+
+      .errorMessage {
+        font-size: 25px;
+      }
+    }
+  }
+  .actionButtons {
+    top: 20px;
+    display: flex;
+    justify-content: center;
+    button {
+      height: 40px;
+      max-width: 100px;
+    }
+  }
+}
+
+.flexRow {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/src/components/ProjectForm/index.js b/src/components/ProjectForm/index.js
new file mode 100644
index 00000000..7c18e393
--- /dev/null
+++ b/src/components/ProjectForm/index.js
@@ -0,0 +1,288 @@
+import React, { useMemo, useState } from 'react'
+import { useForm, Controller } from 'react-hook-form'
+import cn from 'classnames'
+import { get } from 'lodash'
+import styles from './ProjectForm.module.scss'
+import { PrimaryButton } from '../Buttons'
+import Select from '../Select'
+import { PROJECT_STATUSES, PROJECT_STATUS, DEFAULT_NDA_UUID } from '../../config/constants'
+import GroupsFormField from './GroupsFormField'
+
+const ProjectForm = ({
+  projectTypes,
+  createProject,
+  updateProject,
+  setActiveProject,
+  history,
+  isEdit,
+  canManage,
+  projectDetail
+}) => {
+  const [isSaving, setIsSaving] = useState(false)
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { isDirty, errors },
+    watch
+  } = useForm({
+    defaultValues: {
+      projectName: isEdit ? projectDetail.name : '',
+      description: isEdit ? projectDetail.description : '',
+      cancelReason: null,
+      status: isEdit
+        ? PROJECT_STATUSES.find((item) => item.value === projectDetail.status) ||
+          null
+        : null,
+      projectType: isEdit
+        ? projectTypes.find((item) => item.key === projectDetail.type) || null
+        : null, // we'll store type as an object from react-select
+      terms: get(projectDetail, ['terms', 0], ''),
+      groups: get(projectDetail, ['groups'], [])
+    }
+  })
+
+  const projectStatus = watch('status')
+  const isProjectCancelled = get(projectStatus, 'value') === PROJECT_STATUS.CANCELLED
+
+  // Handle form submission
+  const onSubmit = async (data) => {
+    // indicate that creating process has started
+    setIsSaving(true)
+
+    try {
+      const status = canManage ? (data.status || {}).value : undefined
+      const payload = {
+        name: data.projectName,
+        description: data.description,
+        type: data.projectType.value,
+        status,
+        cancelReason: status === PROJECT_STATUS.CANCELLED ? data.cancelReason : undefined,
+        groups: data.groups,
+        terms: data.terms ? [data.terms] : []
+      }
+
+      if (isEdit) {
+        await updateProject(projectDetail.id, payload)
+      } else {
+        const res = await createProject(payload)
+
+        history.push(`/projects/${res.value.id}/challenges`)
+        setActiveProject(res.value.id)
+      }
+    } catch (err) {
+      console.error(err)
+    } finally {
+      setIsSaving(false)
+      reset(data)
+    }
+  }
+
+  // Build options for react-select from `types`
+  const projectTypeOptions = useMemo(() => projectTypes.map((t) => ({
+    value: t.key,
+    label: t.displayName
+  })), [projectTypes])
+
+  return (
+    <div>
+      <form
+        name='project-new-form'
+        noValidate
+        autoComplete='off'
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <div className={styles.group}>
+          <div className={cn(styles.row, styles.topRow)}>
+            <div className={cn(styles.formLabel, styles.field)}>
+              <label label htmlFor='projectName'>
+                Project Name <span>*</span> :
+              </label>
+            </div>
+            <div className={cn(styles.field, styles.formField)}>
+              <input
+                className={styles.projectName}
+                id='projectName'
+                placeholder='Project name'
+                {...register('projectName', {
+                  required: 'Project name is required',
+                  maxLength: {
+                    value: 255,
+                    message: 'Project name must be less than 255 characters'
+                  }
+                })}
+              />
+              {errors.projectName && (
+                <div className={cn(styles.error)}>
+                  {errors.projectName.message}
+                </div>
+              )}
+            </div>
+          </div>
+          {isEdit && canManage && (
+            <div className={cn(styles.row)}>
+              <div className={cn(styles.formLabel, styles.field)}>
+                <label label htmlFor='status'>
+                  Project Status <span>*</span> :
+                </label>
+              </div>
+              <div className={cn(styles.field, styles.formField)}>
+                <Controller
+                  name='status'
+                  control={control}
+                  rules={{ required: 'Please select a status' }}
+                  render={({ field }) => (
+                    <Select
+                      options={PROJECT_STATUSES}
+                      id='status'
+                      {...field}
+                      placeholder='Select Project Status'
+                    />
+                  )}
+                />
+                {errors.projectStatus && (
+                  <div className={cn(styles.error)}>
+                    {errors.projectStatus.message}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          {isEdit && isProjectCancelled && (
+            <Controller
+              name='cancelReason'
+              control={control}
+              rules={{ required: 'Please provide a cancellation reason' }}
+              render={({ field }) => (
+                <div className={cn(styles.row)}>
+                  <div className={cn(styles.formLabel, styles.field)}>
+                    <label label htmlFor='status'>
+                      Cancel reason <span>*</span> :
+                    </label>
+                  </div>
+                  <div className={cn(styles.field, styles.formField)}>
+                    <input
+                      className={styles.projectName}
+                      id='cancelReason'
+                      placeholder='Reason'
+                      {...field}
+                    />
+                    {errors.projectStatus && (
+                      <div className={cn(styles.error)}>
+                        {errors.projectStatus.message}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            />
+          )}
+          {!isEdit && (
+            <div className={cn(styles.row)}>
+              <div className={cn(styles.formLabel, styles.field)}>
+                <label label htmlFor='projectType'>
+                  Project Type <span>*</span> :
+                </label>
+              </div>
+              <div className={cn(styles.field, styles.formField)}>
+                <Controller
+                  name='projectType'
+                  control={control}
+                  rules={{ required: 'Please select a type' }}
+                  render={({ field }) => (
+                    <Select
+                      options={projectTypeOptions}
+                      id='projectType'
+                      {...field}
+                      placeholder='Select Project Type'
+                    />
+                  )}
+                />
+                {errors.projectType && (
+                  <div className={cn(styles.error)}>
+                    {errors.projectType.message}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          <div className={cn(styles.row)}>
+            <div className={cn(styles.formLabel, styles.field)}>
+              <label label htmlFor='description'>
+                Description <span>*</span> :
+              </label>
+            </div>
+            <div className={cn(styles.field, styles.formField)}>
+              <textarea
+                rows={4}
+                className={styles.description}
+                id='description'
+                placeholder='Description'
+                {...register('description', {
+                  required: 'Description is required'
+                })}
+              />
+              {errors.description && (
+                <div className={cn(styles.error)}>
+                  {errors.description.message}
+                </div>
+              )}
+            </div>
+          </div>
+          <div className={cn(styles.row)}>
+            <div className={cn(styles.formLabel, styles.field)}>
+              <label label htmlFor='description'>
+                Enforce Topcoder NDA:
+              </label>
+            </div>
+            <div className={cn(styles.field, styles.formField, styles.flexField)}>
+              <label className={cn(styles.flexRow)}>
+                Yes
+                <input
+                  type='radio'
+                  value={DEFAULT_NDA_UUID}
+                  {...register('terms', {})}
+                />
+              </label>
+              <label className={cn(styles.flexRow)}>
+                No
+                <input
+                  type='radio'
+                  value=''
+                  {...register('terms', {})}
+                />
+              </label>
+            </div>
+          </div>
+          <div className={cn(styles.row)}>
+            <div className={cn(styles.formLabel, styles.field)}>
+              <label label htmlFor='description'>
+                Intended Work Groups:
+              </label>
+            </div>
+            <div className={cn(styles.field, styles.formField)}>
+              <Controller
+                name='groups'
+                control={control}
+                render={({ field }) => (
+                  <GroupsFormField {...field} />
+                )}
+              />
+            </div>
+          </div>
+        </div>
+        <div className={styles.actionButtons}>
+          <PrimaryButton
+            text={isSaving ? 'Saving...' : 'Save'}
+            type={'info'}
+            submit
+            disabled={isSaving || !isDirty}
+          />
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default ProjectForm
diff --git a/src/components/Select/styles.js b/src/components/Select/styles.js
index c7869fe3..a2b44a38 100644
--- a/src/components/Select/styles.js
+++ b/src/components/Select/styles.js
@@ -6,7 +6,8 @@ export default {
   control: (provided, state) => {
     let styles = {
       ...provided,
-      borderRadius: '2px !important'
+      borderRadius: '2px !important',
+      minHeight: '40px'
     }
     if (state.isFocused) {
       styles = {
diff --git a/src/components/TaaSProjectCard/index.js b/src/components/TaaSProjectCard/index.js
new file mode 100644
index 00000000..03d44efc
--- /dev/null
+++ b/src/components/TaaSProjectCard/index.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import PT from 'prop-types'
+import { Link } from 'react-router-dom'
+import cn from 'classnames'
+
+import styles from './styles.module.scss'
+
+const TaaSProjectCard = ({ projectName, projectId, canEdit }) => {
+  return (
+    <div className={styles.container}>
+      {canEdit ? (
+        <Link to={`/taas/${projectId}/edit`} className={cn(styles.projectName)}>
+          <div className={styles.name}>{projectName}</div>
+        </Link>
+      ) : (
+        <div className={cn(styles.projectName)}>
+          <div className={styles.name}>{projectName}</div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+TaaSProjectCard.propTypes = {
+  projectId: PT.number.isRequired,
+  projectName: PT.string.isRequired,
+  canEdit: PT.bool
+}
+
+export default TaaSProjectCard
diff --git a/src/components/TaaSProjectCard/styles.module.scss b/src/components/TaaSProjectCard/styles.module.scss
new file mode 100644
index 00000000..dab1a372
--- /dev/null
+++ b/src/components/TaaSProjectCard/styles.module.scss
@@ -0,0 +1,77 @@
+@import "../../styles/includes";
+
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  //align-items: flex-start;
+  //background-color: lighten($darker-gray, 10);
+
+  .hide {
+    display: none;
+  }
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.projectName {
+  @include roboto;
+
+  padding-left: 30px;
+  padding-right: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: $white;
+  height: 50px;
+  border-left: 2px solid transparent;
+
+  &.selected {
+    background-color: #1C3040;
+    border-left-color: $teal;
+  }
+
+  .name {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 29px;
+
+    width: 177px;
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    //display: flex;
+    //justify-content: space-between;
+    //align-items: center;
+  }
+
+  .icon {
+    font-size: 20px;
+    fill: $white-text;
+    vertical-align: middle;
+    //margin-right: 20px;
+  }
+}
+
+.item {
+  @include roboto-light;
+
+  color: $white;
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 19px;
+  height: 42px;
+  border-left: 2px solid transparent;
+  padding-left: 40px;
+  display: flex;
+  align-items: center;
+
+  &.active {
+    background-color: #253847;
+    border-left-color: $teal;
+  }
+}
diff --git a/src/components/Tab/index.js b/src/components/Tab/index.js
index 0a8c9bf9..0d2db4c9 100644
--- a/src/components/Tab/index.js
+++ b/src/components/Tab/index.js
@@ -35,6 +35,13 @@ const Tab = ({
     selectTab(4)
   }
 
+  const onTaaSClick = () => {
+    if (currentTab === 5) {
+      return
+    }
+    selectTab(5)
+  }
+
   const tabComponent = (
     <ul className={styles.challengeTab}>
       <li
@@ -93,6 +100,20 @@ const Tab = ({
       >
           Self-Service
       </li>
+      <li
+        key='tab-item-taas'
+        className={cn(styles.item, { [styles.active]: currentTab === 5 })}
+        onClick={onTaaSClick}
+        onKeyDown={e => {
+          if (e.key !== 'Enter') {
+            return
+          }
+          onTaaSClick()
+        }}
+        role='presentation'
+      >
+          TaaS
+      </li>
     </ul>
   )
 
diff --git a/src/components/Table/Table.module.scss b/src/components/Table/Table.module.scss
index e1b9807d..75448e86 100644
--- a/src/components/Table/Table.module.scss
+++ b/src/components/Table/Table.module.scss
@@ -1,40 +1,43 @@
-@import "../../styles/includes";
+@import '../../styles/includes';
 
 table {
   border-spacing: 0;
-   tbody > tr {
-    display: flex;
-    flex-wrap: wrap;
-    background-color: $white;
-    font-size: 15px;
-    padding: 0 20px;
-
-    td {
-      width: 100%;
-    }
 
-    td:last-of-type {
-      justify-content: flex-end;
+  tr {
+    border-bottom: 1px solid #d5d5d5;
+  }
+
+  tbody {
+    tr {
+      &:hover {
+        background-color: rgba($tc-dark-blue-10, 0.5);
+      }
     }
   }
 
-  > thead > tr {
-    display: flex;
-    flex-wrap: wrap;
-    background-color: $light-bg;
-    font-size: 15px;
-    padding: 0 20px;
-
-    th {
-      @include roboto();
-      width: 100%;
-      text-align: start;
-      padding: 15px 0 15px 0;
+  th {
+    padding: 10px 10px;
+    color: grey;
+    font-size: 13px;
+    line-height: 30px;
+  }
+
+  td {
+    padding: 15px 10px;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  th,
+  td {
+    @include roboto();
+
+    &:last-of-type {
+      padding-right: 20px;
     }
 
-    th:last-of-type {
-      text-align: right;
-      justify-content: flex-end;
+    &:first-of-type {
+      padding-left: 20px;
     }
   }
 }
@@ -42,7 +45,3 @@ table {
 .hidden {
   display: none;
 }
-
-tbody.expand {
-  width: 100%;
-}
diff --git a/src/components/Table/index.js b/src/components/Table/index.js
index 07c76ad7..e0a491a3 100644
--- a/src/components/Table/index.js
+++ b/src/components/Table/index.js
@@ -6,9 +6,9 @@ import PropTypes from 'prop-types'
 import cn from 'classnames'
 import styles from './Table.module.scss'
 
-const Table = (props) => {
+const Table = props => {
   const { options, rows, className } = props
-  const headers = options.map(o => <th style={{ flex: o.width || 0 }} key={`th-${o.name}`}>{o.name}</th>)
+  const headers = options.map(o => <th key={`th-${o.name}`}>{o.name}</th>)
   // If the table is expandable it uses multiple tbodys
   return (
     <table className={cn(className)}>
@@ -16,7 +16,7 @@ const Table = (props) => {
         <Table.Row>{headers}</Table.Row>
       </thead>
       {props.expandable && rows}
-      {!props.expandable && (<tbody>{rows}</tbody>)}
+      {!props.expandable && <tbody>{rows}</tbody>}
     </table>
   )
 }
@@ -32,9 +32,11 @@ Table.propTypes = {
   className: PropTypes.string
 }
 
-Table.Row = (props) => {
+Table.Row = props => {
   return (
-    <tr className={props.className} onClick={props.onClick}>{props.children}</tr>
+    <tr className={props.className} onClick={props.onClick}>
+      {props.children}
+    </tr>
   )
 }
 
@@ -44,10 +46,8 @@ Table.Row.propTypes = {
   onClick: PropTypes.func
 }
 
-Table.Col = (props) => {
-  return (
-    <td style={{ flex: props.width || 0 }} {...props}>{props.children}</td>
-  )
+Table.Col = props => {
+  return <td {...props}>{props.children}</td>
 }
 
 Table.Col.propTypes = {
@@ -55,16 +55,22 @@ Table.Col.propTypes = {
   width: PropTypes.number
 }
 
-Table.ExpandableRow = (props) => {
+Table.ExpandableRow = props => {
   return (
-      <>
-        <tbody>
-          <Table.Row {...props} onClick={props.onClick} />
-        </tbody>
-        <tbody className={cn(styles.expand, { [styles.hidden]: !props.expanded }, props.expandContainerClassName)}>
-          {props.expandRows}
-        </tbody>
-      </>
+    <>
+      <tbody>
+        <Table.Row {...props} onClick={props.onClick} />
+      </tbody>
+      <tbody
+        className={cn(
+          styles.expand,
+          { [styles.hidden]: !props.expanded },
+          props.expandContainerClassName
+        )}
+      >
+        {props.expandRows}
+      </tbody>
+    </>
   )
 }
 
diff --git a/src/components/TuiEditor/index.jsx b/src/components/TuiEditor/index.jsx
new file mode 100644
index 00000000..5cfb118b
--- /dev/null
+++ b/src/components/TuiEditor/index.jsx
@@ -0,0 +1,221 @@
+/*
+ *  TuiEditor
+ *  wrap toast-ui editor with react and support react 15
+ */
+
+import React from 'react'
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import Editor from '@toast-ui/editor'
+import styles from './styles.scss'
+import cn from 'classnames'
+import 'codemirror/lib/codemirror.css'
+import '@toast-ui/editor/dist/toastui-editor.css'
+
+class TuiEditor extends React.Component {
+  constructor (props) {
+    super(props)
+    this.handleValueChange = this.handleValueChange.bind(this)
+    this.isInit = React.createRef()
+    this.isInit.current = true
+  }
+
+  getRootElement () {
+    return this.refs.rootEl
+  }
+
+  getInstance () {
+    return this.editorInst
+  }
+
+  bindEventHandlers (props) {
+    Object.keys(props)
+      .filter(key => /^on[A-Z][a-zA-Z]+/.test(key))
+      .forEach(key => {
+        const eventName = key[2].toLowerCase() + key.slice(3)
+        this.editorInst.off(eventName)
+        this.editorInst.on(eventName, props[key])
+      })
+
+    // always add `https` to the links if link was added without `http` or `https`
+    this.editorInst.on(
+      'convertorAfterHtmlToMarkdownConverted',
+      inputMarkdown => {
+        const outputMarkdown = inputMarkdown.replace(
+          /\[([^\]]*)\]\((?!https?)([^)]+)\)/g,
+          '[$1](https://$2)'
+        )
+        return outputMarkdown
+      }
+    )
+  }
+
+  componentDidMount () {
+    const props = {
+      ...this.props,
+      ..._.pickBy(
+        {
+          initialEditType: this.props.initialEditType,
+          initialValue: this.props.initialValue,
+          minHeight: this.props.minHeight,
+          placeholder: this.props.placeholder,
+          hideModeSwitch: this.props.hideModeSwitch,
+          language: this.props.language,
+          useCommandShortcut: this.props.useCommandShortcut,
+          onLoad: this.props.onLoad,
+          onStateChange: this.props.onStateChange,
+          onFocus: this.props.onFocus,
+          onBlur: this.props.onBlur,
+          hooks: this.props.hooks,
+          usageStatistics: this.props.usageStatistics,
+          useDefaultHTMLSanitizer: this.props.useDefaultHTMLSanitizer,
+          toolbarItems: this.props.toolbarItems,
+          plugins: this.props.plugins,
+          extendedAutolinks: this.props.extendedAutolinks,
+          customConvertor: this.props.customConvertor,
+          linkAttribute: this.props.linkAttribute,
+          customHTMLRenderer: this.props.customHTMLRenderer,
+          referenceDefinition: this.props.referenceDefinition,
+          customHTMLSanitizer: this.props.customHTMLSanitizer,
+          frontMatter: this.props.frontMatter
+        },
+        _.identity
+      ),
+      onChange: this.handleValueChange
+    }
+    const editorProps = {
+      el: this.refs.rootEl,
+      ...props
+    }
+    this.editorInst = new Editor(editorProps)
+    this.bindEventHandlers(props)
+    setTimeout(() => {
+      this.isInit.current = false
+    }, 10)
+  }
+
+  componentWillUnmount () {
+    Object.keys(this.props)
+      .filter(key => /^on[A-Z][a-zA-Z]+/.test(key))
+      .forEach(key => {
+        const eventName = key[2].toLowerCase() + key.slice(3)
+        this.editorInst.off(eventName)
+      })
+
+    this.editorInst.off('convertorAfterHtmlToMarkdownConverted')
+  }
+
+  handleValueChange () {
+    if (this.isInit.current) {
+      return
+    }
+    if (this.props.onChange) {
+      this.props.onChange(this.getInstance().getMarkdown())
+    }
+  }
+
+  shouldComponentUpdate (nextProps) {
+    const instance = this.getInstance()
+    const { height, previewStyle, className } = nextProps
+
+    if (this.props.height !== height) {
+      instance.height(height)
+    }
+
+    if (this.props.previewStyle !== previewStyle) {
+      instance.changePreviewStyle(previewStyle)
+    }
+
+    if (this.props.className !== className) {
+      return true
+    }
+
+    // this looks like a bed idea to re-subscribe all the event on each re-render
+    // also, note, that we had to disable this.editorInst.off(eventName);
+    // otherwise popup for choosing Headings never closes
+    // this.bindEventHandlers(nextProps, this.props);
+
+    return false
+  }
+
+  render () {
+    return (
+      <div ref='rootEl' className={cn(styles.editor, this.props.className)} />
+    )
+  }
+}
+
+TuiEditor.defaultProps = {
+  height: '300px',
+  minHeight: '300px',
+  initialValue: '',
+  previewStyle: '',
+  language: 'en-US',
+  useCommandShortcut: true,
+  customHTMLSanitizer: null,
+  frontMatter: false,
+  hideModeSwitch: false,
+  referenceDefinition: false,
+  usageStatistics: false,
+  useDefaultHTMLSanitizer: true
+}
+
+TuiEditor.propTypes = {
+  className: PropTypes.string,
+  // Markdown editor's preview style (tab, vertical)
+  previewStyle: PropTypes.string.isRequired,
+  // Editor's height style value. Height is applied as border-box ex) '300px', '100%', 'auto'
+  height: PropTypes.string,
+  // Initial editor type (markdown, wysiwyg)
+  initialEditType: PropTypes.string,
+  // Editor's initial value
+  initialValue: PropTypes.string,
+  // Editor's min-height style value in pixel ex) '300px'
+  minHeight: PropTypes.string,
+  // The placeholder text of the editable element.
+  placeholder: PropTypes.string,
+  // hide mode switch tab bar
+  hideModeSwitch: PropTypes.bool,
+  // language, 'en-US'
+  language: PropTypes.string,
+  // whether use keyboard shortcuts to perform commands
+  useCommandShortcut: PropTypes.bool,
+  // It would be emitted when editor fully load1
+  onLoad: PropTypes.func,
+  // It would be emitted when content changed
+  onChange: PropTypes.func,
+  // It would be emitted when format change by cursor position
+  onStateChange: PropTypes.func,
+  // It would be emitted when editor get focus
+  onFocus: PropTypes.func,
+  // It would be emitted when editor loose focus
+  onBlur: PropTypes.func,
+  // hooks
+  hooks: PropTypes.arrayOf(PropTypes.object),
+  // send hostname to google analytics
+  usageStatistics: PropTypes.bool,
+  // use default htmlSanitizer
+  useDefaultHTMLSanitizer: PropTypes.bool,
+  // toolbar items.
+  toolbarItems: PropTypes.arrayOf(
+    PropTypes.oneOfType(PropTypes.object, PropTypes.string)
+  ),
+  // Array of plugins. A plugin can be either a function or an array in the form of [function, options].
+  plugins: PropTypes.arrayOf(PropTypes.object),
+  // Using extended Autolinks specified in GFM spec
+  extendedAutolinks: PropTypes.object,
+  // convertor extention
+  customConvertor: PropTypes.object,
+  // Attributes of anchor element that should be rel, target, contenteditable, hreflang, type
+  linkAttribute: PropTypes.object,
+  // Object containing custom renderer functions correspond to markdown node
+  customHTMLRenderer: PropTypes.object,
+  // whether use the specification of link reference definition
+  referenceDefinition: PropTypes.bool,
+  // custom HTML sanitizer
+  customHTMLSanitizer: PropTypes.func,
+  // whether use the front matter
+  frontMatter: PropTypes.bool
+}
+
+export default TuiEditor
diff --git a/src/components/TuiEditor/styles.scss b/src/components/TuiEditor/styles.scss
new file mode 100644
index 00000000..fcc6bed3
--- /dev/null
+++ b/src/components/TuiEditor/styles.scss
@@ -0,0 +1,64 @@
+@import "../../styles/includes";
+
+.editor {
+  background: red;
+
+  > div {
+    h1 {
+      all: revert;
+      font-size: 24px;
+    }
+  }
+
+  b,
+  i,
+  s,
+  hr,
+  blockquote,
+  ul,
+  li,
+  ol,
+  table,
+  thead,
+  tr,
+  th,
+  img,
+  a,
+  code,
+  pre {
+    all: revert;
+  }
+
+  :global {
+    // add style for heading list in  headings selection popup, because 'all:revert' has been setted before
+    .te-heading-add ul {
+      list-style: none;
+    }
+
+    // hide uplodd file
+    .tui-editor-popup{
+        box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.26);
+    }
+
+    .te-popup-add-image .te-tab button, .te-popup-add-image .te-file-type{
+      display: none !important;
+    }
+
+    .te-popup-add-image .te-url-type{
+      display: block !important;
+    }
+  }
+}
+
+:global {
+  .te-ww-container .tui-editor-contents {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 16px 25px 0 !important;
+    height: inherit;
+  }
+
+  .tui-editor-contents {
+    font-size: 15px !important;
+  }
+}
diff --git a/src/components/UpdateBillingAccount/UpdateBillingAccount.module.scss b/src/components/UpdateBillingAccount/UpdateBillingAccount.module.scss
new file mode 100644
index 00000000..e915eeca
--- /dev/null
+++ b/src/components/UpdateBillingAccount/UpdateBillingAccount.module.scss
@@ -0,0 +1,80 @@
+@import "../../styles/includes";
+
+.field {
+  @include upto-sm {
+    display: block;
+    padding-bottom: 10px;
+  }
+
+  label {
+    @include roboto-bold();
+
+    font-size: 16px;
+    line-height: 19px;
+    font-weight: 500;
+    color: $tc-gray-80;
+  }
+
+  &.input1 {
+    max-width: 185px;
+    min-width: 185px;
+    margin-right: 14px;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+
+    span {
+      color: $tc-red;
+    }
+  }
+
+  &.input2.error {
+    color: $tc-red;
+    margin-top: -25px;
+  }
+  &.input2 {
+    align-self: flex-end;
+    width: 50%;
+    margin-bottom: auto;
+    margin-top: auto;
+    display: flex;
+    flex-direction: row;
+    max-width: 500px;
+    flex-grow: 1;
+  }
+}
+.buttonContainer {
+  display: flex;
+  padding-right: 10px;
+
+  button {
+    margin-left: 10px;
+    max-width: 100px;
+    height: 40px;
+  }
+}
+
+.manageBillingAccountLinkWrapper {
+  margin-top: 5px;
+}
+
+.manageBillingAccountLink {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.title {
+  font-weight: bold;
+}
+.error {
+  font-weight: bold;
+  color: #be405e;
+}
+.active {
+  color: #008000;
+  text-transform: uppercase;
+}
+.inactive {
+  color: #be405e;
+}
diff --git a/src/components/UpdateBillingAccount/index.js b/src/components/UpdateBillingAccount/index.js
new file mode 100644
index 00000000..b20cd9b4
--- /dev/null
+++ b/src/components/UpdateBillingAccount/index.js
@@ -0,0 +1,193 @@
+import Select from '../Select'
+import React, { Fragment, useState } from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import styles from './UpdateBillingAccount.module.scss'
+import { SALESFORCE_BILLING_ACCOUNT_LINK } from '../../config/constants'
+import { PrimaryButton, OutlineButton } from '../Buttons'
+import moment from 'moment-timezone'
+const UpdateBillingAccount = ({
+  billingAccounts,
+  isBillingAccountsLoading,
+  isBillingAccountLoading,
+  isBillingAccountLoadingFailed,
+  billingStartDate,
+  billingEndDate,
+  isBillingAccountExpired,
+  isAdmin,
+  currentBillingAccount,
+  projectId,
+  updateProject
+}) => {
+  const [isEditing, setIsEditing] = useState(false)
+  const [selectedBillingAccount, setSelectedBillingAccount] = useState(null)
+  const [isSaving, setIsSaving] = useState(false)
+
+  const handleEditClick = () => {
+    let billingAccount = billingAccounts.find(
+      (billingAccount) => billingAccount.value === currentBillingAccount
+    )
+    // if option is not on the list, then create such option
+    // this is needed if the user doesn't have access to the selected account
+    if (!billingAccount && currentBillingAccount) {
+      billingAccount = {
+        label: `<Assigned Account>(${currentBillingAccount}) ${
+          billingEndDate
+            ? ' - ' + moment(billingEndDate).format('MMM DD, YYYY')
+            : ''
+        }`,
+        value: currentBillingAccount
+      }
+      billingAccounts.push(billingAccount)
+    }
+    setSelectedBillingAccount(billingAccount)
+    setIsEditing(true)
+  }
+
+  const handleChange = (value) => {
+    setSelectedBillingAccount(value)
+  }
+
+  const handleCancel = () => {
+    setIsEditing(false)
+    setSelectedBillingAccount(null)
+  }
+
+  const handleSave = async () => {
+    setIsSaving(true)
+    await updateProject(projectId, {
+      billingAccountId: selectedBillingAccount
+        ? selectedBillingAccount.value
+        : null
+    })
+    setIsSaving(false)
+    setIsEditing(false)
+    setSelectedBillingAccount(null)
+  }
+
+  const placeholder =
+    billingAccounts && billingAccounts.length > 0
+      ? 'Select billing account'
+      : 'No Billing Account Available'
+
+  const renderBillingAccount = () => {
+    return (
+      <Fragment>
+        <div className={cn(styles.field, styles.input1)}>
+          <label htmlFor='billingAccount'>Choose a Billing Account :</label>
+        </div>
+        <div className={styles.buttonContainer}>
+          <div className={cn(styles.field, styles.input2)}>
+            <Select
+              name='billingAccount'
+              placeholder={placeholder}
+              onChange={handleChange}
+              options={billingAccounts}
+              value={selectedBillingAccount}
+              isLoading={isBillingAccountsLoading}
+              isClearable
+              isDisabled={billingAccounts.length === 0}
+              showDropdownIndicator
+            />
+          </div>
+          <PrimaryButton
+            onClick={handleSave}
+            text={'Save'}
+            type={'info'}
+            isLoading={isSaving}
+            disabled={isSaving}
+          />
+          <OutlineButton
+            onClick={handleCancel}
+            text={'Cancel'}
+            type={'info'}
+            disabled={isSaving}
+          />
+        </div>
+        {selectedBillingAccount && (
+          <div className={styles.manageBillingAccountLinkWrapper}>
+            <a
+              className={styles.manageBillingAccountLink}
+              href={`${SALESFORCE_BILLING_ACCOUNT_LINK}${selectedBillingAccount.value}`}
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              Manage the billing account in Salesforce
+            </a>
+          </div>
+        )}
+      </Fragment>
+    )
+  }
+  if (isBillingAccountLoading) {
+    return <></>
+  }
+  return !isEditing ? (
+    <Fragment>
+      {!isBillingAccountLoading &&
+        isBillingAccountLoadingFailed &&
+        !currentBillingAccount && (
+        <Fragment>
+          <span className={styles.error}>No Billing Account set</span>
+          {isAdmin && (
+            <span>
+              {' '}
+                ({' '}
+              <a href='javascript:void(0)' onClick={handleEditClick}>
+                  Select Billing Account
+              </a>{' '}
+                )
+            </span>
+          )}
+        </Fragment>
+      )}
+      {!isBillingAccountLoading &&
+        !isBillingAccountLoadingFailed &&
+        currentBillingAccount !== null && (
+        <Fragment>
+          <span className={styles.title}>Billing Account: </span>
+          <span
+            className={
+              isBillingAccountExpired ? styles.inactive : styles.active
+            }
+          >
+            {isBillingAccountExpired ? 'INACTIVE' : 'ACTIVE'}
+          </span>{' '}
+          {isAdmin && (
+            <span>
+              {' '}
+                ({' '}
+              <a href='javascript:void(0)' onClick={handleEditClick}>
+                  Edit Billing Account
+              </a>{' '}
+                )
+            </span>
+          )}
+          <div>
+            <span className={styles.title}>Start Date:</span>{' '}
+            {billingStartDate} &nbsp;{' '}
+            <span className={styles.title}>End Date:</span> {billingEndDate}{' '}
+          </div>
+        </Fragment>
+      )}
+    </Fragment>
+  ) : (
+    renderBillingAccount()
+  )
+}
+
+UpdateBillingAccount.propTypes = {
+  billingAccounts: PropTypes.arrayOf(PropTypes.object),
+  isBillingAccountsLoading: PropTypes.bool,
+  isBillingAccountLoading: PropTypes.bool,
+  isBillingAccountLoadingFailed: PropTypes.bool,
+  billingStartDate: PropTypes.string,
+  billingEndDate: PropTypes.string,
+  currentBillingAccount: PropTypes.number,
+  isBillingAccountExpired: PropTypes.bool,
+  isAdmin: PropTypes.bool,
+  projectId: PropTypes.number,
+  updateProject: PropTypes.func.isRequired
+}
+
+export default UpdateBillingAccount
diff --git a/src/config/constants.js b/src/config/constants.js
index b8917e2a..106c9f76 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -28,7 +28,10 @@ export const {
   API_V4,
   API_V5,
   SKILLS_V5_API_URL,
-  UPDATE_SKILLS_V5_API_URL
+  UPDATE_SKILLS_V5_API_URL,
+  SALESFORCE_BILLING_ACCOUNT_LINK,
+  TYPEFORM_URL,
+  PROFILE_URL
 } = process.env
 export const CREATE_FORUM_TYPE_IDS = typeof process.env.CREATE_FORUM_TYPE_IDS === 'string' ? process.env.CREATE_FORUM_TYPE_IDS.split(',') : process.env.CREATE_FORUM_TYPE_IDS
 
@@ -39,9 +42,14 @@ export const CREATE_FORUM_TYPE_IDS = typeof process.env.CREATE_FORUM_TYPE_IDS ==
 // but if we want to test file uploading we should provide the real value in `FILE_PICKER_API_KEY` env variable
 export const FILE_PICKER_API_KEY = process.env.FILE_PICKER_API_KEY || 'DUMMY'
 export const FILE_PICKER_CONTAINER_NAME = process.env.FILE_PICKER_CONTAINER_NAME || 'tc-challenge-v5-dev'
+export const FILE_PICKER_SUBMISSION_CONTAINER_NAME = process.env.FILE_PICKER_SUBMISSION_CONTAINER_NAME || 'submission-staging-dev'
+export const PROJECT_ATTACHMENTS_FOLDER = process.env.PROJECT_ATTACHMENTS_FOLDER || 'PROJECT_ATTACHMENTS'
 export const FILE_PICKER_REGION = process.env.FILE_PICKER_REGION || 'us-east-1'
+export const FILE_PICKER_LOCATION = process.env.FILE_PICKER_LOCATION || 's3'
 export const FILE_PICKER_CNAME = process.env.FILE_PICKER_CNAME || 'fs.topcoder.com'
 export const FILE_PICKER_FROM_SOURCES = ['local_file_system', 'googledrive', 'dropbox']
+export const ASSETS_FILE_PICKER_FROM_SOURCES = ['local_file_system']
+export const ASSETS_FILE_PICKER_MAX_FILES = 4
 export const FILE_PICKER_ACCEPT = ['.bmp', '.gif', '.jpg', '.tex', '.xls', '.xlsx', '.doc', '.docx', '.zip', '.txt', '.pdf', '.png', '.ppt', '.pptx', '.rtf', '.csv']
 export const FILE_PICKER_MAX_FILES = 10
 export const FILE_PICKER_MAX_SIZE = 500 * 1024 * 1024 // 500Mb
@@ -66,6 +74,12 @@ export const SEARCH_USER_PROJECTS_SUCCESS = 'SEARCH_USER_PROJECTS_SUCCESS'
 export const SEARCH_USER_PROJECTS_PENDING = 'SEARCH_USER_PROJECTS_PENDING'
 export const SEARCH_USER_PROJECTS_FAILURE = 'SEARCH_USER_PROJECTS_FAILURE'
 
+// project billingAccounts
+export const LOAD_PROJECT_BILLING_ACCOUNTS = 'LOAD_PROJECT_BILLING_ACCOUNTS'
+export const LOAD_PROJECT_BILLING_ACCOUNTS_PENDING = 'LOAD_PROJECT_BILLING_ACCOUNTS_PENDING'
+export const LOAD_PROJECT_BILLING_ACCOUNTS_FAILURE = 'LOAD_PROJECT_BILLING_ACCOUNTS_FAILURE'
+export const LOAD_PROJECT_BILLING_ACCOUNTS_SUCCESS = 'LOAD_PROJECT_BILLING_ACCOUNTS_SUCCESS'
+
 // project billingAccount
 export const LOAD_PROJECT_BILLING_ACCOUNT = 'LOAD_PROJECT_BILLING_ACCOUNT'
 export const LOAD_PROJECT_BILLING_ACCOUNT_PENDING = 'LOAD_PROJECT_BILLING_ACCOUNT_PENDING'
@@ -113,6 +127,11 @@ export const LOAD_PROJECT_DETAILS_SUCCESS = 'LOAD_PROJECT_DETAILS_SUCCESS'
 export const LOAD_PROJECT_DETAILS_PENDING = 'LOAD_PROJECT_DETAILS_PENDING'
 export const LOAD_PROJECT_DETAILS_FAILURE = 'LOAD_PROJECT_DETAILS_FAILURE'
 
+export const UPDATE_PROJECT_DETAILS = 'UPDATE_PROJECT_DETAILS'
+export const UPDATE_PROJECT_DETAILS_SUCCESS = 'UPDATE_PROJECT_DETAILS_SUCCESS'
+export const UPDATE_PROJECT_DETAILS_PENDING = 'UPDATE_PROJECT_DETAILS_PENDING'
+export const UPDATE_PROJECT_DETAILS_FAILURE = 'UPDATE_PROJECT_DETAILS_FAILURE'
+
 export const UPDATE_PROJECT_ROLE_FOR_MEMBER_SUCCESS = 'UPDATE_PROJECT_ROLE_FOR_MEMBER_SUCCESS'
 
 export const LOAD_CHALLENGE_SUBMISSIONS = 'LOAD_CHALLENGE_SUBMISSIONS'
@@ -155,6 +174,25 @@ export const RESET_SIDEBAR_ACTIVE_PARAMS = 'RESET_SIDEBAR_ACTIVE_PARAMS'
 
 export const BETA_MODE_COOKIE_TAG = 'beta-mode'
 
+export const LOAD_PROJECT_TYPES = 'LOAD_PROJECT_TYPES'
+export const LOAD_PROJECT_TYPES_SUCCESS = 'LOAD_PROJECT_TYPES_SUCCESS'
+export const LOAD_PROJECT_TYPES_PENDING = 'LOAD_PROJECT_TYPES_PENDING'
+export const LOAD_PROJECT_TYPES_FAILURE = 'LOAD_PROJECT_TYPES_FAILURE'
+
+export const CREATE_PROJECT = 'CREATE_PROJECT'
+export const CREATE_PROJECT_PENDING = 'CREATE_PROJECT_PENDING'
+export const CREATE_PROJECT_SUCCESS = 'CREATE_PROJECT_SUCCESS'
+export const CREATE_PROJECT_FAILURE = 'CREATE_PROJECT_FAILURE'
+
+export const ADD_PROJECT_ATTACHMENT_SUCCESS = 'ADD_PROJECT_ATTACHMENT_SUCCESS'
+export const UPDATE_PROJECT_ATTACHMENT_SUCCESS = 'UPDATE_PROJECT_ATTACHMENT_SUCCESS'
+export const REMOVE_PROJECT_ATTACHMENT_SUCCESS = 'REMOVE_PROJECT_ATTACHMENT_SUCCESS'
+
+export const UPDATE_PROJECT = 'UPDATE_PROJECT'
+export const UPDATE_PROJECT_PENDING = 'UPDATE_PROJECT_PENDING'
+export const UPDATE_PROJECT_SUCCESS = 'UPDATE_PROJECT_SUCCESS'
+export const UPDATE_PROJECT_FAILURE = 'UPDATE_PROJECT_FAILURE'
+
 // Name of challenge tracks
 export const CHALLENGE_TRACKS = {
   DESIGN: DES_TRACK_ID,
@@ -275,6 +313,8 @@ export const downloadAttachmentURL = (challengeId, attachmentId, token) =>
 
 export const PAGE_SIZE = 10
 
+export const PROJECTS_PAGE_SIZE = 20
+
 /**
  * The minimal number of characters to enter before starting showing autocomplete suggestions
  */
@@ -364,3 +404,50 @@ export const SPECIAL_CHALLENGE_TAGS = [
   'Marathon Match',
   'Rapid Development Match'
 ]
+
+/**
+ * Possible statuses of projects
+ */
+export const PROJECT_STATUSES = [
+  { label: 'Active', value: 'active' },
+  { label: 'In Review', value: 'in_review' },
+  { label: 'Reviewed', value: 'reviewed' },
+  { label: 'Completed', value: 'completed' },
+  { label: 'Cancelled', value: 'cancelled' },
+  { label: 'Paused', value: 'paused' }
+]
+
+export const PROJECT_STATUS = {
+  ACTIVE: 'active',
+  IN_REVIEW: 'in_review',
+  REVIEWED: 'reviewed',
+  COMPLETED: 'completed',
+  CANCELLED: 'cancelled',
+  PAUSED: 'paused'
+}
+
+export const JOB_ROLE_OPTIONS = [
+  { value: null, label: 'Select Role' },
+  { value: 'designer', label: 'Designer' },
+  { value: 'software-developer', label: 'Software Developer' },
+  { value: 'data-scientist', label: 'Data Scientist' },
+  { value: 'data-engineer', label: 'Data Engineer' }
+]
+
+export const JOB_WORKLOAD_OPTIONS = [
+  { value: null, label: 'Select Workload' },
+  { value: 'fulltime', label: 'Full-Time' },
+  { value: 'fractional', label: 'Fractional' }
+]
+
+/*
+* Project Attachment types
+*/
+export const ATTACHMENT_TYPE_FILE = 'file'
+export const ATTACHMENT_TYPE_LINK = 'link'
+
+/**
+ * Project assets shared with type text
+ */
+export const PROJECT_ASSETS_SHARED_WITH_ALL_MEMBERS = 'All Project Members'
+export const PROJECT_ASSETS_SHARED_WITH_ADMIN = 'Only Admins'
diff --git a/src/containers/Challenges/Challenges.module.scss b/src/containers/Challenges/Challenges.module.scss
index 01cafd76..1fe2709a 100644
--- a/src/containers/Challenges/Challenges.module.scss
+++ b/src/containers/Challenges/Challenges.module.scss
@@ -2,6 +2,9 @@
 
 .projectSearch {
   padding: 20px 20px 0px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 
   .projectSearchHeader {
     display: flex;
@@ -11,6 +14,24 @@
       margin-right: 10px;
     }
   }
+  .buttonNewProjectWrapper {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    margin-top: auto;
+    align-items: center;
+    .buttonNewProject {
+      min-width: 169px;
+      height: 40px;
+      text-decoration: none;
+      
+      :global {
+        span {
+          margin: 0 20px;
+        }
+      }
+    }
+  }
 
   ul {
     background-color: $lighter-gray;
@@ -48,4 +69,17 @@
     padding-right: 20px;
     color: $white;
   }
+}
+
+.blockNoProjectSelected {
+  display: flex;
+  gap: 20px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.buttonCreateNewTaaS {
+  min-width: 169px;
+  height: 40px;
+  text-decoration: none;
 }
\ No newline at end of file
diff --git a/src/containers/Challenges/index.js b/src/containers/Challenges/index.js
index ca5dfa97..72aa0ad4 100644
--- a/src/containers/Challenges/index.js
+++ b/src/containers/Challenges/index.js
@@ -6,6 +6,7 @@ import React, { Component, Fragment } from 'react'
 // import { Redirect } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
 import ChallengesComponent from '../../components/ChallengesComponent'
 import ProjectCard from '../../components/ProjectCard'
 // import Loader from '../../components/Loader'
@@ -15,14 +16,17 @@ import {
   deleteChallenge,
   loadChallengeTypes
 } from '../../actions/challenges'
-import { loadProject } from '../../actions/projects'
+import { loadProject, updateProject } from '../../actions/projects'
 import {
+  loadMoreProjects,
   loadProjects,
   setActiveProject,
   resetSidebarActiveParams
 } from '../../actions/sidebar'
 import styles from './Challenges.module.scss'
-import { checkAdmin } from '../../util/tc'
+import { checkAdmin, checkAdminOrCopilot } from '../../util/tc'
+import { PrimaryButton } from '../../components/Buttons'
+import InfiniteLoadTrigger from '../../components/InfiniteLoadTrigger'
 
 class Challenges extends Component {
   constructor (props) {
@@ -95,7 +99,9 @@ class Challenges extends Component {
         (!reduxProjectInfo || `${reduxProjectInfo.id}` !== projectId) &&
         !projectLoading
       ) {
-        loadProject(projectId)
+        if (projectId) {
+          loadProject(projectId)
+        }
       } else {
         window.localStorage.removeItem('projectLoading')
       }
@@ -127,6 +133,10 @@ class Challenges extends Component {
       isBillingAccountExpired,
       billingStartDate,
       billingEndDate,
+      billingAccounts,
+      currentBillingAccount,
+      updateProject,
+      isBillingAccountsLoading,
       isBillingAccountLoadingFailed,
       isBillingAccountLoading,
       dashboard,
@@ -138,9 +148,10 @@ class Challenges extends Component {
     const projectInfo = _.find(projects, { id: activeProjectId }) || {}
     const projectComponents =
       !dashboard &&
-      projects.map(p => (
+      projects.map((p) => (
         <li key={p.id}>
           <ProjectCard
+            projectStatus={p.status}
             projectName={p.name}
             projectId={p.id}
             selected={activeProjectId === `${p.id}`}
@@ -155,9 +166,19 @@ class Challenges extends Component {
           (activeProjectId === -1 && !selfService)) ? (
             <div className={!dashboard && styles.projectSearch}>
               {activeProjectId === -1 && !selfService && (
-                <div>No project selected. Select one below</div>
+                <div className={styles.buttonNewProjectWrapper}>
+                  <div>No project selected. Select one below</div>
+                  {checkAdminOrCopilot(auth.token) && (
+                    <Link className={styles.buttonNewProject} to={`/projects/new`}>
+                      <PrimaryButton text={'Create Project'} type={'info'} />
+                    </Link>
+                  )}
+                </div>
               )}
               <ul>{projectComponents}</ul>
+              {projects && !!projects.length && (
+                <InfiniteLoadTrigger onLoadMore={this.props.loadMoreProjects} />
+              )}
             </div>
           ) : null}
         {(dashboard || activeProjectId !== -1 || selfService) && (
@@ -191,6 +212,10 @@ class Challenges extends Component {
             isBillingAccountExpired={isBillingAccountExpired}
             billingStartDate={billingStartDate}
             billingEndDate={billingEndDate}
+            billingAccounts={billingAccounts}
+            currentBillingAccount={currentBillingAccount}
+            updateProject={updateProject}
+            isBillingAccountsLoading={isBillingAccountsLoading}
             isBillingAccountLoadingFailed={isBillingAccountLoadingFailed}
             isBillingAccountLoading={isBillingAccountLoading}
             selfService={selfService}
@@ -235,12 +260,17 @@ Challenges.propTypes = {
   isBillingAccountExpired: PropTypes.bool,
   billingStartDate: PropTypes.string,
   billingEndDate: PropTypes.string,
+  billingAccounts: PropTypes.arrayOf(PropTypes.shape()),
+  currentBillingAccount: PropTypes.number,
+  updateProject: PropTypes.func.isRequired,
+  isBillingAccountsLoading: PropTypes.bool,
   isBillingAccountLoadingFailed: PropTypes.bool,
   isBillingAccountLoading: PropTypes.bool,
   selfService: PropTypes.bool,
   dashboard: PropTypes.bool,
   auth: PropTypes.object.isRequired,
   loadChallengeTypes: PropTypes.func,
+  loadMoreProjects: PropTypes.func,
   metadata: PropTypes.shape({
     challengeTypes: PropTypes.array
   })
@@ -255,6 +285,10 @@ const mapStateToProps = ({ challenges, sidebar, projects, auth }) => ({
   isBillingAccountExpired: projects.isBillingAccountExpired,
   billingStartDate: projects.billingStartDate,
   billingEndDate: projects.billingEndDate,
+  billingAccounts: projects.billingAccounts,
+  currentBillingAccount: projects.currentBillingAccount,
+  updateProject: projects.updateProject,
+  isBillingAccountsLoading: projects.isBillingAccountsLoading,
   isBillingAccountLoadingFailed: projects.isBillingAccountLoadingFailed,
   isBillingAccountLoading: projects.isBillingAccountLoading,
   auth: auth,
@@ -264,8 +298,10 @@ const mapStateToProps = ({ challenges, sidebar, projects, auth }) => ({
 const mapDispatchToProps = {
   loadChallengesByPage,
   resetSidebarActiveParams,
+  loadMoreProjects,
   loadProject,
   loadProjects,
+  updateProject,
   loadChallengeTypes,
   setActiveProject,
   partiallyUpdateChallengeDetails,
diff --git a/src/containers/ProjectAssets/index.jsx b/src/containers/ProjectAssets/index.jsx
new file mode 100644
index 00000000..002ce66b
--- /dev/null
+++ b/src/containers/ProjectAssets/index.jsx
@@ -0,0 +1,353 @@
+/* Component to render project assets page */
+
+import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import * as filepicker from 'filestack-js'
+import { toastr } from 'react-redux-toastr'
+import PrimaryButton from '../../components/Buttons/PrimaryButton'
+import OutlineButton from '../../components/Buttons/OutlineButton'
+import TabCommon from '../../components/AssetsLibrary/TabCommon'
+import TableAssets from '../../components/AssetsLibrary/TableAssets'
+import ModalAttachmentOptions from '../../components/AssetsLibrary/ModalAttachmentOptions'
+import ModalAddLink from '../../components/AssetsLibrary/ModalAddLink'
+import ConfirmationModal from '../../components/Modal/ConfirmationModal'
+import { loadOnlyProjectInfo, removeAttachment } from '../../actions/projects'
+
+import styles from './styles.module.scss'
+import Loader from '../../components/Loader'
+import {
+  ASSETS_FILE_PICKER_FROM_SOURCES,
+  ASSETS_FILE_PICKER_MAX_FILES,
+  ATTACHMENT_TYPE_FILE,
+  ATTACHMENT_TYPE_LINK,
+  FILE_PICKER_ACCEPT,
+  FILE_PICKER_API_KEY,
+  FILE_PICKER_CNAME,
+  FILE_PICKER_LOCATION,
+  FILE_PICKER_REGION,
+  FILE_PICKER_SUBMISSION_CONTAINER_NAME,
+  PROJECT_ATTACHMENTS_FOLDER
+} from '../../config/constants'
+import { removeProjectAttachmentApi } from '../../services/projects'
+import { checkAdmin } from '../../util/tc'
+
+const theme = {
+  container: styles.modalContainer
+}
+
+const ProjectAssets = ({
+  projectId,
+  projectDetail,
+  loadOnlyProjectInfo,
+  isLoading,
+  removeAttachment,
+  loggedInUser,
+  token
+}) => {
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [selectedTab, setSelectedTab] = useState(0)
+  const [showDeleteFile, setShowDeleteFile] = useState(null)
+  const [showDeleteLink, setShowDeleteLink] = useState(null)
+  const [showAttachmentOptions, setShowAttachmentOptions] = useState(false)
+  const [pendingUploadFiles, setPendingUploadFiles] = useState([])
+  const uploadedFiles = useRef([])
+  const [showAddLink, setShowAddLink] = useState(false)
+  const hasProjectAccess = useMemo(
+    () => (projectDetail ? `${projectDetail.id}` === projectId : false),
+    [projectDetail, projectId]
+  )
+  const isAdmin = useMemo(() => checkAdmin(token), [token])
+  const fileUploadClient = useMemo(() => {
+    return filepicker.init(FILE_PICKER_API_KEY, {
+      cname: FILE_PICKER_CNAME
+    })
+  }, [])
+
+  const openFileUpload = useCallback(() => {
+    if (fileUploadClient && projectId) {
+      const attachmentsStorePath = `${PROJECT_ATTACHMENTS_FOLDER}/${projectId}/`
+      const picker = fileUploadClient.picker({
+        storeTo: {
+          location: FILE_PICKER_LOCATION,
+          path: attachmentsStorePath,
+          container: FILE_PICKER_SUBMISSION_CONTAINER_NAME,
+          region: FILE_PICKER_REGION
+        },
+        maxFiles: ASSETS_FILE_PICKER_MAX_FILES,
+        fromSources: ASSETS_FILE_PICKER_FROM_SOURCES,
+        accept: FILE_PICKER_ACCEPT,
+        uploadInBackground: false,
+        onFileUploadFinished: files => {
+          const attachments = []
+          const fpFiles = _.isArray(files) ? files : [files]
+          _.forEach(fpFiles, f => {
+            const attachment = {
+              title: f.filename,
+              description: '',
+              size: f.size,
+              path: f.key,
+              type: ATTACHMENT_TYPE_FILE,
+              contentType: f.mimetype || 'application/unknown'
+            }
+            attachments.push(attachment)
+          })
+          uploadedFiles.current = [...uploadedFiles.current, ...attachments]
+        },
+        onOpen: () => {
+          uploadedFiles.current = []
+        },
+        onClose: () => {
+          if (uploadedFiles.current.length) {
+            setPendingUploadFiles([...uploadedFiles.current])
+            setShowAttachmentOptions(true)
+          }
+        }
+      })
+
+      picker.open()
+    }
+  }, [fileUploadClient, projectId])
+
+  const files = useMemo(() => {
+    if (!hasProjectAccess) {
+      return []
+    }
+
+    let results = _.filter(
+      projectDetail.attachments,
+      a => a.type === ATTACHMENT_TYPE_FILE
+    )
+    results = _.sortBy(results, file => -new Date(file.updatedAt).getTime())
+    return results
+  }, [projectDetail, hasProjectAccess])
+
+  const links = useMemo(() => {
+    if (!hasProjectAccess) {
+      return []
+    }
+
+    let results = _.filter(
+      projectDetail.attachments,
+      a => a.type === ATTACHMENT_TYPE_LINK
+    )
+    results = _.sortBy(results, file => -new Date(file.updatedAt).getTime())
+    return results
+  }, [projectDetail, hasProjectAccess])
+
+  const { tableTitle, tableDatas, isLink } = useMemo(() => {
+    if (selectedTab === 0) {
+      return {
+        tableTitle: 'All Files',
+        tableDatas: files,
+        isLink: false
+      }
+    } else if (selectedTab === 1) {
+      return {
+        tableTitle: 'All Links',
+        tableDatas: links,
+        isLink: true
+      }
+    }
+    return {
+      tableTitle: '',
+      tableDatas: [],
+      isLink: false
+    }
+  }, [files, links, selectedTab])
+
+  useEffect(() => {
+    if (projectId) {
+      loadOnlyProjectInfo(projectId)
+    }
+  }, [projectId])
+
+  if (isLoading) {
+    return <Loader />
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.blockHeader}>
+        <div className={styles.title}>Assets Library</div>
+        <div className={styles.btns}>
+          {hasProjectAccess && (
+            <div className={styles.btn}>
+              <OutlineButton
+                text={`Add new ${selectedTab ? 'link' : 'file'}`}
+                type={'info'}
+                onClick={() => {
+                  if (selectedTab === 0) {
+                    openFileUpload()
+                  } else if (selectedTab === 1) {
+                    setShowAddLink(true)
+                  }
+                }}
+              />
+            </div>
+          )}
+          <div className={styles.btn}>
+            <PrimaryButton
+              text='Back'
+              type={'info'}
+              link={`/projects/${projectId}/challenges`}
+            />
+          </div>
+        </div>
+      </div>
+      {hasProjectAccess && (
+        <>
+          <TabCommon
+            items={[
+              {
+                label: 'Files',
+                count: files.length
+              },
+              {
+                label: 'Links',
+                count: links.length
+              }
+            ]}
+            selectedIndex={selectedTab}
+            onSelect={setSelectedTab}
+            classsName={styles.blockTabs}
+          />
+          <TableAssets
+            projectId={projectId}
+            title={tableTitle}
+            onEdit={item => {
+              if (selectedTab === 0) {
+                setShowAttachmentOptions(item)
+              } else if (selectedTab === 1) {
+                setShowAddLink(item)
+              }
+            }}
+            onRemove={item => {
+              if (selectedTab === 0) {
+                setShowDeleteFile(item)
+              } else if (selectedTab === 1) {
+                setShowDeleteLink(item)
+              }
+            }}
+            datas={tableDatas}
+            isLink={isLink}
+            members={projectDetail.members}
+            loggedInUser={loggedInUser}
+            isAdmin={isAdmin}
+          />
+        </>
+      )}
+
+      {showAttachmentOptions && (
+        <ModalAttachmentOptions
+          theme={theme}
+          onCancel={() => setShowAttachmentOptions(false)}
+          attachment={
+            showAttachmentOptions === true ? null : showAttachmentOptions
+          }
+          members={projectDetail.members}
+          projectId={projectId}
+          loggedInUser={loggedInUser}
+          newAttachments={pendingUploadFiles}
+        />
+      )}
+      {showAddLink && (
+        <ModalAddLink
+          theme={theme}
+          onCancel={() => setShowAddLink(false)}
+          projectId={projectId}
+          link={showAddLink === true ? null : showAddLink}
+        />
+      )}
+      {showDeleteFile && (
+        <ConfirmationModal
+          title={`You're about to delete "${showDeleteFile.title}"`}
+          message="Your team might need this file, are you sure you want to delete it? This action can't be undone."
+          onCancel={() => setShowDeleteFile(null)}
+          theme={theme}
+          confirmText='Delete file'
+          confirmType='danger'
+          cancelType='info'
+          isProcessing={isProcessing}
+          onConfirm={() => {
+            setIsProcessing(true)
+            removeProjectAttachmentApi(projectId, showDeleteFile.id)
+              .then(() => {
+                toastr.success('Success', 'Removed file successfully.')
+                removeAttachment(showDeleteFile.id)
+                setIsProcessing(false)
+                setShowDeleteFile(null)
+              })
+              .catch(e => {
+                setIsProcessing(false)
+                const errorMessage = _.get(
+                  e,
+                  'response.data.message',
+                  'Failed to remove file.'
+                )
+                toastr.error('Error', errorMessage)
+              })
+          }}
+        />
+      )}
+      {showDeleteLink && (
+        <ConfirmationModal
+          title="You're about to delete a link"
+          message="Your team might need this link, are you sure you want to delete it? This action can't be undone."
+          onCancel={() => setShowDeleteLink(null)}
+          onConfirm={() => {
+            setIsProcessing(true)
+            removeProjectAttachmentApi(projectId, showDeleteLink.id)
+              .then(() => {
+                toastr.success('Success', 'Removed link successfully.')
+                removeAttachment(showDeleteLink.id)
+                setIsProcessing(false)
+                setShowDeleteLink(null)
+              })
+              .catch(e => {
+                setIsProcessing(false)
+                const errorMessage = _.get(
+                  e,
+                  'response.data.message',
+                  'Failed to remove link.'
+                )
+                toastr.error('Error', errorMessage)
+              })
+          }}
+          theme={theme}
+          confirmText='Delete link'
+          confirmType='danger'
+          cancelType='info'
+          isProcessing={isProcessing}
+        />
+      )}
+    </div>
+  )
+}
+
+ProjectAssets.propTypes = {
+  projectId: PropTypes.string.isRequired,
+  token: PropTypes.string,
+  loadOnlyProjectInfo: PropTypes.func.isRequired,
+  removeAttachment: PropTypes.func.isRequired,
+  projectDetail: PropTypes.object,
+  isLoading: PropTypes.bool,
+  loggedInUser: PropTypes.object
+}
+
+const mapStateToProps = ({ projects, auth }) => {
+  return {
+    projectDetail: projects.projectDetail,
+    isLoading: projects.isLoading,
+    loggedInUser: auth.user,
+    token: auth.token
+  }
+}
+
+const mapDispatchToProps = {
+  loadOnlyProjectInfo,
+  removeAttachment
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ProjectAssets)
diff --git a/src/containers/ProjectAssets/styles.module.scss b/src/containers/ProjectAssets/styles.module.scss
new file mode 100644
index 00000000..6acf18b7
--- /dev/null
+++ b/src/containers/ProjectAssets/styles.module.scss
@@ -0,0 +1,65 @@
+@import '../../styles/includes';
+
+.container {
+  padding: 30px 20px;
+}
+
+.btn {
+  height: 40px;
+
+  span,
+  button {
+    padding: 0 20px;
+    white-space: nowrap;
+  }
+}
+
+.blockHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 29px;
+  color: $challenges-title;
+}
+
+.modalContainer {
+  padding: 0;
+  position: fixed;
+  overflow: auto;
+  z-index: 10000;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: auto;
+  max-width: none;
+  transform: none;
+  background: transparent;
+  color: $text-color;
+  opacity: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @include xs-to-lg {
+    max-width: 100vw;
+  }
+}
+
+.btns {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.blockTabs {
+  margin-top: 20px;
+  margin-bottom: 30px;
+}
diff --git a/src/containers/ProjectEditor/ProjectEditor.module.scss b/src/containers/ProjectEditor/ProjectEditor.module.scss
new file mode 100644
index 00000000..1a9587c2
--- /dev/null
+++ b/src/containers/ProjectEditor/ProjectEditor.module.scss
@@ -0,0 +1,261 @@
+@import "../../styles/includes";
+
+.wrapper {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 30px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+@-moz-document url-prefix() {
+  .wrapper {
+    padding-bottom: 30px;
+  }
+}
+
+.textCenter {
+  text-align: center;
+}
+
+.topContainer {
+  margin-top: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+}
+
+.leftContainer {
+  display: flex;
+  align-items: center;
+  .title {
+    text-align: left;
+  }
+}
+
+.actionButtons {
+  top: 30px;
+  display: flex;
+  gap: 20px;
+
+  a,button {
+    height: 40px;
+  }
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 29px;
+  margin-right: 5px;
+  color: $challenges-title;
+  text-align: center;
+}
+
+.textRequired {
+  @include roboto-medium();
+
+  color: $tc-red;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 14px;
+  align-self: flex-end;
+  margin-top: 30px;
+  margin-right: 30px;
+  margin-bottom: 2px;
+}
+
+.container {
+  width: 100%;
+
+
+
+  .formContainer {
+    box-sizing: border-box;
+    margin: 0 30px 30px 30px;
+
+    @include form-container-default();
+
+    form {
+      width: 100%;
+    }
+
+    .group {
+        @include form-container-default();
+        @include form-container-common();
+        background-color: $white;
+        width: 100%;
+        border-radius: 6px;
+        box-sizing: border-box;
+  
+        .row {
+          margin-bottom: 0;
+  
+          &.topRow {
+            flex-wrap: wrap;
+          }
+  
+          .col1 {
+            display: flex;
+            flex-grow: 1;
+            align-items: center;
+            max-width: 0;
+            min-width: 0;
+            margin-right: 0;
+            width: auto;
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+            padding-top: 0 !important;
+  
+            span {
+              color: $tc-red;
+            }
+          }
+  
+          .col2 {
+            width: auto;
+  
+            div {
+              margin-right: 13px;
+            }
+  
+            div:last-child {
+              margin-right: 0;
+            }
+  
+            .subGroup {
+              width: 100%;
+              display: flex;
+              flex-direction: column;
+  
+              .subRow {
+                display: flex;
+                align-items: center;
+                margin-bottom: 18px;
+              }
+              .subRow:last-of-type {
+                margin-bottom: 0;
+              }
+            }
+          }
+  
+          .tcCheckbox {
+            @include tc-checkbox;
+  
+            .tc-checkbox-label {
+              @include roboto-light();
+  
+              line-height: 17px;
+              font-weight: 300;
+              margin-left: 21px;
+              user-select: none;
+              cursor: pointer;
+              width: 195px;
+              font-size: 14px;
+              color: #3d3d3d;
+            }
+  
+            height: 18px;
+            width: 210px;
+            margin: 0;
+            padding: 0;
+            vertical-align: bottom;
+            position: relative;
+            display: inline-block;
+  
+            input[type=checkbox] {
+              display: none;
+            }
+  
+            label {
+              @include roboto-light();
+  
+              line-height: 17px;
+              font-weight: 300;
+              cursor: pointer;
+              position: absolute;
+              display: inline-block;
+              width: 14px;
+              height: 14px;
+              top: 0;
+              left: 0;
+              border: none;
+              box-shadow: none;
+              background: $tc-gray-30;
+              transition: all 0.15s ease-in-out;
+  
+              &::after {
+                opacity: 0;
+                content: '';
+                position: absolute;
+                width: 9px;
+                height: 5px;
+                background: transparent;
+                top: 2px;
+                left: 2px;
+                border-top: none;
+                border-right: none;
+                transform: rotate(-45deg);
+                transition: all 0.15s ease-in-out;
+              }
+  
+              &:hover::after {
+                opacity: 0.3;
+              }
+  
+              div {
+                margin-left: 24px;
+                width: 300px;
+              }
+            }
+  
+            input[type=checkbox]:checked ~ label {
+              background: $tc-blue-20;
+            }
+  
+            input[type=checkbox]:checked + label::after {
+              border-color: $white;
+            }
+          }
+  
+          .col {
+            margin-right: 20px;
+            display: flex;
+            align-items: center;
+  
+            .fieldTitle {
+              @include roboto-bold();
+  
+              font-size: 16px;
+              line-height: 19px;
+              font-weight: 500;
+              color: $tc-gray-80;
+              margin-right: 10px;
+            }
+          }
+        }
+  
+        .templateLink {
+          text-align: center;
+          font-size: 14px;
+          line-height: 29px;
+          font-weight: 400;
+  
+          a {
+            font-weight: 400;
+            font-size: 12px;
+          }
+        }
+      }
+      .group:last-of-type {
+        margin-bottom: 0;
+      }
+  }
+}
+
+.btnOutline {
+  padding: 0 40px;
+  white-space: nowrap;
+}
\ No newline at end of file
diff --git a/src/containers/ProjectEditor/index.js b/src/containers/ProjectEditor/index.js
new file mode 100644
index 00000000..653b02b5
--- /dev/null
+++ b/src/containers/ProjectEditor/index.js
@@ -0,0 +1,175 @@
+import React, { Component } from 'react'
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import { Helmet } from 'react-helmet'
+import cn from 'classnames'
+import { PrimaryButton } from '../../components/Buttons'
+import styles from './ProjectEditor.module.scss'
+import ProjectForm from '../../components/ProjectForm'
+import { withRouter } from 'react-router-dom'
+import { connect } from 'react-redux'
+import {
+  loadProjectTypes,
+  loadProject,
+  createProject,
+  updateProject
+} from '../../actions/projects'
+import { setActiveProject } from '../../actions/sidebar'
+import { checkAdminOrCopilot, checkAdmin } from '../../util/tc'
+import { PROJECT_ROLES } from '../../config/constants'
+import Loader from '../../components/Loader'
+
+class ProjectEditor extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      project: {}
+    }
+  }
+  // load the project types
+  componentDidMount () {
+    const { match, isEdit, loadProjectTypes } = this.props
+    loadProjectTypes()
+    if (isEdit) {
+      this.fetchProjectDetails(match)
+    }
+  }
+
+  componentDidUpdate () {
+    const { auth } = this.props
+    if (!checkAdminOrCopilot(auth.token, this.props.projectDetail)) {
+      this.props.history.push('/projects')
+    }
+  }
+
+  getProjectId (match) {
+    let projectId = _.get(match.params, 'projectId', null)
+    projectId = projectId ? parseInt(projectId) : null
+    return projectId
+  }
+
+  async fetchProjectDetails (match) {
+    let projectId = this.getProjectId(match)
+    if (projectId) {
+      await this.props.loadProject(projectId)
+    }
+  }
+
+  getMemberRole (members, userId) {
+    if (!userId) { return null }
+
+    const found = _.find(members, (m) => {
+      return m.userId === userId
+    })
+
+    return _.get(found, 'role')
+  }
+
+  checkIsCopilotOrManager (projectMembers, userId) {
+    if (projectMembers && projectMembers.length > 0) {
+      const role = this.getMemberRole(projectMembers, userId)
+      return role === PROJECT_ROLES.COPILOT || role === PROJECT_ROLES.MANAGER
+    } else {
+      return false
+    }
+  }
+
+  render () {
+    const {
+      match,
+      projectTypes,
+      createProject,
+      updateProject,
+      setActiveProject,
+      isProjectTypesLoading,
+      history,
+      isEdit,
+      isProjectLoading,
+      projectDetail
+    } = this.props
+
+    if (isProjectTypesLoading || (isEdit && isProjectLoading)) return <Loader />
+
+    const isAdmin = checkAdmin(this.props.auth.token)
+    const isCopilotOrManager = this.checkIsCopilotOrManager(_.get(projectDetail, 'members', []), _.get(this.props.auth, 'user.userId', null))
+    const canManage = isAdmin || isCopilotOrManager
+
+    const projectId = this.getProjectId(match)
+    return (
+      <div className={styles.wrapper}>
+        <Helmet title={'Create Project'} />
+        <div className={styles.topContainer}>
+          <div className={styles.leftContainer}>
+            <div className={styles.title}>
+              {isEdit ? 'Edit Project' : 'Create Project'}
+            </div>
+          </div>
+          <div className={cn(styles.actionButtons, styles.actionButtonsRight)}>
+            <PrimaryButton
+              text={'Back'}
+              type={'info'}
+              submit
+              link={isEdit ? `/projects/${projectId}/challenges` : `/projects`}
+            />
+          </div>
+        </div>
+        <div className={styles.textRequired}>* Required</div>
+        <div className={styles.container}>
+          <div className={styles.formContainer}>
+            <ProjectForm
+              projectTypes={projectTypes}
+              createProject={createProject}
+              updateProject={updateProject}
+              setActiveProject={setActiveProject}
+              history={history}
+              isEdit={isEdit}
+              canManage={canManage}
+              projectDetail={projectDetail}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+ProjectEditor.propTypes = {
+  match: PropTypes.shape({
+    path: PropTypes.string,
+    params: PropTypes.shape({
+      projectId: PropTypes.string
+    })
+  }).isRequired,
+  projectTypes: PropTypes.arrayOf(PropTypes.object),
+  loadProjectTypes: PropTypes.func,
+  createProject: PropTypes.func,
+  updateProject: PropTypes.func,
+  isProjectTypesLoading: PropTypes.bool,
+  auth: PropTypes.object,
+  history: PropTypes.object,
+  setActiveProject: PropTypes.func.isRequired,
+  isEdit: PropTypes.bool,
+  loadProject: PropTypes.func,
+  isProjectLoading: PropTypes.bool,
+  projectDetail: PropTypes.object
+}
+
+const mapStateToProps = (state) => ({
+  projectTypes: state.projects.projectTypes,
+  auth: state.auth,
+  isProjectTypesLoading: state.projects.isProjectTypesLoading,
+  projectDetail: state.projects.projectDetail,
+  isProjectLoading: state.projects.isLoading
+})
+
+const mapDispatchToProps = {
+  loadProjectTypes,
+  loadProject,
+  createProject,
+  updateProject,
+  setActiveProject
+}
+
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(ProjectEditor)
+)
diff --git a/src/containers/TaaSList/index.js b/src/containers/TaaSList/index.js
new file mode 100644
index 00000000..67610028
--- /dev/null
+++ b/src/containers/TaaSList/index.js
@@ -0,0 +1,77 @@
+import React from 'react'
+import { withRouter, Link } from 'react-router-dom'
+import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
+import TaaSProjectCard from '../../components/TaaSProjectCard'
+import Loader from '../../components/Loader'
+import cn from 'classnames'
+import { checkAdmin, checkCopilot } from '../../util/tc'
+import { PrimaryButton } from '../../components/Buttons'
+
+import styles from './styles.module.scss'
+
+const TaaSList = ({ taasProjects, auth, isLoading }) => {
+  const isCopilot = checkCopilot(auth.token)
+  const isAdmin = checkAdmin(auth.token)
+  const canEdit = isCopilot || isAdmin
+
+  if (isLoading && taasProjects.length === 0) {
+    return (
+      <div className={styles.container}>
+        <Loader />
+      </div>
+    )
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.searchHeader}>
+        <div>No project selected. Select one below</div>
+        {(isCopilot || isAdmin) && (
+          <Link className={styles.buttonCreateNewTaaS} to='/taas/new'>
+            <PrimaryButton
+              text='Create TaaS Project'
+              type='info'
+              submit
+            />
+          </Link>
+        )}
+      </div>
+      {taasProjects.length > 0 ? (
+        <ul>
+          {taasProjects.map(p => (
+            <li key={p.id} className={cn({ [styles.canEdit]: canEdit })}>
+              <TaaSProjectCard
+                projectName={p.name}
+                projectId={p.id}
+                canEdit={canEdit}
+              />
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <span>No TaaS projects available yet</span>
+      )}
+    </div>
+  )
+}
+
+TaaSList.propTypes = {
+  taasProjects: PropTypes.array,
+  auth: PropTypes.object.isRequired,
+  isLoading: PropTypes.bool.isRequired
+}
+
+const mapStateToProps = ({ sidebar, auth }) => {
+  return {
+    taasProjects: sidebar.taasProjects,
+    isLoading: sidebar.isLoading,
+    auth
+  }
+}
+
+const mapDispatchToProps = {}
+
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(TaaSList)
+)
diff --git a/src/containers/TaaSList/styles.module.scss b/src/containers/TaaSList/styles.module.scss
new file mode 100644
index 00000000..acd9f703
--- /dev/null
+++ b/src/containers/TaaSList/styles.module.scss
@@ -0,0 +1,45 @@
+@import '../../styles/includes';
+
+.container {
+  padding: 20px 20px 0px;
+
+  ul {
+    background-color: $lighter-gray;
+    list-style: none;
+    width: 100%;
+    padding: 0;
+    margin-top: 0;
+    border-radius: 3px;
+    flex: 1;
+  }
+
+  div,
+  a {
+    color: $dark-gray;
+    text-decoration: none;
+  }
+}
+
+.searchHeader {
+  display: flex;
+  gap: 5px;
+  padding-bottom: 15px;
+  justify-content: space-between;
+}
+
+.canEdit {
+  cursor: pointer;
+}
+
+
+.buttonCreateNewTaaS {
+  min-width: 169px;
+  height: 40px;
+  text-decoration: none;
+  
+  :global {
+    span {
+      margin: 0 20px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/containers/TaaSProjectForm/index.js b/src/containers/TaaSProjectForm/index.js
new file mode 100644
index 00000000..c583e8e0
--- /dev/null
+++ b/src/containers/TaaSProjectForm/index.js
@@ -0,0 +1,491 @@
+import React, { useState, useMemo, useEffect, useCallback } from 'react'
+import { useFormik, FormikProvider, FieldArray } from 'formik'
+import { withRouter } from 'react-router-dom'
+import { connect } from 'react-redux'
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import ReactSVG from 'react-svg'
+import cn from 'classnames'
+import { toastr } from 'react-redux-toastr'
+
+import FieldLabelDynamic from '../../components/FieldLabelDynamic'
+import Loader from '../../components/Loader'
+import FieldSkillsBasic from '../../components/FieldSkillsBasic'
+import FieldInput from '../../components/FieldInput'
+import FieldDescription from '../../components/FieldDescription'
+import { OutlineButton } from '../../components/Buttons'
+import { setActiveProject } from '../../actions/sidebar'
+import { JOB_ROLE_OPTIONS, JOB_WORKLOAD_OPTIONS } from '../../config/constants'
+import { taaSProjectFormValidationSchema } from '../../util/validation'
+import { createProjectApi } from '../../services/projects'
+import { loadOnlyProjectInfo, updateProject } from '../../actions/projects'
+import ProjectStatus from '../../components/ChallengesComponent/ProjectStatus'
+
+import styles from './styles.module.scss'
+import Select from '../../components/Select'
+
+const assets = require.context('../../assets/images', false, /svg/)
+const iconPlus = './plus-gray.svg'
+const iconX = './x-gray.svg'
+
+const defaultJob = {
+  title: '',
+  role: JOB_ROLE_OPTIONS[0],
+  workLoad: JOB_WORKLOAD_OPTIONS[0],
+  skills: [],
+  description: '',
+  people: 0,
+  duration: 0
+}
+
+const TaaSProjectForm = ({
+  setActiveProject,
+  history,
+  projectId,
+  loadOnlyProjectInfo,
+  projectDetail,
+  isUpdating,
+  updateProject
+}) => {
+  const [isLoading, setIsLoading] = useState(false)
+  const isCreateNewProject = useMemo(() => !projectId, [projectId])
+  const canShowEditForm = useMemo(() => {
+    if (projectId) {
+      return projectId === `${projectDetail.id}`
+    }
+    return true
+  }, [projectDetail, projectId])
+  const [initValues, setInitValues] = useState({
+    name: '',
+    jobs: []
+  })
+
+  const formik = useFormik({
+    initialValues: initValues,
+    enableReinitialize: true,
+    validationSchema: taaSProjectFormValidationSchema,
+    onSubmit: values => {
+      const jobs = values.jobs.map(item => ({
+        ...item,
+        people: `${item.people}`,
+        duration: `${item.duration}`,
+        role: {
+          value: item.role.value,
+          title: item.role.label
+        },
+        workLoad: {
+          value: item.workLoad.value,
+          title: item.workLoad.label
+        }
+      }))
+      if (isCreateNewProject) {
+        const createFormData = {
+          details: {
+            intakePurpose: 'internal-project',
+            utm: {
+              code: ''
+            },
+            taasDefinition: {
+              taasJobs: jobs,
+              kickOffTime: '',
+              oppurtunityDetails: {
+                customerName: '',
+                staffingModel: '',
+                talentLocation: '',
+                workingTimezone: '',
+                requestedStartDate: ''
+              },
+              otherRequirements: [],
+              otherRequirementBrief: '',
+              hiringManager: ''
+            }
+          },
+          type: 'talent-as-a-service',
+          templateId: 250,
+          name: values.name,
+          version: 'v4',
+          estimation: [],
+          attachments: []
+        }
+        setIsLoading(true)
+        createProjectApi(createFormData)
+          .then(result => {
+            setIsLoading(false)
+            history.push(`/taas/${result.id}/edit`)
+            setActiveProject(parseInt(result.id))
+          })
+          .catch(e => {
+            setIsLoading(false)
+            const errorMessage = _.get(
+              e,
+              'response.data.message',
+              'Failed to create project'
+            )
+            toastr.error('Error', errorMessage)
+          })
+      } else if (formik.dirty) {
+        const updateFormData = {
+          details: {
+            taasDefinition: {
+              taasJobs: jobs
+            }
+          },
+          name: values.name
+        }
+        updateProject(projectId, updateFormData)
+      }
+    }
+  })
+
+  const updateFormField = useCallback(
+    (fieldName, newValue) => {
+      formik.setFieldTouched(fieldName)
+      formik.setFieldValue(fieldName, newValue)
+    },
+    [formik]
+  )
+
+  useEffect(() => {
+    const taasJobs = _.get(projectDetail, 'details.taasDefinition.taasJobs')
+    if (
+      projectDetail &&
+      projectId &&
+      projectId === `${projectDetail.id}` &&
+      taasJobs
+    ) {
+      setInitValues({
+        name: projectDetail.name,
+        jobs: _.cloneDeep(taasJobs).map(item => ({
+          jobId: item.jobId,
+          title: item.title,
+          people: parseInt(item.people),
+          duration: parseInt(item.duration),
+          description: item.description,
+          role: {
+            value: item.role.value,
+            label: item.role.title
+          },
+          workLoad: {
+            value: (item.workLoad || {}).value,
+            label: (item.workLoad || {}).title
+          },
+          skills: item.skills
+        }))
+      })
+    }
+  }, [projectDetail, projectId])
+
+  useEffect(() => {
+    if (projectId) {
+      loadOnlyProjectInfo(projectId)
+    } else {
+      setInitValues({
+        name: '',
+        jobs: [_.cloneDeep(defaultJob)]
+      })
+    }
+  }, [projectId])
+
+  const getFormError = useCallback(
+    fieldName => {
+      return _.get(formik.touched, fieldName) ? _.get(formik.errors, fieldName) : ''
+    },
+    [formik]
+  )
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.topContainer}>
+        <div className={styles.leftContainer}>
+          <div className={styles.title}>
+            {isCreateNewProject ? 'Create TaaS Project' : 'Edit TaaS Project'}
+            {projectDetail && projectDetail.status && (
+              <ProjectStatus className={styles.status} status={projectDetail.status} />
+            )}
+          </div>
+        </div>
+      </div>
+      <div className={styles.container}>
+        <div className={styles.formContainer}>
+          {canShowEditForm ? (
+            <>
+              <div className={styles.textRequired}>* Required</div>
+              <FormikProvider value={formik}>
+                <form onSubmit={formik.handleSubmit}>
+                  <div
+                    className={cn(
+                      styles.newFormContainer,
+                      styles.blockFormColumn
+                    )}
+                  >
+                    <FieldLabelDynamic
+                      direction='vertical'
+                      title='Title of your project'
+                      errorMsg={getFormError('name')}
+                      isRequired
+                    >
+                      <FieldInput
+                        value={formik.values.name || ''}
+                        onChangeValue={newValue => {
+                          updateFormField('name', newValue)
+                        }}
+                      />
+                    </FieldLabelDynamic>
+                    <FieldArray
+                      name='jobs'
+                      render={arrayHelpers => (
+                        <FieldLabelDynamic
+                          direction='vertical'
+                          title='Jobs'
+                          isRequired
+                          info='If you have multiple open positions with different skills engagement duration requirements, click the + sign to the right and enter each role individually'
+                        >
+                          <div
+                            className={cn(
+                              styles.blockJobsContainer,
+                              styles.blockFormColumn
+                            )}
+                          >
+                            {formik.values.jobs.map((job, index) => (
+                              <div
+                                key={index}
+                                className={cn(
+                                  styles.blockJobContainer,
+                                  styles.blockFormColumn
+                                )}
+                              >
+                                <div className={styles.blockFormRow}>
+                                  <FieldLabelDynamic
+                                    title={`JOB ${index + 1}`}
+                                    errorMsg={getFormError(
+                                      `jobs[${index}].title`
+                                    )}
+                                    isRequired
+                                    className={styles.blockField}
+                                  >
+                                    <FieldInput
+                                      value={job.title}
+                                      onChangeValue={newValue => {
+                                        updateFormField(
+                                          `jobs[${index}].title`,
+                                          newValue
+                                        )
+                                      }}
+                                    />
+                                  </FieldLabelDynamic>
+
+                                  <div className={styles.btnsAdd}>
+                                    {formik.values.jobs.length < 10 && (
+                                      <button
+                                        type='button'
+                                        className={styles.btnAdd}
+                                        onClick={() =>
+                                          arrayHelpers.push(
+                                            _.cloneDeep(defaultJob)
+                                          )
+                                        }
+                                      >
+                                        <ReactSVG
+                                          className={styles.iconPlus}
+                                          path={assets(iconPlus)}
+                                        />
+                                      </button>
+                                    )}
+                                    {index !== 0 && (
+                                      <button
+                                        type='button'
+                                        className={styles.btnAdd}
+                                        onClick={() => arrayHelpers.remove(index)}
+                                      >
+                                        <ReactSVG
+                                          className={styles.iconPlus}
+                                          path={assets(iconX)}
+                                        />
+                                      </button>
+                                    )}
+                                  </div>
+                                </div>
+
+                                <div className={styles.blockFormRow}>
+                                  <FieldLabelDynamic
+                                    direction='vertical'
+                                    title='NUMBER OF PEOPLE'
+                                    errorMsg={getFormError(
+                                      `jobs[${index}].people`
+                                    )}
+                                    isRequired
+                                    className={styles.blockField}
+                                  >
+                                    <FieldInput
+                                      value={job.people}
+                                      onChangeValue={newValue => {
+                                        updateFormField(
+                                          `jobs[${index}].people`,
+                                          newValue
+                                        )
+                                      }}
+                                      type='number'
+                                    />
+                                  </FieldLabelDynamic>
+
+                                  <FieldLabelDynamic
+                                    direction='vertical'
+                                    title='ROLE'
+                                    errorMsg={getFormError(`jobs[${index}].role`)}
+                                    isRequired
+                                    className={styles.blockField}
+                                  >
+                                    <Select
+                                      options={JOB_ROLE_OPTIONS}
+                                      placeholder='Select Role'
+                                      value={job.role}
+                                      isClearable={false}
+                                      onChange={newValue => {
+                                        updateFormField(
+                                          `jobs[${index}].role`,
+                                          newValue
+                                        )
+                                      }}
+                                    />
+                                  </FieldLabelDynamic>
+                                </div>
+
+                                <div className={styles.blockFormRow}>
+                                  <FieldLabelDynamic
+                                    direction='vertical'
+                                    title='DURATION (WEEKS)'
+                                    errorMsg={getFormError(
+                                      `jobs[${index}].duration`
+                                    )}
+                                    isRequired
+                                    className={styles.blockField}
+                                  >
+                                    <FieldInput
+                                      value={job.duration}
+                                      onChangeValue={newValue => {
+                                        updateFormField(
+                                          `jobs[${index}].duration`,
+                                          newValue
+                                        )
+                                      }}
+                                      type='number'
+                                    />
+                                  </FieldLabelDynamic>
+
+                                  <FieldLabelDynamic
+                                    direction='vertical'
+                                    title='WORKLOAD'
+                                    errorMsg={getFormError(
+                                      `jobs[${index}].workLoad`
+                                    )}
+                                    isRequired
+                                    className={styles.blockField}
+                                  >
+                                    <Select
+                                      options={JOB_WORKLOAD_OPTIONS}
+                                      placeholder='Select Workload'
+                                      value={job.workLoad}
+                                      isClearable={false}
+                                      onChange={newValue => {
+                                        updateFormField(
+                                          `jobs[${index}].workLoad`,
+                                          newValue
+                                        )
+                                      }}
+                                    />
+                                  </FieldLabelDynamic>
+                                </div>
+
+                                <FieldLabelDynamic
+                                  direction='vertical'
+                                  title='JOB DESCRIPTION'
+                                  errorMsg={getFormError(
+                                    `jobs[${index}].description`
+                                  )}
+                                  isRequired
+                                >
+                                  <FieldDescription
+                                    value={job.description}
+                                    onChange={newValue => {
+                                      updateFormField(
+                                        `jobs[${index}].description`,
+                                        newValue
+                                      )
+                                    }}
+                                    placeholder='Job Description'
+                                  />
+                                </FieldLabelDynamic>
+
+                                <FieldLabelDynamic
+                                  direction='vertical'
+                                  title='SKILLS'
+                                  errorMsg={getFormError(`jobs[${index}].skills`)}
+                                  isRequired
+                                >
+                                  <FieldSkillsBasic
+                                    value={job.skills}
+                                    onChangeValue={newValue => {
+                                      updateFormField(
+                                        `jobs[${index}].skills`,
+                                        newValue
+                                      )
+                                    }}
+                                    placeholder='Start typing a skill then select from the list'
+                                  />
+                                </FieldLabelDynamic>
+                              </div>
+                            ))}
+                          </div>
+                        </FieldLabelDynamic>
+                      )}
+                    />
+                  </div>
+
+                  <div className={styles.buttonContainer}>
+                    <div className={styles.button}>
+                      <OutlineButton
+                        text={isCreateNewProject ? 'Create' : 'Update'}
+                        type='success'
+                        submit
+                        disabled={isLoading || isUpdating}
+                      />
+                    </div>
+                  </div>
+                </form>
+              </FormikProvider>
+            </>
+          ) : (
+            <Loader />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+TaaSProjectForm.propTypes = {
+  projectDetail: PropTypes.object,
+  loadOnlyProjectInfo: PropTypes.func.isRequired,
+  updateProject: PropTypes.func.isRequired,
+  setActiveProject: PropTypes.func.isRequired,
+  history: PropTypes.object.isRequired,
+  projectId: PropTypes.string,
+  isUpdating: PropTypes.bool.isRequired
+}
+
+const mapStateToProps = ({ projects }) => {
+  return {
+    projectDetail: projects.projectDetail,
+    isUpdating: projects.isUpdating
+  }
+}
+
+const mapDispatchToProps = {
+  loadOnlyProjectInfo,
+  setActiveProject,
+  updateProject
+}
+
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(TaaSProjectForm)
+)
diff --git a/src/containers/TaaSProjectForm/styles.module.scss b/src/containers/TaaSProjectForm/styles.module.scss
new file mode 100644
index 00000000..ae76582c
--- /dev/null
+++ b/src/containers/TaaSProjectForm/styles.module.scss
@@ -0,0 +1,164 @@
+@import '../../styles/includes';
+
+.wrapper {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 30px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+@-moz-document url-prefix() {
+  .wrapper {
+    padding-bottom: 30px;
+  }
+}
+
+.status {
+  margin-left: 8px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16px;
+  background-color: #f0f0f0;
+  padding: 4px 8px;
+  border-radius: 25px;
+  color: $challenges-title;
+}
+
+.topContainer {
+  margin: 15px 20px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.leftContainer {
+  display: flex;
+  align-items: center;
+  .title {
+    text-align: left;
+  }
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 29px;
+  margin-right: 5px;
+  color: $challenges-title;
+  text-align: center;
+
+  display: flex;
+  gap: 5px;
+}
+
+.textRequired {
+  @include roboto-medium();
+
+  color: $tc-red;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 14px;
+  align-self: flex-end;
+  margin-bottom: 2px;
+}
+
+.container {
+  width: 100%;
+
+  .formContainer {
+    box-sizing: border-box;
+    margin: 15px 20px 30px 20px;
+
+    @include form-container-mobile();
+
+    form {
+      width: 100%;
+    }
+  }
+}
+
+.newFormContainer {
+  @include form-container-common();
+
+  padding: 30px;
+}
+
+.buttonContainer {
+  display: flex;
+  margin: 0px 30px;
+  flex-direction: row;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  gap: 30px;
+
+  .button {
+    height: 40px;
+
+    span {
+      padding: 0 20px;
+    }
+  }
+}
+
+.blockJobsContainer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.blockJobContainer {
+  border: 1px solid $lighter-gray;
+  padding: 30px;
+  width: 100%;
+}
+
+.blockFormColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.blockFormRow {
+  display: flex;
+  gap: 20px;
+}
+
+.iconPlus {
+  width: 16px;
+  height: 10px;
+
+  :global {
+    div {
+      display: flex;
+    }
+    div,
+    svg {
+      width: 16px;
+      height: 10px;
+      fill: grey;
+    }
+  }
+}
+
+.btnsAdd {
+  display: flex;
+  gap: 8px;
+  margin-top: 7px;
+}
+
+.btnAdd {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 23px;
+  height: 23px;
+  border: none;
+  background-color: $lighter-gray;
+  border-radius: 11px;
+}
+
+.blockField {
+  flex: 1;
+}
diff --git a/src/containers/Tab/index.js b/src/containers/Tab/index.js
index af091a3f..d9845f37 100644
--- a/src/containers/Tab/index.js
+++ b/src/containers/Tab/index.js
@@ -5,6 +5,7 @@ import { connect } from 'react-redux'
 import Tab from '../../components/Tab'
 import {
   loadProjects,
+  loadTaasProjects,
   setActiveProject,
   resetSidebarActiveParams,
   unloadProjects
@@ -36,7 +37,7 @@ class TabContainer extends Component {
       // do not fetch projects for users page
       history.location.pathname !== '/users'
     ) {
-      this.props.loadProjects()
+      this.loadProjects(this.props)
     }
 
     if (projectId && activeProjectId < 0) {
@@ -55,6 +56,8 @@ class TabContainer extends Component {
       this.setState({ currentTab: 3 })
     } else if (nextProps.history.location.pathname === '/self-service') {
       this.setState({ currentTab: 4 })
+    } else if (nextProps.history.location.pathname === '/taas') {
+      this.setState({ currentTab: 5 })
     } else {
       this.setState({ currentTab: 0 })
     }
@@ -87,7 +90,17 @@ class TabContainer extends Component {
     }
 
     // now it's okay to load the projects
-    this.props.loadProjects()
+    this.loadProjects(nextProps)
+  }
+
+  loadProjects (props) {
+    const { history } = props
+
+    if (history.location.pathname === '/taas') {
+      this.props.loadTaasProjects()
+    } else {
+      this.props.loadProjects()
+    }
   }
 
   onTabChange (tab) {
@@ -97,6 +110,7 @@ class TabContainer extends Component {
       this.setState({ currentTab: 1 })
     } else if (tab === 2) {
       history.push('/projects')
+      this.props.unloadProjects()
       this.setState({ currentTab: 2 })
     } else if (tab === 3) {
       history.push('/users')
@@ -104,6 +118,10 @@ class TabContainer extends Component {
     } else if (tab === 4) {
       history.push('/self-service')
       this.setState({ currentTab: 4 })
+    } else if (tab === 5) {
+      history.push('/taas')
+      this.props.unloadProjects()
+      this.setState({ currentTab: 5 })
     }
 
     resetSidebarActiveParams()
@@ -121,6 +139,7 @@ TabContainer.propTypes = {
   isLoading: PropTypes.bool,
   isLoadProjectsSuccess: PropTypes.bool,
   loadProjects: PropTypes.func,
+  loadTaasProjects: PropTypes.func,
   unloadProjects: PropTypes.func,
   activeProjectId: PropTypes.number,
   history: PropTypes.any.isRequired,
@@ -136,6 +155,7 @@ const mapStateToProps = ({ sidebar }) => ({
 
 const mapDispatchToProps = {
   loadProjects,
+  loadTaasProjects,
   unloadProjects,
   setActiveProject,
   resetSidebarActiveParams
diff --git a/src/reducers/challenges.js b/src/reducers/challenges.js
index 6fb678f5..13f0a6bb 100644
--- a/src/reducers/challenges.js
+++ b/src/reducers/challenges.js
@@ -2,7 +2,7 @@
  * Reducer to process actions related to challenge list
  */
 import _ from 'lodash'
-import { toastr } from 'react-redux-toastr'
+import { toastSuccess, toastFailure } from '../util/toaster'
 import {
   LOAD_CHALLENGE_DETAILS_FAILURE,
   LOAD_CHALLENGE_DETAILS_PENDING,
@@ -61,18 +61,6 @@ const initialState = {
   projectId: -1
 }
 
-function toastrFailure (title, message) {
-  setImmediate(() => {
-    toastr.error(title, message)
-  })
-}
-
-function toastrSuccess (title, message) {
-  setImmediate(() => {
-    toastr.success(title, message)
-  })
-}
-
 export default function (state = initialState, action) {
   switch (action.type) {
     case LOAD_CHALLENGES_SUCCESS:
@@ -189,7 +177,7 @@ export default function (state = initialState, action) {
     case DELETE_CHALLENGE_SUCCESS: {
       const deletedChallengeDetails = action.challengeDetails.data
       const updatedChallenges = state.challenges.filter((challenge) => challenge.id !== deletedChallengeDetails.id)
-      toastrSuccess('Success', `Challenge deleted successfully.`)
+      toastSuccess('Success', `Challenge deleted successfully.`)
       return {
         ...state,
         challenges: updatedChallenges
@@ -300,7 +288,7 @@ export default function (state = initialState, action) {
       return { ...state, attachments }
     }
     case CREATE_ATTACHMENT_FAILURE: {
-      toastrFailure('Upload failure', `Failed to upload ${action.file.name}`)
+      toastFailure('Upload failure', `Failed to upload ${action.file.name}`)
       const attachments = _.reject(state.attachments, (attachment) =>
         _.find(action.files, { url: attachment.url })
       )
@@ -326,7 +314,7 @@ export default function (state = initialState, action) {
       return { ...state, attachments }
     }
     case REMOVE_ATTACHMENT_FAILURE: {
-      toastrFailure('Removing failure', `Failed to remove attachment`)
+      toastFailure('Removing failure', `Failed to remove attachment`)
       const attachments = _.map(state.attachments, item => {
         if (item.id !== action.attachmentId) {
           return item
diff --git a/src/reducers/projects.js b/src/reducers/projects.js
index bc3d04e5..a2e9a938 100644
--- a/src/reducers/projects.js
+++ b/src/reducers/projects.js
@@ -3,6 +3,9 @@
  */
 import _ from 'lodash'
 import {
+  LOAD_PROJECT_BILLING_ACCOUNTS_PENDING,
+  LOAD_PROJECT_BILLING_ACCOUNTS_SUCCESS,
+  LOAD_PROJECT_BILLING_ACCOUNTS_FAILURE,
   LOAD_PROJECT_BILLING_ACCOUNT_PENDING,
   LOAD_PROJECT_BILLING_ACCOUNT_SUCCESS,
   LOAD_PROJECT_BILLING_ACCOUNT_FAILURE,
@@ -11,8 +14,21 @@ import {
   LOAD_PROJECT_DETAILS_SUCCESS,
   LOAD_PROJECT_PHASES_FAILURE,
   LOAD_PROJECT_PHASES_PENDING,
-  LOAD_PROJECT_PHASES_SUCCESS
+  LOAD_PROJECT_PHASES_SUCCESS,
+  LOAD_PROJECT_TYPES_FAILURE,
+  LOAD_PROJECT_TYPES_PENDING,
+  LOAD_PROJECT_TYPES_SUCCESS,
+  UPDATE_PROJECT_FAILURE,
+  UPDATE_PROJECT_PENDING,
+  UPDATE_PROJECT_SUCCESS,
+  UPDATE_PROJECT_DETAILS_FAILURE,
+  UPDATE_PROJECT_DETAILS_PENDING,
+  UPDATE_PROJECT_DETAILS_SUCCESS,
+  ADD_PROJECT_ATTACHMENT_SUCCESS,
+  UPDATE_PROJECT_ATTACHMENT_SUCCESS,
+  REMOVE_PROJECT_ATTACHMENT_SUCCESS
 } from '../config/constants'
+import { toastSuccess, toastFailure } from '../util/toaster'
 import moment from 'moment-timezone'
 
 /**
@@ -32,16 +48,39 @@ const checkBillingExpired = (active, endDate) => {
 }
 const dateFormat = 'MMM DD, YYYY'
 
+/**
+ * Builds billing account options
+ * @param {array} billingAccountObj the billing account object
+ * @returns {array} the billing account options
+ */
+const buildBillingAccountOptions = (billingAccountObj) => {
+  const billingAccountOptions = billingAccountObj.map(billingAccount => ({
+    label: `(${billingAccount.tcBillingAccountId}) ${
+      billingAccount.endDate
+        ? ' - ' + moment(billingAccount.endDate).format(dateFormat)
+        : ''
+    }`,
+    value: billingAccount.tcBillingAccountId
+  }))
+  return billingAccountOptions
+}
+
 const initialState = {
   isLoading: false,
+  isUpdating: false,
   projectDetail: {},
+  isBillingAccountsLoading: false,
+  billingAccounts: [],
   isBillingAccountExpired: false,
   isBillingAccountLoading: false,
   isBillingAccountLoadingFailed: false,
+  currentBillingAccount: null,
   billingStartDate: null,
   billingEndDate: null,
   isPhasesLoading: false,
-  phases: []
+  phases: [],
+  isProjectTypesLoading: false,
+  projectTypes: []
 }
 
 export default function (state = initialState, action) {
@@ -50,6 +89,12 @@ export default function (state = initialState, action) {
       return { ...state, isLoading: true }
     case LOAD_PROJECT_DETAILS_FAILURE: {
       const status = _.get(action, 'payload.response.status', 500)
+      const errorMessage = _.get(
+        action.payload,
+        'response.data.message',
+        'Failed to load project details'
+      )
+      toastFailure('Error', errorMessage)
       return { ...state, isLoading: false, hasProjectAccess: status !== 403 }
     }
     case LOAD_PROJECT_DETAILS_SUCCESS:
@@ -59,21 +104,80 @@ export default function (state = initialState, action) {
         hasProjectAccess: true,
         isLoading: false
       }
+    case LOAD_PROJECT_BILLING_ACCOUNTS_PENDING:
+      return {
+        ...state,
+        isBillingAccountsLoading: true,
+        billingAccounts: []
+      }
+
+    case LOAD_PROJECT_BILLING_ACCOUNTS_SUCCESS:
+      return {
+        ...state,
+        isBillingAccountsLoading: false,
+        billingAccounts: [
+          ...buildBillingAccountOptions(
+            action.payload
+          )
+        ]
+      }
+    case LOAD_PROJECT_BILLING_ACCOUNTS_FAILURE:
+      return {
+        ...state,
+        isBillingAccountsLoading: false
+      }
+    case UPDATE_PROJECT_DETAILS_PENDING:
+      return { ...state, isUpdating: true }
+    case UPDATE_PROJECT_DETAILS_FAILURE: {
+      const errorMessage = _.get(
+        action.payload,
+        'response.data.message',
+        'Failed to update project info'
+      )
+      toastFailure('Error', errorMessage)
+      return { ...state, isUpdating: false }
+    }
+    case UPDATE_PROJECT_DETAILS_SUCCESS:
+      toastSuccess('Success', 'Project updated successfully.')
+      return {
+        ...state,
+        projectDetail: {
+          ...state.projectDetail,
+          name: action.payload.name,
+          details: action.payload.details
+        },
+        hasProjectAccess: true,
+        isUpdating: false
+      }
     case LOAD_PROJECT_BILLING_ACCOUNT_PENDING:
       return {
         ...state,
         isBillingAccountLoading: true,
         isBillingAccountExpired: false,
         billingStartDate: '',
-        billingEndDate: ''
+        billingEndDate: '',
+        currentBillingAccount: null
       }
     case LOAD_PROJECT_BILLING_ACCOUNT_SUCCESS:
+      // Check if the payload is empty
+      if (!action.payload || Object.keys(action.payload).length === 0) {
+        // If empty, optionally just update the loading flag (or keep it as is):
+        return {
+          ...state,
+          isBillingAccountLoading: false,
+          isBillingAccountLoadingFailed: true
+        }
+      }
       return {
         ...state,
         isBillingAccountLoading: false,
-        isBillingAccountExpired: checkBillingExpired(action.payload.active, action.payload.endDate),
+        isBillingAccountExpired: checkBillingExpired(
+          action.payload.active,
+          action.payload.endDate
+        ),
         billingStartDate: moment(action.payload.startDate).format(dateFormat),
         billingEndDate: moment(action.payload.endDate).format(dateFormat),
+        currentBillingAccount: action.payload.tcBillingAccountId,
         isBillingAccountLoadingFailed: false
       }
     case LOAD_PROJECT_BILLING_ACCOUNT_FAILURE:
@@ -83,6 +187,7 @@ export default function (state = initialState, action) {
         isBillingAccountExpired: false,
         billingStartDate: '',
         billingEndDate: '',
+        currentBillingAccount: null,
         isBillingAccountLoadingFailed: true
       }
     case LOAD_PROJECT_PHASES_PENDING:
@@ -102,6 +207,74 @@ export default function (state = initialState, action) {
         ...state,
         isPhasesLoading: false
       }
+    case LOAD_PROJECT_TYPES_PENDING:
+      return {
+        ...state,
+        projectTypes: [],
+        isProjectTypesLoading: true
+      }
+    case LOAD_PROJECT_TYPES_SUCCESS:
+      return {
+        ...state,
+        projectTypes: action.payload,
+        isProjectTypesLoading: false
+      }
+    case LOAD_PROJECT_TYPES_FAILURE:
+      return {
+        ...state,
+        isProjectTypesLoading: false
+      }
+    case UPDATE_PROJECT_PENDING:
+      return {
+        ...state,
+        isUpdatingProject: true
+      }
+    case UPDATE_PROJECT_SUCCESS:
+      toastSuccess('Success', 'Project updated successfully.')
+      return {
+        ...state,
+        projectDetail: action.payload,
+        isUpdatingProject: false
+      }
+    case UPDATE_PROJECT_FAILURE:
+      const message = _.get(
+        action,
+        'payload.response.data.message',
+        'Failed to update project.'
+      )
+      toastFailure('Error', message)
+      return {
+        ...state,
+        isUpdatingProject: false
+      }
+    case ADD_PROJECT_ATTACHMENT_SUCCESS:
+      return {
+        ...state,
+        projectDetail: {
+          ...state.projectDetail,
+          attachments: [...(state.projectDetail.attachments || []), action.payload]
+        }
+      }
+    case UPDATE_PROJECT_ATTACHMENT_SUCCESS:
+      return {
+        ...state,
+        projectDetail: {
+          ...state.projectDetail,
+          attachments: state.projectDetail.attachments.map(item =>
+            item.id !== action.payload.id ? item : action.payload
+          )
+        }
+      }
+    case REMOVE_PROJECT_ATTACHMENT_SUCCESS:
+      return {
+        ...state,
+        projectDetail: {
+          ...state.projectDetail,
+          attachments: state.projectDetail.attachments.filter(
+            item => item.id !== action.payload
+          )
+        }
+      }
     default:
       return state
   }
diff --git a/src/reducers/sidebar.js b/src/reducers/sidebar.js
index c667f21c..be25da00 100644
--- a/src/reducers/sidebar.js
+++ b/src/reducers/sidebar.js
@@ -1,6 +1,7 @@
 /**
  * Reducer to process actions related to sidebar
  */
+import _ from 'lodash'
 import {
   SET_ACTIVE_PROJECT,
   LOAD_PROJECTS_SUCCESS,
@@ -9,11 +10,15 @@ import {
   RESET_SIDEBAR_ACTIVE_PARAMS,
   UNLOAD_PROJECTS_SUCCESS
 } from '../config/constants'
+import { toastFailure } from '../util/toaster'
 
 const initialState = {
   activeProjectId: -1,
   isLoading: false,
   projects: [],
+  taasProjects: [],
+  total: 0,
+  page: 0,
   isLoadProjectsSuccess: false
 }
 
@@ -22,13 +27,31 @@ export default function (state = initialState, action) {
     case SET_ACTIVE_PROJECT:
       return { ...state, activeProjectId: action.projectId, projects: [], isLoading: false, isLoadProjectsSuccess: false }
     case LOAD_PROJECTS_SUCCESS:
-      return { ...state, projects: action.projects, isLoading: false, isLoggedIn: true, isLoadProjectsSuccess: true }
+      return {
+        ...state,
+        projects: _.filter(action.projects, p => p.type !== 'talent-as-a-service'),
+        taasProjects: _.filter(action.projects, {
+          type: 'talent-as-a-service'
+        }),
+        total: action.total,
+        page: action.page,
+        isLoading: false,
+        isLoggedIn: true,
+        isLoadProjectsSuccess: true
+      }
     case UNLOAD_PROJECTS_SUCCESS:
-      return { ...state, projects: [], isLoading: false, isLoggedIn: true, isLoadProjectsSuccess: false }
+      return { ...state, total: 0, page: 0, projects: [], isLoading: false, isLoggedIn: true, isLoadProjectsSuccess: false }
     case LOAD_PROJECTS_PENDING:
       return { ...state, isLoading: true }
-    case LOAD_PROJECTS_FAILURE:
+    case LOAD_PROJECTS_FAILURE: {
+      const errorMessage = _.get(
+        action.payload,
+        'response.data.message',
+        'Failed to load projects'
+      )
+      toastFailure('Error', errorMessage)
       return { ...state, isLoading: false }
+    }
     case RESET_SIDEBAR_ACTIVE_PARAMS:
       return { ...state, activeProjectId: -1 }
     default:
diff --git a/src/routes.js b/src/routes.js
index 01716670..fee5af10 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -11,17 +11,27 @@ import TopBarContainer from './containers/TopbarContainer'
 import FooterContainer from './containers/FooterContainer'
 import Tab from './containers/Tab'
 import Challenges from './containers/Challenges'
+import TaaSList from './containers/TaaSList'
+import ProjectAssets from './containers/ProjectAssets'
+import TaaSProjectForm from './containers/TaaSProjectForm'
 import ChallengeEditor from './containers/ChallengeEditor'
 import { getFreshToken, decodeToken } from 'tc-auth-lib'
 import { saveToken } from './actions/auth'
 import { loadChallengeDetails } from './actions/challenges'
 import { connect } from 'react-redux'
-import { checkAllowedRoles, checkOnlyReadOnlyRoles, checkReadOnlyRoles } from './util/tc'
+import {
+  checkAllowedRoles,
+  checkOnlyReadOnlyRoles,
+  checkReadOnlyRoles,
+  checkAdmin,
+  checkCopilot
+} from './util/tc'
 import IdleTimer from 'react-idle-timer'
 import modalStyles from './styles/modal.module.scss'
 import ConfirmationModal from './components/Modal/ConfirmationModal'
 import Users from './containers/Users'
 import { isBetaMode, removeFromLocalStorage, saveToLocalStorage } from './util/localstorage'
+import ProjectEditor from './containers/ProjectEditor'
 
 const { ACCOUNTS_APP_LOGIN_URL, IDLE_TIMEOUT_MINUTES, IDLE_TIMEOUT_GRACE_MINUTES, COMMUNITY_APP_URL } = process.env
 
@@ -94,7 +104,11 @@ class Routes extends React.Component {
     getFreshToken().then((token) => {
       this.props.saveToken(token)
     }).catch((error) => {
-      console.error(error.message)
+      if (process.env.NODE_ENV === 'development') {
+        console.error(error)
+      } else {
+        console.error('An unexpected error occurred while getting auth token')
+      }
       const redirectBackToUrl = encodeURIComponent(window.location.origin + this.props.location.pathname)
       window.location = `${ACCOUNTS_APP_LOGIN_URL}?retUrl=${redirectBackToUrl}`
     })
@@ -134,6 +148,8 @@ class Routes extends React.Component {
 
     const isAllowed = checkAllowedRoles(_.get(decodeToken(this.props.token), 'roles'))
     const isReadOnly = checkReadOnlyRoles(this.props.token)
+    const isCopilot = checkCopilot(this.props.token)
+    const isAdmin = checkAdmin(this.props.token)
     const modal = (<ConfirmationModal
       theme={theme}
       title='Session Timeout'
@@ -185,6 +201,36 @@ class Routes extends React.Component {
               <FooterContainer />
             )()}
           />
+          <Route exact path='/projects/new'
+            render={() => renderApp(
+              <ProjectEditor />,
+              <TopBarContainer />,
+              <Tab />,
+              <FooterContainer />
+            )()}
+          />
+          <Route exact path='/projects/:projectId/edit'
+            render={({ match }) => renderApp(
+              <ProjectEditor isEdit projectId={_.get(match.params, 'projectId', null)} />,
+              <TopBarContainer />,
+              <Tab projectId={match.params.projectId} />,
+              <FooterContainer />
+            )()}
+          />
+          {(isCopilot || isAdmin) && (
+            <Route
+              exact
+              path='/projects/:projectId/assets'
+              render={({ match }) =>
+                renderApp(
+                  <ProjectAssets projectId={match.params.projectId} />,
+                  <TopBarContainer />,
+                  <Tab projectId={match.params.projectId} />,
+                  <FooterContainer />
+                )()
+              }
+            />
+          )}
           {
             !isReadOnly && (
               <Route exact path='/users'
@@ -205,6 +251,42 @@ class Routes extends React.Component {
               <FooterContainer />
             )()}
           />
+          <Route exact path='/taas'
+            render={() => renderApp(
+              <TaaSList />,
+              <TopBarContainer />,
+              <Tab />,
+              <FooterContainer />
+            )()}
+          />
+          {(isCopilot || isAdmin) && (
+            <Route
+              exact
+              path='/taas/new'
+              render={({ match }) =>
+                renderApp(
+                  <TaaSProjectForm />,
+                  <TopBarContainer />,
+                  <Tab />,
+                  <FooterContainer />
+                )()
+              }
+            />
+          )}
+          {(isCopilot || isAdmin) && (
+            <Route
+              exact
+              path='/taas/:projectId/edit'
+              render={({ match }) =>
+                renderApp(
+                  <TaaSProjectForm projectId={match.params.projectId} />,
+                  <TopBarContainer />,
+                  <Tab projectId={match.params.projectId} />,
+                  <FooterContainer />
+                )()
+              }
+            />
+          )}
           {
             !isReadOnly && (
               <Route exact path='/projects/:projectId/challenges/new'
diff --git a/src/services/axiosWithAuth.js b/src/services/axiosWithAuth.js
index 6f587e40..79a4016a 100644
--- a/src/services/axiosWithAuth.js
+++ b/src/services/axiosWithAuth.js
@@ -18,7 +18,11 @@ export const getToken = () => {
           resolve(token)
         })
         .catch((err) => {
-          console.error(err)
+          if (process.env.NODE_ENV === 'development') {
+            console.log(err)
+          } else {
+            console.error('Error getting auth token')
+          }
           reject(err)
         })
     }
@@ -40,7 +44,11 @@ axiosInstance.interceptors.request.use(config => {
       return config
     })
     .catch((err) => {
-      console.error(err)
+      if (process.env.NODE_ENV === 'development') {
+        console.log(err)
+      } else {
+        console.error('An unexpected error occured while retrieving the auth token.')
+      }
       const redirectBackToUrl = window.location.origin
       window.location = ACCOUNTS_APP_LOGIN_URL + '?retUrl=' + redirectBackToUrl
     })
diff --git a/src/services/projects.js b/src/services/projects.js
index 50368519..e749ea11 100644
--- a/src/services/projects.js
+++ b/src/services/projects.js
@@ -2,12 +2,29 @@ import _ from 'lodash'
 import { axiosInstance } from './axiosWithAuth'
 import * as queryString from 'query-string'
 import {
+  ATTACHMENT_TYPE_FILE,
+  FILE_PICKER_SUBMISSION_CONTAINER_NAME,
   GENERIC_PROJECT_MILESTONE_PRODUCT_NAME,
-  GENERIC_PROJECT_MILESTONE_PRODUCT_TYPE, PHASE_PRODUCT_CHALLENGE_ID_FIELD,
+  GENERIC_PROJECT_MILESTONE_PRODUCT_TYPE,
+  PHASE_PRODUCT_CHALLENGE_ID_FIELD,
   PHASE_PRODUCT_TEMPLATE_ID
 } from '../config/constants'
+import { paginationHeaders } from '../util/pagination'
+
 const { PROJECT_API_URL } = process.env
 
+/**
+ * Get billing accounts based on project id
+ *
+ * @param {String} projectId Id of the project
+ *
+ * @returns {Promise<Object>} Billing accounts data
+ */
+export async function fetchBillingAccounts (projectId) {
+  const response = await axiosInstance.get(`${PROJECT_API_URL}/${projectId}/billingAccounts`)
+  return _.get(response, 'data')
+}
+
 /**
  * Get billing account based on project id
  *
@@ -24,13 +41,21 @@ export async function fetchBillingAccount (projectId) {
  * Api request for fetching member's projects
  * @returns {Promise<*>}
  */
-export async function fetchMemberProjects (filters) {
+export function fetchMemberProjects (filters) {
   const params = {
     ...filters
   }
 
-  const response = await axiosInstance.get(`${PROJECT_API_URL}?${queryString.stringify(params)}`)
-  return _.get(response, 'data')
+  for (let param in params) {
+    if (params[param] && Array.isArray(params[param])) {
+      params[`${param}[$in]`] = params[param]
+      params[param] = undefined
+    }
+  }
+
+  return axiosInstance.get(`${PROJECT_API_URL}?${queryString.stringify(params)}`).then(response => {
+    return { projects: _.get(response, 'data'), pagination: paginationHeaders(response) }
+  })
 }
 
 /**
@@ -154,3 +179,112 @@ export async function removeChallengeFromPhaseProduct (projectId, challengeId) {
     return axiosInstance.delete(`${PROJECT_API_URL}/${projectId}/phases/${selectedMilestoneProduct.phaseId}/products/${selectedMilestoneProduct.productId}`)
   }
 }
+
+/**
+ * Create project
+ * @param project project
+ * @returns {Promise<*>}
+ */
+export async function createProjectApi (project) {
+  const response = await axiosInstance.post(`${PROJECT_API_URL}`, project)
+  return _.get(response, 'data')
+}
+
+/**
+ * Update project
+ * @param projectId project id
+ * @param project project
+ * @returns {Promise<*>}
+ */
+export async function updateProjectApi (projectId, project) {
+  const response = await axiosInstance.patch(`${PROJECT_API_URL}/${projectId}`, project)
+  return _.get(response, 'data')
+}
+
+/**
+ * Get project types
+ * @returns {Promise<*>}
+ */
+export async function getProjectTypes () {
+  const response = await axiosInstance.get(`${PROJECT_API_URL}/metadata/projectTypes`)
+  return _.get(response, 'data')
+}
+
+/**
+ * Get project attachment
+ * @param projectId project id
+ * @param attachmentId attachment id
+ * @returns {Promise<*>}
+ */
+export async function getProjectAttachment (projectId, attachmentId) {
+  const response = await axiosInstance.get(
+    `${PROJECT_API_URL}/${projectId}/attachments/${attachmentId}`
+  )
+  return _.get(response, 'data')
+}
+
+/**
+ * Add attachment to project
+ * @param projectId project id
+ * @param data attachment data
+ * @returns {Promise<*>}
+ */
+export async function addProjectAttachmentApi (projectId, data) {
+  if (data.type === ATTACHMENT_TYPE_FILE) {
+    // add s3 bucket prop
+    data.s3Bucket = FILE_PICKER_SUBMISSION_CONTAINER_NAME
+  }
+
+  // The api takes only arrays
+  if (!data.tags) {
+    data.tags = []
+  }
+
+  const response = await axiosInstance.post(
+    `${PROJECT_API_URL}/${projectId}/attachments`,
+    data
+  )
+  return _.get(response, 'data')
+}
+
+/**
+ * Update project attachment
+ * @param projectId project id
+ * @param attachmentId attachment id
+ * @param attachment attachment data
+ * @returns {Promise<*>}
+ */
+export async function updateProjectAttachmentApi (
+  projectId,
+  attachmentId,
+  attachment
+) {
+  let data = {
+    ...attachment
+  }
+  if (data && (!data.allowedUsers || data.allowedUsers.length === 0)) {
+    data.allowedUsers = null
+  }
+
+  // The api takes only arrays
+  if (data && !data.tags) {
+    data.tags = []
+  }
+
+  const response = await axiosInstance.patch(
+    `${PROJECT_API_URL}/${projectId}/attachments/${attachmentId}`,
+    data
+  )
+  return _.get(response, 'data')
+}
+
+/**
+ * Remove project attachment
+ * @param projectId project id
+ * @param attachmentId attachment id
+ */
+export async function removeProjectAttachmentApi (projectId, attachmentId) {
+  await axiosInstance.delete(
+    `${PROJECT_API_URL}/${projectId}/attachments/${attachmentId}`
+  )
+}
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
index b640d949..266755ae 100644
--- a/src/styles/_colors.scss
+++ b/src/styles/_colors.scss
@@ -39,6 +39,8 @@ $tc-blue-20: #2C95D7;
 $tc-blue-30: #2984BD;
 $tc-blue-40: #16679A;
 
+$tc-dark-blue-10: #f4f9ff;
+
 $tc-green-20: #43D7B0;
 $tc-green-30: #60C602;
 $tc-green-40: #35AC35;
@@ -57,6 +59,7 @@ $tc-gray-50: #AAAAAA;
 $tc-gray-60: #979797;
 $tc-gray-70: #555555;
 $tc-gray-80: #2A2A2A;
+$tc-gray-90: #2a2a2b;
 $tc-black: #000000;
 
 $tc-handle-yellow: #FDD615;
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index ebecf52e..e97884a2 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -153,6 +153,98 @@
   }
 }
 
+@mixin form-container-mobile {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  .row {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    margin: 30px;
+    align-content: space-between;
+    justify-content: flex-start;
+    box-sizing: border-box;
+
+    .field {
+      @include upto-sm {
+        display: block;
+        padding-bottom: 10px;
+      }
+
+      label {
+        @include roboto-bold();
+
+        font-size: 16px;
+        line-height: 19px;
+        font-weight: 500;
+        color: $tc-gray-80;
+      }
+
+      .passwordCheckbox {
+        @include roboto-medium();
+
+        font-size: 10px;
+        line-height: 15px;
+        font-weight: 500;
+        color: $tc-gray-80;
+        margin-bottom: 5px;
+      }
+
+      &.col1 {
+        max-width: 185px;
+        min-width: 185px;
+        margin-right: 14px;
+        margin-bottom: auto;
+        margin-top: auto;
+        padding-top: 10px;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+      }
+
+      &.col2 {
+        align-self: flex-end;
+        width: 80%;
+        margin-bottom: auto;
+        margin-top: auto;
+        display: flex;
+        flex-direction: row;
+        max-width: 600px;
+        min-width: 600px;
+      }
+
+      &.col-percent50 {
+        align-self: flex-end;
+        width: 50%;
+        margin-bottom: auto;
+        margin-top: auto;
+        display: flex;
+        flex-direction: column;
+      }
+
+      &.col-percent35 {
+        align-self: flex-end;
+        width: 35%;
+        margin-bottom: auto;
+        margin-top: auto;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .date-input {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    &.hide {
+      display: none;
+    }
+  }
+}
+
 @mixin form-container-common {
   margin-bottom: 30px;
   border: 1px solid $lighter-gray;
diff --git a/src/util/pagination.js b/src/util/pagination.js
new file mode 100644
index 00000000..83361379
--- /dev/null
+++ b/src/util/pagination.js
@@ -0,0 +1,6 @@
+import { get, pick, camelCase } from 'lodash'
+
+export function paginationHeaders (response) {
+  const headers = pick(get(response, 'headers'), 'x-page', 'x-per-page', 'x-total', 'x-total-pages')
+  return Object.fromEntries(Object.entries(headers).map(([key, value]) => [camelCase(key), +value]))
+}
diff --git a/src/util/tc.js b/src/util/tc.js
index 00b8c81e..576e9df4 100644
--- a/src/util/tc.js
+++ b/src/util/tc.js
@@ -194,8 +194,9 @@ export const checkEditResourceRoles = resourceRoles => {
  * Checks if token has any of the admin roles
  * @param  token
  */
-export const checkAdmin = token => {
-  const roles = _.get(decodeToken(token), 'roles')
+export const checkAdmin = (token) => {
+  const tokenData = decodeToken(token)
+  const roles = _.get(tokenData, 'roles')
   return roles.some(val => ADMIN_ROLES.indexOf(val.toLowerCase()) > -1)
 }
 
@@ -203,9 +204,27 @@ export const checkAdmin = token => {
  * Checks if token has any of the copilot roles
  * @param  token
  */
-export const checkCopilot = token => {
-  const roles = _.get(decodeToken(token), 'roles')
-  return roles.some(val => COPILOT_ROLES.indexOf(val.toLowerCase()) > -1)
+export const checkCopilot = (token, project) => {
+  const tokenData = decodeToken(token)
+  const roles = _.get(tokenData, 'roles')
+  const isCopilot = roles.some(val => COPILOT_ROLES.indexOf(val.toLowerCase()) > -1)
+  const canManageProject = !project || _.isEmpty(project) || ALLOWED_EDIT_RESOURCE_ROLES.includes(_.get(_.find(project.members, { userId: tokenData.userId }), 'role'))
+
+  return isCopilot && canManageProject
+}
+
+/**
+ * Checks if token has any of the admin or copilot roles
+ * @param  token
+ */
+export const checkAdminOrCopilot = (token, project) => {
+  const tokenData = decodeToken(token)
+  const roles = _.get(tokenData, 'roles')
+  const isAdmin = roles.some(val => ADMIN_ROLES.indexOf(val.toLowerCase()) > -1)
+  const isCopilot = roles.some(val => COPILOT_ROLES.indexOf(val.toLowerCase()) > -1)
+  const canManageProject = !project || _.isEmpty(project) || ALLOWED_EDIT_RESOURCE_ROLES.includes(_.get(_.find(project.members, { userId: tokenData.userId }), 'role'))
+
+  return isAdmin || (isCopilot && canManageProject)
 }
 
 /**
@@ -314,3 +333,23 @@ export function getChallengeTypeAbbr (track, challengeTypes) {
 export function is2RoundsChallenge (challenge) {
   return !!_.find(challenge.phases, { name: 'Checkpoint Submission' })
 }
+
+/**
+ * Get full name of user
+ * @param {Object} user user info
+ * @returns
+ */
+export function getFullNameWithFallback (user) {
+  if (!user) return ''
+  let userFullName = user.firstName
+  if (userFullName && user.lastName) {
+    userFullName += ' ' + user.lastName
+  }
+  userFullName =
+    userFullName && userFullName.trim().length > 0 ? userFullName : user.handle
+  userFullName =
+    userFullName && userFullName.trim().length > 0
+      ? userFullName
+      : 'Connect user'
+  return userFullName
+}
diff --git a/src/util/toaster.js b/src/util/toaster.js
new file mode 100644
index 00000000..19331403
--- /dev/null
+++ b/src/util/toaster.js
@@ -0,0 +1,23 @@
+import { toastr } from 'react-redux-toastr'
+
+/**
+ * Show error toast
+ * @param {string} title
+ * @param {string} message
+ */
+export const toastFailure = (title, message) => {
+  setImmediate(() => {
+    toastr.error(title, message)
+  })
+}
+
+/**
+ * Show success toast
+ * @param {string} title
+ * @param {string} message
+ */
+export const toastSuccess = (title, message) => {
+  setImmediate(() => {
+    toastr.success(title, message)
+  })
+}
diff --git a/src/util/validation.js b/src/util/validation.js
new file mode 100644
index 00000000..7f7e7c70
--- /dev/null
+++ b/src/util/validation.js
@@ -0,0 +1,83 @@
+import _ from 'lodash'
+import * as Yup from 'yup'
+
+/**
+ * check if selected value is valid
+ * @param {Object | null | undefined} selectValue select value
+ * @returns is valid select value
+ */
+export function isValidSelect (selectValue) {
+  return !!selectValue && !!selectValue.value
+}
+
+/**
+ * check if value is number
+ * @param {String | null | undefined} value value
+ * @returns is valid number value
+ */
+export function isValidNumber (value) {
+  return _.isNumber(value)
+}
+
+/**
+ * validation schema for taaS project form
+ */
+export const taaSProjectFormValidationSchema = Yup.object({
+  name: Yup.string()
+    .trim()
+    .required('Please enter project title'),
+  jobs: Yup.array().of(
+    Yup.object().shape({
+      title: Yup.string().required('Please enter job title'),
+      people: Yup.number()
+        .min(1, 'Please choose at least one people')
+        .test('number', 'Please choose at least one people', isValidNumber),
+      role: Yup.object().test('role', 'Please choose role', isValidSelect),
+      duration: Yup.number()
+        .min(4, 'Please, choose at least 4 weeks')
+        .test('number', 'Please choose at least 4 weeks', isValidNumber),
+      workLoad: Yup.object().test(
+        'workLoad',
+        'Please, choose workLoad',
+        isValidSelect
+      ),
+      description: Yup.string().required('Please enter a job description'),
+      skills: Yup.array()
+        .of(
+          Yup.object().shape({
+            name: Yup.string(),
+            skillId: Yup.string()
+          })
+        )
+        .required('Required', 'Please choose at least one skill.')
+        .min(1, 'Please choose at least one skill.')
+    })
+  )
+})
+
+/**
+ * regex for url validation
+ */
+const urlRegex = /((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?(?:[a-zA-Z0-9#]+))*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/
+
+/**
+ * validation schema for add link form in assets library
+ */
+export const assetsLibraryAddLinkSchema = Yup.object({
+  title: Yup.string()
+    .trim()
+    .required('Name is required'),
+  path: Yup.string()
+    .trim()
+    .required('URL is required')
+    .matches(urlRegex, 'Please enter a valid URL')
+})
+
+/**
+ * validation schema for edit file form in assets library
+ */
+export const assetsLibraryEditFileSchema = Yup.object({
+  title: Yup.string()
+    .trim()
+    .required('Title is required')
+})