diff --git a/app/Http/Controllers/Admin/MenuItemController.php b/app/Http/Controllers/Admin/MenuItemController.php
index 05cb7ca..e00e4d8 100644
--- a/app/Http/Controllers/Admin/MenuItemController.php
+++ b/app/Http/Controllers/Admin/MenuItemController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Admin;
 
 use App\Http\Controllers\Controller;
+use App\Models\Role;
 use BalajiDharma\LaravelAdminCore\Requests\StoreMenuItemRequest;
 use BalajiDharma\LaravelAdminCore\Requests\UpdateMenuItemRequest;
 use BalajiDharma\LaravelMenu\Models\Menu;
@@ -47,12 +48,10 @@ public function index(Menu $menu)
      */
     public function create(Menu $menu)
     {
-        $item_options = MenuItem::selectOptions($menu->id, null, true);
+        $itemOptions = MenuItem::selectOptions($menu->id, null, true);
+        $roles = Role::all()->pluck('name', 'id');
 
-        return Inertia::render('Admin/Menu/Item/Create', [
-            'menu' => $menu,
-            'item_options' => $item_options,
-        ]);
+        return Inertia::render('Admin/Menu/Item/Create', compact('menu', 'itemOptions', 'roles'));
     }
 
     /**
@@ -62,7 +61,10 @@ public function create(Menu $menu)
      */
     public function store(StoreMenuItemRequest $request, Menu $menu)
     {
-        $menu->menuItems()->create($request->all());
+        $menu->menuItems()->create($request->except(['roles']));
+
+        $roles = $request->roles ?? [];
+        $menu->assignRole($roles);
 
         return redirect()->route('admin.menu.item.index', $menu->id)
             ->with('message', 'Menu created successfully.');
@@ -75,13 +77,11 @@ public function store(StoreMenuItemRequest $request, Menu $menu)
      */
     public function edit(Menu $menu, MenuItem $item)
     {
-        $item_options = MenuItem::selectOptions($menu->id, $item->parent_id ?? $item->id);
+        $itemOptions = MenuItem::selectOptions($menu->id, $item->parent_id ?? $item->id);
+        $roles = Role::all()->pluck('name', 'id');
+        $itemHasRoles = array_column(json_decode($item->roles, true), 'id');
 
-        return Inertia::render('Admin/Menu/Item/Edit', [
-            'menu' => $menu,
-            'item' => $item,
-            'item_options' => $item_options,
-        ]);
+        return Inertia::render('Admin/Menu/Item/Edit', compact('menu', 'item', 'itemOptions', 'roles', 'itemHasRoles'));
     }
 
     /**
@@ -91,7 +91,10 @@ public function edit(Menu $menu, MenuItem $item)
      */
     public function update(UpdateMenuItemRequest $request, Menu $menu, MenuItem $item)
     {
-        $item->update($request->all());
+        $item->update($request->except(['roles']));
+
+        $roles = $request->roles ?? [];
+        $item->syncRoles($roles);
 
         return redirect()->route('admin.menu.item.index', $menu->id)
             ->with('message', 'Menu Item updated successfully.');
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index dc7a14c..4c4f01f 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -46,7 +46,7 @@ public function share(Request $request)
                 'message' => fn () => $request->session()->get('message'),
             ],
             'navigation' => [
-                'menu' => Menu::getMenuTree('admin'),
+                'menu' => Menu::getMenuTree('admin', false, true),
             ],
         ]);
     }
diff --git a/resources/js/Components/AsideMenuItem.vue b/resources/js/Components/AsideMenuItem.vue
index 846027c..ba37bf1 100644
--- a/resources/js/Components/AsideMenuItem.vue
+++ b/resources/js/Components/AsideMenuItem.vue
@@ -38,7 +38,7 @@ const componentClass = computed(() => (
   ]
 ))
 
-const hasDropdown = computed(() => props.item.children)
+const hasDropdown = computed(() => props.item.children && props.item.children.length)
 
 const menuClick = event => {
   emit('menu-click', event, props.item)
diff --git a/resources/js/Layouts/Authenticated.vue b/resources/js/Layouts/Authenticated.vue
index c0ded8d..f4fcdee 100644
--- a/resources/js/Layouts/Authenticated.vue
+++ b/resources/js/Layouts/Authenticated.vue
@@ -79,7 +79,7 @@ const showingNavigationDropdown = ref(false);
                         <BreezeResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
                             Dashboard
                         </BreezeResponsiveNavLink>
-                        <BreezeResponsiveNavLink :href="route('permission.index')" :active="route().current('permission.index')">
+                        <BreezeResponsiveNavLink :href="route('admin.permission.index')" :active="route().current('admin.permission.index')">
                             Permissions
                         </BreezeResponsiveNavLink>
                     </div>
diff --git a/resources/js/Pages/Admin/Menu/Create.vue b/resources/js/Pages/Admin/Menu/Create.vue
index fd44f55..e8587ea 100644
--- a/resources/js/Pages/Admin/Menu/Create.vue
+++ b/resources/js/Pages/Admin/Menu/Create.vue
@@ -31,7 +31,7 @@ const form = useForm({
         main
       >
         <BaseButton
-          :route-name="route('menu.index')"
+          :route-name="route('admin.menu.index')"
           :icon="mdiArrowLeftBoldOutline"
           label="Back"
           color="white"
@@ -41,7 +41,7 @@ const form = useForm({
       </SectionTitleLineWithButton>
       <CardBox
         form
-        @submit.prevent="form.post(route('menu.store'))"
+        @submit.prevent="form.post(route('admin.menu.store'))"
       >
         <FormField
           label="Name"
diff --git a/resources/js/Pages/Admin/Menu/Item/Create.vue b/resources/js/Pages/Admin/Menu/Item/Create.vue
index 62907c1..e1ac865 100644
--- a/resources/js/Pages/Admin/Menu/Item/Create.vue
+++ b/resources/js/Pages/Admin/Menu/Item/Create.vue
@@ -13,13 +13,18 @@ import FormControl from '@/Components/FormControl.vue'
 import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
 import BaseButton from '@/Components/BaseButton.vue'
 import BaseButtons from '@/Components/BaseButtons.vue'
+import BaseDivider from '@/Components/BaseDivider.vue'
 
 const props = defineProps({
   menu: {
     type: Object,
     default: () => ({}),
   },
-  item_options: {
+  itemOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+  roles: {
     type: Object,
     default: () => ({}),
   },
@@ -31,7 +36,8 @@ const form = useForm({
   description: '',
   enabled: true,
   parent_id: '',
-  weight: ''
+  weight: '',
+  roles: []
 })
 
 </script>
@@ -121,7 +127,7 @@ const form = useForm({
             type="select"
             placeholder="--ROOT--"
             :error="form.errors.parent_id"
-            :options="item_options"
+            :options="itemOptions"
           >
             <div class="text-red-400 text-sm" v-if="form.errors.parent_id">
               {{ form.errors.parent_id }}
@@ -146,6 +152,21 @@ const form = useForm({
             </div>
           </FormControl>
         </FormField>
+
+        <BaseDivider />
+
+        <FormField
+          label="Roles"
+          wrap-body
+        >
+          <FormCheckRadioGroup
+            v-model="form.roles"
+            name="roles"
+            is-column
+            :options="props.roles"
+          />
+        </FormField>
+
         <template #footer>
           <BaseButtons>
             <BaseButton
diff --git a/resources/js/Pages/Admin/Menu/Item/Edit.vue b/resources/js/Pages/Admin/Menu/Item/Edit.vue
index 2deb94a..78e5f46 100644
--- a/resources/js/Pages/Admin/Menu/Item/Edit.vue
+++ b/resources/js/Pages/Admin/Menu/Item/Edit.vue
@@ -13,6 +13,7 @@ import FormControl from '@/Components/FormControl.vue'
 import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
 import BaseButton from '@/Components/BaseButton.vue'
 import BaseButtons from '@/Components/BaseButtons.vue'
+import BaseDivider from '@/Components/BaseDivider.vue'
 
 const props = defineProps({
   menu: {
@@ -23,7 +24,15 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
-  item_options: {
+  itemOptions: {
+    type: Object,
+    default: () => ({}),
+  },
+  roles: {
+    type: Object,
+    default: () => ({}),
+  },
+  itemHasRoles: {
     type: Object,
     default: () => ({}),
   },
@@ -37,7 +46,8 @@ const form = useForm({
   description: props.item.description,
   enabled: props.item.enabled,
   parent_id: props.item.parent_id,
-  weight: props.item.weight
+  weight: props.item.weight,
+  roles: props.itemHasRoles
 })
 </script>
 
@@ -126,7 +136,7 @@ const form = useForm({
             type="select"
             placeholder="--ROOT--"
             :error="form.errors.parent_id"
-            :options="item_options"
+            :options="itemOptions"
           >
             <div class="text-red-400 text-sm" v-if="form.errors.parent_id">
               {{ form.errors.parent_id }}
@@ -151,6 +161,21 @@ const form = useForm({
             </div>
           </FormControl>
         </FormField>
+        
+        <BaseDivider />
+
+        <FormField
+          label="Roles"
+          wrap-body
+        >
+          <FormCheckRadioGroup
+            v-model="form.roles"
+            name="roles"
+            is-column
+            :options="props.roles"
+          />
+        </FormField>
+
         <template #footer>
           <BaseButtons>
             <BaseButton