diff --git a/frontend/src/pages/inbounds/form/InboundFormModal.tsx b/frontend/src/pages/inbounds/form/InboundFormModal.tsx
index fe602d29..571a7286 100644
--- a/frontend/src/pages/inbounds/form/InboundFormModal.tsx
+++ b/frontend/src/pages/inbounds/form/InboundFormModal.tsx
@@ -5,7 +5,6 @@ import {
   Button,
   Card,
   Checkbox,
-  Divider,
   Empty,
   Form,
   Input,
@@ -41,7 +40,6 @@ import {
   canEnableTls,
   isSS2022,
 } from '@/lib/xray/protocol-capabilities';
-import { SSMethodSchema } from '@/schemas/protocols/shared/shadowsocks';
 import { getRandomRealityTarget } from '@/models/reality-targets';
 import {
   InboundFormBaseSchema,
@@ -84,7 +82,7 @@ import { InputAddon } from '@/components/ui';
 import './InboundFormModal.css';
 
 import { AdvancedAllEditor, AdvancedSliceEditor } from './advanced-editors';
-import { TunFields, TunnelFields } from './protocols';
+import { ShadowsocksFields, TunFields, TunnelFields, WireguardFields } from './protocols';
 
 const { TextArea } = Input;
 import { coerceInboundJsonField, type DBInbound } from '@/models/dbinbound';
@@ -948,111 +946,7 @@ export default function InboundFormModal({
 
   const protocolTab = (
     <>
-      {protocol === Protocols.WIREGUARD && (
-        <>
-          <Form.Item label={t('pages.xray.wireguard.secretKey')}>
-            <Space.Compact block>
-              <Form.Item name={['settings', 'secretKey']} noStyle>
-                <Input style={{ width: 'calc(100% - 32px)' }} />
-              </Form.Item>
-              <Button icon={<ReloadOutlined />} onClick={regenInboundWg} />
-            </Space.Compact>
-          </Form.Item>
-          <Form.Item label={t('pages.xray.wireguard.publicKey')}>
-            <Input value={wgPubKey} disabled />
-          </Form.Item>
-          <Form.Item name={['settings', 'mtu']} label="MTU">
-            <InputNumber />
-          </Form.Item>
-          <Form.Item
-            name={['settings', 'noKernelTun']}
-            label={t('pages.inbounds.info.noKernelTun')}
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-          <Form.List name={['settings', 'peers']}>
-            {(fields, { add, remove }) => (
-              <>
-                <Form.Item label={t('pages.inbounds.form.peers')}>
-                  <Button
-                    size="small"
-                    onClick={() => {
-                      const kp = Wireguard.generateKeypair();
-                      add({
-                        privateKey: kp.privateKey,
-                        publicKey: kp.publicKey,
-                        allowedIPs: ['10.0.0.2/32'],
-                        keepAlive: 0,
-                      });
-                    }}
-                  >
-                    <PlusOutlined /> {t('pages.inbounds.form.addPeer')}
-                  </Button>
-                </Form.Item>
-                {fields.map((field, idx) => (
-                  <div key={field.key} className="wg-peer">
-                    <Divider titlePlacement="center">
-                      <Space>
-                        <span>{t('pages.inbounds.info.peerNumber', { n: idx + 1 })}</span>
-                        {fields.length > 1 && (
-                          <Button
-                            size="small"
-                            danger
-                            icon={<MinusOutlined />}
-                            onClick={() => remove(field.name)}
-                          />
-                        )}
-                      </Space>
-                    </Divider>
-                    <Form.Item label={t('pages.xray.wireguard.secretKey')}>
-                      <Space.Compact block>
-                        <Form.Item name={[field.name, 'privateKey']} noStyle>
-                          <Input style={{ width: 'calc(100% - 32px)' }} />
-                        </Form.Item>
-                        <Button
-                          icon={<ReloadOutlined />}
-                          onClick={() => regenWgPeerKeypair(field.name)}
-                        />
-                      </Space.Compact>
-                    </Form.Item>
-                    <Form.Item name={[field.name, 'publicKey']} label={t('pages.xray.wireguard.publicKey')}>
-                      <Input />
-                    </Form.Item>
-                    <Form.Item name={[field.name, 'preSharedKey']} label="PSK">
-                      <Input />
-                    </Form.Item>
-                    <Form.List name={[field.name, 'allowedIPs']}>
-                      {(ipFields, { add: addIp, remove: removeIp }) => (
-                        <Form.Item label={t('pages.xray.wireguard.allowedIPs')}>
-                          <Button size="small" onClick={() => addIp('')}>
-                            <PlusOutlined />
-                          </Button>
-                          {ipFields.map((ipField) => (
-                            <Space.Compact key={ipField.key} block className="mt-4">
-                              <Form.Item name={ipField.name} noStyle>
-                                <Input />
-                              </Form.Item>
-                              {ipFields.length > 1 && (
-                                <Button size="small" onClick={() => removeIp(ipField.name)}>
-                                  <MinusOutlined />
-                                </Button>
-                              )}
-                            </Space.Compact>
-                          ))}
-                        </Form.Item>
-                      )}
-                    </Form.List>
-                    <Form.Item name={[field.name, 'keepAlive']} label={t('pages.inbounds.form.keepAlive')}>
-                      <InputNumber min={0} />
-                    </Form.Item>
-                  </div>
-                ))}
-              </>
-            )}
-          </Form.List>
-        </>
-      )}
+      {protocol === Protocols.WIREGUARD && <WireguardFields wgPubKey={wgPubKey} regenInboundWg={regenInboundWg} regenWgPeerKeypair={regenWgPeerKeypair} />}
 
       {protocol === Protocols.TUN && <TunFields />}
 
@@ -1131,57 +1025,7 @@ export default function InboundFormModal({
         </>
       )}
 
-      {protocol === Protocols.SHADOWSOCKS && (
-        <>
-          <Form.Item name={['settings', 'method']} label={t('pages.inbounds.form.encryptionMethod')}>
-            <Select
-              onChange={(v) => {
-                form.setFieldValue(
-                  ['settings', 'password'],
-                  RandomUtil.randomShadowsocksPassword(v as string),
-                );
-              }}
-              options={SSMethodSchema.options.map((m) => ({ value: m, label: m }))}
-            />
-          </Form.Item>
-          {isSSWith2022 && (
-            <Form.Item label={t('password')}>
-              <Space.Compact block>
-                <Form.Item name={['settings', 'password']} noStyle>
-                  <Input style={{ width: 'calc(100% - 32px)' }} />
-                </Form.Item>
-                <Button
-                  icon={<ReloadOutlined />}
-                  onClick={() => {
-                    const method = form.getFieldValue(['settings', 'method']);
-                    form.setFieldValue(
-                      ['settings', 'password'],
-                      RandomUtil.randomShadowsocksPassword(method as string),
-                    );
-                  }}
-                />
-              </Space.Compact>
-            </Form.Item>
-          )}
-          <Form.Item name={['settings', 'network']} label={t('pages.inbounds.network')}>
-            <Select
-              style={{ width: 120 }}
-              options={[
-                { value: 'tcp,udp', label: 'TCP, UDP' },
-                { value: 'tcp', label: 'TCP' },
-                { value: 'udp', label: 'UDP' },
-              ]}
-            />
-          </Form.Item>
-          <Form.Item
-            name={['settings', 'ivCheck']}
-            label="ivCheck"
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-        </>
-      )}
+      {protocol === Protocols.SHADOWSOCKS && <ShadowsocksFields form={form} isSSWith2022={isSSWith2022} />}
 
       {protocol === Protocols.VLESS && (
         <>
diff --git a/frontend/src/pages/inbounds/form/protocols/index.ts b/frontend/src/pages/inbounds/form/protocols/index.ts
index a86f59db..f44af7eb 100644
--- a/frontend/src/pages/inbounds/form/protocols/index.ts
+++ b/frontend/src/pages/inbounds/form/protocols/index.ts
@@ -1,2 +1,4 @@
 export { default as TunFields } from './tun';
 export { default as TunnelFields } from './tunnel';
+export { default as ShadowsocksFields } from './shadowsocks';
+export { default as WireguardFields } from './wireguard';
diff --git a/frontend/src/pages/inbounds/form/protocols/shadowsocks.tsx b/frontend/src/pages/inbounds/form/protocols/shadowsocks.tsx
new file mode 100644
index 00000000..d18b815e
--- /dev/null
+++ b/frontend/src/pages/inbounds/form/protocols/shadowsocks.tsx
@@ -0,0 +1,67 @@
+import { useTranslation } from 'react-i18next';
+import { Button, Form, Input, Select, Space, Switch, type FormInstance } from 'antd';
+import { ReloadOutlined } from '@ant-design/icons';
+
+import { RandomUtil } from '@/utils';
+import { SSMethodSchema } from '@/schemas/protocols/shared/shadowsocks';
+import type { InboundFormValues } from '@/schemas/forms/inbound-form';
+
+interface ShadowsocksFieldsProps {
+  form: FormInstance<InboundFormValues>;
+  isSSWith2022: boolean;
+}
+
+export default function ShadowsocksFields({ form, isSSWith2022 }: ShadowsocksFieldsProps) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Form.Item name={['settings', 'method']} label={t('pages.inbounds.form.encryptionMethod')}>
+        <Select
+          onChange={(v) => {
+            form.setFieldValue(
+              ['settings', 'password'],
+              RandomUtil.randomShadowsocksPassword(v as string),
+            );
+          }}
+          options={SSMethodSchema.options.map((m) => ({ value: m, label: m }))}
+        />
+      </Form.Item>
+      {isSSWith2022 && (
+        <Form.Item label={t('password')}>
+          <Space.Compact block>
+            <Form.Item name={['settings', 'password']} noStyle>
+              <Input style={{ width: 'calc(100% - 32px)' }} />
+            </Form.Item>
+            <Button
+              icon={<ReloadOutlined />}
+              onClick={() => {
+                const method = form.getFieldValue(['settings', 'method']);
+                form.setFieldValue(
+                  ['settings', 'password'],
+                  RandomUtil.randomShadowsocksPassword(method as string),
+                );
+              }}
+            />
+          </Space.Compact>
+        </Form.Item>
+      )}
+      <Form.Item name={['settings', 'network']} label={t('pages.inbounds.network')}>
+        <Select
+          style={{ width: 120 }}
+          options={[
+            { value: 'tcp,udp', label: 'TCP, UDP' },
+            { value: 'tcp', label: 'TCP' },
+            { value: 'udp', label: 'UDP' },
+          ]}
+        />
+      </Form.Item>
+      <Form.Item
+        name={['settings', 'ivCheck']}
+        label="ivCheck"
+        valuePropName="checked"
+      >
+        <Switch />
+      </Form.Item>
+    </>
+  );
+}
diff --git a/frontend/src/pages/inbounds/form/protocols/wireguard.tsx b/frontend/src/pages/inbounds/form/protocols/wireguard.tsx
new file mode 100644
index 00000000..d646dd94
--- /dev/null
+++ b/frontend/src/pages/inbounds/form/protocols/wireguard.tsx
@@ -0,0 +1,120 @@
+import { useTranslation } from 'react-i18next';
+import { Button, Divider, Form, Input, InputNumber, Space, Switch } from 'antd';
+import { MinusOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons';
+
+import { Wireguard } from '@/utils';
+
+interface WireguardFieldsProps {
+  wgPubKey: string;
+  regenInboundWg: () => void;
+  regenWgPeerKeypair: (name: number) => void;
+}
+
+export default function WireguardFields({ wgPubKey, regenInboundWg, regenWgPeerKeypair }: WireguardFieldsProps) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Form.Item label={t('pages.xray.wireguard.secretKey')}>
+        <Space.Compact block>
+          <Form.Item name={['settings', 'secretKey']} noStyle>
+            <Input style={{ width: 'calc(100% - 32px)' }} />
+          </Form.Item>
+          <Button icon={<ReloadOutlined />} onClick={regenInboundWg} />
+        </Space.Compact>
+      </Form.Item>
+      <Form.Item label={t('pages.xray.wireguard.publicKey')}>
+        <Input value={wgPubKey} disabled />
+      </Form.Item>
+      <Form.Item name={['settings', 'mtu']} label="MTU">
+        <InputNumber />
+      </Form.Item>
+      <Form.Item
+        name={['settings', 'noKernelTun']}
+        label={t('pages.inbounds.info.noKernelTun')}
+        valuePropName="checked"
+      >
+        <Switch />
+      </Form.Item>
+      <Form.List name={['settings', 'peers']}>
+        {(fields, { add, remove }) => (
+          <>
+            <Form.Item label={t('pages.inbounds.form.peers')}>
+              <Button
+                size="small"
+                onClick={() => {
+                  const kp = Wireguard.generateKeypair();
+                  add({
+                    privateKey: kp.privateKey,
+                    publicKey: kp.publicKey,
+                    allowedIPs: ['10.0.0.2/32'],
+                    keepAlive: 0,
+                  });
+                }}
+              >
+                <PlusOutlined /> {t('pages.inbounds.form.addPeer')}
+              </Button>
+            </Form.Item>
+            {fields.map((field, idx) => (
+              <div key={field.key} className="wg-peer">
+                <Divider titlePlacement="center">
+                  <Space>
+                    <span>{t('pages.inbounds.info.peerNumber', { n: idx + 1 })}</span>
+                    {fields.length > 1 && (
+                      <Button
+                        size="small"
+                        danger
+                        icon={<MinusOutlined />}
+                        onClick={() => remove(field.name)}
+                      />
+                    )}
+                  </Space>
+                </Divider>
+                <Form.Item label={t('pages.xray.wireguard.secretKey')}>
+                  <Space.Compact block>
+                    <Form.Item name={[field.name, 'privateKey']} noStyle>
+                      <Input style={{ width: 'calc(100% - 32px)' }} />
+                    </Form.Item>
+                    <Button
+                      icon={<ReloadOutlined />}
+                      onClick={() => regenWgPeerKeypair(field.name)}
+                    />
+                  </Space.Compact>
+                </Form.Item>
+                <Form.Item name={[field.name, 'publicKey']} label={t('pages.xray.wireguard.publicKey')}>
+                  <Input />
+                </Form.Item>
+                <Form.Item name={[field.name, 'preSharedKey']} label="PSK">
+                  <Input />
+                </Form.Item>
+                <Form.List name={[field.name, 'allowedIPs']}>
+                  {(ipFields, { add: addIp, remove: removeIp }) => (
+                    <Form.Item label={t('pages.xray.wireguard.allowedIPs')}>
+                      <Button size="small" onClick={() => addIp('')}>
+                        <PlusOutlined />
+                      </Button>
+                      {ipFields.map((ipField) => (
+                        <Space.Compact key={ipField.key} block className="mt-4">
+                          <Form.Item name={ipField.name} noStyle>
+                            <Input />
+                          </Form.Item>
+                          {ipFields.length > 1 && (
+                            <Button size="small" onClick={() => removeIp(ipField.name)}>
+                              <MinusOutlined />
+                            </Button>
+                          )}
+                        </Space.Compact>
+                      ))}
+                    </Form.Item>
+                  )}
+                </Form.List>
+                <Form.Item name={[field.name, 'keepAlive']} label={t('pages.inbounds.form.keepAlive')}>
+                  <InputNumber min={0} />
+                </Form.Item>
+              </div>
+            ))}
+          </>
+        )}
+      </Form.List>
+    </>
+  );
+}