diff --git a/public/login.html b/public/login.html
index 9cbfa0f..2de2fc2 100644
--- a/public/login.html
+++ b/public/login.html
@@ -7,9 +7,9 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 <style>
   :root {
-    --primary: #6C3FA0;
-    --primary-light: #8B5FBF;
-    --primary-dark: #4A2570;
+    --primary: #7600be;
+    --primary-light: #9B2DE5;
+    --primary-dark: #5A0091;
     --bg: #F0F2F5;
     --card: #FFFFFF;
     --text: #1A1D23;
@@ -45,31 +45,32 @@
     margin-bottom: 32px;
   }
   .login-header .logo {
-    width: 80px; height: 80px;
-    margin: 0 auto 16px;
+    width: 180px;
+    margin: 0 auto 24px;
   }
   .login-header .logo img {
-    width: 100%; height: 100%;
+    width: 100%;
+    height: auto;
     object-fit: contain;
   }
-  .login-header h1 {
-    font-size: 24px;
+  .login-header .app-name {
+    display: inline-block;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+    color: white;
+    font-size: 18px;
     font-weight: 800;
-    color: var(--text);
-    letter-spacing: -0.5px;
+    padding: 8px 20px;
+    border-radius: 8px;
+    letter-spacing: 1px;
+    margin-bottom: 8px;
   }
   .login-header .subtitle {
-    font-size: 12px;
-    color: var(--primary);
-    margin-top: 4px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-  }
-  .login-header p {
-    font-size: 13px;
+    font-size: 11px;
     color: var(--text-secondary);
     margin-top: 8px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 2px;
   }
   .form-group {
     margin-bottom: 20px;
@@ -97,7 +98,7 @@
   .form-group input:focus {
     outline: none;
     border-color: var(--primary);
-    box-shadow: 0 0 0 3px rgba(108,63,160,0.12);
+    box-shadow: 0 0 0 3px rgba(118,0,190,0.12);
   }
   .btn-login {
     width: 100%;
@@ -111,12 +112,12 @@
     font-family: inherit;
     cursor: pointer;
     transition: all 0.15s;
-    box-shadow: 0 2px 8px rgba(108,63,160,0.3);
+    box-shadow: 0 2px 8px rgba(118,0,190,0.3);
     margin-top: 4px;
   }
   .btn-login:hover {
     transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(108,63,160,0.4);
+    box-shadow: 0 4px 12px rgba(118,0,190,0.4);
   }
   .btn-login:active { transform: translateY(0); }
   .error-msg {
@@ -141,10 +142,9 @@
   <div class="login-container">
     <div class="login-card">
       <div class="login-header">
-        <div class="logo"><img src="/public/logo-small.png" alt="CambioReal"></div>
-        <h1>BI - CCC</h1>
+        <div class="logo"><img src="/public/logo.png" alt="CambioReal"></div>
+        <div class="app-name">BI - CCC</div>
         <div class="subtitle">Central Command Center</div>
-        <p>Acesso unificado para agentes e admins</p>
       </div>
       <div class="error-msg" id="errorMsg"></div>
       <form id="loginForm" method="POST" action="/login">
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..134ec93
Binary files /dev/null and b/public/logo.png differ
diff --git a/src/admin-home.js b/src/admin-home.js
index 3d9a39c..3aa07cc 100644
--- a/src/admin-home.js
+++ b/src/admin-home.js
@@ -2,6 +2,7 @@
  * Admin Home Dashboard - Fast daily overview
  * 3 flows: BRL→USD, USD→BRL, USD→USD (balance)
  */
+const { buildHeader, buildFooter, buildHead } = require('./ui-template');
 
 function buildAdminHomeHTML(stats, admin) {
   const now = new Date().toLocaleString('pt-BR');
@@ -23,64 +24,9 @@ function buildAdminHomeHTML(stats, admin) {
   const totalOntem = stats.brlUsd.ontem.qtd + stats.usdBrl.ontem.qtd + stats.usdUsd.ontem.qtd;
   const totalVar = calcVar(totalHoje, totalOntem);
 
-  return `<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>BI - CCC - Home</title>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
-<style>
-  :root {
-    --primary: #6C3FA0;
-    --bg: #F0F2F5;
-    --card: #FFFFFF;
-    --text: #1A1D23;
-    --text-secondary: #5F6368;
-    --text-muted: #9AA0A6;
-    --border: #E8EAED;
-    --green: #1E8E3E;
-    --green-bg: #E6F4EA;
-    --blue: #1A73E8;
-    --blue-bg: #E8F0FE;
-    --orange: #E8710A;
-    --orange-bg: #FEF3E8;
-    --purple: #7B1FA2;
-    --purple-bg: #F3E5F5;
-    --red: #D93025;
-    --admin-accent: #2E7D32;
-  }
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    font-family: 'Inter', -apple-system, sans-serif;
-    background: var(--bg); color: var(--text); line-height: 1.5;
-  }
-  .header {
-    background: linear-gradient(135deg, var(--admin-accent) 0%, #1B5E20 100%);
-    color: white; padding: 24px 40px;
-    display: flex; justify-content: space-between; align-items: center;
-    box-shadow: 0 2px 8px rgba(27,94,32,0.3);
-  }
-  .header h1 { font-size: 24px; font-weight: 800; }
-  .header .subtitle { font-size: 13px; opacity: 0.8; margin-top: 4px; }
-  .header-right { display: flex; align-items: center; gap: 12px; }
-  .badge {
-    background: rgba(255,255,255,0.15); padding: 8px 16px;
-    border-radius: 24px; font-size: 12px; font-weight: 600;
-  }
-  .btn {
-    padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600;
-    cursor: pointer; text-decoration: none; font-family: inherit;
-    transition: all 0.15s; border: 1px solid rgba(255,255,255,0.3);
-    background: rgba(255,255,255,0.15); color: white;
-  }
-  .btn:hover { background: rgba(255,255,255,0.25); }
-  .btn-blue { background: #1A73E8; border-color: #1A73E8; }
-  .btn-blue:hover { background: #1557B0; }
-
-  .container { padding: 28px 40px; max-width: 1600px; margin: 0 auto; }
-
+  const pageCSS = `
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+  <style>
   .date-banner {
     background: var(--card); border-radius: 12px; padding: 16px 24px;
     margin-bottom: 24px; border: 1px solid var(--border);
@@ -107,7 +53,7 @@ function buildAdminHomeHTML(stats, admin) {
     font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 12px;
   }
   .kpi-badge.up { background: var(--green-bg); color: var(--green); }
-  .kpi-badge.down { background: #FDE7E7; color: var(--red); }
+  .kpi-badge.down { background: var(--red-bg); color: var(--red); }
   .kpi-badge.neutral { background: var(--blue-bg); color: var(--blue); }
   .kpi-value { font-size: 36px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
   .kpi-sub { font-size: 13px; color: var(--text-muted); }
@@ -152,52 +98,26 @@ function buildAdminHomeHTML(stats, admin) {
   .detail-value.green { color: var(--green); }
   .detail-value.red { color: var(--red); }
 
-  .nav-links {
-    display: flex; gap: 12px; margin-top: 28px;
-  }
-  .nav-card {
-    flex: 1; background: var(--card); border-radius: 12px; padding: 20px;
-    border: 1px solid var(--border); text-decoration: none; color: var(--text);
-    transition: all 0.15s; display: flex; align-items: center; gap: 16px;
-  }
-  .nav-card:hover { border-color: var(--admin-accent); box-shadow: 0 4px 12px rgba(46,125,50,0.1); }
-  .nav-card .icon {
-    width: 48px; height: 48px; border-radius: 12px; background: var(--green-bg);
-    display: flex; align-items: center; justify-content: center; font-size: 24px;
-  }
-  .nav-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
-  .nav-card p { font-size: 12px; color: var(--text-secondary); }
-
-  .footer { text-align: center; padding: 24px; font-size: 12px; color: var(--text-muted); }
-
   @media (max-width: 1200px) {
     .kpi-grid { grid-template-columns: repeat(2, 1fr); }
     .detail-grid { grid-template-columns: 1fr; }
   }
   @media (max-width: 768px) {
-    .container { padding: 20px; }
-    .header { padding: 20px; flex-direction: column; gap: 12px; }
     .kpi-grid, .charts-grid { grid-template-columns: 1fr; }
-    .nav-links { flex-direction: column; }
   }
-</style>
+  </style>
+  `;
+
+  return `<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+${buildHead('Home', pageCSS)}
 </head>
 <body>
 
-<div class="header">
-  <div>
-    <h1>BI - CCC</h1>
-    <div class="subtitle">CambioReal Central Command</div>
-  </div>
-  <div class="header-right">
-    <div class="badge">Admin: ${admin.nome}</div>
-    <a href="/admin/agentes" class="btn">Gerenciar Agentes</a>
-    <a href="/admin/dashboard" class="btn btn-blue">Dashboard Completo</a>
-    <a href="/logout" class="btn">Sair</a>
-  </div>
-</div>
+${buildHeader({ role: 'admin', userName: admin.nome, activePage: 'home' })}
 
-<div class="container">
+<div class="app-container">
   <div class="date-banner">
     <h2>${hoje}</h2>
     <div class="time">Atualizado: ${now}</div>
@@ -320,26 +240,9 @@ function buildAdminHomeHTML(stats, admin) {
       </div>
     </div>
   </div>
-
-  <div class="nav-links">
-    <a href="/admin/dashboard" class="nav-card">
-      <div class="icon">&#128200;</div>
-      <div>
-        <h4>Dashboard Completo</h4>
-        <p>Analise detalhada com graficos e filtros</p>
-      </div>
-    </a>
-    <a href="/admin/agentes" class="nav-card">
-      <div class="icon">&#128101;</div>
-      <div>
-        <h4>Gerenciar Agentes</h4>
-        <p>Cadastro, edicao e emulacao de agentes</p>
-      </div>
-    </a>
-  </div>
 </div>
 
-<div class="footer">BI - CCC - CambioReal Central Command</div>
+${buildFooter()}
 
 <script>
 const stats = ${JSON.stringify(stats)};
diff --git a/src/admin-panel.js b/src/admin-panel.js
index ff2a8bb..ba64672 100644
--- a/src/admin-panel.js
+++ b/src/admin-panel.js
@@ -1,68 +1,13 @@
 /**
- * Admin Panel - HTML builder for agent management
+ * Admin Panel - HTML builder for user management
  */
+const { buildHeader, buildFooter, buildHead } = require('./ui-template');
 
 function buildAdminHTML(agentes, admin) {
   const now = new Date().toLocaleString('pt-BR');
-  return `<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>BI - CCC - CambioReal Central Command</title>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --primary: #6C3FA0;
-    --primary-light: #8B5FBF;
-    --primary-dark: #4A2570;
-    --primary-bg: #F3EEFA;
-    --bg: #F0F2F5;
-    --card: #FFFFFF;
-    --text: #1A1D23;
-    --text-secondary: #5F6368;
-    --text-muted: #9AA0A6;
-    --border: #E8EAED;
-    --green: #1E8E3E;
-    --green-bg: #E6F4EA;
-    --blue: #1A73E8;
-    --blue-bg: #E8F0FE;
-    --orange: #E8710A;
-    --orange-bg: #FEF3E8;
-    --red: #D93025;
-    --red-bg: #FDE7E7;
-    --admin-accent: #2E7D32;
-    --admin-bg: #E8F5E9;
-  }
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    background: var(--bg); color: var(--text); line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
-  }
-  .header {
-    background: linear-gradient(135deg, var(--admin-accent) 0%, #1B5E20 100%);
-    color: white; padding: 24px 40px;
-    display: flex; justify-content: space-between; align-items: center;
-    box-shadow: 0 2px 8px rgba(27,94,32,0.3);
-  }
-  .header h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
-  .header .subtitle { font-size: 13px; opacity: 0.8; margin-top: 4px; font-weight: 400; }
-  .header-right { display: flex; align-items: center; gap: 16px; }
-  .header .badge {
-    background: rgba(255,255,255,0.15); backdrop-filter: blur(10px);
-    padding: 8px 16px; border-radius: 24px; font-size: 12px; font-weight: 600;
-    border: 1px solid rgba(255,255,255,0.2);
-  }
-  .btn-logout {
-    background: rgba(255,255,255,0.15); color: white; border: 1px solid rgba(255,255,255,0.3);
-    padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600;
-    cursor: pointer; text-decoration: none; font-family: inherit; transition: all 0.15s;
-  }
-  .btn-logout:hover { background: rgba(255,255,255,0.25); }
-
-  .container { padding: 28px 40px; max-width: 1200px; margin: 0 auto; }
 
+  const pageCSS = `
+  <style>
   .toolbar {
     display: flex; justify-content: space-between; align-items: center;
     margin-bottom: 20px;
@@ -118,8 +63,6 @@ function buildAdminHTML(agentes, admin) {
   .btn-toggle:hover { background: #FDE7D8; }
   .btn-password { background: var(--primary-bg); color: var(--primary); }
   .btn-password:hover { background: #E8DCFA; }
-  .btn-delete { background: var(--red-bg); color: var(--red); }
-  .btn-delete:hover { background: #FBD5D5; }
 
   /* Modal */
   .modal-overlay {
@@ -149,28 +92,17 @@ function buildAdminHTML(agentes, admin) {
     color: var(--text-secondary); text-transform: uppercase;
     letter-spacing: 0.3px; margin-bottom: 6px;
   }
-  .form-group input {
+  .form-group input, .form-group select {
     width: 100%; padding: 10px 14px; border: 1.5px solid var(--border);
     border-radius: 8px; font-size: 14px; font-family: inherit;
     color: var(--text); transition: all 0.15s; background: white;
   }
-  .form-group input:focus {
-    outline: none; border-color: var(--admin-accent);
-    box-shadow: 0 0 0 3px rgba(46,125,50,0.12);
-  }
-  .form-group input:disabled {
-    background: #F5F5F5; color: var(--text-muted);
-  }
-  .form-group select {
-    width: 100%; padding: 10px 14px; border: 1.5px solid var(--border);
-    border-radius: 8px; font-size: 14px; font-family: inherit;
-    color: var(--text); transition: all 0.15s; background: white;
-    cursor: pointer;
-  }
-  .form-group select:focus {
+  .form-group select { cursor: pointer; }
+  .form-group input:focus, .form-group select:focus {
     outline: none; border-color: var(--admin-accent);
     box-shadow: 0 0 0 3px rgba(46,125,50,0.12);
   }
+  .form-group input:disabled { background: #F5F5F5; color: var(--text-muted); }
   .modal-footer {
     padding: 16px 24px; border-top: 1px solid var(--border);
     display: flex; justify-content: flex-end; gap: 10px;
@@ -197,31 +129,22 @@ function buildAdminHTML(agentes, admin) {
   .alert.error { background: var(--red-bg); color: var(--red); }
   .alert.show { display: block; }
 
-  .footer { text-align: center; padding: 20px; font-size: 12px; color: var(--text-muted); }
-
   @media (max-width: 768px) {
-    .container { padding: 20px; }
-    .header { padding: 20px; flex-direction: column; gap: 12px; }
-    .header-right { width: 100%; justify-content: space-between; }
     .toolbar { flex-direction: column; gap: 12px; align-items: flex-start; }
   }
-</style>
+  </style>
+  `;
+
+  return `<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+${buildHead('Usuarios', pageCSS)}
 </head>
 <body>
 
-<div class="header">
-  <div>
-    <h1>BI - CCC</h1>
-    <div class="subtitle">CambioReal Central Command</div>
-  </div>
-  <div class="header-right">
-    <div class="badge">Admin: ${admin.nome}</div>
-    <a href="/admin/dashboard" class="btn-logout" style="background:#1A73E8;margin-right:8px;">Dashboard Geral</a>
-    <a href="/logout" class="btn-logout">Sair</a>
-  </div>
-</div>
+${buildHeader({ role: 'admin', userName: admin.nome, activePage: 'users' })}
 
-<div class="container">
+<div class="app-container">
   <div id="alertBox" class="alert"></div>
 
   <div class="toolbar">
@@ -268,13 +191,13 @@ function buildAdminHTML(agentes, admin) {
   </div>
 </div>
 
-<div class="footer">BI - CCC - CambioReal Central Command - ${now}</div>
+${buildFooter()}
 
 <!-- Create/Edit Modal -->
 <div class="modal-overlay" id="agentModal">
   <div class="modal">
     <div class="modal-header">
-      <h3 id="modalTitle">Novo Agente</h3>
+      <h3 id="modalTitle">Novo Usuario</h3>
       <button class="modal-close" onclick="closeModal('agentModal')">&times;</button>
     </div>
     <form id="agentForm" onsubmit="submitAgentForm(event)">
@@ -306,7 +229,7 @@ function buildAdminHTML(agentes, admin) {
       </div>
       <div class="modal-footer">
         <button type="button" class="btn-cancel" onclick="closeModal('agentModal')">Cancelar</button>
-        <button type="submit" class="btn-submit" id="submitBtn">Criar Agente</button>
+        <button type="submit" class="btn-submit" id="submitBtn">Criar Usuario</button>
       </div>
     </form>
   </div>
@@ -486,7 +409,7 @@ async function submitPasswordForm(e) {
 
 async function toggleAgente(id, currentStatus) {
   const action = currentStatus ? 'desativar' : 'ativar';
-  if (!confirm('Deseja ' + action + ' este agente?')) return;
+  if (!confirm('Deseja ' + action + ' este usuario?')) return;
 
   try {
     const res = await fetch('/admin/agentes/' + id, {
@@ -496,7 +419,7 @@ async function toggleAgente(id, currentStatus) {
     });
     const result = await res.json();
     if (res.ok) {
-      showAlert('Agente ' + (currentStatus ? 'desativado' : 'ativado') + ' com sucesso!', 'success');
+      showAlert('Usuario ' + (currentStatus ? 'desativado' : 'ativado') + ' com sucesso!', 'success');
       setTimeout(() => location.reload(), 1000);
     } else {
       showAlert(result.error || 'Erro ao alterar status', 'error');
@@ -506,20 +429,16 @@ async function toggleAgente(id, currentStatus) {
   }
 }
 
-// Close modal on overlay click (not on modal content)
+// Close modal on overlay click
 document.querySelectorAll('.modal-overlay').forEach(overlay => {
   overlay.addEventListener('click', (e) => {
-    if (e.target === overlay) {
-      overlay.classList.remove('active');
-    }
+    if (e.target === overlay) overlay.classList.remove('active');
   });
 });
 
 // Prevent clicks inside modal from closing it
 document.querySelectorAll('.modal').forEach(modal => {
-  modal.addEventListener('click', (e) => {
-    e.stopPropagation();
-  });
+  modal.addEventListener('click', (e) => e.stopPropagation());
 });
 
 // Close modal on Escape key
diff --git a/src/dashboard.js b/src/dashboard.js
index ec2f3ed..752c4e4 100644
--- a/src/dashboard.js
+++ b/src/dashboard.js
@@ -15,10 +15,10 @@ function buildHTML(data, agente, isAgentDashboard = true, diasPeriodo = null, as
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 <style>
   :root {
-    --primary: #6C3FA0;
-    --primary-light: #8B5FBF;
-    --primary-dark: #4A2570;
-    --primary-bg: #F3EEFA;
+    --primary: #7600be;
+    --primary-light: #9B2DE5;
+    --primary-dark: #5A0091;
+    --primary-bg: #F5EAFA;
     --bg: #F0F2F5;
     --card: #FFFFFF;
     --text: #1A1D23;
@@ -428,9 +428,15 @@ ${isEmulating ? `
 </div>
 ` : ''}
 <div class="header">
-  <div>
-    <h1>${agente.nome}${agente.agente_id ? ` &mdash; Agente ${agente.agente_id}` : ''}</h1>
-    <div class="subtitle">Dashboard de Transacoes BRL &harr; USD ${isAdminDash ? `(${data.length.toLocaleString('pt-BR')} registros)` : ''}</div>
+  <div style="display:flex;align-items:center;gap:16px;">
+    <img src="/public/logo.png" alt="CambioReal" style="height:40px;width:auto;">
+    <div>
+      <h1 style="display:flex;align-items:center;gap:12px;">
+        <span style="background:rgba(255,255,255,0.2);padding:4px 12px;border-radius:6px;font-size:14px;">BI - CCC</span>
+        ${agente.nome}${agente.agente_id ? ` &mdash; Agente ${agente.agente_id}` : ''}
+      </h1>
+      <div class="subtitle">Dashboard de Transacoes BRL &harr; USD ${isAdminDash ? `(${data.length.toLocaleString('pt-BR')} registros)` : ''}</div>
+    </div>
   </div>
   <div class="header-right">
     ${isAdminDash ? `
@@ -596,7 +602,7 @@ function showLoading(msg) {
     overlay = document.createElement('div');
     overlay.id = 'loadingOverlay';
     overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:16px;';
-    overlay.innerHTML = '<div style="width:50px;height:50px;border:4px solid #fff;border-top-color:#6C3FA0;border-radius:50%;animation:spin 1s linear infinite;"></div><div style="color:#fff;font-size:16px;" id="loadingText">Carregando...</div><style>@keyframes spin{to{transform:rotate(360deg)}}</style>';
+    overlay.innerHTML = '<div style="width:50px;height:50px;border:4px solid #fff;border-top-color:#7600be;border-radius:50%;animation:spin 1s linear infinite;"></div><div style="color:#fff;font-size:16px;" id="loadingText">Carregando...</div><style>@keyframes spin{to{transform:rotate(360deg)}}</style>';
     document.body.appendChild(overlay);
   }
   document.getElementById('loadingText').textContent = msg || 'Carregando...';
@@ -816,7 +822,7 @@ function renderCharts(gran) {
   const clientMap = {};
   filtered.forEach(r => { clientMap[r.cliente] = (clientMap[r.cliente] || 0) + r.valor_dolar; });
   const topClientes = Object.entries(clientMap).sort((a,b) => b[1] - a[1]).slice(0, 10);
-  const colors = ['#6C3FA0','#8B5FBF','#2980B9','#27AE60','#E67E22','#E74C3C','#3498DB','#1ABC9C','#9B59B6','#F39C12'];
+  const colors = ['#7600be','#8B5FBF','#2980B9','#27AE60','#E67E22','#E74C3C','#3498DB','#1ABC9C','#9B59B6','#F39C12'];
   charts.clientes = new Chart(document.getElementById('chartClientes'), {
     type: 'bar',
     data: {
@@ -839,7 +845,7 @@ function renderCharts(gran) {
     data: {
       labels,
       datasets: [
-        { label: 'Taxa Cobrada', data: periods.map(p => p.taxaMedia), borderColor: '#6C3FA0', backgroundColor: 'rgba(108,63,160,0.08)', fill: true, tension: 0.4, pointRadius: 4, pointBackgroundColor: '#6C3FA0', borderWidth: 2 },
+        { label: 'Taxa Cobrada', data: periods.map(p => p.taxaMedia), borderColor: '#7600be', backgroundColor: 'rgba(108,63,160,0.08)', fill: true, tension: 0.4, pointRadius: 4, pointBackgroundColor: '#7600be', borderWidth: 2 },
         { label: 'PTAX', data: periods.map(p => p.ptaxMedia), borderColor: '#2980B9', backgroundColor: 'rgba(41,128,185,0.08)', fill: true, tension: 0.4, pointRadius: 4, pointBackgroundColor: '#2980B9', borderWidth: 2 }
       ]
     },
@@ -1660,12 +1666,12 @@ function renderNettingAnalysis(gran) {
       datasets: [{
         label: 'Eficiencia Netting %',
         data: efficiencyData,
-        borderColor: '#6C3FA0',
+        borderColor: '#7600be',
         backgroundColor: 'rgba(108,63,160,0.1)',
         fill: true,
         tension: 0.4,
         pointRadius: 5,
-        pointBackgroundColor: '#6C3FA0',
+        pointBackgroundColor: '#7600be',
         borderWidth: 3
       }, {
         label: 'Meta 100%',
diff --git a/src/ui-template.js b/src/ui-template.js
new file mode 100644
index 0000000..4ffb650
--- /dev/null
+++ b/src/ui-template.js
@@ -0,0 +1,307 @@
+/**
+ * UI Template - Design System Unificado BI-CCC
+ * Header, Footer e estilos compartilhados
+ */
+
+// CSS Variables compartilhadas - Cores CambioReal
+const cssVariables = `
+  :root {
+    --primary: #7600be;
+    --primary-light: #9B2DE5;
+    --primary-dark: #5A0091;
+    --primary-bg: #F5EAFA;
+    --admin-accent: #2E7D32;
+    --admin-dark: #1B5E20;
+    --admin-bg: #E8F5E9;
+    --bg: #F0F2F5;
+    --card: #FFFFFF;
+    --text: #1A1D23;
+    --text-secondary: #5F6368;
+    --text-muted: #9AA0A6;
+    --border: #E8EAED;
+    --green: #1E8E3E;
+    --green-bg: #E6F4EA;
+    --blue: #1A73E8;
+    --blue-bg: #E8F0FE;
+    --orange: #E8710A;
+    --orange-bg: #FEF3E8;
+    --red: #D93025;
+    --red-bg: #FDE7E7;
+    --purple: #7B1FA2;
+    --purple-bg: #F3E5F5;
+  }
+`;
+
+// CSS do Header unificado
+const headerCSS = `
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: var(--bg); color: var(--text); line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* Header Unificado */
+  .app-header {
+    background: linear-gradient(135deg, var(--header-color) 0%, var(--header-dark) 100%);
+    color: white;
+    padding: 0 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 64px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  }
+  .app-header.admin {
+    --header-color: var(--admin-accent);
+    --header-dark: var(--admin-dark);
+  }
+  .app-header.agent {
+    --header-color: var(--primary);
+    --header-dark: var(--primary-dark);
+  }
+
+  .header-brand {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  .header-brand .logo {
+    height: 36px;
+    width: auto;
+  }
+  .header-brand .app-name {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .header-brand .app-name-badge {
+    background: rgba(255,255,255,0.2);
+    padding: 6px 14px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 800;
+    letter-spacing: 0.5px;
+  }
+  .header-brand .app-subtitle {
+    font-size: 11px;
+    opacity: 0.8;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+
+  .header-nav {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .header-nav a {
+    color: white;
+    text-decoration: none;
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 13px;
+    font-weight: 600;
+    transition: all 0.15s;
+    opacity: 0.85;
+  }
+  .header-nav a:hover {
+    background: rgba(255,255,255,0.15);
+    opacity: 1;
+  }
+  .header-nav a.active {
+    background: rgba(255,255,255,0.2);
+    opacity: 1;
+  }
+
+  .header-user {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .header-user .user-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: rgba(255,255,255,0.1);
+    padding: 6px 14px;
+    border-radius: 20px;
+    font-size: 13px;
+    font-weight: 500;
+  }
+  .header-user .user-avatar {
+    width: 28px;
+    height: 28px;
+    background: rgba(255,255,255,0.25);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 700;
+  }
+  .header-user .user-role {
+    font-size: 10px;
+    background: rgba(255,255,255,0.2);
+    padding: 2px 8px;
+    border-radius: 10px;
+    text-transform: uppercase;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+  }
+  .header-user .btn-logout {
+    background: rgba(255,255,255,0.15);
+    color: white;
+    border: 1px solid rgba(255,255,255,0.3);
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    text-decoration: none;
+    font-family: inherit;
+    transition: all 0.15s;
+  }
+  .header-user .btn-logout:hover {
+    background: rgba(255,255,255,0.25);
+  }
+
+  /* Footer */
+  .app-footer {
+    text-align: center;
+    padding: 20px;
+    font-size: 12px;
+    color: var(--text-muted);
+    border-top: 1px solid var(--border);
+    background: var(--card);
+    margin-top: auto;
+  }
+
+  /* Container padrão */
+  .app-container {
+    padding: 28px 40px;
+    max-width: 1600px;
+    margin: 0 auto;
+  }
+
+  /* Responsive */
+  @media (max-width: 768px) {
+    .app-header {
+      padding: 0 20px;
+      height: auto;
+      flex-direction: column;
+      gap: 12px;
+      padding: 16px 20px;
+    }
+    .header-nav {
+      width: 100%;
+      justify-content: center;
+    }
+    .header-user {
+      width: 100%;
+      justify-content: center;
+    }
+    .app-container {
+      padding: 20px;
+    }
+    .header-brand .app-subtitle {
+      display: none;
+    }
+  }
+`;
+
+/**
+ * Gera o header HTML
+ * @param {Object} options
+ * @param {string} options.role - 'admin' ou 'agente'
+ * @param {string} options.userName - Nome do usuário
+ * @param {string} options.activePage - Página ativa para nav
+ * @param {boolean} options.showNav - Mostrar navegação
+ */
+function buildHeader(options = {}) {
+  const { role = 'agente', userName = '', activePage = '', showNav = true } = options;
+  const isAdmin = role === 'admin';
+  const headerClass = isAdmin ? 'admin' : 'agent';
+
+  const initials = userName
+    .split(' ')
+    .map(n => n[0])
+    .slice(0, 2)
+    .join('')
+    .toUpperCase();
+
+  const adminNav = `
+    <nav class="header-nav">
+      <a href="/admin" class="${activePage === 'home' ? 'active' : ''}">Home</a>
+      <a href="/admin/agentes" class="${activePage === 'users' ? 'active' : ''}">Usuarios</a>
+      <a href="/admin/dashboard" class="${activePage === 'dashboard' ? 'active' : ''}">Dashboard</a>
+    </nav>
+  `;
+
+  const agentNav = `
+    <nav class="header-nav">
+      <a href="/dashboard" class="active">Meu Dashboard</a>
+    </nav>
+  `;
+
+  return `
+    <header class="app-header ${headerClass}">
+      <div class="header-brand">
+        <img src="/public/logo.png" alt="CambioReal" class="logo">
+        <div class="app-name">
+          <span class="app-name-badge">BI - CCC</span>
+          <span class="app-subtitle">Central Command Center</span>
+        </div>
+      </div>
+      ${showNav ? (isAdmin ? adminNav : agentNav) : ''}
+      <div class="header-user">
+        <div class="user-info">
+          <span class="user-avatar">${initials}</span>
+          <span>${userName}</span>
+          <span class="user-role">${isAdmin ? 'Admin' : 'Agente'}</span>
+        </div>
+        <a href="/logout" class="btn-logout">Sair</a>
+      </div>
+    </header>
+  `;
+}
+
+/**
+ * Gera o footer HTML
+ */
+function buildFooter() {
+  const year = new Date().getFullYear();
+  return `
+    <footer class="app-footer">
+      CambioReal &copy; ${year} &mdash; BI - CCC (Central Command Center)
+    </footer>
+  `;
+}
+
+/**
+ * Gera o head HTML com estilos base
+ * @param {string} title - Título da página
+ * @param {string} additionalCSS - CSS adicional
+ */
+function buildHead(title, additionalCSS = '') {
+  return `
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${title} | BI - CCC</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <style>
+      ${cssVariables}
+      ${headerCSS}
+      ${additionalCSS}
+    </style>
+  `;
+}
+
+module.exports = {
+  buildHeader,
+  buildFooter,
+  buildHead,
+  cssVariables,
+  headerCSS
+};
