diff --git a/frontend/App.tsx b/frontend/App.tsx
index 53dcb54..7e4ad75 100644
--- a/frontend/App.tsx
+++ b/frontend/App.tsx
@@ -14,7 +14,8 @@ import { Login } from "./pages/Login";
 import { Register } from "./pages/Register";
 import { ProfessionalRegister } from "./pages/ProfessionalRegister";
 import { TeamPage } from "./pages/Team";
-import { FinancePage } from "./pages/Finance";
+import Finance from "./pages/Finance";
+import PhotographerFinance from "./pages/PhotographerFinance";
 import { SettingsPage } from "./pages/Settings";
 import { CourseManagement } from "./pages/CourseManagement";
 import { InspirationPage } from "./pages/Inspiration";
@@ -189,30 +190,28 @@ const Footer: React.FC = () => {
   const navigate = useNavigate();
 
   return (
-    <footer className="bg-gradient-to-br from-brand-purple to-brand-purple/90 text-brand-black py-12 sm:py-16 md:py-20">
-      <div className="w-full max-w-[1600px] mx-auto px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16">
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 md:gap-10 lg:gap-12 xl:gap-16 mb-8 sm:mb-12 md:mb-16">
-          {/* Logo e Descrição */}
-          <div className="lg:col-span-1 text-center sm:text-left">
-            <div className="flex flex-col items-center sm:items-start">
-              <img
-                src="/logo.png"
-                alt="Photum Formaturas"
-                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.
-              </p>
-            </div>
+    <footer className="bg-gradient-to-br from-brand-purple to-brand-purple/90 text-brand-black py-8 sm:py-12 md:py-16">
+      <div className="w-full max-w-[1600px] mx-auto px-3 sm:px-6 md:px-8 lg:px-12 xl:px-16">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 md:gap-12 lg:gap-16 mb-6 sm:mb-10 md:mb-16">
+          {/* Logo e Texto descritivo */}
+          <div className="text-center md:text-left">
+            <img
+              src="/logo_preta.png"
+              alt="Photum Formaturas"
+              className="h-16 sm:h-20 md:h-24 mb-3 md:mb-6 mx-auto md:mx-20 object-contain"
+            />
+            <p className="text-brand-black/80 text-xs sm:text-sm md:text-base leading-relaxed px-2 sm:px-0">
+              Eternizando momentos únicos com excelência e profissionalismo
+              desde 2020.
+            </p>
           </div>
 
           {/* Links Úteis */}
-          <div>
-            <h4 className="font-bold text-brand-black mb-4 md:mb-6 uppercase tracking-wider text-sm sm:text-base md:text-lg">
+          <div className="text-center">
+            <h4 className="font-bold text-brand-black mb-3 md:mb-4 uppercase tracking-wider text-xs sm:text-sm md:text-base">
               Links Úteis
             </h4>
-            <ul className="space-y-2 md:space-y-3 text-brand-black/70 text-sm sm:text-base md:text-lg">
+            <ul className="space-y-1.5 sm:space-y-2 md:space-y-3 text-brand-black/70 text-xs sm:text-sm md:text-base">
               <li>
                 <a
                   href="#"
@@ -235,14 +234,14 @@ const Footer: React.FC = () => {
           </div>
 
           {/* Contato */}
-          <div>
-            <h4 className="font-bold text-brand-black mb-4 md:mb-6 uppercase tracking-wider text-sm sm:text-base md:text-lg">
+          <div className="text-center">
+            <h4 className="font-bold text-brand-black mb-3 md:mb-4 uppercase tracking-wider text-xs sm:text-sm md:text-base">
               Contato
             </h4>
-            <ul className="space-y-3 md:space-y-4 text-brand-black/70 text-sm sm:text-base md:text-lg">
-              <li className="flex items-center gap-2 md:gap-3">
+            <ul className="space-y-2 sm:space-y-3 md:space-y-4 text-brand-black/70 text-xs sm:text-sm md:text-base">
+              <li className="flex items-center justify-center gap-1.5 sm:gap-2 md:gap-3">
                 <svg
-                  className="w-5 h-5 md:w-6 md:h-6 flex-shrink-0"
+                  className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 flex-shrink-0"
                   fill="currentColor"
                   viewBox="0 0 24 24"
                 >
@@ -255,9 +254,9 @@ const Footer: React.FC = () => {
                   contato@photum.com.br
                 </a>
               </li>
-              <li className="flex items-start gap-2 md:gap-3">
+              <li className="flex items-start justify-center gap-1.5 sm:gap-2 md:gap-3">
                 <svg
-                  className="w-5 h-5 md:w-6 md:h-6 flex-shrink-0 mt-0.5"
+                  className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 flex-shrink-0 mt-0.5"
                   fill="currentColor"
                   viewBox="0 0 24 24"
                 >
@@ -268,9 +267,9 @@ const Footer: React.FC = () => {
                   <p>(19) 3621 4621</p>
                 </div>
               </li>
-              <li className="flex items-center gap-2 md:gap-3">
+              <li className="flex items-center justify-center gap-1.5 sm:gap-2 md:gap-3">
                 <svg
-                  className="w-5 h-5 md:w-6 md:h-6 flex-shrink-0"
+                  className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 flex-shrink-0"
                   fill="currentColor"
                   viewBox="0 0 24 24"
                 >
@@ -278,13 +277,13 @@ const Footer: React.FC = () => {
                 </svg>
                 <span>Americana, SP</span>
               </li>
-              <li className="flex gap-4 md:gap-5 mt-4 md:mt-6">
+              <li className="flex justify-center gap-3 sm:gap-4 md:gap-5 mt-3 sm:mt-4 md:mt-6">
                 <a
                   href="#"
                   className="hover:text-brand-black transition-colors"
                 >
                   <svg
-                    className="w-7 h-7 md:w-8 md:h-8"
+                    className="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8"
                     fill="currentColor"
                     viewBox="0 0 24 24"
                   >
@@ -308,7 +307,7 @@ const Footer: React.FC = () => {
                   className="hover:text-brand-black transition-colors"
                 >
                   <svg
-                    className="w-7 h-7 md:w-8 md:h-8"
+                    className="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8"
                     fill="currentColor"
                     viewBox="0 0 24 24"
                   >
@@ -321,11 +320,11 @@ const Footer: React.FC = () => {
         </div>
 
         {/* Bottom Bar */}
-        <div className="border-t border-black/20 pt-6 md:pt-8 flex flex-col md:flex-row justify-between items-center text-xs sm:text-sm md:text-base text-brand-black/60 gap-4">
-          <p>
+        <div className="border-t border-black/20 pt-4 sm:pt-6 md:pt-8 flex flex-col md:flex-row justify-between items-center text-[10px] sm:text-xs md:text-sm text-brand-black/60 gap-3 sm:gap-4">
+          <p className="text-center px-2">
             &copy; Todos os direitos reservados PHOTUM - CNPJ 27.708.950/0001-21
           </p>
-          <div className="flex flex-wrap justify-center gap-4 sm:gap-6 md:gap-8">
+          <div className="flex flex-wrap justify-center gap-2 sm:gap-4 md:gap-6">
             <a
               href="#"
               onClick={() => navigate("/privacidade")}
@@ -470,7 +469,17 @@ const AppContent: React.FC = () => {
               allowedRoles={[UserRole.SUPERADMIN, UserRole.BUSINESS_OWNER]}
             >
               <PageWrapper>
-                <FinancePage />
+                <Finance />
+              </PageWrapper>
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/meus-pagamentos"
+          element={
+            <ProtectedRoute allowedRoles={[UserRole.PHOTOGRAPHER]}>
+              <PageWrapper>
+                <PhotographerFinance />
               </PageWrapper>
             </ProtectedRoute>
           }
diff --git a/frontend/components/Button.tsx b/frontend/components/Button.tsx
index c66a696..c69ebfb 100644
--- a/frontend/components/Button.tsx
+++ b/frontend/components/Button.tsx
@@ -1,33 +1,36 @@
-import React from 'react';
+import React from "react";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
-  size?: 'sm' | 'md' | 'lg' | 'xl';
+  variant?: "primary" | "secondary" | "outline" | "ghost";
+  size?: "sm" | "md" | "lg" | "xl";
   isLoading?: boolean;
 }
 
 export const Button: React.FC<ButtonProps> = ({
   children,
-  variant = 'primary',
-  size = 'md',
+  variant = "primary",
+  size = "md",
   isLoading,
-  className = '',
+  className = "",
   ...props
 }) => {
-  const baseStyles = "inline-flex items-center justify-center font-medium transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
+  const baseStyles =
+    "inline-flex items-center justify-center font-medium transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
 
   const variants = {
     primary: "bg-[#492E61] text-white hover:bg-[#3a2450] focus:ring-[#492E61]",
-    secondary: "bg-[#B9CF32] text-white hover:bg-[#a5bd2e] focus:ring-[#B9CF32]",
-    outline: "border border-[#492E61] text-[#492E61] hover:bg-[#492E61]/5 focus:ring-[#492E61]",
-    ghost: "text-[#492E61] hover:bg-[#492E61]/10 hover:text-[#3a2450]"
+    secondary:
+      "bg-[#B9CF32] text-white hover:bg-[#a5bd2e] focus:ring-[#B9CF32]",
+    outline:
+      "border border-[#492E61] text-[#492E61] hover:bg-[#492E61]/5 focus:ring-[#492E61]",
+    ghost: "text-[#492E61] hover:bg-[#492E61]/10 hover:text-[#3a2450]",
   };
 
   const sizes = {
-    sm: "text-xs px-3 py-1.5 rounded-md",
-    md: "text-sm px-5 py-2.5 rounded-lg",
-    lg: "text-base px-8 py-3 rounded-lg",
-    xl: "text-lg px-10 py-4 rounded-xl font-semibold"
+    sm: "text-[10px] sm:text-xs px-2 sm:px-3 py-1 sm:py-1.5 rounded-md",
+    md: "text-xs sm:text-sm px-3 sm:px-4 md:px-5 py-2 sm:py-2.5 rounded-lg",
+    lg: "text-sm sm:text-base px-5 sm:px-6 md:px-8 py-2.5 sm:py-3 rounded-lg",
+    xl: "text-base sm:text-lg px-6 sm:px-8 md:px-10 py-3 sm:py-4 rounded-xl font-semibold",
   };
 
   return (
@@ -37,12 +40,28 @@ export const Button: React.FC<ButtonProps> = ({
       {...props}
     >
       {isLoading ? (
-        <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        <svg
+          className="animate-spin -ml-1 mr-2 h-4 w-4 text-current"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          ></circle>
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
         </svg>
       ) : null}
       {children}
     </button>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/components/CourseForm.tsx b/frontend/components/CourseForm.tsx
index 2ca64ae..7ad9127 100644
--- a/frontend/components/CourseForm.tsx
+++ b/frontend/components/CourseForm.tsx
@@ -361,7 +361,7 @@ export const CourseForm: React.FC<CourseFormProps> = ({
           {/* EF I / EF II */}
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-2">
-              EF I / EF II*
+              Cursos*
             </label>
             <select
               required
@@ -414,30 +414,21 @@ export const CourseForm: React.FC<CourseFormProps> = ({
             <label className="block text-sm font-medium text-gray-700 mb-2">
               Instituição (Universidade)*
             </label>
-            <select
+            <input
+              type="text"
               required
               value={instituicao}
               onChange={(e) => {
                 setInstituicao(e.target.value);
                 setError("");
               }}
-              disabled={isLoadingData || isBackendDown}
-              className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold disabled:bg-gray-100 disabled:cursor-not-allowed"
-            >
-              <option value="">Selecione uma universidade</option>
-              {universities.map((university) => (
-                <option key={university.id} value={university.id}>
-                  {university.nome}
-                </option>
-              ))}
-            </select>
+              placeholder="Digite o nome da universidade"
+              className="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-gold"
+            />
             {isBackendDown && (
               <div className="mt-2 flex items-center gap-2 text-sm text-red-600">
                 <AlertTriangle size={16} />
-                <span>
-                  Backend não está rodando. Não é possível carregar
-                  universidades.
-                </span>
+                <span>Backend não está rodando.</span>
               </div>
             )}
             {isLoadingData && !isBackendDown && (
diff --git a/frontend/components/Input.tsx b/frontend/components/Input.tsx
index ab85651..2a00382 100644
--- a/frontend/components/Input.tsx
+++ b/frontend/components/Input.tsx
@@ -1,41 +1,52 @@
-import React, { useState } from 'react';
-import { Eye, EyeOff } from 'lucide-react';
+import React, { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label: string;
   error?: string;
-  mask?: 'phone' | 'cnpj' | 'cep';
+  mask?: "phone" | "cnpj" | "cep";
 }
 
-export const Input: React.FC<InputProps> = ({ label, error, className = '', type, mask, onChange, ...props }) => {
+export const Input: React.FC<InputProps> = ({
+  label,
+  error,
+  className = "",
+  type,
+  mask,
+  onChange,
+  ...props
+}) => {
   const [showPassword, setShowPassword] = useState(false);
-  const isPassword = type === 'password';
-  const inputType = isPassword && showPassword ? 'text' : type;
+  const isPassword = type === "password";
+  const inputType = isPassword && showPassword ? "text" : type;
 
-  const applyMask = (value: string, maskType?: 'phone' | 'cnpj' | 'cep') => {
+  const applyMask = (value: string, maskType?: "phone" | "cnpj" | "cep") => {
     if (!maskType) return value;
-    
-    const numbers = value.replace(/\D/g, '');
-    
+
+    const numbers = value.replace(/\D/g, "");
+
     switch (maskType) {
-      case 'phone':
+      case "phone":
         // Limita a 11 dígitos (celular)
         const phoneNumbers = numbers.slice(0, 11);
         if (phoneNumbers.length <= 10) {
-          return phoneNumbers.replace(/(\d{2})(\d{4})(\d{0,4})/, '($1) $2-$3');
+          return phoneNumbers.replace(/(\d{2})(\d{4})(\d{0,4})/, "($1) $2-$3");
         }
-        return phoneNumbers.replace(/(\d{2})(\d{5})(\d{0,4})/, '($1) $2-$3');
-      
-      case 'cnpj':
+        return phoneNumbers.replace(/(\d{2})(\d{5})(\d{0,4})/, "($1) $2-$3");
+
+      case "cnpj":
         // Limita a 14 dígitos
         const cnpjNumbers = numbers.slice(0, 14);
-        return cnpjNumbers.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{0,2})/, '$1.$2.$3/$4-$5');
-      
-      case 'cep':
+        return cnpjNumbers.replace(
+          /(\d{2})(\d{3})(\d{3})(\d{4})(\d{0,2})/,
+          "$1.$2.$3/$4-$5"
+        );
+
+      case "cep":
         // Limita a 8 dígitos
         const cepNumbers = numbers.slice(0, 8);
-        return cepNumbers.replace(/(\d{5})(\d{0,3})/, '$1-$2');
-      
+        return cepNumbers.replace(/(\d{5})(\d{0,3})/, "$1-$2");
+
       default:
         return value;
     }
@@ -53,23 +64,27 @@ export const Input: React.FC<InputProps> = ({ label, error, className = '', type
   const getMaxLength = () => {
     if (!mask) return undefined;
     switch (mask) {
-      case 'phone': return 15; // (00) 00000-0000
-      case 'cnpj': return 18; // 00.000.000/0000-00
-      case 'cep': return 9; // 00000-000
-      default: return undefined;
+      case "phone":
+        return 15; // (00) 00000-0000
+      case "cnpj":
+        return 18; // 00.000.000/0000-00
+      case "cep":
+        return 9; // 00000-000
+      default:
+        return undefined;
     }
   };
 
   return (
     <div className="w-full">
-      <label className="block text-sm font-medium text-gray-700 mb-1 tracking-wide uppercase text-xs">
+      <label className="block text-[10px] sm:text-xs font-medium text-gray-700 mb-1 tracking-wide uppercase">
         {label}
       </label>
       <div className="relative">
         <input
-          className={`w-full px-4 py-2 border rounded-sm focus:outline-none focus:ring-1 focus:ring-brand-gold focus:border-brand-gold transition-colors
-            ${error ? 'border-red-500' : 'border-gray-300'} 
-            ${isPassword ? 'pr-10' : ''}
+          className={`w-full px-2.5 sm:px-3 md:px-4 py-1.5 sm:py-2 text-xs sm:text-sm border rounded-sm focus:outline-none focus:ring-1 focus:ring-brand-gold focus:border-brand-gold transition-colors
+            ${error ? "border-red-500" : "border-gray-300"} 
+            ${isPassword ? "pr-9 sm:pr-10" : ""}
             ${className}`}
           type={inputType}
           onChange={handleChange}
@@ -80,13 +95,21 @@ export const Input: React.FC<InputProps> = ({ label, error, className = '', type
           <button
             type="button"
             onClick={() => setShowPassword(!showPassword)}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+            className="absolute right-2 sm:right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
           >
-            {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+            {showPassword ? (
+              <EyeOff size={16} className="sm:w-[18px] sm:h-[18px]" />
+            ) : (
+              <Eye size={16} className="sm:w-[18px] sm:h-[18px]" />
+            )}
           </button>
         )}
       </div>
-      {error && <span className="text-xs text-red-500 mt-1">{error}</span>}
+      {error && (
+        <span className="text-[10px] sm:text-xs text-red-500 mt-1">
+          {error}
+        </span>
+      )}
     </div>
   );
 };
@@ -97,7 +120,13 @@ interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
   error?: string;
 }
 
-export const Select: React.FC<SelectProps> = ({ label, options, error, className = '', ...props }) => {
+export const Select: React.FC<SelectProps> = ({
+  label,
+  options,
+  error,
+  className = "",
+  ...props
+}) => {
   return (
     <div className="w-full">
       <label className="block text-sm font-medium text-gray-700 mb-1 tracking-wide uppercase text-xs">
@@ -105,16 +134,20 @@ export const Select: React.FC<SelectProps> = ({ label, options, error, className
       </label>
       <select
         className={`w-full px-4 py-2 border rounded-sm focus:outline-none focus:ring-1 focus:ring-brand-gold focus:border-brand-gold transition-colors appearance-none bg-white
-          ${error ? 'border-red-500' : 'border-gray-300'} 
+          ${error ? "border-red-500" : "border-gray-300"} 
           ${className}`}
         {...props}
       >
-        <option value="" disabled>Selecione uma opção</option>
-        {options.map(opt => (
-          <option key={opt.value} value={opt.value}>{opt.label}</option>
+        <option value="" disabled>
+          Selecione uma opção
+        </option>
+        {options.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
         ))}
       </select>
       {error && <span className="text-xs text-red-500 mt-1">{error}</span>}
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/components/Navbar.tsx b/frontend/components/Navbar.tsx
index b9db8a2..521f611 100644
--- a/frontend/components/Navbar.tsx
+++ b/frontend/components/Navbar.tsx
@@ -72,7 +72,10 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
           { name: "Solicitar Evento", path: "solicitar-evento" },
         ];
       case UserRole.PHOTOGRAPHER:
-        return [{ name: "Eventos Designados", path: "painel" }];
+        return [
+          { name: "Eventos Designados", path: "painel" },
+          { name: "Meus Pagamentos", path: "meus-pagamentos" },
+        ];
       default:
         return [];
     }
@@ -89,9 +92,9 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
 
   return (
     <>
-      <nav className="fixed w-full z-50 bg-white shadow-sm py-3">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
+      <nav className="fixed w-full z-50 bg-white shadow-sm py-2 sm:py-3">
+        <div className="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6">
+          <div className="flex justify-between items-center h-12 sm:h-14 md:h-16">
             {/* Logo */}
             <div
               className="flex-shrink-0 flex items-center cursor-pointer"
@@ -100,18 +103,18 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
               <img
                 src="/logo.png"
                 alt="Photum Formaturas"
-                className="h-18 sm:h-30 w-auto max-w-[200px] object-contain mb-4"
+                className="h-18 sm:h-30 w-auto max-w-[200px] object-contain mb-4 ml-3"
               />
             </div>
 
             {/* Desktop Navigation */}
             {user && (
-              <div className="hidden md:flex items-center space-x-6">
+              <div className="hidden lg:flex items-center space-x-3 xl:space-x-6">
                 {getLinks().map((link) => (
                   <button
                     key={link.path}
                     onClick={() => onNavigate(link.path)}
-                    className={`text-sm font-medium tracking-wide uppercase hover:text-brand-gold transition-colors pb-1 ${
+                    className={`text-xs xl: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"
@@ -124,14 +127,14 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
             )}
 
             {/* Right Side Actions */}
-            <div className="hidden md:flex items-center space-x-4">
+            <div className="hidden lg:flex items-center space-x-2 xl:space-x-4">
               {user ? (
-                <div className="flex items-center gap-3">
-                  <div className="flex flex-col items-end mr-2">
-                    <span className="text-sm font-bold text-brand-black leading-tight">
+                <div className="flex items-center gap-2 xl:gap-3">
+                  <div className="flex flex-col items-end mr-1 xl:mr-2">
+                    <span className="text-xs xl:text-sm font-bold text-brand-black leading-tight">
                       {user.name}
                     </span>
-                    <span className="text-[10px] uppercase tracking-wider text-brand-gold leading-tight">
+                    <span className="text-[9px] xl:text-[10px] uppercase tracking-wider text-brand-gold leading-tight">
                       {getRoleLabel()}
                     </span>
                   </div>
@@ -142,7 +145,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                       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"
+                      className="h-8 w-8 xl:h-9 xl: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
                         src={user.avatar}
@@ -315,7 +318,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
             </div>
 
             {/* Mobile Buttons */}
-            <div className="md:hidden flex items-center gap-2">
+            <div className="lg:hidden flex items-center gap-2">
               {user ? (
                 <>
                   <div className="relative">
@@ -323,7 +326,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                       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"
+                      className="h-9 w-9 sm:h-10 sm: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
                         src={user.avatar}
@@ -433,9 +436,13 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                   {/* Menu Hamburguer - Apenas para usuários logados */}
                   <button
                     onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-                    className="text-brand-black hover:text-brand-gold p-2"
+                    className="text-brand-black hover:text-brand-gold p-1.5 sm:p-2"
                   >
-                    {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
+                    {isMobileMenuOpen ? (
+                      <X size={22} className="sm:w-6 sm:h-6" />
+                    ) : (
+                      <Menu size={22} className="sm:w-6 sm:h-6" />
+                    )}
                   </button>
                 </>
               ) : (
@@ -499,8 +506,8 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
 
         {/* Mobile Menu */}
         {isMobileMenuOpen && (
-          <div className="md:hidden absolute top-full left-0 w-full bg-white border-b border-gray-100 shadow-lg fade-in">
-            <div className="px-4 py-4 space-y-3">
+          <div className="lg:hidden absolute top-full left-0 w-full bg-white border-b border-gray-100 shadow-lg fade-in">
+            <div className="px-3 sm:px-4 py-3 sm:py-4 space-y-2 sm:space-y-3">
               {user &&
                 getLinks().map((link) => (
                   <button
@@ -509,7 +516,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, currentPage }) => {
                       onNavigate(link.path);
                       setIsMobileMenuOpen(false);
                     }}
-                    className="block w-full text-left text-base font-medium text-gray-700 hover:text-brand-gold py-2 border-b border-gray-50"
+                    className="block w-full text-left text-sm sm:text-base font-medium text-gray-700 hover:text-brand-gold py-2 border-b border-gray-50"
                   >
                     {link.name}
                   </button>
diff --git a/frontend/index.html b/frontend/index.html
index 42b216d..487e021 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,6 +6,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>PhotumFormaturas</title>
 
+  <!-- Favicon -->
+  <link rel="icon" type="image/x-icon" href="/logofav.ico" />
+  <link rel="shortcut icon" type="image/x-icon" href="/logofav.ico" />
+
   <!-- Mapbox GL CSS (versão CDN confiável) -->
   <link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
 
diff --git a/frontend/pages/CourseManagement.tsx b/frontend/pages/CourseManagement.tsx
index 1b882f5..35a483b 100644
--- a/frontend/pages/CourseManagement.tsx
+++ b/frontend/pages/CourseManagement.tsx
@@ -119,7 +119,7 @@ export const CourseManagement: React.FC = () => {
                     Empresa
                   </th>
                   <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    EF I / EF II
+                    Cursos
                   </th>
                   <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                     Observações
diff --git a/frontend/pages/Dashboard.tsx b/frontend/pages/Dashboard.tsx
index dfd2793..2b8304c 100644
--- a/frontend/pages/Dashboard.tsx
+++ b/frontend/pages/Dashboard.tsx
@@ -211,16 +211,13 @@ export const Dashboard: React.FC<DashboardProps> = ({
     const matchesDate =
       !advancedFilters.date || e.date === advancedFilters.date;
     const matchesFot =
-      !advancedFilters.fotId || String((e as any).fotId || '').includes(advancedFilters.fotId);
+      !advancedFilters.fotId ||
+      String((e as any).fotId || "").includes(advancedFilters.fotId);
     const matchesType =
       !advancedFilters.type || e.type === advancedFilters.type;
 
     return (
-      matchesSearch &&
-      matchesStatus &&
-      matchesDate &&
-      matchesFot &&
-      matchesType
+      matchesSearch && matchesStatus && matchesDate && matchesFot && matchesType
     );
   });
 
@@ -292,10 +289,10 @@ export const Dashboard: React.FC<DashboardProps> = ({
     if (user.role === UserRole.EVENT_OWNER) {
       return (
         <div>
-          <h1 className="text-3xl font-serif font-bold text-brand-black">
+          <h1 className="text-xl sm:text-2xl md:text-3xl font-serif font-bold text-brand-black">
             Meus Eventos
           </h1>
-          <p className="text-gray-500 mt-1">
+          <p className="text-xs sm:text-sm text-gray-500 mt-0.5 sm:mt-1">
             Acompanhe seus eventos ou solicite novos orçamentos.
           </p>
         </div>
@@ -304,10 +301,10 @@ export const Dashboard: React.FC<DashboardProps> = ({
     if (user.role === UserRole.PHOTOGRAPHER) {
       return (
         <div>
-          <h1 className="text-3xl font-serif font-bold text-brand-black">
+          <h1 className="text-xl sm:text-2xl md:text-3xl font-serif font-bold text-brand-black">
             Eventos Designados
           </h1>
-          <p className="text-gray-500 mt-1">
+          <p className="text-xs sm:text-sm text-gray-500 mt-0.5 sm:mt-1">
             Gerencie seus trabalhos e visualize detalhes.
           </p>
         </div>
@@ -315,10 +312,10 @@ export const Dashboard: React.FC<DashboardProps> = ({
     }
     return (
       <div>
-        <h1 className="text-3xl font-serif font-bold text-brand-black">
+        <h1 className="text-xl sm:text-2xl md:text-3xl font-serif font-bold text-brand-black">
           Gestão Geral
         </h1>
-        <p className="text-gray-500 mt-1">
+        <p className="text-xs sm:text-sm text-gray-500 mt-0.5 sm:mt-1">
           Controle total de eventos, aprovações e equipes.
         </p>
       </div>
@@ -343,11 +340,11 @@ export const Dashboard: React.FC<DashboardProps> = ({
   // --- MAIN RENDER ---
 
   return (
-    <div className="min-h-screen bg-white pt-24 pb-12 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen bg-gray-50 pt-20 sm:pt-24 md:pt-28 lg:pt-32 pb-8 sm:pb-12 px-3 sm:px-4 lg:px-6">
       <div className="max-w-7xl mx-auto">
         {/* Header */}
         {view === "list" && (
-          <div className="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4 fade-in">
+          <div className="flex flex-col md:flex-row md:items-center justify-between mb-6 sm:mb-8 gap-3 sm:gap-4 fade-in">
             {renderRoleSpecificHeader()}
             {renderRoleSpecificActions()}
           </div>
@@ -581,7 +578,7 @@ export const Dashboard: React.FC<DashboardProps> = ({
                                 FOT
                               </td>
                               <td className="px-4 py-3 text-sm text-gray-900 font-medium">
-                                {(selectedEvent as any).fotId || '-'}
+                                {(selectedEvent as any).fotId || "-"}
                               </td>
                             </tr>
                             <tr className="hover:bg-gray-50">
@@ -589,7 +586,9 @@ export const Dashboard: React.FC<DashboardProps> = ({
                                 Data
                               </td>
                               <td className="px-4 py-3 text-sm text-gray-900">
-                                {new Date(selectedEvent.date + "T00:00:00").toLocaleDateString("pt-BR")}
+                                {new Date(
+                                  selectedEvent.date + "T00:00:00"
+                                ).toLocaleDateString("pt-BR")}
                               </td>
                             </tr>
                             <tr className="hover:bg-gray-50">
@@ -597,7 +596,7 @@ export const Dashboard: React.FC<DashboardProps> = ({
                                 Curso
                               </td>
                               <td className="px-4 py-3 text-sm text-gray-900">
-                                {(selectedEvent as any).curso || '-'}
+                                {(selectedEvent as any).curso || "-"}
                               </td>
                             </tr>
                             <tr className="hover:bg-gray-50">
@@ -605,7 +604,7 @@ export const Dashboard: React.FC<DashboardProps> = ({
                                 Instituição
                               </td>
                               <td className="px-4 py-3 text-sm text-gray-900">
-                                {(selectedEvent as any).instituicao || '-'}
+                                {(selectedEvent as any).instituicao || "-"}
                               </td>
                             </tr>
                             <tr className="hover:bg-gray-50">
@@ -613,7 +612,7 @@ export const Dashboard: React.FC<DashboardProps> = ({
                                 Ano Formatura
                               </td>
                               <td className="px-4 py-3 text-sm text-gray-900">
-                                {(selectedEvent as any).anoFormatura || '-'}
+                                {(selectedEvent as any).anoFormatura || "-"}
                               </td>
                             </tr>
                             <tr className="hover:bg-gray-50">
@@ -621,7 +620,7 @@ export const Dashboard: React.FC<DashboardProps> = ({
                                 Empresa
                               </td>
                               <td className="px-4 py-3 text-sm text-gray-900">
-                                {(selectedEvent as any).empresa || '-'}
+                                {(selectedEvent as any).empresa || "-"}
                               </td>
                             </tr>
                             <tr className="hover:bg-gray-50">
@@ -637,7 +636,7 @@ export const Dashboard: React.FC<DashboardProps> = ({
                                 Observações
                               </td>
                               <td className="px-4 py-3 text-sm text-gray-900">
-                                {(selectedEvent as any).observacoes || '-'}
+                                {(selectedEvent as any).observacoes || "-"}
                               </td>
                             </tr>
                             <tr className="hover:bg-gray-50">
@@ -645,7 +644,8 @@ export const Dashboard: React.FC<DashboardProps> = ({
                                 Local
                               </td>
                               <td className="px-4 py-3 text-sm text-gray-900">
-                                {selectedEvent.address.street}, {selectedEvent.address.number}
+                                {selectedEvent.address.street},{" "}
+                                {selectedEvent.address.number}
                               </td>
                             </tr>
                             <tr className="hover:bg-gray-50">
@@ -653,8 +653,10 @@ export const Dashboard: React.FC<DashboardProps> = ({
                                 Endereço
                               </td>
                               <td className="px-4 py-3 text-sm text-gray-900">
-                                {selectedEvent.address.city} - {selectedEvent.address.state}
-                                {selectedEvent.address.zip && ` | CEP: ${selectedEvent.address.zip}`}
+                                {selectedEvent.address.city} -{" "}
+                                {selectedEvent.address.state}
+                                {selectedEvent.address.zip &&
+                                  ` | CEP: ${selectedEvent.address.zip}`}
                               </td>
                             </tr>
                             <tr className="hover:bg-gray-50">
@@ -670,7 +672,7 @@ export const Dashboard: React.FC<DashboardProps> = ({
                                 Qtd Formandos
                               </td>
                               <td className="px-4 py-3 text-sm text-gray-900">
-                                {(selectedEvent as any).qtdFormandos || '-'}
+                                {(selectedEvent as any).qtdFormandos || "-"}
                               </td>
                             </tr>
                           </tbody>
diff --git a/frontend/pages/Finance.tsx b/frontend/pages/Finance.tsx
index 733dfb0..0d7d90a 100644
--- a/frontend/pages/Finance.tsx
+++ b/frontend/pages/Finance.tsx
@@ -1,367 +1,995 @@
-import React, { useState } from 'react';
-import { DollarSign, TrendingUp, TrendingDown, Calendar, Download, Filter, CreditCard, CheckCircle, Clock, XCircle } from 'lucide-react';
+import React, { useState, useEffect } from "react";
+import {
+  Download,
+  Plus,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  X,
+  AlertCircle,
+} from "lucide-react";
 
-interface Transaction {
-    id: string;
-    type: 'income' | 'expense';
-    category: string;
-    description: string;
-    amount: number;
-    date: string;
-    status: 'paid' | 'pending' | 'overdue';
-    client?: string;
-    event?: string;
+interface FinancialTransaction {
+  id: string;
+  fot: number;
+  data: string;
+  curso: string;
+  instituicao: string;
+  anoFormatura: number;
+  empresa: string;
+  tipoEvento: string;
+  tipoServico: string;
+  nome: string;
+  endereco: string;
+  whatsapp: string;
+  cpf: string;
+  tabelaFree: string;
+  valorFree: number;
+  valorExtra: number;
+  descricaoExtra: string;
+  totalPagar: number;
+  dataPgto: string;
+  pgtoOk: boolean;
 }
 
-const MOCK_TRANSACTIONS: Transaction[] = [
+const Finance: React.FC = () => {
+  const [transactions, setTransactions] = useState<FinancialTransaction[]>([
     {
-        id: '1',
-        type: 'income',
-        category: 'Formatura',
-        description: 'Pagamento Formatura Medicina UFPR',
-        amount: 8500.00,
-        date: '2025-12-01',
-        status: 'paid',
-        client: 'Ana Paula Silva',
-        event: 'Formatura Medicina UFPR'
+      id: "1",
+      fot: 12345,
+      data: "2025-11-15",
+      curso: "Medicina",
+      instituicao: "UFPR",
+      anoFormatura: 2025,
+      empresa: "PhotoPro Studio",
+      tipoEvento: "Formatura",
+      tipoServico: "Fotografia Completa",
+      nome: "Ana Paula Silva",
+      endereco: "Rua das Flores, 123 - Curitiba/PR",
+      whatsapp: "(41) 99999-1234",
+      cpf: "123.456.789-00",
+      tabelaFree: "Pacote Premium",
+      valorFree: 5000.0,
+      valorExtra: 1500.0,
+      descricaoExtra: "Álbum adicional + drone",
+      totalPagar: 6500.0,
+      dataPgto: "2025-12-01",
+      pgtoOk: true,
     },
     {
-        id: '2',
-        type: 'income',
-        category: 'Casamento',
-        description: 'Sinal Casamento Maria & João',
-        amount: 3000.00,
-        date: '2025-12-05',
-        status: 'paid',
-        client: 'Maria Santos',
-        event: 'Casamento Maria & João'
+      id: "2",
+      fot: 12346,
+      data: "2025-11-20",
+      curso: "Direito",
+      instituicao: "PUC-PR",
+      anoFormatura: 2025,
+      empresa: "Lens & Art",
+      tipoEvento: "Formatura",
+      tipoServico: "Fotografia + Vídeo",
+      nome: "Carlos Eduardo",
+      endereco: "Av. Brasil, 456 - Curitiba/PR",
+      whatsapp: "(41) 98888-5678",
+      cpf: "987.654.321-00",
+      tabelaFree: "Pacote Standard",
+      valorFree: 4000.0,
+      valorExtra: 800.0,
+      descricaoExtra: "Ensaio pré-formatura",
+      totalPagar: 4800.0,
+      dataPgto: "2025-12-10",
+      pgtoOk: false,
     },
-    {
-        id: '3',
-        type: 'expense',
-        category: 'Equipamento',
-        description: 'Manutenção Câmera Canon',
-        amount: 450.00,
-        date: '2025-12-03',
-        status: 'paid'
-    },
-    {
-        id: '4',
-        type: 'income',
-        category: 'Formatura',
-        description: 'Pagamento Formatura Direito PUC',
-        amount: 7200.00,
-        date: '2025-12-10',
-        status: 'pending',
-        client: 'Carlos Eduardo',
-        event: 'Formatura Direito PUC'
-    },
-    {
-        id: '5',
-        type: 'expense',
-        category: 'Transporte',
-        description: 'Combustível - Eventos Dezembro',
-        amount: 320.00,
-        date: '2025-12-08',
-        status: 'paid'
-    },
-    {
-        id: '6',
-        type: 'income',
-        category: 'Evento Corporativo',
-        description: 'Tech Summit 2026',
-        amount: 5500.00,
-        date: '2025-12-15',
-        status: 'pending',
-        client: 'TechCorp Ltda',
-        event: 'Tech Summit'
-    },
-    {
-        id: '7',
-        type: 'expense',
-        category: 'Software',
-        description: 'Assinatura Adobe Creative Cloud',
-        amount: 180.00,
-        date: '2025-12-01',
-        status: 'paid'
-    },
-    {
-        id: '8',
-        type: 'income',
-        category: 'Formatura',
-        description: 'Saldo Final Formatura Engenharia',
-        amount: 4500.00,
-        date: '2025-11-20',
-        status: 'overdue',
-        client: 'Roberto Mendes',
-        event: 'Formatura Engenharia UTFPR'
+  ]);
+
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [selectedTransaction, setSelectedTransaction] =
+    useState<FinancialTransaction | null>(null);
+  const [sortConfig, setSortConfig] = useState<{
+    key: keyof FinancialTransaction;
+    direction: "asc" | "desc";
+  } | null>(null);
+
+  // Estados para dados da API
+  const [cursos, setCursos] = useState<any[]>([]);
+  const [instituicoes, setInstituicoes] = useState<any[]>([]);
+  const [empresas, setEmpresas] = useState<any[]>([]);
+  const [tiposEventos, setTiposEventos] = useState<any[]>([]);
+  const [tiposServicos, setTiposServicos] = useState<any[]>([]);
+  const [apiError, setApiError] = useState<string>("");
+  const [loadingApi, setLoadingApi] = useState(false);
+
+  // Form state
+  const [formData, setFormData] = useState<Partial<FinancialTransaction>>({
+    fot: 0,
+    data: "",
+    curso: "",
+    instituicao: "",
+    anoFormatura: new Date().getFullYear(),
+    empresa: "",
+    tipoEvento: "",
+    tipoServico: "",
+    nome: "",
+    endereco: "",
+    whatsapp: "",
+    cpf: "",
+    tabelaFree: "",
+    valorFree: 0,
+    valorExtra: 0,
+    descricaoExtra: "",
+    totalPagar: 0,
+    dataPgto: "",
+    pgtoOk: false,
+  });
+
+  // Carregar dados da API
+  const loadApiData = async () => {
+    setLoadingApi(true);
+    setApiError("");
+    try {
+      const API_BASE_URL =
+        import.meta.env.VITE_API_URL || "http://localhost:3000";
+
+      // Carregar cursos
+      try {
+        const cursosRes = await fetch(`${API_BASE_URL}/api/cursos`);
+        if (cursosRes.ok) {
+          const cursosData = await cursosRes.json();
+          setCursos(cursosData);
+        }
+      } catch (error) {
+        console.error("Erro ao carregar cursos:", error);
+      }
+
+      // Carregar instituições (empresas cadastradas)
+      try {
+        const instRes = await fetch(`${API_BASE_URL}/api/empresas`);
+        if (instRes.ok) {
+          const instData = await instRes.json();
+          setInstituicoes(instData);
+        }
+      } catch (error) {
+        console.error("Erro ao carregar instituições:", error);
+      }
+
+      // Carregar empresas
+      try {
+        const empRes = await fetch(`${API_BASE_URL}/api/empresas`);
+        if (empRes.ok) {
+          const empData = await empRes.json();
+          setEmpresas(empData);
+        }
+      } catch (error) {
+        console.error("Erro ao carregar empresas:", error);
+      }
+
+      // Carregar tipos de eventos
+      try {
+        const evRes = await fetch(`${API_BASE_URL}/api/tipos-eventos`);
+        if (evRes.ok) {
+          const evData = await evRes.json();
+          setTiposEventos(evData);
+        }
+      } catch (error) {
+        console.error("Erro ao carregar tipos de eventos:", error);
+      }
+
+      // Carregar tipos de serviços
+      try {
+        const servRes = await fetch(`${API_BASE_URL}/api/tipos-servicos`);
+        if (servRes.ok) {
+          const servData = await servRes.json();
+          setTiposServicos(servData);
+        }
+      } catch (error) {
+        console.error("Erro ao carregar tipos de serviços:", error);
+      }
+
+      // Se todos falharam, mostrar erro
+      if (
+        cursos.length === 0 &&
+        instituicoes.length === 0 &&
+        empresas.length === 0 &&
+        tiposEventos.length === 0 &&
+        tiposServicos.length === 0
+      ) {
+        setApiError(
+          "Backend não está rodando. Alguns campos podem não estar disponíveis."
+        );
+      }
+    } catch (error) {
+      setApiError(
+        "Backend não está rodando. Alguns campos podem não estar disponíveis."
+      );
+    } finally {
+      setLoadingApi(false);
     }
-];
+  };
 
-export const FinancePage: React.FC = () => {
-    const [filterType, setFilterType] = useState<'all' | 'income' | 'expense'>('all');
-    const [filterStatus, setFilterStatus] = useState<'all' | 'paid' | 'pending' | 'overdue'>('all');
+  useEffect(() => {
+    if (showAddModal || showEditModal) {
+      loadApiData();
+    }
+  }, [showAddModal, showEditModal]);
 
-    const filteredTransactions = MOCK_TRANSACTIONS.filter(transaction => {
-        const matchesType = filterType === 'all' || transaction.type === filterType;
-        const matchesStatus = filterStatus === 'all' || transaction.status === filterStatus;
-        return matchesType && matchesStatus;
+  // Ordenação
+  const handleSort = (key: keyof FinancialTransaction) => {
+    if (sortConfig && sortConfig.key === key) {
+      // Se já está ordenando por este campo, alterna a ordem
+      if (sortConfig.direction === "asc") {
+        setSortConfig({ key, direction: "desc" });
+      } else {
+        // Se já está descendente, remove a ordenação
+        setSortConfig(null);
+      }
+    } else {
+      // Novo campo, começa com ordem ascendente
+      setSortConfig({ key, direction: "asc" });
+    }
+  };
+
+  const sortedTransactions = React.useMemo(() => {
+    let sortableTransactions = [...transactions];
+    if (sortConfig !== null) {
+      sortableTransactions.sort((a, b) => {
+        const aValue = a[sortConfig.key];
+        const bValue = b[sortConfig.key];
+
+        if (aValue < bValue) {
+          return sortConfig.direction === "asc" ? -1 : 1;
+        }
+        if (aValue > bValue) {
+          return sortConfig.direction === "asc" ? 1 : -1;
+        }
+        return 0;
+      });
+    }
+    return sortableTransactions;
+  }, [transactions, sortConfig]);
+
+  const getSortIcon = (key: keyof FinancialTransaction) => {
+    if (sortConfig?.key !== key) {
+      return (
+        <ArrowUpDown
+          size={14}
+          className="opacity-0 group-hover:opacity-50 transition-opacity"
+        />
+      );
+    }
+    if (sortConfig.direction === "asc") {
+      return <ArrowUp size={14} className="text-brand-gold" />;
+    }
+    return <ArrowDown size={14} className="text-brand-gold" />;
+  };
+
+  // Handlers
+  const handleAddTransaction = () => {
+    setFormData({
+      fot: 0,
+      data: "",
+      curso: "",
+      instituicao: "",
+      anoFormatura: new Date().getFullYear(),
+      empresa: "",
+      tipoEvento: "",
+      tipoServico: "",
+      nome: "",
+      endereco: "",
+      whatsapp: "",
+      cpf: "",
+      tabelaFree: "",
+      valorFree: 0,
+      valorExtra: 0,
+      descricaoExtra: "",
+      totalPagar: 0,
+      dataPgto: "",
+      pgtoOk: false,
     });
+    setShowAddModal(true);
+  };
 
-    const totalIncome = MOCK_TRANSACTIONS
-        .filter(t => t.type === 'income' && t.status === 'paid')
-        .reduce((sum, t) => sum + t.amount, 0);
+  const handleEditTransaction = (transaction: FinancialTransaction) => {
+    setSelectedTransaction(transaction);
+    setFormData(transaction);
+    setShowEditModal(true);
+  };
 
-    const totalExpense = MOCK_TRANSACTIONS
-        .filter(t => t.type === 'expense' && t.status === 'paid')
-        .reduce((sum, t) => sum + t.amount, 0);
+  const handleSaveTransaction = () => {
+    if (showEditModal && selectedTransaction) {
+      // Atualizar transação existente
+      setTransactions(
+        transactions.map((t) =>
+          t.id === selectedTransaction.id
+            ? ({
+                ...formData,
+                id: selectedTransaction.id,
+              } as FinancialTransaction)
+            : t
+        )
+      );
+      setShowEditModal(false);
+    } else {
+      // Adicionar nova transação
+      const newTransaction: FinancialTransaction = {
+        ...formData,
+        id: Date.now().toString(),
+      } as FinancialTransaction;
+      setTransactions([...transactions, newTransaction]);
+      setShowAddModal(false);
+    }
+    setSelectedTransaction(null);
+  };
 
-    const pendingIncome = MOCK_TRANSACTIONS
-        .filter(t => t.type === 'income' && (t.status === 'pending' || t.status === 'overdue'))
-        .reduce((sum, t) => sum + t.amount, 0);
+  const handleExport = () => {
+    // Criar CSV
+    const headers = [
+      "FOT",
+      "Data",
+      "Curso",
+      "Instituição",
+      "Ano Formatura",
+      "Empresa",
+      "Tipo Evento",
+      "Tipo de Serviço",
+      "Nome",
+      "Endereço",
+      "WhatsApp",
+      "CPF",
+      "Tabela Free",
+      "Valor Free",
+      "Valor Extra",
+      "Descrição do Extra",
+      "Total a Pagar",
+      "Data Pgto",
+      "Pgto OK",
+    ];
 
-    const balance = totalIncome - totalExpense;
+    const csvContent = [
+      headers.join(","),
+      ...transactions.map((t) =>
+        [
+          t.fot,
+          t.data,
+          t.curso,
+          t.instituicao,
+          t.anoFormatura,
+          t.empresa,
+          t.tipoEvento,
+          t.tipoServico,
+          t.nome,
+          `"${t.endereco}"`,
+          t.whatsapp,
+          t.cpf,
+          t.tabelaFree,
+          t.valorFree,
+          t.valorExtra,
+          `"${t.descricaoExtra}"`,
+          t.totalPagar,
+          t.dataPgto,
+          t.pgtoOk ? "Sim" : "Não",
+        ].join(",")
+      ),
+    ].join("\n");
 
-    const getStatusIcon = (status: Transaction['status']) => {
-        switch (status) {
-            case 'paid':
-                return <CheckCircle size={16} className="text-green-600" />;
-            case 'pending':
-                return <Clock size={16} className="text-yellow-600" />;
-            case 'overdue':
-                return <XCircle size={16} className="text-red-600" />;
-        }
-    };
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = `financeiro_${new Date().toISOString().split("T")[0]}.csv`;
+    link.click();
+  };
 
-    const getStatusColor = (status: Transaction['status']) => {
-        switch (status) {
-            case 'paid':
-                return 'bg-green-100 text-green-800';
-            case 'pending':
-                return 'bg-yellow-100 text-yellow-800';
-            case 'overdue':
-                return 'bg-red-100 text-red-800';
-        }
-    };
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat("pt-BR", {
+      style: "currency",
+      currency: "BRL",
+    }).format(value);
+  };
 
-    const getStatusLabel = (status: Transaction['status']) => {
-        switch (status) {
-            case 'paid':
-                return 'Pago';
-            case 'pending':
-                return 'Pendente';
-            case 'overdue':
-                return 'Atrasado';
-        }
-    };
+  const formatDate = (dateString: string) => {
+    if (!dateString) return "";
+    return new Date(dateString + "T00:00:00").toLocaleDateString("pt-BR");
+  };
 
-    const formatCurrency = (value: number) => {
-        return new Intl.NumberFormat('pt-BR', {
-            style: 'currency',
-            currency: 'BRL'
-        }).format(value);
-    };
+  // Atualizar total ao mudar valores
+  useEffect(() => {
+    const total = (formData.valorFree || 0) + (formData.valorExtra || 0);
+    setFormData((prev) => ({ ...prev, totalPagar: total }));
+  }, [formData.valorFree, formData.valorExtra]);
 
-    const formatDate = (dateString: string) => {
-        const date = new Date(dateString + 'T00:00:00');
-        return date.toLocaleDateString('pt-BR', {
-            day: '2-digit',
-            month: 'short',
-            year: 'numeric'
-        });
-    };
-
-    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 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-                    <div>
-                        <h1 className="text-2xl sm:text-3xl font-serif font-bold text-brand-black mb-2">
-                            Financeiro
-                        </h1>
-                        <p className="text-sm sm:text-base text-gray-600">
-                            Acompanhe receitas, despesas e fluxo de caixa
-                        </p>
-                    </div>
-                    <button className="flex items-center justify-center gap-2 px-4 py-2 bg-brand-gold text-white rounded-md hover:bg-[#a5bd2e] transition-colors font-medium text-sm sm:text-base whitespace-nowrap">
-                        <Download size={18} className="sm:w-5 sm:h-5" />
-                        Exportar
-                    </button>
-                </div>
-
-                {/* Stats Cards */}
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 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-4 sm:p-6">
-                        <div className="flex items-center justify-between mb-2">
-                            <p className="text-xs sm:text-sm text-gray-600">Receitas</p>
-                            <TrendingUp className="text-green-600" size={20} />
-                        </div>
-                        <p className="text-2xl sm:text-3xl font-bold text-green-600">{formatCurrency(totalIncome)}</p>
-                        <p className="text-xs text-gray-500 mt-1">Pagamentos recebidos</p>
-                    </div>
-
-                    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6">
-                        <div className="flex items-center justify-between mb-2">
-                            <p className="text-xs sm:text-sm text-gray-600">Despesas</p>
-                            <TrendingDown className="text-red-600" size={20} />
-                        </div>
-                        <p className="text-2xl sm:text-3xl font-bold text-red-600">{formatCurrency(totalExpense)}</p>
-                        <p className="text-xs text-gray-500 mt-1">Gastos do período</p>
-                    </div>
-
-                    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6">
-                        <div className="flex items-center justify-between mb-2">
-                            <p className="text-xs sm:text-sm text-gray-600">Saldo</p>
-                            <DollarSign className="text-brand-gold" size={20} />
-                        </div>
-                        <p className={`text-2xl sm:text-3xl font-bold ${balance >= 0 ? 'text-brand-gold' : 'text-red-600'}`}>
-                            {formatCurrency(balance)}
-                        </p>
-                        <p className="text-xs text-gray-500 mt-1">Receitas - Despesas</p>
-                    </div>
-
-                    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6">
-                        <div className="flex items-center justify-between mb-2">
-                            <p className="text-xs sm:text-sm text-gray-600">A Receber</p>
-                            <Clock className="text-yellow-600" size={20} />
-                        </div>
-                        <p className="text-2xl sm:text-3xl font-bold text-yellow-600">{formatCurrency(pendingIncome)}</p>
-                        <p className="text-xs text-gray-500 mt-1">Pagamentos pendentes</p>
-                    </div>
-                </div>
-
-                {/* Filters */}
-                <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-3 sm:p-4 md:p-6 mb-4 sm:mb-6">
-                    <div className="flex flex-col gap-3 sm:gap-4">
-                        <div className="flex flex-wrap gap-2">
-                            <button
-                                onClick={() => setFilterType('all')}
-                                className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-md text-xs sm:text-sm font-medium transition-colors ${filterType === 'all'
-                                    ? 'bg-brand-gold text-white'
-                                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                                    }`}
-                            >
-                                Todas
-                            </button>
-                            <button
-                                onClick={() => setFilterType('income')}
-                                className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-md text-xs sm:text-sm font-medium transition-colors ${filterType === 'income'
-                                    ? 'bg-green-600 text-white'
-                                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                                    }`}
-                            >
-                                Receitas
-                            </button>
-                            <button
-                                onClick={() => setFilterType('expense')}
-                                className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-md text-xs sm:text-sm font-medium transition-colors ${filterType === 'expense'
-                                    ? 'bg-red-600 text-white'
-                                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                                    }`}
-                            >
-                                Despesas
-                            </button>
-                        </div>
-                        <div className="flex flex-wrap gap-2">
-                            <button
-                                onClick={() => setFilterStatus('all')}
-                                className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-md text-xs sm:text-sm font-medium transition-colors ${filterStatus === 'all'
-                                    ? 'bg-brand-black text-white'
-                                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                                    }`}
-                            >
-                                Todos Status
-                            </button>
-                            <button
-                                onClick={() => setFilterStatus('paid')}
-                                className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-md text-xs sm:text-sm font-medium transition-colors ${filterStatus === 'paid'
-                                    ? 'bg-green-600 text-white'
-                                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                                    }`}
-                            >
-                                Pagos
-                            </button>
-                            <button
-                                onClick={() => setFilterStatus('pending')}
-                                className={`px-3 sm:px-4 py-1.5 sm:py-2 rounded-md text-xs sm:text-sm font-medium transition-colors ${filterStatus === 'pending'
-                                    ? 'bg-yellow-600 text-white'
-                                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                                    }`}
-                            >
-                                Pendentes
-                            </button>
-                        </div>
-                    </div>
-                </div>
-
-                {/* Transactions List */}
-                <div className="bg-white rounded-lg shadow-sm border border-gray-200">
-                    <div className="p-4 sm:p-6 border-b border-gray-200">
-                        <h2 className="text-lg sm:text-xl font-semibold">Transações</h2>
-                    </div>
-
-                    <div className="divide-y divide-gray-200">
-                        {filteredTransactions.length === 0 ? (
-                            <div className="p-8 sm:p-12 text-center text-gray-500">
-                                <CreditCard size={48} className="mx-auto mb-4 text-gray-300" />
-                                <p>Nenhuma transação encontrada</p>
-                            </div>
-                        ) : (
-                            filteredTransactions.map((transaction) => (
-                                <div
-                                    key={transaction.id}
-                                    className="p-4 sm:p-6 hover:bg-gray-50 transition-colors"
-                                >
-                                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-                                        <div className="flex items-start gap-3 flex-1">
-                                            <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${transaction.type === 'income' ? 'bg-green-100' : 'bg-red-100'
-                                                }`}>
-                                                {transaction.type === 'income' ? (
-                                                    <TrendingUp size={20} className="text-green-600" />
-                                                ) : (
-                                                    <TrendingDown size={20} className="text-red-600" />
-                                                )}
-                                            </div>
-                                            <div className="flex-1 min-w-0">
-                                                <h3 className="font-semibold text-sm sm:text-base text-brand-black">
-                                                    {transaction.description}
-                                                </h3>
-                                                <div className="flex flex-wrap items-center gap-1.5 mt-1">
-                                                    <span className="text-xs text-gray-500">{transaction.category}</span>
-                                                    {transaction.client && (
-                                                        <>
-                                                            <span className="text-xs text-gray-300">•</span>
-                                                            <span className="text-xs text-gray-500 truncate">{transaction.client}</span>
-                                                        </>
-                                                    )}
-                                                </div>
-                                                <div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
-                                                    <Calendar size={12} />
-                                                    {formatDate(transaction.date)}
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                        <div className="flex items-center justify-between sm:justify-end gap-3 sm:gap-4 ml-13 sm:ml-0">
-                                            <p className={`text-lg sm:text-xl font-bold ${transaction.type === 'income' ? 'text-green-600' : 'text-red-600'
-                                                }`}>
-                                                {transaction.type === 'income' ? '+' : '-'} {formatCurrency(transaction.amount)}
-                                            </p>
-                                            <div className="flex items-center gap-1.5">
-                                                {getStatusIcon(transaction.status)}
-                                                <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(transaction.status)}`}>
-                                                    {getStatusLabel(transaction.status)}
-                                                </span>
-                                            </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-[95%] mx-auto px-3 sm:px-4">
+        {/* Header */}
+        <div className="mb-6 sm:mb-8">
+          <div className="flex items-center justify-between mb-2">
+            <div>
+              <h1 className="text-2xl sm:text-3xl font-serif font-bold text-brand-black">
+                Financeiro
+              </h1>
+              <p className="text-sm sm:text-base text-gray-600 mt-1">
+                Gestão de transações financeiras
+              </p>
             </div>
+            <div className="flex gap-2 sm:gap-3">
+              <button
+                onClick={handleExport}
+                className="flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-1.5 sm:py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors font-medium text-xs sm:text-sm"
+              >
+                <Download size={16} className="sm:w-[18px] sm:h-[18px]" />
+                <span className="hidden sm:inline">Exportar</span>
+              </button>
+              <button
+                onClick={handleAddTransaction}
+                className="flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-1.5 sm:py-2 bg-brand-gold text-white rounded-md hover:bg-[#a5bd2e] transition-colors font-medium text-xs sm:text-sm"
+              >
+                <Plus size={16} className="sm:w-[18px] sm:h-[18px]" />
+                <span className="sm:hidden">Nova Transação</span>
+                <span className="hidden sm:inline">Cadastrar Transação</span>
+              </button>
+            </div>
+          </div>
         </div>
-    );
+
+        {/* Tabela */}
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-x-auto">
+          <table className="w-full text-xs sm:text-sm min-w-[1200px]">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                {[
+                  { key: "fot", label: "FOT" },
+                  { key: "data", label: "Data" },
+                  { key: "curso", label: "Curso" },
+                  { key: "instituicao", label: "Instituição" },
+                  { key: "anoFormatura", label: "Ano Formatura" },
+                  { key: "empresa", label: "Empresa" },
+                  { key: "tipoEvento", label: "Tipo Evento" },
+                  { key: "tipoServico", label: "Tipo de Serviço" },
+                  { key: "nome", label: "Nome" },
+                  { key: "endereco", label: "Endereço" },
+                  { key: "whatsapp", label: "WhatsApp" },
+                  { key: "cpf", label: "CPF" },
+                  { key: "tabelaFree", label: "Tabela Free" },
+                  { key: "valorFree", label: "Valor Free" },
+                  { key: "valorExtra", label: "Valor Extra" },
+                  { key: "descricaoExtra", label: "Descrição do Extra" },
+                  { key: "totalPagar", label: "Total a Pagar" },
+                  { key: "dataPgto", label: "Data Pgto" },
+                  { key: "pgtoOk", label: "Pgto OK" },
+                ].map((column) => (
+                  <th
+                    key={column.key}
+                    onClick={() =>
+                      handleSort(column.key as keyof FinancialTransaction)
+                    }
+                    className="px-4 py-3 text-left font-semibold text-gray-700 cursor-pointer hover:bg-gray-100 transition-colors whitespace-nowrap group"
+                  >
+                    <div className="flex items-center gap-2">
+                      {column.label}
+                      {getSortIcon(column.key as keyof FinancialTransaction)}
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {sortedTransactions.map((transaction) => (
+                <tr
+                  key={transaction.id}
+                  onClick={() => handleEditTransaction(transaction)}
+                  className="hover:bg-gray-50 cursor-pointer transition-colors"
+                >
+                  <td className="px-4 py-3 whitespace-nowrap font-medium">
+                    {transaction.fot}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap">
+                    {formatDate(transaction.data)}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap">
+                    {transaction.curso}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap">
+                    {transaction.instituicao}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap text-center">
+                    {transaction.anoFormatura}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap">
+                    {transaction.empresa}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap">
+                    {transaction.tipoEvento}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap">
+                    {transaction.tipoServico}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap">
+                    {transaction.nome}
+                  </td>
+                  <td className="px-4 py-3 max-w-xs truncate">
+                    {transaction.endereco}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap">
+                    {transaction.whatsapp}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap">
+                    {transaction.cpf}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap">
+                    {transaction.tabelaFree}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap text-right">
+                    {formatCurrency(transaction.valorFree)}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap text-right">
+                    {formatCurrency(transaction.valorExtra)}
+                  </td>
+                  <td className="px-4 py-3 max-w-xs truncate">
+                    {transaction.descricaoExtra}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap text-right font-semibold text-green-600">
+                    {formatCurrency(transaction.totalPagar)}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap">
+                    {formatDate(transaction.dataPgto)}
+                  </td>
+                  <td className="px-4 py-3 whitespace-nowrap text-center">
+                    <span
+                      className={`px-2 py-1 rounded-full text-xs font-medium ${
+                        transaction.pgtoOk
+                          ? "bg-green-100 text-green-800"
+                          : "bg-red-100 text-red-800"
+                      }`}
+                    >
+                      {transaction.pgtoOk ? "Sim" : "Não"}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {sortedTransactions.length === 0 && (
+            <div className="text-center py-12 text-gray-500">
+              Nenhuma transação cadastrada
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Modal Adicionar/Editar */}
+      {(showAddModal || showEditModal) && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-3 sm:p-4">
+          <div className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
+            <div className="sticky top-0 bg-white border-b border-gray-200 p-4 sm:p-6 flex items-center justify-between">
+              <h2 className="text-lg sm:text-xl md:text-2xl font-bold">
+                {showEditModal ? "Editar Transação" : "Cadastrar Transação"}
+              </h2>
+              <button
+                onClick={() => {
+                  setShowAddModal(false);
+                  setShowEditModal(false);
+                  setSelectedTransaction(null);
+                }}
+                className="text-gray-500 hover:text-gray-700"
+              >
+                <X size={20} className="sm:w-6 sm:h-6" />
+              </button>
+            </div>
+
+            {apiError && (
+              <div className="mx-4 sm:mx-6 mt-4 sm:mt-6 p-3 sm:p-4 bg-yellow-50 border border-yellow-200 rounded-lg flex items-start gap-2 sm:gap-3">
+                <AlertCircle
+                  className="text-yellow-600 flex-shrink-0 mt-0.5"
+                  size={18}
+                />
+                <div className="flex-1">
+                  <p className="text-xs sm:text-sm font-medium text-yellow-800">
+                    Aviso
+                  </p>
+                  <p className="text-xs sm:text-sm text-yellow-700 mt-1">
+                    {apiError}
+                  </p>
+                </div>
+              </div>
+            )}
+
+            <div className="p-4 sm:p-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
+                {/* FOT */}
+                <div>
+                  <label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
+                    FOT *
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.fot || ""}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      if (value.length <= 5) {
+                        setFormData({ ...formData, fot: parseInt(value) || 0 });
+                      }
+                    }}
+                    max={99999}
+                    className="w-full px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent"
+                    placeholder="Máx. 5 dígitos"
+                  />
+                </div>
+
+                {/* Data */}
+                <div>
+                  <label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
+                    Data *
+                  </label>
+                  <input
+                    type="date"
+                    value={formData.data}
+                    onChange={(e) =>
+                      setFormData({ ...formData, data: e.target.value })
+                    }
+                    className="w-full px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent"
+                  />
+                </div>
+
+                {/* Curso */}
+                <div>
+                  <label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
+                    Curso *
+                  </label>
+                  <select
+                    value={formData.curso}
+                    onChange={(e) =>
+                      setFormData({ ...formData, curso: e.target.value })
+                    }
+                    disabled={loadingApi}
+                    className="w-full px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent disabled:bg-gray-50 disabled:text-gray-500"
+                  >
+                    <option value="">
+                      {loadingApi
+                        ? "Carregando..."
+                        : cursos.length > 0
+                        ? "Selecione um curso"
+                        : "Nenhum curso disponível"}
+                    </option>
+                    {cursos.map((curso) => (
+                      <option key={curso.id} value={curso.nome}>
+                        {curso.nome}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* Instituição */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Instituição *
+                  </label>
+                  <select
+                    value={formData.instituicao}
+                    onChange={(e) =>
+                      setFormData({ ...formData, instituicao: e.target.value })
+                    }
+                    disabled={loadingApi}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent disabled:bg-gray-50 disabled:text-gray-500"
+                  >
+                    <option value="">
+                      {loadingApi
+                        ? "Carregando..."
+                        : instituicoes.length > 0
+                        ? "Selecione uma instituição"
+                        : "Nenhuma instituição disponível"}
+                    </option>
+                    {instituicoes.map((inst) => (
+                      <option key={inst.id} value={inst.nome}>
+                        {inst.nome}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* Ano Formatura */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Ano Formatura *
+                  </label>
+                  <input
+                    type="number"
+                    value={formData.anoFormatura}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        anoFormatura: parseInt(e.target.value),
+                      })
+                    }
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent"
+                  />
+                </div>
+
+                {/* Empresa */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Empresa *
+                  </label>
+                  <select
+                    value={formData.empresa}
+                    onChange={(e) =>
+                      setFormData({ ...formData, empresa: e.target.value })
+                    }
+                    disabled={loadingApi}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent disabled:bg-gray-50 disabled:text-gray-500"
+                  >
+                    <option value="">
+                      {loadingApi
+                        ? "Carregando..."
+                        : empresas.length > 0
+                        ? "Selecione uma empresa"
+                        : "Nenhuma empresa disponível"}
+                    </option>
+                    {empresas.map((emp) => (
+                      <option key={emp.id} value={emp.nome}>
+                        {emp.nome}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* Tipo Evento */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Tipo Evento *
+                  </label>
+                  <select
+                    value={formData.tipoEvento}
+                    onChange={(e) =>
+                      setFormData({ ...formData, tipoEvento: e.target.value })
+                    }
+                    disabled={loadingApi}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent disabled:bg-gray-50 disabled:text-gray-500"
+                  >
+                    <option value="">
+                      {loadingApi
+                        ? "Carregando..."
+                        : tiposEventos.length > 0
+                        ? "Selecione um tipo"
+                        : "Nenhum tipo de evento disponível"}
+                    </option>
+                    {tiposEventos.map((tipo) => (
+                      <option key={tipo.id} value={tipo.nome}>
+                        {tipo.nome}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* Tipo de Serviço */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Tipo de Serviço *
+                  </label>
+                  <select
+                    value={formData.tipoServico}
+                    onChange={(e) =>
+                      setFormData({ ...formData, tipoServico: e.target.value })
+                    }
+                    disabled={loadingApi}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent disabled:bg-gray-50 disabled:text-gray-500"
+                  >
+                    <option value="">
+                      {loadingApi
+                        ? "Carregando..."
+                        : tiposServicos.length > 0
+                        ? "Selecione um tipo"
+                        : "Nenhum tipo de serviço disponível"}
+                    </option>
+                    {tiposServicos.map((tipo) => (
+                      <option key={tipo.id} value={tipo.nome}>
+                        {tipo.nome}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* Nome */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Nome *
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.nome}
+                    onChange={(e) =>
+                      setFormData({ ...formData, nome: e.target.value })
+                    }
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent"
+                  />
+                </div>
+
+                {/* Endereço */}
+                <div className="md:col-span-2">
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Endereço
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.endereco}
+                    onChange={(e) =>
+                      setFormData({ ...formData, endereco: e.target.value })
+                    }
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent"
+                  />
+                </div>
+
+                {/* WhatsApp */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    WhatsApp
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.whatsapp}
+                    onChange={(e) =>
+                      setFormData({ ...formData, whatsapp: e.target.value })
+                    }
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent"
+                    placeholder="(00) 00000-0000"
+                  />
+                </div>
+
+                {/* CPF */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    CPF
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.cpf}
+                    onChange={(e) =>
+                      setFormData({ ...formData, cpf: e.target.value })
+                    }
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent"
+                    placeholder="000.000.000-00"
+                  />
+                </div>
+
+                {/* Tabela Free */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Tabela Free
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.tabelaFree}
+                    onChange={(e) =>
+                      setFormData({ ...formData, tabelaFree: e.target.value })
+                    }
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent"
+                  />
+                </div>
+
+                {/* Valor Free */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Valor Free
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.valorFree}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        valorFree: parseFloat(e.target.value) || 0,
+                      })
+                    }
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent"
+                  />
+                </div>
+
+                {/* Valor Extra */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Valor Extra
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={formData.valorExtra}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        valorExtra: parseFloat(e.target.value) || 0,
+                      })
+                    }
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent"
+                  />
+                </div>
+
+                {/* Descrição do Extra */}
+                <div className="md:col-span-2">
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Descrição do Extra
+                  </label>
+                  <textarea
+                    value={formData.descricaoExtra}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        descricaoExtra: e.target.value,
+                      })
+                    }
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent"
+                    rows={3}
+                  />
+                </div>
+
+                {/* Total a Pagar */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Total a Pagar
+                  </label>
+                  <input
+                    type="text"
+                    value={formatCurrency(formData.totalPagar || 0)}
+                    disabled
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-700 font-semibold"
+                  />
+                </div>
+
+                {/* Data Pgto */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    Data Pgto
+                  </label>
+                  <input
+                    type="date"
+                    value={formData.dataPgto}
+                    onChange={(e) =>
+                      setFormData({ ...formData, dataPgto: e.target.value })
+                    }
+                    className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent"
+                  />
+                </div>
+
+                {/* Pgto OK */}
+                <div className="md:col-span-2">
+                  <label className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={formData.pgtoOk}
+                      onChange={(e) =>
+                        setFormData({ ...formData, pgtoOk: e.target.checked })
+                      }
+                      className="w-4 h-4 sm:w-5 sm:h-5 text-brand-gold focus:ring-brand-gold border-gray-300 rounded"
+                    />
+                    <span className="text-xs sm:text-sm font-medium text-gray-700">
+                      Pagamento Confirmado
+                    </span>
+                  </label>
+                </div>
+              </div>
+
+              {/* Botões */}
+              <div className="flex gap-2 sm:gap-3 mt-6 sm:mt-8">
+                <button
+                  onClick={() => {
+                    setShowAddModal(false);
+                    setShowEditModal(false);
+                    setSelectedTransaction(null);
+                  }}
+                  className="flex-1 px-3 sm:px-4 py-2 sm:py-3 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors font-medium text-xs sm:text-sm"
+                >
+                  Cancelar
+                </button>
+                <button
+                  onClick={handleSaveTransaction}
+                  className="flex-1 px-3 sm:px-4 py-2 sm:py-3 bg-brand-gold text-white rounded-md hover:bg-[#a5bd2e] transition-colors font-medium text-xs sm:text-sm"
+                >
+                  {showEditModal ? "Salvar" : "Cadastrar"}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
 };
+
+export default Finance;
diff --git a/frontend/pages/Home.tsx b/frontend/pages/Home.tsx
index e731665..f9d7fa3 100644
--- a/frontend/pages/Home.tsx
+++ b/frontend/pages/Home.tsx
@@ -40,30 +40,30 @@ export const Home: React.FC<HomeProps> = ({ onEnter }) => {
 
       {/* Círculos decorativos animados */}
       <div
-        className="absolute top-10 left-10 w-64 h-64 bg-white/20 rounded-full blur-3xl animate-float"
+        className="absolute top-5 sm:top-10 left-5 sm:left-10 w-32 sm:w-48 md:w-64 h-32 sm:h-48 md:h-64 bg-white/20 rounded-full blur-2xl sm:blur-3xl animate-float"
         style={{ animationDelay: "0s" }}
       ></div>
       <div
-        className="absolute bottom-20 right-20 w-80 h-80 bg-white/20 rounded-full blur-3xl animate-float"
+        className="absolute bottom-10 sm:bottom-20 right-10 sm:right-20 w-48 sm:w-64 md:w-80 h-48 sm:h-64 md:h-80 bg-white/20 rounded-full blur-2xl sm:blur-3xl animate-float"
         style={{ animationDelay: "2s" }}
       ></div>
       <div
-        className="absolute top-1/3 right-10 w-48 h-48 bg-white/20 rounded-full blur-2xl animate-float"
+        className="absolute top-1/3 right-5 sm:right-10 w-32 sm:w-40 md:w-48 h-32 sm:h-40 md:h-48 bg-white/20 rounded-full blur-xl sm:blur-2xl animate-float"
         style={{ animationDelay: "4s" }}
       ></div>
 
-      <div className="bg-white rounded-2xl shadow-2xl p-8 sm:p-12 max-w-md w-full mx-4 animate-fade-in-scale relative z-10">
+      <div className="bg-white rounded-xl sm:rounded-2xl shadow-2xl p-6 sm:p-8 md:p-12 max-w-[90%] sm:max-w-md w-full mx-3 sm:mx-4 animate-fade-in-scale relative z-10">
         {/* Logo */}
-        <div className="flex justify-center mb-6">
+        <div className="flex justify-center mb-4 sm:mb-6">
           <img
             src="/logo_preta.png"
             alt="Photum Formaturas"
-            className="h-24 sm:h-32 w-auto object-contain"
+            className="h-16 sm:h-20 md:h-24 lg:h-32 w-auto object-contain"
           />
         </div>
 
         {/* Botões */}
-        <div className="space-y-4">
+        <div className="space-y-3 sm:space-y-4">
           <Button onClick={onEnter} className="w-full" size="lg">
             Entrar
           </Button>
diff --git a/frontend/pages/Login.tsx b/frontend/pages/Login.tsx
index 0b30f1e..9b3d504 100644
--- a/frontend/pages/Login.tsx
+++ b/frontend/pages/Login.tsx
@@ -1,9 +1,8 @@
-
-import React, { useState } from 'react';
-import { useAuth } from '../contexts/AuthContext';
-import { Button } from '../components/Button';
-import { Input } from '../components/Input';
-import { UserRole } from '../types';
+import React, { useState } from "react";
+import { useAuth } from "../contexts/AuthContext";
+import { Button } from "../components/Button";
+import { Input } from "../components/Input";
+import { UserRole } from "../types";
 
 interface LoginProps {
   onNavigate?: (page: string) => void;
@@ -11,16 +10,16 @@ interface LoginProps {
 
 export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
   const { login, availableUsers } = useAuth();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsLoading(true);
-    setError('');
+    setError("");
 
     try {
       const success = await login(email, password);
@@ -28,62 +27,79 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
       // If real login throws, we catch it below.
       if (!success) {
         // Fallback for mock if it returns false without throwing
-        setError('Credenciais inválidas, tente novamente ou tente um dos e-mails de demonstração.');
+        setError(
+          "Credenciais inválidas, tente novamente ou tente um dos e-mails de demonstração."
+        );
       }
     } catch (err: any) {
-      setError(err.message || 'Erro ao realizar login');
+      setError(err.message || "Erro ao realizar login");
     }
     setIsLoading(false);
   };
 
   const fillCredentials = (userEmail: string) => {
     setEmail(userEmail);
-    setPassword('123456'); // Dummy password to pass HTML5 validation
+    setPassword("123456"); // Dummy password to pass HTML5 validation
   };
 
   const getRoleLabel = (role: UserRole) => {
     switch (role) {
-      case UserRole.SUPERADMIN: return "Superadmin";
-      case UserRole.BUSINESS_OWNER: return "Empresa";
-      case UserRole.PHOTOGRAPHER: return "Fotógrafo";
-      case UserRole.EVENT_OWNER: return "Cliente";
-      default: return role;
+      case UserRole.SUPERADMIN:
+        return "Superadmin";
+      case UserRole.BUSINESS_OWNER:
+        return "Empresa";
+      case UserRole.PHOTOGRAPHER:
+        return "Fotógrafo";
+      case UserRole.EVENT_OWNER:
+        return "Cliente";
+      default:
+        return role;
     }
-  }
+  };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-white p-4 pt-24">
-      <div className="w-full max-w-md fade-in relative z-10 space-y-6">
-        <div className="bg-white rounded-2xl shadow-xl border border-gray-100 p-6 sm:p-8">
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-white p-3 sm:p-4 pt-20 sm:pt-24">
+      <div className="w-full max-w-md fade-in relative z-10 space-y-4 sm:space-y-6">
+        <div className="bg-white rounded-xl sm:rounded-2xl shadow-xl border border-gray-100 p-5 sm:p-6 md:p-8">
           {/* Logo dentro do card */}
-          <div className="flex justify-center mb-4">
+          <div className="flex justify-center mb-3 sm:mb-4">
             <img
               src="/logo.png"
               alt="Photum Formaturas"
-              className="h-18 sm:h-30 w-auto max-w-[200px] object-contain"
+              className="h-14 sm:h-16 md:h-20 w-auto max-w-[150px] sm:max-w-[180px] object-contain"
             />
           </div>
 
           <div className="text-center">
-            <span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{ color: '#B9CF33' }}>Bem-vindo de volta</span>
-            <h2 className="mt-2 text-2xl sm:text-3xl font-serif font-bold text-gray-900">Acesse sua conta</h2>
-            <p className="mt-2 text-xs sm:text-sm text-gray-600">
-              Não tem uma conta?{' '}
+            <span
+              className="font-bold tracking-widest uppercase text-[10px] sm:text-xs"
+              style={{ color: "#B9CF33" }}
+            >
+              Bem-vindo de volta
+            </span>
+            <h2 className="mt-1.5 sm:mt-2 text-xl sm:text-2xl md:text-3xl font-serif font-bold text-gray-900">
+              Acesse sua conta
+            </h2>
+            <p className="mt-1.5 sm:mt-2 text-xs sm:text-sm text-gray-600">
+              Não tem uma conta?{" "}
               <button
                 type="button"
-                onClick={() => onNavigate?.('cadastro')}
+                onClick={() => onNavigate?.("cadastro")}
                 className="font-medium hover:opacity-80 transition-opacity"
-                style={{ color: '#B9CF33' }}
+                style={{ color: "#B9CF33" }}
               >
                 Cadastre-se
               </button>
             </p>
           </div>
 
-          <form className="mt-6 sm:mt-8 space-y-4 sm:space-y-6" onSubmit={handleLogin}>
-            <div className="space-y-3 sm:space-y-4">
+          <form
+            className="mt-5 sm:mt-6 md:mt-8 space-y-3 sm:space-y-4 md:space-y-6"
+            onSubmit={handleLogin}
+          >
+            <div className="space-y-2.5 sm:space-y-3 md:space-y-4">
               <div>
-                <label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
+                <label className="block text-[10px] sm:text-xs md:text-sm font-medium text-gray-700 mb-1 sm:mb-1.5">
                   E-MAIL CORPORATIVO OU PESSOAL
                 </label>
                 <input
@@ -92,28 +108,32 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
                   placeholder="nome@exemplo.com"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
-                  className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all"
-                  style={{ focusRing: '2px solid #B9CF33' }}
-                  onFocus={(e) => e.target.style.borderColor = '#B9CF33'}
-                  onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
+                  className="w-full px-2.5 sm:px-3 md:px-4 py-2 sm:py-2.5 md:py-3 text-xs sm:text-sm md:text-base border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all"
+                  style={{ focusRing: "2px solid #B9CF33" }}
+                  onFocus={(e) => (e.target.style.borderColor = "#B9CF33")}
+                  onBlur={(e) => (e.target.style.borderColor = "#d1d5db")}
                 />
-                {error && <span className="text-xs text-red-500 mt-1 block">{error}</span>}
+                {error && (
+                  <span className="text-xs text-red-500 mt-1 block">
+                    {error}
+                  </span>
+                )}
               </div>
               <div>
-                <label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
+                <label className="block text-[10px] sm:text-xs md:text-sm font-medium text-gray-700 mb-1 sm:mb-1.5">
                   SENHA
                 </label>
                 <div className="relative">
                   <input
-                    type={showPassword ? 'text' : 'password'}
+                    type={showPassword ? "text" : "password"}
                     placeholder="••••••••"
                     required
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
-                    className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all"
-                    style={{ focusRing: '2px solid #5A4B81' }}
-                    onFocus={(e) => e.target.style.borderColor = '#5A4B81'}
-                    onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
+                    className="w-full px-2.5 sm:px-3 md:px-4 py-2 sm:py-2.5 md:py-3 text-xs sm:text-sm md:text-base border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all"
+                    style={{ focusRing: "2px solid #5A4B81" }}
+                    onFocus={(e) => (e.target.style.borderColor = "#5A4B81")}
+                    onBlur={(e) => (e.target.style.borderColor = "#d1d5db")}
                   />
                   <button
                     type="button"
@@ -121,13 +141,38 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
                     className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                   >
                     {showPassword ? (
-                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+                      <svg
+                        className="w-5 h-5"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+                        />
                       </svg>
                     ) : (
-                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                      <svg
+                        className="w-5 h-5"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                        />
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                        />
                       </svg>
                     )}
                   </button>
@@ -139,41 +184,63 @@ export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
               type="submit"
               disabled={isLoading}
               className="w-full px-6 sm:px-10 py-3 sm:py-4 text-white font-bold text-base sm:text-lg rounded-lg transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
-              style={{ backgroundColor: '#4E345F' }}
+              style={{ backgroundColor: "#4E345F" }}
             >
-              {isLoading ? 'Entrando...' : 'Entrar no Sistema'}
+              {isLoading ? "Entrando..." : "Entrar no Sistema"}
             </button>
           </form>
         </div>
 
         {/* Demo Users Quick Select */}
         <div className="bg-white rounded-2xl shadow-xl border border-gray-100 p-6">
-          <p className="text-[10px] sm:text-xs uppercase tracking-widest mb-3 sm:mb-4 text-center text-gray-400">Usuários de Demonstração (Clique para preencher)</p>
+          <p className="text-[10px] sm:text-xs uppercase tracking-widest mb-3 sm:mb-4 text-center text-gray-400">
+            Usuários de Demonstração (Clique para preencher)
+          </p>
           <div className="space-y-2">
-            {availableUsers.map(user => (
+            {availableUsers.map((user) => (
               <button
                 key={user.id}
                 onClick={() => fillCredentials(user.email)}
                 className="w-full flex items-center justify-between p-3 sm:p-4 border-2 rounded-xl hover:bg-gray-50 transition-all duration-300 text-left group transform hover:scale-[1.01] active:scale-[0.99]"
-                style={{ borderColor: '#e5e7eb' }}
+                style={{ borderColor: "#e5e7eb" }}
                 onMouseEnter={(e) => {
-                  e.currentTarget.style.borderColor = '#B9CF33';
-                  e.currentTarget.style.boxShadow = '0 4px 12px rgba(185, 207, 51, 0.15)';
+                  e.currentTarget.style.borderColor = "#B9CF33";
+                  e.currentTarget.style.boxShadow =
+                    "0 4px 12px rgba(185, 207, 51, 0.15)";
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.borderColor = '#e5e7eb';
-                  e.currentTarget.style.boxShadow = 'none';
+                  e.currentTarget.style.borderColor = "#e5e7eb";
+                  e.currentTarget.style.boxShadow = "none";
                 }}
               >
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 mb-1">
-                    <span className="text-sm sm:text-base font-bold text-gray-900 truncate">{user.name}</span>
-                    <span className="text-[10px] sm:text-xs uppercase tracking-wide font-semibold px-2 py-0.5 rounded-full whitespace-nowrap" style={{ backgroundColor: '#B9CF33', color: '#fff' }}>{getRoleLabel(user.role)}</span>
+                    <span className="text-sm sm:text-base font-bold text-gray-900 truncate">
+                      {user.name}
+                    </span>
+                    <span
+                      className="text-[10px] sm:text-xs uppercase tracking-wide font-semibold px-2 py-0.5 rounded-full whitespace-nowrap"
+                      style={{ backgroundColor: "#B9CF33", color: "#fff" }}
+                    >
+                      {getRoleLabel(user.role)}
+                    </span>
                   </div>
-                  <span className="text-xs sm:text-sm text-gray-500 truncate block">{user.email}</span>
+                  <span className="text-xs sm:text-sm text-gray-500 truncate block">
+                    {user.email}
+                  </span>
                 </div>
-                <svg className="w-5 h-5 text-gray-400 group-hover:text-[#B9CF33] transition-colors flex-shrink-0 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                <svg
+                  className="w-5 h-5 text-gray-400 group-hover:text-[#B9CF33] transition-colors flex-shrink-0 ml-2"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
                 </svg>
               </button>
             ))}
diff --git a/frontend/pages/PhotographerFinance.tsx b/frontend/pages/PhotographerFinance.tsx
new file mode 100644
index 0000000..c1d5a10
--- /dev/null
+++ b/frontend/pages/PhotographerFinance.tsx
@@ -0,0 +1,401 @@
+import React, { useState, useEffect, useMemo } from "react";
+import {
+  Download,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  AlertCircle,
+} from "lucide-react";
+
+interface PhotographerPayment {
+  id: string;
+  data: string;
+  nomeEvento: string;
+  tipoEvento: string;
+  empresa: string;
+  valorRecebido: number;
+  dataPagamento: string;
+  statusPagamento: "Pago" | "Pendente" | "Atrasado";
+}
+
+type SortField = keyof PhotographerPayment | null;
+type SortDirection = "asc" | "desc" | null;
+
+const PhotographerFinance: React.FC = () => {
+  const [payments, setPayments] = useState<PhotographerPayment[]>([
+    {
+      id: "1",
+      data: "2025-11-15",
+      nomeEvento: "Formatura Medicina UFPR 2025",
+      tipoEvento: "Formatura",
+      empresa: "PhotoPro Studio",
+      valorRecebido: 1500.0,
+      dataPagamento: "2025-11-20",
+      statusPagamento: "Pago",
+    },
+    {
+      id: "2",
+      data: "2025-11-18",
+      nomeEvento: "Formatura Direito PUC-PR 2025",
+      tipoEvento: "Formatura",
+      empresa: "PhotoPro Studio",
+      valorRecebido: 1200.0,
+      dataPagamento: "2025-11-25",
+      statusPagamento: "Pago",
+    },
+    {
+      id: "3",
+      data: "2025-12-01",
+      nomeEvento: "Formatura Engenharia UTFPR 2025",
+      tipoEvento: "Formatura",
+      empresa: "Lens & Art",
+      valorRecebido: 1800.0,
+      dataPagamento: "2025-12-15",
+      statusPagamento: "Pendente",
+    },
+  ]);
+
+  const [sortField, setSortField] = useState<SortField>(null);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(null);
+  const [apiError, setApiError] = useState<string>("");
+
+  // Load API data
+  useEffect(() => {
+    loadApiData();
+  }, []);
+
+  const loadApiData = async () => {
+    try {
+      // TODO: Implementar chamada real da API
+      // const response = await fetch("http://localhost:3000/api/photographer/payments");
+      // const data = await response.json();
+      // setPayments(data);
+    } catch (error) {
+      console.error("Erro ao carregar pagamentos:", error);
+      setApiError(
+        "Não foi possível carregar os dados da API. Usando dados de exemplo."
+      );
+    }
+  };
+
+  // Sorting logic
+  const handleSort = (field: keyof PhotographerPayment) => {
+    if (sortField === field) {
+      if (sortDirection === "asc") {
+        setSortDirection("desc");
+      } else if (sortDirection === "desc") {
+        setSortDirection(null);
+        setSortField(null);
+      }
+    } else {
+      setSortField(field);
+      setSortDirection("asc");
+    }
+  };
+
+  const getSortIcon = (field: keyof PhotographerPayment) => {
+    if (sortField !== field) {
+      return (
+        <ArrowUpDown
+          size={16}
+          className="opacity-0 group-hover:opacity-50 transition-opacity"
+        />
+      );
+    }
+    if (sortDirection === "asc") {
+      return <ArrowUp size={16} className="text-brand-gold" />;
+    }
+    if (sortDirection === "desc") {
+      return <ArrowDown size={16} className="text-brand-gold" />;
+    }
+    return (
+      <ArrowUpDown
+        size={16}
+        className="opacity-0 group-hover:opacity-50 transition-opacity"
+      />
+    );
+  };
+
+  const sortedPayments = useMemo(() => {
+    if (!sortField || !sortDirection) return payments;
+
+    return [...payments].sort((a, b) => {
+      const aValue = a[sortField];
+      const bValue = b[sortField];
+
+      if (aValue === null || aValue === undefined) return 1;
+      if (bValue === null || bValue === undefined) return -1;
+
+      let comparison = 0;
+      if (typeof aValue === "string" && typeof bValue === "string") {
+        comparison = aValue.localeCompare(bValue);
+      } else if (typeof aValue === "number" && typeof bValue === "number") {
+        comparison = aValue - bValue;
+      } else if (typeof aValue === "boolean" && typeof bValue === "boolean") {
+        comparison = aValue === bValue ? 0 : aValue ? 1 : -1;
+      }
+
+      return sortDirection === "asc" ? comparison : -comparison;
+    });
+  }, [payments, sortField, sortDirection]);
+
+  // Export to CSV
+  const handleExport = () => {
+    const headers = [
+      "Data Evento",
+      "Nome Evento",
+      "Tipo Evento",
+      "Empresa",
+      "Valor Recebido",
+      "Data Pagamento",
+      "Status",
+    ];
+
+    const csvContent = [
+      headers.join(","),
+      ...sortedPayments.map((p) =>
+        [
+          p.data,
+          `"${p.nomeEvento}"`,
+          p.tipoEvento,
+          p.empresa,
+          p.valorRecebido.toFixed(2),
+          p.dataPagamento,
+          p.statusPagamento,
+        ].join(",")
+      ),
+    ].join("\n");
+
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const link = document.createElement("a");
+    const url = URL.createObjectURL(blob);
+    link.setAttribute("href", url);
+    link.setAttribute("download", `meus_pagamentos_${Date.now()}.csv`);
+    link.style.visibility = "hidden";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  // Calculate totals
+  const totalRecebido = sortedPayments.reduce(
+    (sum, p) => sum + p.valorRecebido,
+    0
+  );
+  const totalPago = sortedPayments
+    .filter((p) => p.statusPagamento === "Pago")
+    .reduce((sum, p) => sum + p.valorRecebido, 0);
+  const totalPendente = sortedPayments
+    .filter((p) => p.statusPagamento === "Pendente")
+    .reduce((sum, p) => sum + p.valorRecebido, 0);
+
+  const getStatusBadge = (status: string) => {
+    const statusColors = {
+      Pago: "bg-green-100 text-green-800",
+      Pendente: "bg-yellow-100 text-yellow-800",
+      Atrasado: "bg-red-100 text-red-800",
+    };
+
+    return (
+      <span
+        className={`px-2 py-1 rounded-full text-xs font-medium ${
+          statusColors[status as keyof typeof statusColors] ||
+          "bg-gray-100 text-gray-800"
+        }`}
+      >
+        {status}
+      </span>
+    );
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 pt-20">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900">Meus Pagamentos</h1>
+          <p className="mt-2 text-gray-600">
+            Visualize todos os pagamentos recebidos pelos eventos fotografados
+          </p>
+        </div>
+
+        {/* Summary Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+          <div className="bg-white rounded-lg shadow p-6">
+            <p className="text-sm text-gray-600 mb-1">Total Recebido</p>
+            <p className="text-2xl font-bold text-gray-900">
+              R$ {totalRecebido.toFixed(2)}
+            </p>
+          </div>
+          <div className="bg-white rounded-lg shadow p-6">
+            <p className="text-sm text-gray-600 mb-1">Pagamentos Confirmados</p>
+            <p className="text-2xl font-bold text-green-600">
+              R$ {totalPago.toFixed(2)}
+            </p>
+          </div>
+          <div className="bg-white rounded-lg shadow p-6">
+            <p className="text-sm text-gray-600 mb-1">Pagamentos Pendentes</p>
+            <p className="text-2xl font-bold text-yellow-600">
+              R$ {totalPendente.toFixed(2)}
+            </p>
+          </div>
+        </div>
+
+        {/* Main Card */}
+        <div className="bg-white rounded-lg shadow">
+          {/* Actions Bar */}
+          <div className="px-6 py-4 border-b border-gray-200">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-semibold text-gray-900">
+                Histórico de Pagamentos
+              </h2>
+              <button
+                onClick={handleExport}
+                className="flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors"
+              >
+                <Download size={20} />
+                Exportar
+              </button>
+            </div>
+          </div>
+
+          {apiError && (
+            <div className="mx-6 mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg flex items-start gap-3">
+              <AlertCircle
+                className="text-yellow-600 flex-shrink-0 mt-0.5"
+                size={20}
+              />
+              <div className="flex-1">
+                <p className="text-sm font-medium text-yellow-800">Aviso</p>
+                <p className="text-sm text-yellow-700 mt-1">{apiError}</p>
+              </div>
+            </div>
+          )}
+
+          {/* Table */}
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-gray-50 border-b border-gray-200">
+                <tr>
+                  <th className="px-4 py-3 text-left">
+                    <button
+                      onClick={() => handleSort("data")}
+                      className="group flex items-center gap-2 text-xs font-medium text-gray-700 hover:text-gray-900"
+                    >
+                      Data Evento
+                      {getSortIcon("data")}
+                    </button>
+                  </th>
+                  <th className="px-4 py-3 text-left">
+                    <button
+                      onClick={() => handleSort("nomeEvento")}
+                      className="group flex items-center gap-2 text-xs font-medium text-gray-700 hover:text-gray-900"
+                    >
+                      Nome Evento
+                      {getSortIcon("nomeEvento")}
+                    </button>
+                  </th>
+                  <th className="px-4 py-3 text-left">
+                    <button
+                      onClick={() => handleSort("tipoEvento")}
+                      className="group flex items-center gap-2 text-xs font-medium text-gray-700 hover:text-gray-900"
+                    >
+                      Tipo Evento
+                      {getSortIcon("tipoEvento")}
+                    </button>
+                  </th>
+                  <th className="px-4 py-3 text-left">
+                    <button
+                      onClick={() => handleSort("empresa")}
+                      className="group flex items-center gap-2 text-xs font-medium text-gray-700 hover:text-gray-900"
+                    >
+                      Empresa
+                      {getSortIcon("empresa")}
+                    </button>
+                  </th>
+                  <th className="px-4 py-3 text-left">
+                    <button
+                      onClick={() => handleSort("valorRecebido")}
+                      className="group flex items-center gap-2 text-xs font-medium text-gray-700 hover:text-gray-900"
+                    >
+                      Valor Recebido
+                      {getSortIcon("valorRecebido")}
+                    </button>
+                  </th>
+                  <th className="px-4 py-3 text-left">
+                    <button
+                      onClick={() => handleSort("dataPagamento")}
+                      className="group flex items-center gap-2 text-xs font-medium text-gray-700 hover:text-gray-900"
+                    >
+                      Data Pagamento
+                      {getSortIcon("dataPagamento")}
+                    </button>
+                  </th>
+                  <th className="px-4 py-3 text-left">
+                    <button
+                      onClick={() => handleSort("statusPagamento")}
+                      className="group flex items-center gap-2 text-xs font-medium text-gray-700 hover:text-gray-900"
+                    >
+                      Status
+                      {getSortIcon("statusPagamento")}
+                    </button>
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                {sortedPayments.length === 0 ? (
+                  <tr>
+                    <td
+                      colSpan={7}
+                      className="px-4 py-8 text-center text-gray-500"
+                    >
+                      Nenhum pagamento encontrado
+                    </td>
+                  </tr>
+                ) : (
+                  sortedPayments.map((payment) => (
+                    <tr
+                      key={payment.id}
+                      className="hover:bg-gray-50 transition-colors"
+                    >
+                      <td className="px-4 py-3 whitespace-nowrap text-sm">
+                        {new Date(payment.data).toLocaleDateString("pt-BR")}
+                      </td>
+                      <td className="px-4 py-3 text-sm">
+                        {payment.nomeEvento}
+                      </td>
+                      <td className="px-4 py-3 whitespace-nowrap text-sm">
+                        {payment.tipoEvento}
+                      </td>
+                      <td className="px-4 py-3 text-sm">{payment.empresa}</td>
+                      <td className="px-4 py-3 whitespace-nowrap text-sm font-medium text-green-600">
+                        R$ {payment.valorRecebido.toFixed(2)}
+                      </td>
+                      <td className="px-4 py-3 whitespace-nowrap text-sm">
+                        {new Date(payment.dataPagamento).toLocaleDateString(
+                          "pt-BR"
+                        )}
+                      </td>
+                      <td className="px-4 py-3 whitespace-nowrap text-sm">
+                        {getStatusBadge(payment.statusPagamento)}
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Footer */}
+          <div className="px-6 py-4 border-t border-gray-200 bg-gray-50">
+            <p className="text-sm text-gray-600">
+              Total de pagamentos: {sortedPayments.length}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PhotographerFinance;
diff --git a/frontend/pages/Register.tsx b/frontend/pages/Register.tsx
index fe6762c..582a63a 100644
--- a/frontend/pages/Register.tsx
+++ b/frontend/pages/Register.tsx
@@ -157,15 +157,15 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
 
           <div className="text-center">
             <span
-              className="font-bold tracking-widest uppercase text-xs sm:text-sm"
+              className="font-bold tracking-widest uppercase text-[10px] sm:text-xs"
               style={{ color: "#B9CF33" }}
             >
               Comece agora
             </span>
-            <h2 className="mt-2 text-2xl sm:text-3xl font-serif font-bold text-gray-900">
+            <h2 className="mt-1.5 sm:mt-2 text-xl sm:text-2xl md:text-3xl font-serif font-bold text-gray-900">
               Crie sua conta
             </h2>
-            <p className="mt-2 text-xs sm:text-sm text-gray-600">
+            <p className="mt-1.5 sm:mt-2 text-xs sm:text-sm text-gray-600">
               Já tem uma conta?{" "}
               <button
                 onClick={() => onNavigate("entrar")}
@@ -177,7 +177,28 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
             </p>
           </div>
 
-          <form className="mt-6 space-y-4" onSubmit={handleSubmit}>
+          <form
+            className="mt-5 sm:mt-6 space-y-3 sm:space-y-4"
+            onSubmit={handleSubmit}
+          >
+            <div className="flex items-start bg-blue-50 border border-blue-200 rounded-lg p-2.5 sm:p-3 md:p-4 mb-3 sm:mb-4">
+              <div className="flex-1">
+                <p className="text-xs sm:text-sm text-gray-700">
+                  <span className="font-medium text-xs sm:text-sm">
+                    Você é um profissional?
+                  </span>
+                </p>
+                <button
+                  type="button"
+                  onClick={() => onNavigate("cadastro-profissional")}
+                  className="text-xs sm:text-sm mt-1 hover:opacity-80 transition-opacity underline font-medium"
+                  style={{ color: "#B9CF33" }}
+                >
+                  Clique aqui para se cadastrar como profissional
+                </button>
+              </div>
+            </div>
+
             <div className="space-y-3">
               <Input
                 label="Nome Completo"
@@ -208,11 +229,11 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
               />
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
+                <label className="block text-[10px] sm:text-xs md:text-sm font-medium text-gray-700 mb-1">
                   Empresa *
                 </label>
                 {isLoadingCompanies ? (
-                  <p className="text-sm text-gray-500">
+                  <p className="text-xs sm:text-sm text-gray-500">
                     Carregando empresas...
                   </p>
                 ) : (
@@ -220,7 +241,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
                     required
                     value={formData.empresaId}
                     onChange={(e) => handleChange("empresaId", e.target.value)}
-                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent"
+                    className="w-full px-2.5 sm:px-3 md:px-4 py-1.5 sm:py-2 text-xs sm:text-sm border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent"
                     style={{ focusRing: "2px solid #B9CF33" }}
                   >
                     <option value="">Selecione uma empresa</option>
@@ -253,7 +274,7 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
                 }
                 error={
                   error &&
-                    (error.includes("senha") || error.includes("coincidem"))
+                  (error.includes("senha") || error.includes("coincidem"))
                     ? error
                     : undefined
                 }
@@ -297,24 +318,6 @@ export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
               )}
             </div>
 
-            <div className="flex items-start bg-gray-50 border border-gray-200 rounded-lg p-3 sm:p-4">
-              <div className="flex-1">
-                <p className="text-xs sm:text-sm text-gray-700">
-                  <span className="font-medium text-xs sm:text-sm">
-                    Você é um profissional?
-                  </span>
-                </p>
-                <button
-                  type="button"
-                  onClick={() => onNavigate("cadastro-profissional")}
-                  className="text-xs sm:text-sm mt-1 hover:opacity-80 transition-opacity underline font-medium"
-                  style={{ color: "#B9CF33" }}
-                >
-                  Clique aqui para se cadastrar como profissional
-                </button>
-              </div>
-            </div>
-
             {error &&
               !error.includes("termos") &&
               !error.includes("senha") &&
diff --git a/frontend/pages/UniversityManagement.tsx b/frontend/pages/UniversityManagement.tsx
new file mode 100644
index 0000000..75bd37a
--- /dev/null
+++ b/frontend/pages/UniversityManagement.tsx
@@ -0,0 +1,490 @@
+import React, { useState, useEffect } from 'react';
+import { Download, Plus, ArrowUpDown, ArrowUp, ArrowDown, X, AlertCircle } from 'lucide-react';
+
+interface University {
+    id: string;
+    empresa: string;
+    nomeUniversidade: string;
+    anoFormatura: number;
+    semestre: number;
+    cursos: string[];
+}
+
+const UniversityManagement: React.FC = () => {
+    const [universities, setUniversities] = useState<University[]>([
+        {
+            id: '1',
+            empresa: 'PhotoPro Studio',
+            nomeUniversidade: 'UFPR - Universidade Federal do Paraná',
+            anoFormatura: 2025,
+            semestre: 2,
+            cursos: ['Medicina', 'Direito', 'Engenharia Civil']
+        },
+        {
+            id: '2',
+            empresa: 'Lens & Art',
+            nomeUniversidade: 'PUC-PR - Pontifícia Universidade Católica do Paraná',
+            anoFormatura: 2025,
+            semestre: 1,
+            cursos: ['Administração', 'Arquitetura', 'Psicologia']
+        }
+    ]);
+
+    const [showAddModal, setShowAddModal] = useState(false);
+    const [showEditModal, setShowEditModal] = useState(false);
+    const [selectedUniversity, setSelectedUniversity] = useState<University | null>(null);
+    const [sortConfig, setSortConfig] = useState<{ key: keyof University; direction: 'asc' | 'desc' } | null>(null);
+
+    // Estados para dados da API
+    const [cursos, setCursos] = useState<any[]>([]);
+    const [empresas, setEmpresas] = useState<any[]>([]);
+    const [apiError, setApiError] = useState<string>('');
+    const [loadingApi, setLoadingApi] = useState(false);
+
+    // Form state
+    const [formData, setFormData] = useState<Partial<University>>({
+        empresa: '',
+        nomeUniversidade: '',
+        anoFormatura: new Date().getFullYear(),
+        semestre: 1,
+        cursos: []
+    });
+
+    // Estados para seleção de cursos
+    const [selectedCursos, setSelectedCursos] = useState<string[]>([]);
+    const [cursoInput, setCursoInput] = useState('');
+
+    // Carregar dados da API
+    const loadApiData = async () => {
+        setLoadingApi(true);
+        setApiError('');
+        try {
+            const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
+            
+            // Carregar cursos
+            try {
+                const cursosRes = await fetch(`${API_BASE_URL}/api/cursos`);
+                if (cursosRes.ok) {
+                    const cursosData = await cursosRes.json();
+                    setCursos(cursosData);
+                }
+            } catch (error) {
+                console.error('Erro ao carregar cursos:', error);
+            }
+
+            // Carregar empresas
+            try {
+                const empRes = await fetch(`${API_BASE_URL}/api/empresas`);
+                if (empRes.ok) {
+                    const empData = await empRes.json();
+                    setEmpresas(empData);
+                }
+            } catch (error) {
+                console.error('Erro ao carregar empresas:', error);
+            }
+
+            if (cursos.length === 0 && empresas.length === 0) {
+                setApiError('Backend não está rodando. Alguns campos podem não estar disponíveis.');
+            }
+
+        } catch (error) {
+            setApiError('Backend não está rodando. Alguns campos podem não estar disponíveis.');
+        } finally {
+            setLoadingApi(false);
+        }
+    };
+
+    useEffect(() => {
+        if (showAddModal || showEditModal) {
+            loadApiData();
+        }
+    }, [showAddModal, showEditModal]);
+
+    // Ordenação
+    const handleSort = (key: keyof University) => {
+        if (sortConfig && sortConfig.key === key) {
+            if (sortConfig.direction === 'asc') {
+                setSortConfig({ key, direction: 'desc' });
+            } else {
+                setSortConfig(null);
+            }
+        } else {
+            setSortConfig({ key, direction: 'asc' });
+        }
+    };
+
+    const sortedUniversities = React.useMemo(() => {
+        let sortableUniversities = [...universities];
+        if (sortConfig !== null) {
+            sortableUniversities.sort((a, b) => {
+                const aValue = a[sortConfig.key];
+                const bValue = b[sortConfig.key];
+
+                if (aValue < bValue) {
+                    return sortConfig.direction === 'asc' ? -1 : 1;
+                }
+                if (aValue > bValue) {
+                    return sortConfig.direction === 'asc' ? 1 : -1;
+                }
+                return 0;
+            });
+        }
+        return sortableUniversities;
+    }, [universities, sortConfig]);
+
+    const getSortIcon = (key: keyof University) => {
+        if (sortConfig?.key !== key) {
+            return <ArrowUpDown size={14} className="opacity-0 group-hover:opacity-50 transition-opacity" />;
+        }
+        if (sortConfig.direction === 'asc') {
+            return <ArrowUp size={14} className="text-brand-gold" />;
+        }
+        return <ArrowDown size={14} className="text-brand-gold" />;
+    };
+
+    // Handlers
+    const handleAddUniversity = () => {
+        setFormData({
+            empresa: '',
+            nomeUniversidade: '',
+            semestre: 1,
+            anoFormatura: new Date().getFullYear(),
+            cursos: []
+        });
+        setSelectedCursos([]);
+        setShowAddModal(true);
+    };
+
+    const handleEditUniversity = (university: University) => {
+        setSelectedUniversity(university);
+        setFormData(university);
+        setSelectedCursos(university.cursos || []);
+        setShowEditModal(true);
+    };
+
+    const handleAddCurso = () => {
+        if (cursoInput && !selectedCursos.includes(cursoInput)) {
+            setSelectedCursos([...selectedCursos, cursoInput]);
+            setCursoInput('');
+        }
+    };
+
+    const handleRemoveCurso = (curso: string) => {
+        setSelectedCursos(selectedCursos.filter(c => c !== curso));
+    };
+
+    const handleSaveUniversity = () => {
+        const updatedData = { ...formData, cursos: selectedCursos };
+        
+        if (showEditModal && selectedUniversity) {
+            setUniversities(universities.map(u => 
+                u.id === selectedUniversity.id 
+                    ? { ...updatedData, id: selectedUniversity.id } as University
+                    : u
+            ));
+            setShowEditModal(false);
+        } else {
+            const newUniversity: University = {
+                ...updatedData,
+                id: Date.now().toString()
+            } as University;
+            setUniversities([...universities, newUniversity]);
+            setShowAddModal(false);
+        }
+        setSelectedUniversity(null);
+        setSelectedCursos([]);
+    };
+
+    const handleExport = () => {
+        const headers = ['Empresa', 'Nome da Universidade', 'Ano Formatura', 'Cursos'];
+        
+        const csvContent = [
+            headers.join(','),
+            ...universities.map(u => [
+                u.empresa,
+                `"${u.nomeUniversidade}"`,
+                `${u.anoFormatura}.${u.semestre}`,
+                `"${u.cursos.join(', ')}"`
+            ].join(','))
+        ].join('\n');
+
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = `universidades_${new Date().toISOString().split('T')[0]}.csv`;
+        link.click();
+    };
+
+    return (
+        <div className="min-h-screen bg-gray-50 pt-20 sm:pt-24 pb-8 sm:pb-12">
+            <div className="max-w-[95%] mx-auto px-3 sm:px-4">
+                {/* Header */}
+                <div className="mb-4 sm:mb-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-0">
+                    <div>
+                        <h1 className="text-xl sm:text-2xl md:text-3xl font-serif font-bold text-brand-black mb-1 sm:mb-2">
+                            Gestão de Universidades
+                        </h1>
+                        <p className="text-xs sm:text-sm text-gray-600">
+                            Cadastro e gerenciamento de universidades
+                        </p>
+                    </div>
+                    <div className="flex gap-2 sm:gap-3 w-full sm:w-auto">
+                        <button 
+                            onClick={handleExport}
+                            className="flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-1.5 sm:py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors font-medium text-xs sm:text-sm flex-1 sm:flex-none justify-center"
+                        >
+                            <Download size={16} className="sm:w-[18px] sm:h-[18px]" />
+                            <span className="hidden sm:inline">Exportar</span>
+                        </button>
+                        <button 
+                            onClick={handleAddUniversity}
+                            className="flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-1.5 sm:py-2 bg-brand-gold text-white rounded-md hover:bg-[#a5bd2e] transition-colors font-medium text-xs sm:text-sm flex-1 sm:flex-none justify-center"
+                        >
+                            <Plus size={16} className="sm:w-[18px] sm:h-[18px]" />
+                            <span className="hidden sm:inline">Cadastrar</span>
+                            <span className="sm:hidden">Nova Universidade</span>
+                            <span className="hidden sm:inline">Universidade</span>
+                        </button>
+                    </div>
+                </div>
+
+                {/* Tabela */}
+                <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-x-auto">
+                    <table className="w-full text-xs sm:text-sm min-w-[600px]">
+                        <thead className="bg-gray-50 border-b border-gray-200">
+                            <tr>
+                                {[
+                                    { key: 'empresa', label: 'Empresa' },
+                                    { key: 'nomeUniversidade', label: 'Nome da Universidade' },
+                                    { key: 'anoFormatura', label: 'Ano Formatura' },
+                                    { key: 'cursos', label: 'Cursos' }
+                                ].map((column) => (
+                                    <th
+                                        key={column.key}
+                                        onClick={() => handleSort(column.key as keyof University)}
+                                        className="px-4 py-3 text-left font-semibold text-gray-700 cursor-pointer hover:bg-gray-100 transition-colors whitespace-nowrap group"
+                                    >
+                                        <div className="flex items-center gap-2">
+                                            {column.label}
+                                            {getSortIcon(column.key as keyof University)}
+                                        </div>
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                        <tbody className="divide-y divide-gray-200">
+                            {sortedUniversities.map((university) => (
+                                <tr
+                                    key={university.id}
+                                    onClick={() => handleEditUniversity(university)}
+                                    className="hover:bg-gray-50 cursor-pointer transition-colors"
+                                >
+                                    <td className="px-4 py-3 whitespace-nowrap">{university.empresa}</td>
+                                    <td className="px-4 py-3">{university.nomeUniversidade}</td>
+                                    <td className="px-4 py-3 whitespace-nowrap">{university.anoFormatura}.{university.semestre}</td>
+                                    <td className="px-4 py-3">
+                                        <div className="flex flex-wrap gap-1">
+                                            {university.cursos.map((curso, idx) => (
+                                                <span 
+                                                    key={idx}
+                                                    className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs"
+                                                >
+                                                    {curso}
+                                                </span>
+                                            ))}
+                                        </div>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                    {sortedUniversities.length === 0 && (
+                        <div className="text-center py-12 text-gray-500">
+                            Nenhuma universidade cadastrada
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Modal Adicionar/Editar */}
+            {(showAddModal || showEditModal) && (
+                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+                    <div className="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+                        <div className="sticky top-0 bg-white border-b border-gray-200 p-6 flex items-center justify-between">
+                            <h2 className="text-2xl font-bold">
+                                {showEditModal ? 'Editar Universidade' : 'Cadastrar Universidade'}
+                            </h2>
+                            <button
+                                onClick={() => {
+                                    setShowAddModal(false);
+                                    setShowEditModal(false);
+                                    setSelectedUniversity(null);
+                                    setSelectedCursos([]);
+                                }}
+                                className="text-gray-500 hover:text-gray-700"
+                            >
+                                <X size={24} />
+                            </button>
+                        </div>
+
+                        {apiError && (
+                            <div className="mx-6 mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg flex items-start gap-3">
+                                <AlertCircle className="text-yellow-600 flex-shrink-0 mt-0.5" size={20} />
+                                <div className="flex-1">
+                                    <p className="text-sm font-medium text-yellow-800">Aviso</p>
+                                    <p className="text-sm text-yellow-700 mt-1">{apiError}</p>
+                                </div>
+                            </div>
+                        )}
+
+                        <div className="p-6">
+                            <div className="grid grid-cols-1 gap-4">
+                                {/* Empresa */}
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                                        Empresa *
+                                    </label>
+                                    <select
+                                        value={formData.empresa}
+                                        onChange={(e) => setFormData({ ...formData, empresa: e.target.value })}
+                                        disabled={loadingApi}
+                                        className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent disabled:bg-gray-50 disabled:text-gray-500"
+                                    >
+                                        <option value="">
+                                            {loadingApi ? 'Carregando...' : empresas.length > 0 ? 'Selecione uma empresa' : 'Nenhuma empresa disponível'}
+                                        </option>
+                                        {empresas.map((emp) => (
+                                            <option key={emp.id} value={emp.nome}>
+                                                {emp.nome}
+                                            </option>
+                                        ))}
+                                    </select>
+                                </div>
+
+                                {/* Nome da Universidade */}
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                                        Nome da Universidade *
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={formData.nomeUniversidade}
+                                        onChange={(e) => setFormData({ ...formData, nomeUniversidade: e.target.value })}
+                                        className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent"
+                                        placeholder="Ex: UFPR - Universidade Federal do Paraná"
+                                    />
+                                </div>
+
+                                {/* Ano Formatura */}
+                                <div className="grid grid-cols-2 gap-3">
+                                    <div>
+                                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                                            Ano *
+                                        </label>
+                                        <input
+                                            type="number"
+                                            value={formData.anoFormatura}
+                                            onChange={(e) => setFormData({ ...formData, anoFormatura: parseInt(e.target.value) })}
+                                            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent"
+                                            placeholder="2025"
+                                        />
+                                    </div>
+                                    <div>
+                                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                                            Semestre *
+                                        </label>
+                                        <select
+                                            value={formData.semestre}
+                                            onChange={(e) => setFormData({ ...formData, semestre: parseInt(e.target.value) })}
+                                            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent"
+                                        >
+                                            <option value={1}>1</option>
+                                            <option value={2}>2</option>
+                                        </select>
+                                    </div>
+                                </div>
+
+                                {/* Cursos */}
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                                        Cursos *
+                                    </label>
+                                    <div className="flex gap-2 mb-2">
+                                        <select
+                                            value={cursoInput}
+                                            onChange={(e) => setCursoInput(e.target.value)}
+                                            disabled={loadingApi}
+                                            className="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-brand-gold focus:border-transparent disabled:bg-gray-50 disabled:text-gray-500"
+                                        >
+                                            <option value="">
+                                                {loadingApi ? 'Carregando...' : cursos.length > 0 ? 'Selecione um curso' : 'Nenhum curso disponível'}
+                                            </option>
+                                            {cursos.map((curso) => (
+                                                <option key={curso.id} value={curso.nome}>
+                                                    {curso.nome}
+                                                </option>
+                                            ))}
+                                        </select>
+                                        <button
+                                            type="button"
+                                            onClick={handleAddCurso}
+                                            disabled={!cursoInput}
+                                            className="px-4 py-2 bg-brand-gold text-white rounded-md hover:bg-[#a5bd2e] transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+                                        >
+                                            Adicionar
+                                        </button>
+                                    </div>
+                                    
+                                    {/* Lista de cursos selecionados */}
+                                    <div className="flex flex-wrap gap-2 mt-3">
+                                        {selectedCursos.map((curso, idx) => (
+                                            <span 
+                                                key={idx}
+                                                className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm flex items-center gap-2"
+                                            >
+                                                {curso}
+                                                <button
+                                                    type="button"
+                                                    onClick={() => handleRemoveCurso(curso)}
+                                                    className="hover:text-blue-900"
+                                                >
+                                                    <X size={14} />
+                                                </button>
+                                            </span>
+                                        ))}
+                                    </div>
+                                    {selectedCursos.length === 0 && (
+                                        <p className="text-sm text-gray-500 mt-2">Nenhum curso selecionado</p>
+                                    )}
+                                </div>
+                            </div>
+
+                            {/* Botões */}
+                            <div className="flex gap-3 mt-8">
+                                <button
+                                    onClick={() => {
+                                        setShowAddModal(false);
+                                        setShowEditModal(false);
+                                        setSelectedUniversity(null);
+                                        setSelectedCursos([]);
+                                    }}
+                                    className="flex-1 px-4 py-3 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors font-medium"
+                                >
+                                    Cancelar
+                                </button>
+                                <button
+                                    onClick={handleSaveUniversity}
+                                    className="flex-1 px-4 py-3 bg-brand-gold text-white rounded-md hover:bg-[#a5bd2e] transition-colors font-medium"
+                                >
+                                    {showEditModal ? 'Salvar Alterações' : 'Cadastrar'}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default UniversityManagement;
diff --git a/frontend/pages/UserApproval.tsx b/frontend/pages/UserApproval.tsx
index a448af9..7af2975 100644
--- a/frontend/pages/UserApproval.tsx
+++ b/frontend/pages/UserApproval.tsx
@@ -108,14 +108,14 @@ export const UserApproval: React.FC<UserApprovalProps> = ({ onNavigate }) => {
   ).length;
 
   return (
-    <div className="min-h-screen bg-gray-50 pt-20 pb-8">
+    <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-8">
-          <h1 className="text-3xl font-bold text-gray-900 mb-2">
+        <div className="mb-6 sm:mb-8">
+          <h1 className="text-2xl sm:text-3xl font-serif font-bold text-brand-black">
             Aprovação de Cadastros
           </h1>
-          <p className="text-gray-600">
+          <p className="text-sm sm:text-base text-gray-600 mt-1">
             Gerencie os cadastros pendentes de aprovação
           </p>
         </div>
diff --git a/frontend/public/HOME_01.jpg b/frontend/public/HOME_01.jpg
deleted file mode 100644
index cde0c40..0000000
Binary files a/frontend/public/HOME_01.jpg and /dev/null differ
diff --git a/frontend/public/HOME_14.png b/frontend/public/HOME_14.png
deleted file mode 100644
index b8e1809..0000000
Binary files a/frontend/public/HOME_14.png and /dev/null differ
diff --git a/frontend/public/HOME_15.png b/frontend/public/HOME_15.png
deleted file mode 100644
index fa2e85b..0000000
Binary files a/frontend/public/HOME_15.png and /dev/null differ
diff --git a/frontend/public/HOME_16.png b/frontend/public/HOME_16.png
deleted file mode 100644
index a7fd4de..0000000
Binary files a/frontend/public/HOME_16.png and /dev/null differ
diff --git a/frontend/public/HOME_17 (1).png b/frontend/public/HOME_17 (1).png
deleted file mode 100644
index 42c6d8b..0000000
Binary files a/frontend/public/HOME_17 (1).png and /dev/null differ
diff --git a/frontend/public/HOME_17.png b/frontend/public/HOME_17.png
deleted file mode 100644
index 42c6d8b..0000000
Binary files a/frontend/public/HOME_17.png and /dev/null differ
diff --git a/frontend/public/faviconlogo.ico b/frontend/public/faviconlogo.ico
new file mode 100644
index 0000000..398f1ff
Binary files /dev/null and b/frontend/public/faviconlogo.ico differ
diff --git a/frontend/public/faviconlogo.png b/frontend/public/faviconlogo.png
new file mode 100644
index 0000000..5f70e00
Binary files /dev/null and b/frontend/public/faviconlogo.png differ
diff --git a/frontend/public/logofav.ico b/frontend/public/logofav.ico
new file mode 100644
index 0000000..3c8e53e
Binary files /dev/null and b/frontend/public/logofav.ico differ