diff --git a/elixir/apps/web/assets/js/hooks.js b/elixir/apps/web/assets/js/hooks.js
index 583a5defd..5217edf0a 100644
--- a/elixir/apps/web/assets/js/hooks.js
+++ b/elixir/apps/web/assets/js/hooks.js
@@ -1,4 +1,4 @@
-import { initTabs, Popover } from "flowbite";
+import { initCopyClipboards, initTabs, Popover } from "flowbite";
 
 let Hooks = {};
 
@@ -128,4 +128,39 @@ Hooks.Popover = {
   },
 };
 
+Hooks.CopyClipboard = {
+  mounted() {
+    initCopyClipboards();
+
+    const id = this.el.id;
+    const clipboard = FlowbiteInstances.getInstance('CopyClipboard', `${id}-code`);
+
+    const $defaultMessage = document.getElementById(`${id}-default-message`);
+    const $successMessage = document.getElementById(`${id}-success-message`);
+
+    clipboard.updateOnCopyCallback((clipboard) => {
+        showSuccess();
+
+        // reset to default state
+        setTimeout(() => {
+            resetToDefault();
+        }, 2000);
+    })
+
+    const showSuccess = () => {
+        $defaultMessage.classList.add('hidden');
+        $successMessage.classList.remove('hidden');
+    }
+
+    const resetToDefault = () => {
+        $defaultMessage.classList.remove('hidden');
+        $successMessage.classList.add('hidden');
+    }
+  },
+
+  updated() {
+    this.mounted();
+  }
+};
+
 export default Hooks;
diff --git a/elixir/apps/web/lib/web/components/core_components.ex b/elixir/apps/web/lib/web/components/core_components.ex
index 28cdf4b13..d160a4cea 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} class="relative">
+    <div id={@id} class="relative" phx-hook="CopyClipboard">
       <div id={"#{@id}-nested"} class={[~w[
         text-sm text-left text-neutral-50
         inline-flex items-center
@@ -84,25 +84,32 @@ defmodule Web.CoreComponents do
         ><%= render_slot(@inner_block) %></code>
       </div>
 
-      <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" />
-      </button>
+      <div class="absolute top-1 end-1">
+        <button
+          type="button"
+          data-copy-to-clipboard-target={"#{@id}-code"}
+          data-copy-to-clipboard-content-type="innerHTML"
+          data-copy-to-clipboard-html-entities="true"
+          class={~w[
+            absolute end-1 top-1 text-gray-900 hover:bg-gray-100
+            rounded py-2 px-2.5 inline-flex items-center justify-center
+            bg-white border-gray-200 border h-8
+          ]}
+        >
+          <span id={"#{@id}-default-message"} class="inline-flex items-center">
+            <span class="inline-flex items-center">
+              <.icon name="hero-clipboard" data-icon class="h-4 w-4 me-1.5" />
+              <span class="text-xs font-semibold">Copy</span>
+            </span>
+          </span>
+          <span id={"#{@id}-success-message"} class="inline-flex items-center hidden">
+            <span class="inline-flex items-center">
+              <.icon name="hero-check" data-icon class="text-green-700 h-4 w-4 me-1.5" />
+              <span class="text-xs font-semibold text-green-700">Copied</span>
+            </span>
+          </span>
+        </button>
+      </div>
     </div>
     """
   end
diff --git a/elixir/apps/web/test/support/conn_case.ex b/elixir/apps/web/test/support/conn_case.ex
index 53794866a..aeaed1ff9 100644
--- a/elixir/apps/web/test/support/conn_case.ex
+++ b/elixir/apps/web/test/support/conn_case.ex
@@ -292,7 +292,7 @@ defmodule Web.ConnCase do
       Floki.attribute(button, "disabled") != "disabled"
     end)
     |> elements_to_text()
-    |> Enum.reject(&(&1 in ["", "Previous", "Next", "Clear filters"]))
+    |> Enum.reject(&(&1 in ["", "Previous", "Next", "Clear filters", "CopyCopied"]))
   end
 
   ## Wait helpers