diff --git a/fusion_clock/views/portal_clock_templates.xml b/fusion_clock/views/portal_clock_templates.xml
index daad6a4e..521bb7ca 100644
--- a/fusion_clock/views/portal_clock_templates.xml
+++ b/fusion_clock/views/portal_clock_templates.xml
@@ -286,9 +286,42 @@
                     </div>
 
                     <!-- Navigation Bar -->
-                    <t t-call="fusion_clock.portal_employee_navbar">
-                        <t t-set="active" t-value="'clock'"/>
-                    </t>
+                    <div class="fclk-nav-bar">
+                        <a href="/my/clock" class="fclk-nav-item fclk-nav-active">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <circle cx="12" cy="12" r="10"/>
+                                <polyline points="12 6 12 12 16 14"/>
+                            </svg>
+                            <span>Clock</span>
+                        </a>
+                        <a href="/my/clock/timesheets" class="fclk-nav-item">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+                                <line x1="16" y1="2" x2="16" y2="6"/>
+                                <line x1="8" y1="2" x2="8" y2="6"/>
+                                <line x1="3" y1="10" x2="21" y2="10"/>
+                            </svg>
+                            <span>Timesheets</span>
+                        </a>
+                        <a href="/my/clock/reports" class="fclk-nav-item">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                                <polyline points="14 2 14 8 20 8"/>
+                                <line x1="16" y1="13" x2="8" y2="13"/>
+                                <line x1="16" y1="17" x2="8" y2="17"/>
+                            </svg>
+                            <span>Reports</span>
+                        </a>
+                        <t t-if="show_payslips">
+                            <a href="/my/clock/payslips" class="fclk-nav-item">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <rect x="2" y="5" width="20" height="14" rx="2"/>
+                                    <line x1="2" y1="10" x2="22" y2="10"/>
+                                </svg>
+                                <span>Payslips</span>
+                            </a>
+                        </t>
+                    </div>
 
                 </div>
 
diff --git a/fusion_clock/views/portal_payslip_templates.xml b/fusion_clock/views/portal_payslip_templates.xml
index 752ef70a..02807d5b 100644
--- a/fusion_clock/views/portal_payslip_templates.xml
+++ b/fusion_clock/views/portal_payslip_templates.xml
@@ -47,9 +47,40 @@
                         </div>
                     </t>
 
-                    <t t-call="fusion_clock.portal_employee_navbar">
-                        <t t-set="active" t-value="'payslips'"/>
-                    </t>
+                    <div class="fclk-nav-bar">
+                        <a href="/my/clock" class="fclk-nav-item">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <circle cx="12" cy="12" r="10"/>
+                                <polyline points="12 6 12 12 16 14"/>
+                            </svg>
+                            <span>Clock</span>
+                        </a>
+                        <a href="/my/clock/timesheets" class="fclk-nav-item">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+                                <line x1="16" y1="2" x2="16" y2="6"/>
+                                <line x1="8" y1="2" x2="8" y2="6"/>
+                                <line x1="3" y1="10" x2="21" y2="10"/>
+                            </svg>
+                            <span>Timesheets</span>
+                        </a>
+                        <a href="/my/clock/reports" class="fclk-nav-item">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                                <polyline points="14 2 14 8 20 8"/>
+                                <line x1="16" y1="13" x2="8" y2="13"/>
+                                <line x1="16" y1="17" x2="8" y2="17"/>
+                            </svg>
+                            <span>Reports</span>
+                        </a>
+                        <a href="/my/clock/payslips" class="fclk-nav-item fclk-nav-active">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <rect x="2" y="5" width="20" height="14" rx="2"/>
+                                <line x1="2" y1="10" x2="22" y2="10"/>
+                            </svg>
+                            <span>Payslips</span>
+                        </a>
+                    </div>
                 </div>
             </div>
         </t>
@@ -118,54 +149,43 @@
                         </a>
                     </t>
 
-                    <t t-call="fusion_clock.portal_employee_navbar">
-                        <t t-set="active" t-value="'payslips'"/>
-                    </t>
+                    <div class="fclk-nav-bar">
+                        <a href="/my/clock" class="fclk-nav-item">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <circle cx="12" cy="12" r="10"/>
+                                <polyline points="12 6 12 12 16 14"/>
+                            </svg>
+                            <span>Clock</span>
+                        </a>
+                        <a href="/my/clock/timesheets" class="fclk-nav-item">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+                                <line x1="16" y1="2" x2="16" y2="6"/>
+                                <line x1="8" y1="2" x2="8" y2="6"/>
+                                <line x1="3" y1="10" x2="21" y2="10"/>
+                            </svg>
+                            <span>Timesheets</span>
+                        </a>
+                        <a href="/my/clock/reports" class="fclk-nav-item">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                                <polyline points="14 2 14 8 20 8"/>
+                                <line x1="16" y1="13" x2="8" y2="13"/>
+                                <line x1="16" y1="17" x2="8" y2="17"/>
+                            </svg>
+                            <span>Reports</span>
+                        </a>
+                        <a href="/my/clock/payslips" class="fclk-nav-item fclk-nav-active">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <rect x="2" y="5" width="20" height="14" rx="2"/>
+                                <line x1="2" y1="10" x2="22" y2="10"/>
+                            </svg>
+                            <span>Payslips</span>
+                        </a>
+                    </div>
                 </div>
             </div>
         </t>
     </template>
 
-    <!-- Shared employee bottom nav (Clock / Timesheets / Reports / Payslips).
-         `active` = clock|timesheets|reports|payslips. Payslips tab shows only
-         when show_payslips is truthy. -->
-    <template id="portal_employee_navbar" name="Fusion Clock Employee Navbar">
-        <div class="fclk-nav-bar">
-            <a href="/my/clock" t-attf-class="fclk-nav-item#{' fclk-nav-active' if active == 'clock' else ''}">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <circle cx="12" cy="12" r="10"/>
-                    <polyline points="12 6 12 12 16 14"/>
-                </svg>
-                <span>Clock</span>
-            </a>
-            <a href="/my/clock/timesheets" t-attf-class="fclk-nav-item#{' fclk-nav-active' if active == 'timesheets' else ''}">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
-                    <line x1="16" y1="2" x2="16" y2="6"/>
-                    <line x1="8" y1="2" x2="8" y2="6"/>
-                    <line x1="3" y1="10" x2="21" y2="10"/>
-                </svg>
-                <span>Timesheets</span>
-            </a>
-            <a href="/my/clock/reports" t-attf-class="fclk-nav-item#{' fclk-nav-active' if active == 'reports' else ''}">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-                    <polyline points="14 2 14 8 20 8"/>
-                    <line x1="16" y1="13" x2="8" y2="13"/>
-                    <line x1="16" y1="17" x2="8" y2="17"/>
-                </svg>
-                <span>Reports</span>
-            </a>
-            <t t-if="show_payslips">
-                <a href="/my/clock/payslips" t-attf-class="fclk-nav-item#{' fclk-nav-active' if active == 'payslips' else ''}">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <rect x="2" y="5" width="20" height="14" rx="2"/>
-                        <line x1="2" y1="10" x2="22" y2="10"/>
-                    </svg>
-                    <span>Payslips</span>
-                </a>
-            </t>
-        </div>
-    </template>
-
 </odoo>
diff --git a/fusion_clock/views/portal_report_templates.xml b/fusion_clock/views/portal_report_templates.xml
index d10696d9..e8e5063c 100644
--- a/fusion_clock/views/portal_report_templates.xml
+++ b/fusion_clock/views/portal_report_templates.xml
@@ -60,9 +60,42 @@
                     </t>
 
                     <!-- Navigation Bar -->
-                    <t t-call="fusion_clock.portal_employee_navbar">
-                        <t t-set="active" t-value="'reports'"/>
-                    </t>
+                    <div class="fclk-nav-bar">
+                        <a href="/my/clock" class="fclk-nav-item">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <circle cx="12" cy="12" r="10"/>
+                                <polyline points="12 6 12 12 16 14"/>
+                            </svg>
+                            <span>Clock</span>
+                        </a>
+                        <a href="/my/clock/timesheets" class="fclk-nav-item">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+                                <line x1="16" y1="2" x2="16" y2="6"/>
+                                <line x1="8" y1="2" x2="8" y2="6"/>
+                                <line x1="3" y1="10" x2="21" y2="10"/>
+                            </svg>
+                            <span>Timesheets</span>
+                        </a>
+                        <a href="/my/clock/reports" class="fclk-nav-item fclk-nav-active">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                                <polyline points="14 2 14 8 20 8"/>
+                                <line x1="16" y1="13" x2="8" y2="13"/>
+                                <line x1="16" y1="17" x2="8" y2="17"/>
+                            </svg>
+                            <span>Reports</span>
+                        </a>
+                        <t t-if="show_payslips">
+                            <a href="/my/clock/payslips" class="fclk-nav-item">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <rect x="2" y="5" width="20" height="14" rx="2"/>
+                                    <line x1="2" y1="10" x2="22" y2="10"/>
+                                </svg>
+                                <span>Payslips</span>
+                            </a>
+                        </t>
+                    </div>
 
                 </div>
             </div>
diff --git a/fusion_clock/views/portal_timesheet_templates.xml b/fusion_clock/views/portal_timesheet_templates.xml
index 302df440..8bd142af 100644
--- a/fusion_clock/views/portal_timesheet_templates.xml
+++ b/fusion_clock/views/portal_timesheet_templates.xml
@@ -120,9 +120,42 @@
                     </t>
 
                     <!-- Navigation Bar -->
-                    <t t-call="fusion_clock.portal_employee_navbar">
-                        <t t-set="active" t-value="'timesheets'"/>
-                    </t>
+                    <div class="fclk-nav-bar">
+                        <a href="/my/clock" class="fclk-nav-item">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <circle cx="12" cy="12" r="10"/>
+                                <polyline points="12 6 12 12 16 14"/>
+                            </svg>
+                            <span>Clock</span>
+                        </a>
+                        <a href="/my/clock/timesheets" class="fclk-nav-item fclk-nav-active">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+                                <line x1="16" y1="2" x2="16" y2="6"/>
+                                <line x1="8" y1="2" x2="8" y2="6"/>
+                                <line x1="3" y1="10" x2="21" y2="10"/>
+                            </svg>
+                            <span>Timesheets</span>
+                        </a>
+                        <a href="/my/clock/reports" class="fclk-nav-item">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                                <polyline points="14 2 14 8 20 8"/>
+                                <line x1="16" y1="13" x2="8" y2="13"/>
+                                <line x1="16" y1="17" x2="8" y2="17"/>
+                            </svg>
+                            <span>Reports</span>
+                        </a>
+                        <t t-if="show_payslips">
+                            <a href="/my/clock/payslips" class="fclk-nav-item">
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <rect x="2" y="5" width="20" height="14" rx="2"/>
+                                    <line x1="2" y1="10" x2="22" y2="10"/>
+                                </svg>
+                                <span>Payslips</span>
+                            </a>
+                        </t>
+                    </div>
 
                 </div>
             </div>