diff --git a/fusion_clock/views/portal_clock_templates.xml b/fusion_clock/views/portal_clock_templates.xml
index 08389391..daad6a4e 100644
--- a/fusion_clock/views/portal_clock_templates.xml
+++ b/fusion_clock/views/portal_clock_templates.xml
@@ -95,6 +95,13 @@
 
                     <!-- Header -->
                     <div class="fclk-header">
+                        <a href="/web/session/logout?redirect=/" class="fclk-signout" title="Sign Out">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                                <polyline points="16 17 21 12 16 7"/>
+                                <line x1="21" y1="12" x2="9" y2="12"/>
+                            </svg>
+                        </a>
                         <div class="fclk-date" id="fclk-date-display"></div>
                         <h1 class="fclk-greeting">Hello, <t t-esc="employee.name.split(' ')[0]"/></h1>
                     </div>
@@ -279,33 +286,9 @@
                     </div>
 
                     <!-- Navigation Bar -->
-                    <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>
-                    </div>
+                    <t t-call="fusion_clock.portal_employee_navbar">
+                        <t t-set="active" t-value="'clock'"/>
+                    </t>
 
                 </div>
 
diff --git a/fusion_clock/views/portal_report_templates.xml b/fusion_clock/views/portal_report_templates.xml
index 6f82aa92..d10696d9 100644
--- a/fusion_clock/views/portal_report_templates.xml
+++ b/fusion_clock/views/portal_report_templates.xml
@@ -60,33 +60,9 @@
                     </t>
 
                     <!-- Navigation Bar -->
-                    <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>
-                    </div>
+                    <t t-call="fusion_clock.portal_employee_navbar">
+                        <t t-set="active" t-value="'reports'"/>
+                    </t>
 
                 </div>
             </div>
diff --git a/fusion_clock/views/portal_timesheet_templates.xml b/fusion_clock/views/portal_timesheet_templates.xml
index 3f17deaf..302df440 100644
--- a/fusion_clock/views/portal_timesheet_templates.xml
+++ b/fusion_clock/views/portal_timesheet_templates.xml
@@ -120,33 +120,9 @@
                     </t>
 
                     <!-- Navigation Bar -->
-                    <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>
-                    </div>
+                    <t t-call="fusion_clock.portal_employee_navbar">
+                        <t t-set="active" t-value="'timesheets'"/>
+                    </t>
 
                 </div>
             </div>