diff --git a/src/app/home/components/Banners4.tsx b/src/app/home/components/Banners4.tsx
index 4f4597c..2809397 100644
--- a/src/app/home/components/Banners4.tsx
+++ b/src/app/home/components/Banners4.tsx
@@ -11,29 +11,29 @@ const Banners4: FC = () => {
 
 
     return (
-        <div className='flex lg:flex-row flex-col gap-6 lg:h-[340px]'>
-            <div className='flex-1 bg-primary/10 h-full rounded-[10px]'>
-                <Link href={sortedBanners[3]?.linkUrl || '#'}>
-                    <Image src={data?.results?.banners?.[3]?.imageUrl as string} height={340} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
+        <div className='flex lg:flex-row flex-col gap-6'>
+            <div className='flex-1 rounded-[10px]'>
+                <Link href={sortedBanners[3]?.linkUrl || '#'} className='block'>
+                    <Image src={data?.results?.banners?.[3]?.imageUrl as string} height={340} width={1000} className='w-full h-auto rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
                 </Link>
             </div>
 
-            <div className='lg:w-[158px] flex flex-col gap-6'>
-                <div className='lg:size-[158px] w-full h-auto rounded-[10px] bg-slate-100'>
-                    <Link href={sortedBanners[4]?.linkUrl || '#'}>
-                        <Image src={data?.results?.banners?.[4]?.imageUrl as string} height={158} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
+            <div className='lg:w-[12%] w-full flex flex-col gap-6'>
+                <div className='w-full rounded-[10px]'>
+                    <Link href={sortedBanners[4]?.linkUrl || '#'} className='block'>
+                        <Image src={data?.results?.banners?.[4]?.imageUrl as string} height={158} width={158} className='w-full h-auto rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
                     </Link>
                 </div>
-                <div className='lg:size-[158px] w-full h-auto rounded-[10px] bg-slate-200'>
-                    <Link href={sortedBanners[5]?.linkUrl || '#'}>
-                        <Image src={data?.results?.banners?.[5]?.imageUrl as string} height={158} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
+                <div className='w-full rounded-[10px]'>
+                    <Link href={sortedBanners[5]?.linkUrl || '#'} className='block'>
+                        <Image src={data?.results?.banners?.[5]?.imageUrl as string} height={158} width={158} className='w-full h-auto rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
                     </Link>
                 </div>
             </div>
 
-            <div className='lg:w-[400px] w-full bg-amber-50'>
-                <Link href={sortedBanners[6]?.linkUrl || '#'}>
-                    <Image src={data?.results?.banners?.[6]?.imageUrl as string} height={400} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
+            <div className='lg:w-[30%] w-full rounded-lg'>
+                <Link href={sortedBanners[6]?.linkUrl || '#'} className='block'>
+                    <Image src={data?.results?.banners?.[6]?.imageUrl as string} height={400} width={400} className='w-full h-auto rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
                 </Link>
             </div>