diff --git a/app/modules/employees/templates/employees/_my_workspace_tabs.html b/app/modules/employees/templates/employees/_my_workspace_tabs.html
index bbdc683..2eb5671 100644
--- a/app/modules/employees/templates/employees/_my_workspace_tabs.html
+++ b/app/modules/employees/templates/employees/_my_workspace_tabs.html
@@ -1,38 +1,2 @@
-{% set current_path = request.url.path %}
-{% set _tab_base = "inline-flex shrink-0 items-center rounded-xl px-3 py-2 text-sm font-semibold whitespace-nowrap transition" %}
-{% set _tab_active = "bg-brand-600 text-white shadow-soft" %}
-{% set _tab_idle = "border border-slate-300 bg-white text-slate-700 hover:bg-slate-50" %}
-<div class="rounded-2xl border border-slate-200 bg-white p-3 shadow-soft">
-  <div class="mb-2 px-1 text-xs font-semibold uppercase tracking-wide text-slate-500">My Workspace</div>
-  <div class="overflow-x-auto pb-1">
-    <div class="flex min-w-max flex-nowrap gap-2">
-    {% if can_view_employee_portal(current_user, current_user_permissions, current_user_roles) %}
-    <a href="/employee/dashboard" class="{{ _tab_base }} {{ _tab_active if current_path == '/employee/dashboard' else _tab_idle }}">Overview</a>
-    {% endif %}
-    {% if can_view_own_employee_work(current_user, current_user_permissions, current_user_roles) %}
-    <a href="/employee/work" class="{{ _tab_base }} {{ _tab_active if current_path.startswith('/employee/work') else _tab_idle }}">My Work Board</a>
-    {% endif %}
-    {% if can_view_own_employee_attendance(current_user, current_user_permissions, current_user_roles) %}
-    <a href="/employee/attendance" class="{{ _tab_base }} {{ _tab_active if current_path.startswith('/employee/attendance') else _tab_idle }}">My Attendance</a>
-    {% endif %}
-    {% if can_view_employee_portal(current_user, current_user_permissions, current_user_roles) %}
-    <a href="/employee/profile" class="{{ _tab_base }} {{ _tab_active if current_path.startswith('/employee/profile') else _tab_idle }}">My Profile</a>
-    {% endif %}
-    {% if can_view_own_employee_leave(current_user, current_user_permissions, current_user_roles) %}
-    <a href="/employee/leave" class="{{ _tab_base }} {{ _tab_active if current_path.startswith('/employee/leave') else _tab_idle }}">My Leave</a>
-    {% endif %}
-    {% if can_view_own_employee_documents(current_user, current_user_permissions, current_user_roles) %}
-    <a href="/employee/documents" class="{{ _tab_base }} {{ _tab_active if current_path.startswith('/employee/documents') else _tab_idle }}">My Documents</a>
-    {% endif %}
-    {% if can_view_own_employee_payslips(current_user, current_user_permissions, current_user_roles) %}
-    <a href="/employee/payslips" class="{{ _tab_base }} {{ _tab_active if current_path.startswith('/employee/payslips') else _tab_idle }}">My Payslips</a>
-    {% endif %}
-    {% if can_request_own_employee_offboarding(current_user, current_user_permissions, current_user_roles) %}
-    <a href="/employee/offboarding" class="{{ _tab_base }} {{ _tab_active if current_path.startswith('/employee/offboarding') else _tab_idle }}">My Offboarding</a>
-    {% endif %}
-    <a href="/alerts" class="{{ _tab_base }} {{ _tab_active if current_path.startswith('/alerts') else _tab_idle }}">
-      My Alert{% if unread_alert_count is defined and unread_alert_count > 0 %}<span class="ml-2 rounded-full bg-white/20 px-2 py-0.5 text-[10px]">{{ unread_alert_count }}</span>{% endif %}
-    </a>
-    </div>
-  </div>
-</div>
+{# UI/UX V2 Phase 1B — Staff pilot. Existing URLs and permission checks are preserved in the shared component. #}
+{% include "ui/templates/components/staff_navigation_v2.html" %}
diff --git a/app/modules/employees/templates/employees/portal_dashboard.html b/app/modules/employees/templates/employees/portal_dashboard.html
index ebb3b6a..5265ff8 100644
--- a/app/modules/employees/templates/employees/portal_dashboard.html
+++ b/app/modules/employees/templates/employees/portal_dashboard.html
@@ -1,6 +1,7 @@
 {% extends "ui/templates/base/layout.html" %}
 {% block content %}
 <div class="space-y-6" id="employee-portal-root">
+  {% include "ui/templates/components/staff_navigation_v2.html" %}
   <section class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-soft">
     <div class="bg-gradient-to-r from-brand-700 via-brand-600 to-slate-900 px-6 py-6 text-white">
       <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
diff --git a/app/ui/templates/components/staff_navigation_v2.html b/app/ui/templates/components/staff_navigation_v2.html
new file mode 100644
index 0000000..d69cef8
--- /dev/null
+++ b/app/ui/templates/components/staff_navigation_v2.html
@@ -0,0 +1,71 @@
+{#
+  UI/UX V2 Phase 1B — Staff pilot navigation
+
+  This component deliberately reuses the existing employee self-service
+  permission helpers and URLs. It does not grant access, change routes, or
+  replace dashboard content tabs.
+#}
+{% set _staff_path = request.url.path %}
+{% set navigation_aria_label_v2 = 'Staff workspace navigation' %}
+{% set navigation_items_v2 = [
+  {
+    'label': 'Dashboard',
+    'url': '/employee/dashboard',
+    'visible': can_view_employee_portal(current_user, current_user_permissions, current_user_roles),
+    'active': _staff_path == '/employee/dashboard'
+  },
+  {
+    'label': 'Work',
+    'url': '/employee/work',
+    'visible': can_view_own_employee_work(current_user, current_user_permissions, current_user_roles),
+    'active': _staff_path.startswith('/employee/work')
+  },
+  {
+    'label': 'Attendance',
+    'url': '/employee/attendance',
+    'visible': can_view_own_employee_attendance(current_user, current_user_permissions, current_user_roles),
+    'active': _staff_path.startswith('/employee/attendance')
+  },
+  {
+    'label': 'Leave',
+    'url': '/employee/leave',
+    'visible': can_view_own_employee_leave(current_user, current_user_permissions, current_user_roles),
+    'active': _staff_path.startswith('/employee/leave')
+  },
+  {
+    'label': 'Documents',
+    'url': '/employee/documents',
+    'visible': can_view_own_employee_documents(current_user, current_user_permissions, current_user_roles),
+    'active': _staff_path.startswith('/employee/documents')
+  },
+  {
+    'label': 'Payslips',
+    'url': '/employee/payslips',
+    'visible': can_view_own_employee_payslips(current_user, current_user_permissions, current_user_roles),
+    'active': _staff_path.startswith('/employee/payslips')
+  },
+  {
+    'label': 'Offboarding',
+    'url': '/employee/offboarding',
+    'visible': can_request_own_employee_offboarding(current_user, current_user_permissions, current_user_roles),
+    'active': _staff_path.startswith('/employee/offboarding')
+  },
+  {
+    'label': 'Profile',
+    'url': '/employee/profile',
+    'visible': can_view_employee_portal(current_user, current_user_permissions, current_user_roles),
+    'active': _staff_path.startswith('/employee/profile')
+  },
+  {
+    'label': 'Alerts',
+    'url': '/alerts',
+    'visible': true,
+    'active': _staff_path.startswith('/alerts'),
+    'badge': unread_alert_count if unread_alert_count is defined and unread_alert_count > 0 else none
+  }
+] %}
+
+<div class="mb-6 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft" data-uiux-v2-pilot="staff">
+  {% include "ui/templates/components/navigation_v2.html" %}
+  {% include "ui/templates/components/mobile_navigation_v2.html" %}
+</div>