diff --git a/public/css/custom.css b/public/css/custom.css
index 11c464f53..68c61605f 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -1442,3 +1442,23 @@ table .align-items-center td span.badge {
 .item-columns-edit .btn-aka-link {
     color: #8688ad;
 }
+
+.apps-store-bar .el-input__inner {
+    padding-left: 20px !important;
+    border: 0 !important;
+}
+
+.apps-store-bar .searh-field {
+    border: 0 !important;
+}
+
+.apps-store-bar .vr {
+    border-left: 2px solid rgba(0, 0, 0, 0.05);
+    height: 50px;
+    position: absolute;
+    left: 16.8%;
+}
+
+.apps-store-bar .searh-field .btn.btn-link.clear {
+    display: none !important;
+}
diff --git a/resources/views/partials/modules/bar.blade.php b/resources/views/partials/modules/bar.blade.php
index 40e9ddc72..c5846a9df 100644
--- a/resources/views/partials/modules/bar.blade.php
+++ b/resources/views/partials/modules/bar.blade.php
@@ -1,30 +1,31 @@
-<div class="row justify-content-center">
+<div class="row justify-content-center apps-store-bar">
     <div class="col-xs-12 col-sm-12">
         <div class="card">
-            <div class="card-body">
+            <div class="card-body p-2">
                 <div class="row align-items-center">
-                    <div class="col-xs-12 col-sm-9">
+                    <div class="col-xs-12 col-sm-2 pl-0 pr-0">
                         <akaunting-select
-                            class="form-control-sm d-inline-block w-auto"
+                            class="form-control-sm d-inline-block w-100"
                             :placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.categories', 1)]) }}'"
                             :name="'category'"
-                            :icon="'folder'"
+                            :icon="''"
                             :options="{{ json_encode($categories) }}"
                             :value="'{{ request('category') }}'"
                             @change="onChangeCategory($event)"
                         ></akaunting-select>
                         {{ Form::hidden('category_page', url("apps/categories"), ['id' => 'category_page']) }}
-
+                    </div>
+                    <div class="vr d-none d-sm-block"></div>
+                    <div class="col-xs-12 col-sm-7">
+                        {!! Form::open(['route' => 'apps.search', 'role' => 'form', 'method' => 'GET', 'class' => 'm-0']) !!}
+                            <x-search-string model="" />
+                        {!! Form::close() !!}
+                    </div>
+                    <div class="col-xs-12 col-sm-3 text-center">
                         <a href="{{ route('apps.paid') }}" class="btn btn-sm btn-white">{{ trans('modules.top_paid') }}</a>
                         <a href="{{ route('apps.new') }}" class="btn btn-sm btn-white">{{ trans('modules.new') }}</a>
                         <a href="{{ route('apps.free') }}" class="btn btn-sm btn-white">{{ trans('modules.top_free') }}</a>
                     </div>
-                    <div class="col-xs-12 col-sm-3 text-right">
-                        {!! Form::open(['route' => 'apps.search', 'role' => 'form', 'method' => 'GET', 'class' => 'm-0']) !!}
-                            <input name="keyword" value="{{ isset($keyword) ? $keyword : '' }}" type="text" class="form-control form-control-sm d-inline-block w-auto" placeholder="{{ trans('general.search_placeholder') }}">
-                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
-                        {!! Form::close() !!}
-                    </div>
                 </div>
             </div>
         </div>