diff --git a/packages/web/src/components/chat/Message.tsx b/packages/web/src/components/chat/Message.tsx
index d1d375ac..bfd021d8 100644
--- a/packages/web/src/components/chat/Message.tsx
+++ b/packages/web/src/components/chat/Message.tsx
@@ -340,11 +340,14 @@ export function Message({ message, isCompact, isFirstInGroup, previousMessageId
         ) : (
           <div className="flex flex-col gap-1">
             {isGifOnly ? (
-              <div className="mt-1 max-w-[250px] rounded-lg overflow-hidden">
+              <div
+                className="mt-1 max-w-[250px] rounded-lg overflow-hidden bg-surface-input"
+                style={{ aspectRatio: '4/3', maxHeight: 250 }}
+              >
                 <img
                   src={message.content!.trim()}
                   alt="GIF"
-                  className="max-w-full max-h-[250px] object-contain rounded-lg"
+                  className="w-full h-full object-contain rounded-lg"
                   loading="lazy"
                 />
               </div>