diff --git a/components/footnote.js b/components/footnote.js
new file mode 100644
index 0000000..a7d771d
--- /dev/null
+++ b/components/footnote.js
@@ -0,0 +1,25 @@
+export default function(dom, data) {
+
+  var fnTags = [].slice.apply(dom.querySelectorAll("dt-fn"));
+  var fnContent = [];
+  fnTags.forEach((el,n) => {
+    var content = el.innerHTML;
+    fnContent.push(content);
+    n = (n+1)+"";
+    var key = "fn-"+n;
+    var escaped_content = content.replace(/"/g, "'");
+    el.innerHTML = `<sup><span id="${key}" data-hover="${escaped_content}" style="cursor:pointer">${n}</span></sup>`;
+  });
+
+  let fnList = dom.querySelector("dt-fn-list");
+  if (fnList) {
+    let ol = dom.createElement("ol");
+    fnContent.forEach(content => {
+      let el = dom.createElement("li");
+      el.innerHTML = content;
+      ol.appendChild(el);
+    })
+    fnList.appendChild(ol);
+  }
+
+}
diff --git a/index.js b/index.js
index e6f8be5..cdfde76 100644
--- a/index.js
+++ b/index.js
@@ -9,6 +9,7 @@ import byline from "./components/byline";
 import appendix from "./components/appendix";
 import footer from "./components/footer";
 import citation from "./components/citation";
+import footnote from "./components/footnote";
 import markdown from "./components/markdown";
 import code from "./components/code";
 import hoverBox from "./components/hover-box-include";
@@ -31,6 +32,7 @@ function renderOnLoad(dom, data) {
   markdown(dom, data);
   code(dom, data);
   citation(dom, data);
+  footnote(dom, data);
   hoverBox(dom, data);
   // TODO remove script tag
 }