diff --git a/pom.xml b/pom.xml
index 15e79b6..a8b179a 100644
--- a/pom.xml
+++ b/pom.xml
@@ -27,7 +27,7 @@
 		<url/>
 	</scm>
 	<properties>
-		<java.version>21</java.version>
+		<java.version>17</java.version>
 	</properties>
 	<dependencies>
 		<dependency>
@@ -85,6 +85,7 @@
 				<groupId>org.apache.maven.plugins</groupId>
 				<artifactId>maven-compiler-plugin</artifactId>
 				<configuration>
+					<release>${java.version}</release>
 					<annotationProcessorPaths>
 						<path>
 							<groupId>org.projectlombok</groupId>
diff --git a/src/main/java/com/example/PhotoGallery/Controller/PageController.java b/src/main/java/com/example/PhotoGallery/Controller/PageController.java
index ad700d4..9995fd6 100644
--- a/src/main/java/com/example/PhotoGallery/Controller/PageController.java
+++ b/src/main/java/com/example/PhotoGallery/Controller/PageController.java
@@ -1,6 +1,7 @@
 package com.example.PhotoGallery.Controller;
 
 import org.springframework.beans.factory.annotation.Autowired;
+import java.util.List;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
@@ -15,8 +16,8 @@ public class PageController {
 
     @GetMapping("/")
     public String index(Model model) {
-        String imagesHtml = photoService.buildImageHtml(model);
-        model.addAttribute("images", imagesHtml);
+        List<String> imageFileNames = photoService.getImageFileNames();
+        model.addAttribute("imageFileNames", imageFileNames);
         return "index";
     }
 
diff --git a/src/main/java/com/example/PhotoGallery/Services/ImageHtmlBuilder.java b/src/main/java/com/example/PhotoGallery/Services/ImageHtmlBuilder.java
index 9e568a1..9e87725 100644
--- a/src/main/java/com/example/PhotoGallery/Services/ImageHtmlBuilder.java
+++ b/src/main/java/com/example/PhotoGallery/Services/ImageHtmlBuilder.java
@@ -1,8 +1,8 @@
 package com.example.PhotoGallery.Services;
 
 import java.io.File;
+import java.util.ArrayList;
 import java.util.List;
-import java.util.Random;
 
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
@@ -16,36 +16,17 @@ public class ImageHtmlBuilder {
     @Autowired
     private PhotoRepo photoRepo;
 
-    public String htmlImageBuilder() {
-        String html = "";
+    public List<String> getImageFileNames() {
+        List<String> fileNames = new ArrayList<>();
 
         List<Photo> allPhotos = photoRepo.findAll();
 
         for (Photo photo : allPhotos) {
             String thumbnailPath = photo.getThumbnail_path();
             String filename = new File(thumbnailPath).getName();
-
-            // if (metaData.getDate is before x and after y)
-            html = createHtml(filename);
-            //if searching && is search in tag
-                //html createHtml(filename);
-
+            fileNames.add(filename);
         }
 
-        return html;
+        return fileNames;
     }
-
-    private String createHtml(String fileName) {
-        StringBuilder html = new StringBuilder();
-
-        html.append("<div class=\"masonry-item\">")
-                .append("<img data-src=\"/thumbnails/").append(fileName).append("\" ")
-                .append("data-full=\"/images/").append(fileName).append("\" ")
-                .append("class=\"lazy-img\" loading=\"lazy\" />")
-                .append("</div>");
-
-
-        return html.toString();
-    }
-
 }
diff --git a/src/main/java/com/example/PhotoGallery/Services/PhotoService.java b/src/main/java/com/example/PhotoGallery/Services/PhotoService.java
index 2ad1e16..709ea04 100644
--- a/src/main/java/com/example/PhotoGallery/Services/PhotoService.java
+++ b/src/main/java/com/example/PhotoGallery/Services/PhotoService.java
@@ -25,8 +25,8 @@ public class PhotoService {
         databasePopulation.populateDatabase();
     }
 
-    public String buildImageHtml(Model model) {
-        return imageHtmlBuilder.htmlImageBuilder();
+    public List<String> getImageFileNames() {
+        return imageHtmlBuilder.getImageFileNames();
     }
 
 
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index d63faf7..a52a1ec 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -1,170 +1,201 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
+
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Photo Gallery</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Photo Gallery</title>
 
-<!-- Bootstrap CSS -->
-<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
 
-<style>
-body {
-    background: linear-gradient(160deg, #e0eafc, #cfdef3);
-    font-family: 'Segoe UI', sans-serif;
-    color: #333;
-}
-h2 { font-weight: 700; color: #1b1f3b; }
-.navbar-brand { font-weight: 600; font-size: 1.5rem; }
+    <style>
+        body {
+            background: linear-gradient(160deg, #e0eafc, #cfdef3);
+            font-family: 'Segoe UI', sans-serif;
+            color: #333;
+        }
 
-/* Masonry Grid */
-.gallery-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    grid-auto-rows: 10px;
-    gap: 10px;
-}
-.masonry-item img {
-    width: 100%;
-    height: auto;
-    border-radius: 10px;
-    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
-    cursor: pointer;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-.masonry-item img:hover {
-    transform: scale(1.03);
-    box-shadow: 0 16px 30px rgba(0,0,0,0.25);
-}
+        h2 {
+            font-weight: 700;
+            color: #1b1f3b;
+        }
 
-/* Modal styling */
-.modal-content { background-color: rgba(0,0,0,0.95); border: none; border-radius: 10px; }
-.modal-body img { max-height: 85vh; border-radius: 10px; }
-.modal-navigation {
-    position: absolute;
-    top: 50%;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    transform: translateY(-50%);
-    padding: 0 1rem;
-}
-.modal-navigation button {
-    background: rgba(0,0,0,0.5);
-    border: none;
-    color: #fff;
-    font-size: 2rem;
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    cursor: pointer;
-    transition: background 0.2s;
-}
-.modal-navigation button:hover { background: rgba(0,0,0,0.8); }
-</style>
+        .navbar-brand {
+            font-weight: 600;
+            font-size: 1.5rem;
+        }
+
+        /* Masonry Grid */
+        .gallery-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            grid-auto-rows: 10px;
+            gap: 10px;
+        }
+
+        .masonry-item img {
+            width: 100%;
+            height: auto;
+            border-radius: 10px;
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+            cursor: pointer;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .masonry-item img:hover {
+            transform: scale(1.03);
+            box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
+        }
+
+        /* Modal styling */
+        .modal-content {
+            background-color: rgba(0, 0, 0, 0.95);
+            border: none;
+            border-radius: 10px;
+        }
+
+        .modal-body img {
+            max-height: 85vh;
+            border-radius: 10px;
+        }
+
+        .modal-navigation {
+            position: absolute;
+            top: 50%;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            transform: translateY(-50%);
+            padding: 0 1rem;
+        }
+
+        .modal-navigation button {
+            background: rgba(0, 0, 0, 0.5);
+            border: none;
+            color: #fff;
+            font-size: 2rem;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+
+        .modal-navigation button:hover {
+            background: rgba(0, 0, 0, 0.8);
+        }
+    </style>
 </head>
 
 <body>
 
-<!-- Navbar -->
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm">
-<div class="container-fluid">
-<a class="navbar-brand" href="#">PhotoGallery</a>
-<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-    <span class="navbar-toggler-icon"></span>
-</button>
-<div class="collapse navbar-collapse" id="navbarNav">
-<ul class="navbar-nav me-auto mb-2 mb-lg-0">
-<li class="nav-item"><a class="nav-link active" href="#">All</a></li>
-<li class="nav-item"><a class="nav-link" href="#">Favorites</a></li>
-<li class="nav-item"><a class="nav-link" href="#">Recent</a></li>
-</ul>
-<form class="d-flex" role="search">
-<input class="form-control me-2" type="search" placeholder="Search">
-<button class="btn btn-outline-light" type="submit">Search</button>
-</form>
-</div>
-</div>
-</nav>
+    <!-- Navbar -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">PhotoGallery</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item"><a class="nav-link active disabled" href="#">All</a></li>
+                    <li class="nav-item"><a class="nav-link disabled" href="#">Favorites</a></li>
+                    <li class="nav-item"><a class="nav-link disabled" href="#">Recent</a></li>
+                </ul>
+                <form class="d-flex" role="search">
+                    <input class="form-control me-2 disabled" type="search" placeholder="Search">
+                    <button class="btn btn-outline-light disabled" type="submit">Search</button>
+                </form>
+            </div>
+        </div>
+    </nav>
 
-<!-- Hero Section -->
-<div class="container text-center my-5">
-<h2>Welcome To The Gallery</h2>
-<p class="text-muted">Memories</p>
-</div>
+    <!-- Hero Section -->
+    <div class="container text-center my-5">
+        <h2>Welcome To The Gallery</h2>
+        <p class="text-muted">Memories</p>
+    </div>
 
-<!-- Gallery Container -->
-<div class="container gallery-container" th:utext="${images}"></div>
-
-<!-- Image Modal -->
-<div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
-<div class="modal-dialog modal-dialog-centered modal-xl">
-<div class="modal-content">
-    <div class="modal-body text-center p-0 position-relative">
-        <img id="modalImage" src="" class="img-fluid" alt="Full size">
-        <div class="modal-navigation">
-            <button id="prevImage">&#10094;</button>
-            <button id="nextImage">&#10095;</button>
+    <!-- Gallery Container -->
+    <div class="container gallery-container" id="gallery-container">
+        <!--/* Thymeleaf loop to generate image elements */-->
+        <div class="masonry-item" th:each="fileName : ${imageFileNames}">
+            <img th:data-src="@{/thumbnails/{name}(name=${fileName})}"
+                th:data-full="@{/images/{name}(name=${fileName})}" class="lazy-img" loading="lazy" />
         </div>
     </div>
-</div>
-</div>
-</div>
 
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Image Modal -->
+    <div class="modal fade" id="imageModal" tabindex="-1" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-xl">
+            <div class="modal-content">
+                <div class="modal-body text-center p-0 position-relative">
+                    <img id="modalImage" src="" class="img-fluid" alt="Full size">
+                    <div class="modal-navigation">
+                        <button id="prevImage">&#10094;</button>
+                        <button id="nextImage">&#10095;</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-    const galleryContainer = document.querySelector('.gallery-container');
-    const lazyImages = galleryContainer.querySelectorAll('img.lazy-img');
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
 
-    function resizeMasonryItem(img) {
-        const rowHeight = parseInt(getComputedStyle(galleryContainer).getPropertyValue('grid-auto-rows'));
-        const rowGap = parseInt(getComputedStyle(galleryContainer).getPropertyValue('gap'));
-        const rowSpan = Math.ceil((img.getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
-        img.parentElement.style.gridRowEnd = `span ${rowSpan}`;
-    }
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const galleryContainer = document.getElementById('gallery-container');
+            const lazyImages = galleryContainer.querySelectorAll('img.lazy-img');
 
-    function resizeAllMasonry() {
-        galleryContainer.querySelectorAll('.masonry-item img').forEach(img => {
-            if (img.complete) resizeMasonryItem(img);
-        });
-    }
-
-    // Lazy load + masonry setup
-    const observer = new IntersectionObserver((entries, obs) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                const img = entry.target;
-                img.src = img.dataset.src;
-                obs.unobserve(img);
-                img.onload = () => resizeMasonryItem(img);
+            function resizeMasonryItem(img) {
+                const rowHeight = parseInt(getComputedStyle(galleryContainer).getPropertyValue('grid-auto-rows'));
+                const rowGap = parseInt(getComputedStyle(galleryContainer).getPropertyValue('gap'));
+                const rowSpan = Math.ceil((img.getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
+                img.parentElement.style.gridRowEnd = `span ${rowSpan}`;
             }
+
+            function resizeAllMasonry() {
+                galleryContainer.querySelectorAll('.masonry-item img').forEach(img => {
+                    if (img.complete) resizeMasonryItem(img);
+                });
+            }
+
+            // Lazy load + masonry setup
+            const observer = new IntersectionObserver((entries, obs) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const img = entry.target;
+                        img.src = img.dataset.src;
+                        obs.unobserve(img);
+                        img.onload = () => resizeMasonryItem(img);
+                    }
+                });
+            });
+            lazyImages.forEach(img => observer.observe(img));
+
+            // Modal setup
+            const modal = new bootstrap.Modal(document.getElementById('imageModal'));
+            const modalImg = document.getElementById('modalImage');
+            let currentIndex = -1;
+            const images = Array.from(lazyImages);
+
+            function showModal(idx) { currentIndex = idx; modalImg.src = images[idx].dataset.full; modal.show(); }
+            images.forEach((img, idx) => img.addEventListener('click', () => showModal(idx)));
+            document.getElementById('prevImage').addEventListener('click', () => {
+                currentIndex = (currentIndex - 1 + images.length) % images.length;
+                modalImg.src = images[currentIndex].dataset.full;
+            });
+            document.getElementById('nextImage').addEventListener('click', () => {
+                currentIndex = (currentIndex + 1) % images.length;
+                modalImg.src = images[currentIndex].dataset.full;
+            });
+
+            // Recalculate on resize
+            window.addEventListener('resize', resizeAllMasonry);
+            window.addEventListener('load', resizeAllMasonry);
         });
-    });
-    lazyImages.forEach(img => observer.observe(img));
-
-    // Modal setup
-    const modal = new bootstrap.Modal(document.getElementById('imageModal'));
-    const modalImg = document.getElementById('modalImage');
-    let currentIndex = -1;
-    const images = Array.from(lazyImages);
-
-    function showModal(idx) { currentIndex = idx; modalImg.src = images[idx].dataset.full; modal.show(); }
-    images.forEach((img, idx) => img.addEventListener('click', () => showModal(idx)));
-    document.getElementById('prevImage').addEventListener('click', () => {
-        currentIndex = (currentIndex - 1 + images.length) % images.length;
-        modalImg.src = images[currentIndex].dataset.full;
-    });
-    document.getElementById('nextImage').addEventListener('click', () => {
-        currentIndex = (currentIndex + 1) % images.length;
-        modalImg.src = images[currentIndex].dataset.full;
-    });
-
-    // Recalculate on resize
-    window.addEventListener('resize', resizeAllMasonry);
-    window.addEventListener('load', resizeAllMasonry);
-});
-</script>
+    </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file