diff --git a/images/event-image.jpg b/images/event-image.jpg
new file mode 100644
index 0000000..bc1a303
Binary files /dev/null and b/images/event-image.jpg differ
diff --git a/images/product-image.jpg b/images/product-image.jpg
new file mode 100644
index 0000000..5bdd1bd
Binary files /dev/null and b/images/product-image.jpg differ
diff --git a/images/team-photo.webp b/images/team-photo.webp
new file mode 100644
index 0000000..1c68433
Binary files /dev/null and b/images/team-photo.webp differ
diff --git a/pages/gallery.html b/pages/gallery.html
index 9b0aa7f..209630f 100644
--- a/pages/gallery.html
+++ b/pages/gallery.html
@@ -5,6 +5,63 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Галерея » Веб-програмування ПР№1</title>
     <link rel="stylesheet" href="/style.css">
+
+    <script>
+        const gallery = [
+            {
+                image: "/images/hero-image.png",
+                title: "Всім привіт!"
+            },
+            {
+                image: "/images/website-logo.png",
+                title: "Наш логотип"
+            },
+            {
+                image: "/images/about-image.png",
+                title: "Наш офіс"
+            },
+            {
+                image: "/images/team-photo.webp",
+                title: "Наша команда"
+            },
+            {
+                image: "/images/product-image.jpg",
+                title: "Наш продукт"
+            },
+            {
+                image: "/images/event-image.jpg",
+                title: "Подія компанії"
+            },
+        ];
+
+        function loadGallery() {
+            const gallerySection = document.getElementById("gallery");
+
+            gallery.forEach(el => {
+                const galleryItem = document.createElement("a");
+                galleryItem.href = el.image;
+                galleryItem.target = "_blank";
+                galleryItem.className = "gallery-item";
+
+                const img = document.createElement("img");
+                img.src = el.image;
+                img.alt = el.title;
+
+                const title = document.createElement("span");
+                title.className = "gallery-title";
+                title.textContent = el.title;
+
+                galleryItem.appendChild(img);
+                galleryItem.appendChild(title);
+
+                gallerySection.appendChild(galleryItem);
+            });
+        }
+
+        document.addEventListener("DOMContentLoaded", () => {
+            loadGallery();
+        });
+    </script>
 </head>
 <body>
     <!-- Navbar -->
@@ -17,5 +74,13 @@
             <a href="/pages/about.html">Про нас</a>
         </div>
     </nav>
+
+    <!-- Content -->
+    <main>
+        <h1>Галерея</h1>
+        <div id="gallery" class="gallery">
+            <!-- Generated dynamically with JS -->
+        </div>
+    </main>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 4200c6c..d33a7d4 100644
--- a/style.css
+++ b/style.css
@@ -14,7 +14,7 @@ body {
     background-color: var(--background);
     color: var(--primary);
     margin: 0;
-    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 }
 
 /* Common */
@@ -26,7 +26,7 @@ a {
 }
 
 a:hover {
-    text-decoration:underline;
+    text-decoration: underline;
 }
 
 /* Navbar */
@@ -136,3 +136,41 @@ button:hover {
 button:active {
     transform: scale(0.98);
 }
+
+/* Gallery */
+
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+    margin: 1rem auto;
+    max-width: 50rem;
+}
+
+.gallery-item {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    background-color: var(--highlight);
+    border-radius: 0.75rem;
+    overflow: hidden;
+    transition: transform 0.2s;
+}
+
+.gallery-item img {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    display: block;
+}
+
+.gallery-item:hover {
+    transform: scale(1.05);
+    text-decoration: none;
+}
+
+.gallery-title {
+    padding: 0.5rem;
+    color: var(--primary);
+    font-weight: 600;
+}
