diff --git a/components/haditha/AutoComplation.vue b/components/haditha/AutoComplation.vue
index 412f26a..e6ebe47 100644
--- a/components/haditha/AutoComplation.vue
+++ b/components/haditha/AutoComplation.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { InputMenuItem } from "@nuxt/ui";
 import hadithaApi from "../../apis/hadithaApi";
-import type { HadithResponseModel } from "../../types/hadithType";
 import { useStorage } from "@vueuse/core";
 import * as z from "zod";
 import type { FormSubmitEvent } from "@nuxt/ui";
@@ -35,6 +34,7 @@ const search_type = ref("normal");
 const type_key = ref("hadith");
 
 const synonymOne = ref(false);
+const synonymTwo = ref(false);
 
 // If you want to share state across multiple components,
 // you can use the same key in useState. Nuxt will ensure
@@ -203,6 +203,9 @@ const sendQuery = async () => {
       // store search phrase
       useStorage("searchPhrase", searchTerm.value);
     })
+    .catch((err) => {
+      console.info(err);
+    })
     .finally(() => {
       loading.value = false;
     });
@@ -342,6 +345,7 @@ async function openSynonymPopup(type: string) {
           />
 
           <template #content>
+            <!-- synonym item -->
             <div class="synonymItem px-2 py-4">
               <div class="flex justify-between items-center p-3 mb-2">
                 <span class="title"> نماز </span>
@@ -367,21 +371,37 @@ async function openSynonymPopup(type: string) {
                   <!-- <UIcon name="i-haditha-close-bg-circle" size="12px"> </UIcon> -->
                 </UButton>
                 <UButton
+                  v-if="!showForm"
                   type="button"
-                  @click="true"
+                  @click="showForm = true"
                   class="me-2.5 mb-3.5 add-button"
                   :class="{ active: false }"
                   icon="i-haditha-add"
                 >
                 </UButton>
+                <UForm
+                  v-else
+                  :schema="schema"
+                  :state="state"
+                  class="w-25 me-2.5 mb-3.5"
+                >
+                  <UFormField name="name" required size="md">
+                    <UInput
+                      v-model="Formstate.name"
+                      placeholder="بنویسید ..."
+                    />
+                  </UFormField>
+                </UForm>
               </div>
             </div>
+
             <USeparator class="px-2" color="neutral" type="solid" size="xs" />
 
+            <!-- synonym item -->
             <div class="synonymItem px-2 py-4">
               <div class="flex justify-between items-center p-3 mb-2">
                 <span class="title"> نماز </span>
-                <USwitch dir="ltr" v-model="synonymOne" />
+                <USwitch dir="ltr" v-model="synonymTwo" />
               </div>
               <div class="flex items-center px-2">
                 <UButton
@@ -464,8 +484,8 @@ async function openSynonymPopup(type: string) {
         </UButton>
       </div>
 
+      <!-- نوع -->
       <div>
-        <!-- نوع -->
         <UDropdownMenu
           :items="state.type.items"
           :content="{
diff --git a/pages/haditha/login.vue b/pages/haditha/login.vue
index 3cdfabd..3ce3caa 100644
--- a/pages/haditha/login.vue
+++ b/pages/haditha/login.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import * as z from "zod";
 import type { FormSubmitEvent } from "@nuxt/ui";
+import hadithaApi from "../../apis/hadithaApi";
+import { useAuthStore } from "~/stores/authStore";
 
 definePageMeta({
   layout: false,
@@ -16,18 +18,22 @@ useHead({
   },
 });
 
-const localizedErrors = {
-  required: "Invalid email address",
-  // Add more error codes and translations as needed
-};
+const router = useRouter();
+const authStore = useAuthStore();
+// const localizedErrors = {
+//   required: "Invalid email address",
+//   // Add more error codes and translations as needed
+// };
 
 const schema = z.object({
   mobile: z
     .string()
     .min(1, "این فیلد ضروری است.(exmaple : 09--*******)")
-    .max(11, "موبایل حداکثر 11 عدد می باشد.(exmaple : 09--*******)")
+    .max(11, "موبایل حداکثر 11 عدد می باشد.(exmaple : 09--*******)"),
 });
 
+const loading = ref(false);
+
 type Schema = z.output<typeof schema>;
 
 const state = reactive<Partial<Schema>>({
@@ -36,12 +42,35 @@ const state = reactive<Partial<Schema>>({
 
 const toast = useToast();
 async function onSubmit(event: FormSubmitEvent<Schema>) {
-  toast.add({
-    title: "Success",
-    description: "The form has been submitted.",
-    color: "success",
-  });
   console.log(event.data);
+
+  const payoload = {
+    username: "dev",
+    password: "dev123",
+  };
+
+  authStore
+    .login(payoload)
+    .then((res) => {
+      loading.value = false;
+      // check if search term is not empty
+
+      toast.add({
+        title: "Success",
+        description: res.data.message,
+        color: "success",
+      });
+
+      navigateTo({
+        name: "haditha",
+      });
+    })
+    .catch((err) => {
+      console.info(err);
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 }
 
 // components declaration