diff --git a/packages/console/src/components/CopyToClipboard/index.module.scss b/packages/console/src/components/CopyToClipboard/index.module.scss
index ff9b6b463..39de21252 100644
--- a/packages/console/src/components/CopyToClipboard/index.module.scss
+++ b/packages/console/src/components/CopyToClipboard/index.module.scss
@@ -8,13 +8,14 @@
   font-family: 'Roboto Mono', monospace;
   cursor: default;
 
-  &.contained,
-  &.border {
-    padding: _.unit(2) _.unit(3);
+  &.contained {
+    padding: _.unit(1) _.unit(2);
     background: var(--color-layer-2);
   }
 
   &.border {
+    padding: _.unit(2) _.unit(3);
+    background: var(--color-layer-2);
     border: 1px solid var(--color-border);
   }
 
diff --git a/packages/console/src/pages/ApiResourceDetails/index.module.scss b/packages/console/src/pages/ApiResourceDetails/index.module.scss
index c3b627d56..cef3c814d 100644
--- a/packages/console/src/pages/ApiResourceDetails/index.module.scss
+++ b/packages/console/src/pages/ApiResourceDetails/index.module.scss
@@ -29,10 +29,6 @@
         font: var(--font-title-large);
         color: var(--color-text);
       }
-
-      .copy {
-        padding: _.unit(1) _.unit(2);
-      }
     }
   }
 
diff --git a/packages/console/src/pages/ApiResourceDetails/index.tsx b/packages/console/src/pages/ApiResourceDetails/index.tsx
index 14a298cd3..69906d556 100644
--- a/packages/console/src/pages/ApiResourceDetails/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/index.tsx
@@ -92,7 +92,7 @@ const ApiResourceDetails = () => {
               <img className={styles.icon} src={apiResourceIcon} />
               <div className={styles.meta}>
                 <div className={styles.name}>{data.name}</div>
-                <CopyToClipboard value={data.indicator} className={styles.copy} />
+                <CopyToClipboard value={data.indicator} />
               </div>
             </div>
             <div className={styles.operations}>
diff --git a/packages/console/src/pages/ApplicationDetails/index.module.scss b/packages/console/src/pages/ApplicationDetails/index.module.scss
index 961b25cfb..4f873ded4 100644
--- a/packages/console/src/pages/ApplicationDetails/index.module.scss
+++ b/packages/console/src/pages/ApplicationDetails/index.module.scss
@@ -84,9 +84,5 @@
       @include _.vertical-bar;
       height: 12px;
     }
-
-    .copy {
-      padding: _.unit(1) _.unit(2);
-    }
   }
 }
diff --git a/packages/console/src/pages/ApplicationDetails/index.tsx b/packages/console/src/pages/ApplicationDetails/index.tsx
index 237882f57..8baeddddb 100644
--- a/packages/console/src/pages/ApplicationDetails/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/index.tsx
@@ -117,7 +117,7 @@ const ApplicationDetails = () => {
                 <div className={styles.type}>{t(`${applicationTypeI18nKey[data.type]}.title`)}</div>
                 <div className={styles.verticalBar} />
                 <div className={styles.text}>App ID</div>
-                <CopyToClipboard value={data.id} className={styles.copy} />
+                <CopyToClipboard value={data.id} />
               </div>
             </div>
             <div className={styles.operations}>
diff --git a/packages/console/src/pages/ConnectorDetails/index.module.scss b/packages/console/src/pages/ConnectorDetails/index.module.scss
index c5a5c2f16..e63ad6832 100644
--- a/packages/console/src/pages/ConnectorDetails/index.module.scss
+++ b/packages/console/src/pages/ConnectorDetails/index.module.scss
@@ -55,7 +55,7 @@
       color: var(--color-text);
     }
 
-    .id {
+    .text {
       font: var(--font-subhead-2);
       color: var(--color-caption);
     }
diff --git a/packages/console/src/pages/ConnectorDetails/index.tsx b/packages/console/src/pages/ConnectorDetails/index.tsx
index 0cd0c2040..c15e39937 100644
--- a/packages/console/src/pages/ConnectorDetails/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/index.tsx
@@ -10,6 +10,7 @@ import ActionMenu, { ActionMenuItem } from '@/components/ActionMenu';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import CodeEditor from '@/components/CodeEditor';
+import CopyToClipboard from '@/components/CopyToClipboard';
 import DetailsSkeleton from '@/components/DetailsSkeleton';
 import Drawer from '@/components/Drawer';
 import LinkButton from '@/components/LinkButton';
@@ -144,7 +145,8 @@ const ConnectorDetails = () => {
                 </Status>
               )}
               <div className={styles.verticalBar} />
-              <div className={styles.id}>{data.id}</div>
+              <div className={styles.text}>ID</div>
+              <CopyToClipboard value={data.id} />
             </div>
           </div>
           <div className={styles.operations}>
diff --git a/packages/console/src/pages/UserDetails/index.module.scss b/packages/console/src/pages/UserDetails/index.module.scss
index 7739e3462..47946c894 100644
--- a/packages/console/src/pages/UserDetails/index.module.scss
+++ b/packages/console/src/pages/UserDetails/index.module.scss
@@ -53,10 +53,6 @@
       @include _.vertical-bar;
       height: 12px;
     }
-
-    .copy {
-      padding: _.unit(1) _.unit(2);
-    }
   }
 }
 
diff --git a/packages/console/src/pages/UserDetails/index.tsx b/packages/console/src/pages/UserDetails/index.tsx
index 83714d3db..543fe3865 100644
--- a/packages/console/src/pages/UserDetails/index.tsx
+++ b/packages/console/src/pages/UserDetails/index.tsx
@@ -128,7 +128,7 @@ const UserDetails = () => {
                   </>
                 )}
                 <div className={styles.text}>User ID</div>
-                <CopyToClipboard value={data.id} className={styles.copy} />
+                <CopyToClipboard value={data.id} />
               </div>
             </div>
             <div>