diff --git a/PP-binding/frontend/web/index.html b/PP-binding/frontend/web/index.html
index 0488a13..8af38e1 100644
--- a/PP-binding/frontend/web/index.html
+++ b/PP-binding/frontend/web/index.html
@@ -13,7 +13,7 @@
 
 <div class="main-container">
     <div class="tools-container" id="tools-container">
-        <button class="add-item-button">添加</button>
+        <button class="add-item-button" id="add-item-button">添加</button>
         <input placeholder="输入关键字查询"/>
         <div class="count">总共&nbsp;<span>210</span>&nbsp;条数据</div>
     </div>
@@ -71,308 +71,16 @@
                     <button class="delete-item-button">删除</button>
                 </div>
             </div>
-            <div class="table-items-container">
-                <div>{{手机号}}</div>
-                <div>{{12345678900}}</div>
-                <div>{{滴滴打车}}</div>
-                <div>{{安全}}</div>
-                <div>{{小爱同学}}</div>
-                <div>{{123456}}</div>
-                <div>{{暂无}}</div>
-                <div class="more-platform-container">
-                    <div>{{邮箱}},&nbsp;</div>
-                    <div>{{微信}},&nbsp;</div>
-                    <div>{{qq}},&nbsp;</div>
-                    <div>{{微博}}</div>
-                </div>
-                <div>
-                    <button class="change-item-button">修改</button>
-                    <div class="white-space"></div>
-                    <button class="delete-item-button">删除</button>
-                </div>
-            </div>
-            <div class="table-items-container">
-                <div>{{手机号}}</div>
-                <div>{{12345678900}}</div>
-                <div>{{滴滴打车}}</div>
-                <div>{{安全}}</div>
-                <div>{{小爱同学}}</div>
-                <div>{{123456}}</div>
-                <div>{{暂无}}</div>
-                <div class="more-platform-container">
-                    <div>{{邮箱}},&nbsp;</div>
-                    <div>{{微信}},&nbsp;</div>
-                    <div>{{qq}},&nbsp;</div>
-                    <div>{{微博}}</div>
-                </div>
-                <div>
-                    <button class="change-item-button">修改</button>
-                    <div class="white-space"></div>
-                    <button class="delete-item-button">删除</button>
-                </div>
-            </div>
-            <div class="table-items-container">
-                <div>{{手机号}}</div>
-                <div>{{12345678900}}</div>
-                <div>{{滴滴打车}}</div>
-                <div>{{安全}}</div>
-                <div>{{小爱同学}}</div>
-                <div>{{123456}}</div>
-                <div>{{暂无}}</div>
-                <div class="more-platform-container">
-                    <div>{{邮箱}},&nbsp;</div>
-                    <div>{{微信}},&nbsp;</div>
-                    <div>{{qq}},&nbsp;</div>
-                    <div>{{微博}}</div>
-                </div>
-                <div>
-                    <button class="change-item-button">修改</button>
-                    <div class="white-space"></div>
-                    <button class="delete-item-button">删除</button>
-                </div>
-            </div>
-            <div class="table-items-container">
-                <div>{{手机号}}</div>
-                <div>{{12345678900}}</div>
-                <div>{{滴滴打车}}</div>
-                <div>{{安全}}</div>
-                <div>{{小爱同学}}</div>
-                <div>{{123456}}</div>
-                <div>{{暂无}}</div>
-                <div class="more-platform-container">
-                    <div>{{邮箱}},&nbsp;</div>
-                    <div>{{微信}},&nbsp;</div>
-                    <div>{{qq}},&nbsp;</div>
-                    <div>{{微博}}</div>
-                </div>
-                <div>
-                    <button class="change-item-button">修改</button>
-                    <div class="white-space"></div>
-                    <button class="delete-item-button">删除</button>
-                </div>
-            </div>
-            <div class="table-items-container">
-                <div>{{手机号}}</div>
-                <div>{{12345678900}}</div>
-                <div>{{滴滴打车}}</div>
-                <div>{{安全}}</div>
-                <div>{{小爱同学}}</div>
-                <div>{{123456}}</div>
-                <div>{{暂无}}</div>
-                <div class="more-platform-container">
-                    <div>{{邮箱}},&nbsp;</div>
-                    <div>{{微信}},&nbsp;</div>
-                    <div>{{qq}},&nbsp;</div>
-                    <div>{{微博}}</div>
-                </div>
-                <div>
-                    <button class="change-item-button">修改</button>
-                    <div class="white-space"></div>
-                    <button class="delete-item-button">删除</button>
-                </div>
-            </div>
-            <div class="table-items-container">
-                <div>{{手机号}}</div>
-                <div>{{12345678900}}</div>
-                <div>{{滴滴打车}}</div>
-                <div>{{安全}}</div>
-                <div>{{小爱同学}}</div>
-                <div>{{123456}}</div>
-                <div>{{暂无}}</div>
-                <div class="more-platform-container">
-                    <div>{{邮箱}},&nbsp;</div>
-                    <div>{{微信}},&nbsp;</div>
-                    <div>{{qq}},&nbsp;</div>
-                    <div>{{微博}}</div>
-                </div>
-                <div>
-                    <button class="change-item-button">修改</button>
-                    <div class="white-space"></div>
-                    <button class="delete-item-button">删除</button>
-                </div>
-            </div>
-            <div class="table-items-container">
-                <div>{{手机号}}</div>
-                <div>{{12345678900}}</div>
-                <div>{{滴滴打车}}</div>
-                <div>{{安全}}</div>
-                <div>{{小爱同学}}</div>
-                <div>{{123456}}</div>
-                <div>{{暂无}}</div>
-                <div class="more-platform-container">
-                    <div>{{邮箱}},&nbsp;</div>
-                    <div>{{微信}},&nbsp;</div>
-                    <div>{{qq}},&nbsp;</div>
-                    <div>{{微博}}</div>
-                </div>
-                <div>
-                    <button class="change-item-button">修改</button>
-                    <div class="white-space"></div>
-                    <button class="delete-item-button">删除</button>
-                </div>
-            </div>
-            <div class="table-items-container">
-                <div>{{手机号}}</div>
-                <div>{{12345678900}}</div>
-                <div>{{滴滴打车}}</div>
-                <div>{{安全}}</div>
-                <div>{{小爱同学}}</div>
-                <div>{{123456}}</div>
-                <div>{{暂无}}</div>
-                <div class="more-platform-container">
-                    <div>{{邮箱}},&nbsp;</div>
-                    <div>{{微信}},&nbsp;</div>
-                    <div>{{qq}},&nbsp;</div>
-                    <div>{{微博}}</div>
-                </div>
-                <div>
-                    <button class="change-item-button">修改</button>
-                    <div class="white-space"></div>
-                    <button class="delete-item-button">删除</button>
-                </div>
-            </div>
-            <div class="table-items-container">
-                <div>{{手机号}}</div>
-                <div>{{12345678900}}</div>
-                <div>{{滴滴打车}}</div>
-                <div>{{安全}}</div>
-                <div>{{小爱同学}}</div>
-                <div>{{123456}}</div>
-                <div>{{暂无}}</div>
-                <div class="more-platform-container">
-                    <div>{{邮箱}},&nbsp;</div>
-                    <div>{{微信}},&nbsp;</div>
-                    <div>{{qq}},&nbsp;</div>
-                    <div>{{微博}}</div>
-                </div>
-                <div>
-                    <button class="change-item-button">修改</button>
-                    <div class="white-space"></div>
-                    <button class="delete-item-button">删除</button>
-                </div>
-            </div>
-            <div class="table-items-container">
-                <div>{{手机号}}</div>
-                <div>{{12345678900}}</div>
-                <div>{{滴滴打车}}</div>
-                <div>{{安全}}</div>
-                <div>{{小爱同学}}</div>
-                <div>{{123456}}</div>
-                <div>{{暂无}}</div>
-                <div class="more-platform-container">
-                    <div>{{邮箱}},&nbsp;</div>
-                    <div>{{微信}},&nbsp;</div>
-                    <div>{{qq}},&nbsp;</div>
-                    <div>{{微博}}</div>
-                </div>
-                <div>
-                    <button class="change-item-button">修改</button>
-                    <div class="white-space"></div>
-                    <button class="delete-item-button">删除</button>
-                </div>
-            </div>
-            <div class="table-items-container">
-                <div>{{手机号}}</div>
-                <div>{{12345678900}}</div>
-                <div>{{滴滴打车}}</div>
-                <div>{{安全}}</div>
-                <div>{{小爱同学}}</div>
-                <div>{{123456}}</div>
-                <div>{{暂无}}</div>
-                <div class="more-platform-container">
-                    <div>{{邮箱}},&nbsp;</div>
-                    <div>{{微信}},&nbsp;</div>
-                    <div>{{qq}},&nbsp;</div>
-                    <div>{{微博}}</div>
-                </div>
-                <div>
-                    <button class="change-item-button">修改</button>
-                    <div class="white-space"></div>
-                    <button class="delete-item-button">删除</button>
-                </div>
-            </div>
-            <div class="table-items-container">
-                <div>{{手机号}}</div>
-                <div>{{12345678900}}</div>
-                <div>{{滴滴打车}}</div>
-                <div>{{安全}}</div>
-                <div>{{小爱同学}}</div>
-                <div>{{123456}}</div>
-                <div>{{暂无}}</div>
-                <div class="more-platform-container">
-                    <div>{{邮箱}},&nbsp;</div>
-                    <div>{{微信}},&nbsp;</div>
-                    <div>{{qq}},&nbsp;</div>
-                    <div>{{微博}}</div>
-                </div>
-                <div>
-                    <button class="change-item-button">修改</button>
-                    <div class="white-space"></div>
-                    <button class="delete-item-button">删除</button>
-                </div>
-            </div>
-            <div class="table-items-container">
-                <div>{{手机号}}</div>
-                <div>{{12345678900}}</div>
-                <div>{{滴滴打车}}</div>
-                <div>{{安全}}</div>
-                <div>{{小爱同学}}</div>
-                <div>{{123456}}</div>
-                <div>{{暂无}}</div>
-                <div class="more-platform-container">
-                    <div>{{邮箱}},&nbsp;</div>
-                    <div>{{微信}},&nbsp;</div>
-                    <div>{{qq}},&nbsp;</div>
-                    <div>{{微博}}</div>
-                </div>
-                <div>
-                    <button class="change-item-button">修改</button>
-                    <div class="white-space"></div>
-                    <button class="delete-item-button">删除</button>
-                </div>
-            </div>
-            <div class="table-items-container">
-                <div>{{手机号}}</div>
-                <div>{{12345678900}}</div>
-                <div>{{滴滴打车}}</div>
-                <div>{{安全}}</div>
-                <div>{{小爱同学}}</div>
-                <div>{{123456}}</div>
-                <div>{{暂无}}</div>
-                <div class="more-platform-container">
-                    <div>{{邮箱}},&nbsp;</div>
-                    <div>{{微信}},&nbsp;</div>
-                    <div>{{qq}},&nbsp;</div>
-                    <div>{{微博}}</div>
-                </div>
-                <div>
-                    <button class="change-item-button">修改</button>
-                    <div class="white-space"></div>
-                    <button class="delete-item-button">删除</button>
-                </div>
-            </div>
-            <div class="table-items-container">
-                <div>{{手机号}}</div>
-                <div>{{12345678900}}</div>
-                <div>{{滴滴打车}}</div>
-                <div>{{安全}}</div>
-                <div>{{小爱同学}}</div>
-                <div>{{123456}}</div>
-                <div>{{暂无}}</div>
-                <div class="more-platform-container">
-                    <div>{{邮箱}},&nbsp;</div>
-                    <div>{{微信}},&nbsp;</div>
-                    <div>{{qq}},&nbsp;</div>
-                    <div>{{微博}}</div>
-                </div>
-                <div>
-                    <button class="change-item-button">修改</button>
-                    <div class="white-space"></div>
-                    <button class="delete-item-button">删除</button>
-                </div>
-            </div>
         </div>
     </div>
 </div>
+
+<dialog class="add-item-dialog" id="add-item-dialog">
+    <!--    title bar -->
+    <div class="title-bar-container">
+        <div class="close-button" id="add-item-dialog-close-button"></div>
+        <div class="title">添加一条数据</div>
+    </div>
+</dialog>
 </body>
 </html>
\ No newline at end of file
diff --git a/PP-binding/frontend/web/script/index.js b/PP-binding/frontend/web/script/index.js
index 9bf3e63..be94530 100644
--- a/PP-binding/frontend/web/script/index.js
+++ b/PP-binding/frontend/web/script/index.js
@@ -6,12 +6,23 @@ function main() {
     const tableContainer = document.getElementById("table-outer-scrollable-container")
     const tableItems = tableContainer.children
     const backgroundColor = "rgba(164,168,157,0.16)"
+    const addItemButton = document.getElementById("add-item-button")
+    const addItemDialog = document.getElementById("add-item-dialog")
+    const addItemDialogCloseButton = document.getElementById("add-item-dialog-close-button")
 
     for (let i = 1; i < tableItems.length; i += 2) {
         if (hasSpecificClassNameByNode(tableItems[i], "table-items-container")) {
             tableItems[i].setAttribute("style", `background-color: ${backgroundColor};`)
         }
     }
+
+    addItemButton.addEventListener("click", () => {
+        addItemDialog.showModal()
+    })
+
+    addItemDialogCloseButton.addEventListener("click", ()=>{
+        addItemDialog.close()
+    })
 }
 
 function hasSpecificClassNameByNode(node, className) {
diff --git a/PP-binding/frontend/web/style/index.css b/PP-binding/frontend/web/style/index.css
index 5ce3a18..39e540f 100644
--- a/PP-binding/frontend/web/style/index.css
+++ b/PP-binding/frontend/web/style/index.css
@@ -181,3 +181,45 @@ body {
 .table-items-container .delete-item-button {
     cursor: pointer;
 }
+
+.add-item-dialog {
+    width: 60vw;
+    height: 70vh;
+    margin: auto;
+    border: none;
+    background-color: #f2f2f2f7;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+.add-item-dialog .title-bar-container {
+    height: 60px;
+    background-color: #68686869;
+    padding-left: 10px;
+    padding-right: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.add-item-dialog .title-bar-container .close-button {
+    width: 25px;
+    height: 25px;
+    border-radius: 180px;
+    margin-left: 8px;
+    background-color: #d56161;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.add-item-dialog .title-bar-container .close-button:hover::after {
+    content: "\2A2F";
+}
+
+.add-item-dialog .title-bar-container .title {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0%);
+}