diff --git a/index.html b/index.html
index 50a8746..c16ae60 100644
--- a/index.html
+++ b/index.html
@@ -236,14 +236,42 @@ <h2>Language:</h2>
     </div>
 
     <div class="row">
-      <div class="col">
+      <div class="col" style="position: relative;">
         <pre><code id="generated-code">import requests
 
 response = requests.get('http://example.com')</code></pre>
+        <div id="copy-to-clipboard" title="Copy to clipboard">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewbox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            aria-hidden="true"
+            class="clipboard text-black"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"
+            ></path></svg
+          ><svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewbox="0 0 24 24"
+            fill="currentColor"
+            aria-hidden="true"
+            class="check hidden text-black"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </div>
       </div>
     </div>
     <div class="row">
-      <div id="copy-to-clipboard" class="text-end"><a href="#">Copy to clipboard</a></div>
       <div style="display: none;" id="issue-promo">If your syntax is correct, please open a
         <a href="https://github.com/curlconverter/curlconverter/issues/new" target="_blank">new issue on GitHub</a>
       </div>
diff --git a/index.js b/index.js
index c6aac4a..1d20ff5 100644
--- a/index.js
+++ b/index.js
@@ -363,7 +363,14 @@ copyToClipboardEl.addEventListener('click', (e) => {
   selection.removeAllRanges()
   selection.addRange(range)
 
-  navigator.clipboard.writeText(generatedCodeEl.textContent)
+  navigator.clipboard.writeText(generatedCodeEl.textContent).then(() => {
+    copyToClipboardEl.querySelector(".clipboard").classList.add("hidden");
+    copyToClipboardEl.querySelector(".check").classList.remove("hidden");
+    setTimeout(() => {
+      copyToClipboardEl.querySelector(".clipboard").classList.remove("hidden");
+      copyToClipboardEl.querySelector(".check").classList.add("hidden");
+    }, 2000);
+  })
 })
 
 const browsers = ['chrome', 'safari', 'firefox']
diff --git a/main.scss b/main.scss
index 505660e..67f626d 100644
--- a/main.scss
+++ b/main.scss
@@ -97,3 +97,25 @@ code {
 .github-fork-ribbon:before {
   background-color: #333;
 }
+
+#copy-to-clipboard {
+  top: 1px;
+  right: calc(0.75rem - 1px);
+  position: absolute;
+  padding: 0.125rem 0.500rem;
+}
+#copy-to-clipboard > svg {
+  padding: 0.20rem;
+  width: 1.75rem;
+  height: 1.75rem;
+  opacity: 0.7;
+}
+#copy-to-clipboard > svg:hover {
+  opacity: 1.0;
+}
+#copy-to-clipboard > svg.clipboard:hover {
+  cursor: pointer;
+}
+#copy-to-clipboard > svg.hidden {
+  display: none;
+}