diff --git a/src/components/layouts/MainLayout.tsx b/src/components/layouts/MainLayout.tsx
index ca49ec8..40db3c2 100644
--- a/src/components/layouts/MainLayout.tsx
+++ b/src/components/layouts/MainLayout.tsx
@@ -126,7 +126,7 @@ export const MainLayout: React.FC = () => {
         {/* Menu de navegação vertical com scroll */}
         <nav className="flex-1 overflow-y-auto">
           <div className="py-4">
-            {menuItems.map((item) => (
+            {menuItems.map((item, index) => (
               <div key={item.path || item.label} className="px-2 mb-2">
                 {!item.subitems ? (
                   <Link
@@ -144,39 +144,46 @@ export const MainLayout: React.FC = () => {
                 ) : (
                   <div className="relative group">
                     <div
-                      className="flex flex-col items-center justify-center p-3 rounded-lg transition-colors hover:bg-white/10 cursor-pointer"
+                      className={`flex flex-col items-center justify-center p-3 rounded-lg transition-colors hover:bg-white/10 cursor-pointer ${
+                        item.subitems.some(subitem => isCurrentPath(subitem.path))
+                          ? "bg-white/20"
+                          : ""
+                      }`}
                       title={item.label}
                     >
                       <item.icon className="h-6 w-6 text-white opacity-80" />
                       <span className="text-xs mt-1 text-white/80">{item.label}</span>
                     </div>
 
-                    {/* Submenu reposicionado */}
+                    {/* Submenu corrigido - posicionado fora da sidebar como pop-up */}
                     <div 
-                      className="fixed z-50"
-                      style={{
-                        left: '5rem', // w-20 = 80px
-                        top: '50%',
-                        transform: 'translateY(-50%)'
-                      }}
+                      className="fixed left-20 z-50" 
+                      style={{ 
+                        top: 'var(--submenu-top)', 
+                        '--submenu-top': `${index * 70 + 100}px` 
+                      } as React.CSSProperties}
                     >
                       <div className="opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
-                        <div className="bg-blue-800/95 backdrop-blur-sm rounded-lg py-2 px-1 shadow-xl w-[100px] ml-2">
-                          {item.subitems.filter(subitem => 
-                            !subitem.roles.length || 
-                            (userProfile?.perfil && subitem.roles.includes(userProfile.perfil))
-                          ).map((subitem) => (
-                            <Link
-                              key={subitem.path}
-                              to={subitem.path}
-                              className="block px-3 py-2 hover:bg-white/10 rounded-lg transition-colors"
-                            >
-                              <div className="flex flex-col items-center justify-center">
-                                <subitem.icon className="h-6 w-6 text-white opacity-80" />
-                                <span className="text-xs mt-1 text-white/80">{subitem.label}</span>
-                              </div>
-                            </Link>
-                          ))}
+                        <div className="bg-blue-800/95 backdrop-blur-sm rounded-lg py-2 px-1 shadow-xl w-[140px] border border-blue-700/30">
+                          {item.subitems
+                            .filter(subitem => 
+                              !subitem.roles?.length || 
+                              (userProfile?.perfil && subitem.roles.includes(userProfile.perfil))
+                            )
+                            .map((subitem) => (
+                              <Link
+                                key={subitem.path}
+                                to={subitem.path}
+                                className={`block px-3 py-2 hover:bg-blue-700/50 rounded-lg transition-colors ${
+                                  isCurrentPath(subitem.path) ? "bg-blue-700/70" : ""
+                                }`}
+                              >
+                                <div className="flex items-center space-x-2">
+                                  <subitem.icon className="h-5 w-5 text-white opacity-80" />
+                                  <span className="text-sm text-white/90">{subitem.label}</span>
+                                </div>
+                              </Link>
+                            ))}
                         </div>
                       </div>
                     </div>
@@ -186,7 +193,6 @@ export const MainLayout: React.FC = () => {
             ))}
           </div>
         </nav>
-
       </div>
 
       {/* Main Content */}
diff --git a/vite.config.ts b/vite.config.ts
index 1dfbcd7..05eefe2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,7 @@ export default defineConfig({
   plugins: [react()],
   server: {
     port: 3000,
+    host: true,
     allowedHosts: [
       'localhost',
       '127.0.0.1',
@@ -13,11 +14,18 @@ export default defineConfig({
     ],
     proxy: {
       '/api': {
-        target: 'https://advx.martinsevieira.adv.br:5000',
+        target: 'http://localhost:5000',
         changeOrigin: true,
-        secure: true,
+        secure: false,
       }
     },
+    hmr: {
+      // Configuração do HMR
+      host: 'advx.martinsevieira.adv.br',
+      protocol: 'wss',
+      clientPort: 443,
+      overlay: true
+    },
   },
   css: {
     postcss: {