diff --git a/app/Config/Routes.php b/app/Config/Routes.php
index 2da5aae..a1373ff 100644
--- a/app/Config/Routes.php
+++ b/app/Config/Routes.php
@@ -941,11 +941,12 @@ $routes->post('/parent/edit_emergency_contact/(:num)', 'View\ParentController::e
 
 
 /*management navigation bar*/
-$routes->get('nav-builder',               'View\NavBuilderController::index',   ['filter' => 'auth']);
-$routes->get('api/nav-builder',           'View\NavBuilderController::data',    ['filter' => 'auth']);
-$routes->post('nav-builder/save',         'View\NavBuilderController::save',    ['filter' => 'auth']);
-$routes->get('nav-builder/delete/(:num)', 'View\NavBuilderController::delete/$1', ['filter' => 'auth']);
-$routes->post('nav-builder/reorder',      'View\NavBuilderController::reorder', ['filter' => 'auth']);
+$routes->get('nav-builder',               'View\NavBuilderController::index',   ['filter' => 'auth:administrator']);
+$routes->get('api/nav-builder',           'View\NavBuilderController::data',    ['filter' => 'auth:administrator']);
+$routes->post('nav-builder/save',         'View\NavBuilderController::save',    ['filter' => 'auth:administrator']);
+$routes->get('nav-builder/delete/(:num)', 'View\NavBuilderController::delete/$1', ['filter' => 'auth:administrator']);
+$routes->post('nav-builder/reorder',      'View\NavBuilderController::reorder', ['filter' => 'auth:administrator']);
+$routes->post('nav-builder/role-access',  'View\NavBuilderController::roleAccess', ['filter' => 'auth:administrator']);
 
 
 // Teacher book distribution is the only inventory path teachers may access directly.
diff --git a/app/Controllers/View/NavBuilderController.php b/app/Controllers/View/NavBuilderController.php
index 6493f21..283fa0a 100644
--- a/app/Controllers/View/NavBuilderController.php
+++ b/app/Controllers/View/NavBuilderController.php
@@ -22,33 +22,14 @@ class NavBuilderController extends BaseController
 
 protected function ensureAdmin(): void
 {
-    $sessionRole = session()->get('role');           // could be a string or array in your app
-    $roleNames   = is_array($sessionRole) ? $sessionRole : [$sessionRole];
-    $roleNames   = array_values(array_filter(array_map('strval', $roleNames)));
+    $session = session();
+    $roles = array_filter(array_merge(
+        (array) $session->get('roles'),
+        (array) $session->get('role')
+    ));
 
-    if (empty($roleNames)) {
-        throw \CodeIgniter\Exceptions\PageNotFoundException::forPageNotFound();
-    }
-
-    $db = \Config\Database::connect();
-
-    // Map role names -> ids
-    $roleIdRows = $db->table('roles')->select('id')->whereIn('name', $roleNames)->get()->getResultArray();
-    $roleIds    = array_map('intval', array_column($roleIdRows, 'id'));
-    if (empty($roleIds)) {
-        throw \CodeIgniter\Exceptions\PageNotFoundException::forPageNotFound();
-    }
-
-    // Is this route allowed for any of the user's roles?
-    $allowed = $db->table('role_nav_items AS rni')
-        ->select('1')
-        ->join('nav_items AS ni', 'ni.id = rni.nav_item_id')
-        ->where('ni.url', 'nav-builder')     // IMPORTANT: your current route path
-        ->whereIn('rni.role_id', $roleIds)
-        ->get(1)->getFirstRow();
-
-    if (!$allowed) {
-        // You can show a nicer "Access Denied" view if you prefer
+    $normalizedRoles = array_map(static fn ($role) => strtolower(trim((string) $role)), $roles);
+    if (!in_array('administrator', $normalizedRoles, true)) {
         throw \CodeIgniter\Exceptions\PageNotFoundException::forPageNotFound();
     }
 }
@@ -106,6 +87,15 @@ public function save()
     if ($menuParentId !== null) {
         $parent = $this->items->select('id')->where('id', $menuParentId)->first();
         if (!$parent) {
+            if ($this->wantsJson()) {
+                return $this->response
+                    ->setStatusCode(422)
+                    ->setJSON([
+                        'ok' => false,
+                        'message' => 'Selected parent does not exist.',
+                        'csrf' => $this->csrfPayload(),
+                    ]);
+            }
             return redirect()->back()->with('error', 'Selected parent does not exist.')->withInput();
         }
     }
@@ -139,9 +129,33 @@ public function save()
     }
 
     $this->service->clearCache();
+    if ($this->wantsJson()) {
+        return $this->response->setJSON([
+            'ok'      => true,
+            'message' => 'Menu saved.',
+            'id'      => $id,
+            'csrf'    => $this->csrfPayload(),
+            'payload' => $this->buildNavPayload(),
+        ]);
+    }
+
     return redirect()->back()->with('success', 'Menu saved.');
 }
 
+    private function wantsJson(): bool
+    {
+        return $this->request->isAJAX()
+            || str_contains(strtolower($this->request->getHeaderLine('Accept')), 'application/json');
+    }
+
+    private function csrfPayload(): array
+    {
+        return [
+            'name' => csrf_token(),
+            'hash' => csrf_hash(),
+        ];
+    }
+
 
     public function delete($id)
     {
@@ -158,12 +172,182 @@ public function save()
     {
         $this->ensureAdmin();
 
+        $structure = $this->request->getPost('structure') ?? [];
+        if (is_array($structure) && !empty($structure)) {
+            $updates = $this->normalizeStructureUpdates($structure);
+            foreach ($updates as $row) {
+                $this->items->update($row['id'], [
+                    'menu_parent_id' => $row['menu_parent_id'],
+                    'sort_order'     => $row['sort_order'],
+                ]);
+            }
+
+            $this->service->clearCache();
+            return $this->response->setJSON(['ok' => true, 'csrf' => $this->csrfPayload()]);
+        }
+
+        // Backward-compatible payload used by the previous builder.
         $orders = $this->request->getPost('orders') ?? [];
         foreach ($orders as $id => $order) {
             $this->items->update((int) $id, ['sort_order' => (int) $order]);
         }
+
         $this->service->clearCache();
-        return $this->response->setJSON(['ok' => true]);
+        return $this->response->setJSON(['ok' => true, 'csrf' => $this->csrfPayload()]);
+    }
+
+    public function roleAccess()
+    {
+        $this->ensureAdmin();
+
+        $action = strtolower(trim((string) $this->request->getPost('action')));
+        $navItemId = (int) $this->request->getPost('nav_item_id');
+        $sourceRoleId = (int) $this->request->getPost('source_role_id');
+        $targetRoleId = (int) $this->request->getPost('target_role_id');
+
+        if ($navItemId <= 0 || !$this->items->select('id')->find($navItemId)) {
+            return $this->response
+                ->setStatusCode(422)
+                ->setJSON(['ok' => false, 'message' => 'Selected page does not exist.', 'csrf' => $this->csrfPayload()]);
+        }
+
+        if ($action === 'remove') {
+            if (!$this->roleExists($sourceRoleId)) {
+                return $this->response
+                    ->setStatusCode(422)
+                    ->setJSON(['ok' => false, 'message' => 'Selected role does not exist.', 'csrf' => $this->csrfPayload()]);
+            }
+
+            $this->maps
+                ->where('nav_item_id', $navItemId)
+                ->where('role_id', $sourceRoleId)
+                ->delete();
+        } elseif ($action === 'move') {
+            if (!$this->roleExists($sourceRoleId) || !$this->roleExists($targetRoleId)) {
+                return $this->response
+                    ->setStatusCode(422)
+                    ->setJSON(['ok' => false, 'message' => 'Selected role does not exist.', 'csrf' => $this->csrfPayload()]);
+            }
+
+            if ($sourceRoleId !== $targetRoleId) {
+                $this->maps
+                    ->where('nav_item_id', $navItemId)
+                    ->where('role_id', $sourceRoleId)
+                    ->delete();
+
+                $exists = $this->maps
+                    ->where('nav_item_id', $navItemId)
+                    ->where('role_id', $targetRoleId)
+                    ->first();
+
+                if (!$exists) {
+                    $this->maps->insert([
+                        'role_id'     => $targetRoleId,
+                        'nav_item_id' => $navItemId,
+                    ]);
+                }
+            }
+        } else {
+            return $this->response
+                ->setStatusCode(422)
+                ->setJSON(['ok' => false, 'message' => 'Unsupported role access action.', 'csrf' => $this->csrfPayload()]);
+        }
+
+        $this->service->clearCache();
+
+        return $this->response->setJSON([
+            'ok'      => true,
+            'message' => 'Role access updated.',
+            'csrf'    => $this->csrfPayload(),
+            'payload' => $this->buildNavPayload(),
+        ]);
+    }
+
+    private function roleExists(int $roleId): bool
+    {
+        if ($roleId <= 0) {
+            return false;
+        }
+
+        $db = \Config\Database::connect();
+        return (bool) $db->table('roles')
+            ->select('id')
+            ->where('id', $roleId)
+            ->get(1)
+            ->getFirstRow();
+    }
+
+    private function normalizeStructureUpdates(array $structure): array
+    {
+        $existingRows = $this->items->select('id, menu_parent_id')->findAll();
+        $existingIds = array_map('intval', array_column($existingRows, 'id'));
+        $existingIdLookup = array_fill_keys($existingIds, true);
+
+        $updates = [];
+        foreach ($structure as $row) {
+            if (!is_array($row)) {
+                continue;
+            }
+
+            $id = (int) ($row['id'] ?? 0);
+            if ($id <= 0 || !isset($existingIdLookup[$id])) {
+                continue;
+            }
+
+            $parentId = $row['parent_id'] ?? null;
+            $parentId = ($parentId === '' || $parentId === null) ? null : (int) $parentId;
+            if ($parentId !== null && (!isset($existingIdLookup[$parentId]) || $parentId === $id)) {
+                $parentId = null;
+            }
+
+            $updates[] = [
+                'id'             => $id,
+                'menu_parent_id' => $parentId,
+                'sort_order'     => max(0, (int) ($row['sort_order'] ?? 0)),
+            ];
+        }
+
+        $updatesById = [];
+        foreach ($updates as $row) {
+            $updatesById[$row['id']] = $row;
+        }
+
+        foreach ($updatesById as $id => &$row) {
+            if ($row['menu_parent_id'] !== null && $this->wouldCreateCycle($id, $row['menu_parent_id'], $updatesById, $existingRows)) {
+                $row['menu_parent_id'] = null;
+            }
+        }
+        unset($row);
+
+        return array_values($updatesById);
+    }
+
+    private function wouldCreateCycle(int $id, int $parentId, array $updatesById, array $existingRows): bool
+    {
+        $parentById = [];
+        foreach ($existingRows as $row) {
+            $parentById[(int) ($row['id'] ?? 0)] = isset($row['menu_parent_id']) && (int) $row['menu_parent_id'] !== 0
+                ? (int) $row['menu_parent_id']
+                : null;
+        }
+        foreach ($updatesById as $row) {
+            $parentById[$row['id']] = $row['menu_parent_id'];
+        }
+
+        $seen = [];
+        $current = $parentId;
+        while ($current !== null) {
+            if ($current === $id) {
+                return true;
+            }
+            if (isset($seen[$current])) {
+                return true;
+            }
+            $seen[$current] = true;
+            $current = $parentById[$current] ?? null;
+        }
+
+        return false;
     }
 
     protected function distinctRoles(): array
@@ -207,7 +391,7 @@ public function save()
         }
         unset($node);
 
-        $this->sortTreeAlpha($tree);
+        $this->sortTreeByOrder($tree);
 
         $flatAlpha = $all;
         usort($flatAlpha, fn($a, $b) => strnatcasecmp(
@@ -256,9 +440,59 @@ public function save()
             'items'         => $flattened,
             'roles'         => $roles,
             'parentOptions' => $parentOptions,
+            'routeOptions'  => $this->routeOptions(),
         ];
     }
 
+    private function routeOptions(): array
+    {
+        $routes = service('routes');
+        $getRoutes = $routes->getRoutes('GET', false);
+        if (empty($getRoutes)) {
+            $routes = $routes->loadRoutes();
+            $getRoutes = $routes->getRoutes('GET', false);
+        }
+        $options = [];
+
+        foreach (array_keys($getRoutes) as $route) {
+            $route = trim((string) $route, '/');
+            if ($route === '' || $this->shouldHideRouteOption($route)) {
+                continue;
+            }
+
+            $options[] = [
+                'value' => $route,
+                'label' => $this->routeLabel($route),
+                'needs_params' => str_contains($route, '(') || str_contains($route, '[') || str_contains($route, '{'),
+            ];
+        }
+
+        usort($options, static function ($a, $b) {
+            return strnatcasecmp($a['label'] ?? '', $b['label'] ?? '');
+        });
+
+        return $options;
+    }
+
+    private function shouldHideRouteOption(string $route): bool
+    {
+        if (str_starts_with($route, 'api/') || str_starts_with($route, 'docs/') || str_starts_with($route, 'debugbar/')) {
+            return true;
+        }
+
+        return (bool) preg_match('#(^|/)(csrf-token|file|attachment|download|delete)(/|$)#i', $route);
+    }
+
+    private function routeLabel(string $route): string
+    {
+        $label = preg_replace('#\(\?:[^)]+\)|\(\[\^/\]\+\)|\(\[0-9\]\+\)|\(:[a-z_]+\)|\{[^}]+\}#i', '{value}', $route) ?? $route;
+        $label = str_replace(['_', '-'], ' ', $label);
+        $label = preg_replace('#/+#', ' / ', $label) ?? $label;
+        $label = preg_replace('/\s+/', ' ', $label) ?? $label;
+
+        return ucwords(trim($label));
+    }
+
     private function flattenTreeForResponse(array $nodes, array $roleAssignments, ?string $parentLabel = null, int $depth = 0, array &$rows = []): array
     {
         foreach ($nodes as $node) {
@@ -300,4 +534,28 @@ public function save()
 
         return $rows;
     }
+
+    private function sortTreeByOrder(array &$nodes): void
+    {
+        usort($nodes, function ($a, $b) {
+            $order = ((int) ($a['sort_order'] ?? 0)) <=> ((int) ($b['sort_order'] ?? 0));
+            if ($order !== 0) {
+                return $order;
+            }
+
+            $label = strnatcasecmp($this->labelKey($a['label'] ?? ''), $this->labelKey($b['label'] ?? ''));
+            if ($label !== 0) {
+                return $label;
+            }
+
+            return ((int) ($a['id'] ?? 0)) <=> ((int) ($b['id'] ?? 0));
+        });
+
+        foreach ($nodes as &$node) {
+            if (!empty($node['children'])) {
+                $this->sortTreeByOrder($node['children']);
+            }
+        }
+        unset($node);
+    }
 }
diff --git a/app/Services/NavbarService.php b/app/Services/NavbarService.php
index 0030c01..ede7593 100644
--- a/app/Services/NavbarService.php
+++ b/app/Services/NavbarService.php
@@ -29,9 +29,7 @@ class NavbarService
         $allowedIds = $this->mapModel->getNavItemIdsForRoles($roles);
         if (empty($allowedIds)) return [];
 
-        // Load all enabled items, then filter.
-        // The displayed sidebar is alphabetized after the tree is built so
-        // new menu items fall into place without relying on manual sort_order.
+        // Load all enabled items, then filter. The builder controls this order.
         $rows = $this->navModel->where('is_enabled', 1)
             ->orderBy('sort_order', 'ASC')
             ->orderBy('label', 'ASC')
@@ -59,22 +57,34 @@ class NavbarService
         }
         unset($node);
 
-        $this->sortTreeAlphabetically($tree);
+        $this->sortTreeByOrder($tree);
 
         $this->cache->save($cacheKey, $tree, 300); // 5 minutes
         return $tree;
     }
 
-    private function sortTreeAlphabetically(array &$nodes): void
+    private function sortTreeByOrder(array &$nodes): void
     {
-        usort($nodes, fn ($a, $b) => strnatcasecmp(
-            $this->labelSortKey((string) ($a['label'] ?? '')),
-            $this->labelSortKey((string) ($b['label'] ?? ''))
-        ));
+        usort($nodes, function ($a, $b) {
+            $order = ((int) ($a['sort_order'] ?? 0)) <=> ((int) ($b['sort_order'] ?? 0));
+            if ($order !== 0) {
+                return $order;
+            }
+
+            $label = strnatcasecmp(
+                $this->labelSortKey((string) ($a['label'] ?? '')),
+                $this->labelSortKey((string) ($b['label'] ?? ''))
+            );
+            if ($label !== 0) {
+                return $label;
+            }
+
+            return ((int) ($a['id'] ?? 0)) <=> ((int) ($b['id'] ?? 0));
+        });
 
         foreach ($nodes as &$node) {
             if (!empty($node['children']) && is_array($node['children'])) {
-                $this->sortTreeAlphabetically($node['children']);
+                $this->sortTreeByOrder($node['children']);
             }
         }
         unset($node);
diff --git a/app/Views/nav_builder/index.php b/app/Views/nav_builder/index.php
index 6c4715c..dce83a5 100644
--- a/app/Views/nav_builder/index.php
+++ b/app/Views/nav_builder/index.php
@@ -1,66 +1,278 @@
 <?= $this->extend('layout/management_layout') ?>
 <?= $this->section('content') ?>
 
-<!-- DataTables CSS (Bootstrap 5) -->
-<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
-<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
-<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.4.1/css/rowGroup.bootstrap5.min.css">
-
 <style>
-  #menuTableWrap {
-    position: relative;
-    z-index: 2;
+  .nav-builder-page {
+    max-width: 1380px;
+  }
+
+  .nav-builder-shell {
+    display: grid;
+    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
+    gap: 1rem;
+  }
+
+  .nav-builder-panel {
     background: #fff;
+    border: 1px solid rgba(15, 23, 42, .08);
+    border-radius: .5rem;
+    box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
   }
 
-  #menuTable.table thead th {
-    white-space: nowrap;
-    background: #fff;
-    position: sticky;
-    top: 0;
-    z-index: 3;
-  }
-
-  #menuTable.table td,
-  #menuTable.table th {
-    vertical-align: middle;
-  }
-
-  #menuTable.table tr.odd-row > td {
-    background-color: #fff;
-  }
-
-  #menuTable.table tr.even-row > td {
-    background-color: #f9fbfd;
-  }
-
-  .badge-role {
-    background: #34fd02ff;
-    color: #141414ff;
-    font-weight: 500;
-  }
-
-  table.dataTable tr.dtrg-group,
-  table.dataTable tr.dtrg-group.dtrg-start {
-    background: #f3f6f9 !important;
-    font-weight: 600;
-    color: #34495e;
-  }
-
-  #menuTable_wrapper .dataTables_length,
-  #menuTable_wrapper .dataTables_filter {
-    margin-bottom: .5rem;
-  }
-
-  #menuTable_wrapper .row {
+  .nav-builder-panel-header {
+    display: flex;
     align-items: center;
+    justify-content: space-between;
+    gap: .75rem;
+    padding: 1rem 1.125rem;
+    border-bottom: 1px solid rgba(15, 23, 42, .08);
   }
-</style>
 
-<div class="container mt-4"
+  .nav-builder-panel-body {
+    padding: 1rem;
+  }
+
+  .nav-tree {
+    min-height: 360px;
+  }
+
+  .nav-tree-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 260px;
+    border: 1px dashed rgba(100, 116, 139, .45);
+    border-radius: .5rem;
+    color: #64748b;
+    background: #f8fafc;
+  }
+
+  .nav-drop-zone {
+    height: .55rem;
+    border-radius: 999px;
+    margin: .125rem 0;
+    transition: background-color .15s ease, height .15s ease;
+  }
+
+  .nav-drop-zone.is-over {
+    height: 1.2rem;
+    background: rgba(13, 110, 253, .22);
+  }
+
+  .nav-item-row {
+    display: grid;
+    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
+    align-items: center;
+    gap: .65rem;
+    min-height: 3.25rem;
+    padding: .55rem .7rem;
+    border: 1px solid rgba(15, 23, 42, .1);
+    border-radius: .45rem;
+    background: #fff;
+    cursor: pointer;
+  }
+
+  .nav-item-row:hover {
+    border-color: rgba(13, 110, 253, .32);
+    background: #f8fbff;
+  }
+
+  .nav-item-row.is-selected {
+    border-color: rgba(13, 110, 253, .75);
+    box-shadow: 0 0 0 .18rem rgba(13, 110, 253, .12);
+  }
+
+  .nav-item-row.is-dragging {
+    opacity: .52;
+  }
+
+  .nav-item-handle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border: 0;
+    border-radius: .4rem;
+    color: #64748b;
+    background: #f1f5f9;
+    cursor: grab;
+  }
+
+  .nav-item-main {
+    min-width: 0;
+  }
+
+  .nav-item-title {
+    display: flex;
+    align-items: center;
+    gap: .45rem;
+    min-width: 0;
+    font-weight: 600;
+    color: #0f172a;
+  }
+
+  .nav-item-title span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nav-item-meta {
+    display: flex;
+    align-items: center;
+    gap: .45rem;
+    margin-top: .15rem;
+    color: #64748b;
+    font-size: .825rem;
+    min-width: 0;
+  }
+
+  .nav-item-meta .nav-url {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .nav-item-actions {
+    display: flex;
+    align-items: center;
+    gap: .35rem;
+  }
+
+  .nav-item-toggle {
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+  }
+
+  .nav-child-zone {
+    margin-top: .35rem;
+    margin-left: 2.9rem;
+    padding: .45rem;
+    border: 1px dashed transparent;
+    border-radius: .45rem;
+  }
+
+  .nav-child-zone.is-over {
+    border-color: rgba(13, 110, 253, .45);
+    background: rgba(13, 110, 253, .07);
+  }
+
+  .nav-children {
+    margin-left: 1.25rem;
+    padding-left: .85rem;
+    border-left: 2px solid rgba(148, 163, 184, .35);
+  }
+
+  .nav-role-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: .5rem .75rem;
+  }
+
+  .nav-role-grid .form-check {
+    min-width: 0;
+  }
+
+  .nav-builder-status {
+    min-height: 1.5rem;
+    color: #64748b;
+    font-size: .9rem;
+  }
+
+  .role-access-table td {
+    vertical-align: top;
+  }
+
+  .role-access-panel .nav-builder-panel-header,
+  .role-access-panel .role-access-table thead,
+  .role-access-panel .role-access-table th {
+    position: static !important;
+    top: auto !important;
+    z-index: auto !important;
+  }
+
+  .role-access-pages {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .35rem;
+  }
+
+  .role-access-page {
+    display: inline-flex;
+    align-items: center;
+    gap: .35rem;
+    max-width: 280px;
+    padding: .25rem .45rem;
+    border: 1px solid rgba(15, 23, 42, .08);
+    border-radius: .35rem;
+    background: #f8fafc;
+    color: #334155;
+    font-size: .82rem;
+    cursor: grab;
+  }
+
+  .role-access-page.is-updating {
+    opacity: .55;
+    pointer-events: none;
+  }
+
+  .role-access-page span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .role-access-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.15rem;
+    height: 1.15rem;
+    flex: 0 0 auto;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: #64748b;
+    padding: 0;
+  }
+
+  .role-access-remove:hover {
+    background: #e2e8f0;
+    color: #b42318;
+  }
+
+  .role-access-drop.is-over td {
+    background: rgba(13, 110, 253, .08);
+  }
+
+  @media (max-width: 992px) {
+    .nav-builder-shell {
+      grid-template-columns: 1fr;
+    }
+  }
+ </style>
+
+<div class="container-fluid nav-builder-page py-4"
      data-nav-endpoint="<?= site_url('api/nav-builder') ?>"
-     data-delete-base="<?= site_url('nav-builder/delete') ?>">
-  <h3>Navbar Builder</h3>
+     data-delete-base="<?= site_url('nav-builder/delete') ?>"
+     data-reorder-endpoint="<?= site_url('nav-builder/reorder') ?>"
+     data-role-access-endpoint="<?= site_url('nav-builder/role-access') ?>">
+  <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
+    <div>
+      <h3 class="mb-1">Navbar Builder</h3>
+      <div class="text-muted">Drag items to reorder them or drop one onto another item to make it a child.</div>
+    </div>
+    <div class="d-flex gap-2">
+      <button class="btn btn-outline-secondary" type="button" id="refreshNavButton">
+        <i class="bi bi-arrow-clockwise me-1"></i>Refresh
+      </button>
+      <button class="btn btn-primary" type="button" id="saveOrderButton" disabled>
+        <i class="bi bi-save me-1"></i>Save order
+      </button>
+    </div>
+  </div>
 
   <?php if (session()->getFlashdata('success')): ?>
     <div class="alert alert-success"><?= esc(session()->getFlashdata('success')) ?></div>
@@ -69,95 +281,123 @@
     <div class="alert alert-danger"><?= esc(session()->getFlashdata('error')) ?></div>
   <?php endif; ?>
 
-  <div class="container-fluid px-0 mt-3">
-    <div class="card mb-4 rounded-0 border-0" id="menuTableCard">
-      <div class="card-header">Current Menu</div>
-      <div class="card-body">
-        <div id="menuTableWrap" class="table-responsive">
-          <table id="menuTable" class="table table-striped table-hover align-middle nowrap" style="width:100%">
-            <thead>
-              <tr>
-                <th>Actions</th>
-                <th>Label</th>
-                <th>URL</th>
-                <th>Parent</th>
-                <th>Roles</th>
-                <th>Order</th>
-                <th>Enabled</th>
-                <th>Depth</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td colspan="8" class="text-center text-muted">Loading menu…</td>
-              </tr>
-            </tbody>
-          </table>
+  <div class="nav-builder-shell">
+    <section class="nav-builder-panel">
+      <div class="nav-builder-panel-header">
+        <div>
+          <h5 class="mb-0">Menu Structure</h5>
+          <div class="nav-builder-status" id="navBuilderStatus">Loading menu...</div>
+        </div>
+        <button class="btn btn-sm btn-outline-primary" type="button" id="newItemButton">
+          <i class="bi bi-plus-lg me-1"></i>New item
+        </button>
+        <button class="btn btn-sm btn-outline-secondary" type="button" id="expandAllButton">
+          <i class="bi bi-arrows-expand me-1"></i>Expand all
+        </button>
+        <button class="btn btn-sm btn-outline-secondary" type="button" id="collapseAllButton">
+          <i class="bi bi-arrows-collapse me-1"></i>Collapse all
+        </button>
+      </div>
+      <div class="nav-builder-panel-body">
+        <div class="nav-tree" id="navTree" aria-live="polite"></div>
+      </div>
+    </section>
+
+    <aside class="nav-builder-panel">
+      <div class="nav-builder-panel-header">
+        <div>
+          <h5 class="mb-0" id="editorTitle">New Item</h5>
+          <div class="text-muted small">Edit the selected menu item.</div>
         </div>
       </div>
-    </div>
-  </div>
+      <div class="nav-builder-panel-body">
+        <form method="post" action="<?= site_url('nav-builder/save') ?>" id="navBuilderForm">
+          <?= csrf_field() ?>
+          <input type="hidden" name="id" id="item_id">
+          <input type="hidden" name="sort_order" id="sort_order" value="0">
 
-  <div class="row">
-    <div class="col-lg-5">
-      <div class="card mb-3">
-        <div class="card-header">Add / Edit Item</div>
-        <div class="card-body">
-          <form method="post" action="<?= site_url('nav-builder/save') ?>" id="navBuilderForm">
-            <?= csrf_field() ?>
-            <input type="hidden" name="id" id="item_id">
+          <div class="mb-3">
+            <label class="form-label" for="label">Label</label>
+            <input class="form-control" name="label" id="label" required>
+          </div>
 
-            <div class="mb-2">
-              <label class="form-label">Parent</label>
-              <select name="menu_parent_id" id="menu_parent_id" class="form-select">
-                <option value="">— Top level —</option>
+          <div class="mb-3">
+            <label class="form-label" for="url">URL</label>
+            <select class="form-select" name="url" id="url">
+              <option value="">No link</option>
+            </select>
+          </div>
+
+          <div class="mb-3">
+            <label class="form-label" for="menu_parent_id">Parent</label>
+            <select name="menu_parent_id" id="menu_parent_id" class="form-select">
+              <option value="">Top level</option>
+            </select>
+          </div>
+
+          <div class="row">
+            <div class="col-md-6 mb-3">
+              <label class="form-label" for="target">Target</label>
+              <select name="target" id="target" class="form-select">
+                <option value="">Default</option>
+                <option value="_self">Same tab</option>
+                <option value="_blank">New tab</option>
               </select>
             </div>
-
-            <div class="mb-2">
-              <label class="form-label">Label</label>
-              <input class="form-control" name="label" id="label" required>
-            </div>
-
-            <div class="mb-2">
-              <label class="form-label">URL (relative or absolute)</label>
-              <input class="form-control" name="url" id="url" placeholder="e.g. administrator/student_profiles">
-            </div>
-
-            <div class="row">
-              <div class="col-md-4 mb-2">
-                <label class="form-label">Target</label>
-                <select name="target" id="target" class="form-select">
-                  <option value="">(default)</option>
-                  <option value="_blank">_blank</option>
-                  <option value="_self">_self</option>
-                </select>
-              </div>
-              <div class="col-md-4 mb-2">
-                <label class="form-label">Order</label>
-                <input class="form-control" type="number" name="sort_order" id="sort_order" value="0">
-              </div>
-              <div class="col-md-4 mb-2 d-flex align-items-end">
-                <div class="form-check">
-                  <input class="form-check-input" type="checkbox" name="is_enabled" id="is_enabled" checked>
-                  <label class="form-check-label">Enabled</label>
-                </div>
+            <div class="col-md-6 mb-3 d-flex align-items-end">
+              <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" name="is_enabled" id="is_enabled" checked>
+                <label class="form-check-label" for="is_enabled">Enabled</label>
               </div>
             </div>
+          </div>
 
-            <div class="mb-2">
-              <label class="form-label">Roles (who can see)</label>
-              <select name="roles[]" id="roles" class="form-select" multiple size="6"></select>
-              <small class="text-muted">Hold Ctrl/⌘ to select multiple.</small>
-            </div>
+          <div class="mb-3">
+            <label class="form-label">Visible to Roles</label>
+            <div class="nav-role-grid" id="roles"></div>
+          </div>
 
-            <button class="btn btn-primary" type="submit">Save</button>
-            <button class="btn btn-secondary" type="button" id="resetFormButton">Reset</button>
-          </form>
-        </div>
+          <div class="d-flex flex-wrap gap-2">
+            <button class="btn btn-primary" type="submit">
+              <i class="bi bi-check-lg me-1"></i>Save item
+            </button>
+            <button class="btn btn-outline-secondary" type="button" id="resetFormButton">Clear</button>
+            <a class="btn btn-outline-danger d-none" href="#" id="deleteItemButton">
+              <i class="bi bi-trash me-1"></i>Delete
+            </a>
+          </div>
+        </form>
+      </div>
+    </aside>
+  </div>
+
+  <section class="nav-builder-panel role-access-panel mt-3">
+    <div class="nav-builder-panel-header">
+      <div>
+        <h5 class="mb-0">Role Access</h5>
+        <div class="text-muted small">Enabled menu pages assigned to each role.</div>
+      </div>
+      <input class="form-control form-control-sm" id="roleAccessSearch" type="search" placeholder="Filter roles or pages" style="max-width: 260px;">
+    </div>
+    <div class="nav-builder-panel-body">
+      <div class="table-responsive">
+        <table class="table table-sm table-hover align-middle role-access-table no-mgmt-sticky mb-0" data-no-mgmt-sticky>
+          <thead>
+            <tr>
+              <th style="width: 220px;">Role</th>
+              <th style="width: 90px;">Pages</th>
+              <th>Access</th>
+            </tr>
+          </thead>
+          <tbody id="roleAccessBody">
+            <tr>
+              <td colspan="3" class="text-muted text-center">Loading access...</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
-  </div>
+  </section>
 </div>
 
 <?= $this->endSection() ?>
@@ -166,252 +406,615 @@
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     const container = document.querySelector('[data-nav-endpoint]');
-    if (!container) {
-      return;
-    }
+    if (!container) return;
 
     const navEndpoint = container.dataset.navEndpoint;
-    const deleteBase = container.dataset.deleteBase;
+    const reorderEndpoint = container.dataset.reorderEndpoint;
+    const roleAccessEndpoint = container.dataset.roleAccessEndpoint;
+    const deleteBase = (container.dataset.deleteBase || '').replace(/\/+$/, '');
 
-    const tableBody = document.querySelector('#menuTable tbody');
-    const parentSelect = document.getElementById('menu_parent_id');
-    const rolesSelect = document.getElementById('roles');
-    const resetButton = document.getElementById('resetFormButton');
+    const treeEl = document.getElementById('navTree');
+    const statusEl = document.getElementById('navBuilderStatus');
     const form = document.getElementById('navBuilderForm');
+    const saveOrderButton = document.getElementById('saveOrderButton');
+    const refreshButton = document.getElementById('refreshNavButton');
+    const newItemButton = document.getElementById('newItemButton');
+    const expandAllButton = document.getElementById('expandAllButton');
+    const collapseAllButton = document.getElementById('collapseAllButton');
+    const resetButton = document.getElementById('resetFormButton');
+    const deleteButton = document.getElementById('deleteItemButton');
+    const parentSelect = document.getElementById('menu_parent_id');
+    const urlSelect = document.getElementById('url');
+    const rolesEl = document.getElementById('roles');
+    const editorTitle = document.getElementById('editorTitle');
+    const roleAccessBody = document.getElementById('roleAccessBody');
+    const roleAccessSearch = document.getElementById('roleAccessSearch');
 
     let items = [];
-    let itemsById = new Map();
+    let roles = [];
+    let routeOptions = [];
+    let selectedId = null;
+    let draggedId = null;
+    let isDirty = false;
+    let collapsedIds = new Set();
+    let accessFilter = '';
+    let draggedAccess = null;
 
-    const hasDataTables = () =>
-      !!(window.jQuery && window.jQuery.fn && window.jQuery.fn.DataTable);
+    const setStatus = (message) => {
+      statusEl.textContent = message;
+    };
 
-    const destroyDataTable = () => {
-      if (!hasDataTables()) return;
-      if (window.jQuery.fn.DataTable.isDataTable('#menuTable')) {
-        window.jQuery('#menuTable').DataTable().clear().destroy();
+    const setDirty = (dirty) => {
+      isDirty = dirty;
+      saveOrderButton.disabled = !dirty;
+      saveOrderButton.classList.toggle('btn-warning', dirty);
+      saveOrderButton.classList.toggle('btn-primary', !dirty);
+      if (dirty) {
+        setStatus('Unsaved order changes');
       }
     };
 
-    const initDataTable = () => {
-      if (!hasDataTables()) return;
-      window.jQuery('#menuTable').DataTable({
-        responsive: true,
-        pageLength: 100,
-        order: [
-          [3, 'asc'],
-          [1, 'asc'],
-        ],
-        stripeClasses: ['odd-row', 'even-row'],
-        columnDefs: [
-          { targets: [7], visible: false, searchable: false }, // depth
-          { targets: [0], orderable: false, searchable: false }, // actions
-          { targets: [3], visible: false }, // parent (used for grouping)
-        ],
-        rowGroup: {
-          dataSrc: 3,
-          startRender: (rows, group) =>
-            `${group} <span class="text-muted">(${rows.count()})</span>`,
-        },
-      });
-    };
-
-    const renderParentOptions = (options) => {
-      if (!parentSelect) return;
-      const selectedValue = parentSelect.value;
-      parentSelect.innerHTML = '<option value="">— Top level —</option>';
-      options
-        .filter((opt) => opt && typeof opt === 'object')
-        .forEach((opt) => {
-          const option = document.createElement('option');
-          option.value = String(opt.id ?? '');
-          option.textContent = opt.label ?? '';
-          parentSelect.appendChild(option);
-        });
-      const existing = Array.from(parentSelect.options).find((opt) => opt.value === selectedValue);
-      if (existing) {
-        parentSelect.value = selectedValue;
+    const updateCsrf = (csrf) => {
+      if (!csrf || !csrf.name || !csrf.hash) return;
+      const tokenInput = form.querySelector(`input[type="hidden"][name="${csrf.name}"]`);
+      if (tokenInput) {
+        tokenInput.value = csrf.hash;
       }
     };
 
-    const renderRolesOptions = (roles) => {
-      if (!rolesSelect) return;
+    const getItem = (id) => items.find((item) => Number(item.id) === Number(id));
 
-      const previouslySelected = Array.from(rolesSelect.selectedOptions).map((opt) => opt.value);
-      rolesSelect.innerHTML = '';
+    const getChildren = (parentId) => items
+      .filter((item) => {
+        const currentParent = item.parent_id === null || item.parent_id === undefined ? null : Number(item.parent_id);
+        return currentParent === parentId;
+      })
+      .sort((a, b) => {
+        const orderDiff = Number(a.order || 0) - Number(b.order || 0);
+        if (orderDiff !== 0) return orderDiff;
+        return String(a.label || '').localeCompare(String(b.label || ''));
+      });
 
-      roles
-        .filter((role) => role && typeof role === 'object')
-        .forEach((role) => {
-          const option = document.createElement('option');
-          option.value = String(role.id ?? '');
-          option.textContent = role.name ?? '';
-          rolesSelect.appendChild(option);
+    const getParentIdsWithChildren = () => items
+      .filter((item) => getChildren(Number(item.id)).length > 0)
+      .map((item) => Number(item.id));
+
+    const collapseAll = () => {
+      collapsedIds = new Set(getParentIdsWithChildren());
+      renderTree();
+    };
+
+    const expandAll = () => {
+      collapsedIds.clear();
+      renderTree();
+    };
+
+    const toggleCollapsed = (id) => {
+      const numericId = Number(id);
+      if (collapsedIds.has(numericId)) {
+        collapsedIds.delete(numericId);
+      } else {
+        collapsedIds.add(numericId);
+      }
+      renderTree();
+    };
+
+    const flattenVisibleTree = (parentId = null, depth = 0, rows = []) => {
+      getChildren(parentId).forEach((item) => {
+        rows.push({ ...item, depth });
+        flattenVisibleTree(Number(item.id), depth + 1, rows);
+      });
+      return rows;
+    };
+
+    const isDescendant = (candidateId, possibleParentId) => {
+      let current = getItem(possibleParentId);
+      while (current) {
+        if (Number(current.id) === Number(candidateId)) {
+          return true;
+        }
+        current = current.parent_id ? getItem(current.parent_id) : null;
+      }
+      return false;
+    };
+
+    const normalizeSiblingOrders = () => {
+      const parentIds = new Set([null]);
+      items.forEach((item) => {
+        parentIds.add(item.parent_id === null || item.parent_id === undefined ? null : Number(item.parent_id));
+      });
+
+      parentIds.forEach((parentId) => {
+        getChildren(parentId).forEach((item, index) => {
+          item.order = (index + 1) * 10;
         });
-
-      Array.from(rolesSelect.options).forEach((option) => {
-        option.selected = previouslySelected.includes(option.value);
       });
     };
 
-    const buildBadge = (text) => {
-      const span = document.createElement('span');
-      span.className = 'badge badge-role me-1 mb-1';
-      span.textContent = text;
-      return span;
+    const nextOrderForParent = (parentId) => {
+      const siblings = getChildren(parentId);
+      if (!siblings.length) {
+        return 10;
+      }
+
+      return Math.max(...siblings.map((item) => Number(item.order || 0))) + 10;
     };
 
-    const renderTable = () => {
-      if (!tableBody) return;
+    const moveItem = (movingId, targetParentId, beforeId = null) => {
+      if (!movingId) return;
+      const moving = getItem(movingId);
+      if (!moving) return;
 
-      destroyDataTable();
-      itemsById = new Map();
-      tableBody.innerHTML = '';
-
-      if (!Array.isArray(items) || items.length === 0) {
-        const row = document.createElement('tr');
-        const cell = document.createElement('td');
-        cell.colSpan = 8;
-        cell.classList.add('text-center', 'text-muted');
-        cell.textContent = 'No menu items found.';
-        row.appendChild(cell);
-        tableBody.appendChild(row);
+      const normalizedParentId = targetParentId === null || targetParentId === undefined ? null : Number(targetParentId);
+      if (normalizedParentId !== null && (Number(movingId) === normalizedParentId || isDescendant(movingId, normalizedParentId))) {
+        setStatus('Cannot move an item inside itself.');
         return;
       }
 
-      items.forEach((item) => {
-        itemsById.set(item.id, item);
+      moving.parent_id = normalizedParentId;
+      if (normalizedParentId !== null) {
+        collapsedIds.delete(normalizedParentId);
+      }
+      normalizeSiblingOrders();
 
-        const tr = document.createElement('tr');
-        tr.dataset.itemId = item.id ?? '';
+      const siblings = getChildren(normalizedParentId).filter((item) => Number(item.id) !== Number(movingId));
+      const foundIndex = beforeId === null
+        ? siblings.length
+        : siblings.findIndex((item) => Number(item.id) === Number(beforeId));
+      const insertIndex = foundIndex < 0 ? siblings.length : foundIndex;
 
-        const actionsTd = document.createElement('td');
-        actionsTd.classList.add('text-nowrap');
-        const editBtn = document.createElement('button');
-        editBtn.type = 'button';
-        editBtn.className = 'btn btn-sm btn-outline-primary me-1';
-        editBtn.textContent = 'Edit';
-        editBtn.addEventListener('click', () => editItemById(item.id));
-        actionsTd.appendChild(editBtn);
-
-        const deleteLink = document.createElement('a');
-        const sanitizedBase = (deleteBase || '').replace(/\/+$/, '');
-        deleteLink.href = `${sanitizedBase}/${item.id}`;
-        deleteLink.className = 'btn btn-sm btn-outline-danger';
-        deleteLink.textContent = 'Delete';
-        deleteLink.addEventListener('click', (event) => {
-          if (!confirm('Delete?')) {
-            event.preventDefault();
-          }
-        });
-        actionsTd.appendChild(deleteLink);
-        tr.appendChild(actionsTd);
-
-        const labelTd = document.createElement('td');
-        labelTd.dataset.order = (item.label ?? '').toLowerCase();
-        const indentSpan = document.createElement('span');
-        indentSpan.classList.add('text-muted');
-        indentSpan.textContent = '— '.repeat(item.depth ?? 0);
-        labelTd.appendChild(indentSpan);
-        labelTd.appendChild(document.createTextNode(item.label ?? ''));
-        tr.appendChild(labelTd);
-
-        const urlTd = document.createElement('td');
-        if (item.url) {
-          urlTd.textContent = item.url;
-        } else {
-          urlTd.innerHTML = '<span class="text-muted">—</span>';
-        }
-        tr.appendChild(urlTd);
-
-        const parentTd = document.createElement('td');
-        parentTd.textContent = item.parent_label ?? '—';
-        tr.appendChild(parentTd);
-
-        const rolesTd = document.createElement('td');
-        if (Array.isArray(item.roles?.names) && item.roles.names.length > 0) {
-          item.roles.names.forEach((roleName) => {
-            if (!roleName) return;
-            rolesTd.appendChild(buildBadge(roleName));
-          });
-        } else {
-          rolesTd.innerHTML = '<span class="text-muted">—</span>';
-        }
-        tr.appendChild(rolesTd);
-
-        const orderTd = document.createElement('td');
-        orderTd.textContent = Number.isFinite(item.order) ? item.order : 0;
-        tr.appendChild(orderTd);
-
-        const enabledTd = document.createElement('td');
-        if (item.enabled) {
-          enabledTd.innerHTML = '<span class="badge bg-success">Yes</span>';
-        } else {
-          enabledTd.innerHTML = '<span class="badge bg-light text-dark">No</span>';
-        }
-        tr.appendChild(enabledTd);
-
-        const depthTd = document.createElement('td');
-        depthTd.textContent = item.depth ?? 0;
-        tr.appendChild(depthTd);
-
-        tableBody.appendChild(tr);
+      siblings.splice(insertIndex, 0, moving);
+      siblings.forEach((item, index) => {
+        item.order = (index + 1) * 10;
       });
 
-      initDataTable();
+      selectedId = Number(movingId);
+      document.getElementById('sort_order').value = String(moving.order || 0);
+      renderTree();
+      renderParentOptions();
+      renderRoleAccessTable();
+      setDirty(true);
+    };
+
+    const clearDropState = () => {
+      document.querySelectorAll('.nav-drop-zone.is-over, .nav-child-zone.is-over')
+        .forEach((el) => el.classList.remove('is-over'));
+    };
+
+    const attachDropHandlers = (element, onDrop) => {
+      element.addEventListener('dragover', (event) => {
+        event.preventDefault();
+        element.classList.add('is-over');
+      });
+      element.addEventListener('dragleave', () => {
+        element.classList.remove('is-over');
+      });
+      element.addEventListener('drop', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        clearDropState();
+        onDrop();
+      });
+    };
+
+    const renderDropZone = (parent, targetParentId, beforeId = null) => {
+      const zone = document.createElement('div');
+      zone.className = 'nav-drop-zone';
+      attachDropHandlers(zone, () => moveItem(draggedId, targetParentId, beforeId));
+      parent.appendChild(zone);
+    };
+
+    const renderBranch = (parent, parentId = null) => {
+      const children = getChildren(parentId);
+      children.forEach((item) => {
+        renderDropZone(parent, parentId, Number(item.id));
+
+        const wrapper = document.createElement('div');
+        wrapper.className = 'nav-node';
+
+        const row = document.createElement('div');
+        row.className = 'nav-item-row';
+        row.draggable = true;
+        row.dataset.itemId = item.id;
+        if (Number(item.id) === Number(selectedId)) {
+          row.classList.add('is-selected');
+        }
+
+        row.addEventListener('click', () => selectItem(item.id));
+        row.addEventListener('dragstart', (event) => {
+          draggedId = Number(item.id);
+          row.classList.add('is-dragging');
+          event.dataTransfer.effectAllowed = 'move';
+          event.dataTransfer.setData('text/plain', String(item.id));
+        });
+        row.addEventListener('dragend', () => {
+          draggedId = null;
+          row.classList.remove('is-dragging');
+          clearDropState();
+        });
+
+        const handle = document.createElement('span');
+        handle.className = 'nav-item-handle';
+        handle.title = 'Drag';
+        handle.innerHTML = '<i class="bi bi-grip-vertical"></i>';
+        row.appendChild(handle);
+
+        const main = document.createElement('div');
+        main.className = 'nav-item-main';
+
+        const title = document.createElement('div');
+        title.className = 'nav-item-title';
+        title.innerHTML = item.enabled
+          ? '<i class="bi bi-circle-fill text-success small"></i>'
+          : '<i class="bi bi-circle text-muted small"></i>';
+        const label = document.createElement('span');
+        label.textContent = item.label || '(Untitled)';
+        title.appendChild(label);
+        main.appendChild(title);
+
+        const meta = document.createElement('div');
+        meta.className = 'nav-item-meta';
+        const childCount = getChildren(Number(item.id)).length;
+        meta.innerHTML = `<span>${childCount} child${childCount === 1 ? '' : 'ren'}</span>`;
+        const url = document.createElement('span');
+        url.className = 'nav-url';
+        url.textContent = item.url || 'No URL';
+        meta.appendChild(url);
+        main.appendChild(meta);
+        row.appendChild(main);
+
+        const actions = document.createElement('div');
+        actions.className = 'nav-item-actions';
+        if (childCount > 0) {
+          const toggleButton = document.createElement('button');
+          const isCollapsed = collapsedIds.has(Number(item.id));
+          toggleButton.type = 'button';
+          toggleButton.className = 'btn btn-sm btn-outline-secondary nav-item-toggle';
+          toggleButton.title = isCollapsed ? 'Expand' : 'Collapse';
+          toggleButton.setAttribute('aria-label', isCollapsed ? 'Expand item' : 'Collapse item');
+          toggleButton.innerHTML = isCollapsed
+            ? '<i class="bi bi-chevron-right"></i>'
+            : '<i class="bi bi-chevron-down"></i>';
+          toggleButton.addEventListener('click', (event) => {
+            event.stopPropagation();
+            toggleCollapsed(item.id);
+          });
+          actions.appendChild(toggleButton);
+        }
+
+        const childDrop = document.createElement('button');
+        childDrop.type = 'button';
+        childDrop.className = 'btn btn-sm btn-outline-secondary';
+        childDrop.title = 'Select';
+        childDrop.innerHTML = '<i class="bi bi-pencil"></i>';
+        childDrop.addEventListener('click', (event) => {
+          event.stopPropagation();
+          selectItem(item.id);
+        });
+        actions.appendChild(childDrop);
+        row.appendChild(actions);
+
+        wrapper.appendChild(row);
+
+        const childZone = document.createElement('div');
+        childZone.className = 'nav-child-zone text-muted small';
+        childZone.textContent = childCount > 0 && collapsedIds.has(Number(item.id))
+          ? `Drop here to place under ${item.label || 'this item'} (${childCount} hidden)`
+          : 'Drop here to place under ' + (item.label || 'this item');
+        attachDropHandlers(childZone, () => moveItem(draggedId, Number(item.id)));
+        wrapper.appendChild(childZone);
+
+        if (!collapsedIds.has(Number(item.id))) {
+          const branch = document.createElement('div');
+          branch.className = 'nav-children';
+          renderBranch(branch, Number(item.id));
+          if (branch.children.length > 0) {
+            wrapper.appendChild(branch);
+          }
+        }
+
+        parent.appendChild(wrapper);
+      });
+
+      renderDropZone(parent, parentId, null);
+    };
+
+    const renderTree = () => {
+      treeEl.innerHTML = '';
+
+      if (!items.length) {
+        const empty = document.createElement('div');
+        empty.className = 'nav-tree-empty';
+        empty.textContent = 'No menu items yet.';
+        treeEl.appendChild(empty);
+        attachDropHandlers(empty, () => moveItem(draggedId, null));
+        return;
+      }
+
+      renderBranch(treeEl, null);
+      const count = items.length;
+      if (!isDirty) {
+        setStatus(`${count} menu item${count === 1 ? '' : 's'}`);
+      }
+    };
+
+    const renderParentOptions = () => {
+      const currentValue = parentSelect.value;
+      parentSelect.innerHTML = '<option value="">Top level</option>';
+
+      flattenVisibleTree().forEach((item) => {
+        if (selectedId && Number(item.id) === Number(selectedId)) {
+          return;
+        }
+        if (selectedId && isDescendant(selectedId, Number(item.id))) {
+          return;
+        }
+        const option = document.createElement('option');
+        option.value = String(item.id);
+        option.textContent = `${'-- '.repeat(item.depth || 0)}${item.label || '(Untitled)'}`;
+        parentSelect.appendChild(option);
+      });
+
+      if (Array.from(parentSelect.options).some((option) => option.value === currentValue)) {
+        parentSelect.value = currentValue;
+      }
+    };
+
+    const normalizeRouteValue = (value) => String(value || '').replace(/^\/+/, '');
+
+    const renderRouteOptions = (selectedUrl = '') => {
+      const selectedValue = normalizeRouteValue(selectedUrl);
+      urlSelect.innerHTML = '<option value="">No link</option>';
+
+      const hasSelectedValue = routeOptions.some((route) => normalizeRouteValue(route.value) === selectedValue);
+      if (selectedValue && !hasSelectedValue) {
+        const currentOption = document.createElement('option');
+        currentOption.value = selectedValue;
+        currentOption.textContent = `Current custom URL: ${selectedValue}`;
+        urlSelect.appendChild(currentOption);
+      }
+
+      routeOptions.forEach((route) => {
+        const option = document.createElement('option');
+        option.value = normalizeRouteValue(route.value);
+        option.textContent = route.needs_params
+          ? `${route.label} - ${route.value} (needs value)`
+          : `${route.label} - ${route.value}`;
+        urlSelect.appendChild(option);
+      });
+
+      urlSelect.value = selectedValue;
+    };
+
+    const renderRoles = (selectedIds = []) => {
+      const selectedLookup = new Set(selectedIds.map((id) => String(id)));
+      rolesEl.innerHTML = '';
+
+      roles.forEach((role) => {
+        const id = `role-${role.id}`;
+        const wrapper = document.createElement('div');
+        wrapper.className = 'form-check';
+        wrapper.innerHTML = `
+          <input class="form-check-input" type="checkbox" name="roles[]" id="${id}" value="${role.id}">
+          <label class="form-check-label text-truncate" for="${id}"></label>
+        `;
+        const input = wrapper.querySelector('input');
+        const label = wrapper.querySelector('label');
+        input.checked = selectedLookup.has(String(role.id));
+        label.textContent = role.name || ('Role #' + role.id);
+        rolesEl.appendChild(wrapper);
+      });
+    };
+
+    const renderRoleAccessTable = () => {
+      const normalizedFilter = accessFilter.trim().toLowerCase();
+      roleAccessBody.innerHTML = '';
+
+      const rows = roles.map((role) => {
+        const pages = flattenVisibleTree()
+          .filter((item) => item.enabled && Array.isArray(item.roles?.ids) && item.roles.ids.map(String).includes(String(role.id)))
+          .map((item) => ({
+            id: item.id,
+            label: item.label || '(Untitled)',
+            url: item.url || '',
+            depth: item.depth || 0,
+          }));
+
+        return {
+          role,
+          pages,
+          searchText: [
+            role.name || '',
+            ...pages.flatMap((page) => [page.label, page.url]),
+          ].join(' ').toLowerCase(),
+        };
+      }).filter((row) => !normalizedFilter || row.searchText.includes(normalizedFilter));
+
+      if (!rows.length) {
+        const emptyRow = document.createElement('tr');
+        emptyRow.innerHTML = '<td colspan="3" class="text-muted text-center">No matching role access found.</td>';
+        roleAccessBody.appendChild(emptyRow);
+        return;
+      }
+
+      rows.forEach((row) => {
+        const tr = document.createElement('tr');
+        tr.className = 'role-access-drop';
+        tr.dataset.roleId = row.role.id;
+
+        tr.addEventListener('dragover', (event) => {
+          if (!draggedAccess || Number(draggedAccess.sourceRoleId) === Number(row.role.id)) return;
+          event.preventDefault();
+          tr.classList.add('is-over');
+        });
+        tr.addEventListener('dragleave', () => {
+          tr.classList.remove('is-over');
+        });
+        tr.addEventListener('drop', (event) => {
+          event.preventDefault();
+          tr.classList.remove('is-over');
+          if (!draggedAccess || Number(draggedAccess.sourceRoleId) === Number(row.role.id)) return;
+          updateRoleAccess({
+            action: 'move',
+            navItemId: draggedAccess.navItemId,
+            sourceRoleId: draggedAccess.sourceRoleId,
+            targetRoleId: row.role.id,
+          });
+        });
+
+        const roleCell = document.createElement('td');
+        roleCell.className = 'fw-semibold';
+        roleCell.textContent = row.role.name || ('Role #' + row.role.id);
+        tr.appendChild(roleCell);
+
+        const countCell = document.createElement('td');
+        countCell.textContent = String(row.pages.length);
+        tr.appendChild(countCell);
+
+        const pagesCell = document.createElement('td');
+        if (!row.pages.length) {
+          pagesCell.innerHTML = '<span class="text-muted">No enabled pages assigned</span>';
+        } else {
+          const wrap = document.createElement('div');
+          wrap.className = 'role-access-pages';
+          row.pages.forEach((page) => {
+            const badge = document.createElement('span');
+            badge.className = 'role-access-page';
+            badge.draggable = true;
+            badge.dataset.navItemId = page.id;
+            badge.dataset.roleId = row.role.id;
+            badge.title = page.url ? `${page.label} - ${page.url}` : page.label;
+
+            badge.addEventListener('dragstart', (event) => {
+              draggedAccess = {
+                navItemId: page.id,
+                sourceRoleId: row.role.id,
+              };
+              badge.classList.add('is-updating');
+              event.dataTransfer.effectAllowed = 'move';
+              event.dataTransfer.setData('text/plain', JSON.stringify(draggedAccess));
+            });
+            badge.addEventListener('dragend', () => {
+              draggedAccess = null;
+              badge.classList.remove('is-updating');
+              document.querySelectorAll('.role-access-drop.is-over').forEach((el) => el.classList.remove('is-over'));
+            });
+
+            const text = document.createElement('span');
+            text.textContent = `${'-- '.repeat(page.depth)}${page.label}${page.url ? ` (${page.url})` : ''}`;
+            badge.appendChild(text);
+
+            const removeButton = document.createElement('button');
+            removeButton.type = 'button';
+            removeButton.className = 'role-access-remove';
+            removeButton.title = 'Remove access';
+            removeButton.setAttribute('aria-label', 'Remove access');
+            removeButton.innerHTML = '<i class="bi bi-x"></i>';
+            removeButton.addEventListener('click', (event) => {
+              event.stopPropagation();
+              updateRoleAccess({
+                action: 'remove',
+                navItemId: page.id,
+                sourceRoleId: row.role.id,
+              });
+            });
+            badge.appendChild(removeButton);
+
+            wrap.appendChild(badge);
+          });
+          pagesCell.appendChild(wrap);
+        }
+        tr.appendChild(pagesCell);
+
+        roleAccessBody.appendChild(tr);
+      });
+    };
+
+    const applyPayload = (payload) => {
+      items = Array.isArray(payload?.items) ? payload.items.map(normalizePayloadItem) : [];
+      roles = Array.isArray(payload?.roles) ? payload.roles : [];
+      routeOptions = Array.isArray(payload?.routeOptions) ? payload.routeOptions : [];
+    };
+
+    const normalizePayloadItem = (item) => ({
+      ...item,
+      id: Number(item.id),
+      parent_id: item.parent_id === null || item.parent_id === undefined ? null : Number(item.parent_id),
+      order: Number(item.order || 0),
+    });
+
+    const mergeSavedItemFromPayload = (payload, savedId) => {
+      roles = Array.isArray(payload?.roles) ? payload.roles : roles;
+      routeOptions = Array.isArray(payload?.routeOptions) ? payload.routeOptions : routeOptions;
+
+      const savedItem = Array.isArray(payload?.items)
+        ? payload.items.find((item) => Number(item.id) === Number(savedId))
+        : null;
+      if (!savedItem) return;
+
+      const normalized = normalizePayloadItem(savedItem);
+      const existingIndex = items.findIndex((item) => Number(item.id) === Number(savedId));
+      if (existingIndex >= 0) {
+        items[existingIndex] = normalized;
+      } else {
+        items.push(normalized);
+      }
+    };
+
+    const renderCurrentState = () => {
+      renderRouteOptions(selectedId ? (getItem(selectedId)?.url || '') : '');
+      renderRoles(selectedId && getItem(selectedId) && Array.isArray(getItem(selectedId).roles?.ids)
+        ? getItem(selectedId).roles.ids
+        : []);
+      renderParentOptions();
+      if (selectedId && getItem(selectedId)) {
+        parentSelect.value = getItem(selectedId).parent_id ? String(getItem(selectedId).parent_id) : '';
+      }
+      renderRoleAccessTable();
+      renderTree();
     };
 
     const resetForm = () => {
-      if (!form) return;
       form.reset();
-      const idField = document.getElementById('item_id');
-      if (idField) idField.value = '';
-      if (parentSelect) parentSelect.value = '';
-      if (rolesSelect) {
-        Array.from(rolesSelect.options).forEach((option) => {
-          option.selected = false;
-        });
-      }
+      selectedId = null;
+      document.getElementById('item_id').value = '';
+      document.getElementById('sort_order').value = String(nextOrderForParent(null));
+      renderRouteOptions('');
+      parentSelect.value = '';
+      editorTitle.textContent = 'New Item';
+      deleteButton.classList.add('d-none');
+      deleteButton.href = '#';
+      renderRoles([]);
+      renderParentOptions();
+      renderRoleAccessTable();
+      renderTree();
     };
 
-    const editItemById = (id) => {
-      const item = itemsById.get(id);
+    const selectItem = (id) => {
+      const item = getItem(id);
       if (!item) return;
 
-      resetForm();
-
-      document.getElementById('item_id').value = item.id ?? '';
-      document.getElementById('menu_parent_id').value =
-        item.parent_id !== null && item.parent_id !== undefined
-          ? String(item.parent_id)
-          : '';
-      document.getElementById('label').value = item.label ?? '';
-      document.getElementById('url').value = item.url ?? '';
-      document.getElementById('target').value = item.target ?? '';
-      document.getElementById('sort_order').value =
-        Number.isFinite(item.order) ? item.order : 0;
+      selectedId = Number(id);
+      editorTitle.textContent = 'Edit Item';
+      document.getElementById('item_id').value = item.id || '';
+      document.getElementById('label').value = item.label || '';
+      renderRouteOptions(item.url || '');
+      document.getElementById('sort_order').value = Number(item.order || 0);
+      document.getElementById('target').value = item.target || '';
       document.getElementById('is_enabled').checked = !!item.enabled;
-
-      if (rolesSelect && Array.isArray(item.roles?.ids)) {
-        const ids = item.roles.ids.map((value) => String(value));
-        Array.from(rolesSelect.options).forEach((option) => {
-          option.selected = ids.includes(option.value);
-        });
-      }
-
-      window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-      });
+      parentSelect.value = item.parent_id ? String(item.parent_id) : '';
+      deleteButton.href = `${deleteBase}/${item.id}`;
+      deleteButton.classList.remove('d-none');
+      renderRoles(Array.isArray(item.roles?.ids) ? item.roles.ids : []);
+      renderParentOptions();
+      parentSelect.value = item.parent_id ? String(item.parent_id) : '';
+      renderRoleAccessTable();
+      renderTree();
     };
 
     const fetchNavData = () => {
-      if (!navEndpoint) return;
-
-      tableBody.innerHTML = `
-        <tr>
-          <td colspan="8" class="text-center text-muted">Loading menu…</td>
-        </tr>
-      `;
+      setStatus('Loading menu...');
+      treeEl.innerHTML = '<div class="nav-tree-empty">Loading menu...</div>';
 
       return fetch(navEndpoint, {
         headers: { 'Accept': 'application/json' },
@@ -424,27 +1027,206 @@
           return response.json();
         })
         .then((payload) => {
-          items = Array.isArray(payload?.items) ? payload.items : [];
-          renderParentOptions(payload?.parentOptions ?? []);
-          renderRolesOptions(payload?.roles ?? []);
-          renderTable();
+          applyPayload(payload);
+          collapsedIds = new Set(getParentIdsWithChildren());
+          setDirty(false);
+          renderRouteOptions('');
+          renderRoles([]);
+          renderParentOptions();
+          renderRoleAccessTable();
           resetForm();
         })
         .catch((error) => {
           console.error(error);
-          tableBody.innerHTML = `
-            <tr>
-              <td colspan="8" class="text-center text-danger">
-                Failed to load menu items.
-              </td>
-            </tr>
-          `;
+          treeEl.innerHTML = '<div class="nav-tree-empty text-danger">Failed to load menu items.</div>';
+          setStatus('Load failed');
         });
     };
 
-    if (resetButton) {
-      resetButton.addEventListener('click', resetForm);
-    }
+    const saveOrder = () => {
+      normalizeSiblingOrders();
+      const payloadRows = flattenVisibleTree();
+      const formData = new FormData();
+      const csrf = form.querySelector('input[type="hidden"][name]:not(#item_id):not(#sort_order)');
+      if (csrf) {
+        formData.append(csrf.name, csrf.value);
+      }
+
+      payloadRows.forEach((item, index) => {
+        formData.append(`structure[${index}][id]`, item.id);
+        formData.append(`structure[${index}][parent_id]`, item.parent_id === null ? '' : item.parent_id);
+        formData.append(`structure[${index}][sort_order]`, item.order);
+      });
+
+      saveOrderButton.disabled = true;
+      setStatus('Saving order...');
+
+      fetch(reorderEndpoint, {
+        method: 'POST',
+        body: formData,
+        credentials: 'same-origin',
+        headers: { 'Accept': 'application/json' },
+      })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`Request failed with status ${response.status}`);
+          }
+          return response.json();
+        })
+        .then((payload) => {
+          updateCsrf(payload.csrf);
+          setDirty(false);
+          setStatus('Order saved');
+          fetchNavData();
+        })
+        .catch((error) => {
+          console.error(error);
+          saveOrderButton.disabled = false;
+          setStatus('Order save failed');
+        });
+    };
+
+    const saveItem = (event) => {
+      event.preventDefault();
+
+      const submitButton = form.querySelector('button[type="submit"]');
+      const previousSelection = selectedId;
+      const hadUnsavedOrder = isDirty;
+      const formData = new FormData(form);
+
+      submitButton.disabled = true;
+      setStatus('Saving item...');
+
+      fetch(form.action, {
+        method: 'POST',
+        body: formData,
+        credentials: 'same-origin',
+        headers: {
+          'Accept': 'application/json',
+          'X-Requested-With': 'XMLHttpRequest',
+        },
+      })
+        .then((response) => {
+          if (!response.ok) {
+            return response.json()
+              .catch(() => ({}))
+              .then((payload) => {
+                throw new Error(payload.message || `Request failed with status ${response.status}`);
+              });
+          }
+          return response.json();
+        })
+        .then((payload) => {
+          updateCsrf(payload.csrf);
+          const savedId = Number(payload.id || previousSelection || 0);
+          if (payload.payload) {
+            if (hadUnsavedOrder) {
+              mergeSavedItemFromPayload(payload.payload, savedId);
+            } else {
+              applyPayload(payload.payload);
+            }
+          }
+
+          setDirty(hadUnsavedOrder);
+          renderRouteOptions('');
+          renderRoles([]);
+          renderParentOptions();
+          renderRoleAccessTable();
+          renderTree();
+
+          if (savedId > 0 && getItem(savedId)) {
+            selectItem(savedId);
+          }
+
+          setStatus(hadUnsavedOrder ? 'Item saved. Order changes still need saving.' : (payload.message || 'Item saved'));
+        })
+        .catch((error) => {
+          console.error(error);
+          setStatus(error.message || 'Item save failed');
+        })
+        .finally(() => {
+          submitButton.disabled = false;
+        });
+    };
+
+    const updateRoleAccess = ({ action, navItemId, sourceRoleId, targetRoleId = null }) => {
+      const formData = new FormData();
+      const csrf = form.querySelector('input[type="hidden"][name]:not(#item_id):not(#sort_order)');
+      if (csrf) {
+        formData.append(csrf.name, csrf.value);
+      }
+      formData.append('action', action);
+      formData.append('nav_item_id', navItemId);
+      formData.append('source_role_id', sourceRoleId);
+      if (targetRoleId !== null) {
+        formData.append('target_role_id', targetRoleId);
+      }
+
+      setStatus(action === 'remove' ? 'Removing role access...' : 'Moving role access...');
+
+      fetch(roleAccessEndpoint, {
+        method: 'POST',
+        body: formData,
+        credentials: 'same-origin',
+        headers: {
+          'Accept': 'application/json',
+          'X-Requested-With': 'XMLHttpRequest',
+        },
+      })
+        .then((response) => {
+          if (!response.ok) {
+            return response.json()
+              .catch(() => ({}))
+              .then((payload) => {
+                throw new Error(payload.message || `Request failed with status ${response.status}`);
+              });
+          }
+          return response.json();
+        })
+        .then((payload) => {
+          updateCsrf(payload.csrf);
+          if (payload.payload) {
+            applyPayload(payload.payload);
+          }
+          renderCurrentState();
+          setStatus(payload.message || 'Role access updated');
+        })
+        .catch((error) => {
+          console.error(error);
+          setStatus(error.message || 'Role access update failed');
+          renderRoleAccessTable();
+        });
+    };
+
+    parentSelect.addEventListener('change', () => {
+      const nextParent = parentSelect.value ? Number(parentSelect.value) : null;
+      if (!selectedId) {
+        document.getElementById('sort_order').value = String(nextOrderForParent(nextParent));
+        return;
+      }
+
+      const item = getItem(selectedId);
+      if (!item) return;
+      moveItem(item.id, nextParent);
+    });
+
+    deleteButton.addEventListener('click', (event) => {
+      if (!selectedId || !confirm('Delete this menu item?')) {
+        event.preventDefault();
+      }
+    });
+
+    form.addEventListener('submit', saveItem);
+    saveOrderButton.addEventListener('click', saveOrder);
+    refreshButton.addEventListener('click', fetchNavData);
+    newItemButton.addEventListener('click', resetForm);
+    expandAllButton.addEventListener('click', expandAll);
+    collapseAllButton.addEventListener('click', collapseAll);
+    resetButton.addEventListener('click', resetForm);
+    roleAccessSearch.addEventListener('input', () => {
+      accessFilter = roleAccessSearch.value;
+      renderRoleAccessTable();
+    });
 
     fetchNavData();
   });