diff --git a/website/homepage/render_html.py b/website/homepage/render_html.py
index f33511d62a..0fb286c03a 100644
--- a/website/homepage/render_html.py
+++ b/website/homepage/render_html.py
@@ -151,14 +151,7 @@ def render_guides():
         guide_output = guide_output.replace("<pre>", "<div class='code-block' style='display: flex'><pre>")
         guide_output = guide_output.replace("</pre>", f"</pre>{copy_button}</div>")
 
-        output_html = markdown2.markdown(guide_output, extras=["target-blank-links"])
-
-        for match in re.findall(r"<h3>([A-Za-z0-9 ]*)<\/h3>", output_html):
-            output_html = output_html.replace(
-                f"<h3>{match}</h3>",
-                f"<h3 id={match.lower().replace(' ', '_')}>{match}</h3>",
-            )
-
+        output_html = markdown2.markdown(guide_output, extras=["target-blank-links", "header-ids"])
         os.makedirs("generated", exist_ok=True)
         os.makedirs(os.path.join("generated", guide["name"]), exist_ok=True)
         with open(
diff --git a/website/homepage/src/assets/img/anchor.svg b/website/homepage/src/assets/img/anchor.svg
new file mode 100644
index 0000000000..94393f8f8f
--- /dev/null
+++ b/website/homepage/src/assets/img/anchor.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#808080" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"/></svg>
\ No newline at end of file
diff --git a/website/homepage/src/guides_template.html b/website/homepage/src/guides_template.html
index 1871d51f66..46d391b579 100644
--- a/website/homepage/src/guides_template.html
+++ b/website/homepage/src/guides_template.html
@@ -56,6 +56,18 @@
       font-weight: 600;
     }
 
+    .anchor-img {
+      margin: 0 0 0 5px !important;
+    }
+
+    .anchor {
+      visibility: hidden;
+    }
+
+    .header:hover .anchor {
+      visibility: visible;
+    }
+
     .copy {
       padding-right: 1em;
       background: #f9fafb;
@@ -134,6 +146,22 @@
           });
       });
     });
+    function createAnchorTag(link) {
+            let a = document.createElement('a');
+            a.href = link;
+            a.classList.add("anchor");
+            let img = document.createElement('img');
+            img.classList.add("anchor-img", "w-7", "max-w-full", "inline-block", "mr-0", "ml-1")
+            img.src = "/assets/img/anchor.svg";
+            a.appendChild(img);
+            return a;
+        }
+    var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
+    for (let i = 0; i < headers.length; i++) {
+      headers[i].classList.add("header");
+      let link = '#' + headers[i].id;
+      headers[i].appendChild(createAnchorTag(link))
+    }
 
     function copyCode(elem) {
         var text = elem.parentElement.innerText;