diff --git a/frontend/src/resources/css/_chat.scss b/frontend/src/resources/css/_chat.scss
index 055c66c..3d35ecf 100644
--- a/frontend/src/resources/css/_chat.scss
+++ b/frontend/src/resources/css/_chat.scss
@@ -243,8 +243,22 @@
                                 a {
                                     text-decoration: none;
                                 }
+                                
+                                .attachement-image {
+                                    max-width: 200px;
+                                    border-radius: 8px;
+                                    cursor: pointer;
+                                    margin-left: 3px;
+                                    margin-right: 3px;
+                                    margin-bottom: 3px;
+
+                                    &:last-child {
+                                        margin-bottom: 0;
+                                    }
+                                }
                             }
                         }
+
                         .message-time {
                             font-size: 0.7rem;
                             color: $color-dark-on-surface-variant;
diff --git a/frontend/src/ui/components/chat/Message.tsx b/frontend/src/ui/components/chat/Message.tsx
index 0c75e05..b3098e1 100644
--- a/frontend/src/ui/components/chat/Message.tsx
+++ b/frontend/src/ui/components/chat/Message.tsx
@@ -314,9 +314,9 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
                                                         if (el) imageRefs.current.set(file.path, el);
                                                     }}
                                                     src={imageSrc} 
-                                                    alt={file.name || "image"} 
-                                                    style={{ maxWidth: "200px", borderRadius: "8px", cursor: "pointer" }} 
+                                                    alt={file.name || "image"}
                                                     onClick={(e) => handleImageClick(file, e.currentTarget)}
+                                                    className="attachement-image"
                                                 />
                                             ) : (
                                                 <mdui-list-item>
diff --git a/frontend/src/ui/components/core/animations/AnimatedHeight.tsx b/frontend/src/ui/components/core/animations/AnimatedHeight.tsx
index 60c7e86..9b61a31 100644
--- a/frontend/src/ui/components/core/animations/AnimatedHeight.tsx
+++ b/frontend/src/ui/components/core/animations/AnimatedHeight.tsx
@@ -3,9 +3,10 @@ import type { AnimatedPropertyProps } from "./types";
 
 export default function AnimatedHeight({ visible, duration = 0.25, onFinish, children, ...props }: AnimatedPropertyProps) {
     const [height, setHeight] = useState("0px");
-    const [shouldRender, setShouldRender] = useState(visible);
+    const [shouldRender, setShouldRender] = useState(!!visible);
     const [isAnimating, setIsAnimating] = useState(false);
     const measureRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         if (visible) {
@@ -19,6 +20,7 @@ export default function AnimatedHeight({ visible, duration = 0.25, onFinish, chi
                 }
                 // Animation complete
                 setTimeout(() => {
+                    setHeight("auto");
                     setIsAnimating(false);
                 }, duration * 1000);
             }, 0);
@@ -29,7 +31,14 @@ export default function AnimatedHeight({ visible, duration = 0.25, onFinish, chi
                 setHeight(`${contentHeight}px`);
                 // Force a reflow before animating to 0
                 requestAnimationFrame(() => {
-                    setHeight("0px");
+                    // Read layout to ensure the previous height assignment is flushed
+                    if (containerRef.current) {
+                        containerRef.current.offsetHeight;
+                    }
+                    // Use a second frame to ensure the measured pixel height is applied before collapsing
+                    requestAnimationFrame(() => {
+                        setHeight("0px");
+                    });
                 });
             }
             // Hide content after animation completes
@@ -43,14 +52,10 @@ export default function AnimatedHeight({ visible, duration = 0.25, onFinish, chi
         }
     }, [visible, shouldRender]);
 
-    // Don't render if not visible and not animating
-    if (!visible && !shouldRender && !isAnimating) {
-        return null;
-    }
-
-    return (
-        <div 
+    return (visible || shouldRender || isAnimating) && (
+        <div
             {...props}
+            ref={containerRef}
             style={{
                 height,
                 transition: `height ${duration}s ease`,