diff --git a/src/dark.css b/src/dark.css
index 60137bb..ac24355 100644
--- a/src/dark.css
+++ b/src/dark.css
@@ -434,4 +434,14 @@ iframe {
 a {
     color: #007bff;
     word-break: break-all;
+}
+
+.footnote {
+    border-top: solid 1px #555;
+    font-style: italic;
+}
+
+.footnote > * {
+    display: block;
+    margin-bottom: 10px;
 }
\ No newline at end of file
diff --git a/src/light.css b/src/light.css
index 0e6780f..c0bda4d 100644
--- a/src/light.css
+++ b/src/light.css
@@ -442,4 +442,15 @@ iframe {
 a {
     color: #007bff;
     word-break: break-all;
+}
+
+.footnote {
+    border-top: solid 1px #ddd;
+    font-style: italic;
+    color: #777;
+}
+
+
+.footnote > * {
+    display: block;
 }
\ No newline at end of file
diff --git a/src/render.hpp b/src/render.hpp
index de0c8e0..a4b8e87 100644
--- a/src/render.hpp
+++ b/src/render.hpp
@@ -89,7 +89,23 @@ namespace almo {
         return output_html;
     }
 
+    void move_footnote_definition(Markdown& ast) {
+        std::vector<std::shared_ptr<ASTNode>> footnote_defs = ast.nodes_byclass("FootnoteDefinition");
+
+        std::shared_ptr<DivBlock> footnote_div = std::make_shared<DivBlock>("footnote");
+
+        ast.pushback_child(footnote_div);
+
+        for (auto node : footnote_defs) {
+            ast.move_node(node, footnote_div);
+        }
+    }
+
     std::string render(Markdown ast, std::map<std::string, std::string> meta_data) {
+        std::vector<std::shared_ptr<ASTNode>> footnote_defs = ast.nodes_byclass("FootnoteDefinition");
+
+        std::shared_ptr<DivBlock> footnote_div = std::make_shared<DivBlock>("footnote");
+
         std::string content = ast.to_html();
 
         std::string html_template = load_html_template(meta_data["template_file"], meta_data["css_setting"], meta_data["required_pyodide"] == "true");
@@ -148,6 +164,9 @@ namespace almo {
         Markdown ast;
         MarkdownParser parser(md_content);
         parser.process(ast);
+
+        move_footnote_definition(ast);
+
         render(ast, meta_data);
         ParseSummary summary = {
             .ast = ast,
diff --git a/src/syntax/FootnoteDefinition.hpp b/src/syntax/FootnoteDefinition.hpp
index 922e19a..a6d7157 100644
--- a/src/syntax/FootnoteDefinition.hpp
+++ b/src/syntax/FootnoteDefinition.hpp
@@ -8,25 +8,24 @@
 namespace almo {
 struct FootnoteDefinition : public ASTNode {
    private:
-    std::string tag;
+    std::string symbol;
 
    public:
-    FootnoteDefinition(std::string tag_) : tag(tag_) { set_uuid(); }
+    FootnoteDefinition(std::string symbol_) : symbol(symbol_) { set_uuid(); }
     std::string to_html() const override {
         std::string childs_html = concatenated_childs_html();
-        return "<span class=\"footnote_def\"> <li id=\"note_" + tag +
-               "\"><a href=\"#ref_" + tag + "\">^" + tag + "</a>" +
-               childs_html + "</li> </span>";
+        return "<span class=\"footnote-def\"><a href=\"#ref_" + symbol + "\">^" +
+               symbol + "</a>" + childs_html + "</span>";
     }
     std::map<std::string, std::string> get_properties() const override {
-        return {{"tag", tag}};
+        return {{"symbol", symbol}};
     }
     std::string get_classname() const override { return "FootnoteDefinition"; }
 };
 
 struct FootnoteDefinitionSyntax : public BlockSyntax {
     /*
-        "[^" + expr + "]: + hoge"
+        "[^" + symbol + "]: + hoge"
     */
     static inline const std::regex rex = std::regex(R"(\[\^(.*?)\]:(.*?))");
     bool operator()(Reader &read) const override {