diff --git a/client/web/compose/src/components/Common/RecordListFilter.vue b/client/web/compose/src/components/Common/RecordListFilter.vue
index f9f1ffd8e..7b79f8302 100644
--- a/client/web/compose/src/components/Common/RecordListFilter.vue
+++ b/client/web/compose/src/components/Common/RecordListFilter.vue
@@ -44,6 +44,7 @@
                   class="pb-2"
                 >
                   <b-td
+                    class="align-middle"
                     style="width: 1%;"
                   >
                     <h6
@@ -101,6 +102,7 @@
                   </b-td>
                   <b-td
                     v-if="getField(filter.name)"
+                    class="align-middle"
                     style="width: 1%;"
                   >
                     <b-button
@@ -489,7 +491,14 @@ export default {
           .map(({ groupCondition, filter = [] }) => {
             filter = filter.map(({ value, ...f }) => {
               f.record = new compose.Record(this.mock.module, {})
-              f.record.values[f.name] = value
+
+              // If its a system field add value to root of record
+              if (Object.keys(f.record).includes(f.name)) {
+                f.record[f.name] = value
+              } else {
+                f.record.values[f.name] = value
+              }
+
               return f
             })
 
@@ -512,7 +521,7 @@ export default {
       this.$emit('filter', this.componentFilter.map(({ groupCondition, filter = [] }) => {
         filter = filter.map(({ record, ...f }) => {
           if (record) {
-            f.value = record.values[f.name]
+            f.value = record[f.name] || record.values[f.name]
           }
 
           return f
diff --git a/client/web/compose/src/lib/record-filter.js b/client/web/compose/src/lib/record-filter.js
index 6b9a1bdc0..a189b870c 100644
--- a/client/web/compose/src/lib/record-filter.js
+++ b/client/web/compose/src/lib/record-filter.js
@@ -58,7 +58,7 @@ export function getFieldFilter (name, kind, query = '', operator = '=') {
   }
 
   // Take care of special case where query is undefined and its not a Bool field
-  if (!query) {
+  if (!query && query !== 0) {
     if (operator === '=') {
       return `${name} IS NULL`
     } else if (operator === '!=') {
@@ -68,15 +68,6 @@ export function getFieldFilter (name, kind, query = '', operator = '=') {
     return undefined
   }
 
-  // To SQLish LIKE param
-  const strQuery = query
-    // replace * with %
-    .replace(/[*%]+/g, '%')
-    // Remove all trailing * and %
-    .replace(/[%]+$/, '')
-    // Remove all leading * and %
-    .replace(/^[%]+/, '')
-
   if (['Number'].includes(kind) && !isNaN(numQuery)) {
     return build(operator, name, numQuery)
   }
@@ -102,6 +93,15 @@ export function getFieldFilter (name, kind, query = '', operator = '=') {
     return build(operator, name, `'${query}'`)
   }
 
+  // To SQLish LIKE param
+  const strQuery = query
+    // replace * with %
+    .replace(/[*%]+/g, '%')
+    // Remove all trailing * and %
+    .replace(/[%]+$/, '')
+    // Remove all leading * and %
+    .replace(/^[%]+/, '')
+
   if (['String', 'Url', 'Select', 'Email'].includes(kind)) {
     if (operator === 'LIKE' || operator === 'NOT LIKE') {
       return build(operator, name, `'%${strQuery}%'`)
@@ -132,7 +132,7 @@ export function queryToFilter (searchQuery = '', prefilter = '', fields = [], re
   searchQuery = (searchQuery || '').trim()
 
   // Create query for search string
-  if (searchQuery) {
+  if (searchQuery || searchQuery === 0) {
     searchQuery = fields
       .filter(f => !noneQueryableFieldNames.includes(f.name) && !noneQueryableFieldKinds.includes(f.kind))
       .map(f => getFieldFilter(f.name, f.kind, searchQuery, 'LIKE'))