diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index b060f32d..6ae42959 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -9,9 +9,17 @@ interface BannerProps {
 
 function Banner({ image, alt, title, description }: BannerProps) {
   return (
-    <div className="card w-full max-h-[320px] bg-primary-content flex flex-row px-20 py-10 box-border">
-      <Image src={image} alt={alt} width={454} height={200} priority={false} />
-      <div className="flex flex-col justify-center pl-24 gap-y-3.5">
+    <div className="card w-full max-h-[320px] bg-primary-content flex flex-row justify-between px-20 py-10 box-border gap-x-10 lg:gap-x-20">
+      <div className="h-[200px] w-[276px] relative shrink-0">
+        <Image
+          src={image}
+          alt={alt}
+          fill={true}
+          objectFit="contain"
+          priority={false}
+        />
+      </div>
+      <div className="flex flex-col max-w-[700px] 2xl:max-w-none justify-center gap-y-3.5">
         <h3 className="text-3xl font-bold text-base-300">{title}</h3>
         <p className="text-lg font-medium text-base-300">{description}</p>
       </div>