diff --git a/scm-ui/ui-webapp/src/repos/sources/components/content/FileButtonAddons.tsx b/scm-ui/ui-webapp/src/repos/sources/components/content/FileButtonAddons.tsx
index 38f803e958..f2dfe8a7b5 100644
--- a/scm-ui/ui-webapp/src/repos/sources/components/content/FileButtonAddons.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/components/content/FileButtonAddons.tsx
@@ -24,20 +24,27 @@
 import React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Button, ButtonAddons } from "@scm-manager/ui-components";
+import { SourceViewSelection } from "../../containers/Content";
 
 type Props = WithTranslation & {
   className?: string;
-  historyIsSelected: boolean;
-  showHistory: (p: boolean) => void;
+  selected: SourceViewSelection;
+  showSources: () => void;
+  showHistory: () => void;
+  showAnnotations: () => void;
 };
 
 class FileButtonAddons extends React.Component<Props> {
   showHistory = () => {
-    this.props.showHistory(true);
+    this.props.showHistory();
   };
 
   showSources = () => {
-    this.props.showHistory(false);
+    this.props.showSources();
+  };
+
+  showAnnotations = () => {
+    this.props.showAnnotations();
   };
 
   color = (selected: boolean) => {
@@ -45,19 +52,26 @@ class FileButtonAddons extends React.Component<Props> {
   };
 
   render() {
-    const { className, t, historyIsSelected } = this.props;
+    const { className, t, selected, showSources, showHistory, showAnnotations } = this.props;
 
     return (
       <ButtonAddons className={className}>
         <div title={t("sources.content.sourcesButton")}>
-          <Button action={this.showSources} color={this.color(!historyIsSelected)}>
+          <Button action={showSources} color={this.color(selected === "source")}>
             <span className="icon">
               <i className="fas fa-code" />
             </span>
           </Button>
         </div>
+        <div title={t("sources.content.annotateButton")}>
+          <Button action={showAnnotations} color={this.color(selected === "annotations")}>
+            <span className="icon">
+              <i className="fas fa-user-clock" />
+            </span>
+          </Button>
+        </div>
         <div title={t("sources.content.historyButton")}>
-          <Button action={this.showHistory} color={this.color(historyIsSelected)}>
+          <Button action={showHistory} color={this.color(selected === "history")}>
             <span className="icon">
               <i className="fas fa-history" />
             </span>
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/AnnotateView.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/AnnotateView.tsx
new file mode 100644
index 0000000000..7b532cde65
--- /dev/null
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/AnnotateView.tsx
@@ -0,0 +1,70 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FC, useEffect, useState } from "react";
+import { Link, Repository, File } from "@scm-manager/ui-types";
+import { Annotate, apiClient, ErrorNotification, Loading } from "@scm-manager/ui-components";
+import { getContentType } from "./contentType";
+import { AnnotatedSource } from "@scm-manager/ui-components/src/Annotate";
+
+type Props = {
+  file: File;
+  repository: Repository;
+};
+
+const AnnotateView: FC<Props> = ({ file, repository }) => {
+  const [annotation, setAnnotation] = useState<AnnotatedSource>(undefined);
+  const [error, setError] = useState<Error | undefined>(undefined);
+  const [language, setLanguage] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    getContentType(file._links.self.href)
+      .then(result => {
+        setLanguage(result.language);
+      })
+      .catch(error => {
+        setError(error);
+      });
+
+    apiClient
+      .get((file._links.annotate as Link).href)
+      .then(response => response.json())
+      .then(content => {
+        setAnnotation(content);
+      })
+      .catch(error => {
+        setError(error);
+      });
+  }, [file]);
+
+  if (error) {
+    return <ErrorNotification error={error} />;
+  } else if (annotation && language) {
+    return <Annotate source={{ ...annotation, language }} repository={repository} />;
+  } else {
+    return <Loading />;
+  }
+};
+
+export default AnnotateView;
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
index e22ad7fb92..43ecf40e2b 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
@@ -33,6 +33,7 @@ import { getSources } from "../modules/sources";
 import FileButtonAddons from "../components/content/FileButtonAddons";
 import SourcesView from "./SourcesView";
 import HistoryView from "./HistoryView";
+import AnnotateView from "./AnnotateView";
 
 type Props = WithTranslation & {
   loading: boolean;
@@ -45,7 +46,7 @@ type Props = WithTranslation & {
 
 type State = {
   collapsed: boolean;
-  showHistory: boolean;
+  selected: SourceViewSelection;
   errorFromExtension?: Error;
 };
 
@@ -81,13 +82,15 @@ const LighterGreyBackgroundTable = styled.table`
   background-color: #fbfbfb;
 `;
 
+export type SourceViewSelection = "source" | "history" | "annotations";
+
 class Content extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
     this.state = {
       collapsed: true,
-      showHistory: false
+      selected: "source"
     };
   }
 
@@ -97,13 +100,6 @@ class Content extends React.Component<Props, State> {
     }));
   };
 
-  setShowHistoryState(showHistory: boolean) {
-    this.setState({
-      ...this.state,
-      showHistory
-    });
-  }
-
   handleExtensionError = (error: Error) => {
     this.setState({
       errorFromExtension: error
@@ -112,14 +108,15 @@ class Content extends React.Component<Props, State> {
 
   showHeader() {
     const { repository, file, revision } = this.props;
-    const { showHistory, collapsed } = this.state;
+    const { selected, collapsed } = this.state;
     const icon = collapsed ? "angle-right" : "angle-down";
 
     const selector = file._links.history ? (
       <RightMarginFileButtonAddons
-        file={file}
-        historyIsSelected={showHistory}
-        showHistory={(changeShowHistory: boolean) => this.setShowHistoryState(changeShowHistory)}
+        selected={selected}
+        showSources={() => this.setState({ selected: "source" })}
+        showHistory={() => this.setState({ selected: "history" })}
+        showAnnotations={() => this.setState({ selected: "annotations" })}
       />
     ) : null;
 
@@ -212,15 +209,26 @@ class Content extends React.Component<Props, State> {
 
   render() {
     const { file, revision, repository, path, breadcrumb } = this.props;
-    const { showHistory, errorFromExtension } = this.state;
+    const { selected, errorFromExtension } = this.state;
 
     const header = this.showHeader();
-    const content =
-      showHistory && file._links.history ? (
-        <HistoryView file={file} repository={repository} />
-      ) : (
-        <SourcesView revision={revision} file={file} repository={repository} path={path} />
-      );
+    let content;
+    switch (selected) {
+      case "source":
+        content = (
+          <SourcesView revision={revision} file={file} repository={repository} path={path}/>
+        );
+        break;
+      case "history":
+        content = (
+          <HistoryView file={file} repository={repository}/>
+        );
+        break;
+      case "annotations":
+        content = (
+          <AnnotateView file={file} repository={repository} />
+        );
+    }
     const moreInformation = this.showMoreInformation();
 
     return (
diff --git a/scm-webapp/src/main/java/sonia/scm/api/v2/resources/BlameDto.java b/scm-webapp/src/main/java/sonia/scm/api/v2/resources/BlameDto.java
index 8aec147a85..3d687b681f 100644
--- a/scm-webapp/src/main/java/sonia/scm/api/v2/resources/BlameDto.java
+++ b/scm-webapp/src/main/java/sonia/scm/api/v2/resources/BlameDto.java
@@ -33,7 +33,7 @@ import java.util.List;
 @Data
 public class BlameDto extends HalRepresentation {
 
-  private List<BlameLineDto> blameLines;
+  private List<BlameLineDto> lines;
 
   public BlameDto(Links links) {
     super(links);
diff --git a/scm-webapp/src/main/java/sonia/scm/api/v2/resources/BlameResultToBlameDtoMapper.java b/scm-webapp/src/main/java/sonia/scm/api/v2/resources/BlameResultToBlameDtoMapper.java
index 4758d4ba97..e0c718e707 100644
--- a/scm-webapp/src/main/java/sonia/scm/api/v2/resources/BlameResultToBlameDtoMapper.java
+++ b/scm-webapp/src/main/java/sonia/scm/api/v2/resources/BlameResultToBlameDtoMapper.java
@@ -44,7 +44,7 @@ public abstract class BlameResultToBlameDtoMapper implements InstantAttributeMap
 
   BlameDto map(BlameResult result, NamespaceAndName namespaceAndName, String revision, String path) {
     BlameDto dto = createDto(namespaceAndName, revision, path);
-    dto.setBlameLines(result.getBlameLines().stream().map(this::map).collect(Collectors.toList()));
+    dto.setLines(result.getBlameLines().stream().map(this::map).collect(Collectors.toList()));
     return dto;
   }