diff --git a/frontend/css/gallery.css b/frontend/css/gallery.css
index 0d8570c..9ec3312 100644
--- a/frontend/css/gallery.css
+++ b/frontend/css/gallery.css
@@ -1,31 +1,72 @@
-/* Gallery Page Styles */
-#gallery-container {
-  width: 100%;
-  max-width: 1200px;
-  padding: 20px;
+* {
+  margin: 0;
+  padding: 0;
   box-sizing: border-box;
-  margin: 0 auto;
 }
 
-#image-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  grid-gap: 20px;
+body {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
-.image-item {
+.container {
+  padding: 40px 5%;
+}
+
+.heading-text {
+  margin-bottom: 2rem;
+  font-size: 2rem;
+}
+
+.heading-text span {
+  font-weight: 100;
+}
+
+ul {
+  list-style: none;
+}
+
+.image-gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.image-gallery > li {
+  flex: 1 1 auto; /* or flex: auto; */
+  height: 300px;
+  cursor: pointer;
   position: relative;
-  overflow: hidden;
 }
 
-.gallery-image {
+.image-gallery::after {
+  content: "";
+  flex-grow: 999;
+}
+
+.image-gallery li img {
+  object-fit: cover;
   width: 100%;
-  height: auto;
-  border-radius: 4px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease;
+  height: 100%;
+  vertical-align: middle;
+  border-radius: 5px;
 }
 
-.image-item:hover .gallery-image {
-  transform: scale(1.1);
+.overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(57, 57, 57, 0.502);
+  top: 0;
+  left: 0;
+  transform: scale(0);
+  transition: all 0.2s 0.1s ease-in-out;
+  color: #fff;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-gallery li:hover .overlay {
+  transform: scale(1);
 }
\ No newline at end of file
diff --git a/frontend/gallery/gallery.html b/frontend/gallery/gallery.html
index 455f019..09300a8 100644
--- a/frontend/gallery/gallery.html
+++ b/frontend/gallery/gallery.html
@@ -18,27 +18,72 @@
       </ul>
     </div>
   </nav>
-
   <!-- Gallery Page -->
-  <div id="gallery-container">
-    <h2>Image Gallery</h2>
-    <div id="image-grid">
-      <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>
+  <div class="container">
+    <h2 class="heading-text"><span>Image</span> Gallery</h2>    <ul class="image-gallery">
+      <li>
+        <img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
+        <div class="overlay"><span>Image title</span></div>
+      </li>
+      <li>
+        <img src="https://source.unsplash.com/e6FMMambeO4" alt="" />
+        <div class="overlay"><span>Image title</span></div>
+      </li>
+      <li>
+        <img src="https://source.unsplash.com/klCiPmzUw0Y" alt="" />
+        <div class="overlay"><span>Image title</span></div>
+      </li>
+      <li>
+        <img src="https://source.unsplash.com/IdNOTjPeHrE" alt="" />
+        <div class="overlay"><span>Image title</span></div>
+      </li>
+      <li>
+        <img src="https://source.unsplash.com/O0N9MF--hK4" alt="" />
+        <div class="overlay"><span>Image title</span></div>
+      </li>
+      <li>
+        <img src="https://source.unsplash.com/FV3GConVSss" alt="" />
+        <div class="overlay"><span>Image title</span></div>
+      </li>
+      <li>
+        <img src="https://source.unsplash.com/0ESjL-Nw22Y" alt="" />
+        <div class="overlay"><span>Image title</span></div>
+      </li>
+      <li>
+        <img src="https://source.unsplash.com/KTVn62x6fFw" alt="" />
+        <div class="overlay"><span>Image title</span></div>
+      </li>
 
+      <li>
+        <img src="https://source.unsplash.com/VSeVhmW4_JQ" alt="" />
+        <div class="overlay"><span>Image title</span></div>
+      </li>
+      <li>
+        <img src="https://source.unsplash.com/07aFaTf24Kg" alt="" />
+        <div class="overlay"><span>Image title</span></div>
+      </li>
+      <li>
+        <img src="https://source.unsplash.com/DqyYTM7pR2o" alt="" />
+        <div class="overlay"><span>Image title</span></div>
+      </li>
+      <li>
+        <img src="https://via.placeholder.com/300x300" alt="Placeholder Image">        
+        <div class="overlay"><span>Image title</span></div>
+      </li>
+      <li>
+        <img src="https://via.placeholder.com/300x600" alt="Placeholder Image">        
+        <div class="overlay"><span>Image title</span></div>
+      </li>
+      <li>
+        <img src="https://via.placeholder.com/200x600" alt="Placeholder Image">        
+        <div class="overlay"><span>Image title</span></div>
+      </li>
+      <li>
+        <img src="https://via.placeholder.com/600x200" alt="Placeholder Image">        
+        <div class="overlay"><span>Image title</span></div>
+      </li>
+    </ul>
+  </div>
   <script src="gallery.js"></script>
 </body>
 </html>
\ No newline at end of file