diff --git a/assets/uploads/gallery/1/photo_693290ec06c76.jpg b/assets/uploads/gallery/1/photo_693290ec06c76.jpg
new file mode 100644
index 00000000..29df036d
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec06c76.jpg differ
diff --git a/assets/uploads/gallery/1/photo_693290ec0b2d2.jpg b/assets/uploads/gallery/1/photo_693290ec0b2d2.jpg
new file mode 100644
index 00000000..eef67281
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec0b2d2.jpg differ
diff --git a/assets/uploads/gallery/1/photo_693290ec0c36d.jpg b/assets/uploads/gallery/1/photo_693290ec0c36d.jpg
new file mode 100644
index 00000000..f174c6e4
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec0c36d.jpg differ
diff --git a/assets/uploads/gallery/1/photo_693290ec0d366.jpg b/assets/uploads/gallery/1/photo_693290ec0d366.jpg
new file mode 100644
index 00000000..734060d0
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec0d366.jpg differ
diff --git a/assets/uploads/gallery/1/photo_693290ec0dd32.jpg b/assets/uploads/gallery/1/photo_693290ec0dd32.jpg
new file mode 100644
index 00000000..4c35098c
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec0dd32.jpg differ
diff --git a/assets/uploads/gallery/1/photo_693290ec111a0.jpg b/assets/uploads/gallery/1/photo_693290ec111a0.jpg
new file mode 100644
index 00000000..0d3ca55f
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec111a0.jpg differ
diff --git a/assets/uploads/gallery/1/photo_693290ec11b36.jpg b/assets/uploads/gallery/1/photo_693290ec11b36.jpg
new file mode 100644
index 00000000..daa44153
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec11b36.jpg differ
diff --git a/assets/uploads/gallery/1/photo_693290ec12280.jpg b/assets/uploads/gallery/1/photo_693290ec12280.jpg
new file mode 100644
index 00000000..017c5779
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec12280.jpg differ
diff --git a/assets/uploads/gallery/1/photo_693290ec12de9.jpg b/assets/uploads/gallery/1/photo_693290ec12de9.jpg
new file mode 100644
index 00000000..8e46c08f
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec12de9.jpg differ
diff --git a/assets/uploads/gallery/1/photo_693290ec13987.jpg b/assets/uploads/gallery/1/photo_693290ec13987.jpg
new file mode 100644
index 00000000..773b6aaf
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec13987.jpg differ
diff --git a/assets/uploads/gallery/1/photo_693290ec1438d.jpg b/assets/uploads/gallery/1/photo_693290ec1438d.jpg
new file mode 100644
index 00000000..f405a118
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec1438d.jpg differ
diff --git a/assets/uploads/gallery/1/photo_693290ec1487c.jpg b/assets/uploads/gallery/1/photo_693290ec1487c.jpg
new file mode 100644
index 00000000..ee08887a
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec1487c.jpg differ
diff --git a/assets/uploads/gallery/1/photo_693290ec14db9.jpg b/assets/uploads/gallery/1/photo_693290ec14db9.jpg
new file mode 100644
index 00000000..aaacbf53
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec14db9.jpg differ
diff --git a/assets/uploads/gallery/1/photo_693290ec1567e.jpg b/assets/uploads/gallery/1/photo_693290ec1567e.jpg
new file mode 100644
index 00000000..fa8086d2
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec1567e.jpg differ
diff --git a/assets/uploads/gallery/1/photo_693290ec16451.jpg b/assets/uploads/gallery/1/photo_693290ec16451.jpg
new file mode 100644
index 00000000..f4b7cbb9
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec16451.jpg differ
diff --git a/assets/uploads/gallery/1/photo_693290ec16cc3.jpg b/assets/uploads/gallery/1/photo_693290ec16cc3.jpg
new file mode 100644
index 00000000..62eefd45
Binary files /dev/null and b/assets/uploads/gallery/1/photo_693290ec16cc3.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220bd980.jpg b/assets/uploads/gallery/2/photo_69329220bd980.jpg
new file mode 100644
index 00000000..b3ca3213
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220bd980.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220bdfbf.jpg b/assets/uploads/gallery/2/photo_69329220bdfbf.jpg
new file mode 100644
index 00000000..7bb00ff1
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220bdfbf.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220be409.jpg b/assets/uploads/gallery/2/photo_69329220be409.jpg
new file mode 100644
index 00000000..475e4192
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220be409.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220be7d6.jpg b/assets/uploads/gallery/2/photo_69329220be7d6.jpg
new file mode 100644
index 00000000..55dae635
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220be7d6.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220beb72.jpg b/assets/uploads/gallery/2/photo_69329220beb72.jpg
new file mode 100644
index 00000000..29dd1227
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220beb72.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220bef18.jpg b/assets/uploads/gallery/2/photo_69329220bef18.jpg
new file mode 100644
index 00000000..c5e02b48
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220bef18.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220bf360.jpg b/assets/uploads/gallery/2/photo_69329220bf360.jpg
new file mode 100644
index 00000000..182de1f3
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220bf360.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220bf725.jpg b/assets/uploads/gallery/2/photo_69329220bf725.jpg
new file mode 100644
index 00000000..90bc3de0
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220bf725.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220bfa53.jpg b/assets/uploads/gallery/2/photo_69329220bfa53.jpg
new file mode 100644
index 00000000..d96654aa
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220bfa53.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220bfe62.jpg b/assets/uploads/gallery/2/photo_69329220bfe62.jpg
new file mode 100644
index 00000000..eef67281
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220bfe62.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220c0308.jpg b/assets/uploads/gallery/2/photo_69329220c0308.jpg
new file mode 100644
index 00000000..2f77bff2
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220c0308.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220c06cb.jpg b/assets/uploads/gallery/2/photo_69329220c06cb.jpg
new file mode 100644
index 00000000..a4efcbfd
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220c06cb.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220c0d2f.jpg b/assets/uploads/gallery/2/photo_69329220c0d2f.jpg
new file mode 100644
index 00000000..011fc758
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220c0d2f.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220c1293.jpg b/assets/uploads/gallery/2/photo_69329220c1293.jpg
new file mode 100644
index 00000000..79fc18e7
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220c1293.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220c16c9.jpg b/assets/uploads/gallery/2/photo_69329220c16c9.jpg
new file mode 100644
index 00000000..fb0a08e7
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220c16c9.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220c1b9d.jpg b/assets/uploads/gallery/2/photo_69329220c1b9d.jpg
new file mode 100644
index 00000000..6a66d4fe
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220c1b9d.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220c2163.jpg b/assets/uploads/gallery/2/photo_69329220c2163.jpg
new file mode 100644
index 00000000..05698c74
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220c2163.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220c24bb.jpg b/assets/uploads/gallery/2/photo_69329220c24bb.jpg
new file mode 100644
index 00000000..8de452e9
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220c24bb.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220c2a12.jpg b/assets/uploads/gallery/2/photo_69329220c2a12.jpg
new file mode 100644
index 00000000..d4349736
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220c2a12.jpg differ
diff --git a/assets/uploads/gallery/2/photo_69329220c3088.jpg b/assets/uploads/gallery/2/photo_69329220c3088.jpg
new file mode 100644
index 00000000..e506ad20
Binary files /dev/null and b/assets/uploads/gallery/2/photo_69329220c3088.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937db759f.jpg b/assets/uploads/gallery/2/photo_6932937db759f.jpg
new file mode 100644
index 00000000..5780b62b
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937db759f.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937db7ab2.jpg b/assets/uploads/gallery/2/photo_6932937db7ab2.jpg
new file mode 100644
index 00000000..0778db29
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937db7ab2.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937db7e76.jpg b/assets/uploads/gallery/2/photo_6932937db7e76.jpg
new file mode 100644
index 00000000..7c6b4a14
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937db7e76.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937db8219.jpg b/assets/uploads/gallery/2/photo_6932937db8219.jpg
new file mode 100644
index 00000000..ad814e59
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937db8219.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937db8606.jpg b/assets/uploads/gallery/2/photo_6932937db8606.jpg
new file mode 100644
index 00000000..b09bca9d
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937db8606.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937db8b5c.jpg b/assets/uploads/gallery/2/photo_6932937db8b5c.jpg
new file mode 100644
index 00000000..3a21581b
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937db8b5c.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937db9160.jpg b/assets/uploads/gallery/2/photo_6932937db9160.jpg
new file mode 100644
index 00000000..59d234c2
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937db9160.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937db94ca.jpg b/assets/uploads/gallery/2/photo_6932937db94ca.jpg
new file mode 100644
index 00000000..a3dd5ede
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937db94ca.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937db990b.jpg b/assets/uploads/gallery/2/photo_6932937db990b.jpg
new file mode 100644
index 00000000..9be5ae1c
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937db990b.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937db9d6f.jpg b/assets/uploads/gallery/2/photo_6932937db9d6f.jpg
new file mode 100644
index 00000000..50bd1c2c
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937db9d6f.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937dba1a9.jpg b/assets/uploads/gallery/2/photo_6932937dba1a9.jpg
new file mode 100644
index 00000000..5dbeeff2
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937dba1a9.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937dba5fd.jpg b/assets/uploads/gallery/2/photo_6932937dba5fd.jpg
new file mode 100644
index 00000000..9f7041f2
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937dba5fd.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937dbaa1e.jpg b/assets/uploads/gallery/2/photo_6932937dbaa1e.jpg
new file mode 100644
index 00000000..907d8709
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937dbaa1e.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937dbadb0.jpg b/assets/uploads/gallery/2/photo_6932937dbadb0.jpg
new file mode 100644
index 00000000..35f97860
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937dbadb0.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937dbb1b7.jpg b/assets/uploads/gallery/2/photo_6932937dbb1b7.jpg
new file mode 100644
index 00000000..67558960
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937dbb1b7.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937dbb55b.jpg b/assets/uploads/gallery/2/photo_6932937dbb55b.jpg
new file mode 100644
index 00000000..87280d37
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937dbb55b.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937dbb98a.jpg b/assets/uploads/gallery/2/photo_6932937dbb98a.jpg
new file mode 100644
index 00000000..8a846114
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937dbb98a.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937dbbd81.jpg b/assets/uploads/gallery/2/photo_6932937dbbd81.jpg
new file mode 100644
index 00000000..a37646a7
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937dbbd81.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937dbc193.jpg b/assets/uploads/gallery/2/photo_6932937dbc193.jpg
new file mode 100644
index 00000000..32968e1c
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937dbc193.jpg differ
diff --git a/assets/uploads/gallery/2/photo_6932937dbc77b.jpg b/assets/uploads/gallery/2/photo_6932937dbc77b.jpg
new file mode 100644
index 00000000..36c6a8b5
Binary files /dev/null and b/assets/uploads/gallery/2/photo_6932937dbc77b.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a12cdad.jpg b/assets/uploads/gallery/2/photo_693293a12cdad.jpg
new file mode 100644
index 00000000..4f5a4cd1
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a12cdad.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a12d4d1.jpg b/assets/uploads/gallery/2/photo_693293a12d4d1.jpg
new file mode 100644
index 00000000..1b4f0595
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a12d4d1.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a12d83b.jpg b/assets/uploads/gallery/2/photo_693293a12d83b.jpg
new file mode 100644
index 00000000..ce97b57c
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a12d83b.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a12db4b.jpg b/assets/uploads/gallery/2/photo_693293a12db4b.jpg
new file mode 100644
index 00000000..90723b3a
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a12db4b.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a12dde9.jpg b/assets/uploads/gallery/2/photo_693293a12dde9.jpg
new file mode 100644
index 00000000..8e5bdee4
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a12dde9.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a12e0c2.jpg b/assets/uploads/gallery/2/photo_693293a12e0c2.jpg
new file mode 100644
index 00000000..f3ff77c2
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a12e0c2.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a12e34b.jpg b/assets/uploads/gallery/2/photo_693293a12e34b.jpg
new file mode 100644
index 00000000..aaea92b8
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a12e34b.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a12e648.jpg b/assets/uploads/gallery/2/photo_693293a12e648.jpg
new file mode 100644
index 00000000..19eb10f0
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a12e648.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a12e94f.jpg b/assets/uploads/gallery/2/photo_693293a12e94f.jpg
new file mode 100644
index 00000000..1dcf3173
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a12e94f.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a12efee.jpg b/assets/uploads/gallery/2/photo_693293a12efee.jpg
new file mode 100644
index 00000000..f86d95e7
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a12efee.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a12f85d.jpg b/assets/uploads/gallery/2/photo_693293a12f85d.jpg
new file mode 100644
index 00000000..fef6eeaf
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a12f85d.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a12fff8.jpg b/assets/uploads/gallery/2/photo_693293a12fff8.jpg
new file mode 100644
index 00000000..369f454d
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a12fff8.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a130855.jpg b/assets/uploads/gallery/2/photo_693293a130855.jpg
new file mode 100644
index 00000000..e2f70124
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a130855.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a131266.jpg b/assets/uploads/gallery/2/photo_693293a131266.jpg
new file mode 100644
index 00000000..f4b7cbb9
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a131266.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a131d52.jpg b/assets/uploads/gallery/2/photo_693293a131d52.jpg
new file mode 100644
index 00000000..86e34cc6
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a131d52.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a1322e8.jpg b/assets/uploads/gallery/2/photo_693293a1322e8.jpg
new file mode 100644
index 00000000..cfaaad9c
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a1322e8.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a13282f.jpg b/assets/uploads/gallery/2/photo_693293a13282f.jpg
new file mode 100644
index 00000000..499257c2
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a13282f.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a132fe2.jpg b/assets/uploads/gallery/2/photo_693293a132fe2.jpg
new file mode 100644
index 00000000..028aece7
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a132fe2.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a133667.jpg b/assets/uploads/gallery/2/photo_693293a133667.jpg
new file mode 100644
index 00000000..b504f589
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a133667.jpg differ
diff --git a/assets/uploads/gallery/2/photo_693293a133bd0.jpg b/assets/uploads/gallery/2/photo_693293a133bd0.jpg
new file mode 100644
index 00000000..8d6bbdba
Binary files /dev/null and b/assets/uploads/gallery/2/photo_693293a133bd0.jpg differ
diff --git a/src/pages/gallery/gallery.php b/src/pages/gallery/gallery.php
index 1f64ea55..26f72534 100644
--- a/src/pages/gallery/gallery.php
+++ b/src/pages/gallery/gallery.php
@@ -16,6 +16,7 @@ if (!$is_member) {
 }
 
 $conn = openDatabaseConnection();
+$current_user_id = $_SESSION['user_id'];
 
 // Fetch all albums with creator information
 $albums_query = "
@@ -49,149 +50,193 @@ $conn->close();
 ?>
 
 <style>
-    .album-carousel-container {
+    .gallery-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 24px;
         margin: 30px 0;
     }
 
-    .carousel-item-album {
-        display: none;
-        text-align: center;
-        padding: 20px;
-        animation: fadeIn 0.5s;
-    }
-
-    .carousel-item-album.active {
-        display: block;
-    }
-
-    @keyframes fadeIn {
-        from { opacity: 0; }
-        to { opacity: 1; }
-    }
-
     .album-card {
-        background: white;
-        border-radius: 10px;
+        position: relative;
+        border-radius: 12px;
         overflow: hidden;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-        transition: transform 0.3s;
+        background: white;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+        transition: all 0.3s ease;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
     }
 
     .album-card:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+        transform: translateY(-8px);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     }
 
-    .album-cover {
+    .album-image-wrapper {
+        position: relative;
         width: 100%;
-        height: 300px;
-        object-fit: cover;
+        aspect-ratio: 16 / 10;
+        overflow: hidden;
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     }
 
-    .album-info {
-        padding: 20px;
+    .album-image-wrapper img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: transform 0.3s ease;
+    }
+
+    .album-card:hover .album-image-wrapper img {
+        transform: scale(1.05);
+    }
+
+    .album-image-wrapper .no-image {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 2.5rem;
+        color: rgba(255, 255, 255, 0.6);
+    }
+
+    .album-footer {
+        padding: 16px;
+        background: white;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        flex-grow: 1;
     }
 
     .album-title {
-        font-size: 1.5rem;
-        font-weight: 600;
+        font-size: 1.1rem;
+        font-weight: 700;
         color: #2c3e50;
-        margin-bottom: 10px;
+        margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
-    .album-description {
-        color: #666;
-        font-size: 0.95rem;
-        margin-bottom: 15px;
-        line-height: 1.5;
-    }
-
-    .album-meta {
+    .album-meta-row {
         display: flex;
         align-items: center;
-        margin-bottom: 15px;
-        gap: 10px;
+        justify-content: space-between;
+        gap: 8px;
     }
 
-    .album-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        object-fit: cover;
-        border: 2px solid #667eea;
-    }
-
-    .album-creator {
+    .album-creator-info {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-width: 0;
         flex: 1;
     }
 
-    .creator-name {
-        font-weight: 600;
-        color: #2c3e50;
-        display: block;
-        font-size: 0.9rem;
+    .album-creator-avatar {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
     }
 
-    .photo-count {
-        font-size: 0.85rem;
+    .album-creator-name {
+        font-size: 0.8rem;
+        color: #666;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .album-photo-count {
+        font-size: 0.8rem;
         color: #999;
+        flex-shrink: 0;
     }
 
     .album-actions {
         display: flex;
-        gap: 10px;
+        gap: 8px;
+        margin-top: auto;
     }
 
-    .carousel-nav {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 20px;
-        margin-top: 20px;
-    }
-
-    .carousel-btn {
+    .album-view-btn {
+        flex: 1;
+        padding: 8px 12px;
         background: #667eea;
         color: white;
         border: none;
-        padding: 10px 20px;
-        border-radius: 5px;
-        cursor: pointer;
-        font-weight: 500;
-        transition: background 0.3s;
-    }
-
-    .carousel-btn:hover {
-        background: #764ba2;
-    }
-
-    .carousel-btn:disabled {
-        background: #ccc;
-        cursor: not-allowed;
-    }
-
-    .carousel-counter {
+        border-radius: 6px;
+        font-size: 0.85rem;
         font-weight: 600;
-        color: #2c3e50;
-        min-width: 80px;
+        cursor: pointer;
+        transition: background 0.3s;
+        text-decoration: none;
+        text-align: center;
+        display: block;
+    }
+
+    .album-view-btn:hover {
+        background: #764ba2;
+        text-decoration: none;
+        color: white;
+    }
+
+    .album-edit-btn {
+        padding: 8px 12px;
+        background: white;
+        color: #667eea;
+        border: 1px solid #667eea;
+        border-radius: 6px;
+        font-size: 0.85rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s;
+        text-decoration: none;
+        display: inline-block;
         text-align: center;
     }
 
+    .album-edit-btn:hover {
+        background: #667eea;
+        color: white;
+        text-decoration: none;
+    }
+
     .create-album-btn {
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
         margin-bottom: 30px;
     }
 
     .no-albums {
         text-align: center;
-        padding: 60px 20px;
+        padding: 80px 20px;
+        background: #f9f9f7;
+        border-radius: 10px;
         color: #999;
     }
 
+    .no-albums-icon {
+        font-size: 3rem;
+        margin-bottom: 20px;
+        color: #ddd;
+    }
+
     .no-albums p {
         font-size: 1.1rem;
         margin-bottom: 20px;
+        color: #666;
+    }
+
+    .no-albums .theme-btn {
+        display: inline-block;
     }
 </style>
 
@@ -206,80 +251,62 @@ require_once($rootPath . '/components/banner.php');
         <div class="row">
             <div class="col-lg-12">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
-                    <h2>Member Photo Gallery</h2>
+                    <h2 style="margin: 0;">Member Photo Gallery</h2>
                     <a href="create_album" class="theme-btn create-album-btn">
-                        <i class="far fa-plus"></i>  Create Album
+                        <i class="far fa-plus"></i> Create Album
                     </a>
                 </div>
 
                 <?php if (count($albums) > 0): ?>
-                    <div class="album-carousel-container">
-                        <div id="albumCarousel">
-                            <?php foreach ($albums as $index => $album): ?>
-                                <div class="carousel-item-album <?php echo $index === 0 ? 'active' : ''; ?>">
-                                    <div class="row">
-                                        <div class="col-lg-6">
-                                            <?php if ($album['cover_image']): ?>
-                                                <img src="<?php echo htmlspecialchars($album['cover_image']); ?>" alt="<?php echo htmlspecialchars($album['title']); ?>" class="album-cover" style="border-radius: 10px;">
-                                            <?php else: ?>
-                                                <div class="album-cover" style="display: flex; align-items: center; justify-content: center; font-size: 3rem; color: white;">
-                                                    <i class="far fa-image"></i>
-                                                </div>
-                                            <?php endif; ?>
+                    <div class="gallery-grid">
+                        <?php foreach ($albums as $album): ?>
+                            <div class="album-card">
+                                <div class="album-image-wrapper">
+                                    <?php if ($album['cover_image']): ?>
+                                        <img src="<?php echo htmlspecialchars($album['cover_image']); ?>" alt="<?php echo htmlspecialchars($album['title']); ?>">
+                                    <?php else: ?>
+                                        <div class="no-image">
+                                            <i class="far fa-image"></i>
                                         </div>
-                                        <div class="col-lg-6">
-                                            <div class="album-info" style="text-align: left; height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
-                                                <div>
-                                                    <h3 class="album-title"><?php echo htmlspecialchars($album['title']); ?></h3>
-                                                    <?php if ($album['description']): ?>
-                                                        <p class="album-description"><?php echo htmlspecialchars($album['description']); ?></p>
-                                                    <?php endif; ?>
-                                                </div>
+                                    <?php endif; ?>
+                                </div>
 
-                                                <div>
-                                                    <div class="album-meta">
-                                                        <img src="<?php echo htmlspecialchars($album['profile_pic']); ?>" alt="<?php echo htmlspecialchars($album['first_name']); ?>" class="album-avatar">
-                                                        <div class="album-creator">
-                                                            <span class="creator-name"><?php echo htmlspecialchars($album['first_name'] . ' ' . $album['last_name']); ?></span>
-                                                            <span class="photo-count"><?php echo $album['photo_count']; ?> photo<?php echo $album['photo_count'] !== 1 ? 's' : ''; ?></span>
-                                                        </div>
-                                                    </div>
+                                <div class="album-footer">
+                                    <h3 class="album-title" title="<?php echo htmlspecialchars($album['title']); ?>">
+                                        <?php echo htmlspecialchars($album['title']); ?>
+                                    </h3>
 
-                                                    <div class="album-actions">
-                                                        <a href="view_album?id=<?php echo $album['album_id']; ?>" class="theme-btn style-two">
-                                                            View Album <i class="far fa-arrow-right ms-2"></i>
-                                                        </a>
-                                                        <?php if ($album['user_id'] == $_SESSION['user_id']): ?>
-                                                            <a href="edit_album?id=<?php echo $album['album_id']; ?>" class="theme-btn" style="background: #666;">
-                                                                Edit
-                                                            </a>
-                                                        <?php endif; ?>
-                                                    </div>
-                                                </div>
-                                            </div>
+                                    <div class="album-meta-row">
+                                        <div class="album-creator-info">
+                                            <img src="<?php echo htmlspecialchars($album['profile_pic']); ?>" alt="<?php echo htmlspecialchars($album['first_name']); ?>" class="album-creator-avatar">
+                                            <span class="album-creator-name">
+                                                <?php echo htmlspecialchars($album['first_name'] . ' ' . $album['last_name']); ?>
+                                            </span>
                                         </div>
+                                        <span class="album-photo-count">
+                                            <?php echo $album['photo_count']; ?> photo<?php echo $album['photo_count'] !== 1 ? 's' : ''; ?>
+                                        </span>
+                                    </div>
+
+                                    <div class="album-actions">
+                                        <a href="view_album?id=<?php echo $album['album_id']; ?>" class="album-view-btn">
+                                            View
+                                        </a>
+                                        <?php if ($album['user_id'] == $current_user_id): ?>
+                                            <a href="edit_album?id=<?php echo $album['album_id']; ?>" class="album-edit-btn">
+                                                <i class="far fa-edit"></i>
+                                            </a>
+                                        <?php endif; ?>
                                     </div>
                                 </div>
-                            <?php endforeach; ?>
-                        </div>
-
-                        <?php if (count($albums) > 1): ?>
-                            <div class="carousel-nav">
-                                <button class="carousel-btn" id="prevBtn" onclick="changeSlide(-1)">
-                                    <i class="far fa-chevron-left"></i> Previous
-                                </button>
-                                <div class="carousel-counter">
-                                    <span id="currentSlide">1</span> / <span id="totalSlides"><?php echo count($albums); ?></span>
-                                </div>
-                                <button class="carousel-btn" id="nextBtn" onclick="changeSlide(1)">
-                                    Next <i class="far fa-chevron-right"></i>
-                                </button>
                             </div>
-                        <?php endif; ?>
+                        <?php endforeach; ?>
                     </div>
                 <?php else: ?>
                     <div class="no-albums">
-                        <i class="far fa-image" style="font-size: 4rem; color: #ddd; margin-bottom: 20px; display: block;"></i>
+                        <div class="no-albums-icon">
+                            <i class="far fa-image"></i>
+                        </div>
                         <p>No photo albums yet. Be the first to create one!</p>
                         <a href="create_album" class="theme-btn">Create Album</a>
                     </div>
@@ -289,35 +316,4 @@ require_once($rootPath . '/components/banner.php');
     </div>
 </section>
 
-<script>
-    let currentSlide = 0;
-    const slides = document.querySelectorAll('.carousel-item-album');
-    const totalSlides = slides.length;
-
-    function updateCarousel() {
-        slides.forEach((slide, index) => {
-            slide.classList.remove('active');
-            if (index === currentSlide) {
-                slide.classList.add('active');
-            }
-        });
-
-        document.getElementById('currentSlide').textContent = currentSlide + 1;
-        document.getElementById('prevBtn').disabled = currentSlide === 0;
-        document.getElementById('nextBtn').disabled = currentSlide === totalSlides - 1;
-    }
-
-    function changeSlide(direction) {
-        currentSlide += direction;
-        if (currentSlide < 0) currentSlide = 0;
-        if (currentSlide >= totalSlides) currentSlide = totalSlides - 1;
-        updateCarousel();
-    }
-
-    // Initialize carousel
-    if (totalSlides > 1) {
-        updateCarousel();
-    }
-</script>
-
 <?php include_once(dirname(dirname(dirname(__DIR__))) . '/components/insta_footer.php'); ?>
diff --git a/src/pages/gallery/view_album.php b/src/pages/gallery/view_album.php
index 314bbd9d..1cf1cf37 100644
--- a/src/pages/gallery/view_album.php
+++ b/src/pages/gallery/view_album.php
@@ -82,7 +82,7 @@ $conn->close();
     .album-header {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white;
-        padding: 40px 0;
+        padding: 20px 20px;
         margin-bottom: 40px;
         border-radius: 10px;
     }
@@ -268,7 +268,7 @@ require_once($rootPath . '/components/banner.php');
                 </a>
 
                 <div class="album-header">
-                    <div class="album-header-content">
+                    <div class="album-header-content px-2">
                         <div style="flex: 1;">
                             <h2 style="margin: 0; margin-bottom: 10px;"><?php echo htmlspecialchars($album['title']); ?></h2>
                             <?php if ($album['description']): ?>