diff --git a/assets/js/app.ts b/assets/js/app.ts
index bec8621e..dba421e5 100644
--- a/assets/js/app.ts
+++ b/assets/js/app.ts
@@ -329,17 +329,37 @@ const CopyToClipboard = {
         text = targetEl.innerText || targetEl.textContent || ""
       }
 
+      // Trim any whitespace from the text
+      text = text.trim()
+
       if (text) {
         navigator.clipboard.writeText(text).then(() => {
           console.log('Copied to clipboard successfully')
-          // Optional: Show visual feedback
-          const originalText = this.el.innerHTML
-          this.el.innerHTML = '<svg class="h-3 w-3 inline" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg> Copied!'
+          // Show visual feedback
+          const originalHTML = this.el.innerHTML
+          const originalClasses = this.el.className
+
+          // Update button to show success state
+          this.el.innerHTML = '<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg><span>Copied!</span>'
+          this.el.className = originalClasses.replace('bg-blue-600', 'bg-green-600').replace('hover:bg-blue-700', 'hover:bg-green-700').replace('bg-blue-500', 'bg-green-500').replace('hover:bg-blue-600', 'hover:bg-green-600')
+
           setTimeout(() => {
-            this.el.innerHTML = originalText
+            this.el.innerHTML = originalHTML
+            this.el.className = originalClasses
           }, 2000)
         }).catch(err => {
           console.error('Failed to copy:', err)
+          // Show error state
+          const originalHTML = this.el.innerHTML
+          const originalClasses = this.el.className
+
+          this.el.innerHTML = '<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg><span>Failed</span>'
+          this.el.className = originalClasses.replace('bg-blue-600', 'bg-red-600').replace('hover:bg-blue-700', 'hover:bg-red-700').replace('bg-blue-500', 'bg-red-500').replace('hover:bg-blue-600', 'hover:bg-red-600')
+
+          setTimeout(() => {
+            this.el.innerHTML = originalHTML
+            this.el.className = originalClasses
+          }, 2000)
         })
       } else {
         console.error('No text found to copy')
diff --git a/lib/towerops_web/live/agent_live/index.html.heex b/lib/towerops_web/live/agent_live/index.html.heex
index 57b9ce3b..a548e5e0 100644
--- a/lib/towerops_web/live/agent_live/index.html.heex
+++ b/lib/towerops_web/live/agent_live/index.html.heex
@@ -368,20 +368,25 @@
                   <input
                     type="text"
                     readonly
-                    value={@new_token.token}
-                    class="w-full font-mono text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded px-3 py-2 pr-24 text-gray-900 dark:text-white"
+                    value={String.trim(@new_token.token)}
+                    class="w-full font-mono text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded px-3 py-2 pr-28 text-gray-900 dark:text-white select-all"
                     id="agent-token-input"
+                    onclick="this.select()"
                   />
                   <button
                     type="button"
                     phx-hook="CopyToClipboard"
                     data-target="#agent-token-input"
                     id={"copy-token-#{@new_token.agent_token.id}"}
-                    class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1 text-xs font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
+                    class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded shadow-sm transition-colors flex items-center gap-1.5"
                   >
-                    <.icon name="hero-clipboard" class="h-4 w-4" />
+                    <.icon name="hero-clipboard" class="h-3.5 w-3.5" />
+                    <span>Copy</span>
                   </button>
                 </div>
+                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
+                  Click the token to select all, or use the Copy button
+                </p>
               </div>
 
               <div class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
diff --git a/lib/towerops_web/live/device_live/index.html.heex b/lib/towerops_web/live/device_live/index.html.heex
index d303a246..ab4d1338 100644
--- a/lib/towerops_web/live/device_live/index.html.heex
+++ b/lib/towerops_web/live/device_live/index.html.heex
@@ -239,7 +239,7 @@
                       <%= for {device, device_index} <- Enum.with_index(devices) do %>
                         <tr
                           class={[
-                            "border-t device-row",
+                            "border-t device-row hover:bg-gray-50 dark:hover:bg-gray-800/50",
                             if(device_index == 0,
                               do: "border-gray-300 dark:border-white/15",
                               else: "border-gray-200 dark:border-white/10"
@@ -262,7 +262,7 @@
                           <td
                             phx-click={JS.navigate(~p"/devices/#{device.id}")}
                             class={[
-                              "py-4 pr-3 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50",
+                              "py-4 pr-3 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white cursor-pointer",
                               @reorder_mode && "pl-2",
                               !@reorder_mode && "pl-4 sm:pl-3"
                             ]}
@@ -271,13 +271,13 @@
                           </td>
                           <td
                             phx-click={JS.navigate(~p"/devices/#{device.id}")}
-                            class="px-3 py-4 text-sm whitespace-nowrap text-gray-500 dark:text-gray-400 font-mono cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50"
+                            class="px-3 py-4 text-sm whitespace-nowrap text-gray-500 dark:text-gray-400 font-mono cursor-pointer"
                           >
                             {device.ip_address}
                           </td>
                           <td
                             phx-click={JS.navigate(~p"/devices/#{device.id}")}
-                            class="px-3 py-4 text-sm whitespace-nowrap cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50"
+                            class="px-3 py-4 text-sm whitespace-nowrap cursor-pointer"
                           >
                             <span class={[
                               "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
@@ -293,7 +293,7 @@
                           </td>
                           <td
                             phx-click={JS.navigate(~p"/devices/#{device.id}")}
-                            class="px-3 py-4 text-sm whitespace-nowrap text-gray-500 dark:text-gray-400 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50"
+                            class="px-3 py-4 text-sm whitespace-nowrap text-gray-500 dark:text-gray-400 cursor-pointer"
                           >
                             <.timestamp datetime={device.last_checked_at} timezone={@timezone} />
                           </td>