diff --git a/resources/img/smartinbox-images/open-case.svg b/resources/img/smartinbox-images/open-case.svg
new file mode 100644
index 0000000000..463e6a30fe
--- /dev/null
+++ b/resources/img/smartinbox-images/open-case.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.62643 0.949275C4.63442 0.997227 4.64241 1.04518 4.66639 1.09313C4.68237 1.14108 4.71434 1.18104 4.73831 1.221C4.7543 1.25297 4.76229 1.28494 4.78627 1.30892C4.79426 1.3249 4.81024 1.3249 4.82623 1.34088C4.83422 1.34888 4.84221 1.36486 4.8502 1.38084C4.87418 1.40482 4.90615 1.41281 4.93811 1.43679C4.97807 1.46876 5.01803 1.49273 5.06599 1.51671C5.11394 1.54068 5.16189 1.54868 5.20984 1.56466C5.24181 1.57265 5.27378 1.58864 5.30575 1.59663H8.69436C8.69436 1.59663 8.75829 1.56466 8.79026 1.55667C8.83821 1.54068 8.88617 1.53269 8.93412 1.50872C8.98207 1.48474 9.02203 1.46076 9.06199 1.4288C9.09396 1.40482 9.12593 1.39683 9.1499 1.37285C9.15789 1.36486 9.16589 1.34888 9.17388 1.33289C9.18187 1.3249 9.19785 1.31691 9.21384 1.30092C9.23781 1.27695 9.24581 1.23699 9.26179 1.21301C9.28577 1.17305 9.31773 1.13309 9.33372 1.08514C9.3497 1.03719 9.35769 0.989235 9.37368 0.941283C9.37368 0.909315 9.39765 0.877347 9.39765 0.837387C9.39765 0.821403 9.39765 0.805419 9.39765 0.789435C9.39765 0.773451 9.39765 0.757467 9.39765 0.741483C9.39765 0.709515 9.38167 0.677547 9.37368 0.637587C9.36569 0.589635 9.35769 0.541683 9.33372 0.493731C9.31773 0.445779 9.28577 0.405819 9.26179 0.365859C9.24581 0.333891 9.23781 0.301923 9.21384 0.277947C9.20585 0.261963 9.18986 0.261963 9.17388 0.245979C9.16589 0.237987 9.15789 0.222003 9.1499 0.206019C9.12593 0.182043 9.09396 0.174051 9.06199 0.150075C9.02203 0.118106 8.98207 0.0941305 8.93412 0.0701545C8.88617 0.0461784 8.83821 0.0381864 8.79026 0.0222024C8.75829 0.0142104 8.72633 -0.00177362 8.69436 -0.00976562H5.30575C5.30575 -0.00976562 5.24181 0.0222024 5.20984 0.0301944C5.16189 0.0461784 5.11394 0.0541704 5.06599 0.0781465C5.01803 0.102122 4.97807 0.126098 4.93811 0.158067C4.90615 0.182043 4.87418 0.190035 4.8502 0.214011C4.84221 0.222003 4.83422 0.237987 4.82623 0.253971C4.81823 0.261963 4.80225 0.269955 4.78627 0.285939C4.76229 0.309915 4.7543 0.349875 4.73831 0.373851C4.71434 0.413811 4.68237 0.453771 4.66639 0.501723C4.6504 0.549675 4.64241 0.597627 4.62643 0.645579C4.62643 0.677547 4.60245 0.709515 4.60245 0.749475C4.60245 0.765459 4.60245 0.781443 4.60245 0.797427C4.60245 0.813411 4.60245 0.829395 4.60245 0.845379C4.60245 0.877347 4.61843 0.909315 4.62643 0.949275ZM12.9221 1.27695C12.8502 1.20502 12.7623 1.13309 12.6824 1.07715C12.4186 0.901323 12.1149 0.805419 11.7953 0.805419H10.9961V1.60462C10.9961 2.0282 10.8282 2.43579 10.5245 2.73149C10.4526 2.80342 10.3647 2.87535 10.2848 2.93129C10.021 3.10712 9.71733 3.20302 9.39765 3.20302H4.60245C4.28277 3.20302 3.97907 3.10712 3.71534 2.93129C3.62742 2.87535 3.5475 2.80342 3.47558 2.73149C3.17188 2.4278 3.00405 2.0282 3.00405 1.60462V0.805419H2.20485C1.88517 0.805419 1.58147 0.901323 1.31773 1.07715C1.22982 1.13309 1.1499 1.20502 1.07797 1.27695C0.774277 1.58064 0.606445 1.98024 0.606445 2.40382V14.3918C0.606445 14.8154 0.774277 15.223 1.07797 15.5187C1.38167 15.8224 1.78127 15.9902 2.20485 15.9902H11.7953C12.2188 15.9902 12.6264 15.8224 12.9221 15.5187C13.2258 15.215 13.3937 14.8154 13.3937 14.3918V2.40382C13.3937 1.98024 13.2258 1.57265 12.9221 1.27695ZM3.83522 7.0232C3.84321 6.97525 3.8512 6.9273 3.87518 6.87935C3.89915 6.83139 3.93112 6.79143 3.96309 6.74348C3.98706 6.70352 4.01104 6.66356 4.04301 6.63159C4.09096 6.59163 4.13891 6.55967 4.19486 6.5277C4.22682 6.50372 4.25879 6.47974 4.29875 6.46376C4.39466 6.4238 4.49056 6.40782 4.59446 6.40782H9.38966C9.49356 6.40782 9.59745 6.43179 9.68537 6.46376C9.72533 6.47974 9.75729 6.51171 9.78926 6.5277C9.84521 6.55967 9.89316 6.58364 9.94111 6.63159C9.97308 6.66356 9.99705 6.71151 10.021 6.74348C10.053 6.79143 10.093 6.83139 10.1089 6.87935C10.1329 6.9273 10.1329 6.97525 10.1489 7.0232C10.1569 7.07115 10.1809 7.1271 10.1809 7.17505C10.1809 7.223 10.1729 7.27095 10.1649 7.3269C10.1569 7.37485 10.1489 7.43079 10.1329 7.47875C10.1169 7.5267 10.085 7.56666 10.061 7.60662C10.037 7.65457 10.013 7.69453 9.97308 7.73449C9.94111 7.77445 9.90115 7.79843 9.86119 7.83039C9.82123 7.86236 9.77328 7.89433 9.73332 7.91831C9.69336 7.94228 9.64541 7.95027 9.59745 7.95827C9.53352 7.97425 9.46159 7.99823 9.39765 7.99823H4.60245C4.53052 7.99823 4.46658 7.97425 4.40265 7.95827C4.3547 7.94228 4.30675 7.93429 4.26678 7.91831C4.21883 7.89433 4.17887 7.86236 4.13891 7.83039C4.09895 7.79843 4.05899 7.77445 4.02702 7.73449C3.99506 7.69453 3.97108 7.64658 3.93911 7.60662C3.91514 7.56666 3.88317 7.5267 3.86718 7.47875C3.8512 7.43079 3.84321 7.37485 3.83522 7.3269C3.83522 7.27895 3.81124 7.23099 3.81923 7.17505C3.81923 7.11911 3.83522 7.07115 3.8512 7.0232H3.83522ZM9.96509 10.9633C9.81324 11.1151 9.61344 11.195 9.39765 11.195H4.50655C4.30674 11.1631 4.11494 11.0672 3.98706 10.9073C3.85919 10.7475 3.78726 10.5477 3.80325 10.3479C3.81124 10.1481 3.90714 9.95627 4.051 9.81241C4.20285 9.67655 4.39466 9.59663 4.60245 9.59663H9.39765C9.61344 9.59663 9.81324 9.68454 9.96509 9.8284C10.1169 9.97225 10.1969 10.18 10.1969 10.3958C10.1969 10.6116 10.1089 10.8114 9.96509 10.9633Z" fill="#6A7888"/>
+</svg>
diff --git a/resources/js/common/PMColumnFilterPopoverCommonMixin.js b/resources/js/common/PMColumnFilterPopoverCommonMixin.js
index b2f6aa73ce..d68c200839 100644
--- a/resources/js/common/PMColumnFilterPopoverCommonMixin.js
+++ b/resources/js/common/PMColumnFilterPopoverCommonMixin.js
@@ -266,7 +266,7 @@ const PMColumnFilterCommonMixin = {
         this.tableHeaders[i].sortDesc = false;
       }
       for (let i in this.tableHeaders) {
-        if (this.tableHeaders[i].field === this.orderBy) {
+        if (this.orderBy.endsWith(this.tableHeaders[i].field)) {
           let sort = this.sortOrder[0].direction;
           this.tableHeaders[i].sortAsc = (sort.toLowerCase() === "asc");
           this.tableHeaders[i].sortDesc = (sort.toLowerCase() === "desc");
diff --git a/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconAsc.vue b/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconAsc.vue
index 5b8f1f8f81..b87a22d0dd 100644
--- a/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconAsc.vue
+++ b/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconAsc.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.50002 2H9.50002C9.63263 2 9.75981 1.94732 9.85358 1.85355C9.94735 1.75979 10 1.63261 10 1.5V0.5C10 0.367392 9.94735 0.240215 9.85358 0.146447C9.75981 0.0526784 9.63263 0 9.50002 0H7.50002C7.36742 0 7.24024 0.0526784 7.14647 0.146447C7.0527 0.240215 7.00002 0.367392 7.00002 0.5V1.5C7.00002 1.63261 7.0527 1.75979 7.14647 1.85355C7.24024 1.94732 7.36742 2 7.50002 2ZM7.50002 6H11.5C11.6326 6 11.7598 5.94732 11.8536 5.85355C11.9473 5.75979 12 5.63261 12 5.5V4.5C12 4.36739 11.9473 4.24021 11.8536 4.14645C11.7598 4.05268 11.6326 4 11.5 4H7.50002C7.36742 4 7.24024 4.05268 7.14647 4.14645C7.0527 4.24021 7.00002 4.36739 7.00002 4.5V5.5C7.00002 5.63261 7.0527 5.75979 7.14647 5.85355C7.24024 5.94732 7.36742 6 7.50002 6ZM15.5 12H7.50002C7.36742 12 7.24024 12.0527 7.14647 12.1464C7.0527 12.2402 7.00002 12.3674 7.00002 12.5V13.5C7.00002 13.6326 7.0527 13.7598 7.14647 13.8536C7.24024 13.9473 7.36742 14 7.50002 14H15.5C15.6326 14 15.7598 13.9473 15.8536 13.8536C15.9473 13.7598 16 13.6326 16 13.5V12.5C16 12.3674 15.9473 12.2402 15.8536 12.1464C15.7598 12.0527 15.6326 12 15.5 12ZM7.50002 10H13.5C13.6326 10 13.7598 9.94732 13.8536 9.85355C13.9473 9.75979 14 9.63261 14 9.5V8.5C14 8.36739 13.9473 8.24021 13.8536 8.14645C13.7598 8.05268 13.6326 8 13.5 8H7.50002C7.36742 8 7.24024 8.05268 7.14647 8.14645C7.0527 8.24021 7.00002 8.36739 7.00002 8.5V9.5C7.00002 9.63261 7.0527 9.75979 7.14647 9.85355C7.24024 9.94732 7.36742 10 7.50002 10ZM5.50002 10H4.00002V0.5C4.00002 0.367392 3.94735 0.240215 3.85358 0.146447C3.75981 0.0526784 3.63263 0 3.50002 0H2.50002C2.36742 0 2.24024 0.0526784 2.14647 0.146447C2.0527 0.240215 2.00002 0.367392 2.00002 0.5V10H0.500024C0.0565866 10 -0.167788 10.5387 0.147212 10.8534L2.64721 13.8534C2.74097 13.9471 2.8681 13.9998 3.00065 13.9998C3.1332 13.9998 3.26033 13.9471 3.35409 13.8534L5.85409 10.8534C6.16721 10.5394 5.9444 10 5.50002 10Z" fill="#6A7888"/>
+  <svg width="16" height="14" viewBox="0 0 16 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.50002 2H9.50002C9.63263 2 9.75981 1.94732 9.85358 1.85355C9.94735 1.75979 10 1.63261 10 1.5V0.5C10 0.367392 9.94735 0.240215 9.85358 0.146447C9.75981 0.0526784 9.63263 0 9.50002 0H7.50002C7.36742 0 7.24024 0.0526784 7.14647 0.146447C7.0527 0.240215 7.00002 0.367392 7.00002 0.5V1.5C7.00002 1.63261 7.0527 1.75979 7.14647 1.85355C7.24024 1.94732 7.36742 2 7.50002 2ZM7.50002 6H11.5C11.6326 6 11.7598 5.94732 11.8536 5.85355C11.9473 5.75979 12 5.63261 12 5.5V4.5C12 4.36739 11.9473 4.24021 11.8536 4.14645C11.7598 4.05268 11.6326 4 11.5 4H7.50002C7.36742 4 7.24024 4.05268 7.14647 4.14645C7.0527 4.24021 7.00002 4.36739 7.00002 4.5V5.5C7.00002 5.63261 7.0527 5.75979 7.14647 5.85355C7.24024 5.94732 7.36742 6 7.50002 6ZM15.5 12H7.50002C7.36742 12 7.24024 12.0527 7.14647 12.1464C7.0527 12.2402 7.00002 12.3674 7.00002 12.5V13.5C7.00002 13.6326 7.0527 13.7598 7.14647 13.8536C7.24024 13.9473 7.36742 14 7.50002 14H15.5C15.6326 14 15.7598 13.9473 15.8536 13.8536C15.9473 13.7598 16 13.6326 16 13.5V12.5C16 12.3674 15.9473 12.2402 15.8536 12.1464C15.7598 12.0527 15.6326 12 15.5 12ZM7.50002 10H13.5C13.6326 10 13.7598 9.94732 13.8536 9.85355C13.9473 9.75979 14 9.63261 14 9.5V8.5C14 8.36739 13.9473 8.24021 13.8536 8.14645C13.7598 8.05268 13.6326 8 13.5 8H7.50002C7.36742 8 7.24024 8.05268 7.14647 8.14645C7.0527 8.24021 7.00002 8.36739 7.00002 8.5V9.5C7.00002 9.63261 7.0527 9.75979 7.14647 9.85355C7.24024 9.94732 7.36742 10 7.50002 10ZM5.50002 10H4.00002V0.5C4.00002 0.367392 3.94735 0.240215 3.85358 0.146447C3.75981 0.0526784 3.63263 0 3.50002 0H2.50002C2.36742 0 2.24024 0.0526784 2.14647 0.146447C2.0527 0.240215 2.00002 0.367392 2.00002 0.5V10H0.500024C0.0565866 10 -0.167788 10.5387 0.147212 10.8534L2.64721 13.8534C2.74097 13.9471 2.8681 13.9998 3.00065 13.9998C3.1332 13.9998 3.26033 13.9471 3.35409 13.8534L5.85409 10.8534C6.16721 10.5394 5.9444 10 5.50002 10Z"/>
   </svg>
 </template>
diff --git a/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconDesc.vue b/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconDesc.vue
index 7e6adc61a1..14ff423fbf 100644
--- a/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconDesc.vue
+++ b/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconDesc.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M9.49996 13H7.49996C7.36735 13 7.24018 13.0527 7.14641 13.1464C7.05264 13.2402 6.99996 13.3674 6.99996 13.5V14.5C6.99996 14.6326 7.05264 14.7598 7.14641 14.8536C7.24018 14.9473 7.36735 15 7.49996 15H9.49996C9.63257 15 9.75975 14.9473 9.85351 14.8536C9.94728 14.7598 9.99996 14.6326 9.99996 14.5V13.5C9.99996 13.3674 9.94728 13.2402 9.85351 13.1464C9.75975 13.0527 9.63257 13 9.49996 13ZM0.499961 5H1.99996V14.5C1.99996 14.6326 2.05264 14.7598 2.14641 14.8536C2.24018 14.9473 2.36735 15 2.49996 15H3.49996C3.63257 15 3.75975 14.9473 3.85351 14.8536C3.94728 14.7598 3.99996 14.6326 3.99996 14.5V5H5.49996C5.94402 5 6.16809 4.46125 5.8534 4.14656L3.3534 1.14656C3.25964 1.05287 3.13251 1.00023 2.99996 1.00023C2.86741 1.00023 2.74028 1.05287 2.64652 1.14656L0.146524 4.14656C-0.167226 4.46063 0.0552737 5 0.499961 5ZM13.5 5H7.49996C7.36735 5 7.24018 5.05268 7.14641 5.14645C7.05264 5.24021 6.99996 5.36739 6.99996 5.5V6.5C6.99996 6.63261 7.05264 6.75979 7.14641 6.85355C7.24018 6.94732 7.36735 7 7.49996 7H13.5C13.6326 7 13.7597 6.94732 13.8535 6.85355C13.9473 6.75979 14 6.63261 14 6.5V5.5C14 5.36739 13.9473 5.24021 13.8535 5.14645C13.7597 5.05268 13.6326 5 13.5 5ZM11.5 9H7.49996C7.36735 9 7.24018 9.05268 7.14641 9.14645C7.05264 9.24021 6.99996 9.36739 6.99996 9.5V10.5C6.99996 10.6326 7.05264 10.7598 7.14641 10.8536C7.24018 10.9473 7.36735 11 7.49996 11H11.5C11.6326 11 11.7597 10.9473 11.8535 10.8536C11.9473 10.7598 12 10.6326 12 10.5V9.5C12 9.36739 11.9473 9.24021 11.8535 9.14645C11.7597 9.05268 11.6326 9 11.5 9ZM15.5 1H7.49996C7.36735 1 7.24018 1.05268 7.14641 1.14645C7.05264 1.24021 6.99996 1.36739 6.99996 1.5V2.5C6.99996 2.63261 7.05264 2.75979 7.14641 2.85355C7.24018 2.94732 7.36735 3 7.49996 3H15.5C15.6326 3 15.7597 2.94732 15.8535 2.85355C15.9473 2.75979 16 2.63261 16 2.5V1.5C16 1.36739 15.9473 1.24021 15.8535 1.14645C15.7597 1.05268 15.6326 1 15.5 1Z" fill="#6A7888"/>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.49996 13H7.49996C7.36735 13 7.24018 13.0527 7.14641 13.1464C7.05264 13.2402 6.99996 13.3674 6.99996 13.5V14.5C6.99996 14.6326 7.05264 14.7598 7.14641 14.8536C7.24018 14.9473 7.36735 15 7.49996 15H9.49996C9.63257 15 9.75975 14.9473 9.85351 14.8536C9.94728 14.7598 9.99996 14.6326 9.99996 14.5V13.5C9.99996 13.3674 9.94728 13.2402 9.85351 13.1464C9.75975 13.0527 9.63257 13 9.49996 13ZM0.499961 5H1.99996V14.5C1.99996 14.6326 2.05264 14.7598 2.14641 14.8536C2.24018 14.9473 2.36735 15 2.49996 15H3.49996C3.63257 15 3.75975 14.9473 3.85351 14.8536C3.94728 14.7598 3.99996 14.6326 3.99996 14.5V5H5.49996C5.94402 5 6.16809 4.46125 5.8534 4.14656L3.3534 1.14656C3.25964 1.05287 3.13251 1.00023 2.99996 1.00023C2.86741 1.00023 2.74028 1.05287 2.64652 1.14656L0.146524 4.14656C-0.167226 4.46063 0.0552737 5 0.499961 5ZM13.5 5H7.49996C7.36735 5 7.24018 5.05268 7.14641 5.14645C7.05264 5.24021 6.99996 5.36739 6.99996 5.5V6.5C6.99996 6.63261 7.05264 6.75979 7.14641 6.85355C7.24018 6.94732 7.36735 7 7.49996 7H13.5C13.6326 7 13.7597 6.94732 13.8535 6.85355C13.9473 6.75979 14 6.63261 14 6.5V5.5C14 5.36739 13.9473 5.24021 13.8535 5.14645C13.7597 5.05268 13.6326 5 13.5 5ZM11.5 9H7.49996C7.36735 9 7.24018 9.05268 7.14641 9.14645C7.05264 9.24021 6.99996 9.36739 6.99996 9.5V10.5C6.99996 10.6326 7.05264 10.7598 7.14641 10.8536C7.24018 10.9473 7.36735 11 7.49996 11H11.5C11.6326 11 11.7597 10.9473 11.8535 10.8536C11.9473 10.7598 12 10.6326 12 10.5V9.5C12 9.36739 11.9473 9.24021 11.8535 9.14645C11.7597 9.05268 11.6326 9 11.5 9ZM15.5 1H7.49996C7.36735 1 7.24018 1.05268 7.14641 1.14645C7.05264 1.24021 6.99996 1.36739 6.99996 1.5V2.5C6.99996 2.63261 7.05264 2.75979 7.14641 2.85355C7.24018 2.94732 7.36735 3 7.49996 3H15.5C15.6326 3 15.7597 2.94732 15.8535 2.85355C15.9473 2.75979 16 2.63261 16 2.5V1.5C16 1.36739 15.9473 1.24021 15.8535 1.14645C15.7597 1.05268 15.6326 1 15.5 1Z"/>
   </svg>
 </template>
diff --git a/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconThreeDots.vue b/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconThreeDots.vue
index f8348637a3..4b01a48d1b 100644
--- a/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconThreeDots.vue
+++ b/resources/js/components/PMColumnFilterPopover/PMColumnFilterIconThreeDots.vue
@@ -1,5 +1,27 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
-    <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
-  </svg>
+  <span>
+    <svg v-if="!columnSortAsc && !columnSortDesc && !filterApplied" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
+      <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
+    </svg>
+    <PMColumnFilterIconAsc v-if="columnSortAsc"></PMColumnFilterIconAsc>
+    <PMColumnFilterIconDesc v-if="columnSortDesc"></PMColumnFilterIconDesc>
+    <i v-if="filterApplied" class="fas fa-filter"></i>
+  </span>
 </template>
+<script>
+
+import PMColumnFilterIconAsc from './PMColumnFilterIconAsc.vue';
+import PMColumnFilterIconDesc from './PMColumnFilterIconDesc.vue';
+
+export default {
+  components: {
+    PMColumnFilterIconAsc,
+    PMColumnFilterIconDesc
+  },
+  props: [
+    "columnSortAsc",
+    "columnSortDesc",
+    "filterApplied",
+  ],
+};
+</script>
diff --git a/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue b/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue
index 30577c932b..a7acaa5bab 100644
--- a/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue
+++ b/resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue
@@ -4,7 +4,11 @@
               variant="link"
               size="sm"
               class="pm-filter-popover-button">
-      <PMColumnFilterIconThreeDots></PMColumnFilterIconThreeDots>
+      <PMColumnFilterIconThreeDots
+        :columnSortAsc="columnSortAsc"
+        :columnSortDesc="columnSortDesc"
+        :filterApplied="filterApplied"
+      />
     </b-button>
     <b-popover :container="container"
                :boundary="boundary"
@@ -40,9 +44,24 @@
   export default {
     components: {
       PMColumnFilterForm,
-      PMColumnFilterIconThreeDots
+      PMColumnFilterIconThreeDots,
     },
-    props: ["container", "boundary", "id", "type", "value", "format", "formatRange", "operators", "viewConfig", "sort", "hideSortingButtons"],
+    props: [
+      "container",
+      "boundary",
+      "id",
+      "type",
+      "value",
+      "format",
+      "formatRange",
+      "operators",
+      "viewConfig",
+      "sort",
+      "hideSortingButtons",
+      "columnSortAsc",
+      "columnSortDesc",
+      "filterApplied",
+    ],
     data() {
       return {
         popoverShow: false
diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
index 3889be6e99..5104c6a41c 100644
--- a/resources/js/components/shared/FilterTable.vue
+++ b/resources/js/components/shared/FilterTable.vue
@@ -21,7 +21,8 @@
             :id="`${tableName}-column-${index}`"
             :key="index"
             class="pm-table-ellipsis-column"
-            :class="{ 'pm-table-filter-applied': column.filterApplied }"
+            :class="{ 'pm-table-filter-applied': column.filterApplied || column.sortAsc || column.sortDesc }"
+            :style="{ width: column.fixed_width + 'px' }"
           >
             <div
               class="pm-table-column-header"
@@ -37,7 +38,8 @@
             <div
               v-if="index !== visibleHeaders.length - 1"
               class="pm-table-column-resizer"
-              @mousedown="startResize($event, index)"
+              :class="{ 'resizable': column.resizable === undefined || column.resizable }"
+              @mousedown="column.resizable === undefined || column.resizable ? startResize($event, index) : null"
             />
             <b-tooltip
               v-if="column.tooltip"
@@ -74,6 +76,7 @@
           <slot :name="`row-${rowIndex}`">
             <td
               v-for="(header, index) in visibleHeaders"
+              :class="{ 'pm-table-filter-applied-tbody': column.sortAsc || column.sortDesc }"
               :key="index"
             >
               <template v-if="containsHTML(getNestedPropertyValue(row, header))">
@@ -301,9 +304,12 @@ export default {
   transform: translateY(-50%);
   height: 85%;
   width: 10px;
-  cursor: col-resize;
+  cursor: default;
   border-right: 1px solid rgba(0, 0, 0, 0.125);
 }
+.pm-table-column-resizer.resizable {
+  cursor: col-resize;
+}
 .pm-table-filter {
   width: 100%;
   max-height: 400px;
@@ -321,12 +327,17 @@ export default {
   height: 56px;
 }
 .pm-table-filter th:hover {
-  background-color: #FAFBFC;
+  background-color: #F2F8FE;
   color: #1572C2;
 }
 .pm-table-filter tbody tr:hover {
-  background-color: #FAFBFC;
-  color: #1572C2;
+  background-color: #EFF5FB;
+}
+.pm-table-filter tbody tr a {
+  color: #566877;
+}
+.pm-table-filter tbody tr a:hover {
+  color: #1990FF;
 }
 .pm-table-filter thead {
   position: sticky;
@@ -358,6 +369,10 @@ export default {
   opacity: 0;
   visibility: hidden;
 }
+.pm-table-filter-applied .pm-table-filter-button {
+  opacity: 1;
+  visibility: visible;
+}
 .pm-table-ellipsis-column:hover .pm-table-filter-button {
   opacity: 1;
   visibility: visible;
@@ -401,26 +416,38 @@ export default {
   color: #1572C2;
   background-color: #F2F8FE !important;
 }
+.pm-table-filter-applied-tbody {
+  background-color: rgba(247, 249, 251, 1) !important;
+}
 .pm-table-unread-row {
-  font-weight: bold;
+  background-color: #FFFDEA;
 }
 .status-success {
-  background-color: rgba(78, 160, 117, 0.2);
-  color: rgba(78, 160, 117, 1);
+  background-color: rgba(200, 240, 207, 1);
+  color: rgba(0, 0, 0, 0.75);
   width: 100px;
   border-radius: 5px;
+  padding: 7px;
 }
 .status-danger {
-  background-color:rgba(237, 72, 88, 0.2);
-  color: rgba(237, 72, 88, 1);
+  background-color:rgba(255, 199, 199, 1);
+  color: rgba(0, 0, 0, 0.75);
   width: 100px;
   border-radius: 5px;
+  padding: 7px;
 }
 .status-primary {
-  background: rgba(21, 114, 194, 0.2);
-  color: rgba(21, 114, 194, 1);
+  background: rgba(184, 220, 247, 1);
+  color: rgba(0, 0, 0, 0.75);
   width: 100px;
   border-radius: 5px;
+  padding: 7px;
+}
+.status-warning {
+  background: rgba(249, 232, 195, 1);
+  color: rgba(0, 0, 0, 0.75);
+  border-radius: 5px;
+  padding: 7px;
 }
 @-moz-document url-prefix() {
   .pm-table-truncate {
diff --git a/resources/js/requests/components/RequestsListing.vue b/resources/js/requests/components/RequestsListing.vue
index fa76b09f36..10e93be2f8 100644
--- a/resources/js/requests/components/RequestsListing.vue
+++ b/resources/js/requests/components/RequestsListing.vue
@@ -30,6 +30,9 @@
                                    :container="''"
                                    :boundary="'viewport'"
                                    :hideSortingButtons="column.hideSortingButtons"
+                                   :columnSortAsc="column.sortAsc"
+                                   :columnSortDesc="column.sortDesc"
+                                   :filterApplied="column.filterApplied"
                                    @onChangeSort="onChangeSort($event, column.field)"
                                    @onApply="onApply($event, column.field)"
                                    @onClear="onClear(column.field)"
@@ -450,6 +453,9 @@ export default {
               cancelToken: new CancelToken((c) => {
                 this.cancelToken = c;
               }),
+              headers: {
+                'Cache-Control': 'no-cache',
+              }
             },
           )
           .then((response) => {
diff --git a/resources/js/tasks/components/ListMixin.js b/resources/js/tasks/components/ListMixin.js
index 80967cb78f..7885cb3396 100644
--- a/resources/js/tasks/components/ListMixin.js
+++ b/resources/js/tasks/components/ListMixin.js
@@ -84,7 +84,10 @@ const ListMixin = {
               advancedFilter +
               this.columnsQuery,
 
-              { dataLoadingId: this.dataLoadingId }
+              {
+                dataLoadingId: this.dataLoadingId,
+                headers: { 'Cache-Control': 'no-cache'}
+              },
           )
           .then((response) => {
             this.data = this.transform(response.data);
diff --git a/resources/js/tasks/components/TaskTooltip.vue b/resources/js/tasks/components/TaskTooltip.vue
index 577ceb23c9..8f2cbc1413 100644
--- a/resources/js/tasks/components/TaskTooltip.vue
+++ b/resources/js/tasks/components/TaskTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :style="{ top: (position.y) + 'px', right:  '50px' }" class="task-tooltip">
+    <div :style="{ top: (position.y) + 'px', right: '45px' }" class="task-tooltip">
         <slot name="task-tooltip-body">
         </slot>
     </div>
@@ -18,7 +18,7 @@ export default {
 <style scoped>
 .task-tooltip {
   position: absolute;
-  padding: 8px;
+  padding: 3px 5px;
   border-radius: 4px;
   background-color: #FFFFFF;
   color: #566877;
diff --git a/resources/js/tasks/components/TasksList.vue b/resources/js/tasks/components/TasksList.vue
index b27f874437..955e406d6e 100644
--- a/resources/js/tasks/components/TasksList.vue
+++ b/resources/js/tasks/components/TasksList.vue
@@ -20,8 +20,6 @@
           v-for="(column, index) in visibleHeaders"
           v-slot:[column.field]
         >
-          <PMColumnFilterIconAsc v-if="column.sortAsc"></PMColumnFilterIconAsc>
-          <PMColumnFilterIconDesc v-if="column.sortDesc"></PMColumnFilterIconDesc>
           <div
             :key="index"
             style="display: inline-block"
@@ -53,6 +51,9 @@
             :viewConfig="getViewConfigFilter()"
             :container="''"
             :boundary="'viewport'"
+            :columnSortAsc="column.sortAsc"
+            :columnSortDesc="column.sortDesc"
+            :filterApplied="column.filterApplied"
             @onChangeSort="onChangeSort($event, column.field)"
             @onApply="onApply($event, column.field)"
             @onClear="onClear(column.field)"
@@ -67,6 +68,7 @@
         >
           <td
             v-for="(header, colIndex) in visibleHeaders"
+            :class="{ 'pm-table-filter-applied-tbody': header.sortAsc || header.sortDesc }"
             :key="colIndex"
           >
             <template v-if="containsHTML(getNestedPropertyValue(row, header))">
@@ -157,26 +159,38 @@
             @mouseover="clearHideTimer"
             @mouseleave="hideTooltip"
           >
-          <slot name="tooltip" v-bind:tooltipRowData="tooltipRowData" v-bind:previewTasks="previewTasks">
-            <span>
-              <b-button
-                v-if="!verifyURL('saved-searches')"
-                class="icon-button"
-                :aria-label="$t('Quick fill Preview')"
-                variant="light"
-                @click="previewTasks(tooltipRowData)"
-              >
-                <i class="fas fa-eye"/>
-              </b-button>
-            </span>
-            <ellipsis-menu
-              :actions="actions"
-              :data="tooltipRowData"
-              :divider="false"
-              @show="handleShowEllipsis"
-              @hide="handleHideEllipsis"
-            />
-          </slot>
+            <slot name="tooltip" v-bind:tooltipRowData="tooltipRowData" v-bind:previewTasks="previewTasks">
+              <span v-for="(item, index) in taskTooltipButtons" :key="index">
+                <span>
+                  <b-button
+                    v-if="!verifyURL('saved-searches') || item.savedSearch"
+                    :id="item.id"
+                    class="icon-button"
+                    :aria-label="item.title"
+                    variant="light"
+                    @click="item.click(tooltipRowData)"
+                  >
+                    <i v-if="item.icon" :class="item.icon" />
+                    <img
+                      v-else-if="item.imgSrc"
+                      :src="item.imgSrc"
+                      :alt="$t('No Image')"
+                    >
+                  </b-button>
+                </span>
+                <span
+                  v-if="(!verifyURL('saved-searches') || item.savedSearch) && item.separator"
+                  class="vertical-separator"
+                />
+                <b-tooltip
+                  :target="item.id"
+                  :title="item.title"
+                  custom-class="task-hover-tooltip"
+                  placement="bottom"
+                  :delay="0"
+                />
+              </span>
+            </slot>
           </div>
         </template>
       </task-tooltip>
@@ -300,6 +314,33 @@ export default {
     return {
       tooltipFromButton: "",
       selectedRow: 0,
+      taskTooltipButtons: [
+        {
+          id: "openPreviewButton",
+          ariaLabel: this.$t("Quick fill Preview"),
+          click: this.previewTasks,
+          icon: "fas fa-eye",
+          title: "Preview",
+          separator: true,
+          savedSearch: false,
+        },
+        {
+          id: "openCaseButton",
+          title: this.$t("Open Case"),
+          click: this.redirectToRequest,
+          imgSrc: "/img/smartinbox-images/open-case.svg",
+          separator: true,
+          savedSearch: true,
+        },
+        {
+          id: "openTaskButton",
+          title: this.$t("Open Task"),
+          click: this.redirectToTask,
+          icon: "fas fa-external-link-alt",
+          separator: false,
+          savedSearch: true,
+        },
+      ],
       actions: [
         {
           value: "edit",
@@ -429,14 +470,21 @@ export default {
     },
     formatCaseNumber(processRequest, record) {
       return `
-      <a href="${this.openRequest(processRequest, 1)}"
+      <a href="${this.openTask(record, 1)}"
          class="text-nowrap">
          # ${processRequest.case_number || record.case_number}
       </a>`;
     },
     formatCaseTitle(processRequest, record) {
+      let draftBadge = "";
+      if (record.draft && record.status !== "CLOSED") {
+        draftBadge = `<span class="badge badge-warning status-warning">
+          ${this.$t("Draft")}
+        </span>`;
+      }
       return `
-      <a href="${this.openRequest(processRequest, 1)}"
+      ${draftBadge}
+      <a href="${this.openTask(record, 1)}"
          class="text-nowrap">
          ${
            processRequest.case_title_formatted ||
@@ -470,7 +518,8 @@ export default {
           field: "case_number",
           sortable: true,
           default: true,
-          width: 80,
+          width: 84,
+          fixed_width: 84,
           filter_subject: {
             type: "Relationship",
             value: "processRequest.case_number",
@@ -483,7 +532,8 @@ export default {
           name: "__slot:case_number",
           sortable: true,
           default: true,
-          width: 220,
+          width: 419,
+          fixed_width: 419,
           truncate: true,
           filter_subject: {
             type: "Relationship",
@@ -496,27 +546,16 @@ export default {
           field: "is_priority",
           sortable: false,
           default: true,
-          width: 40,
-        },
-        {
-          label: "Process",
-          field: "process",
-          sortable: true,
-          default: true,
-          width: 140,
-          truncate: true,
-          filter_subject: {
-            type: "Relationship",
-            value: "processRequest.name",
-          },
-          order_column: "process_requests.name",
+          fixed_width: 20,
+          resizable: false,
         },
         {
           label: "Task",
           field: "element_name",
           sortable: true,
           default: true,
-          width: 140,
+          width: 135,
+          fixed_width: 135,
           truncate: true,
           filter_subject: { value: "element_name" },
           order_column: "element_name",
@@ -526,7 +565,8 @@ export default {
           field: "status",
           sortable: true,
           default: true,
-          width: 100,
+          width: 183,
+          fixed_width: 183,
           filter_subject: { type: "Status" },
         },
         {
@@ -535,7 +575,8 @@ export default {
           format: "datetime",
           sortable: true,
           default: true,
-          width: 140,
+          width: 200,
+          fixed_width: 200,
         },
         {
           label: "Draft",
@@ -553,9 +594,16 @@ export default {
           format: "datetime",
           sortable: true,
           default: true,
-          width: 140,
+          width: 200,
+          fixed_width: 200,
         });
       }
+      columns.push({
+        label: "",
+        field: "options",
+        sortable: false,
+        width: 180,
+      });
       return columns;
     },
     onAction(action, rowData, index) {
@@ -716,9 +764,14 @@ export default {
       }
       this.isTooltipVisible = false;
     },
+    removeBadgeSpan(html) {
+      const badgeSpanRegex = /<span class="badge badge-warning status-warning">([^<]+)<\/span>/g;
+      return html.replace(badgeSpanRegex, "");
+    },
     sanitizeTooltip(html) {
       let cleanHtml = html.replace(/<script(.*?)>[\s\S]*?<\/script>/gi, "");
       cleanHtml = cleanHtml.replace(/<style(.*?)>[\s\S]*?<\/style>/gi, "");
+      cleanHtml = this.removeBadgeSpan(cleanHtml);
       cleanHtml = cleanHtml.replace(
         /<(?!img|input|meta|time|button|select|textarea|datalist|progress|meter)[^>]*>/gi,
         ""
@@ -777,7 +830,13 @@ export default {
     },
     onWatchShowPreview(value) {
       this.$emit('onWatchShowPreview', value);
-    }
+    },
+    redirectToTask(task) {
+      window.location.href = this.openTask(task);
+    },
+    redirectToRequest(task) {
+      window.location.href = this.openRequest(task.process_request);
+    },
   },
 };
 </script>
@@ -788,15 +847,17 @@ export default {
 }
 .due-danger {
   background-color: rgba(237, 72, 88, 0.2);
-  color: rgba(237, 72, 88, 1);
-  font-weight: 600;
+  color: rgba(0, 0, 0, 0.75);
+  font-weight: 700;
   border-radius: 5px;
+  padding: 7px;
 }
 .due-primary {
-  background: rgba(205, 221, 238, 1);
-  color: rgba(86, 104, 119, 1);
-  font-weight: 600;
+  background: rgba(224, 229, 233, 1);
+  color: rgba(0, 0, 0, 0.75);
+  font-weight: 700;
   border-radius: 5px;
+  padding: 7px;
 }
 .btn-this-data {
   background-color: #1572c2;
@@ -808,6 +869,43 @@ export default {
   color: #888;
   width: 32px;
   height: 32px;
+  border: 0;
+}
+.vertical-separator {
+  display: inline-block;
+  width: 1px;
+  height: 24px;
+  background-color: #ccc; /* Color del separador */
+  margin: 0 1px; /* Espaciado alrededor del separador */
+  vertical-align: middle; /* Alinear verticalmente con los botones */
+}
+.btn-light:hover {
+  background-color: #EDF1F6;
+  color: #888;
+}
+.task-hover-tooltip {
+  opacity: 1 !important;
+}
+.task-hover-tooltip .tooltip-inner {
+  background-color: #F2F6F7;
+  color: #556271;
+  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3);
+  border-radius: 7px;
+  padding: 9px 12px 9px 12px;
+  border: 1px solid #CDDDEE
+}
+.task-hover-tooltip .arrow::before {
+  border-bottom-color: #CDDDEE !important;
+}
+.task-hover-tooltip .arrow::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  border-width: 0 .4rem .4rem;
+  transform: translateY(3px);
+  border-color: transparent;
+  border-style: solid;
+  border-bottom-color: #F2F6F7;
 }
 </style>
 <style lang="scss" scoped>