diff --git a/README.md b/README.md
index 1e874b5..50439dc 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,10 @@ Aplicação Aggios
 
 Projeto em desenvolvimento.
 
+### Atualização recente
+
+- 07/12/2025: Site institucional (`frontend-aggios.app`) atualizado com suporte completo a dark mode baseado em Tailwind CSS v4 e `next-themes`.
+
 ## Como Usar
 
 Para configurar e executar o projeto, consulte a documentação em `docs/`.
diff --git a/frontend-aggios.app/app/globals.css b/frontend-aggios.app/app/globals.css
index 9363d23..66f8dbc 100644
--- a/frontend-aggios.app/app/globals.css
+++ b/frontend-aggios.app/app/globals.css
@@ -1,57 +1,49 @@
+@config "../tailwind.config.js";
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&family=Fira+Code:wght@400&display=swap');
 @import url('https://cdn.jsdelivr.net/npm/remixicon@4.0.0/fonts/remixicon.css');
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
+/* Configuração global */
+* {
+  @apply border-zinc-200 dark:border-zinc-800;
+}
 
-  /* Design System Colors - Somente Gradientes */
-  --gradient: linear-gradient(90deg, #FF3A05, #FF0080);
-  --gradient-text: linear-gradient(to right, #FF3A05, #FF0080);
-  --gradient-hover: linear-gradient(135deg, #FF3A05, #FF0080);
-
-  /* Text Colors */
-  --text-primary: #171717;
-  --text-secondary: #7D7D7D;
-  --text-light: #A3A3A3;
-
-  /* UI Colors */
-  --border: #E5E5E5;
-  --surface: #FAFAFA;
-
-  /* Fonts */
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
-  --font-heading: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+html {
+  @apply antialiased;
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: var(--font-sans);
+  @apply bg-white dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100;
+  font-family: 'Inter', system-ui, sans-serif;
   scroll-behavior: smooth;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-/* Gradient text utility */
+.font-heading {
+  font-family: 'Open Sans', system-ui, sans-serif;
+}
+
+.font-mono {
+  font-family: 'Fira Code', ui-monospace, monospace;
+}
+
+/* Classes do design system - gradientes sempre visíveis */
 .gradient-text {
-  background: var(--gradient-text);
+  background: linear-gradient(135deg, #FF3A05, #FF0080);
   -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
   background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
-/* Gradient utilities */
-.gradient-bg {
-  background: var(--gradient);
+.bg-linear-to-r {
+  background: linear-gradient(to right, #FF3A05, #FF0080);
 }
 
-.gradient-hover-bg {
-  background: var(--gradient-hover);
+.bg-linear-to-br {
+  background: linear-gradient(to bottom right, #FF3A05, #FF0080);
 }
 
-/* Focus states */
+/* Estados de foco */
 *:focus-visible {
-  outline: 2px solid #FF3A05;
-  outline-offset: 2px;
+  @apply outline-2 outline-offset-2 outline-orange-500;
 }
\ No newline at end of file
diff --git a/frontend-aggios.app/app/layout.tsx b/frontend-aggios.app/app/layout.tsx
index f7fa87e..8c80ade 100644
--- a/frontend-aggios.app/app/layout.tsx
+++ b/frontend-aggios.app/app/layout.tsx
@@ -1,20 +1,16 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+import { ThemeProvider } from "next-themes";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Aggios - Plataforma de Gestão Financeira",
+  description: "A plataforma completa para gestão de agências e clientes. Controle financeiro, relatórios inteligentes e muito mais.",
+  keywords: "gestão financeira, agências, relatórios, dashboard, controle financeiro",
+  openGraph: {
+    title: "Aggios - Transforme sua gestão financeira",
+    description: "A plataforma completa para gestão de agências e clientes.",
+    type: "website",
+  },
 };
 
 export default function RootLayout({
@@ -23,11 +19,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html lang="pt-BR" suppressHydrationWarning>
+      <body className="antialiased">
+        <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/frontend-aggios.app/app/page.tsx b/frontend-aggios.app/app/page.tsx
index 7c081b7..ae6f14d 100644
--- a/frontend-aggios.app/app/page.tsx
+++ b/frontend-aggios.app/app/page.tsx
@@ -1,28 +1,30 @@
 import Image from "next/image";
 import Link from "next/link";
+import ThemeToggle from "@/components/ThemeToggle";
 
 export default function Home() {
   return (
     <>
       {/* Header */}
-      <header className="bg-white border-b border-zinc-200">
+      <header className="fixed inset-x-0 top-0 z-50 border-b border-zinc-200/70 dark:border-zinc-800/70 bg-white/90 dark:bg-zinc-950/80 backdrop-blur-xl shadow-sm transition-colors">
         <div className="max-w-7xl mx-auto px-6 lg:px-8">
           <div className="flex items-center justify-between py-4">
             <div className="flex items-center gap-2">
               <div className="w-8 h-8 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-lg flex items-center justify-center">
                 <span className="text-white font-bold text-sm">A</span>
               </div>
-              <span className="font-heading font-bold text-xl text-zinc-900">aggios</span>
+              <span className="font-heading font-bold text-xl text-zinc-900 dark:text-white transition-colors">aggios</span>
             </div>
 
             <nav className="hidden md:flex items-center gap-8">
-              <a href="#features" className="text-zinc-600 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Recursos</a>
-              <a href="#pricing" className="text-zinc-600 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Preços</a>
-              <a href="#contact" className="text-zinc-600 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Contato</a>
+              <a href="#features" className="text-zinc-600 dark:text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Recursos</a>
+              <a href="#pricing" className="text-zinc-600 dark:text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Preços</a>
+              <a href="#contact" className="text-zinc-600 dark:text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all">Contato</a>
             </nav>
 
             <div className="flex items-center gap-4">
-              <Link href="https://dash.aggios.app/login" className="text-zinc-600 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all font-medium">
+              <ThemeToggle />
+              <Link href="https://dash.aggios.app/login" className="text-zinc-600 dark:text-zinc-400 hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:bg-clip-text hover:text-transparent transition-all font-medium">
                 Entrar
               </Link>
               <Link href="https://dash.aggios.app/cadastro" className="px-6 py-2 bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
@@ -33,265 +35,267 @@ export default function Home() {
         </div>
       </header>
 
-      {/* Hero Section */}
-      <section className="py-20 bg-white">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <div className="text-center">
-            <div className="inline-flex items-center gap-2 px-4 py-2 bg-linear-to-r from-[#FF3A05]/10 to-[#FF0080]/10 rounded-full text-sm font-medium mb-6">
-              <i className="ri-rocket-line text-base bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
-              <span className="bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent">
-                Plataforma de Gestão Financeira
-              </span>
-            </div>
+      <main className="pt-28 bg-white dark:bg-zinc-950 transition-colors">
+        {/* Hero Section */}
+        <section className="py-20 bg-white dark:bg-zinc-900 transition-colors">
+          <div className="max-w-7xl mx-auto px-6 lg:px-8">
+            <div className="text-center">
+              <div className="inline-flex items-center gap-2 px-4 py-2 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-full text-sm font-semibold text-white shadow-lg shadow-[#FF3A05]/25 mb-6">
+                <i className="ri-rocket-line text-base"></i>
+                <span>
+                  Plataforma de Gestão Financeira
+                </span>
+              </div>
 
-            <h1 className="font-heading font-bold text-5xl lg:text-7xl text-zinc-900 mb-6 leading-tight">
-              Transforme sua <br />
-              <span className="gradient-text">gestão financeira</span>
-            </h1>
+              <h1 className="font-heading font-bold text-5xl lg:text-7xl text-zinc-900 dark:text-white mb-6 leading-tight transition-colors">
+                Transforme sua <br />
+                <span className="gradient-text">gestão financeira</span>
+              </h1>
 
-            <p className="text-xl text-zinc-600 mb-8 max-w-3xl mx-auto leading-relaxed">
-              A plataforma completa para gestão de agências e clientes.
-              Controle financeiro, relatórios inteligentes e muito mais.
-            </p>
+              <p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 max-w-3xl mx-auto leading-relaxed transition-colors">
+                A plataforma completa para gestão de agências e clientes.
+                Controle financeiro, relatórios inteligentes e muito mais.
+              </p>
 
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-              <Link href="https://dash.aggios.app/cadastro" className="px-6 py-3 bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
-                <i className="ri-arrow-right-line mr-2"></i>
-                Começar Grátis
-              </Link>
-              <Link href="#demo" className="px-6 py-3 border-2 border-zinc-300 text-zinc-700 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all">
-                <i className="ri-play-circle-line mr-2"></i>
-                Ver Demo
-              </Link>
+              <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+                <Link href="https://dash.aggios.app/cadastro" className="px-6 py-3 bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
+                  <i className="ri-arrow-right-line mr-2"></i>
+                  Começar Grátis
+                </Link>
+                <Link href="#demo" className="px-6 py-3 border-2 border-zinc-300 text-zinc-700 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all">
+                  <i className="ri-play-circle-line mr-2"></i>
+                  Ver Demo
+                </Link>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* Features Section */}
-      <section id="features" className="py-20 bg-zinc-50">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 mb-6">
-              Recursos que fazem a <span className="gradient-text">diferença</span>
-            </h2>
-            <p className="text-xl text-zinc-600 max-w-3xl mx-auto">
-              Ferramentas poderosas para simplificar sua gestão e impulsionar seus resultados.
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
-              <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
-                <i className="ri-dashboard-3-line text-2xl text-white"></i>
-              </div>
-              <h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Dashboard Inteligente</h3>
-              <p className="text-zinc-600 leading-relaxed">Visualize todos os seus dados financeiros em tempo real com gráficos e métricas intuitivas.</p>
+        {/* Features Section */}
+        <section id="features" className="py-20 bg-zinc-50 dark:bg-zinc-800 transition-colors scroll-mt-32">
+          <div className="max-w-7xl mx-auto px-6 lg:px-8">
+            <div className="text-center mb-16">
+              <h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
+                Recursos que fazem a <span className="gradient-text">diferença</span>
+              </h2>
+              <p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
+                Ferramentas poderosas para simplificar sua gestão e impulsionar seus resultados.
+              </p>
             </div>
 
-            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
-              <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
-                <i className="ri-team-line text-2xl text-white"></i>
-              </div>
-              <h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Gestão de Clientes</h3>
-              <p className="text-zinc-600 leading-relaxed">Organize e acompanhe todos os seus clientes com informações detalhadas e histórico completo.</p>
-            </div>
-
-            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
-              <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
-                <i className="ri-file-chart-line text-2xl text-white"></i>
-              </div>
-              <h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Relatórios Avançados</h3>
-              <p className="text-zinc-600 leading-relaxed">Gere relatórios detalhados e personalizados para tomar decisões mais assertivas.</p>
-            </div>
-
-            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
-              <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
-                <i className="ri-secure-payment-line text-2xl text-white"></i>
-              </div>
-              <h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Segurança Total</h3>
-              <p className="text-zinc-600 leading-relaxed">Seus dados protegidos com criptografia de ponta e backup automático na nuvem.</p>
-            </div>
-
-            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
-              <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
-                <i className="ri-smartphone-line text-2xl text-white"></i>
-              </div>
-              <h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Acesso Mobile</h3>
-              <p className="text-zinc-600 leading-relaxed">Gerencie seu negócio de qualquer lugar com nossa plataforma responsiva e intuitiva.</p>
-            </div>
-
-            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
-              <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
-                <i className="ri-customer-service-2-line text-2xl text-white"></i>
-              </div>
-              <h3 className="font-heading font-bold text-xl text-zinc-900 mb-4">Suporte 24/7</h3>
-              <p className="text-zinc-600 leading-relaxed">Conte com nossa equipe especializada sempre que precisar, em qualquer horário.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Pricing Section */}
-      <section id="pricing" className="py-20 bg-white">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 mb-6">
-              Planos para todos os <span className="gradient-text">tamanhos</span>
-            </h2>
-            <p className="text-xl text-zinc-600 max-w-3xl mx-auto">
-              Escolha o plano ideal para sua agência e comece a transformar sua gestão hoje mesmo.
-            </p>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
-            {/* Plano Básico */}
-            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
-              <div className="text-center mb-8">
-                <h3 className="font-heading font-bold text-xl text-zinc-900 mb-2">Básico</h3>
-                <div className="flex items-baseline justify-center gap-1 mb-2">
-                  <span className="text-4xl font-bold text-zinc-900">R$ 29</span>
-                  <span className="text-zinc-600">/mês</span>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+              <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 transition-all">
+                <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
+                  <i className="ri-dashboard-3-line text-2xl text-white"></i>
                 </div>
-                <p className="text-zinc-600">Perfeito para começar</p>
+                <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Dashboard Inteligente</h3>
+                <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Visualize todos os seus dados financeiros em tempo real com gráficos e métricas intuitivas.</p>
               </div>
 
-              <ul className="space-y-4 mb-8">
-                <li className="flex items-center gap-3">
-                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
-                  <span className="text-zinc-600">Até 10 clientes</span>
-                </li>
-                <li className="flex items-center gap-3">
-                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
-                  <span className="text-zinc-600">Dashboard básico</span>
-                </li>
-                <li className="flex items-center gap-3">
-                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
-                  <span className="text-zinc-600">Relatórios mensais</span>
-                </li>
-                <li className="flex items-center gap-3">
-                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
-                  <span className="text-zinc-600">Suporte por email</span>
-                </li>
-              </ul>
-
-              <Link href="https://dash.aggios.app/cadastro" className="w-full px-6 py-3 border-2 border-zinc-200 text-zinc-700 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all block text-center">
-                Começar Grátis
-              </Link>
-            </div>
-
-            {/* Plano Pro */}
-            <div className="bg-linear-to-br from-[#FF3A05] to-[#FF0080] p-8 rounded-2xl text-white shadow-2xl transform scale-105">
-              <div className="text-center mb-8">
-                <div className="inline-flex items-center gap-2 px-3 py-1 bg-white/20 rounded-full text-sm font-medium mb-4">
-                  <i className="ri-star-line"></i>
-                  Mais Popular
+              <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 transition-all">
+                <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
+                  <i className="ri-team-line text-2xl text-white"></i>
                 </div>
-                <h3 className="font-heading font-bold text-xl mb-2">Pro</h3>
-                <div className="flex items-baseline justify-center gap-1 mb-2">
-                  <span className="text-4xl font-bold">R$ 79</span>
-                  <span className="text-white/80">/mês</span>
-                </div>
-                <p className="text-white/80">Para agências em crescimento</p>
+                <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Gestão de Clientes</h3>
+                <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Organize e acompanhe todos os seus clientes com informações detalhadas e histórico completo.</p>
               </div>
 
-              <ul className="space-y-4 mb-8">
-                <li className="flex items-center gap-3">
-                  <i className="ri-check-line text-white text-lg"></i>
-                  <span>Até 100 clientes</span>
-                </li>
-                <li className="flex items-center gap-3">
-                  <i className="ri-check-line text-white text-lg"></i>
-                  <span>Dashboard completo</span>
-                </li>
-                <li className="flex items-center gap-3">
-                  <i className="ri-check-line text-white text-lg"></i>
-                  <span>Relatórios ilimitados</span>
-                </li>
-                <li className="flex items-center gap-3">
-                  <i className="ri-check-line text-white text-lg"></i>
-                  <span>Suporte prioritário</span>
-                </li>
-                <li className="flex items-center gap-3">
-                  <i className="ri-check-line text-white text-lg"></i>
-                  <span>API integrations</span>
-                </li>
-              </ul>
-
-              <Link href="https://dash.aggios.app/cadastro" className="w-full px-6 py-3 bg-white text-zinc-900 font-semibold rounded-lg hover:bg-white/90 transition-colors block text-center">
-                Começar Agora
-              </Link>
-            </div>
-
-            {/* Plano Enterprise */}
-            <div className="bg-white p-8 rounded-2xl border border-zinc-200 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 transition-all">
-              <div className="text-center mb-8">
-                <h3 className="font-heading font-bold text-xl text-zinc-900 mb-2">Enterprise</h3>
-                <div className="flex items-baseline justify-center gap-1 mb-2">
-                  <span className="text-4xl font-bold text-zinc-900">R$ 199</span>
-                  <span className="text-zinc-600">/mês</span>
+              <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 transition-all">
+                <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
+                  <i className="ri-file-chart-line text-2xl text-white"></i>
                 </div>
-                <p className="text-zinc-600">Para grandes agências</p>
+                <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Relatórios Avançados</h3>
+                <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Gere relatórios detalhados e personalizados para tomar decisões mais assertivas.</p>
               </div>
 
-              <ul className="space-y-4 mb-8">
-                <li className="flex items-center gap-3">
-                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
-                  <span className="text-zinc-600">Clientes ilimitados</span>
-                </li>
-                <li className="flex items-center gap-3">
-                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
-                  <span className="text-zinc-600">Dashboard personalizado</span>
-                </li>
-                <li className="flex items-center gap-3">
-                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
-                  <span className="text-zinc-600">Relatórios avançados</span>
-                </li>
-                <li className="flex items-center gap-3">
-                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
-                  <span className="text-zinc-600">Suporte dedicado</span>
-                </li>
-                <li className="flex items-center gap-3">
-                  <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
-                  <span className="text-zinc-600">White label</span>
-                </li>
-              </ul>
+              <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 transition-all">
+                <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
+                  <i className="ri-secure-payment-line text-2xl text-white"></i>
+                </div>
+                <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Segurança Total</h3>
+                <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Seus dados protegidos com criptografia de ponta e backup automático na nuvem.</p>
+              </div>
 
-              <Link href="#contact" className="w-full px-6 py-3 border-2 border-zinc-200 text-zinc-700 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all block text-center">
-                Falar com Vendas
-              </Link>
+              <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 transition-all">
+                <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
+                  <i className="ri-smartphone-line text-2xl text-white"></i>
+                </div>
+                <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Acesso Mobile</h3>
+                <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Gerencie seu negócio de qualquer lugar com nossa plataforma responsiva e intuitiva.</p>
+              </div>
+
+              <div className="bg-white dark:bg-zinc-900 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 transition-all">
+                <div className="w-12 h-12 bg-linear-to-r from-[#FF3A05] to-[#FF0080] rounded-xl flex items-center justify-center mb-6">
+                  <i className="ri-customer-service-2-line text-2xl text-white"></i>
+                </div>
+                <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-4 transition-colors">Suporte 24/7</h3>
+                <p className="text-zinc-600 dark:text-zinc-400 leading-relaxed transition-colors">Conte com nossa equipe especializada sempre que precisar, em qualquer horário.</p>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* CTA Section */}
-      <section className="py-20 bg-zinc-50">
-        <div className="max-w-7xl mx-auto px-6 lg:px-8">
-          <div className="text-center">
-            <h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 mb-6">
-              Pronto para <span className="gradient-text">começar?</span>
-            </h2>
-            <p className="text-xl text-zinc-600 mb-8 max-w-3xl mx-auto">
-              Junte-se a centenas de agências que já transformaram sua gestão com a Aggios.
-            </p>
+        {/* Pricing Section */}
+        <section id="pricing" className="py-20 bg-white dark:bg-zinc-900 transition-colors scroll-mt-32">
+          <div className="max-w-7xl mx-auto px-6 lg:px-8">
+            <div className="text-center mb-16">
+              <h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
+                Planos para todos os <span className="gradient-text">tamanhos</span>
+              </h2>
+              <p className="text-xl text-zinc-600 dark:text-zinc-400 max-w-3xl mx-auto transition-colors">
+                Escolha o plano ideal para sua agência e comece a transformar sua gestão hoje mesmo.
+              </p>
+            </div>
 
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-              <Link href="https://dash.aggios.app/cadastro" className="px-6 py-3 bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
-                <i className="ri-rocket-line mr-2"></i>
-                Começar Grátis Agora
-              </Link>
-              <Link href="#contact" className="px-6 py-3 border-2 border-zinc-300 text-zinc-700 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all">
-                <i className="ri-phone-line mr-2"></i>
-                Falar com Especialista
-              </Link>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+              {/* Plano Básico */}
+              <div className="bg-white dark:bg-zinc-800 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 transition-all">
+                <div className="text-center mb-8">
+                  <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-2 transition-colors">Básico</h3>
+                  <div className="flex items-baseline justify-center gap-1 mb-2">
+                    <span className="text-4xl font-bold text-zinc-900 dark:text-white transition-colors">R$ 29</span>
+                    <span className="text-zinc-600 dark:text-zinc-400 transition-colors">/mês</span>
+                  </div>
+                  <p className="text-zinc-600 dark:text-zinc-400 transition-colors">Perfeito para começar</p>
+                </div>
+
+                <ul className="space-y-4 mb-8">
+                  <li className="flex items-center gap-3">
+                    <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
+                    <span className="text-zinc-600 dark:text-zinc-300 transition-colors">Até 10 clientes</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
+                    <span className="text-zinc-600 dark:text-zinc-300 transition-colors">Dashboard básico</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
+                    <span className="text-zinc-600 dark:text-zinc-300 transition-colors">Relatórios mensais</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
+                    <span className="text-zinc-600 dark:text-zinc-300 transition-colors">Suporte por email</span>
+                  </li>
+                </ul>
+
+                <Link href="https://dash.aggios.app/cadastro" className="w-full px-6 py-3 border-2 border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all block text-center">
+                  Começar Grátis
+                </Link>
+              </div>
+
+              {/* Plano Pro */}
+              <div className="bg-linear-to-br from-[#FF3A05] to-[#FF0080] p-8 rounded-2xl text-white shadow-2xl transform scale-105">
+                <div className="text-center mb-8">
+                  <div className="inline-flex items-center gap-2 px-3 py-1 mb-4 rounded-full bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-sm font-semibold tracking-tight text-white shadow-lg shadow-black/20">
+                    <i className="ri-star-line text-xs"></i>
+                    <span>Mais Popular</span>
+                  </div>
+                  <h3 className="font-heading font-bold text-xl mb-2">Pro</h3>
+                  <div className="flex items-baseline justify-center gap-1 mb-2">
+                    <span className="text-4xl font-bold">R$ 79</span>
+                    <span className="text-white/80">/mês</span>
+                  </div>
+                  <p className="text-white/80">Para agências em crescimento</p>
+                </div>
+
+                <ul className="space-y-4 mb-8">
+                  <li className="flex items-center gap-3">
+                    <i className="ri-check-line text-lg text-white"></i>
+                    <span>Até 100 clientes</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <i className="ri-check-line text-lg text-white"></i>
+                    <span>Dashboard completo</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <i className="ri-check-line text-lg text-white"></i>
+                    <span>Relatórios ilimitados</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <i className="ri-check-line text-lg text-white"></i>
+                    <span>Suporte prioritário</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <i className="ri-check-line text-lg text-white"></i>
+                    <span>API integrations</span>
+                  </li>
+                </ul>
+
+                <Link href="https://dash.aggios.app/cadastro" className="w-full px-6 py-3 bg-white text-zinc-900 font-semibold rounded-lg hover:bg-white/90 transition-colors block text-center">
+                  Começar Agora
+                </Link>
+              </div>
+
+              {/* Plano Enterprise */}
+              <div className="bg-white dark:bg-zinc-800 p-8 rounded-2xl border border-zinc-200 dark:border-zinc-700 hover:border-transparent hover:shadow-lg hover:shadow-[#FF3A05]/20 dark:hover:shadow-[#FF3A05]/10 transition-all">
+                <div className="text-center mb-8">
+                  <h3 className="font-heading font-bold text-xl text-zinc-900 dark:text-white mb-2 transition-colors">Enterprise</h3>
+                  <div className="flex items-baseline justify-center gap-1 mb-2">
+                    <span className="text-4xl font-bold text-zinc-900 dark:text-white transition-colors">R$ 199</span>
+                    <span className="text-zinc-600 dark:text-zinc-400 transition-colors">/mês</span>
+                  </div>
+                  <p className="text-zinc-600 dark:text-zinc-400 transition-colors">Para grandes agências</p>
+                </div>
+
+                <ul className="space-y-4 mb-8">
+                  <li className="flex items-center gap-3">
+                    <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
+                    <span className="text-zinc-600 dark:text-zinc-300 transition-colors">Clientes ilimitados</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
+                    <span className="text-zinc-600 dark:text-zinc-300 transition-colors">Dashboard personalizado</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
+                    <span className="text-zinc-600 dark:text-zinc-300 transition-colors">Relatórios avançados</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
+                    <span className="text-zinc-600 dark:text-zinc-300 transition-colors">Suporte dedicado</span>
+                  </li>
+                  <li className="flex items-center gap-3">
+                    <i className="ri-check-line text-lg bg-linear-to-r from-[#FF3A05] to-[#FF0080] bg-clip-text text-transparent"></i>
+                    <span className="text-zinc-600 dark:text-zinc-300 transition-colors">White label</span>
+                  </li>
+                </ul>
+
+                <Link href="#contact" className="w-full px-6 py-3 border-2 border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all block text-center">
+                  Falar com Vendas
+                </Link>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </section>
+
+        {/* CTA Section */}
+        <section className="py-20 bg-zinc-50 dark:bg-zinc-800 transition-colors">
+          <div className="max-w-7xl mx-auto px-6 lg:px-8">
+            <div className="text-center">
+              <h2 className="font-heading font-bold text-4xl lg:text-5xl text-zinc-900 dark:text-white mb-6 transition-colors">
+                Pronto para <span className="gradient-text">começar?</span>
+              </h2>
+              <p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 max-w-3xl mx-auto transition-colors">
+                Junte-se a centenas de agências que já transformaram sua gestão com a Aggios.
+              </p>
+
+              <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+                <Link href="https://dash.aggios.app/cadastro" className="px-6 py-3 bg-linear-to-r from-[#FF3A05] to-[#FF0080] text-white font-semibold rounded-lg hover:opacity-90 transition-opacity shadow-lg">
+                  <i className="ri-rocket-line mr-2"></i>
+                  Começar Grátis Agora
+                </Link>
+                <Link href="#contact" className="px-6 py-3 border-2 border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 font-semibold rounded-lg hover:border-transparent hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] hover:text-white transition-all">
+                  <i className="ri-phone-line mr-2"></i>
+                  Falar com Especialista
+                </Link>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
 
       {/* Footer */}
-      <footer id="contact" className="bg-zinc-900 text-white py-16">
+      <footer id="contact" className="bg-zinc-900 dark:bg-black text-white py-16 transition-colors scroll-mt-32">
         <div className="max-w-7xl mx-auto px-6 lg:px-8">
           <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
             <div className="md:col-span-2">
@@ -306,13 +310,13 @@ export default function Home() {
                 Transforme sua gestão e impulsione seus resultados.
               </p>
               <div className="flex items-center gap-4">
-                <a href="#" className="w-10 h-10 bg-zinc-800 rounded-lg flex items-center justify-center hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] transition-all group">
+                <a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] transition-all group">
                   <i className="ri-linkedin-line text-lg group-hover:text-white"></i>
                 </a>
-                <a href="#" className="w-10 h-10 bg-zinc-800 rounded-lg flex items-center justify-center hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] transition-all group">
+                <a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] transition-all group">
                   <i className="ri-twitter-line text-lg group-hover:text-white"></i>
                 </a>
-                <a href="#" className="w-10 h-10 bg-zinc-800 rounded-lg flex items-center justify-center hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] transition-all group">
+                <a href="#" className="w-10 h-10 bg-zinc-800 dark:bg-zinc-700 rounded-lg flex items-center justify-center hover:bg-linear-to-r hover:from-[#FF3A05] hover:to-[#FF0080] transition-all group">
                   <i className="ri-instagram-line text-lg group-hover:text-white"></i>
                 </a>
               </div>
@@ -339,7 +343,7 @@ export default function Home() {
             </div>
           </div>
 
-          <div className="border-t border-zinc-800 mt-12 pt-8 flex flex-col md:flex-row items-center justify-between">
+          <div className="border-t border-zinc-800 dark:border-zinc-700 mt-12 pt-8 flex flex-col md:flex-row items-center justify-between transition-colors">
             <p className="text-zinc-400 text-sm">
               © 2025 Aggios. Todos os direitos reservados.
             </p>
diff --git a/frontend-aggios.app/components/ThemeToggle.tsx b/frontend-aggios.app/components/ThemeToggle.tsx
new file mode 100644
index 0000000..326c88e
--- /dev/null
+++ b/frontend-aggios.app/components/ThemeToggle.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+export default function ThemeToggle() {
+    const { resolvedTheme, setTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) {
+        return (
+            <div className="h-11 w-11 rounded-full border border-zinc-200 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800" />
+        );
+    }
+
+    const isDark = resolvedTheme === 'dark';
+
+    return (
+        <button
+            type="button"
+            onClick={() => setTheme(isDark ? 'light' : 'dark')}
+            className="flex h-11 w-11 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-700 shadow-sm transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
+            aria-label={isDark ? 'Ativar tema claro' : 'Ativar tema escuro'}
+            title={isDark ? 'Alterar para modo claro' : 'Alterar para modo escuro'}
+        >
+            <i className={`text-xl ${isDark ? 'ri-moon-line' : 'ri-sun-line'}`} />
+        </button>
+    );
+}
\ No newline at end of file
diff --git a/frontend-aggios.app/package-lock.json b/frontend-aggios.app/package-lock.json
index 8abf805..d912607 100644
--- a/frontend-aggios.app/package-lock.json
+++ b/frontend-aggios.app/package-lock.json
@@ -9,33 +9,22 @@
       "version": "0.1.0",
       "dependencies": {
         "next": "16.0.7",
+        "next-themes": "^0.4.6",
         "react": "19.2.0",
         "react-dom": "19.2.0"
       },
       "devDependencies": {
-        "@tailwindcss/postcss": "^4",
+        "@tailwindcss/postcss": "^4.0.0-alpha.25",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "eslint": "^9",
         "eslint-config-next": "16.0.7",
-        "tailwindcss": "^4",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^4.0.0-alpha.25",
         "typescript": "^5"
       }
     },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -1244,49 +1233,42 @@
       }
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz",
-      "integrity": "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==",
+      "version": "4.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.0.0-alpha.25.tgz",
+      "integrity": "sha512-vrJFQRDB4KJ+hGYIPz01i4yDUANyqRq7VwPouq/jKBqkDYdHZ03MhNn4NcLwkml3jZTh0iCWkLkiD+F2DZ3v+A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/remapping": "^2.3.4",
-        "enhanced-resolve": "^5.18.3",
-        "jiti": "^2.6.1",
-        "lightningcss": "1.30.2",
-        "magic-string": "^0.30.21",
-        "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.17"
+        "enhanced-resolve": "^5.17.1",
+        "jiti": "^2.0.0-beta.3"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.17.tgz",
-      "integrity": "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==",
+      "version": "4.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.0.0-alpha.25.tgz",
+      "integrity": "sha512-B5ynEG7AuiYrIY8a+IZZ23fPAzMfViemqtt6A0CBC1qdEXQoUfX9IuZ/s6eGAaUQ+Ify+5rfCPyUFZPQHC8kGQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.17",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.17",
-        "@tailwindcss/oxide-darwin-x64": "4.1.17",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.17",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.17",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.17",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.17",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.17",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.17",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.17",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.17"
+        "@tailwindcss/oxide-android-arm64": "4.0.0-alpha.25",
+        "@tailwindcss/oxide-darwin-arm64": "4.0.0-alpha.25",
+        "@tailwindcss/oxide-darwin-x64": "4.0.0-alpha.25",
+        "@tailwindcss/oxide-freebsd-x64": "4.0.0-alpha.25",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.0-alpha.25",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.0.0-alpha.25",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.0.0-alpha.25",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.0.0-alpha.25",
+        "@tailwindcss/oxide-linux-x64-musl": "4.0.0-alpha.25",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.0.0-alpha.25"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.17.tgz",
-      "integrity": "sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==",
+      "version": "4.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.0.0-alpha.25.tgz",
+      "integrity": "sha512-3YOWSqtVRxw7cQMlkZsIax4J6+0oeCCZzl7bsJXdorHCW4UQuNZWsnGo3u58fON2/H6TM8O38LY18NS/ibPtog==",
       "cpu": [
         "arm64"
       ],
@@ -1301,9 +1283,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.17.tgz",
-      "integrity": "sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==",
+      "version": "4.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.0.0-alpha.25.tgz",
+      "integrity": "sha512-YlfFSA7HTFELwspc4jFF5e9SO/Yj2wXpMOHPLiXKix3ykK44703mSs/JHRIJApL0cLYL12Xk2cJDXu/kvf3zDA==",
       "cpu": [
         "arm64"
       ],
@@ -1318,9 +1300,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.17.tgz",
-      "integrity": "sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==",
+      "version": "4.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.0.0-alpha.25.tgz",
+      "integrity": "sha512-Ml9nmmff/RXtQ3BWXmnMT+UuXa1zpDLv7tUe7Wk5Ji1Vzb+N98TeC307HjM4/nnq+2sivN7NQ0Bezuoc3zeoFQ==",
       "cpu": [
         "x64"
       ],
@@ -1335,9 +1317,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.17.tgz",
-      "integrity": "sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==",
+      "version": "4.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.0.0-alpha.25.tgz",
+      "integrity": "sha512-qE4BSZfamzpyX0pTNCGYPxK65v+BbyCP2LyJLLINCf95QDLKMjjHaheJ/VDtJ0t3Yx7fgv4uqkxsavmSYsModA==",
       "cpu": [
         "x64"
       ],
@@ -1352,9 +1334,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.17.tgz",
-      "integrity": "sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==",
+      "version": "4.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.0.0-alpha.25.tgz",
+      "integrity": "sha512-2lHD9BvBzAbxnSxpZ2CTIHTAOwImf78V7WFALoJLx7jpRw/NRkC4UhDdML/qBka2ARGr9C7cwKr7KsI+8FK88w==",
       "cpu": [
         "arm"
       ],
@@ -1369,9 +1351,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.17.tgz",
-      "integrity": "sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==",
+      "version": "4.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.0.0-alpha.25.tgz",
+      "integrity": "sha512-X8nohOQ/0u1bGoG25/4kZGV2N0aYBuvztTh/iAJwKj2zfZtZ082kv+6Ye4heDIGk2pZslsQchw9mtBkcA8rHVA==",
       "cpu": [
         "arm64"
       ],
@@ -1386,9 +1368,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.17.tgz",
-      "integrity": "sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==",
+      "version": "4.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.0.0-alpha.25.tgz",
+      "integrity": "sha512-OFb6hRpFD9WgV1EtYifxcB/KuqzUOsEebEAvT7OGu6CaLc0EMTWFOy0vaiF8flp67oofyqoj65Q12p305+SzSw==",
       "cpu": [
         "arm64"
       ],
@@ -1403,9 +1385,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.17.tgz",
-      "integrity": "sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==",
+      "version": "4.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.0.0-alpha.25.tgz",
+      "integrity": "sha512-hnAWqYGqsjoC2kxJAEMKQoNK4lQfd/k/EZJw7Ep8ETMwEF7Y0bIuT/0IWwQ/JnFkRsYKYYuPt+6VwpJ6nGXclQ==",
       "cpu": [
         "x64"
       ],
@@ -1420,9 +1402,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.17.tgz",
-      "integrity": "sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==",
+      "version": "4.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.0.0-alpha.25.tgz",
+      "integrity": "sha512-LpE7gYpHZPMHaHivri3bMau/ib3uqSGzsEoKZmMF1FAahsqXS6gjoxlH2zlrQUYSHwcopIJ+uTS2LKn+7SvOiA==",
       "cpu": [
         "x64"
       ],
@@ -1436,57 +1418,10 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.17.tgz",
-      "integrity": "sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==",
-      "bundleDependencies": [
-        "@napi-rs/wasm-runtime",
-        "@emnapi/core",
-        "@emnapi/runtime",
-        "@tybys/wasm-util",
-        "@emnapi/wasi-threads",
-        "tslib"
-      ],
-      "cpu": [
-        "wasm32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/core": "^1.6.0",
-        "@emnapi/runtime": "^1.6.0",
-        "@emnapi/wasi-threads": "^1.1.0",
-        "@napi-rs/wasm-runtime": "^1.0.7",
-        "@tybys/wasm-util": "^0.10.1",
-        "tslib": "^2.4.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.17.tgz",
-      "integrity": "sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.17.tgz",
-      "integrity": "sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==",
+      "version": "4.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.0.0-alpha.25.tgz",
+      "integrity": "sha512-LafwWEuJl/2Jba6yArcE49GGA/bGT9GeLo1NyKqi0n7sGAdQwUXKVFWyL3OimNGS335l4cH8uuv3AnstsVm3Bw==",
       "cpu": [
         "x64"
       ],
@@ -1501,17 +1436,16 @@
       }
     },
     "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.17.tgz",
-      "integrity": "sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==",
+      "version": "4.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.0.0-alpha.25.tgz",
+      "integrity": "sha512-7fA6C8FCJqgRp3+jWJVvNtyEMHmvo5zoe89ex+X8V5xmhDo3Yrl1IW/oqVMGcxNcvrQxTEWlV3bGwSfJZyGqnQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.17",
-        "@tailwindcss/oxide": "4.1.17",
-        "postcss": "^8.4.41",
-        "tailwindcss": "4.1.17"
+        "@tailwindcss/node": "4.0.0-alpha.25",
+        "@tailwindcss/oxide": "4.0.0-alpha.25",
+        "lightningcss": "^1.26.0",
+        "tailwindcss": "4.0.0-alpha.25"
       }
     },
     "node_modules/@tybys/wasm-util": {
@@ -4849,16 +4783,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/magic-string": {
-      "version": "0.30.21",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
-      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.5"
-      }
-    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -5016,6 +4940,16 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -6036,9 +5970,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
-      "integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==",
+      "version": "4.0.0-alpha.25",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.0-alpha.25.tgz",
+      "integrity": "sha512-nysTVicWw8JC06+EAJvT8+4RAV7qZpuKwz0QOpfL88/+XKG+HIrawSz5XxXigF48l37ehZfREbqGiS7cCN90jg==",
       "dev": true,
       "license": "MIT"
     },
diff --git a/frontend-aggios.app/package.json b/frontend-aggios.app/package.json
index 47d9d2d..99ae578 100644
--- a/frontend-aggios.app/package.json
+++ b/frontend-aggios.app/package.json
@@ -10,17 +10,19 @@
   },
   "dependencies": {
     "next": "16.0.7",
+    "next-themes": "^0.4.6",
     "react": "19.2.0",
     "react-dom": "19.2.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4",
+    "@tailwindcss/postcss": "^4.0.0-alpha.25",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.0.7",
-    "tailwindcss": "^4",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.0.0-alpha.25",
     "typescript": "^5"
   }
 }
diff --git a/frontend-aggios.app/tailwind.config.js b/frontend-aggios.app/tailwind.config.js
new file mode 100644
index 0000000..dc8ebe5
--- /dev/null
+++ b/frontend-aggios.app/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+const config = {
+    content: [
+        "./app/**/*.{js,ts,jsx,tsx,mdx}",
+        "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    darkMode: "class",
+};
+module.exports = config;