diff --git a/packages/Webkul/Admin/src/Http/ViewComposers/DataGrids/UserComposer.php b/packages/Webkul/Admin/src/Http/ViewComposers/DataGrids/UserComposer.php
index d3eda39c2..3f84a3c67 100644
--- a/packages/Webkul/Admin/src/Http/ViewComposers/DataGrids/UserComposer.php
+++ b/packages/Webkul/Admin/src/Http/ViewComposers/DataGrids/UserComposer.php
@@ -54,13 +54,13 @@ class UserComposer
                 ]
             ],
             'join' => [
-                [
-                    'join' => 'leftjoin',
-                    'table' => 'roles as r',
-                    'primaryKey' => 'u.role_id',
-                    'condition' => '=',
-                    'secondaryKey' => 'r.id',
-                ]
+                // [
+                //     'join' => 'leftjoin',
+                //     'table' => 'roles as r',
+                //     'primaryKey' => 'u.role_id',
+                //     'condition' => '=',
+                //     'secondaryKey' => 'r.id',
+                // ]
             ],
             'columns' => [
                 [
@@ -81,12 +81,12 @@ class UserComposer
                     'label' => 'Admin E-Mail',
                     'sortable' => true,
                 ],
-                [
-                    'name' => 'r.name',
-                    'type' => 'string',
-                    'label' => 'Content',
-                    'sortable' => true,
-                ],
+                // [
+                //     'name' => 'r.id',
+                //     'type' => 'string',
+                //     'label' => 'Content',
+                //     'sortable' => true,
+                // ],
                 // [
                 //     'name' => 'a.first_name',
                 //     'type' => 'string',
@@ -129,17 +129,17 @@ class UserComposer
                 'lte' => "<=",
                 'gte' => ">=",
                 'neqs' => "<>",
-                'neqn' => "!=",
-                'ceq' => "<=>",
+                // 'neqn' => "!=",
+                // 'ceq' => "<=>",
                 'like' => "like",
-                'likebin' => "like binary",
-                'ntlike' => "not like",
-                'ilike' => "ilike",
-                'regex' => "regexp",
-                'notregex' => "not regexp",
-                'simto' => "similar to",
-                'nsimto' => "not similar to",
-                'nilike' => "not ilike",
+                // 'likebin' => "like binary",
+                // 'ntlike' => "not like",
+                // 'ilike' => "ilike",
+                // 'regex' => "regexp",
+                // 'notregex' => "not regexp",
+                // 'simto' => "similar to",
+                // 'nsimto' => "not similar to",
+                // 'nilike' => "not ilike",
             ],
             // 'css' => []
 
diff --git a/packages/Webkul/Admin/src/Resources/views/users/users/index.blade.php b/packages/Webkul/Admin/src/Resources/views/users/users/index.blade.php
index 984009b71..ed0969efe 100644
--- a/packages/Webkul/Admin/src/Resources/views/users/users/index.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/users/users/index.blade.php
@@ -11,11 +11,10 @@
             <div class="page-title">
 
             </div>
-
             <div class="page-action">
                 <a href="{{ route('admin.users.create') }}" class="btn btn-lg btn-primary">
-                            {{ __('Add User') }}
-                        </a>
+                    {{ __('Add User') }}
+                </a>
             </div>
         </div>
 
diff --git a/packages/Webkul/Ui/src/DataGrid/DataGrid.php b/packages/Webkul/Ui/src/DataGrid/DataGrid.php
index 21a9a9b61..27fe22020 100644
--- a/packages/Webkul/Ui/src/DataGrid/DataGrid.php
+++ b/packages/Webkul/Ui/src/DataGrid/DataGrid.php
@@ -558,6 +558,7 @@ class DataGrid
             'css' => $this->css,
             'results' => $this->results,
             'columns' => $this->columns,
+            'operators' => $this->operators,
         ]);
     }
 }
diff --git a/packages/Webkul/Ui/src/Resources/views/datagrid/index.blade.php b/packages/Webkul/Ui/src/Resources/views/datagrid/index.blade.php
index 372bbc88b..7a2bc95bf 100644
--- a/packages/Webkul/Ui/src/Resources/views/datagrid/index.blade.php
+++ b/packages/Webkul/Ui/src/Resources/views/datagrid/index.blade.php
@@ -1,32 +1,32 @@
 <div class="grid-container{{-- $css->datagrid --}}">
-    <div class="{{ $css->filter }} filter-wrapper">
+    <div class="{{ $css->filter }}filter-wrapper">
         <div class="filter-row-one">
-            <div class="search-filter">
-                <input type="search" class="control" placeholder="Search Users" />
+            <div class="search-filter" style="display: inline-flex; align-items: center;">
+                <input type="search" class="control filter-value" placeholder="Search Users" style="border-radius: 0px;border-right:0px;" value=""/>
+                <span class="btn-filter icon search-icon" style="border:2px solid #c7c7c7; height:36px; width:39px;"></span>
             </div>
             <div class="dropdown-filters">
                 <div class="column-filter">
-                    <select class="control">
+                    <select class="control filter-col">
                         <option selected disabled>Columns</option>
-                        <option>All Columns</option>
-                        <option>Column 1</option>
-                        <option>Column 2</option>
-                        <option>Column 3</option>
-
+                        @foreach($columns as $column)
+                            <option value="{{ $column->name }}">{{ $column->label }}</option>
+                        @endforeach
                     </select>
                 </div>
                 <div class="more-filters">
-                    <select class="control">
+                    <select class="control filter-cond">
                         <option selected disabled>Filters</option>
-                        <option>Filter 1</option>
-                        <option>Filter 2</option>
-                        <option>Filter 3</option>
-                        <option>Filter 4</option>
+                        @foreach($operators as $key=>$value)
+                            <option>{{ $key }}</option>
+                        @endforeach
                     </select>
                 </div>
             </div>
         </div>
         <div class="filter-row-two">
+            {{ $columns }}<br/>
+            {{ json_encode($operators) }}
             <span class="filter-one">
                 <span class="filter-name">
                     Stock
@@ -81,5 +81,42 @@
         </table>
         {{-- @include('ui::partials.pagination') --}}
     </div>
+    @section('javascript')
+        <script type="text/javascript">
+        var filter_value;
+        var filter_column;
+        var filter_condition;
+        var count_filters = 0;
+        var url;
+        var flag = 0;
+        var array_start = '{';
+        var array_end = '}';
+        $(document).ready(function(){
+            console.log('ready');
+            $('.btn-filter').click(function(){
+                filter_value = $(".filter-value").val();
+                filter_column = $(".filter-col").val();
+                filter_condition = $(".filter-cond").val();
+                if(filter_value!="" && filter_condition!=null || filter_column!=null)
+                    flag=1;
+                if(flag==1){
+                    formURL(filter_value,filter_column,filter_condition);
+                }
+                else
+                    alert('Please enter filter criteria in all three fields above');
+            });
+        });
+        function formURL(a,b,c){
+            //form the array object here and convert it to string and pass it in url
 
+            if(count_filters == 0){
+                filt = array_start+count_filters+'=>'+array_start+filter_column+'=>'+array_start+filter_condition+'=>'+filter_value+array_end+array_end+array_end;
+            }
+            console.log(filt);
+            console.log(JSON.parse(filt))
+            count_filters++;
+
+        }
+        </script>
+    @endsection
 </div>