diff --git a/apis/hadithaApi.js b/apis/hadithaApi.js
index c8c8d44..486f782 100644
--- a/apis/hadithaApi.js
+++ b/apis/hadithaApi.js
@@ -1,7 +1,7 @@
 export default {
   search: {
     list: "repo/monir/search/@index_key/@search_type/@type_key/@listkey/@field_collapsed/@offset/@limit/@q=none",
-    show: "repo/public/get/byid/@index_key/@id",
+    show: "repo/public/get/byid/@index_key/@id/tbookmark",
     synonym: "synonym/get/words",
     prevNextHadith: "monir/next/@index_key/@vol_id/@parag_order/@step",
     getDataTree: "@appname/book/tree/@offset/@limit/@vol_id/@q"
diff --git a/components/haditha/AutoComplation.vue b/components/haditha/AutoComplation.vue
index 2eebabb..d8da47a 100644
--- a/components/haditha/AutoComplation.vue
+++ b/components/haditha/AutoComplation.vue
@@ -56,7 +56,7 @@ const search_type = ref("normal");
 const type_key = ref("hadith");
 const typeModelValue = ref("normal");
 const typeModelValueFa = ref("");
-const showclearButton = ref(false);
+// const showclearButton = ref(false);
 
 // If you want to share state across multiple components,
 // you can use the same key in useState. Nuxt will ensure
@@ -168,17 +168,17 @@ const clearSimilar = () => {
 // const onUpdateModel = (newVal: boolean | InputMenuItem | any) => {
 //   console.info("onUpdateModel", newVal);
 // };
-const searchButtonIcon = computed(() => {
-  return showclearButton.value ? "i-lucide-x" : "i-haditha-search";
-});
+// const searchButtonIcon = computed(() => {
+//   return showclearButton.value ? "i-lucide-x" : "i-haditha-search";
+// });
 
-const handleSearchClearButton = ()=>{
-  showclearButton.value = true;
-  sendQuery();
-}
+// const handleSearchClearButton = ()=>{
+//   showclearButton.value = true;
+//   sendQuery();
+// }
 
 const onKeyDown = () => {
-  showclearButton.value = false;
+  // showclearButton.value = false;
   // clearTimeout(typingTimer.value);
 };
 
@@ -234,6 +234,12 @@ const sendQuery = async (payload = {}) => {
   return await httpService
     .postRequest(url, payload)
     .then((res) => {
+      emit("response-ready", {
+        res: res,
+        searchQuery: searchTerm.value,
+        disableAutoRedirect: true,
+      });
+
       // pass res and search query to the parent.
 
       loading.value = false;
@@ -243,31 +249,29 @@ const sendQuery = async (payload = {}) => {
       // close the history dropdown menu
       open.value = false;
 
-
-      
       // show clear button
-      if (showclearButton.value) {
-        searchTerm.value = "";
+      // if (showclearButton.value) {
+      //   searchTerm.value = "";
 
-        emit("response-ready", {
-          res: {
-            hits:{
-              total:0,
-              hits:[]
-            }
-          },
-          searchQuery: searchTerm.value,
-          disableAutoRedirect: true,
-        });
-      } else {
-        emit("response-ready", {
-          res: res,
-          searchQuery: searchTerm.value,
-          disableAutoRedirect: true,
-        });
-      }
-      
-      showclearButton.value = !showclearButton.value;
+      //   emit("response-ready", {
+      //     res: {
+      //       hits:{
+      //         total:0,
+      //         hits:[]
+      //       }
+      //     },
+      //     searchQuery: searchTerm.value,
+      //     disableAutoRedirect: true,
+      //   });
+      // } else {
+      //   emit("response-ready", {
+      //     res: res,
+      //     searchQuery: searchTerm.value,
+      //     disableAutoRedirect: true,
+      //   });
+      // }
+
+      // showclearButton.value = !showclearButton.value;
 
       // store search phrase
       useStorage("searchPhrase", searchTerm.value);
@@ -444,10 +448,10 @@ onMounted(() => {
       </div>
       <UButton
         class="my-trailing-button"
-        :class="{ 'close-mode': showclearButton }"
-        @click.prevent="handleSearchClearButton"
-        :icon="searchButtonIcon"
+        @click.prevent="sendQuery"
+        icon="i-haditha-search"
       >
+        <!-- // @click.prevent="handleSearchClearButton" // :icon="searchButtonIcon" -->
         <!-- <UIcon  name="i-lucide-search" /> -->
       </UButton>
       <!-- </client-only> -->
@@ -605,7 +609,7 @@ onMounted(() => {
           {{ state.phrase.label }}
           <UIcon
             v-if="search_type == 'phrase'"
-            @click.self="search_type = 'normal'"
+            @click.self="setType('normal')"
             name="i-haditha-close-bg-circle"
             size="20px"
           >
diff --git a/components/haditha/CardList.vue b/components/haditha/CardList.vue
index 11fade0..b156171 100644
--- a/components/haditha/CardList.vue
+++ b/components/haditha/CardList.vue
@@ -33,6 +33,7 @@ const goToLibraryShow = (item) => {
   <UCard
     v-if="props.list?.length"
     v-for="(item, index) in props.list"
+     class="mx-auto"
     :key="index"
     variant="solid"
     :ui="{
@@ -114,5 +115,16 @@ const goToLibraryShow = (item) => {
     text-align: right;
     color: #444444;
   }
+  @media screen and (max-width: 719.99px) {
+    .library-list {
+      height: calc(100dvh - 13em);
+    }
+
+    .page-header {
+      margin-top: 4em;
+      margin-right: 2em;
+      margin-bottom: 1em;
+    }
+  }
 }
 </style>
diff --git a/components/haditha/NavigationMenu.vue b/components/haditha/NavigationMenu.vue
index 230a43f..e144e05 100644
--- a/components/haditha/NavigationMenu.vue
+++ b/components/haditha/NavigationMenu.vue
@@ -126,7 +126,7 @@ const leftItem = computed(() => [
 
 const isMobile = ref(false);
 const rerenderNavigation = ref(1);
-const { isAuthenticatedGetter } = useAuthStore();
+const { isAuthenticatedGetter, isRealUserGetter } = useAuthStore();
 
 const setMenu = () => {
   if (isAuthenticatedGetter) {
@@ -152,6 +152,9 @@ const setMenu = () => {
 
 setMenu();
 
+// if(!(isAuthenticatedGetter && isRealUserGetter))
+// items.value = items.value.filter((item) => item.to != "/haditha/favorites");
+
 onMounted(() => {
   if (window?.outerWidth < 991) {
     isMobile.value = true;
@@ -340,7 +343,7 @@ onMounted(() => {
   }
 }
 
-@media screen and (max-width: 719.99px) {
+@media screen and (max-width: 991.99px) {
   .fixed {
     .my-navbar {
       height: 4.8em; // 76px;
diff --git a/components/haditha/search-page/SearchList.vue b/components/haditha/search-page/SearchList.vue
index 0b047e8..5223b10 100644
--- a/components/haditha/search-page/SearchList.vue
+++ b/components/haditha/search-page/SearchList.vue
@@ -1,4 +1,6 @@
 <script setup>
+import hadithaApi from "@haditha/apis/hadithaApi";
+const httpService = useNuxtApp()["$http"];
 const props = defineProps({
   list: {
     default() {
@@ -16,6 +18,7 @@ const props = defineProps({
   },
 });
 const router = useRouter();
+const route = useRoute();
 
 // const modal = useModal();
 // const isModalOpen = ref(false);
@@ -24,7 +27,7 @@ function openModal(selectedItem) {
   // modal.open(SearchShow, { title: "Welcome" });
   // isModalOpen.value = true;
 
-  const slug = selectedItem._source.content
+  const slug = selectedItem?._source?.content
     .split(" ")
     .filter((v, i) => i < 4)
     .join("-");
@@ -32,7 +35,7 @@ function openModal(selectedItem) {
   router.push({
     name: "hadithaSearchShow",
     params: {
-      id: selectedItem._source.id,
+      id: selectedItem?._source?.id,
       slug: slug,
     },
     query: {
@@ -55,44 +58,83 @@ function openModal(selectedItem) {
 // const SearchShow = defineAsyncComponent(() =>
 //   import("@haditha/components/haditha/search-page/SearchShow.vue")
 // );
+const removeFromFavorites = async (item = {}, index = 0) => {
+  let url = repoUrl() + hadithaApi.favorite.deleteByRefid;
+  url = url.replace("{{data_type}}", "bookmark");
+  url = url.replace("{{index_key}}", "dhparag");
+  url = url.replace("{{ref_id}}", item._id);
+
+  const formData = {
+    ref_id: item._id,
+    title: item?._source?.title,
+  };
+  httpService.postRequest(url, formData).then((res) => {
+    // this.updateListAnswer(index, "tbookmark", 0);
+  });
+};
 </script>
 
 <template>
-  <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"
+      >
+        <div class="flex justify-between mt-4 mb-2">
+          <a
+            :href="`/haditha/search/${item?._source?.id}/${
+              item?._source?.meta?.hadith_masoum ??
+              item?._source?.meta?.hadith_sanad
+            }`"
+            @click.prevent="openModal(item)"
+            class="from-person block"
+          >
+            {{
+              item?._source?.meta?.hadith_masoum ??
+              item?._source?.meta?.hadith_sanad
+            }}
+          </a>
+          <UButton
+            v-if="route.name == 'hadithaFavorites'"
+            @click="removeFromFavorites(item)"
+            variant="ghost"
+            color="error"
+            class="copy-btn"
+            label="حذف"
+          />
+        </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>
+        <a
+          @click.prevent="openModal(item)"
+          class="arabic-text block"
+          :href="`/haditha/search/${item?._source?.id}/${item?._source?.content_ar}`"
+        >
+          {{ item?._source?.content_ar }}
+        </a>
+        <a
+          @click.prevent="openModal(item)"
+          :href="`/haditha/search/${item?._source?.id}/${item?._source?.content}`"
+          class="persian-text block"
+          v-html="item?.highlight?.['content.fa'] ?? item?._source?.content"
+        ></a>
+        <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>
+    </div>
 
   <!-- <UModal
       v-model:open="isModalOpen"
@@ -147,11 +189,77 @@ function openModal(selectedItem) {
     color: var(--ui-color-two);
     margin-bottom: 0.5em;
 
-    &:hover,
-    &:focus,
-    &:active {
-      cursor: pointer;
-      background-color: #fafafa;
+    .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;
+        }
+      }
     }
   }
   .persian-text {
@@ -177,8 +285,8 @@ function openModal(selectedItem) {
 
     font-family: IRANSansX;
     font-weight: 300;
-    font-size: 0.625rem; /*10px*/
-    line-height: 0.9rem; /*15px*/
+    font-size: 1rem;
+    line-height: 1.5rem; /*24px*/
     letter-spacing: 0%;
     text-align: right;
     color: #8a92a8;
@@ -267,4 +375,28 @@ function openModal(selectedItem) {
 .modal-overlay {
   background: #00000033;
 }
-</style> -->
+.copy-btn {
+  padding: 0.2em 1em;
+
+  /* width: 44px; */
+  /* height: 24px; */
+  gap: 4px;
+  border-radius: 6px;
+  border-width: 0.5px;
+  padding-top: 4px;
+  padding-right: 12px;
+  padding-bottom: 4px;
+  padding-left: 12px;
+  /* background: #ffffff; */
+  /* border: 0.5px solid #d9d9d9; */
+
+  font-family: IRANSansX;
+  font-weight: 300;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0%;
+  text-align: right;
+
+  /* color: #a71111; */
+}
+</style>
diff --git a/pages/haditha/library/[id]/[slug]/index.vue b/pages/haditha/library/[id]/[slug]/index.vue
index 063f863..e92e5c2 100644
--- a/pages/haditha/library/[id]/[slug]/index.vue
+++ b/pages/haditha/library/[id]/[slug]/index.vue
@@ -15,6 +15,9 @@ const router = useRouter();
 import hadithaApi from "@haditha/apis/hadithaApi";
 import type { HadithResponseModel, Hits } from "@haditha/types/hadithType";
 import type { Hit } from "~/systems/hadith_ui/types/hadithType";
+import headLinks from "@haditha/json/haditha/headLinks";
+import headMetas from "@haditha/json/haditha/headMetas";
+
 // #endregion imports
 
 // #region meta
@@ -28,94 +31,12 @@ useHead({
   title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | ${route.params.slug}`,
   meta: [
     { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
-    {
-      name: "msapplication-TileImage",
-      content: "/img/haditha/fav-icons/ms-icon-144x144.png",
-    },
-    { name: "theme-color", content: "#ffffff" },
+    ...headMetas,
   ],
   bodyAttrs: {
     class: import.meta.env.VITE_HADITH_SYSTEM,
   },
-  link: [
-    {
-      rel: "icon",
-      type: "image/x-icon",
-      href: "/img/haditha/fav-icons/favicon.ico",
-    },
-    { rel: "manifest", href: "/img/haditha/fav-icons/manifest.json" },
-    // rel: icon
-    {
-      rel: "icon",
-      type: "image/png",
-      sizes: "16x16",
-      href: "/img/haditha/fav-icons/favicon-16x16.png",
-    },
-    {
-      rel: "icon",
-      type: "image/png",
-      sizes: "32x32",
-      href: "/img/haditha/fav-icons/favicon-32x32.png",
-    },
-    {
-      rel: "icon",
-      type: "image/png",
-      sizes: "96x96",
-      href: "/img/haditha/fav-icons/favicon-96x96.png",
-    },
-    {
-      rel: "icon",
-      sizes: "192x192",
-      type: "image/png",
-      href: "/img/haditha/fav-icons/android-icon-192x192.png",
-    },
-    // rel: apple
-    {
-      rel: "apple-touch-icon",
-      sizes: "57x57",
-      href: "/img/haditha/fav-icons/apple-icon-57x57.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "60x60",
-      href: "/img/haditha/fav-icons/android-icon-60x60.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "72x72",
-      href: "/img/haditha/fav-icons/android-icon-72x72.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "76x76",
-      href: "/img/haditha/fav-icons/android-icon-76x76.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "114x114",
-      href: "/img/haditha/fav-icons/android-icon-114x114.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "120x120",
-      href: "/img/haditha/fav-icons/android-icon-120x120.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "144x144",
-      href: "/img/haditha/fav-icons/android-icon-144x144.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "152x152",
-      href: "/img/haditha/fav-icons/android-icon-152x152.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "180x180",
-      href: "/img/haditha/fav-icons/android-icon-180x180.png",
-    },
-  ],
+  link: headLinks,
 });
 // #endregion imports
 // #region props
@@ -155,6 +76,7 @@ const props = defineProps({
 const isModalOpen = ref(false);
 const loading = ref(false);
 const httpService = useNuxtApp()["$http"];
+const page_num = ref(1);
 
 const state = reactive({
   selectedItem: [] as Hit[],
@@ -214,27 +136,13 @@ const state = reactive({
 
 const pageIsLessThanOne = computed(() => {
   console.info("pageIsLessThanOne");
-  let isDisabled = true;
-  if (state.selectedItem.length)
-    return state.selectedItem[0]._source.address.page_num <= 1;
-  return isDisabled;
+  return page_num.value <= 1;
 });
 const pageIsBiggerThanTotal = computed(() => {
   console.info("pageIsBiggerThanTotal");
-
-  let isDisabled = true;
-  if (
-    state.selectedItem.length &&
-    state.selectedItem[0]._source.address.page_num
-  )
-    return (
-      state.selectedItem?.[0]._source.address.page_num + 1 >=
-      +route.query.page_count
-    );
-
-  return isDisabled;
+  const page_count = +route.query.page_count;
+  return page_num.value + 1 >= page_count;
 });
-const page_num = ref(1);
 // #endregion refs and reactives
 
 // #region methods
@@ -242,12 +150,16 @@ const fetchData = async () => {
   if (loading.value) return;
   loading.value = true;
 
+  let page_first = +route.query.page_first;
+  const volId = route.params.id;
+
   let url = repoUrl() + hadithaApi.library.show;
   url = url.replace("@appname", "monir");
-  url = url.replace("@page_start", route.query.page_first);
-  url = url.replace("@page_end", +route.query.page_first + 1);
-  url = url.replace("@vol_id", route.params.id.toString());
+  url = url.replace("@page_start", 0);
+  url = url.replace("@page_end", 1);
+  url = url.replace("@vol_id", volId);
 
+  console.info("urlurlurlurl", url);
   // fetch search list from backend(ssr)
   const { data, status, error, refresh, clear } =
     await useHadithaSearchComposable<HadithResponseModel>(url, {
@@ -292,45 +204,41 @@ const handlePagination = (
   if (loading.value) return;
   loading.value = true;
 
-  if (state.selectedItem?.length) {
-    const isPageBiggerThanOne =
-      state.selectedItem[0]._source.address.page_num + prevNextIndicator > 0;
-    const isPageLessThanTotal =
-      state.selectedItem[0]._source.address.page_num + prevNextIndicator <
-      +route.query.page_count;
+  const volId = route.params.id;
+  const page_count = +route.query.page_count;
+  const page_first = +route.query.page_first;
+  const isPageBiggerThanOne = +page_num.value + prevNextIndicator > 0;
+  const isPageLessThanTotal = +page_num.value + prevNextIndicator < page_count;
 
-    if (!(isPageBiggerThanOne && isPageLessThanTotal)) return;
-  }
+  if (!(isPageBiggerThanOne && isPageLessThanTotal)) return;
 
   let url = repoUrl() + hadithaApi.library.prevNextHadith;
   url = url.replace("@index_key", "dhparag");
-  url = url.replace("@vol_id", state.selectedItem?.[0]._source.address.vol_id);
-  url = url.replace(
-    "@page_num",
-    (pageNumber ?? state.selectedItem?.[0]._source.address.page_num).toString()
-  );
+  url = url.replace("@vol_id", volId);
+  url = url.replace("@page_num", (pageNumber ?? page_num.value).toString());
   url = url.replace("@step", prevNextIndicator.toString());
 
+  page_num.value += prevNextIndicator;
+
   httpService
     .getRequest(url)
     .then((res: HadithResponseModel) => {
       state.selectedItem = res.hits.hits;
-      page_num.value = res.hits.hits[0]._source.address.page_num ?? 1;
     })
     .finally(() => (loading.value = false));
 };
 const handlePageChange = () => {
-  handlePagination(1, page_num.value);
+  handlePagination(1, +page_num.value);
 };
 
 const getDataTree = () => {
-  let id = route.params.id;
+  const volId = route.params.id;
 
   let url = repoUrl() + hadithaApi.search.getDataTree;
   url = url.replace("@appname", "monir");
   url = url.replace("@offset", 0);
   url = url.replace("@limit", 10000);
-  url = url.replace("@vol_id", id);
+  url = url.replace("@vol_id", volId);
   url = url.replace("@q", "none");
 
   httpService.getRequest(url).then((res) => {
@@ -350,6 +258,9 @@ const prepareTreeData = (data) => {
 
 getDataTree();
 
+onMounted(() => {
+  page_num.value = +route.query.page_first;
+});
 // #endregion methods
 
 // components declaration
@@ -684,7 +595,7 @@ const UTree = defineAsyncComponent(
           display: flex;
           justify-content: center;
           align-items: center;
-          width: 3em /*36px*/;
+          width: 4em /*36px*/;
           height: 3em /*36px*/;
           gap: 4px;
           border-radius: 12px;
diff --git a/pages/haditha/library/index.vue b/pages/haditha/library/index.vue
index 9fbd86d..8d9bb3f 100644
--- a/pages/haditha/library/index.vue
+++ b/pages/haditha/library/index.vue
@@ -119,7 +119,10 @@ const CardList = defineAsyncComponent(
           <img fit="auto" quality="80" src="/img/haditha/haditha-title.svg" />
         </div>
 
-        <div ref="el" class="library-list grid grid-cols-5 gap-x-28 gap-y-12">
+        <div
+          ref="el"
+          class="library-list grid grid-cols-2 gap-x-15 gap-y-12 md:grid-cols-3 md:gap-x-28 md:gap-y-12 lg:grid-cols-5 lg:gap-x-28 lg:gap-y-12 mx-6"
+        >
           <!-- Client-side loaded content -->
           <card-list
             v-if="loadedItems.length"
@@ -139,6 +142,7 @@ const CardList = defineAsyncComponent(
   background: #f7fffd;
 
   .library-list-contianer {
+    height: 100%;
     margin-top: 10em;
     max-width: 1200px;
     width: 100%;
@@ -176,4 +180,19 @@ const CardList = defineAsyncComponent(
     }
   }
 }
+
+@media screen and (max-width: 991.99px) {
+  .search-box-container {
+    padding-top: 0em;
+  }
+  .library-list {
+    height: calc(100dvh - 13em);
+  }
+
+  .page-header {
+    margin-top: 4em;
+    margin-right: 2em;
+    margin-bottom: 1em;
+  }
+}
 </style>
diff --git a/pages/haditha/public-pages/about-us.vue b/pages/haditha/public-pages/about-us.vue
index c1487e4..b64f240 100644
--- a/pages/haditha/public-pages/about-us.vue
+++ b/pages/haditha/public-pages/about-us.vue
@@ -30,7 +30,9 @@ const NavigationMenu = defineAsyncComponent(() =>
       <UContainer class="page-inner-container sm:px-6 lg:px-4">
         <navigation-menu></navigation-menu>
 
-        <div class="page-header pt-38 pb-4 flex justify-between items-center">
+        <div
+          class="page-header pt-10 md:pt-10 lg:pt-38 pb-4 flex justify-between items-center"
+        >
           <div class="flex items-center">
             <h1 class="m-0 title">درباره</h1>
             <img
@@ -42,36 +44,36 @@ const NavigationMenu = defineAsyncComponent(() =>
           </div>
         </div>
 
-        <div class="page-content p-6">
+        <div class="page-content p-5">
           <p>
             حدیثا، یک موتور جستجوی پیشرفته و تخصصی در حوزه احادیث اسلامی است که
             با هدف دسترسی آسان و سریع به منابع معتبر حدیثی طراحی شده است. این
             پلتفرم، بستری است برای پژوهشگران، علاقه‌مندان به معارف اسلامی، و
             تمامی افرادی که به دنبال دسترسی به گنجینه ارزشمند احادیث نبوی و
             اهل‌بیت (علیهم‌السلام) هستند.
-  </p>
+          </p>
 
-  <p>
+          <p>
             ما در حدیثا تلاش می‌کنیم تا با بهره‌گیری از فناوری‌های نوین و منابع
             اصیل اسلامی، بهترین تجربه جستجو را به کاربران ارائه دهیم. تمامی
             محتوای این موتور جستجو از کتب معتبر حدیثی و منابع شناخته‌شده استخراج
             شده و با دقت علمی بالا سامان‌دهی شده است.
-  </p>
+          </p>
 
-  <p>اهداف ما شامل موارد زیر است:</p>
+          <p>اهداف ما شامل موارد زیر است:</p>
 
-  <ul class="list-disc list-inside">
-    <li>ارائه محتوای معتبر و دسته‌بندی‌شده از احادیث اسلامی.</li>
-    <li>تسهیل دسترسی به معارف اسلامی برای پژوهشگران و عموم مردم.</li>
-    <li>کمک به ترویج فرهنگ و اخلاق اسلامی از طریق انتشار احادیث.</li>
-  </ul>
+          <ul class="list-disc list-inside">
+            <li>ارائه محتوای معتبر و دسته‌بندی‌شده از احادیث اسلامی.</li>
+            <li>تسهیل دسترسی به معارف اسلامی برای پژوهشگران و عموم مردم.</li>
+            <li>کمک به ترویج فرهنگ و اخلاق اسلامی از طریق انتشار احادیث.</li>
+          </ul>
 
-  <p>
+          <p>
             ما به حریم خصوصی کاربران خود احترام می‌گذاریم و متعهد به ارائه
             خدماتی با کیفیت و دقیق هستیم. حدیثا پلی است میان شما و کلام گهربار
             اهل‌بیت و پیامبر اسلام (صلی‌الله‌علیه‌و‌آله).
-  </p>
-  <p>به خانواده حدیثا بپیوندید و در مسیر دانش و معرفت گام بردارید.</p>
+          </p>
+          <p>به خانواده حدیثا بپیوندید و در مسیر دانش و معرفت گام بردارید.</p>
         </div>
       </UContainer>
     </div>
@@ -97,17 +99,24 @@ const NavigationMenu = defineAsyncComponent(() =>
     }
 
     .page-content {
+      height: calc(100dvh - 13em);
+      overflow: auto;
       color: var(--ui-color-two);
 
-p {
-  font-family: IRANSansX;
-  font-weight: 300;
-  font-size: 14px;
-  line-height: 21px;
-  letter-spacing: 0%;
-  text-align: right;
-}
+      p {
+        font-family: IRANSansX;
+        font-weight: 300;
+        font-size: 14px;
+        line-height: 21px;
+        letter-spacing: 0%;
+        text-align: right;
+      }
     }
   }
 }
+@media screen and (max-width: 719.99px) {
+  .page-content{
+    height: calc(100dvh - 12em);
+  }
+}
 </style>
diff --git a/pages/haditha/public-pages/contactus.vue b/pages/haditha/public-pages/contactus.vue
index ba59456..7d6cd9f 100644
--- a/pages/haditha/public-pages/contactus.vue
+++ b/pages/haditha/public-pages/contactus.vue
@@ -32,7 +32,9 @@ const NavigationMenu = defineAsyncComponent(() =>
 
         <navigation-menu></navigation-menu>
 
-        <div class="page-header pt-38 pb-4 flex justify-between items-center">
+        <div
+          class="page-header  pt-10 md:pt-10 lg:pt-38  pb-4 flex justify-between items-center"
+        >
           <div class="flex items-center">
             <h1 class="m-0 title">تماس با ما</h1>
           </div>
@@ -89,8 +91,10 @@ const NavigationMenu = defineAsyncComponent(() =>
     left: 0;
     background-image: url("../../../assets/haditha/images/modal-top-bgi.png");
     backdrop-filter: blur(54px);
-    width: 447px;
-    height: 447px;
+    width: 100%;
+    max-width: 447px;
+    height: 100%;
+    max-height: 447px;
     top: 0;
     left: 0;
 
@@ -105,8 +109,11 @@ const NavigationMenu = defineAsyncComponent(() =>
     bottom: 0;
     background-image: url("../../../assets/haditha/images/modal-bttom-right-bgi.png");
     backdrop-filter: blur(54px);
-    width: 438px;
-    height: 238px;
+    width: 100%;
+
+    max-width: 438px;
+    height: 100%;
+    max-height: 238px;
     mix-blend-mode: Multiply;
     background-repeat: no-repeat;
     background-size: cover;
@@ -120,8 +127,11 @@ const NavigationMenu = defineAsyncComponent(() =>
     bottom: 0;
     left: 0;
 
-    width: 458px;
-    height: 239px;
+    width: 100%;
+    max-width: 458px;
+    height: 100%;
+
+    max-height: 239px;
     mix-blend-mode: Multiply;
     background-image: url("../../../assets/haditha/images/modal-bottom-left-bgi.png");
     background-repeat: no-repeat;
diff --git a/pages/haditha/public-pages/rules.vue b/pages/haditha/public-pages/rules.vue
index e138301..83aba9a 100644
--- a/pages/haditha/public-pages/rules.vue
+++ b/pages/haditha/public-pages/rules.vue
@@ -30,7 +30,9 @@ const NavigationMenu = defineAsyncComponent(() =>
       <UContainer class="page-inner-container sm:px-6 lg:px-4">
         <navigation-menu></navigation-menu>
 
-        <div class="page-header pt-38 pb-4 flex justify-between items-center">
+        <div
+          class="page-header pt-10 md:pt-10 lg:pt-38 pb-4 flex justify-between items-center"
+        >
           <div class="flex items-center">
             <h1 class="m-0 title">قوانین و مقررات</h1>
             <img
@@ -42,7 +44,7 @@ const NavigationMenu = defineAsyncComponent(() =>
           </div>
         </div>
 
-        <div class="page-content p-6">
+        <div class="page-content p-5">
           <ul class="list-decimal list-inside">
             <li>
               احترام به حقوق معنوی: تمامی محتواهای ارائه‌شده در این سایت متعلق
@@ -110,8 +112,9 @@ const NavigationMenu = defineAsyncComponent(() =>
     }
 
     .page-content {
+      height: calc(100dvh - 13em);
+      overflow: auto;
       color: var(--ui-color-two);
-
       ul li {
         font-family: IRANSansX;
         font-weight: 300;
@@ -123,4 +126,9 @@ const NavigationMenu = defineAsyncComponent(() =>
     }
   }
 }
+@media screen and (max-width: 719.99px) {
+  .page-content{
+    height: calc(100dvh - 12em);
+  }
+}
 </style>
diff --git a/pages/haditha/search/[id]/[slug]/index.vue b/pages/haditha/search/[id]/[slug]/index.vue
index 8a57b9a..fe3611d 100644
--- a/pages/haditha/search/[id]/[slug]/index.vue
+++ b/pages/haditha/search/[id]/[slug]/index.vue
@@ -132,6 +132,7 @@ const route = useRoute();
 const router = useRouter();
 const loading = ref(false);
 const httpService = useNuxtApp()["$http"];
+const toast = useToast();
 
 const state = reactive({
   selectedItem: {} as HadithResponseShowModel,
@@ -174,7 +175,13 @@ const goToTheChatbot = () => {
 };
 
 const handleFavorite = async () => {
-  addToFavorites(state.selectedItem);
+  if (state.selectedItem?._source?.tbookmark) {
+    await removeFromFavorites(state.selectedItem);
+    state.selectedItem._source.tbookmark = false;
+  } else {
+    await addToFavorites(state.selectedItem);
+    state.selectedItem._source.tbookmark = true;
+  }
 
   // // add
   // if (!state.selectedItem._source.tbookmark) {
@@ -196,6 +203,21 @@ const addToFavorites = async (item = {}) => {
   };
   httpService.postRequest(url, formData).then((res) => {
     // this.updateListAnswer(index, "tbookmark", 1);
+
+    try {
+      toast.add({
+        title: "انجام شد.",
+        description: "به نشان شده ها افزوده شد",
+        color: "success",
+      });
+    } catch (err) {
+      console.log(err.message);
+      toast.add({
+        title: "انجام شد.",
+        description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
+        color: "error",
+      });
+    }
   });
 };
 
@@ -211,6 +233,21 @@ const removeFromFavorites = async (item = {}, index = 0) => {
   };
   httpService.postRequest(url, formData).then((res) => {
     // this.updateListAnswer(index, "tbookmark", 0);
+
+    try {
+      toast.add({
+        title: "انجام شد.",
+        description: "از لیست نشان شده ها حذف شد",
+        color: "success",
+      });
+    } catch (err) {
+      console.log(err.message);
+      toast.add({
+        title: "انجام شد.",
+        description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
+        color: "error",
+      });
+    }
   });
 };
 
@@ -220,8 +257,8 @@ const handlePagination = (prevNextIndicator: string) => {
 
   let url = repoUrl() + hadithaApi.search.prevNextHadith;
   url = url.replace("@index_key", "dhparag");
-  url = url.replace("@vol_id", state.selectedItem._source.address.vol_id);
-  url = url.replace("@parag_order", state.selectedItem._source.parag_order);
+  url = url.replace("@vol_id", state.selectedItem?._source?.address?.vol_id);
+  url = url.replace("@parag_order", state.selectedItem?._source?.parag_order);
   url = url.replace("@step", prevNextIndicator);
 
   httpService
@@ -305,14 +342,19 @@ const handlePagination = (prevNextIndicator: string) => {
                     <span class="section-title">
                       {{
                         state.selectedItem?._source?.meta?.hadith_masoum ??
-                        "بدون عنوان"
+                        state.selectedItem?._source?.meta?.hadith_sanad
                       }}
                     </span>
 
                     <UButton
+                      v-if="
+                        state.selectedItem?._source?.meta?.hadith_masoum
+                          ?.length ||
+                        state.selectedItem?._source?.meta?.hadith_sanad
+                      "
                       @click="
                         copyTextToClipboard(
-                          state.selectedItem?._source?.meta?.hadith_masoum ?? ''
+                          state.selectedItem?._source?.content_ar ?? ''
                         )
                       "
                       variant="ghost"
@@ -320,8 +362,13 @@ const handlePagination = (prevNextIndicator: string) => {
                       label="کپی"
                     />
                   </div>
-                  <div class="arabic-text">
-                    <p>بدون متن عربی</p>
+                  <div
+                    v-if="state.selectedItem?._source?.content_ar?.length"
+                    class="arabic-text"
+                  >
+                    <p>
+                      {{ state.selectedItem?._source?.content_ar ?? "" }}
+                    </p>
                   </div>
                 </div>
 
@@ -345,7 +392,7 @@ const handlePagination = (prevNextIndicator: string) => {
                   <p class="from">
                     {{
                       state.selectedItem?._source?.meta?.hadith_masoum ??
-                      "بدون عنوان"
+                      state.selectedItem?._source?.meta?.hadith_sanad
                     }}:
                   </p>
                   <p
@@ -356,13 +403,16 @@ const handlePagination = (prevNextIndicator: string) => {
 
                 <div class="separator"></div>
 
-                <div class="text-description-section">
+                <div
+                  v-if="state.selectedItem?._source?.description?.length"
+                  class="text-description-section"
+                >
                   <div class="section-header">
                     <span class="section-title"> شرح </span>
                     <UButton
                       @click="
                         copyTextToClipboard(
-                          state.selectedItem?._source?.content
+                          state.selectedItem?._source?.description
                         )
                       "
                       variant="ghost"
@@ -372,14 +422,17 @@ const handlePagination = (prevNextIndicator: string) => {
                   </div>
                   <p
                     class="description-item"
-                    v-html="state.selectedItem?._source?.content"
+                    v-html="state.selectedItem?._source?.description"
                   ></p>
                 </div>
 
                 <div class="separator"></div>
 
                 <div class="text-description-section">
-                  <div class="text-sm mb-1">
+                  <div
+                    v-if="state.selectedItem?._source?.ai_keywords?.length"
+                    class="text-sm mb-1"
+                  >
                     <span class=""> کلیدواژگان: </span>
                     <span
                       class="me-1 text-gray-400 font-light"
@@ -392,7 +445,10 @@ const handlePagination = (prevNextIndicator: string) => {
                     </span>
                   </div>
 
-                  <div class="text-sm">
+                  <div
+                    class="text-sm"
+                    v-if="state.selectedItem?._source?.ai_classes?.length"
+                  >
                     <span class=""> دسته بندی ها: </span>
                     <span
                       class="me-1 text-gray-400 font-light"
@@ -457,7 +513,11 @@ const handlePagination = (prevNextIndicator: string) => {
 
 <!-- because of the buttons, using without scoped. -->
 <style>
+.page-inner-container{
+  height: 100%;
+}
 .search-show-page {
+ 
   .body-header {
     .modal-title {
       padding: 0 0.5em 1.5em;
@@ -535,8 +595,8 @@ const handlePagination = (prevNextIndicator: string) => {
       }
     }
     .content {
-      /* height: calc(100dvh - 29em); */
-      /* overflow-y: auto; */
+      height: calc(100dvh - 15em);
+      overflow-y: auto;
 
       .search-item {
         padding: 1em 0 1em 0.1em;
@@ -781,4 +841,14 @@ const handlePagination = (prevNextIndicator: string) => {
     }
   }
 }
+@media screen and (max-width: 719.99px) {
+  .search-show-page {
+    .body-content {
+      .content {
+        height: calc(100dvh - 15em);
+      overflow-y: auto;
+      }
+    }
+  }
+}
 </style>