diff --git a/Carbon.Front/Components/Layout/MainLayout.razor b/Carbon.Front/Components/Layout/MainLayout.razor
index 5a24bb1..1d881a2 100644
--- a/Carbon.Front/Components/Layout/MainLayout.razor
+++ b/Carbon.Front/Components/Layout/MainLayout.razor
@@ -1,10 +1,6 @@
 @inherits LayoutComponentBase
 
 <div class="page">
-    <div class="sidebar">
-        <NavMenu />
-    </div>
-
     <main>
         <div class="top-row px-4">
             <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
diff --git a/Carbon.Front/Components/Pages/Home.razor b/Carbon.Front/Components/Pages/Home.razor
index 9001e0b..f1203a5 100644
--- a/Carbon.Front/Components/Pages/Home.razor
+++ b/Carbon.Front/Components/Pages/Home.razor
@@ -1,7 +1,131 @@
-@page "/"
+@page "/"
+@using Microsoft.AspNetCore.Components.Authorization
 
-<PageTitle>Home</PageTitle>
+<PageTitle>Carbon Open Telemetry</PageTitle>
 
-<h1>Hello, world!</h1>
+<style>
+    html, body { margin: 0; padding: 0; background-color: #0f172a; }
+</style>
 
-Welcome to your new app.
+<div class="relative min-h-screen bg-slate-900 overflow-hidden">
+
+    @* Brilhos decorativos de fundo *@
+    <div class="pointer-events-none absolute -top-40 -left-40 h-96 w-96 rounded-full bg-indigo-600/20 blur-3xl" aria-hidden="true"></div>
+    <div class="pointer-events-none absolute top-1/3 -right-40 h-96 w-96 rounded-full bg-emerald-500/10 blur-3xl" aria-hidden="true"></div>
+
+    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 space-y-20">
+
+        @* ========== HERO ========== *@
+        <section class="text-center space-y-6">
+            <span class="inline-flex items-center gap-2 rounded-full border border-slate-700 bg-slate-800/70 px-4 py-1 text-xs font-medium text-slate-300">
+                <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
+                Trabalho APS
+            </span>
+
+            <h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight text-white">
+                <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-emerald-400">CARBON </span>
+                ✈
+            </h1>
+
+            <p class="mx-auto max-w-2xl text-base sm:text-lg text-slate-400">
+                Plataforma para calcular e acompanhar as emissões de CO₂ de voos corporativos,
+                com autenticação segura, biometria facial e controle de acesso por perfil.
+            </p>
+
+            <div class="flex flex-col sm:flex-row items-center justify-center gap-3 pt-2">
+                <AuthorizeView>
+                    <Authorized>
+                        <AuthorizeView Roles="Admin,General,Director" Context="emissionsContext">
+                            <a href="emissions"
+                               class="inline-flex items-center justify-center rounded-md bg-indigo-600 px-6 py-3 text-sm font-semibold text-white shadow-lg hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-slate-900">
+                                Calcular emissões
+                            </a>
+                        </AuthorizeView>
+                        <AuthorizeView Roles="Admin" Context="adminContext">
+                            <a href="admin/usuarios"
+                               class="inline-flex items-center justify-center rounded-md border border-slate-600 bg-slate-800 px-6 py-3 text-sm font-semibold text-slate-200 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-slate-900">
+                                Gerenciar usuários
+                            </a>
+                        </AuthorizeView>
+                    </Authorized>
+                    <NotAuthorized>
+                        <a href="login"
+                           class="inline-flex items-center justify-center rounded-md bg-indigo-600 px-6 py-3 text-sm font-semibold text-white shadow-lg hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-slate-900">
+                            Entrar
+                        </a>
+                        <a href="register"
+                           class="inline-flex items-center justify-center rounded-md border border-slate-600 bg-slate-800 px-6 py-3 text-sm font-semibold text-slate-200 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-slate-900">
+                            Criar conta
+                        </a>
+                    </NotAuthorized>
+                </AuthorizeView>
+            </div>
+        </section>
+
+        @* ========== FUNCIONALIDADES ========== *@
+        <section class="space-y-8">
+
+            <div class="text-center">
+                <h2 class="text-2xl font-extrabold text-white">O que o sistema oferece</h2>
+            </div>
+
+            <div class="grid gap-5 sm:grid-cols-2">
+                @foreach (var f in features)
+                {
+                    <div class="bg-slate-800 border border-slate-700 rounded-xl p-6 shadow-2xl hover:border-indigo-500/60 transition-colors">
+                        <div class="flex h-11 w-11 items-center justify-center rounded-lg bg-indigo-600/20 text-2xl" aria-hidden="true">@f.Icon</div>
+                        <h3 class="mt-4 text-lg font-bold text-white">@f.Title</h3>
+                        <p class="mt-1 text-sm text-slate-400">@f.Description</p>
+                    </div>
+                }
+            </div>
+        </section>
+
+        @* ========== PERFIS DE ACESSO ========== *@
+        <section class="space-y-8">
+            <div class="text-center">
+                <h2 class="text-2xl font-extrabold text-white">Níveis de acesso</h2>
+                <p class="mt-1 text-sm text-slate-400">Cada perfil enxerga e calcula apenas o que lhe é permitido.</p>
+            </div>
+
+            <div class="grid gap-5 md:grid-cols-3">
+                @foreach (var r in roles)
+                {
+                    <div class="bg-slate-800 border border-slate-700 rounded-xl p-6 shadow-2xl">
+                        <span class="inline-block rounded-full px-3 py-1 text-xs font-semibold @r.Badge">@r.Name</span>
+                        <p class="mt-3 text-sm text-slate-300">@r.Description</p>
+                    </div>
+                }
+            </div>
+        </section>
+
+        @* ========== RODAPÉ ========== *@
+        <footer class="border-t border-slate-800 pt-6 text-center text-xs text-slate-500">
+            Carbon Open Telemetry · Trabalho APS
+        </footer>
+    </div>
+</div>
+
+@code {
+    private record Feature(string Icon, string Title, string Description);
+    private record RoleInfo(string Name, string Description, string Badge);
+
+    private static readonly Feature[] features =
+    [
+        new("✈️", "Cálculo de emissões",
+            "Informe origem, destino e dados do voo para estimar o CO₂ emitido em voos nacionais e internacionais."),
+        new("🙂", "Biometria facial",
+            "Confirmação de identidade por reconhecimento facial, com cadastro no primeiro acesso."),
+        new("🔐", "Autenticação segura",
+            "Login com tokens JWT e renovação de sessão, protegendo todas as rotas do sistema."),
+        new("👥", "Gestão de usuários",
+            "Administradores acompanham e gerenciam os usuários e seus respectivos perfis de acesso.")
+    ];
+
+    private static readonly RoleInfo[] roles =
+    [
+        new("General", "Pode calcular apenas voos nacionais.", "bg-slate-700 text-slate-200"),
+        new("Director", "Pode calcular voos nacionais e internacionais.", "bg-indigo-600/30 text-indigo-300"),
+        new("Admin", "Voos nacionais e internacionais, além da gestão de usuários.", "bg-emerald-600/30 text-emerald-300")
+    ];
+}