diff --git a/frontend/src/components/protocols/Hysteria2.vue b/frontend/src/components/protocols/Hysteria2.vue
index 1f22031..1e8f7d1 100644
--- a/frontend/src/components/protocols/Hysteria2.vue
+++ b/frontend/src/components/protocols/Hysteria2.vue
@@ -1,29 +1,5 @@
 <template>
   <v-card subtitle="Hysteria2">
-    <v-row v-if="direction == 'in'">
-      <v-col cols="12" sm="6" md="4" v-if="data.masquerade != undefined">
-        <v-text-field
-        label="HTTP3 server on auth fail"
-        hide-details
-        v-model="data.masquerade">
-        </v-text-field>
-      </v-col>
-      <v-col cols="12" sm="6" md="4">
-        <v-switch v-model="data.ignore_client_bandwidth" color="primary" :label="$t('types.hy.ignoreBw')" hide-details></v-switch>
-      </v-col>
-    </v-row>
-    <v-row v-else>
-      <v-col cols="12" sm="6" md="4">
-        <v-text-field
-        :label="$t('types.pw')"
-        hide-details
-        v-model="data.password">
-        </v-text-field>
-      </v-col>
-      <v-col cols="12" sm="6" md="4">
-        <Network :data="data" />
-      </v-col>
-    </v-row>
     <v-row v-if="!data.ignore_client_bandwidth">
       <v-col cols="12" sm="6" md="4">
         <v-text-field
@@ -46,15 +22,103 @@
         </v-text-field>
       </v-col>
     </v-row>
-    <v-row v-if="data.obfs != undefined">
-      <v-col cols="12" sm="6" md="4">
-       <v-text-field
-        :label="$t('types.hy.obfs')"
-        hide-details
-        v-model="data.obfs.password">
-        </v-text-field>
-      </v-col>
-    </v-row>
+    <template v-if="direction == 'in'">
+      <v-row>
+        <v-col cols="12" sm="6" md="4">
+          <v-switch v-model="data.ignore_client_bandwidth" color="primary" :label="$t('types.hy.ignoreBw')" hide-details></v-switch>
+        </v-col>
+        <v-col cols="12" sm="6" md="4" v-if="data.obfs != undefined">
+        <v-text-field
+          :label="$t('types.hy.obfs')"
+          hide-details
+          v-model="data.obfs.password">
+          </v-text-field>
+        </v-col>
+      </v-row>
+      <v-card subtitle="Hysteria2 Masquerade" v-if="data.masquerade != undefined">
+        <v-row>
+          <v-col cols="12" sm="6" md="4">
+            <v-select v-model="masqueradeType" hide-details :label="$t('type')" :items="masqTypes"></v-select>
+          </v-col>
+          <v-col cols="12" sm="8" v-if="masqueradeType == ''">
+            <v-text-field
+            label="HTTP3 server on auth fails"
+            placeholder="file:///var/www | http://127.0.0.1:8080"
+            v-model="data.masquerade"
+            hide-details>
+            </v-text-field>
+          </v-col>
+          <v-col cols="12" sm="8" v-if="masqueradeType == 'file'">
+            <v-text-field
+            label="File server root directory"
+            placeholder="/var/www"
+            v-model="data.masquerade.directory"
+            hide-details>
+            </v-text-field>
+          </v-col>
+          <v-col cols="12" sm="6" md="4" v-if="masqueradeType == 'string'">
+            <v-text-field
+            label="HTTP Code"
+            type="number"
+            min="100"
+            max="599"
+            v-model.number="data.masquerade.status_code"
+            hide-details>
+            </v-text-field>
+          </v-col>
+        </v-row>
+        <v-row v-if="masqueradeType == 'proxy'">
+          <v-col cols="12" sm="6">
+            <v-text-field
+            label="Target URL"
+            placeholder="http://example.com:8080"
+            v-model="data.masquerade.url"
+            hide-details>
+            </v-text-field>
+          </v-col>
+          <v-col cols="12" sm="6" md="4">
+            <v-text-field
+            label="Rewrite Host"
+            placeholder="example.com"
+            v-model="data.masquerade.rewrite_host"
+            hide-details>
+            </v-text-field>
+          </v-col>
+        </v-row>
+        <template v-if="masqueradeType == 'string'">
+          <v-row>
+            <v-col cols="12" sm="8">
+              <v-text-field
+              label="Content"
+              v-model="data.masquerade.content"
+              hide-details>
+              </v-text-field>
+            </v-col>
+          </v-row>
+          <Headers :data="data.masquerade" />
+        </template>
+      </v-card>
+    </template>
+    <template v-else>
+      <v-row>
+        <v-col cols="12" sm="6" md="4">
+          <v-text-field
+          :label="$t('types.pw')"
+          hide-details
+          v-model="data.password">
+          </v-text-field>
+        </v-col>
+        <v-col cols="12" sm="6" md="4">
+          <Network :data="data" />
+        </v-col>
+        <v-col cols="12" sm="8" v-if="optionMPort">
+          <v-text-field
+            :label="$t('rule.portRange') + ' ' + $t('commaSeparated')"
+            v-model="server_ports">
+          </v-text-field>
+        </v-col>
+      </v-row>
+    </template>
     <v-card-actions>
       <v-spacer></v-spacer>
       <v-menu v-model="menu" :close-on-content-click="false" location="start">
@@ -63,12 +127,19 @@
         </template>
         <v-card>
           <v-list>
-            <v-list-item>
-              <v-switch v-model="optionObfs" color="primary" :label="$t('types.hy.obfs')" hide-details></v-switch>
-            </v-list-item>
-            <v-list-item>
-              <v-switch v-model="optionMasq" color="primary" label="Masquerade" hide-details></v-switch>
-            </v-list-item>
+            <template v-if="direction == 'in'">
+              <v-list-item>
+                <v-switch v-model="optionObfs" color="primary" :label="$t('types.hy.obfs')" hide-details></v-switch>
+              </v-list-item>
+              <v-list-item>
+                <v-switch v-model="optionMasq" color="primary" label="Masquerade" hide-details></v-switch>
+              </v-list-item>
+            </template>
+            <template v-else>
+              <v-list-item>
+                <v-switch v-model="optionMPort" color="primary" :label="$t('rule.portRange')" hide-details></v-switch>
+              </v-list-item>
+            </template>
           </v-list>
         </v-card>
       </v-menu>
@@ -78,22 +149,44 @@
 
 <script lang="ts">
 import Network from '@/components/Network.vue'
+import Headers from '@/components/Headers.vue'
+import { i18n } from '@/locales'
 
 export default {
   props: ['direction', 'data'],
   data() {
     return {
       menu: false,
+      masqTypes: [
+        { title: i18n.global.t('rule.simple'), value: '' },
+        { title: "File server", value: "file" },
+        { title: "Reverse Proxy", value: "proxy" },
+        { title: "Fixed response", value: "string" },
+      ]
     }
   },
   computed: {
     down_mbps: {
       get() { return this.$props.data.down_mbps?? 0 },
-      set(newValue:number) { this.$props.data.down_mbps = newValue>0 ? newValue : undefined }
+      set(v:number) { this.$props.data.down_mbps = v>0 ? v : undefined }
     },
     up_mbps: {
       get() { return this.$props.data.up_mbps?? 0 },
-      set(newValue:number) { this.$props.data.up_mbps = newValue>0 ? newValue : undefined }
+      set(v:number) { this.$props.data.up_mbps = v>0 ? v : undefined }
+    },
+    server_ports: {
+      get() { return this.$props.data.server_ports?.join(',')?? [] },
+      set(v:string) { this.$props.data.server_ports = v.length > 0 ? v.split(',') : undefined }
+    },
+    masqueradeType: {
+      get() { return typeof this.$props.data.masquerade === 'object' ? this.$props.data.masquerade.type?? '' : '' },
+      set(v:string) {
+        if (v == '') {
+          this.$props.data.masquerade = ''
+        } else {
+          this.$props.data.masquerade = { type: v }
+        }
+      }
     },
     optionObfs: {
       get(): boolean { return this.$props.data.obfs != undefined },
@@ -102,8 +195,12 @@ export default {
     optionMasq: {
       get(): boolean { return this.$props.data.masquerade != undefined },
       set(v:boolean) { this.$props.data.masquerade = v ? "" : undefined }
+    },
+    optionMPort: {
+      get(): boolean { return this.$props.data.server_ports != undefined },
+      set(v:boolean) { this.$props.data.server_ports = v ? [] : undefined }
     }
   },
-  components: { Network }
+  components: { Network, Headers }
 }
 </script>
\ No newline at end of file
diff --git a/frontend/src/types/inbounds.ts b/frontend/src/types/inbounds.ts
index 13c529a..c6d185f 100644
--- a/frontend/src/types/inbounds.ts
+++ b/frontend/src/types/inbounds.ts
@@ -165,7 +165,15 @@ export interface Hysteria2 extends InboundBasics {
   }
   users: NamePass[]
   ignore_client_bandwidth?: boolean
-  masquerade?: string
+  masquerade?: string | {
+    type: string
+    directory?: string
+    url?: string
+    rewrite_host?: string
+    status_code?: number
+    headers?: Headers[]
+    content?: string
+  }
   brutal_debug?: boolean
 }
 export interface Tun extends InboundBasics {
diff --git a/frontend/src/types/outbounds.ts b/frontend/src/types/outbounds.ts
index b8646ba..f4aa274 100644
--- a/frontend/src/types/outbounds.ts
+++ b/frontend/src/types/outbounds.ts
@@ -168,6 +168,8 @@ export interface TUIC extends OutboundBasics, Dial {
 export interface Hysteria2 extends OutboundBasics, Dial {
   server: string
   server_port: number
+  server_ports?: string[]
+  hop_interval: string
   up_mbps?: number
   down_mbps?: number
   obfs?: {