diff --git a/web/assets/js/model/outbound.js b/web/assets/js/model/outbound.js
index a790e28b..f67528c2 100644
--- a/web/assets/js/model/outbound.js
+++ b/web/assets/js/model/outbound.js
@@ -333,7 +333,36 @@ class RealityStreamSettings extends CommonClass {
             spiderX: this.spiderX,
         };
     }
-};
+}
+
+class SockoptStreamSettings extends CommonClass {
+    constructor(dialerProxy = "", tcpFastOpen = false, tcpKeepAliveInterval = 0, tcpNoDelay = false) {
+        super();
+        this.dialerProxy = dialerProxy;
+        this.tcpFastOpen = tcpFastOpen;
+        this.tcpKeepAliveInterval = tcpKeepAliveInterval;
+        this.tcpNoDelay = tcpNoDelay;
+    }
+
+    static fromJson(json = {}) {
+        if (Object.keys(json).length === 0) return undefined;
+        return new SockoptStreamSettings(
+            json.dialerProxy,
+            json.tcpFastOpen,
+            json.tcpKeepAliveInterval,
+            json.tcpNoDelay,
+        );
+    }
+
+    toJson() {
+        return {
+            dialerProxy: this.dialerProxy,
+            tcpFastOpen: this.tcpFastOpen,
+            tcpKeepAliveInterval: this.tcpKeepAliveInterval,
+            tcpNoDelay: this.tcpNoDelay,
+        };
+    }
+}
 
 class StreamSettings extends CommonClass {
     constructor(network='tcp',
@@ -346,6 +375,7 @@ class StreamSettings extends CommonClass {
                 httpSettings=new HttpStreamSettings(),
                 quicSettings=new QuicStreamSettings(),
                 grpcSettings=new GrpcStreamSettings(),
+                sockopt = undefined,
                 ) {
         super();
         this.network = network;
@@ -358,6 +388,7 @@ class StreamSettings extends CommonClass {
         this.http = httpSettings;
         this.quic = quicSettings;
         this.grpc = grpcSettings;
+        this.sockopt = sockopt;
     }
     
     get isTls() {
@@ -368,6 +399,14 @@ class StreamSettings extends CommonClass {
         return this.security === "reality";
     }
 
+    get sockoptSwitch() {
+        return this.sockopt != undefined;
+    }
+
+    set sockoptSwitch(value) {
+        this.sockopt = value ? new SockoptStreamSettings() : undefined;
+    }
+
     static fromJson(json={}) {
         return new StreamSettings(
             json.network,
@@ -380,6 +419,7 @@ class StreamSettings extends CommonClass {
             HttpStreamSettings.fromJson(json.httpSettings),
             QuicStreamSettings.fromJson(json.quicSettings),
             GrpcStreamSettings.fromJson(json.grpcSettings),
+            SockoptStreamSettings.fromJson(json.sockopt),
         );
     }
 
@@ -396,6 +436,7 @@ class StreamSettings extends CommonClass {
             httpSettings: network === 'http' ? this.http.toJson() : undefined,
             quicSettings: network === 'quic' ? this.quic.toJson() : undefined,
             grpcSettings: network === 'grpc' ? this.grpc.toJson() : undefined,
+            sockopt: this.sockopt != undefined ? this.sockopt.toJson() : undefined,
         };
     }
 }
diff --git a/web/html/xui/form/outbound.html b/web/html/xui/form/outbound.html
index 5843ab4a..dfd0ec8f 100644
--- a/web/html/xui/form/outbound.html
+++ b/web/html/xui/form/outbound.html
@@ -214,17 +214,17 @@
 
 <!-- stream settings -->
 <template v-if="outbound.canEnableStream()">
-        <a-form-item label='{{ i18n "transmission" }}'>
-            <a-select v-model="outbound.stream.network" @change="streamNetworkChange"
-                    :dropdown-class-name="themeSwitcher.currentTheme">
-                <a-select-option value="tcp">TCP</a-select-option>
-                <a-select-option value="kcp">mKCP</a-select-option>
-                <a-select-option value="ws">WebSocket</a-select-option>
-                <a-select-option value="http">HTTP/2</a-select-option>
-                <a-select-option value="quic">QUIC</a-select-option>
-                <a-select-option value="grpc">gRPC</a-select-option>
-            </a-select>
-        </a-form-item>
+    <a-form-item label='{{ i18n "transmission" }}'>
+        <a-select v-model="outbound.stream.network" @change="streamNetworkChange"
+                :dropdown-class-name="themeSwitcher.currentTheme">
+            <a-select-option value="tcp">TCP</a-select-option>
+            <a-select-option value="kcp">mKCP</a-select-option>
+            <a-select-option value="ws">WebSocket</a-select-option>
+            <a-select-option value="http">HTTP/2</a-select-option>
+            <a-select-option value="quic">QUIC</a-select-option>
+            <a-select-option value="grpc">gRPC</a-select-option>
+        </a-select>
+    </a-form-item>
     <template v-if="outbound.stream.network === 'tcp'">
         <a-form-item label='HTTP {{ i18n "camouflage" }}'>
             <a-switch
@@ -391,6 +391,29 @@
                 </a-form-item>
         </template>
 </template>
+
+<!-- sockopt settings -->
+<template v-if="outbound.canEnableStream()">
+    <a-form-item label="Sockopts">
+        <a-switch v-model="outbound.stream.sockoptSwitch"></a-switch>
+    </a-form-item>
+    <template v-if="outbound.stream.sockoptSwitch">
+        <a-form-item label="Dialer Proxy">
+            <a-select v-model="outbound.stream.sockopt.dialerProxy" :dropdown-class-name="themeSwitcher.currentTheme">
+                <a-select-option v-for="tag in ['', ...outModal.tags]" :value="tag">[[ tag ]]</a-select-option>
+            </a-select>
+        </a-form-item>
+        <a-form-item label="TCP Fast Open">
+            <a-switch v-model="outbound.stream.sockopt.tcpFastOpen"></a-switch>
+        </a-form-item>
+        <a-form-item label="Keep Alive Interval">
+            <a-input-number v-model="outbound.stream.sockopt.tcpKeepAliveInterval" :min="0"></a-input-number>
+        </a-form-item>
+        <a-form-item label="TCP No-Delay">
+            <a-switch v-model="outbound.stream.sockopt.tcpNoDelay"></a-switch>
+        </a-form-item>
+    </template>
+</template>
 </a-form>
 </a-tab-pane>
 <a-tab-pane key="2" tab="JSON" force-render="true">