diff --git a/client/src/components/Chat/Input/Files/FileRow.tsx b/client/src/components/Chat/Input/Files/FileRow.tsx
index 542978f3a8..7919e2e875 100644
--- a/client/src/components/Chat/Input/Files/FileRow.tsx
+++ b/client/src/components/Chat/Input/Files/FileRow.tsx
@@ -75,20 +75,20 @@ export default function FileRow({
   const renderFiles = () => {
     const rowStyle = isRTL
       ? {
-        display: 'flex',
-        flexDirection: 'row-reverse',
-        flexWrap: 'wrap',
-        gap: '4px',
-        width: '100%',
-        maxWidth: '100%',
-      }
+          display: 'flex',
+          flexDirection: 'row-reverse',
+          flexWrap: 'wrap',
+          gap: '4px',
+          width: '100%',
+          maxWidth: '100%',
+        }
       : {
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: '4px',
-        width: '100%',
-        maxWidth: '100%',
-      };
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '4px',
+          width: '100%',
+          maxWidth: '100%',
+        };
 
     return (
       <div style={rowStyle as React.CSSProperties}>
diff --git a/client/src/components/Chat/Messages/Content/DialogImage.tsx b/client/src/components/Chat/Messages/Content/DialogImage.tsx
index 3418f5c9dc..2080e69fca 100644
--- a/client/src/components/Chat/Messages/Content/DialogImage.tsx
+++ b/client/src/components/Chat/Messages/Content/DialogImage.tsx
@@ -8,7 +8,7 @@ export default function DialogImage({ isOpen, onOpenChange, src = '', downloadIm
         showCloseButton={false}
         className="h-full w-full rounded-none bg-transparent"
         disableScroll={false}
-        overlayClassName="bg-surface-secondary"
+        overlayClassName="bg-surface-primary opacity-95 z-50"
       >
         <div className="absolute left-0 right-0 top-0 flex items-center justify-between p-4">
           <Button
diff --git a/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
index 3237bc37f2..bf09e5a7c3 100644
--- a/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
+++ b/client/src/components/Chat/Messages/Content/Parts/OpenAIImageGen/OpenAIImageGen.tsx
@@ -194,8 +194,8 @@ export default function OpenAIImageGen({
           <Image
             altText={filename}
             imagePath={filepath ?? ''}
-            width={dimensions.width}
-            height={dimensions.height}
+            width={Number(dimensions.width?.split('px')[0])}
+            height={Number(dimensions.height?.split('px')[0])}
             placeholderDimensions={{ width: dimensions.width, height: dimensions.height }}
           />
         </div>
diff --git a/client/src/components/ui/PixelCard.tsx b/client/src/components/ui/PixelCard.tsx
index aabed69fb4..141a3ee55c 100644
--- a/client/src/components/ui/PixelCard.tsx
+++ b/client/src/components/ui/PixelCard.tsx
@@ -350,12 +350,13 @@ export default function PixelCard({
     >
       <div
         className={cn(
-          'ease-[cubic-bezier(0.5,1,0.89,1)] relative isolate grid select-none place-items-center overflow-hidden rounded-lg border border-border-light shadow-md transition-colors duration-200',
+          'relative isolate grid select-none place-items-center overflow-hidden rounded-lg border border-border-light shadow-md transition-colors duration-200 ease-in-out',
           className,
         )}
         style={{
           width: '100%',
           height: '100%',
+          transitionTimingFunction: 'cubic-bezier(0.5, 1, 0.89, 1)',
         }}
         onMouseEnter={hoverIn}
         onMouseLeave={hoverOut}