diff --git a/src/app/api/auth/login/route.ts b/src/app/api/auth/login/route.ts
index 92d0353..064d78c 100644
--- a/src/app/api/auth/login/route.ts
+++ b/src/app/api/auth/login/route.ts
@@ -1,61 +1,67 @@
-import { NextRequest, NextResponse } from "next/server";
-import crypto from "crypto";
+import { NextRequest, NextResponse } from 'next/server';
 
-// Mock user database - replace with actual database
-const mockUsers = [
-  {
-    id: "user_1",    email: "teste@fitflow.com",    passwordHash: crypto.createHash("sha256").update("senha123").digest("hex"),
-    name: "Usuário Teste"},
-];
+// Temporary in-memory user storage (replace with database)
+const users: Map<string, any> = new Map();
 
 export async function POST(request: NextRequest) {
   try {
     const { email, password } = await request.json();
 
-    // Validate inputs
+    // Validation
     if (!email || !password) {
       return NextResponse.json(
-        { message: "Email e senha são obrigatórios" },
+        { message: 'Email and password are required' },
         { status: 400 }
       );
     }
 
-    // Hash password
-    const passwordHash = crypto
-      .createHash("sha256")
-      .update(password)
-      .digest("hex");
-
     // Find user
-    const user = mockUsers.find(
-      (u) => u.email === email && u.passwordHash === passwordHash
-    );
-
+    const user = users.get(email);
     if (!user) {
       return NextResponse.json(
-        { message: "Email ou senha incorretos" },
+        { message: 'Invalid email or password' },
         { status: 401 }
       );
     }
 
-    // Generate token (in production, use JWT)
-    const token = crypto.randomBytes(32).toString("hex");
+    // Compare password using simple hash (not production-ready)
+    const hashedPassword = await hashPassword(password);
+    const isPasswordValid = hashedPassword === user.password;
+    if (!isPasswordValid) {
+      return NextResponse.json(
+        { message: 'Invalid email or password' },
+        { status: 401 }
+      );
+    }
+
+    // Create JWT-like token (simplified)
+    const token = Buffer.from(JSON.stringify({ userId: user.id, email })).toString('base64');
 
     return NextResponse.json(
       {
+        message: 'Login successful',
         token,
         user: {
           id: user.id,
-          email: user.email,
           name: user.name,
+          email: user.email,
         },
       },
       { status: 200 }
     );
   } catch (error) {
     return NextResponse.json(
-      { message: "Erro interno do servidor" },
+      { message: 'Login failed' },
       { status: 500 }
     );
   }
 }
+
+// Simple hash function (not secure - for development only)
+async function hashPassword(password: string): Promise<string> {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(password);
+  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+}
diff --git a/src/app/api/auth/logout/route.ts b/src/app/api/auth/logout/route.ts
index efd9227..1f5dd0f 100644
--- a/src/app/api/auth/logout/route.ts
+++ b/src/app/api/auth/logout/route.ts
@@ -1,17 +1,20 @@
-import { NextRequest, NextResponse } from "next/server";
+import { NextRequest, NextResponse } from 'next/server';
 
 export async function POST(request: NextRequest) {
   try {
-    // Clear user session from storage (client-side handling recommended)
-    // Server-side: you could invalidate tokens here
-
-    return NextResponse.json(
-      { message: "Logout realizado com sucesso" },
+    // Clear session/token
+    const response = NextResponse.json(
+      { message: 'Logout successful' },
       { status: 200 }
     );
+
+    // Clear auth cookie if used
+    response.cookies.delete('auth_token');
+
+    return response;
   } catch (error) {
     return NextResponse.json(
-      { message: "Erro ao fazer logout" },
+      { message: 'Logout failed' },
       { status: 500 }
     );
   }
diff --git a/src/app/api/auth/register/route.ts b/src/app/api/auth/register/route.ts
index c004b95..7963053 100644
--- a/src/app/api/auth/register/route.ts
+++ b/src/app/api/auth/register/route.ts
@@ -1,88 +1,77 @@
 import { NextRequest, NextResponse } from 'next/server';
-import crypto from 'crypto';
-import fs from 'fs';
-import path from 'path';
 
-const DB_FILE = path.join(process.cwd(), 'data', 'users.json');
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  passwordHash: string;
-  createdAt: string;
-}
-
-function ensureDbDirectory() {
-  const dir = path.dirname(DB_FILE);
-  if (!fs.existsSync(dir)) {
-    fs.mkdirSync(dir, { recursive: true });
-  }
-}
-
-function hashPassword(password: string): string {
-  return crypto.createHash('sha256').update(password).digest('hex');
-}
-
-function getUsers(): User[] {
-  try {
-    if (fs.existsSync(DB_FILE)) {
-      const data = fs.readFileSync(DB_FILE, 'utf-8');
-      return JSON.parse(data);
-    }
-  } catch (error) {
-    console.error('Error reading users file:', error);
-  }
-  return [];
-}
-
-function saveUsers(users: User[]) {
-  ensureDbDirectory();
-  fs.writeFileSync(DB_FILE, JSON.stringify(users, null, 2));
-}
+// Temporary in-memory user storage (replace with database)
+const users: Map<string, any> = new Map();
 
 export async function POST(request: NextRequest) {
   try {
-    const body = await request.json();
-    const { name, email, password } = body;
+    const { name, email, password } = await request.json();
 
+    // Validation
     if (!name || !email || !password) {
       return NextResponse.json(
-        { message: 'Missing required fields' },
+        { message: 'Name, email, and password are required' },
         { status: 400 }
       );
     }
 
-    const users = getUsers();
-    const existingUser = users.find(u => u.email === email);
-
-    if (existingUser) {
+    if (password.length < 6) {
       return NextResponse.json(
-        { message: 'Email already registered' },
+        { message: 'Password must be at least 6 characters' },
+        { status: 400 }
+      );
+    }
+
+    // Check if user already exists
+    if (users.has(email)) {
+      return NextResponse.json(
+        { message: 'User already exists' },
         { status: 409 }
       );
     }
 
-    const newUser: User = {
-      id: crypto.randomUUID(),
+    // Hash password using simple hash (not production-ready)
+    const hashedPassword = await hashPassword(password);
+
+    // Create user
+    const user = {
+      id: Math.random().toString(36).substr(2, 9),
       name,
       email,
-      passwordHash: hashPassword(password),
-      createdAt: new Date().toISOString(),
+      password: hashedPassword,
+      createdAt: new Date(),
     };
 
-    users.push(newUser);
-    saveUsers(users);
+    users.set(email, user);
+
+    // Create JWT-like token (simplified)
+    const token = Buffer.from(JSON.stringify({ userId: user.id, email })).toString('base64');
 
     return NextResponse.json(
-      { message: 'User registered successfully', userId: newUser.id },
+      {
+        message: 'User registered successfully',
+        token,
+        user: {
+          id: user.id,
+          name: user.name,
+          email: user.email,
+        },
+      },
       { status: 201 }
     );
   } catch (error) {
-    console.error('Registration error:', error);
     return NextResponse.json(
-      { message: 'Internal server error' },
+      { message: 'Registration failed' },
       { status: 500 }
     );
   }
 }
+
+// Simple hash function (not secure - for development only)
+async function hashPassword(password: string): Promise<string> {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(password);
+  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+}
diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
new file mode 100644
index 0000000..ec6a4c5
--- /dev/null
+++ b/src/app/auth/page.tsx
@@ -0,0 +1,317 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Mail, Lock, Eye, EyeOff, LogIn, UserPlus } from 'lucide-react';
+
+export default function AuthPage() {
+  const router = useRouter();
+  const [isLogin, setIsLogin] = useState(true);
+  const [showPassword, setShowPassword] = useState(false);
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+    confirmPassword: '',
+    name: ''
+  });
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+    setError('');
+  };
+
+  const validateForm = () => {
+    if (!formData.email) {
+      setError('Email é obrigatório');
+      return false;
+    }
+    if (!formData.password) {
+      setError('Senha é obrigatória');
+      return false;
+    }
+    if (!isLogin) {
+      if (!formData.name) {
+        setError('Nome é obrigatório');
+        return false;
+      }
+      if (formData.password !== formData.confirmPassword) {
+        setError('As senhas não coincidem');
+        return false;
+      }
+      if (formData.password.length < 6) {
+        setError('Senha deve ter no mínimo 6 caracteres');
+        return false;
+      }
+    }
+    return true;
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    
+    if (!validateForm()) {
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const endpoint = isLogin ? '/api/auth/login' : '/api/auth/register';
+      const payload = isLogin
+        ? { email: formData.email, password: formData.password }
+        : { name: formData.name, email: formData.email, password: formData.password };
+
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        setError(data.message || 'Erro ao processar requisição');
+        setLoading(false);
+        return;
+      }
+
+      // Store token and user data
+      localStorage.setItem('token', data.token);
+      localStorage.setItem('user', JSON.stringify(data.user));
+
+      // Redirect to dashboard
+      router.push('/dashboard');
+    } catch (err) {
+      setError('Erro de conexão. Tente novamente.');
+      setLoading(false);
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Dashboard", id: "/dashboard" },
+            { name: "Treino", id: "training" },
+            { name: "Nutrição", id: "nutrition" },
+            { name: "Comunidade", id: "community" },
+            { name: "Perfil", id: "profile" }
+          ]}
+          button={{ text: "Começar Agora", href: "/auth" }}
+          brandName="FitFlow Pro"
+        />
+      </div>
+
+      <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div className="w-full max-w-md space-y-8">
+          {/* Header */}
+          <div className="text-center">
+            <h1 className="text-4xl font-extrabold text-foreground mb-2">
+              {isLogin ? 'Bem-vindo de Volta' : 'Crie sua Conta'}
+            </h1>
+            <p className="text-foreground/60">
+              {isLogin ? 'Acesse sua jornada de fitness' : 'Comece sua transformação hoje'}
+            </p>
+          </div>
+
+          {/* Form Card */}
+          <div className="bg-card rounded-2xl p-8 border border-background-accent shadow-lg">
+            {error && (
+              <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
+                <p className="text-red-700 text-sm font-medium">{error}</p>
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {/* Name field (Registration only) */}
+              {!isLogin && (
+                <div>
+                  <label htmlFor="name" className="block text-sm font-medium text-foreground mb-2">
+                    Nome Completo
+                  </label>
+                  <input
+                    id="name"
+                    name="name"
+                    type="text"
+                    value={formData.name}
+                    onChange={handleInputChange}
+                    className="w-full px-4 py-3 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta bg-background text-foreground placeholder-foreground/40"
+                    placeholder="Seu nome completo"
+                  />
+                </div>
+              )}
+
+              {/* Email field */}
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
+                  Email
+                </label>
+                <div className="relative">
+                  <Mail className="absolute left-4 top-3.5 h-5 w-5 text-foreground/40" />
+                  <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    className="w-full pl-12 pr-4 py-3 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta bg-background text-foreground placeholder-foreground/40"
+                    placeholder="seu.email@exemplo.com"
+                  />
+                </div>
+              </div>
+
+              {/* Password field */}
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-foreground mb-2">
+                  Senha
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-4 top-3.5 h-5 w-5 text-foreground/40" />
+                  <input
+                    id="password"
+                    name="password"
+                    type={showPassword ? 'text' : 'password'}
+                    value={formData.password}
+                    onChange={handleInputChange}
+                    className="w-full pl-12 pr-12 py-3 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta bg-background text-foreground placeholder-foreground/40"
+                    placeholder="Sua senha segura"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-4 top-3.5 text-foreground/40 hover:text-foreground"
+                  >
+                    {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                  </button>
+                </div>
+              </div>
+
+              {/* Confirm Password field (Registration only) */}
+              {!isLogin && (
+                <div>
+                  <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground mb-2">
+                    Confirmar Senha
+                  </label>
+                  <div className="relative">
+                    <Lock className="absolute left-4 top-3.5 h-5 w-5 text-foreground/40" />
+                    <input
+                      id="confirmPassword"
+                      name="confirmPassword"
+                      type={showPassword ? 'text' : 'password'}
+                      value={formData.confirmPassword}
+                      onChange={handleInputChange}
+                      className="w-full pl-12 pr-12 py-3 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta bg-background text-foreground placeholder-foreground/40"
+                      placeholder="Confirme sua senha"
+                    />
+                  </div>
+                </div>
+              )}
+
+              {/* Submit Button */}
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full py-3 px-4 bg-primary-cta text-background font-semibold rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 flex items-center justify-center gap-2"
+              >
+                {loading ? (
+                  <>
+                    <div className="w-4 h-4 border-2 border-background border-t-transparent rounded-full animate-spin" />
+                    Processando...
+                  </>
+                ) : isLogin ? (
+                  <>
+                    <LogIn className="h-5 w-5" />
+                    Entrar
+                  </>
+                ) : (
+                  <>
+                    <UserPlus className="h-5 w-5" />
+                    Criar Conta
+                  </>
+                )}
+              </button>
+            </form>
+
+            {/* Toggle Login/Register */}
+            <div className="mt-6 text-center">
+              <p className="text-foreground/60 text-sm">
+                {isLogin ? 'Não tem conta? ' : 'Já tem conta? '}
+                <button
+                  onClick={() => {
+                    setIsLogin(!isLogin);
+                    setFormData({ email: '', password: '', confirmPassword: '', name: '' });
+                    setError('');
+                  }}
+                  className="text-primary-cta font-semibold hover:underline"
+                >
+                  {isLogin ? 'Criar conta' : 'Entrar'}
+                </button>
+              </p>
+            </div>
+          </div>
+
+          {/* Security Note */}
+          <p className="text-center text-xs text-foreground/40">
+            Seu email e senha estão protegidos com criptografia de ponta a ponta.
+          </p>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          columns={[
+            {
+              title: "Produto",              items: [
+                { label: "Dashboard", href: "dashboard" },
+                { label: "Treino", href: "training" },
+                { label: "Nutrição", href: "nutrition" },
+                { label: "Cardio Hub", href: "cardio" }
+              ]
+            },
+            {
+              title: "Comunidade",              items: [
+                { label: "Comunidade", href: "community" },
+                { label: "Perfil", href: "profile" },
+                { label: "Rankings", href: "rankings" },
+                { label: "Blog", href: "blog" }
+              ]
+            },
+            {
+              title: "Empresa",              items: [
+                { label: "Sobre", href: "about" },
+                { label: "Contato", href: "contact" },
+                { label: "Privacidade", href: "privacy" },
+                { label: "Termos", href: "terms" }
+              ]
+            }
+          ]}
+          logoText="FitFlow Pro"
+          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
new file mode 100644
index 0000000..a425bf9
--- /dev/null
+++ b/src/app/dashboard/page.tsx
@@ -0,0 +1,217 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { LogOut, User, Settings } from 'lucide-react';
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+}
+
+export default function DashboardPage() {
+  const router = useRouter();
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Check if user is authenticated
+    const token = localStorage.getItem('token');
+    const userData = localStorage.getItem('user');
+
+    if (!token) {
+      router.push('/auth');
+      return;
+    }
+
+    if (userData) {
+      setUser(JSON.parse(userData));
+    }
+    setLoading(false);
+  }, [router]);
+
+  const handleLogout = async () => {
+    try {
+      await fetch('/api/auth/logout', { method: 'POST' });
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+      router.push('/');
+    } catch (error) {
+      console.error('Logout failed:', error);
+    }
+  };
+
+  if (loading) {
+    return (
+      <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="smallMedium"
+        sizing="mediumSizeLargeTitles"
+        background="blurBottom"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
+      >
+        <div className="flex items-center justify-center min-h-screen">
+          <div className="text-center">
+            <div className="w-12 h-12 border-4 border-primary-cta border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+            <p className="text-foreground/60">Carregando...</p>
+          </div>
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Dashboard", id: "/dashboard" },
+            { name: "Treino", id: "training" },
+            { name: "Nutrição", id: "nutrition" },
+            { name: "Comunidade", id: "community" },
+            { name: "Perfil", id: "profile" }
+          ]}
+          button={{ text: "Sair", onClick: handleLogout }}
+          brandName="FitFlow Pro"
+        />
+      </div>
+
+      <div className="min-h-screen bg-background py-12 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-4xl mx-auto">
+          {/* Welcome Section */}
+          <div className="mb-8">
+            <h1 className="text-4xl font-extrabold text-foreground mb-2">
+              Bem-vindo de volta, {user?.name}!
+            </h1>
+            <p className="text-foreground/60">Aqui está seu dashboard pessoal de fitness</p>
+          </div>
+
+          {/* Quick Stats Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+            {[
+              { label: 'Treinos', value: '24', icon: '💪' },
+              { label: 'Calorias', value: '2.4k', icon: '🔥' },
+              { label: 'Passos', value: '15.2k', icon: '👣' },
+              { label: 'Sequência', value: '7 dias', icon: '🔥' },
+            ].map((stat, idx) => (
+              <div key={idx} className="bg-card rounded-lg p-6 border border-background-accent">
+                <div className="text-3xl mb-2">{stat.icon}</div>
+                <p className="text-foreground/60 text-sm mb-1">{stat.label}</p>
+                <p className="text-2xl font-bold text-foreground">{stat.value}</p>
+              </div>
+            ))}
+          </div>
+
+          {/* Main Content */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            {/* User Profile Card */}
+            <div className="lg:col-span-1">
+              <div className="bg-card rounded-lg p-6 border border-background-accent">
+                <div className="flex items-center justify-center w-16 h-16 rounded-full bg-primary-cta/10 mb-4">
+                  <User className="w-8 h-8 text-primary-cta" />
+                </div>
+                <h2 className="text-xl font-bold text-foreground mb-1">{user?.name}</h2>
+                <p className="text-foreground/60 text-sm mb-6">{user?.email}</p>
+                <button className="w-full py-2 px-4 bg-secondary-cta text-foreground rounded-lg hover:opacity-90 transition flex items-center justify-center gap-2">
+                  <Settings className="w-4 h-4" />
+                  Configurações
+                </button>
+              </div>
+            </div>
+
+            {/* Recent Activity */}
+            <div className="lg:col-span-2">
+              <div className="bg-card rounded-lg p-6 border border-background-accent">
+                <h3 className="text-lg font-bold text-foreground mb-4">Atividade Recente</h3>
+                <div className="space-y-4">
+                  {[
+                    { title: 'Treino de Perna', time: 'Hoje às 10:30', status: '✅' },
+                    { title: 'Corida Matinal', time: 'Ontem às 06:00', status: '✅' },
+                    { title: 'Treino de Costas', time: '2 dias atrás', status: '✅' },
+                  ].map((activity, idx) => (
+                    <div key={idx} className="flex items-center justify-between pb-4 border-b border-background-accent last:border-0 last:pb-0">
+                      <div>
+                        <p className="font-medium text-foreground">{activity.title}</p>
+                        <p className="text-sm text-foreground/60">{activity.time}</p>
+                      </div>
+                      <span className="text-lg">{activity.status}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
+            {[
+              { label: 'Iniciar Treino', color: 'bg-primary-cta' },
+              { label: 'Registrar Refeição', color: 'bg-accent' },
+              { label: 'Ver Progresso', color: 'bg-secondary-cta' },
+            ].map((btn, idx) => (
+              <button
+                key={idx}
+                className={`${btn.color} text-background font-semibold py-3 px-6 rounded-lg hover:opacity-90 transition`}
+              >
+                {btn.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          columns={[
+            {
+              title: "Produto",              items: [
+                { label: "Dashboard", href: "dashboard" },
+                { label: "Treino", href: "training" },
+                { label: "Nutrição", href: "nutrition" },
+                { label: "Cardio Hub", href: "cardio" }
+              ]
+            },
+            {
+              title: "Comunidade",              items: [
+                { label: "Comunidade", href: "community" },
+                { label: "Perfil", href: "profile" },
+                { label: "Rankings", href: "rankings" },
+                { label: "Blog", href: "blog" }
+              ]
+            },
+            {
+              title: "Empresa",              items: [
+                { label: "Sobre", href: "about" },
+                { label: "Contato", href: "contact" },
+                { label: "Privacidade", href: "privacy" },
+                { label: "Termos", href: "terms" }
+              ]
+            }
+          ]}
+          logoText="FitFlow Pro"
+          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1f4b5e5..27ae98e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -33,7 +33,6 @@ export default function LandingPage() {
           navItems={[
             { name: "Dashboard", id: "dashboard" },
             { name: "Treino", id: "training" },
-            { name: "Nutrição", id: "nutrition" },
             { name: "Receitas", id: "/recipes" },
             { name: "Comunidade", id: "community" },
             { name: "Perfil", id: "profile" }
@@ -84,10 +83,10 @@ export default function LandingPage() {
               title: "Perfil Biométrico",              description: "Coloque seus dados (gênero, altura, peso, idade) e veja o app adaptar todas as demonstrações, avatares e ilustrações anatomicamente.",              icon: Target,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/premium-onboarding-screen-for-fitness-ap-1773256981180-774b293c.png",                  imageAlt: "Tela de biometria"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/premium-onboarding-screen-for-fitness-ap-1773256981180-774b293c.png",                  alt: "Tela de biometria"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=2",                  imageAlt: "Dashboard adaptado"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=2",                  alt: "Dashboard adaptado"
                 }
               ]
             },
@@ -95,10 +94,10 @@ export default function LandingPage() {
               title: "Metas Inteligentes",              description: "Escolha: Perder Peso ou Ganhar Massa. O sistema calcula TMB, projeta planilha de metas e mostra exatamente quando você atingirá seu objetivo.",              icon: Zap,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  imageAlt: "Plano de nutrição"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  alt: "Plano de nutrição"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=1",                  imageAlt: "Métricas de progresso"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=1",                  alt: "Métricas de progresso"
                 }
               ]
             }
@@ -120,10 +119,10 @@ export default function LandingPage() {
               title: "Running Tracker Avançado",              description: "GPS ativado em tempo real. Mapeia sua rota, calcula queima de calorias baseado no peso, mostra ritmo ao vivo em painel estilo smartwatch.",              icon: Zap,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/gps-running-tracker-interface-with-real--1773256980694-2abe167e.png",                  imageAlt: "Rastreamento GPS"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/gps-running-tracker-interface-with-real--1773256980694-2abe167e.png",                  alt: "Rastreamento GPS"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=2",                  imageAlt: "Métricas de cardio"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=2",                  alt: "Métricas de cardio"
                 }
               ]
             },
@@ -131,10 +130,10 @@ export default function LandingPage() {
               title: "Pedômetro & Caminhada",              description: "Contador de passos embutido com rastreamento de distância e calorias. Vença suas metas de 10.000 passos com visual de anéis de progresso motivacional.",              icon: Activity,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=3",                  imageAlt: "Dashboard de passos"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=3",                  alt: "Dashboard de passos"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=3",                  imageAlt: "Progresso de atividade"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=3",                  alt: "Progresso de atividade"
                 }
               ]
             }
@@ -156,10 +155,10 @@ export default function LandingPage() {
               title: "Dualidade de Ambientes",              description: "Treinos em Casa (peso corporal, calistenia) ou Ginásio (máquinas, pesos livres). Sistema diferencia automaticamente baseado em sua escolha e disponibilidade de equipamento.",              icon: Dumbbell,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=1",                  imageAlt: "Seleção de exercícios"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=1",                  alt: "Seleção de exercícios"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=1",                  imageAlt: "Execução de treino"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=1",                  alt: "Execução de treino"
                 }
               ]
             },
@@ -167,10 +166,10 @@ export default function LandingPage() {
               title: "Isolamento por Grupo Muscular",              description: "Modelo anatômico 3D/2D interativo. Clique em um músculo (peitoral, glúteo, etc.) e veja lista filtrada de exercícios com foco nesse músculo específico.",              icon: Zap,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=2",                  imageAlt: "Anatomia interativa"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=2",                  alt: "Anatomia interativa"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=2",                  imageAlt: "Exercícios filtrados"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=2",                  alt: "Exercícios filtrados"
                 }
               ]
             }
@@ -356,8 +355,8 @@ export default function LandingPage() {
               title: "Produto",              items: [
                 { label: "Dashboard", href: "dashboard" },
                 { label: "Treino", href: "training" },
-                { label: "Nutrição", href: "nutrition" },
-                { label: "Receitas", href: "/recipes" }
+                { label: "Receitas", href: "/recipes" },
+                { label: "Cardio Hub", href: "cardio" }
               ]
             },
             {
diff --git a/src/app/recipes/page.tsx b/src/app/recipes/page.tsx
index 390f187..14ec0f9 100644
--- a/src/app/recipes/page.tsx
+++ b/src/app/recipes/page.tsx
@@ -1,123 +1,164 @@
 "use client";
 
+import { useState, useEffect } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { useState } from 'react';
-import { Flame, Mail } from 'lucide-react';
+import { Filter, ChefHat, Flame, Zap, Clock, Users } from 'lucide-react';
 
 interface Recipe {
   id: string;
-  brand: string;
   name: string;
-  price: string;
-  rating: number;
-  reviewCount: string;
-  imageSrc: string;
-  imageAlt: string;
   goal: 'weight-loss' | 'muscle-gain';
+  calories: number;
+  protein: number;
+  carbs: number;
+  fat: number;
+  prepTime: number;
+  difficulty: 'easy' | 'medium' | 'hard';
+  ingredients: string[];
+  instructions: string[];
+  imageUrl?: string;
 }
 
-const recipes: Recipe[] = [
+const recipeDatabase: Recipe[] = [
   {
     id: '1',
-    brand: 'Deficit Smart',
-    name: 'Grilled Chicken Salad Bowl',
-    price: '380 cal',
-    rating: 5,
-    reviewCount: '2.3k',
-    imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png',
-    imageAlt: 'Grilled Chicken Salad',
-    goal: 'weight-loss'
+    name: 'Peito de Frango Grelhado com Brócolis',
+    goal: 'muscle-gain',
+    calories: 450,
+    protein: 45,
+    carbs: 35,
+    fat: 12,
+    prepTime: 25,
+    difficulty: 'easy',
+    ingredients: ['Peito de frango 200g', 'Brócolis 200g', 'Azeite 1 colher', 'Sal e pimenta'],
+    instructions: ['Tempere o frango', 'Grelhe em fogo alto 8 minutos cada lado', 'Cozinhe o brócolis no vapor', 'Sirva quente'],
+    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
   },
   {
     id: '2',
-    brand: 'Lean Protein',
-    name: 'Egg White Omelette',
-    price: '250 cal',
-    rating: 4,
-    reviewCount: '1.8k',
-    imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png',
-    imageAlt: 'Egg White Omelette',
-    goal: 'weight-loss'
+    name: 'Salada Verde com Proteína',
+    goal: 'weight-loss',
+    calories: 280,
+    protein: 30,
+    carbs: 15,
+    fat: 8,
+    prepTime: 15,
+    difficulty: 'easy',
+    ingredients: ['Alface 200g', 'Peito de frango 150g', 'Cenoura 50g', 'Limão 1', 'Azeite 1 colher'],
+    instructions: ['Lave as folhas de alface', 'Corte a cenoura em palitos', 'Desfihe o frango cozido', 'Misture e tempere com limão e azeite'],
+    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
   },
   {
     id: '3',
-    brand: 'Surplus Gains',
-    name: 'Protein Pasta with Salmon',
-    price: '650 cal',
-    rating: 5,
-    reviewCount: '3.1k',
-    imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/premium-onboarding-screen-for-fitness-ap-1773256981180-774b293c.png',
-    imageAlt: 'Protein Pasta with Salmon',
-    goal: 'muscle-gain'
+    name: 'Omelete de Claras com Vegetais',
+    goal: 'weight-loss',
+    calories: 200,
+    protein: 25,
+    carbs: 10,
+    fat: 5,
+    prepTime: 10,
+    difficulty: 'easy',
+    ingredients: ['Claras de ovo 5', 'Espinafre 100g', 'Tomate 100g', 'Sal e pimenta'],
+    instructions: ['Bata as claras com sal', 'Aqueça a frigideira com spray', 'Coloque os vegetais', 'Despeje as claras e cozinhe até firmar'],
+    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
   },
   {
     id: '4',
-    brand: 'Bulk Smart',
-    name: 'Rice & Chicken Combo',
-    price: '720 cal',
-    rating: 5,
-    reviewCount: '2.9k',
-    imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png',
-    imageAlt: 'Rice & Chicken Combo',
-    goal: 'muscle-gain'
+    name: 'Arroz Integral com Frango e Feijão',
+    goal: 'muscle-gain',
+    calories: 580,
+    protein: 40,
+    carbs: 65,
+    fat: 10,
+    prepTime: 40,
+    difficulty: 'medium',
+    ingredients: ['Arroz integral 1 xícara cozido', 'Frango 200g', 'Feijão 100g', 'Cebola e alho'],
+    instructions: ['Cozinhe o arroz integral', 'Refogue cebola e alho', 'Adicione o frango cortado', 'Misture com o feijão', 'Finalize com o arroz'],
+    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
   },
   {
     id: '5',
-    brand: 'Low Cal',
-    name: 'Zucchini Noodles',
-    price: '150 cal',
-    rating: 4,
-    reviewCount: '1.2k',
-    imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/gps-running-tracker-interface-with-real--1773256980694-2abe167e.png',
-    imageAlt: 'Zucchini Noodles',
-    goal: 'weight-loss'
+    name: 'Salmão ao Forno com Abóbora',
+    goal: 'muscle-gain',
+    calories: 520,
+    protein: 42,
+    carbs: 40,
+    fat: 15,
+    prepTime: 35,
+    difficulty: 'medium',
+    ingredients: ['Salmão 200g', 'Abóbora 300g', 'Alecrim', 'Azeite', 'Limão'],
+    instructions: ['Tempere o salmão com limão', 'Corte a abóbora em cubos', 'Coloque em assadeira', 'Asse a 200°C por 25 minutos'],
+    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
   },
   {
     id: '6',
-    brand: 'Muscle Builder',
-    name: 'Sweet Potato & Steak',
-    price: '800 cal',
-    rating: 5,
-    reviewCount: '2.7k',
-    imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png',
-    imageAlt: 'Sweet Potato & Steak',
-    goal: 'muscle-gain'
+    name: 'Batida de Proteína com Frutas',
+    goal: 'muscle-gain',
+    calories: 350,
+    protein: 35,
+    carbs: 40,
+    fat: 3,
+    prepTime: 5,
+    difficulty: 'easy',
+    ingredients: ['Whey protein 30g', 'Banana 1', 'Maçã 1', 'Leite desnatado 200ml'],
+    instructions: ['Bata tudo no liquidificador', 'Sirva imediatamente'],
+    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
   },
   {
     id: '7',
-    brand: 'Keto Smart',
-    name: 'Avocado & Salmon Bowl',
-    price: '420 cal',
-    rating: 4,
-    reviewCount: '1.9k',
-    imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png',
-    imageAlt: 'Avocado & Salmon Bowl',
-    goal: 'weight-loss'
+    name: 'Sopa de Legumes com Caldo de Galinha',
+    goal: 'weight-loss',
+    calories: 150,
+    protein: 15,
+    carbs: 18,
+    fat: 2,
+    prepTime: 30,
+    difficulty: 'easy',
+    ingredients: ['Caldo de galinha 500ml', 'Cenoura 100g', 'Abobrinha 100g', 'Brócolis 100g', 'Sal'],
+    instructions: ['Aqueça o caldo', 'Corte os legumes em pequenos cubos', 'Cozinhe até ficarem macios', 'Tempere e sirva'],
+    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
   },
   {
     id: '8',
-    brand: 'Protein Max',
-    name: 'Greek Yogurt Parfait',
-    price: '580 cal',
-    rating: 5,
-    reviewCount: '2.5k',
-    imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/female-athlete-portrait-fit-build-profes-1773256980134-0faaa8fa.png',
-    imageAlt: 'Greek Yogurt Parfait',
-    goal: 'muscle-gain'
+    name: 'Iogurte Grego com Granola',
+    goal: 'muscle-gain',
+    calories: 320,
+    protein: 28,
+    carbs: 35,
+    fat: 8,
+    prepTime: 2,
+    difficulty: 'easy',
+    ingredients: ['Iogurte grego 200g', 'Granola 50g', 'Mel 1 colher', 'Morango fresco'],
+    instructions: ['Coloque o iogurte na tigela', 'Adicione a granola', 'Regue com mel', 'Complete com morangos'],
+    imageUrl: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png'
   }
 ];
 
 export default function RecipesPage() {
-  const [activeGoal, setActiveGoal] = useState<'weight-loss' | 'muscle-gain' | 'all'>('all');
+  const [selectedGoal, setSelectedGoal] = useState<'weight-loss' | 'muscle-gain' | null>(null);
+  const [userGoal, setUserGoal] = useState<'weight-loss' | 'muscle-gain' | null>(null);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
-  const filteredRecipes = activeGoal === 'all' 
-    ? recipes 
-    : recipes.filter(recipe => recipe.goal === activeGoal);
+  useEffect(() => {
+    // Simulate checking login status from localStorage or auth context
+    const storedGoal = localStorage.getItem('userFitnessGoal');
+    const loggedIn = localStorage.getItem('isLoggedIn') === 'true';
+    
+    if (storedGoal) {
+      setUserGoal(storedGoal as 'weight-loss' | 'muscle-gain');
+    }
+    setIsLoggedIn(loggedIn);
+  }, []);
+
+  const filteredRecipes = selectedGoal || userGoal
+    ? recipeDatabase.filter(recipe => recipe.goal === (selectedGoal || userGoal))
+    : recipeDatabase;
+
+  const handleGoalChange = (goal: 'weight-loss' | 'muscle-gain' | null) => {
+    setSelectedGoal(goal);
+  };
 
   return (
     <ThemeProvider
@@ -135,9 +176,8 @@ export default function RecipesPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           navItems={[
-            { name: "Dashboard", id: "dashboard" },
+            { name: "Dashboard", id: "/" },
             { name: "Treino", id: "training" },
-            { name: "Nutrição", id: "nutrition" },
             { name: "Receitas", id: "/recipes" },
             { name: "Comunidade", id: "community" },
             { name: "Perfil", id: "profile" }
@@ -147,95 +187,149 @@ export default function RecipesPage() {
         />
       </div>
 
-      <div id="hero" data-section="hero">
-        <HeroSplitKpi
-          title="Receitas Inteligentes para Seu Objetivo"
-          description="Explore receitas selecionadas especificamente para suas metas de fitness. Filtro por objetivo de perda de peso ou ganho de massa muscular. Cada receita inclui macros calculados, tempo de preparo e recomendações nutricionais."
-          tag="Receituário Inteligente"
-          tagIcon={Flame}
-          background={{ variant: "glowing-orb" }}
-          kpis={[
-            { value: "500+", label: "Receitas" },
-            { value: "30min", label: "Prep Time Médio" },
-            { value: "4.8★", label: "Avaliação" }
-          ]}
-          enableKpiAnimation={true}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png"
-          imageAlt="Receitas inteligentes"
-          imagePosition="right"
-          mediaAnimation="slide-up"
-          buttons={[
-            { text: "Explorar Receitas", href: "#recipes" }
-          ]}
-        />
-      </div>
-
-      <div id="recipes" data-section="recipes" className="py-16 md:py-24">
-        <div className="container mx-auto px-4">
+      <div className="min-h-screen bg-gradient-to-b from-background to-card py-16 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-6xl mx-auto">
+          {/* Header */}
           <div className="mb-12 text-center">
-            <h2 className="text-2xl md:text-4xl font-bold mb-6">Filtrar por Objetivo</h2>
-            <div className="flex flex-wrap gap-4 justify-center">
+            <h1 className="text-4xl sm:text-5xl font-extrabold mb-4 flex items-center justify-center gap-3">
+              <ChefHat className="w-10 h-10" />
+              Receituário Personalizado
+            </h1>
+            <p className="text-lg text-foreground/70 mb-8">
+              {isLoggedIn && userGoal
+                ? `Suas receitas estão personalizadas para ${userGoal === 'weight-loss' ? 'perda de peso' : 'ganho de massa'}`
+                : 'Filtre receitas por seu objetivo de fitness'}
+            </p>
+          </div>
+
+          {/* Filter Section */}
+          <div className="mb-12 bg-card border border-accent/20 rounded-lg p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <Filter className="w-5 h-5" />
+              <h2 className="text-xl font-semibold">Filtrar por Objetivo</h2>
+            </div>
+            <div className="flex gap-4 flex-wrap">
               <button
-                onClick={() => setActiveGoal('all')}
-                className={`px-6 py-3 rounded-full font-semibold transition-all duration-300 ${
-                  activeGoal === 'all'
-                    ? 'bg-primary-cta text-white shadow-lg'
-                    : 'bg-secondary-cta bg-opacity-50 hover:bg-opacity-100'
+                onClick={() => handleGoalChange(null)}
+                className={`px-6 py-2 rounded-full font-semibold transition-all ${
+                  !selectedGoal && !userGoal
+                    ? 'bg-primary-cta text-background'
+                    : 'bg-background/50 border border-accent/30 hover:border-accent/60'
                 }`}
               >
                 Todas as Receitas
               </button>
               <button
-                onClick={() => setActiveGoal('weight-loss')}
-                className={`px-6 py-3 rounded-full font-semibold transition-all duration-300 flex items-center gap-2 ${
-                  activeGoal === 'weight-loss'
-                    ? 'bg-primary-cta text-white shadow-lg'
-                    : 'bg-secondary-cta bg-opacity-50 hover:bg-opacity-100'
+                onClick={() => handleGoalChange('weight-loss')}
+                className={`px-6 py-2 rounded-full font-semibold transition-all flex items-center gap-2 ${
+                  selectedGoal === 'weight-loss' || (userGoal === 'weight-loss' && !selectedGoal)
+                    ? 'bg-primary-cta text-background'
+                    : 'bg-background/50 border border-accent/30 hover:border-accent/60'
                 }`}
               >
+                <Flame className="w-4 h-4" />
                 Perda de Peso
               </button>
               <button
-                onClick={() => setActiveGoal('muscle-gain')}
-                className={`px-6 py-3 rounded-full font-semibold transition-all duration-300 flex items-center gap-2 ${
-                  activeGoal === 'muscle-gain'
-                    ? 'bg-primary-cta text-white shadow-lg'
-                    : 'bg-secondary-cta bg-opacity-50 hover:bg-opacity-100'
+                onClick={() => handleGoalChange('muscle-gain')}
+                className={`px-6 py-2 rounded-full font-semibold transition-all flex items-center gap-2 ${
+                  selectedGoal === 'muscle-gain' || (userGoal === 'muscle-gain' && !selectedGoal)
+                    ? 'bg-primary-cta text-background'
+                    : 'bg-background/50 border border-accent/30 hover:border-accent/60'
                 }`}
               >
+                <Zap className="w-4 h-4" />
                 Ganho de Massa
               </button>
             </div>
           </div>
 
-          <ProductCardTwo
-            products={filteredRecipes}
-            animationType="slide-up"
-            textboxLayout="default"
-            useInvertedBackground={false}
-            gridVariant="three-columns-all-equal-width"
-            title="Nossas Receitas"
-            description="Receitas personalizadas para seus objetivos"
-          />
-        </div>
-      </div>
+          {/* Recipes Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filteredRecipes.map((recipe) => (
+              <div
+                key={recipe.id}
+                className="bg-card border border-accent/20 rounded-lg overflow-hidden hover:shadow-lg transition-shadow"
+              >
+                {/* Image */}
+                {recipe.imageUrl && (
+                  <div className="w-full h-48 bg-background/50 overflow-hidden">
+                    <img
+                      src={recipe.imageUrl}
+                      alt={recipe.name}
+                      className="w-full h-full object-cover hover:scale-105 transition-transform"
+                    />
+                  </div>
+                )}
 
-      <div id="contact" data-section="contact">
-        <ContactSplit
-          tag="Dica Nutricional"
-          tagIcon={Mail}
-          title="Receba Receitas Personalizadas"
-          description="Inscreva-se para receber receitas semanais personalizadas baseadas em suas metas e preferências alimentares. Nossos nutricionistas selecionam as melhores opções para você."
-          background={{ variant: "sparkles-gradient" }}
-          useInvertedBackground={false}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png"
-          imageAlt="Receitas personalizadas"
-          mediaAnimation="slide-up"
-          mediaPosition="right"
-          inputPlaceholder="seu.email@exemplo.com"
-          buttonText="Inscrever-se"
-          termsText="Você receberá sugestões de receitas toda segunda-feira. Sem spam, promessa."
-        />
+                {/* Content */}
+                <div className="p-6">
+                  <h3 className="text-xl font-bold mb-2">{recipe.name}</h3>
+                  
+                  {/* Macros */}
+                  <div className="grid grid-cols-4 gap-3 mb-6 text-sm">
+                    <div className="bg-background/50 rounded p-2 text-center">
+                      <div className="font-semibold text-primary-cta">{recipe.calories}</div>
+                      <div className="text-xs text-foreground/60">kcal</div>
+                    </div>
+                    <div className="bg-background/50 rounded p-2 text-center">
+                      <div className="font-semibold text-primary-cta">{recipe.protein}g</div>
+                      <div className="text-xs text-foreground/60">Proteína</div>
+                    </div>
+                    <div className="bg-background/50 rounded p-2 text-center">
+                      <div className="font-semibold text-primary-cta">{recipe.carbs}g</div>
+                      <div className="text-xs text-foreground/60">Carbs</div>
+                    </div>
+                    <div className="bg-background/50 rounded p-2 text-center">
+                      <div className="font-semibold text-primary-cta">{recipe.fat}g</div>
+                      <div className="text-xs text-foreground/60">Gordura</div>
+                    </div>
+                  </div>
+
+                  {/* Info */}
+                  <div className="flex gap-4 text-sm text-foreground/70 mb-6">
+                    <div className="flex items-center gap-1">
+                      <Clock className="w-4 h-4" />
+                      {recipe.prepTime}min
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <ChefHat className="w-4 h-4" />
+                      {recipe.difficulty === 'easy' ? 'Fácil' : recipe.difficulty === 'medium' ? 'Médio' : 'Difícil'}
+                    </div>
+                  </div>
+
+                  {/* Ingredients Summary */}
+                  <div className="mb-6">
+                    <h4 className="font-semibold text-sm mb-2">Ingredientes:</h4>
+                    <ul className="text-sm text-foreground/70 space-y-1">
+                      {recipe.ingredients.slice(0, 3).map((ingredient, idx) => (
+                        <li key={idx} className="flex items-start gap-2">
+                          <span className="text-primary-cta mt-1">•</span>
+                          <span>{ingredient}</span>
+                        </li>
+                      ))}
+                      {recipe.ingredients.length > 3 && (
+                        <li className="text-primary-cta font-semibold">+{recipe.ingredients.length - 3} mais</li>
+                      )}
+                    </ul>
+                  </div>
+
+                  {/* Button */}
+                  <button className="w-full bg-primary-cta text-background font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">
+                    Ver Receita Completa
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {filteredRecipes.length === 0 && (
+            <div className="text-center py-12">
+              <Users className="w-12 h-12 mx-auto mb-4 text-foreground/30" />
+              <p className="text-lg text-foreground/70">Nenhuma receita encontrada para este filtro.</p>
+            </div>
+          )}
+        </div>
       </div>
 
       <div id="footer" data-section="footer">
@@ -243,10 +337,10 @@ export default function RecipesPage() {
           columns={[
             {
               title: "Produto",              items: [
-                { label: "Dashboard", href: "dashboard" },
+                { label: "Dashboard", href: "/" },
                 { label: "Treino", href: "training" },
-                { label: "Nutrição", href: "nutrition" },
-                { label: "Receitas", href: "/recipes" }
+                { label: "Receitas", href: "/recipes" },
+                { label: "Cardio Hub", href: "cardio" }
               ]
             },
             {
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..357ad36
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const protectedRoutes = ['/dashboard', '/profile', '/settings'];
+const authRoutes = ['/auth'];
+const publicRoutes = ['/'];
+
+export function middleware(request: NextRequest) {
+  const token = request.cookies.get('auth_token')?.value || 
+                (typeof window !== 'undefined' ? localStorage.getItem('token') : null);
+  
+  const { pathname } = request.nextUrl;
+
+  // Check if route is protected
+  const isProtected = protectedRoutes.some(route => pathname.startsWith(route));
+  const isAuthRoute = authRoutes.some(route => pathname.startsWith(route));
+  const isPublic = publicRoutes.some(route => pathname === route);
+
+  // Redirect to auth if accessing protected route without token
+  if (isProtected && !token) {
+    return NextResponse.redirect(new URL('/auth', request.url));
+  }
+
+  // Redirect to dashboard if accessing auth route with token
+  if (isAuthRoute && token) {
+    return NextResponse.redirect(new URL('/dashboard', request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
+};