diff --git a/src/containers/Settings/index.tsx b/src/containers/Settings/index.tsx
index b02df03..bf6ff6e 100644
--- a/src/containers/Settings/index.tsx
+++ b/src/containers/Settings/index.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react'
+import classnames from 'classnames'
 import capitalize from 'lodash/capitalize'
 import { Header, Card, Row, Col, Switch, ButtonSelect, ButtonSelectOptions, Input, Icon } from '@components'
 import { useI18n, useClashXData, useAPIInfo, useGeneral, useIdentity } from '@stores'
@@ -179,7 +180,9 @@ export default function Settings () {
                             <span className="label">{t('labels.externalController')}</span>
                         </Col>
                         <Col className="external-controller" span={10}>
-                            <span className="modify-btn" onClick={() => setIdentity(false)}>
+                            <span
+                                className={classnames({ 'modify-btn': !clashXData.isClashX })}
+                                onClick={() => !clashXData.isClashX && setIdentity(false)}>
                                 {`${externalControllerHost}:${externalControllerPort}`}
                             </span>
                         </Col>
diff --git a/src/containers/Sidebar/style.scss b/src/containers/Sidebar/style.scss
index d540fd4..04913e0 100644
--- a/src/containers/Sidebar/style.scss
+++ b/src/containers/Sidebar/style.scss
@@ -9,7 +9,7 @@
     flex-direction: column;
     align-items: center;
     flex-shrink: 0;
-    width: 140px;
+    width: 160px;
     user-select: none;
 }