diff --git a/assets/css/src/texts.css b/assets/css/src/texts.css
index a598084..c270fc9 100644
--- a/assets/css/src/texts.css
+++ b/assets/css/src/texts.css
@@ -25,11 +25,17 @@
 }
 
 h1,
+h1 *,
 h2,
+h2 *,
 h3,
+h3 *,
 h4,
+h4 *,
 h5,
-p {
+h5 *,
+p,
+p * {
   font-weight: var(--font-weight-light);
   line-height: 1;
 }
@@ -156,6 +162,14 @@ article p:not(:last-child) {
   margin-bottom: var(--unit--vertical);
 }
 
+.footnote,
+.footnote * {
+  scroll-margin-block-start: calc(var(--unit--vertical) * 6);
+  color: var(--color-secondary);
+  text-decoration: none !important;
+  font-weight: var(--font-weight-bold) !important;
+}
+
 @media screen and (min-width: 640px) {
   .title-center {
     margin-left: calc(2 * var(--unit--horizontal));
diff --git a/assets/js/script.js b/assets/js/script.js
index 3feede8..54bc0ed 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -130,6 +130,21 @@ function togglePanel(side) {
   }
 }
 
+function fixFootNotes() {
+  const footnotes = document.querySelectorAll('a[href^="#sdfootnote"]');
+
+  footnotes.forEach((footnote) => {
+    const href = footnote.href;
+    footnote.classList.add("footnote");
+    if (href.includes("sym")) {
+      footnote.id = footnote.hash.replace("sym", "anc").replace("#", "");
+    }
+    if (href.includes("anc")) {
+      footnote.id = footnote.hash.replace("anc", "sym").replace("#", "");
+    }
+  });
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   window.window.scrollTo({
     top: 0,
@@ -141,6 +156,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
   setWindowHeightFactor();
 
+  fixFootNotes();
+
   // Wait for fonts applied
   setTimeout(() => {
     enableToggleEntriesVisibility();