diff --git a/resources/img/pagination-images/first.svg b/resources/img/pagination-images/first.svg
new file mode 100644
index 0000000000..7399ee56fa
--- /dev/null
+++ b/resources/img/pagination-images/first.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.35967 11.7681C8.6565 12.015 9.07204 12.0712 9.42511 11.9056C9.77817 11.74 10 11.3869 10 10.9995V1.00134C10 0.613911 9.77504 0.260851 9.42511 0.0952558C9.07517 -0.070339 8.65962 -0.0172236 8.35967 0.232731L2.36077 5.23182L2.00146 5.53176V1.00134C2.00146 0.448316 1.55467 0.00152292 1.00164 0.00152292C0.44862 0.00152292 0.00182629 0.448316 0.00182629 1.00134V10.9995C0.00182629 11.5525 0.44862 11.9993 1.00164 11.9993C1.55467 11.9993 2.00146 11.5525 2.00146 10.9995V6.46909L2.36077 6.76904L8.35967 11.7681Z" fill="#556271"/>
+</svg>
diff --git a/resources/img/pagination-images/last.svg b/resources/img/pagination-images/last.svg
new file mode 100644
index 0000000000..621fd4a98e
--- /dev/null
+++ b/resources/img/pagination-images/last.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.64033 11.7681C2.3435 12.015 1.92796 12.0712 1.57489 11.9056C1.22183 11.74 1 11.3869 1 10.9995V1.00134C1 0.613911 1.22496 0.260851 1.57489 0.0952558C1.92483 -0.070339 2.34038 -0.0172236 2.64033 0.232731L8.63923 5.23182L8.99854 5.53176V1.00134C8.99854 0.448316 9.44533 0.00152292 9.99836 0.00152292C10.5514 0.00152292 10.9982 0.448316 10.9982 1.00134V10.9995C10.9982 11.5525 10.5514 11.9993 9.99836 11.9993C9.44533 11.9993 8.99854 11.5525 8.99854 10.9995V6.46909L8.63923 6.76904L2.64033 11.7681Z" fill="#556271"/>
+</svg>
diff --git a/resources/img/pagination-images/next.svg b/resources/img/pagination-images/next.svg
new file mode 100644
index 0000000000..99343901d6
--- /dev/null
+++ b/resources/img/pagination-images/next.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.08203 5.16524L2.151 0.230924C1.50566 -0.305821 0.527344 0.152909 0.527344 0.992042V11.008C0.527344 11.8471 1.50566 12.3058 2.151 11.7691L8.08235 6.83476C8.60411 6.40069 8.6038 5.59931 8.08203 5.16524Z" fill="#556271"/>
+</svg>
diff --git a/resources/img/pagination-images/previous.svg b/resources/img/pagination-images/previous.svg
new file mode 100644
index 0000000000..499314c292
--- /dev/null
+++ b/resources/img/pagination-images/previous.svg
@@ -0,0 +1,3 @@
+<svg width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.917967 5.16524L6.849 0.230924C7.49434 -0.305821 8.47266 0.152909 8.47266 0.992042V11.008C8.47266 11.8471 7.49434 12.3058 6.849 11.7691L0.917655 6.83476C0.395888 6.40069 0.3962 5.59931 0.917967 5.16524Z" fill="#556271"/>
+</svg>
diff --git a/resources/js/components/shared/FilterTable.vue b/resources/js/components/shared/FilterTable.vue
index 5104c6a41c..91728576ba 100644
--- a/resources/js/components/shared/FilterTable.vue
+++ b/resources/js/components/shared/FilterTable.vue
@@ -38,6 +38,7 @@
             <div
               v-if="index !== visibleHeaders.length - 1"
               class="pm-table-column-resizer"
+              @dblclick="resetSize(index)"
               :class="{ 'resizable': column.resizable === undefined || column.resizable }"
               @mousedown="column.resizable === undefined || column.resizable ? startResize($event, index) : null"
             />
@@ -183,6 +184,7 @@ export default {
       startX: 0,
       startWidth: 0,
       resizingColumnIndex: -1,
+      originalWidths: [],
     };
   },
   computed: {
@@ -215,6 +217,9 @@ export default {
     },
     calculateColumnWidth(widthAdjust = 1) {
       this.visibleHeaders.forEach((headerColumn, index) => {
+        if (!this.originalWidths[index]) {
+          this.originalWidths[index] = headerColumn.width || this.calculateContent(index);
+        }
         if (this.calculateContent(index) !== 0) {
           headerColumn.width = (this.calculateContent(index) * widthAdjust) - 32;
         }
@@ -253,6 +258,11 @@ export default {
         this.resizingColumnIndex = -1;
       }
     },
+    resetSize(index) {
+      if (this.originalWidths[index]) {
+        this.visibleHeaders[index].width = this.originalWidths[index];
+      }
+    },
     handleRowClick(row, event) {
       this.$emit("table-row-click", row, event);
     },
@@ -282,8 +292,6 @@ export default {
   border-right: 1px solid rgba(0, 0, 0, 0.125);
   border-bottom: 1px solid rgba(0, 0, 0, 0.125);
   border-radius: 5px;
-  scrollbar-width: 8px;
-  scrollbar-color: #6C757D;
   max-height: calc(100vh - 150px);
 }
 
@@ -456,14 +464,6 @@ export default {
     white-space: nowrap;
   }
 }
-.pm-table-container::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.pm-table-container::-webkit-scrollbar-thumb {
-  background-color: #6C757D;
-  border-radius: 20px;
-}
 .ellipsis-dropdown-main ul.dropdown-menu.dropdown-menu-right.show {
   max-height: 250px;
   overflow-y: auto;
diff --git a/resources/js/components/shared/PaginationTable.vue b/resources/js/components/shared/PaginationTable.vue
index 0323ebb1cf..3c2dd9a5cc 100644
--- a/resources/js/components/shared/PaginationTable.vue
+++ b/resources/js/components/shared/PaginationTable.vue
@@ -1,29 +1,51 @@
 <template>
   <div class="pagination">
-    <button
+    <b-button
       :disabled="currentPage === 1"
       class="pagination-button"
+      variant="light"
+      @click="firstPage"
+    >
+      <img src="/img/pagination-images/first.svg" :alt="$t('No Image')">
+    </b-button>
+    <b-button
+      :disabled="currentPage === 1"
+      class="pagination-button"
+      variant="light"
       @click="previousPage"
     >
-      <strong>&lt;</strong>
-    </button>
+      <img src="/img/pagination-images/previous.svg" :alt="$t('No Image')">
+    </b-button>
 
     <input
       ref="pageInput"
       v-model="pageInput"
       type="text"
       :placeholder="pageInputPlaceholder"
-      class="pagination-button pagination-input"
+      class="pagination-input"
       @keyup.enter="redirectPage(pageInput)"
     >
 
-    <button
+    <span class="pagination-total">
+      of {{ totalPageCount }}
+    </span>
+
+    <b-button
       :disabled="currentPage >= totalPageCount"
       class="pagination-button"
+      variant="light"
       @click="nextPage"
     >
-      <strong>&gt;</strong>
-    </button>
+      <img src="/img/pagination-images/next.svg" :alt="$t('No Image')">
+    </b-button>
+    <b-button
+      :disabled="currentPage >= totalPageCount"
+      class="pagination-button"
+      variant="light"
+      @click="lastPage"
+    >
+      <img src="/img/pagination-images/last.svg" :alt="$t('No Image')">
+    </b-button>
     <span class="pagination-total">
       {{ totalItems }}
     </span>
@@ -113,7 +135,7 @@ export default {
       return `${this.meta.per_page} per Page`;
     },
     pageInputPlaceholder() {
-      return `${this.currentPage}-${this.totalPageCount}`;
+      return `${this.currentPage}`;
     },
   },
   watch: {
@@ -132,11 +154,17 @@ export default {
         this.goToPage(this.currentPage - 1);
       }
     },
-    nextPage() {
-      if (this.currentPage < this.totalPageCount) {
-        this.goToPage(this.currentPage + 1);
+    firstPage() {
+      if (this.currentPage > 1) {
+        this.goToPage(1);
       }
     },
+    nextPage() {
+      this.goToPage(this.currentPage + 1);
+    },
+    lastPage() {
+      this.goToPage(this.totalPageCount);
+    },
     goToPage(page) {
       this.$emit("page-change", page);
     },
@@ -176,21 +204,30 @@ export default {
   align-items: center;
   margin-top: 20px;
   font-weight: 400;
-  font-size: 15px;
-  color: #5C5C63;
+  font-size: 16px;
+  color: #556271;
+  gap: 8px;
 }
 .pagination-button {
-  background-color: #FFFFFF;
-  border: 1px solid #CDDDEE;
-  border-radius: 8px;
-  padding: 5px 10px;
-  color: #5C5C63;
-  margin-right: 8px;
-  font-weight: 400;
-  font-size: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  border-radius: 4px;
+  padding: 8px;
+  width: 32px;
+  height:32px;
+}
+.pagination-button:focus {
+  box-shadow: 0px 0px 0px 3px rgba(72, 145, 255, 0.4);
+}
+.btn.disabled, .btn:disabled {
+  opacity: 0.5;
 }
 .pagination-button:hover {
-  background-color: #FAFBFC;
+  background-color: #EBEEF2;
+}
+.btn.disabled:hover {
+  background-color: transparent;
 }
 .pagination-current-page {
     color: #1572C2;
@@ -198,6 +235,7 @@ export default {
 }
 .pagination-total {
   margin-left: 10px;
+  padding: 0px 8px 0px 8px;
 }
 .pagination-dropup {
   font-weight: 400;
@@ -213,6 +251,13 @@ export default {
   font-size: 14.5px;
   color: #5C5C63;
 }
+.pagination-input {
+  border: solid 1px;
+  border-radius: 4px;
+  width: 44px;
+  height: 32;
+  border-color: #CDDDEE;
+}
 .pagination-input::placeholder {
   text-align: center;
 }
diff --git a/resources/sass/_scrollbar.scss b/resources/sass/_scrollbar.scss
index 4be0f570e2..27bab475b2 100644
--- a/resources/sass/_scrollbar.scss
+++ b/resources/sass/_scrollbar.scss
@@ -1,16 +1,18 @@
 /* Works on Firefox */
 * {
   scrollbar-width: thin;
-  scrollbar-color: #6A7888 #f7f9fb;
+  scrollbar-color: rgba(73, 94, 109, 0.5) transparent;
 }
 /* Works on Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
   width: 8px;
+  height: 8px;
 }
 *::-webkit-scrollbar-track {
-  background: linear-gradient(0deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.60) 100%), var(--icons-buttons-inter, #f7f9fb);
+  background-color: transparent;
+  border-radius: 4px;
 }
 *::-webkit-scrollbar-thumb {
-  background-color: #6A7888;
+  background-color: rgba(73, 94, 109, 0.5);
   border-radius: 4px;
 }
diff --git a/webpack.mix.js b/webpack.mix.js
index b9343235ac..cac61838c5 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -57,6 +57,7 @@ mix
   .copy("resources/img/launchpad-images/*", "public/img/launchpad-images")
   .copy("resources/img/launchpad-images/icons/*", "public/img/launchpad-images/icons")
   .copy("resources/img/smartinbox-images/*", "public/img/smartinbox-images")
+  .copy("resources/img/pagination-images/*", "public/img/pagination-images")
   .copy("resources/img/script_lang/*", "public/img/script_lang")
   .copy("node_modules/snapsvg/dist/snap.svg.js", "public/js")
   .copy("resources/js/components/CustomActions.vue", "public/js")