diff --git a/client/src/components/ImageSection/ImageSection.js b/client/src/components/ImageSection/ImageSection.js
new file mode 100644
index 0000000..774b7a5
--- /dev/null
+++ b/client/src/components/ImageSection/ImageSection.js
@@ -0,0 +1,28 @@
+import './imageSection.css';
+
+function ImageSection({ arr }) {
+  const mainImage = arr[0];
+  const images = arr.slice(1);
+  return (
+    <section className="main">
+      <section className="bigImage">
+        <img
+          src={mainImage}
+          alt="home"
+          loading="lazy"
+        />
+      </section>
+      <section className="anotherImage">
+        {images.map((item) => (
+          <img
+            src={item}
+            alt="home"
+            loading="lazy"
+          />
+        ))}
+      </section>
+    </section>
+  );
+}
+
+export default ImageSection;
diff --git a/client/src/components/ImageSection/imageSection.css b/client/src/components/ImageSection/imageSection.css
new file mode 100644
index 0000000..0a81431
--- /dev/null
+++ b/client/src/components/ImageSection/imageSection.css
@@ -0,0 +1,26 @@
+.main{
+    display: flex;
+    width: 80%;
+    height: 60vh;
+}
+.bigImage{
+    width: 70%;
+}
+.bigImage img{
+    min-width: 100%;
+    max-height: 100%
+}
+.anotherImage{
+    display: flex;
+    flex-direction:column;
+    width: 30%;
+    justify-content: space-between
+
+}
+.anotherImage img{
+    min-width: 100%;
+    min-height: 30%;
+    margin-left:10px;
+    margin-bottom: 6px;
+
+}
\ No newline at end of file