diff --git a/src/views/pages/auth/Login.vue b/src/views/pages/auth/Login.vue
index 2ec4c34..22ad775 100644
--- a/src/views/pages/auth/Login.vue
+++ b/src/views/pages/auth/Login.vue
@@ -37,19 +37,18 @@ const login = async () => {
                 }
 
                 console.log("response", response);
-            }).catch((error) => {
-                console.log("error", error);
+            }).catch((err) => {
+                console.log("error", err);
+                error.value = 'Incorrect username or password. Please try again.';    
+                visible.value = true;
+
+                setTimeout(() => {
+                    visible.value = false;
+                }, 3500);
             });
     } catch (err) {
-        console.log( 'Error ' + err)
-        error.value = 'Incorrect username or password. Please try again.';    
-        visible.value = true;
-
-        setTimeout(() => {
-            visible.value = false;
-        }, 3500);
+        console.log('Error ' + err);
     }
-    
 }
 
 </script>
@@ -98,7 +97,7 @@ const login = async () => {
                     -->
                         <Button @click="login" label="Sign In" class="w-full p-4 text-xl"></Button>
 
-                        <Message v-if="visible" severity="error" :life="3000" class="mt-2">{{ error }}</Message>
+                        <Message v-if="visible" severity="error" :life="3000" class="mt-2 error-message">{{ error }}</Message>
                     </div>
                 </div>
             </div>
@@ -124,4 +123,13 @@ const login = async () => {
     margin-bottom: 20px;
     margin-top: -40px
 }
+
+.error-message {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 100%; /* Ensure the message takes the full width of its container */
+}
+
 </style>