diff --git a/scm-ui/src/admin/roles/components/SystemRoleTag.js b/scm-ui/src/admin/roles/components/SystemRoleTag.js
index f1e8b0781b..9ee4434822 100644
--- a/scm-ui/src/admin/roles/components/SystemRoleTag.js
+++ b/scm-ui/src/admin/roles/components/SystemRoleTag.js
@@ -1,8 +1,8 @@
 //@flow
 import React from "react";
 import injectSheet from "react-jss";
-import classNames from "classnames";
 import { translate } from "react-i18next";
+import { Tag } from "@scm-manager/ui-components";
 
 type Props = {
   system?: boolean,
@@ -25,9 +25,11 @@ class SystemRoleTag extends React.Component<Props> {
 
     if (system) {
       return (
-        <span className={classNames("tag is-dark", classes.tag)}>
-          {t("repositoryRole.system")}
-        </span>
+        <Tag
+          className={classes.tag}
+          color="dark"
+          label={t("repositoryRole.system")}
+        />
       );
     }
     return null;
diff --git a/scm-ui/src/repos/branches/components/DefaultBranchTag.js b/scm-ui/src/repos/branches/components/DefaultBranchTag.js
index 18be6d21f8..4a549426cf 100644
--- a/scm-ui/src/repos/branches/components/DefaultBranchTag.js
+++ b/scm-ui/src/repos/branches/components/DefaultBranchTag.js
@@ -1,11 +1,13 @@
 //@flow
 import React from "react";
 import injectSheet from "react-jss";
-import classNames from "classnames";
 import { translate } from "react-i18next";
+import { Tag } from "@scm-manager/ui-components";
 
 type Props = {
   defaultBranch?: boolean,
+
+  // context props
   classes: any,
   t: string => string
 };
@@ -23,9 +25,11 @@ class DefaultBranchTag extends React.Component<Props> {
 
     if (defaultBranch) {
       return (
-        <span className={classNames("tag is-dark", classes.tag)}>
-          {t("branch.defaultTag")}
-        </span>
+        <Tag
+          className={classes.tag}
+          color="dark"
+          label={t("branch.defaultTag")}
+        />
       );
     }
     return null;