diff --git a/public/css/style.css b/public/css/style.css
index 31d7b1329076bcc7230699698fbeceee9b48180f..a31b23f2ad3ceab1f91774fdcee8db1f5121215a 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -322,6 +322,12 @@ body {
     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 }
 
+
+.card-body {
+    padding: 16px;
+    text-align: center;
+}
+
 /* Tables */
 .table thead th {
     background-color: var(--imt-primary);
diff --git a/src/Controller/WishlistController.php b/src/Controller/WishlistController.php
index ee45d9a3d54b1726ff2e11c9b1009a9531f6ffda..b1a6d1a0181cce4c6cb03f67cf6ab9a19bb948e2 100644
--- a/src/Controller/WishlistController.php
+++ b/src/Controller/WishlistController.php
@@ -49,17 +49,36 @@ final class WishlistController extends AbstractController
 
     #[Route('/{id}', name: 'app_wishlist_show', methods: ['GET'])]
 public function show(Wishlist $wishlist, Request $request): Response
-{
+    {
     $sortBy = $request->query->get('sort', 'price_asc');
     $searchQuery = $request->query->get('search', '');
 
+    // Convert PersistentCollection to an array
+    $items = $wishlist->getItems()->toArray();
+
+    // Sort items based on the sortBy parameter
+    if ($sortBy === 'price_asc') {
+        usort($items, fn($a, $b) => $a->getPrice() <=> $b->getPrice());
+    } elseif ($sortBy === 'price_desc') {
+        usort($items, fn($a, $b) => $b->getPrice() <=> $a->getPrice());
+    }
+    elseif ($sortBy === 'name_asc') {
+        // Sort items alphabetically in ascending order
+        usort($items, fn($a, $b) => strcmp($a->getTitle(), $b->getTitle()));
+    } elseif ($sortBy === 'name_desc') {
+        // Sort items alphabetically in descending order
+        usort($items, fn($a, $b) => strcmp($b->getTitle(), $a->getTitle()));
+    }
+  
+
     return $this->render('wishlist/show.html.twig', [
         'wishlist' => $wishlist,
+        'items' => $items, // Pass sorted items to the template
         'view_mode' => 'grid',
         'sort_by' => $sortBy,
         'search_query' => $searchQuery,
     ]);
-}
+    }
 
     
 
diff --git a/templates/wishlist/show.html.twig b/templates/wishlist/show.html.twig
index e917e95f313a06e029f0076cf4200326e759ec31..de9582b211e2f46020c91b2e3397808eddc7fc4f 100644
--- a/templates/wishlist/show.html.twig
+++ b/templates/wishlist/show.html.twig
@@ -171,18 +171,18 @@
 
 <div class="hero">
     <h1>{{ wishlist.name }}</h1>
-    <p>{{ wishlist.items|length }} items total</p>
+    <p>{{ items|length }} items total</p>
     <a href="{{ path('app_item_new', { 'wishlistId': wishlist.id }) }}" class="add-btn">+ Add New Item</a>
 </div>
 
 <div class="grid-container">
-    {% for item in wishlist.items %}
+    {% for item in items %}
         <div class="card">
             <div class="card-image">
                 <img src="{{ item.image ? asset('uploads/images/' ~ item.image) : 'https://via.placeholder.com/300?text=No+Image' }}" alt="{{ item.title }}">
             </div>
             <div class="card-body">
-                <h3>{{ item.title }}</h3>
+                <h1>{{ item.title }}</h1>
                 <p>{{ item.description|default('No description') }}</p>
             </div>
             <div class="card-footer">