diff --git a/assets/hadith/images/robot-indicator.svg b/assets/hadith/images/robot-indicator.svg
new file mode 100644
index 0000000..1215d98
--- /dev/null
+++ b/assets/hadith/images/robot-indicator.svg
@@ -0,0 +1,9 @@
+<svg width="16" height="27" viewBox="0 0 16 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.79031 13.8107C5.19508 12.8313 7.08122 10.8959 8 8.47239C8.91878 10.8959 10.8049 12.8313 13.2097 13.8107L13.5599 13.9533C10.9698 14.8404 8.92567 16.8559 8 19.427C7.07433 16.8559 5.03017 14.8404 2.44014 13.9533L2.79031 13.8107Z" stroke="url(#paint0_linear_67_6564)" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_6564" x1="15.0921" y1="7" x2="0.0931545" y2="7.27651" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/components/hadith/library-show/AccordionMenu..vue b/components/hadith/library-show/AccordionMenu..vue
index 281a6f1..6bc7e97 100644
--- a/components/hadith/library-show/AccordionMenu..vue
+++ b/components/hadith/library-show/AccordionMenu..vue
@@ -44,75 +44,70 @@ const items = [
   },
 ];
 
-function toggleAccordion(id) {
-  const allHiddenClasses = querySelectorAll(".hidden");
-  console.info(element);
-
-  allHiddenClasses.forEach((element) => {
-    console.info(element);
-    // element.classList.remove('hidden')
-  });
+function toggleAccordion(id, event) {
   const content = document.getElementById(`content-${id}`);
   const icon = document.getElementById(`icon-${id}`);
 
+  event.target.classList.toggle("active");
   // Toggle visibility
   content.classList.toggle("hidden");
   // Rotate icon
-  icon.classList.toggle("rotate-180");
+  icon.classList.toggle("active");
 }
 </script>
 
 <template>
   <div class="accordion-menu max-w-xl mx-auto p-4">
     <!-- Parent Accordion Item 1 -->
-    <div class="mb-2">
+    <div class="accordion-menu-item mb-2">
       <button
-        class="w-full flex justify-between items-center p-4 bg-gray-100 rounded-lg hover:bg-gray-200 transition-all delay-500 duration-300 ease-in-out"
-        @click.prevent="toggleAccordion('parent1')"
+        type="button"
+        class="w-full flex justify-start items-center p-4 bg-gray-100 rounded-lg hover:bg-gray-200 transition-all delay-500 duration-300 ease-in-out"
+        @click.exact="toggleAccordion('parent1', $event)"
       >
-        <span>Parent 1</span>
-        <svg
-          id="icon-parent1"
-          class="w-5 h-5 transform transition-transform"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
+        <div id="icon-parent1" class="icon-container">
+          <UIcon class="plus" name="i-lucide-plus"></UIcon>
+          <UIcon class="minus" name="i-lucide-minus"></UIcon>
+        </div>
+        <span>فصل اول</span>
       </button>
       <div
         id="content-parent1"
-        class="mt-2 pl-4 hidden transition delay-500 duration-300 ease-in-out"
+        class="mt-2 pe-4 hidden transition delay-500 duration-300 ease-in-out"
       >
         <!-- Child Accordion Item 1 -->
         <div class="mb-2 transition delay-500 duration-300 ease-in-out">
           <button
             class="w-full flex justify-between items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-all"
-            @click.prevent="toggleAccordion('child1')"
+            @click.exact.prevent="toggleAccordion('child1', $event)"
           >
+            <div id="icon-child1" class="icon-container">
+              <UIcon class="plus" name="i-lucide-plus"></UIcon>
+              <UIcon class="minus" name="i-lucide-minus"></UIcon>
+            </div>
+
             <span>Child 1.1</span>
-            <svg
-              id="icon-child1"
-              class="w-5 h-5 transform transition-transform"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M19 9l-7 7-7-7"
-              />
-            </svg>
           </button>
-          <div id="content-child1" class="mt-2 pl-4 hidden">
+          <div id="content-child1" class="mt-2 pe-4 hidden">
+            <!-- dadadad -->
+            <button
+              class="w-full flex justify-between items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-all"
+              @click.exact.prevent="toggleAccordion('child3', $event)"
+            >
+              <div id="icon-parent3" class="icon-container">
+                <UIcon class="plus" name="i-lucide-plus"></UIcon>
+                <UIcon class="minus" name="i-lucide-minus"></UIcon>
+              </div>
+
+              <span>Child 1.1</span>
+            </button>
+            <div id="content-child3" class="mt-2 pe-4 hidden">
+              <p class="p-3 bg-gray-50 rounded-lg">
+                This is the content of Child 1.1.
+              </p>
+            </div>
+
+            <!-- sdsadadasd -->
             <p class="p-3 bg-gray-50 rounded-lg">
               This is the content of Child 1.1.
             </p>
@@ -122,25 +117,15 @@ function toggleAccordion(id) {
         <div class="mb-2 transition delay-500 duration-300 ease-in-out">
           <button
             class="w-full flex justify-between items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-all"
-            @click.prevent="toggleAccordion('child2')"
+            @click.exact.prevent="toggleAccordion('child2', $event)"
           >
+            <div id="icon-child2" class="icon-container">
+              <UIcon class="plus" name="i-lucide-plus"></UIcon>
+              <UIcon class="minus" name="i-lucide-minus"></UIcon>
+            </div>
             <span>Child 1.2</span>
-            <svg
-              id="icon-child2"
-              class="w-5 h-5 transform transition-transform"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M19 9l-7 7-7-7"
-              />
-            </svg>
           </button>
-          <div id="content-child2" class="mt-2 pl-4 hidden">
+          <div id="content-child2" class="mt-2 pe-4 hidden">
             <p class="p-3 bg-gray-50 rounded-lg">
               This is the content of Child 1.2.
             </p>
@@ -148,36 +133,49 @@ function toggleAccordion(id) {
         </div>
       </div>
     </div>
-
-    <!-- Parent Accordion Item 2 -->
-    <div class="mb-2">
-      <button
-        class="w-full flex justify-between items-center p-4 bg-gray-100 rounded-lg hover:bg-gray-200 transition-all"
-        @click.prevent="toggleAccordion('parent2')"
-      >
-        <span>Parent 2</span>
-        <svg
-          id="icon-parent2"
-          class="w-5 h-5 transform transition-transform"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-      </button>
-      <div id="content-parent2" class="mt-2 pl-4 hidden">
-        <p class="p-3 bg-gray-50 rounded-lg">
-          This is the content of Parent 2.
-        </p>
-      </div>
-    </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.accordion-menu {
+  .accordion-menu-item {
+    font-family: IRANSansX;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 19.5px;
+    letter-spacing: 0%;
+    text-align: right;
+    color: var(--ui-color-two);
+
+    .icon-container {
+      .minus {
+        display: none;
+      }
+      .plus {
+        display: inline-block;
+      }
+    }
+
+    .icon-container {
+      &.active {
+        .plus {
+          display: none;
+        }
+        .minus {
+          display: inline-block;
+        }
+      }
+    }
+
+    button.active {
+      border: 0.3px solid #29d985;
+      background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
+
+      button {
+        background: #f7fffd;
+        border: 0.3px solid #29d985;
+      }
+    }
+  }
+}
+</style>
diff --git a/pages/hadith/chat-bot.vue b/pages/hadith/chat-bot.vue
index ab9512c..f6276bc 100644
--- a/pages/hadith/chat-bot.vue
+++ b/pages/hadith/chat-bot.vue
@@ -1,30 +1,448 @@
-<template>
-  <HadithLayout> </HadithLayout>
-</template>
-<script>
-export default {
+<script setup>
+definePageMeta({
+  layout: false,
   name: "hadithChatBot",
-  setup() {
-    useHead({
-      title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | چت بات `,
-      meta: [
-        { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
-      ],
-      bodyAttrs: {
-        class: import.meta.env.VITE_HADITH_SYSTEM,
-      },
-    });
+});
+useHead({
+  name: "hadithChatBot",
+  title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | جستجو`,
+  meta: [
+    { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
+  ],
+  bodyAttrs: {
+    class: import.meta.env.VITE_HADITH_SYSTEM,
+  },
+});
 
-    definePageMeta({
-      layout: false,
-      name: "hadithChatBot",
-    });
-  },
-  components: {
-    // SectionOne: defineAsyncComponent(() =>
-    //   import("@hadith/components/hadith/hero-page/SectionOne.vue")
-    // ),
-  },
-};
+const state = reactive({
+  filters: [
+    {
+      label: "خلاصه سازی",
+      icon: "i-lucide-bookmark",
+
+      children: [
+        {
+          label: "خلاصه‌سازی حدیث",
+        },
+        {
+          label: "خلاصه‌سازی باب‌های مختلف کتاب الکافی",
+        },
+        {
+          label: "خلاصه‌سازی احادیث درباره اخلاق و رفتار",
+        },
+        {
+          label: "خلاصه‌سازی احادیث با موضوع نماز و عبادات",
+        },
+        {
+          label: "خلاصه‌سازی احادیث از امام علی (ع)",
+        },
+      ],
+    },
+    {
+      label: "دسته بندی",
+      icon: "i-lucide-bookmark",
+      children: [
+        {
+          label: "خلاصه‌سازی حدیث",
+        },
+        {
+          label: "خلاصه‌سازی باب‌های مختلف کتاب الکافی",
+        },
+        {
+          label: "خلاصه‌سازی احادیث درباره اخلاق و رفتار",
+        },
+        {
+          label: "خلاصه‌سازی احادیث با موضوع نماز و عبادات",
+        },
+        {
+          label: "خلاصه‌سازی احادیث از امام علی (ع)",
+        },
+      ],
+    },
+    {
+      label: "کلمات کلیدی",
+      icon: "i-lucide-bookmark",
+      children: [
+        {
+          label: "خلاصه‌سازی حدیث",
+        },
+        {
+          label: "خلاصه‌سازی باب‌های مختلف کتاب الکافی",
+        },
+        {
+          label: "خلاصه‌سازی احادیث درباره اخلاق و رفتار",
+        },
+        {
+          label: "خلاصه‌سازی احادیث با موضوع نماز و عبادات",
+        },
+        {
+          label: "خلاصه‌سازی احادیث از امام علی (ع)",
+        },
+      ],
+    },
+    {
+      label: "تشخیص موجودی",
+      icon: "i-lucide-bookmark",
+      children: [
+        {
+          label: "خلاصه‌سازی حدیث",
+        },
+        {
+          label: "خلاصه‌سازی باب‌های مختلف کتاب الکافی",
+        },
+        {
+          label: "خلاصه‌سازی احادیث درباره اخلاق و رفتار",
+        },
+        {
+          label: "خلاصه‌سازی احادیث با موضوع نماز و عبادات",
+        },
+        {
+          label: "خلاصه‌سازی احادیث از امام علی (ع)",
+        },
+      ],
+    },
+  ],
+  list: new Array(3).fill(0),
+  value: "",
+});
+
+// components declaration
+const HadithLayout = defineAsyncComponent(() =>
+  import("@hadith/layouts/HadithLayout.vue")
+);
+const NavigationMenu = defineAsyncComponent(() =>
+  import("@hadith/components/hadith/NavigationMenu.vue")
+);
 </script>
-<style scoped></style>
+
+<template>
+  <HadithLayout>
+    <div class="chat-bot-page h-full">
+      <div class="page-container pt-20 h-full">
+        <navigation-menu></navigation-menu>
+
+        <UContainer
+          ui="{
+          base: 'sm:px-6 lg:px-4',
+        }"
+          class="page-inner-container sm:px-6 lg:px-4 h-full"
+        >
+          <div class="page-content flex flex-col py-12 p-2 h-full">
+            <div v-if="state.list.length" class="messages basis-full">
+              <div class="r-message flex items-center mb-6">
+                <UIcon
+                  size="18"
+                  name="i-lucide-sparkle"
+                  class="star-icon align-self-start mt-1"
+                ></UIcon>
+                <p class="basis-full message">
+                  من می تونم متن حدیث را خلاصه کنم. لطفا محتوای خود را بفرستید
+                </p>
+                <UButton
+                  class="p-0 copy-icon align-self-end"
+                  icon="i-lucide-clipboard-copy"
+                  variant=""
+                >
+                </UButton>
+              </div>
+              <div class="u-message flex justify-end mb-6">
+                <div class="u-message-container">
+                  <p class="message">
+                    عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ،
+                    قَالَ: قَالَ أَبُو عَبْدِ اللَّهِ (عَلَيْهِ السَّلَامُ):
+                    إِنَّمَا يَدْرُسُ الْإِنسَانُ لِيَعْلَمَ، وَإِنَّمَا
+                    يَعْلَمُ لِيَعْمَلَ، وَإِنَّمَا يَعْمَلُ لِيُعْرَفَ بِهِ،
+                    وَإِنَّمَا يُعْرَفُ بِهِ لِيُقْبَلَ بِهِ، وَإِنَّمَا
+                    يُقْبَلُ بِهِ لِيُؤْمَنَ عَلَيْهِ، وَإِنَّمَا يُؤْمَنُ
+                    عَلَيْهِ لِيُدْخَلَ الْجَنَّةَ
+                  </p>
+                  <p>این حدیث را لطفا خلاصه کن</p>
+                </div>
+              </div>
+
+              <div class="r-message flex items-center mb-6">
+                <UIcon
+                  size="18"
+                  name="i-lucide-sparkle"
+                  class="star-icon align-self-start mt-1"
+                ></UIcon>
+                <p class="basis-full message">
+                  خلاصه این حدیث چنین است:
امام صادق (علیه‌السلام) می‌فرمایند:
+                  انسان دانش می‌آموزد تا به آن عمل کند، و با عملش شناخته شود.
+                  شناخت، سبب پذیرش او می‌شود، پذیرش باعث امان‌یافتن او می‌شود، و
+                  این امان یافتن، در نهایت او را به بهشت می‌رساند.
+                </p>
+                <UButton
+                  class="p-0 copy-icon align-self-end"
+                  icon="i-lucide-clipboard-copy"
+                  variant=""
+                >
+                </UButton>
+              </div>
+            </div>
+
+            <div class="px-6 my-auto">
+              <div class="flex editor">
+                <UTextarea
+                  class="basis-full"
+                  size="xl"
+                  placeholder="به نظرم باید یکی دیگه بنویسی"
+                  variant="ghost"
+                  v-model="value"
+                  :rows="state.list.length ? 1 : 3"
+                  :maxrows="2"
+                  autoresize
+                  @update:modelValue="onUpdateValue"
+                  @change="onChangeValue"
+                  @blur="onBlur"
+                />
+                <UButton
+                  class="p-0 send align-self-start"
+                  icon="i-lucide-arrow-up"
+                  variant="solid"
+                >
+                </UButton>
+              </div>
+              <div class="filters mt-3" v-if="state.list.length == 0">
+                <template v-for="(item, index) in state.filters">
+                  <UDropdownMenu
+                    v-if="item.children?.length"
+                    :items="item.children"
+                    :ui="{
+                      arrow: 'arrow',
+                      group: 'group',
+                      label: 'label',
+                      separator: 'separator',
+                      item: 'item',
+                      itemLeadingIcon: 'itemLeadingIcon',
+                      itemLeadingAvatar: 'itemLeadingAvatar',
+                      itemLeadingAvatarSize: 'itemLeadingAvatarSize',
+                      itemTrailing: 'itemTrailing',
+                      itemLabelExternalIcon: 'itemLabelExternalIcon',
+                      content: 'filters-content w-82',
+                    }"
+                    class="filter-dropdown me-2"
+                  >
+                    <UButton
+                      :label="item.label"
+                      icon="i-lucide-menu"
+                      color="neutral"
+                      variant="outline"
+                    />
+                  </UDropdownMenu>
+
+                  <UButton
+                    v-else
+                    :icon="item.icon"
+                    :label="item.label"
+                    class="w-full flex justify-center items-center me-3"
+                  >
+                  </UButton>
+                </template>
+              </div>
+            </div>
+          </div>
+        </UContainer>
+      </div>
+    </div>
+  </HadithLayout>
+</template>
+
+<style scoped>
+.chat-bot-page {
+  background: linear-gradient(137.41deg, #ffffff -42.82%, #e5e0ff 87.9%);
+  .page-container {
+    .page-inner-container {
+      .r-message {
+        .star-icon {
+          color: #4d00ff;
+
+          border: 1px solid;
+
+          border-image-source: linear-gradient(
+            268.94deg,
+            #d284ff -0.65%,
+            #4d00ff 104.59%
+          );
+        }
+        .message {
+          font-family: IRANSansX;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 27px;
+          letter-spacing: 0%;
+          text-align: right;
+          color: var(--ui-color-two);
+          margin-inline-end: 1em;
+          margin-inline-start: 0.5em;
+        }
+
+        .copy-icon {
+          color: #545aea;
+          width: 20;
+          height: 20;
+        }
+      }
+      .u-message {
+        .u-message-container {
+          width: 280;
+          height: 240;
+          max-width: 280px;
+          background: linear-gradient(
+            169.5deg,
+            #ffffff 25.51%,
+            #e5e0ff 158.51%
+          );
+
+          gap: 10px;
+          border-radius: 12px;
+          border-width: 0.3px;
+          padding: 1em;
+
+          border: 0.3px solid #d9d9d9;
+          box-shadow: 0px 1px 4px 0px #0000000d;
+
+          font-family: IRANSansX;
+          font-weight: 400;
+          font-size: 13px;
+          line-height: 26px;
+          letter-spacing: 0%;
+          text-align: right;
+
+          color: var(--ui-color-two);
+        }
+      }
+
+      .editor {
+        width: 672;
+        height: 64;
+
+        border-radius: 12px;
+        border-width: 0.5px;
+        padding-top: 12px;
+        padding-right: 24px;
+        padding-bottom: 12px;
+        padding-left: 12px;
+
+        background: linear-gradient(0deg, #ffffff 32.03%, #e5e0ff 135.16%);
+        border: 0.5px solid;
+
+        border-image-source: linear-gradient(
+          268.94deg,
+          #d284ff -0.65%,
+          #4d00ff 104.59%
+        );
+        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: #8a92a8;
+        .send {
+          width: 3em; /*40px;*/
+          height: 2.8em; /*40px;*/
+          gap: 1px;
+          border-radius: 24px;
+          background: #1b2132;
+          color: #fff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+      .filters {
+        .filter-dropdown {
+          width: 122.5999984741211;
+          height: 32;
+          gap: 4px;
+
+          border-radius: 8px;
+          border-width: 1px;
+          border-style: solid;
+          border-color: #4d00ff;
+          /* border-image: linear-gradient(268.94deg, #d284ff, #4d00ff) 1; */
+
+          padding: 8px;
+          box-shadow: 0px 1px 4px 0px #0000000d;
+
+          font-family: IRANSansX;
+          font-weight: 400;
+          font-size: 11px;
+          line-height: 16.5px;
+          letter-spacing: 0%;
+          text-align: center;
+
+          color: var(--ui-color-two);
+        }
+        .filters-content {
+          width: 328;
+          height: 234;
+          gap: 12px;
+          border-radius: 12px;
+          border-width: 0.3px;
+          padding: 8px;
+          background: #ffffff;
+          border: 0.3px solid #4d00ff;
+
+          border-image-source: linear-gradient(
+            268.94deg,
+            #d284ff -0.65%,
+            #4d00ff 104.59%
+          );
+          box-shadow: 0px 1px 4px 0px #0000000d;
+        }
+      }
+    }
+  }
+}
+</style>
+
+<style>
+.chat-bot-page {
+  .page-container {
+    .page-inner-container {
+      .editor {
+        textarea {
+          resize: none;
+          background: transparent;
+          color: #8a92a8;
+        }
+      }
+    }
+  }
+}
+.filters-content {
+  width: 328;
+  height: 234;
+  gap: 12px;
+  border-radius: 12px;
+  border-width: 1px;
+  padding: 8px;
+  background: #ffffff;
+  border: 0.3px solid #4d00ff;
+
+  /* border-image-source: linear-gradient(
+    268.94deg,
+    #d284ff -0.65%,
+    #4d00ff 104.59%
+  ); */
+  box-shadow: 0px 1px 4px 0px #0000000d;
+  .item {
+    margin-bottom: 0.5em;
+    width: 312;
+    height: 34;
+    gap: 10px;
+    border-radius: 8px;
+    padding-top: 8px;
+    padding-right: 12px;
+    padding-bottom: 8px;
+    padding-left: 12px;
+    &:hover {
+      background: linear-gradient(137.41deg, #ffffff -42.82%, #e5e0ff 87.9%);
+    }
+  }
+}
+</style>
diff --git a/pages/hadith/library/[id]/[slug]/index.vue b/pages/hadith/library/[id]/[slug]/index.vue
index be63c2a..f1b619c 100644
--- a/pages/hadith/library/[id]/[slug]/index.vue
+++ b/pages/hadith/library/[id]/[slug]/index.vue
@@ -136,13 +136,13 @@ const AccordionMenu = defineAsyncComponent(() =>
       :ui="{
         footer: 'modal-footer',
         overlay: 'modal-overlay',
-        content: 'modal-content',
+        content: 'modal-content accordion-menu',
         header: 'modal-header',
         wrapper: 'modal-wrapper',
         body: 'modal-body',
         title: 'modal-title',
         description: 'modal-description',
-        close: 'modal-close',
+        close: 'modal-close ring-[white]',
       }"
       title="فهرست"
       :close="{
@@ -151,7 +151,6 @@ const AccordionMenu = defineAsyncComponent(() =>
         class: 'rounded-full',
       }"
     >
-      <UButton label="Open" color="neutral" variant="subtle" />
       <!-- <template #header></template> -->
       <!-- <template #content></template> -->
       <template #body>
@@ -232,3 +231,10 @@ const AccordionMenu = defineAsyncComponent(() =>
   }
 }
 </style>
+
+<style>
+.accordion-menu {
+  .modal-close {
+  }
+}
+</style>