diff --git a/app/javascript/portal/application.scss b/app/javascript/portal/application.scss
index 8a1b7461b..866d21c14 100644
--- a/app/javascript/portal/application.scss
+++ b/app/javascript/portal/application.scss
@@ -28,8 +28,12 @@ body {
 }
 
 .heading {
+  .permalink {
+    visibility: hidden;
+  }
+
   &:hover {
-    a {
+    .permalink {
       visibility: visible;
     }
   }
diff --git a/app/javascript/portal/portalHelpers.js b/app/javascript/portal/portalHelpers.js
index 27adad3d5..b5f892398 100644
--- a/app/javascript/portal/portalHelpers.js
+++ b/app/javascript/portal/portalHelpers.js
@@ -11,7 +11,7 @@ export const getHeadingsfromTheArticle = () => {
     const slug = slugifyWithCounter(element.innerText);
     element.id = slug;
     element.className = 'scroll-mt-24 heading';
-    element.innerHTML += `<a class="invisible text-slate-600 ml-3" href="#${slug}" title="${element.innerText}" data-turbolinks="false">#</a>`;
+    element.innerHTML += `<a class="permalink text-slate-600 ml-3" href="#${slug}" title="${element.innerText}" data-turbolinks="false">#</a>`;
     rows.push({
       slug,
       title: element.innerText,