diff --git a/src/components/Banners/index.js b/src/components/Banners/index.js
new file mode 100644
index 0000000..124f001
--- /dev/null
+++ b/src/components/Banners/index.js
@@ -0,0 +1,60 @@
+import React from "react";
+
+const Banners = ({
+    mainBanner,
+    leftBanner,
+    midTopBanner,
+    midBottomBanner,
+}) => {
+    return (
+        <div className="flex w-full justify-between" style={{
+            height: '400px'
+        }}>
+            <div className={`h-full w-1/2 rounded-xl flex items-center`} style={{
+                background: mainBanner ? '' : 'rgba(134,160,185,0.16)',
+
+            }}>
+
+                <img src={mainBanner} className="rounded-xl h-full" />
+
+            </div>
+            <div className="flex h-full w-1/2 ">
+                <div className="flex flex-col w-1/2 h-full px-6 justify-center items-between">
+
+                    <div className={`${midTopBanner ? '' : 'h-1/2 '} w-full rounded-xl mb-2`}
+                        style={{
+                            background: midTopBanner ? '' : 'rgba(134,160,185,0.16)',
+
+                        }}
+                    >
+
+                        <img src={midTopBanner} className="rounded-xl" />
+                    </div>
+                    <div className={`${midBottomBanner ? '' : 'h-1/2 '} w-full rounded-xl mt-2`}
+                        style={{
+                            background: midBottomBanner ? '' : 'rgba(134,160,185,0.16)',
+
+                        }}
+                    >
+
+                        <img src={midBottomBanner} className="rounded-xl" />
+
+                    </div>
+
+                </div>
+                <div className=" h-full w-1/2 rounded-xl"
+                    style={{
+                        background: leftBanner ? '' : 'rgba(134,160,185,0.16)',
+
+                    }}
+                >
+                    <img src={leftBanner} className="rounded-xl" />
+
+                </div>
+            </div>
+        </div>
+    )
+}
+
+
+export default Banners;
\ No newline at end of file
diff --git a/src/views/Home/Desktop/index.js b/src/views/Home/Desktop/index.js
index 883bfd0..502302c 100644
--- a/src/views/Home/Desktop/index.js
+++ b/src/views/Home/Desktop/index.js
@@ -16,7 +16,9 @@ const DesktopHome = (
 return (
 
     <div className="flex flex-col items-center w-4/5 justify-center">
-        <Banners />
+        <Banners
+       
+        />
     </div>    
 
 )