diff --git a/apis/hadithaApi.js b/apis/hadithaApi.js
index 486f782..2ccb33f 100644
--- a/apis/hadithaApi.js
+++ b/apis/hadithaApi.js
@@ -22,7 +22,9 @@ export default {
   },
   library: {
     list: "monir/book/volume/@field_collapsed/@offset/@limit/@q",
-    show: "@appname/book/page/@page_start/@page_end/@vol_id",
+    show: "@appname/book/page/@page_start/@page_len/@vol_id",
     prevNextHadith: "monir/nextpage/@index_key/@vol_id/@page_num/@step",
+    getVolumeInfo: "public/get/byids/dhvolume",
+    get: "public/get/byid/dhvolume/@vol_id",
   },
 };
diff --git a/assets/haditha/images/font-icons/about-us.svg b/assets/haditha/images/font-icons/about-us.svg
new file mode 100644
index 0000000..a03d37c
--- /dev/null
+++ b/assets/haditha/images/font-icons/about-us.svg
@@ -0,0 +1,11 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6668 1.83301H5.3335C2.66683 1.83301 1.3335 3.16634 1.3335 5.83301V14.4997C1.3335 14.8663 1.6335 15.1663 2.00016 15.1663H10.6668C13.3335 15.1663 14.6668 13.833 14.6668 11.1663V5.83301C14.6668 3.16634 13.3335 1.83301 10.6668 1.83301Z" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.66748 6.83301H11.3341" stroke="url(#paint0_linear_67_3319)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.66748 10.166H9.33415" stroke="#1B2132" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_3319" x1="11.378" y1="6.83301" x2="4.33954" y2="7.69806" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/add.svg b/assets/haditha/images/font-icons/add.svg
new file mode 100644
index 0000000..9cf257f
--- /dev/null
+++ b/assets/haditha/images/font-icons/add.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.7002 12.2842H18.7002" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.7002 18.2842V6.28418" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/haditha/images/font-icons/bookmark.svg b/assets/haditha/images/font-icons/bookmark.svg
new file mode 100644
index 0000000..13ccb31
--- /dev/null
+++ b/assets/haditha/images/font-icons/bookmark.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.89 5.87988H5.10999C3.39999 5.87988 2 7.27987 2 8.98987V20.3499C2 21.7999 3.04 22.4199 4.31 21.7099L8.23999 19.5199C8.65999 19.2899 9.34 19.2899 9.75 19.5199L13.68 21.7099C14.95 22.4199 15.99 21.7999 15.99 20.3499V8.98987C16 7.27987 14.6 5.87988 12.89 5.87988Z" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22 5.10999V16.47C22 17.92 20.96 18.53 19.69 17.83L16 15.77V8.98999C16 7.27999 14.6 5.88 12.89 5.88H8V5.10999C8 3.39999 9.39999 2 11.11 2H18.89C20.6 2 22 3.39999 22 5.10999Z" stroke="url(#paint0_linear_67_5181)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 8.98987V20.3499C16 21.7999 14.96 22.4099 13.69 21.7099L9.76001 19.5199C9.34001 19.2899 8.65999 19.2899 8.23999 19.5199L4.31 21.7099C3.04 22.4099 2 21.7999 2 20.3499V8.98987C2 7.27987 3.39999 5.87988 5.10999 5.87988H12.89C14.6 5.87988 16 7.27987 16 8.98987Z" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_5181" x1="22.0921" y1="2" x2="7.0919" y2="2.24016" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/chat-bot.svg b/assets/haditha/images/font-icons/chat-bot.svg
new file mode 100644
index 0000000..ac3cee5
--- /dev/null
+++ b/assets/haditha/images/font-icons/chat-bot.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 19H8C4 19 2 18 2 13V8C2 4 4 2 8 2H16C20 2 22 4 22 8V13C22 17 20 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19Z" stroke="#1B2132" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5 11C17.5 11.0062 17.4952 11.0113 17.489 11.0117C16.066 11.1017 14.7245 11.7076 13.716 12.716C12.7076 13.7245 12.1017 15.066 12.0117 16.489C12.0113 16.4952 12.0062 16.5 12 16.5C11.9938 16.5 11.9887 16.4952 11.9883 16.489C11.8985 15.0659 11.2926 13.7243 10.2841 12.7159C9.27568 11.7074 7.93408 11.1015 6.51099 11.0117C6.50482 11.0113 6.5 11.0062 6.5 11C6.5 10.9938 6.50482 10.9887 6.51099 10.9883C7.93408 10.8985 9.27568 10.2926 10.2841 9.28414C11.2926 8.27568 11.8985 6.93408 11.9883 5.51099C11.9887 5.50482 11.9938 5.5 12 5.5C12.0062 5.5 12.0113 5.50482 12.0117 5.51099C12.1017 6.93403 12.7076 8.27555 13.716 9.28398C14.7245 10.2924 16.066 10.8983 17.489 10.9883C17.4952 10.9887 17.5 10.9938 17.5 11Z" fill="url(#paint0_linear_67_2944)"/>
+<defs>
+<linearGradient id="paint0_linear_67_2944" x1="17.5724" y1="5.5" x2="5.78748" y2="5.71726" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/chevron-down.svg b/assets/haditha/images/font-icons/chevron-down.svg
new file mode 100644
index 0000000..921e36c
--- /dev/null
+++ b/assets/haditha/images/font-icons/chevron-down.svg
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 13C10 13 12.0002 14 13.5002 15.5C15.1495 17.1492 16.0001 19.0001 16.0001 19.0001C16.0001 19.0001 17.0002 17 18.5002 15.5C20.2216 13.7787 22.0002 13 22.0002 13" stroke="url(#paint0_linear_67_3364)" stroke-linecap="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_3364" x1="10.5372" y1="13.5372" x2="17.6648" y2="18.162" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4BE8AE"/>
+<stop offset="1" stop-color="#00A762"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/chevron-left.svg b/assets/haditha/images/font-icons/chevron-left.svg
new file mode 100644
index 0000000..8dd94ae
--- /dev/null
+++ b/assets/haditha/images/font-icons/chevron-left.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 10.2158C18 10.2158 16.4491 12.3122 15.2727 13.4886C14.0962 14.665 11.9999 16.2159 11.9999 16.2159C11.9999 16.2159 14.0962 17.7669 15.2727 18.9433C16.4491 20.1197 18 22.216 18 22.216" stroke="#545AEA" stroke-linecap="round"/>
+</svg>
diff --git a/assets/haditha/images/font-icons/chevron-right.svg b/assets/haditha/images/font-icons/chevron-right.svg
new file mode 100644
index 0000000..32e9309
--- /dev/null
+++ b/assets/haditha/images/font-icons/chevron-right.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 10.2158C14 10.2158 15.5509 12.3122 16.7273 13.4886C17.9038 14.665 20.0001 16.2159 20.0001 16.2159C20.0001 16.2159 17.9038 17.7669 16.7273 18.9433C15.5509 20.1197 14 22.216 14 22.216" stroke="#545AEA" stroke-linecap="round"/>
+</svg>
diff --git a/assets/haditha/images/font-icons/close-bg-circle.svg b/assets/haditha/images/font-icons/close-bg-circle.svg
new file mode 100644
index 0000000..4cb2aa3
--- /dev/null
+++ b/assets/haditha/images/font-icons/close-bg-circle.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12.7158" r="10" fill="white"/>
+<path d="M9 15.7158L15 9.71582" stroke="#8A92A8" stroke-linecap="round"/>
+<path d="M9 9.71582L15 15.7158" stroke="#8A92A8" stroke-linecap="round"/>
+</svg>
diff --git a/assets/haditha/images/font-icons/close-circle.svg b/assets/haditha/images/font-icons/close-circle.svg
new file mode 100644
index 0000000..a92e4d6
--- /dev/null
+++ b/assets/haditha/images/font-icons/close-circle.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16.7158C0 7.87926 7.16344 0.71582 16 0.71582C24.8366 0.71582 32 7.87926 32 16.7158C32 25.5524 24.8366 32.7158 16 32.7158C7.16344 32.7158 0 25.5524 0 16.7158Z" fill="#F0F1F4"/>
+<path d="M11 21.7158L21 11.7158" stroke="#1B2132" stroke-linecap="round"/>
+<path d="M11 11.7158L21 21.7158" stroke="#1B2132" stroke-linecap="round"/>
+</svg>
diff --git a/assets/haditha/images/font-icons/close.svg b/assets/haditha/images/font-icons/close.svg
new file mode 100644
index 0000000..91312ec
--- /dev/null
+++ b/assets/haditha/images/font-icons/close.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 21.4575L21 3.45746" stroke="#1B2132" stroke-linecap="round"/>
+<path d="M3 3.45746L21 21.4575" stroke="#1B2132" stroke-linecap="round"/>
+</svg>
diff --git a/assets/haditha/images/font-icons/color-swatch.svg b/assets/haditha/images/font-icons/color-swatch.svg
new file mode 100644
index 0000000..a1f001d
--- /dev/null
+++ b/assets/haditha/images/font-icons/color-swatch.svg
@@ -0,0 +1,13 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1667 11.0002V13.0002C15.1667 14.0002 14.5 14.6668 13.5 14.6668H4.5C4.77333 14.6668 5.05333 14.6268 5.31333 14.5402C5.38667 14.5135 5.45999 14.4868 5.53333 14.4535C5.76666 14.3602 5.99334 14.2268 6.19334 14.0535C6.25334 14.0068 6.32 13.9468 6.38 13.8868L6.40666 13.8602L10.94 9.3335H13.5C14.5 9.3335 15.1667 10.0002 15.1667 11.0002Z" stroke="#1B2132" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.70646 14.5468C3.30646 14.4268 2.92647 14.2068 2.61314 13.8868C2.29314 13.5735 2.07313 13.1935 1.95312 12.7935C2.21312 13.6268 2.87313 14.2868 3.70646 14.5468Z" stroke="#1B2132" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.7465 7.52647L10.9398 9.33314L6.40649 13.8598C6.87316 13.3798 7.1665 12.7198 7.1665 11.9998V5.55981L8.97316 3.75314C9.67983 3.04648 10.6265 3.04648 11.3332 3.75314L12.7465 5.16647C13.4532 5.87314 13.4532 6.8198 12.7465 7.52647Z" stroke="#1B2132" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.49992 12.6668C4.86811 12.6668 5.16659 12.3684 5.16659 12.0002C5.16659 11.632 4.86811 11.3335 4.49992 11.3335C4.13173 11.3335 3.83325 11.632 3.83325 12.0002C3.83325 12.3684 4.13173 12.6668 4.49992 12.6668Z" stroke="#1B2132" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.16659 3.00016V12.0002C7.16659 12.7202 6.87324 13.3802 6.40658 13.8602L6.37992 13.8868C6.31992 13.9468 6.25326 14.0068 6.19326 14.0535C5.99326 14.2268 5.76658 14.3602 5.53324 14.4535C5.45991 14.4868 5.38659 14.5135 5.31325 14.5402C5.05325 14.6268 4.77325 14.6668 4.49992 14.6668C4.31992 14.6668 4.13993 14.6468 3.96659 14.6135C3.87993 14.5935 3.79325 14.5735 3.70658 14.5468C3.59992 14.5135 3.49992 14.4802 3.39992 14.4335C3.39992 14.4268 3.39992 14.4268 3.39325 14.4335C3.20658 14.3402 3.02659 14.2335 2.85992 14.1068L2.85325 14.1002C2.76658 14.0335 2.68659 13.9668 2.61326 13.8868C2.53993 13.8068 2.46658 13.7268 2.39325 13.6402C2.26658 13.4735 2.15992 13.2935 2.06659 13.1068C2.07326 13.1002 2.07326 13.1002 2.06659 13.1002C2.06659 13.1002 2.06658 13.0935 2.05992 13.0868C2.01992 12.9935 1.98658 12.8935 1.95325 12.7935C1.92658 12.7068 1.90658 12.6202 1.88658 12.5335C1.85324 12.3602 1.83325 12.1802 1.83325 12.0002V3.00016C1.83325 2.00016 2.49992 1.3335 3.49992 1.3335H5.49992C6.49992 1.3335 7.16659 2.00016 7.16659 3.00016Z" stroke="url(#paint0_linear_482_800)" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_482_800" x1="7.20167" y1="1.3335" x2="1.48616" y2="1.37564" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/contact-us.svg b/assets/haditha/images/font-icons/contact-us.svg
new file mode 100644
index 0000000..5525fb0
--- /dev/null
+++ b/assets/haditha/images/font-icons/contact-us.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3335 14.1663H4.66683C2.66683 14.1663 1.3335 13.1663 1.3335 10.833V6.16634C1.3335 3.83301 2.66683 2.83301 4.66683 2.83301H11.3335C13.3335 2.83301 14.6668 3.83301 14.6668 6.16634V10.833C14.6668 13.1663 13.3335 14.1663 11.3335 14.1663Z" stroke="#1B2132" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.3332 6.5L9.2465 8.16667C8.55983 8.71333 7.43317 8.71333 6.7465 8.16667L4.6665 6.5" stroke="url(#paint0_linear_67_3322)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_3322" x1="11.377" y1="6.5" x2="4.25718" y2="6.92137" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/copyright.svg b/assets/haditha/images/font-icons/copyright.svg
new file mode 100644
index 0000000..4e3fc53
--- /dev/null
+++ b/assets/haditha/images/font-icons/copyright.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00016 15.1663C4.32016 15.1663 1.3335 12.1797 1.3335 8.49967C1.3335 4.81967 4.32016 1.83301 8.00016 1.83301C11.6802 1.83301 14.6668 4.81967 14.6668 8.49967C14.6668 12.1797 11.6802 15.1663 8.00016 15.1663Z" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.92033 10.4997C9.447 10.913 8.83365 11.1663 8.16032 11.1663C6.68699 11.1663 5.49365 9.97301 5.49365 8.49967C5.49365 7.02634 6.68699 5.83301 8.16032 5.83301C8.83365 5.83301 9.447 6.08634 9.92033 6.49967" stroke="url(#paint0_linear_67_3325)" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_3325" x1="9.94945" y1="5.83301" x2="5.20641" y2="5.90558" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/dropdown-chevron-down.svg b/assets/haditha/images/font-icons/dropdown-chevron-down.svg
new file mode 100644
index 0000000..59de275
--- /dev/null
+++ b/assets/haditha/images/font-icons/dropdown-chevron-down.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 7.71582L8.5 9.71582L10.5 7.71582" stroke="#8A92A8" stroke-width="0.8" stroke-linecap="round"/>
+</svg>
diff --git a/assets/haditha/images/font-icons/edit-bg-circle.svg b/assets/haditha/images/font-icons/edit-bg-circle.svg
new file mode 100644
index 0000000..c25c914
--- /dev/null
+++ b/assets/haditha/images/font-icons/edit-bg-circle.svg
@@ -0,0 +1,17 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12.7158" r="10" fill="white"/>
+<path d="M12.2796 9.32295L8.52883 13.0737C8.3805 13.222 8.24277 13.4975 8.21099 13.6988L8.00968 15.1291C7.93551 15.6482 8.29576 16.0085 8.81492 15.9343L10.2452 15.733C10.4465 15.7012 10.7326 15.5635 10.8704 15.4152L14.6211 11.6645C15.2674 11.0182 15.5746 10.2659 14.6211 9.31235C13.6781 8.36938 12.9259 8.67665 12.2796 9.32295Z" stroke="url(#paint0_linear_67_4557)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.7395 9.86206C12.0574 11.0063 12.9473 11.8963 14.0916 12.2142" stroke="url(#paint1_linear_67_4557)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.2796 9.32295L8.52883 13.0737C8.3805 13.222 8.24277 13.4975 8.21099 13.6988L8.00968 15.1291C7.93551 15.6482 8.29576 16.0085 8.81492 15.9343L10.2452 15.733C10.4465 15.7012 10.7326 15.5635 10.8704 15.4152L14.6211 11.6645C15.2674 11.0182 15.5746 10.2659 14.6211 9.31235C13.6781 8.36938 12.9259 8.67665 12.2796 9.32295Z" stroke="#8A92A8" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.7395 9.86206C12.0574 11.0063 12.9473 11.8963 14.0916 12.2142" stroke="#8A92A8" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_4557" x1="15.274" y1="8.71582" x2="7.53191" y2="8.85851" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_67_4557" x1="14.1071" y1="9.86206" x2="11.5871" y2="9.90852" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/explore.svg b/assets/haditha/images/font-icons/explore.svg
new file mode 100644
index 0000000..d6bef0e
--- /dev/null
+++ b/assets/haditha/images/font-icons/explore.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 19.2158H8C4 19.2158 2 18.2158 2 13.2158V8.21582C2 4.21582 4 2.21582 8 2.21582H16C20 2.21582 22 4.21582 22 8.21582V13.2158C22 17.2158 20 19.2158 16 19.2158H15.5C15.19 19.2158 14.89 19.3658 14.7 19.6158L13.2 21.6158C12.54 22.4958 11.46 22.4958 10.8 21.6158L9.3 19.6158C9.14 19.3958 8.77 19.2158 8.5 19.2158Z" fill="white"/>
+<path d="M17.5 11.2158C17.5 11.222 17.4952 11.2271 17.489 11.2275C16.066 11.3175 14.7245 11.9234 13.716 12.9318C12.7076 13.9403 12.1017 15.2818 12.0117 16.7048C12.0113 16.711 12.0062 16.7158 12 16.7158C11.9938 16.7158 11.9887 16.711 11.9883 16.7048C11.8985 15.2817 11.2926 13.9401 10.2841 12.9317C9.27568 11.9232 7.93408 11.3174 6.51099 11.2275C6.50482 11.2271 6.5 11.222 6.5 11.2158C6.5 11.2096 6.50482 11.2045 6.51099 11.2041C7.93408 11.1143 9.27568 10.5084 10.2841 9.49996C11.2926 8.4915 11.8985 7.1499 11.9883 5.72681C11.9887 5.72064 11.9938 5.71582 12 5.71582C12.0062 5.71582 12.0113 5.72064 12.0117 5.72681C12.1017 7.14985 12.7076 8.49137 13.716 9.4998C14.7245 10.5082 16.066 11.1141 17.489 11.2041C17.4952 11.2045 17.5 11.2096 17.5 11.2158Z" fill="url(#paint0_linear_67_5769)"/>
+<defs>
+<linearGradient id="paint0_linear_67_5769" x1="17.5724" y1="5.71582" x2="5.78748" y2="5.93308" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/haditha-title.svg b/assets/haditha/images/font-icons/haditha-title.svg
new file mode 100644
index 0000000..8e0942e
--- /dev/null
+++ b/assets/haditha/images/font-icons/haditha-title.svg
@@ -0,0 +1,52 @@
+<svg width="64" height="25" viewBox="0 0 64 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36.0096 17.6483C37.4078 17.6483 38.5034 17.4396 39.2965 17.0223C40.1103 16.6049 40.6947 15.9788 41.0495 15.1441L39.2965 5.09567L40.5799 4.43829L42.3642 14.7371C42.5103 15.5301 42.9068 16.2188 43.5537 16.8031C44.2215 17.3666 45.0876 17.6483 46.1519 17.6483H47.4667C47.6545 17.6483 47.811 17.7318 47.9362 17.8988C48.0823 18.0657 48.1553 18.264 48.1553 18.4935C48.1553 18.7231 48.0823 18.9213 47.9362 19.0883C47.811 19.2552 47.6545 19.3387 47.4667 19.3387H46.4336C45.2441 19.3387 44.2424 19.0883 43.4285 18.5874C42.6146 18.0657 42.0512 17.3666 41.7381 16.4901C41.2999 17.3875 40.6112 18.0866 39.6721 18.5874C38.733 19.0883 37.5539 19.3387 36.1348 19.3387H33.114L32.9575 17.6483H36.0096Z" fill="url(#paint0_linear_344_2248)"/>
+<path d="M47.4094 19.3387C47.2216 19.3387 47.0651 19.2552 46.9399 19.0883C46.7938 18.9213 46.7208 18.7231 46.7208 18.4935C46.7208 18.2431 46.7938 18.0448 46.9399 17.8988C47.0651 17.7318 47.2216 17.6483 47.4094 17.6483H59.8682L58.9917 11.1998C58.783 9.80161 58.3134 8.75816 57.583 8.06949C56.8735 7.35994 55.9448 7.00517 54.797 7.00517C54.5466 7.00517 54.1501 7.04691 53.6075 7.13039L49.7572 7.75645L49.9137 6.06607L53.5762 5.47131C54.0144 5.4087 54.4318 5.3774 54.8283 5.3774C56.3309 5.3774 57.5726 5.83651 58.5534 6.75475C59.5552 7.65211 60.1708 8.92512 60.4003 10.5738L61.3707 17.6483H64.0002L63.5307 19.3387H47.4094Z" fill="url(#paint1_linear_344_2248)"/>
+<path d="M24.9984 17.6481C26.2506 17.6481 27.2627 17.4185 28.0348 16.9594C28.8279 16.5003 29.3705 15.8429 29.6626 14.9873L27.8783 5.97193L29.287 5.34586L30.8209 12.9526C30.9043 13.37 30.9461 13.8291 30.9461 14.3299C30.9461 15.8534 30.4243 17.0742 29.3809 17.9924C28.3583 18.8898 26.9184 19.3385 25.061 19.3385C21.3002 19.3385 21.1849 17.6481 24.9984 17.6481Z" fill="#1B2132"/>
+<path d="M17.3823 17.0222C18.1962 16.6049 18.7805 15.9788 19.1353 15.144L17.5295 7.59986L18.813 6.94249L20.2686 13.2736L20.4501 14.7371C20.5961 15.5301 20.9927 16.2188 21.6396 16.8031C22.3074 17.3666 23.1735 17.6483 24.2378 17.6483H25.5525C25.7403 17.6483 25.8968 17.7318 26.0221 17.8987C26.1681 18.0657 26.2412 18.2639 26.2412 18.4935C26.2412 18.7231 26.1681 18.9213 26.0221 19.0883C25.8968 19.2552 25.7403 19.3387 25.5525 19.3387H24.5195C23.33 19.3387 22.3283 19.0883 21.5144 18.5874C20.7005 18.0657 20.137 17.3666 19.824 16.4901C19.3857 17.3875 18.6971 18.0866 17.758 18.5874L17.3823 17.0222Z" fill="#1B2132"/>
+<path d="M25.4953 19.3387C25.3075 19.3387 25.1509 19.2552 25.0257 19.0883C24.8797 18.9213 24.8066 18.7231 24.8066 18.4935C24.8066 18.2431 24.8797 18.0448 25.0257 17.8987C25.1509 17.7318 25.3075 17.6483 25.4953 17.6483V19.3387Z" fill="#1B2132"/>
+<path d="M7.2878 19.3381C5.70176 19.3381 4.44962 18.8998 3.53139 18.0233C2.61316 17.1469 2.15404 15.8843 2.15404 14.2356V3.29512L0.606445 3.78424V2.02342L3.50008 1.08821V13.7348C3.50008 16.3434 4.76266 17.6477 7.2878 17.6477H8.00778C8.1956 17.6477 8.35211 17.7312 8.47733 17.8981C8.62341 18.0651 8.69645 18.2633 8.69645 18.4929C8.69645 18.7225 8.62341 18.9207 8.47733 19.0877C8.35211 19.2546 8.1956 19.3381 8.00778 19.3381H7.2878Z" fill="url(#paint2_linear_344_2248)"/>
+<path d="M7.96767 19.3381C7.77985 19.3381 7.62333 19.2546 7.49812 19.0877C7.35203 18.9207 7.27899 18.7225 7.27899 18.4929C7.27899 18.2633 7.35203 18.0651 7.49812 17.8981C7.62333 17.7312 7.77985 17.6477 7.96767 17.6477H11.8806C12.0684 17.6477 12.2249 17.7312 12.3501 17.8981C12.4962 18.0651 12.5693 18.2633 12.5693 18.4929C12.5693 18.7225 12.4962 18.9207 12.3501 19.0877C12.2249 19.2546 12.0684 19.3381 11.8806 19.3381H7.96767Z" fill="url(#paint3_linear_344_2248)"/>
+<path d="M11.8493 19.3381C11.6615 19.3381 11.505 19.2546 11.3797 19.0877C11.2337 18.9207 11.1606 18.7225 11.1606 18.4929C11.1606 18.2425 11.2337 18.0442 11.3797 17.8981C11.505 17.7312 11.6615 17.6477 11.8493 17.6477H14.3849C15.637 17.6477 16.6491 17.4181 17.4213 16.959C18.2143 16.4999 18.7569 15.8425 19.0491 14.9869L17.4213 7.50149L18.83 6.87542L20.2073 12.9522C20.2908 13.3696 20.3325 13.8287 20.3325 14.3295C20.3325 15.853 19.8108 17.0738 18.7673 17.992C17.7448 18.8894 16.3048 19.3381 14.4475 19.3381H11.8493Z" fill="url(#paint4_linear_344_2248)"/>
+<path d="M9.69727 3.04489H16.2397V4.76658H9.69727V3.04489Z" fill="url(#paint5_linear_344_2248)"/>
+<path d="M11.7584 0.215851H13.9105V1.97667H11.7584V0.215851Z" fill="url(#paint6_linear_344_2248)"/>
+<path d="M23.0732 22.9774H29.5844V24.6991H23.0732V22.9774Z" fill="#1B2132"/>
+<defs>
+<linearGradient id="paint0_linear_344_2248" x1="32.8895" y1="7.84648" x2="38.5865" y2="12.6934" gradientUnits="userSpaceOnUse">
+<stop stop-color="#84FFC8"/>
+<stop offset="0.419292" stop-color="#00E03C"/>
+<stop offset="1" stop-color="#1B2132"/>
+</linearGradient>
+<linearGradient id="paint1_linear_344_2248" x1="32.8895" y1="7.84648" x2="38.5865" y2="12.6934" gradientUnits="userSpaceOnUse">
+<stop stop-color="#84FFC8"/>
+<stop offset="0.419292" stop-color="#00E03C"/>
+<stop offset="1" stop-color="#1B2132"/>
+</linearGradient>
+<linearGradient id="paint2_linear_344_2248" x1="0.143793" y1="-2.0274" x2="11.5175" y2="-0.647003" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="0.245187" stop-color="#4D00FF"/>
+<stop offset="1" stop-color="#1B2132"/>
+</linearGradient>
+<linearGradient id="paint3_linear_344_2248" x1="0.143793" y1="-2.0274" x2="11.5175" y2="-0.647003" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="0.245187" stop-color="#4D00FF"/>
+<stop offset="1" stop-color="#1B2132"/>
+</linearGradient>
+<linearGradient id="paint4_linear_344_2248" x1="0.143793" y1="-2.0274" x2="11.5175" y2="-0.647003" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="0.245187" stop-color="#4D00FF"/>
+<stop offset="1" stop-color="#1B2132"/>
+</linearGradient>
+<linearGradient id="paint5_linear_344_2248" x1="9.54382" y1="-0.561046" x2="25.143" y2="2.76377" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="0.245187" stop-color="#4D00FF"/>
+<stop offset="0.410433"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="paint6_linear_344_2248" x1="9.54382" y1="-0.561046" x2="25.143" y2="2.76377" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="0.245187" stop-color="#4D00FF"/>
+<stop offset="0.410433"/>
+<stop offset="1"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/hashtag.svg b/assets/haditha/images/font-icons/hashtag.svg
new file mode 100644
index 0000000..a6c3090
--- /dev/null
+++ b/assets/haditha/images/font-icons/hashtag.svg
@@ -0,0 +1,16 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.56673 2L6.2334 14" stroke="url(#paint0_linear_482_790)" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.5667 2L10.2334 14" stroke="#1B2132" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.2334 6H15.2334" stroke="url(#paint1_linear_482_790)" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.56689 10H14.5669" stroke="#1B2132" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_482_790" x1="7.5755" y1="2" x2="6.14655" y2="2.00293" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_482_790" x1="15.3123" y1="6" x2="3.05178" y2="8.71235" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/home.svg b/assets/haditha/images/font-icons/home.svg
new file mode 100644
index 0000000..5c2af8a
--- /dev/null
+++ b/assets/haditha/images/font-icons/home.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.02 6.91585L7.63 11.1158C6.73 11.8158 6 13.3058 6 14.4358V21.8458C6 24.1658 7.89 26.0658 10.21 26.0658H21.79C24.11 26.0658 26 24.1658 26 21.8558V14.5758C26 13.3658 25.19 11.8158 24.2 11.1258L18.02 6.79585C16.62 5.81585 14.37 5.86585 13.02 6.91585Z" fill="white" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 22.0662V18.0662" stroke="url(#paint0_linear_67_4174)" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_4174" x1="16" y1="18.5662" x2="14.5409" y2="19.35" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/library.svg b/assets/haditha/images/font-icons/library.svg
new file mode 100644
index 0000000..3e6a002
--- /dev/null
+++ b/assets/haditha/images/font-icons/library.svg
@@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 16.7397V4.6697C22 3.4697 21.02 2.5797 19.83 2.6797H19.77C17.67 2.8597 14.48 3.9297 12.7 5.0497L12.53 5.1597C12.24 5.3397 11.76 5.3397 11.47 5.1597L11.22 5.0097C9.44 3.8997 6.26 2.8397 4.16 2.6697C2.97 2.5697 2 3.4697 2 4.6597V16.7397C2 17.6997 2.78 18.5997 3.74 18.7197L4.03 18.7597C6.2 19.0497 9.55 20.1497 11.47 21.1997L11.51 21.2197C11.78 21.3697 12.21 21.3697 12.47 21.2197C14.39 20.1597 17.75 19.0497 19.93 18.7597L20.26 18.7197C21.22 18.5997 22 17.6997 22 16.7397Z" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 5.49023V20.4902" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.24988 9L5.5 8.49023" stroke="url(#paint0_linear_482_745)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.24988 13.5L5.5 12.9902" stroke="url(#paint1_linear_482_745)" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_482_745" x1="8.26797" y1="8.49023" x2="5.34974" y2="8.78045" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_482_745" x1="8.26797" y1="12.9902" x2="5.34974" y2="13.2804" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/logout.svg b/assets/haditha/images/font-icons/logout.svg
new file mode 100644
index 0000000..1175206
--- /dev/null
+++ b/assets/haditha/images/font-icons/logout.svg
@@ -0,0 +1,15 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.93359 5.54016C6.14026 3.14016 7.37359 2.16016 10.0736 2.16016H10.1603C13.1403 2.16016 14.3336 3.35349 14.3336 6.33349V10.6802C14.3336 13.6602 13.1403 14.8535 10.1603 14.8535H10.0736C7.39359 14.8535 6.16026 13.8868 5.94026 11.5268" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.99926 8.5H2.4126" stroke="url(#paint0_linear_67_3328)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.89984 6.2666L1.6665 8.49994L3.89984 10.7333" stroke="url(#paint1_linear_67_3328)" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_3328" x1="10.0492" y1="8.5" x2="2.07441" y2="9.61538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_67_3328" x1="3.91453" y1="6.2666" x2="1.52123" y2="6.28866" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/menu.svg b/assets/haditha/images/font-icons/menu.svg
new file mode 100644
index 0000000..8ff9421
--- /dev/null
+++ b/assets/haditha/images/font-icons/menu.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 5H21" stroke="#1B2132" stroke-linecap="round"/>
+<path d="M3 12H21" stroke="url(#paint0_linear_67_5173)" stroke-linecap="round"/>
+<path d="M3 19H21" stroke="#1B2132" stroke-linecap="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_5173" x1="21.1184" y1="12" x2="3.74104" y2="17.7665" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/minus.svg b/assets/haditha/images/font-icons/minus.svg
new file mode 100644
index 0000000..55daed4
--- /dev/null
+++ b/assets/haditha/images/font-icons/minus.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.7002 12.2842H18.7002" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/haditha/images/font-icons/more-2.svg b/assets/haditha/images/font-icons/more-2.svg
new file mode 100644
index 0000000..341f614
--- /dev/null
+++ b/assets/haditha/images/font-icons/more-2.svg
@@ -0,0 +1,33 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.19971 5.14209V3.89209C2.19971 2.64709 3.20471 1.64209 4.44971 1.64209H5.69971" stroke="url(#paint0_linear_482_820)" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.6997 1.64209H12.9497C14.1947 1.64209 15.1997 2.64709 15.1997 3.89209V5.14209" stroke="url(#paint1_linear_482_820)" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.1997 11.1421V12.0171C15.1997 13.4696 14.0272 14.6421 12.5747 14.6421H11.6997" stroke="url(#paint2_linear_482_820)" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.69971 14.6421H4.44971C3.20471 14.6421 2.19971 13.6371 2.19971 12.3921V11.1421" stroke="url(#paint3_linear_482_820)" stroke-width="0.666667" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.69971 9.64209L6.19971 9.64209" stroke="#1B2132" stroke-width="0.666667" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.69971 9.64209L10.1997 9.64209" stroke="#1B2132" stroke-width="0.666667" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.6997 9.64209L12.6997 9.64209" stroke="#1B2132" stroke-width="0.666667" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.19971 4.64209L11.1997 4.64209" stroke="#1B2132" stroke-width="0.666667" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.19971 4.64209L7.69971 4.64209" stroke="#1B2132" stroke-width="0.666667" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.1997 7.14209L8.19971 7.14209" stroke="#1B2132" stroke-width="0.666667" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.69971 7.14209L4.69971 7.14209" stroke="#1B2132" stroke-width="0.666667" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.69971 12.1421L11.1997 12.1421" stroke="#1B2132" stroke-width="0.666667" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.19971 12.1421L7.19971 12.1421" stroke="#1B2132" stroke-width="0.666667" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_482_820" x1="5.72273" y1="1.64209" x2="1.973" y2="1.71122" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_482_820" x1="15.2227" y1="1.64209" x2="11.473" y2="1.71122" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_482_820" x1="15.2227" y1="11.1421" x2="11.473" y2="11.2112" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_482_820" x1="5.72273" y1="11.1421" x2="1.973" y2="11.2112" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/no-result.svg b/assets/haditha/images/font-icons/no-result.svg
new file mode 100644
index 0000000..7028df3
--- /dev/null
+++ b/assets/haditha/images/font-icons/no-result.svg
@@ -0,0 +1,24 @@
+<svg width="96" height="97" viewBox="0 0 96 97" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M75 75.7158L63 63.7158" stroke="url(#paint0_linear_67_4208)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M45 69.7158C58.2548 69.7158 69 58.9707 69 45.7158C69 32.461 58.2548 21.7158 45 21.7158C31.7452 21.7158 21 32.461 21 45.7158C21 58.9707 31.7452 69.7158 45 69.7158Z" stroke="url(#paint1_linear_67_4208)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M37.5 53.2158L52.5 38.2158" stroke="url(#paint2_linear_67_4208)" stroke-width="3" stroke-linecap="round"/>
+<path d="M37.5 38.2158L52.5 53.2158" stroke="url(#paint3_linear_67_4208)" stroke-width="3" stroke-linecap="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_4208" x1="57.9091" y1="58.534" x2="72.9091" y2="74.8522" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F0F0F0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_67_4208" x1="0.636364" y1="0.988548" x2="60.6364" y2="66.2613" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#F0F0F0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_67_4208" x1="30.831" y1="59.2741" x2="32.6785" y2="60.9681" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#D9D9D9"/>
+</linearGradient>
+<linearGradient id="paint3_linear_67_4208" x1="31.4417" y1="31.5468" x2="29.7477" y2="33.3943" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#D9D9D9"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/note.svg b/assets/haditha/images/font-icons/note.svg
new file mode 100644
index 0000000..93003ae
--- /dev/null
+++ b/assets/haditha/images/font-icons/note.svg
@@ -0,0 +1,15 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.43311 8H10.7664" stroke="url(#paint0_linear_482_811)" stroke-width="0.666667" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.43311 10.6665H10.7664" stroke="url(#paint1_linear_482_811)" stroke-width="0.666667" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.7663 1.6665C12.9863 1.7865 14.0996 2.63317 14.0996 5.7665V9.8865C14.0996 12.6332 13.4329 14.0065 10.0996 14.0065H6.09961C2.76628 14.0065 2.09961 12.6332 2.09961 9.8865V5.7665C2.09961 2.63317 3.21294 1.79317 5.43294 1.6665H10.7663Z" stroke="#1B2132" stroke-width="0.666667" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_482_811" x1="10.8015" y1="8" x2="5.14043" y2="8.55661" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_482_811" x1="10.7884" y1="10.6665" x2="7.22942" y2="10.8852" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/pencil.svg b/assets/haditha/images/font-icons/pencil.svg
new file mode 100644
index 0000000..b101acc
--- /dev/null
+++ b/assets/haditha/images/font-icons/pencil.svg
@@ -0,0 +1,4 @@
+<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.27956 1.32295L1.52883 5.07368C1.3805 5.22202 1.24277 5.49746 1.21099 5.69876L1.00968 7.12909C0.935509 7.64825 1.29576 8.0085 1.81492 7.93433L3.24524 7.73302C3.44655 7.70123 3.73265 7.56351 3.87038 7.41518L7.62105 3.66451C8.26736 3.0182 8.57462 2.26591 7.62105 1.31235C6.67808 0.369377 5.92587 0.676647 5.27956 1.32295Z" stroke="#8A92A8" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.7395 1.86206C5.05736 3.00634 5.94732 3.8963 7.0916 4.21416" stroke="#8A92A8" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/haditha/images/font-icons/robot-indicator.svg b/assets/haditha/images/font-icons/robot-indicator.svg
new file mode 100644
index 0000000..14531fe
--- /dev/null
+++ b/assets/haditha/images/font-icons/robot-indicator.svg
@@ -0,0 +1,9 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.49001 8.52652C5.89479 7.54707 7.78093 5.61175 8.69971 3.18821C9.61848 5.61175 11.5046 7.54707 13.9094 8.52652L14.2596 8.66914C11.6695 9.55624 9.62538 11.5717 8.69971 14.1428C7.77404 11.5717 5.72987 9.55624 3.13985 8.66914L3.49001 8.52652Z" stroke="url(#paint0_linear_67_4204)" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_4204" x1="15.7918" y1="1.71582" x2="0.792861" y2="1.99233" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/search-2.svg b/assets/haditha/images/font-icons/search-2.svg
new file mode 100644
index 0000000..c6aee08
--- /dev/null
+++ b/assets/haditha/images/font-icons/search-2.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 21.7158L17 17.7158M19 11.7158C19 16.1341 15.4183 19.7158 11 19.7158C6.58172 19.7158 3 16.1341 3 11.7158C3 7.29754 6.58172 3.71582 11 3.71582C15.4183 3.71582 19 7.29754 19 11.7158Z" stroke="url(#paint0_linear_67_4029)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_4029" x1="4.61149" y1="3.71582" x2="22.2399" y2="7.47005" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4BE8AE"/>
+<stop offset="1" stop-color="#00A762"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/search-3.svg b/assets/haditha/images/font-icons/search-3.svg
new file mode 100644
index 0000000..d5991e0
--- /dev/null
+++ b/assets/haditha/images/font-icons/search-3.svg
@@ -0,0 +1,14 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 21.2158L7.5 17.2158" stroke="url(#paint0_linear_67_5776)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.5 19.2158C9.08172 19.2158 5.5 15.6341 5.5 11.2158C5.5 6.79754 9.08172 3.21582 13.5 3.21582C17.9183 3.21582 21.5 6.79754 21.5 11.2158C21.5 15.6341 17.9183 19.2158 13.5 19.2158Z" stroke="url(#paint1_linear_67_5776)" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_5776" x1="7.14189" y1="17.2158" x2="3.22446" y2="18.0501" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4BE8AE"/>
+<stop offset="1" stop-color="#00A762"/>
+</linearGradient>
+<linearGradient id="paint1_linear_67_5776" x1="20.0676" y1="3.21582" x2="4.39784" y2="6.55292" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4BE8AE"/>
+<stop offset="1" stop-color="#00A762"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/search.svg b/assets/haditha/images/font-icons/search.svg
new file mode 100644
index 0000000..9945454
--- /dev/null
+++ b/assets/haditha/images/font-icons/search.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 21L17 17" stroke="url(#paint0_linear_67_2951)" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_2951" x1="21.0263" y1="17" x2="16.7409" y2="17.079" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/tag-active.svg b/assets/haditha/images/font-icons/tag-active.svg
new file mode 100644
index 0000000..a7ebc6c
--- /dev/null
+++ b/assets/haditha/images/font-icons/tag-active.svg
@@ -0,0 +1,9 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7668 1.71576H7.22222C6.10322 1.71849 5.03079 2.1869 4.23953 3.01851C3.44827 3.85013 3.0026 4.97725 3 6.15333L3 20.3516C3 22.4209 4.41105 23.2946 6.13932 22.2945L11.4773 19.179C11.7955 19.0144 12.1454 18.9289 12.5 18.9289C12.8546 18.9289 13.2045 19.0144 13.5227 19.179L18.8607 22.2945C20.5889 23.3061 22 22.4324 22 20.3516V6.15333C21.9931 4.97666 21.5445 3.85043 20.7518 3.01946C19.9592 2.1885 18.8864 1.71998 17.7668 1.71576Z" fill="url(#paint0_linear_67_5429)"/>
+<defs>
+<linearGradient id="paint0_linear_67_5429" x1="18.5723" y1="34.3787" x2="21.3731" y2="3.44045" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4BE8AE"/>
+<stop offset="1" stop-color="#00A762"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/font-icons/tag.svg b/assets/haditha/images/font-icons/tag.svg
new file mode 100644
index 0000000..edd4aa8
--- /dev/null
+++ b/assets/haditha/images/font-icons/tag.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3624 19.4568L11.3623 19.4566L11.3512 19.463L6.0141 22.578C6.01385 22.5782 6.01361 22.5783 6.01336 22.5785C5.19872 23.0497 4.51737 23.0488 4.05314 22.7615C3.58446 22.4714 3.25 21.8362 3.25 20.8515V6.65355C3.25253 5.53979 3.67473 4.47474 4.42065 3.69078C5.16616 2.90724 6.17385 2.46834 7.22253 2.4657H17.7664C18.8158 2.46978 19.824 2.9089 20.5709 3.69196C21.3183 4.4754 21.7433 5.53968 21.75 6.65409V20.8515C21.75 21.8426 21.4151 22.4802 20.9469 22.7701C20.4833 23.057 19.8022 23.0559 18.987 22.5787L18.9867 22.5785L13.6488 19.463L13.6489 19.4627L13.6376 19.4568C13.2842 19.2741 12.895 19.1788 12.5 19.1788C12.105 19.1788 11.7158 19.2741 11.3624 19.4568Z" fill="#F7FFFD" stroke="#29D985" stroke-width="0.5"/>
+</svg>
diff --git a/assets/haditha/images/font-icons/user-icon.svg b/assets/haditha/images/font-icons/user-icon.svg
new file mode 100644
index 0000000..6e163d7
--- /dev/null
+++ b/assets/haditha/images/font-icons/user-icon.svg
@@ -0,0 +1,16 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99984 8.21598C9.84079 8.21598 11.3332 6.7236 11.3332 4.88265C11.3332 3.0417 9.84079 1.54932 7.99984 1.54932C6.15889 1.54932 4.6665 3.0417 4.6665 4.88265C4.6665 6.7236 6.15889 8.21598 7.99984 8.21598Z" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.8061 10.7106L10.446 13.0707C10.3527 13.164 10.266 13.3373 10.246 13.464L10.1194 14.364C10.0727 14.6906 10.2994 14.9173 10.626 14.8706L11.526 14.744C11.6527 14.724 11.8327 14.6373 11.9194 14.544L14.2794 12.184C14.686 11.7773 14.8794 11.304 14.2794 10.704C13.686 10.1106 13.2127 10.304 12.8061 10.7106Z" stroke="url(#paint0_linear_67_3867)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.4663 11.0498C12.6663 11.7698 13.2263 12.3298 13.9463 12.5298" stroke="url(#paint1_linear_67_3867)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.27344 14.8825C2.27344 12.3025 4.84012 10.2158 8.00012 10.2158C8.69346 10.2158 9.3601 10.3158 9.9801 10.5025" stroke="#1B2132" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_67_3867" x1="14.6902" y1="10.3286" x2="9.81875" y2="10.4184" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_67_3867" x1="13.956" y1="11.0498" x2="12.3704" y2="11.079" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D284FF"/>
+<stop offset="1" stop-color="#4D00FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/haditha/images/khosro-panahi.png b/assets/haditha/images/khosro-panahi.png
new file mode 100644
index 0000000..8cc738c
Binary files /dev/null and b/assets/haditha/images/khosro-panahi.png differ
diff --git a/assets/haditha/images/library/cover-four.jpg b/assets/haditha/images/library/cover-four.jpg
new file mode 100644
index 0000000..81f6337
Binary files /dev/null and b/assets/haditha/images/library/cover-four.jpg differ
diff --git a/assets/haditha/images/library/cover-three.jpg b/assets/haditha/images/library/cover-three.jpg
new file mode 100644
index 0000000..1018d7f
Binary files /dev/null and b/assets/haditha/images/library/cover-three.jpg differ
diff --git a/assets/haditha/images/library/cover-two.jpg b/assets/haditha/images/library/cover-two.jpg
new file mode 100644
index 0000000..259f38f
Binary files /dev/null and b/assets/haditha/images/library/cover-two.jpg differ
diff --git a/assets/haditha/images/library/first-cover.jpg b/assets/haditha/images/library/first-cover.jpg
new file mode 100644
index 0000000..73765f7
Binary files /dev/null and b/assets/haditha/images/library/first-cover.jpg differ
diff --git a/assets/haditha/images/library/totally.jpg b/assets/haditha/images/library/totally.jpg
new file mode 100644
index 0000000..5d5546e
Binary files /dev/null and b/assets/haditha/images/library/totally.jpg differ
diff --git a/assets/haditha/images/library/totally.webp b/assets/haditha/images/library/totally.webp
new file mode 100644
index 0000000..ada124e
Binary files /dev/null and b/assets/haditha/images/library/totally.webp differ
diff --git a/assets/haditha/images/search-show-header.png b/assets/haditha/images/search-show-header.png
new file mode 100644
index 0000000..88efce1
Binary files /dev/null and b/assets/haditha/images/search-show-header.png differ
diff --git a/assets/haditha/images/section-three-bgi.webp b/assets/haditha/images/section-three-bgi.webp
index a7ea6cd..a722038 100644
Binary files a/assets/haditha/images/section-three-bgi.webp and b/assets/haditha/images/section-three-bgi.webp differ
diff --git a/assets/haditha/images/video/section-three-gif.mp4 b/assets/haditha/images/video/section-three-gif.mp4
new file mode 100644
index 0000000..268146e
Binary files /dev/null and b/assets/haditha/images/video/section-three-gif.mp4 differ
diff --git a/assets/haditha/scss/haditha.css b/assets/haditha/scss/haditha.css
index 99270c9..29ee471 100644
--- a/assets/haditha/scss/haditha.css
+++ b/assets/haditha/scss/haditha.css
@@ -16,9 +16,13 @@
 /* custom imports */
 @import "../../../../../assets/common/scss/_IRANSansX.scss";
 @import "../../../../../assets/common/scss/_takrim.scss";
+@import "../../../../../assets/common/scss/_vazir.scss";
+@import "../../../../../assets/common/scss/_estedad.scss";
+@import "../../../../../assets/common/scss/_sahel-single-font-weight.scss";
 
 @theme {
-  --font-sans: "IRANSansX", "Public Sans", sans-serif;
+  --font: vazir, sahel, estadad, IRANSansX, "Public Sans", sans-serif;
+  --ar-font: Takrim;
   --breakpoint-sm: 360px;
   --breakpoint-md: 720px;
   --breakpoint-lg: 992px;
@@ -49,18 +53,37 @@ html {
   height: 100%;
   direction: rtl;
   text-align: right;
-  font-family: IRANSansX;
+  font-family: var(--font);
   scroll-behavior: smooth;
 
   body {
     height: 100%;
     direction: rtl;
     text-align: right;
-    font-family: IRANSansX;
+    font-family: var(--font);
     scroll-behavior: smooth;
+
+    padding: 0 !important;
+    margin: 0px !important;
+    overflow: auto !important;
+
+    &.favorites-page {
+      background: #f7fffd;
+    }
+    &.search-page {
+      background-color: #f7fffd;
+    }
+
+    &.library-page {
+      background-color: #f7fffd;
+    }
+    &.chat-bot-page {
+      background-color: #E5E0FF;
+    }
   }
 }
-.haditha-system {
+.haditha-system,
+.hadith-system {
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -68,7 +91,18 @@ html {
   .isolate {
     flex-grow: 1;
   }
+
+  .text__orange {
+    padding: 0 3px;
+    background-color: rgb(255, 250, 155);
+    /* background-color: rgb(255, 223, 203); */
+  }
+  /* .iconify  { */
+  /* width: 1.72em; */
+  /* height: 1.72em; */
+  /* } */
 }
+
 .firefox-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: #ccc #eee;
diff --git a/components/haditha/AutoComplation.vue b/components/haditha/AutoComplation.vue
index d8da47a..5e532aa 100644
--- a/components/haditha/AutoComplation.vue
+++ b/components/haditha/AutoComplation.vue
@@ -162,7 +162,7 @@ const state = reactive({
 // #region methods
 
 const clearSimilar = () => {
-  console.info("clearSimilar");
+  // console.info("clearSimilar");
 };
 
 // const onUpdateModel = (newVal: boolean | InputMenuItem | any) => {
@@ -418,7 +418,8 @@ onMounted(() => {
 
       <!-- <client-only> -->
       <div class="search-input">
-        <UInputMenu
+        <!-- <UInputMenu -->
+        <UInput
           class="w-full focus:placeholder-gray-800"
           :items="<any>Array.from(userSearchHistory)"
           v-model="searchTerm"
@@ -444,7 +445,7 @@ onMounted(() => {
         >
           <!-- @update:modelValue="onUpdateModel" -->
           <!-- @update:searchTerm="onUpdateModel" -->
-        </UInputMenu>
+        </UInput>
       </div>
       <UButton
         class="my-trailing-button"
@@ -726,7 +727,7 @@ onMounted(() => {
         padding: 5px 7px;
         background: #1b213266;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 500;
         font-size: 10px;
         line-height: 15px;
@@ -735,7 +736,7 @@ onMounted(() => {
         color: #ffffff;
       }
       .text {
-        font-family: Takrim;
+        font-family: var(--ar-font);
         font-weight: 400;
         font-size: 16px;
         line-height: 32px;
@@ -823,7 +824,7 @@ onMounted(() => {
     border: 0.3px solid #e0e0e0;
     box-shadow: 0px 1px 4px 0px #0000000d;
 
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 300;
     font-size: 14px;
     line-height: 21px;
@@ -834,7 +835,8 @@ onMounted(() => {
   .search-filter {
     .filter-item {
       /* width: 81px; */
-      height: 40px;
+      /* height: 40px; */
+      height: 56px;
       border-radius: 12px;
       border-width: 0.3px;
       padding-top: 8px;
@@ -846,7 +848,7 @@ onMounted(() => {
       border: 0.3px solid #e0e0e0;
       box-shadow: 0px 1px 4px 0px #0000000d;
       color: #8a92a8;
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 400;
       font-size: 13px;
       line-height: 20px;
@@ -904,7 +906,7 @@ onMounted(() => {
 
   .synonymItem {
     .title {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 400;
       font-size: 14px;
       line-height: 100%;
@@ -928,7 +930,7 @@ onMounted(() => {
       border: 0.3px solid #d9d9d9;
       background: #f0f1f4;
 
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 400;
       font-size: 12px;
       line-height: 100%;
diff --git a/components/haditha/CardList.vue b/components/haditha/CardList.vue
index b156171..d4ee051 100644
--- a/components/haditha/CardList.vue
+++ b/components/haditha/CardList.vue
@@ -31,9 +31,8 @@ const goToLibraryShow = (item) => {
 
 <template>
   <UCard
-    v-if="props.list?.length"
     v-for="(item, index) in props.list"
-     class="mx-auto"
+    class="mx-auto"
     :key="index"
     variant="solid"
     :ui="{
@@ -46,18 +45,12 @@ const goToLibraryShow = (item) => {
     <!-- <template #header></template> -->
 
     <ULink
-      v-if="item?._source?.id"
       :to="{
         name: 'hadithaLibraryShow',
         params: {
           id: item?._source?.id,
           slug: item?._source?.title,
         },
-        query: {
-          page_first: item._source.page_first,
-          page_last: item._source.page_last,
-          page_count: item._source.page_count,
-        },
       }"
       color="neutral"
       variant="outline"
@@ -69,24 +62,18 @@ const goToLibraryShow = (item) => {
         fit="auto"
         quality="80"
         placeholder
-        src="/img/haditha/sample-bgi.svg"
+        src="/img/haditha/library/totally.webp"
       />
+      <!-- src="/img/haditha/sample-bgi.svg" -->
       <p class="title">{{ item?._source?.title }}</p>
       <p class="version">
+        جلد
         {{ item?._source?.vol_title + item?._source?.vol_num }}
       </p>
     </ULink>
 
     <!-- <template #footer> </template> -->
   </UCard>
-
-  <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>
 </template>
 
 <style scoped>
@@ -97,7 +84,7 @@ const goToLibraryShow = (item) => {
 
   .title {
     margin-top: 0.7em;
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 400;
     font-size: 13px;
     line-height: 19.5px;
@@ -107,7 +94,7 @@ const goToLibraryShow = (item) => {
   }
 
   .version {
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 400;
     font-size: 10px;
     line-height: 15px;
diff --git a/components/haditha/HadithaFooter.vue b/components/haditha/HadithaFooter.vue
new file mode 100644
index 0000000..1d5c3db
--- /dev/null
+++ b/components/haditha/HadithaFooter.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts"></script>
+
+<template>
+  <footer class="haditha-footer fixedsd">
+    <UContainer
+      class="flex justify-between max-w-[var(--ui-container-two)] py-4 lg:px-4"
+    >
+      <p class="description">
+        © تمام حقوق اين وب‌سايت نیز برای مؤسسه هوش مصنوعی و تمدن اسلامی (همتا)
+        است.
+      </p>
+      <p class="description">طراحی شده توسط <span class="designer"> استودیو نیوا </span></p>
+    </UContainer>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+.haditha-footer {
+  // position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  
+  background-color: #1B2132;
+
+  .description {
+    font-weight: 300;
+    font-size: 14px;
+    line-height: 100%;
+    letter-spacing: 0%;
+    text-align: center;
+
+    color: #ffffff;
+
+    .designer {
+      font-weight: 300;
+      font-size: 14px;
+      line-height: 100%;
+      letter-spacing: 0%;
+      text-align: center;
+      color: #3fc8fa;
+    }
+  }
+}
+</style>
diff --git a/components/haditha/NavigationMenu.vue b/components/haditha/NavigationMenu.vue
index e144e05..e71f8d9 100644
--- a/components/haditha/NavigationMenu.vue
+++ b/components/haditha/NavigationMenu.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useAuthStore } from "@stores/authStore";
-
+const route = useRoute();
 // {
 //     label: "چت بات",
-//     icon: "i-haditha-chat-bot",
+//     icon: "haditha:chat-bot",
 //     to: "/haditha/chat-bot",
 //     slot: "chat-bot",
 //     class: "flex flex-col lg:flex-row justify-center items-center",
@@ -11,15 +11,17 @@ import { useAuthStore } from "@stores/authStore";
 
 const items = ref([
   {
-    label: "حانه",
-    icon: "i-haditha-home",
+    label: "خانه",
+    icon: route.name == "haditha" ? "haditha:home" : "haditha:haditha-title",
     to: "/haditha",
     descrption: "صفحه اصلی",
-    class: "flex flex-col lg:flex-row justify-center items-center hide-label",
+    class: `flex flex-col lg:flex-row justify-center items-center hide-label ${
+      route.name == "haditha" ? "icon-mode" : "title-mode"
+    }`,
   },
   {
     label: "جستجو",
-    icon: "i-haditha-search",
+    icon: "haditha:search",
     to: "/haditha/search",
     slot: "search",
     class: "flex flex-col lg:flex-row justify-center items-center",
@@ -27,7 +29,7 @@ const items = ref([
 
   {
     label: "کتابخانه",
-    icon: "i-haditha-library",
+    icon: "haditha:library",
     to: "/haditha/library",
     slot: "library",
     class: "flex flex-col lg:flex-row justify-center items-center",
@@ -35,46 +37,46 @@ const items = ref([
 
   {
     label: "نشان شده ها",
-    icon: "i-haditha-bookmark",
+    icon: "haditha:bookmark",
     to: "/haditha/favorites",
     class: "flex flex-col lg:hidden justify-center items-center",
   },
 
   {
     label: "دیگر",
-    icon: "i-haditha-menu",
+    icon: "haditha:menu",
 
     class:
-      "flex flex-col lg:hidden justify-center items-center hide-chevron other /haditha/other",
+      "flex flex-col lg:hidden justify-center items-center hide-chevron other haditha:other",
     children: [
       {
         label: "ورود / ثبت نام",
-        icon: "i-haditha-user",
+        icon: "haditha:user-icon",
         to: "/haditha/login",
       },
       {
         label: "کتابخانه",
-        icon: "i-haditha-library",
+        icon: "haditha:library",
         to: "/haditha/library",
       },
       {
         label: "در باره ما",
-        icon: "i-haditha-about-us",
+        icon: "haditha:about-us",
         to: "/haditha/about-us",
       },
       {
         label: "تماس با ما",
-        icon: "i-haditha-contact-us",
+        icon: "haditha:contact-us",
         to: "/haditha/contact-us",
       },
       {
         label: "قوانین و مقررات",
-        icon: "i-haditha-copyright",
+        icon: "haditha:copyright",
         to: "/haditha/rules",
       },
       {
         label: "خروج از حساب",
-        icon: "i-haditha-logout",
+        icon: "haditha:logout",
         type: "button" as const,
         onSelect(e: Event) {
           e.preventDefault();
@@ -85,35 +87,41 @@ const items = ref([
   },
 ]);
 
-const leftItem = computed(() => [
+const desktopLeftMenu = ref([
   {
     label: "نشان شده ها",
-    icon: "i-haditha-bookmark",
+    icon: "haditha:bookmark",
     to: "/haditha/favorites",
   },
 
   {
     label: "Guide",
-    icon: "i-haditha-menu",
+    icon: "haditha:menu",
     children: [
+      {
+        label: "ورود / ثبت نام",
+        icon: "haditha:user-icon",
+        to: "/haditha/login",
+      },
+
       {
         label: "در باره ما",
-        icon: "i-haditha-about-us",
+        icon: "haditha:about-us",
         to: "/haditha/about-us",
       },
       {
         label: "تماس با ما",
-        icon: "i-haditha-contact-us",
+        icon: "haditha:contact-us",
         to: "/haditha/contact-us",
       },
       {
         label: "قوانین و مقررات",
-        icon: "i-haditha-copyright",
+        icon: "haditha:copyright",
         to: "/haditha/rules",
       },
       {
         label: "خروج از حساب",
-        icon: "i-haditha-logout",
+        icon: "haditha:logout",
         type: "button" as const,
         onSelect(e: Event) {
           e.preventDefault();
@@ -128,28 +136,50 @@ const isMobile = ref(false);
 const rerenderNavigation = ref(1);
 const { isAuthenticatedGetter, isRealUserGetter } = useAuthStore();
 
-const setMenu = () => {
+const filterLeftItem = () => {
+  if (isAuthenticatedGetter) {
+    let otherItemChildren = desktopLeftMenu.value[1].children.filter(
+      (i) => i.icon != "haditha:user-icon"
+    );
+    desktopLeftMenu.value[1].children = otherItemChildren;
+  } else {
+    let otherItemChildren = desktopLeftMenu.value[1].children.filter(
+      (i) => i.icon != "haditha:logout"
+    );
+
+    desktopLeftMenu.value[1].children = otherItemChildren;
+    rerenderNavigation.value++;
+  }
+};
+const filterRightItem = () => {
   if (isAuthenticatedGetter) {
     let otherItem = items.value.find((item) => {
-      return item.class.includes("/haditha/other");
+      return item.class.includes("haditha:other");
     });
 
     let otherItemChildren = otherItem.children.filter(
-      (i) => i.to != "/haditha/login"
+      (i) => i.icon != "haditha:user-icon"
     );
     otherItem.children = otherItemChildren;
   } else {
-    let otherItem = items.value.find((item) => {
-      return item.class.includes("/haditha/other");
+    let otherItemIndex = items.value.findIndex((item) => {
+      return item.class.includes("haditha:other");
     });
 
-    let otherItemChildren = otherItem.children.filter(
-      (i) => i.icon != "i-haditha-logout"
+    let otherItemChildren = items.value[otherItemIndex].children.filter(
+      (i) => i.icon != "haditha:logout"
     );
-    otherItem.children = otherItemChildren;
+
+    items.value[otherItemIndex].children = otherItemChildren;
+    rerenderNavigation.value++;
   }
 };
 
+const setMenu = () => {
+  filterRightItem();
+  filterLeftItem();
+};
+
 setMenu();
 
 // if(!(isAuthenticatedGetter && isRealUserGetter))
@@ -165,7 +195,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="fixed bottom-2 lg:bottom-auto lg:top-2 right-0 left-0">
+  <div class="fixed bottom-2 main-navbar lg:bottom-auto lg:top-2 right-0 left-0 pt-2">
     <UContainer class="flex my-navbar mx-3 lg:mx-auto">
       <!-- :disableHoverTrigge="isMobile" -->
       <UNavigationMenu
@@ -185,8 +215,8 @@ onMounted(() => {
           linkTrailingBadge: 'linkTrailingBadge',
         }"
       />
-      <div class="hidden lg:flex items-center">
-        <template v-for="(item, index) in leftItem">
+      <div class="hidden lg:flex items-center hamburger-menu">
+        <template v-for="(item, index) in desktopLeftMenu">
           <UDropdownMenu
             v-if="item.children?.length"
             :items="item.children"
@@ -202,9 +232,14 @@ onMounted(() => {
               itemLeadingAvatarSize: 'itemLeadingAvatarSize',
               itemTrailing: 'itemTrailing',
             }"
+            :content="{
+              align: 'end',
+              side: 'bottom',
+              sideOffset: 15,
+            }"
           >
             <UButton
-              icon="i-haditha-menu"
+              icon="haditha:menu"
               variant="ghost"
               :ui="{
                 base: 'string[]',
@@ -233,7 +268,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss">
-.fixed {
+.main-navbar {
   z-index: 999;
   .my-navbar {
     max-width: 75em; //1200px
@@ -257,6 +292,7 @@ onMounted(() => {
 
       .isolate.min-w-0.flex.items-center.list {
         li {
+          margin-left: 0.5em;
           padding: 0;
 
           .group {
@@ -265,11 +301,16 @@ onMounted(() => {
             }
 
             &:hover {
-              &::before {
-                background-color: color-mix(in oklab, #00a762 50%, transparent);
-                box-shadow: 0px 4px 10px 0px #00745933;
-                border-radius: 0.75em; //12px;
-              }
+              background: linear-gradient(
+                320.71deg,
+                #b9fde0 6.56%,
+                #e4f9f0 69.69%
+              );
+              // &::before {
+              //   background-color: color-mix(in oklab, #00a762 50%, transparent);
+              //   box-shadow: 0px 4px 10px 0px #00745933;
+              //   border-radius: 0.75em; //12px;
+              // }
             }
 
             // max-width: 112px;
@@ -281,7 +322,7 @@ onMounted(() => {
             padding-bottom: 0.37em; /*6px*/
             padding-left: 1.2em;
 
-            font-family: IRANSansX;
+            font-family: var(--font);
             font-weight: 400;
             font-size: 0.87rem; /*14px*/
             line-height: 1.3rem; /*6px*/
@@ -303,6 +344,11 @@ onMounted(() => {
           }
 
           .hide-label {
+            &.title-mode {
+              .iconify {
+                width: 4.475em; /* 62px;*/
+              }
+            }
             .truncate {
               display: none;
             }
@@ -342,9 +388,14 @@ onMounted(() => {
     }
   }
 }
+.group.item {
+  &:hover {
+    background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
+  }
+}
 
 @media screen and (max-width: 991.99px) {
-  .fixed {
+  .main-navbar {
     .my-navbar {
       height: 4.8em; // 76px;
 
@@ -386,7 +437,7 @@ onMounted(() => {
               border-radius: 8px;
               padding: 12px;
 
-              font-family: IRANSansX;
+              font-family: var(--font);
               font-weight: 400;
               font-size: 14px;
               line-height: 100%;
diff --git a/components/haditha/hero-page/SectionFive.vue b/components/haditha/hero-page/SectionFive.vue
index f50fadc..744e5c2 100644
--- a/components/haditha/hero-page/SectionFive.vue
+++ b/components/haditha/hero-page/SectionFive.vue
@@ -2,28 +2,28 @@
 const state = reactive({
   items: [
     {
-      img: "https://picsum.photos/640/640?random=1",
+      img: "/img/haditha/khosro-panahi.png",
       title: "حجت‌الاسلام خسروپناه",
       job: "پژوهشگر",
       summary:
         "این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهش‌های من بسیار ساده‌تر شده است. این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهش‌های من بسیار ساده‌تر شده است.",
     },
     {
-      img: "https://picsum.photos/640/640?random=1",
+      img: "/img/haditha/khosro-panahi.png",
       title: "حجت‌الاسلام خسروپناه",
       job: "پژوهشگر",
       summary:
         "این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهش‌های من بسیار ساده‌تر شده است. این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهش‌های من بسیار ساده‌تر شده است.",
     },
     {
-      img: "https://picsum.photos/640/640?random=1",
+      img: "/img/haditha/khosro-panahi.png",
       title: "حجت‌الاسلام خسروپناه",
       job: "پژوهشگر",
       summary:
         "این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهش‌های من بسیار ساده‌تر شده است. این سرویس برای هر کسی که به دنبال احادیث است، ضروری است. با این سرویس، پژوهش‌های من بسیار ساده‌تر شده است.",
     },
     {
-      img: "https://picsum.photos/640/640?random=1",
+      img: "/img/haditha/khosro-panahi.png",
       title: "حجت‌الاسلام خسروپناه",
       job: "پژوهشگر",
       summary:
@@ -106,7 +106,7 @@ const state = reactive({
 
   .header {
     .title {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 300;
       font-size: 1.25rem; /* 20px;*/
       line-height: 1.87rem; /* 30px;*/
@@ -118,7 +118,7 @@ const state = reactive({
   }
   .carousel-item {
     .title {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 400;
       font-size: 1rem;
       line-height: 1.5rem; /* 24px;*/
@@ -141,7 +141,7 @@ const state = reactive({
     }
 
     .job {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 300;
       font-size: 1rem;
       line-height: 1.5rem;
@@ -153,7 +153,7 @@ const state = reactive({
     .summary {
       /* padding: 2.5em 0 2.5em; */
       margin-bottom: 0.3em;
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 300;
       font-size: 1rem;
       line-height: 1.5rem;
diff --git a/components/haditha/hero-page/SectionFour.vue b/components/haditha/hero-page/SectionFour.vue
index ba6d4f0..b6e608e 100644
--- a/components/haditha/hero-page/SectionFour.vue
+++ b/components/haditha/hero-page/SectionFour.vue
@@ -9,12 +9,12 @@ const state = reactive({
     },
     {
       img: "/img/haditha/section-four_card-two.png",
-      title: "تشخیص موجودیت",
+      title: "خلاصه سازی",
       description: "تجمیع نکات کلیدی از احادیث و شروح مختلف",
     },
     {
       img: "/img/haditha/section-four_card-three.png",
-      title: "تشخیص موجودیت",
+      title: "چت بات هوشمند",
       description:
         "امکان تعامل مستقیم با سامانه برای پاسخ به سوالات یا دریافت توضیحات از مفاهیم حدیثی",
     },
@@ -86,7 +86,7 @@ const state = reactive({
 
   .header {
     .title {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 300;
       font-size: 1.25rem; /* 20px;*/
       line-height: 1.87rem; /* 30px;*/
@@ -101,7 +101,7 @@ const state = reactive({
       border: none;
 
       .title {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 600;
         font-size: 1rem;
         line-height: 1.5rem; /* 24px;*/
@@ -109,7 +109,7 @@ const state = reactive({
         text-align: center;
       }
       .description {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 0.87rem; /* 14px;*/
         line-height: 1.31rem; /* 21px;*/
diff --git a/components/haditha/hero-page/SectionOne.vue b/components/haditha/hero-page/SectionOne.vue
index 74c3ce7..2423e5d 100644
--- a/components/haditha/hero-page/SectionOne.vue
+++ b/components/haditha/hero-page/SectionOne.vue
@@ -42,7 +42,7 @@ const AutoComplation = defineAsyncComponent(() =>
       <navigation-menu></navigation-menu>
 
       <div class="logo-container flex justify-center flex-col items-center">
-        <img fit="auto" quality="80" placeholder src="/img/haditha/logo.webp" />
+        <img fit="auto" quality="80" placeholder src="/img/haditha/logo.png" />
         <div class="title">
           کاوش با
           <span class="badge-style me-1"> هوش مصنوعی </span>
@@ -78,7 +78,7 @@ const AutoComplation = defineAsyncComponent(() =>
 
     .title {
       margin-top: 3.5em;
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-size: 14px;
       line-height: 21px;
       letter-spacing: 0%;
diff --git a/components/haditha/hero-page/SectionThree.vue b/components/haditha/hero-page/SectionThree.vue
index ae90075..96faf82 100644
--- a/components/haditha/hero-page/SectionThree.vue
+++ b/components/haditha/hero-page/SectionThree.vue
@@ -17,7 +17,25 @@ const img = useImage();
 </script>
 <template>
   <section class="section-three flex">
-    <div class="section-container md:flex md:flex-col md:items-center xl:block mx-auto">
+    <!-- <video class="background-video" loop autoplay>
+       <source
+        src="/img/haditha/video/section-three-gif.mp4"
+        type="video/webm"
+      /> 
+    
+
+      <source src="/img/haditha/video/section-three-gif.mp4" type="video/mp4" />
+
+      Download the
+       <a href="/img/haditha/video/section-three-gif.mp4">WEBM</a>
+       or
+      <a href="/img/haditha/video/section-three-gif.mp4">MP4</a>
+      video.F
+    </video> -->
+
+    <div
+      class="section-container md:flex md:flex-col md:items-center xl:block mx-auto"
+    >
       <div class="header flex items-center mb-2">
         <img
           fit="auto"
@@ -53,11 +71,25 @@ const img = useImage();
   padding-left: 2em; /*32px;*/
   background-color: #1b2132;
   background-size: cover;
+  position: relative;
 
+  .background-video {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+
+    height: 36.5em;
+    object-fit:fill;
+    aspect-ratio: 16 / 9; /* Replace with your desired ratio (e.g., 4/3, 1/1) */
+    width: 100%; /* Adjust width as needed */
+  }
   .section-container {
     width: 56.7em; /*907px;*/
     /*height: 15.5em; 249px;*/
     gap: 9px;
+    z-index:1;
 
     .header {
       max-width: 30em; /*480px;*/
@@ -77,7 +109,7 @@ const img = useImage();
         height: 2.1em; /*"34";*/
       }
       .title {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 2rem; /*32px;*/
         line-height: 3rem; /*48px;*/
@@ -100,7 +132,7 @@ const img = useImage();
       border-radius: 1em;
       background: #1b2132cc;
 
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 300;
       font-size: 1rem;
       line-height: 1.5rem; /*24px;*/
@@ -113,7 +145,7 @@ const img = useImage();
 
 @media screen and (max-width: 1199.99px) {
   .section-three {
-    background-image: url("/img/haditha/mobile/section-three-bgi_md.png");
+    background-image: url("/img/haditha/section-three-bgi.webp");
     height: 46.87em;
     background-position: center 65%;
     padding-top: 7.5em;
@@ -139,7 +171,7 @@ const img = useImage();
 
       .content {
         background: transparent;
-        color: #626b84;
+        /* color: #626b84; */
         max-width: 40em; /*480px;*/
 
         font-size: 1rem;
diff --git a/components/haditha/hero-page/SectionTwo.vue b/components/haditha/hero-page/SectionTwo.vue
index a6a62b8..5976076 100644
--- a/components/haditha/hero-page/SectionTwo.vue
+++ b/components/haditha/hero-page/SectionTwo.vue
@@ -30,7 +30,7 @@
             fit="auto"
             quality="80"
             placeholder
-            src="/img/haditha/card-one.webp"
+            src="/img/haditha/card-one.png"
           />
         </div>
       </div>
@@ -48,7 +48,7 @@
             fit="auto"
             quality="80"
             placeholder
-            src="/img/haditha/card-two.webp"
+            src="/img/haditha/card-two.png"
           />
         </div>
       </div>
@@ -68,7 +68,7 @@
             fit="auto"
             quality="80"
             placeholder
-            src="/img/haditha/card-three.webp"
+            src="/img/haditha/card-three.png"
           />
         </div>
       </div>
@@ -95,7 +95,7 @@
       margin: auto;
     }
     .title {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 700;
       font-size: 1.5rem; /*24px*/
       line-height: 2.25rem; /* 36px;*/
diff --git a/components/haditha/library-show/AccordionMenu..vue b/components/haditha/library-show/AccordionMenu..vue
index 87e6834..6eb372a 100644
--- a/components/haditha/library-show/AccordionMenu..vue
+++ b/components/haditha/library-show/AccordionMenu..vue
@@ -139,7 +139,7 @@ function toggleAccordion(id, event) {
 <style scoped>
 .accordion-menu {
   .accordion-menu-item {
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 400;
     font-size: 13px;
     line-height: 19.5px;
diff --git a/components/haditha/library-show/UTree.vue b/components/haditha/library-show/UTree.vue
index b051478..96de1b7 100644
--- a/components/haditha/library-show/UTree.vue
+++ b/components/haditha/library-show/UTree.vue
@@ -9,6 +9,11 @@ const props = defineProps({
     },
   },
 });
+const emit = defineEmits(["on-select-item"]);
+
+const onSelectItem = (item) => {
+  emit("on-select-item", item.detail.value);
+};
 </script>
 
 <template>
@@ -18,6 +23,7 @@ const props = defineProps({
     :items="items"
     :get-key="(item) => item.title"
     :default-expanded="['components']"
+    dir="rtl"
   >
     <!-- <h2 class="font-semibold text-sm text-stone-400 px-2 pt-1 pb-3">
       Directory Structure
@@ -29,6 +35,7 @@ const props = defineProps({
       :style="{ 'margin-right': `${item.level - 0.7}rem` }"
       v-bind="item.bind"
       class="tree-item flex items-center py-1.5 px-3 mb-4 rounded-lg border-[#29D985] outline-none bg-[#F0F1F4] focus:ring-grass8 focus:ring-[#29d985]"
+      @select="onSelectItem"
     >
       <template v-if="item.hasChildren">
         <Icon v-if="!isExpanded" icon="lucide:plus" class="h-6 w-6" />
@@ -45,14 +52,14 @@ const props = defineProps({
 <style scoped>
 .tree-item[aria-expanded="true"] {
   background: linear-gradient(320.71deg, #b9fde0 6.56%, #e4f9f0 69.69%);
-  font-family: IRANSansX;
+  font-family: var(--font);
   font-weight: 400;
   font-size: 13px;
   line-height: 19.5px;
   letter-spacing: 0%;
   text-align: right;
   color: var(--ui-color-two);
-  
+
   /* &[data-expanded="true"] {
     background-color: #f7fffd;
   } */
diff --git a/components/haditha/login/EnterMobile.vue b/components/haditha/login/EnterMobile.vue
index b92a3fd..b1a9d5b 100644
--- a/components/haditha/login/EnterMobile.vue
+++ b/components/haditha/login/EnterMobile.vue
@@ -134,7 +134,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
 
       .title {
         margin-bottom: 1.2em;
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 20px;
         line-height: 30px;
@@ -156,7 +156,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
       }
 
       .description {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 14px;
         line-height: 21px;
@@ -185,7 +185,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
           border: 0.3px solid #d9d9d9;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 16px;
           line-height: 24px;
@@ -225,7 +225,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
           border: 0.3px solid #d9d9d9;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 16px;
           line-height: 100%;
diff --git a/components/haditha/login/EnterVerifyCode.vue b/components/haditha/login/EnterVerifyCode.vue
index 6ac9850..6832bd2 100644
--- a/components/haditha/login/EnterVerifyCode.vue
+++ b/components/haditha/login/EnterVerifyCode.vue
@@ -139,7 +139,7 @@ onMounted(() => {
 
       .title {
         margin-bottom: 1.2em;
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 20px;
         line-height: 30px;
@@ -161,7 +161,7 @@ onMounted(() => {
       }
 
       .description {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 14px;
         line-height: 21px;
@@ -190,7 +190,7 @@ onMounted(() => {
           border: 0.3px solid #d9d9d9;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 16px;
           line-height: 24px;
@@ -230,7 +230,7 @@ onMounted(() => {
           border: 0.3px solid #d9d9d9;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 16px;
           line-height: 100%;
diff --git a/components/haditha/search-page/SearchList.vue b/components/haditha/search-page/SearchList.vue
index 7866e1c..09c91f6 100644
--- a/components/haditha/search-page/SearchList.vue
+++ b/components/haditha/search-page/SearchList.vue
@@ -7,6 +7,9 @@ const props = defineProps({
       return [];
     },
   },
+  requestStatus: {
+    default: "pending",
+  },
   total: {
     default: 0,
   },
@@ -20,46 +23,50 @@ const props = defineProps({
     default: "",
   },
 });
+const emit = defineEmits(["on-bookmard-removed"]);
 const router = useRouter();
 const route = useRoute();
 
-// const modal = useModal();
-// const isModalOpen = ref(false);
+const modal = useModal();
+const isModalOpen = ref(false);
+let selectedItem = ref(undefined);
 
-function goToSearchShowPage(selectedItem) {
-  // modal.open(SearchShow, { title: "Welcome" });
-  // isModalOpen.value = true;
+const hadithAddress = (item) => {
+  return `${item?._source?.address?.vol_title}، صفحه
+   ${item?._source?.address?.page_num}`;
+};
 
-  const slug = selectedItem?._source?.content
-    .split(" ")
-    .filter((v, i) => i < 4)
-    .join("-");
+function goToSearchShowPage(item) {
+  selectedItem.value = item;
+  // modal.open(SearchShow, { title: item.title });
+  isModalOpen.value = true;
 
-  router.push({
-    name: "hadithaSearchShow",
-    params: {
-      id: selectedItem?._source?.id,
-      slug: slug,
-    },
-    query: {
-      q: props.searchTerm,
-    },
-  });
+  // const slug = selectedItem.value?._source?.content
+  //   .split(" ")
+  //   .filter((v, i) => i < 4)
+  //   .join("-");
+
+  // router.push({
+  //   name: "hadithaSearchShow",
+  //   params: {
+  //     id: selectedItem.value?._source?.id,
+  //     slug: slug,
+  //   },
+  //   query: {
+  //     q: props.searchTerm,
+  //   },
+  // });
+}
+async function closeModal() {
+  // await modal.close();
+  isModalOpen.value = false;
+}
+function resetModal() {
+  modal.reset();
+}
+function updateModalTitle() {
+  modal.patch({ title: "Updated Title" });
 }
-// async function closeModal() {
-//   await modal.close();
-// }
-// function resetModal() {
-//   modal.reset();
-// }
-// function updateModalTitle() {
-//   modal.patch({ title: "Updated Title" });
-// }
-
-// components declaration
-// 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");
@@ -71,12 +78,28 @@ const removeFromFavorites = async (item = {}, index = 0) => {
     title: item?._source?.title,
   };
   httpService.postRequest(url, formData).then((res) => {
+    emit("on-bookmard-removed", index);
     // this.updateListAnswer(index, "tbookmark", 0);
   });
 };
+// components declaration
+const SearchShow = defineAsyncComponent(() =>
+  import("@haditha/components/haditha/search-page/SearchShow.vue")
+);
 </script>
 
 <template>
+  <!-- <template v-if="props.requestStatus == 'pending'"> -->
+  <!-- <div class="flex items-center gap-4 mb-4" v-for="item in props?.list?.length">
+      <USkeleton class="h-12 w-12 rounded-full" />
+
+      <div class="grid gap-2 flex-grow-1">
+        <USkeleton class="h-4 " />
+        <USkeleton class="h-4 " />
+      </div>
+    </div> -->
+  <!-- </template> -->
+  <!-- <template v-else-if="props.requestStatus == 'success' || props.requestStatus == 'idle'"> -->
   <div
     v-if="props?.list?.length"
     class="search-list-item"
@@ -99,7 +122,7 @@ const removeFromFavorites = async (item = {}, index = 0) => {
       </a>
       <UButton
         v-if="route.name == 'hadithaFavorites'"
-        @click="removeFromFavorites(item)"
+        @click="removeFromFavorites(item, index)"
         variant="ghost"
         color="error"
         class="copy-btn"
@@ -111,8 +134,8 @@ const removeFromFavorites = async (item = {}, index = 0) => {
       @click.prevent="goToSearchShowPage(item)"
       class="arabic-text block"
       :href="`/haditha/search/${item?._source?.id}/${item?._source?.content_ar}`"
+      v-html="item?._source?.content_ar"
     >
-      {{ item?._source?.content_ar }}
     </a>
     <a
       @click.prevent="goToSearchShowPage(item)"
@@ -121,41 +144,63 @@ const removeFromFavorites = async (item = {}, index = 0) => {
       v-html="item?.highlight?.['content.fa'] ?? item?._source?.content"
     ></a>
     <div class="flex justify-end">
-      <p class="reference">
+      <ULink
+        :to="{
+          name: 'hadithaLibraryShow',
+          params: {
+            id: item?._source?.address.vol_id,
+            slug: hadithAddress(item),
+          },
+          query: {
+            page_num: item?._source?.address?.page_num,
+          },
+        }"
+        color="neutral"
+        variant="outline"
+        :ui="{
+          leadingIcon: 'text-(--ui-primary)',
+        }"
+        class="reference"
+      >
+        {{ hadithAddress(item) ?? "" }}
+      </ULink>
+
+      <!-- <p class="reference">
         {{ item?._source?.address?.vol_title }}، صفحه
         {{ item?._source?.address?.page_num }}
-      </p>
+      </p> -->
     </div>
   </div>
+  <!-- </template> -->
 
-  <!-- <UModal
-      v-model:open="isModalOpen"
-      :dismissible="false"
-      :ui="{
-        footer: 'modal-footer',
-        overlay: 'modal-overlay',
-        content: 'modal-content',
-        header: 'modal-header hidden',
-        wrapper: 'modal-wrapper',
-        body: 'modal-body',
-        title: 'modal-title',
-        description: 'modal-description',
-        close: 'modal-close',
-      }"
-    >
-       <template #header><div class="hidden"></div></template> 
-      <template #content></template> 
-      <template #body>
-        <search-show @close="isModalOpen = !isModalOpen"></search-show>
-      </template>
-      <<template #footer></template> 
-    </UModal> -->
+  <UModal
+    v-model:open="isModalOpen"
+    :dismissible="false"
+    :ui="{
+      footer: 'modal-footer',
+      overlay: 'modal-overlay',
+      content: 'modal-content',
+      header: 'modal-header hidden',
+      wrapper: 'modal-wrapper',
+      body: 'modal-body',
+      title: 'modal-title',
+      description: 'modal-description',
+      close: 'modal-close',
+    }"
+  >
+    <!-- <template #header><div class="hidden"></div></template> -->
+    <!-- <template #content></template> -->
+    <template #body>
+      <search-show :selectedItem="selectedItem" @close="closeModal"></search-show>
+    </template>
+    <!-- <<template #footer></template> -->
+  </UModal>
 </template>
 
 <style scoped>
 .search-list-item {
   .from-person {
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 300;
     font-size: 0.75rem; /*12px*/
     line-height: 1.125rem; /*18px*/
@@ -172,7 +217,7 @@ const removeFromFavorites = async (item = {}, index = 0) => {
     }
   }
   .arabic-text {
-    font-family: Takrim;
+    font-family: var(--ar-font);
     font-weight: 400;
     font-size: 1.125rem; /*18px*/
     line-height: 2rem; /*23px*/
@@ -189,9 +234,9 @@ const removeFromFavorites = async (item = {}, index = 0) => {
     }
   }
   .persian-text {
-    font-family: Takrim;
+    font-family: var(--font);
     font-weight: 400;
-    font-size: 1rem; /*16px*/
+    font-size: 0.8rem; /*16px*/
     line-height: 1.375rem; /*22px*/
     letter-spacing: 0%;
     text-align: right;
@@ -209,10 +254,10 @@ const removeFromFavorites = async (item = {}, index = 0) => {
     border-width: 0.5px;
     border: 0.5px solid #d9d9d9;
 
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 300;
     font-size: 0.625rem; /*10px*/
-    line-height: 0.9rem; /*15px*/
+    line-height: 1.1rem; /*15px*/
     letter-spacing: 0%;
     text-align: right;
     color: #8a92a8;
@@ -226,3 +271,78 @@ const removeFromFavorites = async (item = {}, index = 0) => {
   }
 }
 </style>
+
+<style>
+.text__orange {
+  color: orange;
+}
+
+.modal-content {
+  border: 0.3px solid #e0e0e0;
+  box-shadow: 0px 8px 20px 0px #0000001a;
+  background: #ffffff;
+  width: 100%;
+  max-width: 720px;
+  border-radius: 16px;
+  gap: 8px;
+  border-width: 0.3px;
+  .modal-body {
+    border-radius: 16px;
+
+    height: 800px;
+    position: relative;
+
+    .top-left-bgi {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-image: url("../../../assets/haditha/images/modal-top-bgi.png");
+      backdrop-filter: blur(54px);
+      width: 447px;
+      height: 447px;
+      top: 0;
+      left: 0;
+
+      background-repeat: no-repeat;
+      background-size: auto;
+      z-index: -1;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      background-image: url("../../../assets/haditha/images/modal-bttom-right-bgi.png");
+      backdrop-filter: blur(54px);
+      width: 438px;
+      height: 238px;
+      mix-blend-mode: Multiply;
+      background-repeat: no-repeat;
+      background-size: cover;
+      z-index: -1;
+    }
+
+    &::after {
+      content: "";
+
+      position: absolute;
+      bottom: 0;
+      left: 0;
+
+      width: 458px;
+      height: 239px;
+      mix-blend-mode: Multiply;
+      background-image: url("../../../assets/haditha/images/modal-bottom-left-bgi.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      backdrop-filter: blur(54px);
+      z-index: -1;
+    }
+  }
+}
+
+.modal-overlay {
+  background: #00000033;
+}
+</style>
diff --git a/components/haditha/search-page/SearchShow.vue b/components/haditha/search-page/SearchShow.vue
index 11486cc..9818fae 100644
--- a/components/haditha/search-page/SearchShow.vue
+++ b/components/haditha/search-page/SearchShow.vue
@@ -1,4 +1,6 @@
-<script setup>
+<script setup lang="ts">
+import hadithaApi from "@haditha/apis/hadithaApi";
+
 const props = defineProps({
   selectedItem: {
     type: Object,
@@ -7,12 +9,156 @@ const props = defineProps({
     },
   },
 });
+
 const emit = defineEmits(["close"]);
+let hadithItem = ref();
+const route = useRoute();
+const router = useRouter();
+const loading = ref(false);
+const httpService = useNuxtApp()["$http"];
+const toast = useToast();
+
+hadithItem.value = props.selectedItem;
+
+const hadithAddress = computed(() => {
+  return `${hadithItem.value?._source?.address?.vol_title}، صفحه
+   ${hadithItem.value?._source?.address?.page_num}`;
+});
 
 // const open = ref(false);
 const closeModal = () => {
   emit("close");
 };
+
+const goToTheSearch = () => {
+  emit("on-search-similar", hadithItem.value);
+};
+const goToTheChatbot = () => {
+  router.push({
+    name: "hadithaChatBot",
+  });
+};
+
+const handleFavorite = async () => {
+  if (hadithItem.value?._source?.tbookmark) {
+    await removeFromFavorites(hadithItem.value);
+    hadithItem.value._source.tbookmark = false;
+  } else {
+    await addToFavorites(hadithItem.value);
+    hadithItem.value._source.tbookmark = true;
+  }
+};
+
+const addToFavorites = async (item = {}) => {
+  let url = repoUrl() + hadithaApi.favorite.add;
+  url = url.replace("{{data_type}}", "bookmark");
+  url = url.replace("{{ref_key}}", "dhparag");
+  const formData = {
+    ref_id: item._id,
+    title: item._source.content,
+  };
+  httpService
+    .postRequest(url, formData)
+    .then((res) => {
+      toast.add({
+        title: "انجام شد.",
+        description: "به نشان شده ها افزوده شد",
+        color: "success",
+      });
+    })
+    .catch((err) => {
+      toast.add({
+        title: "خطا",
+        description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
+        color: "error",
+      });
+    });
+};
+
+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) => {
+      toast.add({
+        title: "انجام شد.",
+        description: "به نشان شده ها افزوده شد",
+        color: "success",
+      });
+    })
+    .catch((err) => {
+      toast.add({
+        title: "خطا",
+        description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
+        color: "error",
+      });
+    });
+};
+
+const handlePagination = (prevNextIndicator: string) => {
+  if (loading.value) return;
+  loading.value = true;
+
+  let url = repoUrl() + hadithaApi.search.prevNextHadith;
+  url = url.replace("@index_key", "dhparag");
+  url = url.replace("@vol_id", hadithItem.value?._source?.address?.vol_id);
+  url = url.replace("@parag_order", hadithItem.value?._source?.parag_order);
+  url = url.replace("@step", prevNextIndicator);
+
+  httpService
+    .getRequest(url)
+    .then((res) => {
+      hadithItem.value = res.hits.hits?.[0];
+    })
+    .finally(() => (loading.value = false));
+};
+
+const onKeyWordClick = (keyword) => {
+  // router.push({
+  //   name: "hadithaSearch",
+  //   query: {
+  //     q:  query.q ?? "",
+  //     f_aik: keyword ?? "",
+  //   },
+  // });
+};
+const onClassClick = (aiclass) => {
+  // router.push({
+  //   name: "hadithaSearch",
+  //   query: {
+  //     q: route.query.q ?? "",
+  //     f_aik: aiclass ?? "",
+  //   },
+  // });
+};
+// const localCopyTextToClipboard = (text: string) => {
+//   copyTextToClipboard(text);
+// };
+// #endregion methods
+
+const showArabicText = computed(() => {
+  return hadithItem.value?._source?.content_ar?.length;
+});
+const showPersianText = computed(() => {
+  return hadithItem.value?._source?.content?.length;
+});
+const showDescriptionText = computed(() => {
+  return hadithItem.value?._source?.description?.length;
+});
+const showKewrodAndClassesText = computed(() => {
+  return (
+    hadithItem.value?._source?.ai_keywords?.length ||
+    hadithItem.value?._source?.ai_classes?.length
+  );
+});
 </script>
 
 <template>
@@ -39,81 +185,175 @@ const closeModal = () => {
 
     <div class="body-content">
       <div class="h-full flex flex-col justify-center z-2">
-        <div class="bg-container h-full">
+        <div class="bg-container">
           <div class="header flex">
             <UButton
-              variant="ghost"
+              @click="handleFavorite"
+              :variant="hadithItem?._source?.tbookmark ? 'soft' : 'ghost'"
+              color="primary"
               class="bookmark-btn"
-              icon="i-haditha-tag"
+              :icon="
+                hadithItem?._source?.tbookmark
+                  ? 'i-haditha-tag-active'
+                  : 'i-haditha-tag'
+              "
             >
             </UButton>
-            <div class="referene">
+
+            <ULink
+              :to="{
+                name: 'hadithaLibraryShow',
+                params: {
+                  id: hadithItem?._source?.address.vol_id,
+                  slug: hadithAddress,
+                },
+                query: {
+                  page_num: hadithItem?._source?.address?.page_num,
+                },
+              }"
+              color="neutral"
+              variant="ghost"
+              :ui="{
+                leadingIcon: 'text-(--ui-primary)',
+              }"
+              class="referene bg-white hover:bg-gray-100"
+            >
               <span> نشانی: </span>
-              الکافی، جلد ۱، صفحه ۱۰۳
-            </div>
+              {{ hadithAddress ?? "" }}
+            </ULink>
           </div>
 
-          <div class="content">
+          <div class="content firefox-scrollbar">
             <div class="search-item">
-              <div class="text-arabic-section">
-                <div class="section-header">
-                  <span class="section-title">امام جعفر صادق علیه‌السلام </span>
+              <template v-if="showArabicText">
+                <div class="text-arabic-section">
+                  <div class="section-header">
+                    <span class="section-title">
+                      {{
+                        hadithItem?._source?.meta?.hadith_masoum ??
+                        hadithItem?._source?.meta?.hadith_sanad
+                      }}
+                    </span>
 
-                  <UButton variant="ghost" class="copy-btn" label="کپی" />
+                    <UButton
+                      v-if="
+                        hadithItem?._source?.meta?.hadith_masoum?.length ||
+                        hadithItem?._source?.meta?.hadith_sanad
+                      "
+                      @click="
+                        copyTextToClipboard(
+                          hadithItem?._source?.content_ar ?? ''
+                        )
+                      "
+                      variant="ghost"
+                      class="copy-btn"
+                      label="کپی"
+                    />
+                  </div>
+                  <div
+                    v-if="hadithItem?._source?.content_ar?.length"
+                    class="arabic-text"
+                  >
+                    <p>
+                      {{ hadithItem?._source?.content_ar ?? "" }}
+                    </p>
+                  </div>
                 </div>
-                <div class="arabic-text">
-                  <p>
-                    عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ،
-                    قَالَ:
+
+                <div class="separator"></div>
+              </template>
+              <template v-if="showPersianText">
+                <div class="text-persian-section">
+                  <div class="section-header">
+                    <span class="section-title"> ترجمه </span>
+                    <UButton
+                      @click="copyTextToClipboard(hadithItem?._source?.content)"
+                      variant="ghost"
+                      class="copy-btn"
+                      label="کپی"
+                    />
+                  </div>
+
+                  <p
+                    class="from"
+                    v-if="
+                      hadithItem?._source?.meta?.hadith_masoum ||
+                      hadithItem?._source?.meta?.hadith_sanad
+                    "
+                  >
+                    {{
+                      hadithItem?._source?.meta?.hadith_masoum ??
+                      hadithItem?._source?.meta?.hadith_sanad
+                    }}:
                   </p>
-                  <p>قَالَ أَبُو عَبْدِ اللَّهِ (عَلَيْهِ السَّلَامُ):</p>
-                  <p>
-                    إِنَّمَا يَدْرُسُ الْإِنسَانُ لِيَعْلَمَ، وَإِنَّمَا
-                    يَعْلَمُ لِيَعْمَلَ، وَإِنَّمَا يَعْمَلُ لِيُعْرَفَ بِهِ،
-                    وَإِنَّمَا يُعْرَفُ بِهِ لِيُقْبَلَ بِهِ، وَإِنَّمَا
-                    يُقْبَلُ بِهِ لِيُؤْمَنَ عَلَيْهِ، وَإِنَّمَا يُؤْمَنُ
-                    عَلَيْهِ لِيُدْخَلَ الْجَنَّةَ
-                  </p>
-                </div>
-              </div>
-
-              <div class="separator"></div>
-
-              <div class="text-persian-section">
-                <div class="section-header">
-                  <span class="section-title"> ترجمه </span>
-                  <UButton variant="ghost" class="copy-btn" label="کپی" />
+                  <p
+                    class="persian-text"
+                    v-html="hadithItem?._source?.content"
+                  ></p>
                 </div>
 
-                <p class="from">امام جعفر صادق علیه‌السلام:</p>
-                <p class="persian-text">
-                  انسان دانش می‌آموزد تا بداند، و می‌داند تا عمل کند، و عمل
-                  می‌کند تا به سبب آن شناخته شود، و شناخته می‌شود تا (عمل او)
-                  پذیرفته گردد، و پذیرفته می‌شود تا در امان قرار گیرد، و در امان
-                  قرار می‌گیرد تا وارد بهشت شود.
-                </p>
-              </div>
+                <div class="separator"></div>
+              </template>
 
-              <div class="separator"></div>
-
-              <div class="text-description-section">
-                <div class="section-header">
-                  <span class="section-title"> شرح </span>
-                  <UButton variant="ghost" class="copy-btn" label="کپی" />
+              <template v-if="showDescriptionText">
+                <div
+                  v-if="hadithItem?._source?.description?.length"
+                  class="text-description-section"
+                >
+                  <div class="section-header">
+                    <span class="section-title"> شرح </span>
+                    <UButton
+                      @click="
+                        copyTextToClipboard(hadithItem?._source?.description)
+                      "
+                      variant="ghost"
+                      class="copy-btn"
+                      label="کپی"
+                    />
+                  </div>
+                  <p
+                    class="description-item"
+                    v-html="hadithItem?._source?.description"
+                  ></p>
                 </div>
-                <p class="description-item">
-                  این حدیث به سلسله مراتب علم و عمل اشاره دارد و تأکید می‌کند که
-                  علم باید به عمل منتهی شود و عمل نیز باید با نیت خالص و برای
-                  رضای خداوند باشد تا مورد قبول واقع شود و انسان را به سعادت
-                  ابدی برساند.
-                </p>
-                <p class="description-item">
-                  این حدیث به سلسله مراتب علم و عمل اشاره دارد و تأکید می‌کند که
-                  علم باید به عمل منتهی شود و عمل نیز باید با نیت خالص و برای
-                  رضای خداوند باشد تا مورد قبول واقع شود و انسان را به سعادت
-                  ابدی برساند.
-                </p>
-              </div>
+
+                <div class="separator"></div>
+              </template>
+
+              <template v-if="showKewrodAndClassesText">
+                <div class="text-description-section">
+                  <div
+                    v-if="hadithItem?._source?.ai_keywords?.length"
+                    class="mb-4"
+                  >
+                    <span class="text-sm"> کلیدواژگان: </span>
+                    <UButton
+                      class="me-1 text-sm"
+                      v-for="(keyword, i) in hadithItem?._source?.ai_keywords"
+                      :key="i"
+                      @click.prevent="onKeyWordClick(keyword)"
+                      variant="soft"
+                    >
+                      <!-- {{ i > 0 ? "," : "" }} -->
+                      {{ keyword }}
+                    </UButton>
+                  </div>
+
+                  <div v-if="hadithItem?._source?.ai_classes?.length">
+                    <span class="text-sm"> دسته بندی ها: </span>
+                    <UButton
+                      class="me-1 text-sm"
+                      v-for="(aiClass, i) in hadithItem?._source?.ai_classes"
+                      :key="i"
+                      @click.prevent="onClassClick(aiClass)"
+                      variant="soft"
+                    >
+                      <!-- {{ i > 0 ? "," : "" }} -->
+                      {{ aiClass.label }}
+                    </UButton>
+                  </div>
+                </div>
+              </template>
             </div>
           </div>
         </div>
@@ -124,21 +364,26 @@ const closeModal = () => {
       <div class="mt-5 z-2">
         <div class="flex justify-between actions">
           <UButton
+            disabled
             class="similar-btn"
             icon="i-haditha-search-3"
             label="مشابه"
             color="neutral"
             variant="outline"
+            @click.prevent="goToTheSearch()"
           />
           <UButton
-            class="explore-btn"
+            disabled
+            class="explore-btn mr-8"
             trailing-icon="i-haditha-explore"
             label="کاوش"
             variant="solid"
+            @click.prevent="goToTheChatbot()"
           />
         </div>
         <div class="flex justify-between pagination">
           <UButton
+            @click="handlePagination('-1')"
             class="prev-haditha"
             label="حدیث قبل"
             color=""
@@ -146,6 +391,7 @@ const closeModal = () => {
             icon="i-haditha-chevron-right"
           />
           <UButton
+            @click="handlePagination('1')"
             class="next-haditha"
             label="حدیث بعد"
             color=""
@@ -179,6 +425,7 @@ const closeModal = () => {
   .body-content {
     .header {
       .bookmark-btn {
+        width: 49px;
         width: 49px;
         height: 32px;
         gap: 4px;
@@ -189,15 +436,15 @@ const closeModal = () => {
         padding-bottom: 4px;
         padding-left: 12px;
         border: 0.5px solid #d9d9d9;
-        background: #ffffff;
+        /* background: #ffffff;  */
         display: flex;
         justify-content: center;
         align-items: center;
 
         /* span { */
-          /* width: 19; */
-          /* height: 21; */
-          /* background: #29d985; */
+        /* width: 19; */
+        /* height: 21; */
+        /* background: #29d985; */
         /* } */
       }
 
@@ -212,10 +459,10 @@ const closeModal = () => {
         padding-right: 12px;
         padding-bottom: 4px;
         padding-left: 12px;
-        background: #ffffff;
+        /* background-color: #ffffff; */
         border: 0.5px solid #d9d9d9;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 12px;
         line-height: 18px;
@@ -227,7 +474,7 @@ const closeModal = () => {
 
         span {
           margin-left: 0.1em;
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 300;
           font-size: 12px;
           line-height: 18px;
@@ -252,7 +499,7 @@ const closeModal = () => {
           margin-bottom: 0.5em;
 
           .section-title {
-            font-family: IRANSansX;
+            font-family: var(--font);
             font-weight: 400;
             font-size: 14px;
             line-height: 21px;
@@ -285,15 +532,15 @@ const closeModal = () => {
             /* height: 24px; */
             gap: 4px;
             border-radius: 6px;
-            border-width: 0.5px;
+            /* border-width: 0.5px; */
             padding-top: 4px;
             padding-right: 12px;
             padding-bottom: 4px;
             padding-left: 12px;
-            background: #ffffff;
+            /* background: #ffffff; */
             border: 0.5px solid #d9d9d9;
 
-            font-family: IRANSansX;
+            font-family: var(--font);
             font-weight: 300;
             font-size: 12px;
             line-height: 18px;
@@ -307,7 +554,7 @@ const closeModal = () => {
           padding: 2em 0;
 
           .arabic-text {
-            font-family: Takrim;
+            font-family: var(--ar-font);
             font-weight: 400;
             font-size: 18px;
             line-height: 32px;
@@ -327,16 +574,18 @@ const closeModal = () => {
 
           .from,
           .persian-text {
-            font-family: Takrim;
+            /* font-family: Takrim; */
+            font-family: var(--font);
             font-weight: 400;
-            font-size: 18px;
+            /* font-size: 18px; */
+            font-size: 0.85rem;
             line-height: 30px;
             letter-spacing: 0%;
             text-align: right;
             color: var(--ui-color-two);
           }
           /* .persian-text {
-            font-family: Takrim;
+        font-family: var(--ar-font);
             font-weight: 400;
             font-size: 16px;
             line-height: 22px;
@@ -350,9 +599,11 @@ const closeModal = () => {
           padding: 2em 0;
 
           .description-item {
-            font-family: Takrim;
+            font-family: var(--font);
             font-weight: 400;
-            font-size: 18px;
+            /* font-size: 18px; */
+            font-size: 0.85rem;
+
             line-height: 30px;
             letter-spacing: 0%;
             text-align: right;
@@ -369,7 +620,7 @@ const closeModal = () => {
             border-width: 0.5px;
             border: 0.5px solid #d9d9d9;
 
-            font-family: IRANSansX;
+            font-family: var(--font);
             font-weight: 300;
             font-size: 10px;
             line-height: 15px;
@@ -420,7 +671,7 @@ const closeModal = () => {
         );
         box-shadow: 0px 8px 20px 0px #0000001a;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 15px;
         line-height: 22.5px;
@@ -440,7 +691,7 @@ const closeModal = () => {
         background: linear-gradient(268.94deg, #d284ff -0.65%, #4d00ff 104.59%);
         box-shadow: 0px 8px 20px 0px #0000001a;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 16px;
         line-height: 24px;
@@ -464,7 +715,7 @@ const closeModal = () => {
       box-shadow: 0px 8px 20px 0px #0000001a;
 
       .prev-haditha {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 12px;
         line-height: 20px;
@@ -473,7 +724,7 @@ const closeModal = () => {
         color: var(--ui-color-two);
       }
       .next-haditha {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 12px;
         line-height: 20px;
diff --git a/layouts/HadithaLayout.vue b/layouts/HadithaLayout.vue
index 706c95e..3aee359 100644
--- a/layouts/HadithaLayout.vue
+++ b/layouts/HadithaLayout.vue
@@ -4,19 +4,30 @@ definePageMeta({
   layout: false,
 });
 
+// const route = useRoute();
 onMounted(() => {
   clearBodyClass();
 });
 onUnmounted(() => {
   clearBodyClass();
 });
+
+// const HadithaFooter = defineAsyncComponent(() =>
+//   import("@haditha/components/haditha/HadithaFooter.vue")
+// );
 </script>
 
 <template>
+  <!-- <main :class="{ 'h-full': route.name != 'haditha' }"> -->
+
   <main class="h-full">
     <slot name="named-slot"></slot>
     <slot></slot>
   </main>
+  <!-- <haditha-footer
+    v-if="route.name != 'hadithaLibraryShow' && route.name != 'hadithaSearch'"
+    :class="{ static: route.name == 'haditha' }"
+  ></haditha-footer> -->
 </template>
 
 <style>
diff --git a/pages/haditha/chat-bot.vue b/pages/haditha/chat-bot.vue
index a0c8a7a..aaeb2b2 100644
--- a/pages/haditha/chat-bot.vue
+++ b/pages/haditha/chat-bot.vue
@@ -356,7 +356,7 @@ const NavigationMenu = defineAsyncComponent(() =>
           );
         }
         .message {
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 14px;
           line-height: 27px;
@@ -392,7 +392,7 @@ const NavigationMenu = defineAsyncComponent(() =>
           border: 0.3px solid #d9d9d9;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 13px;
           line-height: 26px;
@@ -419,7 +419,7 @@ const NavigationMenu = defineAsyncComponent(() =>
           padding: 8px;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 11px;
           line-height: 16.5px;
@@ -476,7 +476,7 @@ const NavigationMenu = defineAsyncComponent(() =>
         );
         box-shadow: 0px 1px 4px 0px #0000000d;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 14px;
         line-height: 21px;
diff --git a/pages/haditha/favorites/index.vue b/pages/haditha/favorites/index.vue
index 627f984..fb3276e 100644
--- a/pages/haditha/favorites/index.vue
+++ b/pages/haditha/favorites/index.vue
@@ -1,5 +1,19 @@
 <script setup>
 import hadithaApi from "@haditha/apis/hadithaApi";
+import headLinks from "@haditha/json/haditha/headLinks";
+import headMetas from "@haditha/json/haditha/headMetas";
+// const { loggedIn, user, session, fetch, clear, openInPopup } = useUserSession()
+// console.info(loggedIn, user, session, fetch, clear, openInPopup);
+
+// const id_token = useCookie("id_token");
+// const token = id_token.value ?? "GuestAccess";
+
+// const config = useRuntimeConfig();
+// const baseUrl =
+// config.public.NUXT_PUBLIC_BASE_URL + config.public.NUXT_PUBLIC_API_NAME;
+
+// this enable us to send cookies.
+// const requestFetch = useRequestFetch();
 
 definePageMeta({
   layout: false,
@@ -10,171 +24,121 @@ useHead({
   title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | ذخیره ها`,
   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,
+    class: `${import.meta.env.VITE_HADITH_SYSTEM} favorites-page`,
   },
-  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,
 });
 
 // #region refs
-const loading = ref(false);
+// const el = ref(null);
 const httpService = useNuxtApp()["$http"];
 
+const favOffset = useState("favOffset", () => 0);
+const total = useState("total", () => 0);
 // #endregion refs
 
 // #region reactive
 const state = reactive({
   // list: new Array(5).fill(0),
-  list: [],
-  counts: [],
-  totalCounts: [],
   pagination: {
     page: 1,
     pages: 1,
-    offset: 0,
-    limit: 10,
+    // offset: 0,
+    limit: 15,
   },
 });
 // #endregion reactive
 
 // #region methods
 
-const getCategories = async (dataType = "bookmark") => {
-  if (loading.value) return;
-
-  loading.value = true;
-
+const getFavorites = async (dataType = "bookmark") => {
   let url = repoUrl() + hadithaApi.favorite.getList;
   url = url.replace("@data_type", dataType);
   url = url.replace("@time_key", "all");
   url = url.replace("@source", "main");
-  url = url.replace("@offset", state.pagination.offset);
+  url = url.replace("@offset", favOffset.value);
   url = url.replace("@limit", state.pagination.limit);
   url = url.replace("@q", "none");
 
-  return await httpService
-    .getRequest(url)
-    .then((res) => {
-      state.list = res.hits.hits;
-      state.totalCounts = res.hits.total.value;
-      loading.value = false;
-      // getCounts();
-    })
-    .catch((err) => {
-      console.info(err);
-      loading.value = false;
-    });
+  return await httpService.getRequest(url).then((data) => {
+    total.value = data.hits?.total?.value ?? 0;
+    favOffset.value += state.pagination.limit;
+    return data.hits?.hits;
+  });
+
+  // return await requestFetch(url, {
+  //   headers: {
+  //     method: "get",
+  //     Authorization: token,
+  //   },
+  // }).then((data) => {
+  //   total.value = data.hits?.total?.value ?? 0;
+  //   favOffset.value += state.pagination.limit;
+
+  //   return data.hits?.hits;
+  // });
 };
 
-// const getCounts = async () => {
-//   let url = repoUrl() + hadithaApi.favorite.getCounts;
-//   url = url.replace("@data_type", "bookmark");
+const { data: favoriteList } = await useAsyncData("favorites", () =>
+  getFavorites()
+);
 
-//   await httpService
-//     .getRequest(url)
-//     .then((res) => {
-//       state.totalCounts = res.hits.total.value;
-//       state.counts = res.aggregations.result.buckets;
-//       loading.value = false;
-//     })
-//     .catch((err) => {
-//       console.info(err);
-//     })
-//     .finally(() => {
-//       loading.value = false;
-//     });
-// };
-// #endregion methods
+// Client-side infinite scroll
+const loadMore = async () => {
+  return await getFavorites().then((res) => {
+    const hits = res ?? [];
+    favoriteList.value = [...favoriteList.value, ...hits];
+    return res;
+  });
+};
 
-// #region hooks
-onMounted(() => {
-  getCategories();
+// const { isFetching } = useInfiniteScroll(loadMore, "favoriteInfiniteScroll");
+const { isFetching } = useInfiniteScroll(async () => {
+  await loadMore();
 });
-// #endregion methods
+
+const updateList = (index) => {
+  favoriteList.value.splice(index, 1);
+};
+
+onUnmounted(() => {
+  favOffset.value = total.value = 0;
+});
+
+// Client-side infinite scroll
+// useInfiniteScroll(
+//   el,
+//   async () => {
+//     if (!hasMore.value || loading.value) return;
+
+//     loading.value = true;
+//     try {
+//       await getFavorites().then((res) => {
+//         const hits = res?.hits?.hits ?? [];
+
+//         if (hits.length) {
+//           // Use spread operator to create new array reference
+//           favoriteList.value = [...favoriteList.value, ...hits];
+//         } else {
+//           hasMore.value = false;
+//         }
+//       });
+//     } catch (error) {
+//       hasMore.value = false;
+
+//       //   console.error("Error loading more items:", error);
+//       // Consider setting hasMore.value = false if you want to stop on error
+//     } finally {
+//       loading.value = false;
+//     }
+//   },
+//   {
+//     distance: 100,
+//   }
+// );
 
 const HadithaLayout = defineAsyncComponent(() =>
   import("@haditha/layouts/HadithaLayout.vue")
@@ -191,12 +155,12 @@ const SearchList = defineAsyncComponent(() =>
 <template>
   <HadithaLayout>
     <div class="h-full flex flex-col justify-center">
-      <div class="bg-container h-full">
+      <div class="bg-container">
         <navigation-menu></navigation-menu>
 
         <div class="text-logo">
           <div
-            v-if="state.list?.length"
+            v-show="favoriteList?.length"
             class="search-box-container pb-0 flex justify-center"
           >
             <div class="search-list-contianer">
@@ -205,18 +169,22 @@ const SearchList = defineAsyncComponent(() =>
                 نتیجه
               </div>
 
-              <div ref="el" class="search-list firefox-scrollbar hadithaFavorites">
+              <div
+                ref="favoriteInfiniteScroll"
+                id="favoriteInfiniteScroll"
+                class="search-list firefox-scrollbar hadithaFavorites"
+              >
                 <search-list
                   no-data-text="هنوز چیزی ذخیره نکرده‌اید!"
                   no-data-icon="/img/haditha/save.png"
-                  :list="state.list"
-                  :total="state.totalCounts"
+                  :list="favoriteList"
+                  @on-bookmard-removed="updateList"
                 ></search-list>
               </div>
             </div>
           </div>
           <no-data
-            v-else
+            v-show="favoriteList?.length == 0"
             class="h-full w-full flex flex-col justify-center items-center"
           >
             <img fit="auto" quality="80" src="/img/haditha/save.png" />
@@ -234,10 +202,10 @@ const SearchList = defineAsyncComponent(() =>
   /* height: 100dvh; */
   background-size: cover;
   background-repeat: no-repeat;
-  background: #f7fffd;
 }
 
 .text-logo {
+  height: 100%;
   padding-top: 4.5em;
   position: relative;
 }
@@ -252,14 +220,15 @@ const SearchList = defineAsyncComponent(() =>
 }
 
 .search-list-contianer {
-  max-width: 41em; /*656px*/
+  /*max-width: 41em; 656px*/
+  max-width: 75em; /*1200px*/
   width: 100%;
   margin: 0 1em;
 
   .total {
     padding: 0.5em 1.8em;
 
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 400;
     font-size: 0.68rem; /*11px*/
     line-height: 1rem;
@@ -269,11 +238,11 @@ const SearchList = defineAsyncComponent(() =>
   }
   .search-list {
     padding: 1em 1.3em;
-    height: calc(100dvh - 16em);
-    overflow-y: auto;
+    /* height: calc(100dvh - 16em); */
+    /* overflow-y: auto; */
 
     &.hadithaFavorites {
-      height: calc(100dvh - 8em);
+      /* height: calc(100dvh - 8em); */
     }
 
     &:not(:last-child) {
diff --git a/pages/haditha/library/[id]/[slug]/index.vue b/pages/haditha/library/[id]/[slug]/index.vue
index 46c2a29..9bc021f 100644
--- a/pages/haditha/library/[id]/[slug]/index.vue
+++ b/pages/haditha/library/[id]/[slug]/index.vue
@@ -34,26 +34,26 @@ useHead({
     ...headMetas,
   ],
   bodyAttrs: {
-    class: import.meta.env.VITE_HADITH_SYSTEM,
+    class: [import.meta.env.VITE_HADITH_SYSTEM, "library-show-page"],
   },
   link: headLinks,
 });
 // #endregion imports
 // #region props
 
-const props = defineProps({
-  list: {
-    default() {
-      return [];
-    },
-  },
-  noDataText: {
-    default: "نتیجه‌ای یافت نشد!",
-  },
-  noDataIcon: {
-    default: "/img/haditha/no-data.png",
-  },
-});
+// const props = defineProps({
+//   list: {
+//     default() {
+//       return [];
+//     },
+//   },
+//   noDataText: {
+//     default: "نتیجه‌ای یافت نشد!",
+//   },
+//   noDataIcon: {
+//     default: "/img/haditha/no-data.png",
+//   },
+// });
 // #endregion props
 
 // #region refs and reactives
@@ -61,25 +61,23 @@ const props = defineProps({
 // const page_num = computed({
 //   // getter
 //   get() {
-//     return state.selectedItem?.[0]._source.address.page_num - 1 >= 1
-//       ? state.selectedItem?.[0]._source.address.page_num - 1
+//     return selectedItem.value?.[0]._source.address.page_num - 1 >= 1
+//       ? selectedItem.value?.[0]._source.address.page_num - 1
 //       : 1;
 //   },
 //   // setter
 //   set(newValue) {
-//     console.info(newValue);
-
 //     // handlePagination(1, newValue);
 //   },
 // });
 
 const isModalOpen = ref(false);
-const loading = ref(false);
 const httpService = useNuxtApp()["$http"];
-const page_num = ref(1);
+const loading = useState("loading", () => false);
+const page_num = useState("page_num", () => 1);
+const volumeInfo = useState("volumeInfo", () => {});
 
 const state = reactive({
-  selectedItem: [] as Hit[],
   treeItems: [
     {
       title: "فصل اول",
@@ -134,46 +132,49 @@ const state = reactive({
   ],
 });
 
-const pageIsLessThanOne = computed(() => {
-  console.info("pageIsLessThanOne");
-  return page_num.value <= 1;
-});
-const pageIsBiggerThanTotal = computed(() => {
-  console.info("pageIsBiggerThanTotal");
-  const page_count = +route.query.page_count;
-  return page_num.value + 1 >= page_count;
-});
 // #endregion refs and reactives
 
 // #region methods
-const fetchData = async () => {
-  if (loading.value) return;
-  loading.value = true;
-
-  let page_first = +route.query.page_first;
+const fetchData = async (page_first = 0) => {
+  const pageNum = route.query.page_num;
   const volId = route.params.id;
+  page_num.value = pageNum ?? page_first;
 
   let url = repoUrl() + hadithaApi.library.show;
   url = url.replace("@appname", "monir");
-  url = url.replace("@page_start", 0);
-  url = url.replace("@page_end", 1);
+  url = url.replace("@page_len", 1);
   url = url.replace("@vol_id", volId);
+  url = url.replace("@page_start", page_num.value);
 
-  console.info("urlurlurlurl", url);
-  // fetch search list from backend(ssr)
-  const { data, status, error, refresh, clear } =
-    await useHadithaSearchComposable<HadithResponseModel>(url, {
-      method: "get",
-    });
+  return await httpService.getRequest(url).then((res) => {
+    volumeInfo.value = res.meta;
 
-  if (status.value == "success") {
-    state.selectedItem = <Hit[]>data.value.hits.hits;
-  }
+    // for first time and navigating from book list.
+    if (page_num.value == 0) page_num.value = volumeInfo.value.page_first;
 
-  loading.value = false;
+    return res;
+  });
 };
 
-fetchData();
+// Server-side initial load
+const { data: selectedItem } = await useAsyncData(
+  "libraryItem",
+  () => fetchData(),
+  {
+    transform: (data) => data.hits.hits,
+    // getCachedData: (key) => {
+    //   return useNuxtApp().payload.data[key] || useNuxtApp().static.data[key];
+    // },
+  }
+);
+
+const pageIsLessThanOne = computed(() => {
+  return +page_num.value <= 1;
+});
+const pageIsBiggerThanTotal = computed(() => {
+  const page_count = volumeInfo.value?.page_count;
+  return +page_num.value + 1 >= page_count;
+});
 
 const goToTheLibrary = (type: string) => {
   router.push({
@@ -181,23 +182,18 @@ const goToTheLibrary = (type: string) => {
   });
 };
 const onOpenList = () => {
-  console.info("onOpenList");
   isModalOpen.value = true;
 };
 const onSearch = () => {
-  // console.info("onSearch");
   router.push({
     name: "hadithaSearch",
   });
 };
-const onClose = () => {
-  console.info("onClose");
-  router.push({
-    name: "hadithLibrary",
-  });
+const onCloseModal = () => {
+  isModalOpen.value = false;
 };
 
-const handlePagination = (
+const handlePagination = async (
   prevNextIndicator: number,
   userEnteredPage: number | undefined = undefined
 ) => {
@@ -205,8 +201,8 @@ const handlePagination = (
   loading.value = true;
 
   const volId = route.params.id;
-  const page_count = +route.query.page_count;
-  const page_first = +route.query.page_first;
+  const page_count = volumeInfo.value?.page_count;
+
   const isPageBiggerThanOne = +page_num.value + prevNextIndicator > 0;
   const isPageLessThanTotal = +page_num.value + prevNextIndicator < page_count;
 
@@ -224,12 +220,14 @@ const handlePagination = (
   // اگر کاربر شماره صفحه ای را وارد نکرده باشد..
   if (!userEnteredPage) page_num.value = +page_num.value + prevNextIndicator;
 
-  httpService
+  return await httpService
     .getRequest(url)
     .then((res: HadithResponseModel) => {
-      state.selectedItem = res.hits.hits;
+      selectedItem.value = res.hits.hits;
     })
-    .finally(() => (loading.value = false));
+    .finally(() => {
+      loading.value = false;
+    });
 };
 const handlePageChange = () => {
   handlePagination(1, +page_num.value);
@@ -250,25 +248,153 @@ const getDataTree = () => {
   });
 };
 
-const prepareTreeData = (data) => {
-  return data.map((item) => {
-    const res = {
-      ...item,
-      ...item._source,
-      title: item._source.content,
-    };
-    delete res._source;
-    return res;
+// const prepareTreeData = (rawTree, startIndex = 0) => {
+//   const tree = [];
+//   let i = startIndex;
+
+//   // Base case: if we've reached the end of the array, return an empty tree
+//   if (i >= rawTree.length) {
+//     return tree;
+//   }
+
+//   // Process nodes with level 1
+//   while (i < rawTree.length && rawTree[i]._source.meta.level === 1) {
+//     // Create a tree node for the current element
+//     const currentNode = {
+//       ...rawTree[i],
+//       title: rawTree[i]._source.content,
+//       icon: "no-icon",
+//       children: [],
+//     };
+
+//     // Recursively process children (nodes with level > 1)
+//     let childIndex = i + 1;
+//     while (
+//       childIndex < rawTree.length &&
+//       rawTree[childIndex]._source.meta.level > 1
+//     ) {
+//       const childNode = {
+//         ...rawTree[childIndex],
+//         title: rawTree[childIndex]._source.content,
+//       };
+//       currentNode.children.push(childNode);
+//       childIndex++;
+//     }
+
+//     // Update the icon if there are children
+//     if (currentNode.children.length > 0) {
+//       currentNode.icon = "lucide:plus";
+//     }
+
+//     // Add the processed node to the tree
+//     tree.push(currentNode);
+
+//     // Move the index to the next level-1 node
+//     i = childIndex;
+//   }
+
+//   // Recursively process the remaining part of the array
+//   if (i < rawTree.length) {
+//     tree.push(...prepareTreeData(rawTree, i));
+//   }
+
+//   return tree;
+// };
+
+// const prepareTreeData = (rawTree) => {
+//   const tree = [];
+//   let mainIndex = 0;
+
+//   for (let i = mainIndex; i < rawTree.length; i++) {
+//     if (rawTree[i]._source.meta.level == 1) {
+//       rawTree[i].title = rawTree[i]._source.content;
+//       rawTree[i].icon = "no-icon";
+
+//       tree.push(rawTree[i]);
+//       tree[tree.length - 1].children = [];
+
+//       for (let j = i + 1; j < rawTree.length; j++) {
+
+//         if (rawTree[j]._source.meta.level == 1) {
+//           mainIndex = j;
+//           break;
+//         } else {
+//           rawTree[j].title = rawTree[j]._source.content;
+//           tree[tree.length - 1].children.push(rawTree[j]);
+//         }
+//       }
+
+//       if (tree[tree.length - 1].children.length)
+//         tree[tree.length - 1].icon = "lucide:plus";
+//     }
+//   }
+//   return tree;
+// };
+
+const prepareTreeData = (rawTree) => {
+  const tree = [];
+  let mainIndex = 0;
+
+  // level 1
+  for (let i = mainIndex; i < rawTree.length; i++) {
+    if (rawTree[i]._source.meta.level == 1) {
+      rawTree[i].title = rawTree[i]._source.content;
+      rawTree[i].icon = "no-icon";
+
+      tree.push(rawTree[i]);
+      tree[tree.length - 1].children = [];
+
+      // level 2
+      for (let j = i + 1; j < rawTree.length; j++) {
+        if (rawTree[j]._source.meta.level == 1) {
+          mainIndex = j;
+          break;
+        } else {
+          rawTree[j].title = rawTree[j]._source.content;
+          tree[tree.length - 1].children.push(rawTree[j]);
+
+          // level 3
+          // let secondIndex = j;
+          // tree[tree.length - 1].children[tree[tree.length - 1].children.length -1].children = [];
+          // console.info(tree[tree.length - 1].children);
+
+          // for (let k = secondIndex + 1; k < rawTree.length; k++) {
+          //   if (rawTree[k]._source.meta.level == 2) {
+          //     secondIndex = k;
+          //     break;
+          //   } else {
+          //     console.info(j);
+
+          //     rawTree[k].title = rawTree[k]._source.content;
+          //     tree[tree.length - 1].children[tree[tree.length - 1].children.length -1].children.push(rawTree[k]);
+          //   }
+          // }
+          // if (tree[tree.length - 1].children[j].length)
+          // tree[tree.length - 1].children[j].icon = "lucide:plus";
+        }
+      }
+
+      if (tree[tree.length - 1].children.length)
+        tree[tree.length - 1].icon = "lucide:plus";
+    }
+  }
+  return tree;
+};
+const onselectItem = (item) => {
+  handlePagination(1, item._source.meta.page).then(() => {
+    page_num.value = item._source.meta.page;
   });
 };
 
 getDataTree();
 
-onMounted(() => {
-  page_num.value = +route.query.page_first;
-});
 // #endregion methods
 
+onUnmounted(() => {
+  loading.value = false;
+  page_num.value = 1;
+  volumeInfo.value = {};
+});
 // components declaration
 const HadithaLayout = defineAsyncComponent(
   () => import("@haditha/layouts/HadithaLayout.vue")
@@ -276,6 +402,9 @@ const HadithaLayout = defineAsyncComponent(
 const UTree = defineAsyncComponent(
   () => import("@haditha/components/haditha/library-show/UTree.vue")
 );
+const NavigationMenu = defineAsyncComponent(
+  () => import("@haditha/components/haditha/NavigationMenu.vue")
+);
 // const AccordionMenu = defineAsyncComponent(
 //   () => import("@haditha/components/haditha/library-show/AccordionMenu..vue")
 // );
@@ -286,15 +415,17 @@ const UTree = defineAsyncComponent(
     <div class="page-container h-full">
       <UContainer
         ui="{
-          base: 'sm:px-6 lg:px-4',
+          base: 'sm:px-6 lg:px-4 ',
         }"
         class="page-inner-container sm:px-6 lg:px-4"
       >
+        <!-- <navigation-menu></navigation-menu> -->
+
         <div class="page-header py-4 flex justify-between items-center">
           <div class="flex items-center">
             <UButton
-              class="menu p-1 me-8"
-              @click="onOpenList"
+              class="menu p-0 me-8"
+              @click.prevent="onOpenList"
               icon="i-lucide-menu"
               variant=""
             />
@@ -307,7 +438,7 @@ const UTree = defineAsyncComponent(
           <div class="flex items-center">
             <UButton
               @click="onSearch"
-              class="my-trailing-button search p-0"
+              class="my-trailing-button search p-0 close-btn text-[var(--ui-color-two)] hover:bg-gray-300"
               icon="i-lucide-search"
               variant=""
               size="xl"
@@ -316,7 +447,7 @@ const UTree = defineAsyncComponent(
 
             <UButton
               @click="goToTheLibrary"
-              class="my-trailing-button close p-0 ms-8"
+              class="my-trailing-button close p-0 ms-8 close-btn text-[var(--ui-color-two)] hover:bg-gray-300"
               icon="i-lucide:x"
               variant=""
               size="xl"
@@ -327,17 +458,15 @@ const UTree = defineAsyncComponent(
         <div class="separator"></div>
 
         <div class="page-content firefox-scrollbar py-14 p-2">
-          <!-- <h2></h2> -->
           <p
-            v-if="state.selectedItem?.length"
-            v-for="(parag, index) in state.selectedItem"
+            v-for="(parag, index) in selectedItem"
             :key="index"
             v-html="parag?._source?.content"
           ></p>
         </div>
 
         <div class="body-footer">
-          <div class="mt-5 z-2">
+          <div class="mt-5 pb-5 z-2">
             <div class="flex justify-between pagination">
               <UButton
                 @click="handlePagination(-1)"
@@ -349,7 +478,7 @@ const UTree = defineAsyncComponent(
                 :disabled="pageIsLessThanOne"
               />
               <div class="flex items-center">
-                <span class="total-pages">{{ route.query.page_count }}</span>
+                <span class="total-pages">{{ volumeInfo?.page_count }}</span>
                 <span class="mx-2">/</span>
                 <UInput
                   :disabled="loading"
@@ -399,6 +528,7 @@ const UTree = defineAsyncComponent(
       }"
       title="فهرست"
       :close="{
+        onClick: onCloseModal,
         color: 'primary',
         variant: 'outline',
         class: 'rounded-full',
@@ -407,7 +537,7 @@ const UTree = defineAsyncComponent(
       <!-- <template #header></template> -->
       <!-- <template #content></template> -->
       <template #body>
-        <UTree :items="state.treeItems" />
+        <UTree :items="state.treeItems" @on-select-item="onselectItem" />
         <!-- <accordion-menu @close="isModalOpen = !isModalOpen"></accordion-menu> -->
       </template>
       <!-- <template #footer></template> -->
@@ -420,12 +550,13 @@ const UTree = defineAsyncComponent(
   background: #f7fffd;
 
   .page-inner-container {
+    /* padding-top: 6em; */
     /* position: relative; */
     /* padding-bottom: 4em; */
-    /* width: 100%; */
-    /* max-width: 1200px; */
-    /* margin-right: auto; */
-    /* margin-left: auto; */
+    width: 100%;
+    max-width: 1200px;
+    margin-right: auto;
+    margin-left: auto;
     .page-header {
       color: var(--ui-color-two);
 
@@ -436,9 +567,12 @@ const UTree = defineAsyncComponent(
         margin-left: 2.2em;
       }
       .title {
-        font-family: IRANSansX;
+        /* font-family: IRANSansX; */
+        font-family: var(--font);
+
         font-weight: 400;
-        font-size: 16px;
+        /* font-size: 16px; */
+        font-size: 0.9rem;
         line-height: 20px;
         letter-spacing: 0%;
         text-align: right;
@@ -473,22 +607,32 @@ const UTree = defineAsyncComponent(
       );
     }
     .page-content {
+      padding-bottom: 5em;
       /* margin: 1.5em; */
 
-      font-family: Takrim;
+      /* font-family: var(--ar-font); */
+      font-family: var(--font);
       font-weight: 400;
-      font-size: 20px;
+      /* font-size: 20px; */
+      font-size: 0.9rem;
       line-height: 40px;
       letter-spacing: 0%;
-      text-align: right;
+      text-align: justify;
 
       color: var(--ui-color-two);
 
-      height: calc(100dvh - 8em);
-      overflow-y: auto;
+      /* height: calc(100dvh - 13em); */
+      /* overflow-y: auto; */
     }
 
     .body-footer {
+      position: fixed;
+      bottom: 0em;
+      left: 0;
+      right: 0;
+      max-width: 1200px;
+      margin: auto;
+
       .actions {
         margin-bottom: 1em;
 
@@ -512,7 +656,7 @@ const UTree = defineAsyncComponent(
           );
           box-shadow: 0px 8px 20px 0px #0000001a;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 15px;
           line-height: 22.5px;
@@ -536,7 +680,7 @@ const UTree = defineAsyncComponent(
           );
           box-shadow: 0px 8px 20px 0px #0000001a;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 16px;
           line-height: 24px;
@@ -560,7 +704,7 @@ const UTree = defineAsyncComponent(
         box-shadow: 0px 8px 20px 0px #0000001a;
 
         .total-pages {
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 12px;
           line-height: 100%;
@@ -569,23 +713,36 @@ const UTree = defineAsyncComponent(
           color: #8a92a8;
         }
         .prev-haditha {
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 300;
-          font-size: 12px;
+          font-size: 0.6rem;
           line-height: 20px;
           letter-spacing: 0%;
           text-align: right;
           color: var(--ui-color-two);
         }
         .next-haditha {
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 300;
-          font-size: 12px;
+          /* font-size: 12px; */
+          font-size: 0.6rem;
           line-height: 20px;
           letter-spacing: 0%;
           text-align: right;
           color: var(--ui-color-two);
         }
+
+        .prev-haditha,
+        .next-haditha {
+          &:hover {
+            cursor: pointer;
+            background-color: #eee;
+          }
+
+          &:disabled {
+            cursor: not-allowed;
+          }
+        }
       }
     }
   }
@@ -593,6 +750,9 @@ const UTree = defineAsyncComponent(
 </style>
 
 <style>
+body.hadith-system.library-show-page {
+  background-color: #f7fffd;
+}
 .page-container {
   .page-inner-container {
     .body-footer {
@@ -608,7 +768,7 @@ const UTree = defineAsyncComponent(
           border-width: 0.5px;
           border: 0.3px solid #e0e0e0;
           box-shadow: 0px 8px 20px 0px #0000001a;
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 0.75rem;
           line-height: 100%;
diff --git a/pages/haditha/library/index.vue b/pages/haditha/library/index.vue
index 8d9bb3f..3f15068 100644
--- a/pages/haditha/library/index.vue
+++ b/pages/haditha/library/index.vue
@@ -2,36 +2,49 @@
 import hadithaApi from "@haditha/apis/hadithaApi";
 import headLinks from "@haditha/json/haditha/headLinks";
 import headMetas from "@haditha/json/haditha/headMetas";
-import { useInfiniteScroll } from "@vueuse/core";
+// import { useInfiniteScroll } from "@vueuse/core";
+// const id_token = useCookie("id_token");
+// const token = id_token.value ?? "GuestAccess";
+
+// const config = useRuntimeConfig();
+// const baseUrl =
+  // config.public.NUXT_PUBLIC_BASE_URL + config.public.NUXT_PUBLIC_API_NAME;
+
+// this enable us to send cookies.
+// const requestFetch = useRequestFetch();
 
 definePageMeta({
   layout: false,
   name: "hadithaLibrary",
 });
 useHead({
-  name: "hadithaLibrary",
   title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | کتابخانه`,
   meta: [
     { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
     ...headMetas,
   ],
   bodyAttrs: {
-    class: import.meta.env.VITE_HADITH_SYSTEM,
+    class: `${import.meta.env.VITE_HADITH_SYSTEM} library-page`,
   },
   link: headLinks,
 });
 
 // #region refs
-const el = useTemplateRef<HTMLElement>("el");
 const httpService = useNuxtApp()["$http"];
-const total = ref(0);
-const currentPage = useState("currentPage", () => 0);
+// const { $api } = useNuxtApp()
+const offset = useState("offset", () => 0);
+const total = useState("total", () => 0);
+// const libraryList = useState("libraryList", () => []);
+// const loading = useState("loading", () => false);
+// const hasMore = useState("hasMore", () => true);
+
+// const el = ref(null);
 // #endregion refs
 
 // #region reactive
 const state = reactive({
   pagination: {
-    limit: 10,
+    limit: 15,
     page: 1,
     pages: 1,
   },
@@ -39,63 +52,80 @@ const state = reactive({
 
 // #region methods
 
-const getLibraryList = async (dataType = "bookmark") => {
+const getLibraryList = async () => {
+  // let url = baseUrl + repoUrl() + hadithaApi.library.list;
   let url = repoUrl() + hadithaApi.library.list;
   url = url.replace("@field_collapsed", "normal");
-  url = url.replace("@offset", currentPage.value);
+  url = url.replace("@offset", offset.value);
   url = url.replace("@limit", state.pagination.limit);
   url = url.replace("@q", "none");
 
-  return await httpService.postRequest(url).then((res) => {
-    total.value = res.hits.total.value ?? 0;
-    currentPage.value += state.pagination.limit;
-
-    return res;
+  // return requestFetch(url, {
+  //   method: "POST",
+  //   headers: {
+  //     Authorization: token,
+  //   },
+  // })
+  return httpService.postRequest(url).then((data) => {
+    total.value = data.hits?.total?.value ?? 0;
+    offset.value += state.pagination.limit;
+    return data.hits?.hits;
   });
 };
 
 // Server-side initial load
-const { data: loadedItems } = await useAsyncData(
-  "libraryList",
-  () => getLibraryList(),
-  {
-    transform: (data) => data.hits.hits,
-    getCachedData: (key) => {
-      return useNuxtApp().payload.data[key] || useNuxtApp().static.data[key];
-    },
-  }
+// Wrapping with useAsyncDataavoid double data fetching when
+// doing server-side rendering (server & client on hydration).
+const { data: libraryList } = await useAsyncData("libraryList", () =>
+  getLibraryList()
 );
 
-// Client-side state
-const loading = ref(false);
-const hasMore = ref(true);
-
 // Client-side infinite scroll
-useInfiniteScroll(
-  el,
-  async () => {
-    if (!hasMore.value || loading.value) return;
+const loadMore = async () => {
+  // const listElm = $event.target;
 
-    loading.value = true;
-    try {
-      // const nextPage = page.value + 1;
-      await getLibraryList().then((res) => {
-        const hits = res.hits.hits;
+  // if (status.value == "pending") return;
+  // // window.innerHeight + window.scrollY >= document.body.offsetHeight - 100
+  // if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
+  //   status.value = "pending";
+  //   mainState.pagination.offset =
+  //     mainState.pagination.offset + mainState.pagination.limit;
 
-        if (hits.length) {
-          loadedItems.value.push(...hits);
-        } else {
-          hasMore.value = false;
-        }
-      });
-    } finally {
-      loading.value = false;
-    }
-  },
-  { distance: 100 }
-);
+  //   if (total.value > mainState.pagination.offset) {
+  //     window.clearTimeout(isScrolling.value);
+  //     isScrolling.value = setTimeout(() => {
+  return await getLibraryList().then((res) => {
+    const hits = res ?? [];
+    // Use spread operator to create new array reference
+    libraryList.value = [...libraryList.value, ...hits];
+    // status.value = "success";
+    return res;
+  });
+
+  //     }, 300);
+  //   } else {
+  //     toast.add({
+  //       title: "کاربر محترم",
+  //       description: "دیگر رکوردی جهت بارگزاری وجود ندارد.",
+  //       color: "success",
+  //     });
+  //     status.value = "idle";
+  //   }
+  // } else status.value = "idle";
+};
+// const { isFetching } = useInfiniteScroll(loadMore, "libraryInfiniteScroll");
+
+const { isFetching } = useInfiniteScroll(async () => {
+  await loadMore();
+});
 // #endregion methods
 
+// #region hooks
+onUnmounted(() => {
+  offset.value = total.value = 0;
+});
+// #endregion hooks
+
 // components declaration
 const HadithaLayout = defineAsyncComponent(
   () => import("@haditha/layouts/HadithaLayout.vue")
@@ -110,7 +140,7 @@ const CardList = defineAsyncComponent(
 
 <template>
   <HadithaLayout>
-    <div class="search-box-container h-full flex flex-col justify-center">
+    <div class="search-box-container h-fullsd flex flex-col justify-center">
       <navigation-menu></navigation-menu>
 
       <div class="library-list-contianer">
@@ -120,16 +150,24 @@ const CardList = defineAsyncComponent(
         </div>
 
         <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"
+          ref="libraryInfiniteScroll"
+          id="libraryInfiniteScroll"
+          class="library-list pl-4 firefox-scrollbar 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"
+          :class="{ 'grid grid-cols-2': libraryList?.length }"
         >
           <!-- Client-side loaded content -->
           <card-list
-            v-if="loadedItems.length"
-            no-data-text="هنوز چیزی ذخیره نکرده‌اید!"
-            no-data-icon="/img/haditha/no-data.png"
-            :list="loadedItems"
+            :list="libraryList"
+            no-data-text="به زودی لیست کتاب ها بروزرسانی خواهد شد."
+            no-data-icon=""
           ></card-list>
+
+          <no-data
+            class="h-full w-full flex flex-col justify-center items-center"
+            v-if="libraryList?.length == 0"
+          >
+            <p class="no-data-text">به زودی لیست کتاب ها بروزرسانی خواهد شد.</p>
+          </no-data>
         </div>
       </div>
     </div>
@@ -139,7 +177,6 @@ const CardList = defineAsyncComponent(
 <style scoped>
 .search-box-container {
   padding-top: 8.3em;
-  background: #f7fffd;
 
   .library-list-contianer {
     height: 100%;
@@ -154,7 +191,7 @@ const CardList = defineAsyncComponent(
       margin-bottom: 2em;
       .title {
         margin-left: 0.4em;
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 24px;
         line-height: 36px;
@@ -167,11 +204,12 @@ const CardList = defineAsyncComponent(
 
     .library-list {
       /* padding: 1em 1.3em; */
-      height: calc(100dvh - 13.5em);
-      overflow-y: auto;
+      /* height: calc(100dvh - 13.5em); */
+      /* overflow-y: auto; */
+      /* scroll-behavior: smooth; */
     }
     .no-data-text {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 300;
       font-size: 16px;
       line-height: 24px;
diff --git a/pages/haditha/login.vue b/pages/haditha/login.vue
index 47e7abe..d70925f 100644
--- a/pages/haditha/login.vue
+++ b/pages/haditha/login.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import headLinks from "@haditha/json/haditha/headLinks";
+import headMetas from "@haditha/json/haditha/headMetas";
+
 definePageMeta({
   layout: false,
   name: "hadithaLogin",
@@ -7,94 +10,12 @@ useHead({
   title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | ورود`,
   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,
 });
 
 const stepOne = ref(true);
@@ -155,7 +76,7 @@ const EnterVerifyCode = defineAsyncComponent(
 
       .title {
         margin-bottom: 1.2em;
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 20px;
         line-height: 30px;
@@ -177,7 +98,7 @@ const EnterVerifyCode = defineAsyncComponent(
       }
 
       .description {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 400;
         font-size: 14px;
         line-height: 21px;
@@ -206,7 +127,7 @@ const EnterVerifyCode = defineAsyncComponent(
           border: 0.3px solid #d9d9d9;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 16px;
           line-height: 24px;
@@ -246,7 +167,7 @@ const EnterVerifyCode = defineAsyncComponent(
           border: 0.3px solid #d9d9d9;
           box-shadow: 0px 1px 4px 0px #0000000d;
 
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 400;
           font-size: 16px;
           line-height: 100%;
diff --git a/pages/haditha/public-pages/about-us.vue b/pages/haditha/public-pages/about-us.vue
index b64f240..4ef2866 100644
--- a/pages/haditha/public-pages/about-us.vue
+++ b/pages/haditha/public-pages/about-us.vue
@@ -89,7 +89,7 @@ const NavigationMenu = defineAsyncComponent(() =>
       color: var(--ui-color-two);
 
       .title {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 24px;
         line-height: 36px;
@@ -104,7 +104,7 @@ const NavigationMenu = defineAsyncComponent(() =>
       color: var(--ui-color-two);
 
       p {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 14px;
         line-height: 21px;
diff --git a/pages/haditha/public-pages/contactus.vue b/pages/haditha/public-pages/contactus.vue
index 7d6cd9f..ec5c88b 100644
--- a/pages/haditha/public-pages/contactus.vue
+++ b/pages/haditha/public-pages/contactus.vue
@@ -144,7 +144,7 @@ const NavigationMenu = defineAsyncComponent(() =>
       color: var(--ui-color-two);
 
       .title {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 24px;
         line-height: 36px;
@@ -159,7 +159,7 @@ const NavigationMenu = defineAsyncComponent(() =>
       .label {
         display: inline-block;
         margin-inline-end: 1em;
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 14px;
         line-height: 21px;
@@ -170,7 +170,7 @@ const NavigationMenu = defineAsyncComponent(() =>
         height: 21;
       }
       .value {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 14px;
         line-height: 21px;
diff --git a/pages/haditha/public-pages/index.vue b/pages/haditha/public-pages/index.vue
index 379a63f..b2e7c7b 100644
--- a/pages/haditha/public-pages/index.vue
+++ b/pages/haditha/public-pages/index.vue
@@ -163,7 +163,7 @@ onMounted(() => {
       color: var(--ui-color-two);
 
       .title {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 24px;
         line-height: 36px;
@@ -176,7 +176,7 @@ onMounted(() => {
       color: var(--ui-color-two);
 
       p {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 14px;
         line-height: 21px;
diff --git a/pages/haditha/public-pages/rules.vue b/pages/haditha/public-pages/rules.vue
index 83aba9a..0a3fe1d 100644
--- a/pages/haditha/public-pages/rules.vue
+++ b/pages/haditha/public-pages/rules.vue
@@ -102,7 +102,7 @@ const NavigationMenu = defineAsyncComponent(() =>
       color: var(--ui-color-two);
 
       .title {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 24px;
         line-height: 36px;
@@ -116,7 +116,7 @@ const NavigationMenu = defineAsyncComponent(() =>
       overflow: auto;
       color: var(--ui-color-two);
       ul li {
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 14px;
         line-height: 21px;
diff --git a/pages/haditha/search/[id]/[slug]/index.vue b/pages/haditha/search/[id]/[slug]/index.vue
index 34d1aa8..ee39023 100644
--- a/pages/haditha/search/[id]/[slug]/index.vue
+++ b/pages/haditha/search/[id]/[slug]/index.vue
@@ -22,6 +22,9 @@ definePageMeta({
   name: "hadithaSearchShow",
 });
 
+const route = useRoute();
+const router = useRouter();
+
 useHead({
   title: `${import.meta.env.VITE_HADITH_PAGE_TITLE}`,
   meta: [
@@ -29,7 +32,7 @@ useHead({
     ...headMetas,
   ],
   bodyAttrs: {
-    class: import.meta.env.VITE_HADITH_SYSTEM,
+    class: [import.meta.env.VITE_HADITH_SYSTEM, "search-show-page"],
   },
   link: headLinks,
 });
@@ -48,40 +51,27 @@ useHead({
 
 // #region refs and reactives
 const emit = defineEmits(["close"]);
-const route = useRoute();
-const router = useRouter();
 const loading = ref(false);
 const httpService = useNuxtApp()["$http"];
 const toast = useToast();
 
-const state = reactive({
-  selectedItem: {} as HadithResponseShowModel,
-});
 // #endregion refs and reactives
 
 // #region methods
-const fetchData = async () => {
-  if (loading.value) return;
-  loading.value = true;
-
+const fetchData = () => {
   let url = hadithaApi.search.show;
   url = url.replace("@index_key", "dhparag");
   url = url.replace("@id", route.params.id);
 
-  // fetch search list from backend(ssr)
-  const { data, status, error, refresh, clear } =
-    await useHadithaSearchComposable<HadithResponseShowModel>(url, {
-      method: "get",
-    });
-
-  if (status.value == "success") {
-    state.selectedItem = <HadithResponseShowModel>data.value;
-  }
-
-  loading.value = false;
+  return httpService.getRequest(url);
 };
 
-fetchData();
+const { data: selectedItem } = useAsyncData("parags", () => fetchData());
+
+const hadithAddress = computed(() => {
+  return `${selectedItem.value?._source?.address?.vol_title}، صفحه
+   ${selectedItem.value?._source?.address?.page_num}`;
+});
 
 const goToTheSearch = (type: string) => {
   router.push({
@@ -98,22 +88,13 @@ const goToTheChatbot = () => {
 };
 
 const handleFavorite = async () => {
-  if (state.selectedItem?._source?.tbookmark) {
-    await removeFromFavorites(state.selectedItem);
-    state.selectedItem._source.tbookmark = false;
+  if (selectedItem.value?._source?.tbookmark) {
+    await removeFromFavorites(selectedItem.value);
+    selectedItem.value._source.tbookmark = false;
   } else {
-    await addToFavorites(state.selectedItem);
-    state.selectedItem._source.tbookmark = true;
+    await addToFavorites(selectedItem.value);
+    selectedItem.value._source.tbookmark = true;
   }
-
-  // // add
-  // if (!state.selectedItem._source.tbookmark) {
-  //   addToFavorites(state.selectedItem);
-  // }
-  // // delete
-  // else {
-  //   removeFromFavorites(state.selectedItem);
-  // }
 };
 
 const addToFavorites = async (item = {}) => {
@@ -124,24 +105,22 @@ const addToFavorites = async (item = {}) => {
     ref_id: item._id,
     title: item._source.content,
   };
-  httpService.postRequest(url, formData).then((res) => {
-    // this.updateListAnswer(index, "tbookmark", 1);
-
-    try {
+  httpService
+    .postRequest(url, formData)
+    .then((res) => {
       toast.add({
         title: "انجام شد.",
         description: "به نشان شده ها افزوده شد",
         color: "success",
       });
-    } catch (err) {
-      console.log(err.message);
+    })
+    .catch((err) => {
       toast.add({
-        title: "انجام شد.",
+        title: "خطا",
         description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
         color: "error",
       });
-    }
-  });
+    });
 };
 
 const removeFromFavorites = async (item = {}, index = 0) => {
@@ -154,24 +133,22 @@ const removeFromFavorites = async (item = {}, index = 0) => {
     ref_id: item._id,
     title: item._source.title,
   };
-  httpService.postRequest(url, formData).then((res) => {
-    // this.updateListAnswer(index, "tbookmark", 0);
-
-    try {
+  httpService
+    .postRequest(url, formData)
+    .then((res) => {
       toast.add({
         title: "انجام شد.",
-        description: "از لیست نشان شده ها حذف شد",
+        description: "به نشان شده ها افزوده شد",
         color: "success",
       });
-    } catch (err) {
-      console.log(err.message);
+    })
+    .catch((err) => {
       toast.add({
-        title: "انجام شد.",
+        title: "خطا",
         description: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
         color: "error",
       });
-    }
-  });
+    });
 };
 
 const handlePagination = (prevNextIndicator: string) => {
@@ -180,218 +157,345 @@ 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", selectedItem.value?._source?.address?.vol_id);
+  url = url.replace("@parag_order", selectedItem.value?._source?.parag_order);
   url = url.replace("@step", prevNextIndicator);
 
   httpService
     .getRequest(url)
     .then((res) => {
-      state.selectedItem = res.hits.hits?.[0];
+      selectedItem.value = res.hits.hits?.[0];
     })
     .finally(() => (loading.value = false));
 };
 
+const onKeyWordClick = (keyword) => {
+  router.push({
+    name: "hadithaSearch",
+    query: {
+      q: route.query.q ?? "",
+      f_aik: keyword ?? "",
+    },
+  });
+};
+const onClassClick = (aiclass) => {
+  router.push({
+    name: "hadithaSearch",
+    query: {
+      q: route.query.q ?? "",
+      f_aik: aiclass ?? "",
+    },
+  });
+};
 // const localCopyTextToClipboard = (text: string) => {
 //   copyTextToClipboard(text);
 // };
 // #endregion methods
 
+const showArabicText = computed(() => {
+  return selectedItem.value?._source?.content_ar?.length;
+});
+const showPersianText = computed(() => {
+  return selectedItem.value?._source?.content?.length;
+});
+const showDescriptionText = computed(() => {
+  return selectedItem.value?._source?.description?.length;
+});
+const showKewrodAndClassesText = computed(() => {
+  return (
+    selectedItem.value?._source?.ai_keywords?.length ||
+    selectedItem.value?._source?.ai_classes?.length
+  );
+});
+
 // #region hooks
 // onMounted(() => {
 //   console.info("mounted");
 // });
 // #endregion methods
+// components declaration
+const HadithaLayout = defineAsyncComponent(
+  () => import("@haditha/layouts/HadithaLayout.vue")
+);
+const NavigationMenu = defineAsyncComponent(
+  () => import("@haditha/components/haditha/NavigationMenu.vue")
+);
 </script>
 
 <template>
-  <UContainer
-    ui="{
+  <HadithaLayout>
+    <div class="page-container h-full">
+      <div class="page-header">
+        <UContainer
+          ui="{
           base: 'sm:px-6 lg:px-4',
         }"
-    class="page-inner-container sm:px-6 lg:px-4 py-8"
-  >
-    <div class="search-show-page">
-      <div class="body-header">
-        <span class="top-left-bgi z-0"></span>
-        <div class="modal-title flex justify-between">
-          <ULink
-            raw
-            :to="{ name: 'haditha' }"
-            class="flex justify-center items-center me-3"
-          >
-            <img fit="auto" quality="80" src="/img/haditha/haditha-title.svg" />
-          </ULink>
-
-          <UButton
-            icon="i-haditha-close"
-            color="neutral"
-            variant="ghost"
-            class="close-btn"
-            @click="goToTheSearch('normal')"
-          />
-        </div>
+          class="max-w-[var(--ui-container-two)] sm:px-6 lg:px-4"
+        >
+          <navigation-menu class="static py-4"></navigation-menu>
+        </UContainer>
       </div>
-
-      <div class="body-content">
-        <div class="h-full flex flex-col justify-center z-2">
-          <div class="bg-container h-full">
-            <div class="header flex">
+      <UContainer
+        ui="{
+          base: 'sm:px-6 lg:px-4',
+        }"
+        class="page-inner-container search sm:px-6 lg:px-0 mt-6"
+      >
+        <div class="search-show-page lg:px-12 py-4">
+          <div class="body-header pb-6 flex justify-between">
+            <div class="flex justify-between pagination flex-1 items-center">
               <UButton
-                @click="handleFavorite"
-                :variant="
-                  state.selectedItem?._source?.tbookmark ? 'soft' : 'ghost'
-                "
-                color="primary"
-                class="bookmark-btn"
-                :icon="
-                  state.selectedItem?._source?.tbookmark
-                    ? 'i-haditha-tag-active'
-                    : 'i-haditha-tag'
-                "
-              >
-              </UButton>
-              <div class="referene">
-                <span> نشانی: </span>
-                {{ state.selectedItem?._source?.address?.vol_title }}، صفحه
-                {{ state.selectedItem?._source?.address?.page_num }}
-              </div>
+                @click="handlePagination('-1')"
+                class="prev-haditha"
+                label="حدیث قبل"
+                color=""
+                variant="soft"
+                icon="i-haditha-chevron-right"
+              />
+              <UButton
+                @click="handlePagination('1')"
+                class="next-haditha"
+                label="حدیث بعد"
+                color=""
+                variant="soft"
+                trailing-icon="i-haditha-chevron-left"
+              />
             </div>
 
-            <div class="content firefox-scrollbar">
-              <div class="search-item">
-                <div class="text-arabic-section">
-                  <div class="section-header">
-                    <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?.content_ar ?? ''
-                        )
-                      "
-                      variant="ghost"
-                      class="copy-btn"
-                      label="کپی"
-                    />
-                  </div>
-                  <div
-                    v-if="state.selectedItem?._source?.content_ar?.length"
-                    class="arabic-text"
-                  >
-                    <p>
-                      {{ state.selectedItem?._source?.content_ar ?? "" }}
-                    </p>
-                  </div>
-                </div>
-
-                <div class="separator"></div>
-
-                <div class="text-persian-section">
-                  <div class="section-header">
-                    <span class="section-title"> ترجمه </span>
-                    <UButton
-                      @click="
-                        copyTextToClipboard(
-                          state.selectedItem?._source?.content
-                        )
-                      "
-                      variant="ghost"
-                      class="copy-btn"
-                      label="کپی"
-                    />
-                  </div>
-
-                  <p class="from">
-                    {{
-                      state.selectedItem?._source?.meta?.hadith_masoum ??
-                      state.selectedItem?._source?.meta?.hadith_sanad
-                    }}:
-                  </p>
-                  <p
-                    class="persian-text"
-                    v-html="state.selectedItem?._source?.content"
-                  ></p>
-                </div>
-
-                <div class="separator"></div>
-
-                <div
-                  v-if="state.selectedItem?._source?.description?.length"
-                  class="text-description-section"
+            <div class="flex justify-between actions mr-8">
+              <UButton
+                disabled
+                class="similar-btn"
+                icon="i-haditha-search-3"
+                label="مشابه"
+                color="neutral"
+                variant="outline"
+                @click.prevent="goToTheSearch('similar')"
+              />
+              <UButton
+                class="explore-btn mr-8"
+                trailing-icon="i-haditha-explore"
+                label="کاوش"
+                variant="solid"
+                @click.prevent="goToTheChatbot"
+              />
+            </div>
+            <!-- <div>
+              <span class="top-left-bgi z-0"></span>
+              <div class="modal-title flex justify-between">
+                <ULink
+                  raw
+                  :to="{ name: 'haditha' }"
+                  class="flex justify-center items-center me-3"
                 >
-                  <div class="section-header">
-                    <span class="section-title"> شرح </span>
-                    <UButton
-                      @click="
-                        copyTextToClipboard(
-                          state.selectedItem?._source?.description
-                        )
-                      "
-                      variant="ghost"
-                      class="copy-btn"
-                      label="کپی"
-                    />
-                  </div>
-                  <p
-                    class="description-item"
-                    v-html="state.selectedItem?._source?.description"
-                  ></p>
+                  <img
+                    fit="auto"
+                    quality="80"
+                    src="/img/haditha/haditha-title.svg"
+                  />
+                </ULink>
+
+                <UButton
+                  icon="i-haditha-close"
+                  color="neutral"
+                  variant="ghost"
+                  class="close-btn text-[var(--ui-color-two)] hover:bg-gray-300"
+                  @click="goToTheSearch('normal')"
+                />
+              </div>
+            </div> -->
+          </div>
+
+          <div class="body-content">
+            <div class="h-full flex flex-col justify-center z-2">
+              <div class="bg-container">
+                <div class="header flex">
+                  <UButton
+                    @click="handleFavorite"
+                    :variant="
+                      selectedItem?._source?.tbookmark ? 'soft' : 'ghost'
+                    "
+                    color="primary"
+                    class="bookmark-btn"
+                    :icon="
+                      selectedItem?._source?.tbookmark
+                        ? 'i-haditha-tag-active'
+                        : 'i-haditha-tag'
+                    "
+                  >
+                  </UButton>
+
+                  <ULink
+                    :to="{
+                      name: 'hadithaLibraryShow',
+                      params: {
+                        id: selectedItem?._source?.address.vol_id,
+                        slug: hadithAddress,
+                      },
+                      query: {
+                        page_num: selectedItem?._source?.address?.page_num,
+                      },
+                    }"
+                    color="neutral"
+                    variant="ghost"
+                    :ui="{
+                      leadingIcon: 'text-(--ui-primary)',
+                    }"
+                    class="referene bg-white hover:bg-gray-100"
+                  >
+                    <span> نشانی: </span>
+                    {{ hadithAddress ?? "" }}
+                  </ULink>
                 </div>
 
-                <div class="separator"></div>
+                <div class="content firefox-scrollbar">
+                  <div class="search-item">
+                    <template v-if="showArabicText">
+                      <div class="text-arabic-section">
+                        <div class="section-header">
+                          <span class="section-title">
+                            {{
+                              selectedItem?._source?.meta?.hadith_masoum ??
+                              selectedItem?._source?.meta?.hadith_sanad
+                            }}
+                          </span>
 
-                <div class="text-description-section">
-                  <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"
-                      v-for="(aiClass, i) in state.selectedItem?._source
-                        ?.ai_keywords"
-                      :key="i"
-                    >
-                      {{ i > 0 ? "," : "" }}
-                      {{ aiClass }}
-                    </span>
-                  </div>
+                          <UButton
+                            v-if="
+                              selectedItem?._source?.meta?.hadith_masoum
+                                ?.length ||
+                              selectedItem?._source?.meta?.hadith_sanad
+                            "
+                            @click="
+                              copyTextToClipboard(
+                                selectedItem?._source?.content_ar ?? ''
+                              )
+                            "
+                            variant="ghost"
+                            class="copy-btn"
+                            label="کپی"
+                          />
+                        </div>
+                        <div
+                          v-if="selectedItem?._source?.content_ar?.length"
+                          class="arabic-text"
+                        >
+                          <p>
+                            {{ selectedItem?._source?.content_ar ?? "" }}
+                          </p>
+                        </div>
+                      </div>
 
-                  <div
-                    class="text-sm"
-                    v-if="state.selectedItem?._source?.ai_classes?.length"
-                  >
-                    <span class=""> دسته بندی ها: </span>
-                    <span
-                      class="me-1 text-gray-400 font-light"
-                      v-for="(aiClass, i) in state.selectedItem?._source
-                        ?.ai_classes"
-                      :key="i"
-                    >
-                      {{ i > 0 ? "," : "" }}
-                      {{ aiClass.label }}
-                    </span>
+                      <div class="separator"></div>
+                    </template>
+                    <template v-if="showPersianText">
+                      <div class="text-persian-section">
+                        <div class="section-header">
+                          <span class="section-title"> ترجمه </span>
+                          <UButton
+                            @click="
+                              copyTextToClipboard(
+                                selectedItem?._source?.content
+                              )
+                            "
+                            variant="ghost"
+                            class="copy-btn"
+                            label="کپی"
+                          />
+                        </div>
+
+                        <p
+                          class="from"
+                          v-if="
+                            selectedItem?._source?.meta?.hadith_masoum ||
+                            selectedItem?._source?.meta?.hadith_sanad
+                          "
+                        >
+                          {{
+                            selectedItem?._source?.meta?.hadith_masoum ??
+                            selectedItem?._source?.meta?.hadith_sanad
+                          }}:
+                        </p>
+                        <p
+                          class="persian-text"
+                          v-html="selectedItem?._source?.content"
+                        ></p>
+                      </div>
+
+                      <div class="separator"></div>
+                    </template>
+
+                    <template v-if="showDescriptionText">
+                      <div
+                        v-if="selectedItem?._source?.description?.length"
+                        class="text-description-section"
+                      >
+                        <div class="section-header">
+                          <span class="section-title"> شرح </span>
+                          <UButton
+                            @click="
+                              copyTextToClipboard(
+                                selectedItem?._source?.description
+                              )
+                            "
+                            variant="ghost"
+                            class="copy-btn"
+                            label="کپی"
+                          />
+                        </div>
+                        <p
+                          class="description-item"
+                          v-html="selectedItem?._source?.description"
+                        ></p>
+                      </div>
+
+                      <div class="separator"></div>
+                    </template>
+
+                    <template v-if="showKewrodAndClassesText">
+                      <div class="text-description-section">
+                        <div
+                          v-if="selectedItem?._source?.ai_keywords?.length"
+                          class="mb-4"
+                        >
+                          <span class="text-sm"> کلیدواژگان: </span>
+                          <UButton
+                            class="me-1 text-sm"
+                            v-for="(keyword, i) in selectedItem?._source
+                              ?.ai_keywords"
+                            :key="i"
+                            @click.prevent="onKeyWordClick(keyword)"
+                            variant="soft"
+                          >
+                            <!-- {{ i > 0 ? "," : "" }} -->
+                            {{ keyword }}
+                          </UButton>
+                        </div>
+
+                        <div v-if="selectedItem?._source?.ai_classes?.length">
+                          <span class="text-sm"> دسته بندی ها: </span>
+                          <UButton
+                            class="me-1 text-sm"
+                            v-for="(aiClass, i) in selectedItem?._source
+                              ?.ai_classes"
+                            :key="i"
+                            @click.prevent="onClassClick(aiClass)"
+                            variant="soft"
+                          >
+                            <!-- {{ i > 0 ? "," : "" }} -->
+                            {{ aiClass.label }}
+                          </UButton>
+                        </div>
+                      </div>
+                    </template>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
 
-      <div class="body-footer">
-        <div class="mt-5 z-2">
+          <!-- <div class="body-footer"> -->
+          <!-- <div class="mt-5 pb-5 z-2"> -->
           <!-- <div class="flex justify-between actions">
             <UButton
               disabled
@@ -410,48 +514,160 @@ const handlePagination = (prevNextIndicator: string) => {
               @click.prevent="goToTheChatbot"
             />
           </div> -->
-          <div class="flex justify-between pagination">
-            <UButton
-              @click="handlePagination('-1')"
-              class="prev-haditha"
-              label="حدیث قبل"
-              color=""
-              variant="soft"
-              icon="i-haditha-chevron-right"
-            />
-            <UButton
-              @click="handlePagination('1')"
-              class="next-haditha"
-              label="حدیث بعد"
-              color=""
-              variant="soft"
-              trailing-icon="i-haditha-chevron-left"
-            />
-          </div>
+          <!-- </div> -->
+          <!-- </div> -->
         </div>
-      </div>
+      </UContainer>
     </div>
-  </UContainer>
+  </HadithaLayout>
 </template>
 
 <!-- because of the buttons, using without scoped. -->
 <style>
+body.hadith-system.search-show-page {
+  /* background-color: #f7fffd; */
+}
+
+body.hadith-system.search-show-page {
+  .page-header {
+    width: 1920;
+    height: 100;
+    /* gap: 24px; */
+    border-bottom: 0.5px solid #76ffda;
+
+    /* padding-top: 8px; */
+    /* padding-right: 24px; */
+    /* padding-bottom: 24px; */
+    /* padding-left: 24px; */
+
+    background-image: url("/img/haditha/search-show-header.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
 .page-inner-container {
-  height: 100%;
+  /* height: 100%; */
+  max-width: 1200px;
+  width: 100%;
+
+  &.search {
+    box-shadow: 0px 8px 20px 0px #0000001a;
+    border: 0.3px solid #e0e0e0;
+    /* width: 1200; */
+    /* height: 1028; */
+    gap: 8px;
+    border-radius: 16px;
+  }
 }
 .search-show-page {
   .body-header {
+    /* padding-top: 5em; */
+
+    .actions {
+      /* margin-bottom: 1em; */
+
+      .similar-btn {
+        width: 114;
+        height: 56;
+        gap: 8px;
+        border-radius: 12px;
+        /* border-width: 0.5px; */
+        padding-top: 8px;
+        padding-right: 20px;
+        padding-bottom: 8px;
+        padding-left: 24px;
+        /* background: #ffffff; */
+        /* border: 0.5px solid; */
+
+        /* border-image-source: linear-gradient(
+          102.02deg,
+          #4be8ae 7.38%,
+          #00a762 91.78%
+        ); */
+        /* box-shadow: 0px 8px 20px 0px #0000001a; */
+
+        font-family: var(--font);
+        font-weight: 400;
+        font-size: 15px;
+        line-height: 22.5px;
+        letter-spacing: 0%;
+        text-align: right;
+        color: var(--ui-color-two);
+      }
+      .explore-btn {
+        width: 118;
+        height: 56;
+        gap: 4px;
+        border-radius: 12px;
+        padding-top: 8px;
+        padding-right: 24px;
+        padding-bottom: 8px;
+        padding-left: 20px;
+        background: linear-gradient(268.94deg, #d284ff -0.65%, #4d00ff 104.59%);
+        /* box-shadow: 0px 8px 20px 0px #0000001a; */
+
+        font-family: var(--font);
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0%;
+        text-align: right;
+        color: #fff;
+      }
+    }
+    .pagination {
+      padding: 0.7em 0px;
+
+      /* width: 672; */
+      /* height: 56; */
+      justify-content: space-between;
+      border-radius: 16px;
+      /* border-width: 0.3px; */
+      padding-right: 32px;
+      padding-left: 32px;
+      background: #ffffff;
+      border: 0.3px solid #e0e0e0;
+      /* box-shadow: 0px 8px 20px 0px #0000001a; */
+
+      .prev-haditha {
+        font-family: var(--font);
+        font-weight: 300;
+        font-size: 12px;
+        line-height: 20px;
+        letter-spacing: 0%;
+        text-align: right;
+        color: var(--ui-color-two);
+      }
+      .next-haditha {
+        font-family: var(--font);
+        font-weight: 300;
+        font-size: 12px;
+        line-height: 20px;
+        letter-spacing: 0%;
+        text-align: right;
+        color: var(--ui-color-two);
+      }
+
+      .prev-haditha,
+      .next-haditha {
+        &:hover {
+          cursor: pointer;
+          background-color: #eee;
+        }
+      }
+    }
+
     .modal-title {
-      padding: 0 0.5em 1.5em;
-      margin-bottom: 2.5em;
+      /* padding: 0 0.5em 1.5em; */
+      /* margin-bottom: 2.5em; */
 
       .close-btn {
-        color: var(--ui-color-two);
+        /* color: var(--ui-color-two); */
 
         /* width: 24px; */
         /* height: 24px; */
         padding: 0.2em;
-        background-color: transparent;
+        /* background-color: transparent; */
       }
     }
   }
@@ -491,10 +707,10 @@ const handlePagination = (prevNextIndicator: string) => {
         padding-right: 12px;
         padding-bottom: 4px;
         padding-left: 12px;
-        background: #ffffff;
+        /* background-color: #ffffff; */
         border: 0.5px solid #d9d9d9;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 300;
         font-size: 12px;
         line-height: 18px;
@@ -506,7 +722,7 @@ const handlePagination = (prevNextIndicator: string) => {
 
         span {
           margin-left: 0.1em;
-          font-family: IRANSansX;
+          font-family: var(--font);
           font-weight: 300;
           font-size: 12px;
           line-height: 18px;
@@ -517,11 +733,12 @@ const handlePagination = (prevNextIndicator: string) => {
       }
     }
     .content {
-      height: calc(100dvh - 15em);
-      overflow-y: auto;
+      /* height: calc(100dvh - 15em); */
+      /* overflow-y: auto; */
+      /* padding-bottom: 5em; */
 
       .search-item {
-        padding: 1em 0 1em 0.1em;
+        padding: 1em 0 1em 1em;
 
         .section-header {
           display: flex;
@@ -531,7 +748,7 @@ const handlePagination = (prevNextIndicator: string) => {
           margin-bottom: 0.5em;
 
           .section-title {
-            font-family: IRANSansX;
+            font-family: var(--font);
             font-weight: 400;
             font-size: 14px;
             line-height: 21px;
@@ -564,7 +781,7 @@ const handlePagination = (prevNextIndicator: string) => {
             /* height: 24px; */
             gap: 4px;
             border-radius: 6px;
-            border-width: 0.5px;
+            /* border-width: 0.5px; */
             padding-top: 4px;
             padding-right: 12px;
             padding-bottom: 4px;
@@ -572,21 +789,21 @@ const handlePagination = (prevNextIndicator: string) => {
             /* background: #ffffff; */
             border: 0.5px solid #d9d9d9;
 
-            font-family: IRANSansX;
+            font-family: var(--font);
             font-weight: 300;
             font-size: 12px;
             line-height: 18px;
             letter-spacing: 0%;
             text-align: right;
 
-            /* color: #8a92a8; */
+            color: #8a92a8;
           }
         }
         .text-arabic-section {
           padding: 2em 0;
 
           .arabic-text {
-            font-family: Takrim;
+            font-family: var(--ar-font);
             font-weight: 400;
             font-size: 18px;
             line-height: 32px;
@@ -606,16 +823,18 @@ const handlePagination = (prevNextIndicator: string) => {
 
           .from,
           .persian-text {
-            font-family: Takrim;
+            /* font-family: Takrim; */
+            font-family: var(--font);
             font-weight: 400;
-            font-size: 18px;
+            /* font-size: 18px; */
+            font-size: 0.85rem;
             line-height: 30px;
             letter-spacing: 0%;
             text-align: right;
             color: var(--ui-color-two);
           }
           /* .persian-text {
-            font-family: Takrim;
+        font-family: var(--ar-font);
             font-weight: 400;
             font-size: 16px;
             line-height: 22px;
@@ -629,9 +848,11 @@ const handlePagination = (prevNextIndicator: string) => {
           padding: 2em 0;
 
           .description-item {
-            font-family: Takrim;
+            font-family: var(--font);
             font-weight: 400;
-            font-size: 18px;
+            /* font-size: 18px; */
+            font-size: 0.85rem;
+
             line-height: 30px;
             letter-spacing: 0%;
             text-align: right;
@@ -648,7 +869,7 @@ const handlePagination = (prevNextIndicator: string) => {
             border-width: 0.5px;
             border: 0.5px solid #d9d9d9;
 
-            font-family: IRANSansX;
+            font-family: var(--font);
             font-weight: 300;
             font-size: 10px;
             line-height: 15px;
@@ -675,102 +896,25 @@ const handlePagination = (prevNextIndicator: string) => {
       }
     }
   }
-  .body-footer {
-    .actions {
-      margin-bottom: 1em;
+  /* .body-footer {
+    position: fixed;
+    bottom: 0em;
+    left: 0;
+    right: 0;
+    max-width: 1200px;
+    margin: auto;
 
-      .similar-btn {
-        width: 114;
-        height: 56;
-        gap: 8px;
-        border-radius: 12px;
-        border-width: 0.5px;
-        padding-top: 8px;
-        padding-right: 20px;
-        padding-bottom: 8px;
-        padding-left: 24px;
-        background: #ffffff;
-        border: 0.5px solid;
-
-        border-image-source: linear-gradient(
-          102.02deg,
-          #4be8ae 7.38%,
-          #00a762 91.78%
-        );
-        box-shadow: 0px 8px 20px 0px #0000001a;
-
-        font-family: IRANSansX;
-        font-weight: 400;
-        font-size: 15px;
-        line-height: 22.5px;
-        letter-spacing: 0%;
-        text-align: right;
-        color: var(--ui-color-two);
-      }
-      .explore-btn {
-        width: 118;
-        height: 56;
-        gap: 4px;
-        border-radius: 12px;
-        padding-top: 8px;
-        padding-right: 24px;
-        padding-bottom: 8px;
-        padding-left: 20px;
-        background: linear-gradient(268.94deg, #d284ff -0.65%, #4d00ff 104.59%);
-        box-shadow: 0px 8px 20px 0px #0000001a;
-
-        font-family: IRANSansX;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 24px;
-        letter-spacing: 0%;
-        text-align: right;
-        color: #fff;
-      }
-    }
-    .pagination {
-      padding: 0.7em 0px;
-
-      /* width: 672; */
-      /* height: 56; */
-      justify-content: space-between;
-      border-radius: 16px;
-      border-width: 0.3px;
-      padding-right: 32px;
-      padding-left: 32px;
-      background: #ffffff;
-      border: 0.3px solid #e0e0e0;
-      box-shadow: 0px 8px 20px 0px #0000001a;
-
-      .prev-haditha {
-        font-family: IRANSansX;
-        font-weight: 300;
-        font-size: 12px;
-        line-height: 20px;
-        letter-spacing: 0%;
-        text-align: right;
-        color: var(--ui-color-two);
-      }
-      .next-haditha {
-        font-family: IRANSansX;
-        font-weight: 300;
-        font-size: 12px;
-        line-height: 20px;
-        letter-spacing: 0%;
-        text-align: right;
-        color: var(--ui-color-two);
-      }
-    }
-  }
-}
-@media screen and (max-width: 719.99px) {
-  .search-show-page {
-    .body-content {
-      .content {
-        height: calc(100dvh - 15em);
-        overflow-y: auto;
-      }
-    }
-  }
+  
+  } */
 }
+/* @media screen and (max-width: 719.99px) { */
+/* .search-show-page { */
+/* .body-content { */
+/* .content { */
+/* height: calc(100dvh - 15em); */
+/* overflow-y: auto; */
+/* } */
+/* } */
+/* } */
+/* } */
 </style>
diff --git a/pages/haditha/search/index.vue b/pages/haditha/search/index.vue
index 1e30028..4802242 100644
--- a/pages/haditha/search/index.vue
+++ b/pages/haditha/search/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useStorage } from "@vueuse/core";
-import { useInfiniteScroll } from "@vueuse/core";
+// import { useInfiniteScroll } from "@vueuse/core";
 import * as z from "zod";
 
 // const myCookie = useCookie("searchPhrase");
@@ -10,6 +10,7 @@ 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 toast = useToast();
 
 // const searchTerm = useState("searchTerm", () => ''); // Tracks the searchTerm
 const offset = useState("offset", () => 0); // Tracks the current offset
@@ -34,15 +35,11 @@ useHead({
 
 // #region refs
 // وقتی از صفحه حدیث با کلیک بر روی دکمه مشابه، وارد صفحه جستجو میشویم
-const showPrevSearch = ref(false);
-// لیست جستجو در حالت اسکرول
-// const loadedItems = ref([]);
-// لودینگ
-const loading = ref(false);
+// const showPrevSearch = ref(false);
 // هنگام اسکرول، چک میشود که ایا صفحه بعدی هم وجود دارد یا نه.
 const hasMore = ref(true);
 // عنصری که برای اسکرول استفاده میشه.
-const el = ref(null);
+// const el = ref(null);
 // پلاگین ارسال درخواست
 const httpService = useNuxtApp()["$http"];
 // استفاده از روت
@@ -83,6 +80,7 @@ const isSynonymPopupOpen = ref(false);
 const Formstate = reactive({
   name: "",
 });
+const showNoData = ref(false);
 // #endregion refs
 
 // #region reactive
@@ -141,9 +139,10 @@ const AutoComplationState = reactive({
 });
 const mainState = reactive({
   pagination: {
-    limit: 10,
+    limit: 15,
     page: 1,
     pages: 1,
+    offset: 0,
   },
 });
 
@@ -166,24 +165,25 @@ const backgroundImageStyle = computed(() => {
   // });
   let optimizedImageUrl = "/img/haditha/background.webp";
 
-  if (searchTerm.value?.length) {
+  if (loadedItems.value) {
     // optimizedImageUrl = img("/img/haditha/sub-header-bgi.webp", {
     //   quality: 80,
     // });
     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(() => {
-//   return showclearButton.value ? "i-lucide-x" : "i-haditha-search";
-// });
+const searchButtonIcon = computed(() => {
+  return searchTerm.value?.length ? "i-lucide-x" : "i-haditha-search";
+});
 const synonymIsSwitchedOn = computed(() => {
   return AutoComplationState.synonym.items.filter((i) => i.enable).length;
 });
@@ -192,98 +192,163 @@ const synonymIsSwitchedOn = computed(() => {
 // #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"
-  );
-
-  return await httpService.postRequest(url, payload).then((res) => {
-    total.value = res.hits.total.value ?? 0;
-    offset.value += mainState.pagination.limit;
-
-    // check if search term is not empty
-    if (searchTerm.value) userSearchHistory.value.add(searchTerm.value); // Add the value to the Set
-
-    // close the history dropdown menu
-    open.value = false;
-    return res;
-  });
-};
-
-// 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 = (from) => {
+const exitSimilarMode = () => {
   history?.pushState(
     {},
     document?.title,
     route.path + `?q=${searchTerm.value}`
   );
+  delete route.query.f_aik;
 
-  offset.value = 0;
-
-  sendQuery().then((res) => {
-    loadedItems.value = res.hits.hits;
-  });
+  sendQuery();
 };
-// Client-side infinite scroll
-useInfiniteScroll(
-  el,
+// ارسال درخواست
+const sendQuery = async (payload = {}) => {
+  try {
+    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";
+
+    if (searchTerm.value.length) {
+      url = url.replace(
+        "@q=none",
+        `q=${isTypeSelected ? "#" + typeModelValueFa.value + " " : ""}${
+          searchTerm.value
+        }`
+      );
+
+      // if (route.query.f_aik?.length) url += `&f_aik=${route.query.f_aik}`;
+    }
+
+    return await httpService
+      .postRequest(url, payload)
+      .then((res) => {
+        total.value = res.hits.total.value ?? 0;
+        offset.value += mainState.pagination.limit;
+
+        // check if search term is not empty
+        if (searchTerm.value) userSearchHistory.value.add(searchTerm.value); // Add the value to the Set
+
+        // close the history dropdown menu
+        open.value = false;
+        return res;
+      })
+      .catch((err) => {});
+  } catch (err) {
+    console.error("API Error:", err.message);
+    throw err; // Re-throw the error to be handled by useAsyncData
+  }
+};
+
+// Server-side initial load
+
+const {
+  data: loadedItems,
+  status,
+  refresh,
+  clear,
+  error,
+  execute,
+} = await useAsyncData(
+  "search",
   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) {
-          loadedItems.value.push(...hits);
-        } else {
-          hasMore.value = false;
-        }
-      });
-    } finally {
-      loading.value = false;
+    if (searchTerm.value.length) {
+      return await sendQuery();
+    } else {
+      return {
+        hits: {
+          hits: undefined,
+        },
+      };
     }
   },
-  { distance: 100 }
+  {
+    transform: (data) => data.hits.hits,
+  }
 );
+
+const onBeforeSendQuery = () => {
+  if (status.value == "pending") return;
+  status.value = "pending";
+  offset.value = 0;
+
+  if (searchTerm.value?.length) {
+    sendQuery().then((res) => {
+      loadedItems.value = res?.hits?.hits ?? [];
+      showNoData.value = loadedItems.value?.length == 0;
+      status.value = "success";
+
+      history?.pushState(
+        {},
+        document?.title,
+        route.path + `?q=${searchTerm.value}`
+      );
+      route.query.q = searchTerm.value;
+    });
+  } else {
+    resetForm();
+
+    // searchTerm.value = "";
+    // loading.value = false;
+    // loadedItems.value = [];
+    // showNoData.value = false;
+    // loading.value = false;
+  }
+};
+// 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) {
+//           loadedItems.value.push(...hits);
+//         } else {
+//           hasMore.value = false;
+//         }
+//       });
+//     } finally {
+//       loading.value = false;
+//     }
+//   },
+//   { distance: 100 }
+// );
 // دکمه جستجو کردن
-const handleSearchClearButton = () => {
-  // showclearButton.value = true;
+const onSearchButtonClick = () => {
+  if (status.value == "pending") return;
+  status.value = "pending";
   sendQuery().then((res) => {
     loadedItems.value = res.hits.hits;
+    showNoData.value = loadedItems.value?.length == 0;
+    status.value = "idle";
   });
 };
+const resetForm = () => {
+  clear();
+  searchTerm.value = "";
+  route.query.q = null;
+  // loadedItems.value = [];
+  status.value = "idle";
+  showNoData.value = false;
+  history?.pushState({}, document?.title, route.path);
+};
 
 // وقتی کاربر کلیدی فشار میدهد
 // const onKeyDown = () => {
@@ -300,10 +365,11 @@ const handleSearchClearButton = () => {
 // تنظیم نوع جستجو
 const setType = (type: string) => {
   search_type.value = type;
-  loadedItems.value = [];
+  // loadedItems.value = [];
   offset.value = 0;
   sendQuery().then((res) => {
-    loadedItems.value = res.hits.hits;
+    loadedItems.value = res?.hits?.hits ?? [];
+    showNoData.value = loadedItems.value?.length == 0;
   });
 };
 // const setKey = (type: string) => {
@@ -344,6 +410,7 @@ const onTypeSelectChanged = (value: string) => {
 
   sendQuery().then((res) => {
     loadedItems.value = res.hits.hits;
+    showNoData.value = Boolean(loadedItems.value?.length);
   });
 };
 
@@ -397,6 +464,7 @@ const prepareSynonym = () => {
 const onUpdateSwitch = () => {
   sendQuery(prepareSynonym()).then((res) => {
     loadedItems.value = res.hits.hits;
+    showNoData.value = Boolean(loadedItems.value?.length);
   });
 };
 const onUpdateSubTitle = (subTitle) => {
@@ -404,6 +472,7 @@ const onUpdateSubTitle = (subTitle) => {
 
   sendQuery(prepareSynonym()).then((res) => {
     loadedItems.value = res.hits.hits;
+    showNoData.value = Boolean(loadedItems.value?.length);
   });
 };
 const onAddNewTitle = (subTitles) => {
@@ -415,8 +484,70 @@ const onAddNewTitle = (subTitles) => {
 
   sendQuery(prepareSynonym()).then((res) => {
     loadedItems.value = res.hits.hits;
+    showNoData.value = Boolean(loadedItems.value?.length);
   });
 };
+
+// Using the Intersection Observer version
+
+const loadMore = async () => {
+  // const listElm = $event.target;
+
+  if (!hasMore.value || searchTerm.value.length == 0) return;
+  // // window.innerHeight + window.scrollY >= document.body.offsetHeight - 100
+  // if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
+  //   status.value = "pending";
+  //   mainState.pagination.offset =
+  //     mainState.pagination.offset + mainState.pagination.limit;
+
+  //   if (total.value > mainState.pagination.offset) {
+  //     window.clearTimeout(isScrolling.value);
+  //     isScrolling.value = setTimeout(() => {
+  return await sendQuery().then((res) => {
+    const hits = res?.hits?.hits ?? [];
+
+    if (hits.length == 0) hasMore.value = false;
+    else loadedItems.value.push(...hits);
+    // status.value = "success";
+    return res;
+  });
+  //     }, 300);
+  //   } else {
+  //     toast.add({
+  //       title: "کاربر محترم",
+  //       description: "دیگر رکوردی جهت بارگزاری وجود ندارد.",
+  //       color: "success",
+  //     });
+  //     status.value = "idle";
+  //   }
+  // } else status.value = "idle";
+};
+// For window scrolling
+const { isFetching } = useInfiniteScroll(async () => {
+  await loadMore();
+});
+// For a specific element
+// const { isFetching } = useInfiniteScroll(async () => {
+//   await loadMore();
+// }, "scroll-container");
+
+// Add the scroll event listener when the component is mounted
+// onMounted(() => {
+//   const targetElement = document.getElementById("search-list");
+
+//   if (targetElement) {
+//     targetElement.addEventListener("scroll", loadMore);
+//   }
+// });
+
+// // Remove the scroll event listener when the component is unmounted
+// onUnmounted(() => {
+//   const targetElement = document.getElementById("search-list");
+//   if (targetElement) {
+//     targetElement.removeEventListener("scroll", loadMore);
+//   }
+// });
+
 // #endregion methods
 
 // #region components
@@ -436,27 +567,30 @@ const SearchList = defineAsyncComponent(
   <HadithaLayout>
     <div class="h-full flex flex-col justify-center">
       <div class="background-image h-full" :style="backgroundImageStyle">
-        <navigation-menu></navigation-menu>
+        <navigation-menu class="static"></navigation-menu>
 
-        <div class="logo-container pt-0 xl:pt-18">
+        <!-- <div class="logo-container pt-0 xl:pt-19"> -->
+        <div class="logo-container pt-0">
           <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="{ 'no-backdrop': showPrevSearch }"
+                class="haditha-search-root grow-1"
+                :class="{ 'no-backdrop': route.query.f_aik?.length }"
               >
                 <!-- وقتی کاربر در صفحه نمایش بر روی مشابه کلیک میکند و به صفحه جستجو وارد میشود. -->
+                <!-- v-if="route.query.f_aik?.length" -->
                 <div
-                  v-if="showPrevSearch"
+                  v-if="route.query.f_aik?.length"
                   class="prev-search-item flex items-center"
                 >
-                  <span class="total">۴۷ مشابه </span>
+                  <!-- <span class="total">۴۷ مشابه </span> -->
                   <span class="text me-auto">
-                    عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ،
-                    قَالَ:
+                    {{ route.query.f_aik }}
                   </span>
                   <UButton
                     icon="i-lucide:x"
@@ -469,10 +603,11 @@ const SearchList = defineAsyncComponent(
 
                 <!-- <client-only> -->
                 <div class="search-input">
-                  <UInputMenu
+                  <!-- :items="<any>Array.from(userSearchHistory)" -->
+
+                  <UInput
                     class="w-full focus:placeholder-gray-800"
-                    :items="<any>Array.from(userSearchHistory)"
-                    v-model="searchTerm"
+                    v-model.trim="searchTerm"
                     v-model:open="open"
                     v-model:search-term="searchTerm"
                     placeholder="هوشمند جستجو کنید..."
@@ -484,7 +619,7 @@ const SearchList = defineAsyncComponent(
                       side: 'bottom',
                       sideOffset: 4,
                     }"
-                    :loading="loading"
+                    :loading="status == 'pending'"
                     highlight
                     highlightOnHover
                     @focus="open = true"
@@ -495,21 +630,30 @@ const SearchList = defineAsyncComponent(
                     <!-- @keydown="onKeyDown" -->
                     <!-- @update:modelValue="onUpdateModel" -->
                     <!-- @update:searchTerm="onUpdateModel" -->
-                  </UInputMenu>
+                  </UInput>
                 </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"
-                  :class="{ 'close-mode': showclearButton }"
-                  @click.prevent="handleSearchClearButton"
                   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"
-                v-if="searchTerm.length"
+                class="search-filter flex items-center justify-between md:mr-16"
+                v-if="loadedItems"
               >
                 <div class="flex items-center space-x-2">
                   <!-- #region  معنایی -->
@@ -737,15 +881,10 @@ const SearchList = defineAsyncComponent(
             </div>
           </div>
           <div
-            v-if="searchTerm?.length == 0 && loadedItems?.length == 0"
+            v-if="!loadedItems"
             class="flex justify-center flex-col items-center mt-10"
           >
-            <img
-              fit="auto"
-              quality="80"
-              placeholder
-              src="/img/haditha/logo.webp"
-            />
+            <img fit="auto" quality="80" src="/img/haditha/logo.webp" />
             <div class="title">
               کاوش با
               <span class="badge-style mx-1">هوش مصنوعی</span>
@@ -753,34 +892,48 @@ const SearchList = defineAsyncComponent(
             </div>
           </div>
 
+          <!-- v-show="!showNoData" -->
           <div
-            v-else-if="searchTerm?.length && loadedItems?.length"
-            class="search-box-container pb-0 bg-white flex justify-center"
+            class="search-box-container pb-12 bg-white flex justify-center"
+            :class="{ 'pt-0': loadedItems == undefined }"
           >
             <div class="search-list-contianer">
-              <div class="total">
+              <div v-if="loadedItems" class="total">  
                 <span>{{ total }}</span>
                 نتیجه
               </div>
 
-              <div ref="el" class="search-list firefox-scrollbar">
+              <!-- ref="el" -->
+              <div
+                ref="searchInfiniteScroll"
+                id="searchInfiniteScroll"
+                class="search-list firefox-scrollbar"
+                :class="{ 'enable-scroll': loadedItems?.length }"
+              >
                 <search-list
                   no-data-text="نتیجه‌ای یافت نشد!"
                   no-data-icon="/img/haditha/no-data.png"
                   :total="total"
                   :list="loadedItems"
                   :searchTerm="searchTerm"
+                  :requestStatus="status"
                 ></search-list>
+
+                <no-data
+                  class="h-full w-full flex flex-col justify-center items-center"
+                  v-if="loadedItems?.length == 0"
+                >
+                  <img fit="auto" quality="80" src="/img/haditha/no-data.png" />
+                  <p class="no-data-text">"نتیجه‌ای یافت نشد!</p>
+                </no-data>
               </div>
+
+              <!-- <the-content-loading
+                v-show="loading"
+                class="absolute-positioning"
+              ></the-content-loading> -->
             </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>
@@ -801,7 +954,7 @@ const SearchList = defineAsyncComponent(
 
   .title {
     margin-top: 3.5em;
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-size: 14px;
     line-height: 21px;
     letter-spacing: 0%;
@@ -822,24 +975,30 @@ 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;
   }
-}
+  &.pt-0 {
+    padding-top: 0 !important;
+  }
+}*/
 
 .search-list-contianer {
-  max-width: 41em; /*656px*/
+  position: relative;
+  /*max-width: 41em;656px*/
+  max-width: 75em; /*1200px*/
+
   width: 100%;
   margin: 0 1em;
 
   .total {
-    padding: 0.5em 1.8em;
+    padding: 1.1em 1.8em;
 
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 400;
     font-size: 0.68rem; /*11px*/
     line-height: 1rem;
@@ -848,12 +1007,16 @@ const SearchList = defineAsyncComponent(
     color: #b4c2cf;
   }
   .search-list {
-    padding: 1em 1.3em;
-    height: calc(100dvh - 16em);
-    overflow-y: auto;
+    &.enable-scroll {
+      padding: 1em 1.3em;
+      /* height: calc(100dvh - 16em); */
+      /* overflow-y: auto; */
+      scroll-behavior: smooth;
+    }
 
     &.hadithaFavorites {
-      height: calc(100dvh - 8em);
+      /* height: calc(100dvh - 8em); */
+      height: calc(100dvh - 10em);
     }
 
     &:not(:last-child) {
@@ -863,9 +1026,9 @@ const SearchList = defineAsyncComponent(
 }
 
 .haditha-search-root-wrapper {
-  max-width: 656px;
+  max-width: 1200px;
   width: 100%;
-  margin: 0 1em;
+  /* margin: 0 1em; */
 
   .haditha-search-root {
     position: relative;
@@ -916,7 +1079,7 @@ const SearchList = defineAsyncComponent(
         padding: 5px 7px;
         background: #1b213266;
 
-        font-family: IRANSansX;
+        font-family: var(--font);
         font-weight: 500;
         font-size: 10px;
         line-height: 15px;
@@ -925,7 +1088,7 @@ const SearchList = defineAsyncComponent(
         color: #ffffff;
       }
       .text {
-        font-family: Takrim;
+        font-family: var(--ar-font);
         font-weight: 400;
         font-size: 16px;
         line-height: 32px;
@@ -974,6 +1137,10 @@ const SearchList = defineAsyncComponent(
     margin: auto;
     transition: all 0.2s ease-in-out;
 
+    &.similar-mode {
+      top: 60px;
+    }
+
     &:hover {
       transition: all 0.2s ease-in-out;
       background: linear-gradient(320.71deg, #54ecaa 6.56%, #b6f0d9 69.69%);
@@ -990,13 +1157,7 @@ const SearchList = defineAsyncComponent(
       ); */
     }
   }
-  .close-mode {
-    background: #f0f1f4;
-    color: #000; /* رنگ خاکستری */
-    &:hover {
-      background: #e0e0e0; /* رنگ خاکستری */
-    }
-  }
+
   .haditha-search-input {
     z-index: 0;
 
@@ -1013,7 +1174,7 @@ const SearchList = defineAsyncComponent(
     border: 0.3px solid #e0e0e0;
     box-shadow: 0px 1px 4px 0px #0000000d;
 
-    font-family: IRANSansX;
+    font-family: var(--font);
     font-weight: 300;
     font-size: 14px;
     line-height: 21px;
@@ -1024,7 +1185,7 @@ const SearchList = defineAsyncComponent(
   .search-filter {
     .filter-item {
       /* width: 81px; */
-      height: 40px;
+      height: 56px;
       border-radius: 12px;
       border-width: 0.3px;
       padding-top: 8px;
@@ -1036,7 +1197,7 @@ const SearchList = defineAsyncComponent(
       border: 0.3px solid #e0e0e0;
       box-shadow: 0px 1px 4px 0px #0000000d;
       color: #8a92a8;
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 400;
       font-size: 13px;
       line-height: 20px;
@@ -1070,6 +1231,15 @@ const SearchList = defineAsyncComponent(
           width: 25px;
           height: 25px;
         }
+
+        &.close-mode {
+          background: #f0f1f4;
+          color: #000; /* رنگ خاکستری */
+
+          &:hover {
+            background: #e0e0e0; /* رنگ خاکستری */
+          }
+        }
       }
       .haditha-search-input {
         height: 56px;
@@ -1094,7 +1264,7 @@ const SearchList = defineAsyncComponent(
 
   .synonymItem {
     .title {
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 400;
       font-size: 14px;
       line-height: 100%;
@@ -1118,7 +1288,7 @@ const SearchList = defineAsyncComponent(
       border: 0.3px solid #d9d9d9;
       background: #f0f1f4;
 
-      font-family: IRANSansX;
+      font-family: var(--font);
       font-weight: 400;
       font-size: 12px;
       line-height: 100%;