diff --git a/templates/home.html b/templates/home.html
index 24da3399..de15bfa7 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -30,7 +30,7 @@
 <div class="grid grid-cols-1 gap-6 mb-12 md:grid-cols-3">
     <!-- Total Parks -->
     <a href="{% url 'parks:park_list' %}" 
-        <div class="text-xl text-gray-600 dark:text-gray-300">
+       class="flex flex-col items-center justify-center p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
         <div class="mb-2 text-4xl font-bold text-blue-600 dark:text-blue-400">
             {{ stats.total_parks }}
         </div>
@@ -41,7 +41,7 @@
 
     <!-- Total Attractions -->
     <a href="{% url 'rides:ride_list' %}" 
-       class="p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
+       class="flex flex-col items-center justify-center p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
         <div class="mb-2 text-4xl font-bold text-blue-600 dark:text-blue-400">
             {{ stats.ride_count }}
         </div>
@@ -52,7 +52,7 @@
 
     <!-- Total Roller Coasters -->
     <a href="{% url 'rides:roller_coasters' %}" 
-       class="p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
+       class="flex flex-col items-center justify-center p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
         <div class="mb-2 text-4xl font-bold text-blue-600 dark:text-blue-400">
             {{ stats.coaster_count }}
         </div>