diff --git a/frontend/css/gallery.css b/frontend/css/gallery.css
index 99d52c4..0d8570c 100644
--- a/frontend/css/gallery.css
+++ b/frontend/css/gallery.css
@@ -1,20 +1,31 @@
 /* Gallery Page Styles */
 #gallery-container {
-    width: 100%;
-    max-width: 1200px;
-    padding: 20px;
-    box-sizing: border-box;
-  }
-  
-  #image-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    grid-gap: 20px;
-  }
-  
-  #image-grid img {
-    width: 100%;
-    height: auto;
-    border-radius: 4px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  }
\ No newline at end of file
+  width: 100%;
+  max-width: 1200px;
+  padding: 20px;
+  box-sizing: border-box;
+  margin: 0 auto;
+}
+
+#image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-gap: 20px;
+}
+
+.image-item {
+  position: relative;
+  overflow: hidden;
+}
+
+.gallery-image {
+  width: 100%;
+  height: auto;
+  border-radius: 4px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.image-item:hover .gallery-image {
+  transform: scale(1.1);
+}
\ No newline at end of file
diff --git a/frontend/gallery/gallery.html b/frontend/gallery/gallery.html
index 4cd40ae..455f019 100644
--- a/frontend/gallery/gallery.html
+++ b/frontend/gallery/gallery.html
@@ -23,7 +23,19 @@
   <div id="gallery-container">
     <h2>Image Gallery</h2>
     <div id="image-grid">
-      <!-- Dynamically generated images will be displayed here -->
+      <div class="image-item">
+        <img src="https://via.placeholder.com/300x300" alt="Placeholder Image 1" class="gallery-image">
+      </div>
+      <div class="image-item">
+        <img src="https://via.placeholder.com/300x600" alt="Placeholder Image 2" class="gallery-image">
+      </div>
+      <div class="image-item">
+        <img src="https://via.placeholder.com/300x200" alt="Placeholder Image 3" class="gallery-image">
+      </div>
+      <div class="image-item">
+        <img src="https://via.placeholder.com/300x100" alt="Placeholder Image 4" class="gallery-image">
+      </div>
+      <!-- Add more placeholder images as needed -->
     </div>
   </div>