diff --git a/frontend/App.tsx b/frontend/App.tsx
index 0cc417c..99e9e8f 100644
--- a/frontend/App.tsx
+++ b/frontend/App.tsx
@@ -89,8 +89,8 @@ const AppContent: React.FC = () => {
                     className="h-24 sm:h-28 md:h-32 lg:h-36 mb-4 md:mb-6"
                   />
                   <p className="text-brand-black/80 text-xs sm:text-sm md:text-base leading-relaxed">
-                    Eternizando momentos únicos com excelência e profissionalismo
-                    desde 2020.
+                    Eternizando momentos únicos com excelência e
+                    profissionalismo desde 2020.
                   </p>
                 </div>
               </div>
diff --git a/frontend/components/CourseForm.tsx b/frontend/components/CourseForm.tsx
index 32d57b4..85b9f27 100644
--- a/frontend/components/CourseForm.tsx
+++ b/frontend/components/CourseForm.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
-import { Course, Institution } from '../types';
-import { Input, Select } from './Input';
-import { Button } from './Button';
-import { GraduationCap, X, Check, AlertCircle } from 'lucide-react';
+import React, { useState } from "react";
+import { Course, Institution } from "../types";
+import { Input, Select } from "./Input";
+import { Button } from "./Button";
+import { GraduationCap, X, Check, AlertCircle } from "lucide-react";
 
 interface CourseFormProps {
   onCancel: () => void;
@@ -13,52 +13,54 @@ interface CourseFormProps {
 }
 
 const GRADUATION_TYPES = [
-  'Bacharelado',
-  'Licenciatura',
-  'Tecnológico',
-  'Especialização',
-  'Mestrado',
-  'Doutorado'
+  "Bacharelado",
+  "Licenciatura",
+  "Tecnológico",
+  "Especialização",
+  "Mestrado",
+  "Doutorado",
 ];
 
-export const CourseForm: React.FC<CourseFormProps> = ({ 
-  onCancel, 
-  onSubmit, 
+export const CourseForm: React.FC<CourseFormProps> = ({
+  onCancel,
+  onSubmit,
   initialData,
   userId,
-  institutions
+  institutions,
 }) => {
   const currentYear = new Date().getFullYear();
-  const [formData, setFormData] = useState<Partial<Course>>(initialData || {
-    name: '',
-    institutionId: '',
-    year: currentYear,
-    semester: 1,
-    graduationType: '',
-    createdAt: new Date().toISOString(),
-    createdBy: userId,
-    isActive: true,
-  });
+  const [formData, setFormData] = useState<Partial<Course>>(
+    initialData || {
+      name: "",
+      institutionId: "",
+      year: currentYear,
+      semester: 1,
+      graduationType: "",
+      createdAt: new Date().toISOString(),
+      createdBy: userId,
+      isActive: true,
+    }
+  );
 
   const [showToast, setShowToast] = useState(false);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     // Validações
     if (!formData.name || formData.name.trim().length < 3) {
-      setError('Nome do curso deve ter pelo menos 3 caracteres');
+      setError("Nome do curso deve ter pelo menos 3 caracteres");
       return;
     }
-    
+
     if (!formData.institutionId) {
-      setError('Selecione uma universidade');
+      setError("Selecione uma universidade");
       return;
     }
-    
+
     if (!formData.graduationType) {
-      setError('Selecione o tipo de graduação');
+      setError("Selecione o tipo de graduação");
       return;
     }
 
@@ -69,20 +71,21 @@ export const CourseForm: React.FC<CourseFormProps> = ({
   };
 
   const handleChange = (field: keyof Course, value: any) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-    setError(''); // Limpa erro ao editar
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    setError(""); // Limpa erro ao editar
   };
 
   return (
     <div className="bg-white rounded-lg shadow-xl overflow-hidden max-w-2xl mx-auto border border-gray-100 slide-up relative">
-      
       {/* Success Toast */}
       {showToast && (
         <div className="absolute top-4 right-4 z-50 bg-brand-black text-white px-6 py-4 rounded shadow-2xl flex items-center space-x-3 fade-in">
           <Check className="text-brand-gold h-6 w-6" />
           <div>
             <h4 className="font-bold text-sm">Sucesso!</h4>
-            <p className="text-xs text-gray-300">Curso cadastrado com sucesso.</p>
+            <p className="text-xs text-gray-300">
+              Curso cadastrado com sucesso.
+            </p>
           </div>
         </div>
       )}
@@ -93,7 +96,7 @@ export const CourseForm: React.FC<CourseFormProps> = ({
           <GraduationCap className="text-brand-gold h-8 w-8" />
           <div>
             <h2 className="text-2xl font-serif text-brand-black">
-              {initialData ? 'Editar Curso/Turma' : 'Cadastrar Curso/Turma'}
+              {initialData ? "Editar Curso/Turma" : "Cadastrar Curso/Turma"}
             </h2>
             <p className="text-sm text-gray-500 mt-1">
               Registre as turmas disponíveis para eventos fotográficos
@@ -109,11 +112,13 @@ export const CourseForm: React.FC<CourseFormProps> = ({
       </div>
 
       <form onSubmit={handleSubmit} className="p-8 space-y-6">
-        
         {/* Erro global */}
         {error && (
           <div className="bg-red-50 border border-red-200 rounded-lg p-3 flex items-start">
-            <AlertCircle size={18} className="text-red-500 mr-2 flex-shrink-0 mt-0.5" />
+            <AlertCircle
+              size={18}
+              className="text-red-500 mr-2 flex-shrink-0 mt-0.5"
+            />
             <p className="text-sm text-red-700">{error}</p>
           </div>
         )}
@@ -123,23 +128,23 @@ export const CourseForm: React.FC<CourseFormProps> = ({
           <h3 className="text-sm font-semibold text-gray-700 tracking-wide uppercase">
             Informações do Curso
           </h3>
-          
+
           <Select
             label="Universidade*"
-            options={institutions.map(inst => ({ 
-              value: inst.id, 
-              label: `${inst.name} - ${inst.type}` 
+            options={institutions.map((inst) => ({
+              value: inst.id,
+              label: `${inst.name} - ${inst.type}`,
             }))}
-            value={formData.institutionId || ''}
-            onChange={(e) => handleChange('institutionId', e.target.value)}
+            value={formData.institutionId || ""}
+            onChange={(e) => handleChange("institutionId", e.target.value)}
             required
           />
 
           <Input
             label="Nome do Curso/Turma*"
             placeholder="Ex: Engenharia Civil 2025, Medicina - Turma A"
-            value={formData.name || ''}
-            onChange={(e) => handleChange('name', e.target.value)}
+            value={formData.name || ""}
+            onChange={(e) => handleChange("name", e.target.value)}
             required
           />
 
@@ -149,27 +154,29 @@ export const CourseForm: React.FC<CourseFormProps> = ({
               type="number"
               placeholder={currentYear.toString()}
               value={formData.year || currentYear}
-              onChange={(e) => handleChange('year', parseInt(e.target.value))}
+              onChange={(e) => handleChange("year", parseInt(e.target.value))}
               min={currentYear - 1}
               max={currentYear + 5}
               required
             />
-            
+
             <Select
               label="Semestre"
               options={[
-                { value: '1', label: '1º Semestre' },
-                { value: '2', label: '2º Semestre' }
+                { value: "1", label: "1º Semestre" },
+                { value: "2", label: "2º Semestre" },
               ]}
-              value={formData.semester?.toString() || '1'}
-              onChange={(e) => handleChange('semester', parseInt(e.target.value))}
+              value={formData.semester?.toString() || "1"}
+              onChange={(e) =>
+                handleChange("semester", parseInt(e.target.value))
+              }
             />
 
             <Select
               label="Tipo*"
-              options={GRADUATION_TYPES.map(t => ({ value: t, label: t }))}
-              value={formData.graduationType || ''}
-              onChange={(e) => handleChange('graduationType', e.target.value)}
+              options={GRADUATION_TYPES.map((t) => ({ value: t, label: t }))}
+              value={formData.graduationType || ""}
+              onChange={(e) => handleChange("graduationType", e.target.value)}
               required
             />
           </div>
@@ -180,7 +187,7 @@ export const CourseForm: React.FC<CourseFormProps> = ({
               type="checkbox"
               id="isActive"
               checked={formData.isActive !== false}
-              onChange={(e) => handleChange('isActive', e.target.checked)}
+              onChange={(e) => handleChange("isActive", e.target.checked)}
               className="w-4 h-4 text-brand-gold border-gray-300 rounded focus:ring-brand-gold"
             />
             <label htmlFor="isActive" className="text-sm text-gray-700">
@@ -189,14 +196,13 @@ export const CourseForm: React.FC<CourseFormProps> = ({
           </div>
         </div>
 
-
         {/* Actions */}
         <div className="flex justify-end space-x-3 pt-6 border-t">
           <Button variant="outline" onClick={onCancel} type="button">
             Cancelar
           </Button>
           <Button type="submit" variant="secondary">
-            {initialData ? 'Salvar Alterações' : 'Cadastrar Curso'}
+            {initialData ? "Salvar Alterações" : "Cadastrar Curso"}
           </Button>
         </div>
       </form>
diff --git a/frontend/components/EventForm.tsx b/frontend/components/EventForm.tsx
index b3e6bb1..2fd3258 100644
--- a/frontend/components/EventForm.tsx
+++ b/frontend/components/EventForm.tsx
@@ -38,11 +38,11 @@ export const EventForm: React.FC<EventFormProps> = ({
   initialData,
 }) => {
   const { user } = useAuth();
-  const { 
-    institutions, 
-    getInstitutionsByUserId, 
+  const {
+    institutions,
+    getInstitutionsByUserId,
     addInstitution,
-    getActiveCoursesByInstitutionId 
+    getActiveCoursesByInstitutionId,
   } = useData();
   const [activeTab, setActiveTab] = useState<
     "details" | "location" | "briefing" | "files"
@@ -98,13 +98,13 @@ export const EventForm: React.FC<EventFormProps> = ({
   const formTitle = initialData
     ? "Editar Evento"
     : isClientRequest
-      ? "Solicitar Orçamento/Evento"
-      : "Cadastrar Novo Evento";
+    ? "Solicitar Orçamento/Evento"
+    : "Cadastrar Novo Evento";
   const submitLabel = initialData
     ? "Salvar Alterações"
     : isClientRequest
-      ? "Enviar Solicitação"
-      : "Criar Evento";
+    ? "Enviar Solicitação"
+    : "Criar Evento";
 
   // Carregar cursos disponíveis quando instituição for selecionada
   useEffect(() => {
@@ -299,7 +299,9 @@ export const EventForm: React.FC<EventFormProps> = ({
       <div className="bg-gray-50 border-b px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6">
         <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-0">
           <div>
-            <h2 className="text-xl sm:text-2xl font-serif text-brand-black">{formTitle}</h2>
+            <h2 className="text-xl sm:text-2xl font-serif text-brand-black">
+              {formTitle}
+            </h2>
             <p className="text-xs sm:text-sm text-gray-500 mt-1">
               {isClientRequest
                 ? "Preencha os detalhes do seu sonho. Nossa equipe analisará em breve."
@@ -311,14 +313,16 @@ export const EventForm: React.FC<EventFormProps> = ({
             {["details", "location", "briefing", "files"].map((tab, idx) => (
               <div
                 key={tab}
-                className={`flex flex-col items-center ${activeTab === tab ? "opacity-100" : "opacity-40"
-                  }`}
+                className={`flex flex-col items-center ${
+                  activeTab === tab ? "opacity-100" : "opacity-40"
+                }`}
               >
                 <span
-                  className={`w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-xs font-bold mb-1 ${activeTab === tab
-                    ? "bg-[#492E61] text-white"
-                    : "bg-gray-200 text-gray-600"
-                    }`}
+                  className={`w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-xs font-bold mb-1 ${
+                    activeTab === tab
+                      ? "bg-[#492E61] text-white"
+                      : "bg-gray-200 text-gray-600"
+                  }`}
                 >
                   {idx + 1}
                 </span>
@@ -334,20 +338,29 @@ export const EventForm: React.FC<EventFormProps> = ({
           {[
             { id: "details", label: "Detalhes", icon: "1" },
             { id: "location", label: "Localização", icon: "2" },
-            { id: "briefing", label: isClientRequest ? "Desejos" : "Briefing", icon: "3" },
+            {
+              id: "briefing",
+              label: isClientRequest ? "Desejos" : "Briefing",
+              icon: "3",
+            },
             { id: "files", label: "Arquivos", icon: "4" },
           ].map((item) => (
             <button
               key={item.id}
               onClick={() => setActiveTab(item.id as any)}
-              className={`flex-1 px-4 py-3 text-xs sm:text-sm font-medium transition-colors border-b-2 whitespace-nowrap ${activeTab === item.id
-                ? "text-brand-gold border-brand-gold bg-brand-gold/5"
-                : "text-gray-500 border-transparent hover:bg-gray-50"
-                }`}
+              className={`flex-1 px-4 py-3 text-xs sm:text-sm font-medium transition-colors border-b-2 whitespace-nowrap ${
+                activeTab === item.id
+                  ? "text-brand-gold border-brand-gold bg-brand-gold/5"
+                  : "text-gray-500 border-transparent hover:bg-gray-50"
+              }`}
             >
-              <span className="inline-block w-5 h-5 rounded-full text-[10px] leading-5 text-center mr-1.5 ${
+              <span
+                className="inline-block w-5 h-5 rounded-full text-[10px] leading-5 text-center mr-1.5 ${
                 activeTab === item.id ? 'bg-brand-gold text-white' : 'bg-gray-200 text-gray-600'
-              }">{item.icon}</span>
+              }"
+              >
+                {item.icon}
+              </span>
               {item.label}
             </button>
           ))}
@@ -369,10 +382,11 @@ export const EventForm: React.FC<EventFormProps> = ({
             <button
               key={item.id}
               onClick={() => setActiveTab(item.id as any)}
-              className={`w-full text-left px-4 py-3 rounded-sm text-sm font-medium transition-colors ${activeTab === item.id
-                ? "bg-white shadow-sm text-brand-gold border-l-4 border-brand-gold"
-                : "text-gray-500 hover:bg-gray-100"
-                }`}
+              className={`w-full text-left px-4 py-3 rounded-sm text-sm font-medium transition-colors ${
+                activeTab === item.id
+                  ? "bg-white shadow-sm text-brand-gold border-l-4 border-brand-gold"
+                  : "text-gray-500 hover:bg-gray-100"
+              }`}
             >
               {item.label}
             </button>
@@ -544,7 +558,9 @@ export const EventForm: React.FC<EventFormProps> = ({
                               Nenhum curso cadastrado
                             </p>
                             <p className="text-xs text-gray-500">
-                              Entre em contato com a administração para cadastrar os cursos/turmas disponíveis nesta universidade.
+                              Entre em contato com a administração para
+                              cadastrar os cursos/turmas disponíveis nesta
+                              universidade.
                             </p>
                           </div>
                         </div>
@@ -563,7 +579,8 @@ export const EventForm: React.FC<EventFormProps> = ({
                         <option value="">Selecione um curso (opcional)</option>
                         {availableCourses.map((course) => (
                           <option key={course.id} value={course.id}>
-                            {course.name} - {course.graduationType} ({course.year}/{course.semester}º sem)
+                            {course.name} - {course.graduationType} (
+                            {course.year}/{course.semester}º sem)
                           </option>
                         ))}
                       </select>
@@ -592,11 +609,11 @@ export const EventForm: React.FC<EventFormProps> = ({
                     <div className="flex items-center justify-between w-full px-2">
                       <span className="text-sm text-gray-500 truncate max-w-[200px]">
                         {formData.coverImage &&
-                          !formData.coverImage.startsWith("http")
+                        !formData.coverImage.startsWith("http")
                           ? "Imagem selecionada"
                           : formData.coverImage
-                            ? "Imagem atual (URL)"
-                            : "Clique para selecionar..."}
+                          ? "Imagem atual (URL)"
+                          : "Clique para selecionar..."}
                       </span>
                       <div className="bg-gray-100 p-1.5 rounded hover:bg-gray-200">
                         <Upload size={16} className="text-gray-600" />
@@ -619,7 +636,10 @@ export const EventForm: React.FC<EventFormProps> = ({
               </div>
 
               <div className="flex flex-col sm:flex-row justify-end gap-3 sm:gap-0 mt-8">
-                <Button onClick={() => setActiveTab("location")} className="w-full sm:w-auto">
+                <Button
+                  onClick={() => setActiveTab("location")}
+                  className="w-full sm:w-auto"
+                >
                   Próximo: Localização
                 </Button>
               </div>
@@ -796,7 +816,10 @@ export const EventForm: React.FC<EventFormProps> = ({
                 >
                   Voltar
                 </Button>
-                <Button onClick={() => setActiveTab("briefing")} className="w-full sm:w-auto">
+                <Button
+                  onClick={() => setActiveTab("briefing")}
+                  className="w-full sm:w-auto"
+                >
                   Próximo
                 </Button>
               </div>
@@ -862,8 +885,9 @@ export const EventForm: React.FC<EventFormProps> = ({
                       />
                       <button
                         onClick={() => removeContact(idx)}
-                        className={`mt-1 p-2 text-gray-400 hover:text-red-500 ${idx === 0 ? "mt-7" : ""
-                          }`}
+                        className={`mt-1 p-2 text-gray-400 hover:text-red-500 ${
+                          idx === 0 ? "mt-7" : ""
+                        }`}
                       >
                         <X size={16} />
                       </button>
@@ -880,7 +904,12 @@ export const EventForm: React.FC<EventFormProps> = ({
                 >
                   Voltar
                 </Button>
-                <Button onClick={() => setActiveTab("files")} className="w-full sm:w-auto">Próximo</Button>
+                <Button
+                  onClick={() => setActiveTab("files")}
+                  className="w-full sm:w-auto"
+                >
+                  Próximo
+                </Button>
               </div>
             </div>
           )}
@@ -938,7 +967,11 @@ export const EventForm: React.FC<EventFormProps> = ({
                 >
                   Voltar
                 </Button>
-                <Button onClick={handleSubmit} variant="secondary" className="w-full sm:w-auto">
+                <Button
+                  onClick={handleSubmit}
+                  variant="secondary"
+                  className="w-full sm:w-auto"
+                >
                   {submitLabel}
                 </Button>
               </div>
diff --git a/frontend/components/Navbar.tsx b/frontend/components/Navbar.tsx
index 5bada86..4a5206e 100644
--- a/frontend/components/Navbar.tsx
+++ b/frontend/components/Navbar.tsx
@@ -1,7 +1,17 @@
 import React, { useState, useEffect } from "react";
 import { UserRole } from "../types";
 import { useAuth } from "../contexts/AuthContext";
-import { Menu, X, LogOut, User, Settings, Camera, Mail, Phone, GraduationCap } from "lucide-react";
+import {
+  Menu,
+  X,
+  LogOut,
+  User,
+  Settings,
+  Camera,
+  Mail,
+  Phone,
+  GraduationCap,
+} from "lucide-react";
 import { Button } from "./Button";
 
 interface NavbarProps {
@@ -34,7 +44,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
     const handleClickOutside = (event: MouseEvent) => {
       if (isAccountDropdownOpen) {
         const target = event.target as HTMLElement;
-        if (!target.closest('.relative')) {
+        if (!target.closest(".relative")) {
           setIsAccountDropdownOpen(false);
         }
       }
@@ -51,7 +61,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
       case UserRole.BUSINESS_OWNER:
         return [
           { name: "Gestão de Eventos", path: "dashboard" },
-          { name: "Equipe & Fotógrafos", path: "team" },
+          { name: "Equipe", path: "team" },
           { name: "Gestão de Cursos", path: "courses" },
           { name: "Financeiro", path: "finance" },
         ];
@@ -61,9 +71,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
           { name: "Solicitar Evento", path: "request-event" },
         ];
       case UserRole.PHOTOGRAPHER:
-        return [
-          { name: "Eventos Designados", path: "dashboard" },
-        ];
+        return [{ name: "Eventos Designados", path: "dashboard" }];
       default:
         return [];
     }
@@ -102,10 +110,11 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                   <button
                     key={link.path}
                     onClick={() => onNavigate(link.path)}
-                    className={`text-sm font-medium tracking-wide uppercase hover:text-brand-gold transition-colors pb-1 ${currentPage === link.path
-                      ? "text-brand-gold border-b-2 border-brand-gold"
-                      : "text-gray-600 border-b-2 border-transparent"
-                      }`}
+                    className={`text-sm font-medium tracking-wide uppercase hover:text-brand-gold transition-colors pb-1 ${
+                      currentPage === link.path
+                        ? "text-brand-gold border-b-2 border-brand-gold"
+                        : "text-gray-600 border-b-2 border-transparent"
+                    }`}
                   >
                     {link.name}
                   </button>
@@ -129,7 +138,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                   {/* Avatar com dropdown */}
                   <div className="relative">
                     <button
-                      onClick={() => setIsAccountDropdownOpen(!isAccountDropdownOpen)}
+                      onClick={() =>
+                        setIsAccountDropdownOpen(!isAccountDropdownOpen)
+                      }
                       className="h-9 w-9 rounded-full bg-gray-100 overflow-hidden border border-gray-200 ring-2 ring-transparent hover:ring-brand-gold transition-all cursor-pointer"
                     >
                       <img
@@ -151,8 +162,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                               className="w-full h-full object-cover"
                             />
                           </div>
-                          <h3 className="text-white font-bold text-lg mb-1">{user.name}</h3>
-                          <p className="text-white/90 text-sm mb-1">{user.email}</p>
+                          <h3 className="text-white font-bold text-lg mb-1">
+                            {user.name}
+                          </h3>
+                          <p className="text-white/90 text-sm mb-1">
+                            {user.email}
+                          </p>
                           <span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-xs font-medium text-white border border-white/30">
                             {getRoleLabel()}
                           </span>
@@ -161,7 +176,8 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                         {/* Menu Items */}
                         <div className="p-4 space-y-2 bg-gray-50">
                           {/* Editar Perfil - Apenas para Fotógrafos e Clientes */}
-                          {(user.role === UserRole.PHOTOGRAPHER || user.role === UserRole.EVENT_OWNER) && (
+                          {(user.role === UserRole.PHOTOGRAPHER ||
+                            user.role === UserRole.EVENT_OWNER) && (
                             <button
                               onClick={() => {
                                 setIsEditProfileModalOpen(true);
@@ -173,14 +189,19 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                                 <User size={20} className="text-[#492E61]" />
                               </div>
                               <div className="flex-1">
-                                <p className="text-sm font-semibold text-gray-900">Editar Perfil</p>
-                                <p className="text-xs text-gray-500">Atualize suas informações</p>
+                                <p className="text-sm font-semibold text-gray-900">
+                                  Editar Perfil
+                                </p>
+                                <p className="text-xs text-gray-500">
+                                  Atualize suas informações
+                                </p>
                               </div>
                             </button>
                           )}
 
                           {/* Configurações - Apenas para CEO e Business Owner */}
-                          {(user.role === UserRole.BUSINESS_OWNER || user.role === UserRole.SUPERADMIN) && (
+                          {(user.role === UserRole.BUSINESS_OWNER ||
+                            user.role === UserRole.SUPERADMIN) && (
                             <button
                               onClick={() => {
                                 onNavigate("settings");
@@ -192,8 +213,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                                 <Settings size={20} className="text-gray-600" />
                               </div>
                               <div className="flex-1">
-                                <p className="text-sm font-semibold text-gray-900">Configurações</p>
-                                <p className="text-xs text-gray-500">Preferências da conta</p>
+                                <p className="text-sm font-semibold text-gray-900">
+                                  Configurações
+                                </p>
+                                <p className="text-xs text-gray-500">
+                                  Preferências da conta
+                                </p>
                               </div>
                             </button>
                           )}
@@ -210,8 +235,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                               <LogOut size={20} className="text-red-600" />
                             </div>
                             <div className="flex-1">
-                              <p className="text-sm font-semibold text-red-600">Sair da Conta</p>
-                              <p className="text-xs text-red-400">Desconectar do sistema</p>
+                              <p className="text-sm font-semibold text-red-600">
+                                Sair da Conta
+                              </p>
+                              <p className="text-xs text-red-400">
+                                Desconectar do sistema
+                              </p>
                             </div>
                           </button>
                         </div>
@@ -232,7 +261,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                     </div>
                     <div className="text-left hidden lg:block">
                       <p className="text-xs text-gray-500">Olá, bem-vindo(a)</p>
-                      <p className="text-xs font-semibold text-gray-700">Entrar/Cadastrar</p>
+                      <p className="text-xs font-semibold text-gray-700">
+                        Entrar/Cadastrar
+                      </p>
                     </div>
                   </button>
 
@@ -244,8 +275,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                         <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-2 border-white/30">
                           <User size={32} className="text-white" />
                         </div>
-                        <p className="text-white/70 text-xs mb-1">Olá, bem-vindo(a)</p>
-                        <p className="text-white font-semibold text-base">Entrar/Cadastrar</p>
+                        <p className="text-white/70 text-xs mb-1">
+                          Olá, bem-vindo(a)
+                        </p>
+                        <p className="text-white font-semibold text-base">
+                          Entrar/Cadastrar
+                        </p>
                       </div>
 
                       {/* Botões */}
@@ -284,7 +319,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                 <>
                   <div className="relative">
                     <button
-                      onClick={() => setIsAccountDropdownOpen(!isAccountDropdownOpen)}
+                      onClick={() =>
+                        setIsAccountDropdownOpen(!isAccountDropdownOpen)
+                      }
                       className="h-10 w-10 rounded-full bg-gray-100 overflow-hidden border border-gray-200 ring-2 ring-transparent active:ring-brand-gold transition-all shadow-md"
                     >
                       <img
@@ -306,8 +343,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                               className="w-full h-full object-cover"
                             />
                           </div>
-                          <h3 className="text-white font-bold text-lg mb-1">{user.name}</h3>
-                          <p className="text-white/90 text-sm mb-1">{user.email}</p>
+                          <h3 className="text-white font-bold text-lg mb-1">
+                            {user.name}
+                          </h3>
+                          <p className="text-white/90 text-sm mb-1">
+                            {user.email}
+                          </p>
                           <span className="inline-block px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full text-xs font-medium text-white border border-white/30">
                             {getRoleLabel()}
                           </span>
@@ -316,7 +357,8 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                         {/* Menu Items */}
                         <div className="p-4 space-y-2 bg-gray-50">
                           {/* Editar Perfil - Apenas para Fotógrafos e Clientes */}
-                          {(user.role === UserRole.PHOTOGRAPHER || user.role === UserRole.EVENT_OWNER) && (
+                          {(user.role === UserRole.PHOTOGRAPHER ||
+                            user.role === UserRole.EVENT_OWNER) && (
                             <button
                               onClick={() => {
                                 setIsEditProfileModalOpen(true);
@@ -328,14 +370,19 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                                 <User size={20} className="text-[#492E61]" />
                               </div>
                               <div className="flex-1">
-                                <p className="text-sm font-semibold text-gray-900">Editar Perfil</p>
-                                <p className="text-xs text-gray-500">Atualize suas informações</p>
+                                <p className="text-sm font-semibold text-gray-900">
+                                  Editar Perfil
+                                </p>
+                                <p className="text-xs text-gray-500">
+                                  Atualize suas informações
+                                </p>
                               </div>
                             </button>
                           )}
 
                           {/* Configurações - Apenas para CEO e Business Owner */}
-                          {(user.role === UserRole.BUSINESS_OWNER || user.role === UserRole.SUPERADMIN) && (
+                          {(user.role === UserRole.BUSINESS_OWNER ||
+                            user.role === UserRole.SUPERADMIN) && (
                             <button
                               onClick={() => {
                                 onNavigate("settings");
@@ -347,8 +394,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                                 <Settings size={20} className="text-gray-600" />
                               </div>
                               <div className="flex-1">
-                                <p className="text-sm font-semibold text-gray-900">Configurações</p>
-                                <p className="text-xs text-gray-500">Preferências da conta</p>
+                                <p className="text-sm font-semibold text-gray-900">
+                                  Configurações
+                                </p>
+                                <p className="text-xs text-gray-500">
+                                  Preferências da conta
+                                </p>
                               </div>
                             </button>
                           )}
@@ -365,8 +416,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                               <LogOut size={20} className="text-red-600" />
                             </div>
                             <div className="flex-1">
-                              <p className="text-sm font-semibold text-red-600">Sair da Conta</p>
-                              <p className="text-xs text-red-400">Desconectar do sistema</p>
+                              <p className="text-sm font-semibold text-red-600">
+                                Sair da Conta
+                              </p>
+                              <p className="text-xs text-red-400">
+                                Desconectar do sistema
+                              </p>
                             </div>
                           </button>
                         </div>
@@ -385,7 +440,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
               ) : (
                 <div className="relative">
                   <button
-                    onClick={() => setIsAccountDropdownOpen(!isAccountDropdownOpen)}
+                    onClick={() =>
+                      setIsAccountDropdownOpen(!isAccountDropdownOpen)
+                    }
                     className="w-10 h-10 rounded-full border-2 border-brand-gold flex items-center justify-center text-brand-gold shadow-md"
                   >
                     <User size={20} />
@@ -399,8 +456,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                         <div className="w-16 h-16 mx-auto mb-3 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center border-2 border-white/30">
                           <User size={32} className="text-white" />
                         </div>
-                        <p className="text-white/70 text-xs mb-1">Olá, bem-vindo(a)</p>
-                        <p className="text-white font-semibold text-base">Entrar/Cadastrar</p>
+                        <p className="text-white/70 text-xs mb-1">
+                          Olá, bem-vindo(a)
+                        </p>
+                        <p className="text-white font-semibold text-base">
+                          Entrar/Cadastrar
+                        </p>
                       </div>
 
                       {/* Botões */}
@@ -475,7 +536,8 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                     </div>
 
                     {/* Botão Editar Perfil - Apenas para Fotógrafos e Clientes */}
-                    {(user.role === UserRole.PHOTOGRAPHER || user.role === UserRole.EVENT_OWNER) && (
+                    {(user.role === UserRole.PHOTOGRAPHER ||
+                      user.role === UserRole.EVENT_OWNER) && (
                       <button
                         onClick={() => {
                           setIsEditProfileModalOpen(true);
@@ -487,8 +549,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                           <User size={20} className="text-[#492E61]" />
                         </div>
                         <div className="flex-1 text-left">
-                          <p className="text-sm font-semibold text-gray-900">Editar Perfil</p>
-                          <p className="text-xs text-gray-500">Atualize suas informações</p>
+                          <p className="text-sm font-semibold text-gray-900">
+                            Editar Perfil
+                          </p>
+                          <p className="text-xs text-gray-500">
+                            Atualize suas informações
+                          </p>
                         </div>
                       </button>
                     )}
@@ -505,8 +571,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                         <LogOut size={20} className="text-red-600" />
                       </div>
                       <div className="flex-1 text-left">
-                        <p className="text-sm font-semibold text-red-600">Sair da Conta</p>
-                        <p className="text-xs text-red-400">Desconectar do sistema</p>
+                        <p className="text-sm font-semibold text-red-600">
+                          Sair da Conta
+                        </p>
+                        <p className="text-xs text-red-400">
+                          Desconectar do sistema
+                        </p>
                       </div>
                     </button>
                   </div>
@@ -542,8 +612,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
       </nav>
 
       {/* Modal de Edição de Perfil - Apenas para Fotógrafos e Clientes */}
-      {
-        isEditProfileModalOpen && (user?.role === UserRole.PHOTOGRAPHER || user?.role === UserRole.EVENT_OWNER) && (
+      {isEditProfileModalOpen &&
+        (user?.role === UserRole.PHOTOGRAPHER ||
+          user?.role === UserRole.EVENT_OWNER) && (
           <div
             className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[100] p-4 fade-in"
             onClick={() => setIsEditProfileModalOpen(false)}
@@ -570,8 +641,12 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                     <Camera size={28} className="text-white" />
                   </div>
                 </div>
-                <h2 className="text-2xl font-bold text-white mb-1">Editar Perfil</h2>
-                <p className="text-white/80 text-sm">Atualize suas informações pessoais</p>
+                <h2 className="text-2xl font-bold text-white mb-1">
+                  Editar Perfil
+                </h2>
+                <p className="text-white/80 text-sm">
+                  Atualize suas informações pessoais
+                </p>
               </div>
 
               {/* Form */}
@@ -590,11 +665,16 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                     Nome Completo
                   </label>
                   <div className="relative">
-                    <User size={20} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+                    <User
+                      size={20}
+                      className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+                    />
                     <input
                       type="text"
                       value={profileData.name}
-                      onChange={(e) => setProfileData({ ...profileData, name: e.target.value })}
+                      onChange={(e) =>
+                        setProfileData({ ...profileData, name: e.target.value })
+                      }
                       className="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#492E61] focus:border-transparent transition-all"
                       placeholder="Seu nome completo"
                       required
@@ -608,11 +688,19 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                     Email
                   </label>
                   <div className="relative">
-                    <Mail size={20} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+                    <Mail
+                      size={20}
+                      className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+                    />
                     <input
                       type="email"
                       value={profileData.email}
-                      onChange={(e) => setProfileData({ ...profileData, email: e.target.value })}
+                      onChange={(e) =>
+                        setProfileData({
+                          ...profileData,
+                          email: e.target.value,
+                        })
+                      }
                       className="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#492E61] focus:border-transparent transition-all"
                       placeholder="seu@email.com"
                       required
@@ -626,11 +714,19 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                     Telefone
                   </label>
                   <div className="relative">
-                    <Phone size={20} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+                    <Phone
+                      size={20}
+                      className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+                    />
                     <input
                       type="tel"
                       value={profileData.phone}
-                      onChange={(e) => setProfileData({ ...profileData, phone: e.target.value })}
+                      onChange={(e) =>
+                        setProfileData({
+                          ...profileData,
+                          phone: e.target.value,
+                        })
+                      }
                       className="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-[#492E61] focus:border-transparent transition-all"
                       placeholder="(00) 00000-0000"
                     />
@@ -656,8 +752,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
               </form>
             </div>
           </div>
-        )
-      }
+        )}
     </>
   );
 };
diff --git a/frontend/contexts/DataContext.tsx b/frontend/contexts/DataContext.tsx
index 4c0da99..f1b4e00 100644
--- a/frontend/contexts/DataContext.tsx
+++ b/frontend/contexts/DataContext.tsx
@@ -1,5 +1,11 @@
 import React, { createContext, useContext, useState, ReactNode } from "react";
-import { EventData, EventStatus, EventType, Institution, Course } from "../types";
+import {
+  EventData,
+  EventStatus,
+  EventType,
+  Institution,
+  Course,
+} from "../types";
 
 // Initial Mock Data
 const INITIAL_INSTITUTIONS: Institution[] = [
@@ -37,7 +43,8 @@ const INITIAL_EVENTS: EventData[] = [
       state: "RS",
       zip: "95670-000",
     },
-    briefing: "Cerimônia de formatura com 120 formandos. Foco em fotos individuais e da turma.",
+    briefing:
+      "Cerimônia de formatura com 120 formandos. Foco em fotos individuais e da turma.",
     coverImage: "https://picsum.photos/id/1059/800/400",
     contacts: [
       {
@@ -67,7 +74,8 @@ const INITIAL_EVENTS: EventData[] = [
       state: "SP",
       zip: "04551-000",
     },
-    briefing: "Colação de grau solene. Capturar juramento e entrega de diplomas.",
+    briefing:
+      "Colação de grau solene. Capturar juramento e entrega de diplomas.",
     coverImage: "https://picsum.photos/id/3/800/400",
     contacts: [
       {
@@ -117,7 +125,8 @@ const INITIAL_EVENTS: EventData[] = [
       state: "RS",
       zip: "90035-003",
     },
-    briefing: "Defesa de tese em sala fechada. Fotos discretas da apresentação e banca.",
+    briefing:
+      "Defesa de tese em sala fechada. Fotos discretas da apresentação e banca.",
     coverImage: "https://picsum.photos/id/20/800/400",
     contacts: [
       {
@@ -196,7 +205,8 @@ const INITIAL_EVENTS: EventData[] = [
       state: "SP",
       zip: "04578-000",
     },
-    briefing: "Congresso com múltiplas salas. Cobrir palestrantes principais e stands.",
+    briefing:
+      "Congresso com múltiplas salas. Cobrir palestrantes principais e stands.",
     coverImage: "https://picsum.photos/id/50/800/400",
     contacts: [
       {
@@ -275,7 +285,8 @@ const INITIAL_EVENTS: EventData[] = [
       state: "SP",
       zip: "01045-000",
     },
-    briefing: "Festival com apresentações musicais e teatrais. Cobertura completa.",
+    briefing:
+      "Festival com apresentações musicais e teatrais. Cobertura completa.",
     coverImage: "https://picsum.photos/id/80/800/400",
     contacts: [],
     checklist: [],
@@ -296,7 +307,8 @@ const INITIAL_EVENTS: EventData[] = [
       state: "RS",
       zip: "91509-900",
     },
-    briefing: "Defesa de dissertação. Registro da apresentação e momento da aprovação.",
+    briefing:
+      "Defesa de dissertação. Registro da apresentação e momento da aprovação.",
     coverImage: "https://picsum.photos/id/90/800/400",
     contacts: [],
     checklist: [],
@@ -438,7 +450,8 @@ const INITIAL_EVENTS: EventData[] = [
       state: "RS",
       zip: "95670-200",
     },
-    briefing: "Formatura elegante em hotel. Cobertura completa da cerimônia e recepção.",
+    briefing:
+      "Formatura elegante em hotel. Cobertura completa da cerimônia e recepção.",
     coverImage: "https://picsum.photos/id/150/800/400",
     contacts: [
       {
@@ -467,7 +480,8 @@ const INITIAL_EVENTS: EventData[] = [
       state: "RS",
       zip: "90540-000",
     },
-    briefing: "Múltiplas defesas sequenciais. Fotos rápidas de cada apresentação.",
+    briefing:
+      "Múltiplas defesas sequenciais. Fotos rápidas de cada apresentação.",
     coverImage: "https://picsum.photos/id/160/800/400",
     contacts: [],
     checklist: [],
@@ -488,7 +502,8 @@ const INITIAL_EVENTS: EventData[] = [
       state: "RS",
       zip: "90040-000",
     },
-    briefing: "Festival ao ar livre com várias bandas. Fotos de palco e público.",
+    briefing:
+      "Festival ao ar livre com várias bandas. Fotos de palco e público.",
     coverImage: "https://picsum.photos/id/170/800/400",
     contacts: [],
     checklist: [],
@@ -651,7 +666,9 @@ export const DataProvider: React.FC<{ children: ReactNode }> = ({
 
   const updateCourse = (id: string, updatedData: Partial<Course>) => {
     setCourses((prev) =>
-      prev.map((course) => (course.id === id ? { ...course, ...updatedData } : course))
+      prev.map((course) =>
+        course.id === id ? { ...course, ...updatedData } : course
+      )
     );
   };
 
diff --git a/frontend/pages/CourseManagement.tsx b/frontend/pages/CourseManagement.tsx
index ce4a20b..b858e12 100644
--- a/frontend/pages/CourseManagement.tsx
+++ b/frontend/pages/CourseManagement.tsx
@@ -1,41 +1,62 @@
-import React, { useState } from 'react';
-import { useData } from '../contexts/DataContext';
-import { useAuth } from '../contexts/AuthContext';
-import { UserRole, Course } from '../types';
-import { CourseForm } from '../components/CourseForm';
-import { GraduationCap, Plus, Building2, ChevronRight, Edit, Trash2, CheckCircle, XCircle } from 'lucide-react';
-import { Button } from '../components/Button';
+import React, { useState } from "react";
+import { useData } from "../contexts/DataContext";
+import { useAuth } from "../contexts/AuthContext";
+import { UserRole, Course } from "../types";
+import { CourseForm } from "../components/CourseForm";
+import {
+  GraduationCap,
+  Plus,
+  Building2,
+  ChevronRight,
+  Edit,
+  Trash2,
+  CheckCircle,
+  XCircle,
+} from "lucide-react";
+import { Button } from "../components/Button";
 
 export const CourseManagement: React.FC = () => {
   const { user } = useAuth();
-  const { 
-    institutions, 
-    courses, 
-    addCourse, 
+  const {
+    institutions,
+    courses,
+    addCourse,
     updateCourse,
-    getCoursesByInstitutionId 
+    getCoursesByInstitutionId,
   } = useData();
-  
-  const [selectedInstitution, setSelectedInstitution] = useState<string | null>(null);
+
+  const [selectedInstitution, setSelectedInstitution] = useState<string | null>(
+    null
+  );
   const [showCourseForm, setShowCourseForm] = useState(false);
-  const [editingCourse, setEditingCourse] = useState<Course | undefined>(undefined);
+  const [editingCourse, setEditingCourse] = useState<Course | undefined>(
+    undefined
+  );
 
   // Verificar se é admin
-  const isAdmin = user?.role === UserRole.SUPERADMIN || user?.role === UserRole.BUSINESS_OWNER;
+  const isAdmin =
+    user?.role === UserRole.SUPERADMIN ||
+    user?.role === UserRole.BUSINESS_OWNER;
 
   if (!isAdmin) {
     return (
       <div className="min-h-screen bg-gray-50 pt-32 pb-12">
         <div className="max-w-7xl mx-auto px-4 text-center">
           <h1 className="text-2xl font-bold text-red-600">Acesso Negado</h1>
-          <p className="text-gray-600 mt-2">Apenas administradores podem acessar esta página.</p>
+          <p className="text-gray-600 mt-2">
+            Apenas administradores podem acessar esta página.
+          </p>
         </div>
       </div>
     );
   }
 
-  const selectedInstitutionData = institutions.find(inst => inst.id === selectedInstitution);
-  const institutionCourses = selectedInstitution ? getCoursesByInstitutionId(selectedInstitution) : [];
+  const selectedInstitutionData = institutions.find(
+    (inst) => inst.id === selectedInstitution
+  );
+  const institutionCourses = selectedInstitution
+    ? getCoursesByInstitutionId(selectedInstitution)
+    : [];
 
   const handleAddCourse = () => {
     setEditingCourse(undefined);
@@ -59,7 +80,7 @@ export const CourseManagement: React.FC = () => {
         semester: courseData.semester,
         graduationType: courseData.graduationType!,
         createdAt: new Date().toISOString(),
-        createdBy: user?.id || '',
+        createdBy: user?.id || "",
         isActive: courseData.isActive !== false,
       };
       addCourse(newCourse);
@@ -83,7 +104,8 @@ export const CourseManagement: React.FC = () => {
             </h1>
           </div>
           <p className="text-sm sm:text-base text-gray-600">
-            Cadastre e gerencie os cursos/turmas disponíveis em cada universidade
+            Cadastre e gerencie os cursos/turmas disponíveis em cada
+            universidade
           </p>
         </div>
 
@@ -97,7 +119,7 @@ export const CourseManagement: React.FC = () => {
               }}
               onSubmit={handleSubmitCourse}
               initialData={editingCourse}
-              userId={user?.id || ''}
+              userId={user?.id || ""}
               institutions={institutions}
             />
           </div>
@@ -115,7 +137,8 @@ export const CourseManagement: React.FC = () => {
                   </h2>
                 </div>
                 <span className="text-sm text-gray-500 bg-gray-100 px-3 py-1 rounded-full">
-                  {institutions.length} {institutions.length === 1 ? 'instituição' : 'instituições'}
+                  {institutions.length}{" "}
+                  {institutions.length === 1 ? "instituição" : "instituições"}
                 </span>
               </div>
             </div>
@@ -141,29 +164,41 @@ export const CourseManagement: React.FC = () => {
                 <tbody className="divide-y divide-gray-200">
                   {institutions.length === 0 ? (
                     <tr>
-                      <td colSpan={4} className="px-4 py-8 text-center text-gray-500">
+                      <td
+                        colSpan={4}
+                        className="px-4 py-8 text-center text-gray-500"
+                      >
                         Nenhuma universidade cadastrada
                       </td>
                     </tr>
                   ) : (
                     institutions.map((institution) => {
-                      const coursesCount = getCoursesByInstitutionId(institution.id).length;
+                      const coursesCount = getCoursesByInstitutionId(
+                        institution.id
+                      ).length;
                       const isSelected = selectedInstitution === institution.id;
 
                       return (
                         <tr
                           key={institution.id}
                           className={`hover:bg-gray-50 transition-colors cursor-pointer ${
-                            isSelected ? 'bg-blue-50 border-l-4 border-brand-gold' : ''
+                            isSelected
+                              ? "bg-blue-50 border-l-4 border-brand-gold"
+                              : ""
                           }`}
-                          onClick={() => setSelectedInstitution(isSelected ? null : institution.id)}
+                          onClick={() =>
+                            setSelectedInstitution(
+                              isSelected ? null : institution.id
+                            )
+                          }
                         >
                           <td className="px-4 py-4">
                             <div className="text-sm font-medium text-gray-900">
                               {institution.name}
                             </div>
                             <div className="text-xs text-gray-500 mt-0.5">
-                              {institution.address?.city}, {institution.address?.state}
+                              {institution.address?.city},{" "}
+                              {institution.address?.state}
                             </div>
                           </td>
                           <td className="px-4 py-4">
@@ -172,20 +207,24 @@ export const CourseManagement: React.FC = () => {
                             </span>
                           </td>
                           <td className="px-4 py-4 text-center">
-                            <span className={`inline-flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold ${
-                              coursesCount > 0 
-                                ? 'bg-green-100 text-green-700' 
-                                : 'bg-gray-100 text-gray-500'
-                            }`}>
+                            <span
+                              className={`inline-flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold ${
+                                coursesCount > 0
+                                  ? "bg-green-100 text-green-700"
+                                  : "bg-gray-100 text-gray-500"
+                              }`}
+                            >
                               {coursesCount}
                             </span>
                           </td>
                           <td className="px-4 py-4 text-center">
-                            <ChevronRight 
+                            <ChevronRight
                               className={`inline-block transition-transform ${
-                                isSelected ? 'rotate-90 text-brand-gold' : 'text-gray-400'
-                              }`} 
-                              size={20} 
+                                isSelected
+                                  ? "rotate-90 text-brand-gold"
+                                  : "text-gray-400"
+                              }`}
+                              size={20}
                             />
                           </td>
                         </tr>
@@ -211,7 +250,10 @@ export const CourseManagement: React.FC = () => {
                   </h2>
                   {selectedInstitutionData && (
                     <p className="text-xs text-gray-500 mt-1">
-                      {institutionCourses.length} {institutionCourses.length === 1 ? 'curso cadastrado' : 'cursos cadastrados'}
+                      {institutionCourses.length}{" "}
+                      {institutionCourses.length === 1
+                        ? "curso cadastrado"
+                        : "cursos cadastrados"}
                     </p>
                   )}
                 </div>
@@ -293,13 +335,20 @@ export const CourseManagement: React.FC = () => {
                           >
                             {course.isActive ? (
                               <>
-                                <CheckCircle size={16} className="text-green-500" />
-                                <span className="text-xs text-green-700 font-medium">Ativo</span>
+                                <CheckCircle
+                                  size={16}
+                                  className="text-green-500"
+                                />
+                                <span className="text-xs text-green-700 font-medium">
+                                  Ativo
+                                </span>
                               </>
                             ) : (
                               <>
                                 <XCircle size={16} className="text-gray-400" />
-                                <span className="text-xs text-gray-500 font-medium">Inativo</span>
+                                <span className="text-xs text-gray-500 font-medium">
+                                  Inativo
+                                </span>
                               </>
                             )}
                           </button>
diff --git a/frontend/pages/Settings.tsx b/frontend/pages/Settings.tsx
index ed2245d..fcb620d 100644
--- a/frontend/pages/Settings.tsx
+++ b/frontend/pages/Settings.tsx
@@ -1,534 +1,649 @@
-import React, { useState } from 'react';
-import { User, Mail, Phone, MapPin, Lock, Bell, Palette, Globe, Save, Camera, GraduationCap } from 'lucide-react';
-import { Button } from '../components/Button';
-import { useAuth } from '../contexts/AuthContext';
-import { UserRole } from '../types';
+import React, { useState } from "react";
+import {
+  User,
+  Mail,
+  Phone,
+  MapPin,
+  Lock,
+  Bell,
+  Palette,
+  Globe,
+  Save,
+  Camera,
+  GraduationCap,
+} from "lucide-react";
+import { Button } from "../components/Button";
+import { useAuth } from "../contexts/AuthContext";
+import { UserRole } from "../types";
 
 export const SettingsPage: React.FC = () => {
-    const { user } = useAuth();
-    const isAdmin = user?.role === UserRole.SUPERADMIN || user?.role === UserRole.BUSINESS_OWNER;
-    const [activeTab, setActiveTab] = useState<'profile' | 'account' | 'notifications' | 'appearance' | 'courses'>('profile');
-    const [profileData, setProfileData] = useState({
-        name: 'João Silva',
-        email: 'joao.silva@photum.com',
-        phone: '(41) 99999-0000',
-        location: 'Curitiba, PR',
-        bio: 'Fotógrafo profissional especializado em eventos e formaturas há mais de 10 anos.',
-        avatar: 'https://i.pravatar.cc/150?img=68'
-    });
+  const { user } = useAuth();
+  const isAdmin =
+    user?.role === UserRole.SUPERADMIN ||
+    user?.role === UserRole.BUSINESS_OWNER;
+  const [activeTab, setActiveTab] = useState<
+    "profile" | "account" | "notifications" | "appearance" | "courses"
+  >("profile");
+  const [profileData, setProfileData] = useState({
+    name: "João Silva",
+    email: "joao.silva@photum.com",
+    phone: "(41) 99999-0000",
+    location: "Curitiba, PR",
+    bio: "Fotógrafo profissional especializado em eventos e formaturas há mais de 10 anos.",
+    avatar: "https://i.pravatar.cc/150?img=68",
+  });
 
-    const [notificationSettings, setNotificationSettings] = useState({
-        emailNotifications: true,
-        pushNotifications: true,
-        smsNotifications: false,
-        eventReminders: true,
-        paymentAlerts: true,
-        teamUpdates: false
-    });
+  const [notificationSettings, setNotificationSettings] = useState({
+    emailNotifications: true,
+    pushNotifications: true,
+    smsNotifications: false,
+    eventReminders: true,
+    paymentAlerts: true,
+    teamUpdates: false,
+  });
 
-    const [appearanceSettings, setAppearanceSettings] = useState({
-        theme: 'light',
-        language: 'pt-BR',
-        dateFormat: 'DD/MM/YYYY',
-        currency: 'BRL'
-    });
+  const [appearanceSettings, setAppearanceSettings] = useState({
+    theme: "light",
+    language: "pt-BR",
+    dateFormat: "DD/MM/YYYY",
+    currency: "BRL",
+  });
 
-    const handleSaveProfile = () => {
-        alert('Perfil atualizado com sucesso!');
-    };
+  const handleSaveProfile = () => {
+    alert("Perfil atualizado com sucesso!");
+  };
 
-    const handleSaveNotifications = () => {
-        alert('Configurações de notificações salvas!');
-    };
+  const handleSaveNotifications = () => {
+    alert("Configurações de notificações salvas!");
+  };
 
-    const handleSaveAppearance = () => {
-        alert('Configurações de aparência salvas!');
-    };
+  const handleSaveAppearance = () => {
+    alert("Configurações de aparência salvas!");
+  };
 
-    return (
-        <div className="min-h-screen bg-gray-50 pt-20 sm:pt-24 md:pt-28 lg:pt-32 pb-8 sm:pb-12">
-            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                {/* Header */}
-                <div className="mb-6 sm:mb-8">
-                    <h1 className="text-2xl sm:text-3xl font-serif font-bold text-brand-black mb-2">
-                        Configurações
-                    </h1>
-                    <p className="text-sm sm:text-base text-gray-600">
-                        Gerencie suas preferências e informações da conta
-                    </p>
-                </div>
-
-                <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 sm:gap-6">
-                    {/* Mobile Tabs - Horizontal */}
-                    <div className="lg:hidden">
-                        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-2">
-                            <nav className="flex overflow-x-auto gap-1 scrollbar-hide">
-                                <button
-                                    onClick={() => setActiveTab('profile')}
-                                    className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${activeTab === 'profile'
-                                        ? 'bg-brand-gold text-white'
-                                        : 'text-gray-700 hover:bg-gray-100'
-                                        }`}
-                                >
-                                    <User size={18} />
-                                    <span className="font-medium">Perfil</span>
-                                </button>
-                                <button
-                                    onClick={() => setActiveTab('account')}
-                                    className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${activeTab === 'account'
-                                        ? 'bg-brand-gold text-white'
-                                        : 'text-gray-700 hover:bg-gray-100'
-                                        }`}
-                                >
-                                    <Lock size={18} />
-                                    <span className="font-medium">Conta</span>
-                                </button>
-                                <button
-                                    onClick={() => setActiveTab('notifications')}
-                                    className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${activeTab === 'notifications'
-                                        ? 'bg-brand-gold text-white'
-                                        : 'text-gray-700 hover:bg-gray-100'
-                                        }`}
-                                >
-                                    <Bell size={18} />
-                                    <span className="font-medium">Notificações</span>
-                                </button>
-                                <button
-                                    onClick={() => setActiveTab('appearance')}
-                                    className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${activeTab === 'appearance'
-                                        ? 'bg-brand-gold text-white'
-                                        : 'text-gray-700 hover:bg-gray-100'
-                                        }`}
-                                >
-                                    <Palette size={18} />
-                                    <span className="font-medium">Aparência</span>
-                                </button>
-                            </nav>
-                        </div>
-                    </div>
-
-                    {/* Desktop Sidebar - Vertical */}
-                    <div className="hidden lg:block lg:col-span-1">
-                        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
-                            <nav className="space-y-1">
-                                <button
-                                    onClick={() => setActiveTab('profile')}
-                                    className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${activeTab === 'profile'
-                                        ? 'bg-brand-gold text-white'
-                                        : 'text-gray-700 hover:bg-gray-100'
-                                        }`}
-                                >
-                                    <User size={20} />
-                                    <span className="font-medium">Perfil</span>
-                                </button>
-                                <button
-                                    onClick={() => setActiveTab('account')}
-                                    className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${activeTab === 'account'
-                                        ? 'bg-brand-gold text-white'
-                                        : 'text-gray-700 hover:bg-gray-100'
-                                        }`}
-                                >
-                                    <Lock size={20} />
-                                    <span className="font-medium">Conta</span>
-                                </button>
-                                <button
-                                    onClick={() => setActiveTab('notifications')}
-                                    className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${activeTab === 'notifications'
-                                        ? 'bg-brand-gold text-white'
-                                        : 'text-gray-700 hover:bg-gray-100'
-                                        }`}
-                                >
-                                    <Bell size={20} />
-                                    <span className="font-medium">Notificações</span>
-                                </button>
-                                <button
-                                    onClick={() => setActiveTab('appearance')}
-                                    className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${activeTab === 'appearance'
-                                        ? 'bg-brand-gold text-white'
-                                        : 'text-gray-700 hover:bg-gray-100'
-                                        }`}
-                                >
-                                    <Palette size={20} />
-                                    <span className="font-medium">Aparência</span>
-                                </button>
-                            </nav>
-                        </div>
-                    </div>
-
-                    {/* Content */}
-                    <div className="lg:col-span-3">
-                        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6 md:p-8">
-                            {/* Profile Tab */}
-                            {activeTab === 'profile' && (
-                                <div>
-                                    <h2 className="text-xl sm:text-2xl font-semibold mb-4 sm:mb-6">Informações do Perfil</h2>
-
-                                    <div className="mb-6 sm:mb-8">
-                                        <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6">
-                                            <div className="relative">
-                                                <img
-                                                    src={profileData.avatar}
-                                                    alt="Avatar"
-                                                    className="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover"
-                                                />
-                                                <button className="absolute bottom-0 right-0 w-7 h-7 sm:w-8 sm:h-8 bg-brand-gold text-white rounded-full flex items-center justify-center hover:bg-[#a5bd2e] transition-colors">
-                                                    <Camera size={14} className="sm:w-4 sm:h-4" />
-                                                </button>
-                                            </div>
-                                            <div className="text-center sm:text-left">
-                                                <h3 className="font-semibold text-base sm:text-lg">{profileData.name}</h3>
-                                                <p className="text-xs sm:text-sm text-gray-600">{profileData.email}</p>
-                                                <button className="text-xs sm:text-sm text-brand-gold hover:underline mt-1">
-                                                    Alterar foto
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div className="space-y-6">
-                                        <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">
-                                                Nome Completo
-                                            </label>
-                                            <div className="relative">
-                                                <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
-                                                <input
-                                                    type="text"
-                                                    value={profileData.name}
-                                                    onChange={(e) => setProfileData({ ...profileData, name: e.target.value })}
-                                                    className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                                                />
-                                            </div>
-                                        </div>
-
-                                        <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">
-                                                Email
-                                            </label>
-                                            <div className="relative">
-                                                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
-                                                <input
-                                                    type="email"
-                                                    value={profileData.email}
-                                                    onChange={(e) => setProfileData({ ...profileData, email: e.target.value })}
-                                                    className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                                                />
-                                            </div>
-                                        </div>
-
-                                        <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">
-                                                Telefone
-                                            </label>
-                                            <div className="relative">
-                                                <Phone className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
-                                                <input
-                                                    type="tel"
-                                                    value={profileData.phone}
-                                                    onChange={(e) => setProfileData({ ...profileData, phone: e.target.value })}
-                                                    className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                                                />
-                                            </div>
-                                        </div>
-
-                                        <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">
-                                                Localização
-                                            </label>
-                                            <div className="relative">
-                                                <MapPin className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
-                                                <input
-                                                    type="text"
-                                                    value={profileData.location}
-                                                    onChange={(e) => setProfileData({ ...profileData, location: e.target.value })}
-                                                    className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                                                />
-                                            </div>
-                                        </div>
-
-                                        <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">
-                                                Biografia
-                                            </label>
-                                            <textarea
-                                                value={profileData.bio}
-                                                onChange={(e) => setProfileData({ ...profileData, bio: e.target.value })}
-                                                rows={4}
-                                                className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                                            />
-                                        </div>
-
-                                        <div className="pt-4">
-                                            <Button size="lg" variant="secondary" onClick={handleSaveProfile}>
-                                                <Save size={20} className="mr-2" />
-                                                Salvar Alterações
-                                            </Button>
-                                        </div>
-                                    </div>
-                                </div>
-                            )}
-
-                            {/* Account Tab */}
-                            {activeTab === 'account' && (
-                                <div>
-                                    <h2 className="text-2xl font-semibold mb-6">Segurança da Conta</h2>
-
-                                    <div className="space-y-6">
-                                        <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">
-                                                Senha Atual
-                                            </label>
-                                            <input
-                                                type="password"
-                                                placeholder="Digite sua senha atual"
-                                                className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                                            />
-                                        </div>
-
-                                        <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">
-                                                Nova Senha
-                                            </label>
-                                            <input
-                                                type="password"
-                                                placeholder="Digite sua nova senha"
-                                                className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                                            />
-                                        </div>
-
-                                        <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">
-                                                Confirmar Nova Senha
-                                            </label>
-                                            <input
-                                                type="password"
-                                                placeholder="Confirme sua nova senha"
-                                                className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                                            />
-                                        </div>
-
-                                        <div className="pt-4">
-                                            <Button size="lg" variant="secondary">
-                                                <Lock size={20} className="mr-2" />
-                                                Atualizar Senha
-                                            </Button>
-                                        </div>
-
-                                        <div className="pt-8 border-t border-gray-200">
-                                            <h3 className="text-lg font-semibold mb-4">Autenticação em Dois Fatores</h3>
-                                            <p className="text-gray-600 mb-4">
-                                                Adicione uma camada extra de segurança à sua conta
-                                            </p>
-                                            <Button size="md" variant="outline">
-                                                Ativar 2FA
-                                            </Button>
-                                        </div>
-                                    </div>
-                                </div>
-                            )}
-
-                            {/* Notifications Tab */}
-                            {activeTab === 'notifications' && (
-                                <div>
-                                    <h2 className="text-2xl font-semibold mb-6">Preferências de Notificações</h2>
-
-                                    <div className="space-y-6">
-                                        <div className="flex items-center justify-between py-4 border-b border-gray-200">
-                                            <div>
-                                                <h3 className="font-medium">Notificações por Email</h3>
-                                                <p className="text-sm text-gray-600">Receba atualizações por email</p>
-                                            </div>
-                                            <label className="relative inline-flex items-center cursor-pointer">
-                                                <input
-                                                    type="checkbox"
-                                                    checked={notificationSettings.emailNotifications}
-                                                    onChange={(e) => setNotificationSettings({
-                                                        ...notificationSettings,
-                                                        emailNotifications: e.target.checked
-                                                    })}
-                                                    className="sr-only peer"
-                                                />
-                                                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
-                                            </label>
-                                        </div>
-
-                                        <div className="flex items-center justify-between py-4 border-b border-gray-200">
-                                            <div>
-                                                <h3 className="font-medium">Notificações Push</h3>
-                                                <p className="text-sm text-gray-600">Receba notificações no navegador</p>
-                                            </div>
-                                            <label className="relative inline-flex items-center cursor-pointer">
-                                                <input
-                                                    type="checkbox"
-                                                    checked={notificationSettings.pushNotifications}
-                                                    onChange={(e) => setNotificationSettings({
-                                                        ...notificationSettings,
-                                                        pushNotifications: e.target.checked
-                                                    })}
-                                                    className="sr-only peer"
-                                                />
-                                                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
-                                            </label>
-                                        </div>
-
-                                        <div className="flex items-center justify-between py-4 border-b border-gray-200">
-                                            <div>
-                                                <h3 className="font-medium">SMS</h3>
-                                                <p className="text-sm text-gray-600">Receba mensagens de texto</p>
-                                            </div>
-                                            <label className="relative inline-flex items-center cursor-pointer">
-                                                <input
-                                                    type="checkbox"
-                                                    checked={notificationSettings.smsNotifications}
-                                                    onChange={(e) => setNotificationSettings({
-                                                        ...notificationSettings,
-                                                        smsNotifications: e.target.checked
-                                                    })}
-                                                    className="sr-only peer"
-                                                />
-                                                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
-                                            </label>
-                                        </div>
-
-                                        <div className="flex items-center justify-between py-4 border-b border-gray-200">
-                                            <div>
-                                                <h3 className="font-medium">Lembretes de Eventos</h3>
-                                                <p className="text-sm text-gray-600">Receba lembretes antes dos eventos</p>
-                                            </div>
-                                            <label className="relative inline-flex items-center cursor-pointer">
-                                                <input
-                                                    type="checkbox"
-                                                    checked={notificationSettings.eventReminders}
-                                                    onChange={(e) => setNotificationSettings({
-                                                        ...notificationSettings,
-                                                        eventReminders: e.target.checked
-                                                    })}
-                                                    className="sr-only peer"
-                                                />
-                                                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
-                                            </label>
-                                        </div>
-
-                                        <div className="flex items-center justify-between py-4 border-b border-gray-200">
-                                            <div>
-                                                <h3 className="font-medium">Alertas de Pagamento</h3>
-                                                <p className="text-sm text-gray-600">Notificações sobre pagamentos</p>
-                                            </div>
-                                            <label className="relative inline-flex items-center cursor-pointer">
-                                                <input
-                                                    type="checkbox"
-                                                    checked={notificationSettings.paymentAlerts}
-                                                    onChange={(e) => setNotificationSettings({
-                                                        ...notificationSettings,
-                                                        paymentAlerts: e.target.checked
-                                                    })}
-                                                    className="sr-only peer"
-                                                />
-                                                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
-                                            </label>
-                                        </div>
-
-                                        <div className="pt-4">
-                                            <Button size="lg" variant="secondary" onClick={handleSaveNotifications}>
-                                                <Save size={20} className="mr-2" />
-                                                Salvar Preferências
-                                            </Button>
-                                        </div>
-                                    </div>
-                                </div>
-                            )}
-
-                            {/* Appearance Tab */}
-                            {activeTab === 'appearance' && (
-                                <div>
-                                    <h2 className="text-2xl font-semibold mb-6">Aparência e Idioma</h2>
-
-                                    <div className="space-y-6">
-                                        <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">
-                                                Tema
-                                            </label>
-                                            <select
-                                                value={appearanceSettings.theme}
-                                                onChange={(e) => setAppearanceSettings({
-                                                    ...appearanceSettings,
-                                                    theme: e.target.value
-                                                })}
-                                                className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                                            >
-                                                <option value="light">Claro</option>
-                                                <option value="dark">Escuro</option>
-                                                <option value="auto">Automático</option>
-                                            </select>
-                                        </div>
-
-                                        <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">
-                                                Idioma
-                                            </label>
-                                            <select
-                                                value={appearanceSettings.language}
-                                                onChange={(e) => setAppearanceSettings({
-                                                    ...appearanceSettings,
-                                                    language: e.target.value
-                                                })}
-                                                className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                                            >
-                                                <option value="pt-BR">Português (Brasil)</option>
-                                                <option value="en-US">English (US)</option>
-                                                <option value="es-ES">Español</option>
-                                            </select>
-                                        </div>
-
-                                        <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">
-                                                Formato de Data
-                                            </label>
-                                            <select
-                                                value={appearanceSettings.dateFormat}
-                                                onChange={(e) => setAppearanceSettings({
-                                                    ...appearanceSettings,
-                                                    dateFormat: e.target.value
-                                                })}
-                                                className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                                            >
-                                                <option value="DD/MM/YYYY">DD/MM/YYYY</option>
-                                                <option value="MM/DD/YYYY">MM/DD/YYYY</option>
-                                                <option value="YYYY-MM-DD">YYYY-MM-DD</option>
-                                            </select>
-                                        </div>
-
-                                        <div>
-                                            <label className="block text-sm font-medium text-gray-700 mb-2">
-                                                Moeda
-                                            </label>
-                                            <select
-                                                value={appearanceSettings.currency}
-                                                onChange={(e) => setAppearanceSettings({
-                                                    ...appearanceSettings,
-                                                    currency: e.target.value
-                                                })}
-                                                className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                                            >
-                                                <option value="BRL">Real (R$)</option>
-                                                <option value="USD">Dólar ($)</option>
-                                                <option value="EUR">Euro (€)</option>
-                                            </select>
-                                        </div>
-
-                                        <div className="pt-4">
-                                            <Button size="lg" variant="secondary" onClick={handleSaveAppearance}>
-                                                <Save size={20} className="mr-2" />
-                                                Salvar Configurações
-                                            </Button>
-                                        </div>
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                </div>
-            </div>
+  return (
+    <div className="min-h-screen bg-gray-50 pt-20 sm:pt-24 md:pt-28 lg:pt-32 pb-8 sm:pb-12">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="mb-6 sm:mb-8">
+          <h1 className="text-2xl sm:text-3xl font-serif font-bold text-brand-black mb-2">
+            Configurações
+          </h1>
+          <p className="text-sm sm:text-base text-gray-600">
+            Gerencie suas preferências e informações da conta
+          </p>
         </div>
-    );
+
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 sm:gap-6">
+          {/* Mobile Tabs - Horizontal */}
+          <div className="lg:hidden">
+            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-2">
+              <nav className="flex overflow-x-auto gap-1 scrollbar-hide">
+                <button
+                  onClick={() => setActiveTab("profile")}
+                  className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${
+                    activeTab === "profile"
+                      ? "bg-brand-gold text-white"
+                      : "text-gray-700 hover:bg-gray-100"
+                  }`}
+                >
+                  <User size={18} />
+                  <span className="font-medium">Perfil</span>
+                </button>
+                <button
+                  onClick={() => setActiveTab("account")}
+                  className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${
+                    activeTab === "account"
+                      ? "bg-brand-gold text-white"
+                      : "text-gray-700 hover:bg-gray-100"
+                  }`}
+                >
+                  <Lock size={18} />
+                  <span className="font-medium">Conta</span>
+                </button>
+                <button
+                  onClick={() => setActiveTab("notifications")}
+                  className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${
+                    activeTab === "notifications"
+                      ? "bg-brand-gold text-white"
+                      : "text-gray-700 hover:bg-gray-100"
+                  }`}
+                >
+                  <Bell size={18} />
+                  <span className="font-medium">Notificações</span>
+                </button>
+                <button
+                  onClick={() => setActiveTab("appearance")}
+                  className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors whitespace-nowrap text-sm ${
+                    activeTab === "appearance"
+                      ? "bg-brand-gold text-white"
+                      : "text-gray-700 hover:bg-gray-100"
+                  }`}
+                >
+                  <Palette size={18} />
+                  <span className="font-medium">Aparência</span>
+                </button>
+              </nav>
+            </div>
+          </div>
+
+          {/* Desktop Sidebar - Vertical */}
+          <div className="hidden lg:block lg:col-span-1">
+            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+              <nav className="space-y-1">
+                <button
+                  onClick={() => setActiveTab("profile")}
+                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${
+                    activeTab === "profile"
+                      ? "bg-brand-gold text-white"
+                      : "text-gray-700 hover:bg-gray-100"
+                  }`}
+                >
+                  <User size={20} />
+                  <span className="font-medium">Perfil</span>
+                </button>
+                <button
+                  onClick={() => setActiveTab("account")}
+                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${
+                    activeTab === "account"
+                      ? "bg-brand-gold text-white"
+                      : "text-gray-700 hover:bg-gray-100"
+                  }`}
+                >
+                  <Lock size={20} />
+                  <span className="font-medium">Conta</span>
+                </button>
+                <button
+                  onClick={() => setActiveTab("notifications")}
+                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${
+                    activeTab === "notifications"
+                      ? "bg-brand-gold text-white"
+                      : "text-gray-700 hover:bg-gray-100"
+                  }`}
+                >
+                  <Bell size={20} />
+                  <span className="font-medium">Notificações</span>
+                </button>
+                <button
+                  onClick={() => setActiveTab("appearance")}
+                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-md transition-colors ${
+                    activeTab === "appearance"
+                      ? "bg-brand-gold text-white"
+                      : "text-gray-700 hover:bg-gray-100"
+                  }`}
+                >
+                  <Palette size={20} />
+                  <span className="font-medium">Aparência</span>
+                </button>
+              </nav>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className="lg:col-span-3">
+            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6 md:p-8">
+              {/* Profile Tab */}
+              {activeTab === "profile" && (
+                <div>
+                  <h2 className="text-xl sm:text-2xl font-semibold mb-4 sm:mb-6">
+                    Informações do Perfil
+                  </h2>
+
+                  <div className="mb-6 sm:mb-8">
+                    <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6">
+                      <div className="relative">
+                        <img
+                          src={profileData.avatar}
+                          alt="Avatar"
+                          className="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover"
+                        />
+                        <button className="absolute bottom-0 right-0 w-7 h-7 sm:w-8 sm:h-8 bg-brand-gold text-white rounded-full flex items-center justify-center hover:bg-[#a5bd2e] transition-colors">
+                          <Camera size={14} className="sm:w-4 sm:h-4" />
+                        </button>
+                      </div>
+                      <div className="text-center sm:text-left">
+                        <h3 className="font-semibold text-base sm:text-lg">
+                          {profileData.name}
+                        </h3>
+                        <p className="text-xs sm:text-sm text-gray-600">
+                          {profileData.email}
+                        </p>
+                        <button className="text-xs sm:text-sm text-brand-gold hover:underline mt-1">
+                          Alterar foto
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="space-y-6">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Nome Completo
+                      </label>
+                      <div className="relative">
+                        <User
+                          className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+                          size={20}
+                        />
+                        <input
+                          type="text"
+                          value={profileData.name}
+                          onChange={(e) =>
+                            setProfileData({
+                              ...profileData,
+                              name: e.target.value,
+                            })
+                          }
+                          className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                        />
+                      </div>
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Email
+                      </label>
+                      <div className="relative">
+                        <Mail
+                          className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+                          size={20}
+                        />
+                        <input
+                          type="email"
+                          value={profileData.email}
+                          onChange={(e) =>
+                            setProfileData({
+                              ...profileData,
+                              email: e.target.value,
+                            })
+                          }
+                          className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                        />
+                      </div>
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Telefone
+                      </label>
+                      <div className="relative">
+                        <Phone
+                          className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+                          size={20}
+                        />
+                        <input
+                          type="tel"
+                          value={profileData.phone}
+                          onChange={(e) =>
+                            setProfileData({
+                              ...profileData,
+                              phone: e.target.value,
+                            })
+                          }
+                          className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                        />
+                      </div>
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Localização
+                      </label>
+                      <div className="relative">
+                        <MapPin
+                          className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+                          size={20}
+                        />
+                        <input
+                          type="text"
+                          value={profileData.location}
+                          onChange={(e) =>
+                            setProfileData({
+                              ...profileData,
+                              location: e.target.value,
+                            })
+                          }
+                          className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                        />
+                      </div>
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Biografia
+                      </label>
+                      <textarea
+                        value={profileData.bio}
+                        onChange={(e) =>
+                          setProfileData({
+                            ...profileData,
+                            bio: e.target.value,
+                          })
+                        }
+                        rows={4}
+                        className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                      />
+                    </div>
+
+                    <div className="pt-4">
+                      <Button
+                        size="lg"
+                        variant="secondary"
+                        onClick={handleSaveProfile}
+                      >
+                        <Save size={20} className="mr-2" />
+                        Salvar Alterações
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Account Tab */}
+              {activeTab === "account" && (
+                <div>
+                  <h2 className="text-2xl font-semibold mb-6">
+                    Segurança da Conta
+                  </h2>
+
+                  <div className="space-y-6">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Senha Atual
+                      </label>
+                      <input
+                        type="password"
+                        placeholder="Digite sua senha atual"
+                        className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Nova Senha
+                      </label>
+                      <input
+                        type="password"
+                        placeholder="Digite sua nova senha"
+                        className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                      />
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Confirmar Nova Senha
+                      </label>
+                      <input
+                        type="password"
+                        placeholder="Confirme sua nova senha"
+                        className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                      />
+                    </div>
+
+                    <div className="pt-4">
+                      <Button size="lg" variant="secondary">
+                        <Lock size={20} className="mr-2" />
+                        Atualizar Senha
+                      </Button>
+                    </div>
+
+                    <div className="pt-8 border-t border-gray-200">
+                      <h3 className="text-lg font-semibold mb-4">
+                        Autenticação em Dois Fatores
+                      </h3>
+                      <p className="text-gray-600 mb-4">
+                        Adicione uma camada extra de segurança à sua conta
+                      </p>
+                      <Button size="md" variant="outline">
+                        Ativar 2FA
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Notifications Tab */}
+              {activeTab === "notifications" && (
+                <div>
+                  <h2 className="text-2xl font-semibold mb-6">
+                    Preferências de Notificações
+                  </h2>
+
+                  <div className="space-y-6">
+                    <div className="flex items-center justify-between py-4 border-b border-gray-200">
+                      <div>
+                        <h3 className="font-medium">Notificações por Email</h3>
+                        <p className="text-sm text-gray-600">
+                          Receba atualizações por email
+                        </p>
+                      </div>
+                      <label className="relative inline-flex items-center cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={notificationSettings.emailNotifications}
+                          onChange={(e) =>
+                            setNotificationSettings({
+                              ...notificationSettings,
+                              emailNotifications: e.target.checked,
+                            })
+                          }
+                          className="sr-only peer"
+                        />
+                        <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
+                      </label>
+                    </div>
+
+                    <div className="flex items-center justify-between py-4 border-b border-gray-200">
+                      <div>
+                        <h3 className="font-medium">Notificações Push</h3>
+                        <p className="text-sm text-gray-600">
+                          Receba notificações no navegador
+                        </p>
+                      </div>
+                      <label className="relative inline-flex items-center cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={notificationSettings.pushNotifications}
+                          onChange={(e) =>
+                            setNotificationSettings({
+                              ...notificationSettings,
+                              pushNotifications: e.target.checked,
+                            })
+                          }
+                          className="sr-only peer"
+                        />
+                        <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
+                      </label>
+                    </div>
+
+                    <div className="flex items-center justify-between py-4 border-b border-gray-200">
+                      <div>
+                        <h3 className="font-medium">SMS</h3>
+                        <p className="text-sm text-gray-600">
+                          Receba mensagens de texto
+                        </p>
+                      </div>
+                      <label className="relative inline-flex items-center cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={notificationSettings.smsNotifications}
+                          onChange={(e) =>
+                            setNotificationSettings({
+                              ...notificationSettings,
+                              smsNotifications: e.target.checked,
+                            })
+                          }
+                          className="sr-only peer"
+                        />
+                        <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
+                      </label>
+                    </div>
+
+                    <div className="flex items-center justify-between py-4 border-b border-gray-200">
+                      <div>
+                        <h3 className="font-medium">Lembretes de Eventos</h3>
+                        <p className="text-sm text-gray-600">
+                          Receba lembretes antes dos eventos
+                        </p>
+                      </div>
+                      <label className="relative inline-flex items-center cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={notificationSettings.eventReminders}
+                          onChange={(e) =>
+                            setNotificationSettings({
+                              ...notificationSettings,
+                              eventReminders: e.target.checked,
+                            })
+                          }
+                          className="sr-only peer"
+                        />
+                        <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
+                      </label>
+                    </div>
+
+                    <div className="flex items-center justify-between py-4 border-b border-gray-200">
+                      <div>
+                        <h3 className="font-medium">Alertas de Pagamento</h3>
+                        <p className="text-sm text-gray-600">
+                          Notificações sobre pagamentos
+                        </p>
+                      </div>
+                      <label className="relative inline-flex items-center cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={notificationSettings.paymentAlerts}
+                          onChange={(e) =>
+                            setNotificationSettings({
+                              ...notificationSettings,
+                              paymentAlerts: e.target.checked,
+                            })
+                          }
+                          className="sr-only peer"
+                        />
+                        <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-gold/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-gold"></div>
+                      </label>
+                    </div>
+
+                    <div className="pt-4">
+                      <Button
+                        size="lg"
+                        variant="secondary"
+                        onClick={handleSaveNotifications}
+                      >
+                        <Save size={20} className="mr-2" />
+                        Salvar Preferências
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Appearance Tab */}
+              {activeTab === "appearance" && (
+                <div>
+                  <h2 className="text-2xl font-semibold mb-6">
+                    Aparência e Idioma
+                  </h2>
+
+                  <div className="space-y-6">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Tema
+                      </label>
+                      <select
+                        value={appearanceSettings.theme}
+                        onChange={(e) =>
+                          setAppearanceSettings({
+                            ...appearanceSettings,
+                            theme: e.target.value,
+                          })
+                        }
+                        className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                      >
+                        <option value="light">Claro</option>
+                        <option value="dark">Escuro</option>
+                        <option value="auto">Automático</option>
+                      </select>
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Idioma
+                      </label>
+                      <select
+                        value={appearanceSettings.language}
+                        onChange={(e) =>
+                          setAppearanceSettings({
+                            ...appearanceSettings,
+                            language: e.target.value,
+                          })
+                        }
+                        className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                      >
+                        <option value="pt-BR">Português (Brasil)</option>
+                        <option value="en-US">English (US)</option>
+                        <option value="es-ES">Español</option>
+                      </select>
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Formato de Data
+                      </label>
+                      <select
+                        value={appearanceSettings.dateFormat}
+                        onChange={(e) =>
+                          setAppearanceSettings({
+                            ...appearanceSettings,
+                            dateFormat: e.target.value,
+                          })
+                        }
+                        className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                      >
+                        <option value="DD/MM/YYYY">DD/MM/YYYY</option>
+                        <option value="MM/DD/YYYY">MM/DD/YYYY</option>
+                        <option value="YYYY-MM-DD">YYYY-MM-DD</option>
+                      </select>
+                    </div>
+
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Moeda
+                      </label>
+                      <select
+                        value={appearanceSettings.currency}
+                        onChange={(e) =>
+                          setAppearanceSettings({
+                            ...appearanceSettings,
+                            currency: e.target.value,
+                          })
+                        }
+                        className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                      >
+                        <option value="BRL">Real (R$)</option>
+                        <option value="USD">Dólar ($)</option>
+                        <option value="EUR">Euro (€)</option>
+                      </select>
+                    </div>
+
+                    <div className="pt-4">
+                      <Button
+                        size="lg"
+                        variant="secondary"
+                        onClick={handleSaveAppearance}
+                      >
+                        <Save size={20} className="mr-2" />
+                        Salvar Configurações
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
diff --git a/frontend/pages/Team.tsx b/frontend/pages/Team.tsx
index 3134789..22a7bc7 100644
--- a/frontend/pages/Team.tsx
+++ b/frontend/pages/Team.tsx
@@ -12,32 +12,98 @@ import {
   User,
   Upload,
   X,
+  Video,
+  UserCheck,
+  Car,
+  Building,
+  CreditCard,
+  TrendingUp,
 } from "lucide-react";
 import { Button } from "../components/Button";
 
-interface Photographer {
+type ProfessionalRole = "Fotógrafo" | "Cinegrafista" | "Recepcionista";
+
+interface Professional {
   id: string;
   name: string;
+  role: ProfessionalRole;
+  address: {
+    street: string;
+    number: string;
+    complement?: string;
+    neighborhood: string;
+    city: string;
+    state: string;
+  };
+  whatsapp: string;
+  cpfCnpj: string;
+  bankInfo: {
+    bank: string;
+    agency: string;
+    accountPix: string;
+  };
+  hasCar: boolean;
+  hasStudio: boolean;
+  studioQuantity?: number;
+  cardType: string;
+  accountHolder: string;
+  observations?: string;
+  ratings: {
+    technicalQuality: number;
+    appearance: number;
+    education: number;
+    sympathy: number;
+    eventPerformance: number;
+    scheduleAvailability: number;
+    average: number;
+  };
+  freeTable: string;
+  extraFee: string;
   email: string;
-  phone: string;
-  location: string;
   specialties: string[];
-  rating: number;
   eventsCompleted: number;
   status: "active" | "inactive" | "busy";
   avatar: string;
   joinDate: string;
 }
 
-const MOCK_PHOTOGRAPHERS: Photographer[] = [
+const MOCK_PROFESSIONALS: Professional[] = [
   {
     id: "1",
     name: "Carlos Silva",
+    role: "Fotógrafo",
+    address: {
+      street: "Rua das Flores",
+      number: "123",
+      complement: "Apto 301",
+      neighborhood: "Centro",
+      city: "Curitiba",
+      state: "PR",
+    },
+    whatsapp: "(41) 99999-1111",
+    cpfCnpj: "123.456.789-00",
+    bankInfo: {
+      bank: "Banco do Brasil",
+      agency: "1234-5",
+      accountPix: "carlos.silva@email.com",
+    },
+    hasCar: true,
+    hasStudio: false,
+    cardType: "Débito/Crédito",
+    accountHolder: "Carlos Silva",
+    ratings: {
+      technicalQuality: 4.8,
+      appearance: 4.7,
+      education: 4.9,
+      sympathy: 4.8,
+      eventPerformance: 4.9,
+      scheduleAvailability: 4.6,
+      average: 4.8,
+    },
+    freeTable: "R$ 800,00",
+    extraFee: "R$ 150,00 por equipamento extra",
     email: "carlos.silva@photum.com",
-    phone: "(41) 99999-1111",
-    location: "Curitiba, PR",
     specialties: ["Formaturas", "Eventos Corporativos"],
-    rating: 4.8,
     eventsCompleted: 45,
     status: "active",
     avatar: "https://i.pravatar.cc/150?img=12",
@@ -46,11 +112,39 @@ const MOCK_PHOTOGRAPHERS: Photographer[] = [
   {
     id: "2",
     name: "Ana Paula Mendes",
+    role: "Cinegrafista",
+    address: {
+      street: "Av. Sete de Setembro",
+      number: "456",
+      neighborhood: "Batel",
+      city: "Curitiba",
+      state: "PR",
+    },
+    whatsapp: "(41) 99999-2222",
+    cpfCnpj: "987.654.321-00",
+    bankInfo: {
+      bank: "Caixa Econômica",
+      agency: "0987",
+      accountPix: "(41) 99999-2222",
+    },
+    hasCar: true,
+    hasStudio: true,
+    studioQuantity: 1,
+    cardType: "Crédito",
+    accountHolder: "Ana Paula Mendes",
+    ratings: {
+      technicalQuality: 4.9,
+      appearance: 5.0,
+      education: 4.8,
+      sympathy: 4.9,
+      eventPerformance: 4.9,
+      scheduleAvailability: 4.7,
+      average: 4.9,
+    },
+    freeTable: "R$ 1.200,00",
+    extraFee: "R$ 200,00 por hora extra",
     email: "ana.mendes@photum.com",
-    phone: "(41) 99999-2222",
-    location: "Curitiba, PR",
     specialties: ["Casamentos", "Formaturas"],
-    rating: 4.9,
     eventsCompleted: 62,
     status: "busy",
     avatar: "https://i.pravatar.cc/150?img=5",
@@ -58,74 +152,97 @@ const MOCK_PHOTOGRAPHERS: Photographer[] = [
   },
   {
     id: "3",
-    name: "Roberto Costa",
-    email: "roberto.costa@photum.com",
-    phone: "(41) 99999-3333",
-    location: "São José dos Pinhais, PR",
-    specialties: ["Formaturas", "Eventos Sociais"],
-    rating: 4.7,
-    eventsCompleted: 38,
-    status: "active",
-    avatar: "https://i.pravatar.cc/150?img=33",
-    joinDate: "2023-03-10",
-  },
-  {
-    id: "4",
-    name: "Juliana Santos",
-    email: "juliana.santos@photum.com",
-    phone: "(41) 99999-4444",
-    location: "Curitiba, PR",
-    specialties: ["Casamentos", "Ensaios"],
-    rating: 5.0,
+    name: "Mariana Alves",
+    role: "Recepcionista",
+    address: {
+      street: "Rua Comendador Araújo",
+      number: "321",
+      complement: "Sala 12",
+      neighborhood: "Centro",
+      city: "Curitiba",
+      state: "PR",
+    },
+    whatsapp: "(41) 99999-4444",
+    cpfCnpj: "321.654.987-00",
+    bankInfo: {
+      bank: "Bradesco",
+      agency: "4321",
+      accountPix: "mariana.alves@email.com",
+    },
+    hasCar: false,
+    hasStudio: false,
+    cardType: "Débito",
+    accountHolder: "Mariana Alves Santos",
+    ratings: {
+      technicalQuality: 0,
+      appearance: 4.9,
+      education: 5.0,
+      sympathy: 5.0,
+      eventPerformance: 4.8,
+      scheduleAvailability: 4.9,
+      average: 4.9,
+    },
+    freeTable: "R$ 400,00",
+    extraFee: "R$ 50,00 por hora extra",
+    email: "mariana.alves@photum.com",
+    specialties: ["Recepção", "Atendimento"],
     eventsCompleted: 71,
     status: "active",
     avatar: "https://i.pravatar.cc/150?img=9",
     joinDate: "2022-05-12",
   },
-  {
-    id: "5",
-    name: "Fernando Oliveira",
-    email: "fernando.oliveira@photum.com",
-    phone: "(41) 99999-5555",
-    location: "Pinhais, PR",
-    specialties: ["Eventos Corporativos", "Formaturas"],
-    rating: 4.6,
-    eventsCompleted: 29,
-    status: "inactive",
-    avatar: "https://i.pravatar.cc/150?img=15",
-    joinDate: "2023-07-01",
-  },
-  {
-    id: "6",
-    name: "Mariana Rodrigues",
-    email: "mariana.rodrigues@photum.com",
-    phone: "(41) 99999-6666",
-    location: "Curitiba, PR",
-    specialties: ["Formaturas", "Eventos Sociais", "Casamentos"],
-    rating: 4.9,
-    eventsCompleted: 54,
-    status: "busy",
-    avatar: "https://i.pravatar.cc/150?img=10",
-    joinDate: "2022-11-05",
-  },
 ];
 
 export const TeamPage: React.FC = () => {
   const [searchTerm, setSearchTerm] = useState("");
+  const [roleFilter, setRoleFilter] = useState<ProfessionalRole | "all">("all");
   const [statusFilter, setStatusFilter] = useState<
     "all" | "active" | "busy" | "inactive"
   >("all");
-  const [selectedPhotographer, setSelectedPhotographer] =
-    useState<Photographer | null>(null);
+  const [selectedProfessional, setSelectedProfessional] =
+    useState<Professional | null>(null);
   const [showAddModal, setShowAddModal] = useState(false);
-  const [newPhotographer, setNewPhotographer] = useState({
+  
+  const [newProfessional, setNewProfessional] = useState<Partial<Professional>>({
     name: "",
+    role: "Fotógrafo",
+    address: {
+      street: "",
+      number: "",
+      complement: "",
+      neighborhood: "",
+      city: "",
+      state: "",
+    },
+    whatsapp: "",
+    cpfCnpj: "",
+    bankInfo: {
+      bank: "",
+      agency: "",
+      accountPix: "",
+    },
+    hasCar: false,
+    hasStudio: false,
+    studioQuantity: 0,
+    cardType: "",
+    accountHolder: "",
+    observations: "",
+    ratings: {
+      technicalQuality: 0,
+      appearance: 0,
+      education: 0,
+      sympathy: 0,
+      eventPerformance: 0,
+      scheduleAvailability: 0,
+      average: 0,
+    },
+    freeTable: "",
+    extraFee: "",
     email: "",
-    phone: "",
-    location: "",
-    specialties: [] as string[],
+    specialties: [],
     avatar: "",
   });
+  
   const [avatarFile, setAvatarFile] = useState<File | null>(null);
   const [avatarPreview, setAvatarPreview] = useState<string>("");
 
@@ -146,7 +263,7 @@ export const TeamPage: React.FC = () => {
     setAvatarPreview("");
   };
 
-  const getStatusColor = (status: Photographer["status"]) => {
+  const getStatusColor = (status: Professional["status"]) => {
     switch (status) {
       case "active":
         return "bg-green-100 text-green-800";
@@ -157,7 +274,7 @@ export const TeamPage: React.FC = () => {
     }
   };
 
-  const getStatusLabel = (status: Photographer["status"]) => {
+  const getStatusLabel = (status: Professional["status"]) => {
     switch (status) {
       case "active":
         return "Disponível";
@@ -168,23 +285,32 @@ export const TeamPage: React.FC = () => {
     }
   };
 
-  const filteredPhotographers = MOCK_PHOTOGRAPHERS.filter((photographer) => {
+  const getRoleIcon = (role: ProfessionalRole) => {
+    switch (role) {
+      case "Fotógrafo":
+        return Camera;
+      case "Cinegrafista":
+        return Video;
+      case "Recepcionista":
+        return UserCheck;
+    }
+  };
+
+  const filteredProfessionals = MOCK_PROFESSIONALS.filter((professional) => {
     const matchesSearch =
-      photographer.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      photographer.email.toLowerCase().includes(searchTerm.toLowerCase());
+      professional.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      professional.email.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesRole = roleFilter === "all" || professional.role === roleFilter;
     const matchesStatus =
-      statusFilter === "all" || photographer.status === statusFilter;
-    return matchesSearch && matchesStatus;
+      statusFilter === "all" || professional.status === statusFilter;
+    return matchesSearch && matchesRole && matchesStatus;
   });
 
   const stats = {
-    total: MOCK_PHOTOGRAPHERS.length,
-    active: MOCK_PHOTOGRAPHERS.filter((p) => p.status === "active").length,
-    busy: MOCK_PHOTOGRAPHERS.filter((p) => p.status === "busy").length,
-    avgRating: (
-      MOCK_PHOTOGRAPHERS.reduce((acc, p) => acc + p.rating, 0) /
-      MOCK_PHOTOGRAPHERS.length
-    ).toFixed(1),
+    photographers: MOCK_PROFESSIONALS.filter((p) => p.role === "Fotógrafo").length,
+    cinematographers: MOCK_PROFESSIONALS.filter((p) => p.role === "Cinegrafista").length,
+    receptionists: MOCK_PROFESSIONALS.filter((p) => p.role === "Recepcionista").length,
+    total: MOCK_PROFESSIONALS.length,
   };
 
   return (
@@ -193,15 +319,15 @@ export const TeamPage: React.FC = () => {
         {/* Header */}
         <div className="mb-6 sm:mb-8">
           <h1 className="text-2xl sm:text-3xl font-serif font-bold text-brand-black mb-2">
-            Equipe & Fotógrafos
+            Equipe
           </h1>
           <p className="text-sm sm:text-base text-gray-600">
-            Gerencie sua equipe de fotógrafos profissionais
+            Gerencie sua equipe de profissionais
           </p>
         </div>
 
         {/* Stats */}
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6 mb-6 sm:mb-8">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 md:gap-6 mb-6 sm:mb-8">
           <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
             <div className="flex items-center justify-between">
               <div>
@@ -209,43 +335,32 @@ export const TeamPage: React.FC = () => {
                   Total de Fotógrafos
                 </p>
                 <p className="text-3xl font-bold text-brand-black">
-                  {stats.total}
+                  {stats.photographers}
                 </p>
               </div>
-              <Users className="text-brand-gold" size={32} />
+              <Camera className="text-brand-gold" size={32} />
             </div>
           </div>
           <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm text-gray-600 mb-1">Disponíveis</p>
-                <p className="text-3xl font-bold text-green-600">
-                  {stats.active}
+                <p className="text-sm text-gray-600 mb-1">Total de Cinegrafistas</p>
+                <p className="text-3xl font-bold text-brand-black">
+                  {stats.cinematographers}
                 </p>
               </div>
-              <Camera className="text-green-600" size={32} />
+              <Video className="text-blue-600" size={32} />
             </div>
           </div>
           <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm text-gray-600 mb-1">Em Evento</p>
-                <p className="text-3xl font-bold text-yellow-600">
-                  {stats.busy}
+                <p className="text-sm text-gray-600 mb-1">Total de Recepcionistas</p>
+                <p className="text-3xl font-bold text-brand-black">
+                  {stats.receptionists}
                 </p>
               </div>
-              <Camera className="text-yellow-600" size={32} />
-            </div>
-          </div>
-          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm text-gray-600 mb-1">Avaliação Média</p>
-                <p className="text-3xl font-bold text-brand-gold">
-                  {stats.avgRating}
-                </p>
-              </div>
-              <Star className="text-brand-gold" size={32} fill="#B9CF33" />
+              <UserCheck className="text-purple-600" size={32} />
             </div>
           </div>
         </div>
@@ -268,145 +383,202 @@ export const TeamPage: React.FC = () => {
             </div>
             <div className="flex flex-wrap gap-2">
               <button
-                onClick={() => setStatusFilter("all")}
-                className={`px-4 py-2 rounded-md font-medium transition-colors ${statusFilter === "all"
+                onClick={() => setRoleFilter("all")}
+                className={`px-4 py-2 rounded-md font-medium transition-colors ${
+                  roleFilter === "all"
                     ? "bg-brand-gold text-white"
                     : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-                  }`}
+                }`}
               >
                 Todos
               </button>
+              <button
+                onClick={() => setRoleFilter("Fotógrafo")}
+                className={`px-4 py-2 rounded-md font-medium transition-colors ${
+                  roleFilter === "Fotógrafo"
+                    ? "bg-brand-gold text-white"
+                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                }`}
+              >
+                Fotógrafos
+              </button>
+              <button
+                onClick={() => setRoleFilter("Cinegrafista")}
+                className={`px-4 py-2 rounded-md font-medium transition-colors ${
+                  roleFilter === "Cinegrafista"
+                    ? "bg-blue-600 text-white"
+                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                }`}
+              >
+                Cinegrafistas
+              </button>
+              <button
+                onClick={() => setRoleFilter("Recepcionista")}
+                className={`px-4 py-2 rounded-md font-medium transition-colors ${
+                  roleFilter === "Recepcionista"
+                    ? "bg-purple-600 text-white"
+                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                }`}
+              >
+                Recepcionistas
+              </button>
+            </div>
+
+            {/* Status Filters */}
+            <div className="flex flex-wrap gap-2">
+              <button
+                onClick={() => setStatusFilter("all")}
+                className={`px-4 py-2 rounded-md font-medium transition-colors ${
+                  statusFilter === "all"
+                    ? "bg-brand-gold text-white"
+                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                }`}
+              >
+                Todos Status
+              </button>
               <button
                 onClick={() => setStatusFilter("active")}
-                className={`px-4 py-2 rounded-md font-medium transition-colors ${statusFilter === "active"
+                className={`px-4 py-2 rounded-md font-medium transition-colors ${
+                  statusFilter === "active"
                     ? "bg-green-600 text-white"
                     : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-                  }`}
+                }`}
               >
-                Disponíveis
+                Disponível
               </button>
               <button
                 onClick={() => setStatusFilter("busy")}
-                className={`px-4 py-2 rounded-md font-medium transition-colors ${statusFilter === "busy"
+                className={`px-4 py-2 rounded-md font-medium transition-colors ${
+                  statusFilter === "busy"
                     ? "bg-yellow-600 text-white"
                     : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-                  }`}
+                }`}
               >
                 Em Evento
               </button>
+              <button
+                onClick={() => setStatusFilter("inactive")}
+                className={`px-4 py-2 rounded-md font-medium transition-colors ${
+                  statusFilter === "inactive"
+                    ? "bg-gray-600 text-white"
+                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                }`}
+              >
+                Inativo
+              </button>
             </div>
+
             <Button
               size="md"
               variant="secondary"
               onClick={() => setShowAddModal(true)}
             >
               <Plus size={20} className="mr-2" />
-              Adicionar Fotógrafo
+              Adicionar Profissional
             </Button>
           </div>
         </div>
 
-        {/* Photographers Grid */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
-          {filteredPhotographers.map((photographer) => (
-            <div
-              key={photographer.id}
-              className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
-              onClick={() => setSelectedPhotographer(photographer)}
-            >
-              <div className="p-6">
-                <div className="flex items-start justify-between mb-4">
-                  <div className="flex items-center gap-3">
-                    <img
-                      src={photographer.avatar}
-                      alt={photographer.name}
-                      className="w-16 h-16 rounded-full object-cover"
-                    />
-                    <div>
-                      <h3 className="font-semibold text-lg text-brand-black">
-                        {photographer.name}
-                      </h3>
-                      <div className="flex items-center gap-1 mt-1">
-                        <Star
-                          size={14}
-                          fill="#B9CF33"
-                          className="text-brand-gold"
-                        />
-                        <span className="text-sm font-medium">
-                          {photographer.rating}
-                        </span>
-                        <span className="text-xs text-gray-500">
-                          ({photographer.eventsCompleted} eventos)
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                  <span
-                    className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(
-                      photographer.status
-                    )}`}
-                  >
-                    {getStatusLabel(photographer.status)}
-                  </span>
-                </div>
-
-                <div className="space-y-2 mb-4">
-                  <div className="flex items-center text-sm text-gray-600">
-                    <Mail size={16} className="mr-2 text-brand-gold" />
-                    {photographer.email}
-                  </div>
-                  <div className="flex items-center text-sm text-gray-600">
-                    <Phone size={16} className="mr-2 text-brand-gold" />
-                    {photographer.phone}
-                  </div>
-                  <div className="flex items-center text-sm text-gray-600">
-                    <MapPin size={16} className="mr-2 text-brand-gold" />
-                    {photographer.location}
-                  </div>
-                </div>
-
-                <div className="flex flex-wrap gap-2">
-                  {photographer.specialties.map((specialty, index) => (
-                    <span
-                      key={index}
-                      className="px-2 py-1 bg-gray-100 text-gray-700 rounded-full text-xs font-medium"
-                    >
-                      {specialty}
-                    </span>
-                  ))}
-                </div>
-              </div>
+        {/* Professionals Table */}
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+          {filteredProfessionals.length === 0 ? (
+            <div className="text-center py-12">
+              <Users size={48} className="mx-auto text-gray-300 mb-4" />
+              <p className="text-gray-500">Nenhum profissional encontrado</p>
             </div>
-          ))}
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead className="bg-gray-50 border-b border-gray-200">
+                  <tr>
+                    <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Nome
+                    </th>
+                    <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Função Profissional
+                    </th>
+                    <th className="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Disponibilidade
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
+                  {filteredProfessionals.map((professional) => {
+                    const RoleIcon = getRoleIcon(professional.role);
+                    return (
+                      <tr
+                        key={professional.id}
+                        className="hover:bg-gray-50 cursor-pointer transition-colors"
+                        onClick={() => setSelectedProfessional(professional)}
+                      >
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <div className="flex items-center gap-3">
+                            <div>
+                              <div className="font-semibold text-brand-black">
+                                {professional.name}
+                              </div>
+                              <div className="flex items-center gap-1 mt-1">
+                                <Star
+                                  size={14}
+                                  fill="#B9CF33"
+                                  className="text-brand-gold"
+                                />
+                                <span className="text-sm font-medium text-gray-600">
+                                  {professional.ratings.average.toFixed(1)}
+                                </span>
+                                <span className="text-xs text-gray-500">
+                                  ({professional.eventsCompleted} eventos)
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <div className="flex items-center gap-2">
+                            <RoleIcon size={18} className="text-brand-gold" />
+                            <span className="text-sm font-medium text-gray-900">
+                              {professional.role}
+                            </span>
+                          </div>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <span
+                            className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(
+                              professional.status
+                            )}`}
+                          >
+                            {getStatusLabel(professional.status)}
+                          </span>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
         </div>
-
-        {filteredPhotographers.length === 0 && (
-          <div className="text-center py-12">
-            <Users size={48} className="mx-auto text-gray-300 mb-4" />
-            <p className="text-gray-500">Nenhum fotógrafo encontrado</p>
-          </div>
-        )}
       </div>
 
-      {/* Add Photographer Modal */}
+      {/* Add Professional Modal - com todos os campos da planilha */}
       {showAddModal && (
         <div
-          className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+          className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto"
           onClick={() => setShowAddModal(false)}
         >
           <div
-            className="bg-white rounded-lg max-w-2xl w-full p-8 max-h-[90vh] overflow-y-auto"
+            className="bg-white rounded-lg max-w-4xl w-full p-8 max-h-[90vh] overflow-y-auto my-8"
             onClick={(e) => e.stopPropagation()}
           >
             <div className="flex items-center justify-between mb-6">
               <h2 className="text-2xl font-serif font-bold text-brand-black">
-                Adicionar Novo Fotógrafo
+                Adicionar Novo Profissional
               </h2>
               <button
                 onClick={() => setShowAddModal(false)}
                 className="text-gray-400 hover:text-gray-600"
               >
-                ✕
+                <X size={24} />
               </button>
             </div>
 
@@ -414,226 +586,556 @@ export const TeamPage: React.FC = () => {
               className="space-y-6"
               onSubmit={(e) => {
                 e.preventDefault();
-                alert(
-                  "Fotógrafo adicionado com sucesso!\n\n" +
-                  JSON.stringify(
-                    { ...newPhotographer, avatarFile: avatarFile?.name },
-                    null,
-                    2
-                  )
-                );
+                alert("Profissional adicionado com sucesso!");
                 setShowAddModal(false);
-                setNewPhotographer({
-                  name: "",
-                  email: "",
-                  phone: "",
-                  location: "",
-                  specialties: [],
-                  avatar: "",
-                });
-                setAvatarFile(null);
-                setAvatarPreview("");
               }}
             >
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Foto de Perfil
-                </label>
-                <div className="flex items-center gap-4">
-                  {avatarPreview ? (
-                    <div className="relative">
-                      <img
-                        src={avatarPreview}
-                        alt="Preview"
-                        className="w-24 h-24 rounded-full object-cover border-2 border-gray-200"
-                      />
-                      <button
-                        type="button"
-                        onClick={removeAvatar}
-                        className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600 transition-colors"
-                      >
-                        <X size={16} />
-                      </button>
-                    </div>
-                  ) : (
-                    <div className="w-24 h-24 rounded-full bg-gray-100 border-2 border-dashed border-gray-300 flex items-center justify-center">
-                      <Camera size={32} className="text-gray-400" />
-                    </div>
-                  )}
-                  <div className="flex-1">
-                    <label className="cursor-pointer">
-                      <div className="flex items-center gap-2 px-4 py-2 bg-gray-50 border border-gray-300 rounded-md hover:bg-gray-100 transition-colors w-fit">
-                        <Upload size={18} className="text-gray-600" />
-                        <span className="text-sm font-medium text-gray-700">
-                          {avatarFile ? "Trocar foto" : "Selecionar foto"}
-                        </span>
-                      </div>
-                      <input
-                        type="file"
-                        accept="image/*"
-                        onChange={handleAvatarChange}
-                        className="hidden"
-                      />
+              {/* Dados Básicos */}
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
+                  Dados Básicos
+                </h3>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Nome *
                     </label>
-                    <p className="text-xs text-gray-500 mt-1">
-                      JPG, PNG ou GIF (máx. 5MB)
-                    </p>
-                    {avatarFile && (
-                      <p className="text-xs text-brand-gold mt-1 font-medium">
-                        {avatarFile.name}
-                      </p>
-                    )}
+                    <input
+                      type="text"
+                      required
+                      value={newProfessional.name}
+                      onChange={(e) =>
+                        setNewProfessional({ ...newProfessional, name: e.target.value })
+                      }
+                      placeholder="Nome completo"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Função Profissional *
+                    </label>
+                    <select
+                      required
+                      value={newProfessional.role}
+                      onChange={(e) =>
+                        setNewProfessional({
+                          ...newProfessional,
+                          role: e.target.value as ProfessionalRole,
+                        })
+                      }
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    >
+                      <option value="Fotógrafo">Fotógrafo</option>
+                      <option value="Cinegrafista">Cinegrafista</option>
+                      <option value="Recepcionista">Recepcionista</option>
+                    </select>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Email *
+                    </label>
+                    <input
+                      type="email"
+                      required
+                      value={newProfessional.email}
+                      onChange={(e) =>
+                        setNewProfessional({ ...newProfessional, email: e.target.value })
+                      }
+                      placeholder="email@exemplo.com"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      WhatsApp *
+                    </label>
+                    <input
+                      type="tel"
+                      required
+                      value={newProfessional.whatsapp}
+                      onChange={(e) =>
+                        setNewProfessional({ ...newProfessional, whatsapp: e.target.value })
+                      }
+                      placeholder="(00) 00000-0000"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    CPF ou CNPJ - do Titular da Conta *
+                  </label>
+                  <input
+                    type="text"
+                    required
+                    value={newProfessional.cpfCnpj}
+                    onChange={(e) =>
+                      setNewProfessional({ ...newProfessional, cpfCnpj: e.target.value })
+                    }
+                    placeholder="000.000.000-00 ou 00.000.000/0000-00"
+                    className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                  />
+                </div>
+              </div>
+
+              {/* Endereço */}
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
+                  Endereço
+                </h3>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div className="md:col-span-2">
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Rua *
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      value={newProfessional.address?.street}
+                      onChange={(e) =>
+                        setNewProfessional({
+                          ...newProfessional,
+                          address: { ...newProfessional.address!, street: e.target.value },
+                        })
+                      }
+                      placeholder="Nome da rua"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Número *
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      value={newProfessional.address?.number}
+                      onChange={(e) =>
+                        setNewProfessional({
+                          ...newProfessional,
+                          address: { ...newProfessional.address!, number: e.target.value },
+                        })
+                      }
+                      placeholder="123"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Complemento
+                    </label>
+                    <input
+                      type="text"
+                      value={newProfessional.address?.complement}
+                      onChange={(e) =>
+                        setNewProfessional({
+                          ...newProfessional,
+                          address: { ...newProfessional.address!, complement: e.target.value },
+                        })
+                      }
+                      placeholder="Apto, Sala, etc"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Bairro *
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      value={newProfessional.address?.neighborhood}
+                      onChange={(e) =>
+                        setNewProfessional({
+                          ...newProfessional,
+                          address: { ...newProfessional.address!, neighborhood: e.target.value },
+                        })
+                      }
+                      placeholder="Nome do bairro"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Cidade *
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      value={newProfessional.address?.city}
+                      onChange={(e) =>
+                        setNewProfessional({
+                          ...newProfessional,
+                          address: { ...newProfessional.address!, city: e.target.value },
+                        })
+                      }
+                      placeholder="Nome da cidade"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      UF *
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      maxLength={2}
+                      value={newProfessional.address?.state}
+                      onChange={(e) =>
+                        setNewProfessional({
+                          ...newProfessional,
+                          address: { ...newProfessional.address!, state: e.target.value.toUpperCase() },
+                        })
+                      }
+                      placeholder="SP"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
                   </div>
                 </div>
               </div>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Nome Completo *
-                </label>
-                <div className="relative">
-                  <User
-                    className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-                    size={20}
-                  />
-                  <input
-                    type="text"
-                    required
-                    value={newPhotographer.name}
-                    onChange={(e) =>
-                      setNewPhotographer({
-                        ...newPhotographer,
-                        name: e.target.value,
-                      })
-                    }
-                    placeholder="Ex: João Silva"
-                    className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                  />
+              {/* Dados Bancários */}
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
+                  Dados Bancários
+                </h3>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Banco *
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      value={newProfessional.bankInfo?.bank}
+                      onChange={(e) =>
+                        setNewProfessional({
+                          ...newProfessional,
+                          bankInfo: { ...newProfessional.bankInfo!, bank: e.target.value },
+                        })
+                      }
+                      placeholder="Nome do banco"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Agência *
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      value={newProfessional.bankInfo?.agency}
+                      onChange={(e) =>
+                        setNewProfessional({
+                          ...newProfessional,
+                          bankInfo: { ...newProfessional.bankInfo!, agency: e.target.value },
+                        })
+                      }
+                      placeholder="0000-0"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Conta / Pix *
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      value={newProfessional.bankInfo?.accountPix}
+                      onChange={(e) =>
+                        setNewProfessional({
+                          ...newProfessional,
+                          bankInfo: { ...newProfessional.bankInfo!, accountPix: e.target.value },
+                        })
+                      }
+                      placeholder="Conta ou chave Pix"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Tipo Cartão *
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      value={newProfessional.cardType}
+                      onChange={(e) =>
+                        setNewProfessional({ ...newProfessional, cardType: e.target.value })
+                      }
+                      placeholder="Débito, Crédito, Pix, etc"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Nome do Titular da Conta *
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      value={newProfessional.accountHolder}
+                      onChange={(e) =>
+                        setNewProfessional({ ...newProfessional, accountHolder: e.target.value })
+                      }
+                      placeholder="Nome do titular"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
                 </div>
               </div>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Email *
-                </label>
-                <div className="relative">
-                  <Mail
-                    className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-                    size={20}
-                  />
-                  <input
-                    type="email"
-                    required
-                    value={newPhotographer.email}
-                    onChange={(e) =>
-                      setNewPhotographer({
-                        ...newPhotographer,
-                        email: e.target.value,
-                      })
-                    }
-                    placeholder="joao.silva@photum.com"
-                    className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                  />
-                </div>
-              </div>
+              {/* Recursos e Equipamentos */}
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
+                  Recursos e Equipamentos
+                </h3>
 
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Telefone *
-                </label>
-                <div className="relative">
-                  <Phone
-                    className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-                    size={20}
-                  />
-                  <input
-                    type="tel"
-                    required
-                    value={newPhotographer.phone}
-                    onChange={(e) =>
-                      setNewPhotographer({
-                        ...newPhotographer,
-                        phone: e.target.value,
-                      })
-                    }
-                    placeholder="(41) 99999-0000"
-                    className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Localização *
-                </label>
-                <div className="relative">
-                  <MapPin
-                    className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
-                    size={20}
-                  />
-                  <input
-                    type="text"
-                    required
-                    value={newPhotographer.location}
-                    onChange={(e) =>
-                      setNewPhotographer({
-                        ...newPhotographer,
-                        location: e.target.value,
-                      })
-                    }
-                    placeholder="Curitiba, PR"
-                    className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-2">
-                  Especialidades
-                </label>
-                <div className="space-y-2">
-                  {[
-                    "Formaturas",
-                    "Casamentos",
-                    "Eventos Corporativos",
-                    "Eventos Sociais",
-                    "Ensaios",
-                  ].map((specialty) => (
-                    <label
-                      key={specialty}
-                      className="flex items-center gap-2 cursor-pointer"
-                    >
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div>
+                    <label className="flex items-center gap-2 cursor-pointer">
                       <input
                         type="checkbox"
-                        checked={newPhotographer.specialties.includes(
-                          specialty
-                        )}
-                        onChange={(e) => {
-                          if (e.target.checked) {
-                            setNewPhotographer({
-                              ...newPhotographer,
-                              specialties: [
-                                ...newPhotographer.specialties,
-                                specialty,
-                              ],
-                            });
-                          } else {
-                            setNewPhotographer({
-                              ...newPhotographer,
-                              specialties: newPhotographer.specialties.filter(
-                                (s) => s !== specialty
-                              ),
-                            });
-                          }
-                        }}
+                        checked={newProfessional.hasCar}
+                        onChange={(e) =>
+                          setNewProfessional({ ...newProfessional, hasCar: e.target.checked })
+                        }
                         className="w-4 h-4 text-brand-gold focus:ring-brand-gold border-gray-300 rounded"
                       />
-                      <span className="text-sm text-gray-700">{specialty}</span>
+                      <span className="text-sm font-medium text-gray-700">
+                        Carro Disponível para uso?
+                      </span>
                     </label>
-                  ))}
+                  </div>
+
+                  <div>
+                    <label className="flex items-center gap-2 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={newProfessional.hasStudio}
+                        onChange={(e) =>
+                          setNewProfessional({ ...newProfessional, hasStudio: e.target.checked })
+                        }
+                        className="w-4 h-4 text-brand-gold focus:ring-brand-gold border-gray-300 rounded"
+                      />
+                      <span className="text-sm font-medium text-gray-700">
+                        Possui Estúdio?
+                      </span>
+                    </label>
+                  </div>
+
+                  {newProfessional.hasStudio && (
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Qtd de Estúdios
+                      </label>
+                      <input
+                        type="number"
+                        min="0"
+                        value={newProfessional.studioQuantity}
+                        onChange={(e) =>
+                          setNewProfessional({
+                            ...newProfessional,
+                            studioQuantity: parseInt(e.target.value),
+                          })
+                        }
+                        placeholder="0"
+                        className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                      />
+                    </div>
+                  )}
                 </div>
               </div>
 
+              {/* Avaliações */}
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
+                  Avaliações (0 a 5)
+                </h3>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Qual. Téc / Aparência
+                    </label>
+                    <input
+                      type="number"
+                      min="0"
+                      max="5"
+                      step="0.1"
+                      value={newProfessional.ratings?.technicalQuality}
+                      onChange={(e) =>
+                        setNewProfessional({
+                          ...newProfessional,
+                          ratings: {
+                            ...newProfessional.ratings!,
+                            technicalQuality: parseFloat(e.target.value),
+                          },
+                        })
+                      }
+                      placeholder="0.0"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Educação / Simpatia
+                    </label>
+                    <input
+                      type="number"
+                      min="0"
+                      max="5"
+                      step="0.1"
+                      value={newProfessional.ratings?.sympathy}
+                      onChange={(e) =>
+                        setNewProfessional({
+                          ...newProfessional,
+                          ratings: {
+                            ...newProfessional.ratings!,
+                            sympathy: parseFloat(e.target.value),
+                          },
+                        })
+                      }
+                      placeholder="0.0"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Desempenho Evento
+                    </label>
+                    <input
+                      type="number"
+                      min="0"
+                      max="5"
+                      step="0.1"
+                      value={newProfessional.ratings?.eventPerformance}
+                      onChange={(e) =>
+                        setNewProfessional({
+                          ...newProfessional,
+                          ratings: {
+                            ...newProfessional.ratings!,
+                            eventPerformance: parseFloat(e.target.value),
+                          },
+                        })
+                      }
+                      placeholder="0.0"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Disp. Horário
+                    </label>
+                    <input
+                      type="number"
+                      min="0"
+                      max="5"
+                      step="0.1"
+                      value={newProfessional.ratings?.scheduleAvailability}
+                      onChange={(e) =>
+                        setNewProfessional({
+                          ...newProfessional,
+                          ratings: {
+                            ...newProfessional.ratings!,
+                            scheduleAvailability: parseFloat(e.target.value),
+                          },
+                        })
+                      }
+                      placeholder="0.0"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Valores */}
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold text-gray-900 border-b pb-2">
+                  Valores
+                </h3>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Tabela de Free *
+                    </label>
+                    <input
+                      type="text"
+                      required
+                      value={newProfessional.freeTable}
+                      onChange={(e) =>
+                        setNewProfessional({ ...newProfessional, freeTable: e.target.value })
+                      }
+                      placeholder="R$ 800,00"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Extra no Cachê por Equipamento e Desempenho
+                    </label>
+                    <input
+                      type="text"
+                      value={newProfessional.extraFee}
+                      onChange={(e) =>
+                        setNewProfessional({ ...newProfessional, extraFee: e.target.value })
+                      }
+                      placeholder="R$ 150,00"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Observações */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  Observações
+                </label>
+                <textarea
+                  value={newProfessional.observations}
+                  onChange={(e) =>
+                    setNewProfessional({ ...newProfessional, observations: e.target.value })
+                  }
+                  placeholder="Qualquer tipo de observação relevante"
+                  rows={4}
+                  className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+                />
+              </div>
+
               <div className="pt-6 border-t border-gray-200 flex gap-3">
                 <button
                   type="button"
@@ -646,7 +1148,7 @@ export const TeamPage: React.FC = () => {
                   type="submit"
                   className="flex-1 px-6 py-3 bg-brand-gold text-white rounded-md hover:bg-[#a5bd2e] transition-colors font-medium"
                 >
-                  Adicionar Fotógrafo
+                  Adicionar Profissional
                 </button>
               </div>
             </form>
@@ -654,28 +1156,29 @@ export const TeamPage: React.FC = () => {
         </div>
       )}
 
-      {/* Photographer Detail Modal */}
-      {selectedPhotographer && (
+      {/* Professional Detail Modal */}
+      {selectedProfessional && (
         <div
-          className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
-          onClick={() => setSelectedPhotographer(null)}
+          className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto"
+          onClick={() => setSelectedProfessional(null)}
         >
           <div
-            className="bg-white rounded-lg max-w-2xl w-full p-8"
+            className="bg-white rounded-lg max-w-3xl w-full p-8 max-h-[90vh] overflow-y-auto my-8"
             onClick={(e) => e.stopPropagation()}
           >
             <div className="flex items-start gap-4 mb-6">
               <img
-                src={selectedPhotographer.avatar}
-                alt={selectedPhotographer.name}
+                src={selectedProfessional.avatar}
+                alt={selectedProfessional.name}
                 className="w-24 h-24 rounded-full object-cover"
               />
               <div className="flex-1">
                 <div className="flex items-start justify-between">
                   <div>
                     <h2 className="text-2xl font-serif font-bold text-brand-black mb-1">
-                      {selectedPhotographer.name}
+                      {selectedProfessional.name}
                     </h2>
+                    <p className="text-gray-600 mb-2">{selectedProfessional.role}</p>
                     <div className="flex items-center gap-2 mb-2">
                       <Star
                         size={18}
@@ -683,69 +1186,153 @@ export const TeamPage: React.FC = () => {
                         className="text-brand-gold"
                       />
                       <span className="font-semibold">
-                        {selectedPhotographer.rating}
+                        {selectedProfessional.ratings.average.toFixed(1)}
                       </span>
                       <span className="text-sm text-gray-500">
-                        ({selectedPhotographer.eventsCompleted} eventos
-                        concluídos)
+                        ({selectedProfessional.eventsCompleted} eventos concluídos)
                       </span>
                     </div>
                     <span
                       className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(
-                        selectedPhotographer.status
+                        selectedProfessional.status
                       )}`}
                     >
-                      {getStatusLabel(selectedPhotographer.status)}
+                      {getStatusLabel(selectedProfessional.status)}
                     </span>
                   </div>
                   <button
-                    onClick={() => setSelectedPhotographer(null)}
+                    onClick={() => setSelectedProfessional(null)}
                     className="text-gray-400 hover:text-gray-600"
                   >
-                    ✕
+                    <X size={24} />
                   </button>
                 </div>
               </div>
             </div>
 
-            <div className="space-y-4 mb-6">
-              <div className="flex items-center text-gray-700">
-                <Mail size={20} className="mr-3 text-brand-gold" />
-                <span>{selectedPhotographer.email}</span>
+            {/* Informações detalhadas */}
+            <div className="space-y-6">
+              {/* Contato */}
+              <div>
+                <h3 className="font-semibold text-lg mb-3 text-brand-black">Contato</h3>
+                <div className="space-y-2">
+                  <div className="flex items-center text-gray-700">
+                    <Mail size={18} className="mr-3 text-brand-gold" />
+                    <span>{selectedProfessional.email}</span>
+                  </div>
+                  <div className="flex items-center text-gray-700">
+                    <Phone size={18} className="mr-3 text-brand-gold" />
+                    <span>{selectedProfessional.whatsapp}</span>
+                  </div>
+                  <div className="flex items-start text-gray-700">
+                    <MapPin size={18} className="mr-3 text-brand-gold mt-1" />
+                    <span>
+                      {selectedProfessional.address.street}, {selectedProfessional.address.number}
+                      {selectedProfessional.address.complement && ` - ${selectedProfessional.address.complement}`}
+                      <br />
+                      {selectedProfessional.address.neighborhood}, {selectedProfessional.address.city} - {selectedProfessional.address.state}
+                    </span>
+                  </div>
+                </div>
               </div>
-              <div className="flex items-center text-gray-700">
-                <Phone size={20} className="mr-3 text-brand-gold" />
-                <span>{selectedPhotographer.phone}</span>
+
+              {/* Recursos */}
+              <div>
+                <h3 className="font-semibold text-lg mb-3 text-brand-black">Recursos</h3>
+                <div className="flex flex-wrap gap-2">
+                  {selectedProfessional.hasCar && (
+                    <span className="flex items-center gap-2 px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">
+                      <Car size={16} />
+                      Possui Carro
+                    </span>
+                  )}
+                  {selectedProfessional.hasStudio && (
+                    <span className="flex items-center gap-2 px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">
+                      <Building size={16} />
+                      Possui Estúdio ({selectedProfessional.studioQuantity})
+                    </span>
+                  )}
+                </div>
               </div>
-              <div className="flex items-center text-gray-700">
-                <MapPin size={20} className="mr-3 text-brand-gold" />
-                <span>{selectedPhotographer.location}</span>
+
+              {/* Avaliações */}
+              <div>
+                <h3 className="font-semibold text-lg mb-3 text-brand-black">Avaliações</h3>
+                <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+                  {selectedProfessional.role !== "Recepcionista" && (
+                    <div className="bg-gray-50 p-3 rounded-lg">
+                      <p className="text-xs text-gray-600 mb-1">Qual. Técnica</p>
+                      <p className="text-lg font-semibold text-brand-gold">
+                        {selectedProfessional.ratings.technicalQuality.toFixed(1)}
+                      </p>
+                    </div>
+                  )}
+                  <div className="bg-gray-50 p-3 rounded-lg">
+                    <p className="text-xs text-gray-600 mb-1">Aparência</p>
+                    <p className="text-lg font-semibold text-brand-gold">
+                      {selectedProfessional.ratings.appearance.toFixed(1)}
+                    </p>
+                  </div>
+                  <div className="bg-gray-50 p-3 rounded-lg">
+                    <p className="text-xs text-gray-600 mb-1">Simpatia</p>
+                    <p className="text-lg font-semibold text-brand-gold">
+                      {selectedProfessional.ratings.sympathy.toFixed(1)}
+                    </p>
+                  </div>
+                  <div className="bg-gray-50 p-3 rounded-lg">
+                    <p className="text-xs text-gray-600 mb-1">Desempenho</p>
+                    <p className="text-lg font-semibold text-brand-gold">
+                      {selectedProfessional.ratings.eventPerformance.toFixed(1)}
+                    </p>
+                  </div>
+                  <div className="bg-gray-50 p-3 rounded-lg">
+                    <p className="text-xs text-gray-600 mb-1">Disponibilidade</p>
+                    <p className="text-lg font-semibold text-brand-gold">
+                      {selectedProfessional.ratings.scheduleAvailability.toFixed(1)}
+                    </p>
+                  </div>
+                </div>
               </div>
+
+              {/* Valores */}
+              <div>
+                <h3 className="font-semibold text-lg mb-3 text-brand-black">Valores</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  <div className="bg-gray-50 p-3 rounded-lg">
+                    <p className="text-xs text-gray-600 mb-1">Tabela Free</p>
+                    <p className="text-lg font-semibold text-brand-black">
+                      {selectedProfessional.freeTable}
+                    </p>
+                  </div>
+                  <div className="bg-gray-50 p-3 rounded-lg">
+                    <p className="text-xs text-gray-600 mb-1">Extra/Equipamento</p>
+                    <p className="text-lg font-semibold text-brand-black">
+                      {selectedProfessional.extraFee}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Observações */}
+              {selectedProfessional.observations && (
+                <div>
+                  <h3 className="font-semibold text-lg mb-2 text-brand-black">Observações</h3>
+                  <p className="text-gray-700 bg-gray-50 p-3 rounded-lg">
+                    {selectedProfessional.observations}
+                  </p>
+                </div>
+              )}
             </div>
 
-            <div className="mb-6">
-              <h3 className="font-semibold mb-2">Especialidades</h3>
-              <div className="flex flex-wrap gap-2">
-                {selectedPhotographer.specialties.map((specialty, index) => (
-                  <span
-                    key={index}
-                    className="px-3 py-1 bg-brand-gold/10 text-brand-gold rounded-full text-sm font-medium"
-                  >
-                    {specialty}
-                  </span>
-                ))}
-              </div>
-            </div>
-
-            <div className="pt-6 border-t border-gray-200 flex gap-3">
+            <div className="pt-6 border-t border-gray-200 flex gap-3 mt-6">
               <button
-                onClick={() => setSelectedPhotographer(null)}
+                onClick={() => setSelectedProfessional(null)}
                 className="flex-1 px-6 py-3 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors font-medium"
               >
                 Fechar
               </button>
               <button className="flex-1 px-6 py-3 bg-brand-gold text-white rounded-md hover:bg-[#a5bd2e] transition-colors font-medium">
-                Ver Agenda
+                Editar Dados
               </button>
             </div>
           </div>