diff --git a/eslint.config.js b/eslint.config.js
index ca3e08bb..fbf9b8b2 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -48,6 +48,7 @@ export default typescriptEslint.config(
         rules: {
             'vue/require-default-prop': 'off',
             'vue/attribute-hyphenation': 'off',
+            'vue/v-on-event-hyphenation': 'off',
             'vue/multi-word-component-names': 'off',
             'vue/block-lang': 'off',
             '@typescript-eslint/no-explicit-any': 'off',
diff --git a/resources/js/Composables/useLazyDataTable.ts b/resources/js/Composables/useLazyDataTable.ts
index c709d9cd..6786bc12 100644
--- a/resources/js/Composables/useLazyDataTable.ts
+++ b/resources/js/Composables/useLazyDataTable.ts
@@ -1,14 +1,17 @@
 import { usePaginatedData } from './usePaginatedData';
-import * as PrimeVue from '@/types/primevue';
+import cloneDeep from 'lodash-es/cloneDeep';
+import {
+    DataTableFilterMetaData,
+    DataTableFilterEvent,
+    DataTableSortEvent,
+} from 'primevue';
+import { PrimeVueDataFilters } from '@/types';
 
 export function useLazyDataTable(
-    initialFilters: PrimeVue.PaginatedDataFilters = {},
+    initialFilters: PrimeVueDataFilters = {},
     only: string[] = ['request'],
     initialsRows: number = 20
 ) {
-    const defaultFilters = initialFilters;
-    const defaultRows = initialsRows;
-
     const {
         processing,
         filters,
@@ -36,19 +39,29 @@ export function useLazyDataTable(
      * "Override" parent composable function
      * Event driven filtering rather than reactive state
      */
-    function filter(event: { filters: PrimeVue.PaginatedDataFilters }) {
+    function filter(event: DataTableFilterEvent) {
         pagination.value.page = 1;
-        filters.value = { ...event.filters };
+        const newFilters: PrimeVueDataFilters = {};
+        Object.entries(event.filters).forEach(([key, rawFilter]) => {
+            if (
+                rawFilter &&
+                typeof rawFilter === 'object' &&
+                'matchMode' in rawFilter
+            ) {
+                newFilters[key] = rawFilter as DataTableFilterMetaData;
+            }
+        });
+        filters.value = newFilters;
         parseEventFilterValues();
         fetchData().then(() => {
             scrollToTop();
         });
     }
 
-    function sort(event: PrimeVue.SortEvent) {
+    function sort(event: DataTableSortEvent) {
         pagination.value.page = 1;
-        sorting.value.field = event.sortField;
-        sorting.value.order = event.sortOrder;
+        sorting.value.field = String(event.sortField);
+        sorting.value.order = event.sortOrder || 1;
         fetchData().then(() => {
             scrollToTop();
         });
@@ -59,6 +72,7 @@ export function useLazyDataTable(
      * usePaginatedData() resets sorting.value state as a new object, this will not work for DataTable's
      */
     function reset() {
+        const defaultFilters = cloneDeep(initialFilters);
         Object.keys(defaultFilters).forEach((key) => {
             filters.value[key].value = defaultFilters[key].value;
         });
@@ -66,7 +80,7 @@ export function useLazyDataTable(
         sorting.value.order = 1;
         pagination.value = {
             page: 1,
-            rows: defaultRows,
+            rows: initialsRows,
         };
         fetchData().then(() => {
             window.history.replaceState(null, '', window.location.pathname);
diff --git a/resources/js/Composables/usePaginatedData.ts b/resources/js/Composables/usePaginatedData.ts
index f2c3ce5c..5da6bf13 100644
--- a/resources/js/Composables/usePaginatedData.ts
+++ b/resources/js/Composables/usePaginatedData.ts
@@ -2,39 +2,39 @@ import { ref, computed, onMounted } from 'vue';
 import { router, usePage } from '@inertiajs/vue3';
 import { FilterMatchMode } from '@primevue/core/api';
 import debounce from 'lodash-es/debounce';
-import * as PrimeVue from '@/types/primevue';
-
-interface PageStateEvent {
-    first: number;
-    rows: number;
-    page: number;
-    pageCount: number;
+import cloneDeep from 'lodash-es/cloneDeep';
+import { PageState, DataTablePageEvent } from 'primevue';
+import { PrimeVueDataFilters } from '@/types';
+
+interface PaginatedFilteredSortedQueryParams {
+    filters?: PrimeVueDataFilters;
+    page?: string;
+    rows?: string;
+    sortField?: string;
+    sortOrder?: string;
 }
 interface PaginationState {
     page: number;
     rows: number;
 }
 interface SortState {
-    field: undefined | string;
-    order: undefined | null | 0 | 1 | -1;
+    field: string;
+    order: number;
 }
 
 export function usePaginatedData(
-    initialFilters: PrimeVue.PaginatedDataFilters = {},
+    initialFilters: PrimeVueDataFilters = {},
     only: string[] = ['request'],
     initialsRows: number = 20
 ) {
-    const defaultFilters = initialFilters;
-    const defaultRows = initialsRows;
-
     const page = usePage<{
         request: {
-            urlParams: PrimeVue.PaginatedDataUrlParams;
+            urlParams: PaginatedFilteredSortedQueryParams;
         };
     }>();
 
     const processing = ref<boolean>(false);
-    const filters = ref<PrimeVue.PaginatedDataFilters>(initialFilters);
+    const filters = ref<PrimeVueDataFilters>(cloneDeep(initialFilters));
     const sorting = ref<SortState>({
         field: '',
         order: 1,
@@ -76,7 +76,7 @@ export function usePaginatedData(
             router.reload({
                 only: ['request', ...new Set(only)],
                 data: {
-                    filters: filters.value,
+                    filters: filters.value as any,
                     ...pagination.value,
                     sortField: sorting.value.field,
                     sortOrder: sorting.value.order,
@@ -95,9 +95,9 @@ export function usePaginatedData(
         });
     }
 
-    function paginate(pageStateEvent: PageStateEvent) {
-        pagination.value.page = pageStateEvent.page + 1;
-        pagination.value.rows = pageStateEvent.rows;
+    function paginate(event: PageState | DataTablePageEvent) {
+        pagination.value.page = event.page + 1;
+        pagination.value.rows = event.rows;
         fetchData().then(() => {
             scrollToTop();
         });
@@ -114,6 +114,7 @@ export function usePaginatedData(
         // Alternatively just use: router.get(window.location.pathname);
         // Caveat to the above approach, we would lose state from our page not related to pagination/filtering/sorting
 
+        const defaultFilters = cloneDeep(initialFilters);
         Object.keys(defaultFilters).forEach((key) => {
             filters.value[key].value = defaultFilters[key].value;
         });
@@ -123,7 +124,7 @@ export function usePaginatedData(
         };
         pagination.value = {
             page: 1,
-            rows: defaultRows,
+            rows: initialsRows,
         };
         fetchData().then(() => {
             window.history.replaceState(null, '', window.location.pathname);
@@ -167,9 +168,9 @@ export function usePaginatedData(
         });
     }
 
-    function parseUrlParams(urlParams: PrimeVue.PaginatedDataUrlParams) {
+    function parseUrlParams(urlParams: PaginatedFilteredSortedQueryParams) {
         filters.value = {
-            ...defaultFilters,
+            ...cloneDeep(initialFilters),
             ...urlParams?.filters,
         };
         parseUrlFilterValues();
@@ -177,8 +178,7 @@ export function usePaginatedData(
             sorting.value.field = urlParams.sortField;
         }
         if (urlParams?.sortOrder) {
-            sorting.value.order =
-                (parseInt(urlParams.sortOrder) as 0 | 1 | -1) || null;
+            sorting.value.order = parseInt(urlParams.sortOrder);
         }
         if (urlParams?.page) {
             pagination.value.page = parseInt(urlParams.page);
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index c7048f3c..8701cc15 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -2,7 +2,6 @@
 import { ref, useTemplateRef, onMounted, onUnmounted, watchEffect } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import ApplicationLogo from '@/Components/ApplicationLogo.vue';
-import Container from '@/Components/Container.vue';
 import LinksMenu from '@/Components/PrimeVue/LinksMenu.vue';
 import LinksMenuBar from '@/Components/PrimeVue/LinksMenuBar.vue';
 import LinksPanelMenu from '@/Components/PrimeVue/LinksPanelMenu.vue';
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 3ed0473a..71546c79 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -1,6 +1,4 @@
 <script setup>
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-import Container from '@/Components/Container.vue';
 import Heading from '@/Components/Heading.vue';
 </script>
 
diff --git a/resources/js/Pages/Profile/Edit.vue b/resources/js/Pages/Profile/Edit.vue
index 5b827e81..ade5b94b 100644
--- a/resources/js/Pages/Profile/Edit.vue
+++ b/resources/js/Pages/Profile/Edit.vue
@@ -1,13 +1,10 @@
 <script setup>
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-import Container from '@/Components/Container.vue';
 import Heading from '@/Components/Heading.vue';
 import DeleteUserForm from './Partials/DeleteUserForm.vue';
 import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue';
 import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm.vue';
 
 defineProps({
-    auth: Object,
     mustVerifyEmail: {
         type: Boolean,
     },
diff --git a/resources/js/app.js b/resources/js/app.js
index 61d6e579..8e39635a 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -12,6 +12,9 @@ import { ZiggyVue } from '../../vendor/tightenco/ziggy';
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import Container from '@/Components/Container.vue';
+
 import { useDark } from '@vueuse/core';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
@@ -35,6 +38,8 @@ createInertiaApp({
             .use(ToastService)
             .component('Head', Head)
             .component('Link', Link)
+            .component('AuthenticatedLayout', AuthenticatedLayout)
+            .component('Container', Container)
             .mount(el);
     },
     progress: {
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index accf3c02..901b1656 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -1,3 +1,5 @@
+import { DataTableFilterMetaData } from 'primevue';
+
 export interface User {
     id: number;
     name: string;
@@ -8,3 +10,7 @@ export interface User {
 export type PageProps<
     T extends Record<string, unknown> = Record<string, unknown>
 > = T;
+
+export type PrimeVueDataFilters = {
+    [key: string]: DataTableFilterMetaData;
+};
diff --git a/resources/js/types/primevue.d.ts b/resources/js/types/primevue.d.ts
deleted file mode 100644
index a67eb84b..00000000
--- a/resources/js/types/primevue.d.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { FilterMatchModeOptions } from '@primevue/core/api';
-
-export type MatchMode = FilterMatchModeOptions[keyof FilterMatchModeOptions];
-export type PaginatedDataFilters = Record<
-    string,
-    { value: any; matchMode: MatchMode }
->;
-export type SortEvent = {
-    sortField: undefined | string;
-    sortOrder: undefined | null | 0 | 1 | -1;
-};
-
-/**
- * URL params coming from Laravel App\Http\Middleware\HandleInertiaRequests request -> urlParams
- */
-export interface PaginatedDataUrlParams {
-    filters?: PaginatedDataFilters;
-    page?: string;
-    rows?: string;
-    sortField?: string;
-    sortOrder?: string;
-}