diff --git a/web/src/component/Manage.js b/web/src/component/Manage.js
index ddabb0a..000c43e 100644
--- a/web/src/component/Manage.js
+++ b/web/src/component/Manage.js
@@ -1,9 +1,51 @@
+import { useState } from "react";
+
 function Manage() {
-    return (
-        <div>
-            <h2>Manage</h2>
-        </div>
-    )
+  const [token, setToken] = useState("");
+  const [walkPath, setWalkPath] = useState("");
+
+  function updateDatabase() {
+    fetch("/api/v1/walk", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        token: token,
+        root: walkPath,
+        pattern: [".wav", ".mp3"],
+      }),
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data);
+      });
+  }
+
+  return (
+    <div>
+      <h2>Manage</h2>
+      <input
+        type="text"
+        value={token}
+        placeholder="token"
+        onChange={(e) => setToken(e.target.value)}
+      />
+      <input
+        type="text"
+        value={walkPath}
+        placeholder="walk path"
+        onChange={(e) => setWalkPath(e.target.value)}
+      />
+      <button
+        onClick={() => {
+          updateDatabase();
+        }}
+      >
+        Update Database
+      </button>
+    </div>
+  );
 }
 
 export default Manage;