diff --git a/src/containers/Settings/components/ExternalControllerDrawer/index.tsx b/src/containers/Settings/components/ExternalControllerDrawer/index.tsx
index 987def8..1c89df7 100644
--- a/src/containers/Settings/components/ExternalControllerDrawer/index.tsx
+++ b/src/containers/Settings/components/ExternalControllerDrawer/index.tsx
@@ -1,50 +1,55 @@
 import * as React from 'react'
+import { translate } from 'react-i18next'
 import { Modal, Input, Row, Col, Alert } from '@components'
+import { I18nProps } from '@models'
 import './style.scss'
 
-interface ExternalControllerDrawerProps {
+interface ExternalControllerModalProps extends I18nProps {
     show: boolean
     host: string
     port: string
-    onConfirm: (host: string, port: string) => void
+    secret?: string
+    onConfirm: (host: string, port: string, secret: string) => void
     onCancel: () => void
 }
 
-interface ExternalControllerDrawerState {
-    host: string,
+interface ExternalControllerModalState {
+    host: string
     port: string
+    secret: string
 }
 
-export class ExternalControllerDrawer extends React.Component<ExternalControllerDrawerProps, ExternalControllerDrawerState> {
+class ExternalController extends React.Component<ExternalControllerModalProps, ExternalControllerModalState> {
 
     state = {
         host: this.props.host,
-        port: this.props.port
+        port: this.props.port,
+        secret: this.props.secret || ''
     }
 
     private handleOk = () => {
         const { onConfirm } = this.props
-        const { host, port } = this.state
-        onConfirm(host, port)
+        const { host, port, secret } = this.state
+        onConfirm(host, port, secret)
     }
 
     render () {
-        const { show, onCancel } = this.props
-        const { host, port } = this.state
+        const { show, onCancel, t } = this.props
+        const { host, port, secret } = this.state
 
         return (
             <Modal
                 show={show}
-                title="编辑外部控制设置"
+                title={t('externalControllerSetting.title')}
                 bodyClassName="external-controller"
                 onClose={onCancel}
                 onOk={this.handleOk}
             >
                 <Alert type="info" inside={true}>
-                    <p>请注意，修改该配置项并不会修改你的 Clash 配置文件，请确认修改后的外部控制地址和 Clash 配置文件内的地址一致，否则会导致 Dashboard 无法连接。</p>
+                    <p>{t('externalControllerSetting.note')}</p>
                 </Alert>
                 <Row gutter={24} align="middle">
-                    <Col span={4} className="title">Host</Col>
+                    <Col span={4} className="title">{t('externalControllerSetting.host')}</Col>
                     <Col span={20} className="form">
                         <Input
                             align="left"
@@ -55,7 +60,7 @@ export class ExternalControllerDrawer extends React.Component<ExternalController
                     </Col>
                 </Row>
                 <Row gutter={24} align="middle">
-                    <Col span={4} className="title">端口</Col>
+                    <Col span={4} className="title">{t('externalControllerSetting.port')}</Col>
                     <Col span={20} className="form">
                         <Input
                             align="left"
@@ -65,7 +70,20 @@ export class ExternalControllerDrawer extends React.Component<ExternalController
                         />
                     </Col>
                 </Row>
+                <Row gutter={24} align="middle">
+                    <Col span={4} className="title">{t('externalControllerSetting.secret')}</Col>
+                    <Col span={20} className="form">
+                        <Input
+                            align="left"
+                            inside={true}
+                            value={secret}
+                            onChange={secret => this.setState({ secret })}
+                        />
+                    </Col>
+                </Row>
             </Modal>
         )
     }
 }
+
+export const ExternalControllerModal = translate(['Settings'])(ExternalController)
diff --git a/src/containers/Settings/index.tsx b/src/containers/Settings/index.tsx
index a77a1f1..2e494e3 100644
--- a/src/containers/Settings/index.tsx
+++ b/src/containers/Settings/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { translate } from 'react-i18next'
 import { changeLanguage } from 'i18next'
 import { Header, Card, Row, Col, Switch, ButtonSelect, ButtonSelectOptions, Input, Icon } from '@components'
-import { ExternalControllerDrawer } from './components'
+import { ExternalControllerModal } from './components'
 import { I18nProps } from '@models'
 import './style.scss'
 
@@ -17,6 +17,7 @@ class Settings extends React.Component<I18nProps, {}> {
         httpProxyPort: 7890,
         externalControllerHost: '127.0.0.1',
         externalControllerPort: '7892',
+        externalControllerSecret: '',
         showEditDrawer: false
     }
 
@@ -40,6 +41,7 @@ class Settings extends React.Component<I18nProps, {}> {
             httpProxyPort,
             externalControllerHost,
             externalControllerPort,
+            externalControllerSecret,
             showEditDrawer
         } = this.state
         const proxyModeOptions: ButtonSelectOptions[] = [
@@ -142,15 +144,14 @@ class Settings extends React.Component<I18nProps, {}> {
                     <span className="check-update-btn">{t('checkUpdate')}</span>
                 </Card>
 
-                <ExternalControllerDrawer
+                <ExternalControllerModal
                     show={showEditDrawer}
                     host={externalControllerHost}
                     port={externalControllerPort}
-                    onConfirm={(host, port) => console.log(host, port)}
+                    secret={externalControllerSecret}
+                    onConfirm={(host, port, secret) => console.log(host, port, secret)}
                     onCancel={() => this.setState({ showEditDrawer: false })}
-                >
-                    <div>666666</div>
-                </ExternalControllerDrawer>
+                />
             </div>
         )
     }
diff --git a/src/i18n/en_US.ts b/src/i18n/en_US.ts
index d670498..421a7ee 100644
--- a/src/i18n/en_US.ts
+++ b/src/i18n/en_US.ts
@@ -26,7 +26,14 @@ export default {
             direct: 'Direct'
         },
         versionString: 'Current ClashX is the latest version：{{version}}',
-        checkUpdate: 'Check Update'
+        checkUpdate: 'Check Update',
+        externalControllerSetting: {
+            title: 'External Controller',
+            note: 'Please note that modifying this configuration will only configure Dashboard. Will not modify your Clash configuration file. Please make sure that the external controller address matches the address in the Clash configuration file, otherwise, Dashboard will not be able to connect to Clash.',
+            host: 'Host',
+            port: 'Port',
+            secret: 'Secret'
+        }
     },
     Logs: {
         title: 'Logs'
diff --git a/src/i18n/zh_CN.ts b/src/i18n/zh_CN.ts
index d6d6069..af02d28 100644
--- a/src/i18n/zh_CN.ts
+++ b/src/i18n/zh_CN.ts
@@ -26,7 +26,14 @@ export default {
             direct: '直连'
         },
         versionString: '当前 ClashX 已是最新版本：{{version}}',
-        checkUpdate: '检查更新'
+        checkUpdate: '检查更新',
+        externalControllerSetting: {
+            title: '编辑外部控制设置',
+            note: '请注意，修改该配置项并不会修改你的 Clash 配置文件，请确认修改后的外部控制地址和 Clash 配置文件内的地址一致，否则会导致 Dashboard 无法连接。',
+            host: 'Host',
+            port: '端口',
+            secret: '密钥'
+        }
     },
     Logs: {
         title: '日志'