diff --git a/public/css/chat.css b/public/css/chat.css
index b2cbb3a..c8a4e1e 100644
--- a/public/css/chat.css
+++ b/public/css/chat.css
@@ -213,6 +213,29 @@ pre code {
     /* Align the text left */
 }
 
+.copy-button-code {
+    background-color: #444;
+    /* Button background color */
+    color: white;
+    /* Button text color */
+    border: none;
+    /* Remove border */
+    cursor: pointer;
+    /* Pointer cursor for interaction */
+    padding: 5px 10px;
+    /* Adjusted padding for smaller size */
+    margin-top: 5px;
+    /* Space at the top */
+    display: inline-block;
+    /* Keep the button in line */
+    font-size: 14px;
+    /* Slightly smaller font size for compactness */
+    width: 75px;
+    /* Prevent the button from stretching */
+    text-align: left;
+    /* Align the text left */
+}
+
 .copy-button:hover {
     background-color: #555;
     /* Darker shade on hover */
diff --git a/public/js/chat.js b/public/js/chat.js
index bff3a5a..b6d590f 100644
--- a/public/js/chat.js
+++ b/public/js/chat.js
@@ -80,7 +80,7 @@ function displayMessage(content, sender) {
 // Adds a copy button to a code block
 function addCopyButton(block) {
     const button = document.createElement('button');
-    button.classList.add('copy-button');
+    button.classList.add('copy-button-code');
     button.textContent = 'Copy';
     button.addEventListener('click', () => copyToClipboard(block));
     block.parentNode.appendChild(button);