diff --git a/assets/css/screen.css b/assets/css/screen.css
index e9400eb..03f82b6 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -767,6 +767,22 @@ hr {
     }
 }
 
+.anchor-link {
+    opacity: 0;
+    text-decoration: none;
+    margin-left: 0em;
+}
+
+h1:hover .anchor-link,
+h2:hover .anchor-link,
+h3:hover .anchor-link,
+h4:hover .anchor-link,
+h5:hover .anchor-link,
+h6:hover .anchor-link {
+    opacity: 1;
+    text-decoration: none;
+}
+
 /* Custom CTA
 /* ---------------------------------------------------------- */
 
diff --git a/assets/js/main.js b/assets/js/main.js
index 7a5235d..7daeba0 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -52,3 +52,18 @@ function initParallax() {
 (function () {
     pagination(true, initParallax);
 })();
+
+(function (window, document) {
+    var addAnchors = () => {
+        var headings = document.querySelectorAll('.gh-content h1, .gh-content h2, .gh-content h3, gh-.content h4, .gh-content h5, .gh-content h6')
+        headings.forEach((heading) => {
+            heading.insertAdjacentHTML('beforeend', `
+                <a href="#${heading.id}" class="anchor-link">
+                    <svg width="1em" height="0.85em" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg>
+                </a>
+            `)
+        })
+    }
+
+    document.addEventListener('DOMContentLoaded', addAnchors)
+})(window, document);