diff --git a/assets/scss/_elements_project.scss b/assets/scss/_elements_project.scss
index 7f1b01c72..346bbc2ae 100644
--- a/assets/scss/_elements_project.scss
+++ b/assets/scss/_elements_project.scss
@@ -149,4 +149,26 @@ div.tip {
   font-size: 1rem;
   font-weight: 600;
   word-break: break-word;
-}
\ No newline at end of file
+}
+
+.heading-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+
+  .heading-anchor {
+    font-size: 0.6em;
+    opacity: 0;
+    transform: translateY(2px);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    margin-left: 0.25rem;
+    text-decoration: none;
+  }
+
+  &:hover .heading-anchor {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index c99160ff6..c234f6be2 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -11,6 +11,7 @@
 @import "_videos_project.scss";
 @import "subscription.scss";
 @import "_video-landing_project.scss";
+@import "elements_project";
 
 .navbar-dark {
   min-height: 5rem;
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
new file mode 100644
index 000000000..fb0b1eb71
--- /dev/null
+++ b/layouts/_default/_markup/render-heading.html
@@ -0,0 +1,9 @@
+{{- $level := .Level -}}
+{{- $text := .Text | safeHTML -}}
+{{- $anchor := .Anchor | safeURL -}}
+
+{{ $level := .Level }}
+<h{{ $level }} id="{{ .Anchor | safeURL }}" class="heading-link">
+  {{ .Text }}
+  <a href="#{{ .Anchor | safeURL }}" class="heading-anchor" aria-label="Permalink to this heading">🔗</a>
+</h{{ $level }}>