diff --git a/docs/assets/less/stacks-documentation.less b/docs/assets/less/stacks-documentation.less
index dec4011f89..293b7d81b8 100644
--- a/docs/assets/less/stacks-documentation.less
+++ b/docs/assets/less/stacks-documentation.less
@@ -231,6 +231,20 @@
     white-space: normal;
 }
 
+//  ============================================================================
+//  $  CODE COPY BUTTON
+//  ----------------------------------------------------------------------------
+.stacks-copy-btn {
+    .svg-icon,
+    .svg-icon * {
+        pointer-events: none;
+    }
+
+    .iconCheckmark {
+        color: var(--green-500);
+    }
+}
+
 
 //  ============================================================================
 //  $  LISTS
@@ -260,6 +274,7 @@
         border-radius: var(--br-md) var(--br-md) 0 0;
         border: 1px solid var(--bc-medium);
         max-height: 24rem;
+        padding-right: var(--su32);
 
         .dark-mode({
             border-color: var(--bc-lighter);
diff --git a/docs/plugins/copy-button.js b/docs/plugins/copy-button.js
index 8f5af2f088..56ee6abaf4 100644
--- a/docs/plugins/copy-button.js
+++ b/docs/plugins/copy-button.js
@@ -6,7 +6,7 @@ module.exports = {
         var tooltipId = "tooltip-" + (name || Math.floor(Math.random() * 1000));
 
         var output = `<button
-          class="s-btn s-btn__muted s-btn__icon ps-absolute t8 r8"
+          class="stacks-copy-btn s-btn s-btn__muted s-btn__outlined s-btn__icon ps-absolute p4 bg-black-050 bc-black-100 t8 r8"
           data-action="clipboard#copy"
           data-s-tooltip-placement="top"
           data-controller="s-tooltip"