From ef89ac5f613b9db29a6901825c49742e14dc7a58 Mon Sep 17 00:00:00 2001
From: Danielle Costa <d.mariano.costa@gmail.com>
Date: Fri, 29 May 2026 03:22:39 -0300
Subject: [PATCH 1/2] feat(ui): redesign login page and unify admin branding
 identity

---
 .../views/components/base/logo.blade.php      |   7 +
 .../src/PanelAdminServiceProvider.php         |   6 +-
 .../resources/views/auth/login.blade.php      | 226 ++++++++++--------
 app-modules/panel-app/src/Pages/LoginPage.php |  31 +++
 app/Filament/Pages/Login.php                  |  46 ++++
 app/Providers/Filament/AdminPanelProvider.php |   4 +
 app/Providers/Filament/AppPanelProvider.php   |   2 +-
 resources/css/filament/admin/theme.css        |  60 ++++-
 resources/css/filament/app/theme.css          |  36 +--
 9 files changed, 285 insertions(+), 133 deletions(-)
 create mode 100644 app-modules/he4rt/resources/views/components/base/logo.blade.php

diff --git a/app-modules/he4rt/resources/views/components/base/logo.blade.php b/app-modules/he4rt/resources/views/components/base/logo.blade.php
new file mode 100644
index 000000000..cf81318ba
--- /dev/null
+++ b/app-modules/he4rt/resources/views/components/base/logo.blade.php
@@ -0,0 +1,7 @@
+<div class="flex items-center gap-3 py-1">
+    <img src="{{ asset('images/logo.svg') }}" alt="He4rt Developers" class="h-8 w-auto dark:invert" />
+    <div class="flex flex-col leading-none">
+        <span class="text-sm font-black tracking-tight text-zinc-950 dark:text-white uppercase">He4rt</span>
+        <span class="text-[10px] font-bold text-purple-600 uppercase tracking-widest">Developers</span>
+    </div>
+</div>
diff --git a/app-modules/panel-admin/src/PanelAdminServiceProvider.php b/app-modules/panel-admin/src/PanelAdminServiceProvider.php
index a8ff60d69..eb9e08010 100644
--- a/app-modules/panel-admin/src/PanelAdminServiceProvider.php
+++ b/app-modules/panel-admin/src/PanelAdminServiceProvider.php
@@ -113,7 +113,7 @@ private function moderationNavigation(NavigationBuilder $builder): NavigationBui
             NavigationItem::make(__('panel-admin::moderation.navigation.back_to_admin'))
                 ->sort(0)
                 ->icon('heroicon-o-arrow-left')
-                ->url(Dashboard::getUrl()),
+                ->url(Dashboard::getUrl(['tenant' => filament()->getTenant()])),
 
         ])->groups(resolve(ModerationCluster::class)->getCachedSubNavigation());
     }
@@ -124,7 +124,7 @@ private function marketingNavigation(NavigationBuilder $builder): NavigationBuil
             NavigationItem::make(__('panel-admin::marketing.navigation.back_to_admin'))
                 ->sort(0)
                 ->icon('heroicon-o-arrow-left')
-                ->url(Dashboard::getUrl()),
+                ->url(Dashboard::getUrl(['tenant' => filament()->getTenant()])),
 
         ])->groups(resolve(MarketingCluster::class)->getCachedSubNavigation());
     }
@@ -135,7 +135,7 @@ private function twitchNavigation(NavigationBuilder $builder): NavigationBuilder
             NavigationItem::make(__('panel-admin::twitch.navigation.back_to_admin'))
                 ->sort(0)
                 ->icon('heroicon-o-arrow-left')
-                ->url(Dashboard::getUrl()),
+                ->url(Dashboard::getUrl(['tenant' => filament()->getTenant()])),
 
         ])->groups(resolve(TwitchCluster::class)->getCachedSubNavigation());
     }
diff --git a/app-modules/panel-app/resources/views/auth/login.blade.php b/app-modules/panel-app/resources/views/auth/login.blade.php
index 67b2fdb93..1ef8be5ea 100644
--- a/app-modules/panel-app/resources/views/auth/login.blade.php
+++ b/app-modules/panel-app/resources/views/auth/login.blade.php
@@ -1,124 +1,140 @@
-<x-filament-panels::page.simple>
-    <div class="fi-login-split flex min-h-dvh">
-        {{-- Left: Brand panel --}}
+<div class="fi-login-split flex min-h-dvh w-full overflow-hidden bg-zinc-950">
+    {{-- Left: Brand panel --}}
+    <div
+        class="relative hidden w-[480px] shrink-0 overflow-hidden lg:flex lg:flex-col lg:items-center lg:justify-center"
+        style="background: linear-gradient(165deg, #782bf1 0%, #3b1578 45%, #18181b 100%)"
+    >
+        {{-- Glow accents --}}
         <div
-            class="relative hidden w-[480px] shrink-0 overflow-hidden lg:flex lg:flex-col lg:items-center lg:justify-center"
-            style="background: linear-gradient(165deg, #782bf1 0%, #3b1578 45%, #18181b 100%)"
-        >
-            {{-- Glow accents --}}
-            <div
-                class="absolute top-0 right-0 h-64 w-64 rounded-full blur-3xl"
-                style="background: #9b59f5; animation: login-pulse-glow 4s ease-in-out infinite"
-            ></div>
-            <div
-                class="absolute bottom-0 left-0 h-48 w-48 rounded-full blur-3xl"
-                style="background: #782bf1; animation: login-pulse-glow 4s ease-in-out infinite 2s"
-            ></div>
+            class="absolute top-0 right-0 h-64 w-64 rounded-full blur-3xl"
+            style="background: #9b59f5; animation: login-pulse-glow 4s ease-in-out infinite"
+        ></div>
+        <div
+            class="absolute bottom-0 left-0 h-48 w-48 rounded-full blur-3xl"
+            style="background: #782bf1; animation: login-pulse-glow 4s ease-in-out infinite 2s"
+        ></div>
+
+        {{-- Landing logo as background watermark --}}
+        <div class="absolute inset-0 flex items-center justify-center opacity-[0.06]">
+            <img src="{{ asset('images/landingLogo.svg') }}" alt="" class="h-[420px] w-auto" aria-hidden="true" />
+        </div>
 
-            {{-- Landing logo as background watermark --}}
-            <div class="absolute inset-0 flex items-center justify-center opacity-[0.06]">
-                <img src="{{ asset('images/landingLogo.svg') }}" alt="" class="h-[420px] w-auto" aria-hidden="true" />
+        {{-- Content --}}
+        <div class="relative z-10 flex flex-col items-center px-12 text-center">
+            <div class="animate-heartbeat">
+                <svg
+                    class="mb-8 h-32 w-auto drop-shadow-[0_0_35px_rgba(120,43,241,0.5)]"
+                    viewBox="0 0 600 513"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        d="M445.237 0.00033551C424.91 -0.0347431 404.777 3.89304 385.996 11.5576C367.216 19.2221 350.159 30.4719 335.808 44.6594L153.391 224.398L116.915 188.45C111.983 183.761 108.048 178.15 105.341 171.946C102.633 165.741 101.207 159.067 101.145 152.314C101.084 145.56 102.388 138.862 104.983 132.611C107.577 126.359 111.409 120.68 116.255 115.904C121.101 111.128 126.864 107.352 133.207 104.795C139.55 102.239 146.347 100.953 153.2 101.014C160.052 101.074 166.825 102.48 173.12 105.148C179.416 107.816 185.109 111.694 189.867 116.555L262.856 44.6594C233.71 16.6424 194.537 1.07109 153.824 1.31914C113.11 1.56719 74.1349 17.6146 45.3431 45.9846C16.5513 74.3546 0.261527 112.762 0.0031216 152.886C-0.255283 193.01 15.5385 231.618 43.9626 260.346L153.391 368.189L511.948 14.8274C491.12 5.01981 468.32 -0.0474973 445.237 0.00033551Z"
+                        fill="white"
+                    />
+                    <path
+                        d="M584.9 86.7579L445.237 224.433L408.76 188.45L335.808 260.345L372.284 296.293L226.379 440.084L299.332 512.015L554.665 260.381C577.296 238.07 592.355 209.395 597.769 178.303C603.183 147.21 598.687 115.228 584.9 86.7579Z"
+                        fill="white"
+                    />
+                </svg>
             </div>
 
-            {{-- Content --}}
-            <div class="relative z-10 flex flex-col items-center px-12">
-                <div style="animation: login-float 6s ease-in-out infinite">
-                    <svg
-                        class="mb-8 h-32 w-auto drop-shadow-2xl"
-                        viewBox="0 0 600 513"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <path
-                            d="M445.237 0.00033551C424.91 -0.0347431 404.777 3.89304 385.996 11.5576C367.216 19.2221 350.159 30.4719 335.808 44.6594L153.391 224.398L116.915 188.45C111.983 183.761 108.048 178.15 105.341 171.946C102.633 165.741 101.207 159.067 101.145 152.314C101.084 145.56 102.388 138.862 104.983 132.611C107.577 126.359 111.409 120.68 116.255 115.904C121.101 111.128 126.864 107.352 133.207 104.795C139.55 102.239 146.347 100.953 153.2 101.014C160.052 101.074 166.825 102.48 173.12 105.148C179.416 107.816 185.109 111.694 189.867 116.555L262.856 44.6594C233.71 16.6424 194.537 1.07109 153.824 1.31914C113.11 1.56719 74.1349 17.6146 45.3431 45.9846C16.5513 74.3546 0.261527 112.762 0.0031216 152.886C-0.255283 193.01 15.5385 231.618 43.9626 260.346L153.391 368.189L511.948 14.8274C491.12 5.01981 468.32 -0.0474973 445.237 0.00033551Z"
-                            fill="white"
-                        />
-                        <path
-                            d="M584.9 86.7579L445.237 224.433L408.76 188.45L335.808 260.345L372.284 296.293L226.379 440.084L299.332 512.015L554.665 260.381C577.296 238.07 592.355 209.395 597.769 178.303C603.183 147.21 598.687 115.228 584.9 86.7579Z"
-                            fill="white"
-                        />
-                    </svg>
-                </div>
+            <h1 class="mb-2 text-2xl font-bold tracking-tight text-white">He4rt Developers</h1>
+            <p class="text-sm leading-relaxed text-white/60">Comunidade brasileira de desenvolvedores.<br />
+            Aprenda, compartilhe e cresça.</p>
+        </div>
 
-                <h1 class="mb-2 text-2xl font-bold tracking-tight text-white">He4rt Developers</h1>
-                <p class="text-center text-sm leading-relaxed text-white/60">Comunidade brasileira de desenvolvedores.<br />
-                Aprenda, compartilhe e cresça.</p>
+        <div
+            class="absolute right-0 bottom-0 left-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent"
+        ></div>
+    </div>
 
-                <div class="mt-10 flex gap-8">
-                    <div class="text-center">
-                        <div class="text-xl font-bold text-white">5k+</div>
-                        <div class="text-xs text-white/40">membros</div>
-                    </div>
-                    <div class="text-center">
-                        <div class="text-xl font-bold text-white">200+</div>
-                        <div class="text-xs text-white/40">eventos</div>
-                    </div>
-                    <div class="text-center">
-                        <div class="text-xl font-bold text-white">50+</div>
-                        <div class="text-xs text-white/40">projetos</div>
-                    </div>
-                </div>
-            </div>
+    {{-- Right: Login form --}}
+    <div class="relative flex flex-1 items-center justify-center p-8 lg:p-12">
+        {{-- Background subtle glow for depth --}}
+        <div class="absolute top-1/2 left-1/2 h-[600px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-purple-600/5 blur-[120px]"></div>
 
-            <div
-                class="absolute right-0 bottom-0 left-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent"
-            ></div>
-        </div>
+        <div class="relative z-10 w-full max-w-sm">
+            {{-- Mobile logo --}}
+            <div class="mb-10 flex items-center justify-center lg:hidden">
+                <img
+                    src="{{ asset('images/logo.svg') }}"
+                    alt="He4rt Developers"
+                    class="h-14 w-auto animate-pulse"
+                />
+            </div>
 
-        {{-- Right: Login form --}}
-        <div class="flex flex-1 items-center justify-center p-8">
-            <div class="w-full max-w-sm">
-                {{-- Mobile logo --}}
-                <div class="mb-8 flex items-center justify-center lg:hidden">
-                    <img
-                        src="{{ asset('images/logo.svg') }}"
-                        alt="He4rt Developers"
-                        class="h-12 w-auto text-purple-500"
-                    />
-                </div>
+            <div class="mb-10">
+                <h2 class="text-3xl font-bold tracking-tight text-white">Entrar</h2>
+                <p class="mt-3 text-zinc-400">Acesse sua conta He4rt Developers</p>
+            </div>
 
-                <h2 class="mb-1 text-xl font-semibold text-white">Entrar</h2>
-                <p class="mb-6 text-sm text-zinc-400">Acesse sua conta He4rt Developers</p>
+            {{-- OAuth --}}
+            <div class="grid gap-4">
+                <a
+                    href="{{ route('oauth.redirect', ['tenant' => request()->getHost(), 'panel' => $panelId, 'provider' => 'discord']) }}"
+                    class="group flex items-center justify-center gap-3 rounded-xl bg-[#5865F2] px-4 py-3.5 text-sm font-bold text-white shadow-lg shadow-purple-900/10 transition-all hover:scale-[1.02] hover:bg-[#4752C4] active:scale-[0.98]"
+                >
+                    @svg ('fab-discord', 'h-5 w-5 transition-transform group-hover:rotate-12')
+                    Continuar com Discord
+                </a>
 
-                {{-- OAuth --}}
-                <div class="grid gap-2.5">
-                    <a
-                        href="{{ route('oauth.redirect', ['tenant' => request()->getHost(), 'panel' => 'app', 'provider' => 'discord']) }}"
-                        class="flex items-center justify-center gap-2.5 rounded-lg bg-[#5865F2] px-4 py-2.5 text-sm font-medium text-white transition hover:bg-[#4752C4]"
-                    >
-                        @svg ('fab-discord', 'h-5 w-5')
-                        Continuar com Discord
-                    </a>
+                <a
+                    href="{{ route('oauth.redirect', ['tenant' => request()->getHost(), 'panel' => $panelId, 'provider' => 'github']) }}"
+                    class="group flex items-center justify-center gap-3 rounded-xl bg-zinc-900 px-4 py-3.5 text-sm font-bold text-white shadow-lg ring-1 ring-zinc-800 transition-all hover:scale-[1.02] hover:bg-zinc-800 active:scale-[0.98]"
+                >
+                    @svg ('fab-github', 'h-5 w-5 transition-transform group-hover:scale-110')
+                    Continuar com GitHub
+                </a>
 
-                    <a
-                        href="{{ route('oauth.redirect', ['tenant' => request()->getHost(), 'panel' => 'app', 'provider' => 'github']) }}"
-                        class="flex items-center justify-center gap-2.5 rounded-lg bg-zinc-800 px-4 py-2.5 text-sm font-medium text-white ring-1 ring-zinc-700 transition hover:bg-zinc-700"
-                    >
-                        @svg ('fab-github', 'h-5 w-5')
-                        Continuar com GitHub
-                    </a>
+                <a
+                    href="{{ route('oauth.redirect', ['tenant' => request()->getHost(), 'panel' => $panelId, 'provider' => 'twitch']) }}"
+                    class="group flex items-center justify-center gap-3 rounded-xl bg-[#9146FF] px-4 py-3.5 text-sm font-bold text-white shadow-lg shadow-purple-900/10 transition-all hover:scale-[1.02] hover:bg-[#7B2FF0] active:scale-[0.98]"
+                >
+                    @svg ('fab-twitch', 'h-5 w-5 transition-transform group-hover:-rotate-12')
+                    Continuar com Twitch
+                </a>
+            </div>
 
-                    <a
-                        href="{{ route('oauth.redirect', ['tenant' => request()->getHost(), 'panel' => 'app', 'provider' => 'twitch']) }}"
-                        class="flex items-center justify-center gap-2.5 rounded-lg bg-[#9146FF] px-4 py-2.5 text-sm font-medium text-white transition hover:bg-[#7B2FF0]"
-                    >
-                        @svg ('fab-twitch', 'h-5 w-5')
-                        Continuar com Twitch
-                    </a>
+            {{-- Divider --}}
+            <div class="relative my-10">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-zinc-800/60"></div>
+                </div>
+                <div class="relative flex justify-center text-[10px] font-black uppercase tracking-[0.2em]">
+                    <span class="bg-zinc-950 px-6 text-zinc-400">ou e-mail</span>
                 </div>
+            </div>
 
-                {{-- Divider --}}
-                <div class="relative my-6">
-                    <div class="absolute inset-0 flex items-center">
-                        <div class="w-full border-t border-zinc-800"></div>
-                    </div>
-                    <div class="relative flex justify-center text-xs uppercase">
-                        <span class="bg-gray-950 px-3 text-zinc-500">ou</span>
-                    </div>
+            {{-- Filament email/password form --}}
+            <div class="fi-login-form animate-in fade-in slide-in-from-bottom-6 duration-1000">
+                <div class="[&_label]:text-white [&_span]:text-white [&_a]:text-purple-400">
+                    {{ $this->form }}
                 </div>
 
-                {{-- Filament email/password form --}}
-                {{ $this->content }}
+                <div class="mt-8">
+                    @php
+                        $action = $this->getAuthenticateFormAction();
+                    @endphp
+                    
+                    <button
+                        type="submit"
+                        wire:click="authenticate"
+                        wire:loading.attr="disabled"
+                        class="w-full rounded-xl bg-purple-600 px-4 py-3.5 text-sm font-bold text-white shadow-lg shadow-purple-900/20 transition-all hover:scale-[1.02] hover:bg-purple-500 active:scale-[0.98] disabled:opacity-70 disabled:cursor-not-allowed"
+                    >
+                        <span wire:loading.remove wire:target="authenticate">
+                            {{ $action->getLabel() }}
+                        </span>
+                        <span wire:loading wire:target="authenticate" class="flex items-center justify-center gap-2">
+                            <svg class="h-5 w-5 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="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>
+                            Entrando...
+                        </span>
+                    </button>
+                </div>
             </div>
         </div>
     </div>
-</x-filament-panels::page.simple>
+</div>
diff --git a/app-modules/panel-app/src/Pages/LoginPage.php b/app-modules/panel-app/src/Pages/LoginPage.php
index 8c8203579..13ef45e28 100644
--- a/app-modules/panel-app/src/Pages/LoginPage.php
+++ b/app-modules/panel-app/src/Pages/LoginPage.php
@@ -12,6 +12,8 @@ class LoginPage extends Login
 {
     protected string $view = 'panel-app::auth.login';
 
+    protected static string $layout = 'filament-panels::components.layout.base';
+
     public function mount(): void
     {
         parent::mount();
@@ -24,6 +26,13 @@ public function mount(): void
         }
     }
 
+    protected function getViewData(): array
+    {
+        return [
+            'panelId' => 'app',
+        ];
+    }
+
     public function getMaxWidth(): Width|string|null
     {
         return Width::Full;
@@ -43,4 +52,26 @@ public function getSubHeading(): string|Htmlable|null
     {
         return null;
     }
+
+    protected function getAuthenticateFormAction(): \Filament\Actions\Action
+    {
+        return parent::getAuthenticateFormAction()
+            ->label('Entrar na conta')
+            ->color('primary')
+            ->size('lg')
+            ->extraAttributes([
+                'class' => 'w-full rounded-xl shadow-lg shadow-purple-900/20 transition-all hover:scale-[1.02] active:scale-[0.98]',
+            ]);
+    }
+
+    public function form(\Filament\Schemas\Schema $form): \Filament\Schemas\Schema
+    {
+        return $form
+            ->components([
+                $this->getEmailFormComponent()->label('E-mail'),
+                $this->getPasswordFormComponent()->label('Senha'),
+                $this->getRememberFormComponent()->label('Lembrar de mim'),
+            ])
+            ->statePath('data');
+    }
 }
diff --git a/app/Filament/Pages/Login.php b/app/Filament/Pages/Login.php
index 6dae45c04..ead404147 100644
--- a/app/Filament/Pages/Login.php
+++ b/app/Filament/Pages/Login.php
@@ -4,8 +4,15 @@
 
 namespace App\Filament\Pages;
 
+use Filament\Actions\Action;
+use Illuminate\Contracts\Support\Htmlable;
+
 class Login extends \Filament\Auth\Pages\Login
 {
+    protected string $view = 'panel-app::auth.login';
+
+    protected static string $layout = 'filament-panels::components.layout.base';
+
     public function mount(): void
     {
         parent::mount();
@@ -17,4 +24,43 @@ public function mount(): void
             ]);
         }
     }
+
+    public function getHeading(): string|Htmlable|null
+    {
+        return null;
+    }
+
+    public function getSubHeading(): string|Htmlable|null
+    {
+        return null;
+    }
+
+    protected function getAuthenticateFormAction(): Action
+    {
+        return parent::getAuthenticateFormAction()
+            ->label('Entrar no Admin')
+            ->color('primary')
+            ->size('lg')
+            ->extraAttributes([
+                'class' => 'w-full rounded-xl shadow-lg shadow-purple-900/20 transition-all hover:scale-[1.02] active:scale-[0.98]',
+            ]);
+    }
+
+    protected function getViewData(): array
+    {
+        return [
+            'panelId' => 'admin',
+        ];
+    }
+
+    public function form(\Filament\Schemas\Schema $form): \Filament\Schemas\Schema
+    {
+        return $form
+            ->components([
+                $this->getEmailFormComponent()->label('E-mail'),
+                $this->getPasswordFormComponent()->label('Senha'),
+                $this->getRememberFormComponent()->label('Lembrar de mim'),
+            ])
+            ->statePath('data');
+    }
 }
diff --git a/app/Providers/Filament/AdminPanelProvider.php b/app/Providers/Filament/AdminPanelProvider.php
index 97dab652a..713e4a967 100644
--- a/app/Providers/Filament/AdminPanelProvider.php
+++ b/app/Providers/Filament/AdminPanelProvider.php
@@ -32,6 +32,9 @@ public function panel(Panel $panel): Panel
             ->id('admin')
             ->path('admin')
             ->login(Login::class)
+            ->brandName('He4rt Admin')
+            ->brandLogo(fn () => view('he4rt::components.base.logo'))
+            ->brandLogoHeight('2.5rem')
             ->colors(function (): array {
                 $colors = Color::all();
 
@@ -44,6 +47,7 @@ public function panel(Panel $panel): Panel
                 ];
             })
             ->sidebarCollapsibleOnDesktop()
+            ->tenantMenu(false)
             ->tenant(Tenant::class, slugAttribute: 'slug')
             ->tenantProfile(EditTenantProfilePage::class)
             ->viteTheme('resources/css/filament/admin/theme.css')
diff --git a/app/Providers/Filament/AppPanelProvider.php b/app/Providers/Filament/AppPanelProvider.php
index a11c6adaf..9079c1c85 100644
--- a/app/Providers/Filament/AppPanelProvider.php
+++ b/app/Providers/Filament/AppPanelProvider.php
@@ -31,10 +31,10 @@ class AppPanelProvider extends PanelProvider
     public function panel(Panel $panel): Panel
     {
         $panel
+            ->default()
             ->id($this->panelId->value)
             ->path($this->panelId->value)
             ->login(LoginPage::class)
-            ->topbar(false)
             ->colors([
                 'primary' => Color::Purple,
                 'gray' => Color::Zinc,
diff --git a/resources/css/filament/admin/theme.css b/resources/css/filament/admin/theme.css
index 6b2c0eb56..726e5409d 100644
--- a/resources/css/filament/admin/theme.css
+++ b/resources/css/filament/admin/theme.css
@@ -6,6 +6,64 @@
 @source '../../../../app-modules/**/resources/**/*';
 @source '../../../../app-modules/**/src/**/*';
 
+:root {
+    --sidebar-width: 280px;
+}
+
+/* Sidebar Modern Aesthetics */
 .fi-sidebar {
-    @apply bg-gray-100 dark:bg-gray-900;
+    @apply bg-white dark:bg-zinc-950 border-r border-zinc-200 dark:border-white/5 shadow-xl transition-all duration-300;
+}
+
+.fi-sidebar-header {
+    @apply py-6 border-b border-zinc-200 dark:border-white/5;
+}
+
+.fi-sidebar-nav {
+    @apply px-4 py-6;
+}
+
+.fi-sidebar-item-button {
+    @apply rounded-xl transition-all duration-200 py-2.5 px-4 !important;
+}
+
+.fi-sidebar-item-button:hover {
+    @apply bg-zinc-100 dark:bg-white/5 !important;
+}
+
+.fi-sidebar-item-active .fi-sidebar-item-button {
+    @apply bg-purple-500/10 text-purple-600 dark:text-purple-400 ring-1 ring-purple-500/20 shadow-lg shadow-purple-900/10 !important;
+}
+
+/* Topbar & Dropdowns */
+.fi-topbar {
+    @apply bg-white/80 dark:bg-zinc-950/80 backdrop-blur-xl border-b border-zinc-200 dark:border-white/5 sticky top-0 z-30 shadow-sm;
+}
+
+.fi-dropdown-panel {
+    @apply bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 shadow-2xl rounded-2xl backdrop-blur-xl z-50 !important;
+}
+
+/* Page Spacing */
+.fi-main {
+    @apply p-8 lg:p-12;
+}
+
+/* Animations from Login (reused) */
+@keyframes login-float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-12px); }
+}
+
+@keyframes heartbeat {
+    0% { transform: scale(1); }
+    10% { transform: scale(1.05); }
+    20% { transform: scale(1); }
+    30% { transform: scale(1.05); }
+    40% { transform: scale(1); }
+    100% { transform: scale(1); }
+}
+
+.animate-heartbeat {
+    animation: heartbeat 3s ease-in-out infinite;
 }
diff --git a/resources/css/filament/app/theme.css b/resources/css/filament/app/theme.css
index 8bc6c0311..0280ccb88 100644
--- a/resources/css/filament/app/theme.css
+++ b/resources/css/filament/app/theme.css
@@ -1,33 +1,10 @@
 @import '../../../../vendor/filament/filament/resources/css/theme.css';
 
-@source '../../../../app/Filament/**/*';
 @source '../../../../app/Filament/**/*';
 @source '../../../../resources/views/**/*';
 @source '../../../../app-modules/**/src/Filament/**/*';
 @source '../../../../app-modules/**/resources/views/**/*';
 
-/* Login split layout — strip Filament's card wrapper */
-.fi-simple-layout:has(.fi-login-split) {
-    .fi-simple-main-ctn {
-        align-items: stretch;
-    }
-
-    .fi-simple-main {
-        margin: 0;
-        padding: 0;
-        max-width: none;
-        background: transparent;
-        box-shadow: none;
-        border-radius: 0;
-        --tw-ring-shadow: 0 0 #0000;
-    }
-
-    .fi-simple-page,
-    .fi-simple-page-content {
-        display: contents;
-    }
-}
-
 @keyframes login-float {
     0%,
     100% {
@@ -47,3 +24,16 @@
         opacity: 0.35;
     }
 }
+
+@keyframes heartbeat {
+    0% { transform: scale(1); }
+    10% { transform: scale(1.05); }
+    20% { transform: scale(1); }
+    30% { transform: scale(1.05); }
+    40% { transform: scale(1); }
+    100% { transform: scale(1); }
+}
+
+.animate-heartbeat {
+    animation: heartbeat 3s ease-in-out infinite;
+}

From d96fb69dd78416a74ad3d5188ac8a329f25282ac Mon Sep 17 00:00:00 2001
From: Danielle Costa <d.mariano.costa@gmail.com>
Date: Tue, 2 Jun 2026 20:43:33 -0300
Subject: [PATCH 2/2] feat: enhance mobile login and admin topbar UI

---
 .../src/Message/Actions/NewMessage.php        |   1 +
 .../src/Message/DTOs/NewMessageDTO.php        |   4 +-
 .../src/Events/MessageReceivedEvent.php       |   5 +-
 .../Actions/ResolveExternalIdentity.php       |  21 +++-
 .../src/IntegrationDiscordServiceProvider.php |   2 +
 .../Console/SyncDiscordHistoryCommand.php     |  96 +++++++++++++++
 .../ExternalIdentityResource.php              |   4 +
 .../src/Http/Middleware/SetProviderScope.php  |  30 +++++
 .../Marketing/Pages/MeetingShowcasePage.php   |  20 +++-
 .../resources/views/auth/login.blade.php      |  78 ++++++++----
 app/Providers/Filament/AdminPanelProvider.php |  11 +-
 resources/css/filament/admin/theme.css        |  98 +++++++++++----
 .../filament/admin/components/brand.blade.php |   7 ++
 .../admin/components/topbar-content.blade.php |  44 +++++++
 .../components/topbar-tenant-menu.blade.php   | 112 ++++++++++++++++++
 15 files changed, 473 insertions(+), 60 deletions(-)
 create mode 100644 app-modules/integration-discord/src/Sync/Console/SyncDiscordHistoryCommand.php
 create mode 100644 app-modules/panel-admin/src/Http/Middleware/SetProviderScope.php
 create mode 100644 resources/views/filament/admin/components/brand.blade.php
 create mode 100644 resources/views/filament/admin/components/topbar-content.blade.php
 create mode 100644 resources/views/filament/admin/components/topbar-tenant-menu.blade.php

diff --git a/app-modules/activity/src/Message/Actions/NewMessage.php b/app-modules/activity/src/Message/Actions/NewMessage.php
index 37bf09e7b..8bfec2c98 100644
--- a/app-modules/activity/src/Message/Actions/NewMessage.php
+++ b/app-modules/activity/src/Message/Actions/NewMessage.php
@@ -27,6 +27,7 @@ public function persist(NewMessageDTO $messageDTO): void
                 'external_account_id' => $messageDTO->externalAccountId,
                 'model_type' => (new User)->getMorphClass(),
                 'username' => $messageDTO->providerUsername,
+                'avatar' => $messageDTO->avatar,
             ]);
 
             $userContext = resolve(ResolveUserContext::class)->handle($userDto);
diff --git a/app-modules/activity/src/Message/DTOs/NewMessageDTO.php b/app-modules/activity/src/Message/DTOs/NewMessageDTO.php
index 3fd773e40..2852cc21f 100644
--- a/app-modules/activity/src/Message/DTOs/NewMessageDTO.php
+++ b/app-modules/activity/src/Message/DTOs/NewMessageDTO.php
@@ -18,6 +18,7 @@ public function __construct(
         public string $channelId,
         public string $content,
         public DateTimeImmutable $sentAt,
+        public ?string $avatar = null,
     ) {}
 
     /**
@@ -33,7 +34,8 @@ public static function make(array $payload): self
             providerMessageId: $payload['provider_message_id'],
             channelId: $payload['channel_id'],
             content: $payload['content'],
-            sentAt: new DateTimeImmutable($payload['sent_at'])
+            sentAt: new DateTimeImmutable($payload['sent_at']),
+            avatar: $payload['avatar'] ?? null
         );
     }
 }
diff --git a/app-modules/bot-discord/src/Events/MessageReceivedEvent.php b/app-modules/bot-discord/src/Events/MessageReceivedEvent.php
index 83cf5aeb0..f0e1662e1 100644
--- a/app-modules/bot-discord/src/Events/MessageReceivedEvent.php
+++ b/app-modules/bot-discord/src/Events/MessageReceivedEvent.php
@@ -44,12 +44,13 @@ public function handle(Message $message): void
             resolve(NewMessage::class)->persist(new NewMessageDTO(
                 tenantId: $tenantProvider->tenant_id,
                 provider: IdentityProvider::Discord,
-                providerUsername: $message->author->username.'#'.$message->author->discriminator,
+                providerUsername: $message->author->username,
                 externalAccountId: $message->user_id,
                 providerMessageId: $message->id,
                 channelId: $message->channel_id,
                 content: $message->content,
-                sentAt: $message->timestamp->toDateTimeImmutable()
+                sentAt: $message->timestamp->toDateTimeImmutable(),
+                avatar: $message->author->avatar,
             ));
 
             // Moderation pipeline — SubmitForModeration handles pre-screen (sync) + async AI.
diff --git a/app-modules/identity/src/ExternalIdentity/Actions/ResolveExternalIdentity.php b/app-modules/identity/src/ExternalIdentity/Actions/ResolveExternalIdentity.php
index ba7ed3a5f..527193980 100644
--- a/app-modules/identity/src/ExternalIdentity/Actions/ResolveExternalIdentity.php
+++ b/app-modules/identity/src/ExternalIdentity/Actions/ResolveExternalIdentity.php
@@ -13,7 +13,7 @@ final class ResolveExternalIdentity
 {
     public function handle(ResolveUserProviderDTO $dto): ExternalIdentity
     {
-        return ExternalIdentity::query()->firstOrCreate(
+        $identity = ExternalIdentity::query()->firstOrCreate(
             [
                 'provider' => $dto->provider,
                 'tenant_id' => $dto->tenantId,
@@ -24,13 +24,22 @@ public function handle(ResolveUserProviderDTO $dto): ExternalIdentity
                 'type' => $dto->provider->getType(),
                 'credentials_type' => CredentialsType::OAuth2,
                 'credentials' => ClientAccessManager::make(),
-                'metadata' => array_filter([
-                    'username' => $dto->username,
-                    'email' => $dto->email,
-                    'avatar' => $dto->avatar,
-                ]),
                 'connected_at' => now(),
             ]
         );
+
+        $metadata = array_filter([
+            'username' => $dto->username,
+            'email' => $dto->email,
+            'avatar' => $dto->avatar,
+        ]);
+
+        if ($metadata !== []) {
+            $identity->update([
+                'metadata' => array_merge($identity->metadata ?? [], $metadata),
+            ]);
+        }
+
+        return $identity;
     }
 }
diff --git a/app-modules/integration-discord/src/IntegrationDiscordServiceProvider.php b/app-modules/integration-discord/src/IntegrationDiscordServiceProvider.php
index 7b06ab525..e8d53f5f1 100644
--- a/app-modules/integration-discord/src/IntegrationDiscordServiceProvider.php
+++ b/app-modules/integration-discord/src/IntegrationDiscordServiceProvider.php
@@ -10,6 +10,7 @@
 use He4rt\IntegrationDiscord\ETL\Console\MergeDuplicateDiscordProfilesCommand;
 use He4rt\IntegrationDiscord\Models\DiscordEventLog;
 use He4rt\IntegrationDiscord\Sync\Console\SyncDiscordGuildCommand;
+use He4rt\IntegrationDiscord\Sync\Console\SyncDiscordHistoryCommand;
 use He4rt\IntegrationDiscord\Sync\Observers\DiscordEventLogObserver;
 use He4rt\IntegrationDiscord\Transport\DiscordConnector;
 use He4rt\IntegrationDiscord\Transport\DiscordOAuthConnector;
@@ -40,6 +41,7 @@ public function boot(): void
                 ImportDiscordMessagesCommand::class,
                 MergeDuplicateDiscordProfilesCommand::class,
                 SyncDiscordGuildCommand::class,
+                SyncDiscordHistoryCommand::class,
                 BackfillVoiceLogsCommand::class,
             ]);
         }
diff --git a/app-modules/integration-discord/src/Sync/Console/SyncDiscordHistoryCommand.php b/app-modules/integration-discord/src/Sync/Console/SyncDiscordHistoryCommand.php
new file mode 100644
index 000000000..1b9a3b33c
--- /dev/null
+++ b/app-modules/integration-discord/src/Sync/Console/SyncDiscordHistoryCommand.php
@@ -0,0 +1,96 @@
+<?php
+
+declare(strict_types=1);
+
+namespace He4rt\IntegrationDiscord\Sync\Console;
+
+use DateTimeImmutable;
+use He4rt\Activity\Message\Actions\NewMessage;
+use He4rt\Activity\Message\DTOs\NewMessageDTO;
+use He4rt\Identity\ExternalIdentity\Enums\IdentityProvider;
+use He4rt\Identity\ExternalIdentity\Models\ExternalIdentity;
+use He4rt\Identity\Tenant\Models\Tenant;
+use He4rt\IntegrationDiscord\Transport\DiscordConnector;
+use He4rt\IntegrationDiscord\Transport\Requests\Messages\ListChannelMessages;
+use Illuminate\Console\Attributes\Description;
+use Illuminate\Console\Attributes\Signature;
+use Illuminate\Console\Command;
+use Throwable;
+
+#[Description('Sync historical messages from a Discord channel to ensure Meeting Showcase data is available.')]
+#[Signature('discord:sync-history {channel_id} {--limit=100 : Number of messages to fetch}')]
+final class SyncDiscordHistoryCommand extends Command
+{
+    public function handle(NewMessage $newMessageAction): int
+    {
+        $channelId = (string) $this->argument('channel_id');
+        $limit = (int) $this->option('limit');
+        
+        $botToken = config('discord.token') ?? env('HE4RT_DISCORD_BOT_KEY');
+        $guildId = env('HE4RT_DISCORD_GUILD');
+
+        if (! $botToken) {
+            $this->error('Discord bot token not configured.');
+            return self::FAILURE;
+        }
+
+        // Find the tenant associated with this guild to ensure multi-tenancy rules are respected
+        $tenantProvider = ExternalIdentity::query()
+            ->where('model_type', (new Tenant())->getMorphClass())
+            ->where('external_account_id', (string) $guildId)
+            ->first();
+
+        if (! $tenantProvider) {
+            $this->error("Tenant not found for guild {$guildId}. Check your environment configuration.");
+            return self::FAILURE;
+        }
+
+        $this->info("Fetching last {$limit} messages from channel {$channelId}...");
+
+        try {
+            $connector = new DiscordConnector($botToken);
+            $response = $connector->send(new ListChannelMessages($channelId, limit: $limit));
+
+            if (! $response->successful()) {
+                $this->error("Failed to fetch messages from Discord: " . $response->body());
+                return self::FAILURE;
+            }
+
+            $messages = $response->json();
+            $count = 0;
+
+            $this->withProgressBar($messages, function (array $m) use ($tenantProvider, $newMessageAction, &$count) {
+                if (isset($m['author']['bot']) && $m['author']['bot']) {
+                    return;
+                }
+
+                $author = $m['author'];
+
+                try {
+                    $newMessageAction->persist(new NewMessageDTO(
+                        tenantId: $tenantProvider->tenant_id,
+                        provider: IdentityProvider::Discord,
+                        providerUsername: $author['username'],
+                        externalAccountId: $author['id'],
+                        providerMessageId: $m['id'],
+                        channelId: $m['channel_id'],
+                        content: $m['content'] ?? '',
+                        sentAt: new DateTimeImmutable($m['timestamp']),
+                        avatar: $author['avatar'] ?? null,
+                    ));
+                    $count++;
+                } catch (Throwable $e) {
+                    // Silently skip individual message failures to keep progress
+                }
+            });
+
+            $this->newLine();
+            $this->info("Successfully synced {$count} messages and updated participant profiles.");
+
+            return self::SUCCESS;
+        } catch (Throwable $e) {
+            $this->error("An error occurred during sync: " . $e->getMessage());
+            return self::FAILURE;
+        }
+    }
+}
diff --git a/app-modules/panel-admin/src/Filament/Resources/ExternalIdentities/ExternalIdentityResource.php b/app-modules/panel-admin/src/Filament/Resources/ExternalIdentities/ExternalIdentityResource.php
index 8319bd5bb..f595f64b4 100644
--- a/app-modules/panel-admin/src/Filament/Resources/ExternalIdentities/ExternalIdentityResource.php
+++ b/app-modules/panel-admin/src/Filament/Resources/ExternalIdentities/ExternalIdentityResource.php
@@ -66,6 +66,10 @@ public static function getEloquentQuery(): Builder
             ->withoutGlobalScopes([
                 SoftDeletingScope::class,
             ])
+            ->when(
+                session('active_provider'),
+                fn (Builder $query, string $provider) => $query->where('provider', $provider)
+            )
             ->with(['model', 'connectedByUser']);
     }
 
diff --git a/app-modules/panel-admin/src/Http/Middleware/SetProviderScope.php b/app-modules/panel-admin/src/Http/Middleware/SetProviderScope.php
new file mode 100644
index 000000000..555f98d42
--- /dev/null
+++ b/app-modules/panel-admin/src/Http/Middleware/SetProviderScope.php
@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace He4rt\PanelAdmin\Http\Middleware;
+
+use Closure;
+use He4rt\Identity\ExternalIdentity\Enums\IdentityProvider;
+use Illuminate\Http\Request;
+use Symfony\Component\HttpFoundation\Response;
+
+class SetProviderScope
+{
+    public function handle(Request $request, Closure $next): Response
+    {
+        if ($request->has('provider')) {
+            $provider = IdentityProvider::tryFrom($request->query('provider'));
+
+            if ($provider) {
+                session(['active_provider' => $provider->value]);
+            }
+        }
+
+        if (!session()->has('active_provider')) {
+            session(['active_provider' => IdentityProvider::Discord->value]);
+        }
+
+        return $next($request);
+    }
+}
diff --git a/app-modules/panel-admin/src/Marketing/Pages/MeetingShowcasePage.php b/app-modules/panel-admin/src/Marketing/Pages/MeetingShowcasePage.php
index 123a5a0e0..2ed3778aa 100644
--- a/app-modules/panel-admin/src/Marketing/Pages/MeetingShowcasePage.php
+++ b/app-modules/panel-admin/src/Marketing/Pages/MeetingShowcasePage.php
@@ -49,6 +49,17 @@ public function getTitle(): string
         return __('panel-admin::marketing.navigation.meeting_showcase');
     }
 
+    public function mount(): void
+    {
+        // Default to today's meeting time as a helpful preset
+        $tz = config('app.display_timezone', 'America/Sao_Paulo');
+        $this->startDate = now($tz)->setTime(22, 0)->format('Y-m-d\TH:i');
+        $this->endDate = now($tz)->setTime(23, 40)->format('Y-m-d\TH:i');
+        
+        // Default meeting channel
+        $this->channelId = '853401652471398400';
+    }
+
     public function loadParticipants(): void
     {
         if ($this->channelId === '' || $this->startDate === '' || $this->endDate === '') {
@@ -68,17 +79,20 @@ public function loadParticipants(): void
             ->orderByDesc('total_messages')
             ->get();
 
-        $identityIds = $messageStats->pluck('external_identity_id');
+        $identityIds = $messageStats->pluck('external_identity_id')->unique()->filter()->values()->all();
 
         $identities = ExternalIdentity::query()
+            ->withoutGlobalScopes()
+            ->withTrashed()
             ->whereIn('id', $identityIds)
             ->get()
             ->keyBy('id');
 
         $this->participants = $messageStats->map(function (Message $stat) use ($identities): array {
-            $identity = $identities->get($stat->external_identity_id);
+            $identityId = (string) $stat->external_identity_id;
+            $identity = $identities->get($identityId);
 
-            return $this->extractDiscordData($identity, (int) $stat->total_messages); // @phpstan-ignore property.notFound
+            return $this->extractDiscordData($identity, (int) $stat->total_messages);
         })->all();
 
         $this->loaded = true;
diff --git a/app-modules/panel-app/resources/views/auth/login.blade.php b/app-modules/panel-app/resources/views/auth/login.blade.php
index 1ef8be5ea..b102beb98 100644
--- a/app-modules/panel-app/resources/views/auth/login.blade.php
+++ b/app-modules/panel-app/resources/views/auth/login.blade.php
@@ -55,12 +55,30 @@ class="absolute right-0 bottom-0 left-0 h-px bg-gradient-to-r from-transparent v
 
         <div class="relative z-10 w-full max-w-sm">
             {{-- Mobile logo --}}
-            <div class="mb-10 flex items-center justify-center lg:hidden">
-                <img
-                    src="{{ asset('images/logo.svg') }}"
-                    alt="He4rt Developers"
-                    class="h-14 w-auto animate-pulse"
-                />
+            <div class="mb-10 flex flex-col items-center justify-center lg:hidden">
+                <div class="animate-heartbeat">
+                    <svg
+                        class="h-16 w-auto drop-shadow-[0_0_25px_rgba(120,43,241,0.4)]"
+                        viewBox="0 0 600 513"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <defs>
+                            <linearGradient id="mobileHeartGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                                <stop offset="0%" style="stop-color:#9b59f5;stop-opacity:1" />
+                                <stop offset="100%" style="stop-color:#782bf1;stop-opacity:1" />
+                            </linearGradient>
+                        </defs>
+                        <path
+                            d="M445.237 0.00033551C424.91 -0.0347431 404.777 3.89304 385.996 11.5576C367.216 19.2221 350.159 30.4719 335.808 44.6594L153.391 224.398L116.915 188.45C111.983 183.761 108.048 178.15 105.341 171.946C102.633 165.741 101.207 159.067 101.145 152.314C101.084 145.56 102.388 138.862 104.983 132.611C107.577 126.359 111.409 120.68 116.255 115.904C121.101 111.128 126.864 107.352 133.207 104.795C139.55 102.239 146.347 100.953 153.2 101.014C160.052 101.074 166.825 102.48 173.12 105.148C179.416 107.816 185.109 111.694 189.867 116.555L262.856 44.6594C233.71 16.6424 194.537 1.07109 153.824 1.31914C113.11 1.56719 74.1349 17.6146 45.3431 45.9846C16.5513 74.3546 0.261527 112.762 0.0031216 152.886C-0.255283 193.01 15.5385 231.618 43.9626 260.346L153.391 368.189L511.948 14.8274C491.12 5.01981 468.32 -0.0474973 445.237 0.00033551Z"
+                            fill="url(#mobileHeartGradient)"
+                        />
+                        <path
+                            d="M584.9 86.7579L445.237 224.433L408.76 188.45L335.808 260.345L372.284 296.293L226.379 440.084L299.332 512.015L554.665 260.381C577.296 238.07 592.355 209.395 597.769 178.303C603.183 147.21 598.687 115.228 584.9 86.7579Z"
+                            fill="url(#mobileHeartGradient)"
+                        />
+                    </svg>
+                </div>
+                <h1 class="mt-4 bg-gradient-to-r from-purple-400 to-purple-600 bg-clip-text text-xl font-bold tracking-tight text-transparent">He4rt Developers</h1>
             </div>
 
             <div class="mb-10">
@@ -69,29 +87,44 @@ class="h-14 w-auto animate-pulse"
             </div>
 
             {{-- OAuth --}}
-            <div class="grid gap-4">
+            <div class="grid gap-3">
                 <a
                     href="{{ route('oauth.redirect', ['tenant' => request()->getHost(), 'panel' => $panelId, 'provider' => 'discord']) }}"
-                    class="group flex items-center justify-center gap-3 rounded-xl bg-[#5865F2] px-4 py-3.5 text-sm font-bold text-white shadow-lg shadow-purple-900/10 transition-all hover:scale-[1.02] hover:bg-[#4752C4] active:scale-[0.98]"
+                    class="group flex items-center gap-3 rounded-xl bg-[#5865F2] pl-2 pr-4 py-1.5 text-sm font-bold text-white shadow-lg shadow-[#5865F2]/20 transition-all hover:scale-[1.02] active:scale-[0.98]"
                 >
-                    @svg ('fab-discord', 'h-5 w-5 transition-transform group-hover:rotate-12')
-                    Continuar com Discord
+                    <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/20 backdrop-blur">
+                        @svg ('fab-discord', 'h-5 w-5')
+                    </div>
+                    <div class="text-left">
+                        <div class="text-[10px] font-semibold uppercase tracking-wider text-white/70">Discord</div>
+                        <div class="text-[12px] leading-none">Continuar com Discord</div>
+                    </div>
                 </a>
 
                 <a
                     href="{{ route('oauth.redirect', ['tenant' => request()->getHost(), 'panel' => $panelId, 'provider' => 'github']) }}"
-                    class="group flex items-center justify-center gap-3 rounded-xl bg-zinc-900 px-4 py-3.5 text-sm font-bold text-white shadow-lg ring-1 ring-zinc-800 transition-all hover:scale-[1.02] hover:bg-zinc-800 active:scale-[0.98]"
+                    class="group flex items-center gap-3 rounded-xl bg-[#181717] pl-2 pr-4 py-1.5 text-sm font-bold text-white shadow-lg shadow-black/20 transition-all hover:scale-[1.02] active:scale-[0.98]"
                 >
-                    @svg ('fab-github', 'h-5 w-5 transition-transform group-hover:scale-110')
-                    Continuar com GitHub
+                    <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/20 backdrop-blur">
+                        @svg ('fab-github', 'h-5 w-5')
+                    </div>
+                    <div class="text-left">
+                        <div class="text-[10px] font-semibold uppercase tracking-wider text-white/70">GitHub</div>
+                        <div class="text-[12px] leading-none">Continuar com GitHub</div>
+                    </div>
                 </a>
 
                 <a
                     href="{{ route('oauth.redirect', ['tenant' => request()->getHost(), 'panel' => $panelId, 'provider' => 'twitch']) }}"
-                    class="group flex items-center justify-center gap-3 rounded-xl bg-[#9146FF] px-4 py-3.5 text-sm font-bold text-white shadow-lg shadow-purple-900/10 transition-all hover:scale-[1.02] hover:bg-[#7B2FF0] active:scale-[0.98]"
+                    class="group flex items-center gap-3 rounded-xl bg-[#9146FF] pl-2 pr-4 py-1.5 text-sm font-bold text-white shadow-lg shadow-[#9146FF]/20 transition-all hover:scale-[1.02] active:scale-[0.98]"
                 >
-                    @svg ('fab-twitch', 'h-5 w-5 transition-transform group-hover:-rotate-12')
-                    Continuar com Twitch
+                    <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/20 backdrop-blur">
+                        @svg ('fab-twitch', 'h-5 w-5')
+                    </div>
+                    <div class="text-left">
+                        <div class="text-[10px] font-semibold uppercase tracking-wider text-white/70">Twitch</div>
+                        <div class="text-[12px] leading-none">Continuar com Twitch</div>
+                    </div>
                 </a>
             </div>
 
@@ -120,18 +153,17 @@ class="group flex items-center justify-center gap-3 rounded-xl bg-[#9146FF] px-4
                         type="submit"
                         wire:click="authenticate"
                         wire:loading.attr="disabled"
-                        class="w-full rounded-xl bg-purple-600 px-4 py-3.5 text-sm font-bold text-white shadow-lg shadow-purple-900/20 transition-all hover:scale-[1.02] hover:bg-purple-500 active:scale-[0.98] disabled:opacity-70 disabled:cursor-not-allowed"
+                        class="relative flex h-[52px] w-full items-center justify-center rounded-xl bg-purple-600 px-4 text-sm font-bold text-white shadow-lg shadow-purple-900/20 transition-all hover:scale-[1.02] hover:bg-purple-500 active:scale-[0.98] disabled:opacity-70 disabled:cursor-not-allowed"
                     >
-                        <span wire:loading.remove wire:target="authenticate">
+                        <div wire:loading.remove wire:target="authenticate">
                             {{ $action->getLabel() }}
-                        </span>
-                        <span wire:loading wire:target="authenticate" class="flex items-center justify-center gap-2">
-                            <svg class="h-5 w-5 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        </div>
+                        <div wire:loading wire:target="authenticate">
+                            <svg class="h-6 w-6 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                 <path class="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>
-                            Entrando...
-                        </span>
+                        </div>
                     </button>
                 </div>
             </div>
diff --git a/app/Providers/Filament/AdminPanelProvider.php b/app/Providers/Filament/AdminPanelProvider.php
index 713e4a967..80af458fb 100644
--- a/app/Providers/Filament/AdminPanelProvider.php
+++ b/app/Providers/Filament/AdminPanelProvider.php
@@ -12,8 +12,10 @@
 use Filament\Panel;
 use Filament\PanelProvider;
 use Filament\Support\Colors\Color;
+use Filament\View\PanelsRenderHook;
 use He4rt\Identity\Tenant\Models\Tenant;
 use He4rt\PanelAdmin\Http\Middleware\ApplyTenantScopes;
+use He4rt\PanelAdmin\Http\Middleware\SetProviderScope;
 use He4rt\PanelAdmin\Pages\Dashboard;
 use He4rt\PanelAdmin\Tenant\EditTenantProfilePage;
 use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse;
@@ -32,9 +34,7 @@ public function panel(Panel $panel): Panel
             ->id('admin')
             ->path('admin')
             ->login(Login::class)
-            ->brandName('He4rt Admin')
-            ->brandLogo(fn () => view('he4rt::components.base.logo'))
-            ->brandLogoHeight('2.5rem')
+            ->brandName('')
             ->colors(function (): array {
                 $colors = Color::all();
 
@@ -49,6 +49,10 @@ public function panel(Panel $panel): Panel
             ->sidebarCollapsibleOnDesktop()
             ->tenantMenu(false)
             ->tenant(Tenant::class, slugAttribute: 'slug')
+            ->renderHook(
+                PanelsRenderHook::TOPBAR_START,
+                fn () => view('filament.admin.components.topbar-content'),
+            )
             ->tenantProfile(EditTenantProfilePage::class)
             ->viteTheme('resources/css/filament/admin/theme.css')
             ->middleware([
@@ -70,6 +74,7 @@ public function panel(Panel $panel): Panel
             ])
             ->tenantMiddleware([
                 ApplyTenantScopes::class,
+                SetProviderScope::class,
             ]);
 
         return $panel;
diff --git a/resources/css/filament/admin/theme.css b/resources/css/filament/admin/theme.css
index 726e5409d..bf04e22e9 100644
--- a/resources/css/filament/admin/theme.css
+++ b/resources/css/filament/admin/theme.css
@@ -8,53 +8,107 @@
 
 :root {
     --sidebar-width: 280px;
+    --topbar-height: 64px;
 }
 
-/* Sidebar Modern Aesthetics */
+/* 1. Sidebar Position & Style */
 .fi-sidebar {
-    @apply bg-white dark:bg-zinc-950 border-r border-zinc-200 dark:border-white/5 shadow-xl transition-all duration-300;
+    @apply bg-white dark:bg-zinc-950 !border-r !border-slate-200/70 dark:!border-white/5 !shadow-xl !transition-all !duration-300;
 }
 
 .fi-sidebar-header {
-    @apply py-6 border-b border-zinc-200 dark:border-white/5;
+    display: none !important; /* Hide native sidebar brand */
 }
 
-.fi-sidebar-nav {
-    @apply px-4 py-6;
+/* 2. Topbar Styling */
+.fi-topbar {
+    @apply !bg-white/80 dark:!bg-zinc-950/80 !backdrop-blur-xl !border-b !border-slate-200/70 dark:!border-white/5 !sticky !top-0 !z-30 !shadow-sm;
+    height: var(--topbar-height) !important;
 }
 
-.fi-sidebar-item-button {
-    @apply rounded-xl transition-all duration-200 py-2.5 px-4 !important;
+.fi-topbar > div {
+    @apply !h-full !px-6;
 }
 
-.fi-sidebar-item-button:hover {
-    @apply bg-zinc-100 dark:bg-white/5 !important;
+/* Hide ALL native brand elements in topbar to avoid duplicate with custom block */
+.fi-topbar-brand,
+.fi-topbar-header-cell,
+.fi-topbar-brand-link,
+[class*="fi-topbar-brand"],
+.fi-topbar > div > a {
+    display: none !important;
 }
 
-.fi-sidebar-item-active .fi-sidebar-item-button {
-    @apply bg-purple-500/10 text-purple-600 dark:text-purple-400 ring-1 ring-purple-500/20 shadow-lg shadow-purple-900/10 !important;
+/* Hide Sidebar Collapse Button (Arrow/Hamburger) */
+.fi-topbar button[aria-controls="sidebar"],
+.fi-topbar-collapse-btn,
+.fi-topbar button:has(.fi-icon.fi-size-lg) {
+    display: none !important;
 }
 
-/* Topbar & Dropdowns */
-.fi-topbar {
-    @apply bg-white/80 dark:bg-zinc-950/80 backdrop-blur-xl border-b border-zinc-200 dark:border-white/5 sticky top-0 z-30 shadow-sm;
+/* 3. Global Search Customization */
+.fi-global-search {
+    @apply !block;
+}
+
+.fi-global-search-input-ctn {
+    position: relative !important;
 }
 
+.fi-global-search-input {
+    @apply !bg-slate-50 dark:!bg-white/5 !border-slate-200/70 dark:!border-white/10 !rounded-xl !text-[12px] !pl-9 !pr-10 !py-2 !transition-all !shadow-none !ring-0 !outline-none focus:!bg-white dark:focus:!bg-white/10 focus:!border-purple-300;
+}
+
+.fi-global-search-input-ctn::after {
+    content: '⌘K';
+    position: absolute !important;
+    right: 0.75rem !important;
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+    font-size: 10px !important;
+    @apply text-slate-400 bg-white dark:bg-zinc-800 px-1.5 py-0.5 rounded border border-slate-200 dark:border-white/10 pointer-events-none hidden md:block;
+}
+
+/* 4. Dropdowns & Panels */
 .fi-dropdown-panel {
-    @apply bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 shadow-2xl rounded-2xl backdrop-blur-xl z-50 !important;
+    @apply !bg-white dark:!bg-zinc-900 !border !border-slate-200/70 dark:!border-white/10 !shadow-2xl !rounded-2xl !backdrop-blur-xl !z-50;
+    border-radius: 1rem !important;
+    backdrop-filter: blur(24px) !important;
+    padding: 0.375rem !important; /* This creates the safe area for hover */
+    overflow: hidden !important; /* This ensures nothing leaks out */
 }
 
-/* Page Spacing */
-.fi-main {
-    @apply p-8 lg:p-12;
+.fi-dropdown-list {
+    @apply !p-0; /* Reset internal list padding to let the panel padding rule */
 }
 
-/* Animations from Login (reused) */
-@keyframes login-float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-12px); }
+.dark .fi-dropdown-panel {
+    background-color: var(--color-zinc-900) !important;
+    border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+/* 5. Sidebar Item Adjustments */
+.fi-sidebar-item-button {
+    @apply !rounded-xl !transition-all !duration-200 !py-2.5 !px-4;
+    border-radius: 0.75rem !important;
+}
+
+.fi-sidebar-item-button:hover {
+    background-color: #f8fafc !important;
+}
+
+.fi-sidebar-item-active .fi-sidebar-item-button {
+    background-color: #f5f3ff !important;
+    color: #6d28d9 !important;
+    box-shadow: none !important;
+}
+
+/* 6. Page Spacing & Typography */
+.fi-main {
+    @apply p-8 lg:p-12;
 }
 
+/* Animations */
 @keyframes heartbeat {
     0% { transform: scale(1); }
     10% { transform: scale(1.05); }
diff --git a/resources/views/filament/admin/components/brand.blade.php b/resources/views/filament/admin/components/brand.blade.php
new file mode 100644
index 000000000..dde185bac
--- /dev/null
+++ b/resources/views/filament/admin/components/brand.blade.php
@@ -0,0 +1,7 @@
+<div class="flex items-center gap-3">
+    <x-he4rt::base.logo class="h-8 w-auto" />
+    <div class="flex flex-col">
+        <div class="text-[13px] font-bold text-slate-900 dark:text-white leading-tight">He4rt Hub</div>
+        <div class="text-[10px] text-slate-500 leading-tight uppercase tracking-wider font-semibold">Admin Console</div>
+    </div>
+</div>
diff --git a/resources/views/filament/admin/components/topbar-content.blade.php b/resources/views/filament/admin/components/topbar-content.blade.php
new file mode 100644
index 000000000..986c60a1a
--- /dev/null
+++ b/resources/views/filament/admin/components/topbar-content.blade.php
@@ -0,0 +1,44 @@
+<div class="flex items-center h-full">
+    {{-- Brand Block: Fixed width to match sidebar & Acts as Sidebar Toggle --}}
+    <button 
+        x-on:click="$store.sidebar.isOpen ? $store.sidebar.close() : $store.sidebar.open()"
+        class="flex items-center gap-3 h-full px-4 border-r border-slate-200/70 dark:border-white/10 shrink-0 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors text-left" 
+        style="width: var(--sidebar-width); margin-left: -24px;"
+    >
+        <div class="flex items-center gap-3 shrink-0">
+            <x-heroicon-m-bars-3 class="w-6 h-6 text-slate-400 dark:text-slate-500" />
+            
+            <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-100 dark:bg-white/5 overflow-hidden">
+                <svg
+                    class="h-6 w-auto drop-shadow-[0_0_15px_rgba(120,43,241,0.3)] animate-heartbeat"
+                    viewBox="0 0 600 513"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <defs>
+                        <linearGradient id="topbarHeartGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                            <stop offset="0%" style="stop-color:#9b59f5;stop-opacity:1" />
+                            <stop offset="100%" style="stop-color:#782bf1;stop-opacity:1" />
+                        </linearGradient>
+                    </defs>
+                    <path
+                        d="M445.237 0.00033551C424.91 -0.0347431 404.777 3.89304 385.996 11.5576C367.216 19.2221 350.159 30.4719 335.808 44.6594L153.391 224.398L116.915 188.45C111.983 183.761 108.048 178.15 105.341 171.946C102.633 165.741 101.207 159.067 101.145 152.314C101.084 145.56 102.388 138.862 104.983 132.611C107.577 126.359 111.409 120.68 116.255 115.904C121.101 111.128 126.864 107.352 133.207 104.795C139.55 102.239 146.347 100.953 153.2 101.014C160.052 101.074 166.825 102.48 173.12 105.148C179.416 107.816 185.109 111.694 189.867 116.555L262.856 44.6594C233.71 16.6424 194.537 1.07109 153.824 1.31914C113.11 1.56719 74.1349 17.6146 45.3431 45.9846C16.5513 74.3546 0.261527 112.762 0.0031216 152.886C-0.255283 193.01 15.5385 231.618 43.9626 260.346L153.391 368.189L511.948 14.8274C491.12 5.01981 468.32 -0.0474973 445.237 0.00033551Z"
+                        fill="url(#topbarHeartGradient)"
+                    />
+                    <path
+                        d="M584.9 86.7579L445.237 224.433L408.76 188.45L335.808 260.345L372.284 296.293L226.379 440.084L299.332 512.015L554.665 260.381C577.296 238.07 592.355 209.395 597.769 178.303C603.183 147.21 598.687 115.228 584.9 86.7579Z"
+                        fill="url(#topbarHeartGradient)"
+                    />
+                </svg>
+            </div>
+        </div>
+        <div class="flex flex-col min-w-0">
+            <div class="text-[13px] font-bold text-slate-900 dark:text-white leading-tight truncate">He4rt Hub</div>
+            <div class="text-[10px] text-slate-500 leading-tight uppercase tracking-wider font-semibold truncate">Admin Console</div>
+        </div>
+    </button>
+
+    {{-- Pickers Block --}}
+    <div class="flex items-center gap-4 px-6 h-full">
+        @include('filament.admin.components.topbar-tenant-menu')
+    </div>
+</div>
diff --git a/resources/views/filament/admin/components/topbar-tenant-menu.blade.php b/resources/views/filament/admin/components/topbar-tenant-menu.blade.php
new file mode 100644
index 000000000..56631ec83
--- /dev/null
+++ b/resources/views/filament/admin/components/topbar-tenant-menu.blade.php
@@ -0,0 +1,112 @@
+@php
+    $currentTenant = \Filament\Facades\Filament::getTenant();
+    $tenants = \Filament\Facades\Filament::getUserTenants(\Filament\Facades\Filament::auth()->user());
+    $panelId = \Filament\Facades\Filament::getCurrentPanel()->getId();
+    
+    $providers = \He4rt\Identity\ExternalIdentity\Enums\IdentityProvider::supportedProviders();
+    $activeProviderValue = session('active_provider', \He4rt\Identity\ExternalIdentity\Enums\IdentityProvider::Discord->value);
+    $currentProvider = \He4rt\Identity\ExternalIdentity\Enums\IdentityProvider::tryFrom($activeProviderValue) ?? $providers[1];
+@endphp
+
+<div class="fi-topbar-nav-pickers flex items-center gap-12 px-4">
+    {{-- Tenant Picker --}}
+    <x-filament::dropdown placement="bottom-start" teleport>
+        <x-slot name="trigger">
+            <button class="flex items-center gap-2.5 pl-2 pr-3 py-1.5 rounded-lg hover:bg-slate-50 transition dark:hover:bg-white/5 border border-transparent hover:border-slate-200/70 dark:hover:border-white/10">
+                <div class="w-7 h-7 rounded-md flex items-center justify-center text-white font-bold text-xs" style="background: #7c3aed">
+                    <x-heroicon-m-building-office-2 class="w-3.5 h-3.5" />
+                </div>
+                <div class="text-left">
+                    <div class="text-[10px] uppercase tracking-wider text-slate-400 font-semibold leading-none">Tenant</div>
+                    <div class="text-[12px] font-semibold text-slate-900 dark:text-white leading-none mt-0.5">{{ $currentTenant->name }}</div>
+                </div>
+            </button>
+        </x-slot>
+
+        <x-filament::dropdown.list class="w-96 !p-1">
+            <div class="px-3 py-2 text-[10px] uppercase tracking-wider text-slate-400 font-semibold border-b border-slate-100 dark:border-white/5 mb-1">Trocar escopo de tenant</div>
+            
+            @foreach ($tenants as $tenant)
+                @php
+                    $isActive = $tenant->id === $currentTenant->id;
+                @endphp
+                <x-filament::dropdown.list.item
+                    :href="\Filament\Facades\Filament::getPanel($panelId)->getUrl($tenant)"
+                    tag="a"
+                    :active="$isActive"
+                    class="rounded-md px-3"
+                >
+                    <div class="flex items-center gap-3 w-full">
+                        <div class="w-8 h-8 rounded-md flex items-center justify-center text-white font-bold text-xs shrink-0" style="background: #7c3aed">
+                            <x-heroicon-m-building-office-2 class="w-4 h-4" />
+                        </div>
+                        <div class="flex flex-col min-w-0">
+                            <div class="flex items-center gap-2">
+                                <span class="text-[13px] font-semibold text-slate-900 dark:text-white leading-tight truncate">
+                                    {{ $tenant->name }}
+                                </span>
+                                @if ($isActive)
+                                    <span class="shrink-0 text-[9px] px-1.5 py-0.5 bg-violet-600 text-white rounded font-bold uppercase tracking-tighter">Ativo</span>
+                                @endif
+                            </div>
+                            <span class="text-[11px] text-slate-500 leading-tight mt-0.5 truncate">{{ $tenant->domain ?? $tenant->slug }}</span>
+                        </div>
+                    </div>
+                </x-filament::dropdown.list.item>
+            @endforeach
+
+            <div class="border-t border-slate-100 dark:border-white/5 my-1"></div>
+
+            <x-filament::dropdown.list.item
+                :href="\Filament\Facades\Filament::getTenantProfileUrl()"
+                icon="heroicon-m-cog-6-tooth"
+                tag="a"
+                class="rounded-md"
+            >
+                <span class="text-[13px] font-medium text-slate-700 dark:text-slate-300">Gerenciar Tenant</span>
+            </x-filament::dropdown.list.item>
+        </x-filament::dropdown.list>
+    </x-filament::dropdown>
+
+    <span class="text-slate-300 text-sm mx-1">·</span>
+
+    {{-- Provider Picker --}}
+    <x-filament::dropdown placement="bottom-start" teleport>
+        <x-slot name="trigger">
+            <button class="flex items-center gap-2.5 pl-2 pr-3 py-1.5 rounded-lg hover:bg-slate-50 transition dark:hover:bg-white/5 border border-transparent hover:border-slate-200/70 dark:hover:border-white/10">
+                <div class="w-7 h-7 rounded-md flex items-center justify-center text-white" style="background: {{ is_array($currentProvider->getColor()) ? ($currentProvider->getColor()[0] ?? '#64748b') : $currentProvider->getColor() }}">
+                    @svg($currentProvider->getIcon(), 'w-3.5 h-3.5')
+                </div>
+                <div class="text-left">
+                    <div class="text-[10px] uppercase tracking-wider text-slate-400 font-semibold leading-none">Provider</div>
+                    <div class="text-[12px] font-semibold text-slate-900 dark:text-white leading-none mt-0.5">{{ $currentProvider->getLabel() }}</div>
+                </div>
+            </button>
+        </x-slot>
+
+        <x-filament::dropdown.list class="w-64">
+            @foreach ($providers as $p)
+                @php
+                    $isActive = $p->value === $currentProvider->value;
+                @endphp
+                <x-filament::dropdown.list.item
+                    :href="request()->fullUrlWithQuery(['provider' => $p->value])"
+                    tag="a"
+                    :active="$isActive"
+                >
+                    <div class="flex items-center gap-3 w-full">
+                        <div class="w-7 h-7 rounded-md flex items-center justify-center text-white shrink-0" style="background: {{ is_array($p->getColor()) ? ($p->getColor()[0] ?? '#64748b') : $p->getColor() }}">
+                            @svg($p->getIcon(), 'w-3.5 h-3.5')
+                        </div>
+                        <div class="flex items-center gap-2 flex-1 min-w-0">
+                            <span class="text-sm font-medium text-slate-900 dark:text-white truncate">{{ $p->getLabel() }}</span>
+                            @if ($isActive)
+                                <span class="shrink-0 text-[9px] px-2 py-0.5 bg-violet-600 text-white rounded font-bold uppercase">Ativo</span>
+                            @endif
+                        </div>
+                    </div>
+                </x-filament::dropdown.list.item>
+            @endforeach
+        </x-filament::dropdown.list>
+    </x-filament::dropdown>
+</div>