diff --git a/app/portfolio/[slug]/page.tsx b/app/portfolio/[slug]/page.tsx
index 4175d24..8c75be6 100644
--- a/app/portfolio/[slug]/page.tsx
+++ b/app/portfolio/[slug]/page.tsx
@@ -1,11 +1,22 @@
-import ContentSection from "../../components/ContentSection";
+"use client"; // ✅ Indique que ce composant fonctionne côté client
 
-export default function Page({ params }: { params: { slug: string } }) {
-  const slug = params.slug;
+import { useParams } from "next/navigation"; // ✅ Nouvelle méthode pour récupérer `params`
+import { useEffect, useState } from "react";
+import ContentSectionCompetencesContainer from "../../components/ContentSectionCompetencesContainer";
+
+export default function CompetencePage() {
+  const params = useParams(); // ✅ Récupérer `params` correctement
+  const [slug, setSlug] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (params?.slug) {
+      setSlug(params.slug as string); // ✅ Assurer que `slug` est bien une string
+    }
+  }, [params]);
 
   if (!slug) {
-    return <div className="text-red-500 text-center">❌ Erreur : Slug introuvable.</div>;
+    return <div className="text-center text-gray-500">⏳ Chargement...</div>;
   }
 
-  return <ContentSection collection="projects" slug={slug} />;
+  return <ContentSectionCompetencesContainer collection="competences" slug={slug} />;
 }