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/redux/data.js b/src/redux/data.js
index 4f4a3c9..5b3c805 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -39,6 +39,7 @@ import VodProductNew from "../components/VodProductNew";
 import AddToCartCard from "../components/AddToCart";
 import ProductDescription from "../components/ProductDescription";
 import QandA from '../components/QandA';
+import Banners from '../components/Banners';
 
 const components = [
   {
@@ -653,6 +654,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Banners",
+    author: "Keshavarzi",
+    props: [],
+    content: {
+      name: "Banners Container",
+      component: <Banners />,
+      code: null,
+    },
+  },
 ];
 
 export default components;