diff --git a/src/views/pages/auth/Login.vue b/src/views/pages/auth/Login.vue
index cb1a7a9..729a303 100644
--- a/src/views/pages/auth/Login.vue
+++ b/src/views/pages/auth/Login.vue
@@ -2,6 +2,7 @@
 import { useLayout } from '@/layout/composables/layout';
 import { useAuth } from '@websanova/vue-auth/src/v3.js';
 import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
 //import logo from '@/assets/Logo_Apollo_Transparent.png';
 import logo from '@/assets/apollo.jpg';
 const auth = useAuth();
@@ -9,25 +10,39 @@ const auth = useAuth();
 const { isDarkTheme } = useLayout();
 const username = ref('');
 const password = ref('');
+const error = ref('');
+const visible = ref(false);
+const router = useRouter();
 const logoSrc = ref(logo);
 
 const logoUrl = computed(() => {
   return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
 });
 
-const login = () => {
-  console.log('Username: ', username.value);
-
-  auth.login({
-    data: {
-      "username": username.value,
-      "password": password.value
-    },
-    redirect: '/ksdocuments',
-    fetchUser: true,
-    //url: '/api/auth/login'
-  });
+const login = async () => {
+    try {
+        await auth.login({
+                data:{
+                    "username":username.value,
+                    "password":password.value
+                },
+                fetchUser: true
+            }).then((response) => {
+                console.log("1 user :" , response.data.data);
+                router.push({ name: 'ksdocuments' });
+                console.log("response", response);
+            }).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);
+    }
 }
 </script>
 
@@ -70,6 +85,9 @@ const login = () => {
                 style="color: var(--primary-color)">Forgot password?</a>
             </div> -->
             <Button label="Sign In" @click="login" class="w-full p-4 text-xl"></Button>
+
+            <Message v-if="visible" severity="error" :life="3000" class="mt-2 error-message">{{ error }}</Message>
+            
           </div>
         </div>
       </div>
@@ -98,4 +116,12 @@ const login = () => {
   /* Ensures the logo scales nicely within the circle */
   display: block;
 }
+
+.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>