diff --git a/.changeset/plenty-tables-refuse.md b/.changeset/plenty-tables-refuse.md
new file mode 100644
index 000000000..93669cdce
--- /dev/null
+++ b/.changeset/plenty-tables-refuse.md
@@ -0,0 +1,6 @@
+---
+'@verdaccio/cli': minor
+'@verdaccio/node-api': minor
+---
+
+feat: improve cli loggin on start up
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 5d5ad0513..5d8e04217 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@verdaccio/config": "workspace:5.0.0-alpha.3",
-    "@verdaccio/logger": "workspace:5.0.0-alpha.3",
+    "@verdaccio/cli-ui": "workspace:5.0.0-alpha.3",
     "@verdaccio/node-api": "workspace:5.0.0-alpha.6",
     "commander": "6.2.0",
     "envinfo": "7.4.0",
diff --git a/packages/cli/src/cli.ts b/packages/cli/src/cli.ts
index d3e72192c..6d833b31e 100644
--- a/packages/cli/src/cli.ts
+++ b/packages/cli/src/cli.ts
@@ -1,7 +1,7 @@
 import commander from 'commander';
 import { bgYellow, bgRed } from 'kleur';
 
-import { logger } from '@verdaccio/logger';
+import { displayError } from '@verdaccio/cli-ui';
 
 import infoCommand from './commands/info';
 import initProgram from './commands/init';
@@ -55,12 +55,9 @@ if (commander.info) {
 }
 
 process.on('uncaughtException', function (err) {
-  logger.fatal(
-    {
-      err: err,
-    },
-    'uncaught exception, please report (https://github.com/verdaccio/verdaccio/issues) ' +
-      'this: \n@{err.stack}'
+  displayError(
+    // eslint-disable-next-line max-len
+    `uncaught exception, please report (https://github.com/verdaccio/verdaccio/issues) this: \n${err.stack}`
   );
-  process.exit(255);
+  process.exit(1);
 });
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index c82aec1e1..41ffaffaf 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -5,8 +5,6 @@ import { startVerdaccio, listenDefaultCallback } from '@verdaccio/node-api';
 export const DEFAULT_PROCESS_NAME: string = 'verdaccio';
 
 export default function initProgram(commander, pkgVersion, pkgName) {
-  // FIXME: we need to log before the setup is being applied
-  // const initLogger = createLogger();
   const cliListener = commander.listen;
   let configPathLocation;
   let verdaccioConfiguration: ConfigRuntime;
diff --git a/packages/cli/tsconfig.build.json b/packages/cli/tsconfig.build.json
index db054aa8c..a4d00dc57 100644
--- a/packages/cli/tsconfig.build.json
+++ b/packages/cli/tsconfig.build.json
@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "rootDir": "./src",
+    "jsx": "react",
     "outDir": "./build"
   },
   "include": ["src/**/*"],
diff --git a/packages/cli/tsconfig.json b/packages/cli/tsconfig.json
index baee8a25b..8baa2392e 100644
--- a/packages/cli/tsconfig.json
+++ b/packages/cli/tsconfig.json
@@ -16,6 +16,9 @@
     {
       "path": "../node-api"
     },
+    {
+      "path": "../core/cli-ui"
+    },
     {
       "path": "../utils"
     }
diff --git a/packages/core/cli-ui/.babelrc b/packages/core/cli-ui/.babelrc
new file mode 100644
index 000000000..94ffed255
--- /dev/null
+++ b/packages/core/cli-ui/.babelrc
@@ -0,0 +1,6 @@
+{
+  "extends": "../../../.babelrc",
+  "presets": [
+    "@babel/preset-react"
+  ]
+}
diff --git a/packages/core/cli-ui/.eslintrc b/packages/core/cli-ui/.eslintrc
new file mode 100644
index 000000000..7753f32e7
--- /dev/null
+++ b/packages/core/cli-ui/.eslintrc
@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-console": 0
+  }
+}
diff --git a/packages/core/cli-ui/jest.config.js b/packages/core/cli-ui/jest.config.js
new file mode 100644
index 000000000..1c3fbdb05
--- /dev/null
+++ b/packages/core/cli-ui/jest.config.js
@@ -0,0 +1,3 @@
+const config = require('../../../jest/config');
+
+module.exports = Object.assign({}, config, {});
diff --git a/packages/core/cli-ui/package.json b/packages/core/cli-ui/package.json
new file mode 100644
index 000000000..fb85ba3c9
--- /dev/null
+++ b/packages/core/cli-ui/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "@verdaccio/cli-ui",
+  "version": "5.0.0-alpha.3",
+  "description": "cli ui components",
+  "keywords": [
+    "private",
+    "package",
+    "repository",
+    "registry",
+    "enterprise",
+    "modules",
+    "proxy",
+    "server",
+    "verdaccio"
+  ],
+  "author": "Juan Picado <juanpicado19@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://verdaccio.org",
+  "repository": {
+    "type": "https",
+    "url": "https://github.com/verdaccio/verdaccio",
+    "directory": "packages/core/cli-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/verdaccio/verdaccio/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "files": [
+    "build"
+  ],
+  "engines": {
+    "node": ">=10",
+    "npm": ">=6"
+  },
+  "dependencies": {
+    "chalk": "^4.1.0",
+    "terminal-link": "^2.1.1"
+  },
+  "scripts": {
+    "clean": "rimraf ./build",
+    "test": "cross-env NODE_ENV=test BABEL_ENV=test jest",
+    "build:types": "tsc --emitDeclarationOnly -p tsconfig.build.json",
+    "build:js": "babel src/ --out-dir build/ --copy-files --extensions \".ts,.tsx\" --source-maps",
+    "watch": "pnpm build:js -- --watch",
+    "build": "pnpm run build:js && pnpm run build:types"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/verdaccio"
+  }
+}
diff --git a/packages/core/cli-ui/src/index.tsx b/packages/core/cli-ui/src/index.tsx
new file mode 100644
index 000000000..e4f239712
--- /dev/null
+++ b/packages/core/cli-ui/src/index.tsx
@@ -0,0 +1 @@
+export * from './messages';
diff --git a/packages/core/cli-ui/src/messages.tsx b/packages/core/cli-ui/src/messages.tsx
new file mode 100644
index 000000000..198c7da47
--- /dev/null
+++ b/packages/core/cli-ui/src/messages.tsx
@@ -0,0 +1,25 @@
+import chalk from 'chalk';
+import terminalLink from 'terminal-link';
+
+export const PRIMARY_COLOR = `#24394e`;
+
+export function displayMessage(message: string) {
+  console.log(chalk.hex(PRIMARY_COLOR).bold(message));
+}
+
+export function displayWarning(message: string) {
+  console.log(chalk.yellow.bold(message));
+}
+
+export function displayError(message: string) {
+  console.log(chalk.red.bold(message));
+}
+
+export function displayLink(url: string) {
+  if (terminalLink.isSupported) {
+    const link = terminalLink(url, url);
+    return chalk.blue.underline(link);
+  }
+
+  return url;
+}
diff --git a/packages/core/cli-ui/tests/cli.spec.ts b/packages/core/cli-ui/tests/cli.spec.ts
new file mode 100644
index 000000000..a995c834d
--- /dev/null
+++ b/packages/core/cli-ui/tests/cli.spec.ts
@@ -0,0 +1,3 @@
+describe('cli ui', () => {
+  test.todo('add required test for this module');
+});
diff --git a/packages/core/cli-ui/tsconfig.build.json b/packages/core/cli-ui/tsconfig.build.json
new file mode 100644
index 000000000..79f1f81e0
--- /dev/null
+++ b/packages/core/cli-ui/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./build"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.ts"]
+}
diff --git a/packages/core/cli-ui/tsconfig.json b/packages/core/cli-ui/tsconfig.json
new file mode 100644
index 000000000..aa2b9fa6a
--- /dev/null
+++ b/packages/core/cli-ui/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../../tsconfig.reference.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./build",
+    "composite": true,
+    "declaration": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.test.ts"]
+}
diff --git a/packages/node-api/package.json b/packages/node-api/package.json
index d885873d2..d3554a56b 100644
--- a/packages/node-api/package.json
+++ b/packages/node-api/package.json
@@ -41,7 +41,7 @@
   "dependencies": {
     "@verdaccio/commons-api": "workspace:10.0.0-alpha.3",
     "@verdaccio/config": "workspace:5.0.0-alpha.3",
-    "@verdaccio/logger": "workspace:5.0.0-alpha.3",
+    "@verdaccio/cli-ui": "workspace:5.0.0-alpha.3",
     "@verdaccio/server": "workspace:5.0.0-alpha.6",
     "core-js": "^3.6.5",
     "debug": "^4.2.0",
@@ -50,7 +50,8 @@
   },
   "devDependencies": {
     "@verdaccio/mock": "workspace:5.0.0-alpha.3",
-    "@verdaccio/types": "workspace:10.0.0-alpha.3"
+    "@verdaccio/types": "workspace:10.0.0-alpha.3",
+    "jest-mock-process": "^1.4.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/node-api/src/bootstrap.ts b/packages/node-api/src/bootstrap.ts
index 8867f6c5c..d25cee9d9 100644
--- a/packages/node-api/src/bootstrap.ts
+++ b/packages/node-api/src/bootstrap.ts
@@ -7,6 +7,8 @@ import { Application } from 'express';
 import { assign, isObject, isFunction } from 'lodash';
 import buildDebug from 'debug';
 
+import { displayError, displayMessage, displayLink } from '@verdaccio/cli-ui';
+
 import {
   ConfigRuntime,
   Callback,
@@ -16,7 +18,6 @@ import {
 } from '@verdaccio/types';
 import { API_ERROR } from '@verdaccio/commons-api';
 import server from '@verdaccio/server';
-import { logger } from '@verdaccio/logger';
 
 export const keyPem = 'verdaccio-key.pem';
 export const certPem = 'verdaccio-cert.pem';
@@ -85,8 +86,8 @@ function unlinkAddressPath(addr) {
   }
 }
 
-function logHTTPSWarning(storageLocation) {
-  logger.fatal(
+function logHTTPSError(storageLocation) {
+  displayError(
     [
       'You have enabled HTTPS and need to specify either ',
       '    "https.key" and "https.cert" or ',
@@ -113,6 +114,7 @@ function logHTTPSWarning(storageLocation) {
       `    cert: ${resolveConfigPath(storageLocation, certPem)}`,
     ].join('\n')
   );
+  displayError(displayLink('https://verdaccio.org/docs/en/configuration#https'));
   process.exit(2);
 }
 
@@ -128,7 +130,8 @@ function handleHTTPS(app: Application, configPath: string, config: ConfigWithHtt
 
     // https must either have key and cert or a pfx and (optionally) a passphrase
     if (!((keyCertConfig.key && keyCertConfig.cert) || pfxConfig.pfx)) {
-      logHTTPSWarning(configPath);
+      logHTTPSError(configPath);
+      process.exit(1);
     }
 
     if (pfxConfig.pfx) {
@@ -149,8 +152,7 @@ function handleHTTPS(app: Application, configPath: string, config: ConfigWithHtt
     }
     return https.createServer(httpsOptions, app);
   } catch (err) {
-    // catch errors related to certificate loading
-    logger.fatal({ err: err }, 'cannot create server: @{err.message}');
+    displayError(`cannot create server: ${err.message}`);
     process.exit(2);
   }
 }
@@ -163,35 +165,32 @@ function listenDefaultCallback(
 ): void {
   webServer
     .listen(addr.port || addr.path, addr.host, (): void => {
-      // send a message for tests
+      // send a message for test
       if (isFunction(process.send)) {
         process.send({
           verdaccio_started: true,
         });
       }
+      const addressServer = `${
+        addr.path
+          ? URL.format({
+              protocol: 'unix',
+              pathname: addr.path,
+            })
+          : URL.format({
+              protocol: addr.proto,
+              hostname: addr.host,
+              port: addr.port,
+              pathname: '/',
+            })
+      }`;
+      displayMessage(`http address ${displayLink(addressServer)}`);
+      displayMessage(`${pkgName} / ${pkgVersion}`);
     })
     .on('error', function (err): void {
-      logger.fatal({ err: err }, 'cannot create server: @{err.message}');
+      displayError(`cannot create server: ${err.message}`);
       process.exit(2);
     });
-
-  logger.warn(
-    {
-      addr: addr.path
-        ? URL.format({
-            protocol: 'unix',
-            pathname: addr.path,
-          })
-        : URL.format({
-            protocol: addr.proto,
-            hostname: addr.host,
-            port: addr.port,
-            pathname: '/',
-          }),
-      version: pkgName + '/' + pkgVersion,
-    },
-    'http address - @{addr} - @{version}'
-  );
 }
 
 export { startVerdaccio, listenDefaultCallback };
diff --git a/packages/node-api/src/cli-utils.ts b/packages/node-api/src/cli-utils.ts
index 343a99e8c..ec66dc211 100644
--- a/packages/node-api/src/cli-utils.ts
+++ b/packages/node-api/src/cli-utils.ts
@@ -1,7 +1,7 @@
 import path from 'path';
 import semver from 'semver';
 
-const logger = require('@verdaccio/logger');
+import { displayLink, displayWarning } from '@verdaccio/cli-ui';
 
 export const DEFAULT_PORT = '4873';
 export const DEFAULT_PROTOCOL = 'http';
@@ -87,12 +87,11 @@ export function getListListenAddresses(argListen: string, configListen: any): an
       const parsedAddr = parseAddress(addr);
 
       if (!parsedAddr) {
-        logger.logger.warn(
-          { addr: addr },
-          'invalid address - @{addr}, we expect a port (e.g. "4873"),' +
-            ' host:port (e.g. "localhost:4873") or full url' +
-            ' (e.g. "http://localhost:4873/")'
+        displayWarning(
+          // eslint-disable-next-line max-len
+          `invalid address - ${addr}, we expect a port (e.g. "4873"), host:port (e.g. "localhost:4873") or full url '(e.g. "http://localhost:4873/")`
         );
+        displayWarning(displayLink('https://verdaccio.org/docs/en/configuration#listen-port'));
       }
 
       return parsedAddr;
diff --git a/packages/node-api/src/experiments.ts b/packages/node-api/src/experiments.ts
index 627b8d424..d785f162c 100644
--- a/packages/node-api/src/experiments.ts
+++ b/packages/node-api/src/experiments.ts
@@ -1,6 +1,4 @@
-import buildDebug from 'debug';
-
-const debug = buildDebug('verdaccio:runtime:flags');
+import { displayWarning, displayMessage } from '@verdaccio/cli-ui';
 
 export function displayExperimentsInfoBox(flags) {
   if (!flags) {
@@ -9,12 +7,15 @@ export function displayExperimentsInfoBox(flags) {
 
   const experimentList = Object.keys(flags);
   if (experimentList.length >= 1) {
-    debug(
+    displayWarning(
       '⚠️  experiments are enabled, we recommend do not use experiments in production, ' +
         'comment out this section to disable it'
     );
     experimentList.forEach((experiment) => {
-      debug(` - support for %o %o`, experiment, flags[experiment] ? 'is enabled' : ' is disabled');
+      displayMessage(
+        ` - support for ${experiment} ${flags[experiment] ? 'is enabled' : ' is disabled'}
+      `
+      );
     });
   }
 }
diff --git a/packages/node-api/src/https.ts b/packages/node-api/src/https.ts
deleted file mode 100644
index 5d9e32cf8..000000000
--- a/packages/node-api/src/https.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { resolveConfigPath } from './cli-utils';
-import { certPem, csrPem, keyPem } from './bootstrap';
-
-const logger = require('@verdaccio/logger');
-
-export function logHTTPSWarning(storageLocation) {
-  logger.logger.fatal(
-    [
-      'You have enabled HTTPS and need to specify either ',
-      '    "https.key", "https.cert" and "https.ca" or ',
-      '    "https.pfx" and optionally "https.passphrase" ',
-      'to run https server',
-      '',
-      // commands are borrowed from node.js docs
-      'To quickly create self-signed certificate, use:',
-      ' $ openssl genrsa -out ' + resolveConfigPath(storageLocation, keyPem) + ' 2048',
-      ' $ openssl req -new -sha256 -key ' +
-        resolveConfigPath(storageLocation, keyPem) +
-        ' -out ' +
-        resolveConfigPath(storageLocation, csrPem),
-      ' $ openssl x509 -req -in ' +
-        resolveConfigPath(storageLocation, csrPem) +
-        ' -signkey ' +
-        resolveConfigPath(storageLocation, keyPem) +
-        ' -out ' +
-        resolveConfigPath(storageLocation, certPem),
-      '',
-      'And then add to config file (' + storageLocation + '):',
-      '  https:',
-      `    key: ${resolveConfigPath(storageLocation, keyPem)}`,
-      `    cert: ${resolveConfigPath(storageLocation, certPem)}`,
-      `    ca: ${resolveConfigPath(storageLocation, csrPem)}`,
-    ].join('\n')
-  );
-  process.exit(2);
-}
diff --git a/packages/node-api/test/node-api.spec.ts b/packages/node-api/test/node-api.spec.ts
index fe18ac445..c11743935 100644
--- a/packages/node-api/test/node-api.spec.ts
+++ b/packages/node-api/test/node-api.spec.ts
@@ -6,22 +6,9 @@ import selfsigned from 'selfsigned';
 import { configExample } from '@verdaccio/mock';
 import { parseConfigFile } from '@verdaccio/config';
 
-import { logger } from '@verdaccio/logger';
-
 import { startVerdaccio } from '../src';
 import { DEFAULT_DOMAIN, DEFAULT_PROTOCOL } from '../src/cli-utils';
-
-jest.mock('@verdaccio/logger', () => ({
-  setup: jest.fn(),
-  logger: {
-    child: jest.fn(),
-    debug: jest.fn(),
-    trace: jest.fn(),
-    warn: jest.fn(),
-    error: jest.fn(),
-    fatal: jest.fn(),
-  },
-}));
+const mockProcess = require('jest-mock-process');
 
 describe('startServer via API', () => {
   const parseConfigurationFile = (name) => {
@@ -144,26 +131,19 @@ describe('startServer via API', () => {
     });
 
     test('should provide all HTTPS server fails', async (done) => {
+      let mockExit = mockProcess.mockProcessExit();
       const store = path.join(__dirname, 'partials/store');
       const serverName = 'verdaccio-test';
       const version = '1.0.0';
       const address = 'https://www.domain.com:443';
-      const realProcess = process;
 
-      const conf = configExample();
+      const conf = configExample({});
       conf.https = {};
       // save process to catch exist
-      const exitMock = jest.fn();
-      // @ts-ignore
-      global.process = { ...realProcess, exit: exitMock };
       await startVerdaccio(conf, address, store, version, serverName, () => {
-        expect(logger.fatal).toHaveBeenCalled();
-        expect(logger.fatal).toHaveBeenCalledTimes(2);
+        expect(mockExit).toHaveBeenCalledWith(2);
         done();
       });
-      expect(exitMock).toHaveBeenCalledWith(2);
-      // restore process
-      global.process = realProcess;
     });
 
     test('should start a https server with key and cert', async (done) => {
diff --git a/packages/node-api/test/node-api.utils.spec.ts b/packages/node-api/test/node-api.utils.spec.ts
index f0a226223..c0663e9ea 100644
--- a/packages/node-api/test/node-api.utils.spec.ts
+++ b/packages/node-api/test/node-api.utils.spec.ts
@@ -6,18 +6,6 @@ import {
   getListListenAddresses,
 } from '../src/cli-utils';
 
-jest.mock('@verdaccio/logger', () => ({
-  setup: jest.fn(),
-  logger: {
-    child: jest.fn(),
-    debug: jest.fn(),
-    trace: jest.fn(),
-    warn: jest.fn(),
-    error: jest.fn(),
-    fatal: jest.fn(),
-  },
-}));
-
 describe('getListListenAddresses test', () => {
   test('should return no address if a single address is wrong', () => {
     // @ts-ignore
diff --git a/packages/node-api/tsconfig.json b/packages/node-api/tsconfig.json
index c0fc3361a..7b48be825 100644
--- a/packages/node-api/tsconfig.json
+++ b/packages/node-api/tsconfig.json
@@ -21,6 +21,9 @@
     },
     {
       "path": "../utils"
+    },
+    {
+      "path": "../core/cli-ui"
     }
   ]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f4fa46899..8a5a708d5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -284,16 +284,16 @@ importers:
       verdaccio-htpasswd: workspace:10.0.0-alpha.6
   packages/cli:
     dependencies:
+      '@verdaccio/cli-ui': link:../core/cli-ui
       '@verdaccio/config': link:../config
-      '@verdaccio/logger': link:../logger
       '@verdaccio/node-api': link:../node-api
       commander: 6.2.0
       envinfo: 7.4.0
       kleur: 3.0.3
       semver: 7.3.2
     specifiers:
+      '@verdaccio/cli-ui': workspace:5.0.0-alpha.3
       '@verdaccio/config': workspace:5.0.0-alpha.3
-      '@verdaccio/logger': workspace:5.0.0-alpha.3
       '@verdaccio/node-api': workspace:5.0.0-alpha.6
       commander: 6.2.0
       envinfo: 7.4.0
@@ -323,6 +323,13 @@ importers:
       minimatch: 3.0.4
       mkdirp: 0.5.5
       yup: ^0.29.3
+  packages/core/cli-ui:
+    dependencies:
+      chalk: 4.1.0
+      terminal-link: 2.1.1
+    specifiers:
+      chalk: ^4.1.0
+      terminal-link: ^2.1.1
   packages/core/commons-api:
     dependencies:
       http-errors: 1.8.0
@@ -531,9 +538,9 @@ importers:
       supertest: ^4.0.2
   packages/node-api:
     dependencies:
+      '@verdaccio/cli-ui': link:../core/cli-ui
       '@verdaccio/commons-api': link:../core/commons-api
       '@verdaccio/config': link:../config
-      '@verdaccio/logger': link:../logger
       '@verdaccio/server': link:../server
       core-js: 3.6.5
       debug: 4.2.0
@@ -542,15 +549,17 @@ importers:
     devDependencies:
       '@verdaccio/mock': link:../mock
       '@verdaccio/types': link:../core/types
+      jest-mock-process: 1.4.0
     specifiers:
+      '@verdaccio/cli-ui': workspace:5.0.0-alpha.3
       '@verdaccio/commons-api': workspace:10.0.0-alpha.3
       '@verdaccio/config': workspace:5.0.0-alpha.3
-      '@verdaccio/logger': workspace:5.0.0-alpha.3
       '@verdaccio/mock': workspace:5.0.0-alpha.3
       '@verdaccio/server': workspace:5.0.0-alpha.6
       '@verdaccio/types': workspace:10.0.0-alpha.3
       core-js: ^3.6.5
       debug: ^4.2.0
+      jest-mock-process: ^1.4.0
       lodash: ^4.17.20
       selfsigned: 1.10.7
   packages/plugins/active-directory:
@@ -1636,7 +1645,6 @@ packages:
     resolution:
       integrity: sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
   /@babel/helper-plugin-utils/7.12.13:
-    dev: true
     resolution:
       integrity: sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA==
   /@babel/helper-regex/7.10.5:
@@ -2290,7 +2298,7 @@ packages:
       integrity: sha512-XyJmZidNfofEkqFV5VC/bLabGmO5QzenPO/YOfGuEbgU+2sSwMmio3YLb4WtBgcmmdwZHyVyv8on77IUjQ5Gvg==
   /@babel/plugin-syntax-async-generators/7.8.4:
     dependencies:
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2299,7 +2307,7 @@ packages:
   /@babel/plugin-syntax-async-generators/7.8.4_@babel+core@7.11.4:
     dependencies:
       '@babel/core': 7.11.4
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2422,7 +2430,7 @@ packages:
       integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
   /@babel/plugin-syntax-export-namespace-from/7.8.3:
     dependencies:
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2431,7 +2439,7 @@ packages:
   /@babel/plugin-syntax-export-namespace-from/7.8.3_@babel+core@7.11.4:
     dependencies:
       '@babel/core': 7.11.4
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2475,7 +2483,7 @@ packages:
       integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
   /@babel/plugin-syntax-json-strings/7.8.3:
     dependencies:
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2484,7 +2492,7 @@ packages:
   /@babel/plugin-syntax-json-strings/7.8.3_@babel+core@7.11.4:
     dependencies:
       '@babel/core': 7.11.4
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2545,7 +2553,7 @@ packages:
       integrity: sha512-d4HM23Q1K7oq/SLNmG6mRt85l2csmQ0cHRaxRXjKW0YFdEXqlZ5kzFQKH5Uc3rDJECgu+yCRgPkG04Mm98R/1g==
   /@babel/plugin-syntax-logical-assignment-operators/7.10.4:
     dependencies:
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2554,7 +2562,7 @@ packages:
   /@babel/plugin-syntax-logical-assignment-operators/7.10.4_@babel+core@7.11.4:
     dependencies:
       '@babel/core': 7.11.4
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2580,7 +2588,7 @@ packages:
       integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
   /@babel/plugin-syntax-nullish-coalescing-operator/7.8.3:
     dependencies:
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2589,7 +2597,7 @@ packages:
   /@babel/plugin-syntax-nullish-coalescing-operator/7.8.3_@babel+core@7.11.4:
     dependencies:
       '@babel/core': 7.11.4
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2615,7 +2623,7 @@ packages:
       integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
   /@babel/plugin-syntax-numeric-separator/7.10.4:
     dependencies:
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2624,7 +2632,7 @@ packages:
   /@babel/plugin-syntax-numeric-separator/7.10.4_@babel+core@7.11.4:
     dependencies:
       '@babel/core': 7.11.4
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2650,7 +2658,7 @@ packages:
       integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
   /@babel/plugin-syntax-object-rest-spread/7.8.3:
     dependencies:
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2659,7 +2667,7 @@ packages:
   /@babel/plugin-syntax-object-rest-spread/7.8.3_@babel+core@7.10.5:
     dependencies:
       '@babel/core': 7.10.5
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2668,7 +2676,7 @@ packages:
   /@babel/plugin-syntax-object-rest-spread/7.8.3_@babel+core@7.11.4:
     dependencies:
       '@babel/core': 7.11.4
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2694,7 +2702,7 @@ packages:
       integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
   /@babel/plugin-syntax-optional-catch-binding/7.8.3:
     dependencies:
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2703,7 +2711,7 @@ packages:
   /@babel/plugin-syntax-optional-catch-binding/7.8.3_@babel+core@7.11.4:
     dependencies:
       '@babel/core': 7.11.4
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2729,7 +2737,7 @@ packages:
       integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
   /@babel/plugin-syntax-optional-chaining/7.8.3:
     dependencies:
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2738,7 +2746,7 @@ packages:
   /@babel/plugin-syntax-optional-chaining/7.8.3_@babel+core@7.11.4:
     dependencies:
       '@babel/core': 7.11.4
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.12.13
     dev: false
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -9137,7 +9145,6 @@ packages:
     resolution:
       integrity: sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
   /base64-js/1.5.1:
-    dev: true
     resolution:
       integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
   /base64id/2.0.0:
@@ -9291,7 +9298,7 @@ packages:
       integrity: sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==
   /bl/4.0.3:
     dependencies:
-      buffer: 5.6.0
+      buffer: 5.7.1
       inherits: 2.0.4
       readable-stream: 3.6.0
     resolution:
@@ -9620,7 +9627,6 @@ packages:
     dependencies:
       base64-js: 1.5.1
       ieee754: 1.2.1
-    dev: true
     resolution:
       integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
   /builtin-modules/3.1.0:
@@ -16373,7 +16379,6 @@ packages:
     resolution:
       integrity: sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
   /ieee754/1.2.1:
-    dev: true
     resolution:
       integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
   /iferr/0.1.5:
@@ -17718,6 +17723,12 @@ packages:
       node: '>= 10.14.2'
     resolution:
       integrity: sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==
+  /jest-mock-process/1.4.0:
+    dev: true
+    peerDependencies:
+      jest: '>=23.4 <27'
+    resolution:
+      integrity: sha512-3LM1TyEaRKRjh/x9rZPmuy28r7q8cgNkHYcrPWtxXT3ZzPPS+bKNs2ysb8BJPVB41X5yM1sMtatvE5z2XJ0S/w==
   /jest-mock/26.6.2:
     dependencies:
       '@jest/types': 26.6.2
@@ -24397,7 +24408,7 @@ packages:
       integrity: sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
   /slice-ansi/3.0.0:
     dependencies:
-      ansi-styles: 4.2.1
+      ansi-styles: 4.3.0
       astral-regex: 2.0.0
       is-fullwidth-code-point: 3.0.0
     dev: false
@@ -25485,7 +25496,6 @@ packages:
     dependencies:
       has-flag: 4.0.0
       supports-color: 7.2.0
-    dev: true
     engines:
       node: '>=8'
     resolution:
@@ -25698,7 +25708,6 @@ packages:
     dependencies:
       ansi-escapes: 4.3.1
       supports-hyperlinks: 2.1.0
-    dev: true
     engines:
       node: '>=8'
     resolution:
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 74d35b4fd..82f3777ab 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -6,6 +6,7 @@
     "noImplicitAny": false,
     "strict": true,
     "declaration": true,
+    "jsx": "react",
     "strictNullChecks": true,
     "types": ["node", "jest", "express"],
     "resolveJsonModule": true,