diff --git a/src/components/toolbar.tsx b/src/components/toolbar.tsx
index 5a4bea21..16e012e8 100644
--- a/src/components/toolbar.tsx
+++ b/src/components/toolbar.tsx
@@ -31,42 +31,6 @@ const Toolbar = auto((props: { store: Store }) => {
       },
     });
   };
-  const headingClicked = (level: number) => {
-    const editor = store.editor;
-    const currentLine = editor.state.doc.lineAt(
-      editor.state.selection.main.head,
-    );
-    editor.dispatch({
-      changes: {
-        from: currentLine.from,
-        to: currentLine.from,
-        insert: `${'#'.repeat(level)} `,
-      },
-    });
-  };
-  const hrClicked = () => {
-    const editor = store.editor;
-    const cursorPos = editor.state.selection.main.head;
-    const currentLine = editor.state.doc.lineAt(cursorPos);
-    const isAtLineStart = cursorPos === currentLine.from;
-    if (isAtLineStart) {
-      editor.dispatch({
-        changes: {
-          from: currentLine.from,
-          to: currentLine.from,
-          insert: '\n---\n\n',
-        },
-      });
-    } else {
-      editor.dispatch({
-        changes: {
-          from: currentLine.to,
-          to: currentLine.to,
-          insert: '\n\n---\n\n',
-        },
-      });
-    }
-  };
   const listClicked = (prefix: string) => {
     const editor = store.editor;
     const startLine = editor.state.doc.lineAt(editor.state.selection.main.from);
@@ -119,22 +83,17 @@ const Toolbar = auto((props: { store: Store }) => {
         ></i>
       ))}
       <i className="dividor">|</i>
-      {[1, 2, 3, 4, 5, 6].map((level) => (
-        <i
-          key={level}
-          title={`Heading ${level}`}
-          className="fa heading-icon"
-          onClick={() => headingClicked(level)}
-        >
-          h{level}
-        </i>
-      ))}
-      <i className="dividor">|</i>
       <i
-        title="Horizontal rule"
-        className="fa fa-minus"
-        onClick={() => hrClicked()}
+        title="Emoji"
+        className="fa fa-regular fa-smile"
+        onClick={() => modals.emoji.open()}
+      ></i>
+      <i
+        title="Font awesome"
+        className="fa fa-regular fa-flag"
+        onClick={() => modals.fontAwesome.open()}
       ></i>
+      <i className="dividor">|</i>
       {[
         { name: 'Quote', icon: 'fa-quote-left', prefix: '> ' },
         { name: 'Unordered list', icon: 'fa-list-ul', prefix: '- ' },
@@ -245,17 +204,6 @@ row 2 col 1 | row 2 col 2`.trim();
         }}
       ></i>
       <i className="dividor">|</i>
-      <i
-        title="Emoji"
-        className="fa fa-regular fa-smile"
-        onClick={() => modals.emoji.open()}
-      ></i>
-      <i
-        title="Font awesome"
-        className="fa fa-regular fa-flag"
-        onClick={() => modals.fontAwesome.open()}
-      ></i>
-      <i className="dividor">|</i>
       <i
         title="Math"
         className="fa fa-square-root-variable"
diff --git a/src/css/others.css b/src/css/others.css
index 83fe4868..2f1cf0fc 100644
--- a/src/css/others.css
+++ b/src/css/others.css
@@ -13,22 +13,16 @@
   padding: 2px 5px;
   border: 1px solid transparent;
 }
-#toolbar .fa:hover,
-#about-icon:hover {
-  background-color: #999;
-  border-color: #ccc;
-  cursor: pointer;
-}
-
 #about-icon {
   height: 20px;
   vertical-align: top;
 }
 
-.heading-icon {
-  font-family: 'Helvetica', 'Arial', sans-serif;
-  font-size: 1.1rem;
-  font-weight: 100;
+#toolbar .fa:hover,
+#about-icon:hover {
+  background-color: #999;
+  border-color: #ccc;
+  cursor: pointer;
 }
 
 .dividor {
@@ -37,6 +31,7 @@
   margin: 0 6px;
 }
 
+/* toolbar cannot be select */
 .noselect {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -46,6 +41,7 @@
   user-select: none;
 }
 
+/* fix clicking anchor scroll issue */
 h1,
 h2,
 h3,
@@ -55,10 +51,12 @@ h6 {
   scroll-margin-top: 1px;
 }
 
+/* code highlight */
 pre code.hljs {
   padding: 0;
 }
 
+/* custom container */
 .success,
 .info,
 .warning,
@@ -68,38 +66,34 @@ pre code.hljs {
   border: 1px solid transparent;
   border-radius: 4px;
 }
-
 .success > p:last-child,
 .info > p:last-child,
 .warning > p:last-child,
 .danger > p:last-child {
   margin-bottom: 0;
 }
-
 .success {
   color: #3c763d;
   background-color: #dff0d8;
   border-color: #d6e9c6;
 }
-
 .info {
   color: #31708f;
   background-color: #d9edf7;
   border-color: #bce8f1;
 }
-
 .warning {
   color: #8a6d3b;
   background-color: #fcf8e3;
   border-color: #faebcc;
 }
-
 .danger {
   color: #a94442;
   background-color: #f2dede;
   border-color: #ebccd1;
 }
 
+/* mermaid */
 pre.mermaid {
   text-align: center;
 }