diff --git a/index.php b/index.php
index 1b42aa2..8d8adb2 100644
--- a/index.php
+++ b/index.php
@@ -53,6 +53,8 @@
     </head>
     <body class="font-open-sans antialiased">
         <div id="app" class="flex flex-col items-center justify-center w-full min-h-screen">
+            <div v-show="showStatusMessage" class="w-1/5 text-center px-4 py-3 uppercase font-bold bg-green-300 text-green-600 fixed top-0 mt-4 rounded z-10">Copied!</div>
+            <div v-show="showErrorMessage" class="w-1/5 text-center px-4 py-3 uppercase font-bold bg-red-300 text-red-600 fixed top-0 mt-4 rounded z-10">Failed to copy</div>
             <div class="w-3/5">
                 <h1 class="text-center text-2xl font-bold">Batch Color Converter</h1>
 
diff --git a/js/app.js b/js/app.js
index 7ab3e44..59597ad 100644
--- a/js/app.js
+++ b/js/app.js
@@ -12,7 +12,8 @@ let app = new Vue({
     ],
     inputBox: "ccc\n#4f46e5\n#db2777aa\n",
 
-    copyInput: "",
+    showStatusMessage: false,
+    showErrorMessage: false,
 
     hexRegex: /^\#?[a-f0-9]{3,9}/i,
     rgbRegex: /^rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)/i,
@@ -375,8 +376,20 @@ console.error('hexa to HSLa not implemented yet');
     },
 
     updateClipboard: function (text) {
+      let _this = this;
       clipboard.writeText(text).then(() => {
-        console.log('text copied!');
+        _this.showErrorMessage = false;
+        _this.showStatusMessage = true;
+        setTimeout(() => {
+          _this.showStatusMessage = false;
+        }, 1000);
+      })
+      .catch(() => {
+        _this.showStatusMessage = false;
+        _this.showErrorMessage = true;
+        setTimeout(() => {
+          _this.showErrorMessage = false;
+        }, 1000);
       });
     },
   },
