diff --git a/resources/views/components/mod-card.blade.php b/resources/views/components/mod-card.blade.php
index d4e056f..f340ecc 100644
--- a/resources/views/components/mod-card.blade.php
+++ b/resources/views/components/mod-card.blade.php
@@ -4,13 +4,13 @@
     @if ($mod->featured && !request()->routeIs('home'))
         <div class="ribbon z-10">{{ __('Featured!') }}</div>
     @endif
-    <div class="flex flex-col group h-full w-full bg-white dark:bg-gray-950 rounded-xl shadow-md dark:shadow-gray-950 drop-shadow-2xl overflow-hidden hover:shadow-lg hover:bg-gray-50 dark:hover:bg-black hover:shadow-gray-400 dark:hover:shadow-black transition-all duration-200">
+    <div class="flex flex-col group h-full w-full bg-white dark:bg-gray-950 rounded-xl shadow-md dark:shadow-gray-950 drop-shadow-2xl overflow-hidden hover:shadow-lg hover:bg-gray-50 dark:hover:bg-black hover:shadow-gray-400 dark:hover:shadow-black transition-colors ease-out duration-700">
         <div class="h-auto md:h-full md:flex">
             <div class="h-auto md:h-full md:shrink-0 overflow-hidden">
                 @if ($mod->thumbnail)
                     <img src="{{ $mod->thumbnailUrl }}" alt="{{ $mod->name }}" class="h-48 w-full object-cover md:h-full md:w-48 transform group-hover:scale-110 transition-all duration-200">
                 @else
-                    <img src="https://placehold.co/450x450/31343C/EEE?font=source-sans-pro&text={{ urlencode($mod->name) }}" alt="{{ $mod->name }}" class="h-48 w-full object-cover md:h-full md:w-48 transform group-hover:scale-110 transition-all duration-200">
+                    <img src="https://placehold.co/450x450/31343C/EEE?font=source-sans-pro&text={{ urlencode($mod->name) }}" alt="{{ $mod->name }}" class="h-48 w-full object-cover md:h-full md:w-48 group-hover:scale-110 transition-transform ease-in-out duration-500">
                 @endif
             </div>
             <div class="flex flex-col w-full justify-between p-5">