From 5808788b9eb6852bcc652a72fed139be583fa1e6 Mon Sep 17 00:00:00 2001
From: twotalesanimation <80506065+twotalesanimation@users.noreply.github.com>
Date: Mon, 8 Dec 2025 11:35:22 +0200
Subject: [PATCH] Make blog cards clickable - wrap in anchor tags matching
 gallery pattern

---
 src/admin/admin_events.php    | 495 +++++++++++++---------------------
 src/admin/admin_trips.php     | 427 ++++++++++++-----------------
 src/pages/blog/blog.php       |   2 +
 src/pages/blog/user_blogs.php | 143 +++++-----
 src/pages/events/events.php   |  19 +-
 src/pages/gallery/gallery.php |  67 +----
 6 files changed, 442 insertions(+), 711 deletions(-)

diff --git a/src/admin/admin_events.php b/src/admin/admin_events.php
index a62f1747..42bc39d1 100644
--- a/src/admin/admin_events.php
+++ b/src/admin/admin_events.php
@@ -1,13 +1,20 @@
 <?php
-$headerStyle = 'light';
 $rootPath = dirname(dirname(__DIR__));
-include_once($rootPath . '/header.php');
+require_once($rootPath . "/src/config/env.php");
+require_once($rootPath . "/src/config/connection.php");
+require_once($rootPath . "/src/config/functions.php");
+require_once($rootPath . "/header.php");
 checkAdmin();
+checkUserSession();
+
+$pageTitle = 'Manage Events';
+$breadcrumbs = [['Home' => 'index']];
+require_once($rootPath . '/components/banner.php');
 
 // Fetch all events
 $events_query = "
     SELECT 
-        event_id, name, type, location, date, published
+        event_id, name, type, location, date, image, published
     FROM events
     ORDER BY date DESC
 ";
@@ -22,340 +29,202 @@ if ($result && $result->num_rows > 0) {
 ?>
 
 <style>
-    table {
+    .image {
+        width: 300px;
+        /* Set your desired width */
+        height: 250px;
+        /* Set your desired height */
+        overflow: hidden;
+        /* Hide any overflow */
+        display: block;
+        /* Ensure proper block behavior */
+        border-radius: 8px;
+    }
+
+    .image img {
         width: 100%;
-        border-collapse: separate;
-        border-spacing: 0;
-        margin: 10px 0;
-    }
-
-    thead th {
-        cursor: pointer;
-        text-align: left;
-        padding: 10px;
-        font-weight: bold;
-        position: relative;
-    }
-
-    thead th::after {
-        content: '\25B2';
-        /* Up arrow */
-        font-size: 0.8em;
-        position: absolute;
-        right: 10px;
-        opacity: 0;
-        transition: opacity 0.2s;
-    }
-
-    thead th.asc::after {
-        content: '\25B2';
-        /* Up arrow */
-        opacity: 1;
-    }
-
-    thead th.desc::after {
-        content: '\25BC';
-        /* Down arrow */
-        opacity: 1;
-    }
-
-    tbody tr:nth-child(odd) {
-        background-color: transparent;
-    }
-
-    tbody tr:nth-child(even) {
-        background-color: rgb(255, 255, 255);
-        border-radius: 10px;
-    }
-
-    tbody td {
-        padding: 10px;
-    }
-
-    tbody tr:nth-child(even) td:first-child {
-        border-top-left-radius: 10px;
-        border-bottom-left-radius: 10px;
-    }
-
-    tbody tr:nth-child(even) td:last-child {
-        border-top-right-radius: 10px;
-        border-bottom-right-radius: 10px;
-    }
-
-    .filter-input {
-        width: 100%;
-        padding: 10px;
-        font-size: 16px;
-        background-color: rgb(255, 255, 255);
-        border-radius: 25px;
-        margin-bottom: 15px;
-    }
-
-    .btn {
-        display: inline-block;
-        padding: 6px 12px;
-        margin: 2px;
-        font-size: 14px;
-        border-radius: 5px;
-        text-decoration: none;
-        border: none;
-        cursor: pointer;
-        transition: all 0.2s;
-    }
-
-    .btn-sm {
-        padding: 4px 8px;
-        font-size: 12px;
-    }
-
-    .btn-primary {
-        background-color: #007bff;
-        color: white;
-    }
-
-    .btn-primary:hover {
-        background-color: #0056b3;
-    }
-
-    .btn-success {
-        background-color: #28a745;
-        color: white;
-    }
-
-    .btn-success:hover {
-        background-color: #218838;
-    }
-
-    .btn-warning {
-        background-color: #ffc107;
-        color: black;
-    }
-
-    .btn-warning:hover {
-        background-color: #e0a800;
-    }
-
-    .btn-danger {
-        background-color: #dc3545;
-        color: white;
-    }
-
-    .btn-danger:hover {
-        background-color: #c82333;
-    }
-
-    .badge {
-        display: inline-block;
-        padding: 4px 8px;
-        border-radius: 4px;
-        font-size: 12px;
-        font-weight: bold;
-    }
-
-    .bg-success {
-        background-color: #28a745;
-        color: white;
-    }
-
-    .bg-warning {
-        background-color: #ffc107;
-        color: black;
+        /* Image scales to fill the container */
+        height: 100%;
+        /* Image scales to fill the container */
+        object-fit: cover;
+        /* Fills the container while maintaining aspect ratio */
+        object-position: center;
+        /* Aligns the center of the image with the center of the container */
+        display: block;
+        /* Prevents inline whitespace issues */
     }
 </style>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
-    $(document).ready(function() {
-        // Sorting functionality
-        const table = document.querySelector('table');
-        if (table) {
-            const headers = table.querySelectorAll('thead th');
-            const rows = Array.from(table.querySelectorAll('tbody tr'));
+    document.addEventListener("DOMContentLoaded", function() {
+        const filterInput = document.querySelector('.filter-input');
+        const cards = document.querySelectorAll('.destination-item');
 
-            headers.forEach((header, index) => {
-                header.addEventListener('click', () => {
-                    const sortedRows = rows.sort((a, b) => {
-                        const aText = a.cells[index].textContent.trim().toLowerCase();
-                        const bText = b.cells[index].textContent.trim().toLowerCase();
-
-                        if (aText < bText) return -1;
-                        if (aText > bText) return 1;
-                        return 0;
-                    });
-
-                    if (header.classList.contains('asc')) {
-                        header.classList.remove('asc');
-                        header.classList.add('desc');
-                        sortedRows.reverse();
-                    } else {
-                        headers.forEach(h => h.classList.remove('asc', 'desc'));
-                        header.classList.add('asc');
-                    }
-
-                    const tbody = table.querySelector('tbody');
-                    tbody.innerHTML = '';
-                    sortedRows.forEach(row => tbody.appendChild(row));
+        if (cards.length === 0 && filterInput) {
+            filterInput.style.display = "none";
+        } else if (filterInput) {
+            filterInput.addEventListener("input", function() {
+                const filterValue = filterInput.value.trim().toLowerCase();
+                cards.forEach(card => {
+                    const cardText = card.textContent.trim().toLowerCase();
+                    card.style.display = cardText.includes(filterValue) ? "" : "none";
                 });
             });
-
-            // Filter functionality
-            const filterInput = document.querySelector('.filter-input');
-            if (filterInput) {
-                filterInput.addEventListener('input', function() {
-                    const filterValue = filterInput.value.trim().toLowerCase();
-                    rows.forEach(row => {
-                        const rowText = row.textContent.trim().toLowerCase();
-                        row.style.display = rowText.includes(filterValue) ? '' : 'none';
-                    });
-                });
-            }
         }
-
-        // Publish/Unpublish toggle
-        $('.toggle-publish').on('click', function() {
-            var eventId = $(this).data('event-id');
-            var button = $(this);
-            var row = button.closest('tr');
-
-            $.ajax({
-                url: 'toggle_event_published',
-                type: 'POST',
-                data: {
-                    event_id: eventId
-                },
-                dataType: 'json',
-                complete: function(xhr, status) {
-                    // Handle all response codes
-                    try {
-                        var response = JSON.parse(xhr.responseText);
-                        
-                        if (response.status === 'success') {
-                            if (response.published == 1) {
-                                button.removeClass('btn-success').addClass('btn-warning');
-                                button.find('i').removeClass('fa-eye').addClass('fa-eye-slash');
-                                button.attr('title', 'Unpublish');
-                                row.find('td:nth-child(5)').html('<span class="badge bg-success">Published</span>');
-                            } else {
-                                button.removeClass('btn-warning').addClass('btn-success');
-                                button.find('i').removeClass('fa-eye-slash').addClass('fa-eye');
-                                button.attr('title', 'Publish');
-                                row.find('td:nth-child(5)').html('<span class="badge bg-warning">Draft</span>');
-                            }
-                        } else {
-                            alert('Error: ' + response.message);
-                        }
-                    } catch (e) {
-                        alert('Error updating event status. Response: ' + xhr.responseText);
-                    }
-                }
-            });
-        });
-
-        // Delete event
-        $('.delete-event').on('click', function() {
-            if (!confirm('Are you sure you want to delete this event? This action cannot be undone.')) {
-                return false;
-            }
-
-            var eventId = $(this).data('event-id');
-            var button = $(this);
-            var row = button.closest('tr');
-
-            $.ajax({
-                url: 'delete_event',
-                type: 'POST',
-                data: {
-                    event_id: eventId
-                },
-                dataType: 'json',
-                success: function(response) {
-                    if (response.status === 'success') {
-                        row.fadeOut(300, function() {
-                            $(this).remove();
-                        });
-                    } else {
-                        alert('Error: ' + response.message);
-                    }
-                },
-                error: function() {
-                    alert('Error deleting event');
-                }
-            });
-        });
     });
 </script>
 
 <?php
     $pageTitle = 'Manage Events';
-    $breadcrumbs = [['Home' => 'index'], [$pageTitle => '']];
-    require_once($rootPath . '/components/banner.php');
-?>
-
-<?php
-    $pageTitle = 'Manage Events';
-    $breadcrumbs = [['Home' => 'index'], [$pageTitle => '']];
+    $breadcrumbs = [['Home' => 'index']];
     require_once($rootPath . '/components/banner.php');
 ?>
 
 <!-- Events Management Area start -->
-<section class="events-management-area py-100 rel z-1">
+<section class="blog-list-page py-100 rel z-1">
     <div class="container">
-        <div class="row mb-30">
+        <div class="row">
             <div class="col-lg-12">
-                <a href="manage_events" class="theme-btn style-two">+ Create New Event</a>
-            </div>
-        </div>
-
-        <?php
-        if (!empty($events)) {
-            echo '<div class="row">
-                    <div class="col-lg-12">
-                        <div class="form-group mb-20">
-                            <input type="text" class="filter-input" placeholder="Search events...">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
+                    <h2 style="margin: 0;">Manage Events</h2>
+                    <a href="manage_events" class="theme-btn create-album-btn">
+                        <i class="far fa-plus"></i> New Event
+                    </a>
+                </div>
+                <?php if (isset($_SESSION['message'])): ?>
+                    <div class="alert alert-warning message-box">
+                        <?php echo $_SESSION['message']; ?>
+                        <span class="close-btn" onclick="this.parentElement.style.display='none'">&times;</span>
+                    </div>
+                    <?php unset($_SESSION['message']);
+                endif;
+                
+                if (count($events) > 0) {
+                    echo '<input type="text" class="filter-input" placeholder="Filter events...">';
+                    echo '<div class="events-container" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">';
+                    
+                    foreach ($events as $event) {
+                        $eventImagePath = $event['image'] ? htmlspecialchars($event['image']) : 'assets/images/placeholder.jpg';
+                        $publishStatusBadge = $event['published'] == 1 ? 'PUBLISHED' : 'DRAFT';
+                        
+                        echo '
+                        <div class="destination-item style-three bgc-lighter booking" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
+                            <div class="image" style="width:300px;height:250px;">
+                                <img src="' . $eventImagePath . '" alt="' . htmlspecialchars($event['name']) . '">
+                            </div>
+                            <div class="content" style="width:100%;">
+                                <div class="destination-header d-flex align-items-start gap-3">
+                                    <div>
+                                        <span class="badge bg-dark mb-1">' . strtoupper($publishStatusBadge) . '</span>
+                                        <h5 class="mb-0">' . htmlspecialchars($event['name']) . '</h5>
+                                        <small class="text-muted">📍 ' . htmlspecialchars($event['location']) . '</small>
+                                    </div>
+                                </div>
+                                <p style="margin: 10px 0;">
+                                    <strong>Type:</strong> ' . htmlspecialchars($event['type']) . '<br>
+                                    <strong>Date:</strong> ' . convertDate($event['date']) . '
+                                </p>
+                                <div class="destination-footer">
+                                    <div class="btn-group" style="display:flex; justify-content:flex-end; gap:10px;">
+                                        <a href="manage_events?event_id=' . $event['event_id'] . '" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="material-icons">edit</span></a>
+                                        <button type="button" class="toggle-publish" data-event-id="' . $event['event_id'] . '" data-bs-toggle="tooltip" data-bs-placement="top" title="' . ($event['published'] == 1 ? 'Unpublish' : 'Publish') . '" style="background:none; border:none; cursor:pointer; color:inherit;"><span class="material-icons">' . ($event['published'] == 1 ? 'cloud_off' : 'cloud_upload') . '</span></button>
+                                        <button type="button" class="delete-event" data-event-id="' . $event['event_id'] . '" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" style="background:none; border:none; cursor:pointer; color:inherit;"><span class="material-icons">delete</span></button>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>Event Name</th>
-                                    <th>Type</th>
-                                    <th>Location</th>
-                                    <th>Date</th>
-                                    <th>Status</th>
-                                    <th>Actions</th>
-                                </tr>
-                            </thead>
-                            <tbody>';
-            foreach ($events as $event) {
-                $publishButtonText = $event['published'] == 1 ? 'Unpublish' : 'Publish';
-                $publishButtonClass = $event['published'] == 1 ? 'btn-warning' : 'btn-success';
-                echo '<tr>
-                        <td><strong>' . htmlspecialchars($event['name']) . '</strong></td>
-                        <td>' . htmlspecialchars($event['type']) . '</td>
-                        <td>' . htmlspecialchars($event['location']) . '</td>
-                        <td>' . convertDate($event['date']) . '</td>
-                        <td>' . ($event['published'] == 1 ? '<span class="badge bg-success">Published</span>' : '<span class="badge bg-warning">Draft</span>') . '</td>
-                        <td>
-                            <a href="manage_events?event_id=' . $event['event_id'] . '" class="btn btn-sm btn-primary" title="Edit">
-                                <i class="far fa-edit"></i>
-                            </a>
-                            <button class="btn btn-sm ' . $publishButtonClass . ' toggle-publish" data-event-id="' . $event['event_id'] . '" title="' . $publishButtonText . '">
-                                <i class="far fa-' . ($event['published'] == 1 ? 'eye-slash' : 'eye') . '"></i>
-                            </button>
-                            <button class="btn btn-sm btn-danger delete-event" data-event-id="' . $event['event_id'] . '" title="Delete">
-                                <i class="far fa-trash"></i>
-                            </button>
-                        </td>
-                    </tr>';
-            }
-            echo '</tbody></table>';
-            echo '</div>';
-            echo '</div>';
-        } else {
-            echo '<p>No events found. <a href="manage_events">Create one</a></p>';
-        }
-        ?>
+                        ';
+                    }
+                    
+                    echo '</div>';
+                } else {
+                    echo '<div class="no-events">
+                        <p>No events found. <a href="manage_events">Create one</a></p>
+                    </div>';
+                }
+                ?>
+
+            </div>
+
+        </div>
     </div>
 </section>
 <!-- Events Management Area end -->
 
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+<script>
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+    tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el));
+
+    // Handle publish/unpublish button clicks
+    document.querySelectorAll('.toggle-publish').forEach(btn => {
+        btn.addEventListener('click', function() {
+            const eventId = this.dataset.eventId;
+            const currentIcon = this.querySelector('.material-icons').textContent;
+            const isPublished = currentIcon === 'cloud_off';
+            const action = isPublished ? 'Unpublish' : 'Publish';
+
+            const formData = new FormData();
+            formData.append('event_id', eventId);
+
+            fetch('toggle_event_published', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.status === 'success') {
+                        alert(action + ' successful!');
+                        location.reload();
+                    } else {
+                        alert(action + ' failed: ' + data.message);
+                    }
+                })
+                .catch(err => {
+                    console.error('Error:', err);
+                    alert(action + ' failed due to network error.');
+                });
+        });
+    });
+
+    // Handle delete button clicks
+    document.querySelectorAll('.delete-event').forEach(btn => {
+        btn.addEventListener('click', function() {
+            if (!confirm('Are you sure you want to delete this event? This action cannot be undone.')) {
+                return false;
+            }
+
+            const eventId = this.dataset.eventId;
+            const card = this.closest('.destination-item');
+
+            const formData = new FormData();
+            formData.append('event_id', eventId);
+
+            fetch('delete_event', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.status === 'success') {
+                        card.style.animation = 'fadeOut 0.3s ease-out';
+                        setTimeout(() => {
+                            card.remove();
+                            if (document.querySelectorAll('.destination-item').length === 0) {
+                                location.reload();
+                            }
+                        }, 300);
+                    } else {
+                        alert('Error: ' + data.message);
+                    }
+                })
+                .catch(err => {
+                    console.error('Error:', err);
+                    alert('Delete failed due to network error.');
+                });
+        });
+    });
+</script>
+
 <?php include_once($rootPath . '/components/insta_footer.php'); ?>
diff --git a/src/admin/admin_trips.php b/src/admin/admin_trips.php
index f98d219b..1026babf 100644
--- a/src/admin/admin_trips.php
+++ b/src/admin/admin_trips.php
@@ -1,14 +1,22 @@
 <?php
-$headerStyle = 'light';
 $rootPath = dirname(dirname(__DIR__));
-include_once($rootPath . '/header.php');
+require_once($rootPath . "/src/config/env.php");
+require_once($rootPath . "/src/config/connection.php");
+require_once($rootPath . "/src/config/functions.php");
+require_once($rootPath . "/header.php");
 checkAdmin();
+checkUserSession();
+
+$pageTitle = 'Manage Trips';
+$breadcrumbs = [['Home' => 'index']];
+require_once($rootPath . '/components/banner.php');
 
 // Fetch all trips with booking status
 $trips_query = "
     SELECT 
         trip_id, trip_name, location, start_date, end_date,
-        vehicle_capacity, places_booked, cost_members, published
+        vehicle_capacity, places_booked, cost_members, cost_nonmembers, 
+        cost_pensioner_member, cost_pensioner, published
     FROM trips
     ORDER BY start_date DESC
 ";
@@ -23,131 +31,48 @@ if ($result && $result->num_rows > 0) {
 ?>
 
 <style>
-    table {
+    .image {
+        width: 200px;
+        /* Set your desired width */
+        height: 200px;
+        /* Set your desired height */
+        overflow: hidden;
+        /* Hide any overflow */
+        display: block;
+        /* Ensure proper block behavior */
+        border-radius: 8px;
+    }
+
+    .image img {
         width: 100%;
-        border-collapse: separate;
-        border-spacing: 0;
-        margin: 10px 0;
-    }
-
-    thead th {
-        cursor: pointer;
-        text-align: left;
-        padding: 10px;
-        font-weight: bold;
-        position: relative;
-    }
-
-    thead th::after {
-        content: '\25B2';
-        /* Up arrow */
-        font-size: 0.8em;
-        position: absolute;
-        right: 10px;
-        opacity: 0;
-        transition: opacity 0.2s;
-    }
-
-    thead th.asc::after {
-        content: '\25B2';
-        /* Up arrow */
-        opacity: 1;
-    }
-
-    thead th.desc::after {
-        content: '\25BC';
-        /* Down arrow */
-        opacity: 1;
-    }
-
-    tbody tr:nth-child(odd) {
-        background-color: transparent;
-    }
-
-    tbody tr:nth-child(even) {
-        background-color: rgb(255, 255, 255);
-        border-radius: 10px;
-    }
-
-    tbody td {
-        padding: 5px;
-    }
-
-    tbody tr:nth-child(even) td:first-child {
-        border-top-left-radius: 10px;
-        border-bottom-left-radius: 10px;
-    }
-
-    tbody tr:nth-child(even) td:last-child {
-        border-top-right-radius: 10px;
-        border-bottom-right-radius: 10px;
-    }
-
-    .filter-input {
-        width: 100%;
-        padding: 5px;
-        font-size: 16px;
-        background-color: rgb(255, 255, 255);
-        border-radius: 25px;
-        margin-bottom: 20px;
-    }
-
-    .trips-section {
-        color: #484848;
-        background: #f9f9f7;
-        border: 1px solid #d8d8d8;
-        border-radius: 10px;
-        margin-top: 15px;
-        margin-bottom: 15px;
+        /* Image scales to fill the container */
+        height: 100%;
+        /* Image scales to fill the container */
+        object-fit: cover;
+        /* Fills the container while maintaining aspect ratio */
+        object-position: center;
+        /* Aligns the center of the image with the center of the container */
+        display: block;
+        /* Prevents inline whitespace issues */
     }
 </style>
 
 <script>
     document.addEventListener("DOMContentLoaded", function() {
-        const tables = document.querySelectorAll("table");
-        tables.forEach((table) => {
-            const headers = table.querySelectorAll("thead th");
-            const rows = Array.from(table.querySelectorAll("tbody tr"));
-            const filterInput = table.previousElementSibling;
+        const filterInput = document.querySelector('.filter-input');
+        const cards = document.querySelectorAll('.destination-item');
 
-            headers.forEach((header, index) => {
-                header.addEventListener("click", () => {
-                    const sortedRows = rows.sort((a, b) => {
-                        const aText = a.cells[index].textContent.trim().toLowerCase();
-                        const bText = b.cells[index].textContent.trim().toLowerCase();
-
-                        if (aText < bText) return -1;
-                        if (aText > bText) return 1;
-                        return 0;
-                    });
-
-                    if (header.classList.contains("asc")) {
-                        header.classList.remove("asc");
-                        header.classList.add("desc");
-                        sortedRows.reverse();
-                    } else {
-                        headers.forEach(h => h.classList.remove("asc", "desc"));
-                        header.classList.add("asc");
-                    }
-
-                    const tbody = table.querySelector("tbody");
-                    tbody.innerHTML = "";
-                    sortedRows.forEach(row => tbody.appendChild(row));
+        if (cards.length === 0 && filterInput) {
+            filterInput.style.display = "none";
+        } else if (filterInput) {
+            filterInput.addEventListener("input", function() {
+                const filterValue = filterInput.value.trim().toLowerCase();
+                cards.forEach(card => {
+                    const cardText = card.textContent.trim().toLowerCase();
+                    card.style.display = cardText.includes(filterValue) ? "" : "none";
                 });
             });
-
-            if (rows.length === 0) {
-                filterInput.style.display = "none";
-            } else {
-                filterInput.addEventListener("input", function() {
-                    const filterValue = filterInput.value.trim().toLowerCase();
-                    rows.forEach(row => {
-                        const rowText = row.textContent.trim().toLowerCase();
-                        row.style.display = rowText.includes(filterValue) ? "" : "none";
-                    });
-                });
-            }
-        });
+        }
     });
 </script>
 
@@ -155,164 +80,162 @@ if ($result && $result->num_rows > 0) {
 $bannerFolder = 'assets/images/banners/';
 $bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
 
-$randomBanner = 'assets/images/base4/camping.jpg'; // default fallback
-if (!empty($bannerImages)) {
-    $randomBanner = $bannerImages[array_rand($bannerImages)];
-}
 ?>
-<section class="page-banner-area pt-50 pb-35 rel z-1 bgs-cover" style="background-image: url('<?php echo $randomBanner; ?>');">
-<div class="banner-overlay"></div>
-    <div class="container">
-        <div class="banner-inner text-white mb-50">
-            <h2 class="page-title mb-10" data-aos="fade-left" data-aos-duration="1500" data-aos-offset="50">Manage Trips</h2>
-            <nav aria-label="breadcrumb">
-                <ol class="breadcrumb justify-content-center mb-20" data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500" data-aos-offset="50">
-                    <li class="breadcrumb-item"><a href="index">Home</a></li>
-                    <li class="breadcrumb-item active">Manage Trips</li>
-                </ol>
-            </nav>
-        </div>
-    </div>
-</section>
 
 <!-- Trips Management Area start -->
-<section class="tour-list-page py-100 rel z-1">
+<section class="blog-list-page py-100 rel z-1">
     <div class="container">
-        <div style="margin-bottom: 20px;">
-            <a href="manage_trips" class="theme-btn">
-                <i class="far fa-plus"></i> Create New Trip
-            </a>
-        </div>
+        <div class="row">
+            <div class="col-lg-12">
 
-        <?php
-        if (count($trips) > 0) {
-            echo '<input type="text" class="filter-input" placeholder="Filter trips...">';
-            echo '<div class="trips-section" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">';
-            echo '<div style="padding:10px;">';
-            echo '<table>
-                    <thead>
-                        <tr>
-                            <th>Trip Name</th>
-                            <th>Location</th>
-                            <th>Start Date</th>
-                            <th>End Date</th>
-                            <th>Capacity</th>
-                            <th>Booked</th>
-                            <th>Cost (Member)</th>
-                            <th>Status</th>
-                            <th>Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>';
-            foreach ($trips as $trip) {
-                $publishButtonText = $trip['published'] == 1 ? 'Unpublish' : 'Publish';
-                $publishButtonClass = $trip['published'] == 1 ? 'btn-warning' : 'btn-success';
-                echo '<tr>
-                        <td><strong>' . htmlspecialchars($trip['trip_name']) . '</strong></td>
-                        <td>' . htmlspecialchars($trip['location']) . '</td>
-                        <td>' . date('M d, Y', strtotime($trip['start_date'])) . '</td>
-                        <td>' . date('M d, Y', strtotime($trip['end_date'])) . '</td>
-                        <td>' . $trip['vehicle_capacity'] . '</td>
-                        <td><span class="badge bg-info">' . $trip['places_booked'] . ' / ' . $trip['vehicle_capacity'] . '</span></td>
-                        <td>R ' . number_format($trip['cost_members'], 2) . '</td>
-                        <td>' . ($trip['published'] == 1 ? '<span class="badge bg-success">Published</span>' : '<span class="badge bg-warning">Draft</span>') . '</td>
-                        <td>
-                            <a href="manage_trips?trip_id=' . $trip['trip_id'] . '" class="btn btn-sm btn-primary" title="Edit">
-                                <i class="far fa-edit"></i>
-                            </a>
-                            <button class="btn btn-sm ' . $publishButtonClass . ' toggle-publish" data-trip-id="' . $trip['trip_id'] . '" title="' . $publishButtonText . '">
-                                <i class="far fa-' . ($trip['published'] == 1 ? 'eye-slash' : 'eye') . '"></i>
-                            </button>
-                            <button class="btn btn-sm btn-danger delete-trip" data-trip-id="' . $trip['trip_id'] . '" title="Delete">
-                                <i class="far fa-trash"></i>
-                            </button>
-                        </td>
-                    </tr>';
-            }
-            echo '</tbody></table>';
-            echo '</div>';
-            echo '</div>';
-        } else {
-            echo '<p>No trips found. <a href="manage_trips">Create one</a></p>';
-        }
-        ?>
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
+                    <h2 style="margin: 0;">Manage Trips</h2>
+                    <a href="manage_trips" class="theme-btn create-album-btn">
+                        <i class="far fa-plus"></i> New Event
+                    </a>
+                </div>
+                <?php if (isset($_SESSION['message'])): ?>
+                    <div class="alert alert-warning message-box">
+                        <?php echo $_SESSION['message']; ?>
+                        <span class="close-btn" onclick="this.parentElement.style.display='none'">&times;</span>
+                    </div>
+                    <?php unset($_SESSION['message']);
+                endif;
+                if (count($trips) > 0) {
+                    echo '<input type="text" class="filter-input" placeholder="Filter trips...">';
+                    echo '<div class="trips-container" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">';
+                    
+                    foreach ($trips as $trip) {
+                        $available = $trip['vehicle_capacity'] - $trip['places_booked'];
+                        $publishStatus = $trip['published'] == 1 ? 'published' : 'draft';
+                        $publishStatusBadge = $trip['published'] == 1 ? 'PUBLISHED' : 'DRAFT';
+                        
+                        // Get trip image - look for assets/images/trips/$trip_id_{number}.jpg
+                        $tripImagePath = '';
+                        $tripImagesGlob = glob($rootPath . '/assets/images/trips/' . $trip['trip_id'] . '_*.jpg');
+                        if (!empty($tripImagesGlob)) {
+                            $tripImagePath = str_replace($rootPath, '', $tripImagesGlob[0]);
+                        } else {
+                            // Fallback to placeholder icon if no image found
+                            $tripImagePath = 'assets/images/placeholder.jpg';
+                        }
+                        
+                        echo '
+                        <div class="destination-item style-three bgc-lighter booking" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
+                            <div class="image" style="width:300px;height:250px;">
+                                <img src="' . htmlspecialchars($tripImagePath) . '" alt="' . htmlspecialchars($trip['trip_name']) . '">
+                            </div>
+                            <div class="content" style="width:100%;">
+                                <div class="destination-header d-flex align-items-start gap-3">
+                                    <div>
+                                        <span class="badge bg-dark mb-1">' . strtoupper($publishStatusBadge) . '</span>
+                                        <h5 class="mb-0">' . htmlspecialchars($trip['trip_name']) . '</h5>
+                                        <small class="text-muted">📍 ' . htmlspecialchars($trip['location']) . '</small>
+                                    </div>
+                                </div>
+                                <p style="margin: 10px 0;">
+                                    <strong>Dates:</strong> ' . date('M d', strtotime($trip['start_date'])) . ' - ' . date('M d, Y', strtotime($trip['end_date'])) . '<br>
+                                    <strong>Capacity:</strong> ' . $trip['places_booked'] . ' / ' . $trip['vehicle_capacity'] . '<br>
+                                    <strong>Costs:</strong> Members: R ' . number_format($trip['cost_members'], 2) . ' | Non-Members: R ' . number_format($trip['cost_nonmembers'], 2) . ' | Pensioner Members: R ' . number_format($trip['cost_pensioner_member'], 2) . ' | Pensioners: R ' . number_format($trip['cost_pensioner'], 2) . '
+                                </p>
+                                <div class="destination-footer">
+                                    <div class="btn-group" style="display:flex; justify-content:flex-end; gap:10px;">
+                                        <a href="manage_trips?trip_id=' . $trip['trip_id'] . '" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="material-icons">edit</span></a>
+                                        <button type="button" class="toggle-publish" data-trip-id="' . $trip['trip_id'] . '" data-bs-toggle="tooltip" data-bs-placement="top" title="' . ($trip['published'] == 1 ? 'Unpublish' : 'Publish') . '" style="background:none; border:none; cursor:pointer; color:inherit;"><span class="material-icons">' . ($trip['published'] == 1 ? 'cloud_off' : 'cloud_upload') . '</span></button>
+                                        <button type="button" class="delete-trip" data-trip-id="' . $trip['trip_id'] . '" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" style="background:none; border:none; cursor:pointer; color:inherit;"><span class="material-icons">delete</span></button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        ';
+                    }
+                    
+                    echo '</div>';
+                } else {
+                    echo '<div class="no-trips">
+                        <p>No trips found. <a href="manage_trips">Create one</a></p>
+                    </div>';
+                }
+                ?>
+
+            </div>
+
+        </div>
     </div>
 </section>
 <!-- Trips Management Area end -->
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
-    $(document).ready(function() {
-        $('.toggle-publish').on('click', function() {
-            var tripId = $(this).data('trip-id');
-            var button = $(this);
-            var row = button.closest('tr');
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+    tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el));
 
-            $.ajax({
-                url: 'toggle_trip_published',
-                type: 'POST',
-                data: {
-                    trip_id: tripId
-                },
-                dataType: 'json',
-                success: function(response) {
-                    if (response.status === 'success') {
-                        // Update button appearance
-                        if (response.published == 1) {
-                            button.removeClass('btn-success').addClass('btn-warning');
-                            button.find('i').removeClass('fa-eye').addClass('fa-eye-slash');
-                            button.attr('title', 'Unpublish');
-                            // Update status badge
-                            row.find('td:nth-child(8)').html('<span class="badge bg-success">Published</span>');
-                        } else {
-                            button.removeClass('btn-warning').addClass('btn-success');
-                            button.find('i').removeClass('fa-eye-slash').addClass('fa-eye');
-                            button.attr('title', 'Publish');
-                            // Update status badge
-                            row.find('td:nth-child(8)').html('<span class="badge bg-warning">Draft</span>');
-                        }
+    // Handle publish/unpublish button clicks
+    document.querySelectorAll('.toggle-publish').forEach(btn => {
+        btn.addEventListener('click', function() {
+            const tripId = this.dataset.tripId;
+            const currentIcon = this.querySelector('.material-icons').textContent;
+            const isPublished = currentIcon === 'cloud_off';
+            const action = isPublished ? 'Unpublish' : 'Publish';
+
+            const formData = new FormData();
+            formData.append('trip_id', tripId);
+
+            fetch('toggle_trip_published', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.status === 'success') {
+                        alert(action + ' successful!');
+                        location.reload();
                     } else {
-                        alert('Error: ' + response.message);
+                        alert(action + ' failed: ' + data.message);
                     }
-                },
-                error: function() {
-                    alert('Error updating trip status');
-                }
-            });
+                })
+                .catch(err => {
+                    console.error('Error:', err);
+                    alert(action + ' failed due to network error.');
+                });
         });
+    });
 
-        $('.delete-trip').on('click', function() {
+    // Handle delete button clicks
+    document.querySelectorAll('.delete-trip').forEach(btn => {
+        btn.addEventListener('click', function() {
             if (!confirm('Are you sure you want to delete this trip? This action cannot be undone.')) {
                 return false;
             }
 
-            var tripId = $(this).data('trip-id');
-            var button = $(this);
-            var row = button.closest('tr');
+            const tripId = this.dataset.tripId;
+            const card = this.closest('.destination-item');
 
-            $.ajax({
-                url: 'delete_trip',
-                type: 'POST',
-                data: {
-                    trip_id: tripId
-                },
-                dataType: 'json',
-                success: function(response) {
-                    if (response.status === 'success') {
-                        row.fadeOut(function() {
-                            $(this).remove();
-                            if ($('table tbody tr').length === 0) {
+            const formData = new FormData();
+            formData.append('trip_id', tripId);
+
+            fetch('delete_trip', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.status === 'success') {
+                        card.style.animation = 'fadeOut 0.3s ease-out';
+                        setTimeout(() => {
+                            card.remove();
+                            if (document.querySelectorAll('.destination-item').length === 0) {
                                 location.reload();
                             }
-                        });
+                        }, 300);
                     } else {
-                        alert('Error: ' + response.message);
+                        alert('Error: ' + data.message);
                     }
-                },
-                error: function() {
-                    alert('Error deleting trip');
-                }
-            });
+                })
+                .catch(err => {
+                    console.error('Error:', err);
+                    alert('Delete failed due to network error.');
+                });
         });
     });
 </script>
diff --git a/src/pages/blog/blog.php b/src/pages/blog/blog.php
index ec610e95..1b75eb1e 100644
--- a/src/pages/blog/blog.php
+++ b/src/pages/blog/blog.php
@@ -100,6 +100,7 @@ include_once($rootPath . '/header.php');
 
                         // Output the HTML structure with dynamic data
                         echo '
+                        <a href="' . $blog_link . '" style="text-decoration: none; color: inherit;">
                         <div class="blog-item style-three" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
                             <div class="image" style="border-radius:20px; width:300px;height: 250px;margin-right:0px;">
                             <img src="' . htmlspecialchars($blog_image) . '" alt="' . htmlspecialchars($post["title"]) . '">
@@ -117,6 +118,7 @@ include_once($rootPath . '/header.php');
                             
                         </div>
                         </div>
+                        </a>
 
                         ';
                     endwhile;
diff --git a/src/pages/blog/user_blogs.php b/src/pages/blog/user_blogs.php
index 8d4fde9d..c061c56d 100644
--- a/src/pages/blog/user_blogs.php
+++ b/src/pages/blog/user_blogs.php
@@ -19,63 +19,58 @@ $posts = $result->get_result();
 ?>
 
 <style>
-    .image {
-        width: 400px;
-        /* Set your desired width */
-        height: 350px;
-        /* Set your desired height */
-        overflow: hidden;
-        /* Hide any overflow */
-        display: block;
-        /* Ensure proper block behavior */
-    }
+  .image {
+    width: 400px;
+    /* Set your desired width */
+    height: 350px;
+    /* Set your desired height */
+    overflow: hidden;
+    /* Hide any overflow */
+    display: block;
+    /* Ensure proper block behavior */
+  }
 
-    .image img {
-        width: 100%;
-        /* Image scales to fill the container */
-        height: 100%;
-        /* Image scales to fill the container */
-        object-fit: cover;
-        /* Fills the container while maintaining aspect ratio */
-        object-position: top;
-        /* Aligns the top of the image with the top of the container */
-        display: block;
-        /* Prevents inline whitespace issues */
+  .image img {
+    width: 100%;
+    /* Image scales to fill the container */
+    height: 100%;
+    /* Image scales to fill the container */
+    object-fit: cover;
+    /* Fills the container while maintaining aspect ratio */
+    object-position: top;
+    /* Aligns the top of the image with the top of the container */
+    display: block;
+    /* Prevents inline whitespace issues */
 
 
-    }
+  }
 </style>
 
-
-
-<?php
-$bannerFolder = 'assets/images/banners/';
-$bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
-
-
-?>
-
 <!-- Blog List Area start -->
 <section class="blog-list-page py-100 rel z-1">
-    <div class="container">
-        <div class="row">
-            <div class="col-lg-12">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-12">
 
-            <h2>My Posts</h2>
-            <?php if (isset($_SESSION['message'])): ?>
-                    <div class="alert alert-warning message-box">
-                        <?php echo $_SESSION['message']; ?>
-                        <span class="close-btn" onclick="this.parentElement.style.display='none'">&times;</span>
-                    </div>
-                    <?php unset($_SESSION['message']); ?>
-                <?php endif; ?>
-                <a href="blog_create.php">+ New Post</a>
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
+          <h2 style="margin: 0;">My Blog Posts</h2>
+          <a href="blog_create" class="theme-btn create-album-btn">
+            <i class="far fa-plus"></i> Create New Post
+          </a>
+        </div>
+        <?php if (isset($_SESSION['message'])): ?>
+          <div class="alert alert-warning message-box">
+            <?php echo $_SESSION['message']; ?>
+            <span class="close-btn" onclick="this.parentElement.style.display='none'">&times;</span>
+          </div>
+        <?php unset($_SESSION['message']);
+        endif;
 
-                <?php while ($post = $posts->fetch_assoc()):
-                    // Determine cover image - use provided image or fallback placeholder
-                    $coverImage = $post["image"] ? $post["image"] : 'assets/images/placeholder.jpg';
-                    // Output the HTML structure with dynamic data
-                        echo '
+        while ($post = $posts->fetch_assoc()):
+          // Determine cover image - use provided image or fallback placeholder
+          $coverImage = $post["image"] ? $post["image"] : 'assets/images/placeholder.jpg';
+          // Output the HTML structure with dynamic data
+          echo '
                     <div class="destination-item style-three bgc-lighter booking" data-aos="fade-up" data-aos-duration="1500" data-aos-offset="50">
                         <div class="image" style="width:200px;height:200px;"><img src="' . htmlspecialchars($coverImage) . '" alt="' . htmlspecialchars($post["title"]) . '"></div>
                         <div class="content" style="width:100%;">
@@ -88,25 +83,25 @@ $bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
                             <p>' . $post["description"] . '</p>
                             <div class="destination-footer">
                                 <div class="btn-group" style="display:flex; justify-content:flex-end; gap:10px;">
-                                    <a href="blog_edit.php?token='.encryptData($post["blog_id"], $salt).'" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="material-icons">edit</span></a>   
-                                    <a href="blog_read.php?token='.encryptData($post["blog_id"], $salt).'" data-bs-toggle="tooltip" data-bs-placement="top" title="Preview"><span class="material-icons">visibility</span></a>
+                                    <a href="blog_edit.php?token=' . encryptData($post["blog_id"], $salt) . '" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit"><span class="material-icons">edit</span></a>   
+                                    <a href="blog_read.php?token=' . encryptData($post["blog_id"], $salt) . '" data-bs-toggle="tooltip" data-bs-placement="top" title="Preview"><span class="material-icons">visibility</span></a>
                                     <button type="button" class="publish-btn" data-blog-id="' . $post["blog_id"] . '" data-status="' . $post["status"] . '" data-bs-toggle="tooltip" data-bs-placement="top" title="' . ($post["status"] == "published" ? "Unpublish" : "Publish") . '" style="background:none; border:none; cursor:pointer; color:inherit;"><span class="material-icons">' . ($post["status"] == "published" ? "cloud_off" : "cloud_upload") . '</span></button>
-                                    <a href="blog_delete.php?token='.encryptData($post["blog_id"], $salt).'" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="material-icons">delete</span></a>                  
+                                    <a href="blog_delete.php?token=' . encryptData($post["blog_id"], $salt) . '" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete"><span class="material-icons">delete</span></a>                  
                                 </div>
 
                             </div>
                         </div>
-                    </div>';                
-                endwhile; ?>
+                    </div>';
+        endwhile; ?>
+
+
+      </div>
 
-                               
-            </div>
-            
-        </div>
     </div>
+  </div>
 </section>
 <!-- Blog List Area end -->
- <script>
+<script>
   const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
   tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el));
 
@@ -122,22 +117,22 @@ $bannerImages = glob($bannerFolder . '*.{jpg,jpeg,png,webp}', GLOB_BRACE);
       formData.append('id', blogId);
 
       fetch(endpoint, {
-        method: 'POST',
-        body: formData
-      })
-      .then(response => {
-        if (response.ok) {
-          alert(action.charAt(0).toUpperCase() + action.slice(1) + ' successful!');
-          location.reload();
-        } else {
-          alert(action + ' failed.');
-          console.error('Error:', response.statusText);
-        }
-      })
-      .catch(err => {
-        console.error('Error:', err);
-        alert(action + ' failed due to network error.');
-      });
+          method: 'POST',
+          body: formData
+        })
+        .then(response => {
+          if (response.ok) {
+            alert(action.charAt(0).toUpperCase() + action.slice(1) + ' successful!');
+            location.reload();
+          } else {
+            alert(action + ' failed.');
+            console.error('Error:', response.statusText);
+          }
+        })
+        .catch(err => {
+          console.error('Error:', err);
+          alert(action + ' failed due to network error.');
+        });
     });
   });
 </script>
diff --git a/src/pages/events/events.php b/src/pages/events/events.php
index 02c7fae0..8b6ed48f 100644
--- a/src/pages/events/events.php
+++ b/src/pages/events/events.php
@@ -70,24 +70,7 @@ include_once($rootPath . '/header.php');
         <div class="row">
 
             <div class="col-lg-12">
-                <div class="shop-shorter rel z-3 mb-20">
-                    <!-- <ul class="grid-list mb-15 me-2">
-                        <li><a href="#"><i class="fal fa-border-all"></i></a></li>
-                        <li><a href="#"><i class="far fa-list"></i></a></li>
-                    </ul>
-                    <div class="sort-text mb-15 me-4 me-xl-auto">
-                    </div> -->
-                    <div class="sort-text mb-15 me-4">
-                        Sort By
-                    </div>
-                    <select>
-                        <option value="default" selected="">Sort By</option>
-                        <option value="new">Newness</option>
-                        <option value="old">Oldest</option>
-                        <option value="hight-to-low">High To Low</option>
-                        <option value="low-to-high">Low To High</option>
-                    </select>
-                </div>
+
 
                 <?php
                 // Query to retrieve upcoming published events only
diff --git a/src/pages/gallery/gallery.php b/src/pages/gallery/gallery.php
index d43e4958..9dd38855 100644
--- a/src/pages/gallery/gallery.php
+++ b/src/pages/gallery/gallery.php
@@ -58,20 +58,13 @@ $conn->close();
     }
 
     .album-card {
-        position: relative;
         border-radius: 12px;
         overflow: hidden;
         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(-8px);
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+        border: 1px solid #e0e0e0;
     }
 
     .album-image-wrapper {
@@ -86,11 +79,6 @@ $conn->close();
         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 {
@@ -163,49 +151,21 @@ $conn->close();
         display: flex;
         gap: 8px;
         margin-top: auto;
+        align-items: center;
     }
 
-    .album-view-btn {
-        flex: 1;
-        padding: 8px 12px;
-        background: #667eea;
-        color: white;
+    .album-edit-icon {
+        background: none;
         border: none;
-        border-radius: 30px;
-        font-size: 0.85rem;
-        font-weight: 600;
         cursor: pointer;
-        transition: background 0.3s;
-        text-decoration: none;
-        text-align: center;
-        display: block;
+        color: inherit;
+        padding: 0;
+        font-size: 1.2rem;
+        transition: color 0.2s ease;
     }
 
-    .album-view-btn:hover {
-        background: #764ba2;
-        text-decoration: none;
-        color: white;
-    }
-
-    .album-edit-btn {
-        padding: 8px 12px;
-        background: white;
+    .album-edit-icon:hover {
         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 {
@@ -260,7 +220,8 @@ require_once($rootPath . '/components/banner.php');
                 <?php if (count($albums) > 0): ?>
                     <div class="gallery-grid">
                         <?php foreach ($albums as $album): ?>
-                            <div class="album-card">
+                            <a href="view_album?id=<?php echo $album['album_id']; ?>" style="text-decoration: none; color: inherit;">
+                                <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']); ?>">
@@ -289,17 +250,15 @@ require_once($rootPath . '/components/banner.php');
                                     </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">
+                                            <a href="edit_album?id=<?php echo $album['album_id']; ?>" class="album-edit-icon" title="Edit">
                                                 <i class="far fa-edit"></i>
                                             </a>
                                         <?php endif; ?>
                                     </div>
                                 </div>
                             </div>
+                            </a>
                         <?php endforeach; ?>
                     </div>
                 <?php else: ?>