diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000..83cbf87
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+custom: https://jaywcjlove.github.io/#/sponsor
\ No newline at end of file
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..485f49c
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,71 @@
+name: CI/CD
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Create idoc config.
+        run: |
+          cat > idoc.yml << EOF
+          site: "Symbol Scribe"
+          description: In messaging applications, use interesting emoji emoticons such as smiley faces, kaomojis, and various other symbols.
+          keywords: kaomojis,emoji,symbols,alphabet,language symbols
+          favicon: assets/logo.png
+          logo: ./assets/logo.png
+          openSource: https://github.com/jaywcjlove/symbol-scribe
+          homepage: https://wangchujiang.com/symbol-scribe/
+          tocs: false
+          element: 
+            wrapper: style=max-width:720px;
+          meta:
+            - <meta name="author" content="Kenny Wong">
+            - <meta property="og:site_name" content="<%= site %>">
+            - <meta property="og:url" content="<%=homepage%><%=RESOLVE_PATH%>">
+            - <meta property="og:image" content="<%=homepage%>assets/logo.png">
+            - <meta property="og:type" content="application">
+            - <meta property="og:title" content="<%= site %>">
+            - <meta property="og:description" content="<%= description%>">
+            - <meta property="twitter:image:src" content="<%=homepage%>assets/screenshots-1.png">
+            - <meta property="twitter:site" content="@jaywcjlove">
+            - <meta property="twitter:creator" content="jaywcjlove">
+            - <meta property="twitter:card" content="summary_large_image">
+            - <meta property="twitter:title" content="<%= site %> - <%= description%>">
+            - <meta property="twitter:description" content="<%= description%>">
+            - <meta name="apple-itunes-app" content="app-id=id6472593276">
+          menus:
+            Home: index.html
+            Apps: 
+              url: https://wangchujiang.com/#/app
+              target: __blank
+            About: 
+              url: https://wangchujiang.com/#/about
+              target: __blank
+          sideEffectFiles:
+            - README.zh.md
+          footer: |
+            <a href="https://wangchujiang.com/#/app" target="_blank">App</a> • 
+            <a href="https://wangchujiang.com/#/projects" target="_blank">Projects</a> • 
+            <a href="https://wangchujiang.com/#/sponsor" target="_blank">Sponsor</a> • 
+            <a href="https://wangchujiang.com/#/app" target="_blank">More Apps</a><br /><br />
+            Generated by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a> v{{idocVersion}}      
+          EOF
+
+      - run: npm install idoc@1 -g
+      - run: idoc
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          commit_message: ${{ github.event.head_commit.message }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..edf8783
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,19 @@
+dist
+
+.DS_Store
+.cache
+.vscode
+.idea
+
+*.bak
+*.tem
+*.temp
+#.swp
+*.*~
+~*.*
+
+# IDEA
+*.iml
+*.ipr
+*.iws
+.idea/
\ No newline at end of file
diff --git a/README.md b/README.md
index f521f76..9479179 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,26 @@
-# symbol-scribe
+<div align="center">
+	<br />
+	<br />
+	<img src="./assets/logo.png" alt="Symbol Scribe LOGO" width="160" height="160">
+  <p>
+		<a href="./README.md">English</a> • 
+    <a target="_blank" href="https://apps.apple.com/app/symbol-scribe/id6470879005">AppStore</a> • 
+		<a target="_blank" href="https://wangchujiang.com/#/contact">联系&支持</a>
+  </p>
+	<h1>Symbol Scribe</h1>
+  <!--rehype:style=border: 0;-->
+  <p>
+    <a target="_blank" href="https://apps.apple.com/app/symbol-scribe/id6470879005" title="Symbol Scribe AppStore"><img alt="Symbol Scribe AppStore" src="https://tools.applemediaservices.com/api/badges/download-on-the-mac-app-store/black/en-us?size=250x83&amp;releaseDate=1705968000" height="51">
+    </a>
+  </p>
+</div>
+
 In messaging applications, use interesting emoji emoticons such as smiley faces, kaomojis, and various other symbols.
+
+![Symbol Scribe screenshots-1](./assets/screenshots-1.png)
+![Symbol Scribe screenshots-2](./assets/screenshots-2.png)
+![Symbol Scribe screenshots-3](./assets/screenshots-3.png)
+![Symbol Scribe screenshots-4](./assets/screenshots-4.png)
+![Symbol Scribe screenshots-5](./assets/screenshots-5.png)
+
+Have you ever seen people using funny emoji emoticons in SMS, Facebook, Twitter, email applications, and various other messaging platforms? These include emojis, kaomojis, and various other symbols.
\ No newline at end of file
diff --git a/README.zh.md b/README.zh.md
new file mode 100644
index 0000000..832b26a
--- /dev/null
+++ b/README.zh.md
@@ -0,0 +1,26 @@
+<div align="center">
+	<br />
+	<br />
+	<img src="./assets/logo.png" alt="Symbol Scribe LOGO" width="160" height="160">
+  <p>
+		<a href="./README.md">English</a> • 
+    <a target="_blank" href="https://apps.apple.com/app/symbol-scribe/id6470879005">AppStore</a> • 
+		<a target="_blank" href="https://wangchujiang.com/#/contact">联系&支持</a>
+  </p>
+	<h1>Symbol Scribe</h1>
+  <!--rehype:style=border: 0;-->
+  <p>
+    <a target="_blank" href="https://apps.apple.com/app/symbol-scribe/id6470879005" title="Symbol Scribe AppStore"><img alt="Symbol Scribe AppStore" src="https://tools.applemediaservices.com/api/badges/download-on-the-mac-app-store/black/en-us?size=250x83&amp;releaseDate=1705968000" height="51">
+    </a>
+  </p>
+</div>
+
+消息应用中使用有趣的表情符号，如笑脸表情符号、颜文字和其他各种符号。
+
+![Symbol Scribe screenshots-1](./assets/screenshots-1.png)
+![Symbol Scribe screenshots-2](./assets/screenshots-2.png)
+![Symbol Scribe screenshots-3](./assets/screenshots-3.png)
+![Symbol Scribe screenshots-4](./assets/screenshots-4.png)
+![Symbol Scribe screenshots-5](./assets/screenshots-5.png)
+
+你是否曾经看到人们在短信、Facebook、Twitter、电子邮件应用和各种其他消息平台上使用有趣的表情符号？这些包括表情符号、颜文字和各种其他符号。
\ No newline at end of file
diff --git a/assets/logo.png b/assets/logo.png
new file mode 100644
index 0000000..42cf5ba
Binary files /dev/null and b/assets/logo.png differ
diff --git a/assets/screenshots-1.png b/assets/screenshots-1.png
new file mode 100644
index 0000000..4017a1a
Binary files /dev/null and b/assets/screenshots-1.png differ
diff --git a/assets/screenshots-2.png b/assets/screenshots-2.png
new file mode 100644
index 0000000..790cfcd
Binary files /dev/null and b/assets/screenshots-2.png differ
diff --git a/assets/screenshots-3.png b/assets/screenshots-3.png
new file mode 100644
index 0000000..06ca38b
Binary files /dev/null and b/assets/screenshots-3.png differ
diff --git a/assets/screenshots-4.png b/assets/screenshots-4.png
new file mode 100644
index 0000000..4696627
Binary files /dev/null and b/assets/screenshots-4.png differ
diff --git a/assets/screenshots-5.png b/assets/screenshots-5.png
new file mode 100644
index 0000000..cb7bd52
Binary files /dev/null and b/assets/screenshots-5.png differ