diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 40f953b..029149c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
       dayjs:
         specifier: ^1.11.4
         version: 1.11.13
+      svelte-icons:
+        specifier: ^2.1.0
+        version: 2.1.0
     devDependencies:
       '@sveltejs/adapter-static':
         specifier: 1.0.0-next.38
@@ -1251,6 +1254,9 @@ packages:
     peerDependencies:
       svelte: ^3.19.0 || ^4.0.0
 
+  svelte-icons@2.1.0:
+    resolution: {integrity: sha512-rHPQjweEc9fGSnvM0/4gA3pDHwyZyYsC5KhttCZRhSMJfLttJST5Uq0B16Czhw+HQ+HbSOk8kLigMlPs7gZtfg==}
+
   svelte-preprocess@4.10.7:
     resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==}
     engines: {node: '>= 9.11.2'}
@@ -2558,6 +2564,8 @@ snapshots:
     dependencies:
       svelte: 3.59.2
 
+  svelte-icons@2.1.0: {}
+
   svelte-preprocess@4.10.7(postcss-load-config@4.0.2(postcss@8.4.47))(postcss@8.4.47)(sass@1.78.0)(svelte@3.59.2)(typescript@4.9.5):
     dependencies:
       '@types/pug': 2.0.10
diff --git a/src/components/Winners/WinnerCard.svelte b/src/components/Winners/WinnerCard.svelte
index b8ddae9..097e8a0 100644
--- a/src/components/Winners/WinnerCard.svelte
+++ b/src/components/Winners/WinnerCard.svelte
@@ -1,38 +1,36 @@
 <script>
-	export let title, description, name, picture, winners, icon ;
+    export let title, description, name, picture, winners, icon;
     function shortdesc(desc){
         return desc.length > 80 ? desc.slice(0,80) + '...' : desc;
     }
     console.log(picture)
 </script>
 
-<div class="relative p-6 bg-blueberry-200 text-blackberry-800 rounded-2xl min-h-min h-[40vh] overflow-hidden flex flex-col justify-center items-center group transition-all duration-300">
-    <div>
+<div class="relative p-6 bg-blueberry-200 text-blackberry-800 rounded-2xl min-h-[40vh] overflow-hidden flex flex-col justify-between group transition-all duration-1000 ease-in-out hover:min-h-[60vh]">
+    <div class="z-10">
         <h1 class="font-bold text-2xl">{title}: <span class="font-semibold text-2xl text-blueberry-600">{name}</span></h1>
-       
     </div>
 
-	{#if picture !== 'na'}
+    {#if picture !== 'na'}
     <div
-        class="absolute inset-0 bg-center bg-cover opacity-10"
+        class="absolute inset-0 bg-center bg-cover opacity-10 transition-opacity duration-1000 ease-in-out group-hover:opacity-5"
         style="background-image: url({picture});"
     ></div>
     {/if}
 
-    <div class="z-10 w-[50%] h-[50%] flex justify-center items-center my-5  group-hover:hidden"> 
+    <div class="z-10 w-[50%] h-[50%] flex justify-center items-center my-5 transition-all duration-1000 ease-in-out group-hover:h-[30%] group-hover:opacity-50"> 
         <svelte:component this={icon} class="text-blueberry-600 w-[100%] h-auto" />
     </div>
 
-    <div class="transition-all duration-300 hidden group-hover:block">
-        <p class="mt-2"><strong>Winners:</strong> {winners}</p>
-        <p class="mt-2"><strong>Description:</strong> {description}</p>
+    <div class="z-20 bg-blueberry-200 transition-all duration-1000 ease-in-out max-h-0 group-hover:max-h-[1000px] overflow-hidden">
+        <p class="mt-2 transform translate-y-full transition-transform duration-1000 ease-in-out group-hover:translate-y-0"><strong>Winners:</strong> {winners}</p>
+        <p class="mt-2 transform translate-y-full transition-transform duration-1000 ease-in-out group-hover:translate-y-0"><strong>Description:</strong> {description}</p>
     </div>
-
 </div>
+
 <style>
 	/* Ensures that the winners and description are initially hidden */
 	.hidden {
 		display: none;
 	}
-    
 </style>
\ No newline at end of file