diff --git a/app/Competences/[slug]/page.tsx b/app/Competences/[slug]/page.tsx
index 9f0cae9..5e2e5a5 100644
--- a/app/Competences/[slug]/page.tsx
+++ b/app/Competences/[slug]/page.tsx
@@ -1,6 +1,5 @@
-import ContentSectionCompetences from "../../components/ContentSectionCompetences";
+import ContentSectionCompetencesContainer from "../../components/ContentSectionCompetencesContainer";
 
-export default function Page({ params }: { params: { slug: string } }) {
-  console.log("🛠️ Paramètres reçus :", params.slug);
-  return <ContentSectionCompetences collection="competences" slug={params.slug} />;
+export default function CompetencePage({ params }: { params: { slug: string } }) {
+  return <ContentSectionCompetencesContainer collection="competences" slug={params.slug} />;
 }
diff --git a/app/components/ContentSectionCompetences.tsx b/app/components/ContentSectionCompetences.tsx
index 0ef053d..4583538 100644
--- a/app/components/ContentSectionCompetences.tsx
+++ b/app/components/ContentSectionCompetences.tsx
@@ -1,14 +1,13 @@
-"use client";
+"use client"; // ✅ Ajout pour en faire un Client Component
 
-import { fetchDataCompetences, fetchDataGlossaire } from "../utils/fetchDataCompetences";
+import { useState, useEffect } from "react";
 import CarouselCompetences from "./CarouselCompetences";
 import ReactMarkdown from "react-markdown";
-import { useState, useEffect } from "react";
-import ModalGlossaire from "./ModalGlossaire"; // ✅ Import de la modale
+import ModalGlossaire from "./ModalGlossaire";
 
 interface ContentSectionProps {
-  collection: string;
-  slug: string;
+  competenceData: any;
+  glossaireData: any[];
   titleClass?: string;
   contentClass?: string;
 }
@@ -22,17 +21,14 @@ interface GlossaireItem {
   images?: any[];
 }
 
-export default async function ContentSectionCompetences({ collection, slug, titleClass, contentClass }: ContentSectionProps) {
-  const data = await fetchDataCompetences(collection, slug);
-  const glossaireData: GlossaireItem[] = await fetchDataGlossaire(); 
-
+export default function ContentSectionCompetences({ competenceData, glossaireData, titleClass, contentClass }: ContentSectionProps) {
   const [selectedMot, setSelectedMot] = useState<GlossaireItem | null>(null);
 
-  if (!data) {
+  if (!competenceData) {
     return <div className="text-red-500 text-center">❌ Compétence introuvable.</div>;
   }
 
-  const { name, content, picture } = data;
+  const { name, content, picture } = competenceData;
 
   const images = picture?.map((img: any) => ({
     url: `http://localhost:1337${img?.formats?.large?.url || img?.url}`,
diff --git a/app/components/ContentSectionCompetencesContainer.tsx b/app/components/ContentSectionCompetencesContainer.tsx
new file mode 100644
index 0000000..2f4efac
--- /dev/null
+++ b/app/components/ContentSectionCompetencesContainer.tsx
@@ -0,0 +1,23 @@
+import { fetchDataCompetences, fetchDataGlossaire } from "../utils/fetchDataCompetences";
+import ContentSectionCompetences from "./ContentSectionCompetences";
+
+interface ContentSectionProps {
+  collection: string;
+  slug: string;
+  titleClass?: string;
+  contentClass?: string;
+}
+
+export default async function ContentSectionCompetencesContainer({ collection, slug, titleClass, contentClass }: ContentSectionProps) {
+  const competenceData = await fetchDataCompetences(collection, slug);
+  const glossaireData = await fetchDataGlossaire();
+
+  return (
+    <ContentSectionCompetences
+      competenceData={competenceData}
+      glossaireData={glossaireData}
+      titleClass={titleClass}
+      contentClass={contentClass}
+    />
+  );
+}