diff --git a/src/main.js b/src/main.js
index 8daeddd..60667ab 100644
--- a/src/main.js
+++ b/src/main.js
@@ -116,9 +116,14 @@ function create() {
     });
     title.setOrigin(0.5);
     
-    // Create a basic game area
-    const gameArea = this.add.rectangle(800, 450, 1400, 700, 0x3a7c2d);
-    gameArea.setOrigin(0.5);
+    // Add player and opponent rows for cards in center of screen
+    // Player row at bottom (closest to player)
+    const playerRow = this.add.rectangle(800, 600, 1400, 120, 0x3a7c2d);
+    playerRow.setOrigin(0.5);
+    
+    // Opponent row at top (closest to opponent)
+    const opponentRow = this.add.rectangle(800, 300, 1400, 120, 0x3a7c2d);
+    opponentRow.setOrigin(0.5);
     
     // Add some instructions
     const instructions = this.add.text(800, 850, 'Use mouse to play cards and build your deck', {
@@ -245,60 +250,72 @@ function addInteractiveCard(card, xPosition, yPosition, width, height) {
     
     // Add event listeners for hover effects
     hitArea.on('pointerover', () => {
-        // Raise the card up to full view (move it up by 30 pixels)
-        if (card.sprite) {
-            card.sprite.setY(originalY - 30);
-        }
-        if (card.text) {
-            card.text.setY(originalY - 50);
-        }
-        // Move stat texts with the card
-        if (card.attackText) {
-            card.attackText.setY(originalY - 80);
-        }
-        if (card.shieldText) {
-            card.shieldText.setY(originalY + 20);
-        }
-        if (card.healthText) {
-            card.healthText.setY(originalY + 20);
+        // Only allow hover effects if the card is in hand (not already on field)
+        const isInHand = this.gameState.playerHand.includes(card);
+        if (isInHand && !card.isLocked) {
+            // Raise the card up to full view (move it up by 30 pixels)
+            if (card.sprite) {
+                card.sprite.setY(originalY - 30);
+            }
+            if (card.text) {
+                card.text.setY(originalY - 50);
+            }
+            // Move stat texts with the card
+            if (card.attackText) {
+                card.attackText.setY(originalY - 80);
+            }
+            if (card.shieldText) {
+                card.shieldText.setY(originalY + 20);
+            }
+            if (card.healthText) {
+                card.healthText.setY(originalY + 20);
+            }
         }
     });
     
     hitArea.on('pointerout', () => {
-        // Return the card to its original position
-        if (card.sprite && !card.isLocked) {
-            card.sprite.setY(originalY);
-        }
-        if (card.text && !card.isLocked) {
-            card.text.setY(originalY - 20);
-        }
-        // Return stat texts to original positions
-        if (card.attackText && !card.isLocked) {
-            card.attackText.setY(originalY - 50);
-        }
-        if (card.shieldText && !card.isLocked) {
-            card.shieldText.setY(originalY + 50);
-        }
-        if (card.healthText && !card.isLocked) {
-            card.healthText.setY(originalY + 50);
+        // Only allow hover effects if the card is in hand (not already on field)
+        const isInHand = this.gameState.playerHand.includes(card);
+        if (isInHand && !card.isLocked) {
+            // Return the card to its original position
+            if (card.sprite) {
+                card.sprite.setY(originalY);
+            }
+            if (card.text) {
+                card.text.setY(originalY - 20);
+            }
+            // Return stat texts to original positions
+            if (card.attackText) {
+                card.attackText.setY(originalY - 50);
+            }
+            if (card.shieldText) {
+                card.shieldText.setY(originalY + 50);
+            }
+            if (card.healthText) {
+                card.healthText.setY(originalY + 50);
+            }
         }
     });
     
     // Add click event to lock the card in place
     hitArea.on('pointerdown', () => {
-        // Lock the card in its current position
-        card.isLocked = true;
-        
-        // Remove hover effects while locked
-        if (card.sprite) {
-            card.sprite.setY(originalY - 30); // Keep it raised up when locked
+        // Only allow clicking if the card is in hand (not already on field)
+        const isInHand = this.gameState.playerHand.includes(card);
+        if (isInHand) {
+            // Lock the card in its current position
+            card.isLocked = true;
+            
+            // Remove hover effects while locked
+            if (card.sprite) {
+                card.sprite.setY(originalY - 30); // Keep it raised up when locked
+            }
+            if (card.text) {
+                card.text.setY(originalY - 50);
+            }
+            
+            // Create Play and Cancel buttons above the card
+            createCardButtons.call(this, card, xPosition, originalY - 30);
         }
-        if (card.text) {
-            card.text.setY(originalY - 50);
-        }
-        
-        // Create Play and Cancel buttons above the card
-        createCardButtons.call(this, card, xPosition, originalY - 30);
     });
 }
 
@@ -371,38 +388,51 @@ function createCardButtons(card, xPosition, yPosition) {
 }
 
 /**
- * Move a card to the player's field (center of screen)
+ * Move a card to the player's field (player row on far right)
  */
 function moveCardToField(card) {
-    // For now, we'll just remove it from hand and add it to field
-    // In a real implementation this would involve more complex logic
+    // Remove it from hand and add it to field
     const index = this.gameState.playerHand.indexOf(card);
     if (index > -1) {
         this.gameState.playerHand.splice(index, 1);
         this.gameState.playerField.push(card);
     }
     
-    // Remove the card from display
-    if (card.sprite) {
-        card.sprite.destroy();
-    }
-    if (card.text) {
-        card.text.destroy();
-    }
+    // Calculate starting position for the animation (right side of screen)
+    const startX = 1600 + 50; // Start just off-screen to the right
+    const startY = 600; // Player field y-position (bottom row)
     
-    // Re-display the player's hand to update positions of remaining cards
-    // Clear existing hand display first by removing all sprites and texts
-    this.gameState.playerHand.forEach(handCard => {
-        if (handCard.sprite) {
-            handCard.sprite.destroy();
-        }
-        if (handCard.text) {
-            handCard.text.destroy();
-        }
+    // Calculate target x position based on how many cards are already in the field
+    // Cards stack from right to left with each card being 120px wide + 20px spacing
+    const cardWidth = 100;
+    const spacing = 20;
+    const currentFieldCount = this.gameState.playerField.length - 1; // -1 because we just added the new card
+    const targetX = 1600 - (cardWidth + spacing) * currentFieldCount - (cardWidth / 2); // Position from right edge
+    
+    // Animate the card moving from right to left towards its final position in player field
+    this.tweens.add({
+        targets: [card.sprite, card.text, card.attackText, card.shieldText, card.healthText],
+        x: targetX,
+        y: startY,
+        duration: 500, // 500ms animation time
+        ease: 'Power2'
     });
     
-    // Redisplay the updated player's hand at the bottom of the screen
-    displayPlayerHand.call(this);
+    // Re-display the player's hand to update positions of remaining cards after animation completes
+    setTimeout(() => {
+        // Clear existing hand display first by removing all sprites and texts
+        this.gameState.playerHand.forEach(handCard => {
+            if (handCard.sprite) {
+                handCard.sprite.destroy();
+            }
+            if (handCard.text) {
+                handCard.text.destroy();
+            }
+        });
+        
+        // Redisplay the updated player's hand at the bottom of the screen
+        displayPlayerHand.call(this);
+    }, 500); // Wait for animation to complete before updating hand
 }
 
 /**