diff --git a/resources/css/app.css b/resources/css/app.css
index 6c76cc4..2a2769d 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -25,29 +25,81 @@ @layer components {
 
     /* Header - Navbar */
     .nav-bar {
-        @apply flex flex-nowrap justify-center items-center mx-auto px-4 sm:px-6 lg:px-8 h-10 w-screen;
+        @apply flex flex-nowrap justify-center items-center mx-auto px-4 sm:px-6 lg:px-8 h-10;
+        @apply relative;
         /* Colors */
         @apply bg-white text-black;
         /* Border */
         @apply border-b border-white shadow-md shadow-blue-400;
     }
 
-    .nav-bar a:hover,
-    .nav-bar a {
+    .nav-bar>.navbar-items>a:hover,
+    .nav-bar>.navbar-items>a {
         @apply transition-all duration-300 transform hover:scale-105;
         @apply mr-7;
         @apply hover:border hover:shadow-md shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform hover:scale-105;
     }
 
     .nav-bar-logo {
-        @apply absolute left-0;
-        /* Garantir que o container da logo seja posicionado corretamente */
-        max-width: 8%;
         /* Garante que a largura não ultrapasse 100% */
+        @apply rounded-md max-w-25 mr-10;
         height: auto;
         /* Altura proporcional à largura */
     }
 
+    .navbar-items {
+        @apply flex flex-nowrap justify-center items-center px-4 sm:px-6 lg:px-8 h-10;
+    }
+
+    .profile-menu {
+        @apply absolute right-5;
+    }
+
+    .profile-list-items {
+        /* 1. Posicionamento (Correto) */
+        @apply absolute top-full right-0 ml-4;
+
+        @apply block w-full;
+        /* Adicionei mt-2 para descolar do ícone */
+
+        /* 2. Largura Fixa (Mais limpo) */
+        @apply w-56;
+
+        /* 3. Estilos do Contêiner (Profissional) */
+        @apply bg-white p-2 rounded-md shadow-xl;
+        /* Sombra mais forte */
+        @apply border border-gray-200;
+
+        /* 4. Divisórias Sutis entre os <li> */
+        @apply divide-y divide-gray-100;
+    }
+
+    .profile-link {
+        /* Você pode aplicar isso direto no <a> */
+        /* 1. FAZ O LINK PREENCHER O <li> */
+        @apply block w-full;
+
+    }
+
+    .profile-items {
+        /* 1. Limpeza (Classes antigas removidas) */
+
+        /* 2. Espaçamento Interno (Respiro) */
+        @apply px-4 py-2;
+
+        /* 3. Estilos de Texto */
+        @apply text-sm text-gray-700;
+
+        /* 4. Interatividade */
+        @apply hover:bg-blue-100 cursor-pointer;
+
+        /* 5. Transição Suave */
+        @apply transition-colors duration-150 ease-in-out;
+
+        /* 6. Cantos do Hover */
+        @apply rounded-md;
+    }
+
     .nav-bar-logo img {
         @apply w-full;
         /* Largura 100% para se ajustar ao container */
@@ -55,8 +107,7 @@ @layer components {
         /* Mantém a proporção original da imagem */
     }
 
-    .nav-bar>form>button {
-        @apply mr-7;
+    .nav-bar>.navbar-items>form>button {
         @apply hover:border hover:shadow-md hover:scale-105 hover:cursor-pointer shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform;
     }