diff --git a/app/ui/templates/components/staff_navigation_v2.html b/app/ui/templates/components/staff_navigation_v2.html
index aa0e637..47dc226 100644
--- a/app/ui/templates/components/staff_navigation_v2.html
+++ b/app/ui/templates/components/staff_navigation_v2.html
@@ -131,3 +131,265 @@
 })();
 </script>
 {% endif %}
+
+
+{# STAFF_NAV_GROUPING_ONEFILE_V1
+   One-file employee navigation grouping.
+   Existing routes, Jinja permission checks and feature visibility are preserved.
+#}
+
+<style>
+  .staff-nav-v2-grouped {
+    display: flex;
+    align-items: stretch;
+    gap: .35rem;
+    min-width: 0;
+  }
+
+  .staff-nav-v2-grouped > a,
+  .staff-nav-v2-grouped summary {
+    display: inline-flex;
+    min-height: 3.25rem;
+    align-items: center;
+    gap: .35rem;
+    padding: 0 .8rem;
+    border-bottom: 2px solid transparent;
+    color: rgb(30 41 59);
+    font-size: .95rem;
+    font-weight: 500;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    list-style: none;
+  }
+
+  .staff-nav-v2-grouped summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .staff-nav-v2-grouped > a:hover,
+  .staff-nav-v2-grouped summary:hover,
+  .staff-nav-v2-grouped > a[data-nav-active="1"],
+  .staff-nav-v2-grouped details[data-nav-active="1"] > summary {
+    color: rgb(15 23 42);
+    border-bottom-color: rgb(37 99 235);
+  }
+
+  .staff-nav-v2-group {
+    position: relative;
+  }
+
+  .staff-nav-v2-group-menu {
+    position: absolute;
+    z-index: 70;
+    top: calc(100% + .3rem);
+    left: 0;
+    min-width: 14rem;
+    padding: .5rem;
+    border: 1px solid rgb(226 232 240);
+    border-radius: 1rem;
+    background: white;
+    box-shadow: 0 14px 32px rgba(15, 23, 42, .14);
+  }
+
+  .staff-nav-v2-group-menu a {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding: .65rem .75rem;
+    border-radius: .65rem;
+    color: rgb(51 65 85);
+    font-size: .9rem;
+    font-weight: 500;
+    text-decoration: none;
+  }
+
+  .staff-nav-v2-group-menu a:hover,
+  .staff-nav-v2-group-menu a[data-nav-active="1"] {
+    background: rgb(248 250 252);
+    color: rgb(15 23 42);
+  }
+
+  .staff-nav-v2-group-caret {
+    font-size: .65rem;
+    color: rgb(100 116 139);
+  }
+
+  [data-staff-nav-v2-original="1"] {
+    display: none !important;
+  }
+
+  @media (max-width: 1100px) {
+    .staff-nav-v2-grouped {
+      overflow-x: auto;
+      scrollbar-width: thin;
+    }
+  }
+</style>
+
+<script>
+(function () {
+  "use strict";
+
+  function normalizeLabel(value) {
+    return (value || "").replace(/\s+/g, " ").trim().toLowerCase();
+  }
+
+  function activeFor(anchor) {
+    try {
+      const current = window.location.pathname.replace(/\/+$/, "") || "/";
+      const target = new URL(anchor.href, window.location.origin).pathname.replace(/\/+$/, "") || "/";
+      return current === target || (target !== "/" && current.startsWith(target + "/"));
+    } catch (_) {
+      return false;
+    }
+  }
+
+  function findNavigationRoot() {
+    const candidates = Array.from(document.querySelectorAll("nav, header, div"));
+    for (const node of candidates) {
+      const ownAnchors = Array.from(node.querySelectorAll("a[href]"));
+      if (!ownAnchors.length) continue;
+      const labels = new Set(ownAnchors.map(function (a) { return normalizeLabel(a.textContent); }));
+      if (
+        labels.has("work") &&
+        labels.has("attendance") &&
+        labels.has("leave") &&
+        labels.has("profile") &&
+        labels.has("bank analyzer")
+      ) {
+        return node;
+      }
+    }
+    return null;
+  }
+
+  function findLink(anchors, names) {
+    const wanted = names.map(normalizeLabel);
+    return anchors.find(function (a) {
+      return wanted.includes(normalizeLabel(a.textContent));
+    }) || null;
+  }
+
+  function cleanClone(source, displayName) {
+    if (!source) return null;
+    const a = source.cloneNode(true);
+    a.className = "";
+    a.textContent = displayName || source.textContent.trim();
+    if (activeFor(source)) a.setAttribute("data-nav-active", "1");
+    return a;
+  }
+
+  function makeGroup(title, sources) {
+    const links = sources.filter(Boolean);
+    if (!links.length) return null;
+
+    const details = document.createElement("details");
+    details.className = "staff-nav-v2-group";
+
+    const summary = document.createElement("summary");
+    summary.appendChild(document.createTextNode(title));
+
+    const caret = document.createElement("span");
+    caret.className = "staff-nav-v2-group-caret";
+    caret.textContent = "▼";
+    summary.appendChild(caret);
+    details.appendChild(summary);
+
+    const menu = document.createElement("div");
+    menu.className = "staff-nav-v2-group-menu";
+
+    let active = false;
+    links.forEach(function (source) {
+      const item = cleanClone(source);
+      if (item && item.getAttribute("data-nav-active") === "1") active = true;
+      if (item) menu.appendChild(item);
+    });
+
+    if (active) details.setAttribute("data-nav-active", "1");
+    details.appendChild(menu);
+    return details;
+  }
+
+  function install() {
+    if (document.querySelector("[data-staff-nav-v2-grouped='1']")) return;
+
+    const root = findNavigationRoot();
+    if (!root) return;
+
+    const links = Array.from(root.querySelectorAll("a[href]"));
+
+    const dashboard = findLink(links, ["Dashboard", "Overview"]);
+    const work = findLink(links, ["Work", "My Work"]);
+    const attendance = findLink(links, ["Attendance"]);
+    const leave = findLink(links, ["Leave"]);
+    const documents = findLink(links, ["Documents"]);
+    const payslips = findLink(links, ["Payslips", "Payslip"]);
+    const offboarding = findLink(links, ["Offboarding"]);
+    const profile = findLink(links, ["Profile"]);
+    const bankAnalyzer = findLink(links, ["Bank Analyzer"]);
+    const reports = findLink(links, ["Reports", "My Reports"]);
+    const alerts = findLink(links, ["Alerts"]);
+
+    if (!work || !attendance || !leave || !profile) return;
+
+    const grouped = document.createElement("nav");
+    grouped.className = "staff-nav-v2-grouped";
+    grouped.setAttribute("data-staff-nav-v2-grouped", "1");
+    grouped.setAttribute("aria-label", "Employee portal navigation");
+
+    const dashboardLink = cleanClone(dashboard, "Dashboard");
+    if (dashboardLink) grouped.appendChild(dashboardLink);
+
+    const workLink = cleanClone(work, "Work");
+    if (workLink) grouped.appendChild(workLink);
+
+    const attendanceGroup = makeGroup("Attendance & Leave", [attendance, leave]);
+    if (attendanceGroup) grouped.appendChild(attendanceGroup);
+
+    const profileGroup = makeGroup(
+      "Profile & HR",
+      [profile, documents, payslips, offboarding]
+    );
+    if (profileGroup) grouped.appendChild(profileGroup);
+
+    const toolsGroup = makeGroup("Tools", [bankAnalyzer]);
+    if (toolsGroup) grouped.appendChild(toolsGroup);
+
+    const reportsLink = cleanClone(reports, "Reports");
+    if (reportsLink) grouped.appendChild(reportsLink);
+
+    const alertsLink = cleanClone(alerts, "Alerts");
+    if (alertsLink) grouped.appendChild(alertsLink);
+
+    Array.from(root.children).forEach(function (child) {
+      if (child === grouped) return;
+      if (child.tagName === "A" || (child.querySelector && child.querySelector("a[href]"))) {
+        child.setAttribute("data-staff-nav-v2-original", "1");
+      }
+    });
+
+    root.appendChild(grouped);
+
+    document.addEventListener("click", function (event) {
+      document.querySelectorAll(".staff-nav-v2-group[open]").forEach(function (group) {
+        if (!group.contains(event.target)) group.removeAttribute("open");
+      });
+    });
+
+    document.addEventListener("keydown", function (event) {
+      if (event.key !== "Escape") return;
+      document.querySelectorAll(".staff-nav-v2-group[open]").forEach(function (group) {
+        group.removeAttribute("open");
+      });
+    });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", install);
+  } else {
+    install();
+  }
+})();
+</script>
+