diff --git a/napcat.webui/src/pages/network/HttpServerComponent.vue b/napcat.webui/src/pages/network/HttpServerComponent.vue
index 8aa40809..7525536d 100644
--- a/napcat.webui/src/pages/network/HttpServerComponent.vue
+++ b/napcat.webui/src/pages/network/HttpServerComponent.vue
@@ -1,32 +1,29 @@
 <template>
     <div class="container">
         <div class="form-container">
-            <h3>WebSocket Server 配置</h3>
+            <h3>HTTP Server 配置</h3>
             <t-form>
-                <t-form-item label="主机">
-                    <t-input v-model="config.host" />
-                </t-form-item>
                 <t-form-item label="端口">
                     <t-input v-model.number="config.port" type="number" />
                 </t-form-item>
+                <t-form-item label="主机">
+                    <t-input v-model="config.host" type="text" />
+                </t-form-item>
+                <t-form-item label="启用 CORS">
+                    <t-checkbox v-model="config.enableCors" />
+                </t-form-item>
+                <t-form-item label="启用 WS">
+                    <t-checkbox v-model="config.enableWebsocket" />
+                </t-form-item>
                 <t-form-item label="消息格式">
                     <t-select v-model="config.messagePostFormat" :options="messageFormatOptions" />
                 </t-form-item>
-                <t-form-item label="报告自身消息">
-                    <t-checkbox v-model="config.reportSelfMessage" />
-                </t-form-item>
                 <t-form-item label="Token">
-                    <t-input v-model="config.token" />
-                </t-form-item>
-                <t-form-item label="启用推送事件">
-                    <t-checkbox v-model="config.enablePushEvent" />
+                    <t-input v-model="config.token" type="text" />
                 </t-form-item>
                 <t-form-item label="调试模式">
                     <t-checkbox v-model="config.debug" />
                 </t-form-item>
-                <t-form-item label="心跳间隔">
-                    <t-input v-model.number="config.heartInterval" type="number" />
-                </t-form-item>
                 <t-form-item label="启用">
                     <t-checkbox v-model="config.enable" />
                 </t-form-item>
@@ -37,10 +34,10 @@
 
 <script setup lang="ts">
 import { defineProps, ref, watch } from 'vue';
-import { WebsocketServerConfig } from '../../../../src/onebot/config/config';
+import { HttpServerConfig } from '../../../../src/onebot/config/config';
 
 const props = defineProps<{
-    config: WebsocketServerConfig;
+    config: HttpServerConfig;
 }>();
 
 const messageFormatOptions = ref([
diff --git a/napcat.webui/src/pages/network/WebsocketServerComponent.vue b/napcat.webui/src/pages/network/WebsocketServerComponent.vue
index 7525536d..8aa40809 100644
--- a/napcat.webui/src/pages/network/WebsocketServerComponent.vue
+++ b/napcat.webui/src/pages/network/WebsocketServerComponent.vue
@@ -1,29 +1,32 @@
 <template>
     <div class="container">
         <div class="form-container">
-            <h3>HTTP Server 配置</h3>
+            <h3>WebSocket Server 配置</h3>
             <t-form>
+                <t-form-item label="主机">
+                    <t-input v-model="config.host" />
+                </t-form-item>
                 <t-form-item label="端口">
                     <t-input v-model.number="config.port" type="number" />
                 </t-form-item>
-                <t-form-item label="主机">
-                    <t-input v-model="config.host" type="text" />
-                </t-form-item>
-                <t-form-item label="启用 CORS">
-                    <t-checkbox v-model="config.enableCors" />
-                </t-form-item>
-                <t-form-item label="启用 WS">
-                    <t-checkbox v-model="config.enableWebsocket" />
-                </t-form-item>
                 <t-form-item label="消息格式">
                     <t-select v-model="config.messagePostFormat" :options="messageFormatOptions" />
                 </t-form-item>
+                <t-form-item label="报告自身消息">
+                    <t-checkbox v-model="config.reportSelfMessage" />
+                </t-form-item>
                 <t-form-item label="Token">
-                    <t-input v-model="config.token" type="text" />
+                    <t-input v-model="config.token" />
+                </t-form-item>
+                <t-form-item label="启用推送事件">
+                    <t-checkbox v-model="config.enablePushEvent" />
                 </t-form-item>
                 <t-form-item label="调试模式">
                     <t-checkbox v-model="config.debug" />
                 </t-form-item>
+                <t-form-item label="心跳间隔">
+                    <t-input v-model.number="config.heartInterval" type="number" />
+                </t-form-item>
                 <t-form-item label="启用">
                     <t-checkbox v-model="config.enable" />
                 </t-form-item>
@@ -34,10 +37,10 @@
 
 <script setup lang="ts">
 import { defineProps, ref, watch } from 'vue';
-import { HttpServerConfig } from '../../../../src/onebot/config/config';
+import { WebsocketServerConfig } from '../../../../src/onebot/config/config';
 
 const props = defineProps<{
-    config: HttpServerConfig;
+    config: WebsocketServerConfig;
 }>();
 
 const messageFormatOptions = ref([