diff --git a/components/haditha/AutoComplation.vue b/components/haditha/AutoComplation.vue
index f43c75f..2eebabb 100644
--- a/components/haditha/AutoComplation.vue
+++ b/components/haditha/AutoComplation.vue
@@ -3,7 +3,6 @@ import type { InputMenuItem } from "@nuxt/ui";
 import hadithaApi from "../../apis/hadithaApi";
 import { useStorage } from "@vueuse/core";
 import * as z from "zod";
-import routeGlobal from "~/middleware/route.global";
 // import type { FormSubmitEvent } from "@nuxt/ui";
 
 export type Synonym = {
@@ -970,6 +969,6 @@ onMounted(() => {
   }
 }
 
-@media scrren and (min-width: 720px) and (max-width: 991.99px) {
-}
+/* @media scrren and (min-width: 720px) and (max-width: 991.99px) {
+} */
 </style>
diff --git a/components/haditha/search-page/SearchList.vue b/components/haditha/search-page/SearchList.vue
index 10241d1..0b047e8 100644
--- a/components/haditha/search-page/SearchList.vue
+++ b/components/haditha/search-page/SearchList.vue
@@ -24,7 +24,10 @@ function openModal(selectedItem) {
   // modal.open(SearchShow, { title: "Welcome" });
   // isModalOpen.value = true;
 
-  const slug = selectedItem._source.content.split(' ').filter((v,i)=>i<4).join('-');
+  const slug = selectedItem._source.content
+    .split(" ")
+    .filter((v, i) => i < 4)
+    .join("-");
 
   router.push({
     name: "hadithaSearchShow",
@@ -34,7 +37,7 @@ function openModal(selectedItem) {
     },
     query: {
       firstPage: 1,
-      page_count:props.total
+      page_count: props.total,
     },
   });
 }
@@ -55,51 +58,43 @@ function openModal(selectedItem) {
 </script>
 
 <template>
-  <div class="search-list-contianer">
-    <div class="total">
-      <span>{{ total }}</span>
-      نتیجه
+  <div
+    v-if="props?.list?.length"
+    class="search-list-item"
+    v-for="(item, index) in props.list"
+    :key="index"
+  >
+    <p @click="openModal(item)" class="from-person">
+      {{
+        item?._source?.meta?.hadith_masoum ??
+        item?._source?.meta?.hadith_sanad ??
+        "بدون عنوان"
+      }}
+    </p>
+    <p @click="openModal(item)" class="arabic-text">
+      {{ item?._source?.content_ar }}
+    </p>
+    <p
+      class="persian-text"
+      v-html="item?.highlight?.['content.fa'] ?? item?._source?.content"
+    ></p>
+    <div class="flex justify-end">
+      <p class="reference">
+        {{ item?._source?.address?.vol_title }}، صفحه
+        {{ item?._source?.address?.page_num }}
+      </p>
     </div>
+  </div>
 
-    <div class="search-list firefox-scrollbar">
-      <div
-        v-if="props.list.length"
-        class="search-list-item"
-        v-for="(item, index) in props.list"
-        :key="index"
-      >
-        <p @click="openModal(item)" class="from-person">
-          {{
-            item?._source?.meta?.hadith_masoum ??
-            item?._source?.meta?.hadith_sanad ??
-            "بدون عنوان"
-          }}
-        </p>
-        <p @click="openModal(item)" class="arabic-text">
-          {{ item?._source?.content_ar }}
-        </p>
-        <p
-          class="persian-text"
-          v-html="item?.highlight?.['content.fa'] ?? item?._source?.content"
-        ></p>
-        <div class="flex justify-end">
-          <p class="reference">
-            {{ item?._source?.address?.vol_title }}، صفحه
-            {{ item?._source?.address?.page_num }}
-          </p>
-        </div>
-      </div>
+  <no-data
+    class="h-full w-full flex flex-col justify-center items-center"
+    v-else
+  >
+    <img fit="auto" quality="80" placeholder :src="props.noDataIcon" />
+    <p class="no-data-text">{{ props.noDataText }}</p>
+  </no-data>
 
-      <no-data
-        class="h-full w-full flex flex-col justify-center items-center"
-        v-else
-      >
-        <img fit="auto" quality="80" placeholder :src="props.noDataIcon" />
-        <p class="no-data-text">{{ props.noDataText }}</p>
-      </no-data>
-    </div>
-
-    <!-- <UModal
+  <!-- <UModal
       v-model:open="isModalOpen"
       :dismissible="false"
       :ui="{
@@ -121,124 +116,85 @@ function openModal(selectedItem) {
       </template>
       <<template #footer></template> 
     </UModal> -->
-  </div>
 </template>
 
 <style scoped>
-.search-list-contianer {
-  max-width: 41em; /*656px*/
-  width: 100%;
-  margin: 0 1em;
-
-  .total {
-    padding: 0.5em 1.8em;
-
-    font-family: IRANSansX;
-    font-weight: 400;
-    font-size: 0.68rem; /*11px*/
-    line-height: 1rem;
-    letter-spacing: 0%;
-    text-align: right;
-    color: #b4c2cf;
-  }
-  .search-list {
-    padding: 1em 1.3em;
-    height: calc(100dvh - 16em);
-    overflow-y: auto;
-
-    &.hadithaFavorites {
-      height: calc(100dvh - 8em);
-    }
-
-    &:not(:last-child) {
-      border-bottom: 0.3px solid #d9d9d9;
-    }
-
-    .search-list-item {
-      .from-person {
-        font-family: IRANSansX;
-        font-weight: 300;
-        font-size: 0.75rem; /*12px*/
-        line-height: 1.125rem; /*18px*/
-        letter-spacing: 0%;
-        text-align: right;
-        color: #00a762; /* #4be8ae 7.38%  */
-        margin-bottom: 0.5em;
-
-        &:hover,
-        &:focus,
-        &:active {
-          cursor: pointer;
-          background-color: #fafafa;
-        }
-      }
-      .arabic-text {
-        font-family: Takrim;
-        font-weight: 400;
-        font-size: 1.125rem; /*18px*/
-        line-height: 2rem; /*23px*/
-        letter-spacing: 0%;
-        text-align: right;
-        color: var(--ui-color-two);
-        margin-bottom: 0.5em;
-
-        &:hover,
-        &:focus,
-        &:active {
-          cursor: pointer;
-          background-color: #fafafa;
-        }
-      }
-      .persian-text {
-        font-family: Takrim;
-        font-weight: 400;
-        font-size: 1rem; /*16px*/
-        line-height: 1.375rem; /*22px*/
-        letter-spacing: 0%;
-        text-align: right;
-        color: #626b84;
-        margin-bottom: 0.5em;
-      }
-      .reference {
-        height: 24px;
-        gap: 4px;
-        padding-top: 0.25em;  /*4px*/
-        padding-right: 0.5em; /*8px*/
-        padding-bottom: 0.25em; /*4px*/
-        padding-left: 0.5em; /*8px*/
-        border-radius: 6px; /*18px*/
-        border-width: 0.5px;
-        border: 0.5px solid #d9d9d9;
-
-        font-family: IRANSansX;
-        font-weight: 300;
-        font-size: 0.625rem; /*10px*/
-        line-height: 0.9rem; /*15px*/
-        letter-spacing: 0%;
-        text-align: right;
-        color: #8a92a8;
-
-        &:hover,
-        &:focus,
-        &:active {
-          cursor: pointer;
-          background-color: #fafafa;
-        }
-      }
-    }
-  }
-  .no-data-text {
+.search-list-item {
+  .from-person {
     font-family: IRANSansX;
     font-weight: 300;
-    font-size: 1rem;
-    line-height: 1.5rem;  /*24px*/
+    font-size: 0.75rem; /*12px*/
+    line-height: 1.125rem; /*18px*/
     letter-spacing: 0%;
-    text-align: center;
+    text-align: right;
+    color: #00a762; /* #4be8ae 7.38%  */
+    margin-bottom: 0.5em;
+
+    &:hover,
+    &:focus,
+    &:active {
+      cursor: pointer;
+      background-color: #fafafa;
+    }
+  }
+  .arabic-text {
+    font-family: Takrim;
+    font-weight: 400;
+    font-size: 1.125rem; /*18px*/
+    line-height: 2rem; /*23px*/
+    letter-spacing: 0%;
+    text-align: right;
+    color: var(--ui-color-two);
+    margin-bottom: 0.5em;
+
+    &:hover,
+    &:focus,
+    &:active {
+      cursor: pointer;
+      background-color: #fafafa;
+    }
+  }
+  .persian-text {
+    font-family: Takrim;
+    font-weight: 400;
+    font-size: 1rem; /*16px*/
+    line-height: 1.375rem; /*22px*/
+    letter-spacing: 0%;
+    text-align: right;
+    color: #626b84;
+    margin-bottom: 0.5em;
+  }
+  .reference {
+    height: 24px;
+    gap: 4px;
+    padding-top: 0.25em; /*4px*/
+    padding-right: 0.5em; /*8px*/
+    padding-bottom: 0.25em; /*4px*/
+    padding-left: 0.5em; /*8px*/
+    border-radius: 6px; /*18px*/
+    border-width: 0.5px;
+    border: 0.5px solid #d9d9d9;
+
+    font-family: IRANSansX;
+    font-weight: 300;
+    font-size: 0.625rem; /*10px*/
+    line-height: 0.9rem; /*15px*/
+    letter-spacing: 0%;
+    text-align: right;
+    color: #8a92a8;
+
+    &:hover,
+    &:focus,
+    &:active {
+      cursor: pointer;
+      background-color: #fafafa;
+    }
   }
 }
 </style>
-
+<!-- 
 <style>
+
 .text__orange {
   color: orange;
 }
@@ -248,7 +204,7 @@ function openModal(selectedItem) {
   box-shadow: 0px 8px 20px 0px #0000001a;
   background: #ffffff;
   width: 100%;
-  max-width: 720px;  /*18px*/
+  max-width: 720px; /*18px*/
   border-radius: 16px; /*18px*/
   gap: 8px;
   border-width: 0.3px;
@@ -311,4 +267,4 @@ function openModal(selectedItem) {
 .modal-overlay {
   background: #00000033;
 }
-</style>
+</style> -->
diff --git a/pages/haditha/library/index.vue b/pages/haditha/library/index.vue
index 7e8e15b..9fbd86d 100644
--- a/pages/haditha/library/index.vue
+++ b/pages/haditha/library/index.vue
@@ -24,14 +24,13 @@ useHead({
 // #region refs
 const el = useTemplateRef<HTMLElement>("el");
 const httpService = useNuxtApp()["$http"];
-const route = useRoute();
-const page = ref(Number(route.query.page) || 1);
+const total = ref(0);
+const currentPage = useState("currentPage", () => 0);
 // #endregion refs
 
 // #region reactive
 const state = reactive({
   pagination: {
-    offset: 0,
     limit: 10,
     page: 1,
     pages: 1,
@@ -43,15 +42,20 @@ const state = reactive({
 const getLibraryList = async (dataType = "bookmark") => {
   let url = repoUrl() + hadithaApi.library.list;
   url = url.replace("@field_collapsed", "normal");
-  url = url.replace("@offset", state.pagination.offset);
+  url = url.replace("@offset", currentPage.value);
   url = url.replace("@limit", state.pagination.limit);
   url = url.replace("@q", "none");
 
-  return await httpService.postRequest(url);
+  return await httpService.postRequest(url).then((res) => {
+    total.value = res.hits.total.value ?? 0;
+    currentPage.value += state.pagination.limit;
+
+    return res;
+  });
 };
 
 // Server-side initial load
-const { data: initialItems } = await useAsyncData(
+const { data: loadedItems } = await useAsyncData(
   "libraryList",
   () => getLibraryList(),
   {
@@ -59,16 +63,12 @@ const { data: initialItems } = await useAsyncData(
     getCachedData: (key) => {
       return useNuxtApp().payload.data[key] || useNuxtApp().static.data[key];
     },
-    watch: [page],
   }
 );
 
 // Client-side state
-const loadedItems = ref([]);
 const loading = ref(false);
 const hasMore = ref(true);
-const loader = ref(null);
-const totalPages = ref(10); // Set based on your API response
 
 // Client-side infinite scroll
 useInfiniteScroll(
@@ -84,7 +84,6 @@ useInfiniteScroll(
 
         if (hits.length) {
           loadedItems.value.push(...hits);
-          state.pagination.offset += state.pagination.limit;
         } else {
           hasMore.value = false;
         }
@@ -128,14 +127,6 @@ const CardList = defineAsyncComponent(
             no-data-icon="/img/haditha/no-data.png"
             :list="loadedItems"
           ></card-list>
-
-          <!-- Server-rendered initial content -->
-          <card-list
-            v-else
-            no-data-text="هنوز چیزی ذخیره نکرده‌اید!"
-            no-data-icon="/img/haditha/no-data.png"
-            :list="initialItems"
-          ></card-list>
         </div>
       </div>
     </div>
diff --git a/pages/haditha/search/index.vue b/pages/haditha/search/index.vue
index a25b7a4..3dd52da 100644
--- a/pages/haditha/search/index.vue
+++ b/pages/haditha/search/index.vue
@@ -1,11 +1,23 @@
-<script setup>
+<script setup lang="ts">
+import { useStorage } from "@vueuse/core";
+import { useInfiniteScroll } from "@vueuse/core";
+import * as z from "zod";
+
+// const myCookie = useCookie("searchPhrase");
+// const myCookieOffset = useCookie("offset");
+
+import headLinks from "@haditha/json/haditha/headLinks";
+import headMetas from "@haditha/json/haditha/headMetas";
+import hadithaApi from "@haditha/apis/hadithaApi";
+import type { Synonym } from "@haditha/types/hadithType";
+
+// const searchTerm = useState("searchTerm", () => ''); // Tracks the searchTerm
+const offset = useState("offset", () => 0); // Tracks the current offset
+
 definePageMeta({
   layout: false,
   name: "hadithaSearch",
 });
-import headLinks from "@haditha/json/haditha/headLinks";
-import headMetas from "@haditha/json/haditha/headMetas";
-
 useHead({
   name: "hadithaSearch",
   title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | جستجو`,
@@ -19,14 +31,135 @@ useHead({
   link: headLinks,
 });
 
+// #region refs
+// وقتی از صفحه حدیث با کلیک بر روی دکمه مشابه، وارد صفحه جستجو میشویم
+const showPrevSearch = ref(false);
+// لیست جستجو در حالت اسکرول
+// const loadedItems = ref([]);
+// لودینگ
+const loading = ref(false);
+// هنگام اسکرول، چک میشود که ایا صفحه بعدی هم وجود دارد یا نه.
+const hasMore = ref(true);
+// عنصری که برای اسکرول استفاده میشه.
+const el = ref(null);
+// پلاگین ارسال درخواست
+const httpService = useNuxtApp()["$http"];
+// استفاده از روت
 const route = useRoute();
-const img = useImage();
-const searchQuery = ref("");
+const router = useRouter();
+// تعداد کل نتایج
 const total = ref(0);
-const state = reactive({
-  searchList: [],
+// رکوردهای جتسجو شده توسط کاربر
+const userSearchHistory = useStorage(
+  "userSearchHistory",
+  new Set() // Initial value
+);
+// کلمه ی جستجو شده توسط کاربر
+const searchTerm = ref(route.query.q ?? "");
+
+// وقتی کاربر از صفحه اصلی وارد جستجو میشود.
+// if (route.query.q) {
+// searchTerm.value = route.query.q ?? "";
+// route.query.q = undefined;
+// }
+// باز کردن دراپ داون  اینپوت اصلی
+const open = ref(false);
+// نوع جستجو
+const search_type = ref("normal");
+//  انتخاب ترجمه
+const type_key = ref("hadith");
+// نوع جستجو
+const typeModelValue = ref("normal");
+const typeModelValueFa = ref("");
+
+// نمایش دکمه پاک کردن متن جستجو
+const showclearButton = ref(false);
+// اسکیمای مترادف
+const schema = z.object({
+  name: z.string().min(1, "این فیلد ضروری است"),
+});
+// باز کردن دراپ داون مترادف
+const isSynonymPopupOpen = ref(false);
+// فرم افزودن مترادف
+const Formstate = reactive({
+  name: "",
+});
+// #endregion refs
+
+// #region reactive
+const AutoComplationState = reactive({
+  vector: {
+    label: "معنایی",
+    value: "vector",
+    icon: "i-haditha-robot-indicator",
+  },
+  type: {
+    icon: "",
+    value: "normal",
+    label: "نوع",
+    items: [
+      {
+        label: "جستجو در همه",
+        value: "normal",
+        // onSelect(e: Event) {
+        //   search_type.value = "normal";
+        //   state.type.label = e.explicitOriginalTarget?.innerText;
+        //   sendQuery();
+        //   state.type.items[0].class = "active";
+        // },
+      },
+      {
+        label: "فقط در متن عربی حدیث",
+        value: "arabic",
+        valueFa: "عربی",
+      },
+      {
+        label: "فقط در ترجمه ها",
+        value: "translations",
+        valueFa: "ترجمه",
+      },
+      {
+        label: "فقط در شروح",
+        value: "descriptions",
+        valueFa: "شروح",
+      },
+    ],
+  },
+  synonym: {
+    value: "synonym",
+    label: "مترادف",
+    icon: "i-haditha-chevron-down",
+    items: [],
+  },
+  type_key: {
+    label: "ترجمه",
+    value: "hadith",
+  },
+  phrase: {
+    label: "عین عبارت",
+    value: "normal",
+  },
+});
+const mainState = reactive({
+  pagination: {
+    limit: 10,
+    page: 1,
+    pages: 1,
+  },
 });
 
+// If you want to share state across multiple components,
+// you can use the same key in useState. Nuxt will ensure
+// that the state is shared and reactive across your application.
+// const typingTimer = useState<number>("typingTimer", () => 0);
+// const doneTypingInterval = useState<number>("doneTypingInterval", () => 1000);
+
+// حالت ارسال اتوماتیک درخواست ها، غیر فعال شده است.
+// const typingTimer = ref<number | any>(0);
+// const doneTypingInterval = ref<number>(1000);
+// #endregion reactive
+
+// #region computed
 const backgroundImageStyle = computed(() => {
   // Use $img to generate an optimized image URL
   // let optimizedImageUrl = img("/img/haditha/background.webp", {
@@ -34,7 +167,7 @@ const backgroundImageStyle = computed(() => {
   // });
   let optimizedImageUrl = "/img/haditha/background.webp";
 
-  if (searchQuery.value?.length) {
+  if (searchTerm.value?.length) {
     // optimizedImageUrl = img("/img/haditha/sub-header-bgi.webp", {
     //   quality: 80,
     // });
@@ -49,26 +182,256 @@ const backgroundImageStyle = computed(() => {
     backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
   };
 });
+// const searchButtonIcon = computed(() => {
+//   return showclearButton.value ? "i-lucide-x" : "i-haditha-search";
+// });
+const synonymIsSwitchedOn = computed(() => {
+  return AutoComplationState.synonym.items.filter((i) => i.enable).length;
+});
+// #endregion computed
 
-const renderContent = (payload) => {
-  total.value = payload.res?.hits.total.value ?? 0;
-  state.searchList = payload.res?.hits.hits ?? [];
-  searchQuery.value = payload.searchQuery ?? "";
+// #region methods
+
+// خروج از حالت مشابه
+const exitSimilarMode = () => {};
+// ارسال درخواست
+const sendQuery = async (payload = {}) => {
+  let url = hadithaApi.search.list;
+  url = url.replace("@index_key", "dhparag");
+  url = url.replace("@search_type", search_type.value); // normal, and , phrase,  vector, synonym
+  url = url.replace("@type_key", type_key.value); // hadith, hadith_fa, hadith_ar, hadith_shr
+  url = url.replace("@offset", offset.value);
+  url = url.replace("@limit", mainState.pagination.limit);
+  url = url.replace("@listkey", "normal");
+  url = url.replace("@field_collapsed", "normal");
+
+  // اگر نوع انتخاب شود.
+  const isTypeSelected =
+    typeModelValue.value == "arabic" ||
+    typeModelValue.value == "translations" ||
+    typeModelValue.value == "descriptions";
+
+  url = url.replace(
+    "@q=none",
+    searchTerm.value.length
+      ? `q=${isTypeSelected ? "#" + typeModelValueFa.value + " " : ""}${
+          searchTerm.value
+        }`
+      : "q=none"
+  );
+
+  // fetch search list from backend(ssr)
+  return await httpService.postRequest(url, payload).then((res) => {
+    total.value = res.hits.total.value ?? 0;
+    offset.value += mainState.pagination.limit;
+    return res;
+  });
 };
 
-// components declaration
-const HadithaLayout = defineAsyncComponent(() =>
-  import("@haditha/layouts/HadithaLayout.vue")
+// Server-side initial load
+const { data: loadedItems } = await useAsyncData("search", () => sendQuery(), {
+  transform: (data) => data.hits.hits,
+  getCachedData: (key) => {
+    return useNuxtApp().payload.data[key] || useNuxtApp().static.data[key];
+  },
+});
+
+const onBeforeSendQuery = () => {
+  route.query.q = searchTerm.value;
+  history?.pushState(
+    {},
+    document?.title,
+    route.path + `?q=${searchTerm.value}`
+  );
+
+  sendQuery().then((res) => {
+    loadedItems.value = res.hits.hits;
+  });
+};
+// Client-side infinite scroll
+useInfiniteScroll(
+  el,
+  async () => {
+    if (!hasMore.value || loading.value) return;
+
+    loading.value = true;
+    try {
+      // const nextPage = page.value + 1;
+      await sendQuery().then((res) => {
+        const hits = res.hits.hits;
+
+        if (hits.length) {
+          // if (initialItems.value.length) {
+          //   loadedItems.value.push(...initialItems.value);
+          //   loadedItems.value.push(...hits);
+          //   initialItems.value = [];
+          // } else loadedItems.value.push(...hits);
+
+          loadedItems.value.push(...hits);
+          offset.value += mainState.pagination.limit;
+        } else {
+          hasMore.value = false;
+        }
+      });
+    } finally {
+      loading.value = false;
+    }
+  },
+  { distance: 100 }
 );
-const NavigationMenu = defineAsyncComponent(() =>
-  import("@haditha/components/haditha/NavigationMenu.vue")
+// دکمه جستجو کردن
+const handleSearchClearButton = () => {
+  // showclearButton.value = true;
+  sendQuery().then((res) => {
+    loadedItems.value = res.hits.hits;
+  });
+};
+
+// وقتی کاربر کلیدی فشار میدهد
+// const onKeyDown = () => {
+//   showclearButton.value = false;
+//   // clearTimeout(typingTimer.value);
+// };
+// وقتی کاربر کلیدی فشار میدهد
+// const onKeyUp = () => {
+//   clearTimeout(typingTimer.value);
+//   typingTimer.value = setTimeout(() => {
+//     if (props.autoRedirection) sendQuery();
+//   }, doneTypingInterval.value);
+// };
+// تنظیم نوع جستجو
+const setType = (type: string) => {
+  search_type.value = type;
+  loadedItems.value = [];
+  offset.value = 0;
+  sendQuery().then((res) => {
+    loadedItems.value = res.hits.hits;
+  });
+};
+// const setKey = (type: string) => {
+//   type_key.value = type;
+//   sendQuery();
+// };
+
+// async function onSubmit(event: FormSubmitEvent<Schema>) {
+//   toast.add({
+//     title: "Success",
+//     description: "The form has been submitted.",
+//     color: "success",
+//   });
+//   console.log(event.data);
+// }
+
+// get synonyms
+
+const onClearSynonymClear = () => {
+  search_type.value = "normal";
+  AutoComplationState.synonym.items.forEach((element) => {
+    element.enable = false;
+  });
+};
+async function openSynonymPopup(type: string) {
+  search_type.value = type;
+
+  getSynonyms().then(() => {
+    isSynonymPopupOpen.value = true;
+  });
+}
+
+const onTypeSelectChanged = (value: string) => {
+  if (value == "translations") typeModelValueFa.value = "ترجمه";
+  else if (value == "arabic") typeModelValueFa.value = "عربی";
+  else if (value == "descriptions") typeModelValueFa.value = "شروح";
+  else typeModelValueFa.value = "همه";
+
+  sendQuery().then((res) => {
+    loadedItems.value = res.hits.hits;
+  });
+};
+
+const getSynonyms = async () => {
+  let url = repoUrl() + hadithaApi.search.synonym;
+  const payload = {
+    query: searchTerm.value,
+  };
+  // fetch search list from backend(ssr)
+  return await httpService.postRequest(url, payload).then((res) => {
+    AutoComplationState.synonym.items = [];
+
+    Object.entries(res.data).forEach((item, index) => {
+      const synonyms = {} as Synonym;
+      synonyms.title = item[0];
+      synonyms.enable = false;
+      synonyms.enableForm = false;
+
+      const subTitlesStrList = item[1].value.split(",");
+      const subTitlesObjList = subTitlesStrList
+        .filter((i) => i)
+        .map((i) => {
+          return {
+            title: i,
+            active: false,
+          };
+        });
+      synonyms.subTitles = subTitlesObjList;
+      AutoComplationState.synonym.items.push(synonyms);
+    });
+  });
+};
+const prepareSynonym = () => {
+  const enabledSwitches = AutoComplationState.synonym.items.filter(
+    (i) => i.enable
+  );
+  const res = {};
+
+  enabledSwitches.forEach((item) => {
+    if (item.subTitles.length)
+      res[item.title] = item.subTitles
+        .filter((i) => i.active)
+        .map((i) => i.title)
+        .join(",");
+  });
+
+  return {
+    synonym: res,
+  };
+};
+const onUpdateSwitch = () => {
+  sendQuery(prepareSynonym()).then((res) => {
+    loadedItems.value = res.hits.hits;
+  });
+};
+const onUpdateSubTitle = (subTitle) => {
+  subTitle.active = !subTitle.active;
+
+  sendQuery(prepareSynonym()).then((res) => {
+    loadedItems.value = res.hits.hits;
+  });
+};
+const onAddNewTitle = (subTitles) => {
+  subTitles.push({
+    active: true,
+    title: Formstate.name,
+  });
+  Formstate.name = "";
+
+  sendQuery(prepareSynonym()).then((res) => {
+    loadedItems.value = res.hits.hits;
+  });
+};
+// #endregion methods
+
+// #region components
+const HadithaLayout = defineAsyncComponent(
+  () => import("@haditha/layouts/HadithaLayout.vue")
 );
-const AutoComplation = defineAsyncComponent(() =>
-  import("@haditha/components/haditha/AutoComplation.vue")
+const NavigationMenu = defineAsyncComponent(
+  () => import("@haditha/components/haditha/NavigationMenu.vue")
 );
-const SearchList = defineAsyncComponent(() =>
-  import("@haditha/components/haditha/search-page/SearchList.vue")
+const SearchList = defineAsyncComponent(
+  () => import("@haditha/components/haditha/search-page/SearchList.vue")
 );
+// #endregion components
 </script>
 
 <template>
@@ -82,14 +445,301 @@ const SearchList = defineAsyncComponent(() =>
             class="search-box-container flex justify-center"
             :class="{ 'pb-0': route.name == 'hadithaSearch' }"
           >
-            <auto-complation
-              :showFilter="true"
-              class="search-page"
-              @responseReady="renderContent"
-            ></auto-complation>
+            <div class="haditha-search-root-wrapper search-page">
+              <div
+                class="haditha-search-root"
+                :class="{ 'no-backdrop': showPrevSearch }"
+              >
+                <!-- وقتی کاربر در صفحه نمایش بر روی مشابه کلیک میکند و به صفحه جستجو وارد میشود. -->
+                <div
+                  v-if="showPrevSearch"
+                  class="prev-search-item flex items-center"
+                >
+                  <span class="total">۴۷ مشابه </span>
+                  <span class="text me-auto">
+                    عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ،
+                    قَالَ:
+                  </span>
+                  <UButton
+                    icon="i-lucide:x"
+                    color="neutral"
+                    variant="ghost"
+                    class="clear-similar-btn"
+                    @click="exitSimilarMode"
+                  />
+                </div>
+
+                <!-- <client-only> -->
+                <div class="search-input">
+                  <UInputMenu
+                    class="w-full focus:placeholder-gray-800"
+                    :items="<any>Array.from(userSearchHistory)"
+                    v-model="searchTerm"
+                    v-model:open="open"
+                    v-model:search-term="searchTerm"
+                    placeholder="هوشمند جستجو کنید..."
+                    :ui="{
+                      base: 'haditha-search-input',
+                    }"
+                    :content="{
+                      align: 'start',
+                      side: 'bottom',
+                      sideOffset: 4,
+                    }"
+                    :loading="loading"
+                    highlight
+                    highlightOnHover
+                    @focus="open = true"
+                    @blur="open = false"
+                    @change="onBeforeSendQuery"
+                    @keydown.enter="onBeforeSendQuery"
+                  >
+                    <!-- @keydown="onKeyDown" -->
+                    <!-- @update:modelValue="onUpdateModel" -->
+                    <!-- @update:searchTerm="onUpdateModel" -->
+                  </UInputMenu>
+                </div>
+                <UButton
+                  class="my-trailing-button"
+                  :class="{ 'close-mode': showclearButton }"
+                  @click.prevent="handleSearchClearButton"
+                  icon="i-haditha-search"
+                >
+                  <!-- <UIcon name="i-lucide-search" /> -->
+                </UButton>
+                <!-- </client-only> -->
+              </div>
+              <div
+                class="search-filter flex items-center my-3 justify-between"
+                v-if="searchTerm.length"
+              >
+                <div class="flex items-center space-x-2">
+                  <!-- #region  معنایی -->
+                  <!-- @click.self="search_type = 'vector'" -->
+                  <UButton
+                    @click.self="setType('vector')"
+                    :class="{ active: search_type == 'vector' }"
+                    type="button"
+                    class="filter-item"
+                    :icon="AutoComplationState.vector.icon"
+                  >
+                    {{ AutoComplationState.vector.label }}
+
+                    <UIcon
+                      v-if="search_type == 'vector'"
+                      @click.self="setType('normal')"
+                      name="i-haditha-close-bg-circle"
+                      size="20px"
+                    >
+                    </UIcon>
+                  </UButton>
+
+                  <!-- #endregion -->
+                  <!-- #region مترادف -->
+                  <UPopover
+                    :content="{
+                      align: 'start',
+                      side: 'bottom',
+                      sideOffset: 8,
+                    }"
+                    :ui="{
+                      content: 'popover-root-content',
+                    }"
+                    v-model:open="isSynonymPopupOpen"
+                  >
+                    <UButton
+                      @click="openSynonymPopup('synonym')"
+                      :class="{ active: search_type == 'synonym' }"
+                      class="filter-item"
+                      type="button"
+                      trailingIcon="i-haditha-dropdown-chevron-down"
+                    >
+                      {{ AutoComplationState.synonym.label }}
+
+                      <UIcon
+                        v-if="synonymIsSwitchedOn"
+                        @click.self="onClearSynonymClear"
+                        name="i-haditha-close-bg-circle"
+                        size="20px"
+                      >
+                      </UIcon>
+                    </UButton>
+
+                    <template #content>
+                      <!-- synonym item -->
+                      <template
+                        v-for="(syn, itemIndex) in AutoComplationState.synonym
+                          .items"
+                      >
+                        <div class="synonymItem px-2 py-4">
+                          <div
+                            class="flex justify-between items-center p-3 mb-2"
+                          >
+                            <span class="title"> {{ syn.title }} </span>
+                            <USwitch
+                              dir="ltr"
+                              v-model="syn.enable"
+                              @update:modelValue="
+                                onUpdateSwitch(syn.subTitles, itemIndex)
+                              "
+                            />
+                          </div>
+                          <div class="flex items-center px-2 flex-wrap">
+                            <UButton
+                              v-for="(sub, subIndex) in syn.subTitles"
+                              :disabled="!syn.enable"
+                              :key="subIndex"
+                              type="button"
+                              @click="
+                                onUpdateSubTitle(sub, itemIndex, subIndex)
+                              "
+                              class="me-2.5 mb-3.5 promotion-item"
+                              :class="{ active: sub.active }"
+                            >
+                              {{ sub.title }}
+                              <!-- <UIcon name="i-haditha-close-bg-circle" size="12px"> </UIcon> -->
+                            </UButton>
+
+                            <UButton
+                              v-if="syn.enable && !syn.enableForm"
+                              type="button"
+                              @click="syn.enableForm = true"
+                              class="me-2.5 mb-3.5 add-button"
+                              :class="{ active: syn.enable }"
+                              icon="i-haditha-add"
+                            >
+                            </UButton>
+                            <UForm
+                              v-if="syn.enable && syn.enableForm"
+                              :schema="schema"
+                              :state="AutoComplationState"
+                              class="w-25 me-2.5 mb-3.5"
+                            >
+                              <UFormField name="name" size="md">
+                                <UInput
+                                  v-model="Formstate.name"
+                                  placeholder="بنویسید ..."
+                                  @keyup.enter="onAddNewTitle(syn.subTitles)"
+                                >
+                                  <template v-if="syn.enableForm" #trailing>
+                                    <UButton
+                                      color=""
+                                      variant=""
+                                      size="sm"
+                                      icon="i-lucide-x"
+                                      aria-label="Clear input"
+                                      @click="syn.enableForm = false"
+                                    />
+                                  </template>
+                                </UInput>
+                              </UFormField>
+                            </UForm>
+                          </div>
+                        </div>
+
+                        <USeparator
+                          class="px-2"
+                          color="neutral"
+                          type="solid"
+                          size="xs"
+                        />
+                      </template>
+                    </template>
+                  </UPopover>
+                  <!-- #endregion -->
+                  <!-- #region ترجمه -->
+                  <!-- <UButton
+          @click.self="setKey('hadith_fa')"
+          :class="{ active: type_key == 'hadith_fa' }"
+          type="button"
+          class="filter-item"
+        >
+          {{ state.type_key.label }}
+
+          <UIcon
+            v-if="type_key == 'hadith_fa'"
+            @click.self="setKey('hadith')"
+            name="i-haditha-close-bg-circle"
+            size="20px"
+          >
+          </UIcon>
+        </UButton> -->
+                  <!-- #endregion -->
+                  <!-- #region  عین عبارت -->
+                  <UButton
+                    @click.self="setType('phrase')"
+                    :class="{ active: search_type == 'phrase' }"
+                    class="filter-item"
+                  >
+                    {{ AutoComplationState.phrase.label }}
+                    <UIcon
+                      v-if="search_type == 'phrase'"
+                      @click.self="setType('normal')"
+                      name="i-haditha-close-bg-circle"
+                      size="20px"
+                    >
+                    </UIcon>
+                  </UButton>
+                  <!-- #endregion -->
+                </div>
+
+                <!-- #region نوع -->
+                <div class="ms-2">
+                  <USelect
+                    :items="AutoComplationState.type.items"
+                    :content="{
+                      align: 'start',
+                      side: 'bottom',
+                      sideOffset: 8,
+                    }"
+                    :ui="{
+                      content: 'w-48',
+                    }"
+                    class="filter-item"
+                    :class="{
+                      active: AutoComplationState.type.value == 'hadith',
+                    }"
+                    v-model="typeModelValue"
+                    trailing-icon=""
+                    value-key="value"
+                    @update:modelValue="onTypeSelectChanged"
+                  >
+                    <!--   <UButton
+            class="filter-item"
+            :label="state.type.label"
+            trailingIcon="i-haditha-dropdown-chevron-down"
+            :class="{
+              active:
+                search_type == 'arabic' ||
+                search_type == 'translations' ||
+                search_type == 'descriptions',
+            }"
+          >
+            {{ state.type.label }}
+
+             <UIcon
+              v-if="
+                search_type == 'arabic' ||
+                search_type == 'translations' ||
+                search_type == 'descriptions'
+              "
+              @click.self="closeTypeDropdown"
+              name="i-haditha-close-bg-circle"
+              size="20px"
+            >
+            </UIcon> 
+          </UButton>-->
+
+                    <!-- <template #item> item </template> -->
+                    <!-- <template #item-label> item label </template> -->
+                  </USelect>
+                </div>
+                <!-- #endregion -->
+              </div>
+            </div>
           </div>
           <div
-            v-if="searchQuery?.length == 0"
+            v-if="searchTerm?.length == 0"
             class="flex justify-center flex-col items-center mt-10"
           >
             <img
@@ -105,29 +755,33 @@ const SearchList = defineAsyncComponent(() =>
             </div>
           </div>
 
-          <!-- <no-data
-            class="h-full"
-            v-if="searchQuery?.length && state.searchList?.length == 0"
-          >
-            <img
-              fit="auto"
-              quality="80"
-              placeholder
-              src="/img/haditha/no-data.png"
-            />
-            <p class="no-data-text">نتیجه‌ای یافت نشد!</p>
-          </no-data> -->
           <div
-            v-if="searchQuery?.length"
+            v-if="loadedItems.length"
             class="search-box-container pb-0 bg-white flex justify-center"
           >
-            <search-list
-              no-data-text="نتیجه‌ای یافت نشد!"
-              no-data-icon="/img/haditha/no-data.png"
-              :total="total"
-              :list="state.searchList"
-            ></search-list>
+            <div class="search-list-contianer">
+              <div class="total">
+                <span>{{ total }}</span>
+                نتیجه
+              </div>
+
+              <div ref="el" class="search-list firefox-scrollbar">
+                <search-list
+                  no-data-text="نتیجه‌ای یافت نشد!"
+                  no-data-icon="/img/haditha/no-data.png"
+                  :total="total"
+                  :list="loadedItems"
+                ></search-list>
+              </div>
+            </div>
           </div>
+          <no-data
+            class="h-full w-full flex flex-col justify-center items-center"
+            v-else
+          >
+            <img fit="auto" quality="80" src="/img/haditha/no-data.png" />
+            <p class="no-data-text">"نتیجه‌ای یافت نشد!</p>
+          </no-data>
         </div>
       </div>
     </div>
@@ -177,4 +831,339 @@ const SearchList = defineAsyncComponent(() =>
     padding-bottom: 0 !important;
   }
 }
+
+.search-list-contianer {
+  max-width: 41em; /*656px*/
+  width: 100%;
+  margin: 0 1em;
+
+  .total {
+    padding: 0.5em 1.8em;
+
+    font-family: IRANSansX;
+    font-weight: 400;
+    font-size: 0.68rem; /*11px*/
+    line-height: 1rem;
+    letter-spacing: 0%;
+    text-align: right;
+    color: #b4c2cf;
+  }
+  .search-list {
+    padding: 1em 1.3em;
+    height: calc(100dvh - 16em);
+    overflow-y: auto;
+
+    &.hadithaFavorites {
+      height: calc(100dvh - 8em);
+    }
+
+    &:not(:last-child) {
+      border-bottom: 0.3px solid #d9d9d9;
+    }
+  }
+}
+
+.haditha-search-root-wrapper {
+  max-width: 656px;
+  width: 100%;
+  margin: 0 1em;
+
+  .haditha-search-root {
+    position: relative;
+
+    &::before {
+      content: "";
+      content: none;
+
+      position: absolute;
+      left: 1em;
+      right: 1em;
+      top: 50%;
+
+      backdrop-filter: blur(60px);
+      background: linear-gradient(137.41deg, #ffffff -42.82%, #e5e0ff 87.9%);
+      filter: blur(60px);
+      max-width: 626px;
+      width: 100%;
+      height: 68px;
+      z-index: 0;
+    }
+
+    .prev-search-item {
+      width: 328;
+      height: 49;
+      gap: 6px;
+      border-radius: 12px;
+      border-width: 0.5px;
+      padding-top: 8px;
+      padding-right: 12px;
+      padding-bottom: 8px;
+      padding-left: 12px;
+      background: #626b84;
+      border: 0.5px solid;
+      margin-bottom: 0.7em;
+
+      border-image-source: linear-gradient(
+        102.02deg,
+        #4be8ae 7.38%,
+        #00a762 91.78%
+      );
+
+      .total {
+        width: 53;
+        height: 24;
+        gap: 4px;
+        border-radius: 6px;
+        padding: 5px 7px;
+        background: #1b213266;
+
+        font-family: IRANSansX;
+        font-weight: 500;
+        font-size: 10px;
+        line-height: 15px;
+        letter-spacing: 0%;
+        text-align: right;
+        color: #ffffff;
+      }
+      .text {
+        font-family: Takrim;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 32px;
+        letter-spacing: 0%;
+        text-align: right;
+        color: #ffffff;
+      }
+      .clear-similar-btn {
+        width: 32px;
+        height: 32px;
+        gap: 4px;
+        border-radius: 60px;
+        padding-top: 11px;
+        padding-right: 6px;
+        padding-bottom: 11px;
+        padding-left: 6px;
+        background: #1b213266;
+        color: #fff;
+      }
+    }
+
+    .search-input {
+      position: relative;
+    }
+  }
+}
+</style>
+
+<style>
+.haditha-search-root-wrapper {
+  .my-trailing-button {
+    position: absolute;
+
+    z-index: 1;
+    width: 48px;
+    height: 48px;
+    justify-content: center;
+    align-items: center;
+
+    padding: 0;
+    border-radius: 50px;
+    background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
+    left: 12px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+      transition: all 0.2s ease-in-out;
+      background: linear-gradient(320.71deg, #54ecaa 6.56%, #b6f0d9 69.69%);
+    }
+
+    & > span {
+      /* width: 18px; */
+      /* height: 18px; */
+
+      /* background-image: linear-gradient(
+        102.02deg,
+        #4be8ae 7.38%,
+        #00a762 91.78%
+      ); */
+    }
+  }
+  .close-mode {
+    background: #f0f1f4;
+    color: #000; /* رنگ خاکستری */
+    &:hover {
+      background: #e0e0e0; /* رنگ خاکستری */
+    }
+  }
+  .haditha-search-input {
+    z-index: 0;
+
+    height: 72px;
+    justify-content: space-between;
+    padding-top: 12px;
+    /* padding-right: 12px; */
+    padding-bottom: 12px;
+    padding-left: 12px;
+    border-radius: 12px;
+    border-width: 0.3px;
+
+    background-color: #fff;
+    border: 0.3px solid #e0e0e0;
+    box-shadow: 0px 1px 4px 0px #0000000d;
+
+    font-family: IRANSansX;
+    font-weight: 300;
+    font-size: 14px;
+    line-height: 21px;
+    letter-spacing: 0%;
+    text-align: right;
+    color: #a7acbe;
+  }
+  .search-filter {
+    .filter-item {
+      /* width: 81px; */
+      height: 40px;
+      border-radius: 12px;
+      border-width: 0.3px;
+      padding-top: 8px;
+      padding-right: 12px;
+      padding-bottom: 8px;
+      padding-left: 12px;
+      gap: 4px;
+      background-color: #fff;
+      border: 0.3px solid #e0e0e0;
+      box-shadow: 0px 1px 4px 0px #0000000d;
+      color: #8a92a8;
+      font-family: IRANSansX;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 20px;
+      letter-spacing: 0%;
+      text-align: right;
+
+      &.active {
+        background-image: linear-gradient(
+          102.02deg,
+          #4be8ae 7.38%,
+          #00a762 91.78%
+        );
+
+        border-color: #4be8ae;
+        color: #fff;
+        box-shadow: none;
+      }
+    }
+  }
+
+  &.search-page {
+    .haditha-search-root {
+      &::before {
+        content: none;
+      }
+      .my-trailing-button {
+        width: 40px;
+        height: 40px;
+
+        span.iconify {
+          width: 25px;
+          height: 25px;
+        }
+      }
+      .haditha-search-input {
+        height: 56px;
+      }
+    }
+  }
+}
+.popover-root-content {
+  overflow-y: auto;
+  width: 20.5em;
+  height: 17.75em;
+  /* gap: 8px; */
+  /* border-radius: 16px; */
+  border-width: 0.3px;
+  /* padding-top: 16px; */
+  /* padding-right: 8px; */
+  /* padding-bottom: 16px; */
+  /* padding-left: 8px; */
+  background: #ffffff;
+  border: 0.3px solid #e0e0e0;
+  box-shadow: 0px 8px 20px 0px #0000001a;
+
+  .synonymItem {
+    .title {
+      font-family: IRANSansX;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 100%;
+      letter-spacing: 0%;
+      text-align: center;
+      vertical-align: middle;
+      color: #8a92a8;
+    }
+    /* border-bottom: 1px solid #d9d9d9; */
+
+    .promotion-item {
+      width: 52.599998474121094;
+      height: 36;
+      gap: 4px;
+      border-radius: 8px;
+      border-width: 0.3px;
+      padding-top: 11px;
+      padding-right: 12px;
+      padding-bottom: 11px;
+      padding-left: 12px;
+      border: 0.3px solid #d9d9d9;
+      background: #f0f1f4;
+
+      font-family: IRANSansX;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 100%;
+      letter-spacing: 0%;
+      text-align: right;
+      color: #626b84;
+
+      &.active {
+        background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
+        border: 0.3px solid #29d985;
+        color: #626b84;
+      }
+
+      &[disabled="true"] {
+        filter: grayscale(0.7);
+      }
+    }
+    .add-button {
+      width: 48;
+      height: 36;
+      gap: 4px;
+      border-radius: 8px;
+      border-width: 1px;
+      padding-right: 11px;
+      padding-left: 11px;
+      background: #ffffff;
+      border: 1px solid #f0f1f4;
+
+      color: #8a92a8;
+    }
+  }
+}
+
+@media screen and (max-width: 719.99px) {
+  .haditha-search-root-wrapper {
+    .search-filter {
+      /* width: 361px; */
+      overflow-x: auto;
+      white-space: nowrap;
+      width: 92dvw;
+    }
+  }
+}
+
+/* @media scrren and (min-width: 720px) and (max-width: 991.99px) {
+} */
 </style>
diff --git a/stores/hadithaStore.ts b/stores/hadithaStore.ts
index ebb5937..0fe7188 100644
--- a/stores/hadithaStore.ts
+++ b/stores/hadithaStore.ts
@@ -1,228 +1,18 @@
-import type {
-  activeSearchChartSchema,
-  activeSearchListSchema,
-  Domain,
-  helpActiveSchema,
-  helpSchema,
-  searchActiveTab,
-  searchChartActiveTab,
-  searchListActiveTab,
-  searchSchema,
-  searchSynonymForm,
-  searchSynonymTitle,
-  selectionFilterItems,
-} from "~/types/searchTypes";
-
-import type {
-  isReturnFromItemshowPage,
-  list,
-  listComponentName,
-  listId,
-  projects,
-  selectedItem,
-  selectedProject,
-} from "~/types/listTypes";
-
 export const useHadithaStore = defineStore("hadithaStore", {
   persist: {
     storage: piniaPluginPersistedstate.localStorage(),
-  },  state: () => ({
-    selectedProject: undefined as selectedProject | undefined,
-    isReturnFromItemshowPage: false as isReturnFromItemshowPage,
-    list: undefined as list | undefined,
-    listId: undefined as listId | undefined,
-    listComponentName: "ItemList" as listComponentName | undefined,
-    projects: [] as projects[],
-    // pieData: [],
-    selectedItem: undefined as selectedItem | undefined,
-
-
-    domainActive: undefined as Domain | undefined,
-    // activeTab: undefined,
-
-    searchActiveTab: undefined as searchActiveTab | undefined,
-    searchSchema: undefined as searchSchema | undefined,
-    helpSchema: undefined as helpSchema | undefined,
-    searchActiveSchema: undefined as searchActiveTab | undefined,
-    helpActiveSchema: undefined as helpActiveSchema | undefined,
-
-    searchListActiveTab: undefined as searchListActiveTab | undefined,
-    searchListSchema: undefined as searchListActiveTab[] | undefined,
-    activeSearchListSchema: undefined as activeSearchListSchema | undefined,
-
-    searchChartActiveTab: undefined as searchChartActiveTab | undefined,
-    searchChartSchema: undefined as searchChartActiveTab[] | undefined,
-    activeSearchChartSchema: undefined as activeSearchChartSchema | undefined,
-
-    searchSynonymTitle: undefined as searchSynonymTitle | undefined,
-    searchSynonymForm: undefined as searchSynonymForm | undefined,
-
-    selectionFilterItems: [] as selectionFilterItems,
+  },
+  state: () => ({
+    searchPhrase: "" as string,
   }),
   getters: {
-    projectsGetter(state) {
-      return state.projects;
-    },
-    selectedProjectGetter(state) {
-      return state.selectedProject;
-    },
-    listIdGetter(state) {
-      return state.listId;
-    },
-    listComponentNameGetter(state) {
-      return state.listComponentName;
-    },
-    selectedItemGetter(state) {
-      return state.selectedItem;
-    },
-    isReturnFromItemshowPageGetter(state) {
-      return state.isReturnFromItemshowPage;
-    },
-    listGetter(state) {
-      return state.list;
-    },
-
-    searchSynonymTitleGetter(state) {
-      return state.searchSynonymTitle;
-    },
-    searchSynonymFormGetter(state) {
-      return state.searchSynonymForm;
-    },
-
-    domainActiveGetter(state) {
-      return state.domainActive;
-    },
-    // activeTabGetter(state) {
-    //   return state.activeTab;
-    // },
-
-    // search page
-    searchActiveTabGetter(state) {
-      return state.searchActiveTab;
-    },
-    searchSchemaGetter(state) {
-      return state.searchSchema;
-    },
-    helpSchemaGetter(state) {
-      return state.helpSchema;
-    },
-    helpActiveSchemaGetter(state) {
-      return state.helpActiveSchema;
-    },
-    searchActiveSchemaGetter(state) {
-      return state.searchActiveSchema;
-    },
-
-    // search list
-    searchListActiveTabGetter(state) {
-      return state.searchListActiveTab;
-    },
-    searchListSchemaGetter(state) {
-      return state.searchListSchema;
-    },
-    searchListActiveSchemaGetter(state) {
-      return state.activeSearchListSchema;
-    },
-
-    // search chart
-    searchChartActiveTabGetter(state) {
-      return state.searchChartActiveTab;
-    },
-    searchChartSchemaGetter(state) {
-      return state.searchChartSchema;
-    },
-    searchChartActiveSchemaGetter(state) {
-      return state.activeSearchChartSchema;
-    },
-    selectionFilterItemsGetter(state) {
-      return state.selectionFilterItems;
+    searchPhraseGetter(state) {
+      return state.searchPhrase;
     },
   },
   actions: {
-    SET_SELECTED_PROJECT(selectedProject = undefined) {
-      this.selectedProject = selectedProject;
-    },
-    SET_LIST_ID(listId = undefined) {
-      this.listId = listId;
-    },
-    SET_LIST_COMPONENT_NAME(
-      payload = { selectedItem: undefined, listComponentName: undefined }
-    ) {
-      this.selectedItem = payload.selectedItem;
-      this.listComponentName = payload.listComponentName;
-    },
-    SET_SELECTED_ITEM(selectedItem = undefined) {
-      this.selectedItem = selectedItem;
-    },
-    SET_IS_RETURN_FROM_ITEM_SHOW_PAGE(isReturnFromItemshowPage = false) {
-      this.isReturnFromItemshowPage = isReturnFromItemshowPage;
-    },
-    SET_LIST(list = undefined) {
-      this.list = list;
-    },
-    
-    searchSynonymFormSetter(searchSynonymForm = undefined) {
-      this.searchSynonymForm = searchSynonymForm;
-    },
-    searchSynonymTitleSetter(searchSynonymTitle = undefined) {
-      this.searchSynonymTitle = searchSynonymTitle;
-    },
-
-    domainActiveSetter(domain = undefined) {
-      this.domainActive = domain;
-    },
-    // activeTabSetter(activeTab = undefined) {
-    //   this.activeTab = activeTab;
-    // },
-
-    // search page
-    searchActiveTabSetter(searchActiveTab: searchActiveTab = undefined) {
-      this.searchActiveTab = searchActiveTab;
-    },
-    searchSchemaSetter(searchSchema = undefined) {
-      this.searchSchema = searchSchema;
-    },
-    helpSchemaSetter(helpSchema = undefined) {
-      this.helpSchema = helpSchema;
-    },
-    helpActiveSchemaSetter(helpActiveSchema = undefined) {
-      this.helpActiveSchema = helpActiveSchema;
-    },
-    searchActiveSchemaSetter(searchActiveSchema = undefined) {
-      this.searchActiveSchema = searchActiveSchema;
-    },
-
-    // search list
-    searchListActiveTabSetter(searchListActiveTab = undefined) {
-      this.searchListActiveTab = searchListActiveTab;
-    },
-    searchListSchemaSetter(searchListSchema = undefined) {
-      this.searchListSchema = searchListSchema;
-    },
-    searchListActiveSchemaSetter(activeSearchListSchema = undefined) {
-      this.activeSearchListSchema = activeSearchListSchema;
-    },
-
-    // search chart
-    searchChartActiveTabSetter(searchChartActiveTab = undefined) {
-      this.searchChartActiveTab = searchChartActiveTab;
-    },
-    searchChartSchemaSetter(searchChartSchema = undefined) {
-      this.searchChartSchema = searchChartSchema;
-    },
-    searchChartActiveSchemaSetter(activeSearchChartSchema = undefined) {
-      this.activeSearchChartSchema = activeSearchChartSchema;
-    },
-    selectionFilterItemsSetter(selectionFilterItems = []) {
-      this.selectionFilterItems = <selectionFilterItems>selectionFilterItems;
+    searchPhraseSetter(newVal = "") {
+      this.searchPhrase = newVal;
     },
   },
 });
-// export default {
-//   namespaced:true,
-
-//   state,
-//   actions,
-//   mutations,
-//   getters
-// };
diff --git a/types/hadithType.ts b/types/hadithType.ts
index b5fae3d..43fcc77 100644
--- a/types/hadithType.ts
+++ b/types/hadithType.ts
@@ -358,4 +358,16 @@ export interface Root {
   _score: any
   _source: Source
   sort: number[]
-}
\ No newline at end of file
+}
+
+export type Synonym = {
+  title: string;
+  enable: boolean;
+  enableForm: boolean;
+  subTitles: [
+    {
+      title: string;
+      active: boolean;
+    }
+  ];
+};
\ No newline at end of file