diff --git a/src/components/DeckCard.tsx b/src/components/DeckCard.tsx
index 8632fa8..00cf7c7 100644
--- a/src/components/DeckCard.tsx
+++ b/src/components/DeckCard.tsx
@@ -1,77 +1,77 @@
-import React from 'react';
-import { AlertTriangle, Check, Edit } from 'lucide-react';
-import { Deck } from '../types';
-import { validateDeck } from '../utils/deckValidation';
-
-interface DeckCardProps {
-  deck: Deck;
-  onEdit?: (deckId: string) => void;
-}
-
-export default function DeckCard({ deck, onEdit }: DeckCardProps) {
-
-  if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
-    console.log("deck", deck.name);
-    console.log("cardEntities", deck.cards);
-  }
-
-  const validation = validateDeck(deck);
-  const commander = deck.format === 'commander' ? deck.cards.find(card => 
-    card.is_commander
-  )?.card : null;
-
-  return (
-    <div 
-      className="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer"
-      onClick={() => onEdit?.(deck.id)}
-    >
-      <div className="relative h-48 overflow-hidden">
-        <img
-          src={commander?.image_uris?.normal || deck.cards[0]?.card.image_uris?.normal}
-          alt={commander?.name || deck.cards[0]?.card.name}
-          className="w-full object-cover object-top transform translate-y-[-12%]"
-        />
-        <div className="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent" />
-      </div>
-      
-      <div className="p-4">
-        <div className="flex items-center justify-between mb-2">
-          <h3 className="text-xl font-bold text-white">{deck.name}</h3>
-          {validation.isValid ? (
-            <div className="flex items-center text-green-400">
-              <Check size={16} className="mr-1" />
-              <span className="text-sm">Legal</span>
-            </div>
-          ) : (
-            <div className="flex items-center text-yellow-400" title={validation.errors.join(', ')}>
-              <AlertTriangle size={16} className="mr-1" />
-              <span className="text-sm">Issues</span>
-            </div>
-          )}
-        </div>
-        
-        <div className="flex items-center justify-between text-sm text-gray-400">
-          <span className="capitalize">{deck.format}</span>
-          <span>{deck.cards.reduce((acc, curr) => acc + curr.quantity, 0)} cards</span>
-        </div>
-        
-        {commander && (
-          <div className="mt-2 text-sm text-gray-300">
-            <span className="text-blue-400">Commander:</span> {commander.name}
-          </div>
-        )}
-
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onEdit?.(deck.id);
-          }}
-          className="mt-4 w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2 text-white"
-        >
-          <Edit size={20} />
-          Edit Deck
-        </button>
-      </div>
-    </div>
-  );
+import React from 'react';
+import { AlertTriangle, Check, Edit } from 'lucide-react';
+import { Deck } from '../types';
+import { validateDeck } from '../utils/deckValidation';
+
+interface DeckCardProps {
+  deck: Deck;
+  onEdit?: (deckId: string) => void;
+}
+
+export default function DeckCard({ deck, onEdit }: DeckCardProps) {
+
+  if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
+    console.log("deck", deck.name);
+    console.log("cardEntities", deck.cards);
+  }
+
+  const validation = validateDeck(deck);
+  const commander = deck.format === 'commander' ? deck.cards.find(card => 
+    card.is_commander
+  )?.card : null;
+
+  return (
+    <div
+      className="bg-gray-800 rounded-xl overflow-hidden shadow-lg card-hover cursor-pointer animate-scale-in"
+      onClick={() => onEdit?.(deck.id)}
+    >
+      <div className="relative h-48 overflow-hidden">
+        <img
+          src={commander?.image_uris?.normal || deck.cards[0]?.card.image_uris?.normal}
+          alt={commander?.name || deck.cards[0]?.card.name}
+          className="w-full object-cover object-top transform translate-y-[-12%]"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent" />
+      </div>
+      
+      <div className="p-4">
+        <div className="flex items-center justify-between mb-2">
+          <h3 className="text-xl font-bold text-white">{deck.name}</h3>
+          {validation.isValid ? (
+            <div className="flex items-center text-green-400">
+              <Check size={16} className="mr-1" />
+              <span className="text-sm">Legal</span>
+            </div>
+          ) : (
+            <div className="flex items-center text-yellow-400" title={validation.errors.join(', ')}>
+              <AlertTriangle size={16} className="mr-1" />
+              <span className="text-sm">Issues</span>
+            </div>
+          )}
+        </div>
+        
+        <div className="flex items-center justify-between text-sm text-gray-400">
+          <span className="capitalize">{deck.format}</span>
+          <span>{deck.cards.reduce((acc, curr) => acc + curr.quantity, 0)} cards</span>
+        </div>
+        
+        {commander && (
+          <div className="mt-2 text-sm text-gray-300">
+            <span className="text-blue-400">Commander:</span> {commander.name}
+          </div>
+        )}
+
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onEdit?.(deck.id);
+          }}
+          className="mt-4 w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2 text-white btn-ripple transition-smooth glow-on-hover"
+        >
+          <Edit size={20} />
+          Edit Deck
+        </button>
+      </div>
+    </div>
+  );
 }