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 dc59f0060a..d3c26ba31e 100644
--- a/scm-plugins/scm-git-plugin/src/main/js/GitTagInformation.tsx
+++ b/scm-plugins/scm-git-plugin/src/main/js/GitTagInformation.tsx
@@ -33,16 +33,12 @@ type Props = {
 const GitTagInformation: FC<Props> = ({ tag }) => {
   const [t] = useTranslation("plugins");
 
-  if (!tag) {
-    return null;
-  }
-
   return (
     <>
       <h4>{t("scm-git-plugin.information.checkoutTag")}</h4>
       <pre>
         <code>
-          git checkout tags/{tag?.name} -b branch/{tag?.name}
+          git checkout tags/{tag.name} -b branch/{tag.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 45254ac6ce..e6a430ab10 100644
--- a/scm-plugins/scm-hg-plugin/src/main/js/HgTagInformation.tsx
+++ b/scm-plugins/scm-hg-plugin/src/main/js/HgTagInformation.tsx
@@ -27,16 +27,12 @@ import { useTranslation } from "react-i18next";
 import { Tag } from "@scm-manager/ui-types";
 
 type Props = {
-  tag?: Tag;
+  tag: Tag;
 };
 
 const HgTagInformation: FC<Props> = ({ tag }) => {
   const [t] = useTranslation("plugins");
 
-  if (!tag) {
-    return null;
-  }
-
   return (
     <>
       <h4>{t("scm-hg-plugin.information.checkoutTag")}</h4>
diff --git a/scm-ui/ui-types/src/Tags.ts b/scm-ui/ui-types/src/Tags.ts
index 83ed4c3860..67fcf734dd 100644
--- a/scm-ui/ui-types/src/Tags.ts
+++ b/scm-ui/ui-types/src/Tags.ts
@@ -27,6 +27,6 @@ import { Links } from "./hal";
 export type Tag = {
   name: string;
   revision: string;
-  date: Date;
+  date?: Date;
   _links: Links;
 };
diff --git a/scm-ui/ui-webapp/public/locales/de/repos.json b/scm-ui/ui-webapp/public/locales/de/repos.json
index 5df248f961..b9d37f64b8 100644
--- a/scm-ui/ui-webapp/public/locales/de/repos.json
+++ b/scm-ui/ui-webapp/public/locales/de/repos.json
@@ -81,7 +81,7 @@
     }
   },
   "tag": {
-    "name": "Tag-Name",
+    "name": "Name",
     "commit": "Commit",
     "sources": "Sources"
   },
diff --git a/scm-ui/ui-webapp/public/locales/en/repos.json b/scm-ui/ui-webapp/public/locales/en/repos.json
index e8a47399b9..c917ea3629 100644
--- a/scm-ui/ui-webapp/public/locales/en/repos.json
+++ b/scm-ui/ui-webapp/public/locales/en/repos.json
@@ -81,7 +81,7 @@
     }
   },
   "tag": {
-    "name": "Tag-Name",
+    "name": "Name",
     "commit": "Commit",
     "sources": "Sources"
   },
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 ab9fd231a6..6b96e7c735 100644
--- a/scm-ui/ui-webapp/src/repos/tags/components/TagDetail.tsx
+++ b/scm-ui/ui-webapp/src/repos/tags/components/TagDetail.tsx
@@ -25,38 +25,44 @@
 import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Repository, Tag } from "@scm-manager/ui-types";
-import { DateFromNow } from "@scm-manager/ui-components";
+import { DateFromNow, Level } from "@scm-manager/ui-components";
 import styled from "styled-components";
 import TagButtonGroup from "./TagButtonGroup";
 
 type Props = {
   repository: Repository;
-  tag?: Tag;
+  tag: Tag;
 };
 
+const FlexRow = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
 const Created = styled.div`
-  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+  font-size: 0.8rem;
+`;
+
+const Label = styled.strong`
+  margin-right: 0.3rem;
 `;
 
 const Date = styled(DateFromNow)`
-font-size: 1rem;
+  font-size: 0.8rem;
 `;
 
 const TagDetail: FC<Props> = ({ tag, repository }) => {
   const [t] = useTranslation("repos");
 
-  if (!tag) {
-    return null;
-  }
-
   return (
     <div className="media">
-      <div className="media-content subtitle">
-        <strong>{t("tag.name") + ":"}</strong> {tag?.name}
+      <FlexRow className="media-content subtitle">
+        <Label>{t("tag.name") + ": "} </Label> {tag.name}
         <Created className="is-ellipsis-overflow">
-          <strong>{t("tags.overview.created") + ":"}</strong> <Date date={tag.date} className="has-text-grey" />
+          {t("tags.overview.created")} <Date date={tag.date} className="has-text-grey" />
         </Created>
-      </div>
+      </FlexRow>
       <div className="media-right">
         <TagButtonGroup repository={repository} tag={tag} />
       </div>
diff --git a/scm-ui/ui-webapp/src/repos/tags/components/TagView.tsx b/scm-ui/ui-webapp/src/repos/tags/components/TagView.tsx
index b0133f363a..a9df4b289a 100644
--- a/scm-ui/ui-webapp/src/repos/tags/components/TagView.tsx
+++ b/scm-ui/ui-webapp/src/repos/tags/components/TagView.tsx
@@ -29,7 +29,7 @@ import TagDetail from "./TagDetail";
 
 type Props = {
   repository: Repository;
-  tag?: Tag;
+  tag: Tag;
 };
 
 const TagView: FC<Props> = ({ repository, tag }) => {
diff --git a/scm-ui/ui-webapp/src/repos/tags/container/TagRoot.tsx b/scm-ui/ui-webapp/src/repos/tags/container/TagRoot.tsx
index e147a8ba93..056ddd5b18 100644
--- a/scm-ui/ui-webapp/src/repos/tags/container/TagRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/tags/container/TagRoot.tsx
@@ -37,14 +37,13 @@ type Props = {
 const TagRoot: FC<Props> = ({ repository, baseUrl }) => {
   const match = useRouteMatch();
   const [tags, setTags] = useState<Tag[]>([]);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | undefined>(undefined);
   const [tag, setTag] = useState<Tag>();
 
   useEffect(() => {
     const link = (repository._links?.tags as Link)?.href;
     if (link) {
-      setLoading(true);
       apiClient
         .get(link)
         .then(r => r.json())
diff --git a/scm-ui/ui-webapp/src/repos/tags/container/TagsOverview.tsx b/scm-ui/ui-webapp/src/repos/tags/container/TagsOverview.tsx
index c96773145e..f80d9aecee 100644
--- a/scm-ui/ui-webapp/src/repos/tags/container/TagsOverview.tsx
+++ b/scm-ui/ui-webapp/src/repos/tags/container/TagsOverview.tsx
@@ -55,7 +55,7 @@ const TagsOverview: FC<Props> = ({ repository, baseUrl }) => {
 
   const renderTagsTable = () => {
     if (!loading && tags?.length > 0) {
-     orderTags(tags);
+      orderTags(tags);
       return <TagTable baseUrl={baseUrl} tags={tags} />;
     }
     return <Notification type="info">{t("tags.overview.noTags")}</Notification>;
@@ -69,12 +69,7 @@ const TagsOverview: FC<Props> = ({ repository, baseUrl }) => {
     return <Loading />;
   }
 
-  return (
-    <>
-      <Subtitle subtitle={t("tags.overview.title")} />
-      {renderTagsTable()}
-    </>
-  );
+  return <>{renderTagsTable()}</>;
 };
 
 export default TagsOverview;
diff --git a/scm-ui/ui-webapp/src/repos/tags/orderTags.ts b/scm-ui/ui-webapp/src/repos/tags/orderTags.ts
index 87697c260a..2a8bea48ef 100644
--- a/scm-ui/ui-webapp/src/repos/tags/orderTags.ts
+++ b/scm-ui/ui-webapp/src/repos/tags/orderTags.ts
@@ -25,8 +25,8 @@
 // sort tags by date beginning with latest first
 import { Tag } from "@scm-manager/ui-types";
 
-export default function orderTags(tags: Tag[]) {
+export default (tags: Tag[]) => {
   tags.sort((a, b) => {
-   return new Date(b.date) - new Date(a.date);
+    return new Date(b.date) - new Date(a.date);
   });
-}
+};