diff --git a/_layouts/common.html b/_layouts/common.html
index b13c6c2..ac3f59a 100644
--- a/_layouts/common.html
+++ b/_layouts/common.html
@@ -19,5 +19,14 @@
     </head>
     <body>
 {{ content }}
+        <script>
+         // add permalink on headings
+         document.querySelectorAll('h2, h3, h4, h5, h5').forEach((heading) => {
+             const link = document.createElement('a');
+             link.className = 'permalink';
+             link.href = `#${heading.id}`;
+             heading.appendChild(link);
+         });
+        </script>
     </body>
 </html>
diff --git a/style.scss b/style.scss
index 136b421..f8b6aa4 100644
--- a/style.scss
+++ b/style.scss
@@ -46,11 +46,29 @@ a:hover {
     color: $hover;
 }
 
-// fragment targets
+// permalink on headings
 
-*:target {
-    border-left: 5px solid $accent;
-    padding-left: 5px;
+h2, h3, h4, h5, h5 {
+    .permalink {
+        margin-left: 5px;
+        text-decoration: none;
+        visibility: hidden;
+
+        &::before {
+            content: "#";
+        }
+    }
+
+    &:target {
+        border-left: 5px solid $accent;
+        padding-left: 5px;
+    }
+
+    &:hover {
+        .permalink {
+            visibility: visible;
+        }
+    }
 }
 
 // binary list and search
