diff --git a/src/App.vue b/src/App.vue
index 1b7b75a..3e09103 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,8 @@
 <template>
-<div class="grid-container">
+<div class="grid-container relative">
+    <div v-show="showStatusMessage" class="flex justify-center justify-self-center 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="flex justify-center justify-self-center 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="wrapper">
         <div class="grid-header">
             <h1 class="text-center text-4xl font-bold">Batch Color Converter</h1>
@@ -228,17 +231,18 @@ export default defineComponent({
 
     function updateClipboard (text) {
       navigator.clipboard.writeText(text).then(() => {
-        showErrorMessage = false
-        showStatusMessage = true
+console.log(showStatusMessage)
+        showErrorMessage.value = false
+        showStatusMessage.value = true
         setTimeout(() => {
-          showStatusMessage = false
+          showStatusMessage.value = false
         }, 1000)
       })
       .catch(() => {
-        showStatusMessage = false
-        showErrorMessage = true
+        showStatusMessage.value = false
+        showErrorMessage.value = true
         setTimeout(() => {
-          showErrorMessage = false
+          showErrorMessage.value = false
         }, 1000)
       })
     }