diff --git a/src/css/custom.css b/src/css/custom.css
index 4ff91c89..262b9ffd 100755
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -512,7 +512,14 @@ html[data-theme="dark"] .dropdown-version .navbar__item--version:before {
 
 /* hash link */
 .hash-link::before {
-  content: none !important;
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244' /%3E%3C/svg%3E%0A") !important;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: inline-block;
+  opacity: 0.5;
+}
+.hash-link:hover::before {
+  opacity: 1;
 }
 
 /* doc search */
diff --git a/src/theme/EditThisPage/index.js b/src/theme/EditThisPage/index.js
index ae6f947d..5e39352b 100644
--- a/src/theme/EditThisPage/index.js
+++ b/src/theme/EditThisPage/index.js
@@ -1,19 +1,21 @@
-import React from 'react';
-import Translate from '@docusaurus/Translate';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-import IconEdit from '@theme/Icon/Edit';
-export default function EditThisPage({editUrl}) {
+import React from "react";
+import Translate from "@docusaurus/Translate";
+import { ThemeClassNames } from "@docusaurus/theme-common";
+import IconEdit from "@theme/Icon/Edit";
+export default function EditThisPage({ editUrl }) {
   return (
     <a
       href={editUrl}
       target="_blank"
       rel="noreferrer noopener"
-      className={ThemeClassNames.common.editThisPage}>
+      className={ThemeClassNames.common.editThisPage}
+    >
       <IconEdit />
       <Translate
         id="theme.common.editThisPage"
-        description="The link label to edit the current page">
-        Edit this page
+        description="The link label to edit the current page"
+      >
+        Report an error
       </Translate>
     </a>
   );
diff --git a/src/theme/Heading/index.js b/src/theme/Heading/index.js
new file mode 100644
index 00000000..316f6cde
--- /dev/null
+++ b/src/theme/Heading/index.js
@@ -0,0 +1,63 @@
+import React from "react";
+import clsx from "clsx";
+import { translate } from "@docusaurus/Translate";
+import { useThemeConfig } from "@docusaurus/theme-common";
+import Link from "@docusaurus/Link";
+import styles from "./styles.module.css";
+export default function Heading({ as: As, id, ...props }) {
+  const {
+    navbar: { hideOnScroll },
+  } = useThemeConfig();
+  // H1 headings do not need an id because they don't appear in the TOC.
+  if (As === "h1" || !id) {
+    return <As {...props} id={undefined} />;
+  }
+  const anchorTitle = translate(
+    {
+      id: "theme.common.headingLinkTitle",
+      message: "Direct link to {heading}",
+      description: "Title for link to heading",
+    },
+    {
+      heading: typeof props.children === "string" ? props.children : id,
+    }
+  );
+
+  const copyToClipboard = (e) => {
+    e.preventDefault();
+    navigator.clipboard.writeText(e.target.href);
+  };
+
+  const onClick = (e) => {
+    e.preventDefault();
+    console.log("click");
+    copyToClipboard(e);
+  };
+
+  return (
+    <>
+      <As
+        {...props}
+        className={clsx(
+          "anchor",
+          hideOnScroll
+            ? styles.anchorWithHideOnScrollNavbar
+            : styles.anchorWithStickyNavbar,
+          props.className
+        )}
+        id={id}
+      >
+        {props.children}
+        <Link
+          className="hash-link"
+          to={`#${id}`}
+          aria-label={anchorTitle}
+          title={anchorTitle}
+          onClick={onClick}
+        >
+          &#8203;
+        </Link>
+      </As>
+    </>
+  );
+}
diff --git a/src/theme/Heading/styles.module.css b/src/theme/Heading/styles.module.css
new file mode 100644
index 00000000..ba959ca0
--- /dev/null
+++ b/src/theme/Heading/styles.module.css
@@ -0,0 +1,28 @@
+/*
+When the navbar is sticky, ensure that on anchor click,
+the browser does not scroll that anchor behind the navbar
+See https://twitter.com/JoshWComeau/status/1332015868725891076
+ */
+.anchorWithStickyNavbar {
+  scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
+}
+
+.anchorWithHideOnScrollNavbar {
+  scroll-margin-top: 0.5rem;
+}
+
+:global(.hash-link) {
+  opacity: 0;
+  padding-left: 0.5rem;
+  transition: opacity var(--ifm-transition-fast);
+  user-select: none;
+}
+
+:global(.hash-link::before) {
+  content: '#';
+}
+
+:global(.hash-link:focus),
+:global(*:hover > .hash-link) {
+  opacity: 1;
+}