diff --git a/web/frps/Makefile b/web/frps/Makefile
index 5d26e26a..0bece571 100644
--- a/web/frps/Makefile
+++ b/web/frps/Makefile
@@ -1,10 +1,12 @@
 .PHONY: dist build
 
 build: install
-	@npm run build
+	@npm run build:s
+	@npm run build:c
 
 dev: install
-	@npm run serve
+	@npm run serve:s
+	@npm run serve:c
 
 install:
 	@npm install
diff --git a/web/frps/README.md b/web/frps/README.md
index 8d24e0b2..0e861eb9 100644
--- a/web/frps/README.md
+++ b/web/frps/README.md
@@ -8,14 +8,22 @@ npm install
 
 ### Compiles and hot-reloads for development
 
-```
-npm run serve
+```shell
+# frps
+npm run serve:s
+
+# frpc
+npm run serve:c
 ```
 
 ### Compiles and minifies for production
 
-```
-npm run build
+```shell
+# frps
+npm run build:s
+
+# frpc
+npm run build:c
 ```
 
 ### Lints and fixes files
diff --git a/web/frps/src/views/frpc/Configure.vue b/web/frps/src/views/frpc/Configure.vue
index 1a5091a2..1a76f2dc 100644
--- a/web/frps/src/views/frpc/Configure.vue
+++ b/web/frps/src/views/frpc/Configure.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="configure-container">
     <el-row id="head">
       <el-button type="primary" @click="fetchData">Refresh</el-button>
       <el-button type="primary" @click="uploadConfig">Upload</el-button>
@@ -15,88 +15,75 @@ export default {
       textarea: ''
     }
   },
-  watch: {
-    $route: 'fetchData'
-  },
   created() {
     this.fetchData()
   },
   methods: {
-    fetchData() {
-      fetch('/api/config', { credentials: 'include' })
-        .then(res => {
-          return res.text()
-        })
-        .then(text => {
-          this.textarea = text
-        })
-        .catch(err => {
-          this.$message({
-            showClose: true,
-            message: 'Get configure content from frpc failed!',
-            type: 'warning'
-          })
-          return err
+    async fetchData() {
+      const res = await this.$fetch('config')
+      if (!res.ok) {
+        this.$message({
+          showClose: true,
+          message: 'Get configure content from frpc failed!',
+          type: 'warning'
         })
+        return
+      }
+
+      this.textarea = await res.text()
     },
     uploadConfig() {
       this.$confirm('This operation will upload your frpc configure file content and hot reload it, do you want to continue?', 'Notice', {
         confirmButtonText: 'Yes',
         cancelButtonText: 'No',
         type: 'warning'
-      })
-        .then(() => {
-          if (!this.textarea) {
-            this.$message({
-              type: 'warning',
-              message: 'Configure content can not be empty!'
-            })
-            return
-          }
-
-          fetch('/api/config', {
-            credentials: 'include',
-            method: 'PUT',
-            body: this.textarea
-          })
-            .then(() => {
-              fetch('/api/reload', { credentials: 'include' })
-                .then(() => {
-                  this.$message({
-                    type: 'success',
-                    message: 'Success'
-                  })
-                })
-                .catch(err => {
-                  this.$message({
-                    showClose: true,
-                    message: 'Reload frpc configure file error, ' + err,
-                    type: 'warning'
-                  })
-                })
-            })
-            .catch(err => {
-              this.$message({
-                showClose: true,
-                message: 'Put config to frpc and hot reload failed!',
-                type: 'warning'
-              })
-              return err
-            })
-        })
-        .catch(() => {
+      }).then(async () => {
+        if (!this.textarea) {
           this.$message({
-            type: 'info',
-            message: 'Canceled'
+            type: 'warning',
+            message: 'Configure content can not be empty!'
           })
+          return
+        }
+
+        const putRes = await this.$fetch('config', {
+          method: 'PUT',
+          body: this.textarea
         })
+        if (!putRes.ok) {
+          this.$message({
+            showClose: true,
+            message: 'Put config to frpc and hot reload failed!',
+            type: 'warning'
+          })
+          return
+        }
+
+        const reloadRes = await this.$fetch('reload')
+        if (!reloadRes.ok) {
+          this.$message({
+            showClose: true,
+            message: 'Reload frpc configure file error, ' + reloadRes.statusText,
+            type: 'warning'
+          })
+          return
+        }
+
+        this.$message({
+          type: 'success',
+          message: 'Success'
+        })
+      })
     }
   }
 }
 </script>
 
 <style>
+.configure-container {
+  margin: 20px;
+}
 #head {
-  margin-bottom: 30px;
+  margin-bottom: 20px;
 }
 </style>
diff --git a/web/frps/src/views/frpc/Overview.vue b/web/frps/src/views/frpc/Overview.vue
index e533e9ef..f2805d14 100644
--- a/web/frps/src/views/frpc/Overview.vue
+++ b/web/frps/src/views/frpc/Overview.vue
@@ -22,50 +22,44 @@
 export default {
   data() {
     return {
-      status: null
+      status: []
     }
   },
-  watch: {
-    $route: 'fetchData'
-  },
   created() {
     this.fetchData()
   },
   methods: {
-    fetchData() {
-      fetch('/api/status', { credentials: 'include' })
-        .then(res => {
-          return res.json()
-        })
-        .then(json => {
-          this.status = []
-          for (const s of json.tcp) {
-            this.status.push(s)
-          }
-          for (const s of json.udp) {
-            this.status.push(s)
-          }
-          for (const s of json.http) {
-            this.status.push(s)
-          }
-          for (const s of json.https) {
-            this.status.push(s)
-          }
-          for (const s of json.stcp) {
-            this.status.push(s)
-          }
-          for (const s of json.xtcp) {
-            this.status.push(s)
-          }
-        })
-        .catch(err => {
-          this.$message({
-            showClose: true,
-            message: 'Get status info from frpc failed!',
-            type: 'warning'
-          })
-          return err
+    async fetchData() {
+      const res = await this.$fetch('status')
+      if (!res.ok) {
+        this.$message({
+          showClose: true,
+          message: 'Get status info from frpc failed!',
+          type: 'warning'
         })
+        return
+      }
+
+      const json = await res.json()
+      this.status = []
+      for (const s of json.tcp) {
+        this.status.push(s)
+      }
+      for (const s of json.udp) {
+        this.status.push(s)
+      }
+      for (const s of json.http) {
+        this.status.push(s)
+      }
+      for (const s of json.https) {
+        this.status.push(s)
+      }
+      for (const s of json.stcp) {
+        this.status.push(s)
+      }
+      for (const s of json.xtcp) {
+        this.status.push(s)
+      }
     }
   }
 }