diff --git a/src/components/PebblePlacementGame.tsx b/src/components/PebblePlacementGame.tsx
index 5a740f0..24fee15 100644
--- a/src/components/PebblePlacementGame.tsx
+++ b/src/components/PebblePlacementGame.tsx
@@ -85,8 +85,10 @@ const PebblePlacementGame: React.FC<PebblePlacementGameProps> = ({ showSocialSha
     }
   };
 
-  const getPositionState = (position: number): 'placed' | 'available' | 'blocked' => {
-    if (placedPebbles.has(position)) return 'placed';
+  const getPositionState = (position: number): 'placed-removable' | 'placed-fixed' | 'available' | 'blocked' => {
+    if (placedPebbles.has(position)) {
+      return canRemovePebble(position) ? 'placed-removable' : 'placed-fixed';
+    }
     if (canPlacePebble(position) && pebblesInHand > 0) return 'available';
     return 'blocked';
   };
@@ -96,10 +98,12 @@ const PebblePlacementGame: React.FC<PebblePlacementGameProps> = ({ showSocialSha
     const baseClasses = "w-8 h-8 border-2 rounded-full flex items-center justify-center text-sm font-medium cursor-pointer transition-all duration-200";
     
     switch (state) {
-      case 'placed':
-        return `${baseClasses} bg-primary text-primary-foreground border-primary hover:bg-primary/90`;
+      case 'placed-removable':
+        return `${baseClasses} bg-green-100 text-green-800 border-green-200 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700`;
+      case 'placed-fixed':
+        return `${baseClasses} bg-red-100 text-red-800 border-red-200 cursor-not-allowed dark:bg-red-900/30 dark:text-red-300 dark:border-red-700`;
       case 'available':
-        return `${baseClasses} bg-secondary text-secondary-foreground border-secondary hover:bg-secondary/80 hover:scale-110`;
+        return `${baseClasses} bg-secondary text-secondary-foreground border-primary border-2 hover:bg-secondary/80 hover:scale-110 shadow-sm`;
       case 'blocked':
         return `${baseClasses} bg-muted text-muted-foreground border-muted cursor-not-allowed opacity-50`;
     }