diff --git a/package-lock.json b/package-lock.json
index f4e2490..76a0700 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
                 "nprogress": "^0.2.0",
                 "pinia": "^2.1.7",
                 "primevue": "^4.3.0",
+                "tailwind-merge": "^3.2.0",
                 "tailwindcss": "^4.1.0",
                 "tailwindcss-primeui": "^0.5.0",
                 "typescript-eslint": "^8.19.1",
@@ -3946,6 +3947,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/tailwind-merge": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.2.0.tgz",
+            "integrity": "sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/dcastil"
+            }
+        },
         "node_modules/tailwindcss": {
             "version": "4.1.3",
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.3.tgz",
diff --git a/package.json b/package.json
index 17f193a..2d8869e 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
         "nprogress": "^0.2.0",
         "pinia": "^2.1.7",
         "primevue": "^4.3.0",
+        "tailwind-merge": "^3.2.0",
         "tailwindcss": "^4.1.0",
         "tailwindcss-primeui": "^0.5.0",
         "typescript-eslint": "^8.19.1",
@@ -39,4 +40,4 @@
         "typescript-eslint": "^8.19.1",
         "vite": "^6.2"
     }
-}
\ No newline at end of file
+}
diff --git a/src/App.vue b/src/App.vue
index 21a6473..516b2b9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,7 @@ import { RouterView } from 'vue-router';
 <template>
     <!-- Use key to re-generate the page view component on each navigation :key="$route.path" -->
     <!-- Alteratively, use a watch() on each component to re-render dynamic data as needed -->
-    <Toast position="bottom-right" />
+    <Toast position="top-center" />
     <RouterView v-slot="{ Component }">
         <Suspense timeout="0">
             <template #default>
diff --git a/src/components/primevue/menu/Breadcrumb.vue b/src/components/primevue/menu/Breadcrumb.vue
index f503736..6c35eb2 100644
--- a/src/components/primevue/menu/Breadcrumb.vue
+++ b/src/components/primevue/menu/Breadcrumb.vue
@@ -1,25 +1,28 @@
 <script setup lang="ts">
-import { useTemplateRef } from 'vue';
-import Breadcrumb from 'primevue/breadcrumb';
+import { ref, useTemplateRef } from 'vue';
+import Breadcrumb, { type BreadcrumbPassThroughOptions, type BreadcrumbProps } from 'primevue/breadcrumb';
 import { ChevronRight } from 'lucide-vue-next';
 import type { ExtendedMenuItem } from '@/types';
+import { ptViewMerge } from '@/utils';
 
-const componentProps = defineProps<{
-    model: ExtendedMenuItem[]
-}>();
+interface ExtendedBreadcrumbProps extends Omit<BreadcrumbProps, 'model'> {
+    model: ExtendedMenuItem[];
+}
+const componentProps = defineProps<ExtendedBreadcrumbProps>();
+
+const defaultPt = ref<BreadcrumbPassThroughOptions>({
+    root: 'p-0 bg-transparent'
+});
 
 type BreadcrumbType = InstanceType<typeof Breadcrumb>;
 const childRef = useTemplateRef<BreadcrumbType>('child-ref');
-defineExpose({
-    childRef,
-});
+defineExpose({ el: childRef });
 </script>
 
 <template>
     <Breadcrumb
         ref="child-ref"
-        :model="componentProps.model"
-        pt:root:class="p-0 bg-transparent"
+        v-bind="{ ...componentProps, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template #item="{ item, props }">
             <RouterLink
diff --git a/src/components/primevue/menu/Menu.vue b/src/components/primevue/menu/Menu.vue
index 59c862d..428f063 100644
--- a/src/components/primevue/menu/Menu.vue
+++ b/src/components/primevue/menu/Menu.vue
@@ -1,17 +1,19 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue';
-import Menu from 'primevue/menu';
+import Menu, { type MenuProps } from 'primevue/menu';
 import type { ExtendedMenuItem } from '@/types';
+import { ptViewMerge } from '@/utils';
 
-const componentProps = defineProps<{
-    model: ExtendedMenuItem[]
-}>();
+interface ExtendedMenuProps extends Omit<MenuProps, 'model'> {
+    model: ExtendedMenuItem[];
+}
+const componentProps = defineProps<ExtendedMenuProps>();
 
 type MenuType = InstanceType<typeof Menu>;
 const childRef = useTemplateRef<MenuType>('child-ref');
 
 defineExpose({
-    childRef,
+    el: childRef,
     toggle: (event: Event) => childRef.value?.toggle(event)
 });
 </script>
@@ -19,7 +21,7 @@ defineExpose({
 <template>
     <Menu
         ref="child-ref"
-        :model="componentProps.model"
+        v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template
             v-for="(_, slotName) in $slots"
diff --git a/src/components/primevue/menu/MenuBar.vue b/src/components/primevue/menu/MenuBar.vue
index a52b969..6269754 100644
--- a/src/components/primevue/menu/MenuBar.vue
+++ b/src/components/primevue/menu/MenuBar.vue
@@ -1,26 +1,28 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue';
-import Menubar from 'primevue/menubar';
+import Menubar, { type MenubarProps } from 'primevue/menubar';
 import { ChevronDown, ChevronRight } from 'lucide-vue-next';
 import type { ExtendedMenuItem } from '@/types';
+import { ptViewMerge } from '@/utils';
 
-const componentProps = defineProps<{
-    model: ExtendedMenuItem[]
-}>();
+interface ExtendedMenubarProps extends Omit<MenubarProps, 'model'> {
+    model: ExtendedMenuItem[];
+}
+const componentProps = withDefaults(
+    defineProps<ExtendedMenubarProps>(),
+    { breakpoint: '1024px' }
+);
 
 type MenubarType = InstanceType<typeof Menubar>;
 const childRef = useTemplateRef<MenubarType>('child-ref');
 
-defineExpose({
-    childRef,
-});
+defineExpose({ el: childRef });
 </script>
 
 <template>
     <Menubar
         ref="child-ref"
-        :model="componentProps.model"
-        breakpoint="1024px"
+        v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template
             v-for="(_, slotName) in $slots"
diff --git a/src/components/primevue/menu/PanelMenu.vue b/src/components/primevue/menu/PanelMenu.vue
index b8a3fd5..6452d43 100644
--- a/src/components/primevue/menu/PanelMenu.vue
+++ b/src/components/primevue/menu/PanelMenu.vue
@@ -1,28 +1,31 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue';
-import PanelMenu from 'primevue/panelmenu';
+import PanelMenu, { type PanelMenuPassThroughOptions, type PanelMenuProps } from 'primevue/panelmenu';
 import { ChevronDown, ChevronRight } from 'lucide-vue-next';
 import type { ExtendedMenuItem } from '@/types';
+import { ptViewMerge } from '@/utils';
 
-const componentProps = defineProps<{
-    model: ExtendedMenuItem[]
-}>();
+interface ExtendedPanelMenuProps extends Omit<PanelMenuProps, 'model'> {
+    model: ExtendedMenuItem[];
+}
+const componentProps = defineProps<ExtendedPanelMenuProps>();
+
+const defaultPt: PanelMenuPassThroughOptions = {
+    root: 'p-0 m-0 gap-1',
+    panel: 'p-0 bg-transparent border-0',
+    header: 'p-0 border-0',
+    itemContent: 'gap-1',
+};
 
 type PanelMenuType = InstanceType<typeof PanelMenu>;
 const childRef = useTemplateRef<PanelMenuType>('child-ref');
-defineExpose({
-    childRef,
-});
+defineExpose({ el: childRef });
 </script>
 
 <template>
     <PanelMenu
         ref="child-ref"
-        :model="componentProps.model"
-        pt:root:class="p-0 m-0 gap-1"
-        pt:panel:class="p-0 border-0"
-        pt:header:class="p-0 border-0"
-        pt:itemContent:class="gap-1"
+        v-bind="{ ...componentProps, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template #item="{ item, root, active, hasSubmenu }">
             <RouterLink
diff --git a/src/layouts/app/HeaderLayout.vue b/src/layouts/app/HeaderLayout.vue
index 39793b5..535d447 100644
--- a/src/layouts/app/HeaderLayout.vue
+++ b/src/layouts/app/HeaderLayout.vue
@@ -26,12 +26,12 @@ const {
 
 const userMenu = useTemplateRef('user-menu');
 const toggleUserMenu = (event) => {
-    userMenu.value.childRef.toggle(event);
+    userMenu.value.el.toggle(event);
 };
 
 const mobileUserMenu = useTemplateRef('mobile-user-menu');
 const toggleMobileUserMenu = (event) => {
-    mobileUserMenu.value.childRef.toggle(event);
+    mobileUserMenu.value.el.toggle(event);
 };
 </script>
 
@@ -66,6 +66,7 @@ const toggleMobileUserMenu = (event) => {
                         <Menu
                             ref="mobile-user-menu"
                             :model="userMenuItems"
+                            pt:root:class="z-[1200]"
                             popup
                         />
                     </div>
@@ -115,7 +116,7 @@ const toggleMobileUserMenu = (event) => {
                                         ref="user-menu"
                                         appendTo="#user-menu-append"
                                         :model="userMenuItems"
-                                        pt:root:class="left-auto! top-0! right-0"
+                                        pt:root:class="left-auto! top-0! right-0 z-[1200]"
                                         popup
                                     />
                                 </div>
diff --git a/src/layouts/app/SidebarLayout.vue b/src/layouts/app/SidebarLayout.vue
index 15bc699..d2e9acf 100644
--- a/src/layouts/app/SidebarLayout.vue
+++ b/src/layouts/app/SidebarLayout.vue
@@ -24,12 +24,12 @@ const {
 
 const userMenu = useTemplateRef('user-menu');
 const toggleUserMenu = (event) => {
-    userMenu.value.childRef.toggle(event);
+    userMenu.value.el.toggle(event);
 };
 
 const mobileUserMenu = useTemplateRef('mobile-user-menu');
 const toggleMobileUserMenu = (event) => {
-    mobileUserMenu.value.childRef.toggle(event);
+    mobileUserMenu.value.el.toggle(event);
 };
 </script>
 
@@ -39,7 +39,7 @@ const toggleMobileUserMenu = (event) => {
             <!-- Mobile drawer menu -->
             <Drawer
                 v-model:visible="mobileMenuOpen"
-                position="right"
+                position="left"
             >
                 <div>
                     <PanelMenu
@@ -64,6 +64,7 @@ const toggleMobileUserMenu = (event) => {
                         <Menu
                             ref="mobile-user-menu"
                             :model="userMenuItems"
+                            pt:root:class="z-[1200]"
                             popup
                         />
                     </div>
@@ -136,6 +137,7 @@ const toggleMobileUserMenu = (event) => {
                         <Menu
                             ref="user-menu"
                             :model="userMenuItems"
+                            pt:root:class="z-[1200]"
                             popup
                         />
                     </div>
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..2338bda
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,18 @@
+import { twMerge } from 'tailwind-merge';
+import { mergeProps } from 'vue';
+
+export const ptViewMerge = (
+    globalPTProps = {} as any,
+    selfPTProps = {} as any,
+    datasets: any
+) => {
+    const { class: globalClass, ...globalRest } = globalPTProps;
+    const { class: selfClass, ...selfRest } = selfPTProps;
+
+    return mergeProps(
+        { class: twMerge(globalClass, selfClass) },
+        globalRest,
+        selfRest,
+        datasets
+    );
+};
\ No newline at end of file