diff --git a/scm-ui/public/locales/de/repos.json b/scm-ui/public/locales/de/repos.json
index f3fe2d162e..6170c9021f 100644
--- a/scm-ui/public/locales/de/repos.json
+++ b/scm-ui/public/locales/de/repos.json
@@ -63,7 +63,8 @@
   "branch": {
     "name": "Name:",
     "commits": "Commits",
-    "sources": "Sources"
+    "sources": "Sources",
+    "defaultTag": "Default"
   },
   "changesets": {
     "errorTitle": "Fehler",
diff --git a/scm-ui/public/locales/en/repos.json b/scm-ui/public/locales/en/repos.json
index ac5cbfe6e1..4eeddea8b2 100644
--- a/scm-ui/public/locales/en/repos.json
+++ b/scm-ui/public/locales/en/repos.json
@@ -63,7 +63,8 @@
   "branch": {
     "name": "Name:",
     "commits": "Commits",
-    "sources": "Sources"
+    "sources": "Sources",
+    "defaultTag": "Default"
   },
   "changesets": {
     "errorTitle": "Error",
diff --git a/scm-ui/src/repos/branches/components/BranchDetail.js b/scm-ui/src/repos/branches/components/BranchDetail.js
index 8941e0abef..86b142d9da 100644
--- a/scm-ui/src/repos/branches/components/BranchDetail.js
+++ b/scm-ui/src/repos/branches/components/BranchDetail.js
@@ -2,23 +2,14 @@
 import React from "react";
 import type { Repository, Branch } from "@scm-manager/ui-types";
 import { translate } from "react-i18next";
-import injectSheet from "react-jss";
-import classNames from "classnames";
 import BranchButtonGroup from "./BranchButtonGroup";
+import DefaultBranchTag from "./DefaultBranchTag";
 
 type Props = {
   repository: Repository,
   branch: Branch,
   // context props
-  t: string => string,
-  classes: any
-};
-
-const styles = {
-  tag: {
-    marginLeft: "0.75rem",
-    verticalAlign: "inherit"
-  }
+  t: string => string
 };
 
 class BranchDetail extends React.Component<Props> {
@@ -27,25 +18,16 @@ class BranchDetail extends React.Component<Props> {
 
     return (
       <div className="media">
-        <div className="media-content subtitle"><strong>{t("branch.name")}</strong> {branch.name} {this.renderDefaultBranch()}</div>
+        <div className="media-content subtitle">
+          <strong>{t("branch.name")}</strong> {branch.name}{" "}
+          <DefaultBranchTag defaultBranch={branch.defaultBranch} />
+        </div>
         <div className="media-right">
           <BranchButtonGroup repository={repository} branch={branch} />
         </div>
       </div>
     );
   }
-
-  renderDefaultBranch() {
-    const { branch, classes } = this.props;
-
-    let defaultLabel = null;
-    if (branch.defaultBranch) {
-      defaultLabel = (
-        <span className={classNames("tag is-dark", classes.tag)}>Default</span>
-      );
-    }
-    return defaultLabel;
-  }
 }
 
-export default injectSheet(styles)(translate("repos")(BranchDetail));
+export default translate("repos")(BranchDetail);
diff --git a/scm-ui/src/repos/branches/components/BranchRow.js b/scm-ui/src/repos/branches/components/BranchRow.js
index d8f70575b3..025e8f2742 100644
--- a/scm-ui/src/repos/branches/components/BranchRow.js
+++ b/scm-ui/src/repos/branches/components/BranchRow.js
@@ -2,33 +2,18 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import type { Branch } from "@scm-manager/ui-types";
-import injectSheet from "react-jss";
-import classNames from "classnames";
+import DefaultBranchTag from "./DefaultBranchTag";
 
 type Props = {
   baseUrl: string,
-  branch: Branch,
-  classes: any
-};
-
-const styles = {
-  tag: {
-    marginLeft: "0.75rem",
-    verticalAlign: "inherit"
-  }
+  branch: Branch
 };
 
 class BranchRow extends React.Component<Props> {
   renderLink(to: string, label: string, defaultBranch?: boolean) {
-    const { classes } = this.props;
-
-    let showLabel = null;
-    if (defaultBranch) {
-      showLabel = <span className={classNames("tag is-dark", classes.tag)}>Default</span>;
-    }
     return (
       <Link to={to}>
-        {label} {showLabel}
+        {label} <DefaultBranchTag defaultBranch={defaultBranch} />
       </Link>
     );
   }
@@ -36,12 +21,12 @@ class BranchRow extends React.Component<Props> {
   render() {
     const { baseUrl, branch } = this.props;
     const to = `${baseUrl}/${encodeURIComponent(branch.name)}/info`;
-      return (
-        <tr>
-          <td>{this.renderLink(to, branch.name, branch.defaultBranch)}</td>
-        </tr>
-      );
+    return (
+      <tr>
+        <td>{this.renderLink(to, branch.name, branch.defaultBranch)}</td>
+      </tr>
+    );
   }
 }
 
-export default injectSheet(styles)(BranchRow);
+export default BranchRow;
diff --git a/scm-ui/src/repos/branches/components/DefaultBranchTag.js b/scm-ui/src/repos/branches/components/DefaultBranchTag.js
new file mode 100644
index 0000000000..18be6d21f8
--- /dev/null
+++ b/scm-ui/src/repos/branches/components/DefaultBranchTag.js
@@ -0,0 +1,35 @@
+//@flow
+import React from "react";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+import { translate } from "react-i18next";
+
+type Props = {
+  defaultBranch?: boolean,
+  classes: any,
+  t: string => string
+};
+
+const styles = {
+  tag: {
+    marginLeft: "0.75rem",
+    verticalAlign: "inherit"
+  }
+};
+
+class DefaultBranchTag extends React.Component<Props> {
+  render() {
+    const { defaultBranch, classes, t } = this.props;
+
+    if (defaultBranch) {
+      return (
+        <span className={classNames("tag is-dark", classes.tag)}>
+          {t("branch.defaultTag")}
+        </span>
+      );
+    }
+    return null;
+  }
+}
+
+export default injectSheet(styles)(translate("repos")(DefaultBranchTag));