diff --git a/web/templates/web/quiz/quiz_list.html b/web/templates/web/quiz/quiz_list.html
index 7ecb7e30d..fa0e016e9 100644
--- a/web/templates/web/quiz/quiz_list.html
+++ b/web/templates/web/quiz/quiz_list.html
@@ -24,7 +24,9 @@ <h1 class="text-3xl font-bold text-gray-800 dark:text-white">Quizzes</h1>
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
       <!-- Left column - My Quizzes -->
       <div class="lg:col-span-1">
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden 
+                    transition duration-300 hover:-translate-y-1 hover:shadow-2xl
+                    focus-within:-translate-y-1 focus-within:shadow-2xl">
           <div class="bg-teal-600 p-4">
             <h2 class="text-xl font-bold text-white flex items-center">
               <i class="fas fa-book mr-2"></i> My Quizzes
@@ -72,7 +74,9 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-1">{{ quiz.tit
       </div>
       <!-- Middle column - Shared Quizzes -->
       <div class="lg:col-span-1">
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden h-full">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden 
+                    h-full transition duration-300 hover:-translate-y-1 hover:shadow-2xl
+                    focus-within:-translate-y-1 focus-within:shadow-2xl">
           <div class="bg-blue-600 p-4">
             <h2 class="text-xl font-bold text-white flex items-center">
               <i class="fas fa-share-alt mr-2"></i> Shared With Me
@@ -113,7 +117,9 @@ <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-1">{{ quiz.tit
       </div>
       <!-- Right column - Public Quizzes -->
       <div class="lg:col-span-1">
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden h-full">
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden 
+                    h-full transition duration-300 hover:-translate-y-1 hover:shadow-2xl
+                    focus-within:-translate-y-1 focus-within:shadow-2xl">
           <div class="bg-purple-600 p-4">
             <h2 class="text-xl font-bold text-white flex items-center">
               <i class="fas fa-globe mr-2"></i> Public Quizzes