diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchCommitDateCommitter.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchCommitDateCommitter.tsx
new file mode 100644
index 0000000000..8f5ba88305
--- /dev/null
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchCommitDateCommitter.tsx
@@ -0,0 +1,47 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FC } from "react";
+import { Branch } from "@scm-manager/ui-types";
+import { DateFromNow } from "@scm-manager/ui-components";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+
+const BranchCommitDateCommitter: FC<{ branch: Branch }> = ({ branch }) => {
+  const [t] = useTranslation("repos");
+
+  const committedAt = <DateFromNow className={classNames("is-size-7", "has-text-grey")} date={branch.lastCommitDate} />;
+  if (branch.lastCommitter?.name) {
+    return (
+      <>
+        {t("branches.table.lastCommit")} {committedAt}{" "}
+        {t("branches.table.lastCommitter", { name: branch.lastCommitter?.name })}
+      </>
+    );
+  } else {
+    return committedAt;
+  }
+};
+
+export default BranchCommitDateCommitter;
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 583171b5ce..e5defc75ea 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchDetail.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchDetail.tsx
@@ -25,11 +25,12 @@ import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { Branch, Repository } from "@scm-manager/ui-types";
-import { Subtitle, DateFromNow, SmallLoadingSpinner } from "@scm-manager/ui-components";
+import { Subtitle, SmallLoadingSpinner } from "@scm-manager/ui-components";
 import BranchButtonGroup from "./BranchButtonGroup";
 import DefaultBranchTag from "./DefaultBranchTag";
 import AheadBehindTag from "./AheadBehindTag";
 import { useBranchDetails } from "@scm-manager/ui-api";
+import BranchCommitDateCommitter from "./BranchCommitDateCommitter";
 
 type Props = {
   repository: Repository;
@@ -63,10 +64,9 @@ const BranchDetail: FC<Props> = ({ repository, branch }) => {
           )}
         >
           <strong className="mr-1">{t("branch.name")}</strong> <Subtitle className="mb-0">{branch.name}</Subtitle>
-          <DefaultBranchTag defaultBranch={branch.defaultBranch} />
+          <DefaultBranchTag className={"ml-2"} defaultBranch={branch.defaultBranch} />
           <div className={classNames("is-ellipsis-overflow", "is-size-7", "ml-2")}>
-            {t("branches.overview.lastCommit")}{" "}
-            <DateFromNow className={classNames("is-size-7", "has-text-grey")} date={branch.lastCommitDate} />
+            <BranchCommitDateCommitter branch={branch} />
           </div>
         </div>
         <div className="media-right">
diff --git a/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx b/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx
index 02d97c43a9..f1ee1d5a5f 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchRow.tsx
@@ -26,10 +26,11 @@ import { Link as ReactLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { Branch, BranchDetails, Link, Repository } from "@scm-manager/ui-types";
-import { DateFromNow, Icon, SmallLoadingSpinner } from "@scm-manager/ui-components";
+import { Icon, SmallLoadingSpinner } from "@scm-manager/ui-components";
 import { binder } from "@scm-manager/ui-extensions";
 import DefaultBranchTag from "./DefaultBranchTag";
 import AheadBehindTag from "./AheadBehindTag";
+import BranchCommitDateCommitter from "./BranchCommitDateCommitter";
 
 type Props = {
   repository: Repository;
@@ -67,23 +68,6 @@ const BranchRow: FC<Props> = ({ repository, baseUrl, branch, onDelete, details }
     return <SmallLoadingSpinner />;
   };
 
-  const committedAt = (
-    <>
-      {t("branches.table.lastCommit")} <DateFromNow date={branch.lastCommitDate} />
-    </>
-  );
-
-  let committedAtBy;
-  if (branch.lastCommitter?.name) {
-    committedAtBy = (
-      <>
-        {committedAt} {t("branches.table.lastCommitter", { name: branch.lastCommitter?.name })}
-      </>
-    );
-  } else {
-    committedAtBy = committedAt;
-  }
-
   const extensionProps = { repository, branch, details };
   return (
     <tr>
@@ -93,7 +77,7 @@ const BranchRow: FC<Props> = ({ repository, baseUrl, branch, onDelete, details }
         </ReactLink>
         {branch.lastCommitDate && (
           <span className={classNames("has-text-grey", "is-ellipsis-overflow", "is-size-7", "ml-4")}>
-            {committedAtBy}
+            <BranchCommitDateCommitter branch={branch} />
           </span>
         )}
       </td>
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 7b58f73e35..8c38cc30f8 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/DefaultBranchTag.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/DefaultBranchTag.tsx
@@ -28,6 +28,7 @@ import styled from "styled-components";
 
 type Props = WithTranslation & {
   defaultBranch?: boolean;
+  className?: string;
 };
 
 const DefaultTag = styled(Tag)`
@@ -36,10 +37,12 @@ const DefaultTag = styled(Tag)`
 
 class DefaultBranchTag extends React.Component<Props> {
   render() {
-    const { defaultBranch, t } = this.props;
+    const { defaultBranch, className, t } = this.props;
 
     if (defaultBranch) {
-      return <DefaultTag className="is-unselectable" color="dark" label={t("branch.defaultTag")} />;
+      return (
+        <DefaultTag className={"is-unselectable " + (className || "")} color="dark" label={t("branch.defaultTag")} />
+      );
     }
     return null;
   }