diff --git a/assets/common/scss/_fonts.scss b/assets/common/scss/_fonts.scss
index 9d1b98a..167c511 100644
--- a/assets/common/scss/_fonts.scss
+++ b/assets/common/scss/_fonts.scss
@@ -1,2 +1,3 @@
 @import "../fonts/tavasi/style";
 @import "../img/icomoon/style";
+@import "./sahel";
diff --git a/assets/common/vendors/counter/counter.js b/assets/common/vendors/counter/counter.js
deleted file mode 100644
index f013b2b..0000000
--- a/assets/common/vendors/counter/counter.js
+++ /dev/null
@@ -1,46 +0,0 @@
-(function ($) {
-  $.fn.countTo = function (options) {
-    // merge the default plugin settings with the custom options
-    options = $.extend({}, $.fn.countTo.defaults, options || {});
-
-    // how many times to update the value, and how much to increment the value on each update
-    var loops = Math.ceil(options.speed / options.refreshInterval),
-      increment = (options.to - options.from) / loops;
-
-    return $(this).each(function () {
-      var _this = this,
-        loopCount = 0,
-        value = options.from,
-        interval = setInterval(updateTimer, options.refreshInterval);
-
-      function updateTimer() {
-        value += increment;
-        loopCount++;
-        $(_this).html(value.toFixed(options.decimals));
-
-        if (typeof options.onUpdate == "function") {
-          options.onUpdate.call(_this, value);
-        }
-
-        if (loopCount >= loops) {
-          clearInterval(interval);
-          value = options.to;
-
-          if (typeof options.onComplete == "function") {
-            options.onComplete.call(_this, value);
-          }
-        }
-      }
-    });
-  };
-
-  $.fn.countTo.defaults = {
-    from: 0, // the number the element should start at
-    to: 100, // the number the element should end at
-    speed: 1000, // how long it should take to count between the target numbers
-    refreshInterval: 100, // how often the element should be updated
-    decimals: 0, // the number of decimal places to show
-    onUpdate: null, // callback method for every time the element is updated,
-    onComplete: null, // callback method for when the element finishes updating
-  };
-})(jQuery);
\ No newline at end of file
diff --git a/assets/majles/scss/pages/section/_search-section.scss b/assets/majles/scss/pages/section/_search-section.scss
index eb3af96..bc0b468 100644
--- a/assets/majles/scss/pages/section/_search-section.scss
+++ b/assets/majles/scss/pages/section/_search-section.scss
@@ -43,8 +43,8 @@
       bottom: 0;
     }
     .inner-wrapper {
-      max-width: 47.5em;
-      margin: 0 auto;
+      // max-width: 47.5em;
+      // margin: 0 auto;
       text-align: center;
 
       .title {
diff --git a/assets/majles/scss/responsive/min-max/min-max.scss b/assets/majles/scss/responsive/min-max/min-max.scss
index c1073a9..31c44fe 100644
--- a/assets/majles/scss/responsive/min-max/min-max.scss
+++ b/assets/majles/scss/responsive/min-max/min-max.scss
@@ -7,7 +7,7 @@
 }
 @media only screen and (min-width: 768px) and (max-width: 991.98px) {
     .search-section .top-content .inner-wrapper {
-        padding-top: 10em;
+        // padding-top: 10em;
       }
     /* استایل‌های مربوط به اندازه‌های بین 768 تا 991 پیکسل */
 }
diff --git a/components/dashboard/majles/SearchSection.vue b/components/dashboard/majles/SearchSection.vue
index c2f7a91..e9db075 100644
--- a/components/dashboard/majles/SearchSection.vue
+++ b/components/dashboard/majles/SearchSection.vue
@@ -5,9 +5,8 @@
         <header>
           <majles-navbar></majles-navbar>
         </header>
-
-        <div class="inner-wrapper">
-          <div class="d-md-none d-lg-block">
+        <div class="inner-wrapper d-flex flex-column col-12">
+          <div class="">
             <img
               src="assets/majles/img/logo_200x200.png"
               :alt="appLongTitle()"
@@ -19,44 +18,32 @@
           <h1 class="sub-title">
             {{ title2 }}<span style="font-size: 1.5rem">{{ title3 }}</span>
           </h1>
-          <form
-            class="ms-search-form px-3"
-            role="search"
-            @submit.prevent="searchNavigateList"
-          >
-            <div class="input-group mb-5" dir="ltr">
-              <div class="input-group-prepend">
-                <button
-                  dir="rtl"
-                  class="btn"
-                  type="button"
-                  id="button-addon2"
-                  @click.prevent="searchNavigateList()"
-                >
-                  جستجو
-                  <span class="tavasi tavasi-Component-198--1"></span>
-                </button>
-              </div>
-
-              <input
-                v-focus
-                class="form-control"
-                ref="search-input"
-                dir="rtl"
-                v-model.trim="searchText"
-                type="search"
-                id="search-query"
-                placeholder="جستجو در قوانین ..."
-                name="search-query"
-                size="60"
-                @keyup.enter="searchNavigateList"
-              />
-            </div>
-          </form>
+          <div class=" d-flex justify-content-center">
+            <form
+              class="ms-search-form px-3 col-12 col-sm-8 col-xl-6"
+              role="search"
+              @submit.prevent="searchNavigateList"
+            >
+              <auto-complation
+                dir="ltr"
+                contentKey="qasection"
+                :showAppend="false"
+                :showPrepend="true"
+                :showAppendSearchButton="false"
+                @onSearchStart="searchNavigateList"
+                @on-search-navigate-list="searchNavigateList"
+                :placeholder="'جستجو در هزاران محتوای قوانین'"
+                ref="autoComplationRef"
+              ></auto-complation>
+              <!-- :listAutocomplate="listAutocomplate" -->
+              <!-- @selectAutocomplate2="selectAutocomplate2" -->
+              <!-- </div> -->
+            </form>
+          </div>
         </div>
       </div>
       <div class="center-content">
-        <!-- <my-counter-list title=""></my-counter-list> -->
+        <my-counter-list></my-counter-list>
       </div>
       <div class="footer-content">
         <div class="container-fluid">
@@ -86,7 +73,7 @@
             <div class="col-sm-6 mb-2 mb-sm-0 col-md mb-sm-2 mb-md-0">
               <div class="link-item-container">
                 <NuxtLink
-                :to="urlResolver('qq308235')"
+                  :to="urlResolver('qq308235')"
                   target="_blank"
                   class="btn link-item"
                 >
@@ -106,7 +93,7 @@
             <div class="col-sm-6 mb-2 mb-sm-0 col-md">
               <div class="link-item-container">
                 <NuxtLink
-                :to="urlResolver('qq38162')"
+                  :to="urlResolver('qq38162')"
                   target="_blank"
                   class="btn link-item"
                 >
@@ -126,7 +113,7 @@
             <div class="col-sm-6 mb-2 mb-sm-0 col-md">
               <div class="link-item-container">
                 <NuxtLink
-                :to="urlResolver('qq233930')"
+                  :to="urlResolver('qq233930')"
                   target="_blank"
                   class="btn link-item"
                 >
@@ -270,6 +257,18 @@ export default {
       // return routeData.href;
     },
   },
+  components: {
+    MyCounterList: defineAsyncComponent(() =>
+      import("@components/other/MyCounterList.vue")
+    ),
+    AutoComplation: defineAsyncComponent(() =>
+      import("@search/components/global/AutoComplation.vue")
+    ),
+
+    // Navbar: () => import("@dashboard/majles/components/Navbar"),
+    // MySystem: () => import("@dashboard/default/pages/MySystem"),
+    // MyCircleProgress: () => import("@components/MyCircleProgress"),
+  },
 };
 </script>
 
@@ -286,6 +285,14 @@ export default {
 // .main-page__content{
 //   margin-right: 0px !important;
 // }
+.ms-search-form {
+  .input-group {
+    align-items: center;
+  }
+}
+.subtitle {
+  font-size: 1.2rem;
+}
 .dropdown-menu {
   float: right;
   min-width: 13rem;
@@ -313,4 +320,4 @@ export default {
     margin-right: 0 !important;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/other/MyCounterList.vue b/components/other/MyCounterList.vue
index d2a3d91..81a9afc 100644
--- a/components/other/MyCounterList.vue
+++ b/components/other/MyCounterList.vue
@@ -5,10 +5,10 @@
         class="col-sm-12 col-md mb-5 mb-md-0 text-center"
         v-for="(counter, index) in list"
       >
-        <!-- <my-counter-list-item
+        <my-counter-list-item
           :counter="counter"
           :key="index + render"
-        ></my-counter-list-item> -->
+        ></my-counter-list-item>
       </div>
     </div>
   </div>
@@ -19,13 +19,13 @@
 import repoApi from "~/apis/repoApi";
 
 export default {
-  props: {
-    listData: {
-      default() {
-        return [];
-      },
-    },
-  },
+  // props: {
+  //   listData: {
+  //     default() {
+  //       return [];
+  //     },
+  //   },
+  // },
   async beforeMount() {
     try {
       const { $api } = useNuxtApp();
@@ -73,6 +73,11 @@ export default {
       ],
     };
   },
+  components: {
+    MyCounterListItem: defineAsyncComponent(() =>
+      import("@components/other/MyCounterListItem.vue")
+    ),
+  },
 };
 </script>
 
diff --git a/components/other/MyCounterListItem.vue b/components/other/MyCounterListItem.vue
index 1710a89..5f8f81b 100644
--- a/components/other/MyCounterListItem.vue
+++ b/components/other/MyCounterListItem.vue
@@ -5,7 +5,7 @@
     class="d-md-flex justify-content-sm-center align-items-center"
   >
     <h2 class="counter-number mb-2 mb-md-0">
-      <span :class="counter.key + '-timer'">{{ counter.count }}</span>
+      <span>{{ displayValue }}</span>
     </h2>
     <div class="d-flex flex-column align-items-center align-items-lg-start">
       <p class="counter-text">{{ counter.title }}</p>
@@ -15,42 +15,67 @@
 </template>
 
 <script>
-import "assets/common/vendors/counter/counter.js";
-
 export default {
   props: ["counter"],
+  data() {
+    return {
+      displayValue: 0,
+      interval: null,
+    };
+  },
   mounted() {
-    const vm = this;
-
-    $(`.${vm.counter.key}-timer`).countTo({
-      from: 0,
-      to: vm.counter.total,
-      speed: 7000,
-      refreshInterval: 50,
-      onComplete: function (value) {
-        // console.debug(this);
-      },
-    });
+    this.startCount();
+  },
+  beforeUnmount() {
+    if (this.interval) clearInterval(this.interval);
   },
   methods: {
-    goToRouteName() {
-      this.$router.push({
-        name: "searchResult",
-        query: {
-          q: undefined,
-          key: this.counter.routeName,
-        },
-      });
+    startCount() {
+      const from = 0;
+      const to = this.counter.total;
+      const speed = 7000;
+      const refreshInterval = 50;
+      const decimals = 0;
+
+      const loops = Math.ceil(speed / refreshInterval);
+      const increment = (to - from) / loops;
+
+      let value = from;
+      let loopCount = 0;
+
+      this.interval = setInterval(() => {
+        value += increment;
+        loopCount++;
+        this.displayValue = value.toFixed(decimals);
+
+        if (loopCount >= loops) {
+          clearInterval(this.interval);
+          this.displayValue = to.toFixed(decimals);
+        }
+      }, refreshInterval);
     },
+
+    // goToRouteName() {
+    //   this.$router.push({
+    //     name: "searchResult",
+    //     query: {
+    //       q: undefined,
+    //       key: this.counter.routeName,
+    //     },
+    //   });
+    // },
+
     urlResolver() {
-      const routeData = this.$router.resolve({
-        name: "searchResult",
-        query: {
-          q: undefined,
-          key: this.counter.routeName,
-        },
-      });
-      return routeData.href;
+      console.log("555");
+
+      // const routeData = this.$router.resolve({
+      //   name: "searchResult",
+      //   query: {
+      //     q: undefined,
+      //     key: this.counter.routeName,
+      //   },
+      // });
+      // return routeData.href;
     },
   },
 };