diff --git a/client/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.tsx b/client/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.tsx
index 126644b4..71dcbdda 100644
--- a/client/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.tsx
+++ b/client/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/Profile.tsx
@@ -1,7 +1,6 @@
 import { useOpenAppInfo } from '../context';
 import React from 'react';
-import { FullModalField, Divider } from '@capital/component';
-import { SecretValue } from '../../components/SecretValue';
+import { FullModalField, Divider, SensitiveText } from '@capital/component';
 import './Profile.less';
 
 /**
@@ -18,7 +17,7 @@ const Profile: React.FC = React.memo(() => {
         <FullModalField title="App ID" content={appId} />
         <FullModalField
           title="App Secret"
-          content={<SecretValue>{appSecret}</SecretValue>}
+          content={<SensitiveText text={appSecret} />}
         />
       </div>
 
diff --git a/client/web/plugins/com.msgbyte.openapi/src/components/SecretValue.less b/client/web/plugins/com.msgbyte.openapi/src/components/SecretValue.less
deleted file mode 100644
index 72dafb90..00000000
--- a/client/web/plugins/com.msgbyte.openapi/src/components/SecretValue.less
+++ /dev/null
@@ -1,9 +0,0 @@
-.plugin-openapi-secret-value {
-  display: flex;
-  align-items: center;
-
-  .iconify {
-    cursor: pointer;
-    margin-left: 4px;
-  }
-}
diff --git a/client/web/plugins/com.msgbyte.openapi/src/components/SecretValue.tsx b/client/web/plugins/com.msgbyte.openapi/src/components/SecretValue.tsx
deleted file mode 100644
index 8ddf37eb..00000000
--- a/client/web/plugins/com.msgbyte.openapi/src/components/SecretValue.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Icon } from '@capital/component';
-import React, { useState } from 'react';
-import './SecretValue.less';
-
-export const SecretValue: React.FC<React.PropsWithChildren> = React.memo(
-  (props) => {
-    const [show, setShow] = useState(false);
-    return (
-      <span className="plugin-openapi-secret-value">
-        {show ? (
-          <>
-            <span>{props.children}</span>
-            <Icon icon="mdi:eye-off-outline" onClick={() => setShow(false)} />
-          </>
-        ) : (
-          <>
-            <span>********</span>
-            <Icon icon="mdi:eye-outline" onClick={() => setShow(true)} />
-          </>
-        )}
-      </span>
-    );
-  }
-);
-SecretValue.displayName = 'SecretValue';