diff --git a/gradle/changelog/structural_headings.yaml b/gradle/changelog/structural_headings.yaml
new file mode 100644
index 0000000000..9f8561136f
--- /dev/null
+++ b/gradle/changelog/structural_headings.yaml
@@ -0,0 +1,2 @@
+- type: changed
+  description: Improve headings structure ([#1883](https://github.com/scm-manager/scm-manager/pull/1883))
diff --git a/scm-plugins/scm-git-plugin/src/main/js/CloneInformation.tsx b/scm-plugins/scm-git-plugin/src/main/js/CloneInformation.tsx
index 98b03d9a65..33d74ef25d 100644
--- a/scm-plugins/scm-git-plugin/src/main/js/CloneInformation.tsx
+++ b/scm-plugins/scm-git-plugin/src/main/js/CloneInformation.tsx
@@ -24,7 +24,7 @@
 import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
-import { ErrorNotification, Loading } from "@scm-manager/ui-components";
+import { SubSubtitle, ErrorNotification, Loading } from "@scm-manager/ui-components";
 import { useChangesets, useDefaultBranch } from "@scm-manager/ui-api";
 
 type Props = {
@@ -34,16 +34,12 @@ type Props = {
 
 const CloneInformation: FC<Props> = ({ url, repository }) => {
   const [t] = useTranslation("plugins");
-  const {
-    data: changesets,
-    error: changesetsError,
-    isLoading: changesetsLoading,
-  } = useChangesets(repository, { limit: 1 });
-  const {
-    data: defaultBranchData,
-    isLoading: defaultBranchLoading,
-    error: defaultBranchError,
-  } = useDefaultBranch(repository);
+  const { data: changesets, error: changesetsError, isLoading: changesetsLoading } = useChangesets(repository, {
+    limit: 1
+  });
+  const { data: defaultBranchData, isLoading: defaultBranchLoading, error: defaultBranchError } = useDefaultBranch(
+    repository
+  );
 
   if (changesetsLoading || defaultBranchLoading) {
     return <Loading />;
@@ -56,7 +52,7 @@ const CloneInformation: FC<Props> = ({ url, repository }) => {
   return (
     <div className="content">
       <ErrorNotification error={error} />
-      <h4>{t("scm-git-plugin.information.clone")}</h4>
+      <SubSubtitle>{t("scm-git-plugin.information.clone")}</SubSubtitle>
       <pre>
         <code>
           git clone {url}
@@ -72,7 +68,7 @@ const CloneInformation: FC<Props> = ({ url, repository }) => {
       </pre>
       {emptyRepository && (
         <>
-          <h4>{t("scm-git-plugin.information.create")}</h4>
+          <SubSubtitle>{t("scm-git-plugin.information.create")}</SubSubtitle>
           <pre>
             <code>
               git init {repository.name}
@@ -96,7 +92,7 @@ const CloneInformation: FC<Props> = ({ url, repository }) => {
           </pre>
         </>
       )}
-      <h4>{t("scm-git-plugin.information.replace")}</h4>
+      <SubSubtitle>{t("scm-git-plugin.information.replace")}</SubSubtitle>
       <pre>
         <code>
           git remote add origin {url}
diff --git a/scm-plugins/scm-git-plugin/src/main/js/GitBranchInformation.tsx b/scm-plugins/scm-git-plugin/src/main/js/GitBranchInformation.tsx
index 4435d62de5..4aad52f9eb 100644
--- a/scm-plugins/scm-git-plugin/src/main/js/GitBranchInformation.tsx
+++ b/scm-plugins/scm-git-plugin/src/main/js/GitBranchInformation.tsx
@@ -24,6 +24,7 @@
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Branch } from "@scm-manager/ui-types";
+import { SubSubtitle } from "@scm-manager/ui-components";
 
 type Props = WithTranslation & {
   branch: Branch;
@@ -35,11 +36,11 @@ class GitBranchInformation extends React.Component<Props> {
 
     return (
       <div>
-        <h4>{t("scm-git-plugin.information.fetch")}</h4>
+        <SubSubtitle>{t("scm-git-plugin.information.fetch")}</SubSubtitle>
         <pre>
           <code>git fetch</code>
         </pre>
-        <h4>{t("scm-git-plugin.information.checkout")}</h4>
+        <SubSubtitle>{t("scm-git-plugin.information.checkout")}</SubSubtitle>
         <pre>
           <code>git checkout {branch.name}</code>
         </pre>
diff --git a/scm-plugins/scm-git-plugin/src/main/js/GitMergeInformation.tsx b/scm-plugins/scm-git-plugin/src/main/js/GitMergeInformation.tsx
index 66fde91120..26cbac78a3 100644
--- a/scm-plugins/scm-git-plugin/src/main/js/GitMergeInformation.tsx
+++ b/scm-plugins/scm-git-plugin/src/main/js/GitMergeInformation.tsx
@@ -21,9 +21,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
+import { SubSubtitle } from "@scm-manager/ui-components";
 
 type Props = WithTranslation & {
   repository: Repository;
@@ -37,7 +39,7 @@ class GitMergeInformation extends React.Component<Props> {
 
     return (
       <div>
-        <h4>{t("scm-git-plugin.information.merge.heading")}</h4>
+        <SubSubtitle>{t("scm-git-plugin.information.merge.heading")}</SubSubtitle>
         {t("scm-git-plugin.information.merge.checkout")}
         <pre>
           <code>git checkout {target}</code>
diff --git a/scm-plugins/scm-git-plugin/src/main/js/GitTagInformation.tsx b/scm-plugins/scm-git-plugin/src/main/js/GitTagInformation.tsx
index d3c26ba31e..d86274acef 100644
--- a/scm-plugins/scm-git-plugin/src/main/js/GitTagInformation.tsx
+++ b/scm-plugins/scm-git-plugin/src/main/js/GitTagInformation.tsx
@@ -23,8 +23,9 @@
  */
 
 import React, { FC } from "react";
-import { Tag } from "@scm-manager/ui-types";
 import { useTranslation } from "react-i18next";
+import { Tag } from "@scm-manager/ui-types";
+import { SubSubtitle } from "@scm-manager/ui-components";
 
 type Props = {
   tag: Tag;
@@ -35,7 +36,7 @@ const GitTagInformation: FC<Props> = ({ tag }) => {
 
   return (
     <>
-      <h4>{t("scm-git-plugin.information.checkoutTag")}</h4>
+      <SubSubtitle>{t("scm-git-plugin.information.checkoutTag")}</SubSubtitle>
       <pre>
         <code>
           git checkout tags/{tag.name} -b branch/{tag.name}
diff --git a/scm-plugins/scm-hg-plugin/src/main/js/HgBranchInformation.tsx b/scm-plugins/scm-hg-plugin/src/main/js/HgBranchInformation.tsx
index b0376d40a1..734ae30595 100644
--- a/scm-plugins/scm-hg-plugin/src/main/js/HgBranchInformation.tsx
+++ b/scm-plugins/scm-hg-plugin/src/main/js/HgBranchInformation.tsx
@@ -24,6 +24,7 @@
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Branch } from "@scm-manager/ui-types";
+import { SubSubtitle } from "@scm-manager/ui-components";
 
 type Props = WithTranslation & {
   branch: Branch;
@@ -35,11 +36,11 @@ class HgBranchInformation extends React.Component<Props> {
 
     return (
       <div>
-        <h4>{t("scm-hg-plugin.information.fetch")}</h4>
+        <SubSubtitle>{t("scm-hg-plugin.information.fetch")}</SubSubtitle>
         <pre>
           <code>hg pull</code>
         </pre>
-        <h4>{t("scm-hg-plugin.information.checkout")}</h4>
+        <SubSubtitle>{t("scm-hg-plugin.information.checkout")}</SubSubtitle>
         <pre>
           <code>hg update {branch.name}</code>
         </pre>
diff --git a/scm-plugins/scm-hg-plugin/src/main/js/HgTagInformation.tsx b/scm-plugins/scm-hg-plugin/src/main/js/HgTagInformation.tsx
index e6a430ab10..10fcd415b7 100644
--- a/scm-plugins/scm-hg-plugin/src/main/js/HgTagInformation.tsx
+++ b/scm-plugins/scm-hg-plugin/src/main/js/HgTagInformation.tsx
@@ -25,6 +25,7 @@
 import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Tag } from "@scm-manager/ui-types";
+import { SubSubtitle } from "@scm-manager/ui-components";
 
 type Props = {
   tag: Tag;
@@ -35,7 +36,7 @@ const HgTagInformation: FC<Props> = ({ tag }) => {
 
   return (
     <>
-      <h4>{t("scm-hg-plugin.information.checkoutTag")}</h4>
+      <SubSubtitle>{t("scm-hg-plugin.information.checkoutTag")}</SubSubtitle>
       <pre>
         <code>hg update {tag.name}</code>
       </pre>
diff --git a/scm-plugins/scm-hg-plugin/src/main/js/ProtocolInformation.tsx b/scm-plugins/scm-hg-plugin/src/main/js/ProtocolInformation.tsx
index 15b4581646..ec5f12e7e8 100644
--- a/scm-plugins/scm-hg-plugin/src/main/js/ProtocolInformation.tsx
+++ b/scm-plugins/scm-hg-plugin/src/main/js/ProtocolInformation.tsx
@@ -24,7 +24,7 @@
 import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
-import { ErrorNotification, Loading, repositories } from "@scm-manager/ui-components";
+import { ErrorNotification, Loading, SubSubtitle, repositories } from "@scm-manager/ui-components";
 import { useChangesets } from "@scm-manager/ui-api";
 
 type Props = {
@@ -49,13 +49,13 @@ const ProtocolInformation: FC<Props> = ({ repository }) => {
   return (
     <div className="content">
       <ErrorNotification error={error} />
-      <h4>{t("scm-hg-plugin.information.clone")}</h4>
+      <SubSubtitle>{t("scm-hg-plugin.information.clone")}</SubSubtitle>
       <pre>
         <code>hg clone {href}</code>
       </pre>
       {emptyRepository && (
         <>
-          <h4>{t("scm-hg-plugin.information.create")}</h4>
+          <SubSubtitle>{t("scm-hg-plugin.information.create")}</SubSubtitle>
           <pre>
             <code>
               hg init {repository.name}
@@ -81,7 +81,7 @@ const ProtocolInformation: FC<Props> = ({ repository }) => {
           </pre>
         </>
       )}
-      <h4>{t("scm-hg-plugin.information.replace")}</h4>
+      <SubSubtitle>{t("scm-hg-plugin.information.replace")}</SubSubtitle>
       <pre>
         <code>
           # add the repository url as default to your .hg/hgrc e.g:
diff --git a/scm-plugins/scm-svn-plugin/src/main/js/ProtocolInformation.tsx b/scm-plugins/scm-svn-plugin/src/main/js/ProtocolInformation.tsx
index 11d3a5e770..5b6d1a80c1 100644
--- a/scm-plugins/scm-svn-plugin/src/main/js/ProtocolInformation.tsx
+++ b/scm-plugins/scm-svn-plugin/src/main/js/ProtocolInformation.tsx
@@ -24,7 +24,7 @@
 import React from "react";
 import { withTranslation, WithTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
-import { repositories } from "@scm-manager/ui-components";
+import { repositories, SubSubtitle } from "@scm-manager/ui-components";
 
 type Props = WithTranslation & {
   repository: Repository;
@@ -39,7 +39,7 @@ class ProtocolInformation extends React.Component<Props> {
     }
     return (
       <div className="content">
-        <h4>{t("scm-svn-plugin.information.checkout")}</h4>
+        <SubSubtitle>{t("scm-svn-plugin.information.checkout")}</SubSubtitle>
         <pre>
           <code>svn checkout {href}</code>
         </pre>
diff --git a/scm-ui/ui-components/src/CardColumnGroup.tsx b/scm-ui/ui-components/src/CardColumnGroup.tsx
index db8e27191d..3897e001b7 100644
--- a/scm-ui/ui-components/src/CardColumnGroup.tsx
+++ b/scm-ui/ui-components/src/CardColumnGroup.tsx
@@ -84,7 +84,7 @@ class CardColumnGroup extends React.Component<Props, State> {
 
     return (
       <div className="mb-4">
-        <h2>
+        <h3>
           <span className={classNames("is-size-4", "is-clickable")} onClick={this.toggleCollapse}>
             {icon}
           </span>{" "}
@@ -95,7 +95,7 @@ class CardColumnGroup extends React.Component<Props, State> {
           ) : (
             name
           )}
-        </h2>
+        </h3>
         <hr />
         <div className={classNames("columns", "card-columns", "is-multiline", "mx-3", "my-0")}>{content}</div>
         <div className="is-clearfix" />
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index fbc38d138a..2f3ff22c8e 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -23015,11 +23015,11 @@ exports[`Storyshots Repositories/Diff Binaries 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -23237,11 +23237,11 @@ exports[`Storyshots Repositories/Diff Binaries 1`] = `
             onClick={[Function]}
             title="conflict.png"
           >
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               conflict.png
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -23315,11 +23315,11 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                 className="fas fa-fw fa-angle-down has-text-inherit"
                 onKeyPress={[Function]}
               />
-              <span
-                className="is-ellipsis-overflow is-size-6 ml-1"
+              <h4
+                className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
               >
                 src/main/java/com/cloudogu/scm/review/events/EventListener.java
-              </span>
+              </h4>
               <span
                 className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
               >
@@ -23938,11 +23938,11 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                 className="fas fa-fw fa-angle-down has-text-inherit"
                 onKeyPress={[Function]}
               />
-              <span
-                className="is-ellipsis-overflow is-size-6 ml-1"
+              <h4
+                className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
               >
                 src/main/js/ChangeNotification.tsx
-              </span>
+              </h4>
               <span
                 className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
               >
@@ -24898,11 +24898,11 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                 className="fas fa-fw fa-angle-down has-text-inherit"
                 onKeyPress={[Function]}
               />
-              <span
-                className="is-ellipsis-overflow is-size-6 ml-1"
+              <h4
+                className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
               >
                 src/main/resources/locales/de/plugins.json
-              </span>
+              </h4>
               <span
                 className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
               >
@@ -25429,11 +25429,11 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                 className="fas fa-fw fa-angle-down has-text-inherit"
                 onKeyPress={[Function]}
               />
-              <span
-                className="is-ellipsis-overflow is-size-6 ml-1"
+              <h4
+                className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
               >
                 src/main/resources/locales/en/plugins.json
-              </span>
+              </h4>
               <span
                 className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
               >
@@ -25960,11 +25960,11 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                 className="fas fa-fw fa-angle-down has-text-inherit"
                 onKeyPress={[Function]}
               />
-              <span
-                className="is-ellipsis-overflow is-size-6 ml-1"
+              <h4
+                className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
               >
                 src/test/java/com/cloudogu/scm/review/events/ClientTest.java
-              </span>
+              </h4>
               <span
                 className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
               >
@@ -27181,11 +27181,11 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                 className="fas fa-fw fa-angle-down has-text-inherit"
                 onKeyPress={[Function]}
               />
-              <span
-                className="is-ellipsis-overflow is-size-6 ml-1"
+              <h4
+                className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
               >
                 Main.java
-              </span>
+              </h4>
               <span
                 className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
               >
@@ -27762,11 +27762,11 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
               className="fas fa-fw fa-angle-right has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -27886,11 +27886,11 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
               className="fas fa-fw fa-angle-right has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -28010,11 +28010,11 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
               className="fas fa-fw fa-angle-right has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -28134,11 +28134,11 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
               className="fas fa-fw fa-angle-right has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -28258,11 +28258,11 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
               className="fas fa-fw fa-angle-right has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -28382,11 +28382,11 @@ exports[`Storyshots Repositories/Diff Collapsed 1`] = `
               className="fas fa-fw fa-angle-right has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -28515,11 +28515,11 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
               className="fas fa-fw fa-angle-right has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -28595,11 +28595,11 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -29458,11 +29458,11 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -29917,11 +29917,11 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -30376,11 +30376,11 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
               className="fas fa-fw fa-angle-right has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -30456,11 +30456,11 @@ exports[`Storyshots Repositories/Diff CollapsingWithFunction 1`] = `
               className="fas fa-fw fa-angle-right has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -30545,11 +30545,11 @@ exports[`Storyshots Repositories/Diff Default 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -31131,11 +31131,11 @@ exports[`Storyshots Repositories/Diff Default 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -31994,11 +31994,11 @@ exports[`Storyshots Repositories/Diff Default 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -32453,11 +32453,11 @@ exports[`Storyshots Repositories/Diff Default 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -32912,11 +32912,11 @@ exports[`Storyshots Repositories/Diff Default 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -33978,11 +33978,11 @@ exports[`Storyshots Repositories/Diff Default 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -34521,11 +34521,11 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -35144,11 +35144,11 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -36104,11 +36104,11 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -36635,11 +36635,11 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -37166,11 +37166,11 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -38387,11 +38387,11 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -38967,11 +38967,11 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -39590,11 +39590,11 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -40550,11 +40550,11 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -41081,11 +41081,11 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -41612,11 +41612,11 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -42833,11 +42833,11 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -43413,11 +43413,11 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -44003,11 +44003,11 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -44870,11 +44870,11 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -45333,11 +45333,11 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -45796,11 +45796,11 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -46866,11 +46866,11 @@ exports[`Storyshots Repositories/Diff File Annotation 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -47413,11 +47413,11 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -48018,11 +48018,11 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -48900,11 +48900,11 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -49378,11 +49378,11 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -49856,11 +49856,11 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -50941,11 +50941,11 @@ exports[`Storyshots Repositories/Diff File Controls 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -51503,11 +51503,11 @@ exports[`Storyshots Repositories/Diff Hunks 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/pullrequest/service/DefaultPullRequestService.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -52353,11 +52353,11 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -52951,11 +52951,11 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -53826,11 +53826,11 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -54285,11 +54285,11 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -54744,11 +54744,11 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -55810,11 +55810,11 @@ exports[`Storyshots Repositories/Diff Line Annotation 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -56365,11 +56365,11 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -56991,11 +56991,11 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -57916,11 +57916,11 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -58405,11 +58405,11 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -58894,11 +58894,11 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -60036,11 +60036,11 @@ exports[`Storyshots Repositories/Diff OnClick 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -60615,11 +60615,11 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -61294,11 +61294,11 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -62247,11 +62247,11 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -62758,11 +62758,11 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -63269,11 +63269,11 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -64504,11 +64504,11 @@ exports[`Storyshots Repositories/Diff Side-By-Side 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -65120,11 +65120,11 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting (Markdown) 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               CHANGELOG.md
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -65488,11 +65488,11 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -66074,11 +66074,11 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -66937,11 +66937,11 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -67396,11 +67396,11 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -67855,11 +67855,11 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -68921,11 +68921,11 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -69464,11 +69464,11 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/java/com/cloudogu/scm/review/events/EventListener.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -70087,11 +70087,11 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/js/ChangeNotification.tsx
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -71047,11 +71047,11 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/de/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -71578,11 +71578,11 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/main/resources/locales/en/plugins.json
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -72109,11 +72109,11 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               src/test/java/com/cloudogu/scm/review/events/ClientTest.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
@@ -73330,11 +73330,11 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
               className="fas fa-fw fa-angle-down has-text-inherit"
               onKeyPress={[Function]}
             />
-            <span
-              className="is-ellipsis-overflow is-size-6 ml-1"
+            <h4
+              className="has-text-weight-bold is-ellipsis-overflow is-size-6 ml-1"
             >
               Main.java
-            </span>
+            </h4>
             <span
               className="tag is-info is-normal has-text-weight-normal ml-3 is-outlined is-rounded"
             >
diff --git a/scm-ui/ui-components/src/layout/SubSubtitle.tsx b/scm-ui/ui-components/src/layout/SubSubtitle.tsx
new file mode 100644
index 0000000000..ece0352106
--- /dev/null
+++ b/scm-ui/ui-components/src/layout/SubSubtitle.tsx
@@ -0,0 +1,41 @@
+/*
+ * 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 from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string;
+};
+
+class SubSubtitle extends React.Component<Props> {
+  render() {
+    const { className, children } = this.props;
+    if (children) {
+      return <h3 className={classNames("is-size-5", className)}>{children}</h3>;
+    }
+    return null;
+  }
+}
+
+export default SubSubtitle;
diff --git a/scm-ui/ui-components/src/layout/index.ts b/scm-ui/ui-components/src/layout/index.ts
index e966727eb8..8c30900e47 100644
--- a/scm-ui/ui-components/src/layout/index.ts
+++ b/scm-ui/ui-components/src/layout/index.ts
@@ -29,8 +29,9 @@ export { default as Header } from "./Header";
 export { default as Level } from "./Level";
 export { default as Page } from "./Page";
 export { default as PageActions } from "./PageActions";
-export { default as Subtitle } from "./Subtitle";
 export { default as Title } from "./Title";
+export { default as Subtitle } from "./Subtitle";
+export { default as SubSubtitle } from "./SubSubtitle";
 export { default as CustomQueryFlexWrappedColumns } from "./CustomQueryFlexWrappedColumns";
 export { default as PrimaryContentColumn } from "./PrimaryContentColumn";
 export { default as SecondaryNavigationColumn } from "./SecondaryNavigationColumn";
diff --git a/scm-ui/ui-components/src/modals/Modal.tsx b/scm-ui/ui-components/src/modals/Modal.tsx
index adb8b002a6..adbfaeeab9 100644
--- a/scm-ui/ui-components/src/modals/Modal.tsx
+++ b/scm-ui/ui-components/src/modals/Modal.tsx
@@ -90,7 +90,7 @@ export const Modal: FC<Props> = ({
       <div className="modal-background" onClick={closeFunction} />
       <SizedModal className="modal-card" size={size}>
         <header className={classNames("modal-card-head", `has-background-${headColor}`)}>
-          <p className={`modal-card-title m-0 has-text-${headTextColor}`}>{title}</p>
+          <h2 className={`modal-card-title m-0 has-text-${headTextColor}`}>{title}</h2>
           <button className="delete" aria-label="close" onClick={closeFunction} ref={initialFocusRef} autoFocus />
         </header>
         <section className="modal-card-body">{body}</section>
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index b882abe305..3f721843f0 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -81,7 +81,7 @@ const MarginlessModalContent = styled.div`
 class DiffFile extends React.Component<Props, State> {
   static defaultProps: Partial<Props> = {
     defaultCollapse: false,
-    markConflicts: true,
+    markConflicts: true
   };
 
   constructor(props: Props) {
@@ -90,14 +90,14 @@ class DiffFile extends React.Component<Props, State> {
       collapsed: this.defaultCollapse(),
       sideBySide: props.sideBySide,
       diffExpander: new DiffExpander(props.file),
-      file: props.file,
+      file: props.file
     };
   }
 
   componentDidUpdate(prevProps: Readonly<Props>) {
     if (!this.props.isCollapsed && this.props.defaultCollapse !== prevProps.defaultCollapse) {
       this.setState({
-        collapsed: this.defaultCollapse(),
+        collapsed: this.defaultCollapse()
       });
     }
   }
@@ -120,8 +120,8 @@ class DiffFile extends React.Component<Props, State> {
       if (onCollapseStateChange) {
         onCollapseStateChange(file);
       } else {
-        this.setState((state) => ({
-          collapsed: !state.collapsed,
+        this.setState(state => ({
+          collapsed: !state.collapsed
         }));
       }
     }
@@ -129,8 +129,8 @@ class DiffFile extends React.Component<Props, State> {
 
   toggleSideBySide = (callback: () => void) => {
     this.setState(
-      (state) => ({
-        sideBySide: !state.sideBySide,
+      state => ({
+        sideBySide: !state.sideBySide
       }),
       () => callback()
     );
@@ -142,7 +142,7 @@ class DiffFile extends React.Component<Props, State> {
       onCollapseStateChange(this.state.file, collapsed);
     } else {
       this.setState({
-        collapsed,
+        collapsed
       });
     }
   };
@@ -236,13 +236,19 @@ class DiffFile extends React.Component<Props, State> {
 
   expandHead = (expandableHunk: ExpandableHunk, count: number) => {
     return () => {
-      return expandableHunk.expandHead(count).then(this.diffExpanded).catch(this.diffExpansionFailed);
+      return expandableHunk
+        .expandHead(count)
+        .then(this.diffExpanded)
+        .catch(this.diffExpansionFailed);
     };
   };
 
   expandBottom = (expandableHunk: ExpandableHunk, count: number) => {
     return () => {
-      return expandableHunk.expandBottom(count).then(this.diffExpanded).catch(this.diffExpansionFailed);
+      return expandableHunk
+        .expandBottom(count)
+        .then(this.diffExpanded)
+        .catch(this.diffExpansionFailed);
     };
   };
 
@@ -260,7 +266,7 @@ class DiffFile extends React.Component<Props, State> {
     if (annotationFactory) {
       return annotationFactory({
         hunk,
-        file,
+        file
       });
     } else {
       return EMPTY_ANNOTATION_FACTORY;
@@ -274,7 +280,7 @@ class DiffFile extends React.Component<Props, State> {
       changeId: getChangeKey(change),
       change,
       hunk,
-      file,
+      file
     };
     if (onClick) {
       onClick(context);
@@ -287,7 +293,7 @@ class DiffFile extends React.Component<Props, State> {
       return {
         onClick: (event: ChangeEvent) => {
           this.handleClickEvent(event.change, hunk);
-        },
+        }
       };
     }
   };
@@ -496,9 +502,9 @@ class DiffFile extends React.Component<Props, State> {
               title={this.hoverFileTitle(file)}
             >
               {collapseIcon}
-              <span className={classNames("is-ellipsis-overflow", "is-size-6", "ml-1")}>
+              <h4 className={classNames("has-text-weight-bold", "is-ellipsis-overflow", "is-size-6", "ml-1")}>
                 {this.renderFileTitle(file)}
-              </span>
+              </h4>
               {this.renderChangeTag(file)}
             </FullWidthTitleHeader>
             {headerButtons}
diff --git a/scm-ui/ui-components/src/repos/index.ts b/scm-ui/ui-components/src/repos/index.ts
index 707af05f2c..11d659f827 100644
--- a/scm-ui/ui-components/src/repos/index.ts
+++ b/scm-ui/ui-components/src/repos/index.ts
@@ -30,6 +30,7 @@ import {
   AnnotationFactoryContext,
   DiffEventHandler,
   DiffEventContext,
+  DiffObjectProps
 } from "./DiffTypes";
 
 import { FileDiff as File, FileChangeType, Hunk, Change, ChangeType } from "@scm-manager/ui-types";
@@ -64,4 +65,5 @@ export {
   AnnotationFactoryContext,
   DiffEventHandler,
   DiffEventContext,
+  DiffObjectProps
 };
diff --git a/scm-ui/ui-styles/src/components/_main.scss b/scm-ui/ui-styles/src/components/_main.scss
index 30b11f276f..aa1ade6a3d 100644
--- a/scm-ui/ui-styles/src/components/_main.scss
+++ b/scm-ui/ui-styles/src/components/_main.scss
@@ -89,7 +89,6 @@ footer.footer {
   }
 }
 
-
 .has-hover-background-blue:hover {
   background-color: scale-color($blue, $alpha: -90%);
 }
@@ -398,6 +397,7 @@ ul.is-separated {
 .card-columns {
   .column {
     height: 120px;
+    margin-bottom: 1.5rem;
 
     .overlay-column {
       position: absolute;
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 5ad644c7e1..9b3383862c 100644
--- a/scm-ui/ui-webapp/src/repos/branches/components/BranchDetail.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/components/BranchDetail.tsx
@@ -21,41 +21,46 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import React, { FC } from "react";
+import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { Branch, Repository } from "@scm-manager/ui-types";
-import { DateFromNow } from "@scm-manager/ui-components";
+import { Subtitle, DateFromNow } from "@scm-manager/ui-components";
 import BranchButtonGroup from "./BranchButtonGroup";
 import DefaultBranchTag from "./DefaultBranchTag";
 
-type Props = WithTranslation & {
+type Props = {
   repository: Repository;
   branch: Branch;
 };
 
-class BranchDetail extends React.Component<Props> {
-  render() {
-    const { repository, branch, t } = this.props;
+const BranchDetail: FC<Props> = ({ repository, branch }) => {
+  const [t] = useTranslation("repos");
 
-    return (
-      <div className="media">
-        <div
-          className={classNames("media-content", "subtitle", "is-flex", "is-align-items-center", "is-flex-wrap-wrap")}
-        >
-          <strong className="mr-1">{t("branch.name")}</strong> {branch.name}{" "}
-          <DefaultBranchTag 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} />
-          </div>
-        </div>
-        <div className="media-right">
-          <BranchButtonGroup repository={repository} branch={branch} />
+  return (
+    <div className="media is-align-items-center">
+      <div
+        className={classNames(
+          "media-content",
+          "subtitle",
+          "is-flex",
+          "is-flex-wrap-wrap",
+          "is-align-items-center",
+          "mb-0"
+        )}
+      >
+        <strong className="mr-1">{t("branch.name")}</strong> <Subtitle className="mb-0">{branch.name}</Subtitle>
+        <DefaultBranchTag 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} />
         </div>
       </div>
-    );
-  }
-}
+      <div className="media-right">
+        <BranchButtonGroup repository={repository} branch={branch} />
+      </div>
+    </div>
+  );
+};
 
-export default withTranslation("repos")(BranchDetail);
+export default BranchDetail;
diff --git a/scm-ui/ui-webapp/src/repos/branches/containers/DeleteBranch.tsx b/scm-ui/ui-webapp/src/repos/branches/containers/DeleteBranch.tsx
index b9128253aa..6787024fed 100644
--- a/scm-ui/ui-webapp/src/repos/branches/containers/DeleteBranch.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/containers/DeleteBranch.tsx
@@ -57,12 +57,12 @@ const DeleteBranch: FC<Props> = ({ repository, branch }: Props) => {
             className: "is-outlined",
             label: t("branch.delete.confirmAlert.submit"),
             onClick: () => remove(branch),
-            isLoading,
+            isLoading
           },
           {
             label: t("branch.delete.confirmAlert.cancel"),
-            onClick: () => null,
-          },
+            onClick: () => null
+          }
         ]}
         close={() => setShowConfirmAlert(false)}
       />
@@ -75,11 +75,10 @@ const DeleteBranch: FC<Props> = ({ repository, branch }: Props) => {
       {showConfirmAlert && confirmAlert}
       <Level
         left={
-          <p>
-            <strong>{t("branch.delete.subtitle")}</strong>
-            <br />
-            {t("branch.delete.description")}
-          </p>
+          <div>
+            <h4 className="has-text-weight-bold">{t("branch.delete.subtitle")}</h4>
+            <p>{t("branch.delete.description")}</p>
+          </div>
         }
         right={<DeleteButton label={t("branch.delete.button")} action={() => setShowConfirmAlert(true)} />}
       />
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 9946bc2c43..3d5dcf7f64 100644
--- a/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx
@@ -26,7 +26,7 @@ import { Trans, useTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import { Changeset, Link, ParentChangeset, Repository } from "@scm-manager/ui-types";
+import { Changeset, ParentChangeset, Repository } from "@scm-manager/ui-types";
 import {
   AvatarImage,
   AvatarWrapper,
@@ -43,6 +43,7 @@ import {
   Level,
   SignatureIcon,
   Tooltip,
+  SubSubtitle
 } from "@scm-manager/ui-components";
 import ContributorTable from "./ContributorTable";
 import { Link as ReactLink } from "react-router-dom";
@@ -92,7 +93,7 @@ const Contributors: FC<{ changeset: Changeset }> = ({ changeset }) => {
     return (
       <div className="is-flex is-flex-direction-column mb-4">
         <div className="is-flex">
-          <p className="is-ellipsis-overflow is-clickable mb-2" onClick={(e) => setOpen(!open)}>
+          <p className="is-ellipsis-overflow is-clickable mb-2" onClick={e => setOpen(!open)}>
             <Icon name="angle-down" alt={t("changeset.contributors.hideList")} /> {t("changeset.contributors.list")}
           </p>
           {signatureIcon}
@@ -104,7 +105,7 @@ const Contributors: FC<{ changeset: Changeset }> = ({ changeset }) => {
 
   return (
     <>
-      <div className="is-flex is-clickable" onClick={(e) => setOpen(!open)}>
+      <div className="is-flex is-clickable" onClick={e => setOpen(!open)}>
         <ContributorColumn className="is-ellipsis-overflow">
           <Icon name="angle-right" alt={t("changeset.contributors.showList")} />{" "}
           <ChangesetAuthor changeset={changeset} />
@@ -144,18 +145,18 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
   return (
     <>
       <div className={classNames("content", "m-0")}>
-        <h4>
+        <SubSubtitle>
           <ExtensionPoint
             name="changeset.description"
             props={{
               changeset,
-              value: description.title,
+              value: description.title
             }}
             renderAll={false}
           >
             <ChangesetDescription changeset={changeset} value={description.title} />
           </ExtensionPoint>
-        </h4>
+        </SubSubtitle>
         <article className="media">
           <AvatarWrapper>
             <p className={classNames("image", "is-64x64", "mr-4")}>
@@ -209,7 +210,7 @@ const ChangesetDetails: FC<Props> = ({ changeset, repository, fileControlFactory
                   name="changeset.description"
                   props={{
                     changeset,
-                    value: item,
+                    value: item
                   }}
                   renderAll={false}
                 >
diff --git a/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx b/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx
index f9809cb349..1c8ecaa974 100644
--- a/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx
@@ -55,12 +55,12 @@ const ArchiveRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
         {
           className: "is-outlined",
           label: t("archiveRepo.confirmAlert.submit"),
-          onClick: () => archiveRepoCallback(),
+          onClick: () => archiveRepoCallback()
         },
         {
           label: t("archiveRepo.confirmAlert.cancel"),
-          onClick: () => null,
-        },
+          onClick: () => null
+        }
       ]}
       close={() => setShowConfirmAlert(false)}
     />
@@ -72,11 +72,10 @@ const ArchiveRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
       {showConfirmAlert && confirmAlert}
       <Level
         left={
-          <p>
-            <strong>{t("archiveRepo.subtitle")}</strong>
-            <br />
-            {t("archiveRepo.description")}
-          </p>
+          <div>
+            <h4 className="has-text-weight-bold">{t("archiveRepo.subtitle")}</h4>
+            <p>{t("archiveRepo.description")}</p>
+          </div>
         }
         right={
           <Button color="warning" icon="archive" label={t("archiveRepo.button")} action={action} loading={isLoading} />
diff --git a/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx b/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
index b392949aab..2dffcd02e3 100644
--- a/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/DeleteRepo.tsx
@@ -38,7 +38,7 @@ const DeleteRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
   const { isLoading, error, remove, isDeleted } = useDeleteRepository({
     onSuccess: () => {
       history.push("/repos/");
-    },
+    }
   });
   const [showConfirmAlert, setShowConfirmAlert] = useState(false);
   const [t] = useTranslation("repos");
@@ -67,12 +67,12 @@ const DeleteRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
           {
             className: "is-outlined",
             label: t("deleteRepo.confirmAlert.submit"),
-            onClick: () => deleteRepoCallback(),
+            onClick: () => deleteRepoCallback()
           },
           {
             label: t("deleteRepo.confirmAlert.cancel"),
-            onClick: () => null,
-          },
+            onClick: () => null
+          }
         ]}
         close={() => setShowConfirmAlert(false)}
       />
@@ -84,11 +84,10 @@ const DeleteRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
       <ErrorNotification error={error} />
       <Level
         left={
-          <p>
-            <strong>{t("deleteRepo.subtitle")}</strong>
-            <br />
-            {t("deleteRepo.description")}
-          </p>
+          <div>
+            <h4 className="has-text-weight-bold">{t("deleteRepo.subtitle")}</h4>
+            <p>{t("deleteRepo.description")}</p>
+          </div>
         }
         right={<DeleteButton label={t("deleteRepo.button")} action={action} loading={isLoading} />}
       />
diff --git a/scm-ui/ui-webapp/src/repos/containers/RenameRepository.tsx b/scm-ui/ui-webapp/src/repos/containers/RenameRepository.tsx
index e1558a37de..e17e509600 100644
--- a/scm-ui/ui-webapp/src/repos/containers/RenameRepository.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RenameRepository.tsx
@@ -46,7 +46,7 @@ const RenameRepository: FC<Props> = ({ repository }) => {
   const {
     isLoading: isLoadingNamespaceStrategies,
     error: namespaceStrategyLoadError,
-    data: namespaceStrategies,
+    data: namespaceStrategies
   } = useNamespaceStrategies();
 
   if (isRenamed) {
@@ -83,7 +83,7 @@ const RenameRepository: FC<Props> = ({ repository }) => {
       value: namespace,
       onChange: handleNamespaceChange,
       errorMessage: t("validation.namespace-invalid"),
-      validationError: namespaceValidationError,
+      validationError: namespaceValidationError
     };
 
     if (namespaceStrategies!.current === CUSTOM_NAMESPACE_STRATEGY) {
@@ -141,13 +141,14 @@ const RenameRepository: FC<Props> = ({ repository }) => {
       />
       <Level
         left={
-          <p>
-            <strong>{t("renameRepo.subtitle")}</strong>
-            <br />
-            {t("renameRepo.description1")}
-            <br />
-            {t("renameRepo.description2")}
-          </p>
+          <div>
+            <h4 className="has-text-weight-bold">{t("renameRepo.subtitle")}</h4>
+            <p>
+              {t("renameRepo.description1")}
+              <br />
+              {t("renameRepo.description2")}
+            </p>
+          </div>
         }
         right={<Button label={t("renameRepo.button")} action={() => setShowModal(true)} color="warning" icon="edit" />}
       />
diff --git a/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx b/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx
index bd693891f6..c03fcdcd24 100644
--- a/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx
@@ -56,12 +56,12 @@ const UnarchiveRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
           className: "is-outlined",
           label: t("unarchiveRepo.confirmAlert.submit"),
           isLoading,
-          onClick: () => unarchiveRepoCallback(),
+          onClick: () => unarchiveRepoCallback()
         },
         {
           label: t("unarchiveRepo.confirmAlert.cancel"),
-          onClick: () => null,
-        },
+          onClick: () => null
+        }
       ]}
       close={() => setShowConfirmAlert(false)}
     />
@@ -73,11 +73,10 @@ const UnarchiveRepo: FC<Props> = ({ repository, confirmDialog = true }) => {
       {showConfirmAlert && confirmAlert}
       <Level
         left={
-          <p>
-            <strong>{t("unarchiveRepo.subtitle")}</strong>
-            <br />
-            {t("unarchiveRepo.description")}
-          </p>
+          <div>
+            <h4 className="has-text-weight-bold">{t("unarchiveRepo.subtitle")}</h4>
+            <p>{t("unarchiveRepo.description")}</p>
+          </div>
         }
         right={
           <Button
diff --git a/scm-ui/ui-webapp/src/repos/tags/components/TagDetail.tsx b/scm-ui/ui-webapp/src/repos/tags/components/TagDetail.tsx
index 49f76c418d..5eb18ff057 100644
--- a/scm-ui/ui-webapp/src/repos/tags/components/TagDetail.tsx
+++ b/scm-ui/ui-webapp/src/repos/tags/components/TagDetail.tsx
@@ -25,7 +25,7 @@ import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { Repository, Tag } from "@scm-manager/ui-types";
-import { DateFromNow, SignatureIcon } from "@scm-manager/ui-components";
+import { Subtitle, DateFromNow, SignatureIcon } from "@scm-manager/ui-components";
 import TagButtonGroup from "./TagButtonGroup";
 
 type Props = {
@@ -33,20 +33,26 @@ type Props = {
   tag: Tag;
 };
 
-const TagDetail: FC<Props> = ({ tag, repository }) => {
+const TagDetail: FC<Props> = ({ repository, tag }) => {
   const [t] = useTranslation("repos");
 
   return (
-    <div className="media">
-      <div className={classNames("media-content", "is-flex", "is-flex-wrap-wrap", "is-align-items-center")}>
-        <strong className={classNames("subtitle", "has-text-weight-bold", "has-text-black", "mr-1")}>
-          {t("tag.name") + ": "}{" "}
-        </strong>{" "}
-        <span className="subtitle">{tag.name}</span>
+    <div className="media is-align-items-center">
+      <div
+        className={classNames(
+          "media-content",
+          "subtitle",
+          "is-flex",
+          "is-flex-wrap-wrap",
+          "is-align-items-center",
+          "mb-0"
+        )}
+      >
+        <strong className="mr-1">{t("tag.name") + ": "}</strong> <Subtitle className="mb-0">{tag.name}</Subtitle>
         <SignatureIcon signatures={tag.signatures} className="ml-2 mb-5" />
-        <div className={classNames("is-ellipsis-overflow", "mb-5", "ml-2", "is-size-7")}>
+        <div className={classNames("is-ellipsis-overflow", "is-size-7", "ml-2")}>
           {t("tags.overview.created")}{" "}
-          <DateFromNow className={classNames("has-text-grey", "is-size-7")} date={tag.date} />
+          <DateFromNow className={classNames("is-size-7", "has-text-grey")} date={tag.date} />
         </div>
       </div>
       <div className="media-right">
diff --git a/scm-ui/ui-webapp/src/repos/tags/container/DeleteTag.tsx b/scm-ui/ui-webapp/src/repos/tags/container/DeleteTag.tsx
index 6e0e2a4b50..a097438bdd 100644
--- a/scm-ui/ui-webapp/src/repos/tags/container/DeleteTag.tsx
+++ b/scm-ui/ui-webapp/src/repos/tags/container/DeleteTag.tsx
@@ -55,23 +55,22 @@ const DeleteTag: FC<Props> = ({ tag, repository }) => {
               className: "is-outlined",
               label: t("tag.delete.confirmAlert.submit"),
               isLoading,
-              onClick: () => remove(tag),
+              onClick: () => remove(tag)
             },
             {
               label: t("tag.delete.confirmAlert.cancel"),
-              onClick: () => null,
-            },
+              onClick: () => null
+            }
           ]}
           close={() => setShowConfirmAlert(false)}
         />
       ) : null}
       <Level
         left={
-          <p>
-            <strong>{t("tag.delete.subtitle")}</strong>
-            <br />
-            {t("tag.delete.description")}
-          </p>
+          <div>
+            <h4 className="has-text-weight-bold">{t("tag.delete.subtitle")}</h4>
+            <p>{t("tag.delete.description")}</p>
+          </div>
         }
         right={<DeleteButton label={t("tag.delete.button")} action={() => setShowConfirmAlert(true)} />}
       />