diff --git a/pages/haditha/search/index.vue b/pages/haditha/search/index.vue
index 4a02588..f1ba879 100644
--- a/pages/haditha/search/index.vue
+++ b/pages/haditha/search/index.vue
@@ -567,14 +567,19 @@ const SearchList = defineAsyncComponent(
             class="search-box-container flex justify-center"
             :class="[route.name == 'hadithaSearch' ? 'py-6' : 'pb-16']"
           >
-            <div class="haditha-search-root-wrapper search-page flex flex-col md:flex-row">
+            <div
+              class="haditha-search-root-wrapper search-page flex flex-col md:flex-row"
+            >
               <div
                 class="haditha-search-root grow-1"
                 :class="{ 'no-backdrop': route.query.f_aik?.length }"
               >
                 <!-- وقتی کاربر در صفحه نمایش بر روی مشابه کلیک میکند و به صفحه جستجو وارد میشود. -->
                 <!-- v-if="route.query.f_aik?.length" -->
-                <div  v-if="route.query.f_aik?.length" 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 }}
@@ -621,19 +626,25 @@ const SearchList = defineAsyncComponent(
                 </div>
                 <!-- 'similar-mode': route.query.f_aik?.length, -->
                 <UButton
-                  class="my-trailing-button"
-                  :class="{
-                    'close-mode': searchTerm.length,
-                  }"
-                  @click.prevent="onSearchButtonClick"
-                  :icon="searchButtonIcon"
+                  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"
+                >
+                  <!-- @click.prevent="onSearchButtonClick" -->
+                  <!-- <UIcon name="i-lucide-search" /> -->
+                </UButton>
                 <!-- </client-only> -->
               </div>
               <div
-                class="search-filter flex items-center my-3 justify-between"
+                class="search-filter flex items-center justify-between"
                 v-if="loadedItems"
               >
                 <div class="flex items-center space-x-2">
@@ -1008,7 +1019,7 @@ const SearchList = defineAsyncComponent(
 .haditha-search-root-wrapper {
   max-width: 1200px;
   width: 100%;
-  margin: 0 1em;
+  /* margin: 0 1em; */
 
   .haditha-search-root {
     position: relative;