diff --git a/app/View/Components/SearchString.php b/app/View/Components/SearchString.php
index 5c6a70fa1..090f965c5 100644
--- a/app/View/Components/SearchString.php
+++ b/app/View/Components/SearchString.php
@@ -10,6 +10,7 @@ class SearchString extends Component
 {
     public $filters;
 
+    /** string */
     public $model;
 
     /**
@@ -17,9 +18,10 @@ class SearchString extends Component
      *
      * @return void
      */
-    public function __construct($model)
+    public function __construct(string $model = '', $filters = false)
     {
         $this->model = $model;
+        $this->filters = $filters;
     }
 
     /**
@@ -29,34 +31,36 @@ class SearchString extends Component
      */
     public function render()
     {
-        $search_string = config('search-string');
-
-        $this->filters = [];
-
-        if (!empty($search_string[$this->model])) {
-            $columns = $search_string[$this->model]['columns'];
-
-            foreach ($columns as $column => $options) {
-                // This column skip for filter
-                if (!empty($options['searchable'])) {
-                    continue;
+        if (empty($this->filters)) {
+            $search_string = config('search-string');
+    
+            $this->filters = [];
+    
+            if (!empty($search_string[$this->model])) {
+                $columns = $search_string[$this->model]['columns'];
+    
+                foreach ($columns as $column => $options) {
+                    // This column skip for filter
+                    if (!empty($options['searchable'])) {
+                        continue;
+                    }
+    
+                    if (!is_array($options)) {
+                        $column = $options;
+                    }
+    
+                    if (!$this->isFilter($column, $options)) {
+                        continue;
+                    }
+    
+                    $this->filters[] = [
+                        'key' => $this->getFilterKey($column, $options),
+                        'value' => $this->getFilterName($column, $options),
+                        'type' => $this->getFilterType($options),
+                        'url' => $this->getFilterUrl($column, $options),
+                        'values' => $this->getFilterValues($column, $options),
+                    ];
                 }
-
-                if (!is_array($options)) {
-                    $column = $options;
-                }
-
-                if (!$this->isFilter($column, $options)) {
-                    continue;
-                }
-
-                $this->filters[] = [
-                    'key' => $this->getFilterKey($column, $options),
-                    'value' => $this->getFilterName($column, $options),
-                    'type' => $this->getFilterType($options),
-                    'url' => $this->getFilterUrl($column, $options),
-                    'values' => $this->getFilterValues($column, $options),
-                ];
             }
         }
 
diff --git a/resources/assets/js/components/AkauntingSearch.vue b/resources/assets/js/components/AkauntingSearch.vue
index 94a3bc3d6..4604874d7 100644
--- a/resources/assets/js/components/AkauntingSearch.vue
+++ b/resources/assets/js/components/AkauntingSearch.vue
@@ -307,6 +307,10 @@ export default {
         if (this.filter_list[i].key == value) {
           option = this.filter_list[i].value;
 
+          if (this.filter_list[i].values !== 'undefined' && Object.keys(this.filter_list[i].values).length) {
+            this.option_values[value] = this.convertOption(this.filter_list[i].values);
+          }
+
           if (typeof this.filter_list[i].url !== 'undefined' && this.filter_list[i].url) {
             option_url = this.filter_list[i].url;
           }
@@ -482,6 +486,29 @@ export default {
       this.onInputConfirm();
     },
 
+    convertOption (options) {
+      let values = [];
+
+      // Option set sort_option data
+      if (!Array.isArray(options)) {
+          for (const [key, value] of Object.entries(options)) {
+              values.push({
+                  key: (key).toString(),
+                  value: (value).toString()
+              });
+          }
+      } else {
+          options.forEach(function (option, index) {
+              values.push({
+                  key: (option.key).toString(),
+                  value: (option.value).toString()
+              });
+          }, this);
+      }
+
+      return values;
+    },
+
     closeIfClickedOutside(event) {
       if (!document.getElementById('search-field-' + this._uid).contains(event.target) && event.target.className != 'btn btn-link') {
           this.visible.options = false;
@@ -519,11 +546,13 @@ export default {
           let value = '';
 
           this.filter_list.forEach(function (_filter, i) {
+            let filter_values = this.convertOption(_filter.values);
+
             if (_filter.key == filter[0]) {
               option = _filter.value;
               operator = _filter.operator;
 
-              _filter.values.forEach(function (_value) {
+              filter_values.forEach(function (_value) {
                 if (_value.key == filter[1]) {
                   value = _value.value;
                 }
@@ -545,9 +574,9 @@ export default {
 
               this.filter_list.splice(i, 1);
 
-              this.option_values[_filter.key] = _filter.values;
+              this.option_values[_filter.key] = filter_values;
 
-              _filter.values.forEach(function (value, j) {
+              filter_values.forEach(function (value, j) {
                 if (value.key == filter[1]) {
                   this.selected_values.push(value);
 
diff --git a/resources/views/partials/reports/filter.blade.php b/resources/views/partials/reports/filter.blade.php
index 2946fec6c..41008c420 100644
--- a/resources/views/partials/reports/filter.blade.php
+++ b/resources/views/partials/reports/filter.blade.php
@@ -3,18 +3,56 @@
         'method' => 'GET',
         'route' => ['reports.show', $class->model->id],
         'role' => 'form',
+        'class' => 'mb-0'
     ]) !!}
+        @php
+            $filters = [];
 
-        <div id="items" class="float-left">
-            @if(isset($class->filters['years']))
-            {!! Form::select('year', $class->filters['years'], request('year', $class->year), ['class' => 'form-control form-control-sm d-inline-block w-auto']) !!}
-            @php unset($class->filters['years']) @endphp
-            @endif
-            @foreach($class->filters as $name => $values)
-                {!! Form::select($name . '[]', $values, request($name), ['id' => 'filter-' . $name, 'class' => 'form-control form-control-sm d-inline-block w-auto']) !!}
-            @endforeach
-            {!! Form::button(trans('general.filter'), ['type' => 'submit', 'class' => 'btn btn-sm btn-secondary']) !!}
+            foreach ($class->filters as $filter_name => $filter_values) {
+                $key = $filter_name;
+
+                if (isset($class->filters['keys']) && !empty($class->filters['keys'][$filter_name])) {
+                    $key = $class->filters['keys'][$filter_name];
+                } else if ($key == 'years') {
+                    $key = 'year';
+                } else {
+                    $key = Str::singular($key) . '_id';
+                }
+
+                $value = '';
+
+                if (isset($class->filters['names']) && !empty($class->filters['names'][$filter_name])) {
+                    $value = $class->filters['names'][$filter_name];
+                } else if (trans('reports.' . $filter_name) != 'reports.' . $filter_name) {
+                    $value = (strpos(trans('reports.' . $filter_name), '|') !== false) ? trans_choice('reports.' . $filter_name, 2) : trans('reports.' . $filter_name);
+                } else {
+                    $value = (strpos(trans('general.' . $filter_name), '|') !== false) ? trans_choice('general.' . $filter_name, 2) : trans('general.' . $filter_name);
+                }
+
+                $type = 'select';
+
+                if (isset($class->filters['types']) && !empty($class->filters['types'][$filter_name])) {
+                    $type = $class->filters['types'][$filter_name];
+                }
+
+                $url = '';
+
+                if (isset($class->filters['urls']) && !empty($class->filters['urls'][$filter_name])) {
+                    $url = $class->filters['urls'][$filter_name];
+                }
+
+                $filters[] = [
+                    'key' => $key,
+                    'value' => $value,
+                    'type' => $type,
+                    'url' => $url,
+                    'values' => $filter_values,
+                ];
+            }
+        @endphp
+
+        <div class="align-items-center">
+            <x-search-string :filters="$filters" />
         </div>
-
     {!! Form::close() !!}
 </div>
diff --git a/resources/views/partials/reports/show.blade.php b/resources/views/partials/reports/show.blade.php
index e5d9de068..a6db4a9ff 100644
--- a/resources/views/partials/reports/show.blade.php
+++ b/resources/views/partials/reports/show.blade.php
@@ -13,3 +13,7 @@
         @include($class->views['content'])
     </div>
 @endsection
+
+@push('scripts_start')
+    <script src="{{ asset('public/js/common/reports.js?v=' . version('short')) }}"></script>
+@endpush