diff --git a/.prettierrc b/.prettierrc
index 26f22541d..af6254e03 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,7 +1,7 @@
 {
-  "printWidth": 120,
+  "printWidth": 100,
   "singleQuote": true,
-  "trailingComma": "es5",
+  "trailingComma": "all",
   "semi": false,
   "overrides": [
     {
diff --git a/package.json b/package.json
index 19971cfcb..43c8778e5 100644
--- a/package.json
+++ b/package.json
@@ -97,6 +97,8 @@
     "commander": "^5.1.0",
     "flat": "5.0.1",
     "i18next": "^21.9.2",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-http-backend": "^2.1.1",
     "lodash": "^4.17.21",
     "ora": "^5.4.1",
     "prop-types": "^15.7.2",
diff --git a/src/adminjs-options.interface.ts b/src/adminjs-options.interface.ts
index ce8c55c0d..364f98051 100644
--- a/src/adminjs-options.interface.ts
+++ b/src/adminjs-options.interface.ts
@@ -84,7 +84,7 @@ export interface AdminJSOptions {
    *         text: 'I am fetched from the backend',
    *       }
    *     },
-   *     component: 'SomeStats',
+   *     component: 'CustomPage',
    *   },
    *   anotherPage: {
    *     label: "TypeScript page",
@@ -240,7 +240,7 @@ export interface AdminJSOptions {
    * Check out the [i18n tutorial]{@tutorial i18n} to see how
    * internationalization in AdminJS works.
    */
-  locale?: Locale;
+  locale?: Locale | ((admin?: CurrentAdmin) => Locale | Promise<Locale>);
 
   /**
    * rollup bundle options;
diff --git a/src/adminjs.ts b/src/adminjs.ts
index e2dc2c01a..6e3d05892 100644
--- a/src/adminjs.ts
+++ b/src/adminjs.ts
@@ -1,8 +1,7 @@
 import merge from 'lodash/merge'
 import * as path from 'path'
 import * as fs from 'fs'
-import i18n, { i18n as I18n } from 'i18next'
-import { FC } from 'react'
+import type { FC } from 'react'
 
 import { AdminJSOptionsWithDefault, AdminJSOptions } from './adminjs-options.interface'
 import BaseResource from './backend/adapters/resource/base-resource'
@@ -16,9 +15,9 @@ import { ACTIONS } from './backend/actions'
 
 import loginTemplate from './frontend/login-template'
 import { ListActionResponse } from './backend/actions/list/list-action'
-import { combineTranslations, Locale } from './locale/config'
-import { locales } from './locale'
-import { TranslateFunctions, createFunctions } from './utils/translate-functions.factory'
+import { defaultLocale } from './locale'
+import { Locale } from './locale/config'
+import { TranslateFunctions } from './utils/translate-functions.factory'
 import { relativeFilePathResolver } from './utils/file-resolver'
 import { getComponentHtml } from './backend/utils'
 import { ComponentLoader } from './backend/utils/component-loader'
@@ -72,8 +71,6 @@ class AdminJS {
 
   public locale!: Locale
 
-  public i18n!: I18n
-
   public translateFunctions!: TranslateFunctions
 
   public componentLoader: ComponentLoader
@@ -117,7 +114,8 @@ class AdminJS {
 
     this.resolveBabelConfigPath()
 
-    this.initI18n()
+    // To be removed when Login page will be renedered on client side
+    this.locale = defaultLocale
 
     const { databases, resources } = this.options
 
@@ -127,37 +125,6 @@ class AdminJS {
     this.resources = resourcesFactory.buildResources({ databases, resources })
   }
 
-  initI18n(): void {
-    const language = this.options.locale?.language || locales.en.language
-    const defaultTranslations = locales[language]?.translations || locales.en.translations
-    const availableLanguages = this.options.locale?.availableLanguages || [language]
-    this.locale = {
-      translations: combineTranslations(defaultTranslations, this.options.locale?.translations),
-      language,
-      availableLanguages,
-    }
-    if (i18n.isInitialized) {
-      i18n.addResourceBundle(this.locale.language, 'translation', this.locale.translations)
-    } else {
-      i18n.init({
-        lng: this.locale.language,
-        initImmediate: false, // loads translations immediately
-        resources: {
-          [this.locale.language]: {
-            translation: this.locale.translations,
-          },
-        },
-      })
-    }
-
-    // mixin translate functions to AdminJS instance so users will be able to
-    // call AdminJS.translateMessage(...)
-    this.translateFunctions = createFunctions(i18n)
-    Object.getOwnPropertyNames(this.translateFunctions).forEach((translateFunctionName) => {
-      this[translateFunctionName] = this.translateFunctions[translateFunctionName]
-    })
-  }
-
   /**
    * Registers various database adapters written for AdminJS.
    *
diff --git a/src/backend/utils/custom-views/get-component-html.tsx b/src/backend/utils/custom-views/get-component-html.tsx
index 04855978c..651e5754e 100644
--- a/src/backend/utils/custom-views/get-component-html.tsx
+++ b/src/backend/utils/custom-views/get-component-html.tsx
@@ -4,7 +4,6 @@ import { ServerStyleSheet, StyleSheetManager, ThemeProvider } from 'styled-compo
 import { Provider } from 'react-redux'
 import { I18nextProvider } from 'react-i18next'
 import { combineStyles } from '@adminjs/design-system'
-import i18n from 'i18next'
 import { Store } from 'redux'
 
 import { getAssets, getBranding, getFaviconFromBranding } from '../../../backend/utils/options-parser/options-parser'
@@ -16,6 +15,7 @@ import createStore, {
   ReduxState,
 } from '../../../frontend/store/store'
 import AdminJS from '../../../adminjs'
+import initTranslations from '../../../frontend/utils/adminjs.i18n'
 
 export async function getComponentHtml<T extends Record<string, unknown>>(
   Component: React.FC<T>,
@@ -41,27 +41,18 @@ export async function getComponentHtml<T extends Record<string, unknown>>(
 
   const theme = combineStyles((branding && branding.theme) || {})
   const { locale } = store.getState()
-  i18n
-    .init({
-      resources: {
-        [locale.language]: {
-          translation: locale.translations,
-        },
-      },
-      lng: locale.language,
-      interpolation: { escapeValue: false },
-    })
+  const { i18n } = initTranslations(locale)
 
   const sheet = new ServerStyleSheet()
 
   const component = renderToString(
     <StyleSheetManager sheet={sheet.instance}>
       <Provider store={store}>
-        <I18nextProvider i18n={i18n}>
-          <ThemeProvider theme={theme}>
+        <ThemeProvider theme={theme}>
+          <I18nextProvider i18n={i18n}>
             <Component {...props} />
-          </ThemeProvider>
-        </I18nextProvider>
+          </I18nextProvider>
+        </ThemeProvider>
       </Provider>
     </StyleSheetManager>,
   )
diff --git a/src/backend/utils/options-parser/options-parser.ts b/src/backend/utils/options-parser/options-parser.ts
index f68980a86..721fd711b 100644
--- a/src/backend/utils/options-parser/options-parser.ts
+++ b/src/backend/utils/options-parser/options-parser.ts
@@ -2,6 +2,7 @@ import merge from 'lodash/merge'
 import AdminJS from '../../../adminjs'
 import { AdminJSOptions, Assets, BrandingOptions } from '../../../adminjs-options.interface'
 import { CurrentAdmin } from '../../../current-admin.interface'
+import { defaultLocale, Locale } from '../../../locale'
 import ViewHelpers from '../view-helpers/view-helpers'
 
 const defaultBranding: AdminJSOptions['branding'] = {
@@ -45,6 +46,18 @@ export const getBranding = async (
   return merged
 }
 
+export const getLocales = async (
+  admin: AdminJS,
+  currentAdmin?: CurrentAdmin,
+): Promise<Locale> => {
+  const { locale } = admin.options || {}
+  const computed = typeof locale === 'function'
+    ? await locale(currentAdmin)
+    : locale
+
+  return merge({}, defaultLocale, computed)
+}
+
 export const getFaviconFromBranding = (branding: BrandingOptions): string => {
   if (branding.favicon) {
     const { favicon } = branding
diff --git a/src/frontend/bundle-entry.jsx b/src/frontend/bundle-entry.jsx
index 23bfa937b..b8083eafb 100644
--- a/src/frontend/bundle-entry.jsx
+++ b/src/frontend/bundle-entry.jsx
@@ -1,21 +1,19 @@
-import React from 'react'
+import React, { Suspense } from 'react'
+import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'
 import { BrowserRouter } from 'react-router-dom'
 import { ThemeProvider } from 'styled-components'
-import { initReactI18next } from 'react-i18next'
-import i18n from 'i18next'
-import merge from 'lodash/merge'
 
-import App from './components/application'
-import BasePropertyComponent, { CleanPropertyComponent } from './components/property-type'
-import createStore from './store/store'
 import ViewHelpers from '../backend/utils/view-helpers/view-helpers'
+import { flat } from '../utils/flat'
 import * as AppComponents from './components/app'
+import App from './components/application'
+import BasePropertyComponent, { CleanPropertyComponent } from './components/property-type'
+import withNotice from './hoc/with-notice'
 import * as Hooks from './hooks'
+import createStore from './store/store'
 import ApiClient from './utils/api-client'
-import withNotice from './hoc/with-notice'
-import { flat } from '../utils/flat'
-import { locales } from '../locale'
+import initTranslations from './utils/adminJS.i18n'
 
 const env = {
   NODE_ENV: process.env.NODE_ENV || 'development',
@@ -23,34 +21,21 @@ const env = {
 
 const store = createStore(window.REDUX_STATE)
 const theme = window.THEME
-const defaultLocale = window.REDUX_STATE.locale
-const currentLocale = JSON.parse(window.localStorage.getItem('locale')) || defaultLocale.language
-
-i18n.use(initReactI18next).init({
-  resources: Object.keys(locales).reduce(
-    (memo, locale) => ({
-      ...memo,
-      [locale]: {
-        translation: merge(
-          locales[locale].translations,
-          locale === defaultLocale.language ? defaultLocale.translations : {},
-        ),
-      },
-    }),
-    {},
-  ),
-  lng: currentLocale,
-  interpolation: { escapeValue: false },
-})
+const { locale } = store.getState()
+const { i18n } = initTranslations(locale)
 
 const Application = (
-  <Provider store={store}>
-    <ThemeProvider theme={theme}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </ThemeProvider>
-  </Provider>
+  <Suspense fallback="...is loading">
+    <Provider store={store}>
+      <ThemeProvider theme={theme}>
+        <I18nextProvider i18n={i18n}>
+          <BrowserRouter>
+            <App />
+          </BrowserRouter>
+        </I18nextProvider>
+      </ThemeProvider>
+    </Provider>
+  </Suspense>
 )
 
 // eslint-disable-next-line no-undef
diff --git a/src/frontend/components/app/action-header/actions-to-button-group.spec.ts b/src/frontend/components/app/action-header/actions-to-button-group.spec.ts
index 8832ecd02..9d8028dce 100644
--- a/src/frontend/components/app/action-header/actions-to-button-group.spec.ts
+++ b/src/frontend/components/app/action-header/actions-to-button-group.spec.ts
@@ -2,16 +2,16 @@ import { ButtonGroupProps } from '@adminjs/design-system'
 import { expect } from 'chai'
 import i18n from 'i18next'
 import factory from 'factory-girl'
-import { ActionJSON } from '../../../interfaces'
+import { ActionJSON, ModalFunctions } from '../../../interfaces'
 import { actionsToButtonGroup } from './actions-to-button-group'
 import { createFunctions } from '../../../../utils/translate-functions.factory'
 import '../../spec/action-json.factory'
 
 const translateFunctions = createFunctions(i18n)
 
-const modalFunctions = {
+const modalFunctions: ModalFunctions = {
   closeModal: () => { /* noop */ },
-  openModal: (data) => { /* noop */ },
+  openModal: () => { /* noop */ },
 }
 
 describe('actionsToButtonGroup', () => {
diff --git a/src/frontend/components/app/breadcrumbs.tsx b/src/frontend/components/app/breadcrumbs.tsx
index a7e79fbff..4e2ebecc2 100644
--- a/src/frontend/components/app/breadcrumbs.tsx
+++ b/src/frontend/components/app/breadcrumbs.tsx
@@ -10,7 +10,7 @@ import { RecordJSON, ResourceJSON } from '../../interfaces'
 import { getActionElementCss } from '../../utils'
 
 export const BreadcrumbLink = styled(Link)`
-  color: ${({ theme }): string => theme.colors.grey100};
+  color: ${({ theme }): string => theme.colors.grey60};
   font-family: ${({ theme }): string => theme.font};
   line-height: ${({ theme }): string => theme.lineHeights.default};
   font-size: ${({ theme }): string => theme.fontSizes.default};
@@ -26,13 +26,14 @@ export const BreadcrumbLink = styled(Link)`
   }
 
   &:last-child {
+    color: ${({ theme }): string => theme.colors.text};
     &:after {
       content: '';
     }
   }
 `
 
-export const BreadcrumbText = styled(Text)`
+export const BreadcrumbText = styled<any>(Text)`
   color: ${({ theme }): string => theme.colors.grey100};
   font-family: ${({ theme }): string => theme.font};
   font-weight: ${({ theme }): string => theme.fontWeights.normal.toString()};
@@ -81,8 +82,9 @@ const Breadcrumbs: React.FC<BreadcrumbProps> = (props) => {
   const listAction = resource.resourceActions.find(({ name }) => name === 'list')
   const action = resource.actions.find((a) => a.name === actionName)
   const h = new ViewHelpers()
-  const { translateLabel: tl } = useTranslation()
+  const { tl, ta } = useTranslation()
   const contentTag = getActionElementCss(resource.id, actionName, 'breadcrumbs')
+
   return (
     <Box flexGrow={1} className={cssClass('Breadcrumbs')} data-css={contentTag}>
       <BreadcrumbLink to={h.dashboardUrl()}>{tl('dashboard')}</BreadcrumbLink>
@@ -93,7 +95,7 @@ const Breadcrumbs: React.FC<BreadcrumbProps> = (props) => {
       ) : (
         <BreadcrumbText>{resource.name}</BreadcrumbText>
       )}
-      {action && action.name !== 'list' && <BreadcrumbLink to="#">{action.label}</BreadcrumbLink>}
+      {action && action.name !== 'list' && <BreadcrumbLink to="#">{ta(action.label)}</BreadcrumbLink>}
     </Box>
   )
 }
diff --git a/src/frontend/components/app/default-dashboard.tsx b/src/frontend/components/app/default-dashboard.tsx
index 578fbdda0..252e5e074 100644
--- a/src/frontend/components/app/default-dashboard.tsx
+++ b/src/frontend/components/app/default-dashboard.tsx
@@ -1,15 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import {
-  Box,
-  H2,
-  H5,
-  H4,
-  Text,
-  Illustration,
-  IllustrationProps,
-  Button,
-} from '@adminjs/design-system'
+import { Box, Button, H2, H5, Illustration, IllustrationProps, Text } from '@adminjs/design-system'
 
 import { useTranslation } from '../../hooks'
 
@@ -98,8 +89,11 @@ const boxes = ({ translateMessage }): Array<BoxType> => [{
 const Card = styled(Box)`
   display: ${({ flex }): string => (flex ? 'flex' : 'block')};
   color: ${({ theme }) => theme.colors.grey100};
+  height: 100%;
   text-decoration: none;
   border: 1px solid transparent;
+  border-radius: ${({ theme }) => theme.space.md};
+  transition: all 0.1s ease-in;
   &:hover {
     border: 1px solid ${({ theme }) => theme.colors.primary100};
     box-shadow: ${({ theme }) => theme.shadows.cardHover};
@@ -147,7 +141,7 @@ export const Dashboard: React.FC = () => {
           <Card as="a" flex href="https://adminjs.page.link/slack" target="_blank">
             <Box flexShrink={0}><Illustration variant="SlackLogo" /></Box>
             <Box ml="xl">
-              <H4>{translateMessage('community_title')}</H4>
+              <H5>{translateMessage('community_title')}</H5>
               <Text>{translateMessage('community_subtitle')}</Text>
             </Box>
           </Card>
@@ -156,15 +150,15 @@ export const Dashboard: React.FC = () => {
           <Card as="a" flex href="https://github.com/SoftwareBrothers/adminjs/issues" target="_blank">
             <Box flexShrink={0}><Illustration variant="GithubLogo" /></Box>
             <Box ml="xl">
-              <H4>{translateMessage('foundBug_title')}</H4>
+              <H5>{translateMessage('foundBug_title')}</H5>
               <Text>{translateMessage('foundBug_subtitle')}</Text>
             </Box>
           </Card>
         </Box>
-        <Box variant="white" boxShadow="card" width={1} m="lg">
+        <Card width={1} m="lg">
           <Text textAlign="center">
             <Illustration variant="AdminJSLogo" />
-            <H4>{translateMessage('needMoreSolutions_title')}</H4>
+            <H5>{translateMessage('needMoreSolutions_title')}</H5>
             <Text>{translateMessage('needMoreSolutions_subtitle')}</Text>
             <Text mt="xxl">
               <Button
@@ -177,7 +171,7 @@ export const Dashboard: React.FC = () => {
               </Button>
             </Text>
           </Text>
-        </Box>
+        </Card>
       </Box>
     </Box>
   )
diff --git a/src/frontend/components/app/error-message.tsx b/src/frontend/components/app/error-message.tsx
index 58c9fe77c..639d89664 100644
--- a/src/frontend/components/app/error-message.tsx
+++ b/src/frontend/components/app/error-message.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react'
-import { MessageBox, Text } from '@adminjs/design-system'
+import { InfoBox, MessageBox, Text } from '@adminjs/design-system'
 import { useTranslation } from '../../hooks'
 
 /**
@@ -36,20 +36,19 @@ const ErrorMessageBox: React.FC<ErrorMessageBoxProps> = (props) => {
   )
 }
 
-const NoResourceError: React.FC<{resourceId: string}> = (props) => {
+const NoResourceError: React.FC<{ resourceId: string }> = (props) => {
   const { resourceId } = props
   const { translateMessage } = useTranslation()
   return (
-    <MessageBox
-      message="404 - PAGE NOT FOUND"
-      data-testid="NoResourceError"
-      variant="info"
-      m="xxl"
+    <InfoBox
+      title={translateMessage('pageNotFound', resourceId, { resourceId })}
+      illustration="NotFound"
+      testId="NoResourceError"
     >
       <Text>
         {translateMessage('error404Resource', resourceId, { resourceId })}
       </Text>
-    </MessageBox>
+    </InfoBox>
   )
 }
 
@@ -57,16 +56,15 @@ const NoActionError: React.FC<{ resourceId: string; actionName: string }> = (pro
   const { resourceId, actionName } = props
   const { translateMessage } = useTranslation()
   return (
-    <MessageBox
-      message="404 - PAGE NOT FOUND"
-      data-testid="NoActionError"
-      variant="info"
-      m="xxl"
+    <InfoBox
+      title={translateMessage('pageNotFound', resourceId, { resourceId })}
+      illustration="NotFound"
+      testId="NoActionError"
     >
       <Text>
         {translateMessage('error404Action', resourceId, { resourceId, actionName })}
       </Text>
-    </MessageBox>
+    </InfoBox>
   )
 }
 
@@ -77,16 +75,15 @@ const NoRecordError: React.FC<{
   const { resourceId, recordId } = props
   const { translateMessage } = useTranslation()
   return (
-    <MessageBox
-      message="404 - PAGE NOT FOUND"
-      data-testid="NoRecordError"
-      variant="info"
-      m="xxl"
+    <InfoBox
+      title={translateMessage('pageNotFound', resourceId, { resourceId })}
+      illustration="NotFound"
+      testId="NoRecordError"
     >
       <Text>
         {translateMessage('error404Record', resourceId, { resourceId, recordId })}
       </Text>
-    </MessageBox>
+    </InfoBox>
   )
 }
 
diff --git a/src/frontend/components/app/filter-drawer.tsx b/src/frontend/components/app/filter-drawer.tsx
index 9929c89e1..59f18e653 100644
--- a/src/frontend/components/app/filter-drawer.tsx
+++ b/src/frontend/components/app/filter-drawer.tsx
@@ -1,7 +1,7 @@
 import {
   Box, Button, Drawer,
   DrawerContent,
-  DrawerFooter, Icon,
+  DrawerFooter, H3, Icon,
 } from '@adminjs/design-system'
 import React, { MouseEvent, SyntheticEvent, useEffect, useRef, useState } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
@@ -42,7 +42,7 @@ const FilterDrawer: React.FC<FilterProps> = (props) => {
   const [filter, setFilter] = useState(parseQuery(location))
   const params = useParams<MatchProps>()
   const navigate = useNavigate()
-  const { translateButton } = useTranslation()
+  const { translateButton, translateLabel } = useTranslation()
   const initialLoad = useRef(true)
 
   useEffect(() => {
@@ -103,16 +103,17 @@ const FilterDrawer: React.FC<FilterProps> = (props) => {
   return (
     <Drawer variant="filter" isHidden={!isVisible} as="form" onSubmit={handleSubmit} data-css={contentTag}>
       <DrawerContent data-css={cssContent}>
-        <Box flex justifyContent="flex-end">
+        <Box flex justifyContent="space-between">
+          <H3>{translateLabel('filters', resource.id)}</H3>
           <Button
-            variant="light"
             type="button"
+            variant="light"
             size="icon"
             rounded
-            mr="lg"
+            color="text"
             onClick={(): void => toggleFilter()}
           >
-            <Icon icon="X" color="grey80" />
+            <Icon icon="X" />
           </Button>
         </Box>
         <Box my="x3">
@@ -129,12 +130,10 @@ const FilterDrawer: React.FC<FilterProps> = (props) => {
         </Box>
       </DrawerContent>
       <DrawerFooter data-css={cssFooter}>
-
-        <Button size="lg" variant="light" onClick={resetFilter} type="button" data-css={cssButtonReset}>
+        <Button type="button" size="lg" variant="light" onClick={resetFilter} data-css={cssButtonReset}>
           {translateButton('resetFilter', resource.id)}
         </Button>
-
-        <Button variant="contained" size="lg" data-css={cssButtonApply}>
+        <Button type="submit" variant="contained" size="lg" data-css={cssButtonApply}>
           {translateButton('applyChanges', resource.id)}
         </Button>
       </DrawerFooter>
diff --git a/src/frontend/components/app/language-select/language-select.tsx b/src/frontend/components/app/language-select/language-select.tsx
index 1f3e85da5..52f23a293 100644
--- a/src/frontend/components/app/language-select/language-select.tsx
+++ b/src/frontend/components/app/language-select/language-select.tsx
@@ -1,23 +1,31 @@
-import { Box, Button, DropDown, DropDownItem, DropDownMenu, DropDownTrigger, Icon } from '@adminjs/design-system'
-import React, { FC, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useSelector } from 'react-redux'
-import { useLocalStorage } from '../../../hooks'
-import { ReduxState } from '../../../store/store'
+import {
+  Box,
+  Button,
+  DropDown,
+  DropDownItem,
+  DropDownMenu,
+  DropDownTrigger,
+  Icon,
+} from '@adminjs/design-system'
+import React, { FC, useMemo } from 'react'
+import { useTranslation } from '../../../hooks'
 
 const LanguageSelect: FC = () => {
-  const locale = useSelector((state: ReduxState) => state.locale)
-  const [storedLocale, setStoredLocale] = useLocalStorage('locale', locale.language)
-  const { availableLanguages } = locale
+  const {
+    i18n: {
+      language,
+      options: { supportedLngs },
+      changeLanguage,
+    },
+    translateComponent,
+  } = useTranslation()
 
-  const { i18n } = useTranslation()
-
-  const handleButtonClick = useCallback((lng: string) => {
-    i18n.changeLanguage(lng)
-    setStoredLocale(lng)
-  }, [])
+  const availableLanguages: readonly string[] = useMemo(
+    () => (supportedLngs ? supportedLngs.filter((lang) => lang !== 'cimode') : []),
+    [supportedLngs],
+  )
 
-  if (!availableLanguages.length || availableLanguages.length === 1) {
+  if (availableLanguages.length <= 1) {
     return null
   }
 
@@ -27,13 +35,18 @@ const LanguageSelect: FC = () => {
         <DropDownTrigger>
           <Button color="text">
             <Icon icon="Globe" />
-            {storedLocale}
+            {translateComponent(`LanguageSelector.availableLanguages.${language}`, { defaultValue: language })}
           </Button>
         </DropDownTrigger>
         <DropDownMenu>
           {availableLanguages.map((lang) => (
-            <DropDownItem key={lang} onClick={() => handleButtonClick(lang)}>
-              {lang}
+            <DropDownItem
+              key={lang}
+              onClick={() => {
+                changeLanguage(lang)
+              }}
+            >
+              {translateComponent(`LanguageSelector.availableLanguages.${lang}`, { defaultValue: lang })}
             </DropDownItem>
           ))}
         </DropDownMenu>
diff --git a/src/frontend/components/app/records-table/no-records.tsx b/src/frontend/components/app/records-table/no-records.tsx
index 7de5ccb1c..02daf97fa 100644
--- a/src/frontend/components/app/records-table/no-records.tsx
+++ b/src/frontend/components/app/records-table/no-records.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text, Button, Icon, InfoBox, Illustration, H4 } from '@adminjs/design-system'
+import { Text, Button, Icon, InfoBox } from '@adminjs/design-system'
 
 import { ResourceJSON } from '../../../interfaces'
 import { useTranslation } from '../../../hooks'
@@ -17,20 +17,18 @@ const NoRecordsOriginal: React.FC<NoRecordsProps> = (props) => {
   const canCreate = resource.resourceActions.find((a) => a.name === 'new')
 
   return (
-    <InfoBox title="" variant="transparent">
-      <Illustration variant="IdentityCard" />
-      <H4 mb="lg">{translateMessage('noRecords', resource.id)}</H4>
+    <InfoBox title={translateMessage('noRecords', resource.id)} illustration="Docs">
       <Text mb="xxl">
         {translateMessage('noRecordsInResource', resource.id)}
       </Text>
-      {canCreate ? (
+      {canCreate && (
         <ActionButton action={canCreate} resourceId={resource.id}>
           <Button variant="contained">
             <Icon icon="Plus" />
             {translateButton('createFirstRecord', resource.id)}
           </Button>
         </ActionButton>
-      ) : ''}
+      )}
     </InfoBox>
   )
 }
diff --git a/src/frontend/components/app/records-table/property-header.spec.tsx b/src/frontend/components/app/records-table/property-header.spec.tsx
index 61cc96850..cd065930a 100644
--- a/src/frontend/components/app/records-table/property-header.spec.tsx
+++ b/src/frontend/components/app/records-table/property-header.spec.tsx
@@ -40,12 +40,13 @@ describe('<PropertyHeader />', function () {
   })
 
   context('render not selected but searchable field', function () {
-    xit('renders a label', async function () {
-      const { findAllByText } = renderSubject(property, sortBy, direction)
+    it('renders a client side translated label', async function () {
+      const { findByText } = renderSubject(property, sortBy, direction)
+      const translatedLabel = 'Some Property 1'
 
-      const label = await findAllByText(property.label)
+      const label = await findByText(translatedLabel)
 
-      expect(label).to.equal(property.label)
+      expect(label).to.exist
     })
 
     it('wraps it within a link with an opposite direction', function () {
diff --git a/src/frontend/components/app/records-table/records-table.spec.tsx b/src/frontend/components/app/records-table/records-table.spec.tsx
index c2cd028fd..f90914d2b 100644
--- a/src/frontend/components/app/records-table/records-table.spec.tsx
+++ b/src/frontend/components/app/records-table/records-table.spec.tsx
@@ -3,8 +3,6 @@ import { render, RenderResult } from '@testing-library/react'
 import sinon from 'sinon'
 import { expect } from 'chai'
 import factory from 'factory-girl'
-import { I18nextProvider } from 'react-i18next'
-import i18n from 'i18next'
 
 import { Provider } from 'react-redux'
 import { RecordsTable, RecordsTableProps } from './records-table'
@@ -27,15 +25,13 @@ const renderSubject = (props: Omit<RecordsTableProps, 'onSelect' | 'onSelectAll'
 
   const renderResult = render(
     <TestContextProvider>
-      <I18nextProvider i18n={i18n}>
-        <Provider store={createStore({})}>
-          <RecordsTable
-            {...props}
-            onSelect={onSelect}
-            onSelectAll={onSelectAll}
-          />
-        </Provider>
-      </I18nextProvider>
+      <Provider store={createStore({})}>
+        <RecordsTable
+          {...props}
+          onSelect={onSelect}
+          onSelectAll={onSelectAll}
+        />
+      </Provider>
     </TestContextProvider>,
   )
 
diff --git a/src/frontend/components/app/sidebar/sidebar-pages.tsx b/src/frontend/components/app/sidebar/sidebar-pages.tsx
index ed619d20f..6fc69af0f 100644
--- a/src/frontend/components/app/sidebar/sidebar-pages.tsx
+++ b/src/frontend/components/app/sidebar/sidebar-pages.tsx
@@ -16,7 +16,7 @@ const h = new ViewHelpers()
 const SidebarPages: React.FC<Props> = (props) => {
   const { pages } = props
 
-  const { translateLabel } = useTranslation()
+  const { translateLabel, translatePage } = useTranslation()
   const location = useLocation()
   const navigate = useNavigate()
 
@@ -30,7 +30,7 @@ const SidebarPages: React.FC<Props> = (props) => {
 
   const elements: Array<NavigationElementProps> = pages.map((page) => ({
     id: page.name,
-    label: page.name,
+    label: translatePage(page.name),
     isSelected: isActive(page),
     icon: page.icon,
     href: h.pageUrl(page.name),
diff --git a/src/frontend/components/login/index.tsx b/src/frontend/components/login/index.tsx
index e20568d93..cfde98074 100644
--- a/src/frontend/components/login/index.tsx
+++ b/src/frontend/components/login/index.tsx
@@ -1,23 +1,14 @@
-import React from 'react'
-import styled, { createGlobalStyle } from 'styled-components'
-
-import { useSelector } from 'react-redux'
 import {
-  Box,
-  H5,
-  H2,
-  Label,
-  Illustration,
-  Input,
-  FormGroup,
-  Button,
-  Text,
-  MessageBox,
-  MadeWithLove,
-  themeGet,
+  Box, Button, FormGroup, H2, H5, Illustration,
+  Input, Label, MadeWithLove, MessageBox, Text,
 } from '@adminjs/design-system'
+import React from 'react'
+import { I18nextProvider } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import styled, { createGlobalStyle } from 'styled-components'
 import { useTranslation } from '../../hooks'
 import { ReduxState } from '../../store/store'
+import initTranslations from '../../utils/adminjs.i18n'
 
 const GlobalStyle = createGlobalStyle`
   html, body, #app {
@@ -37,7 +28,7 @@ const Wrapper = styled(Box)`
 
 const StyledLogo = styled.img`
   max-width: 200px;
-  margin: ${themeGet('space', 'md')} 0;
+  margin: ${({ theme }) => theme.space.md} 0;
 `
 
 export type LoginProps = {
@@ -49,9 +40,11 @@ export const Login: React.FC<LoginProps> = (props) => {
   const { action, message } = props
   const { translateLabel, translateButton, translateProperty, translateMessage } = useTranslation()
   const branding = useSelector((state: ReduxState) => state.branding)
+  const locale = useSelector((state: ReduxState) => state.locale)
+  const { i18n } = initTranslations(locale)
 
   return (
-    <>
+    <I18nextProvider i18n={i18n}>
       <GlobalStyle />
       <Wrapper flex variant="grey">
         <Box bg="white" height="440px" flex boxShadow="login" width={[1, 2 / 3, 'auto']}>
@@ -125,7 +118,7 @@ export const Login: React.FC<LoginProps> = (props) => {
         </Box>
         {branding.withMadeWithLove ? (<Box mt="xxl"><MadeWithLove /></Box>) : null}
       </Wrapper>
-    </>
+    </I18nextProvider>
   )
 }
 
diff --git a/src/frontend/components/property-type/array/add-new-item-translation.tsx b/src/frontend/components/property-type/array/add-new-item-translation.tsx
index b2c967225..814bfbb60 100644
--- a/src/frontend/components/property-type/array/add-new-item-translation.tsx
+++ b/src/frontend/components/property-type/array/add-new-item-translation.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon, Box } from '@adminjs/design-system'
+import { Button, ButtonProps, Icon } from '@adminjs/design-system'
 
 import { useTranslation } from '../../../hooks'
 import { ResourceJSON, PropertyJSON } from '../../../interfaces'
@@ -7,10 +7,10 @@ import { ResourceJSON, PropertyJSON } from '../../../interfaces'
 type AddNewItemButtonProps = {
   resource: ResourceJSON;
   property: PropertyJSON;
-}
+} & ButtonProps
 
 const AddNewItemButton: React.FC<AddNewItemButtonProps> = (props) => {
-  const { resource, property } = props
+  const { resource, property, ...btnProps } = props
   const { translateProperty, translateButton } = useTranslation()
   const label = translateProperty(
     `${property.path}.addNewItem`,
@@ -21,10 +21,10 @@ const AddNewItemButton: React.FC<AddNewItemButtonProps> = (props) => {
   )
 
   return (
-    <Box>
+    <Button type="button" variant="outlined" {...btnProps}>
       <Icon icon="Plus" />
       {label}
-    </Box>
+    </Button>
   )
 }
 
diff --git a/src/frontend/components/property-type/array/edit.spec.tsx b/src/frontend/components/property-type/array/edit.spec.tsx
index d245269ff..222da34e1 100644
--- a/src/frontend/components/property-type/array/edit.spec.tsx
+++ b/src/frontend/components/property-type/array/edit.spec.tsx
@@ -76,10 +76,10 @@ describe('<PropertyType.Array.Edit />', function () {
         })
       })
 
-      xit('renders new empty input field after clicking "add"', function () {
-        const { getByText } = renderTestSubject(property, record)
+      it('renders new empty input field after clicking "add"', function () {
+        const { getByTestId } = renderTestSubject(property, record)
 
-        fireEvent.click(getByText(AddNewItemText))
+        fireEvent.click(getByTestId(`${property.path}-add`))
 
         expect(onChange).to.has.been.calledWith(property.path, [''])
       })
diff --git a/src/frontend/components/property-type/array/edit.tsx b/src/frontend/components/property-type/array/edit.tsx
index 80f9c5a29..11343eebf 100644
--- a/src/frontend/components/property-type/array/edit.tsx
+++ b/src/frontend/components/property-type/array/edit.tsx
@@ -38,26 +38,25 @@ const ItemRenderer: React.FC<EditProps & ItemRendererProps> = (props) => {
           backgroundColor="white"
           flex
           flexDirection="row"
-          alignItems="center"
+          alignItems="start"
           data-testid={property.path}
         >
-          <Box flexGrow={1}>
+          <Box as="div" flexGrow={1}>
             <ItemComponent {...props} />
           </Box>
-          <Box flexShrink={0} ml="lg">
-            <Button
-              rounded
-              ml="default"
-              data-testid="delete-item"
-              type="button"
-              size="icon"
-              onClick={(event): boolean => onDelete(event, property)}
-              variant="contained"
-              color="danger"
-            >
-              <Icon icon="Trash2" />
-            </Button>
-          </Box>
+          <Button
+            rounded
+            mt="xl"
+            ml="default"
+            data-testid="delete-item"
+            type="button"
+            size="icon"
+            onClick={(event): boolean => onDelete(event, property)}
+            variant="text"
+            color="danger"
+          >
+            <Icon icon="Trash2" />
+          </Button>
         </Box>
       )}
     </Draggable>
@@ -121,9 +120,7 @@ const InputsInSection: React.FC<EditProps> = (props) => {
               )
             })}
             {provided.placeholder}
-            <Button onClick={addNew} type="button" rounded>
-              <AddNewItemButton resource={resource} property={property} />
-            </Button>
+            <AddNewItemButton resource={resource} property={property} onClick={addNew} data-testid={`${property.path}-add`} />
           </Section>
         )}
       </Droppable>
diff --git a/src/frontend/components/property-type/boolean/filter.tsx b/src/frontend/components/property-type/boolean/filter.tsx
index 0dc5c4e76..f6f42baef 100644
--- a/src/frontend/components/property-type/boolean/filter.tsx
+++ b/src/frontend/components/property-type/boolean/filter.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
-import { FormGroup, Label, Select } from '@adminjs/design-system'
+import { FormGroup, Select } from '@adminjs/design-system'
 
 import mapValue from './map-value'
 import { FilterPropertyProps } from '../base-property-props'
 import allowOverride from '../../../hoc/allow-override'
+import PropertyLabel from '../utils/property-label/property-label'
 
 const boolValue = (s: string): boolean => {
   if (/true/i.test(s)) {
@@ -27,7 +28,7 @@ const Filter: React.FC<FilterPropertyProps> = (props) => {
 
   return (
     <FormGroup>
-      <Label>{property.label}</Label>
+      <PropertyLabel property={property} filter />
       <Select
         variant="filter"
         value={typeof selected === 'undefined' ? '' : selected}
diff --git a/src/frontend/components/property-type/currency/filter.tsx b/src/frontend/components/property-type/currency/filter.tsx
index 5f0d7d73b..1e316c716 100644
--- a/src/frontend/components/property-type/currency/filter.tsx
+++ b/src/frontend/components/property-type/currency/filter.tsx
@@ -14,7 +14,7 @@ const Filter: FC<EditPropertyProps> = (props) => {
 
   return (
     <FormGroup variant="filter">
-      <PropertyLabel property={property} />
+      <PropertyLabel property={property} filter />
       <CurrencyInput
         id={property.path}
         name={`filter-${property.path}`}
diff --git a/src/frontend/components/property-type/datetime/filter.tsx b/src/frontend/components/property-type/datetime/filter.tsx
index ae715a740..480bbad44 100644
--- a/src/frontend/components/property-type/datetime/filter.tsx
+++ b/src/frontend/components/property-type/datetime/filter.tsx
@@ -5,6 +5,7 @@ import * as BackendFilter from '../../../../backend/utils/filter/filter'
 import { useTranslation } from '../../../hooks/use-translation'
 import { FilterPropertyProps } from '../base-property-props'
 import allowOverride from '../../../hoc/allow-override'
+import PropertyLabel from '../utils/property-label/property-label'
 
 const { PARAM_SEPARATOR } = BackendFilter
 
@@ -19,7 +20,7 @@ const Filter: React.FC<FilterPropertyProps> = (props) => {
 
   return (
     <FormGroup variant="filter">
-      <Label>{property.label}</Label>
+      <PropertyLabel property={property} filter />
       <Label>{`- ${translateProperty('from')}: `}</Label>
       <DatePicker
         value={fromValue}
diff --git a/src/frontend/components/property-type/default-type/filter.tsx b/src/frontend/components/property-type/default-type/filter.tsx
index 490c0329c..90ac2e8fb 100644
--- a/src/frontend/components/property-type/default-type/filter.tsx
+++ b/src/frontend/components/property-type/default-type/filter.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
-import { FormGroup, Label, Input, Select } from '@adminjs/design-system'
+import { FormGroup, Input, Select } from '@adminjs/design-system'
 
 import allowOverride from '../../../hoc/allow-override'
 import { FilterPropertyProps } from '../base-property-props'
+import PropertyLabel from '../utils/property-label/property-label'
 
 const Filter: React.FC<FilterPropertyProps> = (props) => {
   const { property, onChange, filter } = props
@@ -42,7 +43,7 @@ const Filter: React.FC<FilterPropertyProps> = (props) => {
 
   return (
     <FormGroup variant="filter">
-      <Label>{property.label}</Label>
+      <PropertyLabel property={property} filter />
       {renderInput()}
     </FormGroup>
   )
diff --git a/src/frontend/components/property-type/phone/filter.tsx b/src/frontend/components/property-type/phone/filter.tsx
index 3f814efd5..dca95cf89 100644
--- a/src/frontend/components/property-type/phone/filter.tsx
+++ b/src/frontend/components/property-type/phone/filter.tsx
@@ -14,12 +14,10 @@ const Filter: FC<FilterPropertyProps> = (props) => {
 
   return (
     <FormGroup variant="filter">
-      <PropertyLabel property={property} />
+      <PropertyLabel property={property} filter />
       <PhoneInput
         id={property.path}
-        inputProps={{
-          name: `filter-${property.path}`,
-        }}
+        inputProps={{ name: `filter-${property.path}` }}
         onChange={handleChange}
         value={filter[property.path]}
         {...property.props as PhoneInputProps}
diff --git a/src/frontend/components/property-type/reference/filter.tsx b/src/frontend/components/property-type/reference/filter.tsx
index 9d2afb59e..5d8c03f9f 100644
--- a/src/frontend/components/property-type/reference/filter.tsx
+++ b/src/frontend/components/property-type/reference/filter.tsx
@@ -1,9 +1,10 @@
 import React, { useState } from 'react'
-import { FormGroup, Label, SelectAsync } from '@adminjs/design-system'
+import { FormGroup, SelectAsync } from '@adminjs/design-system'
 
 import ApiClient from '../../../utils/api-client'
 import { FilterPropertyProps, SelectRecord } from '../base-property-props'
 import allowOverride from '../../../hoc/allow-override'
+import PropertyLabel from '../utils/property-label/property-label'
 
 type SelectOptions = Array<{value: string | number; label: string }>
 
@@ -34,7 +35,7 @@ const Filter: React.FC<FilterPropertyProps> = (props) => {
 
   return (
     <FormGroup>
-      <Label>{property.label}</Label>
+      <PropertyLabel property={property} filter />
       <SelectAsync
         variant="filter"
         value={typeof selected === 'undefined' ? '' : selected}
diff --git a/src/frontend/components/property-type/utils/property-label/property-label.tsx b/src/frontend/components/property-type/utils/property-label/property-label.tsx
index 553bd5396..abf290179 100644
--- a/src/frontend/components/property-type/utils/property-label/property-label.tsx
+++ b/src/frontend/components/property-type/utils/property-label/property-label.tsx
@@ -9,18 +9,19 @@ import { useTranslation } from '../../../../hooks'
 export type PropertyLabelProps = {
   property: PropertyJSON;
   props?: LabelProps;
+  filter?: boolean;
 }
 
 const PropertyLabel: React.FC<PropertyLabelProps> = (props) => {
-  const { property, props: labelProps } = props
+  const { property, props: labelProps, filter = false } = props
   const { translateProperty } = useTranslation()
 
   if (property.hideLabel) { return null }
 
   return (
     <Label
-      htmlFor={property.path}
-      required={property.isRequired}
+      htmlFor={filter ? ['filter', property.path].join('-') : property.path}
+      required={!filter && property.isRequired}
       {...labelProps}
     >
       {translateProperty(property.label, property.resourceId)}
diff --git a/src/frontend/components/routes/bulk-action.tsx b/src/frontend/components/routes/bulk-action.tsx
index 8399dbc48..ebcbbf551 100644
--- a/src/frontend/components/routes/bulk-action.tsx
+++ b/src/frontend/components/routes/bulk-action.tsx
@@ -49,8 +49,9 @@ const BulkAction: React.FC = () => {
     }).catch((error) => {
       setLoading(false)
       addNotice({
-        message: translateMessage('errorFetchingRecords', resourceId),
+        message: 'errorFetchingRecords',
         type: 'error',
+        resourceId,
       })
       throw error
     })
diff --git a/src/frontend/components/routes/page.tsx b/src/frontend/components/routes/page.tsx
index 4a527bbaa..5ab826f14 100644
--- a/src/frontend/components/routes/page.tsx
+++ b/src/frontend/components/routes/page.tsx
@@ -1,51 +1,50 @@
-import React, { FunctionComponent, useState, useEffect } from 'react'
+import { InfoBox, Text } from '@adminjs/design-system'
+import React, { FC, useMemo } from 'react'
+import { Trans } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { useParams } from 'react-router'
 
-import ErrorBoundary from '../app/error-boundary'
-import { ReduxState } from '../../store/store'
-import ErrorMessageBox from '../app/error-message'
 import allowOverride from '../../hoc/allow-override'
+import withNoSSR from '../../hoc/with-no-ssr'
+import { useTranslation } from '../../hooks'
+import { ReduxState } from '../../store/store'
+import ErrorBoundary from '../app/error-boundary'
 
 declare const AdminJS: {
-  UserComponents: Record<string, FunctionComponent>;
+  UserComponents: Record<string, FC>;
 }
 
 type PageRouteProps = {
   pageName: string;
 }
 
-const Page: React.FC = () => {
-  const [pages] = useSelector((state: ReduxState) => [state.pages])
+const Page: FC = () => {
+  const pages = useSelector((state: ReduxState) => state.pages)
   const params = useParams<PageRouteProps>()
   const { pageName } = params
-  const [isClient, setIsClient] = useState(false)
-
-  const currentPage = pages.find((page) => page.name === pageName)
+  const { tm } = useTranslation()
 
-  useEffect(() => {
-    setIsClient(true)
-  }, [])
+  const currentPage = useMemo(() => pages.find(({ name }) => name === pageName), [pages, pageName])
 
   if (!currentPage) {
     return (
-      <ErrorMessageBox title="There is no page of given name">
-        <p>
-          Page:
-          <b>{` "${pageName}" `}</b>
-          does not exist.
-        </p>
-      </ErrorMessageBox>
+      <InfoBox title={tm('pageNotFound_title')} illustration="NotFound">
+        <Text mb="xxl">
+          <Trans i18nKey="messages.pageNotFound_subtitle" values={{ pageName }} components={{ strong: <strong /> }} />
+        </Text>
+      </InfoBox>
     )
   }
 
   const Component = AdminJS.UserComponents[currentPage.component]
 
-  if (!Component || !isClient) {
+  if (!Component) {
     return (
-      <ErrorMessageBox title="No component specified">
-        <p>You have to specify component which will render this Page</p>
-      </ErrorMessageBox>
+      <InfoBox title={tm('componentNotFound_title')} illustration="Beware">
+        <Text mb="xxl">
+          <Trans i18nKey="messages.componentNotFound_subtitle" />
+        </Text>
+      </InfoBox>
     )
   }
 
@@ -56,4 +55,4 @@ const Page: React.FC = () => {
   )
 }
 
-export default allowOverride(Page, 'PageRoute')
+export default allowOverride(withNoSSR(Page), 'PageRoute')
diff --git a/src/frontend/components/routes/record-action.tsx b/src/frontend/components/routes/record-action.tsx
index a58d9c1bf..5b0fe7b79 100644
--- a/src/frontend/components/routes/record-action.tsx
+++ b/src/frontend/components/routes/record-action.tsx
@@ -10,7 +10,7 @@ import { ActionJSON, RecordJSON } from '../../interfaces'
 import { NoResourceError, NoActionError, NoRecordError } from '../app/error-message'
 import Wrapper from './utils/wrapper'
 import { ActionHeader } from '../app'
-import { useNotice, useResource, useTranslation } from '../../hooks'
+import { useNotice, useResource } from '../../hooks'
 import DrawerPortal from '../app/drawer-portal'
 import { ActionResponse, RecordActionResponse } from '../../../backend/actions/action.interface'
 import mergeRecordResponse from '../../hooks/use-record/merge-record-response'
@@ -23,7 +23,6 @@ const RecordAction: React.FC = () => {
   const [loading, setLoading] = useState(true)
   const params = useParams<RecordActionParams>()
   const addNotice = useNotice()
-  const { translateMessage } = useTranslation()
 
   const { actionName, recordId, resourceId } = params
   const resource = useResource(resourceId!)
@@ -48,8 +47,9 @@ const RecordAction: React.FC = () => {
       }
     }).catch((error) => {
       addNotice({
-        message: translateMessage('errorFetchingRecord', resourceId),
+        message: 'errorFetchingRecord',
         type: 'error',
+        resourceId,
       })
       throw error
     }).finally(() => {
diff --git a/src/frontend/components/spec/test-context-provider.tsx b/src/frontend/components/spec/test-context-provider.tsx
index aaac21836..9b5fa1d7d 100644
--- a/src/frontend/components/spec/test-context-provider.tsx
+++ b/src/frontend/components/spec/test-context-provider.tsx
@@ -2,6 +2,9 @@ import React, { ReactNode } from 'react'
 import { StaticRouter } from 'react-router-dom/server'
 import { ThemeProvider } from 'styled-components'
 import { combineStyles } from '@adminjs/design-system'
+import { I18nextProvider } from 'react-i18next'
+import { defaultLocale } from '../../../locale'
+import initTranslations from '../../utils/adminjs.i18n'
 
 const theme = combineStyles({})
 
@@ -12,12 +15,15 @@ type Props = {
 
 const TestContextProvider: React.FC<Props> = (props) => {
   const { children, location } = props
+  const { i18n } = initTranslations(defaultLocale)
 
   return (
     <ThemeProvider theme={theme}>
-      <StaticRouter location={location || '/'}>
-        {children}
-      </StaticRouter>
+      <I18nextProvider i18n={i18n}>
+        <StaticRouter location={location || '/'}>
+          {children}
+        </StaticRouter>
+      </I18nextProvider>
     </ThemeProvider>
   )
 }
diff --git a/src/frontend/hoc/with-no-ssr.tsx b/src/frontend/hoc/with-no-ssr.tsx
new file mode 100644
index 000000000..2d0bf93bc
--- /dev/null
+++ b/src/frontend/hoc/with-no-ssr.tsx
@@ -0,0 +1,16 @@
+import React, { ComponentType, useEffect, useState } from 'react'
+
+// eslint-disable-next-line max-len
+const withNoSSR = <P extends Record<string, unknown>>(Component: ComponentType<P>) => (props: P) => {
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  if (!isClient) return null
+
+  return <Component {...props} />
+}
+
+export default withNoSSR
diff --git a/src/frontend/hooks/use-records/use-records.ts b/src/frontend/hooks/use-records/use-records.ts
index 9b1aa15d6..61ed715bc 100644
--- a/src/frontend/hooks/use-records/use-records.ts
+++ b/src/frontend/hooks/use-records/use-records.ts
@@ -6,7 +6,6 @@ import { RecordJSON } from '../../interfaces'
 import useNotice from '../use-notice'
 import ApiClient from '../../utils/api-client'
 import { ListActionResponse } from '../../../backend/actions/list/list-action'
-import { useTranslation } from '../use-translation'
 import { hasForceRefresh, removeForceRefresh } from '../../components/actions/utils/append-force-refresh'
 import { UseRecordsResult } from './use-records-result.type'
 
@@ -34,7 +33,6 @@ function useRecords(resourceId: string): UseRecordsResult {
   const location = useLocation()
   const navigate = useNavigate()
   const addNotice = useNotice()
-  const { translateMessage } = useTranslation()
   const onNotice = useNotice()
 
   const fetchData = (): Promise<AxiosResponse<ListActionResponse>> => {
@@ -64,8 +62,9 @@ function useRecords(resourceId: string): UseRecordsResult {
       setLoading(false)
     }).catch(() => {
       addNotice({
-        message: translateMessage('errorFetchingRecords', resourceId),
+        message: 'errorFetchingRecords',
         type: 'error',
+        resourceId,
       })
     })
     return promise
diff --git a/src/frontend/layout-template.tsx b/src/frontend/layout-template.tsx
index e68fbdc45..a125be936 100644
--- a/src/frontend/layout-template.tsx
+++ b/src/frontend/layout-template.tsx
@@ -17,28 +17,22 @@ import { getFaviconFromBranding } from '../backend/utils/options-parser/options-
  *
  * @private
  */
-const html = async (
-  admin: AdminJS,
-  currentAdmin?: CurrentAdmin,
-  location = '/',
-): Promise<string> => {
+const html = async (admin: AdminJS, currentAdmin?: CurrentAdmin, location = '/'): Promise<string> => {
   const h = new ViewHelpers({ options: admin.options })
 
   const store = await initializeStore(admin, currentAdmin)
   const reduxState = store.getState()
 
-  const { branding, assets } = reduxState
+  const { branding, assets, locale } = reduxState
 
-  const scripts = ((assets && assets.scripts) || [])
-    .map((s) => `<script src="${s}"></script>`)
-  const styles = ((assets && assets.styles) || [])
-    .map((l) => `<link rel="stylesheet" type="text/css" href="${l}">`)
-  const theme = combineStyles((branding.theme) || {})
+  const scripts = ((assets?.scripts) || []).map((s) => `<script src="${s}"></script>`)
+  const styles = ((assets?.styles) || []).map((l) => `<link rel="stylesheet" type="text/css" href="${l}">`)
+  const theme = combineStyles(branding.theme || {})
   const faviconTag = getFaviconFromBranding(branding)
 
   return `
     <!DOCTYPE html>
-    <html>
+    <html lang=${locale.language}>
     <head>
       <script>
         window.REDUX_STATE = ${JSON.stringify(reduxState)};
diff --git a/src/frontend/store/initialize-store.ts b/src/frontend/store/initialize-store.ts
index 538d8a518..e22b5ae16 100644
--- a/src/frontend/store/initialize-store.ts
+++ b/src/frontend/store/initialize-store.ts
@@ -15,7 +15,8 @@ import {
 import AdminJS from '../../adminjs'
 import { CurrentAdmin } from '../../current-admin.interface'
 import pagesToStore from './pages-to-store'
-import { getBranding, getAssets } from '../../backend/utils/options-parser/options-parser'
+import { getBranding, getAssets, getLocales } from '../../backend/utils/options-parser/options-parser'
+import { defaultLocale } from '../../locale'
 
 export const initializeStore = async (
   admin: AdminJS,
@@ -25,8 +26,6 @@ export const initializeStore = async (
   const AdminClass: typeof AdminJS = admin.constructor as typeof AdminJS
   const adminVersion = AdminClass.VERSION
 
-  store.dispatch(initializeLocale(admin.locale))
-
   store.dispatch(initializeResources(
     admin.resources.map((resource) => {
       try {
@@ -41,8 +40,10 @@ export const initializeStore = async (
 
   const branding = await getBranding(admin, currentAdmin)
   const assets = await getAssets(admin, currentAdmin)
+  const locales = await getLocales(admin, currentAdmin)
 
   store.dispatch(initializeBranding(branding || {}))
+  store.dispatch(initializeLocale(locales || defaultLocale))
   store.dispatch(initializeAssets(assets || {}))
 
   const {
diff --git a/src/frontend/store/store.ts b/src/frontend/store/store.ts
index 994b0e3ea..503fcb33f 100644
--- a/src/frontend/store/store.ts
+++ b/src/frontend/store/store.ts
@@ -25,6 +25,7 @@ import { Assets, BrandingOptions, VersionProps } from '../../adminjs-options.int
 import { PageJSON, ResourceJSON } from '../interfaces'
 import { DEFAULT_PATHS } from '../../constants'
 import { CurrentAdmin } from '../../current-admin.interface'
+import { defaultLocale } from '../../locale'
 import { Locale } from '../../locale/config'
 import { NoticeMessage } from '../hoc/with-notice'
 import { modalReducer, ModalInState } from './reducers/modal'
@@ -78,7 +79,7 @@ const pagesReducer = (
 }
 
 const localesReducer = (
-  state: Locale = { language: 'en', translations: {} } as Locale,
+  state: Locale = defaultLocale,
   action: {
     type: string;
     data: Locale;
diff --git a/src/frontend/utils/adminjs.i18n.ts b/src/frontend/utils/adminjs.i18n.ts
new file mode 100644
index 000000000..88c6f1d9a
--- /dev/null
+++ b/src/frontend/utils/adminjs.i18n.ts
@@ -0,0 +1,55 @@
+/* eslint-disable function-paren-newline */
+/* eslint-disable implicit-arrow-linebreak */
+import { flatten } from 'flat'
+import i18n, { InitOptions } from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import Backend from 'i18next-http-backend'
+import intersection from 'lodash/intersection'
+import merge from 'lodash/merge'
+import { initReactI18next } from 'react-i18next'
+import { defaultConfig, DEFAULT_NS, Locale, locales } from '../../locale'
+
+const initTranslations = (config: Locale) => {
+  const {
+    language = 'en',
+    availableLanguages = [],
+    translations,
+    localeDetection = false,
+    withBackend = false,
+    ...i18nConfig
+  } = config
+
+  const combinedConfig: InitOptions = merge(defaultConfig, i18nConfig, {
+    supportedLngs: availableLanguages,
+    fallbackLng: i18nConfig.fallbackLng || language,
+  })
+
+  const instance = i18n.createInstance(combinedConfig)
+
+  if (!instance.isInitialized) {
+    if (localeDetection) {
+      instance.use(LanguageDetector)
+    }
+
+    if (withBackend) {
+      instance.use(Backend)
+    }
+    instance.use(initReactI18next).init(combinedConfig)
+  }
+
+  const buildInTranslations = intersection(Object.keys(locales), availableLanguages)
+  if (buildInTranslations.length) {
+    buildInTranslations.forEach((lang) =>
+      instance.addResourceBundle(lang, DEFAULT_NS, flatten(locales[lang])),
+    )
+  }
+
+  if (translations) {
+    Object.keys(translations).forEach((lang) =>
+      instance.addResourceBundle(lang, DEFAULT_NS, flatten(translations[lang]), true, true),
+    )
+  }
+
+  return { i18n: instance }
+}
+export default initTranslations
diff --git a/src/frontend/utils/api-client.ts b/src/frontend/utils/api-client.ts
index a8afeb243..cc9206777 100644
--- a/src/frontend/utils/api-client.ts
+++ b/src/frontend/utils/api-client.ts
@@ -229,7 +229,7 @@ class ApiClient {
    * @return  {Promise<AxiosResponse<any>>} response from the handler function defined in
    *                                     {@link AdminJSOptions#dashboard}
    */
-  async getDashboard(options: AxiosRequestConfig = {}): Promise<AxiosResponse<any>> {
+  async getDashboard<T = unknown>(options: AxiosRequestConfig = {}): Promise<AxiosResponse<T>> {
     const response = await this.client.get('/api/dashboard', options)
     checkResponse(response)
     return response
@@ -242,7 +242,7 @@ class ApiClient {
    * @return  {Promise<AxiosResponse<any>>}     response from the handler of given page
    *                                            defined in {@link AdminJSOptions#pages}
    */
-  async getPage(options: GetPageAPIParams): Promise<AxiosResponse<any>> {
+  async getPage<T = unknown>(options: GetPageAPIParams): Promise<AxiosResponse<T>> {
     const { pageName, ...axiosParams } = options
     const response = await this.client.request({
       url: `/api/pages/${pageName}`,
diff --git a/src/locale/config.ts b/src/locale/config.ts
index 7a642cc53..9c7fb883f 100644
--- a/src/locale/config.ts
+++ b/src/locale/config.ts
@@ -1,5 +1,19 @@
-import merge from 'lodash/merge'
-import { formatName } from '../utils/translate-functions.factory'
+import type { InitOptions, ResourceKey, ResourceLanguage } from 'i18next'
+
+export type AdminJSLocalesConfig = InitOptions & {
+  /**
+   * Detect user language
+   * learn more: https://github.com/i18next/i18next-browser-languagedetector
+   * @default false
+   */
+  localeDetection?: boolean
+  /**
+   * Load translation using http -> see /public/locales
+   * learn more: https://github.com/i18next/i18next-http-backend
+   * @default false
+   */
+  withBackend?: boolean
+}
 
 /**
  * Locale object passed to {@link AdminJSOptions} and stored in the application
@@ -7,45 +21,34 @@ import { formatName } from '../utils/translate-functions.factory'
  * @memberof AdminJSOptions
  * @alias Locale
  */
-export type Locale = {
+export type Locale = AdminJSLocalesConfig & {
   /** Language ISO string like: 'en' 'pl' or 'de' */
-  language: string;
+  language: string
   /**
    * All the translations.
    */
-  translations: Partial<LocaleTranslations>;
+  translations: Record<string, LocaleTranslations>
   /**
-  * Available languages (array of ISO strings)
-  */
-  availableLanguages: string[];
+   * Available languages (array of ISO strings)
+   */
+  availableLanguages?: string[]
 }
 
-export type LocaleTranslationsBlock = {
-  actions: {
-    [key: string]: string;
-  };
-  buttons: {
-    [key: string]: string;
-  };
-  labels: {
-    [key: string]: string
-  };
-  components: {
-    [key: string]: Record<string, string>
-  };
-  messages: {
-    [key: string]: string;
-  };
-  properties: {
-    [key: string]: string;
-  };
-}
+type AdminJSLocaleNamespaces =
+  | 'actions'
+  | 'buttons'
+  | 'labels'
+  | 'components'
+  | 'pages'
+  | 'messages'
+  | 'properties'
+
+export type LocaleTranslationsBlock = ResourceLanguage &
+  Partial<Record<AdminJSLocaleNamespaces, ResourceKey>>
 
 // Locale translations is not well parsed by JSDoc so the typedef is placed below
 export type LocaleTranslations = Partial<LocaleTranslationsBlock> & {
-  resources?: {
-    [key: string]: Partial<LocaleTranslationsBlock>;
-  };
+  resources?: Record<string, LocaleTranslationsBlock>
 }
 
 /**
@@ -84,6 +87,7 @@ export type LocaleTranslations = Partial<LocaleTranslationsBlock> & {
  * @property {Record<string, string>} [messages]        translated messages
  * @property {Record<string, string>} [buttons]         translated button labels
  * @property {Record<string, string>} [components]      translated components
+ * @property {Record<string, string>} [pages]           translated pages
  * @property {Record<string, string>} [labels]          translated labels
  * @property {Record<string, object>} [resources]       optional resources sub-translations
  * @property {Record<string, object>} resources.resourceId  Id of a resource from the database. i.e.
@@ -95,27 +99,3 @@ export type LocaleTranslations = Partial<LocaleTranslationsBlock> & {
  * @property {Record<string, string>} [resources.resourceId.labels]
  *
  */
-
-// Escaping all keys with . (changing to '&#46;')
-const renameKeys = (object: Partial<LocaleTranslations>): Partial<LocaleTranslations> => (
-  Object.entries(object).reduce((memo, [k, v]) => {
-    if (typeof v === 'object') {
-      return {
-        ...memo,
-        [formatName(k)]: renameKeys(v),
-      }
-    }
-    return {
-      ...memo,
-      [formatName(k)]: v,
-    }
-  }, {})
-)
-
-export const combineTranslations = (
-  originalTranslations: LocaleTranslations,
-  adminTranslations: Partial<LocaleTranslations> = {},
-): LocaleTranslations => {
-  const formattedTranslations = renameKeys(adminTranslations)
-  return merge(originalTranslations, formattedTranslations)
-}
diff --git a/src/locale/de.ts b/src/locale/de.ts
deleted file mode 100644
index a34b1a313..000000000
--- a/src/locale/de.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-/* spellchecker: disable */
-
-const translations = {
-  actions: {
-    new: 'Neu Erstellen',
-    edit: 'Bearbeiten',
-    show: 'Anzeigen',
-    delete: 'Löschen',
-    bulkDelete: 'Alle Löschen',
-    list: 'Auflisten',
-  },
-  buttons: {
-    save: 'Speichern',
-    addNewItem: 'Neuen Eintrag hinzufügen',
-    filter: 'Filter',
-    applyChanges: 'Änderungen übernehmen',
-    resetFilter: 'Zurücksetzen',
-    confirmRemovalMany: 'Bestätigen Sie das Löschen des Eintrag',
-    confirmRemovalMany_plural: 'Bestätigen Sie das Löschen der {{count}} Einträge',
-    logout: 'Abmelden',
-    login: 'Anmelden',
-    seeTheDocumentation: 'Siehe: <1>die Dokumentation</1>',
-    createFirstRecord: 'Ersten Eintrag erstellen',
-    cancel: 'Abbestellen',
-    confirm: 'Bestätigen',
-  },
-  components: {
-    DropZone: {
-      placeholder: 'Legen Sie Ihre Datei hier ab oder klicken Sie zum Durchsuchen',
-      acceptedSize: 'Maximale Dateigröße: {{maxSize}}',
-      acceptedType: 'Unterstützen: {{mimeTypes}}',
-      unsupportedSize: 'Datei {{fileName}} ist zu groß',
-      unsupportedType: 'Datei {{fileName}} hat einen nicht unterstützten Typ: {{fileType}}',
-    },
-  },
-  labels: {
-    navigation: 'Navigation',
-    pages: 'Seiten',
-    selectedRecords: 'Ausgewählt ({{selected}})',
-    filters: 'Filter',
-    adminVersion: 'Admin: {{version}}',
-    appVersion: 'App: {{version}}',
-    loginWelcome: 'Wilkommen',
-    dashboard: 'Dashboard',
-  },
-  properties: {
-    length: 'Anzahl',
-    from: 'Von',
-    to: 'An',
-  },
-  resources: {},
-  messages: {
-    successfullyBulkDeleted: 'erfolgreich den Eintrag gelöscht',
-    successfullyBulkDeleted_plural: 'erfolgreich {{count}} Einträge gelöscht',
-    successfullyDeleted: 'Erfolgreich den gewählten Eintrag gelöscht',
-    successfullyUpdated: 'Erfolgreich den gewählten Eintrag aktualisiert',
-    thereWereValidationErrors: 'Es sind Validierungsfehler aufgetreten - bitte unten prüfen',
-    forbiddenError: 'Sie können {{resourceId}} nicht {{actionName}}',
-    anyForbiddenError: 'Sie können diese Aktion nicht durchführen',
-    successfullyCreated: 'Erfolgreich einen neuen Eintrag erstellt',
-    bulkDeleteError: 'Beim Löschen der Einträge ist ein Fehler aufgetreten, für weitere Informationen die Konsole prüfen',
-    errorFetchingRecords: 'Es ist ein Fehler beim Abrufen der Einträge aufgetreten. In der Konsole finden Sie weitere Informationen',
-    errorFetchingRecord: 'Es ist ein Fehler beim Abrufen des Eintrages aufgetreten. In der Konsole finden Sie weitere Informationen.',
-    noRecordsSelected: 'Sie haben keine Einträge ausgewählt',
-    theseRecordsWillBeRemoved: 'Der folgende Eintrag wird entfernt',
-    theseRecordsWillBeRemoved_plural: 'Die folgenden Einträge werden entfernt',
-    pickSomeFirstToRemove: 'Damit Einträge gelöscht werden können, müssen Sie diese vorher auswählen',
-    error404Resource: 'Eintrag mit id: {{resourceId}} kann nicht gefunden werden',
-    error404Action: 'Eintrag mit id: {{resourceId}} hat keine Aktion mit dem Namen: {{actionName}} oder Sie sind nicht berechtigt diese auszuführen!',
-    error404Record: 'Eintrag mit id: {{resourceId}} hat keinen Eintrag mit der id: {{recordId}} oder Sie sind berechtigt diesen aufzurufen!',
-    seeConsoleForMore: 'Siehe Entwicklerkonsole für weitere Details...',
-    noActionComponent: 'Sie müssen eine Aktionskomponente für Ihre Aktion implementieren',
-    noRecordsInResource: 'Es gibt keine Einträge in dieser Ressource',
-    noRecords: 'Keine Einträge',
-    confirmDelete: 'Wollen Sie wirklich diesen Eintrag löschen?',
-    welcomeOnBoard_title: 'Willkommen an Bord!',
-    welcomeOnBoard_subtitle: 'Jetzt gehören Sie zu uns! Wir haben ein paar Tipps für Sie vorbereitet, damit Sie loslegen können:',
-    loginWelcome: 'zu AdminJS - dem weltweit führenden, automatisch generierten Open-Source-Admin-Panel für Ihre Node.js-Anwendung, mit dem Sie alle Ihre Daten an einem Ort verwalten können',
-    addingResources_title: 'Ressourcen Hinzufügen',
-    addingResources_subtitle: 'So fügen Sie neue Ressourcen zur Seitenleiste hinzu',
-    customizeResources_title: 'Ressourcen anpassen',
-    customizeResources_subtitle: 'Definieren von Verhalten, Hinzufügen von Eigenschaften und mehr...',
-    customizeActions_title: 'Aktionen anpassen',
-    customizeActions_subtitle: 'Ändern bestehender und Hinzufügen neuer Aktionen',
-    writeOwnComponents_title: 'Komponenten schreiben',
-    writeOwnComponents_subtitle: 'Wie man das Aussehen von AdminJS ändert',
-    customDashboard_title: 'Benutzerdefiniertes Dashboard',
-    customDashboard_subtitle: 'So ändern Sie diese Ansicht und fügen neue Seiten in der Seitenleiste hinzu',
-    roleBasedAccess_title: 'Rollenbasierte Zugriffskontrolle',
-    roleBasedAccess_subtitle: 'Erstellen von Benutzerrollen und Berechtigungen in AdminJS',
-    community_title: 'Treten Sie der Slack-Community bei',
-    community_subtitle: 'Sprechen Sie mit den Entwicklern von AdminJS und anderen AdminJS-Anwendern',
-    foundBug_title: 'Sie haben einen Fehler gefunden? Sie brauchen eine Verbesserung?',
-    foundBug_subtitle: 'Erstellen Sie ein Ticket in unserem GitHub Repo',
-    needMoreSolutions_title: 'Benötigen Sie fortschrittlichere Lösungen?',
-    needMoreSolutions_subtitle: 'Wir sind hier, um Ihnen ein schönes UX/UI-Design und eine maßgeschneiderte Software zu bieten, die (nicht nur) auf AdminJS basiert.',
-    invalidCredentials: 'Falsche E-Mail und/oder falsches Passwort',
-  },
-}
-
-export default {
-  language: 'de',
-  translations,
-}
diff --git a/src/locale/de/translation.json b/src/locale/de/translation.json
new file mode 100644
index 000000000..991a2d355
--- /dev/null
+++ b/src/locale/de/translation.json
@@ -0,0 +1,114 @@
+{
+  "actions": {
+    "new": "Neu Erstellen",
+    "edit": "Bearbeiten",
+    "show": "Anzeigen",
+    "delete": "Löschen",
+    "bulkDelete": "Alle Löschen",
+    "list": "Auflisten"
+  },
+  "buttons": {
+    "save": "Speichern",
+    "addNewItem": "Neuen Eintrag hinzufügen",
+    "filter": "Filter",
+    "applyChanges": "Änderungen übernehmen",
+    "resetFilter": "Zurücksetzen",
+    "confirmRemovalMany": "Bestätigen Sie das Löschen des Eintrag",
+    "confirmRemovalMany_plural": "Bestätigen Sie das Löschen der {{count}} Einträge",
+    "logout": "Abmelden",
+    "login": "Anmelden",
+    "seeTheDocumentation": "Siehe: <1>die Dokumentation</1>",
+    "createFirstRecord": "Ersten Eintrag erstellen",
+    "cancel": "Abbestellen",
+    "confirm": "Bestätigen"
+  },
+  "components": {
+    "DropZone": {
+      "placeholder": "Legen Sie Ihre Datei hier ab oder klicken Sie zum Durchsuchen",
+      "acceptedSize": "Maximale Dateigröße: {{maxSize}}",
+      "acceptedType": "Unterstützen: {{mimeTypes}}",
+      "unsupportedSize": "Datei {{fileName}} ist zu groß",
+      "unsupportedType": "Datei {{fileName}} hat einen nicht unterstützten Typ: {{fileType}}"
+    },
+    "LanguageSelector": {
+      "availableLanguages": {
+        "de": "Deutsch",
+        "en": "Englisch",
+        "es": "Spanisch",
+        "it": "Italienisch",
+        "pl": "Polnisch",
+        "pt-BR": "Portugiesisch (Brasilien)",
+        "ua": "Ukrainisch",
+        "zh-CN": "Chinesisch"
+      }
+    }
+  },
+  "labels": {
+    "navigation": "Navigation",
+    "pages": "Seiten",
+    "selectedRecords": "Ausgewählt ({{selected}})",
+    "filters": "Filter",
+    "adminVersion": "Admin: {{version}}",
+    "appVersion": "App: {{version}}",
+    "loginWelcome": "Wilkommen",
+    "dashboard": "Dashboard"
+  },
+  "properties": {
+    "length": "Anzahl",
+    "from": "Von",
+    "to": "An"
+  },
+  "resources": {},
+  "messages": {
+    "successfullyBulkDeleted": "erfolgreich den Eintrag gelöscht",
+    "successfullyBulkDeleted_plural": "erfolgreich {{count}} Einträge gelöscht",
+    "successfullyDeleted": "Erfolgreich den gewählten Eintrag gelöscht",
+    "successfullyUpdated": "Erfolgreich den gewählten Eintrag aktualisiert",
+    "thereWereValidationErrors": "Es sind Validierungsfehler aufgetreten - bitte unten prüfen",
+    "forbiddenError": "Sie können {{resourceId}} nicht {{actionName}}",
+    "anyForbiddenError": "Sie können diese Aktion nicht durchführen",
+    "successfullyCreated": "Erfolgreich einen neuen Eintrag erstellt",
+    "bulkDeleteError": "Beim Löschen der Einträge ist ein Fehler aufgetreten, für weitere Informationen die Konsole prüfen",
+    "errorFetchingRecords": "Es ist ein Fehler beim Abrufen der Einträge aufgetreten. In der Konsole finden Sie weitere Informationen",
+    "errorFetchingRecord": "Es ist ein Fehler beim Abrufen des Eintrages aufgetreten. In der Konsole finden Sie weitere Informationen.",
+    "noRecordsSelected": "Sie haben keine Einträge ausgewählt",
+    "theseRecordsWillBeRemoved": "Der folgende Eintrag wird entfernt",
+    "theseRecordsWillBeRemoved_plural": "Die folgenden Einträge werden entfernt",
+    "pickSomeFirstToRemove": "Damit Einträge gelöscht werden können, müssen Sie diese vorher auswählen",
+    "error404Resource": "Eintrag mit id: {{resourceId}} kann nicht gefunden werden",
+    "error404Action": "Eintrag mit id: {{resourceId}} hat keine Aktion mit dem Namen: {{actionName}} oder Sie sind nicht berechtigt diese auszuführen!",
+    "error404Record": "Eintrag mit id: {{resourceId}} hat keinen Eintrag mit der id: {{recordId}} oder Sie sind berechtigt diesen aufzurufen!",
+    "seeConsoleForMore": "Siehe Entwicklerkonsole für weitere Details...",
+    "noActionComponent": "Sie müssen eine Aktionskomponente für Ihre Aktion implementieren",
+    "noRecordsInResource": "Es gibt keine Einträge in dieser Ressource",
+    "noRecords": "Keine Einträge",
+    "confirmDelete": "Wollen Sie wirklich diesen Eintrag löschen?",
+    "welcomeOnBoard_title": "Willkommen an Bord!",
+    "welcomeOnBoard_subtitle": "Jetzt gehören Sie zu uns! Wir haben ein paar Tipps für Sie vorbereitet, damit Sie loslegen können:",
+    "loginWelcome": "zu AdminJS - dem weltweit führenden, automatisch generierten Open-Source-Admin-Panel für Ihre Node.js-Anwendung, mit dem Sie alle Ihre Daten an einem Ort verwalten können",
+    "addingResources_title": "Ressourcen Hinzufügen",
+    "addingResources_subtitle": "So fügen Sie neue Ressourcen zur Seitenleiste hinzu",
+    "customizeResources_title": "Ressourcen anpassen",
+    "customizeResources_subtitle": "Definieren von Verhalten, Hinzufügen von Eigenschaften und mehr...",
+    "customizeActions_title": "Aktionen anpassen",
+    "customizeActions_subtitle": "Ändern bestehender und Hinzufügen neuer Aktionen",
+    "writeOwnComponents_title": "Komponenten schreiben",
+    "writeOwnComponents_subtitle": "Wie man das Aussehen von AdminJS ändert",
+    "customDashboard_title": "Benutzerdefiniertes Dashboard",
+    "customDashboard_subtitle": "So ändern Sie diese Ansicht und fügen neue Seiten in der Seitenleiste hinzu",
+    "roleBasedAccess_title": "Rollenbasierte Zugriffskontrolle",
+    "roleBasedAccess_subtitle": "Erstellen von Benutzerrollen und Berechtigungen in AdminJS",
+    "community_title": "Treten Sie der Slack-Community bei",
+    "community_subtitle": "Sprechen Sie mit den Entwicklern von AdminJS und anderen AdminJS-Anwendern",
+    "foundBug_title": "Sie haben einen Fehler gefunden? Sie brauchen eine Verbesserung?",
+    "foundBug_subtitle": "Erstellen Sie ein Ticket in unserem GitHub Repo",
+    "needMoreSolutions_title": "Benötigen Sie fortschrittlichere Lösungen?",
+    "needMoreSolutions_subtitle": "Wir sind hier, um Ihnen ein schönes UX/UI-Design und eine maßgeschneiderte Software zu bieten, die (nicht nur) auf AdminJS basiert.",
+    "invalidCredentials": "Falsche E-Mail und/oder falsches Passwort",
+
+    "pageNotFound_title": "Seite nicht gefunden",
+    "pageNotFound_subtitle": "Buchseite <strong>\"{{pageName}}\"</strong> ist nicht vorhanden",
+    "componentNotFound_title": "Keine Komponente angegeben",
+    "componentNotFound_subtitle": "Sie müssen die Komponente angeben, die dieses Element rendert"
+  }
+}
diff --git a/src/locale/default-config.ts b/src/locale/default-config.ts
new file mode 100644
index 000000000..e8c32709a
--- /dev/null
+++ b/src/locale/default-config.ts
@@ -0,0 +1,30 @@
+import type { InitOptions } from 'i18next'
+import type { Locale } from './config'
+
+const DEFAULT_LOAD = 'currentOnly'
+export const DEFAULT_NS = 'translation'
+
+export const defaultLocale: Locale = {
+  language: 'en',
+  translations: {},
+  availableLanguages: ['en'],
+}
+
+export const defaultConfig: InitOptions = {
+  debug: process.env.NODE_ENV === 'development',
+  partialBundledLanguages: true,
+  interpolation: {
+    escapeValue: false,
+  },
+  ns: [DEFAULT_NS],
+  defaultNS: DEFAULT_NS,
+  fallbackNS: DEFAULT_NS,
+  load: DEFAULT_LOAD,
+  react: {
+    useSuspense: false,
+  },
+  resources: {},
+  get initImmediate(): boolean {
+    return typeof window !== 'undefined'
+  },
+}
diff --git a/src/locale/en.ts b/src/locale/en.ts
deleted file mode 100644
index 30e45aa98..000000000
--- a/src/locale/en.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-/* spellchecker: disable */
-
-const translations = {
-  actions: {
-    new: 'Create new',
-    edit: 'Edit',
-    show: 'Show',
-    delete: 'Delete',
-    bulkDelete: 'Delete all',
-    list: 'List',
-  },
-  buttons: {
-    save: 'Save',
-    addNewItem: 'Add New Item',
-    filter: 'Filter',
-    applyChanges: 'Apply changes',
-    resetFilter: 'Reset',
-    confirmRemovalMany: 'Confirm the removal of {{count}} record',
-    confirmRemovalMany_plural: 'Confirm the removal of {{count}} records',
-    logout: 'Log out',
-    login: 'Log in',
-    seeTheDocumentation: 'See: <1>the documentation</1>',
-    createFirstRecord: 'Create First Record',
-    cancel: 'Cancel',
-    confirm: 'Confirm',
-  },
-  components: {
-    DropZone: {
-      placeholder: 'Drop your file here, or click to browse',
-      acceptedSize: 'Max size: {{maxSize}}',
-      acceptedType: 'Supports: {{mimeTypes}}',
-      unsupportedSize: 'File {{fileName}} is too big',
-      unsupportedType: 'File {{fileName}} has unsupported type: {{fileType}}',
-    },
-  },
-  labels: {
-    navigation: 'Navigation',
-    pages: 'Pages',
-    selectedRecords: 'Selected ({{selected}})',
-    filters: 'Filters',
-    adminVersion: 'Admin: {{version}}',
-    appVersion: 'App: {{version}}',
-    loginWelcome: 'Welcome',
-    dashboard: 'Dashboard',
-  },
-  properties: {
-    length: 'Length',
-    from: 'From',
-    to: 'To',
-  },
-  resources: {},
-  messages: {
-    successfullyBulkDeleted: 'successfully removed {{count}} record',
-    successfullyBulkDeleted_plural: 'successfully removed {{count}} records',
-    successfullyDeleted: 'Successfully deleted given record',
-    successfullyUpdated: 'Successfully updated given record',
-    thereWereValidationErrors: 'There are validation errors - check them out below',
-    forbiddenError: 'You cannot perform action {{actionName}} on {{resourceId}}',
-    anyForbiddenError: 'You cannot perform given action',
-    successfullyCreated: 'Successfully created a new record',
-    bulkDeleteError: 'There was an error deleting records, Check out console to see more information',
-    errorFetchingRecords: 'There was an error fetching records, Check out console to see more information',
-    errorFetchingRecord: 'There was an error fetching record, Check out console to see more information',
-    noRecordsSelected: 'You have not selected any records',
-    theseRecordsWillBeRemoved: 'Following record will be removed',
-    theseRecordsWillBeRemoved_plural: 'Following records will be removed',
-    pickSomeFirstToRemove: 'In order to remove records, you have to pick them first',
-    error404Resource: 'Resource of given id: {{resourceId}} cannot be found',
-    error404Action: 'Resource of given id: {{resourceId}} does not have an action with name: {{actionName}} or you are not authorized to use it!',
-    error404Record: 'Resource of given id: {{resourceId}} does not have a record with id: {{recordId}} or you are not authorized to use it!',
-    seeConsoleForMore: 'See development console for more details...',
-    noActionComponent: 'You have to implement action component for your Action',
-    noRecordsInResource: 'There are no records in this resource',
-    noRecords: 'No records',
-    confirmDelete: 'Do you really want to remove this item?',
-    welcomeOnBoard_title: 'Welcome on Board!',
-    welcomeOnBoard_subtitle: 'Now you are one of us! We prepared a few tips for you to start:',
-    loginWelcome: 'to AdminJS – the world\'s leading open-source auto-generated admin panel for your Node.js application that allows you to manage all your data in one place',
-    addingResources_title: 'Adding Resources',
-    addingResources_subtitle: 'How to add new resources to the sidebar',
-    customizeResources_title: 'Customize Resources',
-    customizeResources_subtitle: 'Defining behavior, adding properties and more...',
-    customizeActions_title: 'Customize Actions',
-    customizeActions_subtitle: 'Modifying existing actions and adding new',
-    writeOwnComponents_title: 'Write Components',
-    writeOwnComponents_subtitle: 'How to modify the Look and Feel of AdminJS',
-    customDashboard_title: 'Custom Dashboard',
-    customDashboard_subtitle: 'How to modify this view and add new Pages on the sidebar',
-    roleBasedAccess_title: 'Role-Based Access Control',
-    roleBasedAccess_subtitle: 'Create user roles and permissions in AdminJS',
-    community_title: 'Join the slack community',
-    community_subtitle: 'Talk with the creators of AdminJS and other AdminJS users',
-    foundBug_title: 'Found a Bug? need improvement?',
-    foundBug_subtitle: 'Raise an issue on our GitHub repo',
-    needMoreSolutions_title: 'Need more advanced solutions?',
-    needMoreSolutions_subtitle: 'We are here to provide you a beautiful UX/UI design and tailor made software based (not only) on AdminJS',
-    invalidCredentials: 'Wrong email and/or password',
-    keyPlaceholder: 'KEY',
-    valuePlaceholder: 'VALUE',
-    initialKey: 'Key-{{number}}',
-    keyInUse: 'Object keys must be unique.',
-    keyValuePropertyDefaultDescription: 'All values are stored as text. Keys must be unique, duplicate keys will not be saved.',
-  },
-}
-
-export default {
-  language: 'en',
-  translations,
-}
diff --git a/src/locale/en/translation.json b/src/locale/en/translation.json
new file mode 100644
index 000000000..67cff572e
--- /dev/null
+++ b/src/locale/en/translation.json
@@ -0,0 +1,119 @@
+{
+  "actions": {
+    "new": "Create new",
+    "edit": "Edit",
+    "show": "Show",
+    "delete": "Delete",
+    "bulkDelete": "Delete all",
+    "list": "List"
+  },
+  "buttons": {
+    "save": "Save",
+    "addNewItem": "Add new item",
+    "filter": "Filter",
+    "applyChanges": "Apply changes",
+    "resetFilter": "Reset",
+    "confirmRemovalMany": "Confirm the removal of {{count}} record",
+    "confirmRemovalMany_plural": "Confirm the removal of {{count}} records",
+    "logout": "Log out",
+    "login": "Log in",
+    "seeTheDocumentation": "See: <1>the documentation</1>",
+    "createFirstRecord": "Create first record",
+    "cancel": "Cancel",
+    "confirm": "Confirm"
+  },
+  "components": {
+    "DropZone": {
+      "placeholder": "Drop your file here, or click to browse",
+      "acceptedSize": "Max size: {{maxSize}}",
+      "acceptedType": "Supports: {{mimeTypes}}",
+      "unsupportedSize": "File {{fileName}} is too big",
+      "unsupportedType": "File {{fileName}} has unsupported type: {{fileType}}"
+    },
+    "LanguageSelector": {
+      "availableLanguages": {
+        "de": "German",
+        "en": "English",
+        "es": "Spanish",
+        "it": "Italian",
+        "pl": "Polish",
+        "pt-BR": "Portuguese (Brazil)",
+        "ua": "Ukrainian",
+        "zh-CN": "Chinese"
+      }
+    }
+  },
+  "labels": {
+    "navigation": "Navigation",
+    "pages": "Pages",
+    "selectedRecords": "Selected ({{selected}})",
+    "filters": "Filters",
+    "adminVersion": "Admin: {{version}}",
+    "appVersion": "App: {{version}}",
+    "loginWelcome": "Welcome",
+    "dashboard": "Dashboard"
+  },
+  "properties": {
+    "length": "Length",
+    "from": "From",
+    "to": "To"
+  },
+  "resources": {},
+  "messages": {
+    "successfullyBulkDeleted": "Successfully removed {{count}} record",
+    "successfullyBulkDeleted_plural": "Successfully removed {{count}} records",
+    "successfullyDeleted": "Successfully deleted given record",
+    "successfullyUpdated": "Successfully updated given record",
+    "thereWereValidationErrors": "There are validation errors - check them out below",
+    "forbiddenError": "You cannot perform action {{actionName}} on {{resourceId}}",
+    "anyForbiddenError": "You cannot perform given action",
+    "successfullyCreated": "Successfully created a new record",
+    "bulkDeleteError": "There was an error deleting records. Check out console to see more information",
+    "errorFetchingRecords": "There was an error fetching records. Check out console to see more information",
+    "errorFetchingRecord": "There was an error fetching record. Check out console to see more information",
+    "noRecordsSelected": "You have not selected any records",
+    "theseRecordsWillBeRemoved": "Following record will be removed",
+    "theseRecordsWillBeRemoved_plural": "Following records will be removed",
+    "pickSomeFirstToRemove": "In order to remove records, you have to pick them first",
+    "error404Resource": "Resource of given id: {{resourceId}} cannot be found",
+    "error404Action": "Resource of given id: {{resourceId}} does not have an action with name: {{actionName}} or you are not authorized to use it!",
+    "error404Record": "Resource of given id: {{resourceId}} does not have a record with id: {{recordId}} or you are not authorized to use it!",
+    "seeConsoleForMore": "See development console for more details...",
+    "noActionComponent": "You have to implement action component for your Action",
+    "noRecordsInResource": "There are no records in this resource",
+    "noRecords": "No records",
+    "confirmDelete": "Do you really want to remove this item?",
+    "welcomeOnBoard_title": "Welcome on Board!",
+    "welcomeOnBoard_subtitle": "Now you are one of us! We prepared a few tips for you to start:",
+    "loginWelcome": "to AdminJS - the world's leading open-source auto-generated admin panel for your Node.js application that allows you to manage all your data in one place",
+    "addingResources_title": "Adding Resources",
+    "addingResources_subtitle": "How to add new resources to the sidebar",
+    "customizeResources_title": "Customize Resources",
+    "customizeResources_subtitle": "Defining behavior, adding properties and more...",
+    "customizeActions_title": "Customize Actions",
+    "customizeActions_subtitle": "Modifying existing actions and adding new",
+    "writeOwnComponents_title": "Write Components",
+    "writeOwnComponents_subtitle": "How to modify the Look and Feel of AdminJS",
+    "customDashboard_title": "Custom Dashboard",
+    "customDashboard_subtitle": "How to modify this view and add new Pages on the sidebar",
+    "roleBasedAccess_title": "Role-Based Access Control",
+    "roleBasedAccess_subtitle": "Create user roles and permissions in AdminJS",
+    "community_title": "Join the slack community",
+    "community_subtitle": "Talk with the creators of AdminJS and other AdminJS users",
+    "foundBug_title": "Found a Bug? need improvement?",
+    "foundBug_subtitle": "Raise an issue on our GitHub repo",
+    "needMoreSolutions_title": "Need more advanced solutions?",
+    "needMoreSolutions_subtitle": "We are here to provide you a beautiful UX/UI design and tailor made software based (not only) on AdminJS",
+    "invalidCredentials": "Wrong email and/or password",
+    "keyPlaceholder": "KEY",
+    "valuePlaceholder": "VALUE",
+    "initialKey": "Key-{{number}}",
+    "keyInUse": "Object keys must be unique",
+    "keyValuePropertyDefaultDescription": "All values are stored as text. Keys must be unique, duplicate keys will not be saved.",
+
+    "pageNotFound_title": "Page not found",
+    "pageNotFound_subtitle": "Page <strong>\"{{pageName}}\"</strong> does not exist",
+    "componentNotFound_title": "No component specified",
+    "componentNotFound_subtitle": "You have to specify component which will render this element"
+  }
+}
diff --git a/src/locale/es/translation.json b/src/locale/es/translation.json
new file mode 100644
index 000000000..8783fea1b
--- /dev/null
+++ b/src/locale/es/translation.json
@@ -0,0 +1,119 @@
+{
+  "actions": {
+    "new": "Crear nuevo",
+    "edit": "Editar",
+    "show": "Espectáculo",
+    "delete": "Borrar",
+    "bulkDelete": "Eliminar todos",
+    "list": "Lista"
+  },
+  "buttons": {
+    "save": "Ahorrar",
+    "addNewItem": "Agregar ítem nuevo",
+    "filter": "Filtrar",
+    "applyChanges": "Aplicar cambios",
+    "resetFilter": "Reiniciar",
+    "confirmRemovalMany": "Confirmar la eliminación de {{count}} registro",
+    "confirmRemovalMany_plural": "Confirmar la eliminación de {{count}} registros",
+    "logout": "Cerrar sesión",
+    "login": "Acceso",
+    "seeTheDocumentation": "Ver: <1>la documentación</1>",
+    "createFirstRecord": "Crear primer registro",
+    "cancel": "Cancelar",
+    "confirm": "Confirmar"
+  },
+  "components": {
+    "DropZone": {
+      "placeholder": "Suelte su archivo aquí, o haga clic para navegar",
+      "acceptedSize": "Tamaño máximo: {{maxSize}}",
+      "acceptedType": "Apoya: {{mimeTypes}}",
+      "unsupportedSize": "Archivo {{fileName}} es demasiado grande",
+      "unsupportedType": "Archivo {{fileName}} tiene un tipo no compatible: {{fileType}}"
+    },
+    "LanguageSelector": {
+      "availableLanguages": {
+        "de": "Alemán",
+        "en": "Inglés",
+        "es": "Español",
+        "it": "Italiano",
+        "pl": "Polaco",
+        "pt-BR": "Portugués (Brasil)",
+        "ua": "Ucranio",
+        "zh-CN": "Chino"
+      }
+    }
+  },
+  "labels": {
+    "navigation": "Navegación",
+    "pages": "Paginas",
+    "selectedRecords": "Seleccionado ({{selected}})",
+    "filters": "filtros",
+    "adminVersion": "Administración: {{version}}",
+    "appVersion": "aplicación: {{version}}",
+    "loginWelcome": "Bienvenido",
+    "dashboard": "Panel"
+  },
+  "properties": {
+    "length": "Longitud",
+    "from": "De",
+    "to": "A"
+  },
+  "resources": {},
+  "messages": {
+    "successfullyBulkDeleted": "eliminado con éxito {{count}} registro",
+    "successfullyBulkDeleted_plural": "eliminado con éxito {{count}} registros",
+    "successfullyDeleted": "Registro dado eliminado con éxito",
+    "successfullyUpdated": "Registro dado actualizado con éxito",
+    "thereWereValidationErrors": "Hay errores de validación. Compruébelos a continuación.",
+    "forbiddenError": "No puede realizar la acción {{actionName}} en {{resourceId}}",
+    "anyForbiddenError": "No puede realizar la acción dada",
+    "successfullyCreated": "Se creó con éxito un nuevo registro",
+    "bulkDeleteError": "Hubo un error al eliminar los registros. Consulte la consola para ver más información.",
+    "errorFetchingRecords": "Se produjo un error al obtener registros. Consulte la consola para ver más información.",
+    "errorFetchingRecord": "Hubo un error al obtener el registro. Consulta la consola para ver más información.",
+    "noRecordsSelected": "No ha seleccionado ningún registro",
+    "theseRecordsWillBeRemoved": "Se eliminará el siguiente registro",
+    "theseRecordsWillBeRemoved_plural": "Se eliminarán los siguientes registros",
+    "pickSomeFirstToRemove": "Para eliminar registros, primero debe elegirlos",
+    "error404Resource": "Recurso de identificación dada: {{resourceId}} no pudo ser encontrado",
+    "error404Action": "Recurso de identificación dada: {{resourceId}} no tiene una acción con nombre: {{actionName}} ¡o usted no está autorizado a usarlo!",
+    "error404Record": "Recurso de identificación dada: {{resourceId}} no tiene registro con id: {{recordId}} ¡o usted no está autorizado a usarlo!",
+    "seeConsoleForMore": "Consulte la consola de desarrollo para obtener más detalles...",
+    "noActionComponent": "Tienes que implementar el componente de acción para tu Acción",
+    "noRecordsInResource": "No hay registros en este recurso",
+    "noRecords": "No hay registros",
+    "confirmDelete": "¿Realmente desea eliminar este elemento?",
+    "welcomeOnBoard_title": "¡La bienvenida a bordo!",
+    "welcomeOnBoard_subtitle": "¡Ahora eres uno de nosotros! ",
+    "loginWelcome": "a AdminJS: el panel de administración generado automáticamente de código abierto líder en el mundo para su aplicación Node.js que le permite administrar todos sus datos en un solo lugar",
+    "addingResources_title": "Adición de recursos",
+    "addingResources_subtitle": "Cómo agregar nuevos recursos a la barra lateral",
+    "customizeResources_title": "Personalizar recursos",
+    "customizeResources_subtitle": "Definición de comportamiento, adición de propiedades y más...",
+    "customizeActions_title": "Personalizar acciones",
+    "customizeActions_subtitle": "Modificación de acciones existentes y adición de nuevas",
+    "writeOwnComponents_title": "Escribir componentes",
+    "writeOwnComponents_subtitle": "Cómo modificar la apariencia de AdminJS",
+    "customDashboard_title": "Tablero personalizado",
+    "customDashboard_subtitle": "Cómo modificar esta vista y agregar nuevas páginas en la barra lateral",
+    "roleBasedAccess_title": "Control de acceso basado en roles",
+    "roleBasedAccess_subtitle": "Crear roles de usuario y permisos en AdminJS",
+    "community_title": "Únete a la comunidad de holgura",
+    "community_subtitle": "Hable con los creadores de AdminJS y otros usuarios de AdminJS",
+    "foundBug_title": "¿Encontraste un error? ",
+    "foundBug_subtitle": "Plantear un problema en nuestro repositorio de GitHub",
+    "needMoreSolutions_title": "¿Necesita soluciones más avanzadas?",
+    "needMoreSolutions_subtitle": "Estamos aquí para brindarle un hermoso diseño de UX/UI y un software personalizado basado (no solo) en AdminJS",
+    "invalidCredentials": "Email y/o contraseña incorrectos",
+    "keyPlaceholder": "LLAVE",
+    "valuePlaceholder": "VALOR",
+    "initialKey": "Llave-{{number}}",
+    "keyInUse": "Las claves de objeto deben ser únicas.",
+    "keyValuePropertyDefaultDescription": "Todos los valores se almacenan como texto. ",
+
+    "pageNotFound_title": "Página no encontrada",
+    "pageNotFound_subtitle": "Página <strong>\"{{pageName}}\"</strong> no existe",
+    "componentNotFound_title": "Ningún componente especificado",
+    "componentNotFound_subtitle": "Tienes que especificar el componente que representará este elemento."
+  }
+}
diff --git a/src/locale/index.ts b/src/locale/index.ts
index 5f6f53682..4b85292ce 100644
--- a/src/locale/index.ts
+++ b/src/locale/index.ts
@@ -1,21 +1,24 @@
-import deLocale from './de'
-import enLocale from './en'
-import itLocale from './it'
-import ptBrLocale from './pt-br'
-import uaLocale from './ua'
-import zhCNLocale from './zh-cn'
-import plLocale from './pl'
+import type { LocaleTranslations } from './config'
+
+import deLocale from './de/translation.json'
+import enLocale from './en/translation.json'
+import esLocale from './es/translation.json'
+import itLocale from './it/translation.json'
+import plLocale from './pl/translation.json'
+import ptBrLocale from './pt-BR/translation.json'
+import uaLocale from './ua/translation.json'
+import zhCNLocale from './zh-CN/translation.json'
 
 export * from './config'
+export * from './default-config'
 
-export const locales = {
+export const locales: Record<string, LocaleTranslations> = {
   de: deLocale,
   en: enLocale,
+  es: esLocale,
   it: itLocale,
+  pl: plLocale,
   'pt-BR': ptBrLocale,
   ua: uaLocale,
   'zh-CN': zhCNLocale,
-  pl: plLocale,
 }
-
-export { uaLocale, enLocale, zhCNLocale, ptBrLocale, plLocale }
diff --git a/src/locale/it.ts b/src/locale/it.ts
deleted file mode 100644
index 1494b0d88..000000000
--- a/src/locale/it.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-/* spellchecker: disable */
-
-const translations = {
-  actions: {
-    new: 'Crea nuovo',
-    edit: 'Modifica',
-    show: 'Mostra',
-    delete: 'Elimina',
-    bulkDelete: 'Elimina selezionati',
-    list: 'Lista',
-  },
-  buttons: {
-    save: 'Salva',
-    addNewItem: 'Aggiungi nuovo elemento',
-    filter: 'Filtro',
-    applyChanges: 'Applica modifiche',
-    resetFilter: 'Resetta filtro',
-    confirmRemovalMany: 'Conferma la rimozione di  {{count}} elementi',
-    confirmRemovalMany_plural: 'Conferma la rimozione di  {{count}} elementi',
-    logout: 'Esci',
-    login: 'Accedi',
-    seeTheDocumentation: 'Vedi: <1>La documentazione</1>',
-    createFirstRecord: 'Crea il primo elemento',
-    cancel: 'Annulla',
-    confirm: 'Confermare',
-  },
-  components: {
-    DropZone: {
-      placeholder: 'Trascina qui il tuo file o fai clic per sfogliarlo',
-      acceptedSize: 'Dimensione massima: {{maxSize}}',
-      acceptedType: 'Supporta: {{mimeTypes}}',
-      unsupportedSize: 'Il file {{fileName}} è troppo grande',
-      unsupportedType: 'Il file {{fileName}} ha un tipo non supportato: {{fileType}}',
-    },
-  },
-  labels: {
-    navigation: 'Navigazione',
-    pages: 'Pagine',
-    selectedRecords: 'Selezionati ({{selected}})',
-    filters: 'Filtri',
-    adminVersion: 'Admin: {{version}}',
-    appVersion: 'App: {{version}}',
-    loginWelcome: 'Benvenuto',
-    dashboard: 'Dashboard',
-  },
-  properties: {
-    length: 'Lunghezza',
-    from: 'Da',
-    to: 'A',
-  },
-  resources: {},
-  messages: {
-    successfullyBulkDeleted: 'Rimossi con successo {{count}} Elementi',
-    successfullyBulkDeleted_plural: 'Rimossi con successo {{count}} Elementi',
-    successfullyDeleted: 'Elemento selezionato rimosso con successo',
-    successfullyUpdated: 'Elemento aggiornato rimosso con successo',
-    thereWereValidationErrors: 'Ci sono degli errori di validazione - Controllali sotto',
-    forbiddenError: 'Non puoi eseguire {{actionName}} su {{resourceId}}',
-    anyForbiddenError: 'Non puoi eseguire questa azione',
-    successfullyCreated: 'Nuovo elemento creato con successo',
-    bulkDeleteError: 'Si è verificato un errore durante la rimozione degli elementi, controlla la console per maggiori informazioni',
-    errorFetchingRecords: 'Si è verificato un errore durante la raccolta degli elementi, controlla la console per maggiori informazioni',
-    errorFetchingRecord: 'Si è verificato un errore durante la raccolta degli elementi, controlla la console per maggiori informazioni',
-    noRecordsSelected: 'Non hai selezionato nessun elemento',
-    theseRecordsWillBeRemoved: 'I seguenti elementi verranno rimossi',
-    theseRecordsWillBeRemoved_plural: 'I seguenti elementi verranno rimossi',
-    pickSomeFirstToRemove: 'Per rimuovere nuovi elementi, devi prima aggiungerne almeno uno',
-    error404Resource: 'La risorsa: {{resourceId}} Non può essere trovata',
-    error404Action: 'l\' azione: {{resourceId}} non ha un azione col nome di : {{actionName}} o non sei autorizzato ad usarla!',
-    error404Record: 'La risorsa: {{resourceId}} non ha un elemento: {{recordId}} o non sei autorizzato ad usarla!',
-    seeConsoleForMore: 'Guarda la console di sviluppo per maggiori dettagli...',
-    noActionComponent: 'Devi implementare un componente per la tua zione',
-    noRecordsInResource: 'Non ci sono elementi in questa risorsa',
-    noRecords: 'Nessun elemento',
-    confirmDelete: 'Sicuro di voler eleminare questo elemento?',
-    welcomeOnBoard_title: 'Benvenuto a bordo!',
-    welcomeOnBoard_subtitle: 'Sei ora uno di noi! Preparati per alcuni consigli per iniziare:',
-    loginWelcome: 'a Adminjs – il principale pannello di amministrazione open-source per la tua applicazione Node.js che ti consente di gestire tutti i tuoi dati in un unico luogo',
-    addingResources_title: 'Aggiungendo elementi',
-    addingResources_subtitle: 'Come aggiungere nuove risorse nella colonna laterale',
-    customizeResources_title: 'Personalizzare le risorse',
-    customizeResources_subtitle: 'Definire il comportamento, aggiungere propietà e altro...',
-    customizeActions_title: 'Personalizzare le azioni',
-    customizeActions_subtitle: 'Modificare azioni esistenti e crearne delle nuove',
-    writeOwnComponents_title: 'Scrivi componenti personalizzati',
-    writeOwnComponents_subtitle: 'Come modificare il look e il feel di Adminjs',
-    customDashboard_title: 'Dashboard personalizzata',
-    customDashboard_subtitle: 'Come modificare questa vista e aggiungere pagine in basso a sinistra',
-    roleBasedAccess_title: 'Accesso basato su ruoli',
-    roleBasedAccess_subtitle: 'Crea utenti e permessi su AdminJS',
-    community_title: 'Entra nella community di slack',
-    community_subtitle: 'Parla con i creatori di adminJS e altri utenti',
-    foundBug_title: 'Trovato un bug? Ti serve un implementazione?',
-    foundBug_subtitle: 'Apri una segnalazione sul nostro GitHub',
-    needMoreSolutions_title: 'Ti servono soluzioni più avanzate?',
-    needMoreSolutions_subtitle: 'Siamo qui per fortnirti una bella UI/UX e un software personalizzato (non solo) su AdminJS',
-    invalidCredentials: 'E-mail o password errati',
-  },
-}
-
-export default {
-  language: 'it',
-  translations,
-}
diff --git a/src/locale/it/translation.json b/src/locale/it/translation.json
new file mode 100644
index 000000000..d6e846b0a
--- /dev/null
+++ b/src/locale/it/translation.json
@@ -0,0 +1,114 @@
+{
+  "actions": {
+    "new": "Crea nuovo",
+    "edit": "Modifica",
+    "show": "Mostra",
+    "delete": "Elimina",
+    "bulkDelete": "Elimina selezionati",
+    "list": "Lista"
+  },
+  "buttons": {
+    "save": "Salva",
+    "addNewItem": "Aggiungi nuovo elemento",
+    "filter": "Filtro",
+    "applyChanges": "Applica modifiche",
+    "resetFilter": "Resetta filtro",
+    "confirmRemovalMany": "Conferma la rimozione di  {{count}} elementi",
+    "confirmRemovalMany_plural": "Conferma la rimozione di  {{count}} elementi",
+    "logout": "Esci",
+    "login": "Accedi",
+    "seeTheDocumentation": "Vedi: <1>La documentazione</1>",
+    "createFirstRecord": "Crea il primo elemento",
+    "cancel": "Annulla",
+    "confirm": "Confermare"
+  },
+  "components": {
+    "DropZone": {
+      "placeholder": "Trascina qui il tuo file o fai clic per sfogliarlo",
+      "acceptedSize": "Dimensione massima: {{maxSize}}",
+      "acceptedType": "Supporta: {{mimeTypes}}",
+      "unsupportedSize": "Il file {{fileName}} è troppo grande",
+      "unsupportedType": "Il file {{fileName}} ha un tipo non supportato: {{fileType}}"
+    },
+    "LanguageSelector": {
+      "availableLanguages": {
+        "de": "Tedesco",
+        "en": "Inglese",
+        "es": "spagnolo",
+        "it": "Italiano",
+        "pl": "Polacco",
+        "pt-BR": "Portoghese (Brasile)",
+        "ua": "ucraino",
+        "zh-CN": "Cinese"
+      }
+    }
+  },
+  "labels": {
+    "navigation": "Navigazione",
+    "pages": "Pagine",
+    "selectedRecords": "Selezionati ({{selected}})",
+    "filters": "Filtri",
+    "adminVersion": "Admin: {{version}}",
+    "appVersion": "App: {{version}}",
+    "loginWelcome": "Benvenuto",
+    "dashboard": "Dashboard"
+  },
+  "properties": {
+    "length": "Lunghezza",
+    "from": "Da",
+    "to": "A"
+  },
+  "resources": {},
+  "messages": {
+    "successfullyBulkDeleted": "Rimossi con successo {{count}} Elementi",
+    "successfullyBulkDeleted_plural": "Rimossi con successo {{count}} Elementi",
+    "successfullyDeleted": "Elemento selezionato rimosso con successo",
+    "successfullyUpdated": "Elemento aggiornato rimosso con successo",
+    "thereWereValidationErrors": "Ci sono degli errori di validazione - Controllali sotto",
+    "forbiddenError": "Non puoi eseguire {{actionName}} su {{resourceId}}",
+    "anyForbiddenError": "Non puoi eseguire questa azione",
+    "successfullyCreated": "Nuovo elemento creato con successo",
+    "bulkDeleteError": "Si è verificato un errore durante la rimozione degli elementi, controlla la console per maggiori informazioni",
+    "errorFetchingRecords": "Si è verificato un errore durante la raccolta degli elementi, controlla la console per maggiori informazioni",
+    "errorFetchingRecord": "Si è verificato un errore durante la raccolta degli elementi, controlla la console per maggiori informazioni",
+    "noRecordsSelected": "Non hai selezionato nessun elemento",
+    "theseRecordsWillBeRemoved": "I seguenti elementi verranno rimossi",
+    "theseRecordsWillBeRemoved_plural": "I seguenti elementi verranno rimossi",
+    "pickSomeFirstToRemove": "Per rimuovere nuovi elementi, devi prima aggiungerne almeno uno",
+    "error404Resource": "La risorsa: {{resourceId}} Non può essere trovata",
+    "error404Action": "l' azione: {{resourceId}} non ha un azione col nome di : {{actionName}} o non sei autorizzato ad usarla!",
+    "error404Record": "La risorsa: {{resourceId}} non ha un elemento: {{recordId}} o non sei autorizzato ad usarla!",
+    "seeConsoleForMore": "Guarda la console di sviluppo per maggiori dettagli...",
+    "noActionComponent": "Devi implementare un componente per la tua zione",
+    "noRecordsInResource": "Non ci sono elementi in questa risorsa",
+    "noRecords": "Nessun elemento",
+    "confirmDelete": "Sicuro di voler eleminare questo elemento?",
+    "welcomeOnBoard_title": "Benvenuto a bordo!",
+    "welcomeOnBoard_subtitle": "Sei ora uno di noi! Preparati per alcuni consigli per iniziare:",
+    "loginWelcome": "a Adminjs – il principale pannello di amministrazione open-source per la tua applicazione Node.js che ti consente di gestire tutti i tuoi dati in un unico luogo",
+    "addingResources_title": "Aggiungendo elementi",
+    "addingResources_subtitle": "Come aggiungere nuove risorse nella colonna laterale",
+    "customizeResources_title": "Personalizzare le risorse",
+    "customizeResources_subtitle": "Definire il comportamento, aggiungere propietà e altro...",
+    "customizeActions_title": "Personalizzare le azioni",
+    "customizeActions_subtitle": "Modificare azioni esistenti e crearne delle nuove",
+    "writeOwnComponents_title": "Scrivi componenti personalizzati",
+    "writeOwnComponents_subtitle": "Come modificare il look e il feel di Adminjs",
+    "customDashboard_title": "Dashboard personalizzata",
+    "customDashboard_subtitle": "Come modificare questa vista e aggiungere pagine in basso a sinistra",
+    "roleBasedAccess_title": "Accesso basato su ruoli",
+    "roleBasedAccess_subtitle": "Crea utenti e permessi su AdminJS",
+    "community_title": "Entra nella community di slack",
+    "community_subtitle": "Parla con i creatori di adminJS e altri utenti",
+    "foundBug_title": "Trovato un bug? Ti serve un implementazione?",
+    "foundBug_subtitle": "Apri una segnalazione sul nostro GitHub",
+    "needMoreSolutions_title": "Ti servono soluzioni più avanzate?",
+    "needMoreSolutions_subtitle": "Siamo qui per fortnirti una bella UI/UX e un software personalizzato (non solo) su AdminJS",
+    "invalidCredentials": "E-mail o password errati",
+
+    "pageNotFound_title": "pagina non trovata",
+    "pageNotFound_subtitle": "Pagina <strong>\"{{pageName}}\"</strong> non esiste",
+    "componentNotFound_title": "Nessun componente specificato",
+    "componentNotFound_subtitle": "Devi specificare il componente che renderà questo elemento"
+  }
+}
diff --git a/src/locale/pl.ts b/src/locale/pl.ts
deleted file mode 100644
index 6d424000c..000000000
--- a/src/locale/pl.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-/* spellchecker: disable */
-
-const translations = {
-  actions: {
-    new: 'Nowy',
-    edit: 'Edycja',
-    show: 'Podgląd',
-    delete: 'Usuń',
-    bulkDelete: 'Usuń wszystko',
-    list: 'Lista',
-  },
-  buttons: {
-    save: 'Zapisz',
-    addNewItem: 'Nowy',
-    filter: 'Filtr',
-    applyChanges: 'Zastosuj zmiany',
-    resetFilter: 'Wyczyść',
-    confirmRemovalMany: 'Potwierdź usunięcie {{count}} pozycji',
-    confirmRemovalMany_plural: 'Potwierdź usunięcie {{count}} pozycji',
-    logout: 'Wyloguj',
-    login: 'Zaloguj',
-    seeTheDocumentation: 'Zajrzyj: <1>do dokumentacji</1>',
-    createFirstRecord: 'Utwórz pierwszy rekord',
-    cancel: 'Anuluj',
-    confirm: 'Potwierdź',
-  },
-
-  labels: {
-    navigation: 'Nawigacja',
-    pages: 'Strony',
-    selectedRecords: 'Wybrano ({{selected}})',
-    filters: 'Filtry',
-    adminVersion: 'Admin: {{version}}',
-    appVersion: 'Aplikacja: {{version}}',
-    loginWelcome: 'Witaj',
-  },
-  properties: {
-    length: 'Długość',
-    from: 'Od',
-    to: 'Do',
-  },
-  components: {
-    DropZone: {
-      placeholder: 'Przeciągnij plik tutaj lub kliknij aby wybrać',
-      acceptedSize: 'Maks. rozmiar: {{maxSize}}',
-      acceptedType: 'Dozwolone pliki: {{mimeTypes}}',
-      unsupportedSize: 'Plik {{fileName}} jest zbyt duży',
-      unsupportedType: 'Plik {{fileName}} jest niedozwolonego typu: {{fileType}}',
-    },
-  },
-  resources: {},
-  messages: {
-    successfullyBulkDeleted: 'Poprawnie usunięto {{count}} rekordów',
-    successfullyBulkDeleted_plural: 'Poprawnie usunięto {{count}} rekordów',
-    successfullyDeleted: 'Poprawnie usunięto wybrany rekord',
-    successfullyUpdated: 'Poprawnie zaktualizowano wybrany rekord',
-    thereWereValidationErrors:
-      'Błędy walidacji - sprawdź poniżej',
-    forbiddenError:
-      'Nie masz uprawnień do akcji {{actionName}} na {{resourceId}}',
-    anyForbiddenError: 'Nie masz uprawnień tej akcji.',
-    successfullyCreated: 'Poprawnie utworzono nowy rekord',
-    bulkDeleteError:
-      'Wystąpiły błędy podczas usuwania rekordów. Przejrzyj wpisy w konsoli aby zobaczyć szczegóły.',
-    errorFetchingRecords:
-      'Wystąpiły błędy podczas pobierania danych. Przejrzyj wpisy w konsoli aby zobaczyć szczegóły.',
-    errorFetchingRecord:
-      'Wystąpiły błędy podczas pobierania rekordu. Przejrzyj wpisy w konsoli aby zobaczyć szczegóły.',
-    noRecordsSelected: 'NIe zostały wybrane żadne rekordy.',
-    theseRecordsWillBeRemoved: 'Wybrany rekord zostanie usunięty.',
-    theseRecordsWillBeRemoved_plural: 'Wybrane rekordy zostanią usunięte.',
-    pickSomeFirstToRemove:
-      'Aby usunąć rekordy należy je najpierw wybrać',
-    error404Resource: 'Nie można znaleźć zasobu o id: {{resourceId}}',
-    error404Action:
-      'Do zasobu o id: {{resourceId}} nie została przypisana akcja {{actionName}} lub nie masz uprawnień do jej użycia.',
-    error404Record:
-      'Zasób o id: {{resourceId}} nie zaiera rekordu o id: {{recordId}} lub nie masz do niego dostępu.',
-    seeConsoleForMore: 'Przejrzyj zapisy w konsoli aby zobaczyć więcej szczególów ...',
-    noActionComponent: 'Musisz zaiplementować komponent dla twojej akcji.',
-    noRecordsInResource: 'Ten zasób nie posiada rekordów.',
-    noRecords: 'Brak danych.',
-    confirmDelete: 'Czy potwierdzasz usunięcie tej pozycji?',
-    welcomeOnBoard_title: 'Witamy na pokładzie!',
-    welcomeOnBoard_subtitle:
-      'Od teraz jesteś jednym z nas! Przygotowaliśmy dla Ciebie kilka wskazówek:',
-    loginWelcome:
-      'AdminJS - najlepszy admin framework dla aplikacji Node.js , oparty na React.',
-    addingResources_title: 'Dodawanie zasobów',
-    addingResources_subtitle: 'Jak dodać nowe zasoby do menu bocznego',
-    customizeResources_title: 'Indywidualne zasoby',
-    customizeResources_subtitle:
-      'Definiowanie sposobu zachowania, dodawanie właściwości i więcej...',
-    customizeActions_title: 'Indywidualne akcje',
-    customizeActions_subtitle: 'Modyfikowanie istniejących akcji i tworzenie nowych',
-    writeOwnComponents_title: 'Tworzenie nowych komponentów',
-    writeOwnComponents_subtitle: 'Jak zmodyfikować wygląd i zachowanie AdminJS?',
-    customDashboard_title: 'Indywidualny panel sterowania',
-    customDashboard_subtitle:
-      'Jak zmodyfikować widok i dodać nowe strony do panelu bocznego',
-    roleBasedAccess_title: 'Kontrola dostępu oparta o role',
-    roleBasedAccess_subtitle: 'Tworzenie roli użytkownika i uprawnień w AdminJS',
-    community_title: 'Dołącz do zespołu na Slack.',
-    community_subtitle:
-      'Wymieniaj informacje z twórcami AdminJS i innymi użytkownikami.',
-    foundBug_title: 'Znalazłeś błąd? Potrzebujesz nowych funkcji?',
-    foundBug_subtitle: 'Zgłoś problem w repozytoriun GitHub.',
-    needMoreSolutions_title: 'Szukasz innych rozwiązań?',
-    needMoreSolutions_subtitle:
-      'Jesteśmy tutaj, aby dostarczyć Ci wpaniały projekt UX/UI i dostosować do Twoich potrzeb panel AdminJS',
-    invalidCredentials: 'Błędny email i/lub hasło',
-  },
-}
-
-export default {
-  language: 'pl',
-  translations,
-}
diff --git a/src/locale/pl/translation.json b/src/locale/pl/translation.json
new file mode 100644
index 000000000..94b2fe9ab
--- /dev/null
+++ b/src/locale/pl/translation.json
@@ -0,0 +1,114 @@
+{
+  "actions": {
+    "new": "Nowy",
+    "edit": "Edycja",
+    "show": "Podgląd",
+    "delete": "Usuń",
+    "bulkDelete": "Usuń wszystko",
+    "list": "Lista"
+  },
+  "buttons": {
+    "save": "Zapisz",
+    "addNewItem": "Nowy",
+    "filter": "Filtr",
+    "applyChanges": "Zastosuj zmiany",
+    "resetFilter": "Wyczyść",
+    "confirmRemovalMany": "Potwierdź usunięcie {{count}} pozycji",
+    "confirmRemovalMany_plural": "Potwierdź usunięcie {{count}} pozycji",
+    "logout": "Wyloguj",
+    "login": "Zaloguj",
+    "seeTheDocumentation": "Zajrzyj: <1>do dokumentacji</1>",
+    "createFirstRecord": "Utwórz pierwszy rekord",
+    "cancel": "Anuluj",
+    "confirm": "Potwierdź"
+  },
+
+  "labels": {
+    "navigation": "Nawigacja",
+    "pages": "Strony",
+    "selectedRecords": "Wybrano ({{selected}})",
+    "filters": "Filtry",
+    "adminVersion": "Admin: {{version}}",
+    "appVersion": "Aplikacja: {{version}}",
+    "loginWelcome": "Witaj"
+  },
+  "properties": {
+    "length": "Długość",
+    "from": "Od",
+    "to": "Do"
+  },
+  "components": {
+    "DropZone": {
+      "placeholder": "Przeciągnij plik tutaj lub kliknij aby wybrać",
+      "acceptedSize": "Maks. rozmiar: {{maxSize}}",
+      "acceptedType": "Dozwolone pliki: {{mimeTypes}}",
+      "unsupportedSize": "Plik {{fileName}} jest zbyt duży",
+      "unsupportedType": "Plik {{fileName}} jest niedozwolonego typu: {{fileType}}"
+    },
+    "LanguageSelector": {
+      "availableLanguages": {
+        "de": "Niemiecki",
+        "en": "Angielski",
+        "es": "Hiszpański",
+        "it": "Włoski",
+        "pl": "Polski",
+        "pt-BR": "Portugalski (Brazylia)",
+        "ua": "Ukraiński",
+        "zh-CN": "chiński"
+      }
+    }
+  },
+  "resources": {},
+  "messages": {
+    "successfullyBulkDeleted": "Poprawnie usunięto {{count}} rekordów",
+    "successfullyBulkDeleted_plural": "Poprawnie usunięto {{count}} rekordów",
+    "successfullyDeleted": "Poprawnie usunięto wybrany rekord",
+    "successfullyUpdated": "Poprawnie zaktualizowano wybrany rekord",
+    "thereWereValidationErrors": "Błędy walidacji - sprawdź poniżej",
+    "forbiddenError": "Nie masz uprawnień do akcji {{actionName}} na {{resourceId}}",
+    "anyForbiddenError": "Nie masz uprawnień tej akcji.",
+    "successfullyCreated": "Poprawnie utworzono nowy rekord",
+    "bulkDeleteError": "Wystąpiły błędy podczas usuwania rekordów. Przejrzyj wpisy w konsoli aby zobaczyć szczegóły.",
+    "errorFetchingRecords": "Wystąpiły błędy podczas pobierania danych. Przejrzyj wpisy w konsoli aby zobaczyć szczegóły.",
+    "errorFetchingRecord": "Wystąpiły błędy podczas pobierania rekordu. Przejrzyj wpisy w konsoli aby zobaczyć szczegóły.",
+    "noRecordsSelected": "NIe zostały wybrane żadne rekordy.",
+    "theseRecordsWillBeRemoved": "Wybrany rekord zostanie usunięty.",
+    "theseRecordsWillBeRemoved_plural": "Wybrane rekordy zostanią usunięte.",
+    "pickSomeFirstToRemove": "Aby usunąć rekordy należy je najpierw wybrać",
+    "error404Resource": "Nie można znaleźć zasobu o id: {{resourceId}}",
+    "error404Action": "Do zasobu o id: {{resourceId}} nie została przypisana akcja {{actionName}} lub nie masz uprawnień do jej użycia.",
+    "error404Record": "Zasób o id: {{resourceId}} nie zaiera rekordu o id: {{recordId}} lub nie masz do niego dostępu.",
+    "seeConsoleForMore": "Przejrzyj zapisy w konsoli aby zobaczyć więcej szczególów ...",
+    "noActionComponent": "Musisz zaiplementować komponent dla twojej akcji.",
+    "noRecordsInResource": "Ten zasób nie posiada rekordów.",
+    "noRecords": "Brak danych.",
+    "confirmDelete": "Czy potwierdzasz usunięcie tej pozycji?",
+    "welcomeOnBoard_title": "Witamy na pokładzie!",
+    "welcomeOnBoard_subtitle": "Od teraz jesteś jednym z nas! Przygotowaliśmy dla Ciebie kilka wskazówek:",
+    "loginWelcome": "AdminJS - najlepszy admin framework dla aplikacji Node.js , oparty na React.",
+    "addingResources_title": "Dodawanie zasobów",
+    "addingResources_subtitle": "Jak dodać nowe zasoby do menu bocznego",
+    "customizeResources_title": "Indywidualne zasoby",
+    "customizeResources_subtitle": "Definiowanie sposobu zachowania, dodawanie właściwości i więcej...",
+    "customizeActions_title": "Indywidualne akcje",
+    "customizeActions_subtitle": "Modyfikowanie istniejących akcji i tworzenie nowych",
+    "writeOwnComponents_title": "Tworzenie nowych komponentów",
+    "writeOwnComponents_subtitle": "Jak zmodyfikować wygląd i zachowanie AdminJS?",
+    "customDashboard_title": "Indywidualny panel sterowania",
+    "customDashboard_subtitle": "Jak zmodyfikować widok i dodać nowe strony do panelu bocznego",
+    "roleBasedAccess_title": "Kontrola dostępu oparta o role",
+    "roleBasedAccess_subtitle": "Tworzenie roli użytkownika i uprawnień w AdminJS",
+    "community_title": "Dołącz do zespołu na Slack.",
+    "community_subtitle": "Wymieniaj informacje z twórcami AdminJS i innymi użytkownikami.",
+    "foundBug_title": "Znalazłeś błąd? Potrzebujesz nowych funkcji?",
+    "foundBug_subtitle": "Zgłoś problem w repozytoriun GitHub.",
+    "needMoreSolutions_title": "Szukasz innych rozwiązań?",
+    "needMoreSolutions_subtitle": "Jesteśmy tutaj, aby dostarczyć Ci wpaniały projekt UX/UI i dostosować do Twoich potrzeb panel AdminJS",
+    "invalidCredentials": "Błędny email i/lub hasło",
+
+    "pageNotFound_title": "Strona nie znaleziona",
+    "pageNotFound_subtitle": "Strona <strong>\"{{pageName}}\"</strong> nie istnieje",
+    "componentNotFound_title": "Nie określono komponentu",
+    "componentNotFound_subtitle": "Musisz określić komponent, który wyrenderuje ten element"
+  }
+}
diff --git a/src/locale/pt-BR/translation.json b/src/locale/pt-BR/translation.json
new file mode 100644
index 000000000..952496a0b
--- /dev/null
+++ b/src/locale/pt-BR/translation.json
@@ -0,0 +1,112 @@
+{
+  "actions": {
+    "new": "Criar novo(a)",
+    "edit": "Editar",
+    "show": "Exibir",
+    "delete": "Excluir",
+    "bulkDelete": "Excluir tudo",
+    "list": "Listar"
+  },
+  "buttons": {
+    "save": "Salvar",
+    "addNewItem": "Adicionar Novo Item",
+    "filter": "Filtrar",
+    "applyChanges": "Aplicar mudanças",
+    "resetFilter": "Redefinir",
+    "confirmRemovalMany": "Confirma a remoção de {{count}} registro",
+    "confirmRemovalMany_plural": "Confirma a remoção de {{count}} registros",
+    "logout": "Sair",
+    "login": "Entrar",
+    "seeTheDocumentation": "Ver: <1>a documentação</1>",
+    "createFirstRecord": "Criar Primeiro Registro"
+  },
+  "components": {
+    "DropZone": {
+      "placeholder": "Solte seu arquivo aqui ou clique para navegar",
+      "acceptedSize": "Tamanho máximo: {{maxSize}}",
+      "acceptedType": "Suporta: {{mimeTypes}}",
+      "unsupportedSize": "O arquivo {{fileName}} é muito grande",
+      "unsupportedType": "O arquivo {{fileName}} tem um tipo não compatível: {{fileType}}"
+    },
+    "LanguageSelector": {
+      "availableLanguages": {
+        "de": "Alemão",
+        "en": "Inglês",
+        "es": "Espanhol",
+        "it": "Italiano",
+        "pl": "Polonês",
+        "pt-BR": "Português (Brasil)",
+        "ua": "Ucraniano",
+        "zh-CN": "Chinês"
+      }
+    }
+  },
+  "labels": {
+    "navigation": "Navegação",
+    "pages": "Páginas",
+    "selectedRecords": "Selecionado ({{selected}})",
+    "filters": "Filtros",
+    "adminVersion": "Admin: {{version}}",
+    "appVersion": "App: {{version}}",
+    "loginWelcome": "Bem-vindo",
+    "dashboard": "Dashboard"
+  },
+  "properties": {
+    "length": "Tamanho",
+    "from": "De",
+    "to": "Até"
+  },
+  "resources": {},
+  "messages": {
+    "successfullyBulkDeleted": "{{count}} registro removido com sucesso",
+    "successfullyBulkDeleted_plural": "{{count}} registros removidos com sucesso",
+    "successfullyDeleted": "Registro excluído com sucesso",
+    "successfullyUpdated": "Registro atualizado com sucesso",
+    "thereWereValidationErrors": "Existem erros de validação - confira-os abaixo",
+    "forbiddenError": "Você não pode executar a ação {{actionName}} em {{resourceId}}",
+    "anyForbiddenError": "Você não pode executar a ação solicitada",
+    "successfullyCreated": "Novo registro criado com sucesso",
+    "bulkDeleteError": "Houve um erro ao excluir os registros. Verifique os logs para mais informações",
+    "errorFetchingRecords": "Houve um erro ao obter os registros. Verifique os logs para mais informações",
+    "errorFetchingRecord": "Houve um erro ao obter o registro, Verifique os logs para mais informações",
+    "noRecordsSelected": "Você não selecionou nenhum registro",
+    "theseRecordsWillBeRemoved": "O registro a seguir será excluído",
+    "theseRecordsWillBeRemoved_plural": "Os registros a seguir serão excluídos",
+    "pickSomeFirstToRemove": "Para remover registros você precisa selecioná-los primeiro",
+    "error404Resource": "Recurso indentificado pelo id: {{resourceId}} não pôde ser encontrado",
+    "error404Action": "Recurso indentificado pelo id: {{resourceId}} não possui uma ação com nome: {{actionName}} ou você não está autorizado a usá-la!",
+    "error404Record": "Recurso indentificado pelo id: {{resourceId}} não possui um registro com id: {{recordId}} ou você não está autorizado a acessá-lo!",
+    "seeConsoleForMore": "Veja o console de desenvolvimento para mais detalhes...",
+    "noActionComponent": "Você precisa implementar componente de ação para a sua Ação",
+    "noRecordsInResource": "Não existem registros neste recurso",
+    "noRecords": "Nenhum registro",
+    "confirmDelete": "Você tem certeza que deseja remover este item? Essa ação é irreversível",
+    "welcomeOnBoard_title": "Bem-vindo à bordo!",
+    "welcomeOnBoard_subtitle": "Agora você é um de nós! Preparamos algumas dicas para você começar:",
+    "loginWelcome": "Ao AdminJS - o melhor framework admin para aplicações Node.js, baseado em React.",
+    "addingResources_title": "Adicionando Recursos",
+    "addingResources_subtitle": "Como adicionar novos recursos à barra lateral",
+    "customizeResources_title": "Personalizar Recursos",
+    "customizeResources_subtitle": "Definindo comportamento, adicionando propriedades e mais...",
+    "customizeActions_title": "Personalizar Ações",
+    "customizeActions_subtitle": "Modificar ações existentes e adicionar novas",
+    "writeOwnComponents_title": "Escrever Componentes",
+    "writeOwnComponents_subtitle": "Como modificar o visual do AdminJS",
+    "customDashboard_title": "Dashboard Personalizado",
+    "customDashboard_subtitle": "Como modificar esta página e adicionar novas páginas à barra lateral",
+    "roleBasedAccess_title": "Controle de Acesso Baseado em Perfil",
+    "roleBasedAccess_subtitle": "Criar perfis de usuário e permissões no AdminJS",
+    "community_title": "Junte-se à comunidade slack",
+    "community_subtitle": "Fale com os criadores do AdminJS e outros usuários do AdminJS",
+    "foundBug_title": "Encontrou um Bug? Precisa de alguma melhoria?",
+    "foundBug_subtitle": "Levante um issue em nosso repositório no GitHub",
+    "needMoreSolutions_title": "Precisa de mais soluções avançadas?",
+    "needMoreSolutions_subtitle": "Estamos aqui para te entregar um belo desenho de UX/UI e software feito sob medida baseado (não apenas) no AdminJS",
+    "invalidCredentials": "Nome de usuário e/ou senha incorretos",
+
+    "pageNotFound_title": "Página não encontrada",
+    "pageNotFound_subtitle": "Página <strong>\"{{pageName}}\"</strong> não existe",
+    "componentNotFound_title": "Nenhum componente especificado",
+    "componentNotFound_subtitle": "Você tem que especificar o componente que renderizará este elemento"
+  }
+}
diff --git a/src/locale/pt-br.ts b/src/locale/pt-br.ts
deleted file mode 100644
index 74a1221a7..000000000
--- a/src/locale/pt-br.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-/* spellchecker: disable */
-
-const translations = {
-  actions: {
-    new: 'Criar novo(a)',
-    edit: 'Editar',
-    show: 'Exibir',
-    delete: 'Excluir',
-    bulkDelete: 'Excluir tudo',
-    list: 'Listar',
-  },
-  buttons: {
-    save: 'Salvar',
-    addNewItem: 'Adicionar Novo Item',
-    filter: 'Filtrar',
-    applyChanges: 'Aplicar mudanças',
-    resetFilter: 'Redefinir',
-    confirmRemovalMany: 'Confirma a remoção de {{count}} registro',
-    confirmRemovalMany_plural: 'Confirma a remoção de {{count}} registros',
-    logout: 'Sair',
-    login: 'Entrar',
-    seeTheDocumentation: 'Ver: <1>a documentação</1>',
-    createFirstRecord: 'Criar Primeiro Registro',
-  },
-  components: {
-    DropZone: {
-      placeholder: 'Solte seu arquivo aqui ou clique para navegar',
-      acceptedSize: 'Tamanho máximo: {{maxSize}}',
-      acceptedType: 'Suporta: {{mimeTypes}}',
-      unsupportedSize: 'O arquivo {{fileName}} é muito grande',
-      unsupportedType: 'O arquivo {{fileName}} tem um tipo não compatível: {{fileType}}',
-    },
-  },
-  labels: {
-    navigation: 'Navegação',
-    pages: 'Páginas',
-    selectedRecords: 'Selecionado ({{selected}})',
-    filters: 'Filtros',
-    adminVersion: 'Admin: {{version}}',
-    appVersion: 'App: {{version}}',
-    loginWelcome: 'Bem-vindo',
-    dashboard: 'Dashboard',
-  },
-  properties: {
-    length: 'Tamanho',
-    from: 'De',
-    to: 'Até',
-  },
-  resources: {},
-  messages: {
-    successfullyBulkDeleted: '{{count}} registro removido com sucesso',
-    successfullyBulkDeleted_plural: '{{count}} registros removidos com sucesso',
-    successfullyDeleted: 'Registro excluído com sucesso',
-    successfullyUpdated: 'Registro atualizado com sucesso',
-    thereWereValidationErrors: 'Existem erros de validação - confira-os abaixo',
-    forbiddenError: 'Você não pode executar a ação {{actionName}} em {{resourceId}}',
-    anyForbiddenError: 'Você não pode executar a ação solicitada',
-    successfullyCreated: 'Novo registro criado com sucesso',
-    bulkDeleteError: 'Houve um erro ao excluir os registros. Verifique os logs para mais informações',
-    errorFetchingRecords: 'Houve um erro ao obter os registros. Verifique os logs para mais informações',
-    errorFetchingRecord: 'Houve um erro ao obter o registro, Verifique os logs para mais informações',
-    noRecordsSelected: 'Você não selecionou nenhum registro',
-    theseRecordsWillBeRemoved: 'O registro a seguir será excluído',
-    theseRecordsWillBeRemoved_plural: 'Os registros a seguir serão excluídos',
-    pickSomeFirstToRemove: 'Para remover registros você precisa selecioná-los primeiro',
-    error404Resource: 'Recurso indentificado pelo id: {{resourceId}} não pôde ser encontrado',
-    error404Action: 'Recurso indentificado pelo id: {{resourceId}} não possui uma ação com nome: {{actionName}} ou você não está autorizado a usá-la!',
-    error404Record: 'Recurso indentificado pelo id: {{resourceId}} não possui um registro com id: {{recordId}} ou você não está autorizado a acessá-lo!',
-    seeConsoleForMore: 'Veja o console de desenvolvimento para mais detalhes...',
-    noActionComponent: 'Você precisa implementar componente de ação para a sua Ação',
-    noRecordsInResource: 'Não existem registros neste recurso',
-    noRecords: 'Nenhum registro',
-    confirmDelete: 'Você tem certeza que deseja remover este item? Essa ação é irreversível',
-    welcomeOnBoard_title: 'Bem-vindo à bordo!',
-    welcomeOnBoard_subtitle: 'Agora você é um de nós! Preparamos algumas dicas para você começar:',
-    loginWelcome: 'Ao AdminJS - o melhor framework admin para aplicações Node.js, baseado em React.',
-    addingResources_title: 'Adicionando Recursos',
-    addingResources_subtitle: 'Como adicionar novos recursos à barra lateral',
-    customizeResources_title: 'Personalizar Recursos',
-    customizeResources_subtitle: 'Definindo comportamento, adicionando propriedades e mais...',
-    customizeActions_title: 'Personalizar Ações',
-    customizeActions_subtitle: 'Modificar ações existentes e adicionar novas',
-    writeOwnComponents_title: 'Escrever Componentes',
-    writeOwnComponents_subtitle: 'Como modificar o visual do AdminJS',
-    customDashboard_title: 'Dashboard Personalizado',
-    customDashboard_subtitle: 'Como modificar esta página e adicionar novas páginas à barra lateral',
-    roleBasedAccess_title: 'Controle de Acesso Baseado em Perfil',
-    roleBasedAccess_subtitle: 'Criar perfis de usuário e permissões no AdminJS',
-    community_title: 'Junte-se à comunidade slack',
-    community_subtitle: 'Fale com os criadores do AdminJS e outros usuários do AdminJS',
-    foundBug_title: 'Encontrou um Bug? Precisa de alguma melhoria?',
-    foundBug_subtitle: 'Levante um issue em nosso repositório no GitHub',
-    needMoreSolutions_title: 'Precisa de mais soluções avançadas?',
-    needMoreSolutions_subtitle: 'Estamos aqui para te entregar um belo desenho de UX/UI e software feito sob medida baseado (não apenas) no AdminJS',
-    invalidCredentials: 'Nome de usuário e/ou senha incorretos',
-  },
-}
-
-export default {
-  language: 'pt-BR',
-  translations,
-}
diff --git a/src/locale/ua.ts b/src/locale/ua.ts
deleted file mode 100644
index 062a41ee6..000000000
--- a/src/locale/ua.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/* spellchecker: disable */
-
-const translations = {
-  actions: {
-    new: 'Створити новий',
-    edit: 'Редагувати',
-    show: 'Показати',
-    delete: 'Видалити',
-    bulkDelete: 'Видалити всі',
-    list: 'Список',
-  },
-  buttons: {
-    save: 'Зберегти',
-    addNewItem: 'Додати новий елемент',
-    filter: 'Фільтр',
-    applyChanges: 'Застосувати зміни',
-    resetFilter: 'Очистити фільтри',
-    confirmRemovalMany: 'Підтвердити видалення {{count}} запису',
-    confirmRemovalMany_plural: 'Підтвердити видалення {{count}} записів',
-    logout: 'Вийти',
-    login: 'Увійти',
-    seeTheDocumentation: 'Дивіться: <1>документація</1>',
-    createFirstRecord: 'Створити перший запис',
-    contactUs: 'Зв\'язатися з нами',
-    cancel: 'Cкасувати',
-    confirm: 'Підтвердити',
-  },
-  components: {
-    DropZone: {
-      placeholder: 'Перетягніть свій файл сюди або натисніть, щоб переглянути',
-      acceptedSize: 'Максимальний розмір: {{maxSize}}',
-      acceptedType: 'Підтримує: {{mimeTypes}}',
-      unsupportedSize: 'Файл {{fileName}} завеликий',
-      unsupportedType: 'Тип файлу {{fileName}} не підтримується: {{fileType}}',
-    },
-  },
-  labels: {
-    navigation: 'Навігація',
-    pages: 'Сторінки',
-    selectedRecords: 'Вибрано ({{selected}})',
-    filters: 'Фільтри',
-    adminVersion: 'Версія AdminJS: {{version}}',
-    appVersion: 'Версія додатку: {{version}}',
-    loginWelcome: 'Ласкаво просимо',
-    dashboard: 'Панель приладів',
-  },
-  properties: {
-    length: 'Довжина',
-    from: 'Від',
-    to: 'До',
-    email: 'Електронна пошта',
-    password: 'Пароль',
-  },
-  resources: {},
-  messages: {
-    successfullyBulkDeleted: 'Успішно видалено {{count}} запис',
-    successfullyBulkDeleted_plural: 'Успішно видалено {{count}} записів',
-    successfullyDeleted: 'Успішно видалено вибраний запис',
-    successfullyUpdated: 'Успішно оновлено вибраний запис',
-    thereWereValidationErrors: 'Є помилки валідації – перегляньте їх нижче',
-    forbiddenError: 'Ви не можете виконувати дії {{actionName}} на {{resourceId}}',
-    anyForbiddenError: 'Ви не можете виконати задану дію',
-    successfullyCreated: 'Успішно створено новий запис',
-    bulkDeleteError: 'Під час видалення записів сталася помилка. Перейдіть до консолі, щоб переглянути додаткову інформацію',
-    errorFetchingRecords: 'Під час отримання записів сталася помилка. Перейдіть до консолі, щоб переглянути додаткову інформацію',
-    errorFetchingRecord: 'Під час отримання запису сталася помилка. Перейдіть до консолі, щоб переглянути додаткову інформацію',
-    noRecordsSelected: 'Ви не вибрали жодного запису',
-    theseRecordsWillBeRemoved: 'Наступний запис буде видалено',
-    theseRecordsWillBeRemoved_plural: 'Наступні записи буде видалено',
-    pickSomeFirstToRemove: 'Щоб видалити записи, спочатку їх потрібно вибрати',
-    error404Resource: 'Ресурс із зазначеним ID: {{resourceId}} не знайдено',
-    error404Action: 'Ресурс із зазначеним ID: {{resourceId}} не має дії з назвою: {{actionName}} або Ви не маєте права використовувати його!',
-    error404Record: 'Ресурс із зазначеним ID: {{resourceId}} не має запису з ID: {{recordId}} або Ви не маєте права використовувати його!',
-    seeConsoleForMore: 'Дивіться консоль розробки, щоб дізнатися більше...',
-    noActionComponent: 'Ви повинні заімплементувати ActionComponent для своєї дії',
-    noRecordsInResource: 'У цьому ресурсі немає записів',
-    noRecords: 'Немає записів',
-    confirmDelete: 'Ви дійсно хочете видалити цей елемент?',
-    welcomeOnBoard_title: 'Ласкаво просимо на борт!',
-    welcomeOnBoard_subtitle: 'Тепер Ви один із нас! Ми підготували для Вас кілька порад для початку:',
-    loginWelcome: 'до AdminJS - провідної адміністраційної панелі з відкритим кодом для програм Node.js, яка дозволяє керувати всіма своїми даними в одному місці',
-    addingResources_title: 'Додавання ресурсів',
-    addingResources_subtitle: 'Як додати нові ресурси до бічної панелі',
-    customizeResources_title: 'Налаштування ресурсів',
-    customizeResources_subtitle: 'Визначення поведінки, додавання властивостей тощо...',
-    customizeActions_title: 'Налаштування дій',
-    customizeActions_subtitle: 'Змінення існуючих дій і додавання нових',
-    writeOwnComponents_title: 'Написання компонентів',
-    writeOwnComponents_subtitle: 'Як змінити зовнішній вигляд AdminJS',
-    customDashboard_title: 'Панелі приладів',
-    customDashboard_subtitle: 'Як змінити цей екран та додати нові сторінки на бічній панелі»',
-    roleBasedAccess_title: 'Контроль доступу на основі ролей',
-    roleBasedAccess_subtitle: 'Створюйте ролі та дозволи користувачів у AdminJS',
-    community_title: 'Приєднуйтесь до нашої спільноти на Slack\'y',
-    community_subtitle: 'Розмовляйте з розробниками та іншими користувачами AdminJS',
-    foundBug_title: 'Знайшли помилку? Потребуєте покращення?',
-    foundBug_subtitle: 'Опишіть проблему у нашому репозиторії GitHub',
-    needMoreSolutions_title: 'Потрібні більш просунуті рішення?',
-    needMoreSolutions_subtitle: 'Ми тут, щоб допомогти Вам з UX/UI дизайном та розробленням програмного забезпечення на основі (та не тільки) AdminJS',
-    invalidCredentials: 'Неправильна адреса електронної пошти та/або пароль',
-  },
-}
-
-export default {
-  language: 'ua',
-  translations,
-}
diff --git a/src/locale/ua/translation.json b/src/locale/ua/translation.json
new file mode 100644
index 000000000..fa51e07ed
--- /dev/null
+++ b/src/locale/ua/translation.json
@@ -0,0 +1,117 @@
+{
+  "actions": {
+    "new": "Створити новий",
+    "edit": "Редагувати",
+    "show": "Показати",
+    "delete": "Видалити",
+    "bulkDelete": "Видалити всі",
+    "list": "Список"
+  },
+  "buttons": {
+    "save": "Зберегти",
+    "addNewItem": "Додати новий елемент",
+    "filter": "Фільтр",
+    "applyChanges": "Застосувати зміни",
+    "resetFilter": "Очистити фільтри",
+    "confirmRemovalMany": "Підтвердити видалення {{count}} запису",
+    "confirmRemovalMany_plural": "Підтвердити видалення {{count}} записів",
+    "logout": "Вийти",
+    "login": "Увійти",
+    "seeTheDocumentation": "Дивіться: <1>документація</1>",
+    "createFirstRecord": "Створити перший запис",
+    "contactUs": "Зв'язатися з нами",
+    "cancel": "Cкасувати",
+    "confirm": "Підтвердити"
+  },
+  "components": {
+    "DropZone": {
+      "placeholder": "Перетягніть свій файл сюди або натисніть, щоб переглянути",
+      "acceptedSize": "Максимальний розмір: {{maxSize}}",
+      "acceptedType": "Підтримує: {{mimeTypes}}",
+      "unsupportedSize": "Файл {{fileName}} завеликий",
+      "unsupportedType": "Тип файлу {{fileName}} не підтримується: {{fileType}}"
+    },
+    "LanguageSelector": {
+      "availableLanguages": {
+        "de": "Німецький",
+        "en": "англійська",
+        "es": "Іспанська",
+        "it": "італійська",
+        "pl": "польський",
+        "pt-BR": "португальська (Бразилія)",
+        "ua": "українська",
+        "zh-CN": "китайський"
+      }
+    }
+  },
+  "labels": {
+    "navigation": "Навігація",
+    "pages": "Сторінки",
+    "selectedRecords": "Вибрано ({{selected}})",
+    "filters": "Фільтри",
+    "adminVersion": "Версія AdminJS: {{version}}",
+    "appVersion": "Версія додатку: {{version}}",
+    "loginWelcome": "Ласкаво просимо",
+    "dashboard": "Панель приладів"
+  },
+  "properties": {
+    "length": "Довжина",
+    "from": "Від",
+    "to": "До",
+    "email": "Електронна пошта",
+    "password": "Пароль"
+  },
+  "resources": {},
+  "messages": {
+    "successfullyBulkDeleted": "Успішно видалено {{count}} запис",
+    "successfullyBulkDeleted_plural": "Успішно видалено {{count}} записів",
+    "successfullyDeleted": "Успішно видалено вибраний запис",
+    "successfullyUpdated": "Успішно оновлено вибраний запис",
+    "thereWereValidationErrors": "Є помилки валідації – перегляньте їх нижче",
+    "forbiddenError": "Ви не можете виконувати дії {{actionName}} на {{resourceId}}",
+    "anyForbiddenError": "Ви не можете виконати задану дію",
+    "successfullyCreated": "Успішно створено новий запис",
+    "bulkDeleteError": "Під час видалення записів сталася помилка. Перейдіть до консолі, щоб переглянути додаткову інформацію",
+    "errorFetchingRecords": "Під час отримання записів сталася помилка. Перейдіть до консолі, щоб переглянути додаткову інформацію",
+    "errorFetchingRecord": "Під час отримання запису сталася помилка. Перейдіть до консолі, щоб переглянути додаткову інформацію",
+    "noRecordsSelected": "Ви не вибрали жодного запису",
+    "theseRecordsWillBeRemoved": "Наступний запис буде видалено",
+    "theseRecordsWillBeRemoved_plural": "Наступні записи буде видалено",
+    "pickSomeFirstToRemove": "Щоб видалити записи, спочатку їх потрібно вибрати",
+    "error404Resource": "Ресурс із зазначеним ID: {{resourceId}} не знайдено",
+    "error404Action": "Ресурс із зазначеним ID: {{resourceId}} не має дії з назвою: {{actionName}} або Ви не маєте права використовувати його!",
+    "error404Record": "Ресурс із зазначеним ID: {{resourceId}} не має запису з ID: {{recordId}} або Ви не маєте права використовувати його!",
+    "seeConsoleForMore": "Дивіться консоль розробки, щоб дізнатися більше...",
+    "noActionComponent": "Ви повинні заімплементувати ActionComponent для своєї дії",
+    "noRecordsInResource": "У цьому ресурсі немає записів",
+    "noRecords": "Немає записів",
+    "confirmDelete": "Ви дійсно хочете видалити цей елемент?",
+    "welcomeOnBoard_title": "Ласкаво просимо на борт!",
+    "welcomeOnBoard_subtitle": "Тепер Ви один із нас! Ми підготували для Вас кілька порад для початку:",
+    "loginWelcome": "до AdminJS - провідної адміністраційної панелі з відкритим кодом для програм Node.js, яка дозволяє керувати всіма своїми даними в одному місці",
+    "addingResources_title": "Додавання ресурсів",
+    "addingResources_subtitle": "Як додати нові ресурси до бічної панелі",
+    "customizeResources_title": "Налаштування ресурсів",
+    "customizeResources_subtitle": "Визначення поведінки, додавання властивостей тощо...",
+    "customizeActions_title": "Налаштування дій",
+    "customizeActions_subtitle": "Змінення існуючих дій і додавання нових",
+    "writeOwnComponents_title": "Написання компонентів",
+    "writeOwnComponents_subtitle": "Як змінити зовнішній вигляд AdminJS",
+    "customDashboard_title": "Панелі приладів",
+    "customDashboard_subtitle": "Як змінити цей екран та додати нові сторінки на бічній панелі»",
+    "roleBasedAccess_title": "Контроль доступу на основі ролей",
+    "roleBasedAccess_subtitle": "Створюйте ролі та дозволи користувачів у AdminJS",
+    "community_title": "Приєднуйтесь до нашої спільноти на Slack'y",
+    "community_subtitle": "Розмовляйте з розробниками та іншими користувачами AdminJS",
+    "foundBug_title": "Знайшли помилку? Потребуєте покращення?",
+    "foundBug_subtitle": "Опишіть проблему у нашому репозиторії GitHub",
+    "needMoreSolutions_title": "Потрібні більш просунуті рішення?",
+    "needMoreSolutions_subtitle": "Ми тут, щоб допомогти Вам з UX/UI дизайном та розробленням програмного забезпечення на основі (та не тільки) AdminJS",
+    "invalidCredentials": "Неправильна адреса електронної пошти та/або пароль",
+
+    "pageNotFound_title": "Сторінку не знайдено",
+    "pageNotFound_subtitle": "Сторінка <strong>\"{{pageName}}\"</strong> не існує",
+    "componentNotFound_title": "Компонент не вказано",
+    "componentNotFound_subtitle": "Ви повинні вказати компонент, який буде рендерити цей елемент"
+  }
+}
diff --git a/src/locale/zh-CN/translation.json b/src/locale/zh-CN/translation.json
new file mode 100644
index 000000000..be3ef6e4c
--- /dev/null
+++ b/src/locale/zh-CN/translation.json
@@ -0,0 +1,105 @@
+{
+  "actions": {
+    "new": "创建",
+    "edit": "编辑",
+    "show": "显示",
+    "delete": "删除",
+    "bulkDelete": "删除所有",
+    "list": "列表"
+  },
+  "buttons": {
+    "save": "保存",
+    "addNewItem": "添加新的项目",
+    "filter": "筛选",
+    "applyChanges": "应用更改",
+    "resetFilter": "重置筛选器",
+    "confirmRemovalMany": "确认删除 {{count}} 个记录",
+    "confirmRemovalMany_plural": "确认删除 {{count}} 个记录",
+    "logout": "登出",
+    "login": "登陆",
+    "seeTheDocumentation": "参见: <1>文档</1>",
+    "createFirstRecord": "创建第一个记录"
+  },
+  "labels": {
+    "navigation": "导航",
+    "pages": "页面",
+    "selectedRecords": "已选中 ({{selected}})",
+    "filters": "筛选器",
+    "adminVersion": "Admin: {{version}}",
+    "appVersion": "App: {{version}}",
+    "loginWelcome": "欢迎",
+    "dashboard": "仪表板"
+  },
+  "components": {
+    "LanguageSelector": {
+      "availableLanguages": {
+        "de": "德语",
+        "en": "英语",
+        "es": "西班牙语",
+        "it": "意大利语",
+        "pl": "抛光",
+        "pt-BR": "葡萄牙语（巴西）",
+        "ua": "乌克兰",
+        "zh-CN": "中国人"
+      }
+    }
+  },
+  "properties": {
+    "length": "长度",
+    "from": "从",
+    "to": "到"
+  },
+  "resources": {},
+  "messages": {
+    "successfullyBulkDeleted": "成功移除了 {{count}} 条记录",
+    "successfullyBulkDeleted_plural": "成功移除了 {{count}} 条记录",
+    "successfullyDeleted": "成功删除所选记录",
+    "successfullyUpdated": "成功更新所选记录",
+    "thereWereValidationErrors": "存在验证错误 - 见下方",
+    "forbiddenError": "你不能在 {{resourceId}} 上使用 {{actionName}}",
+    "anyForbiddenError": "你不能进行给定的操作",
+    "successfullyCreated": "成功创建了新纪录",
+    "bulkDeleteError": "删除记录时遇到错误, 检查控制台以获得更多信息",
+    "errorFetchingRecords": "获取记录时遇到错误, 检查控制台以获得更多信息",
+    "errorFetchingRecord": "获取记录时遇到错误, 检查控制台以获得更多信息",
+    "noRecordsSelected": "尚未选择任何记录",
+    "theseRecordsWillBeRemoved": "下面的记录将被删除",
+    "theseRecordsWillBeRemoved_plural": "下面的记录将被删除",
+    "pickSomeFirstToRemove": "若要删除记录, 需要先选出待删除的项目",
+    "error404Resource": "找不到具有 id: {{resourceId}} 的资源",
+    "error404Action": "具有 id: {{resourceId}} 的资源没有名为 {{actionName}} 的操作, 或你未被授权使用此操作!",
+    "error404Record": "具有 id: {{resourceId}} 的资源中没有具有 id: {{recordId}} 的记录, 或你未被授权使用此记录!",
+    "seeConsoleForMore": "检查开发控制台以获得更多信息...",
+    "noActionComponent": "你必须为你的操作实现操作组件",
+    "noRecordsInResource": "此资源中没有记录",
+    "noRecords": "没有记录",
+    "confirmDelete": "你真的想移除此项吗?",
+    "welcomeOnBoard_title": "欢迎使用!",
+    "welcomeOnBoard_subtitle": "现在你是我们的一员了! 我们为你准备了一些小贴士，供您使用。",
+    "loginWelcome": "到 AdminJS – 世界领先的开源自动生成管理面板, 可用于你的 Node.js 应用程序, 以将所有数据汇于一处管理",
+    "addingResources_title": "添加资源",
+    "addingResources_subtitle": "如何向侧边栏添加资源",
+    "customizeResources_title": "自定义资源",
+    "customizeResources_subtitle": "定义行为、添加属性等...",
+    "customizeActions_title": "自定义操作",
+    "customizeActions_subtitle": "编辑已有的操作或添加新的操作",
+    "writeOwnComponents_title": "编写组件",
+    "writeOwnComponents_subtitle": "如何修改 AdminJS 的外观",
+    "customDashboard_title": "自定义仪表板",
+    "customDashboard_subtitle": "如何修改此视图、并在侧边栏添加新页面",
+    "roleBasedAccess_title": "基于角色的访问控制",
+    "roleBasedAccess_subtitle": "在 AdminJS 中创建用户角色和权限",
+    "community_title": "加入 Slack 社群",
+    "community_subtitle": "与 AdminJS 的开发者以及其他 AdminJS 用户交流",
+    "foundBug_title": "发现 Bug? 需要改进?",
+    "foundBug_subtitle": "在 GitHub 仓库提交 issue",
+    "needMoreSolutions_title": "需要更多高级解决方案?",
+    "needMoreSolutions_subtitle": "我们已经准备好为您提供优美的 UX/UI 设计, 并量身定制基于 AdminJS 等的软件",
+    "invalidCredentials": "错误的电子邮箱或密码",
+
+    "pageNotFound_title": "找不到网页",
+    "pageNotFound_subtitle": "页 <strong>“{{pageName}}“</strong> 不存在",
+    "componentNotFound_title": "未指定组件",
+    "componentNotFound_subtitle": "您必须指定将呈现此元素的组件"
+  }
+}
diff --git a/src/locale/zh-cn.ts b/src/locale/zh-cn.ts
deleted file mode 100644
index 234d22c71..000000000
--- a/src/locale/zh-cn.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-/* spellchecker: disable */
-
-const translations = {
-  actions: {
-    new: '创建',
-    edit: '编辑',
-    show: '显示',
-    delete: '删除',
-    bulkDelete: '删除所有',
-    list: '列表',
-  },
-  buttons: {
-    save: '保存',
-    addNewItem: '添加新的项目',
-    filter: '筛选',
-    applyChanges: '应用更改',
-    resetFilter: '重置筛选器',
-    confirmRemovalMany: '确认删除 {{count}} 个记录',
-    confirmRemovalMany_plural: '确认删除 {{count}} 个记录',
-    logout: '登出',
-    login: '登陆',
-    seeTheDocumentation: '参见: <1>文档</1>',
-    createFirstRecord: '创建第一个记录',
-  },
-  labels: {
-    navigation: '导航',
-    pages: '页面',
-    selectedRecords: '已选中 ({{selected}})',
-    filters: '筛选器',
-    adminVersion: 'Admin: {{version}}',
-    appVersion: 'App: {{version}}',
-    loginWelcome: '欢迎',
-    dashboard: '仪表板',
-  },
-  properties: {
-    length: '长度',
-    from: '从',
-    to: '到',
-  },
-  resources: {},
-  messages: {
-    successfullyBulkDeleted: '成功移除了 {{count}} 条记录',
-    successfullyBulkDeleted_plural: '成功移除了 {{count}} 条记录',
-    successfullyDeleted: '成功删除所选记录',
-    successfullyUpdated: '成功更新所选记录',
-    thereWereValidationErrors: '存在验证错误 - 见下方',
-    forbiddenError: '你不能在 {{resourceId}} 上使用 {{actionName}}',
-    anyForbiddenError: '你不能进行给定的操作',
-    successfullyCreated: '成功创建了新纪录',
-    bulkDeleteError: '删除记录时遇到错误, 检查控制台以获得更多信息',
-    errorFetchingRecords: '获取记录时遇到错误, 检查控制台以获得更多信息',
-    errorFetchingRecord: '获取记录时遇到错误, 检查控制台以获得更多信息',
-    noRecordsSelected: '尚未选择任何记录',
-    theseRecordsWillBeRemoved: '下面的记录将被删除',
-    theseRecordsWillBeRemoved_plural: '下面的记录将被删除',
-    pickSomeFirstToRemove: '若要删除记录, 需要先选出待删除的项目',
-    error404Resource: '找不到具有 id: {{resourceId}} 的资源',
-    error404Action: '具有 id: {{resourceId}} 的资源没有名为 {{actionName}} 的操作, 或你未被授权使用此操作!',
-    error404Record: '具有 id: {{resourceId}} 的资源中没有具有 id: {{recordId}} 的记录, 或你未被授权使用此记录!',
-    seeConsoleForMore: '检查开发控制台以获得更多信息...',
-    noActionComponent: '你必须为你的操作实现操作组件',
-    noRecordsInResource: '此资源中没有记录',
-    noRecords: '没有记录',
-    confirmDelete: '你真的想移除此项吗?',
-    welcomeOnBoard_title: '欢迎使用!',
-    welcomeOnBoard_subtitle: '现在你是我们的一员了! 我们为你准备了一些小贴士，供您使用。',
-    loginWelcome: '到 AdminJS – 世界领先的开源自动生成管理面板, 可用于你的 Node.js 应用程序, 以将所有数据汇于一处管理',
-    addingResources_title: '添加资源',
-    addingResources_subtitle: '如何向侧边栏添加资源',
-    customizeResources_title: '自定义资源',
-    customizeResources_subtitle: '定义行为、添加属性等...',
-    customizeActions_title: '自定义操作',
-    customizeActions_subtitle: '编辑已有的操作或添加新的操作',
-    writeOwnComponents_title: '编写组件',
-    writeOwnComponents_subtitle: '如何修改 AdminJS 的外观',
-    customDashboard_title: '自定义仪表板',
-    customDashboard_subtitle: '如何修改此视图、并在侧边栏添加新页面',
-    roleBasedAccess_title: '基于角色的访问控制',
-    roleBasedAccess_subtitle: '在 AdminJS 中创建用户角色和权限',
-    community_title: '加入 Slack 社群',
-    community_subtitle: '与 AdminJS 的开发者以及其他 AdminJS 用户交流',
-    foundBug_title: '发现 Bug? 需要改进?',
-    foundBug_subtitle: '在 GitHub 仓库提交 issue',
-    needMoreSolutions_title: '需要更多高级解决方案?',
-    needMoreSolutions_subtitle: '我们已经准备好为您提供优美的 UX/UI 设计, 并量身定制基于 AdminJS 等的软件',
-    invalidCredentials: '错误的电子邮箱或密码',
-  },
-}
-
-export default {
-  language: 'zh-CN',
-  translations,
-}
diff --git a/src/utils/translate-functions.factory.ts b/src/utils/translate-functions.factory.ts
index 3ab7bf1ec..23e88ec76 100644
--- a/src/utils/translate-functions.factory.ts
+++ b/src/utils/translate-functions.factory.ts
@@ -7,7 +7,7 @@ import startCase from 'lodash/startCase'
  */
 export type TranslateFunction = (
   /**
-   * kwy which should be translated in a given namespace
+   * Translation key which should be translated in a given namespace
    */
   key: string,
   /**
@@ -124,10 +124,16 @@ export interface TranslateFunctions {
    * Finally, when that also fails, it returns startCase of the given label.
    */
   translateComponent: TranslateFunction;
+  /**
+   * Translates page's labels in the application.
+   * By default, it looks for a [translation key]{@link LocaleTranslations} in
+   * `resource.{resourceId}.pages.{label}`, when it doesn't find
+   * that, the lookup is moved to `pages.{label}`.
+   * Finally, when that also fails, it returns startCase of the given label.
+   */
+  translatePage: TranslateFunction;
 }
 
-export const formatName = (name: string): string => name.split('.').join('&#46;')
-
 const translate = (
   i18n: I18n,
   key: string,
@@ -135,6 +141,9 @@ const translate = (
   resourceId?: string | TOptions,
   options?: TOptions,
 ): string => {
+  // cspell:disable-next-line
+  if (i18n.language === 'cimode') return [key, name].join('.')
+
   const realOptions: TOptions = (typeof resourceId === 'string' ? options : resourceId) || {}
   let keys = [`${key}.${name}`]
   if (resourceId) {
@@ -171,6 +180,10 @@ export const createFunctions = (i18n: I18n): TranslateFunctions => {
     translate(i18n, 'components', messageName, resourceId, options)
   )
 
+  const translatePage: TranslateFunction = (messageName, resourceId, options) => (
+    translate(i18n, 'pages', messageName, resourceId, options)
+  )
+
   return {
     translateAction,
     ta: translateAction,
@@ -184,6 +197,7 @@ export const createFunctions = (i18n: I18n): TranslateFunctions => {
     tm: translateMessage,
     translateComponent,
     tc: translateComponent,
+    translatePage,
     t: i18n.t,
     translate: i18n.t,
   }
diff --git a/tsconfig.json b/tsconfig.json
index b69e14cba..1308425b6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,39 +1,32 @@
 {
   "compilerOptions": {
-      "outDir": "./built",
-      "target": "ESNext",
-      "esModuleInterop": true,
-      "jsx": "react",
-      "declaration": true,
-      "declarationDir": "./types",
-      "emitDeclarationOnly": true,
-      "strictNullChecks": true,
-      "strictPropertyInitialization": true,
-      "strictFunctionTypes": true,
-      "strictBindCallApply": true,
-      "noImplicitThis": true,
-      "moduleResolution": "node",
-      "baseUrl": ".",
-      "types": [
-          "react",
-          "mocha",
-          "node"
-        ],
-      "paths": {
-        "react": ["node_modules/@types/react"],
-        "styled-components": ["node_modules/@types/styled-components"]
-      },
-      "skipLibCheck": true
+    "outDir": "./built",
+    "target": "esnext",
+    "esModuleInterop": true,
+    "jsx": "react",
+    "declaration": true,
+    "declarationDir": "./types",
+    "emitDeclarationOnly": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "noImplicitThis": true,
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "types": ["react", "mocha", "node"],
+    "paths": {
+      "react": ["node_modules/@types/react"],
+      "styled-components": ["node_modules/@types/styled-components"]
+    },
+    "skipLibCheck": true,
+    "resolveJsonModule": true
   },
-  "include": [
-      "./vendor-types/**/*",
-      "./src/**/*",
-      "./spec/**/*"
-  ],
+  "include": ["./vendor-types/**/*", "./src/**/*", "./spec/**/*"],
   "exclude": [
-      "./example-app/**/*",
-      "./node-modules",
-      "./src/frontend/assets/**/*",
-      "./src/frontend/components/**/*stories.tsx",
+    "./example-app/**/*",
+    "./node-modules",
+    "./src/frontend/assets/**/*",
+    "./src/frontend/components/**/*stories.tsx"
   ]
-}
\ No newline at end of file
+}
diff --git a/vendor-types/global.ts b/vendor-types/global.ts
new file mode 100644
index 000000000..f2c0dfabe
--- /dev/null
+++ b/vendor-types/global.ts
@@ -0,0 +1,14 @@
+import type { Theme } from '@adminjs/design-system'
+import type { FC } from 'react'
+import type { ReduxState } from '../src/frontend/store'
+
+declare global {
+  interface Window {
+    REDUX_STATE: ReduxState
+    THEME: Theme
+  }
+}
+
+declare const AdminJS: {
+  UserComponents: Record<string, FC>
+}
diff --git a/yarn.lock b/yarn.lock
index 4ecd82dc4..95773ae21 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1046,6 +1046,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.19.4":
+  version "7.21.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
+  integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.18.10", "@babel/template@^7.4.0":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@@ -4143,6 +4150,13 @@ crelt@^1.0.0:
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.5.tgz#57c0d52af8c859e354bace1883eb2e1eb182bb94"
   integrity sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==
 
+cross-fetch@3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
+  integrity sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==
+  dependencies:
+    node-fetch "2.6.7"
+
 cross-spawn@^4:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
@@ -5840,6 +5854,20 @@ husky@^4.2.5:
     slash "^3.0.0"
     which-pm-runs "^1.0.0"
 
+i18next-browser-languagedetector@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.0.1.tgz#ead34592edc96c6c3a618a51cb57ad027c5b5d87"
+  integrity sha512-Pa5kFwaczXJAeHE56CHG2aWzFBMJNUNghf0Pm4SwSrEMps/PTKqW90EYWlIvhuYStf3Sn1K0vw+gH3+TLdkH1g==
+  dependencies:
+    "@babel/runtime" "^7.19.4"
+
+i18next-http-backend@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-2.1.1.tgz#72a21d61c2e96eea9ad45ba1b9dd0090e119709a"
+  integrity sha512-jByfUCDVgQ8+/Wens7queQhYYvMcGTW/lR4IJJNEDDXnmqjLrwi8ubXKpmp76/JIWEZHffNdWqnxFJcTVGeaOw==
+  dependencies:
+    cross-fetch "3.1.5"
+
 i18next@^21.9.2:
   version "21.9.2"
   resolved "https://registry.yarnpkg.com/i18next/-/i18next-21.9.2.tgz#3f7c5594393eb27117c1db4c38f5ec766e68de0e"
@@ -7524,7 +7552,7 @@ node-emoji@^1.10.0:
   dependencies:
     lodash "^4.17.21"
 
-node-fetch@^2.3.0, node-fetch@^2.6.7:
+node-fetch@2.6.7, node-fetch@^2.3.0, node-fetch@^2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
   integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==