diff --git a/src/app/home/components/Banners3.tsx b/src/app/home/components/Banners3.tsx
index 3b69179..552216d 100644
--- a/src/app/home/components/Banners3.tsx
+++ b/src/app/home/components/Banners3.tsx
@@ -13,11 +13,8 @@ const Banners3: FC = () => {
     const { desktopBanners, mobileBanners } = useMemo(() => {
         const allBanners = data?.results?.banners ?? []
 
-        const sortByOrder = (items: IBanner[]) =>
-            [...items].sort((firstBanner, secondBanner) => firstBanner.order - secondBanner.order)
-
         const groupByDisplayLocation = (displayLocation: IBanner['displayLocation']) =>
-            sortByOrder(allBanners.filter((banner) => banner.displayLocation === displayLocation))
+            allBanners.filter((banner) => banner.displayLocation === displayLocation)
 
         return {
             desktopBanners: groupByDisplayLocation('desktop'),
@@ -26,9 +23,9 @@ const Banners3: FC = () => {
     }, [data?.results?.banners])
 
     const renderLayout = (banners: IBanner[]) => {
-        if (banners.length < 3) return null
-
-        const [firstBanner, secondBanner, thirdBanner] = banners
+        const firstBanner = banners.find((banner) => banner.order === 1)
+        const secondBanner = banners.find((banner) => banner.order === 2)
+        const thirdBanner = banners.find((banner) => banner.order === 3)
 
         if (!firstBanner?.imageUrl || !secondBanner?.imageUrl || !thirdBanner?.imageUrl) return null
 
@@ -75,8 +72,12 @@ const Banners3: FC = () => {
 
     return (
         <>
-            <div className='hidden lg:block'>{renderLayout(desktopBanners)}</div>
-            <div className='lg:hidden'>{renderLayout(mobileBanners)}</div>
+            {desktopBanners.length > 0 && (
+                <div className='hidden lg:block'>{renderLayout(desktopBanners)}</div>
+            )}
+            {mobileBanners.length > 0 && (
+                <div className='lg:hidden'>{renderLayout(mobileBanners)}</div>
+            )}
         </>
     )
 }
diff --git a/src/app/home/components/Banners4.tsx b/src/app/home/components/Banners4.tsx
index 514f96e..7c8fb0c 100644
--- a/src/app/home/components/Banners4.tsx
+++ b/src/app/home/components/Banners4.tsx
@@ -12,11 +12,8 @@ const Banners4: FC = () => {
     const { desktopBanners, mobileBanners } = useMemo(() => {
         const allBanners = data?.results?.banners ?? []
 
-        const sortByOrder = (items: IBanner[]) =>
-            [...items].sort((firstBanner, secondBanner) => firstBanner.order - secondBanner.order)
-
         const groupByDisplayLocation = (displayLocation: IBanner['displayLocation']) =>
-            sortByOrder(allBanners.filter((banner) => banner.displayLocation === displayLocation))
+            allBanners.filter((banner) => banner.displayLocation === displayLocation)
 
         return {
             desktopBanners: groupByDisplayLocation('desktop'),
@@ -25,17 +22,19 @@ const Banners4: FC = () => {
     }, [data?.results?.banners])
 
     const renderLayout = (banners: IBanner[]) => {
-        if (banners.length < 4) return null
-
-        const [firstBanner, secondBanner, thirdBanner, fourthBanner] = banners
+        const firstBanner = banners.find((banner) => banner.order === 4)
+        const secondBanner = banners.find((banner) => banner.order === 5)
+        const thirdBanner = banners.find((banner) => banner.order === 6)
+        const fourthBanner = banners.find((banner) => banner.order === 7)
 
         if (
             !firstBanner?.imageUrl ||
             !secondBanner?.imageUrl ||
             !thirdBanner?.imageUrl ||
             !fourthBanner?.imageUrl
-        )
+        ) {
             return null
+        }
 
         return (
             <div className='flex lg:flex-row flex-col gap-6'>
@@ -93,8 +92,12 @@ const Banners4: FC = () => {
 
     return (
         <>
-            <div className='hidden lg:block'>{renderLayout(desktopBanners)}</div>
-            <div className='lg:hidden'>{renderLayout(mobileBanners)}</div>
+            {desktopBanners.length > 0 && (
+                <div className='hidden lg:block'>{renderLayout(desktopBanners)}</div>
+            )}
+            {mobileBanners.length > 0 && (
+                <div className='lg:hidden'>{renderLayout(mobileBanners)}</div>
+            )}
         </>
     )
 }