diff --git a/frontend/src/components/Pages/Post.jsx b/frontend/src/components/Pages/Post.jsx
index 5fb8774..c769f5f 100644
--- a/frontend/src/components/Pages/Post.jsx
+++ b/frontend/src/components/Pages/Post.jsx
@@ -10,7 +10,7 @@ const Posts = () => {
   useEffect(() => {
     const fetchPosts = async () => {
       try {
-        const response = await api.get("wp/v2/posts?_fields=id,title,excerpt,content,featured_media");
+        const response = await api.get("wp/v2/posts?_fields=id,slug,title,excerpt,content,featured_media");
         const postsData = response.data;
 
         // Récupérer les images en vedette
@@ -66,7 +66,7 @@ const Posts = () => {
                 cursor: "pointer",
                 "&:hover": { backgroundColor: "#0e467f", color: "white", transform: "scale(1.05)", boxShadow: 6 },
               }}
-              onClick={() => navigate(`/post/${post.id}`)}
+              onClick={() => navigate(`/post/${post.slug}`)}
             >
               {post.image && (
                 <CardMedia component="img" height="200" image={post.image} alt={post.title.rendered} />
diff --git a/frontend/src/components/PostDetails.jsx b/frontend/src/components/PostDetails.jsx
index 700cf5c..d3e36e5 100644
--- a/frontend/src/components/PostDetails.jsx
+++ b/frontend/src/components/PostDetails.jsx
@@ -4,61 +4,81 @@ import { useParams, useNavigate } from "react-router-dom";
 import api from "../api";
 
 const PostDetails = () => {
-  const { id } = useParams();
+  const { slug } = useParams(); // ✅ Utilisation correcte du slug
   const [post, setPost] = useState(null);
   const [image, setImage] = useState(null);
   const navigate = useNavigate();
 
   useEffect(() => {
     const fetchPost = async () => {
-      try {
-        const response = await api.get(`wp/v2/posts/${id}?_fields=title,content,featured_media,date`);
-        setPost(response.data);
+      if (!slug) {
+        console.error("❌ Erreur : aucun slug fourni !");
+        return;
+      }
 
-        // Récupération de l'image
-        if (response.data.featured_media) {
-          const mediaResponse = await api.get(`wp/v2/media/${response.data.featured_media}`);
-          setImage(mediaResponse.data.source_url);
+      try {
+        console.log(`📢 Requête API pour le slug : ${slug}`);
+        
+        // ✅ Requête API correcte
+        const response = await api.get(`wp/v2/posts?slug=${slug}&_fields=id,title,content,featured_media,date`);
+
+        if (response.data.length > 0) {
+          const article = response.data[0]; // ✅ Récupération du premier article trouvé
+          setPost(article);
+          console.log("✅ Article trouvé :", article);
+
+          // ✅ Récupération de l'image en vedette si elle existe
+          if (article.featured_media) {
+            console.log(`📢 Récupération de l'image ID : ${article.featured_media}`);
+            const mediaResponse = await api.get(`wp/v2/media/${article.featured_media}`);
+            setImage(mediaResponse.data.source_url);
+          }
+        } else {
+          console.error("❌ Aucun article trouvé avec ce slug !");
         }
       } catch (error) {
-        console.error("Erreur lors de la récupération de l'article :", error);
+        console.error("❌ Erreur lors de la récupération de l'article :", error);
       }
     };
 
     fetchPost();
-  }, [id]);
+  }, [slug]); // ✅ Dépendance correcte
 
   if (!post) {
     return <CircularProgress sx={{ display: "block", margin: "auto", mt: 5 }} />;
   }
 
   return (
-    <Box sx={{ padding: "40px 20px",display:"flex", flexDirection:"column" }}>
-      <Button onClick={() => navigate(-1)} variant="outlined" sx={{ mt:5, mb: 3, maxWidth:"200px" }}>
+    <Box sx={{ padding: "40px 20px", display: "flex", flexDirection: "column" }}>
+      {/* ✅ Bouton Retour */}
+      <Button onClick={() => navigate(-1)} variant="contained" sx={{ mt: 5, mb: 3, maxWidth: "200px" }}>
         ⬅ Retour
       </Button>
 
-      <Typography variant="h1" sx={{ 
-        fontWeight: "bold", 
-        textAlign: "center", 
-        mb: 4,
-        fontSize: { xs: '3rem', md: '3rem', lg: '3rem' }, // Responsive 
-        }}>
+      {/* ✅ Titre de l'article */}
+      <Typography
+        variant="h1"
+        sx={{
+          fontWeight: "bold",
+          textAlign: "center",
+          mb: 4,
+          fontSize: { xs: "3rem", md: "3rem", lg: "3rem" },
+        }}
+      >
         {post.title.rendered}
       </Typography>
 
-      <Box sx={{ display:"flex", alignItems:"center", justifyContent:"center", padding: "40px 20px",margin:"auto" }}>
-      {image && (
-        <Box
-          component="img"
-          src={image}
-          alt={post.title.rendered}
-          sx={{ width: "33%", maxHeight: "400px", objectFit: "cover", borderRadius: "8px", mb: 3 }}
-        />
-      )}
-
-
-      <Typography variant="body1" sx={{ maxWidth: "800px", mx: "auto" }} dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
+      {/* ✅ Image + Contenu */}
+      <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "40px 20px", margin: "auto" }}>
+        {image && (
+          <Box
+            component="img"
+            src={image}
+            alt={post.title.rendered}
+            sx={{ width: "100%", maxHeight: "400px", objectFit: "cover", borderRadius: "8px", mb: 3 }}
+          />
+        )}
+        <Typography variant="body1" sx={{ maxWidth: "800px", mx: "auto" }} dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
       </Box>
     </Box>
   );
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 418bf95..c8d1bbb 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -50,7 +50,7 @@ function YourApp() {
           <Route path="/services/structure-beton-charpente-metallique-bois" element={<ServiceDeux />} />
           <Route path="/services/formation-video" element={<ServiceTrois />} />
           <Route path="/admin/create-post" element={<CreatePost />} />
-          <Route path="/post/:id" element={<PostDetails />} />
+          <Route path="/post/:slug" element={<PostDetails />} />
           <Route path="/admin/posts" element={<PostList />} />
           <Route path="/admin/login" element={<Login />} />
           <Route path="/admin/dashboard" element={<Dashboard />} />