diff --git a/scm-ui/ui-components/src/SyntaxHighlighter.tsx b/scm-ui/ui-components/src/SyntaxHighlighter.tsx
index 64887b23cc..23831de209 100644
--- a/scm-ui/ui-components/src/SyntaxHighlighter.tsx
+++ b/scm-ui/ui-components/src/SyntaxHighlighter.tsx
@@ -31,9 +31,21 @@ import { useLocation } from "react-router-dom";
 import { urls } from "@scm-manager/ui-api";
 import createSyntaxHighlighterRenderer from "./SyntaxHighlighterRenderer";
 import useScrollToElement from "./useScrollToElement";
+import styled from "styled-components";
+import { useTranslation } from "react-i18next";
+import copyToClipboard from "./CopyToClipboard";
 
 const LINE_NUMBER_URL_HASH_REGEX = /^#line-(.*)$/;
 
+const Container = styled.div`
+  position: relative;
+`;
+const TopRightButton = styled.button`
+  position: absolute;
+  top: 0;
+  right: 0;
+`;
+
 type Props = {
   language?: string;
   value: string;
@@ -44,6 +56,8 @@ type Props = {
 const SyntaxHighlighter: FC<Props> = ({ language = defaultLanguage, showLineNumbers = true, value, permalink }) => {
   const location = useLocation();
   const [contentRef, setContentRef] = useState<HTMLElement | null>();
+  const [copied, setCopied] = useState(false);
+  const [t] = useTranslation("commons");
 
   useScrollToElement(
     contentRef,
@@ -56,6 +70,10 @@ const SyntaxHighlighter: FC<Props> = ({ language = defaultLanguage, showLineNumb
     value
   );
 
+  const copy = () => {
+    copyToClipboard(value).then(() => setCopied(true));
+  };
+
   const createLinePermaLink = (lineNumber: number) =>
     window.location.protocol +
     "//" +
@@ -64,17 +82,25 @@ const SyntaxHighlighter: FC<Props> = ({ language = defaultLanguage, showLineNumb
 
   const defaultRenderer = createSyntaxHighlighterRenderer(createLinePermaLink, showLineNumbers);
 
+  let valueWithoutTrailingLineBreak = value;
+  if (value && value.length > 1 && value.endsWith("\n")) {
+    valueWithoutTrailingLineBreak = value.substr(0, value.length - 1);
+  }
+
   return (
-    <div ref={setContentRef}>
+    <Container ref={setContentRef}>
       <ReactSyntaxHighlighter
         showLineNumbers={false}
         language={determineLanguage(language)}
         style={highlightingTheme}
         renderer={defaultRenderer}
       >
-        {value}
+        {valueWithoutTrailingLineBreak}
       </ReactSyntaxHighlighter>
-    </div>
+      <TopRightButton title={t("syntaxHighlighting.copyButton")} onClick={copy}>
+        <i className={copied ? "fa fa-clipboard-check" : "fa fa-clipboard"} />
+      </TopRightButton>
+    </Container>
   );
 };
 
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 f8ed215e2d..307c345315 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -4613,7 +4613,9 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
       </p>
       
 
-      <div>
+      <div
+        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+      >
         <pre
           style={
             Object {
@@ -4694,41 +4696,20 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
                   style={Object {}}
                 >
                   Code without Language!
-
                 </span>
               </span>
             </div>
-            <div
-              className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-              id="line-2"
-            >
-              <span
-                aria-label="sources.content.copyPermalink"
-                className="tooltip has-tooltip-right"
-                data-tooltip="sources.content.copyPermalink"
-              >
-                <i
-                  aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-secondary"
-                  onClick={[Function]}
-                  onKeyPress={[Function]}
-                />
-              </span>
-              <span
-                className="linenumber react-syntax-highlighter-line-number"
-                onClick={[Function]}
-              >
-                2
-              </span>
-              <span
-                style={Object {}}
-              >
-                
-
-              </span>
-            </div>
           </code>
         </pre>
+        <button
+          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          onClick={[Function]}
+          title="syntaxHighlighting.copyButton"
+        >
+          <i
+            className="fa fa-clipboard"
+          />
+        </button>
       </div>
     </div>
   </div>
@@ -5781,7 +5762,9 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
       </p>
       
 
-      <div>
+      <div
+        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+      >
         <pre
           style={
             Object {
@@ -6929,45 +6912,19 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
                 >
                   }
                 </span>
-                <span
-                  style={Object {}}
-                >
-                  
-
-                </span>
-              </span>
-            </div>
-            <div
-              className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-              id="line-16"
-            >
-              <span
-                aria-label="sources.content.copyPermalink"
-                className="tooltip has-tooltip-right"
-                data-tooltip="sources.content.copyPermalink"
-              >
-                <i
-                  aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-secondary"
-                  onClick={[Function]}
-                  onKeyPress={[Function]}
-                />
-              </span>
-              <span
-                className="linenumber react-syntax-highlighter-line-number"
-                onClick={[Function]}
-              >
-                16
-              </span>
-              <span
-                style={Object {}}
-              >
-                
-
               </span>
             </div>
           </code>
         </pre>
+        <button
+          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          onClick={[Function]}
+          title="syntaxHighlighting.copyButton"
+        >
+          <i
+            className="fa fa-clipboard"
+          />
+        </button>
       </div>
       
 
@@ -14879,7 +14836,9 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
     
       
 
-      <div>
+      <div
+        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+      >
         <pre
           style={
             Object {
@@ -15252,39 +15211,19 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
               >
                 &lt;/plugins&gt;
 
-              </span>
-            </div>
-            <div
-              className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-              id="line-12"
-            >
-              <span
-                aria-label="sources.content.copyPermalink"
-                className="tooltip has-tooltip-right"
-                data-tooltip="sources.content.copyPermalink"
-              >
-                <i
-                  aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-secondary"
-                  onClick={[Function]}
-                  onKeyPress={[Function]}
-                />
-              </span>
-              <span
-                className="linenumber react-syntax-highlighter-line-number"
-                onClick={[Function]}
-              >
-                12
-              </span>
-              <span
-                style={Object {}}
-              >
-                
-
               </span>
             </div>
           </code>
         </pre>
+        <button
+          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          onClick={[Function]}
+          title="syntaxHighlighting.copyButton"
+        >
+          <i
+            className="fa fa-clipboard"
+          />
+        </button>
       </div>
       
   
@@ -16461,7 +16400,9 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
       </p>
       
 
-      <div>
+      <div
+        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+      >
         <pre
           style={
             Object {
@@ -17609,45 +17550,19 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
                 >
                   }
                 </span>
-                <span
-                  style={Object {}}
-                >
-                  
-
-                </span>
-              </span>
-            </div>
-            <div
-              className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-              id="line-16"
-            >
-              <span
-                aria-label="sources.content.copyPermalink"
-                className="tooltip has-tooltip-right"
-                data-tooltip="sources.content.copyPermalink"
-              >
-                <i
-                  aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-secondary"
-                  onClick={[Function]}
-                  onKeyPress={[Function]}
-                />
-              </span>
-              <span
-                className="linenumber react-syntax-highlighter-line-number"
-                onClick={[Function]}
-              >
-                16
-              </span>
-              <span
-                style={Object {}}
-              >
-                
-
               </span>
             </div>
           </code>
         </pre>
+        <button
+          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          onClick={[Function]}
+          title="syntaxHighlighting.copyButton"
+        >
+          <i
+            className="fa fa-clipboard"
+          />
+        </button>
       </div>
       
 
@@ -17844,7 +17759,9 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
       </h1>
       
 
-      <div>
+      <div
+        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+      >
         <pre
           style={
             Object {
@@ -19256,45 +19173,19 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
                 >
                   &gt;
                 </span>
-                <span
-                  style={Object {}}
-                >
-                  
-
-                </span>
-              </span>
-            </div>
-            <div
-              className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-              id="line-24"
-            >
-              <span
-                aria-label="sources.content.copyPermalink"
-                className="tooltip has-tooltip-right"
-                data-tooltip="sources.content.copyPermalink"
-              >
-                <i
-                  aria-label="sources.content.copyPermalink"
-                  className="fas fa-fw fa-link has-text-secondary"
-                  onClick={[Function]}
-                  onKeyPress={[Function]}
-                />
-              </span>
-              <span
-                className="linenumber react-syntax-highlighter-line-number"
-                onClick={[Function]}
-              >
-                24
-              </span>
-              <span
-                style={Object {}}
-              >
-                
-
               </span>
             </div>
           </code>
         </pre>
+        <button
+          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          onClick={[Function]}
+          title="syntaxHighlighting.copyButton"
+        >
+          <i
+            className="fa fa-clipboard"
+          />
+        </button>
       </div>
     </div>
   </div>
@@ -75396,7 +75287,9 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
 <div
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
-  <div>
+  <div
+    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+  >
     <pre
       style={
         Object {
@@ -76757,45 +76650,19 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
             >
               }
             </span>
-            <span
-              style={Object {}}
-            >
-              
-
-            </span>
-          </span>
-        </div>
-        <div
-          className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-          id="line-18"
-        >
-          <span
-            aria-label="sources.content.copyPermalink"
-            className="tooltip has-tooltip-right"
-            data-tooltip="sources.content.copyPermalink"
-          >
-            <i
-              aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-secondary"
-              onClick={[Function]}
-              onKeyPress={[Function]}
-            />
-          </span>
-          <span
-            className="linenumber react-syntax-highlighter-line-number"
-            onClick={[Function]}
-          >
-            18
-          </span>
-          <span
-            style={Object {}}
-          >
-            
-
           </span>
         </div>
       </code>
     </pre>
+    <button
+      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      onClick={[Function]}
+      title="syntaxHighlighting.copyButton"
+    >
+      <i
+        className="fa fa-clipboard"
+      />
+    </button>
   </div>
 </div>
 `;
@@ -76804,7 +76671,9 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
 <div
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
-  <div>
+  <div
+    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+  >
     <pre
       style={
         Object {
@@ -79709,45 +79578,19 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
             >
               }
             </span>
-            <span
-              style={Object {}}
-            >
-              
-
-            </span>
-          </span>
-        </div>
-        <div
-          className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-          id="line-32"
-        >
-          <span
-            aria-label="sources.content.copyPermalink"
-            className="tooltip has-tooltip-right"
-            data-tooltip="sources.content.copyPermalink"
-          >
-            <i
-              aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-secondary"
-              onClick={[Function]}
-              onKeyPress={[Function]}
-            />
-          </span>
-          <span
-            className="linenumber react-syntax-highlighter-line-number"
-            onClick={[Function]}
-          >
-            32
-          </span>
-          <span
-            style={Object {}}
-          >
-            
-
           </span>
         </div>
       </code>
     </pre>
+    <button
+      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      onClick={[Function]}
+      title="syntaxHighlighting.copyButton"
+    >
+      <i
+        className="fa fa-clipboard"
+      />
+    </button>
   </div>
 </div>
 `;
@@ -79756,7 +79599,9 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
 <div
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
-  <div>
+  <div
+    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+  >
     <pre
       style={
         Object {
@@ -80556,45 +80401,19 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
             >
               ;
             </span>
-            <span
-              style={Object {}}
-            >
-              
-
-            </span>
-          </span>
-        </div>
-        <div
-          className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-          id="line-8"
-        >
-          <span
-            aria-label="sources.content.copyPermalink"
-            className="tooltip has-tooltip-right"
-            data-tooltip="sources.content.copyPermalink"
-          >
-            <i
-              aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-secondary"
-              onClick={[Function]}
-              onKeyPress={[Function]}
-            />
-          </span>
-          <span
-            className="linenumber react-syntax-highlighter-line-number"
-            onClick={[Function]}
-          >
-            8
-          </span>
-          <span
-            style={Object {}}
-          >
-            
-
           </span>
         </div>
       </code>
     </pre>
+    <button
+      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      onClick={[Function]}
+      title="syntaxHighlighting.copyButton"
+    >
+      <i
+        className="fa fa-clipboard"
+      />
+    </button>
   </div>
 </div>
 `;
@@ -80603,7 +80422,9 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
 <div
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
-  <div>
+  <div
+    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+  >
     <pre
       style={
         Object {
@@ -88564,41 +88385,20 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
               style={Object {}}
             >
                dolore cillum. Esse laboris consequat dolor anim exercitation tempor aliqua deserunt velit magna laboris. Culpa culpa minim duis amet mollit do quis amet commodo nulla irure.
-
             </span>
           </span>
         </div>
-        <div
-          className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-          id="line-172"
-        >
-          <span
-            aria-label="sources.content.copyPermalink"
-            className="tooltip has-tooltip-right"
-            data-tooltip="sources.content.copyPermalink"
-          >
-            <i
-              aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-secondary"
-              onClick={[Function]}
-              onKeyPress={[Function]}
-            />
-          </span>
-          <span
-            className="linenumber react-syntax-highlighter-line-number"
-            onClick={[Function]}
-          >
-            172
-          </span>
-          <span
-            style={Object {}}
-          >
-            
-
-          </span>
-        </div>
       </code>
     </pre>
+    <button
+      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      onClick={[Function]}
+      title="syntaxHighlighting.copyButton"
+    >
+      <i
+        className="fa fa-clipboard"
+      />
+    </button>
   </div>
 </div>
 `;
@@ -88607,7 +88407,9 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
 <div
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
-  <div>
+  <div
+    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+  >
     <pre
       style={
         Object {
@@ -90058,45 +89860,19 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
             >
               )
             </span>
-            <span
-              style={Object {}}
-            >
-              
-
-            </span>
-          </span>
-        </div>
-        <div
-          className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-          id="line-21"
-        >
-          <span
-            aria-label="sources.content.copyPermalink"
-            className="tooltip has-tooltip-right"
-            data-tooltip="sources.content.copyPermalink"
-          >
-            <i
-              aria-label="sources.content.copyPermalink"
-              className="fas fa-fw fa-link has-text-secondary"
-              onClick={[Function]}
-              onKeyPress={[Function]}
-            />
-          </span>
-          <span
-            className="linenumber react-syntax-highlighter-line-number"
-            onClick={[Function]}
-          >
-            21
-          </span>
-          <span
-            style={Object {}}
-          >
-            
-
           </span>
         </div>
       </code>
     </pre>
+    <button
+      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      onClick={[Function]}
+      title="syntaxHighlighting.copyButton"
+    >
+      <i
+        className="fa fa-clipboard"
+      />
+    </button>
   </div>
 </div>
 `;
@@ -90105,7 +89881,9 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
 <div
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
-  <div>
+  <div
+    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+  >
     <pre
       style={
         Object {
@@ -92452,27 +92230,19 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
             >
               }
             </span>
-            <span
-              style={Object {}}
-            >
-              
-
-            </span>
-          </span>
-        </div>
-        <div
-          className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
-          id="line-32"
-        >
-          <span
-            style={Object {}}
-          >
-            
-
           </span>
         </div>
       </code>
     </pre>
+    <button
+      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      onClick={[Function]}
+      title="syntaxHighlighting.copyButton"
+    >
+      <i
+        className="fa fa-clipboard"
+      />
+    </button>
   </div>
 </div>
 `;