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 13fd1b219..3ec7d7e24 100644
--- a/packages/Webkul/Ui/src/Resources/views/datagrid/index.blade.php
+++ b/packages/Webkul/Ui/src/Resources/views/datagrid/index.blade.php
@@ -2,9 +2,9 @@
     <div class="{{ $css->filter }}filter-wrapper">
         <div class="filter-row-one">
             <div class="search-filter" style="display: inline-flex; align-items: center;">
-                <input type="search" class="control filter-field" placeholder="Search Users" value=""/>
+                <input type="search" class="control search-field" placeholder="Search Users" value=""/>
                 <div class="ic-wrapper">
-                    <span class="icon search-icon filter-btn"></span>
+                    <span class="icon search-icon search-btn"></span>
                 </div>
 
             </div>
@@ -85,7 +85,7 @@
                                 </li>
                                 {{-- Response fields based on the type of columns to be filtered --}}
                                 <li class="filter-response-string">
-                                    <input type="text" class="control conditional-response" placeholder="Value here" />
+                                    <input type="text" class="control response-string" placeholder="Value here" />
                                 </li>
                                 <li class="filter-response-boolean">
                                     <select class="control select-boolean">
@@ -94,10 +94,13 @@
                                     </select>
                                 </li>
                                 <li class="filter-response-datetime">
-                                    <input type="datetime-local" class="control conditional-response" placeholder="Value here" />
+                                    <input type="datetime-local" class="control response-datetime" placeholder="Value here" />
                                 </li>
                                 <li class="filter-response-number">
-                                    <input type="text" class="control conditional-response" placeholder="Value here" />
+                                    <input type="text" class="control response-number" placeholder="Value here" />
+                                </li>
+                                <li>
+                                    <button class="btn btn-sm btn-primary apply-filter">Apply</button>
                                 </li>
                             </ul>
                         </div>
@@ -173,21 +176,23 @@
         var filter_value;
         var filter_column;
         var filter_condition;
+        var filter_range;
+        var filt = '';
         var count_filters = 0;
         var url;
-        var flag = 0;
-        var array_start = '{';
-        var array_end = '}';
+        var array_start = '[';
+        var array_end = ']';
         var typeValue;
+        var selectedColumn = '';
+        var myURL = document.location;
+        let params;
         $(document).ready(function(){
-            console.log('ready');
-            $('.filter-btn').click(function(){
-                filter_value = $(".filter-field").val();
+            $('.search-btn').click(function(){
+                filter_value = $(".search-field").val();
             });
-
             $('select.filter-column-select').change(function() {
                 typeValue = $('select.filter-column-select').find(':selected').data('type');
-                console.log(typeValue);
+                selectedColumn = $('select.filter-column-select').find(':selected').val();
                 if(typeValue == 'string'){
                     //default behaviour for strings
                     $('.filter-condition-dropdown-number').css('display','none');
@@ -196,62 +201,125 @@
                     $('.filter-response-datetime').css('display','none');
                     $('.filter-response-boolean').css('display','none');
 
+                    //show the two wanted
                     $('.filter-condition-dropdown-string').css('display','inherit');
                     $('.filter-response-string').css('display','inherit');
                 }
                 else if(typeValue == 'boolean'){
-                    //make another list component
-
                     //hide unwanted
+                    $('.filter-condition-dropdown-string').css('display','none');
+                    $('.filter-condition-dropdown-number').css('display','none');
+                    $('.filter-condition-dropdown-datetime').css('display','none');
                     $('.filter-response-string').css('display','none');
                     $('.filter-response-number').css('display','none');
                     $('.filter-response-datetime').css('display','none');
-                    $('.filter-condition-dropdown').css('display','none');
-                    //show what is wanted
+
+                    //only true or false for that column is needed as input
                     $('.filter-response-boolean').css('display','inherit');
                 }
                 else if(typeValue == 'datetime'){
-                    //make another list component
-
                     //hide unwanted
+                    $('.filter-condition-dropdown-string').css('display','none');
+                    $('.filter-condition-dropdown-number').css('display','none');
                     $('.filter-response-string').css('display','none');
                     $('.filter-response-number').css('display','none');
                     $('.filter-response-boolean').css('display','none');
 
                     //show what is wanted
+                    $('.filter-condition-dropdown-datetime').css('display','inherit');
                     $('.filter-response-datetime').css('display','inherit');
-                    $('.filter-condition-dropdown').css('display','inherit');
                 }
                 else if(typeValue == 'number'){
-                    //make another list component
-
                     //hide unwanted
+                    $('.filter-condition-dropdown-string').css('display','none');
+                    $('.filter-condition-dropdown-datetime').css('display','none');
                     $('.filter-response-string').css('display','none');
                     $('.filter-response-datetime').css('display','none');
                     $('.filter-response-boolean').css('display','none');
 
                     //show what is wanted
+                    $('.filter-condition-dropdown-number').css('display','inherit');
                     $('.filter-response-number').css('display','inherit');
-                    $('.filter-condition-dropdown').css('display','inherit');
+
                 }
+                $('.apply-filter').on('click',function(){
+                    params = (new URL(document.location)).search;
+                    if(typeValue == 'number'){
+                        var conditionUsed = $('.filter-condition-dropdown-number').find(':selected').val();
+                        var response = $('.response-number').val();
+                        console.log(selectedColumn,conditionUsed,response);
+                        formURL(selectedColumn,conditionUsed,response,params);
+
+                    }
+                    if(typeValue == 'string'){
+                        var conditionUsed = $('.filter-condition-dropdown-string').find(':selected').val();
+                        var response = $('.response-string').val();
+                        console.log(selectedColumn,conditionUsed,response);
+                        formURL(selectedColumn,conditionUsed,response,params);
+
+                    }
+                    if(typeValue == 'datetime'){
+                        var conditionUsed = $('.filter-condition-dropdown-datetime').find(':selected').val();
+                        var response = $('.response-datetime').val();
+                        console.log(selectedColumn,conditionUsed,response);
+                        formURL(selectedColumn,conditionUsed,response,params);
+
+                    }
+                    if(typeValue == 'boolean'){
+                        console.log('boolean');
+                    }
+                });
             });
-            // $('.filter-column-select').click(function(){
-            //     var column = $('.filter-column-select').val();
-            //     console.log(column);
-            // });
-
-
         });
 
-        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;
+        function formURL(column, condition, response,urlparams){
+            // console.log("url params=",urlparams.trim());
+            // console.log(params.indexOf("?"));
+            var pos = params.lastIndexOf("&");
+            var pos1 = params.lastIndexOf("?");
+            if(pos == -1 && pos1!=-1){
+                count_filters = parseInt(params.slice(1,2).trim());
+                console.log('use count for ?',parseInt(count_filters));
             }
-            console.log(filt);
-            console.log(JSON.parse(filt))
-            count_filters++;
+            else if(pos == -1 && pos1 == -1){
+                count_filters = parseInt(0);
+                console.log('no search params found');
+            }
+            else if(pos!= -1 && pos1!= -1){
+                count_filters = parseInt(params.slice(pos+1,pos+2).trim());
+                console.log('both & and ? present so using index=',count_filters);
+            }
+            else{
+                count_filters = parseInt(params.slice(pos+1,pos+2).trim());
+                console.log(count_filters);
+            }
+            if(count_filters==0 && pos == -1 && pos1!=-1)
+            {
+                filt = filt + '&' + parseInt(count_filters+1) + '=' + selectedColumn + array_start + condition + array_end + '=' + response;
+                console.log(filt);
+                // count_filters++;
+                document.location = myURL + filt;
+            }
+            else if(count_filters==0 && pos==-1 && pos1==-1)
+            {
+                filt = '?' + parseInt(count_filters+1) + '=' + selectedColumn + array_start + condition + array_end + '=' + response;
+                console.log(filt);
+                // count_filters++;
+                document.location = myURL + filt;
+            }
+            else if(count_filters>0 && pos!=-1 && pos1!=-1){
+                filt = filt + '&' + parseInt(count_filters+1) + '=' + selectedColumn + array_start + condition + array_end + '=' + response;
+                console.log(filt);
+                document.location = myURL + filt;
+            }
+            else{
+                filt = '?' + parseInt(count_filters) + '=' + selectedColumn + array_start + condition + array_end + '=' + response;
+                console.log(filt);
+                // count_filters++;
+                document.location = myURL + filt;
+            }
+            // console.log(filt);
+
 
         }
         </script>