diff --git a/src/app/home/components/Banners3.tsx b/src/app/home/components/Banners3.tsx
index f5cd82a..c13d2a7 100644
--- a/src/app/home/components/Banners3.tsx
+++ b/src/app/home/components/Banners3.tsx
@@ -8,23 +8,25 @@ const Banners3: FC = () => {
 
     const { data } = useGetLanding()
 
+    const sortedBanners = data?.results?.banners?.sort((a, b) => a.order - b.order) || []
+
     return (
         <div className='flex gap-4'>
             <div className='flex flex-col gap-2 h-full flex-1'>
                 <div className='flex-1 h-full'>
-                    <Link href={data?.results?.banners?.[1]?.linkUrl || '#'}>
-                        <Image src={data?.results?.banners?.[1]?.imageUrl as string} height={500} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[0]?.altText as string} />
+                    <Link href={sortedBanners[0]?.linkUrl || '#'}>
+                        <Image src={sortedBanners[0]?.imageUrl as string} height={500} width={1000} className='flex-1 rounded-lg' alt={sortedBanners[1]?.altText as string} />
                     </Link>
                 </div>
                 <div className='flex-1 h-full'>
-                    <Link href={data?.results?.banners?.[2]?.linkUrl || '#'}>
-                        <Image src={data?.results?.banners?.[2]?.imageUrl as string} height={500} width={1000} className='flex-1 rounded-lg' alt={data?.results?.banners?.[2]?.altText as string} />
+                    <Link href={sortedBanners[1]?.linkUrl || '#'}>
+                        <Image src={sortedBanners[1]?.imageUrl as string} height={500} width={1000} className='flex-1 rounded-lg' alt={sortedBanners[2]?.altText as string} />
                     </Link>
                 </div>
             </div>
             <div className='flex-1 h-full'>
-                <Link href={data?.results?.banners?.[0]?.linkUrl || '#'}>
-                    <Image src={data?.results?.banners?.[0]?.imageUrl as string} height={1000} width={1000} className='flex-1 rounded-lg h-full object-cover' alt={data?.results?.banners?.[0]?.altText as string} />
+                <Link href={sortedBanners[2]?.linkUrl || '#'}>
+                    <Image src={sortedBanners[2]?.imageUrl as string} height={1000} width={1000} className='flex-1 rounded-lg h-full object-cover' alt={sortedBanners[0]?.altText as string} />
                 </Link>
             </div>
         </div>
diff --git a/src/app/home/components/Banners4.tsx b/src/app/home/components/Banners4.tsx
index 1cf0cf0..bf6ec95 100644
--- a/src/app/home/components/Banners4.tsx
+++ b/src/app/home/components/Banners4.tsx
@@ -7,29 +7,32 @@ import Link from 'next/link'
 const Banners4: FC = () => {
     const { data } = useGetLanding()
 
+    const sortedBanners = data?.results?.banners?.sort((a, b) => a.order - b.order) || []
+
+
     return (
         <div className='flex gap-6 h-[340px]'>
             <div className='flex-1 bg-primary/10 h-full rounded-[10px]'>
-                <Link href={data?.results?.banners?.[3]?.linkUrl || '#'}>
+                <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} />
                 </Link>
             </div>
 
             <div className='w-[158px] flex flex-col gap-6'>
                 <div className='w-[158px] h-[158px] rounded-[10px] bg-slate-100'>
-                    <Link href={data?.results?.banners?.[4]?.linkUrl || '#'}>
+                    <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} />
                     </Link>
                 </div>
                 <div className='w-[158px] h-[158px] rounded-[10px] bg-slate-200'>
-                    <Link href={data?.results?.banners?.[5]?.linkUrl || '#'}>
+                    <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} />
                     </Link>
                 </div>
             </div>
 
             <div className='w-[400px] bg-amber-50'>
-                <Link href={data?.results?.banners?.[6]?.linkUrl || '#'}>
+                <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} />
                 </Link>
             </div>