diff --git a/pages/haditha/search/index.vue b/pages/haditha/search/index.vue
index 8bb2059..4a02588 100644
--- a/pages/haditha/search/index.vue
+++ b/pages/haditha/search/index.vue
@@ -172,12 +172,13 @@ const backgroundImageStyle = computed(() => {
     optimizedImageUrl = "/img/haditha/sub-header-bgi.webp";
 
     return {
-      backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
+      backgroundImage: `url(${optimizedImageUrl})`,
+      // backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
     };
   }
 
   return {
-    backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
+    backgroundImage: `url(${optimizedImageUrl})`,
   };
 });
 const searchButtonIcon = computed(() => {
@@ -409,7 +410,7 @@ const onTypeSelectChanged = (value: string) => {
 
   sendQuery().then((res) => {
     loadedItems.value = res.hits.hits;
-    showNoData.value = loadedItems.value?.length == 0;
+    showNoData.value = Boolean(loadedItems.value?.length);
   });
 };
 
@@ -463,7 +464,7 @@ const prepareSynonym = () => {
 const onUpdateSwitch = () => {
   sendQuery(prepareSynonym()).then((res) => {
     loadedItems.value = res.hits.hits;
-    showNoData.value = loadedItems.value?.length == 0;
+    showNoData.value = Boolean(loadedItems.value?.length);
   });
 };
 const onUpdateSubTitle = (subTitle) => {
@@ -471,7 +472,7 @@ const onUpdateSubTitle = (subTitle) => {
 
   sendQuery(prepareSynonym()).then((res) => {
     loadedItems.value = res.hits.hits;
-    showNoData.value = loadedItems.value?.length == 0;
+    showNoData.value = Boolean(loadedItems.value?.length);
   });
 };
 const onAddNewTitle = (subTitles) => {
@@ -483,7 +484,7 @@ const onAddNewTitle = (subTitles) => {
 
   sendQuery(prepareSynonym()).then((res) => {
     loadedItems.value = res.hits.hits;
-    showNoData.value = loadedItems.value?.length == 0;
+    showNoData.value = Boolean(loadedItems.value?.length);
   });
 };
 
@@ -561,19 +562,19 @@ const SearchList = defineAsyncComponent(
       <div class="background-image h-full" :style="backgroundImageStyle">
         <navigation-menu></navigation-menu>
 
-        <div class="logo-container pt-0 xl:pt-18">
+        <div class="logo-container pt-0 xl:pt-19">
           <div
             class="search-box-container flex justify-center"
-            :class="{ 'pb-0': route.name == 'hadithaSearch' }"
+            :class="[route.name == 'hadithaSearch' ? 'py-6' : 'pb-16']"
           >
-            <div class="haditha-search-root-wrapper search-page">
+            <div class="haditha-search-root-wrapper search-page flex flex-col md:flex-row">
               <div
-                class="haditha-search-root"
+                class="haditha-search-root grow-1"
                 :class="{ 'no-backdrop': route.query.f_aik?.length }"
               >
                 <!-- وقتی کاربر در صفحه نمایش بر روی مشابه کلیک میکند و به صفحه جستجو وارد میشود. -->
                 <!-- v-if="route.query.f_aik?.length" -->
-                <div v-if="false" class="prev-search-item flex items-center">
+                <div  v-if="route.query.f_aik?.length" class="prev-search-item flex items-center">
                   <!-- <span class="total">۴۷ مشابه </span> -->
                   <span class="text me-auto">
                     {{ route.query.f_aik }}
@@ -620,19 +621,13 @@ const SearchList = defineAsyncComponent(
                 </div>
                 <!-- 'similar-mode': route.query.f_aik?.length, -->
                 <UButton
-                  v-if="searchTerm.length"
-                  class="my-trailing-button close-mode"
-                  @click.prevent="resetForm"
-                  icon="i-lucide-x"
-                >
-                  <!-- <UIcon name="i-lucide-search" /> -->
-                </UButton>
-                <UButton
-                  v-else
                   class="my-trailing-button"
-                  icon="i-haditha-search"
+                  :class="{
+                    'close-mode': searchTerm.length,
+                  }"
+                  @click.prevent="onSearchButtonClick"
+                  :icon="searchButtonIcon"
                 >
-                  <!-- @click.prevent="onSearchButtonClick" -->
                   <!-- <UIcon name="i-lucide-search" /> -->
                 </UButton>
                 <!-- </client-only> -->
@@ -913,6 +908,11 @@ const SearchList = defineAsyncComponent(
                   <p class="no-data-text">"نتیجه‌ای یافت نشد!</p>
                 </no-data>
               </div>
+
+              <!-- <the-content-loading
+                v-show="loading"
+                class="absolute-positioning"
+              ></the-content-loading> -->
             </div>
           </div>
         </div>
@@ -956,9 +956,9 @@ const SearchList = defineAsyncComponent(
   }
 }
 
-.search-box-container {
+/* .search-box-container {
   padding-top: 0.7em;
-  padding-bottom: 4em; /*64px */
+  padding-bottom: 4em; /*64px 
 
   &.pb-0 {
     padding-bottom: 0 !important;
@@ -966,7 +966,7 @@ const SearchList = defineAsyncComponent(
   &.pt-0 {
     padding-top: 0 !important;
   }
-}
+}*/
 
 .search-list-contianer {
   position: relative;
@@ -1006,7 +1006,7 @@ const SearchList = defineAsyncComponent(
 }
 
 .haditha-search-root-wrapper {
-  max-width: 656px;
+  max-width: 1200px;
   width: 100%;
   margin: 0 1em;
 
@@ -1165,7 +1165,7 @@ const SearchList = defineAsyncComponent(
   .search-filter {
     .filter-item {
       /* width: 81px; */
-      height: 40px;
+      height: 56px;
       border-radius: 12px;
       border-width: 0.3px;
       padding-top: 8px;