diff --git a/attached_assets/targeted_element_1758419719251.png b/attached_assets/targeted_element_1758419719251.png
new file mode 100644
index 00000000..09eede07
Binary files /dev/null and b/attached_assets/targeted_element_1758419719251.png differ
diff --git a/backend/templates/home.html b/backend/templates/home.html
index ccdc4216..e29c7aaf 100644
--- a/backend/templates/home.html
+++ b/backend/templates/home.html
@@ -76,7 +76,7 @@
                    {% if park.photos.first %}
                    style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('{{ park.photos.first.image.url }}') center/cover no-repeat;"
                    {% else %}
-                   style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));"
+                   style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"
                    {% endif %}>
                     <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                         <div class="text-lg font-semibold">
@@ -96,7 +96,11 @@
                     </div>
                 </a>
             {% empty %}
-                <p class="text-gray-600 dark:text-gray-400">No trending parks found.</p>
+                <div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
+                    <div class="mb-4 text-4xl">🎢</div>
+                    <div class="text-lg font-medium text-gray-900 dark:text-white">No Parks Yet</div>
+                    <div class="text-sm text-gray-600 dark:text-gray-400">Parks will appear here once they're added to the database</div>
+                </div>
             {% endfor %}
         </div>
     </div>
@@ -113,7 +117,7 @@
                    {% if ride.photos.first %}
                    style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('{{ ride.photos.first.image.url }}') center/cover no-repeat;"
                    {% else %}
-                   style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));"
+                   style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"
                    {% endif %}>
                     <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
                         <div class="text-lg font-semibold">
@@ -133,7 +137,11 @@
                     </div>
                 </a>
             {% empty %}
-                <p class="text-gray-600 dark:text-gray-400">No trending rides found.</p>
+                <div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
+                    <div class="mb-4 text-4xl">🎠</div>
+                    <div class="text-lg font-medium text-gray-900 dark:text-white">No Rides Yet</div>
+                    <div class="text-sm text-gray-600 dark:text-gray-400">Rides will appear here once they're added to the database</div>
+                </div>
             {% endfor %}
         </div>
     </div>
@@ -191,7 +199,11 @@
                     </a>
                 {% endif %}
             {% empty %}
-                <p class="text-gray-600 dark:text-gray-400">No rated items found.</p>
+                <div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
+                    <div class="mb-4 text-4xl">⭐</div>
+                    <div class="text-lg font-medium text-gray-900 dark:text-white">No Ratings Yet</div>
+                    <div class="text-sm text-gray-600 dark:text-gray-400">Highest rated content will appear here once users start rating</div>
+                </div>
             {% endfor %}
         </div>
     </div>