diff --git a/README.md b/README.md
index be7f62bd..416fa97d 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,6 @@ Copyright © 2015 - 2024 [Tyler Liu](https://github.com/tylerlong)
 - Release a React library so that everyone can use it easily
   - a few lines of code to embed mdp to their own app
 - Download as pdf/png/html/html code
-- modals should go to separate files in src/components/modals folder
 - Add explict typings to most code
 - Make it support node.js, means it could run without browser
 - Close most GitHub issues
diff --git a/src/components/modals/index.tsx b/src/components/modals/index.tsx
index d3ed7c18..31d877a6 100644
--- a/src/components/modals/index.tsx
+++ b/src/components/modals/index.tsx
@@ -1,230 +1,19 @@
-import { Button, Input, InputRef, Modal } from 'antd';
 import { auto } from 'manate/react';
-import React, { useRef, useState } from 'react';
+import React from 'react';
 
-import iconUrl from '../../icon.svg';
 import { Store } from '../../store';
 import PreferencesModal from './preferences';
+import PromptModals from './prompt';
+import StaticModals from './static';
 
 const Modals = auto((props: { store: Store }) => {
   console.log('render modals');
   const { store } = props;
-  const { modals } = store;
-  const emojiInput = useRef<InputRef>(null);
-  const faInput = useRef<InputRef>(null);
-  const [emojiValue, setEmojiValue] = useState('');
-  const [faValue, setFaValue] = useState('');
-  const handleEmojiOK = () => {
-    modals.emoji.close();
-    const value = emojiValue.trim();
-    if (value.length > 0) {
-      store.editor.replaceSelection(`:${value}:`);
-    }
-    setEmojiValue('');
-  };
-  const handleFaOK = () => {
-    modals.fontAwesome.close();
-    const value = faValue.trim();
-    if (value.length > 0) {
-      store.editor.replaceSelection(`:fa-${value}:`);
-    }
-    setFaValue('');
-  };
   return (
     <>
-      {/* emoji modal */}
-      <Modal
-        open={modals.emoji.isOpen}
-        onCancel={() => modals.emoji.close()}
-        onOk={() => handleEmojiOK()}
-        maskClosable={true}
-        centered={true}
-        afterOpenChange={(open) => {
-          if (open) {
-            emojiInput.current?.focus();
-          }
-        }}
-      >
-        <div style={{ textAlign: 'center' }}>
-          <h2>Please enter an emoji code:</h2>
-          <p>
-            {`Examples: "smile", "whale", "santa", "panda_face", "dog", "truck"
-    ...`}
-          </p>
-          <p>
-            For a complete list, please check
-            <a
-              href="http://www.emoji-cheat-sheet.com/"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Emoji Cheat Sheet
-            </a>
-            .
-          </p>
-          <div>
-            <Input
-              ref={emojiInput}
-              value={emojiValue}
-              onChange={(e) => setEmojiValue(e.target.value)}
-              placeholder="smile"
-              onKeyUp={(e) => {
-                if (e.key === 'Enter') {
-                  handleEmojiOK();
-                }
-              }}
-            />
-          </div>
-        </div>
-      </Modal>
-
-      {/* font awesome modal */}
-      <Modal
-        open={modals.fontAwesome.isOpen}
-        onCancel={() => modals.fontAwesome.close()}
-        onOk={() => handleFaOK()}
-        maskClosable={true}
-        centered={true}
-        afterOpenChange={(open) => {
-          if (open) {
-            faInput.current?.focus();
-          }
-        }}
-      >
-        <div style={{ textAlign: 'center' }}>
-          <h2>Please enter a Font Awesome code:</h2>
-          <p>
-            {`Examples: "cloud", "flag", "car", "truck", "heart", "dollar" ...`}
-          </p>
-          <p>
-            For a complete list, please check
-            <a
-              href="http://fontawesome.io/icons/"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Font Awesome Icons
-            </a>
-            .
-          </p>
-          <div>
-            <Input
-              ref={faInput}
-              placeholder="heart"
-              value={faValue}
-              onChange={(e) => setFaValue(e.target.value)}
-              onKeyUp={(e) => {
-                if (e.key === 'Enter') {
-                  handleFaOK();
-                }
-              }}
-            />
-          </div>
-        </div>
-      </Modal>
-
       <PreferencesModal store={store} />
-
-      {/* help modal */}
-      <Modal
-        open={modals.help.isOpen}
-        footer={
-          <div style={{ textAlign: 'center' }}>
-            <Button
-              type="primary"
-              size="large"
-              onClick={() => modals.help.close()}
-            >
-              Close
-            </Button>
-          </div>
-        }
-        onCancel={() => modals.help.close()}
-        maskClosable={true}
-        centered={true}
-      >
-        <div style={{ textAlign: 'center' }}>
-          <p>
-            <img src={iconUrl} width="64" />
-          </p>
-          <h2>Markdown Plus help</h2>
-          <p>
-            <a
-              href="https://chuntaoliu.com/markdown-plus/"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Online Sample
-            </a>
-          </p>
-          <p>
-            <a
-              href="https://guides.github.com/features/mastering-markdown/"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Markdown Basics
-            </a>
-          </p>
-          <p>
-            <a
-              href="https://help.github.com/articles/github-flavored-markdown/"
-              target="_blank"
-              rel="noreferrer"
-            >
-              GitHub Flavored Markdown
-            </a>
-          </p>
-        </div>
-      </Modal>
-
-      {/* about modal */}
-      <Modal
-        open={modals.about.isOpen}
-        footer={
-          <div style={{ textAlign: 'center' }}>
-            <Button
-              type="primary"
-              size="large"
-              onClick={() => modals.about.close()}
-            >
-              Close
-            </Button>
-          </div>
-        }
-        onCancel={() => modals.about.close()}
-        maskClosable={true}
-        centered={true}
-      >
-        <div style={{ textAlign: 'center' }}>
-          <p>
-            <img src={iconUrl} width="64" />
-          </p>
-          <h2>Markdown Plus</h2>
-          <p>Version 3.x</p>
-          <p>Markdown editor with extra features</p>
-          <p>
-            Copyright © 2015 - 2024{' '}
-            <a
-              href="https://github.com/tylerlong"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Tyler Liu
-            </a>
-          </p>
-          <p>
-            Home page:{' '}
-            <a
-              href="https://github.com/tylerlong/markdown-plus"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Home page
-            </a>
-          </p>
-        </div>
-      </Modal>
+      <PromptModals store={store} />
+      <StaticModals modals={store.modals} />
     </>
   );
 });
diff --git a/src/components/modals/prompt.tsx b/src/components/modals/prompt.tsx
new file mode 100644
index 00000000..3bd2aee9
--- /dev/null
+++ b/src/components/modals/prompt.tsx
@@ -0,0 +1,127 @@
+import { Input, InputRef, Modal } from 'antd';
+import { auto } from 'manate/react';
+import React, { useRef, useState } from 'react';
+
+import { Store } from '../../store';
+
+const promptModals = auto((props: { store: Store }) => {
+  console.log('render prompt modals');
+  const { store } = props;
+  const { modals } = store;
+  const emojiInput = useRef<InputRef>(null);
+  const faInput = useRef<InputRef>(null);
+  const [emojiValue, setEmojiValue] = useState('');
+  const [faValue, setFaValue] = useState('');
+  const handleEmojiOK = () => {
+    modals.emoji.close();
+    const value = emojiValue.trim();
+    if (value.length > 0) {
+      store.editor.replaceSelection(`:${value}:`);
+    }
+    setEmojiValue('');
+  };
+  const handleFaOK = () => {
+    modals.fontAwesome.close();
+    const value = faValue.trim();
+    if (value.length > 0) {
+      store.editor.replaceSelection(`:fa-${value}:`);
+    }
+    setFaValue('');
+  };
+  return (
+    <>
+      {/* emoji modal */}
+      <Modal
+        open={modals.emoji.isOpen}
+        onCancel={() => modals.emoji.close()}
+        onOk={() => handleEmojiOK()}
+        maskClosable={true}
+        centered={true}
+        afterOpenChange={(open) => {
+          if (open) {
+            emojiInput.current?.focus();
+          }
+        }}
+      >
+        <div style={{ textAlign: 'center' }}>
+          <h2>Please enter an emoji code:</h2>
+          <p>
+            {`Examples: "smile", "whale", "santa", "panda_face", "dog", "truck"
+...`}
+          </p>
+          <p>
+            For a complete list, please check
+            <a
+              href="http://www.emoji-cheat-sheet.com/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Emoji Cheat Sheet
+            </a>
+            .
+          </p>
+          <div>
+            <Input
+              ref={emojiInput}
+              value={emojiValue}
+              onChange={(e) => setEmojiValue(e.target.value)}
+              placeholder="smile"
+              onKeyUp={(e) => {
+                if (e.key === 'Enter') {
+                  handleEmojiOK();
+                }
+              }}
+            />
+          </div>
+        </div>
+      </Modal>
+
+      {/* font awesome modal */}
+      <Modal
+        open={modals.fontAwesome.isOpen}
+        onCancel={() => modals.fontAwesome.close()}
+        onOk={() => handleFaOK()}
+        maskClosable={true}
+        centered={true}
+        afterOpenChange={(open) => {
+          if (open) {
+            faInput.current?.focus();
+          }
+        }}
+      >
+        <div style={{ textAlign: 'center' }}>
+          <h2>Please enter a Font Awesome code:</h2>
+          <p>
+            {`Examples: "cloud", "flag", "car", "truck", "heart", "dollar" ...`}
+          </p>
+          <p>
+            For a complete list, please check
+            <a
+              href="http://fontawesome.io/icons/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Font Awesome Icons
+            </a>
+            .
+          </p>
+          <div>
+            <Input
+              ref={faInput}
+              placeholder="heart"
+              value={faValue}
+              onChange={(e) => setFaValue(e.target.value)}
+              onKeyUp={(e) => {
+                if (e.key === 'Enter') {
+                  handleFaOK();
+                }
+              }}
+            />
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+});
+
+export default promptModals;
diff --git a/src/components/modals/static.tsx b/src/components/modals/static.tsx
new file mode 100644
index 00000000..e0891933
--- /dev/null
+++ b/src/components/modals/static.tsx
@@ -0,0 +1,116 @@
+import { Button, Modal } from 'antd';
+import { auto } from 'manate/react';
+import React from 'react';
+
+import iconUrl from '../../icon.svg';
+import store from '../../store';
+
+const StaticModals = auto((props: { modals: typeof store.modals }) => {
+  const { modals } = props;
+  return (
+    <>
+      {/* help modal */}
+      <Modal
+        open={modals.help.isOpen}
+        footer={
+          <div style={{ textAlign: 'center' }}>
+            <Button
+              type="primary"
+              size="large"
+              onClick={() => modals.help.close()}
+            >
+              Close
+            </Button>
+          </div>
+        }
+        onCancel={() => modals.help.close()}
+        maskClosable={true}
+        centered={true}
+      >
+        <div style={{ textAlign: 'center' }}>
+          <p>
+            <img src={iconUrl} width="64" />
+          </p>
+          <h2>Markdown Plus help</h2>
+          <p>
+            <a
+              href="https://chuntaoliu.com/markdown-plus/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Online Sample
+            </a>
+          </p>
+          <p>
+            <a
+              href="https://guides.github.com/features/mastering-markdown/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Markdown Basics
+            </a>
+          </p>
+          <p>
+            <a
+              href="https://help.github.com/articles/github-flavored-markdown/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              GitHub Flavored Markdown
+            </a>
+          </p>
+        </div>
+      </Modal>
+
+      {/* about modal */}
+      <Modal
+        open={modals.about.isOpen}
+        footer={
+          <div style={{ textAlign: 'center' }}>
+            <Button
+              type="primary"
+              size="large"
+              onClick={() => modals.about.close()}
+            >
+              Close
+            </Button>
+          </div>
+        }
+        onCancel={() => modals.about.close()}
+        maskClosable={true}
+        centered={true}
+      >
+        <div style={{ textAlign: 'center' }}>
+          <p>
+            <img src={iconUrl} width="64" />
+          </p>
+          <h2>Markdown Plus</h2>
+          <p>Version 3.x</p>
+          <p>Markdown editor with extra features</p>
+          <p>
+            Copyright © 2015 - 2024{' '}
+            <a
+              href="https://github.com/tylerlong"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Tyler Liu
+            </a>
+          </p>
+          <p>
+            Home page:{' '}
+            <a
+              href="https://github.com/tylerlong/markdown-plus"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Home page
+            </a>
+          </p>
+        </div>
+      </Modal>
+    </>
+  );
+});
+
+export default StaticModals;