diff --git a/gallery-container.html b/gallery-container.html
index 37f2aa9..dee4735 100644
--- a/gallery-container.html
+++ b/gallery-container.html
@@ -1,52 +1,5 @@
-<div class="gallery-grid">
-  <img src="gallery/1.png" alt="Image 1">
-  <img src="gallery/2.jpg" alt="Image 2">
-  <img src="gallery/3.jpg" alt="Image 3">
-  <img src="gallery/4.jpg" alt="Image 4">
-  <img src="gallery/5.png" alt="Image 5">
-  <img src="gallery/6.png" alt="Image 6">
-  <img src="gallery/7.jpg" alt="Image 7">
-  <img src="gallery/8.jpg" alt="Image 8">
-  <img src="gallery/9.jpg" alt="Image 9">
-  <img src="gallery/10.jpg" alt="Image 10">
-  <img src="gallery/11.jpg" alt="Image 11">
-  <img src="gallery/12.jpg" alt="Image 12">
-  <img src="gallery/13.gif" alt="Image 13">
-  <img src="gallery/14.jpg" alt="Image 14">
-  <img src="gallery/15.png" alt="Image 15">
-  <img src="gallery/16.png" alt="Image 16">
-  <img src="gallery/17.jpg" alt="Image 17">
-  <img src="gallery/18.jpg" alt="Image 18">
-  <img src="gallery/19.jpg" alt="Image 19">
-  <img src="gallery/20.jpg" alt="Image 20">
-  <img src="gallery/21.gif" alt="Image 21">
-  <img src="gallery/22.jpg" alt="Image 22">
-  <img src="gallery/23.jpg" alt="Image 23">
-  <img src="gallery/24.png" alt="Image 24">
-  <img src="gallery/25.png" alt="Image 25">
-  <img src="gallery/26.png" alt="Image 26">
-  <img src="gallery/27.jpg" alt="Image 27">
-  <img src="gallery/28.jpg" alt="Image 28">
-  <img src="gallery/29.jpg" alt="Image 29">
-  <img src="gallery/30.jpg" alt="Image 30">
-  <img src="gallery/31.jpg" alt="Image 31">
-  <img src="gallery/32.jpg" alt="Image 32">
-  <img src="gallery/33.jpg" alt="Image 33">
-  <img src="gallery/34.jpg" alt="Image 34">
-  <img src="gallery/35.jpg" alt="Image 35">
-  <img src="gallery/36.jpg" alt="Image 36">
-  <img src="gallery/37.jpg" alt="Image 37">
-  <img src="gallery/38.jpg" alt="Image 38">
-  <img src="gallery/39.jpg" alt="Image 39">
-  <img src="gallery/40.jpg" alt="Image 40">
-  <img src="gallery/41.jpg" alt="Image 41">
-  <img src="gallery/42.jpg" alt="Image 42">
-  <img src="gallery/43.jpg" alt="Image 43">
-  <img src="gallery/44.jpg" alt="Image 44">
-  <img src="gallery/45.jpg" alt="Image 45">
-  <img src="gallery/46.jpg" alt="Image 46">
-  <img src="gallery/47.jpg" alt="Image 47">
-  <img src="gallery/48.jpg" alt="Image 48">
-  <img src="gallery/49.jpg" alt="Image 49">
-  <img src="gallery/50.jpg" alt="Image 50">
-</div>
\ No newline at end of file
+<div id="gallery-container" class="gallery-grid"
+     data-files="1.png,2.jpg,3.jpg,4.jpg,5.png,6.png,7.jpg,8.jpg,9.jpg,10.jpg,11.jpg,12.jpg,13.gif,14.jpg,15.png,16.png,17.jpg,18.jpg,19.jpg,20.jpg,21.gif,22.jpg,23.jpg,24.png,25.png,26.png">
+</div>
+
+<script src="js/gallery.js"></script>
diff --git a/js/gallery.js b/js/gallery.js
index e6e665a..294693a 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -1,15 +1,14 @@
 document.addEventListener('DOMContentLoaded', () => {
   const galleryContainer = document.getElementById('gallery-container');
 
-  // Get file list from HTML attribute
+  // Get filenames from HTML attribute
   const files = galleryContainer.dataset.files.split(',');
 
   files.forEach((file, index) => {
     const img = document.createElement('img');
     img.src = `gallery/${file.trim()}`;
     img.alt = `Image ${index + 1}`;
-    img.onerror = () => { img.style.display = 'none'; }; // hide broken
+    img.onerror = () => { img.style.display = 'none'; }; // hide broken images
     galleryContainer.appendChild(img);
   });
 });
-