diff --git a/src/components/renderer/form-list-table.vue b/src/components/renderer/form-list-table.vue
index 939090636..d4d23473f 100755
--- a/src/components/renderer/form-list-table.vue
+++ b/src/components/renderer/form-list-table.vue
@@ -12,7 +12,7 @@
           <template v-if="dataControl.dropdownShow === 'requests'">
             <b-dropdown
               variant="outline-secondary"
-              right
+              offset="-70"
               no-caret
             >
               <template #button-content>
@@ -44,44 +44,21 @@
           <div class="mr-4">
             <b-dropdown
               variant="outline-secondary"
+              offset="-50"
               size="sm"
             >
               <template #button-content>
                 <span class="text-capitalize">
-                  <b-icon
-                    v-if="showBadge"
-                    icon="circle-fill"
-                    class="mr-2"
-                    :variant="badgeVariant"
-                  />
                   {{ $t(titleDropdown) }}
                 </span>
               </template>
               <b-dropdown-item
-                @click="handleDropdownSelection('requests_dropdown', 'all')"
+                v-for="option in requestFilterDropdown"
+                :key="option"
+                @click="handleDropdownSelection('requests_dropdown', option)"
               >
                 <span class="item-text">
-                  {{ $t("View All") }}
-                </span>
-              </b-dropdown-item>
-              <b-dropdown-item
-                @click="handleDropdownSelection('requests_dropdown', 'Completed')"
-              >
-                <span class="item-text">
-                  <i
-                    class="fas fa-circle mr-2 text-primary" 
-                  />
-                  {{ $t("Completed") }}
-                </span>
-              </b-dropdown-item>
-              <b-dropdown-item
-                @click="handleDropdownSelection('requests_dropdown', 'In Progress')"
-              >
-                <span class="item-text">
-                  <i
-                    class="fas fa-circle mr-2 text-success"
-                  />
-                  {{ $t("In Progress") }}
+                  {{ $t(option) }}
                 </span>
               </b-dropdown-item>
             </b-dropdown>
@@ -91,42 +68,21 @@
           <div class="mr-4">
             <b-dropdown
               variant="outline-secondary"
+              offset="-50"
               size="sm"
             >
               <template #button-content>
                 <span class="text-capitalize">
-                  <b-icon
-                    v-if="showBadge"
-                    icon="circle-fill"
-                    class="mr-2"
-                    :variant="badgeVariant"
-                  />
                   {{ $t(titleDropdown) }}
                 </span>
               </template>
-              <b-dropdown-item @click="handleDropdownSelection('tasks', 'all')">
-                <span class="item-text">
-                  {{ $t("View All") }}
-                </span>
-              </b-dropdown-item>
               <b-dropdown-item
-                @click="handleDropdownSelection('tasks', 'Overdue')"
+                v-for="option in taskFilterDropdown"
+                :key="option"
+                @click="handleDropdownSelection('tasks', option)"
               >
                 <span class="item-text">
-                <i
-                  class="fas fa-circle mr-2 text-danger"
-                />
-                {{ $t("Overdue") }}
-                </span>
-              </b-dropdown-item>
-              <b-dropdown-item
-                @click="handleDropdownSelection('tasks', 'In Progress')"
-              >
-                <span class="item-text">
-                  <i
-                    class="fas fa-circle mr-2 text-warning"
-                  />
-                  {{ $t("In Progress") }}
+                {{ $t(option) }}
                 </span>
               </b-dropdown-item>
             </b-dropdown>
@@ -198,12 +154,22 @@ export default {
       searchCriteria: "",
       showInput: false,
       pmql: "",
-      badgeVariant: "",
       typeSelected: "",
       showBadge: false,
       customStyle: {
         "border-radius": "8px"
-      }
+      },
+      taskFilterDropdown: [
+        "Self-service",
+        "In Progress",
+        "Overdue",
+        "View All"
+      ],
+      requestFilterDropdown: [
+        "View All",
+        "Completed",
+        "In Progress",
+      ]
     };
   },
   watch: {
@@ -239,9 +205,7 @@ export default {
       this.typeSelected = listType;
       if (listType === "tasks") {
         this.$root.$emit("dropdownSelectionTask", valueSelected);
-        this.titleDropdown =
-          valueSelected === "all" ? this.viewAll : valueSelected;
-        this.colorBadge();
+        this.titleDropdown = valueSelected;
       } else {
         if (listType === "requests_filter") {
           this.optionRequest = valueSelected;
@@ -253,9 +217,7 @@ export default {
           }
         }
         if (listType === "requests_dropdown") {
-          this.titleDropdown =
-            valueSelected === "all" ? this.viewAll : valueSelected;
-          this.colorBadge();
+          this.titleDropdown = valueSelected;
           this.dropdownRequest = valueSelected;
         }
         combinedFilter.push(this.optionRequest);
@@ -292,36 +254,6 @@ export default {
       this.performSearch(listType);
       this.showInput = !this.showInput;
     },
-    /**
-     * Set the badge's color of the filter selected
-     */
-    colorBadge() {
-      if (this.titleDropdown === "In Progress") {
-        if (this.typeSelected === "tasks") {
-          this.badgeVariant = "warning";
-        }
-        if (this.typeSelected === "requests_dropdown") {
-          this.badgeVariant = "success";
-        }
-        this.showBadge = true;
-      }
-      if (this.titleDropdown === "Overdue") {
-        this.badgeVariant = "danger";
-        this.showBadge = true;
-      }
-      if (this.titleDropdown === "Overdue") {
-        this.badgeVariant = "danger";
-        this.showBadge = true;
-      }
-      if (this.titleDropdown === "Completed") {
-        this.badgeVariant = "primary";
-        this.showBadge = true;
-      }
-      if (this.titleDropdown === "View All" || this.titleDropdown === "all") {
-        this.badgeVariant = "";
-        this.showBadge = false;
-      }
-    },
     /**
      * Verify backward compatibility for Start New Case
      */
@@ -383,8 +315,10 @@ export default {
   padding: 0;
 }
 
-.btn-outline-secondary {
+.btn-outline-secondary,
+.btn-outline-secondary:focus {
   border: none;
+  box-shadow: none;
 }
 
 .item-text {
@@ -398,19 +332,38 @@ export default {
 }
 
 .dropdown-menu {
-  padding: 10px;
-  width: 211px;
-  box-shadow: 0px 10px 20px 4px #00000021;
+  padding: 0px;
+  width: 180px;
+  box-shadow: 0px 4px 8px 0px #0000001A;
+  border-radius: 4px;
 }
 
 .dropdown-item {
-  padding: 10px 8px;
+  padding: 13px 12px;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21.79px;
+  letter-spacing: -0.02em;
+  text-align: left;
 }
+
+.btn-outline-secondary:hover,
+.btn-outline-secondary:not(:disabled):not(.disabled):active,
+.btn-outline-secondary:not(:disabled):not(.disabled).active,
+.show > .btn-outline-secondary.dropdown-toggle {
+    background: none;
+    color: #228fed;
+    border: none;
+    box-shadow: none;
+}
+
 .head-filter {
   display: flex;
   align-items: baseline;
   gap: 8px;
 }
+
 .badge {
   display: inline-flex;
   padding: 8px;
diff --git a/src/components/renderer/form-requests.vue b/src/components/renderer/form-requests.vue
index 341813925..a8c28ead7 100755
--- a/src/components/renderer/form-requests.vue
+++ b/src/components/renderer/form-requests.vue
@@ -85,6 +85,7 @@ export default {
       orderDirection: "DESC",
       additionalParams: "",
       showTable: true,
+      pmqlSearch: "",
       sortOrder: [
         {
           field: "id",
@@ -116,6 +117,10 @@ export default {
           pmql = this.pmql;
         }
 
+        if (this.pmqlSearch) {
+          pmql = pmql + "AND" + this.pmqlSearch;
+        }
+
         let { filter } = this;
 
         if (filter && filter.length) {
@@ -224,23 +229,23 @@ export default {
         : "text-dark";
     },
     fetchData(selectedOptions) {
-      if (selectedOptions[0] === "by_me" && selectedOptions[1] !== "all") {
+      if (selectedOptions[0] === "by_me" && selectedOptions[1] !== "View All") {
         this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "${selectedOptions[1]}")`;
       }
       if (
         selectedOptions[0] === "as_participant" &&
-        selectedOptions[1] !== "all"
+        selectedOptions[1] !== "View All"
       ) {
         this.pmql = `(status = "${selectedOptions[1]}") AND (participant = "${Processmaker.user.username}")`;
       }
-      if (selectedOptions[1] === "all") {
+      if (selectedOptions[1] === "View All") {
         this.pmql = `(user_id = ${ProcessMaker.user.id}) AND ((status = "In Progress") OR (status = "Completed"))`;
       }
       this.fetch();
     },
     fetchSearch(searchData) {
-      this.pmql = "";
-      this.pmql = searchData;
+      this.pmqlSearch = "";
+      this.pmqlSearch = searchData;
       this.fetch();
     },
     setupColumns() {
diff --git a/src/components/renderer/form-tasks.vue b/src/components/renderer/form-tasks.vue
index 7d5d586e9..dabda64a6 100755
--- a/src/components/renderer/form-tasks.vue
+++ b/src/components/renderer/form-tasks.vue
@@ -135,6 +135,7 @@ export default {
       status: "",
       showTable: true,
       tableHeaders: [],
+      pmqlSearch: "",
       sortOrder: [
         {
           field: "ID",
@@ -153,7 +154,7 @@ export default {
   },
   mounted() {
     this.setupColumns();
-    this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "In Progress")`;
+    this.pmql = `(user_id = ${ProcessMaker.user.id})`;
     this.fetch();
     this.$root.$on("dropdownSelectionTask", this.fetchData);
     this.$root.$on("searchTask", this.fetchSearch);
@@ -175,6 +176,10 @@ export default {
           pmql = this.pmql;
         }
 
+        if (this.pmqlSearch) {
+          pmql = pmql + "AND" + this.pmqlSearch;
+        }
+
         if (this.filterDropdowns !== undefined) {
           filterDropdowns = this.filterDropdowns;
         }
@@ -406,9 +411,13 @@ export default {
         : "text-dark";
     },
     fetchData(selectedOption) {
-      if (selectedOption === "In Progress" || selectedOption === "all") {
-        this.filterDropdowns = "";
-        this.pmql = `(user_id = ${ProcessMaker.user.id}) AND (status = "In Progress")`;
+      this.filterDropdowns = "";
+      this.pmql = `(user_id = ${ProcessMaker.user.id})`
+      if (selectedOption === "Self-service") {
+        this.pmql = this.pmql + `AND (status = "Self Service")`;
+      }
+      if (selectedOption === "In Progress") {
+        this.pmql = this.pmql + `AND (status = "In Progress")`;
       }
       if (selectedOption === "Overdue") {
         this.filterDropdowns = "overdue=true";
@@ -416,8 +425,8 @@ export default {
       this.fetch();
     },
     fetchSearch(searchData) {
-      this.pmql = "";
-      this.pmql = searchData;
+      this.pmqlSearch = "";
+      this.pmqlSearch = searchData;
       this.fetch();
     },
     formatRemainingTime(date) {