diff --git a/scm-ui/ui-components/src/BackendErrorNotification.tsx b/scm-ui/ui-components/src/BackendErrorNotification.tsx
index d2c06e5823..5319243f79 100644
--- a/scm-ui/ui-components/src/BackendErrorNotification.tsx
+++ b/scm-ui/ui-components/src/BackendErrorNotification.tsx
@@ -2,11 +2,10 @@ import React from "react";
 import { BackendError } from "./errors";
 import Notification from "./Notification";
 
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   error: BackendError;
-  t: (p: string) => string;
 };
 
 class BackendErrorNotification extends React.Component<Props> {
@@ -122,4 +121,4 @@ class BackendErrorNotification extends React.Component<Props> {
   };
 }
 
-export default translate("plugins")(BackendErrorNotification);
+export default withTranslation("plugins")(BackendErrorNotification);
diff --git a/scm-ui/ui-components/src/Breadcrumb.tsx b/scm-ui/ui-components/src/Breadcrumb.tsx
index 3afdf6d2dc..8402bc25eb 100644
--- a/scm-ui/ui-components/src/Breadcrumb.tsx
+++ b/scm-ui/ui-components/src/Breadcrumb.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Branch, Repository } from "@scm-manager/ui-types";
 import Icon from "./Icon";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   branch: Branch;
   defaultBranch: Branch;
@@ -15,9 +15,6 @@ type Props = {
   revision: string;
   path: string;
   baseUrl: string;
-
-  // Context props
-  t: (p: string) => string;
 };
 
 const FlexStartNav = styled.nav`
@@ -99,4 +96,4 @@ class Breadcrumb extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(Breadcrumb);
+export default withTranslation("commons")(Breadcrumb);
diff --git a/scm-ui/ui-components/src/DateFromNow.tsx b/scm-ui/ui-components/src/DateFromNow.tsx
index cdbf5adb10..a81cd625ba 100644
--- a/scm-ui/ui-components/src/DateFromNow.tsx
+++ b/scm-ui/ui-components/src/DateFromNow.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { translate, InjectedI18nProps } from "react-i18next";
+import { withTranslation, WithTranslation } from "react-i18next";
 import { formatDistance, format, parseISO, Locale } from "date-fns";
 import { enUS, de, es } from "date-fns/locale";
 import styled from "styled-components";
@@ -16,7 +16,7 @@ const supportedLocales: LocaleMap = {
   es
 };
 
-type Props = InjectedI18nProps & {
+type Props = WithTranslation & {
   date?: DateInput;
   timeZone?: string;
 
@@ -90,4 +90,4 @@ class DateFromNow extends React.Component<Props> {
   }
 }
 
-export default translate()(DateFromNow);
+export default withTranslation()(DateFromNow);
diff --git a/scm-ui/ui-components/src/ErrorNotification.tsx b/scm-ui/ui-components/src/ErrorNotification.tsx
index 23f9f57485..12d8066b63 100644
--- a/scm-ui/ui-components/src/ErrorNotification.tsx
+++ b/scm-ui/ui-components/src/ErrorNotification.tsx
@@ -1,11 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { BackendError, ForbiddenError, UnauthorizedError } from "./errors";
 import Notification from "./Notification";
 import BackendErrorNotification from "./BackendErrorNotification";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   error?: Error;
 };
 
@@ -40,4 +39,4 @@ class ErrorNotification extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(ErrorNotification);
+export default withTranslation("commons")(ErrorNotification);
diff --git a/scm-ui/ui-components/src/GroupAutocomplete.tsx b/scm-ui/ui-components/src/GroupAutocomplete.tsx
index 6012519a75..ffaf09f626 100644
--- a/scm-ui/ui-components/src/GroupAutocomplete.tsx
+++ b/scm-ui/ui-components/src/GroupAutocomplete.tsx
@@ -1,14 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import AutocompleteProps from "./UserGroupAutocomplete";
 import UserGroupAutocomplete from "./UserGroupAutocomplete";
 
-type Props = AutocompleteProps & {
-  // Context props
-  t: (p: string) => string;
-};
-
-class GroupAutocomplete extends React.Component<Props> {
+class GroupAutocomplete extends React.Component<AutocompleteProps & WithTranslation> {
   render() {
     const { t } = this.props;
     return (
@@ -23,4 +18,4 @@ class GroupAutocomplete extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(GroupAutocomplete);
+export default withTranslation("commons")(GroupAutocomplete);
diff --git a/scm-ui/ui-components/src/LinkPaginator.tsx b/scm-ui/ui-components/src/LinkPaginator.tsx
index fc736785d9..a1f9f7b599 100644
--- a/scm-ui/ui-components/src/LinkPaginator.tsx
+++ b/scm-ui/ui-components/src/LinkPaginator.tsx
@@ -1,15 +1,12 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PagedCollection } from "@scm-manager/ui-types";
 import { Button } from "./buttons";
 
-type Props = {
+type Props = WithTranslation & {
   collection: PagedCollection;
   page: number;
   filter?: string;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class LinkPaginator extends React.Component<Props> {
@@ -123,4 +120,4 @@ class LinkPaginator extends React.Component<Props> {
     return null;
   }
 }
-export default translate("commons")(LinkPaginator);
+export default withTranslation("commons")(LinkPaginator);
diff --git a/scm-ui/ui-components/src/Loading.tsx b/scm-ui/ui-components/src/Loading.tsx
index babf4c934f..ad1bff842f 100644
--- a/scm-ui/ui-components/src/Loading.tsx
+++ b/scm-ui/ui-components/src/Loading.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import Image from "./Image";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   message?: string;
 };
 
@@ -33,4 +32,4 @@ class Loading extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(Loading);
+export default withTranslation("commons")(Loading);
diff --git a/scm-ui/ui-components/src/Logo.tsx b/scm-ui/ui-components/src/Logo.tsx
index 71a0ed746d..13c445c7b2 100644
--- a/scm-ui/ui-components/src/Logo.tsx
+++ b/scm-ui/ui-components/src/Logo.tsx
@@ -1,16 +1,12 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import Image from "./Image";
 
-type Props = {
-  t: (p: string) => string;
-};
-
-class Logo extends React.Component<Props> {
+class Logo extends React.Component<WithTranslation> {
   render() {
     const { t } = this.props;
     return <Image src="/images/logo.png" alt={t("logo.alt")} />;
   }
 }
 
-export default translate("commons")(Logo);
+export default withTranslation("commons")(Logo);
diff --git a/scm-ui/ui-components/src/Paginator.tsx b/scm-ui/ui-components/src/Paginator.tsx
index 3a04e1d6b3..907a922ee2 100644
--- a/scm-ui/ui-components/src/Paginator.tsx
+++ b/scm-ui/ui-components/src/Paginator.tsx
@@ -1,12 +1,11 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PagedCollection, Link } from "@scm-manager/ui-types";
 import { Button } from "./buttons";
 
-type Props = {
+type Props = WithTranslation & {
   collection: PagedCollection;
   onPageChange?: (p: string) => void;
-  t: (p: string) => string;
 };
 
 class Paginator extends React.Component<Props> {
@@ -108,4 +107,4 @@ class Paginator extends React.Component<Props> {
     );
   }
 }
-export default translate("commons")(Paginator);
+export default withTranslation("commons")(Paginator);
diff --git a/scm-ui/ui-components/src/StatePaginator.tsx b/scm-ui/ui-components/src/StatePaginator.tsx
index 484699cfe2..bb471fb3a4 100644
--- a/scm-ui/ui-components/src/StatePaginator.tsx
+++ b/scm-ui/ui-components/src/StatePaginator.tsx
@@ -1,15 +1,12 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PagedCollection } from "@scm-manager/ui-types";
 import { Button } from "./index";
 
-type Props = {
+type Props = WithTranslation & {
   collection: PagedCollection;
   page: number;
   updatePage: (p: number) => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class StatePaginator extends React.Component<Props> {
@@ -123,4 +120,4 @@ class StatePaginator extends React.Component<Props> {
     );
   }
 }
-export default translate("commons")(StatePaginator);
+export default withTranslation("commons")(StatePaginator);
diff --git a/scm-ui/ui-components/src/UserAutocomplete.tsx b/scm-ui/ui-components/src/UserAutocomplete.tsx
index a22030bbe4..d5a8d0f5e1 100644
--- a/scm-ui/ui-components/src/UserAutocomplete.tsx
+++ b/scm-ui/ui-components/src/UserAutocomplete.tsx
@@ -1,14 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import AutocompleteProps from "./UserGroupAutocomplete";
 import UserGroupAutocomplete from "./UserGroupAutocomplete";
 
-type Props = AutocompleteProps & {
-  // Context props
-  t: (p: string) => string;
-};
-
-class UserAutocomplete extends React.Component<Props> {
+class UserAutocomplete extends React.Component<AutocompleteProps & WithTranslation> {
   render() {
     const { t } = this.props;
     return (
@@ -23,4 +18,4 @@ class UserAutocomplete extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(UserAutocomplete);
+export default withTranslation("commons")(UserAutocomplete);
diff --git a/scm-ui/ui-components/src/config/Configuration.tsx b/scm-ui/ui-components/src/config/Configuration.tsx
index 02f86f7b84..967feabb2b 100644
--- a/scm-ui/ui-components/src/config/Configuration.tsx
+++ b/scm-ui/ui-components/src/config/Configuration.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Links, Link } from "@scm-manager/ui-types";
 import { apiClient, SubmitButton, Loading, ErrorNotification } from "../";
 import { FormEvent } from "react";
@@ -10,12 +10,9 @@ type RenderProps = {
   onConfigurationChange: (p1: ConfigurationType, p2: boolean) => void;
 };
 
-type Props = {
+type Props = WithTranslation & {
   link: string;
   render: (props: RenderProps) => any; // ???
-
-  // context props
-  t: (p: string) => string;
 };
 
 type ConfigurationType = {
@@ -190,4 +187,4 @@ class Configuration extends React.Component<Props, State> {
   }
 }
 
-export default translate("config")(Configuration);
+export default withTranslation("config")(Configuration);
diff --git a/scm-ui/ui-components/src/config/ConfigurationBinder.tsx b/scm-ui/ui-components/src/config/ConfigurationBinder.tsx
index 2ce5eee2f1..f2e3669a5e 100644
--- a/scm-ui/ui-components/src/config/ConfigurationBinder.tsx
+++ b/scm-ui/ui-components/src/config/ConfigurationBinder.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { binder } from "@scm-manager/ui-extensions";
 import { NavLink } from "../navigation";
 import { Route } from "react-router-dom";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository, Links, Link } from "@scm-manager/ui-types";
 
 type GlobalRouteProps = {
@@ -15,6 +15,8 @@ type RepositoryRouteProps = {
   repository: Repository;
 };
 
+type RepositoryNavProps = WithTranslation & { url: string };
+
 class ConfigurationBinder {
   i18nNamespace = "plugins";
 
@@ -34,7 +36,7 @@ class ConfigurationBinder {
     };
 
     // create NavigationLink with translated label
-    const ConfigNavLink = translate(this.i18nNamespace)(({ t }) => {
+    const ConfigNavLink = withTranslation(this.i18nNamespace)(({ t }) => {
       return this.navLink("/admin/settings" + to, labelI18nKey, t);
     });
 
@@ -64,7 +66,7 @@ class ConfigurationBinder {
     };
 
     // create NavigationLink with translated label
-    const RepoNavLink = translate(this.i18nNamespace)(({ t, url }) => {
+    const RepoNavLink = withTranslation(this.i18nNamespace)(({ t, url }: RepositoryNavProps) => {
       return this.navLink(url + to, labelI18nKey, t);
     });
 
@@ -94,7 +96,7 @@ class ConfigurationBinder {
     };
 
     // create NavigationLink with translated label
-    const RepoNavLink = translate(this.i18nNamespace)(({ t, url }) => {
+    const RepoNavLink = withTranslation(this.i18nNamespace)(({ t, url }: RepositoryNavProps) => {
       return this.navLink(url + "/settings" + to, labelI18nKey, t);
     });
 
diff --git a/scm-ui/ui-components/src/forms/FilterInput.tsx b/scm-ui/ui-components/src/forms/FilterInput.tsx
index 9d362cf37c..f789fe1ee0 100644
--- a/scm-ui/ui-components/src/forms/FilterInput.tsx
+++ b/scm-ui/ui-components/src/forms/FilterInput.tsx
@@ -1,14 +1,10 @@
-import React, { ChangeEvent } from "react";
-import { translate } from "react-i18next";
+import React, { ChangeEvent, FormEvent } from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
-import { FormEvent } from "react";
 
-type Props = {
+type Props = WithTranslation & {
   filter: (p: string) => void;
   value?: string;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -59,4 +55,4 @@ class FilterInput extends React.Component<Props, State> {
   }
 }
 
-export default translate("commons")(FilterInput);
+export default withTranslation("commons")(FilterInput);
diff --git a/scm-ui/ui-components/src/forms/MemberNameTagGroup.tsx b/scm-ui/ui-components/src/forms/MemberNameTagGroup.tsx
index 13769454b7..753129bc01 100644
--- a/scm-ui/ui-components/src/forms/MemberNameTagGroup.tsx
+++ b/scm-ui/ui-components/src/forms/MemberNameTagGroup.tsx
@@ -1,14 +1,13 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { DisplayedUser } from "@scm-manager/ui-types";
 import TagGroup from "./TagGroup";
 
-type Props = {
+type Props = WithTranslation & {
   members: string[];
   memberListChanged: (p: string[]) => void;
   label?: string;
   helpText?: string;
-  t: (p: string) => string;
 };
 
 class MemberNameTagGroup extends React.Component<Props> {
@@ -39,4 +38,4 @@ class MemberNameTagGroup extends React.Component<Props> {
   };
 }
 
-export default translate("groups")(MemberNameTagGroup);
+export default withTranslation("groups")(MemberNameTagGroup);
diff --git a/scm-ui/ui-components/src/forms/PasswordConfirmation.tsx b/scm-ui/ui-components/src/forms/PasswordConfirmation.tsx
index 321d7f942f..a90ef7faaa 100644
--- a/scm-ui/ui-components/src/forms/PasswordConfirmation.tsx
+++ b/scm-ui/ui-components/src/forms/PasswordConfirmation.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import InputField from "./InputField";
 
 type State = {
@@ -8,11 +8,9 @@ type State = {
   passwordValid: boolean;
   passwordConfirmationFailed: boolean;
 };
-type Props = {
+type Props = WithTranslation & {
   passwordChanged: (p1: string, p2: boolean) => void;
   passwordValidator?: (p: string) => boolean;
-  // Context props
-  t: (p: string) => string;
 };
 
 class PasswordConfirmation extends React.Component<Props, State> {
@@ -106,4 +104,4 @@ class PasswordConfirmation extends React.Component<Props, State> {
   };
 }
 
-export default translate("commons")(PasswordConfirmation);
+export default withTranslation("commons")(PasswordConfirmation);
diff --git a/scm-ui/ui-components/src/navigation/PrimaryNavigation.tsx b/scm-ui/ui-components/src/navigation/PrimaryNavigation.tsx
index 76c0c27030..42e2a6a52d 100644
--- a/scm-ui/ui-components/src/navigation/PrimaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/PrimaryNavigation.tsx
@@ -1,11 +1,10 @@
 import React, { ReactNode } from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import PrimaryNavigationLink from "./PrimaryNavigationLink";
 import { Links } from "@scm-manager/ui-types";
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   links: Links;
 };
 
@@ -88,4 +87,4 @@ class PrimaryNavigation extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(PrimaryNavigation);
+export default withTranslation("commons")(PrimaryNavigation);
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index fb43f16b6e..0c51a30982 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { translate, InjectedTranslateProps } from "react-i18next";
+import { withTranslation, WithTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 // @ts-ignore
@@ -10,7 +10,7 @@ import Icon from "../Icon";
 import { File, Hunk as HunkType, DiffObjectProps } from "./DiffTypes";
 
 type Props = DiffObjectProps &
-  InjectedTranslateProps & {
+  WithTranslation & {
     file: File;
     defaultCollapse?: boolean;
   };
@@ -271,4 +271,4 @@ class DiffFile extends React.Component<Props, State> {
   }
 }
 
-export default translate("repos")(DiffFile);
+export default withTranslation("repos")(DiffFile);
diff --git a/scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx b/scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx
index 6f607351d2..ed2b63ea2d 100644
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx
@@ -1,13 +1,10 @@
 import React from "react";
 import { Changeset } from "@scm-manager/ui-types";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   changeset: Changeset;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class ChangesetAuthor extends React.Component<Props> {
@@ -50,4 +47,4 @@ class ChangesetAuthor extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ChangesetAuthor);
+export default withTranslation("repos")(ChangesetAuthor);
diff --git a/scm-ui/ui-components/src/repos/changesets/ChangesetButtonGroup.tsx b/scm-ui/ui-components/src/repos/changesets/ChangesetButtonGroup.tsx
index 674f59db69..712aabb35e 100644
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetButtonGroup.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetButtonGroup.tsx
@@ -2,14 +2,11 @@ import React from "react";
 import { Changeset, Repository } from "@scm-manager/ui-types";
 import { ButtonAddons, Button } from "../../buttons";
 import { createChangesetLink, createSourcesLink } from "./changesets";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   changeset: Changeset;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class ChangesetButtonGroup extends React.Component<Props> {
@@ -26,4 +23,4 @@ class ChangesetButtonGroup extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ChangesetButtonGroup);
+export default withTranslation("repos")(ChangesetButtonGroup);
diff --git a/scm-ui/ui-components/src/repos/changesets/ChangesetDiff.tsx b/scm-ui/ui-components/src/repos/changesets/ChangesetDiff.tsx
index 18b4d8f924..78f4e90cb3 100644
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetDiff.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetDiff.tsx
@@ -2,14 +2,11 @@ import React from "react";
 import { Changeset, Link } from "@scm-manager/ui-types";
 import LoadingDiff from "../LoadingDiff";
 import Notification from "../../Notification";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   changeset: Changeset;
   defaultCollapse?: boolean;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class ChangesetDiff extends React.Component<Props> {
@@ -36,4 +33,4 @@ class ChangesetDiff extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ChangesetDiff);
+export default withTranslation("repos")(ChangesetDiff);
diff --git a/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx b/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx
index 38045b1df4..43ff97d20c 100644
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Interpolate, translate } from "react-i18next";
+import { Trans, WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
@@ -12,12 +12,9 @@ import ChangesetAuthor from "./ChangesetAuthor";
 import ChangesetTags from "./ChangesetTags";
 import ChangesetButtonGroup from "./ChangesetButtonGroup";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   changeset: Changeset;
-
-  // context props
-  t: (p: string) => string;
 };
 
 const Wrapper = styled.div`
@@ -98,10 +95,10 @@ class ChangesetRow extends React.Component<Props> {
                       </ExtensionPoint>
                     </h4>
                     <p className="is-hidden-touch">
-                      <Interpolate i18nKey="changeset.summary" id={changesetId} time={dateFromNow} />
+                      <Trans i18nKey="changeset.summary" values={{ id: changesetId, time: dateFromNow }} />
                     </p>
                     <p className="is-hidden-desktop">
-                      <Interpolate i18nKey="changeset.shortSummary" id={changesetId} time={dateFromNow} />
+                      <Trans i18nKey="changeset.shortSummary" values={{ id: changesetId, time: dateFromNow }} />
                     </p>
                     <AuthorWrapper className="is-size-7">
                       <ChangesetAuthor changeset={changeset} />
@@ -131,4 +128,4 @@ class ChangesetRow extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ChangesetRow);
+export default withTranslation("repos")(ChangesetRow);
diff --git a/scm-ui/ui-components/src/repos/changesets/ChangesetTagsCollapsed.tsx b/scm-ui/ui-components/src/repos/changesets/ChangesetTagsCollapsed.tsx
index d5eca1561a..30549d6fc7 100644
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetTagsCollapsed.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetTagsCollapsed.tsx
@@ -1,14 +1,11 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Tag } from "@scm-manager/ui-types";
 import Tooltip from "../../Tooltip";
 import ChangesetTagBase from "./ChangesetTagBase";
 
-type Props = {
+type Props = WithTranslation & {
   tags: Tag[];
-
-  // context props
-  t: (p: string) => string;
 };
 
 class ChangesetTagsCollapsed extends React.Component<Props> {
@@ -23,4 +20,4 @@ class ChangesetTagsCollapsed extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ChangesetTagsCollapsed);
+export default withTranslation("repos")(ChangesetTagsCollapsed);
diff --git a/scm-ui/ui-webapp/src/admin/components/form/BaseUrlSettings.tsx b/scm-ui/ui-webapp/src/admin/components/form/BaseUrlSettings.tsx
index 0042f863fd..abf8f36fb0 100644
--- a/scm-ui/ui-webapp/src/admin/components/form/BaseUrlSettings.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/form/BaseUrlSettings.tsx
@@ -1,11 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Checkbox, InputField, Subtitle } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   baseUrl: string;
   forceBaseUrl: boolean;
-  t: (p: string) => string;
   onChange: (p1: boolean, p2: any, p3: string) => void;
   hasUpdatePermission: boolean;
 };
@@ -49,4 +48,4 @@ class BaseUrlSettings extends React.Component<Props> {
   };
 }
 
-export default translate("config")(BaseUrlSettings);
+export default withTranslation("config")(BaseUrlSettings);
diff --git a/scm-ui/ui-webapp/src/admin/components/form/ConfigForm.tsx b/scm-ui/ui-webapp/src/admin/components/form/ConfigForm.tsx
index f820777208..f7f8f67659 100644
--- a/scm-ui/ui-webapp/src/admin/components/form/ConfigForm.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/form/ConfigForm.tsx
@@ -1,21 +1,19 @@
 import React from "react";
-import { translate } from "react-i18next";
-import { SubmitButton, Notification } from "@scm-manager/ui-components";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { NamespaceStrategies, Config } from "@scm-manager/ui-types";
+import { SubmitButton, Notification } from "@scm-manager/ui-components";
 import ProxySettings from "./ProxySettings";
 import GeneralSettings from "./GeneralSettings";
 import BaseUrlSettings from "./BaseUrlSettings";
 import LoginAttempt from "./LoginAttempt";
 
-type Props = {
+type Props = WithTranslation & {
   submitForm: (p: Config) => void;
   config?: Config;
   loading?: boolean;
   configReadPermission: boolean;
   configUpdatePermission: boolean;
   namespaceStrategies?: NamespaceStrategies;
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -189,4 +187,4 @@ class ConfigForm extends React.Component<Props, State> {
   };
 }
 
-export default translate("config")(ConfigForm);
+export default withTranslation("config")(ConfigForm);
diff --git a/scm-ui/ui-webapp/src/admin/components/form/GeneralSettings.tsx b/scm-ui/ui-webapp/src/admin/components/form/GeneralSettings.tsx
index fe9d6191d4..4eb7d96142 100644
--- a/scm-ui/ui-webapp/src/admin/components/form/GeneralSettings.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/form/GeneralSettings.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Checkbox, InputField } from "@scm-manager/ui-components";
 import { NamespaceStrategies } from "@scm-manager/ui-types";
 import NamespaceStrategySelect from "./NamespaceStrategySelect";
 
-type Props = {
+type Props = WithTranslation & {
   realmDescription: string;
   loginInfoUrl: string;
   disableGroupingGrid: boolean;
@@ -17,8 +17,6 @@ type Props = {
   namespaceStrategies?: NamespaceStrategies;
   onChange: (p1: boolean, p2: any, p3: string) => void;
   hasUpdatePermission: boolean;
-  // context props
-  t: (p: string) => string;
 };
 
 class GeneralSettings extends React.Component<Props> {
@@ -122,4 +120,4 @@ class GeneralSettings extends React.Component<Props> {
   };
 }
 
-export default translate("config")(GeneralSettings);
+export default withTranslation("config")(GeneralSettings);
diff --git a/scm-ui/ui-webapp/src/admin/components/form/LoginAttempt.tsx b/scm-ui/ui-webapp/src/admin/components/form/LoginAttempt.tsx
index 0474f922ae..6ea1834a09 100644
--- a/scm-ui/ui-webapp/src/admin/components/form/LoginAttempt.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/form/LoginAttempt.tsx
@@ -1,11 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { InputField, Subtitle, validation as validator } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   loginAttemptLimit: number;
   loginAttemptLimitTimeout: number;
-  t: (p: string) => string;
   onChange: (p1: boolean, p2: any, p3: string) => void;
   hasUpdatePermission: boolean;
 };
@@ -76,4 +75,4 @@ class LoginAttempt extends React.Component<Props, State> {
   };
 }
 
-export default translate("config")(LoginAttempt);
+export default withTranslation("config")(LoginAttempt);
diff --git a/scm-ui/ui-webapp/src/admin/components/form/NamespaceStrategySelect.tsx b/scm-ui/ui-webapp/src/admin/components/form/NamespaceStrategySelect.tsx
index 33699870d1..b6c8da6cb5 100644
--- a/scm-ui/ui-webapp/src/admin/components/form/NamespaceStrategySelect.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/form/NamespaceStrategySelect.tsx
@@ -1,17 +1,15 @@
 import React from "react";
-import { translate, TFunction } from "react-i18next";
-import { Select } from "@scm-manager/ui-components";
+import { withTranslation, WithTranslation } from "react-i18next";
 import { NamespaceStrategies } from "@scm-manager/ui-types";
+import { Select } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   namespaceStrategies: NamespaceStrategies;
   label: string;
   value?: string;
   disabled?: boolean;
   helpText?: string;
   onChange: (value: string, name?: string) => void;
-  // context props
-  t: TFunction;
 };
 
 class NamespaceStrategySelect extends React.Component<Props> {
@@ -59,4 +57,4 @@ class NamespaceStrategySelect extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(NamespaceStrategySelect);
+export default withTranslation("plugins")(NamespaceStrategySelect);
diff --git a/scm-ui/ui-webapp/src/admin/components/form/ProxySettings.tsx b/scm-ui/ui-webapp/src/admin/components/form/ProxySettings.tsx
index 306b1d3f87..971f630dc5 100644
--- a/scm-ui/ui-webapp/src/admin/components/form/ProxySettings.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/form/ProxySettings.tsx
@@ -1,16 +1,15 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Checkbox, InputField, Subtitle, AddEntryToTableField } from "@scm-manager/ui-components";
 import ProxyExcludesTable from "../table/ProxyExcludesTable";
 
-type Props = {
+type Props = WithTranslation & {
   proxyPassword: string;
   proxyPort: number;
   proxyServer: string;
   proxyUser: string;
   enableProxy: boolean;
   proxyExcludes: string[];
-  t: (p: string) => string;
   onChange: (p1: boolean, p2: any, p3: string) => void;
   hasUpdatePermission: boolean;
 };
@@ -131,4 +130,4 @@ class ProxySettings extends React.Component<Props> {
   };
 }
 
-export default translate("config")(ProxySettings);
+export default withTranslation("config")(ProxySettings);
diff --git a/scm-ui/ui-webapp/src/admin/components/table/ProxyExcludesTable.tsx b/scm-ui/ui-webapp/src/admin/components/table/ProxyExcludesTable.tsx
index a934ef8a15..60eb291523 100644
--- a/scm-ui/ui-webapp/src/admin/components/table/ProxyExcludesTable.tsx
+++ b/scm-ui/ui-webapp/src/admin/components/table/ProxyExcludesTable.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import ArrayConfigTable from "./ArrayConfigTable";
 
-type Props = {
+type Props = WithTranslation & {
   proxyExcludes: string[];
-  t: (p: string) => string;
   onChange: (p1: boolean, p2: any, p3: string) => void;
   disabled: boolean;
 };
@@ -31,4 +30,4 @@ class ProxyExcludesTable extends React.Component<Props, State> {
   };
 }
 
-export default translate("config")(ProxyExcludesTable);
+export default withTranslation("config")(ProxyExcludesTable);
diff --git a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
index 3360a212bd..7227725843 100644
--- a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
+++ b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
-import { Redirect, Route, Switch } from "react-router-dom";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import { History } from "history";
 import { connect } from "react-redux";
 import { compose } from "redux";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { Redirect, Route, Switch } from "react-router-dom";
+import { History } from "history";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Links } from "@scm-manager/ui-types";
 import { Page, Navigation, NavLink, Section, SubNavigation } from "@scm-manager/ui-components";
 import { getLinks, getAvailablePluginsLink, getInstalledPluginsLink } from "../../modules/indexResource";
@@ -15,13 +15,12 @@ import RepositoryRoles from "../roles/containers/RepositoryRoles";
 import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
 import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
 
-type Props = {
+type Props = WithTranslation & {
   links: Links;
   availablePluginsLink: string;
   installedPluginsLink: string;
 
   // context objects
-  t: (p: string) => string;
   match: any;
   history: History;
 };
@@ -150,5 +149,5 @@ const mapStateToProps = (state: any) => {
 
 export default compose(
   connect(mapStateToProps),
-  translate("admin")
+  withTranslation("admin")
 )(Admin);
diff --git a/scm-ui/ui-webapp/src/admin/containers/AdminDetails.tsx b/scm-ui/ui-webapp/src/admin/containers/AdminDetails.tsx
index 82b7f66cfd..a93483da04 100644
--- a/scm-ui/ui-webapp/src/admin/containers/AdminDetails.tsx
+++ b/scm-ui/ui-webapp/src/admin/containers/AdminDetails.tsx
@@ -1,17 +1,14 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import { Image, Loading, Subtitle, Title } from "@scm-manager/ui-components";
 import { getAppVersion } from "../../modules/indexResource";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   version: string;
-
-  // context props
-  t: (p: string) => string;
 };
 
 const BoxShadowBox = styled.div`
@@ -86,4 +83,4 @@ const mapStateToProps = (state: any) => {
   };
 };
 
-export default connect(mapStateToProps)(translate("admin")(AdminDetails));
+export default connect(mapStateToProps)(withTranslation("admin")(AdminDetails));
diff --git a/scm-ui/ui-webapp/src/admin/containers/GlobalConfig.tsx b/scm-ui/ui-webapp/src/admin/containers/GlobalConfig.tsx
index fa3957eee1..3872205145 100644
--- a/scm-ui/ui-webapp/src/admin/containers/GlobalConfig.tsx
+++ b/scm-ui/ui-webapp/src/admin/containers/GlobalConfig.tsx
@@ -1,6 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { Config, NamespaceStrategies } from "@scm-manager/ui-types";
 import { Title, Loading, ErrorNotification } from "@scm-manager/ui-components";
+import { getConfigLink } from "../../modules/indexResource";
 import {
   fetchConfig,
   getFetchConfigFailure,
@@ -12,10 +15,7 @@ import {
   getModifyConfigFailure,
   modifyConfigReset
 } from "../modules/config";
-import { connect } from "react-redux";
-import { Config, NamespaceStrategies } from "@scm-manager/ui-types";
 import ConfigForm from "../components/form/ConfigForm";
-import { getConfigLink } from "../../modules/indexResource";
 import {
   fetchNamespaceStrategiesIfNeeded,
   getFetchNamespaceStrategiesFailure,
@@ -23,7 +23,7 @@ import {
   isFetchNamespaceStrategiesPending
 } from "../modules/namespaceStrategies";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   config: Config;
@@ -36,9 +36,6 @@ type Props = {
   fetchConfig: (link: string) => void;
   configReset: (p: void) => void;
   fetchNamespaceStrategiesIfNeeded: (p: void) => void;
-
-  // context objects
-  t: (p: string) => string;
 };
 
 type State = {
@@ -181,4 +178,4 @@ const mapStateToProps = state => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("config")(GlobalConfig));
+)(withTranslation("config")(GlobalConfig));
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/CancelPendingActionModal.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/CancelPendingActionModal.tsx
index dbec21b866..b6130a59f7 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/CancelPendingActionModal.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/CancelPendingActionModal.tsx
@@ -2,15 +2,12 @@ import React from "react";
 import PluginActionModal from "./PluginActionModal";
 import { PendingPlugins } from "@scm-manager/ui-types";
 import { apiClient } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   onClose: () => void;
   refresh: () => void;
   pendingPlugins: PendingPlugins;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class CancelPendingActionModal extends React.Component<Props> {
@@ -37,4 +34,4 @@ class CancelPendingActionModal extends React.Component<Props> {
   };
 }
 
-export default translate("admin")(CancelPendingActionModal);
+export default withTranslation("admin")(CancelPendingActionModal);
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingAction.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingAction.tsx
index 3c0c7936af..bf406f9a3a 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingAction.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingAction.tsx
@@ -1,14 +1,11 @@
 import React from "react";
-import { Button } from "@scm-manager/ui-components";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PendingPlugins } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
+import { Button } from "@scm-manager/ui-components";
 import ExecutePendingModal from "./ExecutePendingModal";
 
-type Props = {
+type Props = WithTranslation & {
   pendingPlugins: PendingPlugins;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -55,4 +52,4 @@ class ExecutePendingAction extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(ExecutePendingAction);
+export default withTranslation("admin")(ExecutePendingAction);
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingActionModal.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingActionModal.tsx
index 7d5c04b26c..05e2193722 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingActionModal.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingActionModal.tsx
@@ -1,16 +1,13 @@
 import React from "react";
-import PluginActionModal from "./PluginActionModal";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PendingPlugins } from "@scm-manager/ui-types";
-import waitForRestart from "./waitForRestart";
 import { apiClient, Notification } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import waitForRestart from "./waitForRestart";
+import PluginActionModal from "./PluginActionModal";
 
-type Props = {
+type Props = WithTranslation & {
   onClose: () => void;
   pendingPlugins: PendingPlugins;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class ExecutePendingActionModal extends React.Component<Props> {
@@ -36,4 +33,4 @@ class ExecutePendingActionModal extends React.Component<Props> {
   };
 }
 
-export default translate("admin")(ExecutePendingActionModal);
+export default withTranslation("admin")(ExecutePendingActionModal);
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingModal.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingModal.tsx
index 9d5dc2a482..89b327b8f5 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingModal.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingModal.tsx
@@ -1,16 +1,13 @@
 import React from "react";
 import { apiClient, Button, ButtonGroup, ErrorNotification, Modal, Notification } from "@scm-manager/ui-components";
 import { PendingPlugins } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import waitForRestart from "./waitForRestart";
 import SuccessNotification from "./SuccessNotification";
 
-type Props = {
+type Props = WithTranslation & {
   onClose: () => void;
   pendingPlugins: PendingPlugins;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -167,4 +164,4 @@ class ExecutePendingModal extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(ExecutePendingModal);
+export default withTranslation("admin")(ExecutePendingModal);
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginActionModal.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginActionModal.tsx
index 0e3cab816b..8a916a73b6 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginActionModal.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginActionModal.tsx
@@ -1,10 +1,10 @@
 import * as React from "react";
-import { Button, ButtonGroup, ErrorNotification, Modal } from "@scm-manager/ui-components";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PendingPlugins, PluginCollection } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
+import { Button, ButtonGroup, ErrorNotification, Modal } from "@scm-manager/ui-components";
 import SuccessNotification from "./SuccessNotification";
 
-type Props = {
+type Props = WithTranslation & {
   onClose: () => void;
   actionType: string;
   pendingPlugins?: PendingPlugins;
@@ -15,9 +15,6 @@ type Props = {
   label: string;
 
   children?: React.Node;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -199,4 +196,4 @@ class PluginActionModal extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(PluginActionModal);
+export default withTranslation("admin")(PluginActionModal);
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx
index 56f61a4a81..c5afeae3e7 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx
@@ -1,6 +1,5 @@
 import React from "react";
-import { translate } from "react-i18next";
-import classNames from "classnames";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import { Plugin } from "@scm-manager/ui-types";
 import { CardColumn, Icon } from "@scm-manager/ui-components";
@@ -13,12 +12,9 @@ export const PluginAction = {
   UNINSTALL: "uninstall"
 };
 
-type Props = {
+type Props = WithTranslation & {
   plugin: Plugin;
   refresh: () => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -173,4 +169,4 @@ class PluginEntry extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(PluginEntry);
+export default withTranslation("admin")(PluginEntry);
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
index 3f23738425..1863ce0843 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { Plugin } from "@scm-manager/ui-types";
@@ -16,14 +16,11 @@ import waitForRestart from "./waitForRestart";
 import SuccessNotification from "./SuccessNotification";
 import { PluginAction } from "./PluginEntry";
 
-type Props = {
+type Props = WithTranslation & {
   plugin: Plugin;
   pluginAction: string;
   refresh: () => void;
   onClose: () => void;
-
-  // context props
-  t: (key: string, params?: object) => string;
 };
 
 type State = {
@@ -268,4 +265,4 @@ class PluginModal extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(PluginModal);
+export default withTranslation("admin")(PluginModal);
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/SuccessNotification.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/SuccessNotification.tsx
index 1bde1f5f7f..8e01e84bbd 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/SuccessNotification.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/SuccessNotification.tsx
@@ -1,13 +1,8 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Notification } from "@scm-manager/ui-components";
 
-type Props = {
-  // context props
-  t: (p: string) => string;
-};
-
-class InstallSuccessNotification extends React.Component<Props> {
+class InstallSuccessNotification extends React.Component<WithTranslation> {
   render() {
     const { t } = this.props;
     return (
@@ -19,4 +14,4 @@ class InstallSuccessNotification extends React.Component<Props> {
   }
 }
 
-export default translate("admin")(InstallSuccessNotification);
+export default withTranslation("admin")(InstallSuccessNotification);
diff --git a/scm-ui/ui-webapp/src/admin/plugins/components/UpdateAllActionModal.tsx b/scm-ui/ui-webapp/src/admin/plugins/components/UpdateAllActionModal.tsx
index 5f074e8335..f94799cd0f 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/components/UpdateAllActionModal.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/components/UpdateAllActionModal.tsx
@@ -1,16 +1,13 @@
 import React from "react";
-import PluginActionModal from "./PluginActionModal";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PluginCollection } from "@scm-manager/ui-types";
 import { apiClient } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import PluginActionModal from "./PluginActionModal";
 
-type Props = {
+type Props = WithTranslation & {
   onClose: () => void;
   refresh: () => void;
   installedPlugins: PluginCollection;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class UpdateAllActionModal extends React.Component<Props> {
@@ -37,4 +34,4 @@ class UpdateAllActionModal extends React.Component<Props> {
   };
 }
 
-export default translate("admin")(UpdateAllActionModal);
+export default withTranslation("admin")(UpdateAllActionModal);
diff --git a/scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.tsx b/scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.tsx
index 1788d98e89..ab670c1ba8 100644
--- a/scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.tsx
+++ b/scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { compose } from "redux";
 import { PendingPlugins, PluginCollection } from "@scm-manager/ui-types";
 import {
@@ -32,7 +32,7 @@ import ExecutePendingActionModal from "../components/ExecutePendingActionModal";
 import CancelPendingActionModal from "../components/CancelPendingActionModal";
 import UpdateAllActionModal from "../components/UpdateAllActionModal";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   collection: PluginCollection;
@@ -43,9 +43,6 @@ type Props = {
   pendingPluginsLink: string;
   pendingPlugins: PendingPlugins;
 
-  // context objects
-  t: (key: string, params?: object) => string;
-
   // dispatched functions
   fetchPluginsByLink: (link: string) => void;
   fetchPendingPlugins: (link: string) => void;
@@ -291,7 +288,7 @@ const mapDispatchToProps = dispatch => {
 };
 
 export default compose(
-  translate("admin"),
+  withTranslation("admin"),
   connect(
     mapStateToProps,
     mapDispatchToProps
diff --git a/scm-ui/ui-webapp/src/admin/roles/components/AvailableVerbs.tsx b/scm-ui/ui-webapp/src/admin/roles/components/AvailableVerbs.tsx
index 33fa6d00de..b230444de5 100644
--- a/scm-ui/ui-webapp/src/admin/roles/components/AvailableVerbs.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/components/AvailableVerbs.tsx
@@ -1,12 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { RepositoryRole } from "@scm-manager/ui-types";
 
-type Props = {
+type Props = WithTranslation & {
   role: RepositoryRole;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class AvailableVerbs extends React.Component<Props> {
@@ -31,4 +28,4 @@ class AvailableVerbs extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(AvailableVerbs);
+export default withTranslation("plugins")(AvailableVerbs);
diff --git a/scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleDetails.tsx b/scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleDetails.tsx
index ae8a0e12c0..e4a2a0f05c 100644
--- a/scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleDetails.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleDetails.tsx
@@ -1,16 +1,13 @@
 import React from "react";
-import { translate } from "react-i18next";
-import { RepositoryRole } from "@scm-manager/ui-types";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import PermissionRoleDetailsTable from "./PermissionRoleDetailsTable";
+import { RepositoryRole } from "@scm-manager/ui-types";
 import { Button } from "@scm-manager/ui-components";
+import PermissionRoleDetailsTable from "./PermissionRoleDetailsTable";
 
-type Props = {
+type Props = WithTranslation & {
   role: RepositoryRole;
   url: string;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class PermissionRoleDetails extends React.Component<Props> {
@@ -42,4 +39,4 @@ class PermissionRoleDetails extends React.Component<Props> {
   }
 }
 
-export default translate("admin")(PermissionRoleDetails);
+export default withTranslation("admin")(PermissionRoleDetails);
diff --git a/scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleDetailsTable.tsx b/scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleDetailsTable.tsx
index aab4c2f973..239ed27996 100644
--- a/scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleDetailsTable.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleDetailsTable.tsx
@@ -1,13 +1,10 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { RepositoryRole } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
 import AvailableVerbs from "./AvailableVerbs";
 
-type Props = {
+type Props = WithTranslation & {
   role: RepositoryRole;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class PermissionRoleDetailsTable extends React.Component<Props> {
@@ -34,4 +31,4 @@ class PermissionRoleDetailsTable extends React.Component<Props> {
   }
 }
 
-export default translate("admin")(PermissionRoleDetailsTable);
+export default withTranslation("admin")(PermissionRoleDetailsTable);
diff --git a/scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleTable.tsx b/scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleTable.tsx
index d83b6244f0..fe0a7e3435 100644
--- a/scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleTable.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleTable.tsx
@@ -1,14 +1,11 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { RepositoryRole } from "@scm-manager/ui-types";
 import PermissionRoleRow from "./PermissionRoleRow";
 
-type Props = {
+type Props = WithTranslation & {
   baseUrl: string;
   roles: RepositoryRole[];
-
-  // context props
-  t: (p: string) => string;
 };
 
 class PermissionRoleTable extends React.Component<Props> {
@@ -31,4 +28,4 @@ class PermissionRoleTable extends React.Component<Props> {
   }
 }
 
-export default translate("admin")(PermissionRoleTable);
+export default withTranslation("admin")(PermissionRoleTable);
diff --git a/scm-ui/ui-webapp/src/admin/roles/components/SystemRoleTag.tsx b/scm-ui/ui-webapp/src/admin/roles/components/SystemRoleTag.tsx
index 4931bf6f32..bc2b1df27e 100644
--- a/scm-ui/ui-webapp/src/admin/roles/components/SystemRoleTag.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/components/SystemRoleTag.tsx
@@ -1,13 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import { Tag } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   system?: boolean;
-
-  // context props
-  t: (p: string) => string;
 };
 
 const LeftMarginTag = styled(Tag)`
@@ -26,4 +23,4 @@ class SystemRoleTag extends React.Component<Props> {
   }
 }
 
-export default translate("admin")(SystemRoleTag);
+export default withTranslation("admin")(SystemRoleTag);
diff --git a/scm-ui/ui-webapp/src/admin/roles/containers/CreateRepositoryRole.tsx b/scm-ui/ui-webapp/src/admin/roles/containers/CreateRepositoryRole.tsx
index cc4558a7db..63ce9d26ec 100644
--- a/scm-ui/ui-webapp/src/admin/roles/containers/CreateRepositoryRole.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/containers/CreateRepositoryRole.tsx
@@ -1,23 +1,20 @@
 import React from "react";
-import RepositoryRoleForm from "./RepositoryRoleForm";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { History } from "history";
+import { RepositoryRole } from "@scm-manager/ui-types";
 import { ErrorNotification, Subtitle, Title } from "@scm-manager/ui-components";
 import { createRole, getCreateRoleFailure, getFetchVerbsFailure, isFetchVerbsPending } from "../modules/roles";
-import { RepositoryRole } from "@scm-manager/ui-types";
 import { getRepositoryRolesLink, getRepositoryVerbsLink } from "../../../modules/indexResource";
-import { History } from "history";
+import RepositoryRoleForm from "./RepositoryRoleForm";
 
-type Props = {
+type Props = WithTranslation & {
   repositoryRolesLink: string;
   error?: Error;
   history: History;
 
-  //dispatch function
+  // dispatch function
   addRole: (link: string, role: RepositoryRole, callback?: () => void) => void;
-
-  // context objects
-  t: (p: string) => string;
 };
 
 class CreateRepositoryRole extends React.Component<Props> {
@@ -47,7 +44,7 @@ class CreateRepositoryRole extends React.Component<Props> {
   }
 }
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const loading = isFetchVerbsPending(state);
   const error = getFetchVerbsFailure(state) || getCreateRoleFailure(state);
   const verbsLink = getRepositoryVerbsLink(state);
@@ -72,4 +69,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("admin")(CreateRepositoryRole));
+)(withTranslation("admin")(CreateRepositoryRole));
diff --git a/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx b/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx
index ba370dedf2..81a9c93840 100644
--- a/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx
@@ -1,13 +1,13 @@
 import React from "react";
-import { translate } from "react-i18next";
-import { RepositoryRole } from "@scm-manager/ui-types";
-import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
+import { RepositoryRole } from "@scm-manager/ui-types";
+import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { deleteRole, getDeleteRoleFailure, isDeleteRolePending } from "../modules/roles";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   role: RepositoryRole;
@@ -16,7 +16,6 @@ type Props = {
 
   // context props
   history: History;
-  t: (p: string) => string;
 };
 
 class DeleteRepositoryRole extends React.Component<Props> {
@@ -96,4 +95,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(withRouter(translate("admin")(DeleteRepositoryRole)));
+)(withRouter(withTranslation("admin")(DeleteRepositoryRole)));
diff --git a/scm-ui/ui-webapp/src/admin/roles/containers/EditRepositoryRole.tsx b/scm-ui/ui-webapp/src/admin/roles/containers/EditRepositoryRole.tsx
index d3fe8438bf..f09d5c603e 100644
--- a/scm-ui/ui-webapp/src/admin/roles/containers/EditRepositoryRole.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/containers/EditRepositoryRole.tsx
@@ -1,21 +1,21 @@
 import React from "react";
 import RepositoryRoleForm from "./RepositoryRoleForm";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { getModifyRoleFailure, isModifyRolePending, modifyRole } from "../modules/roles";
-import { ErrorNotification, Subtitle } from "@scm-manager/ui-components";
+import { ErrorNotification, Subtitle, Loading } from "@scm-manager/ui-components";
 import { RepositoryRole } from "@scm-manager/ui-types";
 import { History } from "history";
 import DeleteRepositoryRole from "./DeleteRepositoryRole";
 
-type Props = {
+type Props = WithTranslation & {
   disabled: boolean;
   role: RepositoryRole;
   repositoryRolesLink: string;
+  loading?: boolean;
   error?: Error;
 
   // context objects
-  t: (p: string) => string;
   history: History;
 
   //dispatch function
@@ -32,9 +32,11 @@ class EditRepositoryRole extends React.Component<Props> {
   };
 
   render() {
-    const { error, t } = this.props;
+    const { loading, error, t } = this.props;
 
-    if (error) {
+    if (loading) {
+      return <Loading />;
+    } else if (error) {
       return <ErrorNotification error={error} />;
     }
 
@@ -70,4 +72,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("admin")(EditRepositoryRole));
+)(withTranslation("admin")(EditRepositoryRole));
diff --git a/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx b/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx
index 5b74c81711..f5a9c19549 100644
--- a/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx
@@ -1,22 +1,19 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { RepositoryRole } from "@scm-manager/ui-types";
 import { InputField, SubmitButton } from "@scm-manager/ui-components";
-import PermissionCheckbox from "../../../repos/permissions/components/PermissionCheckbox";
-import { fetchAvailableVerbs, getFetchVerbsFailure, getVerbsFromState, isFetchVerbsPending } from "../modules/roles";
 import { getRepositoryRolesLink, getRepositoryVerbsLink } from "../../../modules/indexResource";
+import { fetchAvailableVerbs, getFetchVerbsFailure, getVerbsFromState, isFetchVerbsPending } from "../modules/roles";
+import PermissionCheckbox from "../../../repos/permissions/components/PermissionCheckbox";
 
-type Props = {
+type Props = WithTranslation & {
   role?: RepositoryRole;
   loading?: boolean;
   availableVerbs: string[];
   verbsLink: string;
   submitForm: (p: RepositoryRole) => void;
 
-  // context objects
-  t: (p: string) => string;
-
   // dispatch functions
   fetchAvailableVerbs: (link: string) => void;
 };
@@ -123,7 +120,7 @@ class RepositoryRoleForm extends React.Component<Props, State> {
   }
 }
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const loading = isFetchVerbsPending(state);
   const error = getFetchVerbsFailure(state);
   const verbsLink = getRepositoryVerbsLink(state);
@@ -150,4 +147,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("admin")(RepositoryRoleForm));
+)(withTranslation("admin")(RepositoryRoleForm));
diff --git a/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoles.tsx b/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoles.tsx
index 7a7748f802..5a3aa2618d 100644
--- a/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoles.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoles.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { RepositoryRole, PagedCollection } from "@scm-manager/ui-types";
 import { Title, Subtitle, Loading, Notification, LinkPaginator, urls, CreateButton } from "@scm-manager/ui-components";
@@ -16,7 +16,7 @@ import {
 import PermissionRoleTable from "../components/PermissionRoleTable";
 import { getRepositoryRolesLink } from "../../../modules/indexResource";
 
-type Props = {
+type Props = WithTranslation & {
   baseUrl: string;
   roles: RepositoryRole[];
   loading: boolean;
@@ -27,7 +27,6 @@ type Props = {
   rolesLink: string;
 
   // context objects
-  t: (p: string) => string;
   history: History;
   location: any;
 
@@ -123,5 +122,5 @@ export default withRouter(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(translate("admin")(RepositoryRoles))
+  )(withTranslation("admin")(RepositoryRoles))
 );
diff --git a/scm-ui/ui-webapp/src/admin/roles/containers/SingleRepositoryRole.tsx b/scm-ui/ui-webapp/src/admin/roles/containers/SingleRepositoryRole.tsx
index d1463d2a9a..389eae87c2 100644
--- a/scm-ui/ui-webapp/src/admin/roles/containers/SingleRepositoryRole.tsx
+++ b/scm-ui/ui-webapp/src/admin/roles/containers/SingleRepositoryRole.tsx
@@ -1,18 +1,17 @@
 import React from "react";
 import { connect } from "react-redux";
-import { Loading, ErrorPage, Title } from "@scm-manager/ui-components";
-import { Route } from "react-router-dom";
+import { Route, withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
-import { translate } from "react-i18next";
-import { RepositoryRole } from "@scm-manager/ui-types";
-import { getRepositoryRolesLink } from "../../../modules/indexResource";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { RepositoryRole } from "@scm-manager/ui-types";
+import { Loading, ErrorPage, Title } from "@scm-manager/ui-components";
+import { getRepositoryRolesLink } from "../../../modules/indexResource";
 import { fetchRoleByName, getFetchRoleFailure, getRoleByName, isFetchRolePending } from "../modules/roles";
-import { withRouter } from "react-router-dom";
 import PermissionRoleDetail from "../components/PermissionRoleDetails";
 import EditRepositoryRole from "./EditRepositoryRole";
 
-type Props = {
+type Props = WithTranslation & {
   roleName: string;
   role: RepositoryRole;
   loading: boolean;
@@ -24,7 +23,6 @@ type Props = {
   fetchRoleByName: (p1: string, p2: string) => void;
 
   // context objects
-  t: (p: string) => string;
   match: any;
   history: History;
 };
@@ -107,5 +105,5 @@ export default withRouter(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(translate("admin")(SingleRepositoryRole))
+  )(withTranslation("admin")(SingleRepositoryRole))
 );
diff --git a/scm-ui/ui-webapp/src/components/InfoBox.tsx b/scm-ui/ui-webapp/src/components/InfoBox.tsx
index f6315c358c..8dd295cd3a 100644
--- a/scm-ui/ui-webapp/src/components/InfoBox.tsx
+++ b/scm-ui/ui-webapp/src/components/InfoBox.tsx
@@ -1,16 +1,13 @@
 import * as React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { InfoItem } from "./InfoItem";
 import { Icon } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   type: "plugin" | "feature";
   item: InfoItem;
-
-  // context props
-  t: (p: string) => string;
 };
 
 const BottomMarginA = styled.a`
@@ -73,4 +70,4 @@ class InfoBox extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(InfoBox);
+export default withTranslation("commons")(InfoBox);
diff --git a/scm-ui/ui-webapp/src/components/LoginForm.tsx b/scm-ui/ui-webapp/src/components/LoginForm.tsx
index 880a2b155f..ed292dd7cc 100644
--- a/scm-ui/ui-webapp/src/components/LoginForm.tsx
+++ b/scm-ui/ui-webapp/src/components/LoginForm.tsx
@@ -1,15 +1,12 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import { Image, ErrorNotification, InputField, SubmitButton, UnauthorizedError } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   error?: Error;
   loading: boolean;
   loginHandler: (username: string, password: string) => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -106,4 +103,4 @@ class LoginForm extends React.Component<Props, State> {
   }
 }
 
-export default translate("commons")(LoginForm);
+export default withTranslation("commons")(LoginForm);
diff --git a/scm-ui/ui-webapp/src/containers/App.tsx b/scm-ui/ui-webapp/src/containers/App.tsx
index 1b8801cc19..76f75c119b 100644
--- a/scm-ui/ui-webapp/src/containers/App.tsx
+++ b/scm-ui/ui-webapp/src/containers/App.tsx
@@ -1,10 +1,9 @@
 import React, { Component } from "react";
 import Main from "./Main";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { withRouter } from "react-router-dom";
 import { fetchMe, getFetchMeFailure, getMe, isAuthenticated, isFetchMePending } from "../modules/auth";
-
 import { ErrorPage, Footer, Header, Loading, PrimaryNavigation } from "@scm-manager/ui-components";
 import { Links, Me } from "@scm-manager/ui-types";
 import {
@@ -14,7 +13,7 @@ import {
   isFetchIndexResourcesPending
 } from "../modules/indexResource";
 
-type Props = {
+type Props = WithTranslation & {
   me: Me;
   authenticated: boolean;
   error: Error;
@@ -24,9 +23,6 @@ type Props = {
 
   // dispatcher functions
   fetchMe: (link: string) => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class App extends Component<Props> {
@@ -86,5 +82,5 @@ export default withRouter(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(translate("commons")(App))
+  )(withTranslation("commons")(App))
 );
diff --git a/scm-ui/ui-webapp/src/containers/ChangeUserPassword.tsx b/scm-ui/ui-webapp/src/containers/ChangeUserPassword.tsx
index 014b006128..9b8275aa0e 100644
--- a/scm-ui/ui-webapp/src/containers/ChangeUserPassword.tsx
+++ b/scm-ui/ui-webapp/src/containers/ChangeUserPassword.tsx
@@ -6,13 +6,12 @@ import {
   PasswordConfirmation,
   SubmitButton
 } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Me } from "@scm-manager/ui-types";
 import { changePassword } from "../modules/changePassword";
 
-type Props = {
+type Props = WithTranslation & {
   me: Me;
-  t: (p: string) => string;
 };
 
 type State = {
@@ -150,4 +149,4 @@ class ChangeUserPassword extends React.Component<Props, State> {
   };
 }
 
-export default translate("commons")(ChangeUserPassword);
+export default withTranslation("commons")(ChangeUserPassword);
diff --git a/scm-ui/ui-webapp/src/containers/Index.tsx b/scm-ui/ui-webapp/src/containers/Index.tsx
index 4c5b564aa9..dba46117bf 100644
--- a/scm-ui/ui-webapp/src/containers/Index.tsx
+++ b/scm-ui/ui-webapp/src/containers/Index.tsx
@@ -1,9 +1,8 @@
 import React, { Component } from "react";
 import App from "./App";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { withRouter } from "react-router-dom";
-
 import { Loading, ErrorBoundary } from "@scm-manager/ui-components";
 import {
   fetchIndexResources,
@@ -16,16 +15,13 @@ import { IndexResources } from "@scm-manager/ui-types";
 import ScrollToTop from "./ScrollToTop";
 import IndexErrorPage from "./IndexErrorPage";
 
-type Props = {
+type Props = WithTranslation & {
   error: Error;
   loading: boolean;
   indexResources: IndexResources;
 
   // dispatcher functions
   fetchIndexResources: () => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -93,5 +89,5 @@ export default withRouter(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(translate("commons")(Index))
+  )(withTranslation("commons")(Index))
 );
diff --git a/scm-ui/ui-webapp/src/containers/IndexErrorPage.tsx b/scm-ui/ui-webapp/src/containers/IndexErrorPage.tsx
index 9a264ca879..995786663a 100644
--- a/scm-ui/ui-webapp/src/containers/IndexErrorPage.tsx
+++ b/scm-ui/ui-webapp/src/containers/IndexErrorPage.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { translate, TFunction } from "react-i18next";
+import { withTranslation, WithTranslation } from "react-i18next";
 import { ErrorPage } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   error: Error;
-  t: TFunction;
 };
 
 class IndexErrorPage extends React.Component<Props> {
@@ -14,4 +13,4 @@ class IndexErrorPage extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(IndexErrorPage);
+export default withTranslation("commons")(IndexErrorPage);
diff --git a/scm-ui/ui-webapp/src/containers/Login.tsx b/scm-ui/ui-webapp/src/containers/Login.tsx
index 4786eb2b3e..6ad2c5b737 100644
--- a/scm-ui/ui-webapp/src/containers/Login.tsx
+++ b/scm-ui/ui-webapp/src/containers/Login.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { connect } from "react-redux";
 import { Redirect, withRouter } from "react-router-dom";
 import { compose } from "redux";
-import { translate } from "react-i18next";
 import styled from "styled-components";
 import { getLoginFailure, isAuthenticated, isLoginPending, login } from "../modules/auth";
 import { getLoginInfoLink, getLoginLink } from "../modules/indexResource";
@@ -19,7 +18,6 @@ type Props = {
   login: (link: string, username: string, password: string) => void;
 
   // context props
-  t: (p: string) => string;
   from: any;
   location: any;
 };
diff --git a/scm-ui/ui-webapp/src/containers/Logout.tsx b/scm-ui/ui-webapp/src/containers/Logout.tsx
index dfedb6b60f..7a1ee0d9ad 100644
--- a/scm-ui/ui-webapp/src/containers/Logout.tsx
+++ b/scm-ui/ui-webapp/src/containers/Logout.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
 
 import { logout, isAuthenticated, isLogoutPending, getLogoutFailure, isRedirecting } from "../modules/auth";
 import { Loading, ErrorPage } from "@scm-manager/ui-components";
 import { getLogoutLink } from "../modules/indexResource";
 
-type Props = {
+type Props = WithTranslation & {
   authenticated: boolean;
   loading: boolean;
   redirecting: boolean;
@@ -16,9 +16,6 @@ type Props = {
 
   // dispatcher functions
   logout: (link: string) => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class Logout extends React.Component<Props> {
@@ -62,4 +59,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("commons")(Logout));
+)(withTranslation("commons")(Logout));
diff --git a/scm-ui/ui-webapp/src/containers/Profile.tsx b/scm-ui/ui-webapp/src/containers/Profile.tsx
index a2c12c8152..4b1aab3b5f 100644
--- a/scm-ui/ui-webapp/src/containers/Profile.tsx
+++ b/scm-ui/ui-webapp/src/containers/Profile.tsx
@@ -1,21 +1,19 @@
 import React from "react";
-
 import { Route, withRouter } from "react-router-dom";
 import { getMe } from "../modules/auth";
 import { compose } from "redux";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Me } from "@scm-manager/ui-types";
 import { ErrorPage, Page, Navigation, SubNavigation, Section, NavLink } from "@scm-manager/ui-components";
 import ChangeUserPassword from "./ChangeUserPassword";
 import ProfileInfo from "./ProfileInfo";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 
-type Props = {
+type Props = WithTranslation & {
   me: Me;
 
   // Context props
-  t: (p: string) => string;
   match: any;
 };
 type State = {};
@@ -87,7 +85,7 @@ const mapStateToProps = state => {
 };
 
 export default compose(
-  translate("commons"),
+  withTranslation("commons"),
   connect(mapStateToProps),
   withRouter
 )(Profile);
diff --git a/scm-ui/ui-webapp/src/containers/ProfileInfo.tsx b/scm-ui/ui-webapp/src/containers/ProfileInfo.tsx
index 852d483083..4c69045c38 100644
--- a/scm-ui/ui-webapp/src/containers/ProfileInfo.tsx
+++ b/scm-ui/ui-webapp/src/containers/ProfileInfo.tsx
@@ -1,13 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Me } from "@scm-manager/ui-types";
 import { MailLink, AvatarWrapper, AvatarImage } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   me: Me;
-
-  // Context props
-  t: (p: string) => string;
 };
 
 class ProfileInfo extends React.Component<Props> {
@@ -69,4 +66,4 @@ class ProfileInfo extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(ProfileInfo);
+export default withTranslation("commons")(ProfileInfo);
diff --git a/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx b/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx
index 0aa9ad1f4b..b0c41df5c8 100644
--- a/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx
+++ b/scm-ui/ui-webapp/src/groups/components/GroupForm.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { Group, SelectValue } from "@scm-manager/ui-types";
 import {
   Subtitle,
   AutocompleteAddEntryToTableField,
@@ -9,12 +10,10 @@ import {
   Textarea,
   Checkbox
 } from "@scm-manager/ui-components";
-import { Group, SelectValue } from "@scm-manager/ui-types";
 
 import * as validator from "./groupValidation";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   submitForm: (p: Group) => void;
   loading?: boolean;
   group?: Group;
@@ -218,4 +217,4 @@ class GroupForm extends React.Component<Props, State> {
   };
 }
 
-export default translate("groups")(GroupForm);
+export default withTranslation("groups")(GroupForm);
diff --git a/scm-ui/ui-webapp/src/groups/components/navLinks/EditGroupNavLink.tsx b/scm-ui/ui-webapp/src/groups/components/navLinks/EditGroupNavLink.tsx
index 4f5fde9dcb..29650ab65e 100644
--- a/scm-ui/ui-webapp/src/groups/components/navLinks/EditGroupNavLink.tsx
+++ b/scm-ui/ui-webapp/src/groups/components/navLinks/EditGroupNavLink.tsx
@@ -1,12 +1,11 @@
 import React from "react";
 import { Group } from "@scm-manager/ui-types";
 import { NavLink } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   group: Group;
   editUrl: string;
-  t: (p: string) => string;
 };
 
 class EditGroupNavLink extends React.Component<Props> {
@@ -24,4 +23,4 @@ class EditGroupNavLink extends React.Component<Props> {
   }
 }
 
-export default translate("groups")(EditGroupNavLink);
+export default withTranslation("groups")(EditGroupNavLink);
diff --git a/scm-ui/ui-webapp/src/groups/components/navLinks/SetPermissionsNavLink.tsx b/scm-ui/ui-webapp/src/groups/components/navLinks/SetPermissionsNavLink.tsx
index 513b1f2c8a..5c4d61b069 100644
--- a/scm-ui/ui-webapp/src/groups/components/navLinks/SetPermissionsNavLink.tsx
+++ b/scm-ui/ui-webapp/src/groups/components/navLinks/SetPermissionsNavLink.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Group } from "@scm-manager/ui-types";
 import { NavLink } from "@scm-manager/ui-components";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   group: Group;
   permissionsUrl: string;
 };
@@ -24,4 +23,4 @@ class ChangePermissionNavLink extends React.Component<Props> {
   };
 }
 
-export default translate("groups")(ChangePermissionNavLink);
+export default withTranslation("groups")(ChangePermissionNavLink);
diff --git a/scm-ui/ui-webapp/src/groups/components/table/Details.tsx b/scm-ui/ui-webapp/src/groups/components/table/Details.tsx
index 40cb21fdf3..e7c0f5a901 100644
--- a/scm-ui/ui-webapp/src/groups/components/table/Details.tsx
+++ b/scm-ui/ui-webapp/src/groups/components/table/Details.tsx
@@ -1,14 +1,11 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Group } from "@scm-manager/ui-types";
 import { DateFromNow, Checkbox } from "@scm-manager/ui-components";
 import GroupMember from "./GroupMember";
 
-type Props = {
+type Props = WithTranslation & {
   group: Group;
-
-  // Context props
-  t: (p: string) => string;
 };
 
 class Details extends React.Component<Props> {
@@ -75,4 +72,4 @@ class Details extends React.Component<Props> {
   }
 }
 
-export default translate("groups")(Details);
+export default withTranslation("groups")(Details);
diff --git a/scm-ui/ui-webapp/src/groups/components/table/GroupRow.tsx b/scm-ui/ui-webapp/src/groups/components/table/GroupRow.tsx
index 2ba8310ebb..2674811ae1 100644
--- a/scm-ui/ui-webapp/src/groups/components/table/GroupRow.tsx
+++ b/scm-ui/ui-webapp/src/groups/components/table/GroupRow.tsx
@@ -1,14 +1,11 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { Group } from "@scm-manager/ui-types";
 import { Icon } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   group: Group;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class GroupRow extends React.Component<Props> {
@@ -36,4 +33,4 @@ class GroupRow extends React.Component<Props> {
   }
 }
 
-export default translate("groups")(GroupRow);
+export default withTranslation("groups")(GroupRow);
diff --git a/scm-ui/ui-webapp/src/groups/components/table/GroupTable.tsx b/scm-ui/ui-webapp/src/groups/components/table/GroupTable.tsx
index 526659b25b..019f06fd5c 100644
--- a/scm-ui/ui-webapp/src/groups/components/table/GroupTable.tsx
+++ b/scm-ui/ui-webapp/src/groups/components/table/GroupTable.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import GroupRow from "./GroupRow";
 import { Group } from "@scm-manager/ui-types";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   groups: Group[];
 };
 
@@ -29,4 +28,4 @@ class GroupTable extends React.Component<Props> {
   }
 }
 
-export default translate("groups")(GroupTable);
+export default withTranslation("groups")(GroupTable);
diff --git a/scm-ui/ui-webapp/src/groups/containers/CreateGroup.tsx b/scm-ui/ui-webapp/src/groups/containers/CreateGroup.tsx
index 7a1b87dd1d..5d50de99cf 100644
--- a/scm-ui/ui-webapp/src/groups/containers/CreateGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/CreateGroup.tsx
@@ -1,16 +1,14 @@
 import React from "react";
-
-import { Page } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
-import GroupForm from "../components/GroupForm";
 import { connect } from "react-redux";
-import { createGroup, isCreateGroupPending, getCreateGroupFailure, createGroupReset } from "../modules/groups";
-import { Group } from "@scm-manager/ui-types";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
+import { Group } from "@scm-manager/ui-types";
+import { Page } from "@scm-manager/ui-components";
 import { getGroupsLink, getUserAutoCompleteLink } from "../../modules/indexResource";
+import { createGroup, isCreateGroupPending, getCreateGroupFailure, createGroupReset } from "../modules/groups";
+import GroupForm from "../components/GroupForm";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   createGroup: (link: string, group: Group, callback?: () => void) => void;
   history: History;
   loading?: boolean;
@@ -20,9 +18,7 @@ type Props = {
   autocompleteLink: string;
 };
 
-type State = {};
-
-class CreateGroup extends React.Component<Props, State> {
+class CreateGroup extends React.Component<Props> {
   componentDidMount() {
     this.props.resetForm();
   }
@@ -88,4 +84,4 @@ const mapStateToProps = state => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("groups")(CreateGroup));
+)(withTranslation("groups")(CreateGroup));
diff --git a/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx b/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx
index 1647f9f011..1917eca6a8 100644
--- a/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx
@@ -1,13 +1,13 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { History } from "history";
 import { Group } from "@scm-manager/ui-types";
 import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { deleteGroup, getDeleteGroupFailure, isDeleteGroupPending } from "../modules/groups";
-import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
-import { History } from "history";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   group: Group;
@@ -16,7 +16,6 @@ type Props = {
 
   // context props
   history: History;
-  t: (p: string) => string;
 };
 
 export class DeleteGroup extends React.Component<Props> {
@@ -96,4 +95,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(withRouter(translate("groups")(DeleteGroup)));
+)(withRouter(withTranslation("groups")(DeleteGroup)));
diff --git a/scm-ui/ui-webapp/src/groups/containers/Groups.tsx b/scm-ui/ui-webapp/src/groups/containers/Groups.tsx
index 0b4bf70af4..23defa8e49 100644
--- a/scm-ui/ui-webapp/src/groups/containers/Groups.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/Groups.tsx
@@ -1,16 +1,8 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { Group, PagedCollection } from "@scm-manager/ui-types";
-import {
-  fetchGroupsByPage,
-  getGroupsFromState,
-  isFetchGroupsPending,
-  getFetchGroupsFailure,
-  isPermittedToCreateGroups,
-  selectListAsCollection
-} from "../modules/groups";
 import {
   Page,
   PageActions,
@@ -20,10 +12,18 @@ import {
   urls,
   CreateButton
 } from "@scm-manager/ui-components";
-import { GroupTable } from "./../components/table";
 import { getGroupsLink } from "../../modules/indexResource";
+import {
+  fetchGroupsByPage,
+  getGroupsFromState,
+  isFetchGroupsPending,
+  getFetchGroupsFailure,
+  isPermittedToCreateGroups,
+  selectListAsCollection
+} from "../modules/groups";
+import { GroupTable } from "./../components/table";
 
-type Props = {
+type Props = WithTranslation & {
   groups: Group[];
   loading: boolean;
   error: Error;
@@ -33,7 +33,6 @@ type Props = {
   groupLink: string;
 
   // context objects
-  t: (p: string) => string;
   history: History;
   location: any;
 
@@ -124,4 +123,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("groups")(Groups));
+)(withTranslation("groups")(Groups));
diff --git a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
index 3cdab770c7..0eccff38f9 100644
--- a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
@@ -1,20 +1,19 @@
 import React from "react";
 import { connect } from "react-redux";
-import { Page, ErrorPage, Loading, Navigation, SubNavigation, Section, NavLink } from "@scm-manager/ui-components";
 import { Route } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { History } from "history";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { Group } from "@scm-manager/ui-types";
+import { Page, ErrorPage, Loading, Navigation, SubNavigation, Section, NavLink } from "@scm-manager/ui-components";
+import { getGroupsLink } from "../../modules/indexResource";
+import { fetchGroupByName, getGroupByName, isFetchGroupPending, getFetchGroupFailure } from "../modules/groups";
 import { Details } from "./../components/table";
 import { EditGroupNavLink, SetPermissionsNavLink } from "./../components/navLinks";
-import { Group } from "@scm-manager/ui-types";
-import { History } from "history";
-import { fetchGroupByName, getGroupByName, isFetchGroupPending, getFetchGroupFailure } from "../modules/groups";
-
-import { translate } from "react-i18next";
 import EditGroup from "./EditGroup";
-import { getGroupsLink } from "../../modules/indexResource";
 import SetPermissions from "../../permissions/components/SetPermissions";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
 
-type Props = {
+type Props = WithTranslation & {
   name: string;
   group: Group;
   loading: boolean;
@@ -25,7 +24,6 @@ type Props = {
   fetchGroupByName: (p1: string, p2: string) => void;
 
   // context objects
-  t: (p: string) => string;
   match: any;
   history: History;
 };
@@ -123,4 +121,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("groups")(SingleGroup));
+)(withTranslation("groups")(SingleGroup));
diff --git a/scm-ui/ui-webapp/src/permissions/components/PermissionCheckbox.tsx b/scm-ui/ui-webapp/src/permissions/components/PermissionCheckbox.tsx
index 7d88d0d7e3..505d65d7d1 100644
--- a/scm-ui/ui-webapp/src/permissions/components/PermissionCheckbox.tsx
+++ b/scm-ui/ui-webapp/src/permissions/components/PermissionCheckbox.tsx
@@ -1,13 +1,12 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Checkbox } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   permission: string;
   checked: boolean;
   onChange: (value: boolean, name: string) => void;
   disabled: boolean;
-  t: (p: string) => string;
 };
 
 class PermissionCheckbox extends React.Component<Props> {
@@ -36,4 +35,4 @@ class PermissionCheckbox extends React.Component<Props> {
   };
 }
 
-export default translate("plugins")(PermissionCheckbox);
+export default withTranslation("plugins")(PermissionCheckbox);
diff --git a/scm-ui/ui-webapp/src/permissions/components/SetPermissions.tsx b/scm-ui/ui-webapp/src/permissions/components/SetPermissions.tsx
index 99aabdeb1a..e9db6cac17 100644
--- a/scm-ui/ui-webapp/src/permissions/components/SetPermissions.tsx
+++ b/scm-ui/ui-webapp/src/permissions/components/SetPermissions.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { Link } from "@scm-manager/ui-types";
@@ -9,12 +9,9 @@ import { getLink } from "../../modules/indexResource";
 import { loadPermissionsForEntity, setPermissions } from "./handlePermissions";
 import PermissionCheckbox from "./PermissionCheckbox";
 
-type Props = {
+type Props = WithTranslation & {
   availablePermissionLink: string;
   selectedPermissionsLink: Link;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -189,4 +186,4 @@ const mapStateToProps = state => {
   };
 };
 
-export default connect(mapStateToProps)(translate("permissions")(SetPermissions));
+export default connect(mapStateToProps)(withTranslation("permissions")(SetPermissions));
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchButtonGroup.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchButtonGroup.tsx
index c2fe4fc5d7..782f88cb0c 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchButtonGroup.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchButtonGroup.tsx
@@ -1,14 +1,11 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository, Branch } from "@scm-manager/ui-types";
 import { ButtonAddons, Button } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   branch: Branch;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class BranchButtonGroup extends React.Component<Props> {
@@ -29,4 +26,4 @@ class BranchButtonGroup extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(BranchButtonGroup);
+export default withTranslation("repos")(BranchButtonGroup);
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchDetail.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchDetail.tsx
index 2b1bcfd91d..0fbcb7b4b9 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchDetail.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchDetail.tsx
@@ -1,14 +1,12 @@
 import React from "react";
 import { Repository, Branch } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import BranchButtonGroup from "./BranchButtonGroup";
 import DefaultBranchTag from "./DefaultBranchTag";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   branch: Branch;
-  // context props
-  t: (p: string) => string;
 };
 
 class BranchDetail extends React.Component<Props> {
@@ -28,4 +26,4 @@ class BranchDetail extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(BranchDetail);
+export default withTranslation("repos")(BranchDetail);
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchForm.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchForm.tsx
index bbc9f1f1a4..eecb1942ee 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchForm.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchForm.tsx
@@ -1,17 +1,16 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository, Branch, BranchRequest } from "@scm-manager/ui-types";
 import { Select, InputField, SubmitButton, validation as validator } from "@scm-manager/ui-components";
 import { orderBranches } from "../util/orderBranches";
 
-type Props = {
+type Props = WithTranslation & {
   submitForm: (p: BranchRequest) => void;
   repository: Repository;
   branches: Branch[];
   loading?: boolean;
   transmittedName?: string;
   disabled?: boolean;
-  t: (p: string) => string;
 };
 
 type State = {
@@ -112,4 +111,4 @@ class BranchForm extends React.Component<Props, State> {
   };
 }
 
-export default translate("repos")(BranchForm);
+export default withTranslation("repos")(BranchForm);
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchTable.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchTable.tsx
index c9fd7d99e1..000e58c2a0 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchTable.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchTable.tsx
@@ -1,11 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import BranchRow from "./BranchRow";
 import { Branch } from "@scm-manager/ui-types";
 
-type Props = {
+type Props = WithTranslation & {
   baseUrl: string;
-  t: (p: string) => string;
   branches: Branch[];
 };
 
@@ -36,4 +35,4 @@ class BranchTable extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(BranchTable);
+export default withTranslation("repos")(BranchTable);
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/DefaultBranchTag.tsx b/scm-ui/ui-webapp/src/repos/branches/components/DefaultBranchTag.tsx
index 51ff40d78d..d6147daffb 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/DefaultBranchTag.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/DefaultBranchTag.tsx
@@ -1,13 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import { Tag } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   defaultBranch?: boolean;
-
-  // context props
-  t: (p: string) => string;
 };
 
 const LeftMarginTag = styled(Tag)`
@@ -26,4 +23,4 @@ class DefaultBranchTag extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(DefaultBranchTag);
+export default withTranslation("repos")(DefaultBranchTag);
diff --git a/scm-ui/ui-webapp/src/repos/branches/containers/BranchesOverview.tsx b/scm-ui/ui-webapp/src/repos/branches/containers/BranchesOverview.tsx
index 433786338f..1d12a5db60 100644
--- a/scm-ui/ui-webapp/src/repos/branches/containers/BranchesOverview.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/containers/BranchesOverview.tsx
@@ -1,4 +1,10 @@
 import React from "react";
+import { connect } from "react-redux";
+import { compose } from "redux";
+import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { Branch, Repository } from "@scm-manager/ui-types";
+import { CreateButton, ErrorNotification, Loading, Notification, Subtitle } from "@scm-manager/ui-components";
 import {
   fetchBranches,
   getBranches,
@@ -7,15 +13,9 @@ import {
   isPermittedToCreateBranches
 } from "../modules/branches";
 import { orderBranches } from "../util/orderBranches";
-import { connect } from "react-redux";
-import { Branch, Repository } from "@scm-manager/ui-types";
-import { compose } from "redux";
-import { translate } from "react-i18next";
-import { withRouter } from "react-router-dom";
-import { CreateButton, ErrorNotification, Loading, Notification, Subtitle } from "@scm-manager/ui-components";
 import BranchTable from "../components/BranchTable";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   baseUrl: string;
   loading: boolean;
@@ -29,7 +29,6 @@ type Props = {
   // Context props
   history: any;
   match: any;
-  t: (p: string) => string;
 };
 
 class BranchesOverview extends React.Component<Props> {
@@ -101,7 +100,7 @@ const mapDispatchToProps = dispatch => {
 };
 
 export default compose(
-  translate("repos"),
+  withTranslation("repos"),
   withRouter,
   connect(
     mapStateToProps,
diff --git a/scm-ui/ui-webapp/src/repos/branches/containers/CreateBranch.tsx b/scm-ui/ui-webapp/src/repos/branches/containers/CreateBranch.tsx
index d1e997227b..8ae8640c62 100644
--- a/scm-ui/ui-webapp/src/repos/branches/containers/CreateBranch.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/containers/CreateBranch.tsx
@@ -1,8 +1,12 @@
 import React from "react";
-import { ErrorNotification, Loading, Subtitle } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
-import BranchForm from "../components/BranchForm";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import queryString from "query-string";
+import { History } from "history";
 import { Repository, Branch, BranchRequest } from "@scm-manager/ui-types";
+import { ErrorNotification, Loading, Subtitle } from "@scm-manager/ui-components";
+import BranchForm from "../components/BranchForm";
 import {
   fetchBranches,
   getBranches,
@@ -14,12 +18,8 @@ import {
   isFetchBranchesPending,
   getFetchBranchesFailure
 } from "../modules/branches";
-import { History } from "history";
-import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
-import queryString from "query-string";
 
-type Props = {
+type Props = WithTranslation & {
   loading?: boolean;
   error?: Error;
   repository: Repository;
@@ -38,7 +38,6 @@ type Props = {
   resetForm: (p: Repository) => void;
 
   // context objects
-  t: (p: string) => string;
   history: History;
   location: any;
 };
@@ -131,5 +130,5 @@ export default withRouter(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(translate("repos")(CreateBranch))
+  )(withTranslation("repos")(CreateBranch))
 );
diff --git a/scm-ui/ui-webapp/src/repos/components/EditRepoNavLink.tsx b/scm-ui/ui-webapp/src/repos/components/EditRepoNavLink.tsx
index ad242b85d0..f371ee32e9 100644
--- a/scm-ui/ui-webapp/src/repos/components/EditRepoNavLink.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/EditRepoNavLink.tsx
@@ -1,12 +1,11 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
 import { NavLink } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   editUrl: string;
-  t: (p: string) => string;
 };
 
 class EditRepoNavLink extends React.Component<Props> {
@@ -24,4 +23,4 @@ class EditRepoNavLink extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(EditRepoNavLink);
+export default withTranslation("repos")(EditRepoNavLink);
diff --git a/scm-ui/ui-webapp/src/repos/components/PermissionsNavLink.tsx b/scm-ui/ui-webapp/src/repos/components/PermissionsNavLink.tsx
index c49be359b6..16daa8df3d 100644
--- a/scm-ui/ui-webapp/src/repos/components/PermissionsNavLink.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/PermissionsNavLink.tsx
@@ -1,11 +1,10 @@
 import React from "react";
-import { NavLink } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
+import { NavLink } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   permissionUrl: string;
-  t: (p: string) => string;
   repository: Repository;
 };
 
@@ -22,4 +21,4 @@ class PermissionsNavLink extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(PermissionsNavLink);
+export default withTranslation("repos")(PermissionsNavLink);
diff --git a/scm-ui/ui-webapp/src/repos/components/RepositoryDetailTable.tsx b/scm-ui/ui-webapp/src/repos/components/RepositoryDetailTable.tsx
index 0a1476384f..4a3cdbe916 100644
--- a/scm-ui/ui-webapp/src/repos/components/RepositoryDetailTable.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/RepositoryDetailTable.tsx
@@ -1,12 +1,10 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
 import { MailLink, DateFromNow } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
-  // context props
-  t: (p: string) => string;
 };
 
 class RepositoryDetailTable extends React.Component<Props> {
@@ -51,4 +49,4 @@ class RepositoryDetailTable extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(RepositoryDetailTable);
+export default withTranslation("repos")(RepositoryDetailTable);
diff --git a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx b/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx
index 43ec1962c5..7a3c2bdad6 100644
--- a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Interpolate, translate } from "react-i18next";
+import { Trans, WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
@@ -17,12 +17,9 @@ import {
   Button
 } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   changeset: Changeset;
   repository: Repository;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -85,7 +82,7 @@ class ChangesetDetails extends React.Component<Props, State> {
                 <ChangesetAuthor changeset={changeset} />
               </p>
               <p>
-                <Interpolate i18nKey="changeset.summary" id={id} time={date} />
+                <Trans i18nKey="changeset.summary" values={{ id, time: date }} />
               </p>
             </div>
             <div className="media-right">{this.renderTags()}</div>
@@ -154,4 +151,4 @@ class ChangesetDetails extends React.Component<Props, State> {
   };
 }
 
-export default translate("repos")(ChangesetDetails);
+export default withTranslation("repos")(ChangesetDetails);
diff --git a/scm-ui/ui-webapp/src/repos/components/form/RepositoryForm.tsx b/scm-ui/ui-webapp/src/repos/components/form/RepositoryForm.tsx
index cfefb80683..681b2c91f2 100644
--- a/scm-ui/ui-webapp/src/repos/components/form/RepositoryForm.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/form/RepositoryForm.tsx
@@ -1,17 +1,16 @@
 import React from "react";
-import { translate } from "react-i18next";
-import { Subtitle, InputField, Select, SubmitButton, Textarea } from "@scm-manager/ui-components";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Repository, RepositoryType } from "@scm-manager/ui-types";
+import { Subtitle, InputField, Select, SubmitButton, Textarea } from "@scm-manager/ui-components";
 import * as validator from "./repositoryValidation";
 
-type Props = {
+type Props = WithTranslation & {
   submitForm: (p: Repository) => void;
   repository?: Repository;
   repositoryTypes: RepositoryType[];
   namespaceStrategy: string;
   loading?: boolean;
-  t: (p: string) => string;
 };
 
 type State = {
@@ -54,10 +53,8 @@ class RepositoryForm extends React.Component<Props, State> {
   }
 
   isFalsy(value) {
-    if (!value) {
-      return true;
-    }
-    return false;
+    return !value;
+
   }
 
   isValid = () => {
@@ -236,4 +233,4 @@ class RepositoryForm extends React.Component<Props, State> {
   };
 }
 
-export default translate("repos")(RepositoryForm);
+export default withTranslation("repos")(RepositoryForm);
diff --git a/scm-ui/ui-webapp/src/repos/containers/ChangesetView.tsx b/scm-ui/ui-webapp/src/repos/containers/ChangesetView.tsx
index 9fbcf0cae6..b165ceb0ad 100644
--- a/scm-ui/ui-webapp/src/repos/containers/ChangesetView.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/ChangesetView.tsx
@@ -1,7 +1,9 @@
 import React from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Changeset, Repository } from "@scm-manager/ui-types";
+import { ErrorPage, Loading } from "@scm-manager/ui-components";
 import {
   fetchChangesetIfNeeded,
   getChangeset,
@@ -9,10 +11,8 @@ import {
   isFetchChangesetPending
 } from "../modules/changesets";
 import ChangesetDetails from "../components/changesets/ChangesetDetails";
-import { translate } from "react-i18next";
-import { ErrorPage, Loading } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   id: string;
   changeset: Changeset;
   repository: Repository;
@@ -20,7 +20,6 @@ type Props = {
   error: Error;
   fetchChangesetIfNeeded: (repository: Repository, id: string) => void;
   match: any;
-  t: (p: string) => string;
 };
 
 class ChangesetView extends React.Component<Props> {
@@ -68,5 +67,5 @@ export default withRouter(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(translate("repos")(ChangesetView))
+  )(withTranslation("repos")(ChangesetView))
 );
diff --git a/scm-ui/ui-webapp/src/repos/containers/Changesets.tsx b/scm-ui/ui-webapp/src/repos/containers/Changesets.tsx
index 83527d5bd9..05cebb7a01 100644
--- a/scm-ui/ui-webapp/src/repos/containers/Changesets.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/Changesets.tsx
@@ -1,15 +1,9 @@
 import React from "react";
-import { withRouter } from "react-router-dom";
-import { Branch, Changeset, PagedCollection, Repository } from "@scm-manager/ui-types";
-import {
-  fetchChangesets,
-  getChangesets,
-  getFetchChangesetsFailure,
-  isFetchChangesetsPending,
-  selectListAsCollection
-} from "../modules/changesets";
-
 import { connect } from "react-redux";
+import { compose } from "redux";
+import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { Branch, Changeset, PagedCollection, Repository } from "@scm-manager/ui-types";
 import {
   ErrorNotification,
   getPageFromMatch,
@@ -18,10 +12,15 @@ import {
   Loading,
   Notification
 } from "@scm-manager/ui-components";
-import { compose } from "redux";
-import { translate } from "react-i18next";
+import {
+  fetchChangesets,
+  getChangesets,
+  getFetchChangesetsFailure,
+  isFetchChangesetsPending,
+  selectListAsCollection
+} from "../modules/changesets";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   branch: Branch;
   page: number;
@@ -37,7 +36,6 @@ type Props = {
 
   // context props
   match: any;
-  t: (p: string) => string;
 };
 
 class Changesets extends React.Component<Props> {
@@ -121,7 +119,7 @@ const mapStateToProps = (state: any, ownProps: Props) => {
 };
 
 export default compose(
-  translate("repos"),
+  withTranslation("repos"),
   withRouter,
   connect(
     mapStateToProps,
diff --git a/scm-ui/ui-webapp/src/repos/containers/ChangesetsRoot.tsx b/scm-ui/ui-webapp/src/repos/containers/ChangesetsRoot.tsx
index 27d28028ad..102e02b08e 100644
--- a/scm-ui/ui-webapp/src/repos/containers/ChangesetsRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/ChangesetsRoot.tsx
@@ -1,19 +1,19 @@
 import React from "react";
-import { Branch, Repository } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
-import { Route, withRouter } from "react-router-dom";
-import Changesets from "./Changesets";
+import { compose } from "redux";
 import { connect } from "react-redux";
+import { Route, withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { Branch, Repository } from "@scm-manager/ui-types";
 import { BranchSelector, ErrorNotification, Loading } from "@scm-manager/ui-components";
+import Changesets from "./Changesets";
 import {
   fetchBranches,
   getBranches,
   getFetchBranchesFailure,
   isFetchBranchesPending
 } from "../branches/modules/branches";
-import { compose } from "redux";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   baseUrl: string;
   selected: string;
@@ -31,7 +31,6 @@ type Props = {
   // Context props
   history: any; // TODO flow type
   match: any;
-  t: (p: string) => string;
 };
 
 class ChangesetsRoot extends React.Component<Props> {
@@ -151,7 +150,7 @@ const mapStateToProps = (state: any, ownProps: Props) => {
 
 export default compose(
   withRouter,
-  translate("repos"),
+  withTranslation("repos"),
   connect(
     mapStateToProps,
     mapDispatchToProps
diff --git a/scm-ui/ui-webapp/src/repos/containers/Create.tsx b/scm-ui/ui-webapp/src/repos/containers/Create.tsx
index 220eb92048..ec2eca0529 100644
--- a/scm-ui/ui-webapp/src/repos/containers/Create.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/Create.tsx
@@ -1,17 +1,17 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
-import { Page } from "@scm-manager/ui-components";
-import RepositoryForm from "../components/form";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { History } from "history";
 import { Repository, RepositoryType, NamespaceStrategies } from "@scm-manager/ui-types";
+import { Page } from "@scm-manager/ui-components";
 import {
   fetchRepositoryTypesIfNeeded,
   getFetchRepositoryTypesFailure,
   getRepositoryTypes,
   isFetchRepositoryTypesPending
 } from "../modules/repositoryTypes";
+import RepositoryForm from "../components/form";
 import { createRepo, createRepoReset, getCreateRepoFailure, isCreateRepoPending } from "../modules/repos";
-import { History } from "history";
 import { getRepositoriesLink } from "../../modules/indexResource";
 import {
   fetchNamespaceStrategiesIfNeeded,
@@ -20,7 +20,7 @@ import {
   isFetchNamespaceStrategiesPending
 } from "../../admin/modules/namespaceStrategies";
 
-type Props = {
+type Props = WithTranslation & {
   repositoryTypes: RepositoryType[];
   namespaceStrategies: NamespaceStrategies;
   pageLoading: boolean;
@@ -35,7 +35,6 @@ type Props = {
   resetForm: () => void;
 
   // context props
-  t: (p: string) => string;
   history: History;
 };
 
@@ -115,4 +114,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("repos")(Create));
+)(withTranslation("repos")(Create));
diff --git a/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx b/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
index 322e1caf50..c16cdb5966 100644
--- a/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
@@ -1,13 +1,13 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { History } from "history";
 import { Repository } from "@scm-manager/ui-types";
 import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { deleteRepo, getDeleteRepoFailure, isDeleteRepoPending } from "../modules/repos";
-import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
-import { History } from "history";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   repository: Repository;
@@ -16,7 +16,6 @@ type Props = {
 
   // context props
   history: History;
-  t: (p: string) => string;
 };
 
 class DeleteRepo extends React.Component<Props> {
@@ -98,4 +97,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(withRouter(translate("repos")(DeleteRepo)));
+)(withRouter(withTranslation("repos")(DeleteRepo)));
diff --git a/scm-ui/ui-webapp/src/repos/containers/Overview.tsx b/scm-ui/ui-webapp/src/repos/containers/Overview.tsx
index 120e10a00c..0b5b8d01da 100644
--- a/scm-ui/ui-webapp/src/repos/containers/Overview.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/Overview.tsx
@@ -1,16 +1,9 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
-import { History } from "history";
 import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { History } from "history";
 import { RepositoryCollection } from "@scm-manager/ui-types";
-import {
-  fetchReposByPage,
-  getFetchReposFailure,
-  getRepositoryCollection,
-  isAbleToCreateRepos,
-  isFetchReposPending
-} from "../modules/repos";
 import {
   Page,
   PageActions,
@@ -20,10 +13,17 @@ import {
   LinkPaginator,
   urls
 } from "@scm-manager/ui-components";
-import RepositoryList from "../components/list";
 import { getRepositoriesLink } from "../../modules/indexResource";
+import {
+  fetchReposByPage,
+  getFetchReposFailure,
+  getRepositoryCollection,
+  isAbleToCreateRepos,
+  isFetchReposPending
+} from "../modules/repos";
+import RepositoryList from "../components/list";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   showCreateButton: boolean;
@@ -32,7 +32,6 @@ type Props = {
   reposLink: string;
 
   // context props
-  t: (p: string) => string;
   history: History;
   location: any;
 
@@ -132,4 +131,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("repos")(withRouter(Overview)));
+)(withTranslation("repos")(withRouter(Overview)));
diff --git a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
index 950d4bfac6..ba974b3dfa 100644
--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
@@ -1,19 +1,17 @@
 import React from "react";
-import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos";
-
 import { connect } from "react-redux";
 import { Redirect, Route, Switch } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { History } from "history";
+import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Repository } from "@scm-manager/ui-types";
-
 import { ErrorPage, Loading, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos";
 import RepositoryDetails from "../components/RepositoryDetails";
 import EditRepo from "./EditRepo";
 import BranchesOverview from "../branches/containers/BranchesOverview";
 import CreateBranch from "../branches/containers/CreateBranch";
 import Permissions from "../permissions/containers/Permissions";
-
-import { History } from "history";
 import EditRepoNavLink from "../components/EditRepoNavLink";
 import BranchRoot from "../branches/containers/BranchRoot";
 import ChangesetsRoot from "./ChangesetsRoot";
@@ -22,9 +20,8 @@ import PermissionsNavLink from "../components/PermissionsNavLink";
 import Sources from "../sources/containers/Sources";
 import RepositoryNavLink from "../components/RepositoryNavLink";
 import { getLinks, getRepositoriesLink } from "../../modules/indexResource";
-import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 
-type Props = {
+type Props = WithTranslation & {
   namespace: string;
   name: string;
   repository: Repository;
@@ -37,7 +34,6 @@ type Props = {
   fetchRepoByName: (link: string, namespace: string, name: string) => void;
 
   // context props
-  t: (p: string) => string;
   history: History;
   match: any;
 };
@@ -45,7 +41,6 @@ type Props = {
 class RepositoryRoot extends React.Component<Props> {
   componentDidMount() {
     const { fetchRepoByName, namespace, name, repoLink } = this.props;
-
     fetchRepoByName(repoLink, namespace, name);
   }
 
@@ -237,4 +232,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("repos")(RepositoryRoot));
+)(withTranslation("repos")(RepositoryRoot));
diff --git a/scm-ui/ui-webapp/src/repos/permissions/components/PermissionCheckbox.tsx b/scm-ui/ui-webapp/src/repos/permissions/components/PermissionCheckbox.tsx
index bd09c923db..2f677d4deb 100644
--- a/scm-ui/ui-webapp/src/repos/permissions/components/PermissionCheckbox.tsx
+++ b/scm-ui/ui-webapp/src/repos/permissions/components/PermissionCheckbox.tsx
@@ -1,9 +1,8 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Checkbox } from "@scm-manager/ui-components";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   disabled: boolean;
   name: string;
   checked: boolean;
@@ -27,4 +26,4 @@ class PermissionCheckbox extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(PermissionCheckbox);
+export default withTranslation("plugins")(PermissionCheckbox);
diff --git a/scm-ui/ui-webapp/src/repos/permissions/components/RoleSelector.tsx b/scm-ui/ui-webapp/src/repos/permissions/components/RoleSelector.tsx
index ce57d9625b..f10a56bbe8 100644
--- a/scm-ui/ui-webapp/src/repos/permissions/components/RoleSelector.tsx
+++ b/scm-ui/ui-webapp/src/repos/permissions/components/RoleSelector.tsx
@@ -1,9 +1,8 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Select } from "@scm-manager/ui-components";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   availableRoles: string[];
   handleRoleChange: (p: string) => void;
   role: string;
@@ -42,4 +41,4 @@ class RoleSelector extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(RoleSelector);
+export default withTranslation("repos")(RoleSelector);
diff --git a/scm-ui/ui-webapp/src/repos/permissions/components/buttons/DeletePermissionButton.tsx b/scm-ui/ui-webapp/src/repos/permissions/components/buttons/DeletePermissionButton.tsx
index ae5a816a02..46848778e4 100644
--- a/scm-ui/ui-webapp/src/repos/permissions/components/buttons/DeletePermissionButton.tsx
+++ b/scm-ui/ui-webapp/src/repos/permissions/components/buttons/DeletePermissionButton.tsx
@@ -1,14 +1,13 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Permission } from "@scm-manager/ui-types";
 import { confirmAlert } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   permission: Permission;
   namespace: string;
   repoName: string;
   confirmDialog?: boolean;
-  t: (p: string) => string;
   deletePermission: (permission: Permission, namespace: string, repoName: string) => void;
   loading: boolean;
 };
@@ -61,4 +60,4 @@ class DeletePermissionButton extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(DeletePermissionButton);
+export default withTranslation("repos")(DeletePermissionButton);
diff --git a/scm-ui/ui-webapp/src/repos/permissions/containers/AdvancedPermissionsDialog.tsx b/scm-ui/ui-webapp/src/repos/permissions/containers/AdvancedPermissionsDialog.tsx
index 8f3406ef49..aa4d7aaa07 100644
--- a/scm-ui/ui-webapp/src/repos/permissions/containers/AdvancedPermissionsDialog.tsx
+++ b/scm-ui/ui-webapp/src/repos/permissions/containers/AdvancedPermissionsDialog.tsx
@@ -1,17 +1,14 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { ButtonGroup, Button, SubmitButton, Modal } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
 import PermissionCheckbox from "../components/PermissionCheckbox";
 
-type Props = {
+type Props = WithTranslation & {
   readOnly: boolean;
   availableVerbs: string[];
   selectedVerbs: string[];
   onSubmit: (p: string[]) => void;
   onClose: () => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -83,4 +80,4 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
   };
 }
 
-export default translate("repos")(AdvancedPermissionsDialog);
+export default withTranslation("repos")(AdvancedPermissionsDialog);
diff --git a/scm-ui/ui-webapp/src/repos/permissions/containers/CreatePermissionForm.tsx b/scm-ui/ui-webapp/src/repos/permissions/containers/CreatePermissionForm.tsx
index b7595d91fa..ed9c79b65f 100644
--- a/scm-ui/ui-webapp/src/repos/permissions/containers/CreatePermissionForm.tsx
+++ b/scm-ui/ui-webapp/src/repos/permissions/containers/CreatePermissionForm.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PermissionCollection, PermissionCreateEntry, RepositoryRole, SelectValue } from "@scm-manager/ui-types";
 import {
   Button,
@@ -15,7 +15,7 @@ import RoleSelector from "../components/RoleSelector";
 import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
 import { findVerbsForRole } from "../modules/permissions";
 
-type Props = {
+type Props = WithTranslation & {
   availableRoles: RepositoryRole[];
   availableVerbs: string[];
   createPermission: (permission: PermissionCreateEntry) => void;
@@ -23,9 +23,6 @@ type Props = {
   currentPermissions: PermissionCollection;
   groupAutocompleteLink: string;
   userAutocompleteLink: string;
-
-  // Context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -231,4 +228,4 @@ class CreatePermissionForm extends React.Component<Props, State> {
   };
 }
 
-export default translate("repos")(CreatePermissionForm);
+export default withTranslation("repos")(CreatePermissionForm);
diff --git a/scm-ui/ui-webapp/src/repos/permissions/containers/Permissions.tsx b/scm-ui/ui-webapp/src/repos/permissions/containers/Permissions.tsx
index c305e8a7c7..0c937075d9 100644
--- a/scm-ui/ui-webapp/src/repos/permissions/containers/Permissions.tsx
+++ b/scm-ui/ui-webapp/src/repos/permissions/containers/Permissions.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import {
   createPermission,
   createPermissionReset,
@@ -35,7 +35,7 @@ import {
   getUserAutoCompleteLink
 } from "../../../modules/indexResource";
 
-type Props = {
+type Props = WithTranslation & {
   availablePermissions: boolean;
   availableRepositoryRoles: RepositoryRole[];
   availableVerbs: string[];
@@ -52,7 +52,7 @@ type Props = {
   groupAutocompleteLink: string;
   userAutocompleteLink: string;
 
-  //dispatch functions
+  // dispatch functions
   fetchAvailablePermissionsIfNeeded: (repositoryRolesLink: string, repositoryVerbsLink: string) => void;
   fetchPermissions: (link: string, namespace: string, repoName: string) => void;
   createPermission: (
@@ -65,8 +65,8 @@ type Props = {
   createPermissionReset: (p1: string, p2: string) => void;
   modifyPermissionReset: (p1: string, p2: string) => void;
   deletePermissionReset: (p1: string, p2: string) => void;
+
   // context props
-  t: (p: string) => string;
   match: any;
   history: History;
 };
@@ -248,4 +248,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("repos")(Permissions));
+)(withTranslation("repos")(Permissions));
diff --git a/scm-ui/ui-webapp/src/repos/permissions/containers/SinglePermission.tsx b/scm-ui/ui-webapp/src/repos/permissions/containers/SinglePermission.tsx
index 42fef6bc68..4ac49674de 100644
--- a/scm-ui/ui-webapp/src/repos/permissions/containers/SinglePermission.tsx
+++ b/scm-ui/ui-webapp/src/repos/permissions/containers/SinglePermission.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import { History } from "history";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import { RepositoryRole, Permission } from "@scm-manager/ui-types";
 import { Button, Icon } from "@scm-manager/ui-components";
@@ -16,13 +16,12 @@ import DeletePermissionButton from "../components/buttons/DeletePermissionButton
 import RoleSelector from "../components/RoleSelector";
 import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
 
-type Props = {
+type Props = WithTranslation & {
   availableRepositoryRoles: RepositoryRole[];
   availableRepositoryVerbs: string[];
   submitForm: (p: Permission) => void;
   modifyPermission: (permission: Permission, namespace: string, name: string) => void;
   permission: Permission;
-  t: (p: string) => string;
   namespace: string;
   repoName: string;
   match: any;
@@ -233,4 +232,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("repos")(SinglePermission));
+)(withTranslation("repos")(SinglePermission));
diff --git a/scm-ui/ui-webapp/src/repos/sources/components/FileTree.tsx b/scm-ui/ui-webapp/src/repos/sources/components/FileTree.tsx
index 02783112e1..575544e1f5 100644
--- a/scm-ui/ui-webapp/src/repos/sources/components/FileTree.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/components/FileTree.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import { binder } from "@scm-manager/ui-extensions";
 import { Repository, File } from "@scm-manager/ui-types";
@@ -10,7 +10,7 @@ import { ErrorNotification, Loading, Notification } from "@scm-manager/ui-compon
 import { getFetchSourcesFailure, isFetchSourcesPending, getSources } from "../modules/sources";
 import FileTreeLeaf from "./FileTreeLeaf";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   tree: File;
@@ -20,7 +20,6 @@ type Props = {
   baseUrl: string;
 
   // context props
-  t: (p: string) => string;
   match: any;
 };
 
@@ -142,4 +141,4 @@ const mapStateToProps = (state: any, ownProps: Props) => {
 export default compose(
   withRouter,
   connect(mapStateToProps)
-)(translate("repos")(FileTree));
+)(withTranslation("repos")(FileTree));
diff --git a/scm-ui/ui-webapp/src/repos/sources/components/content/DownloadViewer.tsx b/scm-ui/ui-webapp/src/repos/sources/components/content/DownloadViewer.tsx
index 723f253ba7..3d0263b1d8 100644
--- a/scm-ui/ui-webapp/src/repos/sources/components/content/DownloadViewer.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/components/content/DownloadViewer.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { File } from "@scm-manager/ui-types";
 import { DownloadButton } from "@scm-manager/ui-components";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   file: File;
 };
 
@@ -19,4 +18,4 @@ class DownloadViewer extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(DownloadViewer);
+export default withTranslation("repos")(DownloadViewer);
diff --git a/scm-ui/ui-webapp/src/repos/sources/components/content/FileButtonAddons.tsx b/scm-ui/ui-webapp/src/repos/sources/components/content/FileButtonAddons.tsx
index 859f5ca8cc..dd52604611 100644
--- a/scm-ui/ui-webapp/src/repos/sources/components/content/FileButtonAddons.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/components/content/FileButtonAddons.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { ButtonAddons, Button } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   className?: string;
-  t: (p: string) => string;
   historyIsSelected: boolean;
   showHistory: (p: boolean) => void;
 };
@@ -46,4 +45,4 @@ class FileButtonAddons extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(FileButtonAddons);
+export default withTranslation("repos")(FileButtonAddons);
diff --git a/scm-ui/ui-webapp/src/repos/sources/components/content/ImageViewer.tsx b/scm-ui/ui-webapp/src/repos/sources/components/content/ImageViewer.tsx
index 5591b90180..bd536458a6 100644
--- a/scm-ui/ui-webapp/src/repos/sources/components/content/ImageViewer.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/components/content/ImageViewer.tsx
@@ -1,9 +1,8 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { File } from "@scm-manager/ui-types";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   file: File;
 };
 
@@ -20,4 +19,4 @@ class ImageViewer extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ImageViewer);
+export default withTranslation("repos")(ImageViewer);
diff --git a/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx b/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx
index 958210c62b..a8d022047b 100644
--- a/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx
@@ -1,11 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { apiClient, SyntaxHighlighter } from "@scm-manager/ui-components";
 import { File } from "@scm-manager/ui-types";
 import { ErrorNotification, Loading } from "@scm-manager/ui-components";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   file: File;
   language: string;
 };
@@ -85,4 +84,4 @@ export function getContent(url: string) {
     });
 }
 
-export default translate("repos")(SourcecodeViewer);
+export default withTranslation("repos")(SourcecodeViewer);
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
index 8753151fdb..59f93e8453 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
@@ -11,15 +11,12 @@ import FileButtonAddons from "../components/content/FileButtonAddons";
 import SourcesView from "./SourcesView";
 import HistoryView from "./HistoryView";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   file: File;
   repository: Repository;
   revision: string;
   path: string;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -209,4 +206,4 @@ const mapStateToProps = (state: any, ownProps: Props) => {
   };
 };
 
-export default connect(mapStateToProps)(translate("repos")(Content));
+export default connect(mapStateToProps)(withTranslation("repos")(Content));
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/Sources.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/Sources.tsx
index 922dc6c59d..33626ddcc4 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Sources.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Sources.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Branch, Repository } from "@scm-manager/ui-types";
-import FileTree from "../components/FileTree";
 import { BranchSelector, Breadcrumb, ErrorNotification, Loading } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import FileTree from "../components/FileTree";
 import {
   fetchBranches,
   getBranches,
@@ -15,7 +15,7 @@ import { compose } from "redux";
 import Content from "./Content";
 import { fetchSources, isDirectory } from "../modules/sources";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   loading: boolean;
   error: Error;
@@ -33,7 +33,6 @@ type Props = {
   history: any;
   match: any;
   location: any;
-  t: (p: string) => string;
 };
 
 type State = {
@@ -203,7 +202,7 @@ const mapDispatchToProps = dispatch => {
 };
 
 export default compose(
-  translate("repos"),
+  withTranslation("repos"),
   withRouter,
   connect(
     mapStateToProps,
diff --git a/scm-ui/ui-webapp/src/users/components/SetUserPassword.tsx b/scm-ui/ui-webapp/src/users/components/SetUserPassword.tsx
index 6f2e1ebb60..f060c7494d 100644
--- a/scm-ui/ui-webapp/src/users/components/SetUserPassword.tsx
+++ b/scm-ui/ui-webapp/src/users/components/SetUserPassword.tsx
@@ -1,12 +1,11 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { User } from "@scm-manager/ui-types";
 import { SubmitButton, Notification, ErrorNotification, PasswordConfirmation } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
 import { setPassword } from "./setPassword";
 
-type Props = {
+type Props = WithTranslation & {
   user: User;
-  t: (p: string) => string;
 };
 
 type State = {
@@ -128,4 +127,4 @@ class SetUserPassword extends React.Component<Props, State> {
   };
 }
 
-export default translate("users")(SetUserPassword);
+export default withTranslation("users")(SetUserPassword);
diff --git a/scm-ui/ui-webapp/src/users/components/UserForm.tsx b/scm-ui/ui-webapp/src/users/components/UserForm.tsx
index 395521fd45..db1fc50ea1 100644
--- a/scm-ui/ui-webapp/src/users/components/UserForm.tsx
+++ b/scm-ui/ui-webapp/src/users/components/UserForm.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { User } from "@scm-manager/ui-types";
 import {
   Subtitle,
@@ -11,11 +11,10 @@ import {
 } from "@scm-manager/ui-components";
 import * as userValidator from "./userValidation";
 
-type Props = {
+type Props = WithTranslation & {
   submitForm: (p: User) => void;
   user?: User;
   loading?: boolean;
-  t: (p: string) => string;
 };
 
 type State = {
@@ -58,10 +57,7 @@ class UserForm extends React.Component<Props, State> {
   }
 
   isFalsy(value) {
-    if (!value) {
-      return true;
-    }
-    return false;
+    return !value;
   }
 
   createUserComponentsAreInvalid = () => {
@@ -230,4 +226,4 @@ class UserForm extends React.Component<Props, State> {
   };
 }
 
-export default translate("users")(UserForm);
+export default withTranslation("users")(UserForm);
diff --git a/scm-ui/ui-webapp/src/users/components/navLinks/EditUserNavLink.tsx b/scm-ui/ui-webapp/src/users/components/navLinks/EditUserNavLink.tsx
index cb552f3bfc..418412c5f8 100644
--- a/scm-ui/ui-webapp/src/users/components/navLinks/EditUserNavLink.tsx
+++ b/scm-ui/ui-webapp/src/users/components/navLinks/EditUserNavLink.tsx
@@ -1,12 +1,11 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { User } from "@scm-manager/ui-types";
 import { NavLink } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   user: User;
   editUrl: string;
-  t: (p: string) => string;
 };
 
 class EditUserNavLink extends React.Component<Props> {
@@ -24,4 +23,4 @@ class EditUserNavLink extends React.Component<Props> {
   }
 }
 
-export default translate("users")(EditUserNavLink);
+export default withTranslation("users")(EditUserNavLink);
diff --git a/scm-ui/ui-webapp/src/users/components/navLinks/SetPasswordNavLink.tsx b/scm-ui/ui-webapp/src/users/components/navLinks/SetPasswordNavLink.tsx
index b9a9ef5510..8fd3b390f6 100644
--- a/scm-ui/ui-webapp/src/users/components/navLinks/SetPasswordNavLink.tsx
+++ b/scm-ui/ui-webapp/src/users/components/navLinks/SetPasswordNavLink.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { User } from "@scm-manager/ui-types";
 import { NavLink } from "@scm-manager/ui-components";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   user: User;
   passwordUrl: string;
 };
@@ -24,4 +23,4 @@ class ChangePasswordNavLink extends React.Component<Props> {
   };
 }
 
-export default translate("users")(ChangePasswordNavLink);
+export default withTranslation("users")(ChangePasswordNavLink);
diff --git a/scm-ui/ui-webapp/src/users/components/navLinks/SetPermissionsNavLink.tsx b/scm-ui/ui-webapp/src/users/components/navLinks/SetPermissionsNavLink.tsx
index 917af1a7b3..2fa3b185e9 100644
--- a/scm-ui/ui-webapp/src/users/components/navLinks/SetPermissionsNavLink.tsx
+++ b/scm-ui/ui-webapp/src/users/components/navLinks/SetPermissionsNavLink.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { User } from "@scm-manager/ui-types";
 import { NavLink } from "@scm-manager/ui-components";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   user: User;
   permissionsUrl: string;
 };
@@ -24,4 +23,4 @@ class ChangePermissionNavLink extends React.Component<Props> {
   };
 }
 
-export default translate("users")(ChangePermissionNavLink);
+export default withTranslation("users")(ChangePermissionNavLink);
diff --git a/scm-ui/ui-webapp/src/users/components/table/Details.tsx b/scm-ui/ui-webapp/src/users/components/table/Details.tsx
index 6b165140e4..3470d0eed4 100644
--- a/scm-ui/ui-webapp/src/users/components/table/Details.tsx
+++ b/scm-ui/ui-webapp/src/users/components/table/Details.tsx
@@ -1,11 +1,10 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { User } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
 import { Checkbox, MailLink, DateFromNow } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   user: User;
-  t: (p: string) => string;
 };
 
 class Details extends React.Component<Props> {
@@ -56,4 +55,4 @@ class Details extends React.Component<Props> {
   }
 }
 
-export default translate("users")(Details);
+export default withTranslation("users")(Details);
diff --git a/scm-ui/ui-webapp/src/users/components/table/UserRow.tsx b/scm-ui/ui-webapp/src/users/components/table/UserRow.tsx
index 4b237da804..17e5230a89 100644
--- a/scm-ui/ui-webapp/src/users/components/table/UserRow.tsx
+++ b/scm-ui/ui-webapp/src/users/components/table/UserRow.tsx
@@ -1,14 +1,11 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { User } from "@scm-manager/ui-types";
 import { Icon } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   user: User;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class UserRow extends React.Component<Props> {
@@ -39,4 +36,4 @@ class UserRow extends React.Component<Props> {
   }
 }
 
-export default translate("users")(UserRow);
+export default withTranslation("users")(UserRow);
diff --git a/scm-ui/ui-webapp/src/users/components/table/UserTable.tsx b/scm-ui/ui-webapp/src/users/components/table/UserTable.tsx
index 93a569c465..118fae4d29 100644
--- a/scm-ui/ui-webapp/src/users/components/table/UserTable.tsx
+++ b/scm-ui/ui-webapp/src/users/components/table/UserTable.tsx
@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
-import UserRow from "./UserRow";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { User } from "@scm-manager/ui-types";
+import UserRow from "./UserRow";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   users: User[];
 };
 
@@ -30,4 +29,4 @@ class UserTable extends React.Component<Props> {
   }
 }
 
-export default translate("users")(UserTable);
+export default withTranslation("users")(UserTable);
diff --git a/scm-ui/ui-webapp/src/users/containers/CreateUser.tsx b/scm-ui/ui-webapp/src/users/containers/CreateUser.tsx
index cd716421f4..66a48498ed 100644
--- a/scm-ui/ui-webapp/src/users/containers/CreateUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/CreateUser.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 import { connect } from "react-redux";
-import UserForm from "../components/UserForm";
-import { User } from "@scm-manager/ui-types";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
-import { createUser, createUserReset, isCreateUserPending, getCreateUserFailure } from "../modules/users";
+import { User } from "@scm-manager/ui-types";
 import { Page } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
 import { getUsersLink } from "../../modules/indexResource";
+import { createUser, createUserReset, isCreateUserPending, getCreateUserFailure } from "../modules/users";
+import UserForm from "../components/UserForm";
 
-type Props = {
+type Props = WithTranslation & {
   loading?: boolean;
   error?: Error;
   usersLink: string;
@@ -18,7 +18,6 @@ type Props = {
   resetForm: () => void;
 
   // context objects
-  t: (p: string) => string;
   history: History;
 };
 
@@ -72,4 +71,4 @@ const mapStateToProps = (state, ownProps) => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("users")(CreateUser));
+)(withTranslation("users")(CreateUser));
diff --git a/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx b/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx
index 281b7420ce..c62ec9f28b 100644
--- a/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/DeleteUser.tsx
@@ -1,13 +1,13 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { History } from "history";
 import { User } from "@scm-manager/ui-types";
 import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { deleteUser, getDeleteUserFailure, isDeleteUserPending } from "../modules/users";
-import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
-import { History } from "history";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   user: User;
@@ -16,7 +16,6 @@ type Props = {
 
   // context props
   history: History;
-  t: (p: string) => string;
 };
 
 class DeleteUser extends React.Component<Props> {
@@ -96,4 +95,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(withRouter(translate("users")(DeleteUser)));
+)(withRouter(withTranslation("users")(DeleteUser)));
diff --git a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
index 45f7552c25..fac65b369c 100644
--- a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
@@ -1,20 +1,20 @@
 import React from "react";
 import { connect } from "react-redux";
-import { Page, Loading, Navigation, SubNavigation, Section, NavLink, ErrorPage } from "@scm-manager/ui-components";
 import { Route } from "react-router-dom";
+import { History } from "history";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { User } from "@scm-manager/ui-types";
+import { Page, Loading, Navigation, SubNavigation, Section, NavLink, ErrorPage } from "@scm-manager/ui-components";
 import { Details } from "./../components/table";
 import EditUser from "./EditUser";
-import { User } from "@scm-manager/ui-types";
-import { History } from "history";
 import { fetchUserByName, getUserByName, isFetchUserPending, getFetchUserFailure } from "../modules/users";
 import { EditUserNavLink, SetPasswordNavLink, SetPermissionsNavLink } from "./../components/navLinks";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { getUsersLink } from "../../modules/indexResource";
 import SetUserPassword from "../components/SetUserPassword";
 import SetPermissions from "../../permissions/components/SetPermissions";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
 
-type Props = {
+type Props = WithTranslation & {
   name: string;
   user: User;
   loading: boolean;
@@ -25,7 +25,6 @@ type Props = {
   fetchUserByName: (p1: string, p2: string) => void;
 
   // context objects
-  t: (p: string) => string;
   match: any;
   history: History;
 };
@@ -122,4 +121,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("users")(SingleUser));
+)(withTranslation("users")(SingleUser));
diff --git a/scm-ui/ui-webapp/src/users/containers/Users.tsx b/scm-ui/ui-webapp/src/users/containers/Users.tsx
index 4e9a0c3970..bb97eab1b4 100644
--- a/scm-ui/ui-webapp/src/users/containers/Users.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/Users.tsx
@@ -1,16 +1,8 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { User, PagedCollection } from "@scm-manager/ui-types";
-import {
-  fetchUsersByPage,
-  getUsersFromState,
-  selectListAsCollection,
-  isPermittedToCreateUsers,
-  isFetchUsersPending,
-  getFetchUsersFailure
-} from "../modules/users";
 import {
   Page,
   PageActions,
@@ -20,10 +12,18 @@ import {
   urls,
   CreateButton
 } from "@scm-manager/ui-components";
-import { UserTable } from "./../components/table";
 import { getUsersLink } from "../../modules/indexResource";
+import {
+  fetchUsersByPage,
+  getUsersFromState,
+  selectListAsCollection,
+  isPermittedToCreateUsers,
+  isFetchUsersPending,
+  getFetchUsersFailure
+} from "../modules/users";
+import { UserTable } from "./../components/table";
 
-type Props = {
+type Props = WithTranslation & {
   users: User[];
   loading: boolean;
   error: Error;
@@ -33,7 +33,6 @@ type Props = {
   usersLink: string;
 
   // context objects
-  t: (p: string) => string;
   history: History;
   location: any;
 
@@ -124,4 +123,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("users")(Users));
+)(withTranslation("users")(Users));