diff --git a/client/index.html b/client/index.html
index 8e59d9b..379c99f 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,17 +1,40 @@
 <!doctype html>
-<html lang="zh-CN">
-  <head>
+<html lang="zh-CN" class="mdui-theme-auto">
+
+<head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
-    <meta name="renderer" content="webkit"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
+    <meta name="renderer" content="webkit" />
 
     <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
     <script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
-    <!-- 如果使用了组件的 icon 属性，还需要引入图标的 CSS 文件 -->
+
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+    <script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>
 
     <title>TheWhiteSilk Debugger</title>
-  </head>
-  <body>
-    <mdui-button></mdui-button>
-  </body>
+</head>
+
+<body>
+    <mdui-button id="send">Send</mdui-button>
+    <mdui-text-field id="edittext" autosize></mdui-text-field>
+    <div id="out">
+
+    </div>
+    <script>
+        const socket = io()
+        $('#edittext').val(`{
+    "method": "",
+    "args": {
+
+    }
+}`)
+        $('#send').click(() => {
+            socket.emit("the_white_silk", JSON.parse($('#edittext').val()), (response) => {
+                $('#out').text(JSON.stringify(response))
+            });
+        })
+    </script>
+</body>
+
 </html>
\ No newline at end of file
