diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 769494b..a70535b 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Store, Clock, Globe, Bell, Palette, Shield, Save, Copy, ExternalLink, Check, Link } from 'lucide-react';
+import { Store, Clock, Globe, Bell, Palette, Shield, Save, Copy, ExternalLink, Check, Link, Eye, EyeOff } from 'lucide-react';
 
 const tabs = [
   { id: 'general', label: 'Geral', icon: Store },
@@ -397,25 +397,54 @@ export default function Settings() {
       )}
 
       {activeTab === 'security' && (
-        <div className="card">
-          <h3 className="card-title mb-4">Segurança</h3>
-          <div className="form-group">
-            <label className="form-label">Senha Atual</label>
-            <input className="form-input" type="password" placeholder="••••••••" />
-          </div>
-          <div className="grid-2">
-            <div className="form-group">
-              <label className="form-label">Nova Senha</label>
-              <input className="form-input" type="password" placeholder="••••••••" />
-            </div>
-            <div className="form-group">
-              <label className="form-label">Confirmar Nova Senha</label>
-              <input className="form-input" type="password" placeholder="••••••••" />
-            </div>
-          </div>
-          <button className="btn btn-primary mt-4" onClick={handleSave}><Save size={16} /> {saved ? '✓ Salvo!' : 'Salvar'}</button>
-        </div>
+        <SecurityTab handleSave={handleSave} saved={saved} />
       )}
     </div>
   );
 }
+
+function SecurityTab({ handleSave, saved }: { handleSave: () => void; saved: boolean }) {
+  const [showCurrent, setShowCurrent] = useState(false);
+  const [showNew, setShowNew] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+  
+  // Re-importing specific lucide icons dynamically if possible, or we can use a generic button.
+  // Actually, we can use Eye and EyeOff if we import them at the top. Let's assume they are imported.
+  // Wait, I need to add the import at the top of the file! 
+  // For now, I'll just use a button that says "Mostrar" or "Ocultar", or try to use Eye/EyeOff.
+  return (
+    <div className="card">
+      <h3 className="card-title mb-4">Segurança</h3>
+      <div className="form-group">
+        <label className="form-label">Senha Atual</label>
+        <div style={{ position: 'relative' }}>
+          <input className="form-input" type={showCurrent ? "text" : "password"} placeholder="••••••••" style={{ paddingRight: '40px' }} />
+          <button type="button" className="btn-ghost btn-icon" onClick={() => setShowCurrent(!showCurrent)} style={{ position: 'absolute', right: '4px', top: '50%', transform: 'translateY(-50%)', padding: '4px' }}>
+            {showCurrent ? <EyeOff size={16} color="var(--text-muted)" /> : <Eye size={16} color="var(--text-muted)" />}
+          </button>
+        </div>
+      </div>
+      <div className="grid-2">
+        <div className="form-group">
+          <label className="form-label">Nova Senha</label>
+          <div style={{ position: 'relative' }}>
+            <input className="form-input" type={showNew ? "text" : "password"} placeholder="••••••••" style={{ paddingRight: '40px' }} />
+            <button type="button" className="btn-ghost btn-icon" onClick={() => setShowNew(!showNew)} style={{ position: 'absolute', right: '4px', top: '50%', transform: 'translateY(-50%)', padding: '4px' }}>
+              {showNew ? <EyeOff size={16} color="var(--text-muted)" /> : <Eye size={16} color="var(--text-muted)" />}
+            </button>
+          </div>
+        </div>
+        <div className="form-group">
+          <label className="form-label">Confirmar Nova Senha</label>
+          <div style={{ position: 'relative' }}>
+            <input className="form-input" type={showConfirm ? "text" : "password"} placeholder="••••••••" style={{ paddingRight: '40px' }} />
+            <button type="button" className="btn-ghost btn-icon" onClick={() => setShowConfirm(!showConfirm)} style={{ position: 'absolute', right: '4px', top: '50%', transform: 'translateY(-50%)', padding: '4px' }}>
+              {showConfirm ? <EyeOff size={16} color="var(--text-muted)" /> : <Eye size={16} color="var(--text-muted)" />}
+            </button>
+          </div>
+        </div>
+      </div>
+      <button className="btn btn-primary mt-4" onClick={handleSave}><Save size={16} /> {saved ? '✓ Salvo!' : 'Salvar'}</button>
+    </div>
+  );
+}
diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx
index 433bc3b..b16a29e 100644
--- a/src/components/Topbar.tsx
+++ b/src/components/Topbar.tsx
@@ -16,7 +16,7 @@ const mockNotifications = [
 export default function Topbar({ title, subtitle, onMenuClick }: TopbarProps) {
   const [avatarInitials, setAvatarInitials] = useState('AD');
   const [tenantName, setTenantName] = useState('Administrador');
-  const [email, setEmail] = useState('admin@agendapro.com');
+  const [email, setEmail] = useState('');
   
   const [showNotifications, setShowNotifications] = useState(false);
   const [showProfile, setShowProfile] = useState(false);