diff --git a/frontend/src/components/features/posts/PostDetail.jsx b/frontend/src/components/features/posts/PostDetail.jsx
index fde3084..f645a10 100644
--- a/frontend/src/components/features/posts/PostDetail.jsx
+++ b/frontend/src/components/features/posts/PostDetail.jsx
@@ -41,7 +41,9 @@ function PostDetail({
     const [newComments, setNewComments] = useState(comments);
 
     useEffect(() => {
-        if (userLikes[id]) {setLiked(true);}
+        if (userLikes[id]) {
+            setLiked(true);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -70,7 +72,9 @@ function PostDetail({
 
         const { comment } = FormatForm(event);
 
-        if (!comment) {return;}
+        if (!comment) {
+            return;
+        }
 
         fetchData(`${apiUrl}api/posts/${id}/comments`, {
             method: 'POST',
@@ -97,10 +101,10 @@ function PostDetail({
     }
 
     return (
-        <div className="w-full max-h-[85vh] mx-12 flex gap-6 bg-white/80 justify-center md:flex-row flex-col">
+        <div className="w-full h-fit px-12 py-12 mb-6 lg:mb-0 flex gap-6 bg-white/80 justify-center md:flex-row flex-col">
             {/* Post */}
             <article
-                className="flex-1 md:max-w-1/3 max-h-[85vh] bg-white rounded-lg border border-gray-100 shadow-sm overflow-hidden flex flex-col"
+                className="flex-1 w-full lg:max-w-1/3 h-fit bg-white rounded-lg border border-gray-100 shadow-sm flex flex-col"
                 aria-labelledby={`cap-${id}`}
             >
                 <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100 bg-white flex-shrink-0">
@@ -136,7 +140,7 @@ function PostDetail({
                     <img
                         src={`${image_url}.webp`}
                         alt={content.slice(0, 120) || 'post image'}
-                        className="w-full max-h-[50vh] object-contain bg-black border-y border-gray-100 flex-shrink-0"
+                        className="w-full lg:max-h-[50vh] object-contain bg-black border-y border-gray-100 flex-shrink-0"
                         loading="lazy"
                         fetchpriority="high"
                     />
@@ -237,7 +241,7 @@ function PostDetail({
                 <aside
                     className={`flex flex-col bg-gray-50 border border-gray-100 rounded-lg shadow-sm transition-all duration-300 ease-in-out ${
                         IsOpen
-                            ? 'w-[360px] md:max-w-[40%] max-h-[85vh] opacity-100 visible'
+                            ? 'w-[360px] md:max-w-[40%] min-h-full opacity-100 visible'
                             : 'w-0 max-w-0 h-0 opacity-0 invisible overflow-hidden border-0'
                     }`}
                 >
diff --git a/frontend/src/components/layout/NavBar.jsx b/frontend/src/components/layout/NavBar.jsx
index 44b49e2..44bde52 100644
--- a/frontend/src/components/layout/NavBar.jsx
+++ b/frontend/src/components/layout/NavBar.jsx
@@ -21,7 +21,7 @@ export const NavBar = () => {
 
     return isDesktop ? (
         <nav
-            className="w-full bg-white border-b border-gray-200 shadow-sm"
+            className="relative w-full bg-white border-b border-gray-200 shadow-sm z-99"
             role="navigation"
             aria-label="Navigation principale"
         >
diff --git a/frontend/src/layout/CommentModal.jsx b/frontend/src/layout/CommentModal.jsx
index 484b2f0..8122bee 100644
--- a/frontend/src/layout/CommentModal.jsx
+++ b/frontend/src/layout/CommentModal.jsx
@@ -1,5 +1,6 @@
 import Box from '@mui/material/Box';
 import Modal from '@mui/material/Modal';
+import Slide from '@mui/material/Slide';
 import { useState } from 'react';
 import { fetchData } from '../components/services/Fetch';
 import throwError from '../components/services/throwError';
@@ -34,13 +35,13 @@ async function handleComment(
     });
 
     setComment((prev) => [
-        ...prev,
         {
             comment,
             created_at: new Date().toISOString(),
             user: username,
             user_image_url: user_image_url,
         },
+        ...prev,
     ]);
 
     event.target.reset();
@@ -63,85 +64,91 @@ export default function CommentsModal({
         <Modal
             open={isOpen}
             onClose={onClose}
+            closeAfterTransition
             slotProps={{
                 backdrop: {
                     sx: {
-                        backdropFilter: 'blur(5px)', // optionnel : flou
+                        backdropFilter: 'blur(5px)',
                     },
                 },
             }}
         >
-            <Box
-                className="absolute inset-0 px-4 pt-8 md:py-8 md:px-0 flex items-end md:items-center justify-center md:justify-end"
-                onClick={onClose}
-            >
-                <div
-                    className="h-full md:h-full w-full md:w-1/2 bg-white rounded-t-lg md:rounded-l-lg md:rounded-r-none shadow-lg flex flex-col justify-center"
-                    onClick={(e) => e.stopPropagation()}
+            {/* Ajout de Fade pour l'animation */}
+            <Slide in={isOpen} direction="left" timeout={400}>
+                <Box
+                    className="absolute inset-0 px-4 pt-8 md:py-8 md:px-0 flex items-end md:items-center justify-center md:justify-end"
+                    onClick={onClose}
                 >
-                    {/* Header */}
-                    <div className="flex justify-between items-center p-4 border-b">
-                        <h2 className="text-lg font-bold">Commentaires</h2>
-                        <button
-                            onClick={onClose}
-                            className="text-gray-500 hover:text-gray-800 text-xl font-bold"
-                        >
-                            ×
-                        </button>
-                    </div>
-
-                    {/* Comments list */}
-                    <div className="flex-1 overflow-y-auto p-4 space-y-3">
-                        {newComments.length === 0 && (
-                            <p className="text-gray-400 text-center">
-                                Pas encore de commentaires
-                            </p>
-                        )}
-                        {newComments.map((comment, i) => (
-                            <Comments comment={comment} index={i} key={i} />
-                        ))}
-                    </div>
-
-                    {/* Add comment input */}
-                    {currentUser ? (
-                        <form
-                            action="#"
-                            className="p-4 border-t flex items-center gap-2"
-                            onSubmit={(e) =>
-                                handleComment(
-                                    setNewComments,
-                                    e,
-                                    currentToken,
-                                    currentUserName,
-                                    currentUserPP,
-                                    id,
-                                )
-                            }
-                        >
-                            <input
-                                type="text"
-                                placeholder="Ajouter un commentaire..."
-                                className="flex-1 border rounded-full px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
-                                name="comment"
-                            />
+                    <div
+                        className="h-full md:h-full w-full md:w-1/2 bg-white rounded-t-lg md:rounded-l-lg md:rounded-r-none shadow-lg flex flex-col justify-center"
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        {/* Header */}
+                        <div className="flex justify-between items-center p-4 border-b">
+                            <h2 className="text-lg font-bold">Commentaires</h2>
                             <button
-                                type="submit"
-                                className="bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-blue-600 transition-colors"
+                                onClick={onClose}
+                                className="text-gray-500 hover:text-gray-800 text-xl font-bold"
                             >
-                                Envoyer
+                                ×
                             </button>
-                        </form>
-                    ) : (
-                        <div className="p-4 border-t rounded-md bg-gray-50 text-gray-600 text-sm text-center">
-                            <p>
-                                Vous devez être{' '}
-                                <span className="font-semibold">connecté</span>{' '}
-                                pour accéder à cette fonctionnalité
-                            </p>
                         </div>
-                    )}
-                </div>
-            </Box>
+
+                        {/* Comments list */}
+                        <div className="flex-1 overflow-y-auto p-4 space-y-3">
+                            {newComments.length === 0 && (
+                                <p className="text-gray-400 text-center">
+                                    Pas encore de commentaires
+                                </p>
+                            )}
+                            {newComments.map((comment, i) => (
+                                <Comments comment={comment} index={i} key={i} />
+                            ))}
+                        </div>
+
+                        {/* Add comment input */}
+                        {currentUser ? (
+                            <form
+                                action="#"
+                                className="p-4 border-t flex items-center gap-2"
+                                onSubmit={(e) =>
+                                    handleComment(
+                                        setNewComments,
+                                        e,
+                                        currentToken,
+                                        currentUserName,
+                                        currentUserPP,
+                                        id,
+                                    )
+                                }
+                            >
+                                <input
+                                    type="text"
+                                    placeholder="Ajouter un commentaire..."
+                                    className="flex-1 border rounded-full px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
+                                    name="comment"
+                                />
+                                <button
+                                    type="submit"
+                                    className="bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-semibold hover:bg-blue-600 transition-colors"
+                                >
+                                    Envoyer
+                                </button>
+                            </form>
+                        ) : (
+                            <div className="p-4 border-t rounded-md bg-gray-50 text-gray-600 text-sm text-center">
+                                <p>
+                                    Vous devez être{' '}
+                                    <span className="font-semibold">
+                                        connecté
+                                    </span>{' '}
+                                    pour accéder à cette fonctionnalité
+                                </p>
+                            </div>
+                        )}
+                    </div>
+                </Box>
+            </Slide>
         </Modal>
     );
 }
diff --git a/frontend/src/pages/PostDetails.jsx b/frontend/src/pages/PostDetails.jsx
index 7806224..fe833ca 100644
--- a/frontend/src/pages/PostDetails.jsx
+++ b/frontend/src/pages/PostDetails.jsx
@@ -17,19 +17,22 @@ export default function PostDetails() {
             .catch((error) => setError(error));
     }, [id, apiUrl]);
 
-    if (error)
-    {return (
-        <div className="flex flex-col items-center justify-center py-16 text-center">
-            <p className="text-red-500 font-semibold mb-2">
+    if (error) {
+        return (
+            <div className="flex flex-col items-center justify-center py-16 text-center">
+                <p className="text-red-500 font-semibold mb-2">
                     Une erreur est survenue 😢
-            </p>
-            <p className="text-gray-600 text-sm">
-                {error.message || String(error)}
-            </p>
-        </div>
-    );}
+                </p>
+                <p className="text-gray-600 text-sm">
+                    {error.message || String(error)}
+                </p>
+            </div>
+        );
+    }
 
-    if (!post) {return <Loader loader="dote" />;}
+    if (!post) {
+        return <Loader loader="dote" />;
+    }
 
     return (
         <>
@@ -78,19 +81,17 @@ export default function PostDetails() {
                 )}
             </Helmet>
 
-            <div className="w-full h-fit md:h-[80vh] py-12 md:py-12 flex justify-center items-center">
-                <PostDetail
-                    author={post.author}
-                    author_image_url={post.author_image_url}
-                    comments={post.comments}
-                    content={post.content}
-                    created_at={post.created_at}
-                    id={post.id}
-                    image_url={post.image_url}
-                    likes={post.likes}
-                    key={post.id}
-                />
-            </div>
+            <PostDetail
+                author={post.author}
+                author_image_url={post.author_image_url}
+                comments={post.comments}
+                content={post.content}
+                created_at={post.created_at}
+                id={post.id}
+                image_url={post.image_url}
+                likes={post.likes}
+                key={post.id}
+            />
         </>
     );
 }