From f993775839a21bd9f6113c8ed36d9957041d4c7e Mon Sep 17 00:00:00 2001
From: fihis <a.ausiyevich@paralect.com>
Date: Mon, 15 Jun 2020 17:05:19 +0300
Subject: [PATCH] change emotions prediction api, change ui

---
 api/package-lock.json                         |  27 +-
 api/package.json                              |   1 +
 api/src/resources/processing/analyze/index.js |   3 +
 api/src/services/nlp.service.js               |  22 +-
 web/package-lock.json                         | 326 +++++++++++++++++-
 web/package.json                              |   3 +
 web/src/client/components/button/button.jsx   |   7 +-
 .../components/button/button.styles.pcss      |  25 +-
 web/src/client/components/emoji/emoji.jsx     |  24 ++
 web/src/client/components/emoji/index.js      |   1 +
 .../components/file-dropzone/fileDropzone.jsx |  24 +-
 .../file-dropzone/fileDropzone.styles.pcss    | 101 ++++--
 .../client/components/progressBar/index.js    |   1 +
 .../components/progressBar/progressBar.jsx    |  30 ++
 .../progressBar/progressBar.styles.pcss       |  12 +
 .../client/components/table/table.styles.pcss |   2 +-
 .../client/components/tabs/tabs.styles.pcss   |   1 -
 .../client/components/text-area/textArea.jsx  |   6 +-
 .../components/text-area/textArea.styles.pcss |  27 +-
 web/src/client/helpers/constants/index.js     |  21 ++
 web/src/client/pages/home/home.jsx            |  84 +++--
 web/src/client/pages/home/home.styles.pcss    | 112 +++++-
 .../resources/analyze/analyze.actions.js      |   8 +-
 .../resources/analyze/analyze.selectors.js    |   3 +-
 24 files changed, 736 insertions(+), 135 deletions(-)
 create mode 100644 web/src/client/components/emoji/emoji.jsx
 create mode 100644 web/src/client/components/emoji/index.js
 create mode 100644 web/src/client/components/progressBar/index.js
 create mode 100644 web/src/client/components/progressBar/progressBar.jsx
 create mode 100644 web/src/client/components/progressBar/progressBar.styles.pcss

diff --git a/api/package-lock.json b/api/package-lock.json
index 9ada973..145e58f 100644
--- a/api/package-lock.json
+++ b/api/package-lock.json
@@ -671,12 +671,11 @@
       "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug=="
     },
     "axios": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.1.tgz",
-      "integrity": "sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==",
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
       "requires": {
-        "follow-redirects": "1.5.10",
-        "is-buffer": "^2.0.2"
+        "follow-redirects": "1.5.10"
       }
     },
     "axios-cookiejar-support": {
@@ -3379,6 +3378,15 @@
           "resolved": "https://registry.npmjs.org/@types/node/-/node-10.14.22.tgz",
           "integrity": "sha512-9taxKC944BqoTVjE+UT3pQH0nHZlTvITwfsOZqyc+R3sfJuxaTtxWjfn1K2UlxyPcKHf0rnaXcVFrS9F9vf0bw=="
         },
+        "axios": {
+          "version": "0.18.1",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.1.tgz",
+          "integrity": "sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==",
+          "requires": {
+            "follow-redirects": "1.5.10",
+            "is-buffer": "^2.0.2"
+          }
+        },
         "camelcase": {
           "version": "5.3.1",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
@@ -3418,6 +3426,15 @@
             "lodash": "^4.17.14"
           }
         },
+        "axios": {
+          "version": "0.18.1",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.1.tgz",
+          "integrity": "sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==",
+          "requires": {
+            "follow-redirects": "1.5.10",
+            "is-buffer": "^2.0.2"
+          }
+        },
         "camelcase": {
           "version": "5.3.1",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
diff --git a/api/package.json b/api/package.json
index d1ab26d..ee4980e 100644
--- a/api/package.json
+++ b/api/package.json
@@ -43,6 +43,7 @@
     "@paralect/email-service": "0.2.0",
     "@paralect/node-mongo": "2.0.0-beta.1",
     "app-module-path": "2.2.0",
+    "axios": "0.19.2",
     "bcrypt": "4.0.1",
     "google-auth-library": "6.0.0",
     "ibm-watson": "5.5.0",
diff --git a/api/src/resources/processing/analyze/index.js b/api/src/resources/processing/analyze/index.js
index 66b86f9..c038c8e 100644
--- a/api/src/resources/processing/analyze/index.js
+++ b/api/src/resources/processing/analyze/index.js
@@ -1,4 +1,5 @@
 const validate = require('middlewares/validate');
+
 const NLPService = require('services/nlp.service');
 
 const validator = require('./validator');
@@ -9,9 +10,11 @@ const handler = async (ctx) => {
 
     const result = await NLPService.analyzeText(text);
     const vehicleColors = await NLPService.recognizeVehicleColor(image);
+    const emotions = await NLPService.analyzeEmotions(text);
 
     ctx.body = {
       ...result,
+      emotions,
       entities: [
         ...result.entities,
         ...vehicleColors,
diff --git a/api/src/services/nlp.service.js b/api/src/services/nlp.service.js
index 0efa823..7305bae 100644
--- a/api/src/services/nlp.service.js
+++ b/api/src/services/nlp.service.js
@@ -1,8 +1,11 @@
+/* eslint-disable class-methods-use-this */
 const fs = require('fs');
 const sharp = require('sharp');
+const axios = require('axios');
 const vision = require('@google-cloud/vision');
 const { NaturalLanguageUnderstandingV1 } = require('ibm-watson/sdk');
 const { IamAuthenticator } = require('ibm-watson/auth');
+
 const { rgbToHex } = require('helpers/base.helper');
 
 class NaturalLanguageProcessingService {
@@ -34,7 +37,6 @@ class NaturalLanguageProcessingService {
         concepts: {},
         entities: {},
         keywords: {},
-        emotion: {},
         semantic_roles: {},
       },
     });
@@ -42,6 +44,24 @@ class NaturalLanguageProcessingService {
     return response.result;
   }
 
+  async analyzeEmotions(text) {
+    const sentencesArray = text.replace(/([.?!])\s*(?=[A-Z])/g, '$1|').split('|');
+
+    const predictionsArray = (await Promise.all(sentencesArray.map((sentence) => (
+      axios.post('http://demo-nlp.paralect.net/predict', { text: sentence })
+    )))).map((element) => (element.data.predictions.flat(1)));
+
+    const averageEmotions = predictionsArray[0].map((_col, i) => predictionsArray.map(
+      (row) => row[i],
+    ).reduce((acc, c) => acc + c, 0) / predictionsArray.length);
+
+    if (!averageEmotions) {
+      throw new Error('Not recognized');
+    }
+
+    return averageEmotions;
+  }
+
   async localizeVehicle(image) {
     const imageBuffer = fs.readFileSync(image.path);
     const sharpImage = sharp(imageBuffer);
diff --git a/web/package-lock.json b/web/package-lock.json
index a5830b2..deab5c7 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -34,7 +34,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz",
       "integrity": "sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==",
-      "dev": true,
       "requires": {
         "@babel/highlight": "^7.0.0"
       }
@@ -350,7 +349,6 @@
       "version": "7.5.0",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.5.0.tgz",
       "integrity": "sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==",
-      "dev": true,
       "requires": {
         "chalk": "^2.0.0",
         "esutils": "^2.0.2",
@@ -1005,6 +1003,111 @@
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
     },
+    "@emotion/cache": {
+      "version": "10.0.29",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
+      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
+      "requires": {
+        "@emotion/sheet": "0.9.4",
+        "@emotion/stylis": "0.8.5",
+        "@emotion/utils": "0.11.3",
+        "@emotion/weak-memoize": "0.2.5"
+      }
+    },
+    "@emotion/core": {
+      "version": "10.0.28",
+      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.28.tgz",
+      "integrity": "sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@emotion/cache": "^10.0.27",
+        "@emotion/css": "^10.0.27",
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/sheet": "0.9.4",
+        "@emotion/utils": "0.11.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.2.tgz",
+          "integrity": "sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
+        }
+      }
+    },
+    "@emotion/css": {
+      "version": "10.0.27",
+      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
+      "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
+      "requires": {
+        "@emotion/serialize": "^0.11.15",
+        "@emotion/utils": "0.11.3",
+        "babel-plugin-emotion": "^10.0.27"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/serialize": {
+      "version": "0.11.16",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
+      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+      "requires": {
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/unitless": "0.7.5",
+        "@emotion/utils": "0.11.3",
+        "csstype": "^2.5.7"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
+      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
+      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@hapi/address": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.0.0.tgz",
@@ -1098,6 +1201,23 @@
         "winston": "2.3.1"
       }
     },
+    "@popmotion/easing": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@popmotion/easing/-/easing-1.0.2.tgz",
+      "integrity": "sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw=="
+    },
+    "@popmotion/popcorn": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@popmotion/popcorn/-/popcorn-0.4.4.tgz",
+      "integrity": "sha512-jYO/8319fKoNLMlY4ZJPiPu8Ea8occYwRZhxpaNn/kZsK4QG2E7XFlXZMJBsTWDw7I1i0uaqyC4zn1nwEezLzg==",
+      "requires": {
+        "@popmotion/easing": "^1.0.1",
+        "framesync": "^4.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "^3.1.7",
+        "tslib": "^1.10.0"
+      }
+    },
     "@samverschueren/stream-to-observable": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz",
@@ -1147,6 +1267,11 @@
       "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
       "dev": true
     },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
     "@types/q": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
@@ -1908,6 +2033,30 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-emotion": {
+      "version": "10.0.33",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
+      "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.8.0",
+        "@emotion/memoize": "0.7.4",
+        "@emotion/serialize": "^0.11.16",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
     "babel-plugin-inline-react-svg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-inline-react-svg/-/babel-plugin-inline-react-svg-1.1.0.tgz",
@@ -1997,6 +2146,81 @@
         "require-package-name": "^2.0.1"
       }
     },
+    "babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.2.tgz",
+          "integrity": "sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "import-fresh": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
+          "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
+          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1",
+            "lines-and-columns": "^1.1.6"
+          }
+        },
+        "path-type": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
+        },
+        "regenerator-runtime": {
+          "version": "0.13.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
+        },
+        "resolve": {
+          "version": "1.17.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
+          "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
+          "requires": {
+            "path-parse": "^1.0.6"
+          }
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+        }
+      }
+    },
     "babel-plugin-module-resolver": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-module-resolver/-/babel-plugin-module-resolver-3.2.0.tgz",
@@ -2030,6 +2254,11 @@
         "postcss-modules-values": "^1.3.0"
       }
     },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "backo2": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
@@ -2972,7 +3201,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz",
       "integrity": "sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.1"
       }
@@ -3544,6 +3772,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "2.6.10",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz",
+      "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w=="
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -5349,8 +5582,7 @@
     "find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
-      "dev": true
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
     },
     "find-up": {
       "version": "3.0.0",
@@ -5474,6 +5706,31 @@
         "map-cache": "^0.2.2"
       }
     },
+    "framer-motion": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-1.11.0.tgz",
+      "integrity": "sha512-DkJFWAHIv57L4xu8Ufq9GMs9Ifqpgt5Yi55pc4NQos8TUGomgbLlnwpO1IXK85X5K1dVNKuTZMiqjWZLeOfG/A==",
+      "requires": {
+        "@emotion/is-prop-valid": "^0.8.2",
+        "@popmotion/easing": "^1.0.2",
+        "@popmotion/popcorn": "^0.4.2",
+        "framesync": "^4.0.4",
+        "hey-listen": "^1.0.8",
+        "popmotion": "9.0.0-beta-8",
+        "style-value-types": "^3.1.6",
+        "stylefire": "^7.0.2",
+        "tslib": "^1.10.0"
+      }
+    },
+    "framesync": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-4.0.4.tgz",
+      "integrity": "sha512-mdP0WvVHe0/qA62KG2LFUAOiWLng5GLpscRlwzBxu2VXOp6B8hNs5C5XlFigsMgrfDrr2YbqTsgdWZTc4RXRMQ==",
+      "requires": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^1.10.0"
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -6499,6 +6756,11 @@
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
     },
+    "hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "history": {
       "version": "4.9.0",
       "resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz",
@@ -7673,8 +7935,7 @@
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
-      "dev": true
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
     },
     "lint-staged": {
       "version": "9.5.0",
@@ -9525,7 +9786,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "requires": {
         "callsites": "^3.0.0"
       },
@@ -9533,8 +9793,7 @@
         "callsites": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-          "dev": true
+          "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
         }
       }
     },
@@ -9782,6 +10041,19 @@
         "semver-compare": "^1.0.0"
       }
     },
+    "popmotion": {
+      "version": "9.0.0-beta-8",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.0.0-beta-8.tgz",
+      "integrity": "sha512-6eQzqursPvnP7ePvdfPeY4wFHmS3OLzNP8rJRvmfFfEIfpFqrQgLsM50Gd9AOvGKJtYJOFknNG+dsnzCpgIdAA==",
+      "requires": {
+        "@popmotion/easing": "^1.0.1",
+        "@popmotion/popcorn": "^0.4.2",
+        "framesync": "^4.0.4",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "^3.1.6",
+        "tslib": "^1.10.0"
+      }
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -11147,6 +11419,14 @@
         "tiny-warning": "^1.0.0"
       }
     },
+    "react-spinners": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.8.3.tgz",
+      "integrity": "sha512-fuYNjH0megp5FLuUqQXWM9mPgBXUjvYD6IkMOiwNGOOlI2UdOP1ZC3vejUAa3Y/q4qWJ6yx8rjfMjIBgEji+9A==",
+      "requires": {
+        "@emotion/core": "^10.0.15"
+      }
+    },
     "react-table": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.0.6.tgz",
@@ -12564,6 +12844,27 @@
       "integrity": "sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=",
       "dev": true
     },
+    "style-value-types": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-3.1.7.tgz",
+      "integrity": "sha512-jPaG5HcAPs3vetSwOJozrBXxuHo9tjZVnbRyBjxqb00c2saIoeuBJc1/2MtvB8eRZy41u/BBDH0CpfzWixftKg==",
+      "requires": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^1.10.0"
+      }
+    },
+    "stylefire": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/stylefire/-/stylefire-7.0.3.tgz",
+      "integrity": "sha512-Q0l7NSeFz/OkX+o6/7Zg3VZxSAZeQzQpYomWmIpOehFM/rJNMSLVX5fgg6Q48ut2ETNKwdhm97mPNU643EBCoQ==",
+      "requires": {
+        "@popmotion/popcorn": "^0.4.4",
+        "framesync": "^4.0.0",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "^3.1.7",
+        "tslib": "^1.10.0"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -13977,6 +14278,11 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
     },
+    "yaml": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
+      "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg=="
+    },
     "yargs": {
       "version": "13.2.4",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.2.4.tgz",
diff --git a/web/package.json b/web/package.json
index 085632a..878fb3c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -39,6 +39,7 @@
     ]
   },
   "dependencies": {
+    "@emotion/core": "10.0.28",
     "@paralect/common-logger": "0.1.10",
     "app-module-path": "2.2.0",
     "axios": "0.18.1",
@@ -47,6 +48,7 @@
     "connected-react-router": "6.5.2",
     "cssnano": "4.1.10",
     "file-loader": "4.0.0",
+    "framer-motion": "1.11.0",
     "handlebars": "4.1.2",
     "history": "4.9.0",
     "html-webpack-plugin": "3.2.0",
@@ -75,6 +77,7 @@
     "react-icons": "3.7.0",
     "react-redux": "7.1.0",
     "react-router-dom": "5.1.2",
+    "react-spinners": "0.8.3",
     "react-table": "7.0.6",
     "redux": "4.0.4",
     "redux-thunk": "2.3.0",
diff --git a/web/src/client/components/button/button.jsx b/web/src/client/components/button/button.jsx
index 1123b90..5d31f2e 100644
--- a/web/src/client/components/button/button.jsx
+++ b/web/src/client/components/button/button.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
+import { motion } from 'framer-motion';
 
 import styles from './button.styles';
 
@@ -14,9 +15,13 @@ const colors = {
 /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
 function Button({ color, className, ...props }) {
   return (
-    <button
+    <motion.button
       className={cn(styles.button, styles[color], className)}
       {...props}
+      whileHover={{
+        scale: 1.05,
+        transition: { duration: 0.05 },
+      }}
     />
   );
 }
diff --git a/web/src/client/components/button/button.styles.pcss b/web/src/client/components/button/button.styles.pcss
index 44809b3..918a42b 100644
--- a/web/src/client/components/button/button.styles.pcss
+++ b/web/src/client/components/button/button.styles.pcss
@@ -11,28 +11,5 @@
   text-transform: uppercase;
   box-shadow: 0 3px 7px var(--shadow-default);
   outline: none;
-
-  &.green {
-    background: var(--green-600);
-
-    &:hover {
-      background: var(--green-800);
-    }
-  }
-
-  &.blue {
-    background: #4361EE;
-
-    &:hover {
-      background: #0c228b;
-    }
-  }
-
-  &.red {
-    background: var(--red-600);
-
-    &:hover {
-      background: var(--red-800);
-    }
-  }
+  transition: all 0.2s ease-in-out;
 }
diff --git a/web/src/client/components/emoji/emoji.jsx b/web/src/client/components/emoji/emoji.jsx
new file mode 100644
index 0000000..d0d3ebe
--- /dev/null
+++ b/web/src/client/components/emoji/emoji.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Emoji = ({ label, symbol }) => (
+  <span
+    className="emoji"
+    role="img"
+    aria-label={label}
+    aria-hidden={!label}
+  >
+    {symbol}
+  </span>
+);
+
+Emoji.propTypes = {
+  label: PropTypes.string,
+  symbol: PropTypes.string.isRequired,
+};
+
+Emoji.defaultProps = {
+  label: '',
+};
+
+export default Emoji;
diff --git a/web/src/client/components/emoji/index.js b/web/src/client/components/emoji/index.js
new file mode 100644
index 0000000..06ac7ce
--- /dev/null
+++ b/web/src/client/components/emoji/index.js
@@ -0,0 +1 @@
+export { default } from './emoji';
diff --git a/web/src/client/components/file-dropzone/fileDropzone.jsx b/web/src/client/components/file-dropzone/fileDropzone.jsx
index d7d59ec..befe3d0 100644
--- a/web/src/client/components/file-dropzone/fileDropzone.jsx
+++ b/web/src/client/components/file-dropzone/fileDropzone.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { motion } from 'framer-motion';
 import { useDropzone } from 'react-dropzone';
 import { FaCloudUploadAlt } from 'react-icons/fa';
 import { getFileDataUrl } from 'helpers/helpers';
@@ -47,13 +48,26 @@ const FileDropzone = (props) => {
         })}
         {...getRootProps()}
       >
+
         <input {...getInputProps()} />
-        <FaCloudUploadAlt className={styles.uploadIcon} size={16} />
-        <div className={styles.uploadText}>
-          Upload file
-          <span className={styles.types}>PNG, JPG, Max 10Mb</span>
-        </div>
+        <motion.div
+          animate={{
+            scale: [1, 1.2, 1, 1.2, 1],
+          }}
+          transition={{
+            duration: 2,
+            ease: 'easeInOut',
+            times: [0, 0.2, 0.5, 0.8, 1],
+            loop: Infinity,
+            repeatDelay: 1,
+          }}
+        >
+          <FaCloudUploadAlt className={styles.uploadIcon} size={28} />
+        </motion.div>
+        <div className={styles.uploadTitle}>Upload another image</div>
       </div>
+      <div className={styles.shade} />
+
       {error && <div className={styles.errorText}>{error}</div>}
       {previewUrl && <img className={styles.preview} src={previewUrl} alt="preview" />}
     </div>
diff --git a/web/src/client/components/file-dropzone/fileDropzone.styles.pcss b/web/src/client/components/file-dropzone/fileDropzone.styles.pcss
index cba7c0c..476c46c 100644
--- a/web/src/client/components/file-dropzone/fileDropzone.styles.pcss
+++ b/web/src/client/components/file-dropzone/fileDropzone.styles.pcss
@@ -1,61 +1,102 @@
 @import 'variables.pcss';
 
-.upload-text {
-  font-family: Poppins;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 24px;
-  color: #191919;
-  margin: 0 4px;
-
-  .types {
-    color: #a7a7a7;
-    margin-left: 5px;
-  }
-}
-
 .file-dropzone {
+  position: absolute;
+  left: 10px;
+  top: 10px;
   display: flex;
+  justify-content: center;
   align-items: center;
-  height: 80px;
-  border: 1px dashed #D1D1D1;
-  box-sizing: border-box;
+  text-transform: initial;
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 24px;
+  width: 60px;
+  height: 60px;
+  border-radius: 100px;
+  color: rgba(255, 255, 255, 0.9);
+  background: rgb(112, 7, 186);
+  transition: width 0.2s ease-in-out;
+  border: none;
+  outline:none;
   cursor: pointer;
-  padding: 28px 16px;
+  z-index: 3;
 
-  &.error {
-    border-color: #FF3C5A;
+  &:hover {
+    width: 300px;
   }
 
-  &:hover {
-    background: #EFF2FF;
+  &.error {
+    background: #FF3C5A;
   }
 }
 
+.file-dropzone:hover .upload-title {
+  display: block;
+  white-space: nowrap;
+  margin-left: 12px;
+}
+
 .drag-active {
-  background: #EFF2FF;
+  background: #a44fdf;
 }
 
 .container {
-  margin-bottom: 24px;
+  position: relative;
+  max-width: 400px;
+  max-height: 400px;
+  height: 400px;
+  width: 400px;
 }
 
 .upload-icon {
   margin: 4px;
 }
 
+.upload-title {
+  display: none;
+}
+
 .preview {
-  width: 100px;
-  height: 100px;
-  object-fit: cover;
-  margin-top: 16px;
+  max-width: 400px;
+  max-height: 400px;
+  height: 400px;
+  width: 400px;
+  border-radius: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border: 2px solid rgba(77,89,97,.1);object-fit: cover;
+  margin-right: 30px;
+  padding: 2px;
 }
 
 .error-text {
+  position: absolute;
+  top: 69px;
+  left: 7px;
+  padding: 4px 12px;
+  background: white;
+  opacity: 0.8;
+  border-radius: 100px;
   font-size: 14px;
   line-height: 24px;
   margin: 8px;
-
   color: #FF3C5A;
 }
+
+.file-dropzone:hover + .shade {
+  background-color: white;
+  opacity: 0.5;
+  transition: all 0.3s ease-in-out;
+}
+
+.shade {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
diff --git a/web/src/client/components/progressBar/index.js b/web/src/client/components/progressBar/index.js
new file mode 100644
index 0000000..9db843c
--- /dev/null
+++ b/web/src/client/components/progressBar/index.js
@@ -0,0 +1 @@
+export { default } from './progressBar';
diff --git a/web/src/client/components/progressBar/progressBar.jsx b/web/src/client/components/progressBar/progressBar.jsx
new file mode 100644
index 0000000..a99f7c1
--- /dev/null
+++ b/web/src/client/components/progressBar/progressBar.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+import { motion } from 'framer-motion';
+
+import styles from './progressBar.styles';
+
+const ProgressBar = ({ fill, className }) => {
+  return (
+    <div className={cn(styles.container, className)}>
+      <motion.div
+        className={styles.filler}
+        animate={{ width: ['0%', `${fill}%`] }}
+        transition={{ duration: 1 }}
+        initial={false}
+      />
+    </div>
+  );
+};
+
+ProgressBar.propTypes = {
+  fill: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+ProgressBar.defaultProps = {
+  className: '',
+};
+
+export default ProgressBar;
diff --git a/web/src/client/components/progressBar/progressBar.styles.pcss b/web/src/client/components/progressBar/progressBar.styles.pcss
new file mode 100644
index 0000000..0f16976
--- /dev/null
+++ b/web/src/client/components/progressBar/progressBar.styles.pcss
@@ -0,0 +1,12 @@
+.container {
+  background-color: rgba(22, 22, 22, 0.4);
+  border-radius: 100px;
+  padding: 2px;
+}
+
+.filler {
+  height: 100%;
+  background-color: rgb(147, 48, 217);
+  box-shadow: 0 0 5px 2px rgba(171, 79, 236, 0.4);
+  border-radius: inherit;
+}
\ No newline at end of file
diff --git a/web/src/client/components/table/table.styles.pcss b/web/src/client/components/table/table.styles.pcss
index 42e3bad..2a03524 100644
--- a/web/src/client/components/table/table.styles.pcss
+++ b/web/src/client/components/table/table.styles.pcss
@@ -11,7 +11,7 @@
   }
 
   .table-header {
-    background: #EFF2FF;
+    background: #f6efff;
   }
 
   .table-body {
diff --git a/web/src/client/components/tabs/tabs.styles.pcss b/web/src/client/components/tabs/tabs.styles.pcss
index d4f428a..859204b 100644
--- a/web/src/client/components/tabs/tabs.styles.pcss
+++ b/web/src/client/components/tabs/tabs.styles.pcss
@@ -1,5 +1,4 @@
 .tabs-container {
-  margin-bottom: 15px;
 }
 
 .tab {
diff --git a/web/src/client/components/text-area/textArea.jsx b/web/src/client/components/text-area/textArea.jsx
index 5db1a43..8c90e0d 100644
--- a/web/src/client/components/text-area/textArea.jsx
+++ b/web/src/client/components/text-area/textArea.jsx
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import _ from 'lodash';
+import { motion } from 'framer-motion';
 
 import styles from './textArea.styles';
 
@@ -32,13 +33,13 @@ export default class TextArea extends PureComponent {
     const props = _.omit(this.props, ['className', 'errors', 'onChange', 'rows']);
 
     return (
-      <div>
+      <div className={styles.container}>
         {title && (
           <div className={styles.title}>
             {title}
           </div>
         )}
-        <textarea
+        <motion.textarea
           className={classnames(styles.textArea, className, {
             [styles.error]: errors.length,
           })}
@@ -46,6 +47,7 @@ export default class TextArea extends PureComponent {
           rows={rows}
           placeholder={placeholder}
           {...props /* eslint-disable-line react/jsx-props-no-spreading */}
+          whileTap={{ scale: 0.95 }}
         />
 
         {this.errors()}
diff --git a/web/src/client/components/text-area/textArea.styles.pcss b/web/src/client/components/text-area/textArea.styles.pcss
index 2d8262c..85615db 100644
--- a/web/src/client/components/text-area/textArea.styles.pcss
+++ b/web/src/client/components/text-area/textArea.styles.pcss
@@ -11,29 +11,26 @@
   font-size: 16px;
   line-height: 24px;
 
-  &:hover,
-  &:focus {
-    border-color: #4361EE;
-  }
-
-  &.error {
-    border-color: var(--red-500);
-
-    &:hover,
-    &:focus {
-      border-color: var(--red-800);
-    }
+  &.error:not(:focus) {
+    border-color: #FF3C5A;
   }
 }
 
 .errors {
+  position: absolute;
+  bottom: -22px;
+  left: 15px;
   font-size: var(--text-400);
-  color: var(--red-500);
-  margin-top: var(--distance-400);
+  color: #FF3C5A;
 }
 
 .title {
+  font-weight: bold;
   font-size: 18px;
   line-height: 27px;
-  margin-bottom: 5px;
+  margin: 0 20px 7px;
+}
+
+.container {
+  position: relative;
 }
diff --git a/web/src/client/helpers/constants/index.js b/web/src/client/helpers/constants/index.js
index d997c5d..b3f5487 100644
--- a/web/src/client/helpers/constants/index.js
+++ b/web/src/client/helpers/constants/index.js
@@ -1,2 +1,23 @@
 export const { ACCESS_TOKEN_COOKIE_NAME } = APP_CONSTANTS;
 export const API_LOGOUT_PATH = '/account/logout';
+
+export const EMOTIONS_NAMES = [
+  'anger',
+  'neutral-anger',
+  'neutral',
+  'neutral-happiness',
+  'happiness',
+];
+
+export const EMOTIONS_EMOJIS = [
+  '😠',
+  '🙁',
+  '😐',
+  '🙂',
+  '😄',
+];
+
+export const TEXT_LIMITS = {
+  minCharacters: 20,
+  maxWords: 80,
+}
\ No newline at end of file
diff --git a/web/src/client/pages/home/home.jsx b/web/src/client/pages/home/home.jsx
index be07227..253e7f4 100644
--- a/web/src/client/pages/home/home.jsx
+++ b/web/src/client/pages/home/home.jsx
@@ -1,15 +1,22 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import cn from 'classnames';
+import GridLoader from 'react-spinners/GridLoader';
+
 import * as fromAnalyze from 'resources/analyze/analyze.selectors';
 import * as analyzeActions from 'resources/analyze/analyze.actions';
+
 import FileDropzone from 'components/file-dropzone';
 import TextArea from 'components/text-area';
 import Button from 'components/button';
-import { FaSpinner } from 'react-icons/fa';
 import Table from 'components/table';
 import Tabs from 'components/tabs';
+import ProgressBar from 'components/progressBar';
+
 import { getFileByUrl } from 'helpers/helpers';
+import { EMOTIONS_EMOJIS, TEXT_LIMITS } from 'helpers/constants';
+
 import defaultImg from 'static/images/car-template.jpg';
 import defaultText from 'static/default-text.json';
 
@@ -28,8 +35,8 @@ const tabs = [{
   name: 'Categories',
   type: 'categories',
 }, {
-  name: 'Emotion',
-  type: 'emotion',
+  name: 'Emotions',
+  type: 'emotions',
 }];
 
 class Home extends PureComponent {
@@ -42,6 +49,7 @@ class Home extends PureComponent {
       text: '',
       isLoading: false,
       currentTab: this.defaultTab,
+      textLimitError: null,
     };
   }
 
@@ -51,7 +59,11 @@ class Home extends PureComponent {
   }
 
   onTextChange = (text) => {
-    this.setState({ text });
+    this.setState({ text, textLimitError: null });
+
+    if (text.length < TEXT_LIMITS.minCharacters) {
+      this.setState({ textLimitError: `Text should be longer than ${TEXT_LIMITS.minCharacters} characters` });
+    }
   }
 
   onFileChange = (file) => {
@@ -80,10 +92,10 @@ class Home extends PureComponent {
 
     const tableData = data[currentTab];
 
-    if (currentTab === 'emotion') {
-      return Object.keys(tableData.document.emotion).map((key) => ({
-        text: key,
-        confidence: tableData.document.emotion[key],
+    if (currentTab === 'emotions') {
+      return tableData.map((confidence, index) => ({
+        text: EMOTIONS_EMOJIS[index],
+        confidence: confidence.toFixed(6),
       })).sort((a, b) => Math.sign(b.confidence - a.confidence));
     }
 
@@ -101,6 +113,13 @@ class Home extends PureComponent {
     return tableData;
   }
 
+  getProgressBar = ({ value }) => (
+    <>
+      <ProgressBar className={styles.progressBar} fill={`${Math.abs(value) * 100}`} />
+      <span>{Number(value).toFixed(4)}</span>
+    </>
+  );
+
   getTableColumns = () => {
     const { currentTab } = this.state;
 
@@ -112,6 +131,7 @@ class Home extends PureComponent {
         }, {
           Header: 'Relevance',
           accessor: 'relevance',
+          Cell: this.getProgressBar,
         }];
 
       case 'concepts':
@@ -124,6 +144,7 @@ class Home extends PureComponent {
         }, {
           Header: 'Score',
           accessor: 'relevance',
+          Cell: this.getProgressBar,
         }];
 
       case 'categories':
@@ -133,15 +154,17 @@ class Home extends PureComponent {
         }, {
           Header: 'Score',
           accessor: 'score',
+          Cell: this.getProgressBar,
         }];
 
-      case 'emotion':
+      case 'emotions':
         return [{
           Header: 'Emotion',
           accessor: 'text',
         }, {
           Header: 'Confidence',
           accessor: 'confidence',
+          Cell: this.getProgressBar,
         }];
 
       case 'entities':
@@ -163,7 +186,7 @@ class Home extends PureComponent {
         }, {
           Header: 'Confidence',
           accessor: 'confidence',
-          Cell: ({ value }) => Math.round(value * 1000) / 1000,
+          Cell: this.getProgressBar,
         }];
     }
   }
@@ -175,28 +198,45 @@ class Home extends PureComponent {
   render() {
     const { data, textErrors } = this.props;
     const {
-      text, file, isLoading, currentTab,
+      text, file, isLoading, currentTab, textLimitError,
     } = this.state;
 
+    const allTextErrors = textLimitError ? textErrors.concat(textLimitError) : textErrors;
+
     return (
-      <div className={styles.page}>
-        <div className={styles.inputBox}>
-          <FileDropzone file={file} onChange={this.onFileChange} />
-          <TextArea
-            value={text}
-            onChange={this.onTextChange}
-            title="Textarea"
-            errors={textErrors}
+      <div className={cn(styles.page)}>
+        <div className={styles.loader}>
+          <GridLoader
+            size={50}
+            margin={40}
+            color="#7007babd"
+            loading={isLoading}
           />
+        </div>
+        <div className={cn(styles.inputBox, isLoading && styles.whileLoading)}>
+          <div className={styles.preview}>
+            <div>
+              <div className={styles.previewImageTitle}>Image</div>
+              <FileDropzone file={file} onChange={this.onFileChange} />
+            </div>
+            <TextArea
+              value={text}
+              onChange={this.onTextChange}
+              title="Description"
+              errors={allTextErrors}
+              className={cn(styles.previewBox, styles.previewText)}
+            />
+          </div>
+
           <div className={styles.buttonContainer}>
             <Button
-              disabled={isLoading || !text || !file}
+              disabled={isLoading || !text || !file || textLimitError}
               className={styles.analyzeButton}
               onClick={this.onAnalyze}
             >
-              {!isLoading && 'Analyze'}
-              {isLoading && (<FaSpinner size={24} className={styles.spinner} />)}
+              {!isLoading && 'Analyze This'}
             </Button>
+
           </div>
         </div>
         {data && (
diff --git a/web/src/client/pages/home/home.styles.pcss b/web/src/client/pages/home/home.styles.pcss
index 42fc25d..3f7e29d 100644
--- a/web/src/client/pages/home/home.styles.pcss
+++ b/web/src/client/pages/home/home.styles.pcss
@@ -1,14 +1,38 @@
 @import 'variables.pcss';
 
+body {
+  background-image: url(https://www.paralect.com/img/dots-bg.png);
+  background-size: 20px 20px;
+}
+
 .page {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  align-items: center;
   padding: 24px;
+  max-width: 880px;
+  margin: 0 auto;
+  transition: all 0.3s ease-in-out;
+  position: relative;
+}
+
+.while-loading {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.loader {
+  position: absolute;
+  top: 50px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  transition: all 0.5s ease-in-out;
+  z-index: 10;
 }
 
 .input-box {
-  max-width: 640px;
+  width: 100%;
 }
 
 .analyze-button {
@@ -19,28 +43,34 @@
   font-weight: bold;
   font-size: 16px;
   line-height: 24px;
-  padding: 15px;
-  width: 175px;
+  padding: 20px;
+  width: 200px;
+  height: 65px;
+  border-radius: 100px;
+  color: rgba(255, 255, 255, 0.9);
+  background: rgb(112, 7, 186);
+
+  &:hover {
+    color: rgba(255, 255, 255, 1);
+    box-shadow: 0 0 30px 10px rgba(145, 92, 182, .4);
+  }
 
   &:disabled {
-    background: #a3d1ff;
+    opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
   }
 }
 
 .button-container {
-  margin-top: 24px;
+  margin-top: 38px;
   display: flex;
-  justify-content: flex-end;
-}
-
-.spinner {
-  animation: \spin 3s infinite linear;
+  justify-content: center;
 }
 
 .table-container {
   margin: 40px 0;
+  width: 100%;
 }
 
 .color-cell {
@@ -54,3 +84,65 @@
   border: 2px solid black;
   margin-right: 6px;
 }
+
+.preview {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  &-box {
+    max-width: 400px;
+    max-height: 400px;
+    height: 400px;
+    width: 400px;
+    border-radius: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    border: 2px solid rgba(77,89,97,.1);
+  }
+
+  &-image {
+    object-fit: cover;
+    margin-right: 30px;
+    padding: 2px;
+
+    &-title {
+      font-weight: bold;
+      font-size: 18px;
+      line-height: 27px;
+      margin: 0 20px 7px;
+    }
+  }
+
+  &-text {
+    padding: 20px;
+
+    &:focus,
+    &:hover {
+      box-shadow: 0 0 30px 10px rgba(221, 195, 244, 0.4);
+    }
+
+    &::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba(50,50,50,.25);
+      border: 2px solid transparent;
+      border-radius: 10px;
+      background-clip: padding-box;
+    }
+
+    &::-webkit-scrollbar-track {
+      margin: 20px;
+    }
+  }
+}
+
+.progress-bar {
+  height: 15px;
+  width: 100px;
+}
diff --git a/web/src/client/resources/analyze/analyze.actions.js b/web/src/client/resources/analyze/analyze.actions.js
index 2edeab2..01bcdcb 100644
--- a/web/src/client/resources/analyze/analyze.actions.js
+++ b/web/src/client/resources/analyze/analyze.actions.js
@@ -1,5 +1,4 @@
 import * as api from './analyze.api';
-import { addErrorMessage } from '../toast/toast.actions';
 
 export const analyzeData = ({
   text,
@@ -13,11 +12,6 @@ export const analyzeData = ({
     dispatch({ type: 'analyzeData:set', payload: { data } });
   } catch (response) {
     const { errors } = response.data;
-
-    if (errors[0]._global) {
-      dispatch(addErrorMessage('Processing error', errors[0]._global));
-    } else {
-      dispatch({ type: 'analyzeData:errors', payload: { errors } });
-    }
+    dispatch({ type: 'analyzeData:errors', payload: { errors } });
   }
 };
diff --git a/web/src/client/resources/analyze/analyze.selectors.js b/web/src/client/resources/analyze/analyze.selectors.js
index f1453f7..62ad3fe 100644
--- a/web/src/client/resources/analyze/analyze.selectors.js
+++ b/web/src/client/resources/analyze/analyze.selectors.js
@@ -7,7 +7,8 @@ export function getTextErrors({ analyze }) {
     return [];
   }
 
-  const textErrors = analyze.errors.filter((e) => !!e.text).map((e) => e.text);
+  const textErrors = analyze.errors.filter((e) => !!e.text || !!e._global).map((e) => e.text || 'Something goes wrong. Try again');
+
   return textErrors;
 }