diff --git a/gradle/changelog/source-copy-and-markdown-toggle.yaml b/gradle/changelog/source-copy-and-markdown-toggle.yaml
new file mode 100644
index 0000000000..8d76c64618
--- /dev/null
+++ b/gradle/changelog/source-copy-and-markdown-toggle.yaml
@@ -0,0 +1,4 @@
+- type: changed
+  description: Only display source code copy button on hover ([#1939](https://github.com/scm-manager/scm-manager/pull/1939))
+- type: fixed
+  description: Markdown toggle covers source copy button ([#1939](https://github.com/scm-manager/scm-manager/pull/1939))
diff --git a/scm-ui/ui-components/src/SyntaxHighlighter.tsx b/scm-ui/ui-components/src/SyntaxHighlighter.tsx
index 23831de209..4c95636339 100644
--- a/scm-ui/ui-components/src/SyntaxHighlighter.tsx
+++ b/scm-ui/ui-components/src/SyntaxHighlighter.tsx
@@ -37,15 +37,20 @@ import copyToClipboard from "./CopyToClipboard";
 
 const LINE_NUMBER_URL_HASH_REGEX = /^#line-(.*)$/;
 
-const Container = styled.div`
-  position: relative;
-`;
 const TopRightButton = styled.button`
   position: absolute;
+  display: none;
   top: 0;
   right: 0;
 `;
 
+const Container = styled.div`
+  position: relative;
+  &:hover > ${TopRightButton} {
+    display: inline-block;
+  }
+`;
+
 type Props = {
   language?: string;
   value: string;
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 876ccde558..308d3681a2 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -4614,7 +4614,7 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
       
 
       <div
-        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+        className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
       >
         <pre
           style={
@@ -4702,7 +4702,7 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
           </code>
         </pre>
         <button
-          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
           onClick={[Function]}
           title="syntaxHighlighting.copyButton"
         >
@@ -5763,7 +5763,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
       
 
       <div
-        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+        className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
       >
         <pre
           style={
@@ -6917,7 +6917,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
           </code>
         </pre>
         <button
-          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
           onClick={[Function]}
           title="syntaxHighlighting.copyButton"
         >
@@ -14837,7 +14837,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
       
 
       <div
-        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+        className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
       >
         <pre
           style={
@@ -15216,7 +15216,7 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
           </code>
         </pre>
         <button
-          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
           onClick={[Function]}
           title="syntaxHighlighting.copyButton"
         >
@@ -16401,7 +16401,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
       
 
       <div
-        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+        className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
       >
         <pre
           style={
@@ -17555,7 +17555,7 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
           </code>
         </pre>
         <button
-          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
           onClick={[Function]}
           title="syntaxHighlighting.copyButton"
         >
@@ -17760,7 +17760,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
       
 
       <div
-        className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+        className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
       >
         <pre
           style={
@@ -19178,7 +19178,7 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
           </code>
         </pre>
         <button
-          className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+          className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
           onClick={[Function]}
           title="syntaxHighlighting.copyButton"
         >
@@ -76650,7 +76650,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
   <div
-    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
   >
     <pre
       style={
@@ -78017,7 +78017,7 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
       </code>
     </pre>
     <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
       onClick={[Function]}
       title="syntaxHighlighting.copyButton"
     >
@@ -78034,7 +78034,7 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
   <div
-    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
   >
     <pre
       style={
@@ -80945,7 +80945,7 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
       </code>
     </pre>
     <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
       onClick={[Function]}
       title="syntaxHighlighting.copyButton"
     >
@@ -80962,7 +80962,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
   <div
-    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
   >
     <pre
       style={
@@ -81768,7 +81768,7 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
       </code>
     </pre>
     <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
       onClick={[Function]}
       title="syntaxHighlighting.copyButton"
     >
@@ -81785,7 +81785,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
   <div
-    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
   >
     <pre
       style={
@@ -89753,7 +89753,7 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
       </code>
     </pre>
     <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
       onClick={[Function]}
       title="syntaxHighlighting.copyButton"
     >
@@ -89770,7 +89770,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
   <div
-    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
   >
     <pre
       style={
@@ -91227,7 +91227,7 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
       </code>
     </pre>
     <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
       onClick={[Function]}
       title="syntaxHighlighting.copyButton"
     >
@@ -91244,7 +91244,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
   className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
 >
   <div
-    className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
+    className="SyntaxHighlighter__Container-ks8t62-1 eKVmMv"
   >
     <pre
       style={
@@ -93597,7 +93597,7 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
       </code>
     </pre>
     <button
-      className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
+      className="SyntaxHighlighter__TopRightButton-ks8t62-0 iyikPX"
       onClick={[Function]}
       title="syntaxHighlighting.copyButton"
     >
diff --git a/scm-ui/ui-webapp/public/locales/de/repos.json b/scm-ui/ui-webapp/public/locales/de/repos.json
index 9cabb5a539..07dd67e09c 100644
--- a/scm-ui/ui-webapp/public/locales/de/repos.json
+++ b/scm-ui/ui-webapp/public/locales/de/repos.json
@@ -356,8 +356,8 @@
       "annotateButton": "Annotate",
       "downloadButton": "Download",
       "toggleButton": {
-        "showMarkdown": "Markdown rendern",
-        "showSources": "Sources anzeigen"
+        "showMarkdown": "Vorschau",
+        "showSources": "Source"
       },
       "showMore": "Mehr Informationen einblenden",
       "hideMore": "Mehr Informationen ausblenden",
diff --git a/scm-ui/ui-webapp/public/locales/en/repos.json b/scm-ui/ui-webapp/public/locales/en/repos.json
index afd12676a8..9c787efc18 100644
--- a/scm-ui/ui-webapp/public/locales/en/repos.json
+++ b/scm-ui/ui-webapp/public/locales/en/repos.json
@@ -356,8 +356,8 @@
       "annotateButton": "Annotate",
       "downloadButton": "Download",
       "toggleButton": {
-        "showMarkdown": "Render markdown",
-        "showSources": "Show sources"
+        "showMarkdown": "Preview",
+        "showSources": "Source"
       },
       "showMore": "Show more information",
       "hideMore": "Hide more information",
diff --git a/scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx b/scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx
index 392eaed8b6..3c81a3a1a6 100644
--- a/scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/components/content/SwitchableMarkdownViewer.tsx
@@ -22,22 +22,14 @@
  * SOFTWARE.
  */
 import React, { FC, useState } from "react";
-import styled from "styled-components";
 import MarkdownViewer from "./MarkdownViewer";
 import { File } from "@scm-manager/ui-types";
-import { Button, ErrorNotification, Loading, SyntaxHighlighter } from "@scm-manager/ui-components";
+import { ErrorNotification, Loading, SyntaxHighlighter } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
 import { useFileContent } from "@scm-manager/ui-api";
 import replaceBranchWithRevision from "../../ReplaceBranchWithRevision";
 import { useLocation } from "react-router-dom";
-
-const ToggleButton = styled(Button)`
-  max-width: 1rem;
-  position: absolute;
-  top: 0;
-  right: 0.25rem;
-  z-index: 30;
-`;
+import classNames from "classnames";
 
 type Props = {
   file: File;
@@ -65,17 +57,16 @@ const SwitchableMarkdownViewer: FC<Props> = ({ file, basePath }) => {
 
   return (
     <div className="is-relative">
-      <ToggleButton
-        color={renderMarkdown ? "link" : ""}
-        action={toggleMarkdown}
-        title={
-          renderMarkdown
-            ? t("sources.content.toggleButton.showSources")
-            : t("sources.content.toggleButton.showMarkdown")
-        }
-      >
-        <i className="fab fa-markdown" />
-      </ToggleButton>
+      <div className="tabs is-toggle is-right">
+        <ul>
+          <li className={classNames({ "is-active": renderMarkdown })} onClick={toggleMarkdown}>
+            <a>{t("sources.content.toggleButton.showMarkdown")}</a>
+          </li>
+          <li className={classNames({ "is-active": !renderMarkdown })} onClick={toggleMarkdown}>
+            <a>{t("sources.content.toggleButton.showSources")}</a>
+          </li>
+        </ul>
+      </div>
       {renderMarkdown ? (
         <MarkdownViewer content={content || ""} basePath={basePath} permalink={permalink} />
       ) : (