diff --git a/packages/console/src/components/CopyToClipboard/index.module.scss b/packages/console/src/components/CopyToClipboard/index.module.scss
index 8b639bdce..ce9da939b 100644
--- a/packages/console/src/components/CopyToClipboard/index.module.scss
+++ b/packages/console/src/components/CopyToClipboard/index.module.scss
@@ -25,6 +25,12 @@
     justify-content: space-between;
     cursor: text;
 
+    .content {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     .copyIcon {
       margin-left: _.unit(3);
     }
diff --git a/packages/console/src/components/CopyToClipboard/index.tsx b/packages/console/src/components/CopyToClipboard/index.tsx
index 31593d548..9fb8b7d89 100644
--- a/packages/console/src/components/CopyToClipboard/index.tsx
+++ b/packages/console/src/components/CopyToClipboard/index.tsx
@@ -1,8 +1,10 @@
 import classNames from 'classnames';
-import { MouseEventHandler, useEffect, useRef, useState } from 'react';
+import { MouseEventHandler, useEffect, useMemo, useRef, useState } from 'react';
 import { TFuncKey, useTranslation } from 'react-i18next';
 
 import Copy from '@/icons/Copy';
+import Eye from '@/icons/Eye';
+import EyeClosed from '@/icons/EyeClosed';
 
 import IconButton from '../IconButton';
 import Tooltip from '../Tooltip';
@@ -12,14 +14,29 @@ type Props = {
   value: string;
   className?: string;
   variant?: 'text' | 'contained' | 'border' | 'icon';
+  hasVisibilityToggle?: boolean;
 };
 
 type CopyState = TFuncKey<'translation', 'admin_console.general'>;
 
-const CopyToClipboard = ({ value, className, variant = 'contained' }: Props) => {
+const CopyToClipboard = ({
+  value,
+  className,
+  hasVisibilityToggle,
+  variant = 'contained',
+}: Props) => {
   const copyIconReference = useRef<HTMLDivElement>(null);
   const [copyState, setCopyState] = useState<CopyState>('copy');
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.general' });
+  const [showHiddenContent, setShowHiddenContent] = useState(false);
+
+  const displayValue = useMemo(() => {
+    if (!hasVisibilityToggle || showHiddenContent) {
+      return value;
+    }
+
+    return '*'.repeat(value.length);
+  }, [hasVisibilityToggle, showHiddenContent, value]);
 
   useEffect(() => {
     copyIconReference.current?.addEventListener('mouseleave', () => {
@@ -33,6 +50,10 @@ const CopyToClipboard = ({ value, className, variant = 'contained' }: Props) =>
     setCopyState('copied');
   };
 
+  const toggleHiddenContent = () => {
+    setShowHiddenContent((previous) => !previous);
+  };
+
   return (
     <div
       className={classNames(styles.container, styles[variant], className)}
@@ -41,7 +62,14 @@ const CopyToClipboard = ({ value, className, variant = 'contained' }: Props) =>
       }}
     >
       <div className={styles.row}>
-        {variant === 'icon' ? null : value}
+        {variant !== 'icon' && <div className={styles.content}>{displayValue}</div>}
+        {hasVisibilityToggle && (
+          <div className={styles.eye}>
+            <IconButton onClick={toggleHiddenContent}>
+              {showHiddenContent ? <EyeClosed /> : <Eye />}
+            </IconButton>
+          </div>
+        )}
         <div ref={copyIconReference} className={styles.copyIcon}>
           <IconButton onClick={copy}>
             <Copy />
diff --git a/packages/console/src/icons/EyeClosed.tsx b/packages/console/src/icons/EyeClosed.tsx
new file mode 100644
index 000000000..27560b91c
--- /dev/null
+++ b/packages/console/src/icons/EyeClosed.tsx
@@ -0,0 +1,21 @@
+import { SVGProps } from 'react';
+
+const EyeClosed = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3.66988 2.79338C3.27935 3.18391 3.27935 3.81707 3.66988 4.2076L5.30804 5.84576C3.10993 7.40492 1.66699 9.55153 1.66699 10.0003C1.66699 10.722 5.39795 15.8337 10.0003 15.8337C11.468 15.8337 12.847 15.3139 14.0447 14.5824L16.3978 16.9355C16.7883 17.326 17.4215 17.326 17.812 16.9355C18.2025 16.545 18.2025 15.9118 17.812 15.5213L5.08409 2.79338C4.69356 2.40286 4.0604 2.40286 3.66988 2.79338ZM12.0732 12.6109L7.38973 7.92745C6.9373 8.4965 6.66699 9.21685 6.66699 10.0003C6.66699 11.8413 8.15938 13.3337 10.0003 13.3337C10.7838 13.3337 11.5042 13.0634 12.0732 12.6109ZM18.3337 10.0003C18.3337 10.2663 17.8268 11.1287 16.9563 12.1117L9.07884 4.23427C9.38142 4.1904 9.68888 4.16699 10.0003 4.16699C14.6027 4.16699 18.3337 9.27866 18.3337 10.0003Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default EyeClosed;
diff --git a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
index 5a913ea5f..1e6b34923 100644
--- a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
+++ b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
@@ -64,6 +64,16 @@ const Settings = ({ applicationType, oidcConfig, defaultData, isDeleted }: Props
           placeholder={t('application_details.description_placeholder')}
         />
       </FormField>
+      {applicationType === ApplicationType.Traditional && (
+        <FormField title="application_details.application_secret" className={styles.textField}>
+          <CopyToClipboard
+            hasVisibilityToggle
+            className={styles.textField}
+            value={defaultData.secret}
+            variant="border"
+          />
+        </FormField>
+      )}
       <FormField
         title="application_details.authorization_endpoint"
         className={styles.textField}
diff --git a/packages/phrases/src/locales/en/translation/admin-console/application-details.ts b/packages/phrases/src/locales/en/translation/admin-console/application-details.ts
index 72cd6c35e..82a08d129 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/application-details.ts
@@ -9,6 +9,7 @@ const application_details = {
   authorization_endpoint: 'Authorization endpoint',
   authorization_endpoint_tip:
     "The endpoint to perform authentication and authorization. It's used for OpenID Connect Authentication.",
+  application_secret: 'App Secret',
   redirect_uri: 'Redirect URI',
   redirect_uris: 'Redirect URIs',
   redirect_uri_placeholder: 'https://your.website.com/app',
diff --git a/packages/phrases/src/locales/ko-kr/translation/admin-console/application-details.ts b/packages/phrases/src/locales/ko-kr/translation/admin-console/application-details.ts
index 85ab8cab2..f81a1b28d 100644
--- a/packages/phrases/src/locales/ko-kr/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/ko-kr/translation/admin-console/application-details.ts
@@ -9,6 +9,7 @@ const application_details = {
   authorization_endpoint: '인증 End-Point',
   authorization_endpoint_tip:
     '인증 및 권한 부여를 진행할 End-Point예요. OpenID Connect 인증에서 사용되던 값 이에요.',
+  application_secret: 'App Secret',
   redirect_uri: 'Redirect URI',
   redirect_uris: 'Redirect URIs',
   redirect_uri_placeholder: 'https://your.website.com/app',
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts
index 445812b39..6be1dd86c 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/application-details.ts
@@ -9,6 +9,7 @@ const application_details = {
   authorization_endpoint: 'Yetkilendirme bitiş noktası',
   authorization_endpoint_tip:
     'Kimlik doğrulama ve yetkilendirme gerçekleştirmek için bitiş noktası. OpenID Connect Authentication için kullanılır.',
+  application_secret: 'Uygulama Sırrı',
   redirect_uri: 'Yönlendirme URIı',
   redirect_uris: 'Yönlendirme URIları',
   redirect_uri_placeholder: 'https://your.website.com/app',
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts
index 7cab0914e..20505ea91 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/application-details.ts
@@ -8,6 +8,7 @@ const application_details = {
   description_placeholder: '请输入应用描述',
   authorization_endpoint: 'Authorization Endpoint',
   authorization_endpoint_tip: '进行鉴权与授权的端点 endpoint。用于 OpenID Connect 中的鉴权流程。',
+  application_secret: 'App Secret',
   redirect_uri: 'Redirect URI',
   redirect_uris: 'Redirect URIs',
   redirect_uri_placeholder: 'https://your.website.com/app',