diff --git a/ui/core/app/components/copyable/index.js b/ui/core/app/components/copyable/index.js
index 01dcad838..cefc032fa 100644
--- a/ui/core/app/components/copyable/index.js
+++ b/ui/core/app/components/copyable/index.js
@@ -16,7 +16,6 @@ export default class CopyableComponent extends Component {
   icon = 'copy-action';
 
   @tracked text;
-  @tracked clipboard;
 
   /**
    * A Ember Concurrency-based task that updates copy icon to a success state
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 9e72b055f..dfe9fe1f9 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -82,5 +82,6 @@
 }
 
 .copyable .copyable-button {
-  padding: 0rem;
+  padding: 0 sizing.rems(xxs);
+  margin: 0;
 }
diff --git a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/-header.hbs b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/-header.hbs
index ba94f66be..0748ed7b8 100644
--- a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/-header.hbs
@@ -1,3 +1,5 @@
 <h2>{{t "resources.auth-method.title"}}</h2>
 <p>{{t "resources.auth-method.description"}}</p>
-<p><code>{{@model.id}}</code></p>
+<Copyable @text={{@model.id}}>
+  <code>{{@model.id}}</code>
+</Copyable>
diff --git a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/-header.hbs b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/-header.hbs
index 938c5fedb..c7a1ec474 100644
--- a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/-header.hbs
@@ -1,2 +1,4 @@
 <h2>{{t "resources.account.title"}}</h2>
-<p><code>{{@model.id}}</code></p>
\ No newline at end of file
+<Copyable @text={{@model.id}}>
+  <code>{{@model.id}}</code>
+</Copyable>
diff --git a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password/-header.hbs b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password/-header.hbs
index 5c5ee4dd4..1805683a2 100644
--- a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password/-header.hbs
@@ -1,3 +1,5 @@
 <h2>{{t "resources.account.title"}}</h2>
 <p>{{t 'resources.account.messages.set-password.description'}}</p>
-<p><code>{{@model.id}}</code></p>
+<Copyable @text={{@model.id}}>
+  <code>{{@model.id}}</code>
+</Copyable>
diff --git a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs
index 81b93da9c..d399eb1d8 100644
--- a/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs
+++ b/ui/core/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs
@@ -24,7 +24,9 @@
             {{account.username}}
           </row.cell>
           <row.cell>
-            <code>{{account.id}}</code>
+            <Copyable @text={{account.id}}>
+              <code>{{account.id}}</code>
+            </Copyable>
           </row.cell>
         </body.row>
       {{/each}}
diff --git a/ui/core/app/templates/scopes/scope/auth-methods/index.hbs b/ui/core/app/templates/scopes/scope/auth-methods/index.hbs
index e1c23f96f..26027d51b 100644
--- a/ui/core/app/templates/scopes/scope/auth-methods/index.hbs
+++ b/ui/core/app/templates/scopes/scope/auth-methods/index.hbs
@@ -46,7 +46,9 @@
                 </Rose::Badge>
               </row.cell>
               <row.cell>
-                <code>{{authMethod.id}}</code>
+                <Copyable @text={{authMethod.id}}>
+                  <code>{{authMethod.id}}</code>
+                </Copyable>
               </row.cell>
             </body.row>
           {{/each}}
diff --git a/ui/core/app/templates/scopes/scope/groups/group/-header.hbs b/ui/core/app/templates/scopes/scope/groups/group/-header.hbs
index ac1e772a0..a876cafac 100644
--- a/ui/core/app/templates/scopes/scope/groups/group/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/groups/group/-header.hbs
@@ -1,3 +1,5 @@
 <h2>{{t "resources.group.title"}}</h2>
 <p>{{t "resources.group.description"}}</p>
-<p><code>{{@model.id}}</code></p>
+<Copyable @text={{@model.id}}>
+  <code>{{@model.id}}</code>
+</Copyable>
diff --git a/ui/core/app/templates/scopes/scope/groups/group/members.hbs b/ui/core/app/templates/scopes/scope/groups/group/members.hbs
index 0b6dee825..ce5eee601 100644
--- a/ui/core/app/templates/scopes/scope/groups/group/members.hbs
+++ b/ui/core/app/templates/scopes/scope/groups/group/members.hbs
@@ -17,7 +17,9 @@
             {{member.displayName}}
           </row.headerCell>
           <row.cell>
-            <code>{{member.id}}</code>
+            <Copyable @text={{member.id}}>
+              <code>{{member.id}}</code>
+            </Copyable>
           </row.cell>
             <row.cell>
             <Rose::Dropdown
diff --git a/ui/core/app/templates/scopes/scope/groups/index.hbs b/ui/core/app/templates/scopes/scope/groups/index.hbs
index 499e71589..9f9ad3fd2 100644
--- a/ui/core/app/templates/scopes/scope/groups/index.hbs
+++ b/ui/core/app/templates/scopes/scope/groups/index.hbs
@@ -39,7 +39,9 @@
                 <p>{{group.description}}</p>
               </row.headerCell>
               <row.cell>
-                <code>{{group.id}}</code>
+                <Copyable @text={{group.id}}>
+                  <code>{{group.id}}</code>
+                </Copyable>
               </row.cell>
             </body.row>
           {{/each}}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-header.hbs
index 77e14a09b..8857383a2 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-header.hbs
@@ -1,3 +1,5 @@
 <h2>{{t "resources.host-catalog.title"}}</h2>
 <p>{{t "resources.host-catalog.description"}}</p>
-<p><code>{{@model.id}}</code></p>
+<Copyable @text={{@model.id}}>
+  <code>{{@model.id}}</code>
+</Copyable>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-header.hbs
index 752eae74c..26afcea96 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-header.hbs
@@ -1,3 +1,5 @@
 <h2>{{t "resources.host-set.title"}}</h2>
 <p>{{t "resources.host-set.description"}}</p>
-<p><code>{{@model.id}}</code></p>
+<Copyable @text={{@model.id}}>
+  <code>{{@model.id}}</code>
+</Copyable>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs
index abc6852da..7b65efa26 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs
@@ -25,7 +25,9 @@
             <Rose::Badge>{{host.type}}</Rose::Badge>
           </row.cell>
           <row.cell>
-            <code>{{host.id}}</code>
+            <Copyable @text={{host.id}}>
+              <code>{{host.id}}</code>
+            </Copyable>
           </row.cell>
           <row.cell>
             <Rose::Dropdown
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs
index 0b0b90663..f2dff570d 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs
@@ -26,7 +26,9 @@
             </Rose::Badge>
           </row.cell>
           <row.cell>
-            <code>{{hostSet.id}}</code>
+            <Copyable @text={{hostSet.id}}>
+              <code>{{hostSet.id}}</code>
+            </Copyable>
           </row.cell>
         </body.row>
       {{/each}}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header.hbs
index e8a7b9c8d..f0d679039 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header.hbs
@@ -1,3 +1,5 @@
 <h2>{{t "resources.host.title"}}</h2>
 <p>{{t "resources.host.description"}}</p>
-<p><code>{{@model.id}}</code></p>
+<Copyable @text={{@model.id}}>
+  <code>{{@model.id}}</code>
+</Copyable>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs
index 3f1c23860..87ae8db1a 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs
@@ -27,7 +27,9 @@
             </Rose::Badge>
           </row.cell>
           <row.cell>
-            <code>{{host.id}}</code>
+            <Copyable @text={{host.id}}>
+              <code>{{host.id}}</code>
+            </Copyable>
           </row.cell>
           <row.cell>
             <code>{{host.attributes.address}}</code>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/index.hbs
index 578a59c4a..2f758b992 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/index.hbs
@@ -47,7 +47,9 @@
                 </Rose::Badge>
               </row.cell>
               <row.cell>
-                <code>{{hostCatalog.id}}</code>
+                <Copyable @text={{hostCatalog.id}}>
+                  <code>{{hostCatalog.id}}</code>
+                </Copyable>
               </row.cell>
             </body.row>
           {{/each}}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/index.hbs
index 79c5e6e41..58395a683 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/index.hbs
@@ -7,7 +7,9 @@
   <page.header>
     <h2>{{t "resources.project.title"}}</h2>
     <p>{{t "resources.project.description"}}</p>
-    <p><code>{{@model.id}}</code></p>
+    <Copyable @text={{@model.id}}>
+      <code>{{@model.id}}</code>
+    </Copyable>
   </page.header>
 
   <page.navigation>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/sessions/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/sessions/index.hbs
index a34ceb077..b4e5d3e4f 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/sessions/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/sessions/index.hbs
@@ -28,7 +28,9 @@
           {{#each @model as |sessionAggregate|}}
             <body.row as |row|>
               <row.headerCell>
-                <code>{{sessionAggregate.session.id}}</code>
+                <Copyable @text={{sessionAggregate.session.id}}>
+                  <code>{{sessionAggregate.session.id}}</code>
+                </Copyable>
               </row.headerCell>
               <row.cell>{{sessionAggregate.user.displayName}}</row.cell>
               <row.cell>{{sessionAggregate.target.displayName}}</row.cell>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
index d6e45da25..ff84ac48e 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
@@ -51,7 +51,9 @@
                 {{/if}}
               </row.cell>
               <row.cell>
-                <code>{{target.id}}</code>
+                <Copyable @text={{target.id}}>
+                  <code>{{target.id}}</code>
+                </Copyable>
               </row.cell>
             </body.row>
           {{/each}}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-header.hbs
index 280737623..b96093e47 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/target/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-header.hbs
@@ -1,3 +1,5 @@
 <h2>{{t "resources.target.title"}}</h2>
 <p>{{t "resources.target.description"}}</p>
-<p><code>{{@model.id}}</code></p>
+<Copyable @text={{@model.id}}>
+  <code>{{@model.id}}</code>
+</Copyable>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs
index 827793ccd..e03aa2610 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/host-sets.hbs
@@ -22,7 +22,9 @@
             <Rose::Badge>{{t (concat 'resources.host-set.types.' hostSet.model.type)}}</Rose::Badge>
           </row.cell>
           <row.cell>
-            <code>{{hostSet.model.id}}</code>
+            <Copyable @text={{hostSet.model.id}}>
+              <code>{{hostSet.model.id}}</code>
+            </Copyable>
           </row.cell>
           <row.cell>
             <Rose::Dropdown
diff --git a/ui/core/app/templates/scopes/scope/roles/index.hbs b/ui/core/app/templates/scopes/scope/roles/index.hbs
index 588970e37..417860216 100644
--- a/ui/core/app/templates/scopes/scope/roles/index.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/index.hbs
@@ -41,7 +41,9 @@
                 <p>{{role.description}}</p>
               </row.headerCell>
               <row.cell>
-                <code>{{role.id}}</code>
+                <Copyable @text={{role.id}}>
+                  <code>{{role.id}}</code>
+                </Copyable>
               </row.cell>
             </body.row>
           {{/each}}
diff --git a/ui/core/app/templates/scopes/scope/roles/role/-header.hbs b/ui/core/app/templates/scopes/scope/roles/role/-header.hbs
index ccad156d5..926771735 100644
--- a/ui/core/app/templates/scopes/scope/roles/role/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role/-header.hbs
@@ -1,3 +1,5 @@
 <h2>{{t "resources.role.title"}}</h2>
 <p>{{t "resources.role.description"}}</p>
-<p><code>{{@model.id}}</code></p>
+<Copyable @text={{@model.id}}>
+  <code>{{@model.id}}</code>
+</Copyable>
diff --git a/ui/core/app/templates/scopes/scope/roles/role/grants/-header.hbs b/ui/core/app/templates/scopes/scope/roles/role/grants/-header.hbs
index aa96ca797..ccea2b2d0 100644
--- a/ui/core/app/templates/scopes/scope/roles/role/grants/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role/grants/-header.hbs
@@ -1,3 +1,5 @@
 <h2>{{t "resources.role.title"}}</h2>
 <p>{{t "resources.role.grant.description"}}</p>
-<p><code>{{@model.id}}</code></p>
+<Copyable @text={{@model.id}}>
+  <code>{{@model.id}}</code>
+</Copyable>
\ No newline at end of file
diff --git a/ui/core/app/templates/scopes/scope/roles/role/principals.hbs b/ui/core/app/templates/scopes/scope/roles/role/principals.hbs
index 73ac90715..58041d4a0 100644
--- a/ui/core/app/templates/scopes/scope/roles/role/principals.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role/principals.hbs
@@ -21,7 +21,9 @@
             {{t (concat 'resources.role.principal.types.' principal.type)}}
           </row.cell>
           <row.cell>
-            <code>{{principal.model.id}}</code>
+            <Copyable @text={{principal.model.id}}>
+              <code>{{principal.model.id}}</code>
+            </Copyable>
           </row.cell>
             <row.cell>
             <Rose::Dropdown
diff --git a/ui/core/app/templates/scopes/scope/roles/role/principals/-header.hbs b/ui/core/app/templates/scopes/scope/roles/role/principals/-header.hbs
index 9e369d94e..057a23f76 100644
--- a/ui/core/app/templates/scopes/scope/roles/role/principals/-header.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/role/principals/-header.hbs
@@ -1,3 +1,5 @@
 <h2>{{t "resources.role.title"}}</h2>
 <p>{{t "resources.role.principal.description"}}</p>
-<p><code>{{@model.role.id}}</code></p>
+<Copyable @text={{@model.role.id}}>
+  <code>{{@model.role.id}}</code>
+</Copyable>
diff --git a/ui/core/app/templates/scopes/scope/users/index.hbs b/ui/core/app/templates/scopes/scope/users/index.hbs
index 26458d273..50bcd7b74 100644
--- a/ui/core/app/templates/scopes/scope/users/index.hbs
+++ b/ui/core/app/templates/scopes/scope/users/index.hbs
@@ -41,7 +41,9 @@
                 <p>{{user.description}}</p>
               </row.headerCell>
               <row.cell>
-                <code>{{user.id}}</code>
+                <Copyable @text={{user.id}}>
+                  <code>{{user.id}}</code>
+                </Copyable>
               </row.cell>
             </body.row>
           {{/each}}
diff --git a/ui/core/app/templates/scopes/scope/users/user/index.hbs b/ui/core/app/templates/scopes/scope/users/user/index.hbs
index 35db006e9..7f9218f1b 100644
--- a/ui/core/app/templates/scopes/scope/users/user/index.hbs
+++ b/ui/core/app/templates/scopes/scope/users/user/index.hbs
@@ -7,7 +7,9 @@
   <page.header>
     <h2>{{t "resources.user.title"}}</h2>
     <p>{{t "resources.user.description"}}</p>
-    <p><code>{{@model.id}}</code></p>
+    <Copyable @text={{@model.id}}>
+      <code>{{@model.id}}</code>
+    </Copyable>
   </page.header>
 
   <page.actions>