diff --git a/app/formation/page.tsx b/app/formation/page.tsx
index 0306eea..991db53 100644
--- a/app/formation/page.tsx
+++ b/app/formation/page.tsx
@@ -2,25 +2,21 @@ import Link from "next/link"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
-import { Shield, Monitor, Code, ArrowLeft, Clock, Users, Award, BookOpen } from 'lucide-react'
+import { Shield, Monitor, Code, Clock, Users, Award, BookOpen } from 'lucide-react'
+import { Header, Footer } from "@/components/layout"
+import FormationCard from "@/components/ui/FormationCard"
+import { FORMATIONS } from "@/lib/constants"
 
 export default function FormationPage() {
   return (
     <div className="min-h-screen bg-gray-900 text-gray-100">
-      {/* Header */}
-      <header className="border-b border-gray-700 bg-gray-800/80 backdrop-blur-sm">
-        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
-          <Link href="/" className="flex items-center space-x-2">
-            <Shield className="h-8 w-8 text-blue-400" />
-            <span className="text-2xl font-bold text-gray-100">DocV</span>
-            <Badge variant="secondary" className="ml-2 bg-gray-700 text-gray-200">By 4NK</Badge>
-          </Link>
-          <Link href="/" className="flex items-center text-blue-400 hover:text-blue-500">
-            <ArrowLeft className="h-4 w-4 mr-2" />
-            Retour à l'accueil
-          </Link>
-        </div>
-      </header>
+      <Header 
+        variant="dark" 
+        showAuth={false} 
+        showBackButton={true} 
+        backHref="/" 
+        backText="Retour à l'accueil" 
+      />
 
       {/* Hero Section */}
       <section className="py-16 px-4">
@@ -66,149 +62,38 @@ export default function FormationPage() {
       {/* Formations Section */}
       <section className="py-16 px-4">
         <div className="container mx-auto grid lg:grid-cols-3 gap-8">
-          {/* Cybersécurité */}
-          <Card className="border-2 border-gray-700 hover:border-red-600 bg-gray-800 hover:shadow-xl transition-all duration-300">
-            <CardHeader className="text-center">
-              <Shield className="h-16 w-16 text-red-400 mx-auto mb-4" />
-              <CardTitle className="text-2xl text-red-300">Cybersécurité</CardTitle>
-              <CardDescription className="text-lg text-gray-300">
-                Maîtrisez les fondamentaux de la sécurité informatique
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6 text-gray-300">
-              <div>
-                <h4 className="font-semibold mb-3">Programme de formation :</h4>
-                <ul className="space-y-2">
-                  <li>• Analyse des menaces et vulnérabilités</li>
-                  <li>• Cryptographie appliquée et PKI</li>
-                  <li>• Sécurisation des infrastructures</li>
-                  <li>• Gestion des incidents de sécurité</li>
-                  <li>• Audit et conformité (ISO 27001, RGPD)</li>
-                  <li>• Tests d'intrusion et pentest</li>
-                </ul>
-              </div>
-              <div className="bg-red-900 p-4 rounded-lg">
-                <h5 className="font-semibold text-red-200 mb-2">Spécialisation DocV :</h5>
-                <ul className="text-sm text-red-300 space-y-1">
-                  <li>• Authentification sans mot de passe</li>
-                  <li>• Chiffrement de bout en bout</li>
-                  <li>• Blockchain et preuves cryptographiques</li>
-                  <li>• Architecture zero-trust</li>
-                </ul>
-              </div>
-              <div className="flex items-center justify-between text-sm text-gray-400">
-                <div className="flex items-center">
-                  <Clock className="h-4 w-4 mr-1" />
-                  5 jours
-                </div>
-                <div className="flex items-center">
-                  <Users className="h-4 w-4 mr-1" />
-                  Max 12 pers.
-                </div>
-              </div>
-              <Link href="/formation/devis">
-                <Button className="w-full bg-red-600 hover:bg-red-700 text-white">
-                  S'inscrire à la formation
-                </Button>
-              </Link>
-            </CardContent>
-          </Card>
+          <FormationCard
+            icon={Shield}
+            title={FORMATIONS.cybersecurity.title}
+            description={FORMATIONS.cybersecurity.description}
+            program={FORMATIONS.cybersecurity.program}
+            specialization={FORMATIONS.cybersecurity.specialization}
+            duration={FORMATIONS.cybersecurity.duration}
+            maxParticipants={FORMATIONS.cybersecurity.maxParticipants}
+            color={FORMATIONS.cybersecurity.color}
+          />
 
-          {/* Hygiène Numérique */}
-          <Card className="border-2 border-gray-700 hover:border-green-600 bg-gray-800 hover:shadow-xl transition-all duration-300">
-            <CardHeader className="text-center">
-              <Monitor className="h-16 w-16 text-green-400 mx-auto mb-4" />
-              <CardTitle className="text-2xl text-green-300">Hygiène Numérique</CardTitle>
-              <CardDescription className="text-lg text-gray-300">
-                Adoptez les bonnes pratiques pour un environnement numérique sain
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6 text-gray-300">
-              <div>
-                <h4 className="font-semibold mb-3">Programme de formation :</h4>
-                <ul className="space-y-2">
-                  <li>• Gestion sécurisée des mots de passe</li>
-                  <li>• Protection de la vie privée en ligne</li>
-                  <li>• Sécurisation des communications</li>
-                  <li>• Sauvegarde et archivage sécurisé</li>
-                  <li>• Sensibilisation aux risques numériques</li>
-                  <li>• RGPD et protection des données</li>
-                </ul>
-              </div>
-              <div className="bg-green-900 p-4 rounded-lg">
-                <h5 className="font-semibold text-green-200 mb-2">Approche DocV :</h5>
-                <ul className="text-sm text-green-300 space-y-1">
-                  <li>• Identité numérique souveraine</li>
-                  <li>• Gestion documentaire sécurisée</li>
-                  <li>• Réduction de l'empreinte numérique</li>
-                  <li>• Autonomie technologique</li>
-                </ul>
-              </div>
-              <div className="flex items-center justify-between text-sm text-gray-400">
-                <div className="flex items-center">
-                  <Clock className="h-4 w-4 mr-1" />
-                  3 jours
-                </div>
-                <div className="flex items-center">
-                  <Users className="h-4 w-4 mr-1" />
-                  Max 15 pers.
-                </div>
-              </div>
-              <Link href="/formation/devis">
-                <Button className="w-full bg-green-600 hover:bg-green-700 text-white">
-                  S'inscrire à la formation
-                </Button>
-              </Link>
-            </CardContent>
-          </Card>
+          <FormationCard
+            icon={Monitor}
+            title={FORMATIONS.digitalHygiene.title}
+            description={FORMATIONS.digitalHygiene.description}
+            program={FORMATIONS.digitalHygiene.program}
+            specialization={FORMATIONS.digitalHygiene.specialization}
+            duration={FORMATIONS.digitalHygiene.duration}
+            maxParticipants={FORMATIONS.digitalHygiene.maxParticipants}
+            color={FORMATIONS.digitalHygiene.color}
+          />
 
-          {/* Développement Souverain */}
-          <Card className="border-2 border-gray-700 hover:border-blue-600 bg-gray-800 hover:shadow-xl transition-all duration-300">
-            <CardHeader className="text-center">
-              <Code className="h-16 w-16 text-blue-400 mx-auto mb-4" />
-              <CardTitle className="text-2xl text-blue-300">Développement Souverain</CardTitle>
-              <CardDescription className="text-lg text-gray-300">
-                Créez des applications indépendantes et sécurisées
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6 text-gray-300">
-              <div>
-                <h4 className="font-semibold mb-3">Programme de formation :</h4>
-                <ul className="space-y-2">
-                  <li>• Architecture décentralisée</li>
-                  <li>• Développement sans dépendances cloud</li>
-                  <li>• Intégration blockchain et cryptographie</li>
-                  <li>• APIs souveraines et sécurisées</li>
-                  <li>• Déploiement on-premise</li>
-                  <li>• Maintenance et évolutivité</li>
-                </ul>
-              </div>
-              <div className="bg-blue-900 p-4 rounded-lg">
-                <h5 className="font-semibold text-blue-200 mb-2">Technologies DocV :</h5>
-                <ul className="text-sm text-blue-300 space-y-1">
-                  <li>• Stack technologique souveraine</li>
-                  <li>• Intégration IA locale</li>
-                  <li>• Gestion d'identité décentralisée</li>
-                  <li>• Protocoles de communication sécurisés</li>
-                </ul>
-              </div>
-              <div className="flex items-center justify-between text-sm text-gray-400">
-                <div className="flex items-center">
-                  <Clock className="h-4 w-4 mr-1" />
-                  7 jours
-                </div>
-                <div className="flex items-center">
-                  <Users className="h-4 w-4 mr-1" />
-                  Max 8 pers.
-                </div>
-              </div>
-              <Link href="/formation/devis">
-                <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white">
-                  S'inscrire à la formation
-                </Button>
-              </Link>
-            </CardContent>
-          </Card>
+          <FormationCard
+            icon={Code}
+            title={FORMATIONS.sovereignDevelopment.title}
+            description={FORMATIONS.sovereignDevelopment.description}
+            program={FORMATIONS.sovereignDevelopment.program}
+            specialization={FORMATIONS.sovereignDevelopment.specialization}
+            duration={FORMATIONS.sovereignDevelopment.duration}
+            maxParticipants={FORMATIONS.sovereignDevelopment.maxParticipants}
+            color={FORMATIONS.sovereignDevelopment.color}
+          />
         </div>
       </section>
 
@@ -300,19 +185,7 @@ export default function FormationPage() {
         </div>
       </section>
 
-      {/* Footer */}
-      <footer className="bg-gray-900 text-gray-300 py-8 px-4">
-        <div className="container mx-auto text-center">
-          <div className="flex items-center justify-center space-x-2 mb-4">
-            <Shield className="h-6 w-6 text-blue-400" />
-            <span className="text-xl font-bold text-gray-100">DocV</span>
-            <Badge variant="secondary" className="bg-gray-700 text-gray-200">By 4NK</Badge>
-          </div>
-          <p className="text-gray-400">
-            4NK, pionnier du Web 5.0 - Solutions de souveraineté numérique
-          </p>
-        </div>
-      </footer>
+      <Footer variant="dark" showNavigation={false} />
     </div>
   )
 }