diff --git a/elixir/apps/web/assets/js/hooks.js b/elixir/apps/web/assets/js/hooks.js
index da622d65d..e5121b4d8 100644
--- a/elixir/apps/web/assets/js/hooks.js
+++ b/elixir/apps/web/assets/js/hooks.js
@@ -64,41 +64,6 @@ Hooks.Refocus = {
   },
 };
 
-Hooks.Copy = {
-  mounted() {
-    this.el.addEventListener("click", (ev) => {
-      ev.preventDefault();
-
-      let inner_html = ev.currentTarget
-        .querySelector("[data-copy]")
-        .innerHTML.trim();
-      let doc = new DOMParser().parseFromString(inner_html, "text/html");
-      let text = doc.documentElement.textContent;
-
-      let content = ev.currentTarget.querySelector("[data-content]");
-      let icon_cl = ev.currentTarget.querySelector("[data-icon]").classList;
-
-      navigator.clipboard.writeText(text).then(() => {
-        icon_cl.add("hero-clipboard-document-check");
-        icon_cl.add("hover:text-accent-500");
-        icon_cl.remove("hero-clipboard-document");
-        if (content) {
-          content.innerHTML = "Copied";
-        }
-      });
-
-      setTimeout(() => {
-        icon_cl.remove("hero-clipboard-document-check");
-        icon_cl.remove("hover:text-accent-500");
-        icon_cl.add("hero-clipboard-document");
-        if (content) {
-          content.innerHTML = "Copy";
-        }
-      }, 2000);
-    });
-  },
-};
-
 /* The phx-disable-with attribute on submit buttons only applies to liveview forms.
  * However, we need to disable the submit button for regular forms as well to prevent
  * double submissions and cases where the submit handler is slow (e.g. constant-time auth).
diff --git a/elixir/apps/web/lib/web/components/core_components.ex b/elixir/apps/web/lib/web/components/core_components.ex
index 475f2f893..1b0a9f106 100644
--- a/elixir/apps/web/lib/web/components/core_components.ex
+++ b/elixir/apps/web/lib/web/components/core_components.ex
@@ -69,7 +69,7 @@ defmodule Web.CoreComponents do
 
   def code_block(assigns) do
     ~H"""
-    <div id={@id} phx-hook="Copy" class="relative">
+    <div id={@id} class="relative">
       <div id={"#{@id}-nested"} class={[~w[
         text-sm text-left text-neutral-50
         inline-flex items-center
@@ -77,23 +77,32 @@ defmodule Web.CoreComponents do
         bg-neutral-800
         overflow-x-auto
       ], @class]} {@rest}>
-        <code class="block w-full no-scrollbar whitespace-pre rounded-b" data-copy phx-no-format><%= render_slot(@inner_block) %></code>
+        <code
+          id={"#{@id}-code"}
+          class="block w-full no-scrollbar whitespace-pre rounded-b"
+          phx-no-format
+        ><%= render_slot(@inner_block) %></code>
       </div>
 
-      <span title="Click to copy" class={~w[
-            absolute top-1 right-1
-            items-center
-            cursor-pointer
-            rounded
-            p-1
-            text-xs
-            text-neutral-50
-            hover:bg-neutral-50
-            hover:text-neutral-900
-            hover:opacity-50
-          ]}>
+      <button
+        type="button"
+        data-copy-to-clipboard-target={"#{@id}-code"}
+        data-copy-to-clipboard-content-type="innerHTML"
+        data-copy-to-clipboard-html-entities="true"
+        title="Click to copy"
+        class={[
+          "absolute top-1 right-1",
+          "items-center",
+          "cursor-pointer",
+          "rounded",
+          "p-1",
+          "bg-neutral-50/25",
+          "text-xs text-neutral-50",
+          "hover:bg-neutral-50 hover:text-neutral-900 hover:opacity-50"
+        ]}
+      >
         <.icon name="hero-clipboard-document" data-icon class="h-4 w-4" />
-      </span>
+      </button>
     </div>
     """
   end
@@ -114,11 +123,18 @@ defmodule Web.CoreComponents do
 
   def copy(assigns) do
     ~H"""
-    <div id={@id} phx-hook="Copy" class={@class} {@rest}>
-      <code data-copy phx-no-format><%= render_slot(@inner_block) %></code>
-      <span class={~w[text-neutral-400 cursor-pointer rounded]}>
+    <div id={@id} class={@class} {@rest}>
+      <code id={"#{@id}-code"} phx-no-format><%= render_slot(@inner_block) %></code>
+      <button
+        type="button"
+        class={~w[text-neutral-400 cursor-pointer rounded]}
+        data-copy-to-clipboard-target={"#{@id}-code"}
+        data-copy-to-clipboard-content-type="innerHTML"
+        data-copy-to-clipboard-html-entities="true"
+        title="Copy to clipboard"
+      >
         <.icon name="hero-clipboard-document" data-icon class="h-4 w-4" />
-      </span>
+      </button>
     </div>
     """
   end