diff --git a/src/app/onboarding/page.tsx b/src/app/onboarding/page.tsx
index 909484e..c601675 100644
--- a/src/app/onboarding/page.tsx
+++ b/src/app/onboarding/page.tsx
@@ -4,9 +4,9 @@ import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { ChevronRight, User, Heart } from 'lucide-react';
+import { ChevronRight, User, Users } from 'lucide-react';
 
-interface ProfileData {
+interface UserProfile {
   name: string;
   gender: string;
   height: string;
@@ -14,50 +14,49 @@ interface ProfileData {
   age: string;
 }
 
-const GENDERS = ['Masculino', 'Feminino', 'Outro'];
+type OnboardingStep = 'basic' | 'biometric' | 'complete';
 
 export default function OnboardingPage() {
-  const [step, setStep] = useState<'biometric' | 'metrics'>('biometric');
-  const [formData, setFormData] = useState<ProfileData>({
+  const [step, setStep] = useState<OnboardingStep>('basic');
+  const [profile, setProfile] = useState<UserProfile>({
     name: '',
     gender: '',
     height: '',
     weight: '',
     age: ''
   });
-  const [savedProfile, setSavedProfile] = useState<ProfileData | null>(null);
 
-  const handleBiometricChange = (field: keyof Omit<ProfileData, 'height' | 'weight' | 'age'>, value: string) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
+  const handleBasicChange = (field: keyof Pick<UserProfile, 'name' | 'gender'>, value: string) => {
+    setProfile(prev => ({ ...prev, [field]: value }));
   };
 
-  const handleMetricsChange = (field: 'height' | 'weight' | 'age', value: string) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
+  const handleBiometricChange = (field: keyof Pick<UserProfile, 'height' | 'weight' | 'age'>, value: string) => {
+    setProfile(prev => ({ ...prev, [field]: value }));
+  };
+
+  const handleBasicSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (profile.name && profile.gender) {
+      setStep('biometric');
+    }
   };
 
   const handleBiometricSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (formData.name && formData.gender) {
-      setStep('metrics');
+    if (profile.height && profile.weight && profile.age) {
+      saveProfile();
+      setStep('complete');
     }
   };
 
-  const handleMetricsSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (formData.height && formData.weight && formData.age) {
-      // Save to localStorage
-      localStorage.setItem('userProfile', JSON.stringify(formData));
-      setSavedProfile(formData);
-      setTimeout(() => {
-        window.location.href = '/';
-      }, 2000);
-    }
+  const saveProfile = () => {
+    localStorage.setItem('userProfile', JSON.stringify(profile));
+    console.log('Profile saved:', profile);
   };
 
   const handleReset = () => {
-    setStep('biometric');
-    setFormData({ name: '', gender: '', height: '', weight: '', age: '' });
-    setSavedProfile(null);
+    setProfile({ name: '', gender: '', height: '', weight: '', age: '' });
+    setStep('basic');
   };
 
   return (
@@ -80,253 +79,247 @@ export default function OnboardingPage() {
             { name: "Treino", id: "training" },
             { name: "Nutrição", id: "nutrition" },
             { name: "Comunidade", id: "community" },
-            { name: "Perfil", id: "profile" }
+            { name: "Perfil", id: "onboarding" }
           ]}
-          button={{ text: "Começar Agora", href: "/" }}
+          button={{ text: "Começar Agora", href: "contact" }}
           brandName="FitFlow Pro"
         />
       </div>
 
-      <main className="min-h-svh flex items-center justify-center py-8 px-4">
-        <div className="w-full max-w-md">
-          {!savedProfile ? (
-            <div className="space-y-8">
-              {/* Header */}
-              <div className="text-center space-y-3">
-                <div className="flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-br from-primary-cta to-accent mx-auto">
-                  <User className="w-6 h-6 text-white" />
-                </div>
-                <h1 className="text-3xl font-extrabold">
-                  {step === 'biometric' ? 'Criar Perfil' : 'Dados Físicos'}
-                </h1>
-                <p className="text-foreground/70 text-sm">
-                  {step === 'biometric'
-                    ? 'Comece preenchendo seus dados básicos'
-                    : 'Agora adicione suas medidas'}
-                </p>
+      <div id="onboarding-flow" data-section="onboarding-flow" className="min-h-screen flex items-center justify-center py-20">
+        <div className="w-full max-w-2xl px-6">
+          {/* Progress Indicator */}
+          <div className="mb-12">
+            <div className="flex items-center justify-between mb-4">
+              <div className={`flex items-center gap-2 ${
+                step === 'basic' || step === 'biometric' || step === 'complete'
+                  ? 'text-primary-cta'
+                  : 'text-gray-400'
+              }`}>
+                <div className="w-8 h-8 rounded-full bg-primary-cta flex items-center justify-center text-white text-sm font-bold">1</div>
+                <span className="font-semibold">Dados Pessoais</span>
               </div>
-
-              {/* Progress Indicator */}
-              <div className="flex items-center justify-center gap-2">
-                <div
-                  className={`h-1.5 flex-1 rounded-full transition-all ${
-                    step === 'biometric' ? 'bg-primary-cta' : 'bg-secondary-cta'
-                  }`}
-                />
-                <div
-                  className={`h-1.5 flex-1 rounded-full transition-all ${
-                    step === 'metrics' ? 'bg-primary-cta' : 'bg-secondary-cta'
-                  }`}
-                />
-              </div>
-
-              {/* Form Container */}
-              <div className="bg-card rounded-2xl border border-accent/20 p-6 space-y-6">
-                {step === 'biometric' && (
-                  <form onSubmit={handleBiometricSubmit} className="space-y-5">
-                    {/* Name Field */}
-                    <div className="space-y-2">
-                      <label className="block text-sm font-semibold text-foreground">
-                        Nome Completo
-                      </label>
-                      <input
-                        type="text"
-                        value={formData.name}
-                        onChange={(e) => handleBiometricChange('name', e.target.value)}
-                        placeholder="Ex: João Silva"
-                        className="w-full px-4 py-3 bg-background border border-accent/30 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-cta focus:border-transparent transition-all text-foreground placeholder:text-foreground/50"
-                        required
-                      />
-                    </div>
-
-                    {/* Gender Field */}
-                    <div className="space-y-2">
-                      <label className="block text-sm font-semibold text-foreground">
-                        Gênero
-                      </label>
-                      <div className="grid grid-cols-3 gap-3">
-                        {GENDERS.map((g) => (
-                          <button
-                            key={g}
-                            type="button"
-                            onClick={() => handleBiometricChange('gender', g)}
-                            className={`py-3 px-3 rounded-xl font-medium text-sm transition-all border ${
-                              formData.gender === g
-                                ? 'bg-primary-cta text-white border-primary-cta'
-                                : 'bg-background border-accent/30 text-foreground hover:border-primary-cta'
-                            }`}
-                          >
-                            {g}
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-
-                    {/* Submit Button */}
-                    <button
-                      type="submit"
-                      className="w-full bg-gradient-to-r from-primary-cta to-accent text-white font-semibold py-3 rounded-xl hover:shadow-lg transition-all flex items-center justify-center gap-2 mt-6"
-                    >
-                      Próximo
-                      <ChevronRight className="w-4 h-4" />
-                    </button>
-                  </form>
-                )}
-
-                {step === 'metrics' && (
-                  <form onSubmit={handleMetricsSubmit} className="space-y-5">
-                    {/* Height Field */}
-                    <div className="space-y-2">
-                      <label className="block text-sm font-semibold text-foreground">
-                        Altura (cm)
-                      </label>
-                      <input
-                        type="number"
-                        value={formData.height}
-                        onChange={(e) => handleMetricsChange('height', e.target.value)}
-                        placeholder="Ex: 175"
-                        min="100"
-                        max="250"
-                        className="w-full px-4 py-3 bg-background border border-accent/30 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-cta focus:border-transparent transition-all text-foreground placeholder:text-foreground/50"
-                        required
-                      />
-                    </div>
-
-                    {/* Weight Field */}
-                    <div className="space-y-2">
-                      <label className="block text-sm font-semibold text-foreground">
-                        Peso (kg)
-                      </label>
-                      <input
-                        type="number"
-                        value={formData.weight}
-                        onChange={(e) => handleMetricsChange('weight', e.target.value)}
-                        placeholder="Ex: 75"
-                        min="20"
-                        max="300"
-                        step="0.1"
-                        className="w-full px-4 py-3 bg-background border border-accent/30 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-cta focus:border-transparent transition-all text-foreground placeholder:text-foreground/50"
-                        required
-                      />
-                    </div>
-
-                    {/* Age Field */}
-                    <div className="space-y-2">
-                      <label className="block text-sm font-semibold text-foreground">
-                        Idade
-                      </label>
-                      <input
-                        type="number"
-                        value={formData.age}
-                        onChange={(e) => handleMetricsChange('age', e.target.value)}
-                        placeholder="Ex: 28"
-                        min="13"
-                        max="120"
-                        className="w-full px-4 py-3 bg-background border border-accent/30 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-cta focus:border-transparent transition-all text-foreground placeholder:text-foreground/50"
-                        required
-                      />
-                    </div>
-
-                    {/* Button Group */}
-                    <div className="flex gap-3 mt-6">
-                      <button
-                        type="button"
-                        onClick={() => setStep('biometric')}
-                        className="flex-1 bg-background border border-accent/30 text-foreground font-semibold py-3 rounded-xl hover:bg-background/80 transition-all"
-                      >
-                        Voltar
-                      </button>
-                      <button
-                        type="submit"
-                        className="flex-1 bg-gradient-to-r from-primary-cta to-accent text-white font-semibold py-3 rounded-xl hover:shadow-lg transition-all"
-                      >
-                        Concluir
-                      </button>
-                    </div>
-                  </form>
-                )}
-              </div>
-
-              {/* Form Info */}
-              <div className="text-center space-y-2">
-                <p className="text-xs text-foreground/60">
-                  Seus dados são salvos localmente e podem ser editados depois
-                </p>
+              <div className="flex-1 h-1 mx-4 bg-gray-300"></div>
+              <div className={`flex items-center gap-2 ${
+                step === 'biometric' || step === 'complete'
+                  ? 'text-primary-cta'
+                  : 'text-gray-400'
+              }`}>
+                <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
+                  step === 'biometric' || step === 'complete'
+                    ? 'bg-primary-cta text-white'
+                    : 'bg-gray-300 text-gray-600'
+                }`}>2</div>
+                <span className="font-semibold">Biometria</span>
               </div>
             </div>
-          ) : (
-            /* Success State */
-            <div className="space-y-8 text-center">
-              <div className="space-y-4">
-                <div className="flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-primary-cta to-accent mx-auto animate-pulse">
-                  <Heart className="w-8 h-8 text-white" />
-                </div>
-                <h2 className="text-2xl font-extrabold">Perfil Criado!</h2>
-                <p className="text-foreground/70">
-                  Bem-vindo, <span className="font-semibold text-primary-cta">{savedProfile.name}</span>!
-                </p>
+          </div>
+
+          {/* Step 1: Basic Information */}
+          {step === 'basic' && (
+            <div className="bg-card rounded-2xl p-8 shadow-lg">
+              <div className="mb-8">
+                <h1 className="text-4xl font-extrabold mb-2">Vamos Começar!</h1>
+                <p className="text-gray-600">Primeiro, precisamos conhecer você melhor.</p>
               </div>
 
-              {/* Profile Summary */}
-              <div className="bg-card rounded-2xl border border-accent/20 p-6 space-y-3 text-left">
-                <div className="flex justify-between items-center py-2 border-b border-accent/10">
-                  <span className="text-foreground/70">Gênero:</span>
-                  <span className="font-semibold">{savedProfile.gender}</span>
+              <form onSubmit={handleBasicSubmit} className="space-y-6">
+                {/* Name Input */}
+                <div>
+                  <label className="block text-sm font-semibold mb-2">Nome Completo</label>
+                  <input
+                    type="text"
+                    value={profile.name}
+                    onChange={(e) => handleBasicChange('name', e.target.value)}
+                    placeholder="Digite seu nome"
+                    className="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-primary-cta focus:outline-none transition"
+                    required
+                  />
                 </div>
-                <div className="flex justify-between items-center py-2 border-b border-accent/10">
-                  <span className="text-foreground/70">Altura:</span>
-                  <span className="font-semibold">{savedProfile.height} cm</span>
+
+                {/* Gender Selection */}
+                <div>
+                  <label className="block text-sm font-semibold mb-2">Gênero</label>
+                  <div className="grid grid-cols-2 gap-4">
+                    {['Masculino', 'Feminino'].map((gender) => (
+                      <button
+                        key={gender}
+                        type="button"
+                        onClick={() => handleBasicChange('gender', gender)}
+                        className={`py-3 px-4 rounded-lg font-semibold transition-all ${
+                          profile.gender === gender
+                            ? 'bg-primary-cta text-white'
+                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                        }`}
+                      >
+                        {gender}
+                      </button>
+                    ))}
+                  </div>
                 </div>
-                <div className="flex justify-between items-center py-2 border-b border-accent/10">
-                  <span className="text-foreground/70">Peso:</span>
-                  <span className="font-semibold">{savedProfile.weight} kg</span>
+
+                {/* Submit Button */}
+                <button
+                  type="submit"
+                  disabled={!profile.name || !profile.gender}
+                  className="w-full bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition flex items-center justify-center gap-2"
+                >
+                  Próximo <ChevronRight size={18} />
+                </button>
+              </form>
+            </div>
+          )}
+
+          {/* Step 2: Biometric Information */}
+          {step === 'biometric' && (
+            <div className="bg-card rounded-2xl p-8 shadow-lg">
+              <div className="mb-8">
+                <h1 className="text-4xl font-extrabold mb-2">Dados Biométricos</h1>
+                <p className="text-gray-600">Agora, alguns dados de biometria para personalizar seu treino.</p>
+              </div>
+
+              <form onSubmit={handleBiometricSubmit} className="space-y-6">
+                {/* Height Input */}
+                <div>
+                  <label className="block text-sm font-semibold mb-2">Altura (cm)</label>
+                  <input
+                    type="number"
+                    value={profile.height}
+                    onChange={(e) => handleBiometricChange('height', e.target.value)}
+                    placeholder="Ex: 175"
+                    className="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-primary-cta focus:outline-none transition"
+                    required
+                  />
                 </div>
-                <div className="flex justify-between items-center py-2">
-                  <span className="text-foreground/70">Idade:</span>
-                  <span className="font-semibold">{savedProfile.age} anos</span>
+
+                {/* Weight Input */}
+                <div>
+                  <label className="block text-sm font-semibold mb-2">Peso (kg)</label>
+                  <input
+                    type="number"
+                    value={profile.weight}
+                    onChange={(e) => handleBiometricChange('weight', e.target.value)}
+                    placeholder="Ex: 75"
+                    step="0.1"
+                    className="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-primary-cta focus:outline-none transition"
+                    required
+                  />
+                </div>
+
+                {/* Age Input */}
+                <div>
+                  <label className="block text-sm font-semibold mb-2">Idade</label>
+                  <input
+                    type="number"
+                    value={profile.age}
+                    onChange={(e) => handleBiometricChange('age', e.target.value)}
+                    placeholder="Ex: 28"
+                    className="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-primary-cta focus:outline-none transition"
+                    required
+                  />
+                </div>
+
+                {/* Buttons */}
+                <div className="grid grid-cols-2 gap-4">
+                  <button
+                    type="button"
+                    onClick={() => setStep('basic')}
+                    className="py-3 px-4 rounded-lg font-semibold border-2 border-gray-300 hover:bg-gray-100 transition"
+                  >
+                    Voltar
+                  </button>
+                  <button
+                    type="submit"
+                    disabled={!profile.height || !profile.weight || !profile.age}
+                    className="bg-primary-cta text-white py-3 px-4 rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition flex items-center justify-center gap-2"
+                  >
+                    Concluir <ChevronRight size={18} />
+                  </button>
+                </div>
+              </form>
+            </div>
+          )}
+
+          {/* Step 3: Completion */}
+          {step === 'complete' && (
+            <div className="bg-card rounded-2xl p-8 shadow-lg text-center">
+              <div className="mb-8">
+                <div className="w-16 h-16 bg-primary-cta rounded-full flex items-center justify-center mx-auto mb-6">
+                  <User size={32} className="text-white" />
+                </div>
+                <h1 className="text-4xl font-extrabold mb-2">Perfil Criado com Sucesso!</h1>
+                <p className="text-gray-600 mb-6">Bem-vindo ao FitFlow Pro, {profile.name}!</p>
+
+                {/* Profile Summary */}
+                <div className="bg-gray-50 rounded-lg p-6 mb-8 text-left space-y-3">
+                  <div className="flex justify-between">
+                    <span className="font-semibold text-gray-700">Nome:</span>
+                    <span className="text-gray-600">{profile.name}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="font-semibold text-gray-700">Gênero:</span>
+                    <span className="text-gray-600">{profile.gender}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="font-semibold text-gray-700">Altura:</span>
+                    <span className="text-gray-600">{profile.height} cm</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="font-semibold text-gray-700">Peso:</span>
+                    <span className="text-gray-600">{profile.weight} kg</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="font-semibold text-gray-700">Idade:</span>
+                    <span className="text-gray-600">{profile.age} anos</span>
+                  </div>
                 </div>
               </div>
 
-              <p className="text-sm text-foreground/60">
-                Redirecionando para o dashboard em breve...
-              </p>
-
-              <button
-                onClick={handleReset}
-                className="w-full bg-background border border-accent/30 text-foreground font-semibold py-3 rounded-xl hover:bg-background/80 transition-all"
-              >
-                Editar Perfil
-              </button>
+              {/* Action Buttons */}
+              <div className="grid grid-cols-2 gap-4">
+                <button
+                  onClick={handleReset}
+                  className="py-3 px-4 rounded-lg font-semibold border-2 border-gray-300 hover:bg-gray-100 transition"
+                >
+                  Editar Dados
+                </button>
+                <a
+                  href="/"
+                  className="bg-primary-cta text-white py-3 px-4 rounded-lg font-semibold hover:opacity-90 transition flex items-center justify-center gap-2"
+                >
+                  Ir para Dashboard <ChevronRight size={18} />
+                </a>
+              </div>
             </div>
           )}
         </div>
-      </main>
+      </div>
 
       <div id="footer" data-section="footer">
         <FooterBase
           columns={[
             {
               title: "Produto",              items: [
-                { label: "Dashboard", href: "/" },
-                { label: "Treino", href: "/" },
-                { label: "Nutrição", href: "/" },
-                { label: "Cardio Hub", href: "/" }
+                { label: "Dashboard", href: "dashboard" },
+                { label: "Treino", href: "training" },
+                { label: "Nutrição", href: "nutrition" },
+                { label: "Cardio Hub", href: "cardio" }
               ]
             },
             {
               title: "Comunidade",              items: [
-                { label: "Comunidade", href: "/" },
-                { label: "Perfil", href: "/" },
-                { label: "Rankings", href: "/" },
-                { label: "Blog", href: "/" }
+                { label: "Comunidade", href: "community" },
+                { label: "Perfil", href: "onboarding" },
+                { label: "Rankings", href: "rankings" },
+                { label: "Blog", href: "blog" }
               ]
             },
             {
               title: "Empresa",              items: [
-                { label: "Sobre", href: "/" },
-                { label: "Contato", href: "/" },
-                { label: "Privacidade", href: "/" },
-                { label: "Termos", href: "/" }
+                { label: "Sobre", href: "about" },
+                { label: "Contato", href: "contact" },
+                { label: "Privacidade", href: "privacy" },
+                { label: "Termos", href: "terms" }
               ]
             }
           ]}
@@ -336,4 +329,4 @@ export default function OnboardingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file