diff --git a/web/assets/js/model/xray.js b/web/assets/js/model/xray.js
index b4be3410..9a8fae80 100644
--- a/web/assets/js/model/xray.js
+++ b/web/assets/js/model/xray.js
@@ -706,7 +706,7 @@ class RealityStreamSettings extends XrayCommonClass {
         minClient = '',
         maxClient = '',
         maxTimediff = 0,
-        shortIds = RandomUtil.randowShortId(),
+        shortIds = RandomUtil.randomShortId(),
         settings= new RealityStreamSettings.Settings()
         ){
         super();
diff --git a/web/assets/js/util/utils.js b/web/assets/js/util/utils.js
index d3092ac1..e6a28a32 100644
--- a/web/assets/js/util/utils.js
+++ b/web/assets/js/util/utils.js
@@ -104,7 +104,7 @@ class RandomUtil {
         return str;
     }
     
-    static randowShortId() {
+    static randomShortId() {
         return this.randomShortIdSeq(8);
     }
 
diff --git a/web/html/xui/form/tls_settings.html b/web/html/xui/form/tls_settings.html
index 52b3cb16..d80e820e 100644
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -169,10 +169,12 @@
         <a-input v-model.trim="inbound.stream.reality.serverNames" style="width: 300px"></a-input>
     </a-form-item>
     <a-form-item label="ShortIds">
-        <a-input v-model.trim="inbound.stream.reality.shortIds"></a-input>
+        <a-icon @click="inbound.stream.reality.shortIds = RandomUtil.randomShortId()" type="sync"> </a-icon>
+        <a-input v-model.trim="inbound.stream.reality.shortIds" style="width: 150px;"></a-input>
     </a-form-item>
+    <br>
     <a-form-item label="SpiderX">
-        <a-input v-model.trim="inbound.stream.reality.settings.spiderX"></a-input>
+        <a-input v-model.trim="inbound.stream.reality.settings.spiderX" style="width: 150px;"></a-input>
     </a-form-item>
     <a-form-item label="Private Key">
         <a-input v-model.trim="inbound.stream.reality.privateKey" style="width: 300px"></a-input>