chore(release): 1.0.0

feat(de-translations): added de-DE translations to the UI (#441 )
feat: spanish translations to UI (#440 )
2020-03-13 07:35:00 +01:00 · 2020-03-12 11:40:12 +01:00 · 2020-03-09 07:01:01 +01:00 · 2020-03-08 16:45:07 +01:00 · 2020-03-03 09:32:26 +01:00 · 2020-03-02 21:29:16 +01:00
91 changed files with 1500 additions and 942 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,15 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+## [1.0.0](https://github.com/verdaccio/ui/compare/v0.3.13...v1.0.0) (2020-03-13)
+
+
+### Features
+
+* **de-translations:** added de-DE translations to the UI ([#441](https://github.com/verdaccio/ui/issues/441)) ([e27d59b](https://github.com/verdaccio/ui/commit/e27d59bff7039473e566090fa0f825f7e462aa4e))
+* spanish translations to UI ([#440](https://github.com/verdaccio/ui/issues/440)) ([0abe1ef](https://github.com/verdaccio/ui/commit/0abe1ef41ca93b900ddda72e2d873ee52078221c))
+* **i18n:** added i18next for user interface translations  ([#432](https://github.com/verdaccio/ui/issues/432)) ([7428384](https://github.com/verdaccio/ui/commit/7428384b55e6089dbe45e6b216eee0b670dff576))
+
 ### [0.3.13](https://github.com/verdaccio/ui/compare/v0.3.12...v0.3.13) (2020-02-02)


--- a/i18n/config.ts
+++ b/i18n/config.ts
@@ -0,0 +1,40 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import translationEN from './translations/en-US.json';
+import translationPT from './translations/pt-BR.json';
+import translationES from './translations/es-ES.json';
+import translationDE from './translations/de-DE.json';
+
+i18n
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    // in case window.VEDACCIO_LANGUAGE is undefined,it will fall back to 'en-US'
+    lng: window?.__VERDACCIO_BASENAME_UI_OPTIONS?.language,
+    fallbackLng: 'en-US',
+    whitelist: ['en-US', 'pt-BR', 'es-ES', 'de-DE'],
+    load: 'currentOnly',
+    resources: {
+      'en-US': {
+        translation: translationEN,
+      },
+      'pt-BR': {
+        translation: translationPT,
+      },
+      'es-ES': {
+        translation: translationES,
+      },
+      'de-DE': {
+        translation: translationDE,
+      },
+    },
+    debug: false,
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  });
+
+export default i18n;
--- a/i18n/translations/de-DE.json
+++ b/i18n/translations/de-DE.json
@@ -0,0 +1,138 @@
+{
+    "copy-to-clipboard": "In die Zwischenablage kopieren",
+    "author-anonymous": "Anonymus",
+    "action-bar-action": {
+        "visit-home-page": "Zur Homepage",
+        "open-an-issue": "Einen Fehler melden",
+        "download-tarball": "Archiv (Tarball) herunterladen"
+    },
+    "dialog": {
+        "registry-info": {
+            "title": "Registrierungsinformationen"
+        }
+    },
+    "header": {
+        "documentation": "Dokumentation",
+        "registry-info": "Registrierungsinformationen",
+        "greetings": "Hallo "
+    },
+    "search": {
+        "packages": "Pakete suchen"
+    },
+    "auto-complete": {
+        "loading": "wird geladen...",
+        "no-results-found": "Kein Ergebnis gefunden"
+    },
+    "tab": {
+        "uplinks": "Uplinks",
+        "versions": "Versionen",
+        "dependencies": "Abhängigkeiten",
+        "readme": "Liesmich"
+    },
+    "uplinks": {
+        "title": "Uplinks",
+        "no-items": "{{name}} hat keine Uplinks."
+    },
+    "versions": {
+        "current-tags": "Aktuelle Tags",
+        "version-history": "Versionsgeschichte",
+        "not-available": "Nicht verfügbar"
+    },
+    "package": {
+        "published-on": "Veröffentlicht am {{time}} •",
+        "version": "v{{version}}",
+        "visit-home-page": "Zur Homepage",
+        "homepage": "Homepage",
+        "open-an-issue": "Einen Fehler melden",
+        "bugs": "Fehler",
+        "download": "{{what}} herunterladen",
+        "the-tar-file": "die tar-Datei",
+        "tarball": "Archiv (Tarball)"
+    },
+    "dependencies": {
+        "has-no-dependencies": "{{package}} hat keine Abhängigkeiten",
+        "dependency-block": "{{package}}@{{version}}"
+    },
+    "form": {
+        "username": "Benutzername",
+        "password": "Passwort"
+    },
+    "form-placeholder": {
+        "username": "Dein Benutzername",
+        "password": "Dein sicheres Passwort"
+    },
+    "form-validation": {
+        "required-field": "Dieses Feld ist erforderlich",
+        "required-min-length": "Dieses Feld erfordert eine Mindestlänge von {{length}}",
+        "unable-to-sign-in": "Anmeldung nicht möglich",
+        "username-or-password-cant-be-empty": "Benutzername und Passwort dürfen nicht leer sein!"
+    },
+    "help": {
+        "title": "Noch kein Paket publiziert.",
+        "sub-title": "Um dein erstes Paket einfach zu publizieren:",
+        "first-step": "1. Einloggen",
+        "first-step-command-line": "npm adduser --registry {{registryUrl}}",
+        "second-step": "2. Publizieren",
+        "second-step-command-line": "npm publish --registry {{registryUrl}}",
+        "third-step": "3. Diese Seite aktualisieren."
+    },
+    "sidebar": {
+        "detail": {
+            "latest-version": "Letzte v{{version}}",
+            "version": "v{{version}}"
+        },
+        "installation": {
+            "title": "Installierung",
+            "install-using-yarn": "Mit yarn installieren",
+            "install-using-yarn-command": "yarn add {{packageName}}",
+            "install-using-npm": "Mit npm installieren",
+            "install-using-npm-command": "npm install {{packageName}}",
+            "install-using-pnpm": "Mit pnpm installieren",
+            "install-using-pnpm-command": "pnpm install {{packageName}}"
+        },
+        "repository": {
+            "title": "Repository"
+        },
+        "author": {
+            "title": "Autor(in)"
+        },
+        "distribution": {
+            "title": "Neueste Distribution",
+            "license": "Lizenz",
+            "size": "Größe",
+            "file-count": "Anzahl der Dateien"
+        },
+        "maintainers": {
+            "title": "Maintainer"
+        },
+        "contributors": {
+            "title": "Contributor"
+        },
+        "engines": {
+            "npm-version": "NPM Version",
+            "node-js": "NODE JS"
+        }
+    },
+    "footer": {
+        "powered-by": "Unterstützt von",
+        "made-with-love-on": "Gemacht mit <0>♥</0> in"
+    },
+    "button": {
+        "close": "Schließen",
+        "cancel": "Abbrechen",
+        "login": "Einloggen",
+        "logout": "Ausloggen",
+        "go-to-the-home-page": "Zur Homepage",
+        "learn-more": "Mehr erfahren",
+        "fund-this-package": "Dieses Paket <0>finanzieren</0>"
+    },
+    "error": {
+        "unspecific": "Etwas ist schief gelaufen.",
+        "404": {
+            "page-not-found": "404 - Seite nicht gefunden",
+            "sorry-we-could-not-find-it": "Entschuldigung, wir konnten es nicht finden..."
+        },
+        "app-context-not-correct-used": "Der App-Kontext wurde nicht korrekt verwendet",
+        "package-meta-is-required-at-detail-context": "packageMeta wird bei DetailContext benötigt"
+    }
+}
--- a/i18n/translations/en-US.json
+++ b/i18n/translations/en-US.json
@@ -0,0 +1,138 @@
+{
+    "copy-to-clipboard": "Copy to clipboard",
+    "author-anonymous": "Anonymous",
+    "action-bar-action": {
+        "visit-home-page": "Visit homepage",
+        "open-an-issue": "Open an issue",
+        "download-tarball": "Download tarball"
+    },
+    "dialog": {
+        "registry-info": {
+            "title": "Register Info"
+        }
+    },
+    "header": {
+        "documentation": "Documentation",
+        "registry-info": "Registry Information",
+        "greetings": "Hi "
+    },
+    "search": {
+        "packages": "Search Packages"
+    },
+    "auto-complete": {
+        "loading": "Loading...",
+        "no-results-found": "No results found"
+    },
+    "tab": {
+        "uplinks": "Uplinks",
+        "versions": "Versions",
+        "dependencies": "Dependencies",
+        "readme": "Readme"
+    },
+    "uplinks": {
+        "title": "Uplinks",
+        "no-items": "{{name}} has no uplinks."
+    },
+    "versions": {
+        "current-tags": "Current Tags",
+        "version-history": "Version history",
+        "not-available": "Not available"
+    },
+    "package": {
+        "published-on": "Published on {{time}} •",
+        "version": "v{{version}}",
+        "visit-home-page": "Visit homepage",
+        "homepage": "Homepage",
+        "open-an-issue": "Open an issue",
+        "bugs": "Bugs",
+        "download": "Download {{what}}",
+        "the-tar-file": "the tar file",
+        "tarball": "Tarball"
+    },
+    "dependencies": {
+        "has-no-dependencies": "{{package}} has no dependencies.",
+        "dependency-block": "{{package}}@{{version}}"
+    },
+    "form": {
+        "username": "Username",
+        "password": "Password"
+    },
+    "form-placeholder": {
+        "username": "Your username",
+        "password": "Your strong password"
+    },
+    "form-validation": {
+        "required-field": "This field is required",
+        "required-min-length": "This field required the min length of {{length}}",
+        "unable-to-sign-in": "Unable to sign in",
+        "username-or-password-cant-be-empty": "Username or password can't be empty!"
+    },
+    "help": {
+        "title": "No Package Published Yet.",
+        "sub-title": "To publish your first package just:",
+        "first-step": "1. Login",
+        "first-step-command-line": "npm adduser --registry {{registryUrl}}",
+        "second-step": "2. Publish",
+        "second-step-command-line": "npm publish --registry {{registryUrl}}",
+        "third-step": "3. Refresh this page."
+    },
+    "sidebar": {
+        "detail": {
+            "latest-version": "Latest v{{version}}",
+            "version": "v{{version}}"
+        },
+        "installation": {
+            "title": "Installation",
+            "install-using-yarn": "Install using yarn",
+            "install-using-yarn-command": "yarn add {{packageName}}",
+            "install-using-npm": "Install using npm",
+            "install-using-npm-command": "npm install {{packageName}}",
+            "install-using-pnpm": "Install using pnpm",
+            "install-using-pnpm-command": "pnpm install {{packageName}}"
+        },
+        "repository": {
+            "title": "Repository"
+        },
+        "author": {
+            "title": "Author"
+        },
+        "distribution": {
+            "title": "Latest Distribution",
+            "license": "License",
+            "size": "Size",
+            "file-count": "file count"
+        },
+        "maintainers": {
+            "title": "Maintainers"
+        },
+        "contributors": {
+            "title": "Contributors"
+        },
+        "engines": {
+            "npm-version": "NPM Version",
+            "node-js": "NODE JS"
+        }
+    },
+    "footer": {
+        "powered-by": "Powered by",
+        "made-with-love-on": "Made with <0>♥</0> on"
+    },
+    "button": {
+        "close": "Close",
+        "cancel": "Cancel",
+        "login": "Login",
+        "logout": "Logout",
+        "go-to-the-home-page": "Go to the home page",
+        "learn-more": "Learn More",
+        "fund-this-package": "<0>Fund</0> this package"
+    },
+    "error": {
+        "unspecific": "Something went wrong.",
+        "404": {
+            "page-not-found": "404 - Page not found",
+            "sorry-we-could-not-find-it": "Sorry, we couldn't find it..."
+        },
+        "app-context-not-correct-used": "The app context was not correct used",
+        "package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
+    }
+}
--- a/i18n/translations/es-ES.json
+++ b/i18n/translations/es-ES.json
@@ -0,0 +1,138 @@
+{
+    "copy-to-clipboard": "Copiar al portapapeles",
+    "author-anonymous": "Anónimo",
+    "action-bar-action": {
+        "visit-home-page": "Visitar página principal",
+        "open-an-issue": "Reportar un error",
+        "download-tarball": "Descargar libreria"
+    },
+    "dialog": {
+        "registry-info": {
+            "title": "Información del Registro"
+        }
+    },
+    "header": {
+        "documentation": "Documentación",
+        "registry-info": "Información del Registro",
+        "greetings": "Hola "
+    },
+    "search": {
+        "packages": "Buscar paquetes"
+    },
+    "auto-complete": {
+        "loading": "Cargando...",
+        "no-results-found": "Sin resultados encontrados"
+    },
+    "tab": {
+        "uplinks": "Remoto",
+        "versions": "Versiones",
+        "dependencies": "Dependencias",
+        "readme": "Léeme"
+    },
+    "uplinks": {
+        "title": "Remoto",
+        "no-items": "{{name}} not tiene remotos."
+    },
+    "versions": {
+        "current-tags": "Etiquetas actuales",
+        "version-history": "Historial de versiones",
+        "not-available": "No disponible"
+    },
+    "package": {
+        "published-on": "Publicado en {{time}} •",
+        "version": "v{{version}}",
+        "visit-home-page": "Ir a la página principal",
+        "homepage": "Página pricinpal",
+        "open-an-issue": "Reportar un problema",
+        "bugs": "Errores",
+        "download": "Descargar {{what}}",
+        "the-tar-file": "el archivo tar",
+        "tarball": "Libreria"
+    },
+    "dependencies": {
+        "has-no-dependencies": "{{package}} no tiene dependencias.",
+        "dependency-block": "{{package}}@{{version}}"
+    },
+    "form": {
+        "username": "Usuario",
+        "password": "Contraseña"
+    },
+    "form-placeholder": {
+        "username": "Tu usuario",
+        "password": "Tu fuerte conntraseña"
+    },
+    "form-validation": {
+        "required-field": "Este campo es requerido",
+        "required-min-length": "Este campo es requerido y la mínima longitud es {{length}}",
+        "unable-to-sign-in": "No se ha podido iniciar sesión",
+        "username-or-password-cant-be-empty": "Nombre de usuario o contraseña no puede estar vacio!"
+    },
+    "help": {
+        "title": "Ningún paquete ha sido publicado aun.",
+        "sub-title": "Para publicar tu primer paquete:",
+        "first-step": "1. Inicia sesión",
+        "first-step-command-line": "npm adduser --registry {{registryUrl}}",
+        "second-step": "2. Publica",
+        "second-step-command-line": "npm publish --registry {{registryUrl}}",
+        "third-step": "3. Refresca la página."
+    },
+    "sidebar": {
+        "detail": {
+            "latest-version": "Última v{{version}}",
+            "version": "v{{version}}"
+        },
+        "installation": {
+            "title": "Instalación",
+            "install-using-yarn": "Instala usando yarn",
+            "install-using-yarn-command": "yarn add {{packageName}}",
+            "install-using-npm": "Instala usando npm",
+            "install-using-npm-command": "npm install {{packageName}}",
+            "install-using-pnpm": "Instala usando pnpm",
+            "install-using-pnpm-command": "pnpm install {{packageName}}"
+        },
+        "repository": {
+            "title": "Repositorio"
+        },
+        "author": {
+            "title": "Autor"
+        },
+        "distribution": {
+            "title": "Última distribución",
+            "license": "Licencia",
+            "size": "Tamaño",
+            "file-count": "archivo cuenta"
+        },
+        "maintainers": {
+            "title": "Mantenedores"
+        },
+        "contributors": {
+            "title": "Colaboradores"
+        },
+        "engines": {
+            "npm-version": "Version NPM",
+            "node-js": "NODE JS"
+        }
+    },
+    "footer": {
+        "powered-by": "Hecho con",
+        "made-with-love-on": "Hecho con <0>♥</0> on"
+    },
+    "button": {
+        "close": "Cerrar",
+        "cancel": "Cancelar",
+        "login": "Iniciar sesión",
+        "logout": "Cerrar sesión",
+        "go-to-the-home-page": "Ir a la página principal",
+        "learn-more": "Aprender más",
+        "fund-this-package": "<0>Donar</0> a este paquete"
+    },
+    "error": {
+        "unspecific": "Algo ha salido mal.",
+        "404": {
+            "page-not-found": "404 - Paquete no encontrado",
+            "sorry-we-could-not-find-it": "Lo siento, no hemos podido encontrarlo..."
+        },
+        "app-context-not-correct-used": "El contexto de la aplicación no fue correctamente usado",
+        "package-meta-is-required-at-detail-context": "packageMeta es requerido en DetailContext"
+    }
+}
--- a/i18n/translations/pt-BR.json
+++ b/i18n/translations/pt-BR.json
@@ -0,0 +1,138 @@
+{
+    "copy-to-clipboard": "Copiar para área de transferência",
+    "author-anonymous": "Anônimo(a)",
+    "action-bar-action": {
+        "visit-home-page": "Visitar a página inicial",
+        "open-an-issue": "Criar um incidente",
+        "download-tarball": "Baixar Tarball"
+    },
+    "dialog": {
+        "registry-info": {
+            "title": "Informações do Registro"
+        }
+    },
+    "header": {
+        "documentation": "Documentação",
+        "registry-info": "Informações do Registro",
+        "greetings": "Oi "
+    },
+    "search": {
+        "packages": "Pesquisar Pacotes"
+    },
+    "auto-complete": {
+        "loading": "Carregando...",
+        "no-results-found": "Nenhum resultado encontrado"
+    },
+    "tab": {
+        "uplinks": "Uplinks",
+        "versions": "Versões",
+        "dependencies": "Dependências",
+        "readme": "Leia-me"
+    },
+    "uplinks": {
+        "title": "Uplinks",
+        "no-items": "{{name}} não tem uplinks."
+    },
+    "versions": {
+        "current-tags": "Tags atuais",
+        "version-history": "Histórico de versões",
+        "not-available": "Não disponível"
+    },
+    "package": {
+        "published-on": "Publicado em {{time}} •",
+        "version": "v{{version}}",
+        "visit-home-page": "Visitar a página inicial",
+        "homepage": "Página inicial",
+        "open-an-issue": "Criar um incidente",
+        "bugs": "Erros",
+        "download": "Baixar {{what}}",
+        "the-tar-file": "o arquivo tar",
+        "tarball": "Tarball"
+    },
+    "dependencies": {
+        "has-no-dependencies": "{{package}} não tem dependências.",
+        "dependency-block": "{{package}}@{{version}}"
+    },
+    "form": {
+        "username": "Nome do usuário",
+        "password": "Senha"
+    },
+    "form-placeholder": {
+        "username": "O seu nome",
+        "password": "A sua senha forte"
+    },
+    "form-validation": {
+        "required-field": "Este campo é obrigatório",
+        "required-min-length": "Este campo requer o mínimo de {{length}} caracteres",
+        "unable-to-sign-in": "Não foi possível fazer login",
+        "username-or-password-cant-be-empty": "Nome de usuário ou senha não podem estar vazios!"
+    },
+    "help": {
+        "title": "Nenhum pacote publicado ainda.",
+        "sub-title": "Para publicar seu primeiro pacote apenas:",
+        "first-step": "1. Faça login",
+        "first-step-command-line": "npm adduser --registry {{registryUrl}}",
+        "second-step": "2. Publique",
+        "second-step-command-line": "npm publish --registry {{registryUrl}}",
+        "third-step": "3. Atualize esta página."
+    },
+    "sidebar": {
+        "detail": {
+            "latest-version": "Última versão: v{{version}}",
+            "version": "v{{version}}"
+        },
+        "installation": {
+            "title": "Instalação",
+            "install-using-yarn": "Instale usando yarn",
+            "install-using-yarn-command": "yarn add {{packageName}}",
+            "install-using-npm": "Instale usando npm",
+            "install-using-npm-command": "npm install {{packageName}}",
+            "install-using-pnpm": "Instale usando pnpm",
+            "install-using-pnpm-command": "pnpm install {{packageName}}"
+        },
+        "repository": {
+            "title": "Repositório"
+        },
+        "author": {
+            "title": "Autor(a)"
+        },
+        "distribution": {
+            "title": "Distribuição mais recente",
+            "license": "Licença",
+            "size": "Tamanho",
+            "file-count": "Contagem de arquivos"
+        },
+        "maintainers": {
+            "title": "Mantenedores(as)"
+        },
+        "contributors": {
+            "title": "Contribuidores(as)"
+        },
+        "engines": {
+            "npm-version": "Versão NPM",
+            "node-js": "NODE JS"
+        }
+    },
+    "footer": {
+        "powered-by": "Distribuído por",
+        "made-with-love-on": "Feito com amor <0>♥</0> no(a)"
+    },
+    "button": {
+        "close": "Fechar",
+        "cancel": "Cancelar",
+        "login": "Conectar",
+        "logout": "Desconectar",
+        "go-to-the-home-page": "Ir para a página inicial",
+        "learn-more": "Leia mais",
+        "fund-this-package": "<0>Financie</0> este pacote"
+    },
+    "error": {
+        "unspecific": "Algo deu errado.",
+        "404": {
+            "page-not-found": "404 - Página não encontrada",
+            "sorry-we-could-not-find-it": "Desculpe, não conseguimos encontrar..."
+        },
+        "app-context-not-correct-used": "O contexto do aplicativo não foi usado corretamente",
+        "package-meta-is-required-at-detail-context": "packageMeta é requerido em DetailContext"
+    }
+}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@verdaccio/ui-theme",
-  "version": "0.3.13",
+  "version": "1.0.0",
  "description": "Verdaccio User Interface",
  "author": {
    "name": "Verdaccio Core Team",
@@ -15,7 +15,7 @@
  "devDependencies": {
    "@babel/plugin-proposal-nullish-coalescing-operator": "7.8.0",
    "@babel/plugin-proposal-optional-chaining": "7.8.0",
-    "@commitlint/cli": "8.3.4",
+    "@commitlint/cli": "8.3.5",
    "@commitlint/config-conventional": "8.3.4",
    "@emotion/core": "10.0.22",
    "@emotion/styled": "10.0.23",
@@ -71,6 +71,7 @@
    "github-markdown-css": "3.0.1",
    "html-webpack-plugin": "3.2.0",
    "husky": "3.1.0",
+    "i18next": "19.1.0",
    "identity-obj-proxy": "3.0.0",
    "in-publish": "2.0.0",
    "jest": "24.9.0",
@@ -96,9 +97,10 @@
    "puppeteer": "2.0.0",
    "react": "16.12.0",
    "react-autosuggest": "9.4.3",
-    "react-dom": "16.12.0",
+    "react-dom": "16.13.0",
    "react-hook-form": "3.29.4",
    "react-hot-loader": "4.12.18",
+    "react-i18next": "11.3.1",
    "react-router-dom": "5.1.2",
    "request": "2.88.0",
    "resolve-url-loader": "3.1.1",
@@ -138,7 +140,7 @@
  "bundlesize": [
    {
      "path": "./static/vendors.*.js",
-      "maxSize": "185 kB"
+      "maxSize": "200 kB"
    },
    {
      "path": "./static/main.*.js",
--- a/partials/storage/jquery/package.json
+++ b/partials/storage/jquery/package.json
@@ -4976,8 +4976,12 @@
 	"_attachments": {
 		"jquery-1.5.1.tgz": {
 			"shasum": "2ae2d661e906c1a01e044a71bb5b2743942183e5"
+		},
+		"jquery-3.3.1.tgz": {
+			"shasum": "958ce29e81c9790f31be7792df5d4d95fc57fbca"
 		}
 	},
-	"_rev": "60-fed4915c27b9c1e6",
-	"readme": "# jQuery\n\n> jQuery is a fast, small, and feature-rich JavaScript library.\n\nFor information on how to get started and how to use jQuery, please see [jQuery's documentation](http://api.jquery.com/).\nFor source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery).\n\nIf upgrading, please see the [blog post for 3.3.1](https://blog.jquery.com/2017/03/20/jquery-3.3.1-now-available/). This includes notable differences from the previous version and a more readable changelog.\n\n## Including jQuery\n\nBelow are some of the most common ways to include jQuery.\n\n### Browser\n\n#### Script tag\n\n```html\n<script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n```\n\n#### Babel\n\n[Babel](http://babeljs.io/) is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.\n\n```js\nimport $ from \"jquery\";\n```\n\n#### Browserify/Webpack\n\nThere are several ways to use [Browserify](http://browserify.org/) and [Webpack](https://webpack.github.io/). For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this...\n\n```js\nvar $ = require(\"jquery\");\n```\n\n#### AMD (Asynchronous Module Definition)\n\nAMD is a module format built for the browser. For more information, we recommend [require.js' documentation](http://requirejs.org/docs/whyamd.html).\n\n```js\ndefine([\"jquery\"], function($) {\n\n});\n```\n\n### Node\n\nTo include jQuery in [Node](nodejs.org), first install with npm.\n\n```sh\nnpm install jquery\n```\n\nFor jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/tmpvar/jsdom). This can be useful for testing purposes.\n\n```js\nrequire(\"jsdom\").env(\"\", function(err, window) {\n\tif (err) {\n\t\tconsole.error(err);\n\t\treturn;\n\t}\n\n\tvar $ = require(\"jquery\")(window);\n});\n```"
-}
+	"_rev": "61-e6be890a78963127",
+	"readme": "# jQuery\n\n> jQuery is a fast, small, and feature-rich JavaScript library.\n\nFor information on how to get started and how to use jQuery, please see [jQuery's documentation](http://api.jquery.com/).\nFor source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery).\n\nIf upgrading, please see the [blog post for 3.3.1](https://blog.jquery.com/2017/03/20/jquery-3.3.1-now-available/). This includes notable differences from the previous version and a more readable changelog.\n\n## Including jQuery\n\nBelow are some of the most common ways to include jQuery.\n\n### Browser\n\n#### Script tag\n\n```html\n<script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n```\n\n#### Babel\n\n[Babel](http://babeljs.io/) is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.\n\n```js\nimport $ from \"jquery\";\n```\n\n#### Browserify/Webpack\n\nThere are several ways to use [Browserify](http://browserify.org/) and [Webpack](https://webpack.github.io/). For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this...\n\n```js\nvar $ = require(\"jquery\");\n```\n\n#### AMD (Asynchronous Module Definition)\n\nAMD is a module format built for the browser. For more information, we recommend [require.js' documentation](http://requirejs.org/docs/whyamd.html).\n\n```js\ndefine([\"jquery\"], function($) {\n\n});\n```\n\n### Node\n\nTo include jQuery in [Node](nodejs.org), first install with npm.\n\n```sh\nnpm install jquery\n```\n\nFor jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/tmpvar/jsdom). This can be useful for testing purposes.\n\n```js\nrequire(\"jsdom\").env(\"\", function(err, window) {\n\tif (err) {\n\t\tconsole.error(err);\n\t\treturn;\n\t}\n\n\tvar $ = require(\"jquery\")(window);\n});\n```",
+	"_id": "jquery"
+}
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -1,21 +1,25 @@
-import React, { useState, useEffect } from 'react';
+/* eslint-disable react/jsx-max-depth */
+import React, { useState, useEffect, Suspense } from 'react';
 import styled from '@emotion/styled';
 import isNil from 'lodash/isNil';
 import { Router } from 'react-router-dom';

+import '../../i18n/config';
 import storage from '../utils/storage';
 import { isTokenExpire } from '../utils/login';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
+import Loading from '../components/Loading';
 import Box from '../muiComponents/Box';
 import StyleBaseline from '../design-tokens/StyleBaseline';
 import { Theme } from '../design-tokens/theme';

 import AppContextProvider from './AppContextProvider';
 import AppRoute, { history } from './AppRoute';
+import loadDayJSLocale from './load-dayjs-locale';

 const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
-  backgroundColor: theme && theme.palette.backgroundBody,
+  backgroundColor: theme && theme.palette.white,
 }));

 const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
@@ -31,7 +35,6 @@ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
 /* eslint-disable react-hooks/exhaustive-deps */
 const App: React.FC = () => {
  const [user, setUser] = useState();
-
  /**
   * Logout user
   * Required by: <Header />
@@ -57,10 +60,11 @@ const App: React.FC = () => {

  useEffect(() => {
    checkUserAlreadyLoggedIn();
+    loadDayJSLocale();
  }, []);

  return (
-    <>
+    <Suspense fallback={<Loading />}>
      <StyleBaseline />
      <StyledBox display="flex" flexDirection="column" height="100%">
        <>
@@ -68,7 +72,6 @@ const App: React.FC = () => {
            <AppContextProvider user={user}>
              <Header />
              <StyledBoxContent flexGrow={1}>
-                {/* eslint-disable-next-line react/jsx-max-depth */}
                <AppRoute />
              </StyledBoxContent>
            </AppContextProvider>
@@ -76,7 +79,7 @@ const App: React.FC = () => {
          <Footer />
        </>
      </StyledBox>
-    </>
+    </Suspense>
  );
 };

--- a/src/App/AppRoute.tsx
+++ b/src/App/AppRoute.tsx
@@ -1,8 +1,7 @@
-import React, { lazy, useContext, Suspense } from 'react';
+import React, { lazy, useContext } from 'react';
 import { Route as ReactRouterDomRoute, Switch, Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
-
-import Loading from '../components/Loading';
+import { useTranslation } from 'react-i18next';

 import AppContext from './AppContext';

@@ -25,9 +24,10 @@ export const history = createBrowserHistory({

 const AppRoute: React.FC = () => {
  const appContext = useContext(AppContext);
+  const { t } = useTranslation();

  if (!appContext) {
-    throw Error('The app Context was not correct used');
+    throw Error(t('app-context-not-correct-used'));
  }

  const { user } = appContext;
@@ -36,36 +36,34 @@ const AppRoute: React.FC = () => {

  return (
    <Router history={history}>
-      <Suspense fallback={<Loading />}>
-        <Switch>
-          <ReactRouterDomRoute exact={true} path={Route.ROOT}>
-            <HomePage isUserLoggedIn={!!isUserLoggedIn} />
-          </ReactRouterDomRoute>
-          <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
-            <VersionContextProvider>
-              <VersionPage />
-            </VersionContextProvider>
-          </ReactRouterDomRoute>
-          <ReactRouterDomRoute exact={true} path={Route.PACKAGE_VERSION}>
-            <VersionContextProvider>
-              <VersionPage />
-            </VersionContextProvider>
-          </ReactRouterDomRoute>
-          <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE_VERSION}>
-            <VersionContextProvider>
-              <VersionPage />
-            </VersionContextProvider>
-          </ReactRouterDomRoute>
-          <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE}>
-            <VersionContextProvider>
-              <VersionPage />
-            </VersionContextProvider>
-          </ReactRouterDomRoute>
-          <ReactRouterDomRoute>
-            <NotFound />
-          </ReactRouterDomRoute>
-        </Switch>
-      </Suspense>
+      <Switch>
+        <ReactRouterDomRoute exact={true} path={Route.ROOT}>
+          <HomePage isUserLoggedIn={!!isUserLoggedIn} />
+        </ReactRouterDomRoute>
+        <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </ReactRouterDomRoute>
+        <ReactRouterDomRoute exact={true} path={Route.PACKAGE_VERSION}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </ReactRouterDomRoute>
+        <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE_VERSION}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </ReactRouterDomRoute>
+        <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </ReactRouterDomRoute>
+        <ReactRouterDomRoute>
+          <NotFound />
+        </ReactRouterDomRoute>
+      </Switch>
    </Router>
  );
 };
--- a/src/App/snapshots/App.test.tsx.snap
+++ b/src/App/snapshots/App.test.tsx.snap
@@ -152,53 +152,6 @@ exports[`<App /> should display the Header component  1`] = `
  }
 }

-.emotion-34 {
-  -webkit-transform: translate(-50%,-50%);
-  -ms-transform: translate(-50%,-50%);
-  transform: translate(-50%,-50%);
-  top: 50%;
-  left: 50%;
-  position: absolute;
-}
-
-.emotion-28 {
-  margin: 0 0 30px 0;
-  border-radius: 25px;
-  box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
-  background: #f7f8f6;
-}
-
-.emotion-26 {
-  display: inline-block;
-  vertical-align: middle;
-  box-sizing: border-box;
-  background-position: center;
-  background-size: contain;
-  background-image: url([object Object]);
-  background-repeat: no-repeat;
-  width: 90px;
-  height: 90px;
-}
-
-.emotion-32 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.emotion-30 {
-  color: #4b5e40;
-}
-
 .emotion-76 {
  background: #f9f9f9;
  border-top: 1px solid #e3e3e3;
@@ -356,6 +309,53 @@ exports[`<App /> should display the Header component  1`] = `
  height: auto;
 }

+.emotion-34 {
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+  top: 50%;
+  left: 50%;
+  position: absolute;
+}
+
+.emotion-28 {
+  margin: 0 0 30px 0;
+  border-radius: 25px;
+  box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
+  background: #f7f8f6;
+}
+
+.emotion-26 {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  background-position: center;
+  background-size: contain;
+  background-image: url([object Object]);
+  background-repeat: no-repeat;
+  width: 90px;
+  height: 90px;
+}
+
+.emotion-32 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.emotion-30 {
+  color: #4b5e40;
+}
+
 <div
  class="MuiBox-root MuiBox-root-219 emotion-78 emotion-79"
 >
@@ -545,6 +545,7 @@ exports[`<App /> should display the Header component  1`] = `
  >
    <div
      class="container content"
+      data-testid="home-page-container"
    >
      <div
        class="emotion-34 emotion-35"
@@ -592,13 +593,13 @@ exports[`<App /> should display the Header component  1`] = `
      <div
        class="emotion-65 emotion-66"
      >
-         Made with
+        Made with 
        <span
          class="emotion-38 emotion-39"
        >
          ♥
        </span>
-        on
+         on
        <span
          class="emotion-63 emotion-64"
        >
@@ -700,7 +701,7 @@ exports[`<App /> should display the Header component  1`] = `
 `;

 exports[`<App /> should display the Loading component at the beginning  1`] = `
-.emotion-78 {
+.emotion-68 {
  background-color: #fff;
 }

@@ -843,7 +844,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }

@media screen and (min-width:1240px) {
-  .emotion-36 {
+  .emotion-26 {
    max-width: 1240px;
    width: 100%;
    margin-left: auto;
@@ -851,54 +852,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
  }
 }

-.emotion-34 {
-  -webkit-transform: translate(-50%,-50%);
-  -ms-transform: translate(-50%,-50%);
-  transform: translate(-50%,-50%);
-  top: 50%;
-  left: 50%;
-  position: absolute;
-}
-
-.emotion-28 {
-  margin: 0 0 30px 0;
-  border-radius: 25px;
-  box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
-  background: #f7f8f6;
-}
-
-.emotion-26 {
-  display: inline-block;
-  vertical-align: middle;
-  box-sizing: border-box;
-  background-position: center;
-  background-size: contain;
-  background-image: url([object Object]);
-  background-repeat: no-repeat;
-  width: 90px;
-  height: 90px;
-}
-
-.emotion-32 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.emotion-30 {
-  color: #4b5e40;
-}
-
-.emotion-76 {
+.emotion-66 {
  background: #f9f9f9;
  border-top: 1px solid #e3e3e3;
  color: #999999;
@@ -906,7 +860,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
  padding: 20px;
 }

-.emotion-74 {
+.emotion-64 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@@ -923,7 +877,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }

@media (min-width:768px) {
-  .emotion-74 {
+  .emotion-64 {
    min-width: 400px;
    max-width: 800px;
    margin: auto;
@@ -935,12 +889,12 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }

@media (min-width:1024px) {
-  .emotion-74 {
+  .emotion-64 {
    max-width: 1240px;
  }
 }

-.emotion-65 {
+.emotion-55 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
@@ -949,7 +903,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }

@media (min-width:768px) {
-  .emotion-65 {
+  .emotion-55 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
@@ -957,21 +911,21 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
  }
 }

-.emotion-38 {
+.emotion-28 {
  color: #e25555;
  padding: 0 5px;
 }

-.emotion-63 {
+.emotion-53 {
  position: relative;
  height: 18px;
 }

-.emotion-63:hover .emotion-62 {
+.emotion-53:hover .emotion-52 {
  visibility: visible;
 }

-.emotion-41 {
+.emotion-31 {
  box-sizing: initial;
  display: inline-block;
  cursor: default;
@@ -980,7 +934,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
  padding: 0 10px;
 }

-.emotion-61 {
+.emotion-51 {
  position: absolute;
  background: #d3dddd;
  padding: 1px 4px;
@@ -998,7 +952,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
  top: -2px;
 }

-.emotion-61:before {
+.emotion-51:before {
  content: '';
  position: absolute;
  top: 29%;
@@ -1011,7 +965,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
  transform: rotate(90deg);
 }

-.emotion-44 {
+.emotion-34 {
  box-sizing: initial;
  display: inline-block;
  cursor: default;
@@ -1020,7 +974,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
  padding: 0 5px;
 }

-.emotion-72 {
+.emotion-62 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
@@ -1033,7 +987,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
 }

@media (min-width:768px) {
-  .emotion-72 {
+  .emotion-62 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
@@ -1041,7 +995,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
  }
 }

-.emotion-70 {
+.emotion-60 {
  box-sizing: initial;
  display: inline-block;
  cursor: pointer;
@@ -1050,13 +1004,14 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
  padding: 0 5px;
 }

-.emotion-67 {
+.emotion-57 {
  width: 100%;
  height: auto;
 }

 <div
-  class="MuiBox-root MuiBox-root-2 emotion-78 emotion-79"
+  class="MuiBox-root MuiBox-root-2 emotion-68 emotion-69"
+  style="display: none;"
 >
  <header
    class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic emotion-24 emotion-25 MuiAppBar-colorPrimary"
@@ -1240,65 +1195,29 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
    </div>
  </header>
  <div
-    class="MuiBox-root MuiBox-root-195 emotion-36 emotion-37"
-  >
-    <div
-      class="emotion-34 emotion-35"
-      data-testid="loading"
-    >
-      <div
-        class="emotion-28 emotion-29"
-      >
-        <div
-          class="emotion-26 emotion-1"
-        />
-      </div>
-      <div
-        class="emotion-32 emotion-33"
-      >
-        <div
-          class="MuiCircularProgress-root emotion-30 emotion-31 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
-          role="progressbar"
-          style="width: 50px; height: 50px;"
-        >
-          <svg
-            class="MuiCircularProgress-svg"
-            viewBox="22 22 44 44"
-          >
-            <circle
-              class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
-              cx="44"
-              cy="44"
-              fill="none"
-              r="20.2"
-              stroke-width="3.6"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
+    class="MuiBox-root MuiBox-root-195 emotion-26 emotion-27"
+  />
  <div
-    class="emotion-76 emotion-77"
+    class="emotion-66 emotion-67"
  >
    <div
-      class="emotion-74 emotion-75"
+      class="emotion-64 emotion-65"
    >
      <div
-        class="emotion-65 emotion-66"
+        class="emotion-55 emotion-56"
      >
-         Made with
+        Made with 
        <span
-          class="emotion-38 emotion-39"
+          class="emotion-28 emotion-29"
        >
          ♥
        </span>
-        on
+         on
        <span
-          class="emotion-63 emotion-64"
+          class="emotion-53 emotion-54"
        >
          <svg
-            class="emotion-40 emotion-41 emotion-42"
+            class="emotion-30 emotion-31 emotion-32"
          >
            <title>
              Earth
@@ -1308,10 +1227,10 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
            />
          </svg>
          <span
-            class="emotion-61 emotion-62"
+            class="emotion-51 emotion-52"
          >
            <svg
-              class="emotion-43 emotion-44 emotion-42"
+              class="emotion-33 emotion-34 emotion-32"
            >
              <title>
                Spain
@@ -1321,7 +1240,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
              />
            </svg>
            <svg
-              class="emotion-43 emotion-44 emotion-42"
+              class="emotion-33 emotion-34 emotion-32"
            >
              <title>
                Nicaragua
@@ -1331,7 +1250,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
              />
            </svg>
            <svg
-              class="emotion-43 emotion-44 emotion-42"
+              class="emotion-33 emotion-34 emotion-32"
            >
              <title>
                India
@@ -1341,7 +1260,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
              />
            </svg>
            <svg
-              class="emotion-43 emotion-44 emotion-42"
+              class="emotion-33 emotion-34 emotion-32"
            >
              <title>
                Brazil
@@ -1351,7 +1270,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
              />
            </svg>
            <svg
-              class="emotion-43 emotion-44 emotion-42"
+              class="emotion-33 emotion-34 emotion-32"
            >
              <title>
                China
@@ -1361,7 +1280,7 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
              />
            </svg>
            <svg
-              class="emotion-43 emotion-44 emotion-42"
+              class="emotion-33 emotion-34 emotion-32"
            >
              <title>
                Austria
@@ -1374,16 +1293,16 @@ exports[`<App /> should display the Loading component at the beginning  1`] = `
        </span>
      </div>
      <div
-        class="emotion-72 emotion-73"
+        class="emotion-62 emotion-63"
      >
        Powered by
        <span
-          class="emotion-43 emotion-70 emotion-71"
+          class="emotion-33 emotion-60 emotion-61"
          title="Verdaccio"
        >
          <img
            alt="Verdaccio"
-            class="emotion-67 emotion-68"
+            class="emotion-57 emotion-58"
            src="[object Object]"
          />
        </span>
--- a/src/App/load-dayjs-locale.ts
+++ b/src/App/load-dayjs-locale.ts
@@ -0,0 +1,52 @@
+import dayjs from 'dayjs';
+import i18n from 'i18next';
+
+function getFallFackLanguage(): string | undefined {
+  const fallbackLanguage = i18n.options.fallbackLng;
+
+  if (Array.isArray(fallbackLanguage)) {
+    return fallbackLanguage[0];
+  }
+
+  if (typeof fallbackLanguage === 'string') {
+    return fallbackLanguage;
+  }
+
+  return undefined;
+}
+
+function loadDayJSLocale() {
+  const fallbackLanguage = getFallFackLanguage();
+  const locale = i18n.language || fallbackLanguage;
+
+  // dayjs loades en-US by default
+  if (!locale || locale === 'en-US') {
+    return;
+  }
+
+  switch (locale.toLowerCase()) {
+    // At the moment we only support pt-BR, please see: i18n/translations/*
+    case 'pt-br':
+      {
+        require('dayjs/locale/pt-br');
+        dayjs.locale('pt-br');
+      }
+      break;
+    case 'de':
+      {
+        require('dayjs/locale/de');
+        dayjs.locale('de');
+      }
+      break;
+    case 'es-es':
+      {
+        require('dayjs/locale/es');
+        dayjs.locale('es');
+      }
+      break;
+    default:
+      break;
+  }
+}
+
+export default loadDayJSLocale;
--- a/src/components/ActionBar/ActionBarAction.tsx
+++ b/src/components/ActionBar/ActionBarAction.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import BugReportIcon from '@material-ui/icons/BugReport';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
 import HomeIcon from '@material-ui/icons/Home';
+import { useTranslation } from 'react-i18next';

 import Tooltip from '../../muiComponents/Tooltip';
 import Link from '../Link';
@@ -26,10 +27,11 @@ export interface ActionBarActionProps {

 /* eslint-disable react/jsx-no-bind */
 const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
+  const { t } = useTranslation();
  switch (type) {
    case 'VISIT_HOMEPAGE':
      return (
-        <Tooltip title="Visit homepage">
+        <Tooltip title={t('action-bar-action.visit-home-page')}>
          <Link external={true} to={link}>
            <Fab size="small">
              <HomeIcon />
@@ -39,7 +41,7 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
      );
    case 'OPEN_AN_ISSUE':
      return (
-        <Tooltip title="Open an issue">
+        <Tooltip title={t('action-bar-action.open-an-issue')}>
          <Link external={true} to={link}>
            <Fab size="small">
              <BugReportIcon />
@@ -49,7 +51,7 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
      );
    case 'DOWNLOAD_TARBALL':
      return (
-        <Tooltip title="Download tarball">
+        <Tooltip title={t('action-bar-action.download-tarball')}>
          <Fab data-testid="download-tarball-btn" onClick={downloadTarball(link)} size="small">
            <DownloadIcon />
          </Fab>
--- a/src/components/Author/Author.tsx
+++ b/src/components/Author/Author.tsx
@@ -1,14 +1,17 @@
 import React, { FC, useContext } from 'react';
+import { useTranslation } from 'react-i18next';

 import { DetailContext } from '../../pages/Version';
 import { isEmail } from '../../utils/url';
 import Avatar from '../../muiComponents/Avatar';
 import List from '../../muiComponents/List';
+import { getAuthorName } from '../../utils/package';

 import { StyledText, AuthorListItem, AuthorListItemText } from './styles';

 const Author: FC = () => {
  const { packageMeta } = useContext(DetailContext);
+  const { t } = useTranslation();

  if (!packageMeta) {
    return null;
@@ -25,7 +28,7 @@ const Author: FC = () => {
  const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;

  return (
-    <List subheader={<StyledText variant={'subtitle1'}>{'Author'}</StyledText>}>
+    <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.author.title')}</StyledText>}>
      <AuthorListItem button={true}>
        {!email || !isEmail(email) ? (
          avatarComponent
@@ -34,8 +37,7 @@ const Author: FC = () => {
            {avatarComponent}
          </a>
        )}
-
-        <AuthorListItemText primary={name} />
+        {name && <AuthorListItemText primary={getAuthorName(name)} />}
      </AuthorListItem>
    </List>
  );
--- a/src/components/Author/snapshots/Author.test.tsx.snap
+++ b/src/components/Author/snapshots/Author.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-5wp24z-StyledText e1xuehjw0 MuiTypography-subtitle1\\">sidebar.author.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

-exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-5wp24z-StyledText e1xuehjw0 MuiTypography-subtitle1\\">sidebar.author.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
--- a/src/components/Author/styles.ts
+++ b/src/components/Author/styles.ts
@@ -7,7 +7,6 @@ import { Theme } from '../../design-tokens/theme';

 export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
  fontWeight: props.theme && props.theme.fontWeight.bold,
-  textTransform: 'capitalize',
 }));

 export const AuthorListItem = styled(ListItem)({
--- a/src/components/AutoComplete/AutoComplete.tsx
+++ b/src/components/AutoComplete/AutoComplete.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest';
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
+import { useTranslation } from 'react-i18next';

 import MenuItem from '../../muiComponents/MenuItem';
 import { Theme } from '../../design-tokens/theme';
@@ -83,12 +84,6 @@ const renderMessage = (message): JSX.Element => {
  );
 };

-const SUGGESTIONS_RESPONSE = {
-  LOADING: 'Loading...',
-  FAILURE: 'Something went wrong.',
-  NO_RESULT: 'No results found.',
-};
-
 const AutoComplete = memo(
  ({
    suggestions,
@@ -106,6 +101,8 @@ const AutoComplete = memo(
    suggestionsLoaded = false,
    suggestionsError = false,
  }: Props) => {
+    const { t } = useTranslation();
+
    const autosuggestProps = {
      renderInputComponent,
      suggestions,
@@ -130,9 +127,9 @@ const AutoComplete = memo(
    function renderSuggestionsContainer({ containerProps, children, query }): JSX.Element {
      return (
        <SuggestionContainer {...containerProps} square={true}>
-          {suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
-          {suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
-          {suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
+          {suggestionsLoaded && children === null && query && renderMessage(t('auto-complete.no-results-found'))}
+          {suggestionsLoading && query && renderMessage(t('auto-complete.loading'))}
+          {suggestionsError && renderMessage(t('error.unspecific'))}
          {children}
        </SuggestionContainer>
      );
--- a/src/components/CopyToClipBoard/CopyToClipBoard.tsx
+++ b/src/components/CopyToClipBoard/CopyToClipBoard.tsx
@@ -1,8 +1,8 @@
 import FileCopy from '@material-ui/icons/FileCopy';
 import React from 'react';
+import { useTranslation } from 'react-i18next';

 import { copyToClipBoardUtility } from '../../utils/cli-utils';
-import { TEXT } from '../../utils/constants';
 import Tooltip from '../../muiComponents/Tooltip';

 import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles';
@@ -20,19 +20,16 @@ const renderText = (text: string, children: React.ReactNode): JSX.Element => {
  return <ClipBoardCopyText>{text}</ClipBoardCopyText>;
 };

-const renderToolTipFileCopy = (text: string): React.ReactElement<HTMLElement> => (
-  <Tooltip disableFocusListener={true} title={TEXT.CLIPBOARD_COPY}>
-    <CopyIcon onClick={copyToClipBoardUtility(text)}>
-      <FileCopy />
-    </CopyIcon>
-  </Tooltip>
-);
-
 const CopyToClipBoard: React.FC<Props> = ({ text, children }) => {
+  const { t } = useTranslation();
  return (
    <ClipBoardCopy>
      {renderText(text, children)}
-      {renderToolTipFileCopy(text)}
+      <Tooltip disableFocusListener={true} title={t('copy-to-clipboard')}>
+        <CopyIcon onClick={copyToClipBoardUtility(text)}>
+          <FileCopy />
+        </CopyIcon>
+      </Tooltip>
    </ClipBoardCopy>
  );
 };
--- a/src/components/CopyToClipBoard/snapshots/CopyToClipBoard.test.tsx.snap
+++ b/src/components/CopyToClipBoard/snapshots/CopyToClipBoard.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<CopyToClipBoard /> component should load the component in default state 1`] = `"<div class=\\"css-1in239f-ClipBoardCopy eb8w2fo0\\"><span class=\\"css-7gar9h-ClipBoardCopyText eb8w2fo1\\">copy text</span><button class=\\"MuiButtonBase-root MuiIconButton-root  css-1fs86cq-CopyIcon eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div>"`;
+exports[`<CopyToClipBoard /> component should load the component in default state 1`] = `"<div class=\\"css-1in239f-ClipBoardCopy eb8w2fo0\\"><span class=\\"css-7gar9h-ClipBoardCopyText eb8w2fo1\\">copy text</span><button class=\\"MuiButtonBase-root MuiIconButton-root  css-1fs86cq-CopyIcon eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"copy-to-clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div>"`;
--- a/src/components/Dependencies/Dependencies.tsx
+++ b/src/components/Dependencies/Dependencies.tsx
@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { useHistory } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';

 import CardContent from '../../muiComponents/CardContent';
 import { PackageDependencies } from '../../../types/packageMeta';
@@ -16,6 +17,7 @@ interface DependencyBlockProps {
 const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
  const { enableLoading } = useContext(DetailContext);
  const history = useHistory();
+  const { t } = useTranslation();

  const deps = Object.entries(dependencies);

@@ -31,8 +33,14 @@ const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }
        <StyledText variant="subtitle1">{`${title} (${deps.length})`}</StyledText>
        <Tags>
          {deps.map(([name, version]) => (
-            // eslint-disable-next-line
-            <Tag className={'dep-tag'} clickable={true} key={name} label={`${name}@${version}`} onClick={() => handleClick(name)} />
+            <Tag
+              className={'dep-tag'}
+              clickable={true}
+              key={name}
+              label={t('dependencies.dependency-block', { package: name, version })}
+              // eslint-disable-next-line
+              onClick={() => handleClick(name)}
+            />
          ))}
        </Tags>
      </CardContent>
@@ -46,9 +54,10 @@ function hasKeys(object?: { [key: string]: any }): boolean {

 const Dependencies: React.FC<{}> = () => {
  const { packageMeta } = useContext(DetailContext);
+  const { t } = useTranslation();

  if (!packageMeta) {
-    throw new Error('packageMeta is required at DetailContext');
+    throw new Error(t('error.package-meta-is-required-at-detail-context'));
  }

  const { latest } = packageMeta;
@@ -72,7 +81,7 @@ const Dependencies: React.FC<{}> = () => {
    );
  }

-  return <NoItems className="no-dependencies" text={`${name} has no dependencies.`} />;
+  return <NoItems className="no-dependencies" text={t('dependencies.has-no-dependencies', { package: name })} />;
 };

 export default Dependencies;
--- a/src/components/DetailContainer/DetailContainer.tsx
+++ b/src/components/DetailContainer/DetailContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState, ChangeEvent, useContext } from 'react';
+import React, { useState, useContext } from 'react';

 import { DetailContext } from '../../pages/Version';
 import Box from '../../muiComponents/Box';
@@ -6,30 +6,22 @@ import Box from '../../muiComponents/Box';
 import DetailContainerTabs from './DetailContainerTabs';
 import DetailContainerContent from './DetailContainerContent';
 import { TabPosition } from './tabs';
-import { DetailTheme } from './styles';

 const DetailContainer: React.FC = () => {
-  const [tabPosition, setTabPosition] = useState(TabPosition.README);
+  const tabs = Object.values(TabPosition);
+  const [tabPosition, setTabPosition] = useState(0);
  const detailContext = useContext(DetailContext);
  const { readMe } = detailContext;

-  const handleChangeTabPosition = useCallback(
-    (event: ChangeEvent<{}>) => {
-      event.preventDefault();
-      const eventTarget = event.target as HTMLSpanElement;
-      const chosentab = eventTarget.innerText as TabPosition;
-      setTabPosition(TabPosition[chosentab]);
-    },
-    [setTabPosition]
-  );
+  const handleChange = (event, newValue) => {
+    setTabPosition(newValue);
+  };

  return (
-      <Box component="div" display="flex" flexDirection="column">
-        <DetailContainerTabs onChangeTabPosition={handleChangeTabPosition} tabPosition={tabPosition} />
-        <DetailTheme>
-          <DetailContainerContent readDescription={readMe} tabPosition={tabPosition} />
-        </DetailTheme>
-      </Box>
+    <Box component="div" display="flex" flexDirection="column" padding={2}>
+      <DetailContainerTabs onChange={handleChange} tabPosition={tabPosition} />
+      <DetailContainerContent readDescription={readMe} tabPosition={tabs[tabPosition]} />
+    </Box>
  );
 };

--- a/src/components/DetailContainer/DetailContainerContentReadme.tsx
+++ b/src/components/DetailContainer/DetailContainerContentReadme.tsx
@@ -2,18 +2,15 @@ import React from 'react';

 import { preventXSS } from '../../utils/sec-utils';
 import Readme from '../Readme';
-import { ReadmeSpacing } from './styles';

 interface Props {
  description?: string;
 }

 const DetailContainerContentReadme: React.FC<Props> = ({ description }) => {
-  if (!description) {
-    return null;
-  }
+  if (!description) return null;
  const encodedReadme = preventXSS(description);
-  return <ReadmeSpacing><Readme description={encodedReadme} /></ReadmeSpacing>;
+  return <Readme description={encodedReadme} />;
 };

 export default DetailContainerContentReadme;
--- a/src/components/DetailContainer/DetailContainerTabs.tsx
+++ b/src/components/DetailContainer/DetailContainerTabs.tsx
@@ -1,44 +1,35 @@
-import React, { ChangeEvent, useState, useEffect } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';

 import { default as MuiTabs } from '../../muiComponents/Tabs';
 import Tab from '../../muiComponents/Tab';

-import { TabPosition } from './tabs';
-
 interface Props {
-  tabPosition: TabPosition;
-  onChangeTabPosition: (event: ChangeEvent<{}>) => void;
+  onChange: (event, newValue) => void;
+  tabPosition: number;
 }

-const Tabs = styled(MuiTabs)({
-  marginBottom: 16,
-});
-
-const getTabIndex = (tabPosition: TabPosition): number =>
-  Object.keys(TabPosition).findIndex(position => position === String(tabPosition).toUpperCase());
-
-const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChangeTabPosition }) => {
-  const [tabPositionIndex, setTabPositionIndex] = useState(0);
-
-  useEffect(() => {
-    const tabIndex = getTabIndex(tabPosition);
-    setTabPositionIndex(tabIndex);
-  }, [tabPosition]);
+const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
+  const { t } = useTranslation();

  return (
    <Tabs
-      indicatorColor={'secondary'}
-      onChange={onChangeTabPosition}
-      textColor={'secondary'}
-      value={tabPositionIndex}
+      indicatorColor={'primary'}
+      onChange={onChange}
+      textColor={'primary'}
+      value={tabPosition}
      variant={'fullWidth'}>
-      <Tab data-testid={'readme-tab'} id={'readme-tab'} label={TabPosition.README} />
-      <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={TabPosition.DEPENDENCIES} />
-      <Tab data-testid={'versions-tab'} id={'versions-tab'} label={TabPosition.VERSIONS} />
-      <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={TabPosition.UPLINKS} />
+      <Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />
+      <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />
+      <Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />
+      <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={t('tab.uplinks')} />
    </Tabs>
  );
 };

 export default DetailContainerTabs;
+
+const Tabs = styled(MuiTabs)({
+  marginBottom: 16,
+});
--- a/src/components/DetailContainer/styles.ts
+++ b/src/components/DetailContainer/styles.ts
@@ -1,11 +0,0 @@
-import styled from '@emotion/styled';
-
-import { Theme } from '../../design-tokens/theme';
-
-export const DetailTheme = styled('div')<{ theme?: Theme }>(props => ({
-  backgroundColor: props?.theme?.palette.readmeBackgroundColor,
-}));
-
-export const ReadmeSpacing = styled('div')<{ theme?: Theme }>(props => ({
-  padding: '20px',
-}));
--- a/src/components/DetailContainer/tabs.ts
+++ b/src/components/DetailContainer/tabs.ts
@@ -1,6 +1,6 @@
 export enum TabPosition {
-  README = 'Readme',
-  DEPENDENCIES = 'Dependencies',
-  VERSIONS = 'Versions',
-  UPLINKS = 'Uplinks',
+  README = 'readme',
+  DEPENDENCIES = 'dependencies',
+  VERSIONS = 'versions',
+  UPLINKS = 'uplinks',
 }
--- a/src/components/DetailSidebar/DetailSidebarFundButton.tsx
+++ b/src/components/DetailSidebar/DetailSidebarFundButton.tsx
@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import styled from '@emotion/styled';
 import Favorite from '@material-ui/icons/Favorite';
+import { Trans } from 'react-i18next';

 import Button from '../../muiComponents/Button';
 import Link from '../Link';
@@ -38,8 +39,7 @@ const DetailSidebarFundButton: React.FC = () => {
  return (
    <StyledLink external={true} to={fundingUrl}>
      <Button color="primary" fullWidth={true} startIcon={<StyledFavoriteIcon />} variant="outlined">
-        <StyledFundStrong>{'Fund'}</StyledFundStrong>
-        {'this package'}
+        <Trans components={[<StyledFundStrong key="fund" />]} i18nKey="button.fund-this-package" />
      </Button>
    </StyledLink>
  );
--- a/src/components/DetailSidebar/DetailSidebarTitle.tsx
+++ b/src/components/DetailSidebar/DetailSidebarTitle.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';

 import Box from '../../muiComponents/Box';
 import Heading from '../../muiComponents/Heading';
@@ -21,12 +22,17 @@ const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
  color: theme && theme.palette.text.secondary,
 }));

-const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => (
-  <Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
-    <StyledHeading>{packageName}</StyledHeading>
-    {description && <div>{description}</div>}
-    <StyledBoxVersion>{`${isLatest ? 'Latest v' : 'v'}${version}`}</StyledBoxVersion>
-  </Box>
-);
+const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => {
+  const { t } = useTranslation();
+  return (
+    <Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
+      <StyledHeading>{packageName}</StyledHeading>
+      {description && <div>{description}</div>}
+      <StyledBoxVersion>
+        {isLatest ? t('sidebar.detail.latest-version', { version }) : t('sidebar.detail.version', { version })}
+      </StyledBoxVersion>
+    </Box>
+  );
+};

 export default DetailSidebarTitle;
--- a/src/components/Developers/Developers.test.tsx
+++ b/src/components/Developers/Developers.test.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import { mount } from '../../utils/test-enzyme';
 import { DetailContextProvider } from '../../pages/Version';

-import Developers, { DeveloperType, Fab } from './Developers';
+import Developers, { Fab } from './Developers';
+import { DeveloperType } from './types';

 describe('test Developers', () => {
  const packageMeta = {
--- a/src/components/Developers/Developers.tsx
+++ b/src/components/Developers/Developers.tsx
@@ -1,38 +1,29 @@
 import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
 import Add from '@material-ui/icons/Add';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';

 import { DetailContext } from '../../pages/Version';
 import Tooltip from '../../muiComponents/Tooltip';
 import Avatar from '../../muiComponents/Avatar';
 import Box from '../../muiComponents/Box';
-import Text from '../../muiComponents/Text';
 import FloatingActionButton from '../../muiComponents/FloatingActionButton';
 import { Theme } from '../../design-tokens/theme';

 import getUniqueDeveloperValues from './get-unique-developer-values';
+import DevelopersTitle from './DevelopersTitle';
+import { DeveloperType } from './types';

 export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
  backgroundColor: props.theme && props.theme.palette.primary.main,
  color: props.theme && props.theme.palette.white,
 }));

-export enum DeveloperType {
-  CONTRIBUTORS = 'contributors',
-  MAINTAINERS = 'maintainers',
-}
-
 interface Props {
  type: DeveloperType;
  visibleMax?: number;
 }

-export const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
-  fontWeight: theme && theme.fontWeight.bold,
-  marginBottom: '10px',
-  textTransform: 'capitalize',
-}));
-
 const StyledBox = styled(Box)({
  '> *': {
    margin: 5,
@@ -43,9 +34,10 @@ export const VISIBLE_MAX = 6;

 const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
  const detailContext = useContext(DetailContext);
+  const { t } = useTranslation();

  if (!detailContext) {
-    throw Error("The app's detail Context was not correct used");
+    throw Error(t('app-context-not-correct-used'));
  }

  const developers = useMemo(() => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]), [
@@ -69,7 +61,7 @@ const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {

  return (
    <>
-      <StyledText variant={'subtitle1'}>{type}</StyledText>
+      <DevelopersTitle type={type} />
      <StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
        {visibleDevelopers.map(visibleDeveloper => (
          <Tooltip key={visibleDeveloper.email} title={visibleDeveloper.name}>
--- a/src/components/Developers/DevelopersTitle.tsx
+++ b/src/components/Developers/DevelopersTitle.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
+
+import Text from '../../muiComponents/Text';
+import { Theme } from '../../design-tokens/theme';
+
+import { DeveloperType } from './types';
+
+interface Props {
+  type: DeveloperType;
+}
+
+const DevelopersTitle: React.FC<Props> = ({ type }) => {
+  const { t } = useTranslation();
+  switch (type) {
+    case DeveloperType.CONTRIBUTORS:
+      return <StyledText variant={'subtitle1'}>{t('sidebar.contributors.title')}</StyledText>;
+    case DeveloperType.MAINTAINERS:
+      return <StyledText variant={'subtitle1'}>{t('sidebar.maintainers.title')}</StyledText>;
+      return null;
+  }
+};
+
+export default DevelopersTitle;
+
+const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
+  fontWeight: theme && theme.fontWeight.bold,
+  marginBottom: '10px',
+}));
--- a/src/components/Developers/snapshots/Developers.test.tsx.snap
+++ b/src/components/Developers/snapshots/Developers.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`test Developers should render the component for contributors with items
 .emotion-0 {
  font-weight: 700;
  margin-bottom: 10px;
-  text-transform: capitalize;
 }

 .emotion-8 > * {
@@ -14,64 +13,68 @@ exports[`test Developers should render the component for contributors with items
 <Developers
  type="contributors"
 >
-  <StyledText
-    variant="subtitle1"
+  <DevelopersTitle
+    type="contributors"
  >
-    <ForwardRef(Text)
-      className="emotion-0 emotion-1"
+    <StyledText
      variant="subtitle1"
    >
-      <WithStyles(ForwardRef(Typography))
+      <ForwardRef(Text)
        className="emotion-0 emotion-1"
        variant="subtitle1"
      >
-        <ForwardRef(Typography)
+        <WithStyles(ForwardRef(Typography))
          className="emotion-0 emotion-1"
-          classes={
-            Object {
-              "alignCenter": "MuiTypography-alignCenter",
-              "alignJustify": "MuiTypography-alignJustify",
-              "alignLeft": "MuiTypography-alignLeft",
-              "alignRight": "MuiTypography-alignRight",
-              "body1": "MuiTypography-body1",
-              "body2": "MuiTypography-body2",
-              "button": "MuiTypography-button",
-              "caption": "MuiTypography-caption",
-              "colorError": "MuiTypography-colorError",
-              "colorInherit": "MuiTypography-colorInherit",
-              "colorPrimary": "MuiTypography-colorPrimary",
-              "colorSecondary": "MuiTypography-colorSecondary",
-              "colorTextPrimary": "MuiTypography-colorTextPrimary",
-              "colorTextSecondary": "MuiTypography-colorTextSecondary",
-              "displayBlock": "MuiTypography-displayBlock",
-              "displayInline": "MuiTypography-displayInline",
-              "gutterBottom": "MuiTypography-gutterBottom",
-              "h1": "MuiTypography-h1",
-              "h2": "MuiTypography-h2",
-              "h3": "MuiTypography-h3",
-              "h4": "MuiTypography-h4",
-              "h5": "MuiTypography-h5",
-              "h6": "MuiTypography-h6",
-              "noWrap": "MuiTypography-noWrap",
-              "overline": "MuiTypography-overline",
-              "paragraph": "MuiTypography-paragraph",
-              "root": "MuiTypography-root",
-              "srOnly": "MuiTypography-srOnly",
-              "subtitle1": "MuiTypography-subtitle1",
-              "subtitle2": "MuiTypography-subtitle2",
-            }
-          }
          variant="subtitle1"
        >
-          <h6
-            className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+          <ForwardRef(Typography)
+            className="emotion-0 emotion-1"
+            classes={
+              Object {
+                "alignCenter": "MuiTypography-alignCenter",
+                "alignJustify": "MuiTypography-alignJustify",
+                "alignLeft": "MuiTypography-alignLeft",
+                "alignRight": "MuiTypography-alignRight",
+                "body1": "MuiTypography-body1",
+                "body2": "MuiTypography-body2",
+                "button": "MuiTypography-button",
+                "caption": "MuiTypography-caption",
+                "colorError": "MuiTypography-colorError",
+                "colorInherit": "MuiTypography-colorInherit",
+                "colorPrimary": "MuiTypography-colorPrimary",
+                "colorSecondary": "MuiTypography-colorSecondary",
+                "colorTextPrimary": "MuiTypography-colorTextPrimary",
+                "colorTextSecondary": "MuiTypography-colorTextSecondary",
+                "displayBlock": "MuiTypography-displayBlock",
+                "displayInline": "MuiTypography-displayInline",
+                "gutterBottom": "MuiTypography-gutterBottom",
+                "h1": "MuiTypography-h1",
+                "h2": "MuiTypography-h2",
+                "h3": "MuiTypography-h3",
+                "h4": "MuiTypography-h4",
+                "h5": "MuiTypography-h5",
+                "h6": "MuiTypography-h6",
+                "noWrap": "MuiTypography-noWrap",
+                "overline": "MuiTypography-overline",
+                "paragraph": "MuiTypography-paragraph",
+                "root": "MuiTypography-root",
+                "srOnly": "MuiTypography-srOnly",
+                "subtitle1": "MuiTypography-subtitle1",
+                "subtitle2": "MuiTypography-subtitle2",
+              }
+            }
+            variant="subtitle1"
          >
-            contributors
-          </h6>
-        </ForwardRef(Typography)>
-      </WithStyles(ForwardRef(Typography))>
-    </ForwardRef(Text)>
-  </StyledText>
+            <h6
+              className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+            >
+              sidebar.contributors.title
+            </h6>
+          </ForwardRef(Typography)>
+        </WithStyles(ForwardRef(Typography))>
+      </ForwardRef(Text)>
+    </StyledText>
+  </DevelopersTitle>
  <StyledBox
    display="flex"
    flexWrap="wrap"
@@ -427,7 +430,6 @@ exports[`test Developers should render the component for maintainers with items
 .emotion-0 {
  font-weight: 700;
  margin-bottom: 10px;
-  text-transform: capitalize;
 }

 .emotion-8 > * {
@@ -437,64 +439,68 @@ exports[`test Developers should render the component for maintainers with items
 <Developers
  type="maintainers"
 >
-  <StyledText
-    variant="subtitle1"
+  <DevelopersTitle
+    type="maintainers"
  >
-    <ForwardRef(Text)
-      className="emotion-0 emotion-1"
+    <StyledText
      variant="subtitle1"
    >
-      <WithStyles(ForwardRef(Typography))
+      <ForwardRef(Text)
        className="emotion-0 emotion-1"
        variant="subtitle1"
      >
-        <ForwardRef(Typography)
+        <WithStyles(ForwardRef(Typography))
          className="emotion-0 emotion-1"
-          classes={
-            Object {
-              "alignCenter": "MuiTypography-alignCenter",
-              "alignJustify": "MuiTypography-alignJustify",
-              "alignLeft": "MuiTypography-alignLeft",
-              "alignRight": "MuiTypography-alignRight",
-              "body1": "MuiTypography-body1",
-              "body2": "MuiTypography-body2",
-              "button": "MuiTypography-button",
-              "caption": "MuiTypography-caption",
-              "colorError": "MuiTypography-colorError",
-              "colorInherit": "MuiTypography-colorInherit",
-              "colorPrimary": "MuiTypography-colorPrimary",
-              "colorSecondary": "MuiTypography-colorSecondary",
-              "colorTextPrimary": "MuiTypography-colorTextPrimary",
-              "colorTextSecondary": "MuiTypography-colorTextSecondary",
-              "displayBlock": "MuiTypography-displayBlock",
-              "displayInline": "MuiTypography-displayInline",
-              "gutterBottom": "MuiTypography-gutterBottom",
-              "h1": "MuiTypography-h1",
-              "h2": "MuiTypography-h2",
-              "h3": "MuiTypography-h3",
-              "h4": "MuiTypography-h4",
-              "h5": "MuiTypography-h5",
-              "h6": "MuiTypography-h6",
-              "noWrap": "MuiTypography-noWrap",
-              "overline": "MuiTypography-overline",
-              "paragraph": "MuiTypography-paragraph",
-              "root": "MuiTypography-root",
-              "srOnly": "MuiTypography-srOnly",
-              "subtitle1": "MuiTypography-subtitle1",
-              "subtitle2": "MuiTypography-subtitle2",
-            }
-          }
          variant="subtitle1"
        >
-          <h6
-            className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+          <ForwardRef(Typography)
+            className="emotion-0 emotion-1"
+            classes={
+              Object {
+                "alignCenter": "MuiTypography-alignCenter",
+                "alignJustify": "MuiTypography-alignJustify",
+                "alignLeft": "MuiTypography-alignLeft",
+                "alignRight": "MuiTypography-alignRight",
+                "body1": "MuiTypography-body1",
+                "body2": "MuiTypography-body2",
+                "button": "MuiTypography-button",
+                "caption": "MuiTypography-caption",
+                "colorError": "MuiTypography-colorError",
+                "colorInherit": "MuiTypography-colorInherit",
+                "colorPrimary": "MuiTypography-colorPrimary",
+                "colorSecondary": "MuiTypography-colorSecondary",
+                "colorTextPrimary": "MuiTypography-colorTextPrimary",
+                "colorTextSecondary": "MuiTypography-colorTextSecondary",
+                "displayBlock": "MuiTypography-displayBlock",
+                "displayInline": "MuiTypography-displayInline",
+                "gutterBottom": "MuiTypography-gutterBottom",
+                "h1": "MuiTypography-h1",
+                "h2": "MuiTypography-h2",
+                "h3": "MuiTypography-h3",
+                "h4": "MuiTypography-h4",
+                "h5": "MuiTypography-h5",
+                "h6": "MuiTypography-h6",
+                "noWrap": "MuiTypography-noWrap",
+                "overline": "MuiTypography-overline",
+                "paragraph": "MuiTypography-paragraph",
+                "root": "MuiTypography-root",
+                "srOnly": "MuiTypography-srOnly",
+                "subtitle1": "MuiTypography-subtitle1",
+                "subtitle2": "MuiTypography-subtitle2",
+              }
+            }
+            variant="subtitle1"
          >
-            maintainers
-          </h6>
-        </ForwardRef(Typography)>
-      </WithStyles(ForwardRef(Typography))>
-    </ForwardRef(Text)>
-  </StyledText>
+            <h6
+              className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+            >
+              sidebar.maintainers.title
+            </h6>
+          </ForwardRef(Typography)>
+        </WithStyles(ForwardRef(Typography))>
+      </ForwardRef(Text)>
+    </StyledText>
+  </DevelopersTitle>
  <StyledBox
    display="flex"
    flexWrap="wrap"
--- a/src/components/Developers/index.ts
+++ b/src/components/Developers/index.ts
@@ -1 +1,2 @@
-export { default, DeveloperType } from './Developers';
+export { default } from './Developers';
+export { DeveloperType } from './types';
--- a/src/components/Developers/types.ts
+++ b/src/components/Developers/types.ts
@@ -0,0 +1,4 @@
+export enum DeveloperType {
+  CONTRIBUTORS = 'contributors',
+  MAINTAINERS = 'maintainers',
+}
--- a/src/components/Dist/Dist.tsx
+++ b/src/components/Dist/Dist.tsx
@@ -1,4 +1,5 @@
 import React, { FC, useContext } from 'react';
+import { useTranslation } from 'react-i18next';

 import { DetailContext } from '../../pages/Version';
 import fileSizeSI from '../../utils/file-size';
@@ -22,6 +23,7 @@ const DistChip: FC<{ name: string }> = ({ name, children }) =>

 const Dist: FC = () => {
  const { packageMeta } = useContext(DetailContext);
+  const { t } = useTranslation();

  if (!packageMeta) {
    return null;
@@ -30,11 +32,11 @@ const Dist: FC = () => {
  const { dist, license } = packageMeta && packageMeta.latest;

  return (
-    <List subheader={<StyledText variant="subtitle1">{'Latest Distribution'}</StyledText>}>
+    <List subheader={<StyledText variant="subtitle1">{t('sidebar.distribution.title')}</StyledText>}>
      <DistListItem button={true}>
-        <DistChip name="file count">{dist.fileCount}</DistChip>
-        <DistChip name="size">{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip>
-        <DistChip name="license">{formatLicense(license)}</DistChip>
+        <DistChip name={t('sidebar.distribution.file-count')}>{dist.fileCount}</DistChip>
+        <DistChip name={t('sidebar.distribution.size')}>{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip>
+        <DistChip name={t('sidebar.distribution.license')}>{formatLicense(license)}</DistChip>
      </DistListItem>
    </List>
  );
--- a/src/components/Dist/snapshots/Dist.test.tsx.snap
+++ b/src/components/Dist/snapshots/Dist.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">sidebar.distribution.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.file-count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

-exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">sidebar.distribution.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.file-count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

-exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">sidebar.distribution.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.file-count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
--- a/src/components/Engines/Engines.tsx
+++ b/src/components/Engines/Engines.tsx
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';

 import { DetailContext } from '../../pages/Version';
 import Avatar from '../../muiComponents/Avatar';
@@ -12,6 +13,7 @@ import node from './img/node.png';

 const Engine: React.FC = () => {
  const { packageMeta } = useContext(DetailContext);
+  const { t } = useTranslation();

  const engines = packageMeta?.latest?.engines;

@@ -23,7 +25,7 @@ const Engine: React.FC = () => {
    <Grid container={true}>
      {engines.node && (
        <Grid item={true} xs={6}>
-          <List subheader={<StyledText variant={'subtitle1'}>{'node JS'}</StyledText>}>
+          <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.engines.node-js')}</StyledText>}>
            <EngineListItem button={true}>
              <Avatar src={node} />
              <ListItemText primary={engines.node} />
@@ -34,7 +36,7 @@ const Engine: React.FC = () => {

      {engines.npm && (
        <Grid item={true} xs={6}>
-          <List subheader={<StyledText variant={'subtitle1'}>{'NPM version'}</StyledText>}>
+          <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.engines.npm-version')}</StyledText>}>
            <EngineListItem button={true}>
              <Avatar src={npm} />
              <ListItemText primary={engines.npm} />
--- a/src/components/Engines/snapshots/Engines.test.tsx.snap
+++ b/src/components/Engines/snapshots/Engines.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<Engines /> component should render the component in default state 1`] = `"<div class=\\"MuiGrid-root MuiGrid-container\\"><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">node JS</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;= 0.1.98</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">NPM version</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;3</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div></div>"`;
+exports[`<Engines /> component should render the component in default state 1`] = `"<div class=\\"MuiGrid-root MuiGrid-container\\"><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">sidebar.engines.node-js</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;= 0.1.98</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">sidebar.engines.npm-version</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;3</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div></div>"`;
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,53 +1,38 @@
 import React from 'react';
+import { useTranslation, Trans } from 'react-i18next';

 import { goToVerdaccioWebsite } from '../../utils/windows';

 import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles';

-const renderTooltip = (): JSX.Element => (
-  <ToolTip>
-    <Earth name="earth" size="md" />
-    <Flags>
-      <Flag name="spain" size="md" />
-      <Flag name="nicaragua" size="md" />
-      <Flag name="india" size="md" />
-      <Flag name="brazil" size="md" />
-      <Flag name="china" size="md" />
-      <Flag name="austria" size="md" />
-    </Flags>
-  </ToolTip>
-);
-const POWERED_LABEL = 'Powered by';
-const MADEWITH_LABEL = ' Made with';
-const ON_LABEL = 'on';
-const HEARTH_EMOJI = '♥';
-
-const renderRight = (version = window.VERDACCIO_VERSION): JSX.Element => {
+/* eslint-disable react/jsx-key */
+const Footer: React.FC = () => {
+  const { t } = useTranslation();
  return (
-    <Right>
-      {POWERED_LABEL}
-      <Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
-      {`/ ${version}`}
-    </Right>
+    <Wrapper>
+      <Inner>
+        <Left>
+          <Trans components={[<Love />]} i18nKey="footer.made-with-love-on" />
+          <ToolTip>
+            <Earth name="earth" size="md" />
+            <Flags>
+              <Flag name="spain" size="md" />
+              <Flag name="nicaragua" size="md" />
+              <Flag name="india" size="md" />
+              <Flag name="brazil" size="md" />
+              <Flag name="china" size="md" />
+              <Flag name="austria" size="md" />
+            </Flags>
+          </ToolTip>
+        </Left>
+        <Right>
+          {t('footer.powered-by')}
+          <Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
+          {`/ ${window.VERDACCIO_VERSION}`}
+        </Right>
+      </Inner>
+    </Wrapper>
  );
 };

-const renderLeft = (): JSX.Element => (
-  <Left>
-    {MADEWITH_LABEL}
-    <Love>{HEARTH_EMOJI}</Love>
-    {ON_LABEL}
-    {renderTooltip()}
-  </Left>
-);
-
-const Footer: React.FC = () => (
-  <Wrapper>
-    <Inner>
-      {renderLeft()}
-      {renderRight()}
-    </Inner>
-  </Wrapper>
-);
-
 export default Footer;
--- a/src/components/Footer/snapshots/Footer.test.tsx.snap
+++ b/src/components/Footer/snapshots/Footer.test.tsx.snap
@@ -167,13 +167,13 @@ exports[`<Footer /> component should load the initial state of Footer component
    <div
      class="emotion-27 emotion-28"
    >
-       Made with
+      Made with 
      <span
        class="emotion-0 emotion-1"
      >
        ♥
      </span>
-      on
+       on
      <span
        class="emotion-25 emotion-26"
      >
--- a/src/components/Header/Header.test.tsx
+++ b/src/components/Header/Header.test.tsx
@@ -3,6 +3,7 @@ import { BrowserRouter as Router } from 'react-router-dom';

 import { render, fireEvent, waitForElement, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
 import { AppContextProvider } from '../../App';
+import translationEN from '../../../i18n/translations/en-US.json';

 import Header from './Header';

@@ -44,7 +45,7 @@ describe('<Header /> component with logged in state', () => {
  });

  test('should open login dialog', async () => {
-    const { getByText } = render(
+    const { getByTestId } = render(
      <Router>
        <AppContextProvider>
          <Header />
@@ -52,9 +53,9 @@ describe('<Header /> component with logged in state', () => {
      </Router>
    );

-    const loginBtn = getByText('Login');
+    const loginBtn = getByTestId('header--button-login');
    fireEvent.click(loginBtn);
-    const loginDialog = await waitForElement(() => getByText('Sign in'));
+    const loginDialog = await waitForElement(() => getByTestId('login--dialog'));
    expect(loginDialog).toBeTruthy();
  });

@@ -119,7 +120,7 @@ describe('<Header /> component with logged in state', () => {
    fireEvent.click(infoBtn);

    // wait for Close's button of registrationInfo modal appearance and return the element
-    const closeBtn = await waitForElement(() => getByText('CLOSE'));
+    const closeBtn = await waitForElement(() => getByText(translationEN.button.close));
    fireEvent.click(closeBtn);

    const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useContext } from 'react';
+import { useTranslation } from 'react-i18next';

 import storage from '../../utils/storage';
 import { getRegistryURL } from '../../utils/url';
@@ -18,13 +19,14 @@ interface Props {

 /* eslint-disable react/jsx-no-bind*/
 const Header: React.FC<Props> = ({ withoutSearch }) => {
+  const { t } = useTranslation();
  const appContext = useContext(AppContext);
  const [isInfoDialogOpen, setOpenInfoDialog] = useState();
  const [showMobileNavBar, setShowMobileNavBar] = useState();
  const [showLoginModal, setShowLoginModal] = useState(false);

  if (!appContext) {
-    throw Error('The app Context was not correct used');
+    throw Error(t('app-context-not-correct-used'));
  }

  const { user, scope, setUser } = appContext;
@@ -67,7 +69,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
            <Search />
          </InnerMobileNavBar>
          <Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
-            {'Cancel'}
+            {t('button.cancel')}
          </Button>
        </MobileNavBar>
      )}
--- a/src/components/Header/HeaderGreetings.tsx
+++ b/src/components/Header/HeaderGreetings.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';

 import Label from '../Label';

@@ -8,11 +9,14 @@ interface Props {
  username: string;
 }

-const HeaderGreetings: React.FC<Props> = ({ username }) => (
-  <>
-    <Greetings>{'Hi,'}</Greetings>
-    <Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" />
-  </>
-);
+const HeaderGreetings: React.FC<Props> = ({ username }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Greetings>{t('header.greetings')}</Greetings>
+      <Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" />
+    </>
+  );
+};

 export default HeaderGreetings;
--- a/src/components/Header/HeaderMenu.tsx
+++ b/src/components/Header/HeaderMenu.tsx
@@ -1,4 +1,5 @@
 import React, { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 import AccountCircle from '@material-ui/icons/AccountCircle';

 import IconButton from '../../muiComponents/IconButton';
@@ -23,35 +24,38 @@ const HeaderMenu: React.FC<Props> = ({
  anchorEl,
  onLoggedInMenu,
  onLoggedInMenuClose,
-}) => (
-  <>
-    <IconButton
-      color="inherit"
-      data-testid="header--menu-accountcircle"
-      id="header--button-account"
-      onClick={onLoggedInMenu}>
-      <AccountCircle />
-    </IconButton>
-    <Menu
-      anchorEl={anchorEl}
-      anchorOrigin={{
-        vertical: 'top',
-        horizontal: 'right',
-      }}
-      onClose={onLoggedInMenuClose}
-      open={isMenuOpen}
-      transformOrigin={{
-        vertical: 'top',
-        horizontal: 'right',
-      }}>
-      <MenuItem disabled={true}>
-        <HeaderGreetings username={username} />
-      </MenuItem>
-      <MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
-        {'Logout'}
-      </MenuItem>
-    </Menu>
-  </>
-);
+}) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <IconButton
+        color="inherit"
+        data-testid="header--menu-accountcircle"
+        id="header--button-account"
+        onClick={onLoggedInMenu}>
+        <AccountCircle />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        onClose={onLoggedInMenuClose}
+        open={isMenuOpen}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}>
+        <MenuItem disabled={true}>
+          <HeaderGreetings username={username} />
+        </MenuItem>
+        <MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
+          {t('button.logout')}
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};

 export default HeaderMenu;
--- a/src/components/Header/HeaderRight.tsx
+++ b/src/components/Header/HeaderRight.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';

 import Button from '../../muiComponents/Button';

@@ -25,6 +26,7 @@ const HeaderRight: React.FC<Props> = ({
 }) => {
  const [anchorEl, setAnchorEl] = useState();
  const [isMenuOpen, setIsMenuOpen] = useState();
+  const { t } = useTranslation();

  useEffect(() => {
    setIsMenuOpen(Boolean(anchorEl));
@@ -55,10 +57,10 @@ const HeaderRight: React.FC<Props> = ({
  return (
    <RightSide data-testid="header-right">
      {!withoutSearch && (
-        <HeaderToolTip onClick={onToggleMobileNav} title={'Search packages'} tooltipIconType={'search'} />
+        <HeaderToolTip onClick={onToggleMobileNav} title={t('search.packages')} tooltipIconType={'search'} />
      )}
-      <HeaderToolTip title={'Documentation'} tooltipIconType={'help'} />
-      <HeaderToolTip onClick={onOpenRegistryInfoDialog} title={'Registry Information'} tooltipIconType={'info'} />
+      <HeaderToolTip title={t('header.documentation')} tooltipIconType={'help'} />
+      <HeaderToolTip onClick={onOpenRegistryInfoDialog} title={t('header.registry-info')} tooltipIconType={'info'} />
      {username ? (
        <HeaderMenu
          anchorEl={anchorEl}
@@ -70,7 +72,7 @@ const HeaderRight: React.FC<Props> = ({
        />
      ) : (
        <Button color="inherit" data-testid="header--button-login" onClick={handleToggleLogin}>
-          {'Login'}
+          {t('button.login')}
        </Button>
      )}
    </RightSide>
--- a/src/components/Help/Help.tsx
+++ b/src/components/Help/Help.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';

 import { getRegistryURL } from '../../utils/url';
 import CopyToClipBoard from '../CopyToClipBoard';
@@ -24,23 +25,24 @@ function renderHeadingClipboardSegments(title: string, text: string): React.Reac

 const Help: React.FC = () => {
  const registryUrl = getRegistryURL();
+  const { t } = useTranslation();

  return (
    <Card id="help-card">
      <CardContent>
        <Typography component="h2" gutterBottom={true} id={COMPONENT_HELP_ID} variant="h5">
-          {HELP_TITLE}
+          {t('help.title')}
        </Typography>
        <HelpTitle color="textSecondary" gutterBottom={true}>
-          {'To publish your first package just:'}
+          {t('help.sub-title')}
        </HelpTitle>
-        {renderHeadingClipboardSegments('1. Login', `npm adduser --registry ${registryUrl}`)}
-        {renderHeadingClipboardSegments('2. Publish', `npm publish --registry ${registryUrl}`)}
-        <Text variant="body2">{'3. Refresh this page.'}</Text>
+        {renderHeadingClipboardSegments(t('help.first-step'), t('help.first-step-command-line', { registryUrl }))}
+        {renderHeadingClipboardSegments(t('help.second-step'), t('help.second-step-command-line', { registryUrl }))}
+        <Text variant="body2">{t('help.third-step')}</Text>
      </CardContent>
      <CardActions>
        <Button color="primary" href="https://verdaccio.org/docs/en/installation" size="small">
-          {'Learn More'}
+          {t('button.learn-more')}
        </Button>
      </CardActions>
    </Card>
--- a/src/components/Help/snapshots/Help.test.tsx.snap
+++ b/src/components/Help/snapshots/Help.test.tsx.snap
@@ -68,7 +68,7 @@ exports[`<Help /> component should load the component in default state 1`] = `
      <button
        class="MuiButtonBase-root MuiIconButton-root  emotion-4 emotion-5"
        tabindex="0"
-        title="Copy to Clipboard"
+        title="Copy to clipboard"
        type="button"
      >
        <span
@@ -107,7 +107,7 @@ exports[`<Help /> component should load the component in default state 1`] = `
      <button
        class="MuiButtonBase-root MuiIconButton-root  emotion-4 emotion-5"
        tabindex="0"
-        title="Copy to Clipboard"
+        title="Copy to clipboard"
        type="button"
      >
        <span
--- a/src/components/Install/Install.tsx
+++ b/src/components/Install/Install.tsx
@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';

 import { DetailContext } from '../../pages/Version';
 import Text from '../../muiComponents/Text';
@@ -14,6 +15,7 @@ const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
 }));

 const Install: React.FC = () => {
+  const { t } = useTranslation();
  const detailContext = useContext(DetailContext);

  const { packageMeta, packageName } = detailContext;
@@ -23,7 +25,9 @@ const Install: React.FC = () => {
  }

  return (
-    <List data-testid={'installList'} subheader={<StyledText variant={'subtitle1'}>{'Installation'}</StyledText>}>
+    <List
+      data-testid={'installList'}
+      subheader={<StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>}>
      <InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
      <InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
      <InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />
--- a/src/components/Install/InstallListItem.tsx
+++ b/src/components/Install/InstallListItem.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';

 import CopyToClipBoard from '../CopyToClipBoard';
 import Avatar from '../../muiComponents/Avatar';
@@ -43,14 +44,16 @@ interface Interface {
 }

 const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }) => {
+  const { t } = useTranslation();
+
  switch (dependencyManager) {
    case DependencyManager.NPM:
      return (
        <InstallItem button={true} data-testid={'installListItem-npm'}>
          <PackageMangerAvatar alt="npm" src={npmLogo} />
          <InstallListItemText
-            primary={<CopyToClipBoard text={`npm install ${packageName}`} />}
-            secondary={'Install using npm'}
+            primary={<CopyToClipBoard text={t('sidebar.installation.install-using-npm-command', { packageName })} />}
+            secondary={t('sidebar.installation.install-using-npm')}
          />
        </InstallItem>
      );
@@ -59,8 +62,8 @@ const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }
        <InstallItem button={true} data-testid={'installListItem-yarn'}>
          <PackageMangerAvatar alt="yarn" src={yarnLogo} />
          <InstallListItemText
-            primary={<CopyToClipBoard text={`yarn add ${packageName}`} />}
-            secondary={'Install using yarn'}
+            primary={<CopyToClipBoard text={t('sidebar.installation.install-using-yarn-command', { packageName })} />}
+            secondary={t('sidebar.installation.install-using-yarn')}
          />
        </InstallItem>
      );
@@ -69,8 +72,8 @@ const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }
        <InstallItem button={true} data-testid={'installListItem-pnpm'}>
          <PackageMangerAvatar alt={'pnpm'} src={pnpmLogo} />
          <InstallListItemText
-            primary={<CopyToClipBoard text={`pnpm install ${packageName}`} />}
-            secondary={'Install using pnpm'}
+            primary={<CopyToClipBoard text={t('sidebar.installation.install-using-pnpm-command', { packageName })} />}
+            secondary={t('sidebar.installation.install-using-pnpm')}
          />
        </InstallItem>
      );
--- a/src/components/Install/snapshots/Install.test.tsx.snap
+++ b/src/components/Install/snapshots/Install.test.tsx.snap
@@ -94,7 +94,7 @@ exports[`<Install /> renders correctly 1`] = `
          <button
            class="MuiButtonBase-root MuiIconButton-root  emotion-6 emotion-7"
            tabindex="0"
-            title="Copy to Clipboard"
+            title="Copy to clipboard"
            type="button"
          >
            <span
@@ -161,7 +161,7 @@ exports[`<Install /> renders correctly 1`] = `
          <button
            class="MuiButtonBase-root MuiIconButton-root  emotion-6 emotion-7"
            tabindex="0"
-            title="Copy to Clipboard"
+            title="Copy to clipboard"
            type="button"
          >
            <span
@@ -228,7 +228,7 @@ exports[`<Install /> renders correctly 1`] = `
          <button
            class="MuiButtonBase-root MuiIconButton-root  emotion-6 emotion-7"
            tabindex="0"
-            title="Copy to Clipboard"
+            title="Copy to clipboard"
            type="button"
          >
            <span
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import { Link as RouterLink } from 'react-router-dom';

 import Text, { TextProps } from '../../muiComponents/Text';
@@ -8,6 +8,7 @@ interface Props extends Pick<TextProps, 'variant'> {
  className?: string;
  to: string;
  children?: React.ReactNode;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
 }

 type LinkRef = HTMLAnchorElement;
--- a/src/components/LoginDialog/LoginDialog.test.tsx
+++ b/src/components/LoginDialog/LoginDialog.test.tsx
@@ -1,8 +1,9 @@
 import React from 'react';

-import { render, waitForElement, fireEvent, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
+import { render, waitForElement, fireEvent } from '../../utils/test-react-testing-library';
 import AppContext, { AppContextProps } from '../../App/AppContext';
 import api from '../../utils/api';
+import translationEN from '../../../i18n/translations/en-US.json';

 import LoginDialog from './LoginDialog';

@@ -35,13 +36,13 @@ describe('<LoginDialog /> component', () => {
      onClose: jest.fn(),
    };

-    const { getByText } = render(
+    const { getByTestId } = render(
      <AppContext.Provider value={appContextValue}>
        <LoginDialog onClose={props.onClose} open={props.open} />
      </AppContext.Provider>
    );

-    const loginDialogHeading = await waitForElement(() => getByText('Sign in'));
+    const loginDialogHeading = await waitForElement(() => getByTestId('login-dialog-form-login-button'));
    expect(loginDialogHeading).toBeTruthy();
  });

--- a/src/components/LoginDialog/LoginDialog.tsx
+++ b/src/components/LoginDialog/LoginDialog.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useContext, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';

 import { makeLogin } from '../../utils/login';
 import storage from '../../utils/storage';
@@ -16,10 +17,11 @@ interface Props {
 }

 const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
+  const { t } = useTranslation();
  const appContext = useContext(AppContext);

  if (!appContext) {
-    throw Error('The app Context was not correct used');
+    throw Error(t('app-context-not-correct-used'));
  }

  const [error, setError] = useState();
@@ -43,7 +45,7 @@ const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
  );

  return (
-    <Dialog fullWidth={true} id="login--dialog" maxWidth="sm" onClose={onClose} open={open}>
+    <Dialog data-testid="login--dialog" fullWidth={true} id="login--dialog" maxWidth="sm" onClose={onClose} open={open}>
      <LoginDialogCloseButton onClose={onClose} />
      <DialogContent>
        <LoginDialogHeader />
--- a/src/components/LoginDialog/LoginDialogCloseButton.tsx
+++ b/src/components/LoginDialog/LoginDialogCloseButton.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import CloseIcon from '@material-ui/icons/Close';
+import { useTranslation } from 'react-i18next';

 import DialogTitle from '../../muiComponents/DialogTitle';
 import IconButton from '../../muiComponents/IconButton';
@@ -17,12 +18,15 @@ interface Props {
  onClose: () => void;
 }

-const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => (
-  <DialogTitle>
-    <StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}>
-      <CloseIcon titleAccess="Close Dialog" />
-    </StyledIconButton>
-  </DialogTitle>
-);
+const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => {
+  const { t } = useTranslation();
+  return (
+    <DialogTitle>
+      <StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}>
+        <CloseIcon titleAccess={t('button.close')} />
+      </StyledIconButton>
+    </DialogTitle>
+  );
+};

 export default LoginDialogCloseButton;
--- a/src/components/LoginDialog/LoginDialogForm.tsx
+++ b/src/components/LoginDialog/LoginDialogForm.tsx
@@ -1,5 +1,6 @@
 import React, { memo } from 'react';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
 import useForm from 'react-hook-form/dist/react-hook-form.ie11';

 import TextField from '../../muiComponents/TextField';
@@ -28,6 +29,7 @@ interface Props {
 }

 const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
+  const { t } = useTranslation();
  const {
    register,
    errors,
@@ -48,13 +50,13 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
        helperText={errors.username?.message}
        id="login--dialog-username"
        inputRef={register({
-          required: { value: true, message: 'This field is required' },
-          minLength: { value: 2, message: 'This field required the min length of 2' },
+          required: { value: true, message: t('form-validation.required-field') },
+          minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
        })}
-        label="Username"
+        label={t('form.username')}
        margin="normal"
        name="username"
-        placeholder="Your username"
+        placeholder={t('form-placeholder.username')}
        required={true}
        variant="outlined"
      />
@@ -65,13 +67,13 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
        helperText={errors.password?.message}
        id="login--dialog-password"
        inputRef={register({
-          required: { value: true, message: 'This field is required' },
-          minLength: { value: 2, message: 'This field required the min length of 2' },
+          required: { value: true, message: t('form-validation.required-field') },
+          minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
        })}
-        label="Password"
+        label={t('form.password')}
        margin="normal"
        name="password"
-        placeholder="Your strong password"
+        placeholder={t('form-placeholder.password')}
        required={true}
        type="password"
        variant="outlined"
@@ -79,13 +81,14 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
      {error && <LoginDialogFormError error={error} />}
      <StyledButton
        color="primary"
+        data-testid="login-dialog-form-login-button"
        disabled={!isValid}
        fullWidth={true}
        id="login--dialog-button-submit"
        size="large"
        type="submit"
        variant="contained">
-        {'Sign In'}
+        {t('button.login')}
      </StyledButton>
    </StyledForm>
  );
--- a/src/components/LoginDialog/LoginDialogHeader.tsx
+++ b/src/components/LoginDialog/LoginDialogHeader.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import LockOutlined from '@material-ui/icons/LockOutlined';
 import CloseIcon from '@material-ui/icons/Close';
+import { useTranslation } from 'react-i18next';

 import Heading from '../../muiComponents/Heading';
 import Avatar from '../../muiComponents/Avatar';
@@ -26,17 +27,19 @@ interface Props {
 }

 const LoginDialogHeader: React.FC<Props> = ({ onClose }) => {
+  const { t } = useTranslation();
+
  return (
    <Box alignItems="center" display="flex" flexDirection="column" position="relative">
      {onClose && (
-        <StyledIconButton aria-label="Close" onClick={onClose}>
+        <StyledIconButton aria-label={t('button.close')} onClick={onClose}>
          <CloseIcon />
        </StyledIconButton>
      )}
      <StyledAvatar>
        <LockOutlined />
      </StyledAvatar>
-      <Heading>{'Sign in'}</Heading>
+      <Heading>{t('button.login')}</Heading>
    </Box>
  );
 };
--- a/src/components/Logo/Logo.tsx
+++ b/src/components/Logo/Logo.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import styled from '@emotion/styled';

-import logo from './img/verdaccio-blackwhite.svg';
+import logo from './img/logo.svg';

 export enum Size {
-  Tiny = '20px',
  Small = '40px',
  Big = '90px',
 }
--- a/src/components/Logo/img/logo.svg
+++ b/src/components/Logo/img/logo.svg
@@ -0,0 +1 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="verdaccio"><Title>Verdaccio</Title><defs><path id="b" d="M48 17.6L32.8 48H24L.4.8h15.2l12.8 25.6 4.4-8.8H48z"/><filter x="-20%" y="-11.7%" width="139.9%" height="140.3%" filterUnits="objectBoundingBox" id="a"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter><path id="d" d="M50.8 12H35.6L41.2.8h15.2L50.8 12z"/><filter x="-45.7%" y="-49.1%" width="191.3%" height="269.6%" filterUnits="objectBoundingBox" id="c"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><rect fill="#F7F8F6" width="100" height="100" rx="37"/><g transform="translate(22 29)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><path stroke="#405236" stroke-width="2.4" d="M46.058 18.8H33.542L28.4 29.083 14.858 2H2.342l22.4 44.8h7.316l14-28z" stroke-linejoin="square" fill="#405236"/></g><g transform="translate(22 29)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><path stroke="#CD4000" stroke-width="2.4" d="M50.058 10.8l4.4-8.8H41.942l-4.4 8.8h12.516z" stroke-linejoin="square" fill="#CD4000"/></g><path d="M54.06 75.8l2.575-5.112L36.857 31H24.342l22.4 44.8h7.319z" stroke="#405236" stroke-width="2.4" fill="#4A5E3F"/><path d="M59.6 31h15.221M55.6 35h15.221M51.6 39.8h15.221" stroke="#CD4000" stroke-width="2.4" stroke-linecap="square"/></g></svg>
--- a/src/components/Logo/img/verdaccio-blackwhite.svg
+++ b/src/components/Logo/img/verdaccio-blackwhite.svg
@@ -1,31 +0,0 @@
-<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" id="verdaccio">
-    <Title>Verdaccio</Title>
-    <rect width="100" height="100" rx="37" fill="black" />
-    <g filter="url(#filter0_d)">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M70 46.7288L54.6723 77H45.7983L22 30L37.3277 30L50.2353 55.4915L54.6723 46.7288H70Z" fill="white" fill-opacity="0.6" />
-    </g>
-    <g filter="url(#filter1_d)">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M67.621 41H72.4L78 30H75.621H62.8H58V32.3571H61.6L60.8 33.9286H54V36.2857H59.6L58.4 38.6429H50V41H57.2H67.621Z" fill="white" />
-    </g>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M54.785 77H45.8804L22 30H37.3806L58 70.7175L54.785 77Z" fill="white" />
-    <defs>
-        <filter id="filter0_d" x="17" y="29" width="58" height="57" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
-            <feOffset dy="4" />
-            <feGaussianBlur stdDeviation="2.5" />
-            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646 0" />
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
-        </filter>
-        <filter id="filter1_d" x="45" y="29" width="38" height="21" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix" />
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
-            <feOffset dy="4" />
-            <feGaussianBlur stdDeviation="2.5" />
-            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646 0" />
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
-        </filter>
-    </defs>
-</svg>
--- a/src/components/Logo/img/verdaccio.svg
+++ b/src/components/Logo/img/verdaccio.svg
@@ -1,32 +0,0 @@
-<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="verdaccio">
-    <Title>Verdaccio</Title>
-    <defs>
-        <path id="b" d="M48 17.6L32.8 48H24L.4.8h15.2l12.8 25.6 4.4-8.8H48z" />
-        <filter x="-20%" y="-11.7%" width="139.9%" height="140.3%" filterUnits="objectBoundingBox" id="a">
-            <feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1" />
-            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
-            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1" />
-            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1" />
-        </filter>
-        <path id="d" d="M50.8 12H35.6L41.2.8h15.2L50.8 12z" />
-        <filter x="-45.7%" y="-49.1%" width="191.3%" height="269.6%" filterUnits="objectBoundingBox" id="c">
-            <feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1" />
-            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
-            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1" />
-            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1" />
-        </filter>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <rect fill="#F7F8F6" width="100" height="100" rx="37" />
-        <g transform="translate(22 29)">
-            <use fill="#000" filter="url(#a)" xlink:href="#b" />
-            <path stroke="#405236" stroke-width="2.4" d="M46.058 18.8H33.542L28.4 29.083 14.858 2H2.342l22.4 44.8h7.316l14-28z" stroke-linejoin="square" fill="#405236" />
-        </g>
-        <g transform="translate(22 29)">
-            <use fill="#000" filter="url(#c)" xlink:href="#d" />
-            <path stroke="#CD4000" stroke-width="2.4" d="M50.058 10.8l4.4-8.8H41.942l-4.4 8.8h12.516z" stroke-linejoin="square" fill="#CD4000" />
-        </g>
-        <path d="M54.06 75.8l2.575-5.112L36.857 31H24.342l22.4 44.8h7.319z" stroke="#405236" stroke-width="2.4" fill="#4A5E3F" />
-        <path d="M59.6 31h15.221M55.6 35h15.221M51.6 39.8h15.221" stroke="#CD4000" stroke-width="2.4" stroke-linecap="square" />
-    </g>
-</svg>
--- a/src/components/NotFound/NotFound.tsx
+++ b/src/components/NotFound/NotFound.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';

 import Box from '../../muiComponents/Box';
 import Button from '../../muiComponents/Button';
@@ -9,10 +10,6 @@ import { Theme } from '../../design-tokens/theme';

 import PackageImg from './img/package.svg';

-export const NOT_FOUND_TEXT = "Sorry, we couldn't find it...";
-export const LABEL_NOT_FOUND = "The page you're looking for doesn't exist.";
-export const GO_TO_HOME_PAGE = 'Go to the home page';
-
 const EmptyPackage = styled('img')({
  width: '150px',
  margin: '0 auto',
@@ -25,6 +22,7 @@ const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({

 const NotFound: React.FC = () => {
  const history = useHistory();
+  const { t } = useTranslation();

  const handleGoHome = useCallback(() => {
    history.push('/');
@@ -39,12 +37,12 @@ const NotFound: React.FC = () => {
      flexGrow={1}
      justifyContent="center"
      p={2}>
-      <EmptyPackage alt="404 - Page not found" src={PackageImg} />
+      <EmptyPackage alt={t('error.404.page-not-found')} src={PackageImg} />
      <StyledHeading className="not-found-text" variant="h4">
-        {NOT_FOUND_TEXT}
+        {t('error.404.sorry-we-could-not-find-it')}
      </StyledHeading>
-      <Button onClick={handleGoHome} variant="contained">
-        {GO_TO_HOME_PAGE}
+      <Button data-testid="not-found-go-to-home-button" onClick={handleGoHome} variant="contained">
+        {t('button.go-to-the-home-page')}
      </Button>
    </Box>
  );
--- a/src/components/NotFound/Notfound.test.tsx
+++ b/src/components/NotFound/Notfound.test.tsx
@@ -3,7 +3,7 @@ import { BrowserRouter as Router } from 'react-router-dom';

 import { render, fireEvent } from '../../utils/test-react-testing-library';

-import NotFound, { GO_TO_HOME_PAGE } from './NotFound';
+import NotFound from './NotFound';

 describe('<NotFound /> component', () => {
  test('should load the component in default state', () => {
@@ -14,17 +14,17 @@ describe('<NotFound /> component', () => {
    );
    expect(container.firstChild).toMatchSnapshot();
  });
-  test('go to Home Page button click', () => {
+
+  test('go to Home Page button click', async () => {
    const spy = jest.spyOn(React, 'useCallback');
-    const { getByText } = render(
+    const { getByTestId } = render(
      <Router>
        <NotFound />
      </Router>
    );

-    const node = getByText(GO_TO_HOME_PAGE);
+    const node = getByTestId('not-found-go-to-home-button');
    fireEvent.click(node);
-
    expect(spy).toHaveBeenCalled();
  });
 });
--- a/src/components/NotFound/snapshots/Notfound.test.tsx.snap
+++ b/src/components/NotFound/snapshots/Notfound.test.tsx.snap
@@ -27,6 +27,7 @@ exports[`<NotFound /> component should load the component in default state 1`] =
  </h4>
  <button
    class="MuiButtonBase-root MuiButton-root MuiButton-contained"
+    data-testid="not-found-go-to-home-button"
    tabindex="0"
    type="button"
  >
--- a/src/components/NotFound/index.ts
+++ b/src/components/NotFound/index.ts
@@ -1 +1 @@
-export { default, NOT_FOUND_TEXT } from './NotFound';
+export { default } from './NotFound';
--- a/src/components/Package/Package.tsx
+++ b/src/components/Package/Package.tsx
@@ -2,12 +2,14 @@ import React from 'react';
 import BugReport from '@material-ui/icons/BugReport';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
 import HomeIcon from '@material-ui/icons/Home';
+import { useTranslation } from 'react-i18next';

 import { PackageMetaInterface, Author as PackageAuthor } from '../../../types/packageMeta';
 import Tag from '../Tag';
 import fileSizeSI from '../../utils/file-size';
-import { formatDate, formatDateDistance } from '../../utils/package';
+import { formatDate, formatDateDistance, getAuthorName } from '../../utils/package';
 import Tooltip from '../../muiComponents/Tooltip';
+import Link from '../Link';
 import { isURL } from '../../utils/url';
 import { downloadTarball } from '../ActionBar';
 import ListItem from '../../muiComponents/ListItem';
@@ -64,11 +66,13 @@ const Package: React.FC<PackageInterface> = ({
  time,
  version,
 }) => {
+  const { t } = useTranslation();
+
  const renderVersionInfo = (): React.ReactNode =>
    version && (
      <OverviewItem>
        <Icon name={'version'} />
-        {`v${version}`}
+        {t('package.version', { version })}
      </OverviewItem>
    );

@@ -77,7 +81,7 @@ const Package: React.FC<PackageInterface> = ({
      <Author>
        <Avatar alt={authorName} src={authorAvatar} />
        <Details>
-          <Text text={authorName} />
+          <Text text={getAuthorName(authorName)} />
        </Details>
      </Author>
    );
@@ -103,7 +107,7 @@ const Package: React.FC<PackageInterface> = ({
    time && (
      <OverviewItem>
        <Icon name="time" />
-        <Published>{`Published on ${formatDate(time)} •`}</Published>
+        <Published>{t('package.published-on', { time: formatDate(time) })}</Published>
        {formatDateDistance(time)}
      </OverviewItem>
    );
@@ -111,26 +115,26 @@ const Package: React.FC<PackageInterface> = ({
  const renderHomePageLink = (): React.ReactNode =>
    homepage &&
    isURL(homepage) && (
-      <a href={homepage} target={'_blank'}>
-        <Tooltip aria-label={'Homepage'} title={'Visit homepage'}>
-          <IconButton aria-label={'Homepage'}>
+      <Link external={true} to={homepage}>
+        <Tooltip aria-label={t('package.homepage')} title={t('package.visit-home-page')}>
+          <IconButton aria-label={t('package.homepage')}>
            <HomeIcon />
          </IconButton>
        </Tooltip>
-      </a>
+      </Link>
    );

  const renderBugsLink = (): React.ReactNode =>
    bugs &&
    bugs.url &&
    isURL(bugs.url) && (
-      <a href={bugs.url} target={'_blank'}>
-        <Tooltip aria-label={'Bugs'} title={'Open an issue'}>
-          <IconButton aria-label={'Bugs'}>
+      <Link external={true} to={bugs.url}>
+        <Tooltip aria-label={t('package.bugs')} title={t('package.open-an-issue')}>
+          <IconButton aria-label={t('package.bugs')}>
            <BugReport />
          </IconButton>
        </Tooltip>
-      </a>
+      </Link>
    );

  const renderDownloadLink = (): React.ReactNode =>
@@ -138,13 +142,13 @@ const Package: React.FC<PackageInterface> = ({
    dist.tarball &&
    isURL(dist.tarball) && (
      // eslint-disable-next-line
-      <a onClick={downloadTarball(dist.tarball.replace(`https://registry.npmjs.org/`, window.location.href))} target={'_blank'}>
-        <Tooltip aria-label={'Download the tar file'} title={'Download tarball'}>
-          <IconButton aria-label={'Download'}>
+      <Link to="#" external={true} onClick={downloadTarball(dist.tarball.replace(`https://registry.npmjs.org/`, window.location.href))}>
+        <Tooltip aria-label={t('package.download', { what: t('package.the-tar-file') })} title={t('package.tarball')}>
+          <IconButton aria-label={t('package.download')}>
            <DownloadIcon />
          </IconButton>
        </Tooltip>
-      </a>
+      </Link>
    );

  const renderPrimaryComponent = (): React.ReactNode => {
@@ -155,7 +159,7 @@ const Package: React.FC<PackageInterface> = ({
            <PackageTitle className="package-title">{packageName}</PackageTitle>
          </WrapperLink>
        </Grid>
-        <GridRightAligned item={true} xs={true}>
+        <GridRightAligned alignItems="center" container={true} item={true} justify="flex-end" xs={true}>
          {renderHomePageLink()}
          {renderBugsLink()}
          {renderDownloadLink()}
--- a/src/components/Package/styles.ts
+++ b/src/components/Package/styles.ts
@@ -71,7 +71,7 @@ export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
  fontSize: 20,
  display: 'block',
  marginBottom: 12,
-  color: theme?.palette?.eclipse,
+  color: theme && theme.palette.eclipse,
  cursor: 'pointer',
  ':hover': {
    color: theme && theme.palette.black,
@@ -117,7 +117,7 @@ export const PackageListItemText = styled(ListItemText)({
 });

 export const Description = styled(Typography)<{ theme?: Theme }>(props => ({
-  color: props?.theme?.palette.greyDark2,
+  color: props.theme && props.theme.palette.greyDark2,
  fontSize: '14px',
  paddingRight: 0,
 }));
--- a/src/components/RegistryInfoDialog/RegistryInfoDialog.tsx
+++ b/src/components/RegistryInfoDialog/RegistryInfoDialog.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';

 import Button from '../../muiComponents/Button';
 import Dialog from '../../muiComponents/Dialog';
@@ -7,18 +8,19 @@ import DialogActions from '../../muiComponents/DialogActions';
 import { Title, Content } from './styles';
 import { Props } from './types';

-const LABEL = 'CLOSE';
-
-const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose }) => (
-  <Dialog data-testid={'registryInfo--dialog'} id="registryInfo--dialog-container" onClose={onClose} open={open}>
-    <Title disableTypography={true}>{'Register Info'}</Title>
-    <Content>{children}</Content>
-    <DialogActions>
-      <Button color="inherit" id="registryInfo--dialog-close" onClick={onClose}>
-        {LABEL}
-      </Button>
-    </DialogActions>
-  </Dialog>
-);
+const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose }) => {
+  const { t } = useTranslation();
+  return (
+    <Dialog data-testid={'registryInfo--dialog'} id="registryInfo--dialog-container" onClose={onClose} open={open}>
+      <Title disableTypography={true}>{t('dialog.registry-info.title')}</Title>
+      <Content>{children}</Content>
+      <DialogActions>
+        <Button color="inherit" id="registryInfo--dialog-close" onClick={onClose}>
+          {t('button.close')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

 export default RegistryInfoDialog;
--- a/src/components/Repository/Repository.tsx
+++ b/src/components/Repository/Repository.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';

 import Avatar from '../../muiComponents/Avatar';
 import Text from '../../muiComponents/Text';
@@ -44,6 +45,7 @@ const RepositoryAvatar = styled(Avatar)({

 const Repository: React.FC = () => {
  const detailContext = React.useContext(DetailContext);
+  const { t } = useTranslation();

  const { packageMeta } = detailContext;

@@ -64,7 +66,7 @@ const Repository: React.FC = () => {
  const repositoryURL = getCorrectRepositoryURL();

  return (
-    <List dense={true} subheader={<StyledText variant="subtitle1">{'Repository'}</StyledText>}>
+    <List dense={true} subheader={<StyledText variant="subtitle1">{t('sidebar.repository.title')}</StyledText>}>
      <RepositoryListItem button={true}>
        <RepositoryAvatar src={git} />
        <RepositoryListItemText
--- a/src/components/Search/Search.tsx
+++ b/src/components/Search/Search.tsx
@@ -2,6 +2,7 @@ import React, { useState, FormEvent, useCallback } from 'react';
 import debounce from 'lodash/debounce';
 import { RouteComponentProps, withRouter } from 'react-router';
 import { SuggestionSelectedEventData } from 'react-autosuggest';
+import { useTranslation } from 'react-i18next';

 import AutoComplete from '../AutoComplete';
 import { callSearch } from '../../utils/calls';
@@ -10,11 +11,11 @@ import SearchAdornment from './SearchAdornment';

 const CONSTANTS = {
  API_DELAY: 300,
-  PLACEHOLDER_TEXT: 'Search Packages',
  ABORT_ERROR: 'AbortError',
 };

 const Search: React.FC<RouteComponentProps> = ({ history }) => {
+  const { t } = useTranslation();
  const [suggestions, setSuggestions] = useState([]);
  const [loaded, setLoaded] = useState(false);
  const [search, setSearch] = useState('');
@@ -141,7 +142,7 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
      onCleanSuggestions={handlePackagesClearRequested}
      onClick={handleClickSearch}
      onSuggestionsFetch={debounce(handleFetchPackages, CONSTANTS.API_DELAY)}
-      placeholder={CONSTANTS.PLACEHOLDER_TEXT}
+      placeholder={t('search.packages')}
      startAdornment={<SearchAdornment />}
      suggestions={suggestions}
      suggestionsError={error}
--- a/src/components/UpLinks/UpLinks.tsx
+++ b/src/components/UpLinks/UpLinks.tsx
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';

 import { DetailContext } from '../../pages/Version';
 import NoItems from '../NoItems';
@@ -10,6 +11,7 @@ import { StyledText, Spacer, ListItemText } from './styles';

 const UpLinks: React.FC = () => {
  const { packageMeta } = useContext(DetailContext);
+  const { t } = useTranslation();

  if (!packageMeta || !packageMeta._uplinks || !packageMeta.latest) {
    return null;
@@ -18,12 +20,12 @@ const UpLinks: React.FC = () => {
  const { _uplinks: uplinks, latest } = packageMeta;

  if (Object.keys(uplinks).length === 0) {
-    return <NoItems text={`${latest.name} has no uplinks.`} />;
+    return <NoItems text={t('uplinks.no-items', { name: latest.name })} />;
  }

  return (
    <>
-      <StyledText variant="subtitle1">{'Uplinks'}</StyledText>
+      <StyledText variant="subtitle1">{t('uplinks.title')}</StyledText>
      <List>
        {Object.keys(uplinks)
          .reverse()
--- a/src/components/UpLinks/snapshots/UpLinks.test.tsx.snap
+++ b/src/components/UpLinks/snapshots/UpLinks.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">verdaccio has no uplinks.</h6>"`;
+exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">uplinks.no-items</h6>"`;

-exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-t1rp47-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`;
+exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">uplinks.title</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-t1rp47-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`;
--- a/src/components/Versions/Versions.test.tsx
+++ b/src/components/Versions/Versions.test.tsx
@@ -4,8 +4,9 @@ import { MemoryRouter } from 'react-router-dom';
 import { render, cleanup } from '../../utils/test-react-testing-library';
 import { mount } from '../../utils/test-enzyme';
 import { DetailContext, DetailContextProps } from '../../pages/Version';
+import translationEN from '../../../i18n/translations/en-US.json';

-import Versions, { LABEL_CURRENT_TAGS, LABEL_VERSION_HISTORY } from './Versions';
+import Versions from './Versions';
 import data from './__partials__/data.json';

 const detailContextValue: Partial<DetailContextProps> = {
@@ -35,8 +36,8 @@ describe('<Version /> component', () => {
  test('should render versions', () => {
    const { getByText } = render(<ComponentToBeRendered contextValue={detailContextValue} />);

-    expect(getByText(LABEL_VERSION_HISTORY)).toBeTruthy();
-    expect(getByText(LABEL_CURRENT_TAGS)).toBeTruthy();
+    expect(getByText(translationEN.versions['version-history'])).toBeTruthy();
+    expect(getByText(translationEN.versions['current-tags'])).toBeTruthy();

    // pick some versions
    expect(getByText('2.3.0')).toBeTruthy();
@@ -48,8 +49,8 @@ describe('<Version /> component', () => {
      <ComponentToBeRendered contextValue={{ packageName: detailContextValue.packageName }} />
    );

-    expect(queryByText(LABEL_VERSION_HISTORY)).toBeFalsy();
-    expect(queryByText(LABEL_CURRENT_TAGS)).toBeFalsy();
+    expect(queryByText(translationEN.versions['version-history'])).toBeFalsy();
+    expect(queryByText(translationEN.versions['current-tags'])).toBeFalsy();
  });

  test.todo('should click on version link');
--- a/src/components/Versions/Versions.tsx
+++ b/src/components/Versions/Versions.tsx
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';

 import { DetailContext } from '../../pages/Version';
 import { DIST_TAGS } from '../../../lib/constants';
@@ -6,13 +7,9 @@ import { DIST_TAGS } from '../../../lib/constants';
 import { StyledText } from './styles';
 import VersionsTagList from './VersionsTagList';
 import VersionsHistoryList from './VersionsHistoryList';
-
-export const NOT_AVAILABLE = 'Not available';
-export const LABEL_CURRENT_TAGS = 'Current Tags';
-export const LABEL_VERSION_HISTORY = 'Version History';
-
 const Versions: React.FC = () => {
  const detailContext = useContext(DetailContext);
+  const { t } = useTranslation();

  const { packageMeta, packageName } = detailContext;

@@ -26,13 +23,13 @@ const Versions: React.FC = () => {
    <>
      {distTags && Object.keys(distTags).length > 0 && (
        <>
-          <StyledText variant="subtitle1">{LABEL_CURRENT_TAGS}</StyledText>
+          <StyledText variant="subtitle1">{t('versions.current-tags')}</StyledText>
          <VersionsTagList tags={distTags} />
        </>
      )}
      {versions && Object.keys(versions).length > 0 && packageName && (
        <>
-          <StyledText variant="subtitle1">{LABEL_VERSION_HISTORY}</StyledText>
+          <StyledText variant="subtitle1">{t('versions.version-history')}</StyledText>
          <VersionsHistoryList packageName={packageName} time={time} versions={versions} />
        </>
      )}
--- a/src/components/Versions/VersionsHistoryList.tsx
+++ b/src/components/Versions/VersionsHistoryList.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';

 import { Versions, Time } from '../../../types/packageMeta';
 import { formatDateDistance } from '../../utils/package';
@@ -7,28 +8,32 @@ import ListItem from '../../muiComponents/ListItem';

 import { Spacer, ListItemText, StyledLink } from './styles';

-export const NOT_AVAILABLE = 'Not available';
-
 interface Props {
  versions: Versions;
  packageName: string;
  time: Time;
 }

-const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => (
-  <List dense={true}>
-    {Object.keys(versions)
-      .reverse()
-      .map(version => (
-        <ListItem className="version-item" key={version}>
-          <StyledLink to={`/-/web/detail/${packageName}/v/${version}`}>
-            <ListItemText>{version}</ListItemText>
-          </StyledLink>
-          <Spacer />
-          <ListItemText>{time[version] ? formatDateDistance(time[version]) : NOT_AVAILABLE}</ListItemText>
-        </ListItem>
-      ))}
-  </List>
-);
+const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => {
+  const { t } = useTranslation();
+
+  return (
+    <List dense={true}>
+      {Object.keys(versions)
+        .reverse()
+        .map(version => (
+          <ListItem className="version-item" key={version}>
+            <StyledLink to={`/-/web/detail/${packageName}/v/${version}`}>
+              <ListItemText>{version}</ListItemText>
+            </StyledLink>
+            <Spacer />
+            <ListItemText>
+              {time[version] ? formatDateDistance(time[version]) : t('versions.not-available')}
+            </ListItemText>
+          </ListItem>
+        ))}
+    </List>
+  );
+};

 export default VersionsHistoryList;
--- a/src/design-tokens/theme.ts
+++ b/src/design-tokens/theme.ts
@@ -1,25 +1,34 @@
 import createMuiTheme from '@material-ui/core/styles/createMuiTheme';

-import defaultTheme from './themes/default';
-import darkTheme from './themes/dark';
-import { ColorsTheme } from './types';
-
-function getThemeColors() {
-  // eslint-disable-next-line no-constant-condition
-  if (false) {
-    return defaultTheme;
-  } else {
-    return darkTheme;
-  }
-}
-
-export type Colors = ColorsTheme;
-
-const padding = {
-  light: '16px',
-  regular: '24px',
+// Main colors
+// -------------------------
+const colors = {
+  black: '#000',
+  white: '#fff',
+  red: '#d32f2f',
+  orange: '#CD4000',
+  greySuperLight: '#f5f5f5',
+  greyLight: '#d3d3d3',
+  greyLight2: '#908ba1',
+  greyLight3: '#f3f4f240',
+  greyDark: '#a9a9a9',
+  greyDark2: '#586069',
+  greyChateau: '#95989a',
+  greyGainsboro: '#e3e3e3',
+  greyAthens: '#d3dddd',
+  eclipse: '#3c3c3c',
+  paleNavy: '#e4e8f1',
+  saltpan: '#f7f8f6',
+  snow: '#f9f9f9',
+  love: '#e25555',
+  nobel01: '#999999',
+  nobel02: '#9f9f9f',
+  primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
+  secondary: '#20232a',
 };

+export type Colors = keyof typeof colors;
+
 const fontSize = {
  xxl: 26,
  xl: 24,
@@ -63,10 +72,10 @@ export const theme = createMuiTheme({
    fontFamily: 'inherit',
  },
  palette: {
-    ...getThemeColors(),
-    primary: { main: getThemeColors().primary },
-    secondary: { main: getThemeColors().secondary },
-    error: { main: getThemeColors().red },
+    ...colors,
+    primary: { main: colors.primary },
+    secondary: { main: colors.secondary },
+    error: { main: colors.red },
  },
  ...customizedTheme,
 });
--- a/src/design-tokens/themes/dark.ts
+++ b/src/design-tokens/themes/dark.ts
@@ -1,30 +0,0 @@
-const colors = {
-  black: '#000',
-  white: '#fff',
-  red: '#d32f2f',
-  orange: '#CD4000',
-  greySuperLight: '#f5f5f5',
-  greyLight: '#d3d3d3',
-  greyLight2: '#908ba1',
-  greyLight3: '#f3f4f240',
-  greyDark: '#a9a9a9',
-  greyDark2: '#fff',
-  greyChateau: '#95989a',
-  greyGainsboro: '#e3e3e3',
-  greyAthens: '#d3dddd',
-  eclipse: '#fff',
-  paleNavy: '#e4e8f1',
-  saltpan: '#f7f8f6',
-  snow: '#f9f9f9',
-  love: '#e25555',
-  nobel01: '#999999',
-  nobel02: '#9f9f9f',
-  primary: '#000000',
-  secondary: '#ffffff',
-  // colors based on features
-  backgroundBody: '#000',
-  lightBackgroundColor: '#fff',
-  readmeBackgroundColor: '#fff',
-};
-
-export default colors;
--- a/src/design-tokens/themes/default.ts
+++ b/src/design-tokens/themes/default.ts
@@ -1,28 +0,0 @@
-const colors = {
-  black: '#000',
-  white: '#fff',
-  red: '#d32f2f',
-  orange: '#CD4000',
-  greySuperLight: '#f5f5f5',
-  greyLight: '#d3d3d3',
-  greyLight2: '#908ba1',
-  greyLight3: '#f3f4f240',
-  greyDark: '#a9a9a9',
-  greyDark2: '#586069',
-  greyChateau: '#95989a',
-  greyGainsboro: '#e3e3e3',
-  greyAthens: '#d3dddd',
-  eclipse: '#3c3c3c',
-  paleNavy: '#e4e8f1',
-  saltpan: '#f7f8f6',
-  snow: '#f9f9f9',
-  love: '#e25555',
-  nobel01: '#999999',
-  nobel02: '#9f9f9f',
-  primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
-  secondary: '#20232a',
-  // colors based on features
-  backgroundBody: '#fff',
-};
-
-export default colors;
--- a/src/design-tokens/types.ts
+++ b/src/design-tokens/types.ts
@@ -1,3 +0,0 @@
-export interface ColorsTheme {
-  [key: string]: string;
-}
--- a/src/icons/GitHub.tsx
+++ b/src/icons/GitHub.tsx
@@ -1,14 +0,0 @@
-/* eslint-disable max-len */
-/* eslint-disable react/jsx-curly-brace-presence */
-
-import React from 'react';
-
-import SvgIcon from '../muiComponents/SvgIcon';
-
-const GitHub: React.FC = props => (
-  <SvgIcon {...props}>
-    <path d="M12.007 0C6.12 0 1.1 4.27.157 10.08c-.944 5.813 2.468 11.45 8.054 13.312.19.064.397.033.555-.084.16-.117.25-.304.244-.5v-2.042c-3.33.735-4.037-1.56-4.037-1.56-.22-.726-.694-1.35-1.334-1.756-1.096-.75.074-.735.074-.735.773.103 1.454.557 1.846 1.23.694 1.21 2.23 1.638 3.45.96.056-.61.327-1.178.766-1.605-2.67-.3-5.462-1.335-5.462-6.002-.02-1.193.42-2.35 1.23-3.226-.327-1.015-.27-2.116.166-3.09 0 0 1.006-.33 3.3 1.23 1.966-.538 4.04-.538 6.003 0 2.295-1.5 3.3-1.23 3.3-1.23.445 1.006.49 2.144.12 3.18.81.877 1.25 2.033 1.23 3.226 0 4.607-2.805 5.627-5.476 5.927.578.583.88 1.386.825 2.206v3.29c-.005.2.092.393.26.507.164.115.377.14.565.063 5.568-1.88 8.956-7.514 8.007-13.313C22.892 4.267 17.884.007 12.008 0z" />
-  </SvgIcon>
-);
-
-export default GitHub;
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -1 +0,0 @@
-export { default } from './GitHub';
--- a/src/pages/Version/Version.test.tsx
+++ b/src/pages/Version/Version.test.tsx
@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router';
 import { waitForElement } from '@testing-library/dom';

 import { render } from '../../utils/test-react-testing-library';
-import { NOT_FOUND_TEXT } from '../../components/NotFound';
+import translationEN from '../../../i18n/translations/en-US.json';

 import Version from './Version';
 import { DetailContext } from './context';
@@ -51,7 +51,9 @@ describe('test Version page', () => {
      </MemoryRouter>
    );
    // we wait fetch response (mocked above)
-    const notFoundElement = await waitForElement(() => getByText(NOT_FOUND_TEXT));
+    const notFoundElement = await waitForElement(() =>
+      getByText(translationEN.error['404']['sorry-we-could-not-find-it'])
+    );
    expect(notFoundElement).toBeTruthy();
  });

--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -29,7 +29,11 @@ const Home: React.FC<Props> = ({ isUserLoggedIn }) => {
    loadPackages().then();
  }, [isUserLoggedIn]);

-  return <div className="container content">{isLoading ? <Loading /> : <PackageList packages={packages} />}</div>;
+  return (
+    <div className="container content" data-testid="home-page-container">
+      {isLoading ? <Loading /> : <PackageList packages={packages} />}
+    </div>
+  );
 };

 export default Home;
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,7 +1,3 @@
-export const TEXT = {
-  CLIPBOARD_COPY: 'Copy to Clipboard',
-};
-
 export const NODE_MANAGER = {
  npm: 'npm',
  yarn: 'yarn',
--- a/src/utils/login.test.ts
+++ b/src/utils/login.test.ts
@@ -16,6 +16,22 @@ jest.mock('./api', () => ({
  request: require('../../jest/unit/components/__mocks__/api').default.request,
 }));

+jest.mock('i18next', () => {
+  const translationEN = require('../../i18n/translations/en-US.json');
+  return {
+    t: (key: string) => {
+      const splittedKey = key.split('.');
+      let result = translationEN;
+
+      for (const element of splittedKey) {
+        result = result[element];
+      }
+
+      return result;
+    },
+  };
+});
+
 describe('isTokenExpire', (): void => {
  test('isTokenExpire - null is not a valid payload', (): void => {
    expect(isTokenExpire(null)).toBeTruthy();
--- a/src/utils/login.ts
+++ b/src/utils/login.ts
@@ -2,6 +2,7 @@ import isString from 'lodash/isString';
 import isNumber from 'lodash/isNumber';
 import isEmpty from 'lodash/isEmpty';
 import { Base64 } from 'js-base64';
+import i18next from 'i18next';

 import { HEADERS } from '../../lib/constants';

@@ -56,7 +57,7 @@ export async function makeLogin(username?: string, password?: string): Promise<L
  if (isEmpty(username) || isEmpty(password)) {
    const error = {
      type: 'error',
-      description: "Username or password can't be empty!",
+      description: i18next.t('form-validation.username-or-password-cant-be-empty'),
    };
    return { error };
  }
@@ -78,7 +79,7 @@ export async function makeLogin(username?: string, password?: string): Promise<L
    console.error('login error', e.message);
    const error = {
      type: 'error',
-      description: 'Unable to sign in',
+      description: i18next.t('form-validation.unable-to-sign-in'),
    };
    return { error };
  }
--- a/src/utils/package.ts
+++ b/src/utils/package.ts
@@ -1,5 +1,6 @@
 import { isObject } from 'util';

+import i18n from 'i18next';
 import { UpLinks } from '@verdaccio/types';
 import isString from 'lodash/isString';
 import dayjs from 'dayjs';
@@ -90,3 +91,7 @@ export function getRecentReleases(time: Time = {}): Time[] {

  return recent.slice(recent.length - 3, recent.length).reverse();
 }
+
+export function getAuthorName(authorName: string): string {
+  return authorName.toLowerCase() === 'anonymous' ? i18n.t('author-anonymous') : authorName;
+}
--- a/src/utils/test-enzyme.ts
+++ b/src/utils/test-enzyme.ts
@@ -1,3 +1,4 @@
+import React from 'react';
 import { mount, shallow } from 'enzyme';

 import ThemeProvider from '../design-tokens/ThemeProvider';
--- a/src/utils/test-react-testing-library.tsx
+++ b/src/utils/test-react-testing-library.tsx
@@ -1,10 +1,17 @@
 import { render } from '@testing-library/react';
 import React from 'react';
+import { I18nextProvider } from 'react-i18next';

+import i18nConfig from '../../i18n/config';
 import ThemeProvider from '../design-tokens/ThemeProvider';

 const customRender = (node: React.ReactElement<any>, ...options: Array<any>) => {
-  return render(<ThemeProvider>{node}</ThemeProvider>, ...options);
+  return render(
+    <ThemeProvider>
+      <I18nextProvider i18n={i18nConfig}>{node}</I18nextProvider>
+    </ThemeProvider>,
+    ...options
+  );
 };

 export * from '@testing-library/react';
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@@ -2,8 +2,6 @@ import isURLValidator from 'validator/lib/isURL';
 import isEmailValidator from 'validator/lib/isEmail';
 import '../../types';

-const OCTET_STREAM_TYPE = 'application/octet-stream';
-
 export function isURL(url: string): boolean {
  return isURLValidator(url || '', {
    protocols: ['http', 'https', 'git+https'],
@@ -39,9 +37,9 @@ export function downloadFile(fileStream: Blob, fileName: string): void {
  // @ts-ignore. Please see: https://github.com/microsoft/TypeScript/issues/33792
  if (navigator.msSaveBlob) {
    // Detect if Edge
-    file = blobToFile(new Blob([fileStream], { type: OCTET_STREAM_TYPE }), fileName);
+    file = blobToFile(new Blob([fileStream], { type: 'application/octet-stream' }), fileName);
  } else {
-    file = new File([fileStream], fileName, { type: OCTET_STREAM_TYPE, lastModified: Date.now() });
+    file = new File([fileStream], fileName, { type: 'application/octet-stream', lastModified: Date.now() });
  }

  const objectURL = URL.createObjectURL(file);
--- a/tools/dev.server.js
+++ b/tools/dev.server.js
@@ -17,7 +17,7 @@ compiler.hooks.done.tap('Verdaccio Dev Server', () => {
 });

 new WebpackDevServer(compiler, {
-  contentBase: `${env.DIST_PATH}`,
+  contentBase: env.DIST_PATH,
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: {
--- a/types/index.ts
+++ b/types/index.ts
@@ -2,6 +2,7 @@
 export interface VerdaccioOptions {
  url_prefix: string;
  base: string;
+  language?: string;
 }

 declare global {
--- a/yarn.lock
+++ b/yarn.lock
@@ -1411,14 +1411,14 @@
    lodash.mergewith "^4.6.2"
    webdriverio "^5.15.2"

-"@commitlint/cli@8.3.4":
-  version "8.3.4"
-  resolved "https://registry.verdaccio.org/@commitlint%2fcli/-/cli-8.3.4.tgz#aabcd997124bd0656ebd2a805ec9e92cfb663d78"
-  integrity sha512-lYL61eO5CG5Du3YTOt8eXg959awIpl/u2KL+msctbooUGTDtiknvBb1r7dbdpUYwVMWcgdKQsk9heB+FRdygfA==
+"@commitlint/cli@8.3.5":
+  version "8.3.5"
+  resolved "https://registry.verdaccio.org/@commitlint%2fcli/-/cli-8.3.5.tgz#6d93a3a8b2437fa978999d3f6a336bcc70be3fd3"
+  integrity sha512-6+L0vbw55UEdht71pgWOE55SRgb+8OHcEwGDB234VlIBFGK9P2QOBU7MHiYJ5cjdjCQ0rReNrGjOHmJ99jwf0w==
  dependencies:
    "@commitlint/format" "^8.3.4"
-    "@commitlint/lint" "^8.3.4"
-    "@commitlint/load" "^8.3.4"
+    "@commitlint/lint" "^8.3.5"
+    "@commitlint/load" "^8.3.5"
    "@commitlint/read" "^8.3.4"
    babel-polyfill "6.26.0"
    chalk "2.4.2"
@@ -1454,32 +1454,31 @@
  dependencies:
    chalk "^2.0.1"

-"@commitlint/is-ignored@^8.3.4":
-  version "8.3.4"
-  resolved "https://registry.verdaccio.org/@commitlint%2fis-ignored/-/is-ignored-8.3.4.tgz#a78dee0dda732219fa513669480df77e92643402"
-  integrity sha512-9RTWJvOW2ZvOh09xRnw7wQhcSp24ekeChDPAoZV13d5cTay0qcGFFthvwHs6URstKuu6Iasoxswtq0HmTWvoAg==
+"@commitlint/is-ignored@^8.3.5":
+  version "8.3.5"
+  resolved "https://registry.verdaccio.org/@commitlint%2fis-ignored/-/is-ignored-8.3.5.tgz#e6f59496e1b1ce58020d519cd578ad0f43169199"
+  integrity sha512-Zo+8a6gJLFDTqyNRx53wQi/XTiz8mncvmWf/4oRG+6WRcBfjSSHY7KPVj5Y6UaLy2EgZ0WQ2Tt6RdTDeQiQplA==
  dependencies:
-    "@types/semver" "^6.0.1"
    semver "6.3.0"

-"@commitlint/lint@^8.3.4":
-  version "8.3.4"
-  resolved "https://registry.verdaccio.org/@commitlint%2flint/-/lint-8.3.4.tgz#fed31a63656a2d7def88e8963691ce788899216e"
-  integrity sha512-ws1JLs7rNAcwlfYLKh0xhs3RNMcT4dYjyG0US/JenmSCrttzfAct+7IvdkAjkj6/3jsOn6fYaV4MhE6hfdPC9A==
+"@commitlint/lint@^8.3.5":
+  version "8.3.5"
+  resolved "https://registry.verdaccio.org/@commitlint%2flint/-/lint-8.3.5.tgz#627e75adb1cc803cc723e33cc2ba4aa27cbb9f0c"
+  integrity sha512-02AkI0a6PU6rzqUvuDkSi6rDQ2hUgkq9GpmdJqfai5bDbxx2939mK4ZO+7apbIh4H6Pae7EpYi7ffxuJgm+3hQ==
  dependencies:
-    "@commitlint/is-ignored" "^8.3.4"
+    "@commitlint/is-ignored" "^8.3.5"
    "@commitlint/parse" "^8.3.4"
    "@commitlint/rules" "^8.3.4"
    babel-runtime "^6.23.0"
    lodash "4.17.15"

-"@commitlint/load@^8.3.4":
-  version "8.3.4"
-  resolved "https://registry.verdaccio.org/@commitlint%2fload/-/load-8.3.4.tgz#6a0832362451b959f6aa47da8e44c2e05572b114"
-  integrity sha512-B4MylKvT02UE3VHC5098OHxsrgkADUy5AD4Cdkiy7oX/edWypEmvK7Wuns3B9dwluWP/iFM6daoWtpkCVZoRwQ==
+"@commitlint/load@^8.3.5":
+  version "8.3.5"
+  resolved "https://registry.verdaccio.org/@commitlint%2fload/-/load-8.3.5.tgz#3f059225ede92166ba94cf4c48e3d67c8b08b18a"
+  integrity sha512-poF7R1CtQvIXRmVIe63FjSQmN9KDqjRtU5A6hxqXBga87yB2VUJzic85TV6PcQc+wStk52cjrMI+g0zFx+Zxrw==
  dependencies:
    "@commitlint/execute-rule" "^8.3.4"
-    "@commitlint/resolve-extends" "^8.3.4"
+    "@commitlint/resolve-extends" "^8.3.5"
    babel-runtime "^6.23.0"
    chalk "2.4.2"
    cosmiconfig "^5.2.0"
@@ -1510,12 +1509,11 @@
    babel-runtime "^6.23.0"
    git-raw-commits "^2.0.0"

-"@commitlint/resolve-extends@^8.3.4":
-  version "8.3.4"
-  resolved "https://registry.verdaccio.org/@commitlint%2fresolve-extends/-/resolve-extends-8.3.4.tgz#815b646efbf9bc77c44925f619336da0027d7a68"
-  integrity sha512-M34RLaAW1eGWgtkVtotHfPaJa+cZIARe8twKItd7RhWs7n/1W2py9GTFIiIEq95LBN1uah5vm1WQHsfLqPZYHA==
+"@commitlint/resolve-extends@^8.3.5":
+  version "8.3.5"
+  resolved "https://registry.verdaccio.org/@commitlint%2fresolve-extends/-/resolve-extends-8.3.5.tgz#8fff800f292ac217ae30b1862f5f9a84b278310a"
+  integrity sha512-nHhFAK29qiXNe6oH6uG5wqBnCR+BQnxlBW/q5fjtxIaQALgfoNLHwLS9exzbIRFqwJckpR6yMCfgMbmbAOtklQ==
  dependencies:
-    "@types/node" "^12.0.2"
    import-fresh "^3.0.0"
    lodash "4.17.15"
    resolve-from "^5.0.0"
@@ -1584,12 +1582,12 @@
    "@emotion/utils" "0.11.2"
    babel-plugin-emotion "^10.0.22"

-"@emotion/hash@0.7.3", "@emotion/hash@^0.7.1":
+"@emotion/hash@0.7.3":
  version "0.7.3"
  resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f"
  integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==

-"@emotion/hash@0.7.4":
+"@emotion/hash@0.7.4", "@emotion/hash@^0.7.4":
  version "0.7.4"
  resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831"
  integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==
@@ -2015,31 +2013,31 @@
    "@babel/runtime" "^7.4.4"

 "@material-ui/styles@^4.7.1":
-  version "4.7.1"
-  resolved "https://registry.verdaccio.org/@material-ui%2fstyles/-/styles-4.7.1.tgz#48fa70f06441c35e301a9c4b6c825526a97b7a29"
-  integrity sha512-BBfxVThaPrglqHmKtSdrZJxnbFGJqKdZ5ZvDarj3HsmkteGCXsP1ohrDi5TWoa5JEJFo9S6q6NywqsENZn9rZA==
+  version "4.9.0"
+  resolved "https://registry.verdaccio.org/@material-ui%2fstyles/-/styles-4.9.0.tgz#10c31859f6868cfa9d3adf6b6c3e32c9d676bc76"
+  integrity sha512-nJHum4RqYBPWsjL/9JET8Z02FZ9gSizlg/7LWVFpIthNzpK6OQ5OSRR4T4x9/p+wK3t1qNn3b1uI4XpnZaPxOA==
  dependencies:
    "@babel/runtime" "^7.4.4"
-    "@emotion/hash" "^0.7.1"
-    "@material-ui/types" "^4.1.1"
+    "@emotion/hash" "^0.7.4"
+    "@material-ui/types" "^5.0.0"
    "@material-ui/utils" "^4.7.1"
    clsx "^1.0.2"
    csstype "^2.5.2"
    hoist-non-react-statics "^3.2.1"
-    jss "^10.0.0"
-    jss-plugin-camel-case "^10.0.0"
-    jss-plugin-default-unit "^10.0.0"
-    jss-plugin-global "^10.0.0"
-    jss-plugin-nested "^10.0.0"
-    jss-plugin-props-sort "^10.0.0"
-    jss-plugin-rule-value-function "^10.0.0"
-    jss-plugin-vendor-prefixer "^10.0.0"
+    jss "^10.0.3"
+    jss-plugin-camel-case "^10.0.3"
+    jss-plugin-default-unit "^10.0.3"
+    jss-plugin-global "^10.0.3"
+    jss-plugin-nested "^10.0.3"
+    jss-plugin-props-sort "^10.0.3"
+    jss-plugin-rule-value-function "^10.0.3"
+    jss-plugin-vendor-prefixer "^10.0.3"
    prop-types "^15.7.2"

 "@material-ui/system@^4.7.1":
-  version "4.7.1"
-  resolved "https://registry.verdaccio.org/@material-ui%2fsystem/-/system-4.7.1.tgz#d928dacc0eeae6bea569ff3ee079f409efb3517d"
-  integrity sha512-zH02p+FOimXLSKOW/OT2laYkl9bB3dD1AvnZqsHYoseUaq0aVrpbl2BGjQi+vJ5lg8w73uYlt9zOWzb3+1UdMQ==
+  version "4.9.3"
+  resolved "https://registry.verdaccio.org/@material-ui%2fsystem/-/system-4.9.3.tgz#ee48990d7941237fdaf21b7b399981d614bb0875"
+  integrity sha512-DBGsTKYrLlFpHG8BUp0X6ZpvaOzef+GhSwn/8DwVTXUdHitphaPQoL9xucrI8X9MTBo//El+7nylko7lo7eJIw==
  dependencies:
    "@babel/runtime" "^7.4.4"
    "@material-ui/utils" "^4.7.1"
@@ -2052,6 +2050,11 @@
  dependencies:
    "@types/react" "*"

+"@material-ui/types@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.verdaccio.org/@material-ui%2ftypes/-/types-5.0.0.tgz#26d6259dc6b39f4c2e1e9aceff7a11e031941741"
+  integrity sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg==
+
 "@material-ui/utils@^4.7.1":
  version "4.7.1"
  resolved "https://registry.verdaccio.org/@material-ui%2futils/-/utils-4.7.1.tgz#dc16c7f0d2cd02fbcdd5cfe601fd6863ae3cc652"
@@ -2355,7 +2358,7 @@
  resolved "https://registry.verdaccio.org/@types%2fmocha/-/mocha-5.2.7.tgz#315d570ccb56c53452ff8638738df60726d5b6ea"
  integrity sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==

-"@types/node@*", "@types/node@^12.0.2", "@types/node@^12.11.1":
+"@types/node@*", "@types/node@^12.11.1":
  version "12.12.21"
  resolved "https://registry.verdaccio.org/@types%2fnode/-/node-12.12.21.tgz#aa44a6363291c7037111c47e4661ad210aded23f"
  integrity sha512-8sRGhbpU+ck1n0PGAUgVrWrWdjSW2aqNeyC15W88GRsMpSwzv6RJGlLhE7s2RhVSOdyDmxbqlWSeThq4/7xqlA==
@@ -2441,11 +2444,6 @@
    "@types/tough-cookie" "*"
    form-data "^2.5.0"

-"@types/semver@^6.0.1":
-  version "6.0.2"
-  resolved "https://registry.verdaccio.org/@types%2fsemver/-/semver-6.0.2.tgz#5e8b09f0e4af53034b1d0fb9977a277847836205"
-  integrity sha512-G1Ggy7/9Nsa1Jt2yiBR2riEuyK2DFNnqow6R7cromXPMNynackRY1vqFTLz/gwnef1LHokbXThcPhqMRjUbkpQ==
-
 "@types/stack-utils@^1.0.1":
  version "1.0.1"
  resolved "https://registry.verdaccio.org/@types%2fstack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -5219,7 +5217,7 @@ css-value@^0.0.1:
  resolved "https://registry.verdaccio.org/css-value/-/css-value-0.0.1.tgz#5efd6c2eea5ea1fd6b6ac57ec0427b18452424ea"
  integrity sha1-Xv1sLupeof1rasV+wEJ7GEUkJOo=

-css-vendor@^2.0.6:
+css-vendor@^2.0.7:
  version "2.0.7"
  resolved "https://registry.verdaccio.org/css-vendor/-/css-vendor-2.0.7.tgz#4e6d53d953c187981576d6a542acc9fb57174bda"
  integrity sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg==
@@ -7806,6 +7804,13 @@ html-minifier@^3.2.3:
    relateurl "0.2.x"
    uglify-js "3.4.x"

+html-parse-stringify2@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.verdaccio.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
+  integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
+  dependencies:
+    void-elements "^2.0.1"
+
 html-tags@^3.1.0:
  version "3.1.0"
  resolved "https://registry.verdaccio.org/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
@@ -7968,6 +7973,13 @@ hyphenate-style-name@^1.0.3:
  resolved "https://registry.verdaccio.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
  integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==

+i18next@19.1.0:
+  version "19.1.0"
+  resolved "https://registry.verdaccio.org/i18next/-/i18next-19.1.0.tgz#fe1a1da3d208872946307c7d2d115da45d46159f"
+  integrity sha512-ISbmukX4L6Dz0QoH9+EW1AnBw7j+NRLoMu9uLPMaNSSTP9Eie9/oUL0dOyWX15baB3gYOpkHJpGZRHOqcnl0ew==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+
 iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
  version "0.4.24"
  resolved "https://registry.verdaccio.org/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -9383,69 +9395,69 @@ jsprim@^1.2.2:
    json-schema "0.2.3"
    verror "1.10.0"

-jss-plugin-camel-case@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0.tgz#d601bae2e8e2041cc526add289dcd7062db0a248"
-  integrity sha512-yALDL00+pPR4FJh+k07A8FeDvfoPPuXU48HLy63enAubcVd3DnS+2rgqPXglHDGixIDVkCSXecl/l5GAMjzIbA==
+jss-plugin-camel-case@^10.0.3:
+  version "10.0.4"
+  resolved "https://registry.verdaccio.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.4.tgz#3dedecec1e5bba0bf6141c2c05e2ab11ea4b468d"
+  integrity sha512-+wnqxJsyfUnOn0LxVg3GgZBSjfBCrjxwx7LFxwVTUih0ceGaXKZoieheNOaTo5EM4w8bt1nbb8XonpQCj67C6A==
  dependencies:
    "@babel/runtime" "^7.3.1"
    hyphenate-style-name "^1.0.3"
-    jss "10.0.0"
+    jss "10.0.4"

-jss-plugin-default-unit@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0.tgz#601caf5f576fc0c66986fbe8a9aa37307a3a3ea3"
-  integrity sha512-sURozIOdCtGg9ap18erQ+ijndAfEGtTaetxfU3H4qwC18Bi+fdvjlY/ahKbuu0ASs7R/+WKCP7UaRZOjUDMcdQ==
+jss-plugin-default-unit@^10.0.3:
+  version "10.0.4"
+  resolved "https://registry.verdaccio.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.4.tgz#df03885de20f20a1fc1c21bdb7c62e865ee400d9"
+  integrity sha512-T0mhL/Ogp/quvod/jAHEqKvptLDxq7Cj3a+7zRuqK8HxUYkftptN89wJElZC3rshhNKiogkEYhCWenpJdFvTBg==
  dependencies:
    "@babel/runtime" "^7.3.1"
-    jss "10.0.0"
+    jss "10.0.4"

-jss-plugin-global@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss-plugin-global/-/jss-plugin-global-10.0.0.tgz#0fed1b6461e0d57d6e394f877529009bc1cb3cb6"
-  integrity sha512-80ofWKSQUo62bxLtRoTNe0kFPtHgUbAJeOeR36WEGgWIBEsXLyXOnD5KNnjPqG4heuEkz9eSLccjYST50JnI7Q==
+jss-plugin-global@^10.0.3:
+  version "10.0.4"
+  resolved "https://registry.verdaccio.org/jss-plugin-global/-/jss-plugin-global-10.0.4.tgz#412245b56133cc88bec654a70d82d5922619f4c5"
+  integrity sha512-N8n9/GHENZce+sqE4UYiZiJtI+t+erT/BypHOrNYAfIoNEj7OYsOEKfIo2P0GpLB3QyDAYf5eo9XNdZ8veEkUA==
  dependencies:
    "@babel/runtime" "^7.3.1"
-    jss "10.0.0"
+    jss "10.0.4"

-jss-plugin-nested@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0.tgz#d37ecc013c3b0d0e4acc2b48f6b62da6ae53948b"
-  integrity sha512-waxxwl/po1hN3azTyixKnr8ReEqUv5WK7WsO+5AWB0bFndML5Yqnt8ARZ90HEg8/P6WlqE/AB2413TkCRZE8bA==
+jss-plugin-nested@^10.0.3:
+  version "10.0.4"
+  resolved "https://registry.verdaccio.org/jss-plugin-nested/-/jss-plugin-nested-10.0.4.tgz#4d15ad13995fb6e4125618006473a096d2475d75"
+  integrity sha512-QM21BKVt8LDeoRfowvAMh/s+/89VYrreIIE6ch4pvw0oAXDWw1iorUPlqLZ7uCO3UL0uFtQhJq3QMLN6Lr1v0A==
  dependencies:
    "@babel/runtime" "^7.3.1"
-    jss "10.0.0"
+    jss "10.0.4"
    tiny-warning "^1.0.2"

-jss-plugin-props-sort@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0.tgz#38a13407384c2a4a7c026659488350669b953b18"
-  integrity sha512-41mf22CImjwNdtOG3r+cdC8+RhwNm616sjHx5YlqTwtSJLyLFinbQC/a4PIFk8xqf1qpFH1kEAIw+yx9HaqZ3g==
+jss-plugin-props-sort@^10.0.3:
+  version "10.0.4"
+  resolved "https://registry.verdaccio.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.4.tgz#43c880ff8dfcf858f809f663ece5e65a1d945b5a"
+  integrity sha512-WoETdOCjGskuin/OMt2uEdDPLZF3vfQuHXF+XUHGJrq0BAapoyGQDcv37SeReDlkRAbVXkEZPsIMvYrgHSHFiA==
  dependencies:
    "@babel/runtime" "^7.3.1"
-    jss "10.0.0"
+    jss "10.0.4"

-jss-plugin-rule-value-function@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0.tgz#3ec1b781b7c86080136dbef6c36e91f20244b72e"
-  integrity sha512-Jw+BZ8JIw1f12V0SERqGlBT1JEPWax3vuZpMym54NAXpPb7R1LYHiCTIlaJUyqvIfEy3kiHMtgI+r2whGgRIxQ==
+jss-plugin-rule-value-function@^10.0.3:
+  version "10.0.4"
+  resolved "https://registry.verdaccio.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.4.tgz#2f4cf4a86ad3eba875bb48cb9f4a7ed35cb354e7"
+  integrity sha512-0hrzOSWRF5ABJGaHrlnHbYZjU877Ofzfh2id3uLtBvemGQLHI+ldoL8/+6iPSRa7M8z8Ngfg2vfYhKjUA5gA0g==
  dependencies:
    "@babel/runtime" "^7.3.1"
-    jss "10.0.0"
+    jss "10.0.4"

-jss-plugin-vendor-prefixer@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0.tgz#400280535b0f483a9c78105afe4eee61b70018eb"
-  integrity sha512-qslqvL0MUbWuzXJWdUxpj6mdNUX8jr4FFTo3aZnAT65nmzWL7g8oTr9ZxmTXXgdp7ANhS1QWE7036/Q2isFBpw==
+jss-plugin-vendor-prefixer@^10.0.3:
+  version "10.0.4"
+  resolved "https://registry.verdaccio.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.4.tgz#1626ef612a4541cff17cf96815e1740155214ed2"
+  integrity sha512-4JgEbcrdeMda1qvxTm1CnxFJAWVV++VLpP46HNTrfH7VhVlvUpihnUNs2gAlKuRT/XSBuiWeLAkrTqF4NVrPig==
  dependencies:
    "@babel/runtime" "^7.3.1"
-    css-vendor "^2.0.6"
-    jss "10.0.0"
+    css-vendor "^2.0.7"
+    jss "10.0.4"

-jss@10.0.0, jss@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.verdaccio.org/jss/-/jss-10.0.0.tgz#998d5026c02accae15708de83bd6ba57bac977d2"
-  integrity sha512-TPpDFsiBjuERiL+dFDq8QCdiF9oDasPcNqCKLGCo/qED3fNYOQ8PX2lZhknyTiAt3tZrfOFbb0lbQ9lTjPZxsQ==
+jss@10.0.4, jss@^10.0.3:
+  version "10.0.4"
+  resolved "https://registry.verdaccio.org/jss/-/jss-10.0.4.tgz#46ebdde1c40c9a079d64f3334cb88ae28fd90bfd"
+  integrity sha512-GqHmeDK83qbqMAVjxyPfN1qJVTKZne533a9bdCrllZukUM8npG/k+JumEPI86IIB5ifaZAHG2HAsUziyxOiooQ==
  dependencies:
    "@babel/runtime" "^7.3.1"
    csstype "^2.6.5"
@@ -12503,15 +12515,15 @@ react-autowhatever@^10.1.2:
    react-themeable "^1.1.0"
    section-iterator "^2.0.0"

-react-dom@16.12.0:
-  version "16.12.0"
-  resolved "https://registry.verdaccio.org/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
-  integrity sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==
+react-dom@16.13.0:
+  version "16.13.0"
+  resolved "https://registry.verdaccio.org/react-dom/-/react-dom-16.13.0.tgz#cdde54b48eb9e8a0ca1b3dc9943d9bb409b81866"
+  integrity sha512-y09d2c4cG220DzdlFkPTnVvGTszVvNpC73v+AaLGLHbkpy3SSgvYq8x0rNwPJ/Rk/CicTNgk0hbHNw1gMEZAXg==
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
    prop-types "^15.6.2"
-    scheduler "^0.18.0"
+    scheduler "^0.19.0"

 react-hook-form@3.29.4:
  version "3.29.4"
@@ -12532,6 +12544,14 @@ react-hot-loader@4.12.18:
    shallowequal "^1.1.0"
    source-map "^0.7.3"

+react-i18next@11.3.1:
+  version "11.3.1"
+  resolved "https://registry.verdaccio.org/react-i18next/-/react-i18next-11.3.1.tgz#9269282c3f566015f0bdf8fdbf46782bbe50f5a7"
+  integrity sha512-S/CWHcnew1lXo8HeniGhBU5kTmPhZ4w4rtA4m/gDN07soCtKKYSAcLNm7zhwjI2OSR4Skd0vOtzNp/FzEEjxIw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    html-parse-stringify2 "2.0.1"
+
 react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
  version "16.12.0"
  resolved "https://registry.verdaccio.org/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
@@ -13348,10 +13368,10 @@ scheduler@^0.16.2:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"

-scheduler@^0.18.0:
-  version "0.18.0"
-  resolved "https://registry.verdaccio.org/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
-  integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
+scheduler@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.verdaccio.org/scheduler/-/scheduler-0.19.0.tgz#a715d56302de403df742f4a9be11975b32f5698d"
+  integrity sha512-xowbVaTPe9r7y7RUejcK73/j8tt2jfiyTednOvHbA8JoClvMYCp+r8QegLwK/n8zWQAtZb1fFnER4XLBZXrCxA==
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
@@ -15202,6 +15222,11 @@ vm-browserify@^1.0.1:
  resolved "https://registry.verdaccio.org/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
  integrity sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==

+void-elements@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.verdaccio.org/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
+
 w3c-hr-time@^1.0.1:
  version "1.0.1"
  resolved "https://registry.verdaccio.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
Author	SHA1	Message	Date
Juan Picado @jotadeveloper	a5f06cb3af	chore(release): 1.0.0	2020-03-13 07:35:00 +01:00
Priscila Oliveira	e27d59bff7	feat(de-translations): added de-DE translations to the UI (#441 )	2020-03-12 11:40:12 +01:00
Juan Picado @jotadeveloper	0abe1ef41c	feat: spanish translations to UI (#440 ) * feat: spanish translations to UI * chore: enable spanish	2020-03-09 07:01:01 +01:00
Priscila Oliveira	7428384b55	feat(i18n): added i18next for user interface translations (#432 )	2020-03-08 16:45:07 +01:00
dependabot-preview[bot]	8d4b3cee7e	build(deps-dev): bump @commitlint/cli from 8.3.4 to 8.3.5 (#436 ) Bumps [@commitlint/cli](https://github.com/conventional-changelog/commitlint) from 8.3.4 to 8.3.5. - [Release notes](https://github.com/conventional-changelog/commitlint/releases) - [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/CHANGELOG.md) - [Commits](https://github.com/conventional-changelog/commitlint/compare/v8.3.4...v8.3.5) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: Priscila Oliveira <priscilawebdev@gmail.com>	2020-03-03 09:32:26 +01:00
dependabot-preview[bot]	d41ba981d2	build(deps-dev): bump react-dom from 16.12.0 to 16.13.0 (#437 )	2020-03-02 21:29:16 +01:00
				`@@ -0,0 +1 @@`
				<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="verdaccio"><Title>Verdaccio</Title><defs><path id="b" d="M48 17.6L32.8 48H24L.4.8h15.2l12.8 25.6 4.4-8.8H48z"/><filter x="-20%" y="-11.7%" width="139.9%" height="140.3%" filterUnits="objectBoundingBox" id="a"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter><path id="d" d="M50.8 12H35.6L41.2.8h15.2L50.8 12z"/><filter x="-45.7%" y="-49.1%" width="191.3%" height="269.6%" filterUnits="objectBoundingBox" id="c"><feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0906646286 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><rect fill="#F7F8F6" width="100" height="100" rx="37"/><g transform="translate(22 29)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><path stroke="#405236" stroke-width="2.4" d="M46.058 18.8H33.542L28.4 29.083 14.858 2H2.342l22.4 44.8h7.316l14-28z" stroke-linejoin="square" fill="#405236"/></g><g transform="translate(22 29)"><use fill="#000" filter="url(#c)" xlink:href="#d"/><path stroke="#CD4000" stroke-width="2.4" d="M50.058 10.8l4.4-8.8H41.942l-4.4 8.8h12.516z" stroke-linejoin="square" fill="#CD4000"/></g><path d="M54.06 75.8l2.575-5.112L36.857 31H24.342l22.4 44.8h7.319z" stroke="#405236" stroke-width="2.4" fill="#4A5E3F"/><path d="M59.6 31h15.221M55.6 35h15.221M51.6 39.8h15.221" stroke="#CD4000" stroke-width="2.4" stroke-linecap="square"/></g></svg>