diff --git a/resources/js/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue
index 0e7d0c7544..6cedd7dbda 100644
--- a/resources/js/requests/components/RequestsListing.vue
+++ b/resources/js/requests/components/RequestsListing.vue
@@ -399,32 +399,7 @@ export default {
 
         const CancelToken = ProcessMaker.apiClient.CancelToken;
 
-        let pmql = '';
-
-        if (this.pmql !== undefined) {
-          pmql = this.pmql;
-        }
-
-        let filter = this.filter;
-
-        if (filter && filter.length) {
-          if (filter.isPMQL()) {
-            pmql = `(${pmql}) and (${filter})`;
-            filter = '';
-          }
-        }
-
-        if (this.previousFilter !== filter) {
-          this.page = 1;
-        }
-
-        this.previousFilter = filter;
-
-        if (this.previousPmql !== pmql) {
-          this.page = 1;
-        }
-
-        this.previousPmql = pmql;
+        const { pmql, filter } = this.buildPmqlAndFilter();
 
         // Load from our api client
         ProcessMaker.apiClient
@@ -467,6 +442,37 @@ export default {
           });
       });
     },
+    buildPmqlAndFilter() {
+      let pmql = '';
+
+      if (this.pmql !== undefined) {
+        pmql = this.pmql;
+      }
+
+      let filter = this.filter;
+
+      if (filter?.length) {
+        if (filter.isPMQL()) {
+          pmql = (pmql ? `${pmql} and ` : '') + `(${filter})`;
+          filter = '';
+        }
+      }
+
+      if (this.previousFilter !== filter) {
+        this.page = 1;
+      }
+
+      this.previousFilter = filter;
+
+      if (this.previousPmql !== pmql) {
+        this.page = 1;
+      }
+
+      this.previousPmql = pmql;
+
+      return { pmql, filter };
+
+    },
     handleRowClick(row) {
       window.location.href = this.openRequest(row, 1);
     },
diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index 6ddd97645e..8ed0487904 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/resources/js/tasks/components/TasksList.vue
@@ -71,9 +71,9 @@
               <template v-else>
                 <template v-if="header.field === 'due_at'">
                   <span :class="['badge', 'badge-'+row['color_badge'], 'due-'+row['color_badge']]">
-                    {{ formatRemainingTime(getNestedPropertyValue(row, header)) }}
+                    {{ formatRemainingTime(row.due_at) }}
                   </span>
-                  <span>{{ row["due_date"] }}</span>
+                  <span>{{ getNestedPropertyValue(row, header) }}</span>
                 </template>
                 <template v-else>
                   <div
@@ -158,6 +158,7 @@ import TaskTooltip from "./TaskTooltip.vue";
 import PMColumnFilterIconAsc from "../../components/PMColumnFilterPopover/PMColumnFilterIconAsc.vue";
 import PMColumnFilterIconDesc from "../../components/PMColumnFilterPopover/PMColumnFilterIconDesc.vue";
 import FilterTableBodyMixin from "../../components/shared/FilterTableBodyMixin";
+import { get } from "lodash";
 
 const uniqIdsMixin = createUniqIdsMixin();
 
@@ -227,6 +228,13 @@ export default {
     };
   },
   computed: {
+    now() {
+      const tz = get(window, 'ProcessMaker.user.timezone');
+      if (tz) {
+        return moment().tz(tz);
+      }
+      return moment();
+    },
     endpoint() {
       if (this.savedSearch !== false) {
         return `saved-searches/${this.savedSearch}/results`;
@@ -249,7 +257,6 @@ export default {
           record["status"] = this.formatStatus(record);
           record["assignee"] = this.formatAvatar(record["user"]);
           record["request"] = this.formatRequest(record);
-          record["due_date"] = this.formatDueDate(record["due_at"]);
           record["color_badge"] = this.formatColorBadge(record["due_at"]);
           record["process"] = this.formatProcess(record);
           record["task_name"] = this.formatActiveTask(record);
@@ -438,14 +445,11 @@ export default {
       return `${daysRemaining}D`;
     },
     remainingTime(date) {
-      if (date === "-" || date === null) {
+      date = moment(date);
+      if (!date.isValid()) {
         return 0;
       }
-
-      const currentDate = new Date();
-      const formatDate = moment(date).format("YYYY-MM-DD");
-      const endDate = new Date(formatDate);
-      return endDate - currentDate;
+      return date.diff(this.now);
     },
     formatProcess(request) {
       return request.process.name;