diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5077ca2..84e2dff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -99,7 +99,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `!weather` - Check current weather
 - `!achievements` - View progress
 - `!activate/deactivate <pet>` - Manage team
-- `!swap <pet1> <pet2>` - Reorganize team
 - `!moves` - View pet abilities
 - `!flee` - Escape battles
 
diff --git a/README.md b/README.md
index a74469f..ff24e94 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ A feature-rich IRC bot that brings Pokemon-style pet collecting and battling to
 - **Pet Collection**: Catch and collect different species of pets
 - **Exploration**: Travel between various themed locations
 - **Battle System**: Engage in turn-based battles with wild pets
-- **Team Management**: Activate/deactivate pets, swap team members
+- **Team Management**: Activate/deactivate pets, manage team composition
 - **Achievement System**: Unlock new areas by completing challenges
 - **Item Collection**: Discover and collect useful items during exploration
 
@@ -78,7 +78,6 @@ A feature-rich IRC bot that brings Pokemon-style pet collecting and battling to
 ### Pet Management
 - `!activate <pet>` - Activate a pet for battle
 - `!deactivate <pet>` - Move a pet to storage
-- `!swap <pet1> <pet2>` - Swap two pets' active status
 
 ### Inventory Commands
 - `!inventory` / `!inv` / `!items` - View your collected items
diff --git a/help.html b/help.html
index 0d39133..534717a 100644
--- a/help.html
+++ b/help.html
@@ -430,11 +430,6 @@
                 <div class="command-desc">Remove a pet from your active team and put it in storage.</div>
                 <div class="command-example">Example: !deactivate aqua</div>
             </div>
-            <div class="command">
-                <div class="command-name">!swap &lt;pet1&gt; &lt;pet2&gt;</div>
-                <div class="command-desc">Swap the active status of two pets - one becomes active, the other goes to storage.</div>
-                <div class="command-example">Example: !swap leafy flamey</div>
-            </div>
             </div>
         </div>
     </div>
diff --git a/modules/achievements.py b/modules/achievements.py
index 7b4f805..98c5ccf 100644
--- a/modules/achievements.py
+++ b/modules/achievements.py
@@ -19,14 +19,12 @@ class Achievements(BaseModule):
         if not player:
             return
         
-        achievements = await self.database.get_player_achievements(player["id"])
+        # Redirect to web interface for better achievements display
+        self.send_message(channel, f"🏆 {nickname}: View your complete achievements at: http://petz.rdx4.com/player/{nickname}#achievements")
         
+        # Show quick summary in channel
+        achievements = await self.database.get_player_achievements(player["id"])
         if achievements:
-            self.send_message(channel, f"🏆 {nickname}'s Achievements:")
-            for achievement in achievements[:5]:  # Show last 5 achievements
-                self.send_message(channel, f"• {achievement['name']}: {achievement['description']}")
-            
-            if len(achievements) > 5:
-                self.send_message(channel, f"... and {len(achievements) - 5} more!")
+            self.send_message(channel, f"📊 Quick summary: {len(achievements)} achievements earned! Check the web interface for details.")
         else:
-            self.send_message(channel, f"{nickname}: No achievements yet! Keep exploring and catching pets to unlock new areas!")
\ No newline at end of file
+            self.send_message(channel, f"💡 No achievements yet! Keep exploring and catching pets to unlock new areas!")
\ No newline at end of file
diff --git a/modules/base_module.py b/modules/base_module.py
index 8a4854d..e539a1a 100644
--- a/modules/base_module.py
+++ b/modules/base_module.py
@@ -12,6 +12,15 @@ class BaseModule(ABC):
         self.database = database
         self.game_engine = game_engine
     
+    @staticmethod
+    def normalize_input(user_input):
+        """Normalize user input by converting to lowercase for case-insensitive command processing"""
+        if isinstance(user_input, str):
+            return user_input.lower()
+        elif isinstance(user_input, list):
+            return [item.lower() if isinstance(item, str) else item for item in user_input]
+        return user_input
+    
     @abstractmethod
     def get_commands(self):
         """Return list of commands this module handles"""
diff --git a/modules/battle_system.py b/modules/battle_system.py
index d50abeb..911392f 100644
--- a/modules/battle_system.py
+++ b/modules/battle_system.py
@@ -52,6 +52,12 @@ class BattleSystem(BaseModule):
             self.send_message(channel, f"{nickname}: You're already in battle! Use !attack <move> or !flee.")
             return
         
+        # Check if already in gym battle
+        gym_battle = await self.database.get_active_gym_battle(player["id"])
+        if gym_battle:
+            self.send_message(channel, f"{nickname}: You're already in a gym battle! Finish your gym battle first.")
+            return
+        
         # Get player's active pet
         pets = await self.database.get_player_pets(player["id"], active_only=True)
         if not pets:
@@ -87,7 +93,7 @@ class BattleSystem(BaseModule):
         if not player:
             return
         
-        move_name = " ".join(args).title()  # Normalize to Title Case
+        move_name = " ".join(self.normalize_input(args)).title()  # Normalize to Title Case
         result = await self.game_engine.battle_engine.execute_battle_turn(player["id"], move_name)
         
         if "error" in result:
diff --git a/modules/core_commands.py b/modules/core_commands.py
index c723d4b..ec4c497 100644
--- a/modules/core_commands.py
+++ b/modules/core_commands.py
@@ -40,5 +40,8 @@ class CoreCommands(BaseModule):
         if not player:
             return
         
+        # Show quick summary and direct to web interface for detailed stats
         self.send_message(channel, 
-            f"📊 {nickname}: Level {player['level']} | {player['experience']} XP | ${player['money']}")
\ No newline at end of file
+            f"📊 {nickname}: Level {player['level']} | {player['experience']} XP | ${player['money']}")
+        self.send_message(channel, 
+            f"🌐 View detailed statistics at: http://petz.rdx4.com/player/{nickname}#stats")
\ No newline at end of file
diff --git a/modules/exploration.py b/modules/exploration.py
index 485a292..c221cf8 100644
--- a/modules/exploration.py
+++ b/modules/exploration.py
@@ -7,7 +7,7 @@ class Exploration(BaseModule):
     """Handles exploration, travel, location, weather, and wild commands"""
     
     def get_commands(self):
-        return ["explore", "travel", "location", "where", "weather", "wild", "catch", "capture"]
+        return ["explore", "travel", "location", "where", "weather", "wild", "catch", "capture", "flee"]
     
     async def handle_command(self, channel, nickname, command, args):
         if command == "explore":
@@ -22,6 +22,8 @@ class Exploration(BaseModule):
             await self.cmd_wild(channel, nickname, args)
         elif command in ["catch", "capture"]:
             await self.cmd_catch(channel, nickname)
+        elif command == "flee":
+            await self.cmd_flee_encounter(channel, nickname)
     
     async def cmd_explore(self, channel, nickname):
         """Explore current location"""
@@ -29,6 +31,18 @@ class Exploration(BaseModule):
         if not player:
             return
         
+        # Check if player has an active encounter that must be resolved first
+        if player["id"] in self.bot.active_encounters:
+            current_encounter = self.bot.active_encounters[player["id"]]
+            self.send_message(channel, f"{nickname}: You already have an active encounter with a wild {current_encounter['species_name']}! You must choose to !battle, !catch, or !flee before exploring again.")
+            return
+        
+        # Check if player is in an active battle
+        active_battle = await self.game_engine.battle_engine.get_active_battle(player["id"])
+        if active_battle:
+            self.send_message(channel, f"{nickname}: You're currently in battle! Finish your battle before exploring.")
+            return
+        
         encounter = await self.game_engine.explore_location(player["id"])
         
         if encounter["type"] == "error":
@@ -51,7 +65,7 @@ class Exploration(BaseModule):
             
             self.send_message(channel, 
                 f"🐾 {nickname}: A wild Level {pet['level']} {pet['species_name']} ({type_str}) appeared in {encounter['location']}!")
-            self.send_message(channel, f"Choose your action: !battle to fight it, or !catch to try catching it directly!")
+            self.send_message(channel, f"Choose your action: !battle to fight it, !catch to try catching it directly, or !flee to escape!")
     
     async def cmd_travel(self, channel, nickname, args):
         """Travel to a different location"""
@@ -64,7 +78,7 @@ class Exploration(BaseModule):
             return
         
         # Handle various input formats and normalize location names
-        destination_input = " ".join(args).lower()
+        destination_input = self.normalize_input(" ".join(args))
         
         # Map common variations to exact location names
         location_mappings = {
@@ -82,7 +96,7 @@ class Exploration(BaseModule):
         destination = location_mappings.get(destination_input)
         if not destination:
             # Fall back to title case if no mapping found
-            destination = " ".join(args).title()
+            destination = " ".join(self.normalize_input(args)).title()
         
         location = await self.database.get_location_by_name(destination)
         
@@ -171,7 +185,7 @@ class Exploration(BaseModule):
         
         if args:
             # Specific location requested
-            location_name = " ".join(args).title()
+            location_name = " ".join(self.normalize_input(args)).title()
         else:
             # Default to current location
             current_location = await self.database.get_player_location(player["id"])
@@ -196,6 +210,13 @@ class Exploration(BaseModule):
         
         # Check if player is in an active battle
         active_battle = await self.game_engine.battle_engine.get_active_battle(player["id"])
+        gym_battle = await self.database.get_active_gym_battle(player["id"])
+        
+        if gym_battle:
+            # Can't catch pets during gym battles
+            self.send_message(channel, f"{nickname}: You can't catch pets during gym battles! Focus on the challenge!")
+            return
+        
         if active_battle:
             # Catching during battle
             wild_pet = active_battle["wild_pet"]
@@ -297,4 +318,36 @@ class Exploration(BaseModule):
         """Display level up information (shared with battle system)"""
         from .battle_system import BattleSystem
         battle_system = BattleSystem(self.bot, self.database, self.game_engine)
-        await battle_system.handle_level_up_display(channel, nickname, exp_result)
\ No newline at end of file
+        await battle_system.handle_level_up_display(channel, nickname, exp_result)
+    
+    async def cmd_flee_encounter(self, channel, nickname):
+        """Flee from an active encounter without battling"""
+        player = await self.require_player(channel, nickname)
+        if not player:
+            return
+        
+        # Check if player has an active encounter to flee from
+        if player["id"] not in self.bot.active_encounters:
+            self.send_message(channel, f"{nickname}: You don't have an active encounter to flee from!")
+            return
+        
+        # Check if player is in an active battle - can't flee from exploration if in battle
+        active_battle = await self.game_engine.battle_engine.get_active_battle(player["id"])
+        if active_battle:
+            self.send_message(channel, f"{nickname}: You're in battle! Use the battle system's !flee command to escape combat.")
+            return
+        
+        # Check if player is in a gym battle
+        gym_battle = await self.database.get_active_gym_battle(player["id"])
+        if gym_battle:
+            self.send_message(channel, f"{nickname}: You're in a gym battle! Use !forfeit to leave the gym challenge.")
+            return
+        
+        # Get encounter details for message
+        encounter = self.bot.active_encounters[player["id"]]
+        
+        # Remove the encounter
+        del self.bot.active_encounters[player["id"]]
+        
+        self.send_message(channel, f"💨 {nickname}: You fled from the wild {encounter['species_name']}! You can now explore again.")
+        self.send_message(channel, f"💡 Use !explore to search for another encounter!")
\ No newline at end of file
diff --git a/modules/gym_battles.py b/modules/gym_battles.py
index 57665c5..0fbd481 100644
--- a/modules/gym_battles.py
+++ b/modules/gym_battles.py
@@ -13,13 +13,13 @@ class GymBattles(BaseModule):
         if command == "gym":
             if not args:
                 await self.cmd_gym_list(channel, nickname)
-            elif args[0] == "list":
+            elif self.normalize_input(args[0]) == "list":
                 await self.cmd_gym_list_all(channel, nickname)
-            elif args[0] == "challenge":
+            elif self.normalize_input(args[0]) == "challenge":
                 await self.cmd_gym_challenge(channel, nickname, args[1:])
-            elif args[0] == "info":
+            elif self.normalize_input(args[0]) == "info":
                 await self.cmd_gym_info(channel, nickname, args[1:])
-            elif args[0] == "status":
+            elif self.normalize_input(args[0]) == "status":
                 await self.cmd_gym_status(channel, nickname)
             else:
                 await self.cmd_gym_list(channel, nickname)
@@ -66,7 +66,7 @@ class GymBattles(BaseModule):
                 f"    Status: {status} | Next difficulty: {difficulty}")
         
         self.send_message(channel, 
-            f"💡 Use '!gym challenge \"<gym name>\"' to battle!")
+            f"💡 Use '!gym challenge' to battle (gym name optional if only one gym in location)!")
     
     async def cmd_gym_list_all(self, channel, nickname):
         """List all gyms across all locations"""
@@ -97,10 +97,6 @@ class GymBattles(BaseModule):
     
     async def cmd_gym_challenge(self, channel, nickname, args):
         """Challenge a gym"""
-        if not args:
-            self.send_message(channel, f"{nickname}: Specify a gym to challenge! Example: !gym challenge \"Forest Guardian\"")
-            return
-        
         player = await self.require_player(channel, nickname)
         if not player:
             return
@@ -111,19 +107,37 @@ class GymBattles(BaseModule):
             self.send_message(channel, f"{nickname}: You are not in a valid location! Use !travel to go somewhere first.")
             return
         
-        gym_name = " ".join(args).strip('"')
+        # Get available gyms in current location
+        available_gyms = await self.database.get_gyms_in_location(location["id"])
+        if not available_gyms:
+            self.send_message(channel, f"{nickname}: No gyms found in {location['name']}! Try traveling to a different location.")
+            return
         
-        # Look for gym in player's current location (case-insensitive)
-        gym = await self.database.get_gym_by_name_in_location(gym_name, location["id"])
-        if not gym:
-            # List available gyms in current location for helpful error message
-            available_gyms = await self.database.get_gyms_in_location(location["id"])
-            if available_gyms:
+        gym = None
+        
+        if not args:
+            # No gym name provided - auto-challenge if only one gym, otherwise list options
+            if len(available_gyms) == 1:
+                gym = available_gyms[0]
+                self.send_message(channel, f"🏛️ {nickname}: Challenging the {gym['name']} gym in {location['name']}!")
+            else:
+                # Multiple gyms - show list and ask user to specify
+                gym_list = ", ".join([f'"{g["name"]}"' for g in available_gyms])
+                self.send_message(channel, f"{nickname}: Multiple gyms found in {location['name']}! Specify which gym to challenge:")
+                self.send_message(channel, f"Available gyms: {gym_list}")
+                self.send_message(channel, f"💡 Use: !gym challenge \"<gym name>\"")
+                return
+        else:
+            # Gym name provided - find specific gym
+            gym_name = " ".join(self.normalize_input(args)).strip('"')
+            
+            # Look for gym in player's current location (case-insensitive)
+            gym = await self.database.get_gym_by_name_in_location(gym_name, location["id"])
+            if not gym:
+                # List available gyms in current location for helpful error message
                 gym_list = ", ".join([f'"{g["name"]}"' for g in available_gyms])
                 self.send_message(channel, f"{nickname}: No gym named '{gym_name}' found in {location['name']}! Available gyms: {gym_list}")
-            else:
-                self.send_message(channel, f"{nickname}: No gyms found in {location['name']}! Try traveling to a different location.")
-            return
+                return
         
         # Check if player has active pets
         active_pets = await self.database.get_active_pets(player["id"])
@@ -266,7 +280,7 @@ class GymBattles(BaseModule):
         if not player:
             return
         
-        gym_name = " ".join(args).strip('"')
+        gym_name = " ".join(self.normalize_input(args)).strip('"')
         
         # First try to find gym in player's current location
         location = await self.database.get_player_location(player["id"])
@@ -311,7 +325,7 @@ class GymBattles(BaseModule):
             return
         
         # This will show a summary - for detailed view they can use !gym list
-        self.send_message(channel, f"🏆 {nickname}: Use !gym list to see all gym progress, or check your profile at: http://petz.rdx4.com/player/{nickname}")
+        self.send_message(channel, f"🏆 {nickname}: Use !gym list to see all gym progress, or check your profile at: http://petz.rdx4.com/player/{nickname}#gym-badges")
     
     async def cmd_forfeit(self, channel, nickname):
         """Forfeit the current gym battle"""
diff --git a/modules/inventory.py b/modules/inventory.py
index 1fe60ef..9994ad6 100644
--- a/modules/inventory.py
+++ b/modules/inventory.py
@@ -16,51 +16,14 @@ class Inventory(BaseModule):
             await self.cmd_use_item(channel, nickname, args)
     
     async def cmd_inventory(self, channel, nickname):
-        """Display player's inventory"""
+        """Redirect player to their web profile for inventory management"""
         player = await self.require_player(channel, nickname)
         if not player:
             return
         
-        inventory = await self.database.get_player_inventory(player["id"])
-        
-        if not inventory:
-            self.send_message(channel, f"🎒 {nickname}: Your inventory is empty! Try exploring to find items.")
-            return
-        
-        # Group items by category
-        categories = {}
-        for item in inventory:
-            category = item["category"]
-            if category not in categories:
-                categories[category] = []
-            categories[category].append(item)
-        
-        # Send inventory summary first
-        total_items = sum(item["quantity"] for item in inventory)
-        self.send_message(channel, f"🎒 {nickname}'s Inventory ({total_items} items):")
-        
-        # Display items by category
-        rarity_symbols = {
-            "common": "○",
-            "uncommon": "◇", 
-            "rare": "◆",
-            "epic": "★",
-            "legendary": "✦"
-        }
-        
-        for category, items in categories.items():
-            category_display = category.replace("_", " ").title()
-            self.send_message(channel, f"📦 {category_display}:")
-            
-            for item in items[:5]:  # Limit to 5 items per category to avoid spam
-                symbol = rarity_symbols.get(item["rarity"], "○")
-                quantity_str = f" x{item['quantity']}" if item["quantity"] > 1 else ""
-                self.send_message(channel, f"  {symbol} {item['name']}{quantity_str} - {item['description']}")
-            
-            if len(items) > 5:
-                self.send_message(channel, f"  ... and {len(items) - 5} more items")
-        
-        self.send_message(channel, f"💡 Use '!use <item name>' to use consumable items!")
+        # Redirect to web interface for better inventory management
+        self.send_message(channel, f"🎒 {nickname}: View your complete inventory at: http://petz.rdx4.com/player/{nickname}#inventory")
+        self.send_message(channel, f"💡 The web interface shows detailed item information, categories, and usage options!")
     
     async def cmd_use_item(self, channel, nickname, args):
         """Use an item from inventory"""
@@ -72,7 +35,7 @@ class Inventory(BaseModule):
         if not player:
             return
         
-        item_name = " ".join(args)
+        item_name = " ".join(self.normalize_input(args))
         result = await self.database.use_item(player["id"], item_name)
         
         if not result["success"]:
diff --git a/modules/pet_management.py b/modules/pet_management.py
index 26ffb25..911bef5 100644
--- a/modules/pet_management.py
+++ b/modules/pet_management.py
@@ -7,7 +7,7 @@ class PetManagement(BaseModule):
     """Handles team, pets, and future pet management commands"""
     
     def get_commands(self):
-        return ["team", "pets", "activate", "deactivate", "swap", "nickname"]
+        return ["team", "pets", "activate", "deactivate", "nickname"]
     
     async def handle_command(self, channel, nickname, command, args):
         if command == "team":
@@ -18,8 +18,6 @@ class PetManagement(BaseModule):
             await self.cmd_activate(channel, nickname, args)
         elif command == "deactivate":
             await self.cmd_deactivate(channel, nickname, args)
-        elif command == "swap":
-            await self.cmd_swap(channel, nickname, args)
         elif command == "nickname":
             await self.cmd_nickname(channel, nickname, args)
     
@@ -40,7 +38,7 @@ class PetManagement(BaseModule):
         
         team_info = []
         
-        # Active pets with star
+        # Active pets with star and team position
         for pet in active_pets:
             name = pet["nickname"] or pet["species_name"]
             
@@ -55,7 +53,9 @@ class PetManagement(BaseModule):
             else:
                 exp_display = f"{exp_needed} to next"
             
-            team_info.append(f"⭐{name} (Lv.{pet['level']}) - {pet['hp']}/{pet['max_hp']} HP | EXP: {exp_display}")
+            # Show team position
+            position = pet.get("team_order", "?")
+            team_info.append(f"[{position}]⭐{name} (Lv.{pet['level']}) - {pet['hp']}/{pet['max_hp']} HP | EXP: {exp_display}")
         
         # Inactive pets  
         for pet in inactive_pets[:5]:  # Show max 5 inactive
@@ -66,6 +66,7 @@ class PetManagement(BaseModule):
             team_info.append(f"... and {len(inactive_pets) - 5} more in storage")
         
         self.send_message(channel, f"🐾 {nickname}'s team: " + " | ".join(team_info))
+        self.send_message(channel, f"🌐 View detailed pet collection at: http://petz.rdx4.com/player/{nickname}#pets")
     
     async def cmd_pets(self, channel, nickname):
         """Show link to pet collection web page"""
@@ -74,7 +75,7 @@ class PetManagement(BaseModule):
             return
         
         # Send URL to player's profile page instead of PM spam
-        self.send_message(channel, f"{nickname}: View your complete pet collection at: http://petz.rdx4.com/player/{nickname}")
+        self.send_message(channel, f"{nickname}: View your complete pet collection at: http://petz.rdx4.com/player/{nickname}#pets")
     
     async def cmd_activate(self, channel, nickname, args):
         """Activate a pet for battle (PM only)"""
@@ -88,13 +89,14 @@ class PetManagement(BaseModule):
         if not player:
             return
         
-        pet_name = " ".join(args)
+        pet_name = " ".join(self.normalize_input(args))
         result = await self.database.activate_pet(player["id"], pet_name)
         
         if result["success"]:
             pet = result["pet"]
             display_name = pet["nickname"] or pet["species_name"]
-            self.send_pm(nickname, f"✅ {display_name} is now active for battle!")
+            position = result.get("team_position", "?")
+            self.send_pm(nickname, f"✅ {display_name} is now active for battle! Team position: {position}")
             self.send_message(channel, f"{nickname}: Pet activated successfully!")
         else:
             self.send_pm(nickname, f"❌ {result['error']}")
@@ -112,7 +114,7 @@ class PetManagement(BaseModule):
         if not player:
             return
         
-        pet_name = " ".join(args)
+        pet_name = " ".join(self.normalize_input(args))
         result = await self.database.deactivate_pet(player["id"], pet_name)
         
         if result["success"]:
@@ -124,44 +126,6 @@ class PetManagement(BaseModule):
             self.send_pm(nickname, f"❌ {result['error']}")
             self.send_message(channel, f"{nickname}: Pet deactivation failed - check PM for details!")
     
-    async def cmd_swap(self, channel, nickname, args):
-        """Swap active/storage status of two pets (PM only)"""
-        # Redirect to PM for privacy
-        if len(args) < 2:
-            self.send_pm(nickname, "Usage: !swap <pet1> <pet2>")
-            self.send_pm(nickname, "Example: !swap Flamey Aqua")
-            self.send_message(channel, f"{nickname}: Pet swap instructions sent via PM!")
-            return
-        
-        player = await self.require_player(channel, nickname)
-        if not player:
-            return
-        
-        # Handle multi-word pet names by splitting on first space vs last space  
-        if len(args) == 2:
-            pet1_name, pet2_name = args
-        else:
-            # For more complex parsing, assume equal split
-            mid_point = len(args) // 2
-            pet1_name = " ".join(args[:mid_point])
-            pet2_name = " ".join(args[mid_point:])
-        
-        result = await self.database.swap_pets(player["id"], pet1_name, pet2_name)
-        
-        if result["success"]:
-            pet1 = result["pet1"]
-            pet2 = result["pet2"]
-            pet1_display = pet1["nickname"] or pet1["species_name"]
-            pet2_display = pet2["nickname"] or pet2["species_name"]
-            
-            self.send_pm(nickname, f"🔄 Swap complete!")
-            self.send_pm(nickname, f"  • {pet1_display} → {result['pet1_now']}")
-            self.send_pm(nickname, f"  • {pet2_display} → {result['pet2_now']}")
-            self.send_message(channel, f"{nickname}: Pet swap completed!")
-        else:
-            self.send_pm(nickname, f"❌ {result['error']}")
-            self.send_message(channel, f"{nickname}: Pet swap failed - check PM for details!")
-    
     async def cmd_nickname(self, channel, nickname, args):
         """Set a nickname for a pet"""
         if len(args) < 2:
@@ -174,7 +138,7 @@ class PetManagement(BaseModule):
             return
         
         # Split args into pet identifier and new nickname
-        pet_identifier = args[0]
+        pet_identifier = self.normalize_input(args[0])
         new_nickname = " ".join(args[1:])
         
         result = await self.database.set_pet_nickname(player["id"], pet_identifier, new_nickname)
diff --git a/run_bot_debug.py b/run_bot_debug.py
index 5e79860..03d9982 100644
--- a/run_bot_debug.py
+++ b/run_bot_debug.py
@@ -62,7 +62,7 @@ class PetBotDebug:
         print("✅ Background validation started")
         
         print("🔄 Starting web server...")
-        self.web_server = PetBotWebServer(self.database, port=8080)
+        self.web_server = PetBotWebServer(self.database, port=8080, bot=self)
         self.web_server.start_in_thread()
         print("✅ Web server started")
         
@@ -303,12 +303,14 @@ class PetBotDebug:
                 self.handle_command(channel, nickname, message)
     
     def handle_command(self, channel, nickname, message):
+        from modules.base_module import BaseModule
+        
         command_parts = message[1:].split()
         if not command_parts:
             return
         
-        command = command_parts[0].lower()
-        args = command_parts[1:]
+        command = BaseModule.normalize_input(command_parts[0])
+        args = BaseModule.normalize_input(command_parts[1:])
         
         try:
             if command in self.command_map:
diff --git a/src/database.py b/src/database.py
index 1b89401..52eb5bd 100644
--- a/src/database.py
+++ b/src/database.py
@@ -120,6 +120,46 @@ class Database:
             except:
                 pass  # Column already exists
             
+            # Add team_order column if it doesn't exist
+            try:
+                await db.execute("ALTER TABLE pets ADD COLUMN team_order INTEGER DEFAULT NULL")
+                await db.commit()
+                print("Added team_order column to pets table")
+            except:
+                pass  # Column already exists
+            
+            # Migrate existing active pets to have team_order values
+            try:
+                # Find active pets without team_order
+                cursor = await db.execute("""
+                    SELECT id, player_id FROM pets 
+                    WHERE is_active = TRUE AND team_order IS NULL
+                    ORDER BY player_id, id
+                """)
+                pets_to_migrate = await cursor.fetchall()
+                
+                if pets_to_migrate:
+                    print(f"Migrating {len(pets_to_migrate)} active pets to have team_order values...")
+                    
+                    # Group pets by player
+                    from collections import defaultdict
+                    pets_by_player = defaultdict(list)
+                    for pet in pets_to_migrate:
+                        pets_by_player[pet[1]].append(pet[0])
+                    
+                    # Assign team_order values for each player
+                    for player_id, pet_ids in pets_by_player.items():
+                        for i, pet_id in enumerate(pet_ids[:6]):  # Max 6 pets per team
+                            await db.execute("""
+                                UPDATE pets SET team_order = ? WHERE id = ?
+                            """, (i + 1, pet_id))
+                    
+                    await db.commit()
+                    print("Migration completed successfully")
+            except Exception as e:
+                print(f"Migration warning: {e}")
+                pass  # Don't fail if migration has issues
+            
             await db.execute("""
                 CREATE TABLE IF NOT EXISTS location_spawns (
                     id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -408,6 +448,9 @@ class Database:
             if active_only:
                 query += " AND p.is_active = TRUE"
             
+            # Order by team position for active pets, then by id for storage pets
+            query += " ORDER BY CASE WHEN p.is_active THEN COALESCE(p.team_order, 999) ELSE 999 END ASC, p.id ASC"
+            
             cursor = await db.execute(query, params)
             rows = await cursor.fetchall()
             return [dict(row) for row in rows]
@@ -638,11 +681,16 @@ class Database:
             if not pet:
                 return {"success": False, "error": f"No inactive pet found named '{pet_identifier}'"}
             
-            # Activate the pet
-            await db.execute("UPDATE pets SET is_active = TRUE WHERE id = ?", (pet["id"],))
+            # Get next available team slot
+            next_slot = await self.get_next_available_team_slot(player_id)
+            if next_slot is None:
+                return {"success": False, "error": "Team is full (maximum 6 pets)"}
+            
+            # Activate the pet and assign team position
+            await db.execute("UPDATE pets SET is_active = TRUE, team_order = ? WHERE id = ?", (next_slot, pet["id"]))
             await db.commit()
             
-            return {"success": True, "pet": dict(pet)}
+            return {"success": True, "pet": dict(pet), "team_position": next_slot}
     
     async def deactivate_pet(self, player_id: int, pet_identifier: str) -> Dict:
         """Deactivate a pet by name or species name. Returns result dict."""
@@ -670,58 +718,122 @@ class Database:
             if active_count["count"] <= 1:
                 return {"success": False, "error": "You must have at least one active pet!"}
             
-            # Deactivate the pet
-            await db.execute("UPDATE pets SET is_active = FALSE WHERE id = ?", (pet["id"],))
+            # Deactivate the pet and clear team order
+            await db.execute("UPDATE pets SET is_active = FALSE, team_order = NULL WHERE id = ?", (pet["id"],))
             await db.commit()
             
             return {"success": True, "pet": dict(pet)}
     
-    async def swap_pets(self, player_id: int, pet1_identifier: str, pet2_identifier: str) -> Dict:
-        """Swap the active status of two pets. Returns result dict."""
+    # Team Order Methods
+    async def get_next_available_team_slot(self, player_id: int) -> int:
+        """Get the next available team slot (1-6)"""
         async with aiosqlite.connect(self.db_path) as db:
-            db.row_factory = aiosqlite.Row
-            
-            # Find both pets
             cursor = await db.execute("""
-                SELECT p.*, ps.name as species_name
-                FROM pets p
-                JOIN pet_species ps ON p.species_id = ps.id
-                WHERE p.player_id = ? 
-                AND (p.nickname = ? OR ps.name = ?)
-                LIMIT 1
-            """, (player_id, pet1_identifier, pet1_identifier))
-            pet1 = await cursor.fetchone()
+                SELECT team_order FROM pets 
+                WHERE player_id = ? AND is_active = TRUE AND team_order IS NOT NULL
+                ORDER BY team_order ASC
+            """, (player_id,))
+            used_slots = [row[0] for row in await cursor.fetchall()]
             
+            # Find first available slot (1-6)
+            for slot in range(1, 7):
+                if slot not in used_slots:
+                    return slot
+            return None  # Team is full
+    
+    async def set_pet_team_order(self, player_id: int, pet_id: int, position: int) -> Dict:
+        """Set a pet's team order position (1-6)"""
+        if position < 1 or position > 6:
+            return {"success": False, "error": "Team position must be between 1-6"}
+            
+        async with aiosqlite.connect(self.db_path) as db:
+            # Check if pet belongs to player
+            cursor = await db.execute("SELECT * FROM pets WHERE id = ? AND player_id = ?", (pet_id, player_id))
+            pet = await cursor.fetchone()
+            if not pet:
+                return {"success": False, "error": "Pet not found"}
+            
+            # Check if position is already taken
             cursor = await db.execute("""
-                SELECT p.*, ps.name as species_name
-                FROM pets p
-                JOIN pet_species ps ON p.species_id = ps.id
-                WHERE p.player_id = ? 
-                AND (p.nickname = ? OR ps.name = ?)
-                LIMIT 1
-            """, (player_id, pet2_identifier, pet2_identifier))
-            pet2 = await cursor.fetchone()
+                SELECT id FROM pets 
+                WHERE player_id = ? AND team_order = ? AND is_active = TRUE AND id != ?
+            """, (player_id, position, pet_id))
+            existing_pet = await cursor.fetchone()
             
-            if not pet1:
-                return {"success": False, "error": f"Pet '{pet1_identifier}' not found"}
-            if not pet2:
-                return {"success": False, "error": f"Pet '{pet2_identifier}' not found"}
+            if existing_pet:
+                return {"success": False, "error": f"Position {position} is already taken"}
             
-            if pet1["id"] == pet2["id"]:
-                return {"success": False, "error": "Cannot swap a pet with itself"}
+            # Update pet's team order and make it active
+            await db.execute("""
+                UPDATE pets SET team_order = ?, is_active = TRUE 
+                WHERE id = ? AND player_id = ?
+            """, (position, pet_id, player_id))
             
-            # Swap their active status
-            await db.execute("UPDATE pets SET is_active = ? WHERE id = ?", (not pet1["is_active"], pet1["id"]))
-            await db.execute("UPDATE pets SET is_active = ? WHERE id = ?", (not pet2["is_active"], pet2["id"]))
             await db.commit()
+            return {"success": True, "position": position}
+    
+    async def reorder_team_positions(self, player_id: int, new_positions: List[Dict]) -> Dict:
+        """Reorder team positions based on new arrangement"""
+        async with aiosqlite.connect(self.db_path) as db:
+            try:
+                # Validate all positions are 1-6 and no duplicates
+                positions = [pos["position"] for pos in new_positions]
+                if len(set(positions)) != len(positions):
+                    return {"success": False, "error": "Duplicate positions detected"}
+                
+                for pos_data in new_positions:
+                    position = pos_data["position"]
+                    pet_id = pos_data["pet_id"]
+                    
+                    if position < 1 or position > 6:
+                        return {"success": False, "error": f"Invalid position {position}"}
+                    
+                    # Verify pet belongs to player
+                    cursor = await db.execute("SELECT id FROM pets WHERE id = ? AND player_id = ?", (pet_id, player_id))
+                    if not await cursor.fetchone():
+                        return {"success": False, "error": f"Pet {pet_id} not found"}
+                
+                # Clear all team orders first
+                await db.execute("UPDATE pets SET team_order = NULL WHERE player_id = ?", (player_id,))
+                
+                # Set new positions
+                for pos_data in new_positions:
+                    await db.execute("""
+                        UPDATE pets SET team_order = ?, is_active = TRUE 
+                        WHERE id = ? AND player_id = ?
+                    """, (pos_data["position"], pos_data["pet_id"], player_id))
+                
+                await db.commit()
+                return {"success": True, "message": "Team order updated successfully"}
+                
+            except Exception as e:
+                await db.rollback()
+                return {"success": False, "error": str(e)}
+    
+    async def remove_from_team_position(self, player_id: int, pet_id: int) -> Dict:
+        """Remove a pet from team (set to inactive and clear team_order)"""
+        async with aiosqlite.connect(self.db_path) as db:
+            # Check if pet belongs to player
+            cursor = await db.execute("SELECT * FROM pets WHERE id = ? AND player_id = ?", (pet_id, player_id))
+            pet = await cursor.fetchone()
+            if not pet:
+                return {"success": False, "error": "Pet not found"}
             
-            return {
-                "success": True, 
-                "pet1": dict(pet1), 
-                "pet2": dict(pet2),
-                "pet1_now": "active" if not pet1["is_active"] else "storage",
-                "pet2_now": "active" if not pet2["is_active"] else "storage"
-            }
+            # Check if this is the only active pet
+            cursor = await db.execute("SELECT COUNT(*) as count FROM pets WHERE player_id = ? AND is_active = TRUE", (player_id,))
+            active_count = await cursor.fetchone()
+            
+            if active_count["count"] <= 1:
+                return {"success": False, "error": "Cannot deactivate your only active pet"}
+            
+            # Remove from team
+            await db.execute("""
+                UPDATE pets SET is_active = FALSE, team_order = NULL 
+                WHERE id = ? AND player_id = ?
+            """, (pet_id, player_id))
+            
+            await db.commit()
+            return {"success": True, "message": "Pet removed from team"}
     
     # Item and Inventory Methods
     async def add_item_to_inventory(self, player_id: int, item_name: str, quantity: int = 1) -> bool:
@@ -873,7 +985,7 @@ class Database:
                 FROM pets p
                 JOIN pet_species ps ON p.species_id = ps.id
                 WHERE p.player_id = ? AND p.is_active = 1
-                ORDER BY p.id ASC
+                ORDER BY p.team_order ASC, p.id ASC
             """, (player_id,))
             rows = await cursor.fetchall()
             return [dict(row) for row in rows]
@@ -1601,12 +1713,18 @@ class Database:
                 # Begin transaction
                 await db.execute("BEGIN TRANSACTION")
                 
-                # Update pet active status based on new team
-                for pet_id, is_active in team_changes.items():
-                    await db.execute("""
-                        UPDATE pets SET is_active = ? 
-                        WHERE id = ? AND player_id = ?
-                    """, (is_active, int(pet_id), player_id))
+                # Update pet active status and team_order based on new team
+                for pet_id, position in team_changes.items():
+                    if position:  # If position is a number (1-6), pet is active
+                        await db.execute("""
+                            UPDATE pets SET is_active = TRUE, team_order = ? 
+                            WHERE id = ? AND player_id = ?
+                        """, (position, int(pet_id), player_id))
+                    else:  # If position is False, pet is inactive
+                        await db.execute("""
+                            UPDATE pets SET is_active = FALSE, team_order = NULL 
+                            WHERE id = ? AND player_id = ?
+                        """, (int(pet_id), player_id))
                 
                 # Mark any pending change as verified
                 await db.execute("""
@@ -1713,18 +1831,28 @@ class Database:
             
             # Get current pet states
             cursor = await db.execute("""
-                SELECT id, is_active FROM pets WHERE player_id = ?
+                SELECT id, is_active, team_order FROM pets WHERE player_id = ?
             """, (player_id,))
-            current_pets = {str(row["id"]): bool(row["is_active"]) for row in await cursor.fetchall()}
+            current_pets = {str(row["id"]): row["team_order"] if row["is_active"] else False for row in await cursor.fetchall()}
             
             # Apply proposed changes to current state
             new_state = current_pets.copy()
-            for pet_id, new_active_state in proposed_changes.items():
+            for pet_id, new_position in proposed_changes.items():
                 if pet_id in new_state:
-                    new_state[pet_id] = new_active_state
+                    new_state[pet_id] = new_position
             
-            # Count active pets in new state
-            active_count = sum(1 for is_active in new_state.values() if is_active)
+            # Count active pets and validate positions
+            active_positions = [pos for pos in new_state.values() if pos]
+            active_count = len(active_positions)
+            
+            # Check for valid positions (1-6)
+            for pos in active_positions:
+                if not isinstance(pos, int) or pos < 1 or pos > 6:
+                    return {"valid": False, "error": f"Invalid team position: {pos}"}
+            
+            # Check for duplicate positions
+            if len(active_positions) != len(set(active_positions)):
+                return {"valid": False, "error": "Duplicate team positions detected"}
             
             # Validate constraints
             if active_count < 1:
diff --git a/src/game_engine.py b/src/game_engine.py
index 59af9af..1906fd0 100644
--- a/src/game_engine.py
+++ b/src/game_engine.py
@@ -196,11 +196,11 @@ class GameEngine:
             
             cursor = await db.execute("""
                 INSERT INTO pets (player_id, species_id, level, experience, hp, max_hp, 
-                                 attack, defense, speed, is_active)
-                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+                                 attack, defense, speed, is_active, team_order)
+                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
             """, (player_id, species["id"], pet_data["level"], 0, 
                   pet_data["hp"], pet_data["hp"], pet_data["attack"], 
-                  pet_data["defense"], pet_data["speed"], True))
+                  pet_data["defense"], pet_data["speed"], True, 1))
             
             await db.commit()
             
diff --git a/webserver.py b/webserver.py
index 1d83c2a..709bd1f 100644
--- a/webserver.py
+++ b/webserver.py
@@ -25,6 +25,529 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
         """Get database instance from server"""
         return self.server.database
     
+    @property
+    def bot(self):
+        """Get bot instance from server"""
+        return getattr(self.server, 'bot', None)
+    
+    def send_json_response(self, data, status_code=200):
+        """Send a JSON response"""
+        import json
+        self.send_response(status_code)
+        self.send_header('Content-type', 'application/json')
+        self.end_headers()
+        self.wfile.write(json.dumps(data).encode())
+    
+    def get_unified_css(self):
+        """Return unified CSS theme for all pages"""
+        return """
+        :root {
+            --bg-primary: #0f0f23;
+            --bg-secondary: #1e1e3f;
+            --bg-tertiary: #2a2a4a;
+            --text-primary: #cccccc;
+            --text-secondary: #aaaaaa;
+            --text-accent: #66ff66;
+            --accent-blue: #4dabf7;
+            --accent-purple: #845ec2;
+            --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --gradient-secondary: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+            --border-color: #444466;
+            --hover-color: #3a3a5a;
+            --shadow-color: rgba(0, 0, 0, 0.3);
+            --success-color: #51cf66;
+            --warning-color: #ffd43b;
+            --error-color: #ff6b6b;
+        }
+        
+        * {
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.6;
+            min-height: 100vh;
+        }
+        
+        .main-container {
+            padding: 20px;
+            min-height: calc(100vh - 80px);
+        }
+        
+        /* Navigation Bar */
+        .navbar {
+            background: var(--gradient-primary);
+            padding: 15px 20px;
+            box-shadow: 0 2px 10px var(--shadow-color);
+            margin-bottom: 0;
+        }
+        
+        .nav-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        
+        .nav-brand {
+            font-size: 1.5em;
+            font-weight: bold;
+            color: white;
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .nav-links {
+            display: flex;
+            gap: 20px;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: white;
+            text-decoration: none;
+            padding: 8px 16px;
+            border-radius: 20px;
+            transition: all 0.3s ease;
+            font-weight: 500;
+        }
+        
+        .nav-link:hover {
+            background: rgba(255, 255, 255, 0.2);
+            transform: translateY(-1px);
+        }
+        
+        .nav-link.active {
+            background: rgba(255, 255, 255, 0.3);
+        }
+        
+        /* Dropdown Navigation */
+        .nav-dropdown {
+            position: relative;
+            display: inline-block;
+        }
+        
+        .dropdown-arrow {
+            font-size: 0.8em;
+            margin-left: 5px;
+            transition: transform 0.3s ease;
+        }
+        
+        .nav-dropdown:hover .dropdown-arrow {
+            transform: rotate(180deg);
+        }
+        
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            background: var(--bg-secondary);
+            min-width: 180px;
+            box-shadow: 0 8px 16px var(--shadow-color);
+            border-radius: 8px;
+            z-index: 1000;
+            border: 1px solid var(--border-color);
+            overflow: hidden;
+            margin-top: 5px;
+        }
+        
+        .nav-dropdown:hover .dropdown-content {
+            display: block;
+            animation: fadeIn 0.3s ease;
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(-10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .dropdown-item {
+            color: var(--text-primary);
+            padding: 12px 16px;
+            text-decoration: none;
+            display: block;
+            transition: background-color 0.3s ease;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .dropdown-item:last-child {
+            border-bottom: none;
+        }
+        
+        .dropdown-item:hover {
+            background: var(--bg-tertiary);
+            color: var(--text-accent);
+        }
+        
+        @media (max-width: 768px) {
+            .nav-content {
+                flex-direction: column;
+                gap: 15px;
+            }
+            
+            .nav-links {
+                flex-wrap: wrap;
+                justify-content: center;
+                gap: 10px;
+            }
+            
+            .dropdown-content {
+                position: static;
+                display: none;
+                width: 100%;
+                box-shadow: none;
+                border: none;
+                border-radius: 0;
+                background: var(--bg-tertiary);
+                margin-top: 0;
+            }
+            
+            .nav-dropdown:hover .dropdown-content {
+                display: block;
+            }
+        }
+        
+        /* Header styling */
+        .header {
+            text-align: center;
+            background: var(--gradient-primary);
+            color: white;
+            padding: 40px 20px;
+            border-radius: 15px;
+            margin-bottom: 30px;
+            box-shadow: 0 5px 20px var(--shadow-color);
+        }
+        
+        .header h1 {
+            margin: 0 0 10px 0;
+            font-size: 2.5em;
+            font-weight: bold;
+        }
+        
+        .header p {
+            margin: 0;
+            font-size: 1.1em;
+            opacity: 0.9;
+        }
+        
+        /* Card styling */
+        .card {
+            background: var(--bg-secondary);
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 4px 15px var(--shadow-color);
+            border: 1px solid var(--border-color);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        
+        .card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 25px var(--shadow-color);
+        }
+        
+        .card h2 {
+            margin-top: 0;
+            color: var(--text-accent);
+            border-bottom: 2px solid var(--text-accent);
+            padding-bottom: 10px;
+        }
+        
+        .card h3 {
+            color: var(--accent-blue);
+            margin-top: 25px;
+        }
+        
+        /* Grid layouts */
+        .grid {
+            display: grid;
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+        
+        .grid-2 { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
+        .grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
+        .grid-4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
+        
+        /* Buttons */
+        .btn {
+            display: inline-block;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 25px;
+            text-decoration: none;
+            font-weight: 500;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin: 5px;
+        }
+        
+        .btn-primary {
+            background: var(--gradient-primary);
+            color: white;
+        }
+        
+        .btn-secondary {
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
+        }
+        
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px var(--shadow-color);
+        }
+        
+        /* Badges and tags */
+        .badge {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 15px;
+            font-size: 0.85em;
+            font-weight: 500;
+            margin: 2px;
+        }
+        
+        .badge-primary { background: var(--accent-blue); color: white; }
+        .badge-secondary { background: var(--bg-tertiary); color: var(--text-primary); }
+        .badge-success { background: var(--success-color); color: white; }
+        .badge-warning { background: var(--warning-color); color: #333; }
+        .badge-error { background: var(--error-color); color: white; }
+        
+        /* Tables */
+        .table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 20px 0;
+            background: var(--bg-secondary);
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        
+        .table th, .table td {
+            padding: 12px 15px;
+            text-align: left;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .table th {
+            background: var(--bg-tertiary);
+            font-weight: bold;
+            color: var(--text-accent);
+        }
+        
+        .table tr:hover {
+            background: var(--bg-tertiary);
+        }
+        
+        /* Loading and status messages */
+        .loading {
+            text-align: center;
+            padding: 40px;
+            color: var(--text-secondary);
+        }
+        
+        .error-message {
+            background: var(--error-color);
+            color: white;
+            padding: 15px;
+            border-radius: 10px;
+            margin: 20px 0;
+        }
+        
+        .success-message {
+            background: var(--success-color);
+            color: white;
+            padding: 15px;
+            border-radius: 10px;
+            margin: 20px 0;
+        }
+        
+        /* Pet-specific styles for petdex */
+        .pets-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
+        }
+        
+        .pet-card {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 4px 15px var(--shadow-color);
+            border: 1px solid var(--border-color);
+            transition: transform 0.3s ease;
+        }
+        
+        .pet-card:hover {
+            transform: translateY(-3px);
+        }
+        
+        .pet-header {
+            background: var(--bg-tertiary);
+            padding: 15px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .pet-header h3 {
+            margin: 0;
+            font-size: 1.3em;
+        }
+        
+        .type-badge {
+            background: var(--gradient-primary);
+            color: white;
+            padding: 4px 12px;
+            border-radius: 15px;
+            font-size: 0.85em;
+            font-weight: 500;
+        }
+        
+        .pet-stats {
+            padding: 15px 20px;
+            background: var(--bg-secondary);
+        }
+        
+        .stat-row {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 8px;
+            font-size: 0.9em;
+        }
+        
+        .total-stats {
+            text-align: center;
+            margin-top: 12px;
+            padding-top: 12px;
+            border-top: 1px solid var(--border-color);
+            font-weight: 600;
+            color: var(--text-accent);
+        }
+        
+        .pet-info {
+            padding: 15px 20px;
+            background: var(--bg-tertiary);
+            font-size: 0.9em;
+            line-height: 1.5;
+        }
+        
+        .rarity-section {
+            margin-bottom: 40px;
+        }
+        
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .main-container {
+                padding: 10px;
+            }
+            
+            .header h1 {
+                font-size: 2em;
+            }
+            
+            .card {
+                padding: 15px;
+            }
+            
+            .grid-2, .grid-3, .grid-4 {
+                grid-template-columns: 1fr;
+            }
+        }
+        """
+    
+    def get_navigation_bar(self, current_page=""):
+        """Return unified navigation bar HTML with dropdown menus"""
+        
+        # Define navigation structure with dropdowns
+        nav_structure = [
+            ("", "🏠 Home", []),
+            ("players", "👥 Players", [
+                ("leaderboard", "🏆 Leaderboard"),
+                ("players", "📊 Statistics")
+            ]),
+            ("locations", "🗺️ Locations", [
+                ("locations", "🌤️ Weather"),
+                ("locations", "🎯 Spawns"),
+                ("locations", "🏛️ Gyms")
+            ]),
+            ("petdex", "📚 Petdex", [
+                ("petdex", "🔷 by Type"),
+                ("petdex", "⭐ by Rarity"),
+                ("petdex", "🔍 Search")
+            ]),
+            ("help", "📖 Help", [
+                ("help", "⚡ Commands"),
+                ("help", "📖 Web Guide"),
+                ("help", "❓ FAQ")
+            ])
+        ]
+        
+        nav_links = ""
+        for page_path, page_name, subpages in nav_structure:
+            active_class = " active" if current_page == page_path else ""
+            href = f"/{page_path}" if page_path else "/"
+            
+            if subpages:
+                # Create dropdown menu
+                dropdown_items = ""
+                for sub_path, sub_name in subpages:
+                    sub_href = f"/{sub_path}" if sub_path else "/"
+                    dropdown_items += f'<a href="{sub_href}" class="dropdown-item">{sub_name}</a>'
+                
+                nav_links += f'''
+                <div class="nav-dropdown">
+                    <a href="{href}" class="nav-link{active_class}">{page_name} <span class="dropdown-arrow">▼</span></a>
+                    <div class="dropdown-content">
+                        {dropdown_items}
+                    </div>
+                </div>'''
+            else:
+                # Regular nav link
+                nav_links += f'<a href="{href}" class="nav-link{active_class}">{page_name}</a>'
+        
+        return f"""
+        <nav class="navbar">
+            <div class="nav-content">
+                <a href="/" class="nav-brand">🐾 PetBot</a>
+                <div class="nav-links">
+                    {nav_links}
+                </div>
+            </div>
+        </nav>
+        """
+    
+    def get_page_template(self, title, content, current_page=""):
+        """Return complete page HTML with unified theme"""
+        return f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{title} - PetBot</title>
+    <style>{self.get_unified_css()}</style>
+</head>
+<body>
+    {self.get_navigation_bar(current_page)}
+    <div class="main-container">
+        {content}
+    </div>
+</body>
+</html>"""
+    
     def do_GET(self):
         """Handle GET requests"""
         parsed_path = urlparse(self.path)
@@ -68,139 +591,501 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
     
     def serve_index(self):
         """Serve the main index page"""
-        html = """<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PetBot Game Hub</title>
-    <style>
-        :root {
-            --bg-primary: #0f0f23;
-            --bg-secondary: #1e1e3f;
-            --text-primary: #cccccc;
-            --text-accent: #66ff66;
-            --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        }
+        content = """
+        <div class="header">
+            <h1>🐾 PetBot Game Hub</h1>
+            <p>Welcome to the PetBot web interface!</p>
+            <p><em>Connect to irc.libera.chat #petz to play</em></p>
+        </div>
         
-        body {
-            font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.6;
-            min-height: 100vh;
-        }
+        <div class="grid grid-3">
+            <div class="card">
+                <h3>📚 Command Help</h3>
+                <p>Complete reference for all bot commands, battle mechanics, and game features</p>
+                <a href="/help" class="btn btn-primary">View Help</a>
+            </div>
+            
+            <div class="card">
+                <h3>👥 Player List</h3>
+                <p>View all registered players and their basic stats</p>
+                <a href="/players" class="btn btn-primary">Browse Players</a>
+            </div>
+            
+            <div class="card">
+                <h3>🏆 Leaderboard</h3>
+                <p>Top players by level, pets caught, and achievements earned</p>
+                <a href="/leaderboard" class="btn btn-primary">View Rankings</a>
+            </div>
+            
+            <div class="card">
+                <h3>🗺️ Locations</h3>
+                <p>Explore all game locations and see what pets can be found where</p>
+                <a href="/locations" class="btn btn-primary">Explore World</a>
+            </div>
+            
+            <div class="card">
+                <h3>📖 Petdex</h3>
+                <p>Complete encyclopedia of all available pets with stats, types, and evolution info</p>
+                <a href="/petdex" class="btn btn-primary">Browse Petdex</a>
+            </div>
+            
+            <div class="card">
+                <h3>🤖 Bot Status</h3>
+                <p><span class="badge badge-success">Online</span> and ready for commands!</p>
+                <p>Use <code>!help</code> in #petz for quick command reference</p>
+            </div>
+        </div>
+        """
         
-        .header {
-            text-align: center;
-            background: var(--gradient-primary);
-            color: white;
-            padding: 40px;
-            border-radius: 20px;
-            margin-bottom: 40px;
-        }
-        
-        .header h1 {
-            margin: 0;
-            font-size: 3em;
-            font-weight: 700;
-        }
-        
-        .nav-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 20px;
-            margin-bottom: 40px;
-        }
-        
-        .nav-card {
-            background: var(--bg-secondary);
-            padding: 30px;
-            border-radius: 15px;
-            text-align: center;
-            text-decoration: none;
-            color: var(--text-primary);
-            transition: transform 0.3s ease;
-        }
-        
-        .nav-card:hover {
-            transform: translateY(-5px);
-            color: var(--text-accent);
-        }
-        
-        .nav-card h3 {
-            margin: 0 0 15px 0;
-            color: var(--text-accent);
-            font-size: 1.5em;
-        }
-        
-        .status {
-            background: var(--bg-secondary);
-            padding: 20px;
-            border-radius: 15px;
-            text-align: center;
-        }
-    </style>
-</head>
-<body>
-    <div class="header">
-        <h1>🐾 PetBot Game Hub</h1>
-        <p>Welcome to the PetBot web interface!</p>
-        <p><em>Connect to irc.libera.chat #petz to play</em></p>
-    </div>
-    
-    <div class="nav-grid">
-        <a href="/help" class="nav-card">
-            <h3>📚 Command Help</h3>
-            <p>Complete reference for all bot commands, battle mechanics, and game features</p>
-        </a>
-        
-        <a href="/players" class="nav-card">
-            <h3>👥 Player List</h3>
-            <p>View all registered players and their basic stats</p>
-        </a>
-        
-        <a href="/leaderboard" class="nav-card">
-            <h3>🏆 Leaderboard</h3>
-            <p>Top players by level, pets caught, and achievements earned</p>
-        </a>
-        
-        <a href="/locations" class="nav-card">
-            <h3>🗺️ Locations</h3>
-            <p>Explore all game locations and see what pets can be found where</p>
-        </a>
-        
-        <a href="/petdex" class="nav-card">
-            <h3>📖 Petdex</h3>
-            <p>Complete encyclopedia of all available pets with stats, types, and evolution info</p>
-        </a>
-    </div>
-    
-    <div class="status">
-        <p><strong>🤖 Bot Status:</strong> Online and ready for commands!</p>
-        <p>Use <code>!help</code> in #petz for quick command reference</p>
-    </div>
-</body>
-</html>"""
+        html = self.get_page_template("PetBot Game Hub", content, "")
         self.send_response(200)
         self.send_header('Content-type', 'text/html')
         self.end_headers()
         self.wfile.write(html.encode())
     
     def serve_help(self):
-        """Serve the help page"""
-        try:
-            with open('help.html', 'r') as f:
-                content = f.read()
-            self.send_response(200)
-            self.send_header('Content-type', 'text/html')
-            self.end_headers()
-            self.wfile.write(content.encode())
-        except FileNotFoundError:
-            self.send_error(404, "Help file not found")
+        """Serve the help page using unified template"""
+        content = """
+        <div class="header">
+            <h1>📚 PetBot Commands</h1>
+            <p>Complete guide to Pokemon-style pet collecting in IRC</p>
+        </div>
+
+        <div class="section">
+            <div class="section-header">🚀 Getting Started</div>
+            <div class="section-content">
+                <div class="command-grid">
+                <div class="command">
+                    <div class="command-name">!start</div>
+                    <div class="command-desc">Begin your pet collecting journey! Creates your trainer account and gives you your first starter pet.</div>
+                    <div class="command-example">Example: !start</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!help</div>
+                    <div class="command-desc">Get a link to this comprehensive command reference page.</div>
+                    <div class="command-example">Example: !help</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!stats</div>
+                    <div class="command-desc">View your basic trainer information including level, experience, and money.</div>
+                    <div class="command-example">Example: !stats</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="section">
+            <div class="section-header">🌍 Exploration & Travel</div>
+            <div class="section-content">
+                <div class="command-grid">
+                <div class="command">
+                    <div class="command-name">!explore</div>
+                    <div class="command-desc">Search your current location for wild pets or items. You might find pets to battle/catch or discover useful items!</div>
+                    <div class="command-example">Example: !explore</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!travel &lt;location&gt;</div>
+                    <div class="command-desc">Move to a different location. Each area has unique pets and gyms. Some locations require achievements to unlock.</div>
+                    <div class="command-example">Example: !travel whispering woods</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!weather</div>
+                    <div class="command-desc">Check the current weather effects in your location. Weather affects which pet types spawn more frequently.</div>
+                    <div class="command-example">Example: !weather</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!where / !location</div>
+                    <div class="command-desc">See which location you're currently in and get information about the area.</div>
+                    <div class="command-example">Example: !where</div>
+                </div>
+            </div>
+            
+            <div class="info-box">
+                <h4>🗺️ Available Locations</h4>
+                <ul>
+                    <li><strong>Starter Town</strong> - Peaceful starting area (Fire/Water/Grass pets)</li>
+                    <li><strong>Whispering Woods</strong> - Ancient forest (Grass pets + new species: Vinewrap, Bloomtail)</li>
+                    <li><strong>Electric Canyon</strong> - Charged valley (Electric/Rock pets)</li>
+                    <li><strong>Crystal Caves</strong> - Underground caverns (Rock/Crystal pets)</li>
+                    <li><strong>Frozen Tundra</strong> - Icy wasteland (Ice/Water pets)</li>
+                    <li><strong>Dragon's Peak</strong> - Ultimate challenge (Fire/Rock/Ice pets)</li>
+                </ul>
+            </div>
+
+            <div class="info-box">
+                <h4>🌤️ Weather Effects</h4>
+                <ul>
+                    <li><strong>Sunny</strong> - 1.5x Fire/Grass spawns (1-2 hours)</li>
+                    <li><strong>Rainy</strong> - 2.0x Water spawns (45-90 minutes)</li>
+                    <li><strong>Thunderstorm</strong> - 2.0x Electric spawns (30-60 minutes)</li>
+                    <li><strong>Blizzard</strong> - 1.7x Ice/Water spawns (1-2 hours)</li>
+                    <li><strong>Earthquake</strong> - 1.8x Rock spawns (30-90 minutes)</li>
+                    <li><strong>Calm</strong> - Normal spawns (1.5-3 hours)</li>
+                </ul>
+                </div>
+            </div>
+        </div>
+
+        <div class="section">
+            <div class="section-header">⚔️ Battle System</div>
+            <div class="section-content">
+                <div class="command-grid">
+                <div class="command">
+                    <div class="command-name">!catch / !capture</div>
+                    <div class="command-desc">Attempt to catch a wild pet that appeared during exploration. Success depends on the pet's level and rarity.</div>
+                    <div class="command-example">Example: !catch</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!battle</div>
+                    <div class="command-desc">Start a turn-based battle with a wild pet. Defeat it to gain experience and money for your active pet.</div>
+                    <div class="command-example">Example: !battle</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!attack &lt;move&gt;</div>
+                    <div class="command-desc">Use a specific move during battle. Each move has different power, type, and effects.</div>
+                    <div class="command-example">Example: !attack flamethrower</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!moves</div>
+                    <div class="command-desc">View all available moves for your active pet, including their types and power levels.</div>
+                    <div class="command-example">Example: !moves</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!flee</div>
+                    <div class="command-desc">Attempt to escape from the current battle. Not always successful!</div>
+                    <div class="command-example">Example: !flee</div>
+                </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="section">
+            <div class="section-header">🏛️ Gym Battles <span class="badge">NEW!</span></div>
+            <div class="section-content">
+                <div class="command-grid">
+                <div class="command">
+                    <div class="command-name">!gym</div>
+                    <div class="command-desc">List all gyms in your current location with your progress. Shows victories and next difficulty level.</div>
+                    <div class="command-example">Example: !gym</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!gym list</div>
+                    <div class="command-desc">Show all gyms across all locations with your badge collection progress.</div>
+                    <div class="command-example">Example: !gym list</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!gym challenge "&lt;name&gt;"</div>
+                    <div class="command-desc">Challenge a gym leader! You must be in the same location as the gym. Difficulty increases with each victory.</div>
+                    <div class="command-example">Example: !gym challenge "Forest Guardian"</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!gym info "&lt;name&gt;"</div>
+                    <div class="command-desc">Get detailed information about a gym including leader, theme, team, and badge details.</div>
+                    <div class="command-example">Example: !gym info "Storm Master"</div>
+                </div>
+                </div>
+                
+                <div class="tip">
+                    💡 <strong>Gym Strategy:</strong> Each gym specializes in a specific type. Bring pets with type advantages! The more you beat a gym, the harder it gets, but the better the rewards!
+                </div>
+
+                <div class="info-box">
+                <h4>🏆 Gym Leaders & Badges</h4>
+                <div class="gym-list">
+                    <div class="gym-card">
+                        <strong>🍃 Forest Guardian</strong><br>
+                        Location: Starter Town<br>
+                        Leader: Trainer Verde<br>
+                        Theme: Grass-type
+                    </div>
+                    <div class="gym-card">
+                        <strong>🌳 Nature's Haven</strong><br>
+                        Location: Whispering Woods<br>
+                        Leader: Elder Sage<br>
+                        Theme: Grass-type
+                    </div>
+                    <div class="gym-card">
+                        <strong>⚡ Storm Master</strong><br>
+                        Location: Electric Canyon<br>
+                        Leader: Captain Volt<br>
+                        Theme: Electric-type
+                    </div>
+                    <div class="gym-card">
+                        <strong>💎 Stone Crusher</strong><br>
+                        Location: Crystal Caves<br>
+                        Leader: Miner Magnus<br>
+                        Theme: Rock-type
+                    </div>
+                    <div class="gym-card">
+                        <strong>❄️ Ice Breaker</strong><br>
+                        Location: Frozen Tundra<br>
+                        Leader: Arctic Queen<br>
+                        Theme: Ice/Water-type
+                    </div>
+                    <div class="gym-card">
+                        <strong>🐉 Dragon Slayer</strong><br>
+                        Location: Dragon's Peak<br>
+                        Leader: Champion Drake<br>
+                        Theme: Fire-type
+                    </div>
+                </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="section">
+            <div class="section-header">🐾 Pet Management</div>
+            <div class="section-content">
+                <div class="command-grid">
+                <div class="command">
+                    <div class="command-name">!team</div>
+                    <div class="command-desc">View your active team of pets with their levels, HP, and status.</div>
+                    <div class="command-example">Example: !team</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!pets</div>
+                    <div class="command-desc">View your complete pet collection with detailed stats and information via web interface.</div>
+                    <div class="command-example">Example: !pets</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!activate &lt;pet&gt;</div>
+                    <div class="command-desc">Add a pet to your active battle team. You can have multiple active pets for different situations.</div>
+                    <div class="command-example">Example: !activate flamey</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!deactivate &lt;pet&gt;</div>
+                    <div class="command-desc">Remove a pet from your active team and put it in storage.</div>
+                    <div class="command-example">Example: !deactivate aqua</div>
+                </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="section">
+            <div class="section-header">🎒 Inventory System <span class="badge">NEW!</span></div>
+            <div class="section-content">
+                <div class="command-grid">
+                <div class="command">
+                    <div class="command-name">!inventory / !inv / !items</div>
+                    <div class="command-desc">View all items in your inventory organized by category. Shows quantities and item descriptions.</div>
+                    <div class="command-example">Example: !inventory</div>
+                </div>
+                <div class="command">
+                    <div class="command-name">!use &lt;item name&gt;</div>
+                    <div class="command-desc">Use a consumable item from your inventory. Items can heal pets, boost stats, or provide other benefits.</div>
+                    <div class="command-example">Example: !use Small Potion</div>
+                </div>
+                </div>
+                
+                <div class="info-box">
+                    <h4>🎯 Item Categories & Rarities</h4>
+                    <ul>
+                        <li><strong>○ Common (15%)</strong> - Small Potions, basic healing items</li>
+                        <li><strong>◇ Uncommon (8-12%)</strong> - Large Potions, battle boosters, special berries</li>
+                        <li><strong>◆ Rare (3-6%)</strong> - Super Potions, speed elixirs, location treasures</li>
+                        <li><strong>★ Epic (2-3%)</strong> - Evolution stones, rare crystals, ancient artifacts</li>
+                        <li><strong>✦ Legendary (1%)</strong> - Lucky charms, ancient fossils, ultimate items</li>
+                    </ul>
+                </div>
+
+                <div class="tip">
+                    💡 <strong>Item Discovery:</strong> Find items while exploring! Each location has unique treasures. Items stack in your inventory and can be used anytime.
+                </div>
+        </div>
+
+        <div class="section">
+            <div class="section-header">🏆 Achievements & Progress</div>
+            <div class="section-content">
+                <div class="command-grid">
+                <div class="command">
+                    <div class="command-name">!achievements</div>
+                    <div class="command-desc">View your achievement progress and see which new locations you've unlocked.</div>
+                    <div class="command-example">Example: !achievements</div>
+                </div>
+                </div>
+                
+                <div class="info-box">
+                    <h4>🎯 Location Unlock Requirements</h4>
+                    <ul>
+                        <li><strong>Pet Collector</strong> (5 pets) → Unlocks Whispering Woods</li>
+                        <li><strong>Spark Collector</strong> (2 Electric species) → Unlocks Electric Canyon</li>
+                        <li><strong>Rock Hound</strong> (3 Rock species) → Unlocks Crystal Caves</li>
+                        <li><strong>Ice Breaker</strong> (5 Water/Ice species) → Unlocks Frozen Tundra</li>
+                        <li><strong>Dragon Tamer</strong> (15 pets + 3 Fire species) → Unlocks Dragon's Peak</li>
+                    </ul>
+                </div>
+        </div>
+
+        <div class="section">
+            <div class="section-header">🌐 Web Interface</div>
+            <div class="section-content">
+                <div class="tip">
+                    Access detailed information through the web dashboard at <strong>http://petz.rdx4.com/</strong>
+                    <ul style="margin-top: 10px;">
+                        <li><strong>Player Profiles</strong> - Complete stats, pet collections, and inventories</li>
+                        <li><strong>Leaderboard</strong> - Top players by level and achievements</li>
+                        <li><strong>Locations Guide</strong> - All areas with spawn information</li>
+                        <li><strong>Gym Badges</strong> - Display your earned badges and progress</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <div class="footer">
+            <p><strong>🎮 PetBot v0.2.0</strong> - Pokemon-style pet collecting for IRC</p>
+            <p>Catch pets • Battle gyms • Collect items • Earn badges • Explore locations</p>
+            <p style="margin-top: 15px; opacity: 0.7;">
+                Need help? Ask in the channel or visit the web dashboard for detailed information!
+            </p>
+        </div>
+        """
+        
+        # Add command-specific CSS to the unified styles
+        additional_css = """
+        .section {
+            background: var(--bg-secondary);
+            border-radius: 15px;
+            margin-bottom: 30px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+            border: 1px solid var(--border-color);
+            overflow: hidden;
+        }
+        
+        .section-header {
+            background: var(--gradient-primary);
+            color: white;
+            padding: 20px 25px;
+            font-size: 1.3em;
+            font-weight: 700;
+        }
+        
+        .section-content {
+            padding: 25px;
+        }
+        
+        .command-grid {
+            display: grid;
+            gap: 20px;
+        }
+        
+        .command {
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            overflow: hidden;
+            transition: all 0.3s ease;
+            background: var(--bg-tertiary);
+        }
+        
+        .command:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(102, 255, 102, 0.15);
+            border-color: var(--text-accent);
+        }
+        
+        .command-name {
+            background: var(--bg-primary);
+            padding: 15px 20px;
+            font-family: 'Fira Code', 'Courier New', monospace;
+            font-weight: bold;
+            color: var(--text-accent);
+            border-bottom: 1px solid var(--border-color);
+            font-size: 1.2em;
+            text-shadow: 0 0 10px rgba(102, 255, 102, 0.3);
+        }
+        
+        .command-desc {
+            padding: 20px;
+            line-height: 1.7;
+            color: var(--text-primary);
+        }
+        
+        .command-example {
+            background: var(--bg-primary);
+            padding: 12px 20px;
+            font-family: 'Fira Code', 'Courier New', monospace;
+            color: var(--text-secondary);
+            border-top: 1px solid var(--border-color);
+            font-size: 0.95em;
+        }
+        
+        .info-box {
+            background: var(--bg-tertiary);
+            padding: 20px;
+            border-radius: 12px;
+            margin: 20px 0;
+            border: 1px solid var(--border-color);
+        }
+        
+        .info-box h4 {
+            margin: 0 0 15px 0;
+            color: var(--text-accent);
+            font-size: 1.1em;
+            font-weight: 600;
+        }
+        
+        .info-box ul {
+            margin: 0;
+            padding-left: 25px;
+        }
+        
+        .info-box li {
+            margin: 8px 0;
+            color: var(--text-primary);
+        }
+        
+        .info-box strong {
+            color: var(--text-accent);
+        }
+        
+        .footer {
+            text-align: center;
+            margin-top: 50px;
+            padding: 30px;
+            background: var(--bg-secondary);
+            border-radius: 15px;
+            color: var(--text-secondary);
+            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+            border: 1px solid var(--border-color);
+        }
+        
+        .tip {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            border-radius: 12px;
+            margin: 20px 0;
+            font-weight: 500;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        }
+        
+        .gym-list {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 15px;
+            margin: 15px 0;
+        }
+        
+        .gym-card {
+            background: var(--bg-primary);
+            padding: 15px;
+            border-radius: 8px;
+            border: 1px solid var(--border-color);
+        }
+        
+        .gym-card strong {
+            color: var(--text-accent);
+        }
+        """
+        
+        # Get the unified template with additional CSS
+        html_content = self.get_page_template("Command Help", content, "help")
+        # Insert additional CSS before closing </style> tag
+        html_content = html_content.replace("</style>", additional_css + "</style>")
+        
+        self.send_response(200)
+        self.send_header('Content-type', 'text/html')
+        self.end_headers()
+        self.wfile.write(html_content.encode())
     
     def serve_players(self):
         """Serve the players page with real data"""
@@ -268,6 +1153,34 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
     def serve_players_data(self, players_data):
         """Serve players page with real data"""
         
+        # Calculate statistics
+        total_players = len(players_data)
+        total_pets = sum(p['pet_count'] for p in players_data) if players_data else 0
+        total_achievements = sum(p['achievement_count'] for p in players_data) if players_data else 0
+        highest_level = max((p['level'] for p in players_data), default=0) if players_data else 0
+        
+        # Build statistics cards
+        stats_content = f"""
+        <div class="grid grid-4">
+            <div class="card">
+                <h3 style="color: var(--accent-blue); margin-top: 0;">📊 Total Players</h3>
+                <div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{total_players}</div>
+            </div>
+            <div class="card">
+                <h3 style="color: var(--accent-blue); margin-top: 0;">🐾 Total Pets</h3>
+                <div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{total_pets}</div>
+            </div>
+            <div class="card">
+                <h3 style="color: var(--accent-blue); margin-top: 0;">🏆 Achievements</h3>
+                <div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{total_achievements}</div>
+            </div>
+            <div class="card">
+                <h3 style="color: var(--accent-blue); margin-top: 0;">⭐ Highest Level</h3>
+                <div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{highest_level}</div>
+            </div>
+        </div>
+        """
+        
         # Build players table HTML
         if players_data:
             players_html = ""
@@ -294,175 +1207,11 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                     </td>
                 </tr>"""
         
-        html = f"""<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PetBot - Players</title>
-    <style>
-        :root {{
-            --bg-primary: #0f0f23;
-            --bg-secondary: #1e1e3f;
-            --bg-tertiary: #2a2a4a;
-            --text-primary: #cccccc;
-            --text-secondary: #999999;
-            --text-accent: #66ff66;
-            --border-color: #333366;
-            --hover-color: #3a3a5a;
-            --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --shadow-dark: 0 4px 20px rgba(0,0,0,0.3);
-        }}
-        
-        body {{
-            font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 20px;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.6;
-            min-height: 100vh;
-        }}
-        
-        .header {{
-            text-align: center;
-            background: var(--gradient-primary);
-            color: white;
-            padding: 30px;
-            border-radius: 15px;
-            margin-bottom: 30px;
-            box-shadow: var(--shadow-dark);
-        }}
-        
-        .header h1 {{
-            margin: 0;
-            font-size: 2.5em;
-            font-weight: 700;
-        }}
-        
-        .back-link {{
-            color: var(--text-accent);
-            text-decoration: none;
-            margin-bottom: 20px;
-            display: inline-block;
-            font-weight: 500;
-        }}
-        
-        .back-link:hover {{
-            text-decoration: underline;
-        }}
-        
-        .section {{
-            background: var(--bg-secondary);
-            border-radius: 15px;
-            overflow: hidden;
-            box-shadow: var(--shadow-dark);
-            border: 1px solid var(--border-color);
-        }}
-        
-        .section-header {{
-            background: var(--gradient-primary);
-            color: white;
-            padding: 20px 25px;
-            font-size: 1.3em;
-            font-weight: 700;
-        }}
-        
-        .section-content {{
-            padding: 25px;
-        }}
-        
-        .players-table {{
-            width: 100%;
-            border-collapse: collapse;
-            margin: 20px 0;
-            background: var(--bg-tertiary);
-            border-radius: 8px;
-            overflow: hidden;
-        }}
-        
-        .players-table th, .players-table td {{
-            padding: 12px 15px;
-            text-align: left;
-            border-bottom: 1px solid var(--border-color);
-        }}
-        
-        .players-table th {{
-            background: var(--bg-primary);
-            color: var(--text-accent);
-            font-weight: 600;
-            font-size: 0.9em;
-        }}
-        
-        .players-table tr:hover {{
-            background: var(--hover-color);
-        }}
-        
-        .stats-summary {{
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
-        }}
-        
-        .stat-card {{
-            background: var(--bg-tertiary);
-            padding: 20px;
-            border-radius: 10px;
-            text-align: center;
-            border: 1px solid var(--border-color);
-        }}
-        
-        .stat-value {{
-            font-size: 2em;
-            font-weight: bold;
-            color: var(--text-accent);
-            margin-bottom: 5px;
-        }}
-        
-        .stat-label {{
-            color: var(--text-secondary);
-            font-size: 0.9em;
-        }}
-    </style>
-</head>
-<body>
-    <a href="/" class="back-link">← Back to Game Hub</a>
-    
-    <div class="header">
-        <h1>👥 Registered Players</h1>
-        <p>All trainers on their pet collection journey</p>
-    </div>
-    
-    <div class="section">
-        <div class="section-header">📊 Server Statistics</div>
-        <div class="section-content">
-            <div class="stats-summary">
-                <div class="stat-card">
-                    <div class="stat-value">{len(players_data)}</div>
-                    <div class="stat-label">Total Players</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value">{sum(p['pet_count'] for p in players_data)}</div>
-                    <div class="stat-label">Total Pets Caught</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value">{sum(p['achievement_count'] for p in players_data)}</div>
-                    <div class="stat-label">Total Achievements</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value">{max((p['level'] for p in players_data), default=0)}</div>
-                    <div class="stat-label">Highest Level</div>
-                </div>
-            </div>
-        </div>
-    </div>
-    
-    <div class="section">
-        <div class="section-header">🏆 Player Rankings</div>
-        <div class="section-content">
-            <table class="players-table">
+        # Build table content
+        table_content = f"""
+        <div class="card">
+            <h2>🏆 Player Rankings</h2>
+            <table class="table">
                 <thead>
                     <tr>
                         <th>Rank</th>
@@ -480,14 +1229,24 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                     {players_html}
                 </tbody>
             </table>
-            
             <div style="text-align: center; margin-top: 20px; color: var(--text-secondary);">
                 <p>💡 Click on any player name to view their detailed profile</p>
             </div>
         </div>
-    </div>
-</body>
-</html>"""
+        """
+        
+        # Combine all content
+        content = f"""
+        <div class="header">
+            <h1>👥 Registered Players</h1>
+            <p>All trainers on their pet collection journey</p>
+        </div>
+        
+        {stats_content}
+        {table_content}
+        """
+        
+        html = self.get_page_template("Players", content, "players")
         
         self.send_response(200)
         self.send_header('Content-type', 'text/html')
@@ -495,76 +1254,49 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
         self.wfile.write(html.encode())
     
     def serve_error_page(self, page_name, error_msg):
-        """Serve a generic error page"""
-        html = f"""<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PetBot - Error</title>
-    <style>
-        :root {{
-            --bg-primary: #0f0f23;
-            --bg-secondary: #1e1e3f;
-            --text-primary: #cccccc;
-            --text-accent: #66ff66;
-            --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        }}
+        """Serve a generic error page using unified template"""
+        content = f"""
+        <div class="header">
+            <h1>⚠️ Error Loading {page_name}</h1>
+        </div>
         
-        body {{
-            font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
+        <div class="error-message">
+            <h2>Unable to load page</h2>
+            <p>{error_msg}</p>
+            <p>Please try again later or contact an administrator.</p>
+        </div>
+        """
+        
+        # Add error-specific CSS
+        additional_css = """
+        .main-container {
+            text-align: center;
             max-width: 800px;
             margin: 0 auto;
-            padding: 20px;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.6;
-            min-height: 100vh;
-            text-align: center;
-        }}
+        }
         
-        .header {{
-            background: var(--gradient-primary);
-            color: white;
-            padding: 30px;
-            border-radius: 15px;
-            margin-bottom: 30px;
-        }}
-        
-        .back-link {{
-            color: var(--text-accent);
-            text-decoration: none;
-            margin-bottom: 20px;
-            display: inline-block;
-        }}
-        
-        .error-message {{
+        .error-message {
             background: var(--bg-secondary);
             padding: 40px;
             border-radius: 15px;
-            border: 2px solid #ff4444;
-        }}
-    </style>
-</head>
-<body>
-    <a href="/" class="back-link">← Back to Game Hub</a>
-    
-    <div class="header">
-        <h1>⚠️ Error Loading {page_name}</h1>
-    </div>
-    
-    <div class="error-message">
-        <h2>Unable to load page</h2>
-        <p>{error_msg}</p>
-        <p>Please try again later or contact an administrator.</p>
-    </div>
-</body>
-</html>"""
+            border: 2px solid var(--error-color);
+            margin-top: 30px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+        }
+        
+        .error-message h2 {
+            color: var(--error-color);
+            margin-top: 0;
+        }
+        """
+        
+        html_content = self.get_page_template("Error", content, "")
+        html_content = html_content.replace("</style>", additional_css + "</style>")
         
         self.send_response(500)
         self.send_header('Content-type', 'text/html')
         self.end_headers()
-        self.wfile.write(html.encode())
+        self.wfile.write(html_content.encode())
     
     def serve_leaderboard(self):
         """Serve the leaderboard page - redirect to players for now"""
@@ -635,7 +1367,7 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
             return []
     
     def serve_locations_data(self, locations_data):
-        """Serve locations page with real data"""
+        """Serve locations page with real data using unified template"""
         
         # Build locations HTML
         locations_html = ""
@@ -699,119 +1431,133 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                     </div>
                 </div>"""
         
-        html = f"""<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PetBot - Locations</title>
-    <style>
-        :root {{
-            --bg-primary: #0f0f23;
-            --bg-secondary: #1e1e3f;
-            --bg-tertiary: #2a2a4a;
-            --text-primary: #cccccc;
-            --text-secondary: #999999;
-            --text-accent: #66ff66;
-            --border-color: #333366;
-            --hover-color: #3a3a5a;
-            --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --shadow-dark: 0 4px 20px rgba(0,0,0,0.3);
-        }}
+        content = f"""
+        <div class="header">
+            <h1>🗺️ Game Locations</h1>
+            <p>Explore all areas and discover what pets await you!</p>
+        </div>
         
-        body {{
-            font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 20px;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.6;
-            min-height: 100vh;
-        }}
+        <div class="info-section">
+            <h2>🎯 How Locations Work</h2>
+            <p><strong>Travel:</strong> Use <code>!travel &lt;location&gt;</code> to move between areas</p>
+            <p><strong>Explore:</strong> Use <code>!explore</code> to find wild pets in your current location</p>
+            <p><strong>Unlock:</strong> Some locations require achievements - catch specific pet types to unlock new areas!</p>
+            <p><strong>Weather:</strong> Check <code>!weather</code> for conditions that boost certain pet spawn rates</p>
+        </div>
         
-        .header {{
-            text-align: center;
-            background: var(--gradient-primary);
-            color: white;
-            padding: 30px;
-            border-radius: 15px;
-            margin-bottom: 30px;
-            box-shadow: var(--shadow-dark);
-        }}
+        <div class="locations-grid">
+            {locations_html}
+        </div>
         
-        .header h1 {{
-            margin: 0;
-            font-size: 2.5em;
-            font-weight: 700;
-        }}
+        <div class="info-section">
+            <p style="text-align: center; color: var(--text-secondary); margin: 0;">
+                💡 Use <code>!wild &lt;location&gt;</code> in #petz to see what pets spawn in a specific area
+            </p>
+        </div>
         
-        .back-link {{
-            color: var(--text-accent);
-            text-decoration: none;
-            margin-bottom: 20px;
-            display: inline-block;
-            font-weight: 500;
-        }}
+        <script>
+            function toggleSpawns(locationId) {{
+                const hiddenSpawns = document.querySelectorAll(`#hidden-${{locationId}}`);
+                const moreButton = document.querySelector(`[onclick="toggleSpawns(${{locationId}})"]`);
+                
+                if (!moreButton) return;
+                
+                const isHidden = hiddenSpawns[0] && hiddenSpawns[0].style.display === 'none' || hiddenSpawns[0] && hiddenSpawns[0].classList.contains('hidden-spawn');
+                
+                if (isHidden) {{
+                    // Show hidden spawns
+                    hiddenSpawns.forEach(spawn => {{
+                        spawn.classList.remove('hidden-spawn');
+                        spawn.style.display = 'inline-block';
+                    }});
+                    moreButton.textContent = 'Show less';
+                    moreButton.className = 'spawn-badge less-button';
+                    moreButton.setAttribute('onclick', `hideSpawns(${{locationId}})`);
+                }}
+            }}
+            
+            function hideSpawns(locationId) {{
+                const hiddenSpawns = document.querySelectorAll(`#hidden-${{locationId}}`);
+                const lessButton = document.querySelector(`[onclick="hideSpawns(${{locationId}})"]`);
+                
+                if (!lessButton) return;
+                
+                // Hide spawns again
+                hiddenSpawns.forEach(spawn => {{
+                    spawn.classList.add('hidden-spawn');
+                    spawn.style.display = 'none';
+                }});
+                
+                const hiddenCount = hiddenSpawns.length;
+                lessButton.textContent = `+${{hiddenCount}} more`;
+                lessButton.className = 'spawn-badge more-button';
+                lessButton.setAttribute('onclick', `toggleSpawns(${{locationId}})`);
+            }}
+        </script>
+        """
         
-        .back-link:hover {{
-            text-decoration: underline;
-        }}
-        
-        .locations-grid {{
+        # Add locations-specific CSS
+        additional_css = """
+        .locations-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
             gap: 25px;
             margin-top: 30px;
-        }}
+        }
         
-        .location-card {{
+        .location-card {
             background: var(--bg-secondary);
             border-radius: 15px;
             overflow: hidden;
-            box-shadow: var(--shadow-dark);
+            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
             border: 1px solid var(--border-color);
             transition: transform 0.3s ease;
-        }}
+        }
         
-        .location-card:hover {{
+        .location-card:hover {
             transform: translateY(-5px);
-        }}
+        }
         
-        .location-header {{
+        .location-header {
             background: var(--gradient-primary);
             color: white;
             padding: 20px;
             display: flex;
             justify-content: space-between;
             align-items: center;
-        }}
+        }
         
-        .location-header h3 {{
+        .location-header h3 {
             margin: 0;
             font-size: 1.3em;
             font-weight: 700;
-        }}
+        }
         
-        .location-id {{
+        .location-id {
             background: rgba(255,255,255,0.2);
             padding: 5px 10px;
             border-radius: 20px;
             font-size: 0.8em;
-        }}
+        }
         
-        .location-description {{
+        .location-description {
             padding: 20px;
             color: var(--text-primary);
             font-style: italic;
             border-bottom: 1px solid var(--border-color);
-        }}
+        }
         
-        .location-spawns {{
+        .location-levels {
             padding: 20px;
-        }}
+            padding-bottom: 10px;
+            border-bottom: 1px solid var(--border-color);
+        }
         
-        .spawn-badge {{
+        .location-spawns {
+            padding: 20px;
+        }
+        
+        .spawn-badge {
             background: var(--bg-tertiary);
             color: var(--text-accent);
             padding: 4px 10px;
@@ -820,55 +1566,58 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
             margin: 3px;
             display: inline-block;
             border: 1px solid var(--border-color);
-        }}
+        }
         
-        .info-section {{
+        .hidden-spawn {
+            display: none;
+        }
+        
+        .more-button {
+            background: var(--gradient-primary) !important;
+            color: white !important;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+        }
+        
+        .more-button:hover {
+            transform: scale(1.05);
+        }
+        
+        .less-button {
+            background: #ff6b6b !important;
+            color: white !important;
+            cursor: pointer;
+            transition: transform 0.2s ease;
+        }
+        
+        .less-button:hover {
+            transform: scale(1.05);
+        }
+        
+        .info-section {
             background: var(--bg-secondary);
             border-radius: 15px;
             padding: 25px;
             margin-bottom: 30px;
-            box-shadow: var(--shadow-dark);
+            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
             border: 1px solid var(--border-color);
-        }}
+        }
         
-        .info-section h2 {{
+        .info-section h2 {
             color: var(--text-accent);
             margin-top: 0;
-        }}
-    </style>
-</head>
-<body>
-    <a href="/" class="back-link">← Back to Game Hub</a>
-    
-    <div class="header">
-        <h1>🗺️ Game Locations</h1>
-        <p>Explore all areas and discover what pets await you!</p>
-    </div>
-    
-    <div class="info-section">
-        <h2>🎯 How Locations Work</h2>
-        <p><strong>Travel:</strong> Use <code>!travel &lt;location&gt;</code> to move between areas</p>
-        <p><strong>Explore:</strong> Use <code>!explore</code> to find wild pets in your current location</p>
-        <p><strong>Unlock:</strong> Some locations require achievements - catch specific pet types to unlock new areas!</p>
-        <p><strong>Weather:</strong> Check <code>!weather</code> for conditions that boost certain pet spawn rates</p>
-    </div>
-    
-    <div class="locations-grid">
-        {locations_html}
-    </div>
-    
-    <div class="info-section">
-        <p style="text-align: center; color: var(--text-secondary); margin: 0;">
-            💡 Use <code>!wild &lt;location&gt;</code> in #petz to see what pets spawn in a specific area
-        </p>
-    </div>
-</body>
-</html>"""
+        }
+        """
+        
+        # Get the unified template with additional CSS
+        html_content = self.get_page_template("Game Locations", content, "locations")
+        # Insert additional CSS before closing </style> tag
+        html_content = html_content.replace("</style>", additional_css + "</style>")
         
         self.send_response(200)
         self.send_header('Content-type', 'text/html')
         self.end_headers()
-        self.wfile.write(html.encode())
+        self.wfile.write(html_content.encode())
     
     def serve_petdex(self):
         """Serve the petdex page with all pet species data"""
@@ -899,9 +1648,9 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
         try:
             import aiosqlite
             async with aiosqlite.connect(database.db_path) as db:
-                # Get all pet species with evolution information
+                # Get all pet species with evolution information (no duplicates)
                 cursor = await db.execute("""
-                    SELECT ps.*, 
+                    SELECT DISTINCT ps.*, 
                            evolve_to.name as evolves_to_name,
                            (SELECT COUNT(*) FROM location_spawns ls WHERE ls.species_id = ps.id) as location_count
                     FROM pet_species ps
@@ -952,6 +1701,40 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
         rarity_names = {1: "Common", 2: "Uncommon", 3: "Rare", 4: "Epic", 5: "Legendary"}
         rarity_colors = {1: "#ffffff", 2: "#1eff00", 3: "#0070dd", 4: "#a335ee", 5: "#ff8000"}
         
+        # Calculate statistics
+        total_species = len(petdex_data)
+        type_counts = {}
+        for pet in petdex_data:
+            if pet['type1'] not in type_counts:
+                type_counts[pet['type1']] = 0
+            type_counts[pet['type1']] += 1
+            if pet['type2'] and pet['type2'] not in type_counts:
+                type_counts[pet['type2']] = 0
+            if pet['type2']:
+                type_counts[pet['type2']] += 1
+        
+        # Build statistics section
+        stats_content = f"""
+        <div class="grid grid-4">
+            <div class="card">
+                <h3 style="color: var(--accent-blue); margin-top: 0;">📊 Total Species</h3>
+                <div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{total_species}</div>
+            </div>
+            <div class="card">
+                <h3 style="color: var(--accent-blue); margin-top: 0;">🎨 Types</h3>
+                <div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{len(type_counts)}</div>
+            </div>
+            <div class="card">
+                <h3 style="color: var(--accent-blue); margin-top: 0;">⭐ Rarities</h3>
+                <div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{len(set(pet['rarity'] for pet in petdex_data))}</div>
+            </div>
+            <div class="card">
+                <h3 style="color: var(--accent-blue); margin-top: 0;">🧬 Evolutions</h3>
+                <div style="font-size: 2.5em; font-weight: bold; color: var(--text-accent);">{len([p for p in petdex_data if p['evolution_level']])}</div>
+            </div>
+        </div>
+        """
+        
         pets_by_rarity = {}
         for pet in petdex_data:
             rarity = pet['rarity']
@@ -1034,207 +1817,24 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                     <p>The petdex appears to be empty. Contact an administrator.</p>
                 </div>"""
         
-        html = f"""<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PetBot - Petdex</title>
-    <style>
-        :root {{
-            --bg-primary: #0f0f23;
-            --bg-secondary: #1e1e3f;
-            --bg-tertiary: #2a2a4a;
-            --text-primary: #cccccc;
-            --text-secondary: #999999;
-            --text-accent: #66ff66;
-            --border-color: #333366;
-            --hover-color: #3a3a5a;
-            --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --shadow-dark: 0 4px 20px rgba(0,0,0,0.3);
-        }}
-        
-        body {{
-            font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
-            max-width: 1600px;
-            margin: 0 auto;
-            padding: 20px;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.6;
-            min-height: 100vh;
-        }}
-        
-        .header {{
-            text-align: center;
-            background: var(--gradient-primary);
-            color: white;
-            padding: 30px;
-            border-radius: 15px;
-            margin-bottom: 30px;
-            box-shadow: var(--shadow-dark);
-        }}
-        
-        .header h1 {{
-            margin: 0;
-            font-size: 2.5em;
-            font-weight: 700;
-        }}
-        
-        .back-link {{
-            color: var(--text-accent);
-            text-decoration: none;
-            margin-bottom: 20px;
-            display: inline-block;
-            font-weight: 500;
-        }}
-        
-        .back-link:hover {{
-            text-decoration: underline;
-        }}
-        
-        .stats-summary {{
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
-        }}
-        
-        .stat-card {{
-            background: var(--bg-secondary);
-            padding: 20px;
-            border-radius: 10px;
-            text-align: center;
-            border: 1px solid var(--border-color);
-        }}
-        
-        .stat-value {{
-            font-size: 2em;
-            font-weight: bold;
-            color: var(--text-accent);
-            margin-bottom: 5px;
-        }}
-        
-        .stat-label {{
-            color: var(--text-secondary);
-            font-size: 0.9em;
-        }}
-        
-        .rarity-section {{
-            margin-bottom: 40px;
-        }}
-        
-        .pets-grid {{
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-            gap: 20px;
-            margin-top: 20px;
-        }}
-        
-        .pet-card {{
-            background: var(--bg-secondary);
-            border-radius: 12px;
-            overflow: hidden;
-            box-shadow: var(--shadow-dark);
-            border: 1px solid var(--border-color);
-            transition: transform 0.3s ease;
-        }}
-        
-        .pet-card:hover {{
-            transform: translateY(-3px);
-        }}
-        
-        .pet-header {{
-            background: var(--bg-tertiary);
-            padding: 15px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }}
-        
-        .pet-header h3 {{
-            margin: 0;
-            font-size: 1.2em;
-        }}
-        
-        .type-badge {{
-            background: var(--bg-primary);
-            color: var(--text-accent);
-            padding: 4px 12px;
-            border-radius: 15px;
-            font-size: 0.8em;
-            font-weight: 600;
-        }}
-        
-        .pet-stats {{
-            padding: 15px;
-            background: var(--bg-tertiary);
-            border-bottom: 1px solid var(--border-color);
-        }}
-        
-        .stat-row {{
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 5px;
-        }}
-        
-        .total-stats {{
-            text-align: center;
-            margin-top: 10px;
-            font-weight: bold;
-            color: var(--text-accent);
-        }}
-        
-        .pet-info {{
-            padding: 15px;
-            font-size: 0.9em;
-            line-height: 1.4;
-        }}
-        
-        .search-filter {{
-            background: var(--bg-secondary);
-            padding: 20px;
-            border-radius: 15px;
-            margin-bottom: 30px;
-            text-align: center;
-        }}
-    </style>
-</head>
-<body>
-    <a href="/" class="back-link">← Back to Game Hub</a>
-    
-    <div class="header">
-        <h1>📖 Petdex - Complete Pet Encyclopedia</h1>
-        <p>Comprehensive guide to all available pet species</p>
-    </div>
-    
-    <div class="search-filter">
-        <div class="stats-summary">
-            <div class="stat-card">
-                <div class="stat-value">{total_species}</div>
-                <div class="stat-label">Total Species</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-value">{len([p for p in petdex_data if p['type1'] == 'Fire' or p['type2'] == 'Fire'])}</div>
-                <div class="stat-label">Fire Types</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-value">{len([p for p in petdex_data if p['type1'] == 'Water' or p['type2'] == 'Water'])}</div>
-                <div class="stat-label">Water Types</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-value">{len([p for p in petdex_data if p['evolution_level']])}</div>
-                <div class="stat-label">Can Evolve</div>
-            </div>
+        # Combine all content
+        content = f"""
+        <div class="header">
+            <h1>📖 Petdex</h1>
+            <p>Complete encyclopedia of all available pets</p>
         </div>
-        <p style="color: var(--text-secondary); margin: 0;">🎯 Pets are organized by rarity. Use <code>!wild &lt;location&gt;</code> in #petz to see what spawns where!</p>
-    </div>
-    
-    {petdex_html}
-    
-</body>
-</html>"""
         
+        {stats_content}
+        
+        <div class="card">
+            <h2>📊 Pet Collection by Rarity</h2>
+            <p style="color: var(--text-secondary); margin-bottom: 20px;">🎯 Pets are organized by rarity. Use <code>!wild &lt;location&gt;</code> in #petz to see what spawns where!</p>
+            
+            {petdex_html}
+        </div>
+        """
+        
+        html = self.get_page_template("Petdex", content, "petdex")
         self.send_response(200)
         self.send_header('Content-type', 'text/html')
         self.end_headers()
@@ -1321,7 +1921,7 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                         'hp': row[6], 'max_hp': row[7], 'attack': row[8],
                         'defense': row[9], 'speed': row[10], 'happiness': row[11],
                         'caught_at': row[12], 'is_active': bool(row[13]),  # Convert to proper boolean
-                        'species_name': row[14], 'type1': row[15], 'type2': row[16]
+                        'team_order': row[14], 'species_name': row[15], 'type1': row[16], 'type2': row[17]
                     }
                     pets.append(pet_dict)
                 
@@ -1426,148 +2026,94 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
             return None
     
     def serve_player_not_found(self, nickname):
-        """Serve player not found page"""
-        html = f"""<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PetBot - Player Not Found</title>
-    <style>
-        :root {{
-            --bg-primary: #0f0f23;
-            --bg-secondary: #1e1e3f;
-            --text-primary: #cccccc;
-            --text-accent: #66ff66;
-            --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        }}
+        """Serve player not found page using unified template"""
+        content = f"""
+        <div class="header">
+            <h1>🚫 Player Not Found</h1>
+        </div>
         
-        body {{
-            font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
+        <div class="error-message">
+            <h2>Player "{nickname}" not found</h2>
+            <p>This player hasn't started their journey yet or doesn't exist.</p>
+            <p>Players can use <code>!start</code> in #petz to begin their adventure!</p>
+        </div>
+        """
+        
+        # Add error-specific CSS
+        additional_css = """
+        .main-container {
+            text-align: center;
             max-width: 800px;
             margin: 0 auto;
-            padding: 20px;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.6;
-            min-height: 100vh;
-            text-align: center;
-        }}
+        }
         
-        .header {{
-            background: var(--gradient-primary);
-            color: white;
-            padding: 30px;
-            border-radius: 15px;
-            margin-bottom: 30px;
-        }}
-        
-        .back-link {{
-            color: var(--text-accent);
-            text-decoration: none;
-            margin-bottom: 20px;
-            display: inline-block;
-        }}
-        
-        .error-message {{
+        .error-message {
             background: var(--bg-secondary);
             padding: 40px;
             border-radius: 15px;
-            border: 2px solid #ff4444;
-        }}
-    </style>
-</head>
-<body>
-    <a href="/" class="back-link">← Back to Game Hub</a>
-    
-    <div class="header">
-        <h1>🚫 Player Not Found</h1>
-    </div>
-    
-    <div class="error-message">
-        <h2>Player "{nickname}" not found</h2>
-        <p>This player hasn't started their journey yet or doesn't exist.</p>
-        <p>Players can use <code>!start</code> in #petz to begin their adventure!</p>
-    </div>
-</body>
-</html>"""
+            border: 2px solid var(--error-color);
+            margin-top: 30px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+        }
+        
+        .error-message h2 {
+            color: var(--error-color);
+            margin-top: 0;
+        }
+        """
+        
+        html_content = self.get_page_template("Player Not Found", content, "players")
+        html_content = html_content.replace("</style>", additional_css + "</style>")
         
         self.send_response(404)
         self.send_header('Content-type', 'text/html')
         self.end_headers()
-        self.wfile.write(html.encode())
+        self.wfile.write(html_content.encode())
     
     def serve_player_error(self, nickname, error_msg):
-        """Serve player error page"""
-        html = f"""<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PetBot - Error</title>
-    <style>
-        :root {{
-            --bg-primary: #0f0f23;
-            --bg-secondary: #1e1e3f;
-            --text-primary: #cccccc;
-            --text-accent: #66ff66;
-            --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        }}
+        """Serve player error page using unified template"""
+        content = f"""
+        <div class="header">
+            <h1>⚠️ Error</h1>
+        </div>
         
-        body {{
-            font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
+        <div class="error-message">
+            <h2>Unable to load player data</h2>
+            <p>{error_msg}</p>
+            <p>Please try again later or contact an administrator.</p>
+        </div>
+        """
+        
+        # Add error-specific CSS
+        additional_css = """
+        .main-container {
+            text-align: center;
             max-width: 800px;
             margin: 0 auto;
-            padding: 20px;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.6;
-            min-height: 100vh;
-            text-align: center;
-        }}
+        }
         
-        .header {{
-            background: var(--gradient-primary);
-            color: white;
-            padding: 30px;
-            border-radius: 15px;
-            margin-bottom: 30px;
-        }}
-        
-        .back-link {{
-            color: var(--text-accent);
-            text-decoration: none;
-            margin-bottom: 20px;
-            display: inline-block;
-        }}
-        
-        .error-message {{
+        .error-message {
             background: var(--bg-secondary);
             padding: 40px;
             border-radius: 15px;
-            border: 2px solid #ff4444;
-        }}
-    </style>
-</head>
-<body>
-    <a href="/" class="back-link">← Back to Game Hub</a>
-    
-    <div class="header">
-        <h1>⚠️ Error</h1>
-    </div>
-    
-    <div class="error-message">
-        <h2>Unable to load player data</h2>
-        <p>{error_msg}</p>
-        <p>Please try again later or contact an administrator.</p>
-    </div>
-</body>
-</html>"""
+            border: 2px solid var(--error-color);
+            margin-top: 30px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+        }
+        
+        .error-message h2 {
+            color: var(--error-color);
+            margin-top: 0;
+        }
+        """
+        
+        html_content = self.get_page_template("Player Error", content, "players")
+        html_content = html_content.replace("</style>", additional_css + "</style>")
         
         self.send_response(500)
         self.send_header('Content-type', 'text/html')
         self.end_headers()
-        self.wfile.write(html.encode())
+        self.wfile.write(html_content.encode())
     
     def serve_player_data(self, nickname, player_data):
         """Serve player profile page with real data"""
@@ -1619,15 +2165,20 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
         if achievements:
             for achievement in achievements:
                 achievements_html += f"""
-                <div style="background: var(--bg-tertiary); padding: 15px; border-radius: 8px; margin: 10px 0; border-left: 4px solid var(--text-accent);">
-                    <strong>🏆 {achievement['achievement_name']}</strong><br>
-                    <small>{achievement['achievement_desc']}</small><br>
-                    <em style="color: var(--text-secondary);">Earned: {achievement['completed_at']}</em>
+                <div class="achievement-card">
+                    <div class="achievement-icon">🏆</div>
+                    <div class="achievement-content">
+                        <h4>{achievement['achievement_name']}</h4>
+                        <p>{achievement['achievement_desc']}</p>
+                        <span class="achievement-date">Earned: {achievement['completed_at']}</span>
+                    </div>
                 </div>"""
         else:
             achievements_html = """
-                <div style="text-align: center; padding: 40px; color: var(--text-secondary);">
-                    No achievements yet. Keep exploring and catching pets to earn achievements!
+                <div class="empty-state">
+                    <div class="empty-icon">🏆</div>
+                    <h3>No achievements yet</h3>
+                    <p>Keep exploring and catching pets to earn achievements!</p>
                 </div>"""
         
         # Build inventory HTML
@@ -1654,15 +2205,19 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                 quantity_str = f" x{item['quantity']}" if item['quantity'] > 1 else ""
                 
                 inventory_html += f"""
-                <div style="background: var(--bg-tertiary); padding: 15px; border-radius: 8px; margin: 10px 0; border-left: 4px solid {color};">
-                    <strong style="color: {color};">{symbol} {item['name']}{quantity_str}</strong><br>
-                    <small>{item['description']}</small><br>
-                    <em style="color: var(--text-secondary);">Category: {item['category'].replace('_', ' ').title()} | Rarity: {item['rarity'].title()}</em>
+                <div class="inventory-item" style="border-left-color: {color};">
+                    <div class="item-header">
+                        <strong style="color: {color};">{symbol} {item['name']}{quantity_str}</strong>
+                    </div>
+                    <div class="item-description">{item['description']}</div>
+                    <div class="item-meta">Category: {item['category'].replace('_', ' ').title()} | Rarity: {item['rarity'].title()}</div>
                 </div>"""
         else:
             inventory_html = """
-                <div style="text-align: center; padding: 40px; color: var(--text-secondary);">
-                    No items yet. Try exploring to find useful items!
+                <div class="empty-state">
+                    <div class="empty-icon">🎒</div>
+                    <h3>No items yet</h3>
+                    <p>Try exploring to find useful items!</p>
                 </div>"""
         
         # Build gym badges HTML
@@ -1678,15 +2233,24 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                 except (AttributeError, IndexError):
                     badge_date = 'Unknown'
                 badges_html += f"""
-                <div style="background: var(--bg-tertiary); padding: 15px; border-radius: 8px; margin: 10px 0; border-left: 4px solid gold;">
-                    <strong>{badge['badge_icon']} {badge['badge_name']}</strong><br>
-                    <small>Earned from {badge['gym_name']} ({badge['location_name']})</small><br>
-                    <em style="color: var(--text-secondary);">First victory: {badge_date} | Total victories: {badge['victories']} | Highest difficulty: Level {badge['highest_difficulty']}</em>
+                <div class="badge-card">
+                    <div class="badge-icon">{badge['badge_icon']}</div>
+                    <div class="badge-content">
+                        <h4>{badge['badge_name']}</h4>
+                        <p>Earned from {badge['gym_name']} ({badge['location_name']})</p>
+                        <div class="badge-stats">
+                            <span>First victory: {badge_date}</span>
+                            <span>Total victories: {badge['victories']}</span>
+                            <span>Highest difficulty: Level {badge['highest_difficulty']}</span>
+                        </div>
+                    </div>
                 </div>"""
         else:
             badges_html = """
-                <div style="text-align: center; padding: 40px; color: var(--text-secondary);">
-                    No gym badges yet. Challenge gyms to earn badges and prove your training skills!
+                <div class="empty-state">
+                    <div class="empty-icon">🏆</div>
+                    <h3>No gym badges yet</h3>
+                    <p>Challenge gyms to earn badges and prove your training skills!</p>
                 </div>"""
         
         # Build encounters HTML
@@ -1709,283 +2273,495 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                     encounter_date = 'Unknown'
                 
                 encounters_html += f"""
-                <div style="background: var(--bg-tertiary); padding: 15px; border-radius: 8px; margin: 10px 0; border-left: 4px solid {rarity_color};">
-                    <strong style="color: {rarity_color};">{encounter['species_name']}</strong> <span class="type-badge">{type_str}</span><br>
-                    <small>Encountered {encounter['total_encounters']} times | Caught {encounter['caught_count']} times</small><br>
-                    <em style="color: var(--text-secondary);">First seen: {encounter_date}</em>
+                <div class="encounter-card" style="border-left-color: {rarity_color};">
+                    <div class="encounter-header">
+                        <strong style="color: {rarity_color};">{encounter['species_name']}</strong> 
+                        <span class="type-badge">{type_str}</span>
+                    </div>
+                    <div class="encounter-stats">
+                        <span>Encountered {encounter['total_encounters']} times</span>
+                        <span>Caught {encounter['caught_count']} times</span>
+                    </div>
+                    <div class="encounter-date">First seen: {encounter_date}</div>
                 </div>"""
         else:
             encounters_html = """
-                <div style="text-align: center; padding: 40px; color: var(--text-secondary);">
-                    No pets encountered yet. Use !explore to discover wild pets!
+                <div class="empty-state">
+                    <div class="empty-icon">👁️</div>
+                    <h3>No pets encountered yet</h3>
+                    <p>Use !explore to discover wild pets!</p>
                 </div>"""
         
-        html = f"""<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PetBot - {nickname}'s Profile</title>
-    <style>
-        :root {{
-            --bg-primary: #0f0f23;
-            --bg-secondary: #1e1e3f;
-            --bg-tertiary: #2a2a4a;
-            --text-primary: #cccccc;
-            --text-secondary: #999999;
-            --text-accent: #66ff66;
-            --border-color: #333366;
-            --hover-color: #3a3a5a;
-            --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --shadow-dark: 0 4px 20px rgba(0,0,0,0.3);
-        }}
+        # Build content for the unified template
+        content = f"""
+        <div class="header">
+            <h1>🐾 {nickname}'s Profile</h1>
+            <p>Level {player['level']} Trainer</p>
+            <p><em>Currently in {player.get('location_name', 'Unknown Location')}</em></p>
+            <div style="margin-top: 20px;">
+                <a href="/teambuilder/{nickname}" class="btn btn-primary">
+                    🔧 Team Builder
+                </a>
+            </div>
+        </div>
         
-        body {{
-            font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 20px;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.6;
-            min-height: 100vh;
-        }}
+        <!-- Quick Navigation -->
+        <div class="quick-nav">
+            <a href="#stats" class="nav-pill">📊 Stats</a>
+            <a href="#pets" class="nav-pill">🐾 Pets</a>
+            <a href="#achievements" class="nav-pill">🏆 Achievements</a>
+            <a href="#inventory" class="nav-pill">🎒 Inventory</a>
+            <a href="#gym-badges" class="nav-pill">🏆 Badges</a>
+            <a href="#encounters" class="nav-pill">👁️ Encounters</a>
+        </div>
         
-        .header {{
-            text-align: center;
-            background: var(--gradient-primary);
-            color: white;
-            padding: 30px;
-            border-radius: 15px;
-            margin-bottom: 30px;
-            box-shadow: var(--shadow-dark);
-        }}
+        <div class="section" id="stats">
+            <div class="section-header">📊 Player Statistics</div>
+            <div class="section-content">
+                <div class="stats-grid">
+                    <div class="stat-card">
+                        <div class="stat-value">{player['level']}</div>
+                        <div class="stat-label">Level</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value">{player['experience']}</div>
+                        <div class="stat-label">Experience</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value">${player['money']}</div>
+                        <div class="stat-label">Money</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value">{total_pets}</div>
+                        <div class="stat-label">Pets Caught</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value">{active_count}</div>
+                        <div class="stat-label">Active Pets</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value">{len(achievements)}</div>
+                        <div class="stat-label">Achievements</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value">{encounter_stats.get('species_encountered', 0)}</div>
+                        <div class="stat-label">Species Seen</div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-value">{encounter_stats.get('completion_percentage', 0)}%</div>
+                        <div class="stat-label">Petdex Complete</div>
+                    </div>
+                </div>
+            </div>
+        </div>
         
-        .header h1 {{
-            margin: 0;
-            font-size: 2.5em;
-            font-weight: 700;
-        }}
+        <div class="section" id="pets">
+            <div class="section-header">🐾 Pet Collection</div>
+            <div class="section-content">
+                <div class="pets-container">
+                    <div class="pets-table-wrapper">
+                        <table class="pets-table">
+                            <thead>
+                                <tr>
+                                    <th>Status</th>
+                                    <th>Name</th>
+                                    <th>Species</th>
+                                    <th>Type</th>
+                                    <th>Level</th>
+                                    <th>HP</th>
+                                    <th>Stats</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {pets_html}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
         
-        .back-link {{
-            color: var(--text-accent);
-            text-decoration: none;
-            margin-bottom: 20px;
-            display: inline-block;
-            font-weight: 500;
-        }}
+        <div class="section" id="achievements">
+            <div class="section-header">🏆 Achievements</div>
+            <div class="section-content">
+                <div class="achievements-grid">
+                    {achievements_html}
+                </div>
+            </div>
+        </div>
         
-        .back-link:hover {{
-            text-decoration: underline;
-        }}
+        <div class="section" id="inventory">
+            <div class="section-header">🎒 Inventory</div>
+            <div class="section-content">
+                <div class="inventory-grid">
+                    {inventory_html}
+                </div>
+            </div>
+        </div>
         
-        .section {{
+        <div class="section" id="gym-badges">
+            <div class="section-header">🏆 Gym Badges</div>
+            <div class="section-content">
+                <div class="badges-grid">
+                    {badges_html}
+                </div>
+            </div>
+        </div>
+        
+        <div class="section" id="encounters">
+            <div class="section-header">👁️ Pet Encounters</div>
+            <div class="section-content">
+                <div class="encounters-summary">
+                    <p>Species discovered: {encounter_stats.get('species_encountered', 0)}/{encounter_stats.get('total_species', 0)} 
+                    ({encounter_stats.get('completion_percentage', 0)}% complete)</p>
+                    <p>Total encounters: {encounter_stats.get('total_encounters', 0)}</p>
+                </div>
+                <div class="encounters-grid">
+                    {encounters_html}
+                </div>
+            </div>
+        </div>
+        """
+        
+        # Add custom CSS for the profile page
+        additional_css = """
+        
+        /* Profile Page Styles */
+        html {
+            scroll-behavior: smooth;
+        }
+        
+        .quick-nav {
             background: var(--bg-secondary);
-            margin-bottom: 30px;
-            border-radius: 15px;
-            overflow: hidden;
-            box-shadow: var(--shadow-dark);
-            border: 1px solid var(--border-color);
-        }}
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 20px;
+            text-align: center;
+            box-shadow: 0 2px 10px var(--shadow-color);
+        }
         
-        .section-header {{
+        .nav-pill {
+            display: inline-block;
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+            padding: 8px 16px;
+            border-radius: 20px;
+            text-decoration: none;
+            margin: 5px;
+            font-size: 0.9em;
+            transition: all 0.3s ease;
+            border: 1px solid var(--border-color);
+        }
+        
+        .nav-pill:hover {
             background: var(--gradient-primary);
             color: white;
-            padding: 20px 25px;
-            font-size: 1.3em;
-            font-weight: 700;
-        }}
+            transform: translateY(-2px);
+        }
         
-        .section-content {{
-            padding: 25px;
-        }}
-        
-        .stats-grid {{
+        .stats-grid {
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 20px;
             margin-bottom: 20px;
-        }}
+        }
         
-        .stat-card {{
+        .stat-card {
             background: var(--bg-tertiary);
             padding: 20px;
             border-radius: 10px;
             text-align: center;
             border: 1px solid var(--border-color);
-        }}
+            transition: transform 0.3s ease;
+        }
         
-        .stat-value {{
+        .stat-card:hover {
+            transform: translateY(-5px);
+        }
+        
+        .stat-value {
             font-size: 2em;
             font-weight: bold;
             color: var(--text-accent);
             margin-bottom: 5px;
-        }}
+        }
         
-        .stat-label {{
+        .stat-label {
             color: var(--text-secondary);
             font-size: 0.9em;
-        }}
+        }
         
-        .pets-table {{
+        .pets-table-wrapper {
+            overflow-x: auto;
+        }
+        
+        .pets-table {
             width: 100%;
             border-collapse: collapse;
             margin: 20px 0;
             background: var(--bg-tertiary);
             border-radius: 8px;
             overflow: hidden;
-        }}
+            min-width: 600px;
+        }
         
-        .pets-table th, .pets-table td {{
+        .pets-table th, .pets-table td {
             padding: 12px 15px;
             text-align: left;
             border-bottom: 1px solid var(--border-color);
-        }}
+        }
         
-        .pets-table th {{
+        .pets-table th {
             background: var(--bg-primary);
             color: var(--text-accent);
             font-weight: 600;
-        }}
+            position: sticky;
+            top: 0;
+            z-index: 10;
+        }
         
-        .pets-table tr:hover {{
+        .pets-table tr:hover {
             background: var(--hover-color);
-        }}
+        }
         
-        .pet-active {{
+        .pet-active {
             color: var(--text-accent);
             font-weight: bold;
-        }}
+        }
         
-        .pet-stored {{
+        .pet-stored {
             color: var(--text-secondary);
-        }}
+        }
         
-        .type-badge {{
+        .type-badge {
             background: var(--bg-primary);
             color: var(--text-accent);
             padding: 2px 8px;
             border-radius: 12px;
             font-size: 0.8em;
             margin-right: 5px;
-        }}
-    </style>
-</head>
-<body>
-    <a href="/" class="back-link">← Back to Game Hub</a>
-    
-    <div class="header">
-        <h1>🐾 {nickname}'s Profile</h1>
-        <p>Level {player['level']} Trainer</p>
-        <p><em>Currently in {player.get('location_name', 'Unknown Location')}</em></p>
-        <div style="margin-top: 20px;">
-            <a href="/teambuilder/{nickname}" style="background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 12px 24px; border-radius: 20px; text-decoration: none; display: inline-block; font-weight: bold; transition: all 0.3s ease;">
-                🔧 Team Builder
-            </a>
-        </div>
-    </div>
-    
-    <div class="section">
-        <div class="section-header">📊 Player Statistics</div>
-        <div class="section-content">
-            <div class="stats-grid">
-                <div class="stat-card">
-                    <div class="stat-value">{player['level']}</div>
-                    <div class="stat-label">Level</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value">{player['experience']}</div>
-                    <div class="stat-label">Experience</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value">${player['money']}</div>
-                    <div class="stat-label">Money</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value">{total_pets}</div>
-                    <div class="stat-label">Pets Caught</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value">{active_count}</div>
-                    <div class="stat-label">Active Pets</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value">{len(achievements)}</div>
-                    <div class="stat-label">Achievements</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value">{encounter_stats.get('species_encountered', 0)}</div>
-                    <div class="stat-label">Species Seen</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-value">{encounter_stats.get('completion_percentage', 0)}%</div>
-                    <div class="stat-label">Petdex Complete</div>
-                </div>
-            </div>
-        </div>
-    </div>
-    
-    <div class="section">
-        <div class="section-header">🐾 Pet Collection</div>
-        <div class="section-content">
-            <table class="pets-table">
-                <thead>
-                    <tr>
-                        <th>Status</th>
-                        <th>Name</th>
-                        <th>Species</th>
-                        <th>Type</th>
-                        <th>Level</th>
-                        <th>HP</th>
-                        <th>Stats</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {pets_html}
-                </tbody>
-            </table>
-        </div>
-    </div>
-    
-    <div class="section">
-        <div class="section-header">🏆 Achievements</div>
-        <div class="section-content">
-            {achievements_html}
-        </div>
-    </div>
-    
-    <div class="section">
-        <div class="section-header">🎒 Inventory</div>
-        <div class="section-content">
-            {inventory_html}
-        </div>
-    </div>
-    
-    <div class="section">
-        <div class="section-header">🏆 Gym Badges</div>
-        <div class="section-content">
-            {badges_html}
-        </div>
-    </div>
-    
-    <div class="section">
-        <div class="section-header">👁️ Pet Encounters</div>
-        <div class="section-content">
-            <div style="margin-bottom: 20px; text-align: center; color: var(--text-secondary);">
-                <p>Species discovered: {encounter_stats.get('species_encountered', 0)}/{encounter_stats.get('total_species', 0)} 
-                ({encounter_stats.get('completion_percentage', 0)}% complete)</p>
-                <p>Total encounters: {encounter_stats.get('total_encounters', 0)}</p>
-            </div>
-            {encounters_html}
-        </div>
-    </div>
-</body>
-</html>"""
+        }
+        
+        .achievements-grid, .badges-grid, .encounters-grid, .inventory-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 15px;
+        }
+        
+        .achievement-card, .badge-card, .encounter-card, .inventory-item {
+            background: var(--bg-tertiary);
+            padding: 15px;
+            border-radius: 8px;
+            border-left: 4px solid var(--text-accent);
+            transition: transform 0.3s ease;
+        }
+        
+        .achievement-card:hover, .badge-card:hover, .encounter-card:hover, .inventory-item:hover {
+            transform: translateY(-3px);
+        }
+        
+        .achievement-card {
+            display: flex;
+            align-items: flex-start;
+            gap: 15px;
+        }
+        
+        .achievement-icon {
+            font-size: 1.5em;
+            flex-shrink: 0;
+        }
+        
+        .achievement-content h4 {
+            margin: 0 0 8px 0;
+            color: var(--text-accent);
+        }
+        
+        .achievement-content p {
+            margin: 0 0 8px 0;
+            color: var(--text-primary);
+        }
+        
+        .achievement-date {
+            color: var(--text-secondary);
+            font-size: 0.9em;
+        }
+        
+        .badge-card {
+            display: flex;
+            align-items: flex-start;
+            gap: 15px;
+            border-left-color: gold;
+        }
+        
+        .badge-icon {
+            font-size: 1.5em;
+            flex-shrink: 0;
+        }
+        
+        .badge-content h4 {
+            margin: 0 0 8px 0;
+            color: gold;
+        }
+        
+        .badge-content p {
+            margin: 0 0 10px 0;
+            color: var(--text-primary);
+        }
+        
+        .badge-stats {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+        
+        .badge-stats span {
+            color: var(--text-secondary);
+            font-size: 0.9em;
+        }
+        
+        .encounter-card {
+            border-left: 4px solid var(--text-accent);
+        }
+        
+        .encounter-header {
+            margin-bottom: 10px;
+        }
+        
+        .encounter-stats {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+            margin-bottom: 8px;
+        }
+        
+        .encounter-stats span {
+            color: var(--text-primary);
+            font-size: 0.9em;
+        }
+        
+        .encounter-date {
+            color: var(--text-secondary);
+            font-size: 0.9em;
+        }
+        
+        .inventory-item {
+            border-left: 4px solid var(--text-accent);
+        }
+        
+        .item-header {
+            margin-bottom: 8px;
+        }
+        
+        .item-description {
+            color: var(--text-primary);
+            margin-bottom: 8px;
+        }
+        
+        .item-meta {
+            color: var(--text-secondary);
+            font-size: 0.9em;
+        }
+        
+        .empty-state {
+            text-align: center;
+            padding: 40px;
+            color: var(--text-secondary);
+        }
+        
+        .empty-icon {
+            font-size: 3em;
+            margin-bottom: 15px;
+        }
+        
+        .empty-state h3 {
+            margin: 0 0 10px 0;
+            color: var(--text-primary);
+        }
+        
+        .empty-state p {
+            margin: 0;
+            font-size: 1.1em;
+        }
+        
+        .encounters-summary {
+            text-align: center;
+            margin-bottom: 20px;
+            padding: 15px;
+            background: var(--bg-tertiary);
+            border-radius: 8px;
+        }
+        
+        .encounters-summary p {
+            margin: 5px 0;
+            color: var(--text-secondary);
+        }
+        
+        .btn {
+            display: inline-block;
+            padding: 12px 24px;
+            border-radius: 6px;
+            text-decoration: none;
+            font-weight: 600;
+            text-align: center;
+            transition: all 0.3s ease;
+            border: none;
+            cursor: pointer;
+        }
+        
+        .btn-primary {
+            background: var(--gradient-primary);
+            color: white;
+        }
+        
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+        }
+        
+        /* Mobile Responsive */
+        @media (max-width: 768px) {
+            .stats-grid {
+                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+                gap: 15px;
+            }
+            
+            .stat-card {
+                padding: 15px;
+            }
+            
+            .stat-value {
+                font-size: 1.5em;
+            }
+            
+            .achievements-grid, .badges-grid, .encounters-grid, .inventory-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .nav-pill {
+                padding: 6px 12px;
+                font-size: 0.8em;
+                margin: 3px;
+            }
+            
+            .pets-table {
+                min-width: 500px;
+            }
+            
+            .pets-table th, .pets-table td {
+                padding: 8px 10px;
+                font-size: 0.9em;
+            }
+        }
+        """
+        
+        # Get the unified template with the additional CSS
+        html_content = self.get_page_template(f"{nickname}'s Profile", content, "players")
+        html_content = html_content.replace("</style>", additional_css + "</style>")
         
         self.send_response(200)
         self.send_header('Content-type', 'text/html')
         self.end_headers()
-        self.wfile.write(html.encode())
+        self.wfile.write(html_content.encode())
     
     def log_message(self, format, *args):
         """Override to reduce logging noise"""
@@ -2025,31 +2801,51 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
             self.serve_player_error(nickname, f"Error loading team builder: {str(e)}")
     
     def serve_teambuilder_no_pets(self, nickname):
-        """Show message when player has no pets"""
-        html = f"""<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Team Builder - {nickname}</title>
-    <style>
-        body {{ font-family: Arial, sans-serif; background: #0f0f23; color: #cccccc; text-align: center; padding: 50px; }}
-        .error {{ background: #2a2a4a; padding: 30px; border-radius: 10px; margin: 20px auto; max-width: 500px; }}
-    </style>
-</head>
-<body>
-    <div class="error">
-        <h2>🐾 No Pets Found</h2>
-        <p>{nickname}, you need to catch some pets before using the team builder!</p>
-        <p><a href="/player/{nickname}" style="color: #66ff66;">← Back to Profile</a></p>
-    </div>
-</body>
-</html>"""
+        """Show message when player has no pets using unified template"""
+        content = f"""
+        <div class="header">
+            <h1>🐾 Team Builder</h1>
+            <p>Build your perfect team for battles and adventures</p>
+        </div>
+        
+        <div class="no-pets-message">
+            <h2>🐾 No Pets Found</h2>
+            <p>{nickname}, you need to catch some pets before using the team builder!</p>
+            <p>Head to the IRC channel and use <code>!explore</code> to find wild pets!</p>
+            <a href="/player/{nickname}" class="btn btn-primary">← Back to Profile</a>
+        </div>
+        """
+        
+        # Add no-pets-specific CSS
+        additional_css = """
+        .main-container {
+            text-align: center;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        
+        .no-pets-message {
+            background: var(--bg-secondary);
+            padding: 40px;
+            border-radius: 15px;
+            border: 2px solid var(--warning-color);
+            margin-top: 30px;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+        }
+        
+        .no-pets-message h2 {
+            color: var(--warning-color);
+            margin-top: 0;
+        }
+        """
+        
+        html_content = self.get_page_template(f"Team Builder - {nickname}", content, "players")
+        html_content = html_content.replace("</style>", additional_css + "</style>")
         
         self.send_response(200)
         self.send_header('Content-type', 'text/html')
         self.end_headers()
-        self.wfile.write(html.encode())
+        self.wfile.write(html_content.encode())
     
     def serve_teambuilder_interface(self, nickname, pets):
         """Serve the full interactive team builder interface"""
@@ -2074,14 +2870,14 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                 type_str += f"/{pet['type2']}"
             
             # Debug logging
-            print(f"Making pet card for {name} (ID: {pet['id']}): is_active={pet['is_active']}, passed_is_active={is_active}, status_class={status_class}")
+            print(f"Making pet card for {name} (ID: {pet['id']}): is_active={pet['is_active']}, passed_is_active={is_active}, status_class={status_class}, team_order={pet.get('team_order', 'None')}")
             
             # Calculate HP percentage for health bar
             hp_percent = (pet['hp'] / pet['max_hp']) * 100 if pet['max_hp'] > 0 else 0
             hp_color = "#4CAF50" if hp_percent > 60 else "#FF9800" if hp_percent > 25 else "#f44336"
             
             return f"""
-            <div class="pet-card {status_class}" draggable="true" data-pet-id="{pet['id']}" data-active="{str(is_active).lower()}">
+            <div class="pet-card {status_class}" draggable="true" data-pet-id="{pet['id']}" data-active="{str(is_active).lower()}" data-team-order="{pet.get('team_order', '')}">
                 <div class="pet-header">
                     <h4 class="pet-name">{name}</h4>
                     <div class="status-badge">{status}</div>
@@ -2121,7 +2917,15 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                 </div>
             </div>"""
         
-        active_cards = ''.join(make_pet_card(pet, True) for pet in active_pets)
+        # Create 6 numbered slots and place pets in their positions
+        team_slots = [''] * 6  # Initialize 6 empty slots
+        
+        # Place active pets in their team_order positions
+        for pet in active_pets:
+            team_order = pet.get('team_order')
+            if team_order and 1 <= team_order <= 6:
+                team_slots[team_order - 1] = make_pet_card(pet, True)
+        
         storage_cards = ''.join(make_pet_card(pet, False) for pet in inactive_pets)
         
         html = f"""<!DOCTYPE html>
@@ -2203,6 +3007,75 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
             min-height: 200px;
         }}
         
+        .team-slots-container {{
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 15px;
+            min-height: 400px;
+        }}
+        
+        .team-slot {{
+            background: var(--bg-tertiary);
+            border: 2px dashed #666;
+            border-radius: 12px;
+            padding: 10px;
+            position: relative;
+            min-height: 120px;
+            transition: all 0.3s ease;
+            display: flex;
+            flex-direction: column;
+        }}
+        
+        .team-slot:hover {{
+            border-color: var(--text-accent);
+            background: var(--drag-hover);
+        }}
+        
+        .team-slot.drag-over {{
+            border-color: var(--text-accent);
+            background: var(--drag-hover);
+            border-style: solid;
+            transform: scale(1.02);
+        }}
+        
+        .slot-number {{
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            background: var(--active-color);
+            color: white;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.9em;
+            font-weight: bold;
+            z-index: 10;
+        }}
+        
+        .slot-content {{
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }}
+        
+        .slot-content:empty::before {{
+            content: "Empty Slot";
+            color: var(--text-secondary);
+            font-style: italic;
+            opacity: 0.7;
+        }}
+        
+        .slot-content .pet-card {{
+            margin: 0;
+            width: 100%;
+            max-width: none;
+        }}
+        
         .pet-card {{
             background: var(--bg-tertiary);
             border-radius: 12px;
@@ -2499,11 +3372,31 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
     <div class="team-sections">
         <div class="team-section">
             <div class="section-header active-header">⭐ Active Team</div>
-            <div class="pets-container" id="active-container">
-                {active_cards}
-            </div>
-            <div class="drop-zone {('has-pets' if active_pets else '')}" id="active-drop">
-                Drop pets here to add to your active team
+            <div class="team-slots-container" id="team-slots-container">
+                <div class="team-slot" id="slot-1" data-position="1">
+                    <div class="slot-number">1</div>
+                    <div class="slot-content">{team_slots[0]}</div>
+                </div>
+                <div class="team-slot" id="slot-2" data-position="2">
+                    <div class="slot-number">2</div>
+                    <div class="slot-content">{team_slots[1]}</div>
+                </div>
+                <div class="team-slot" id="slot-3" data-position="3">
+                    <div class="slot-number">3</div>
+                    <div class="slot-content">{team_slots[2]}</div>
+                </div>
+                <div class="team-slot" id="slot-4" data-position="4">
+                    <div class="slot-number">4</div>
+                    <div class="slot-content">{team_slots[3]}</div>
+                </div>
+                <div class="team-slot" id="slot-5" data-position="5">
+                    <div class="slot-number">5</div>
+                    <div class="slot-content">{team_slots[4]}</div>
+                </div>
+                <div class="team-slot" id="slot-6" data-position="6">
+                    <div class="slot-number">6</div>
+                    <div class="slot-content">{team_slots[5]}</div>
+                </div>
             </div>
         </div>
         
@@ -2578,14 +3471,23 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                 // Add double-click handler
                 card.addEventListener('dblclick', function() {{
                     const petId = this.dataset.petId;
-                    const isActive = currentTeam[petId];
+                    const currentPosition = currentTeam[petId];
                     
-                    console.log(`Double-click: Moving pet ${{petId}} from ${{isActive ? 'active' : 'storage'}} to ${{isActive ? 'storage' : 'active'}}`);
+                    console.log(`Double-click: Moving pet ${{petId}} from ${{currentPosition ? `team slot ${{currentPosition}}` : 'storage'}}`);
                     
-                    if (isActive) {{
+                    if (currentPosition) {{
                         movePetToStorage(petId);
                     }} else {{
-                        movePetToActive(petId);
+                        // Find first empty slot
+                        for (let i = 1; i <= 6; i++) {{
+                            const slot = document.getElementById(`slot-${{i}}`);
+                            const slotContent = slot.querySelector('.slot-content');
+                            if (slotContent.children.length === 0) {{
+                                movePetToTeamSlot(petId, i);
+                                return;
+                            }}
+                        }}
+                        console.log('No empty slots available');
                     }}
                 }});
                 
@@ -2602,49 +3504,42 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
         }}
         
         // Declare container variables once at the top level
-        const activeContainer = document.getElementById('active-container');
+        const teamSlotsContainer = document.getElementById('team-slots-container');
         const storageContainer = document.getElementById('storage-container');
-        const activeDrop = document.getElementById('active-drop');
         const storageDrop = document.getElementById('storage-drop');
+        const teamSlots = Array.from({{length: 6}}, (_, i) => document.getElementById(`slot-${{i + 1}}`));
         
         // Initialize team state with detailed debugging
         console.log('=== TEAM STATE INITIALIZATION ===');
         const allCards = document.querySelectorAll('.pet-card');
         console.log(`Found ${{allCards.length}} pet cards total`);
-        console.log(`Active container has ${{activeContainer.children.length}} pets initially`);
+        console.log(`Team slots container:`, teamSlotsContainer);
         console.log(`Storage container has ${{storageContainer.children.length}} pets initially`);
         
+        let teamPositions = {{}};  // Track pet positions in team slots
+        
         allCards.forEach((card, index) => {{
             const petId = card.dataset.petId;
             const isActive = card.dataset.active === 'true';
-            const currentContainer = card.parentElement.id;
+            const teamOrder = card.dataset.teamOrder;
             
-            console.log(`Pet ${{index}}: ID=${{petId}}, data-active=${{card.dataset.active}}, isActive=${{isActive}}, currentContainer=${{currentContainer}}`);
+            console.log(`Pet ${{index}}: ID=${{petId}}, data-active=${{card.dataset.active}}, isActive=${{isActive}}, team_order=${{teamOrder}}`);
             
-            originalTeam[petId] = isActive;
-            currentTeam[petId] = isActive;
-            
-            // CRITICAL: Verify container placement is correct - DO NOT MOVE unless absolutely necessary
-            const expectedContainer = isActive ? activeContainer : storageContainer;
-            const expectedContainerId = isActive ? 'active-container' : 'storage-container';
-            
-            if (currentContainer !== expectedContainerId) {{
-                console.error(`MISMATCH! Pet ${{petId}} is in ${{currentContainer}} but should be in ${{expectedContainerId}} based on data-active=${{card.dataset.active}}`);
-                console.log(`Moving pet ${{petId}} to correct container...`);
-                expectedContainer.appendChild(card);
+            if (isActive && teamOrder) {{
+                teamPositions[petId] = parseInt(teamOrder);
+                originalTeam[petId] = parseInt(teamOrder);
+                currentTeam[petId] = parseInt(teamOrder);
             }} else {{
-                console.log(`Pet ${{petId}} correctly placed in ${{currentContainer}}`);
+                originalTeam[petId] = false;
+                currentTeam[petId] = false;
             }}
         }});
         
-        console.log('After initialization:');
-        console.log(`Active container now has ${{activeContainer.children.length}} pets`);
-        console.log(`Storage container now has ${{storageContainer.children.length}} pets`);
-        
+        console.log('Team positions:', teamPositions);
         console.log('Original team state:', originalTeam);
         console.log('Current team state:', currentTeam);
         
-        // Completely rewritten drag and drop - simpler approach
+        // Completely rewritten drag and drop for slot system
         function initializeDragAndDrop() {{
             console.log('Initializing drag and drop...');
             
@@ -2678,43 +3573,43 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                 }});
             }});
             
-            // Set up drop zones (using previously declared variables)
-            
-            [activeContainer, activeDrop].forEach(zone => {{
-                if (zone) {{
-                    zone.addEventListener('dragover', function(e) {{
-                        e.preventDefault();
-                        if (e.dataTransfer) {{
-                            e.dataTransfer.dropEffect = 'move';
-                        }}
-                    }});
-                    
-                    zone.addEventListener('dragenter', function(e) {{
-                        e.preventDefault();
-                        this.classList.add('drag-over');
-                        console.log('DRAGENTER: Active zone');
-                    }});
-                    
-                    zone.addEventListener('dragleave', function(e) {{
-                        if (!this.contains(e.relatedTarget)) {{
-                            this.classList.remove('drag-over');
-                        }}
-                    }});
-                    
-                    zone.addEventListener('drop', function(e) {{
-                        e.preventDefault();
-                        console.log('DROP: Active zone');
+            // Set up team slot drop zones
+            teamSlots.forEach((slot, index) => {{
+                const position = index + 1;
+                
+                slot.addEventListener('dragover', function(e) {{
+                    e.preventDefault();
+                    if (e.dataTransfer) {{
+                        e.dataTransfer.dropEffect = 'move';
+                    }}
+                }});
+                
+                slot.addEventListener('dragenter', function(e) {{
+                    e.preventDefault();
+                    this.classList.add('drag-over');
+                    console.log(`DRAGENTER: Team slot ${{position}}`);
+                }});
+                
+                slot.addEventListener('dragleave', function(e) {{
+                    if (!this.contains(e.relatedTarget)) {{
                         this.classList.remove('drag-over');
-                        
-                        if (draggedElement) {{
-                            const petId = draggedElement.dataset.petId;
-                            console.log('Moving pet', petId, 'to active');
-                            movePetToActive(petId);
-                        }}
-                    }});
-                }}
+                    }}
+                }});
+                
+                slot.addEventListener('drop', function(e) {{
+                    e.preventDefault();
+                    console.log(`DROP: Team slot ${{position}}`);
+                    this.classList.remove('drag-over');
+                    
+                    if (draggedElement) {{
+                        const petId = draggedElement.dataset.petId;
+                        console.log(`Moving pet ${{petId}} to team slot ${{position}}`);
+                        movePetToTeamSlot(petId, position);
+                    }}
+                }});
             }});
             
+            // Set up storage drop zones
             [storageContainer, storageDrop].forEach(zone => {{
                 if (zone) {{
                     zone.addEventListener('dragover', function(e) {{
@@ -2753,39 +3648,48 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
             console.log('Drag and drop initialization complete');
         }}
         
-        function movePetToActive(petId) {{
-            console.log(`movePetToActive called for pet ${{petId}}`);
+        function movePetToTeamSlot(petId, position) {{
+            console.log(`movePetToTeamSlot called for pet ${{petId}}, position ${{position}}`);
             const card = document.querySelector(`[data-pet-id="${{petId}}"]`);
             if (!card) {{
                 console.log(`No card found for pet ${{petId}}`);
                 return;
             }}
             
-            const currentIsActive = currentTeam[petId];
-            
-            console.log(`Pet ${{petId}} current state: ${{currentIsActive ? 'active' : 'storage'}}`);
-            
-            if (!currentIsActive) {{
-                console.log(`Moving pet ${{petId}} to active...`);
-                
-                // Update state
-                currentTeam[petId] = true;
-                
-                // Move DOM element
-                card.classList.remove('storage');
-                card.classList.add('active');
-                card.dataset.active = 'true';
-                card.querySelector('.status-badge').textContent = 'Active';
-                activeContainer.appendChild(card);
-                
-                // Update interface
-                updateSaveButton();
-                updateDropZoneVisibility();
-                
-                console.log('Pet moved to active successfully');
-            }} else {{
-                console.log(`Pet ${{petId}} is already active, no move needed`);
+            const slot = document.getElementById(`slot-${{position}}`);
+            if (!slot) {{
+                console.log(`No slot found for position ${{position}}`);
+                return;
             }}
+            
+            const slotContent = slot.querySelector('.slot-content');
+            
+            // Check if slot is already occupied
+            if (slotContent.children.length > 0) {{
+                console.log(`Slot ${{position}} is already occupied, swapping pets`);
+                const existingCard = slotContent.querySelector('.pet-card');
+                if (existingCard) {{
+                    const existingPetId = existingCard.dataset.petId;
+                    // Move existing pet to storage
+                    movePetToStorage(existingPetId);
+                }}
+            }}
+            
+            // Update state
+            currentTeam[petId] = position;
+            
+            // Move DOM element
+            card.classList.remove('storage');
+            card.classList.add('active');
+            card.dataset.active = 'true';
+            card.dataset.teamOrder = position;
+            card.querySelector('.status-badge').textContent = 'Active';
+            slotContent.appendChild(card);
+            
+            // Update interface
+            updateSaveButton();
+            
+            console.log(`Pet moved to team slot ${{position}} successfully`);
         }}
         
         function movePetToStorage(petId) {{
@@ -2796,11 +3700,11 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                 return;
             }}
             
-            const currentIsActive = currentTeam[petId];
+            const currentPosition = currentTeam[petId];
             
-            console.log(`Pet ${{petId}} current state: ${{currentIsActive ? 'active' : 'storage'}}`);
+            console.log(`Pet ${{petId}} current state: ${{currentPosition ? `team slot ${{currentPosition}}` : 'storage'}}`);
             
-            if (currentIsActive) {{
+            if (currentPosition) {{
                 console.log(`Moving pet ${{petId}} to storage...`);
                 
                 // Update state
@@ -2810,6 +3714,7 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
                 card.classList.remove('active');
                 card.classList.add('storage');
                 card.dataset.active = 'false';
+                card.dataset.teamOrder = '';
                 card.querySelector('.status-badge').textContent = 'Storage';
                 storageContainer.appendChild(card);
                 
@@ -2825,16 +3730,7 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
         
         
         function updateDropZoneVisibility() {{
-            // Using previously declared container variables
-            
-            // CRITICAL: Only update visual indicators, never move pets
-            // Use CSS classes instead of direct style manipulation
-            if (activeContainer && activeContainer.children.length > 0) {{
-                if (activeDrop) activeDrop.classList.add('has-pets');
-            }} else {{
-                if (activeDrop) activeDrop.classList.remove('has-pets');
-            }}
-            
+            // Update storage drop zone visibility
             if (storageContainer && storageContainer.children.length > 0) {{
                 if (storageDrop) storageDrop.classList.add('has-pets');
             }} else {{
@@ -2842,7 +3738,6 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
             }}
             
             console.log('Drop zone visibility updated:', {{
-                activeContainerPets: activeContainer ? activeContainer.children.length : 0,
                 storageContainerPets: storageContainer ? storageContainer.children.length : 0
             }});
         }}
@@ -3006,10 +3901,716 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
 </body>
 </html>"""
         
+        # Generate storage pets HTML first
+        storage_pets_html = ""
+        for pet in inactive_pets:
+            storage_pets_html += make_pet_card(pet, False)
+        
+        # Generate active pets HTML for team slots
+        active_pets_html = ""
+        for pet in active_pets:
+            if pet.get('team_order'):
+                active_pets_html += make_pet_card(pet, True)
+        
+        # Create content using string concatenation instead of f-strings to avoid CSS brace issues
+        team_builder_content = """
+        <style>
+        /* Team Builder Specific CSS */
+        .team-builder-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .header h1 {
+            color: var(--text-accent);
+            font-size: 2.5em;
+            margin: 0;
+        }
+
+        .team-sections {
+            margin-top: 30px;
+        }
+
+        .section {
+            margin-bottom: 40px;
+        }
+
+        .section h2 {
+            color: var(--text-accent);
+            border-bottom: 2px solid var(--accent-blue);
+            padding-bottom: 10px;
+            margin-bottom: 20px;
+        }
+
+        .team-slots-container {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-template-rows: repeat(2, 1fr);
+            gap: 15px;
+            margin-bottom: 30px;
+            justify-content: center;
+        }
+
+        .team-slot {
+            background: var(--bg-secondary);
+            border: 2px dashed var(--border-color);
+            border-radius: 12px;
+            min-height: 200px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            position: relative;
+            transition: all 0.3s ease;
+        }
+
+        .team-slot:hover {
+            border-color: var(--accent-blue);
+            background: var(--hover-color);
+        }
+
+        .team-slot.drag-over {
+            border-color: var(--text-accent);
+            background: var(--hover-color);
+            transform: scale(1.02);
+        }
+
+        .slot-header {
+            position: absolute;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-weight: bold;
+            color: var(--text-accent);
+            font-size: 1.1em;
+        }
+
+        .slot-content {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .empty-slot {
+            color: var(--text-secondary);
+            font-style: italic;
+            text-align: center;
+        }
+
+        .storage-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
+        }
+
+        .pet-card {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            padding: 15px;
+            cursor: move;
+            user-select: none;
+            transition: all 0.3s ease;
+            position: relative;
+        }
+
+        .pet-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            border-color: var(--accent-blue);
+        }
+
+        .pet-card.active {
+            border-color: var(--text-accent);
+            background: var(--bg-tertiary);
+        }
+
+        .pet-card.storage {
+            border-color: var(--border-color);
+        }
+
+        .pet-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+
+        .pet-name {
+            color: var(--text-primary);
+            margin: 0;
+            font-size: 1.2em;
+        }
+
+        .status-badge {
+            background: var(--accent-blue);
+            color: white;
+            padding: 4px 8px;
+            border-radius: 6px;
+            font-size: 0.8em;
+            font-weight: bold;
+        }
+
+        .pet-card.active .status-badge {
+            background: var(--text-accent);
+        }
+
+        .pet-species, .pet-type {
+            color: var(--text-secondary);
+            margin: 5px 0;
+        }
+
+        .hp-section {
+            margin: 10px 0;
+        }
+
+        .hp-label {
+            font-size: 0.9em;
+            color: var(--text-secondary);
+        }
+
+        .hp-bar {
+            background: var(--bg-primary);
+            height: 8px;
+            border-radius: 4px;
+            overflow: hidden;
+            margin-top: 4px;
+        }
+
+        .hp-fill {
+            height: 100%;
+            transition: width 0.3s ease;
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 8px;
+            margin-top: 10px;
+        }
+
+        .stat {
+            text-align: center;
+        }
+
+        .stat-label {
+            font-size: 0.7em;
+            color: var(--text-secondary);
+            display: block;
+        }
+
+        .stat-value {
+            font-weight: bold;
+            color: var(--text-primary);
+        }
+
+        .controls {
+            text-align: center;
+            margin: 30px 0;
+        }
+
+        .save-btn {
+            background: var(--text-accent);
+            color: var(--bg-primary);
+            border: none;
+            padding: 12px 30px;
+            border-radius: 8px;
+            font-size: 1.1em;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-right: 15px;
+        }
+
+        .save-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(102, 255, 102, 0.3);
+        }
+
+        .save-btn:disabled {
+            background: var(--text-secondary);
+            cursor: not-allowed;
+        }
+
+        .back-btn {
+            background: var(--accent-blue);
+            color: white;
+            padding: 12px 20px;
+            border-radius: 8px;
+            text-decoration: none;
+            display: inline-block;
+            transition: all 0.3s ease;
+        }
+
+        .back-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(74, 171, 247, 0.3);
+        }
+
+        .pin-section {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            padding: 30px;
+            margin: 20px 0;
+            text-align: center;
+            display: none;
+        }
+
+        .pin-input {
+            background: var(--bg-tertiary);
+            border: 2px solid var(--border-color);
+            border-radius: 8px;
+            padding: 15px;
+            font-size: 1.5em;
+            color: var(--text-primary);
+            text-align: center;
+            width: 200px;
+            margin: 15px;
+        }
+
+        .verify-btn {
+            background: var(--success-color);
+            color: white;
+            border: none;
+            padding: 12px 25px;
+            border-radius: 8px;
+            font-size: 1.1em;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .verify-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(81, 207, 102, 0.3);
+        }
+
+        .message {
+            padding: 15px;
+            border-radius: 8px;
+            margin: 15px 0;
+        }
+
+        .message.success {
+            background: var(--success-color);
+            color: white;
+        }
+
+        .message.error {
+            background: var(--error-color);
+            color: white;
+        }
+
+        .drag-hint {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: rgba(0,0,0,0.8);
+            color: white;
+            padding: 15px;
+            border-radius: 8px;
+            font-size: 12px;
+            z-index: 9999;
+            max-width: 250px;
+        }
+
+        @keyframes bounce {
+            0%, 20%, 60%, 100% { transform: translateY(0); }
+            40% { transform: translateY(-10px); }
+            80% { transform: translateY(-5px); }
+        }
+        </style>
+
+        <div class="team-builder-container">
+            <div class="header">
+                <h1>🐾 Team Builder</h1>
+                <p>Drag pets between Active Team and Storage. Double-click as backup.</p>
+            </div>
+
+            <div class="team-sections">
+                <div class="section">
+                    <h2>⚔️ Active Team (1-6 pets)</h2>
+                    <div class="team-slots-container" id="team-slots-container">
+                        <div class="team-slot" id="slot-1">
+                            <div class="slot-header">Slot 1 (Leader)</div>
+                            <div class="slot-content">
+                                <div class="empty-slot">Drop pet here</div>
+                            </div>
+                        </div>
+                        <div class="team-slot" id="slot-2">
+                            <div class="slot-header">Slot 2</div>
+                            <div class="slot-content">
+                                <div class="empty-slot">Drop pet here</div>
+                            </div>
+                        </div>
+                        <div class="team-slot" id="slot-3">
+                            <div class="slot-header">Slot 3</div>
+                            <div class="slot-content">
+                                <div class="empty-slot">Drop pet here</div>
+                            </div>
+                        </div>
+                        <div class="team-slot" id="slot-4">
+                            <div class="slot-header">Slot 4</div>
+                            <div class="slot-content">
+                                <div class="empty-slot">Drop pet here</div>
+                            </div>
+                        </div>
+                        <div class="team-slot" id="slot-5">
+                            <div class="slot-header">Slot 5</div>
+                            <div class="slot-content">
+                                <div class="empty-slot">Drop pet here</div>
+                            </div>
+                        </div>
+                        <div class="team-slot" id="slot-6">
+                            <div class="slot-header">Slot 6</div>
+                            <div class="slot-content">
+                                <div class="empty-slot">Drop pet here</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="section">
+                    <h2>📦 Storage</h2>
+                    <div class="storage-container" id="storage-container">
+                        """ + storage_pets_html + active_pets_html + """
+                    </div>
+                </div>
+            </div>
+
+            <div class="controls">
+                <button class="save-btn" id="save-btn" onclick="saveTeam()">🔒 Save Team Changes</button>
+                <a href="/player/""" + nickname + """" class="back-btn">← Back to Profile</a>
+                <div style="margin-top: 15px; color: var(--text-secondary); font-size: 0.9em;">
+                    Changes are saved securely with PIN verification via IRC
+                </div>
+            </div>
+            
+            <div class="pin-section" id="pin-section">
+                <h3>🔐 PIN Verification Required</h3>
+                <p>A 6-digit PIN has been sent to you via IRC private message.</p>
+                <p>Enter the PIN below to confirm your team changes:</p>
+                <input type="text" class="pin-input" id="pin-input" placeholder="000000" maxlength="6">
+                <button class="verify-btn" onclick="verifyPin()">✅ Verify & Apply Changes</button>
+                <div id="message-area"></div>
+            </div>
+        </div>
+
+        <div class="drag-hint">
+            💡 <strong>How to use:</strong><br>
+            • Drag pets to team slots<br>
+            • Double-click to move pets<br>
+            • Empty slots show placeholders
+        </div>
+
+        <script>
+        let originalTeam = {};
+        let currentTeam = {};
+        let draggedElement = null;
+
+        // Initialize when DOM is ready
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('Team Builder: DOM loaded, initializing...');
+            initializeTeamBuilder();
+        });
+
+        function initializeTeamBuilder() {
+            console.log('Team Builder: Starting initialization...');
+            
+            // Initialize team state
+            const allCards = document.querySelectorAll('.pet-card');
+            console.log(`Found ${allCards.length} pet cards`);
+            
+            allCards.forEach(card => {
+                const petId = card.dataset.petId;
+                const isActive = card.dataset.active === 'true';
+                const teamOrder = card.dataset.teamOrder;
+                
+                if (isActive && teamOrder) {
+                    originalTeam[petId] = parseInt(teamOrder);
+                    currentTeam[petId] = parseInt(teamOrder);
+                    
+                    // Move to correct slot
+                    const slot = document.getElementById(`slot-${teamOrder}`);
+                    if (slot) {
+                        const slotContent = slot.querySelector('.slot-content');
+                        slotContent.innerHTML = '';
+                        slotContent.appendChild(card);
+                    }
+                } else {
+                    originalTeam[petId] = false;
+                    currentTeam[petId] = false;
+                }
+            });
+            
+            console.log('Team state initialized:', originalTeam);
+            
+            // Initialize drag and drop
+            initializeDragAndDrop();
+            
+            // Initialize double-click backup
+            initializeDoubleClick();
+            
+            // Update save button
+            updateSaveButton();
+            
+            console.log('Team Builder: Initialization complete');
+        }
+
+        function initializeDragAndDrop() {
+            console.log('Initializing drag and drop...');
+            
+            // Make pet cards draggable
+            document.querySelectorAll('.pet-card').forEach(card => {
+                card.draggable = true;
+                
+                card.addEventListener('dragstart', function(e) {
+                    draggedElement = this;
+                    this.style.opacity = '0.5';
+                    console.log('Drag started:', this.dataset.petId);
+                });
+                
+                card.addEventListener('dragend', function(e) {
+                    this.style.opacity = '';
+                    draggedElement = null;
+                    document.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));
+                });
+            });
+            
+            // Set up team slot drop zones
+            for (let i = 1; i <= 6; i++) {
+                const slot = document.getElementById(`slot-${i}`);
+                if (slot) {
+                    slot.addEventListener('dragover', e => e.preventDefault());
+                    slot.addEventListener('dragenter', function(e) {
+                        e.preventDefault();
+                        this.classList.add('drag-over');
+                    });
+                    slot.addEventListener('dragleave', function(e) {
+                        if (!this.contains(e.relatedTarget)) {
+                            this.classList.remove('drag-over');
+                        }
+                    });
+                    slot.addEventListener('drop', function(e) {
+                        e.preventDefault();
+                        this.classList.remove('drag-over');
+                        if (draggedElement) {
+                            movePetToTeamSlot(draggedElement.dataset.petId, i);
+                        }
+                    });
+                }
+            }
+            
+            // Set up storage drop zone
+            const storageContainer = document.getElementById('storage-container');
+            if (storageContainer) {
+                storageContainer.addEventListener('dragover', e => e.preventDefault());
+                storageContainer.addEventListener('dragenter', function(e) {
+                    e.preventDefault();
+                    this.classList.add('drag-over');
+                });
+                storageContainer.addEventListener('dragleave', function(e) {
+                    if (!this.contains(e.relatedTarget)) {
+                        this.classList.remove('drag-over');
+                    }
+                });
+                storageContainer.addEventListener('drop', function(e) {
+                    e.preventDefault();
+                    this.classList.remove('drag-over');
+                    if (draggedElement) {
+                        movePetToStorage(draggedElement.dataset.petId);
+                    }
+                });
+            }
+        }
+
+        function initializeDoubleClick() {
+            document.querySelectorAll('.pet-card').forEach(card => {
+                card.addEventListener('dblclick', function() {
+                    const petId = this.dataset.petId;
+                    const currentPosition = currentTeam[petId];
+                    
+                    if (currentPosition) {
+                        // Move to storage
+                        movePetToStorage(petId);
+                    } else {
+                        // Find first empty slot
+                        for (let i = 1; i <= 6; i++) {
+                            const slot = document.getElementById(`slot-${i}`);
+                            const slotContent = slot.querySelector('.slot-content');
+                            if (slotContent.children.length === 0 || slotContent.querySelector('.empty-slot')) {
+                                movePetToTeamSlot(petId, i);
+                                return;
+                            }
+                        }
+                        console.log('No empty slots available');
+                    }
+                });
+            });
+        }
+
+        function movePetToTeamSlot(petId, position) {
+            console.log(`Moving pet ${petId} to slot ${position}`);
+            const card = document.querySelector(`[data-pet-id="${petId}"]`);
+            const slot = document.getElementById(`slot-${position}`);
+            
+            if (!card || !slot) return;
+            
+            const slotContent = slot.querySelector('.slot-content');
+            
+            // If slot is occupied, move existing pet to storage
+            const existingCard = slotContent.querySelector('.pet-card');
+            if (existingCard) {
+                movePetToStorage(existingCard.dataset.petId);
+            }
+            
+            // Update state
+            currentTeam[petId] = position;
+            
+            // Update card
+            card.classList.remove('storage');
+            card.classList.add('active');
+            card.dataset.active = 'true';
+            card.dataset.teamOrder = position;
+            card.querySelector('.status-badge').textContent = 'Active';
+            
+            // Move to slot
+            slotContent.innerHTML = '';
+            slotContent.appendChild(card);
+            
+            updateSaveButton();
+        }
+
+        function movePetToStorage(petId) {
+            console.log(`Moving pet ${petId} to storage`);
+            const card = document.querySelector(`[data-pet-id="${petId}"]`);
+            const storageContainer = document.getElementById('storage-container');
+            
+            if (!card || !storageContainer) return;
+            
+            // Update state
+            currentTeam[petId] = false;
+            
+            // Update card
+            card.classList.remove('active');
+            card.classList.add('storage');
+            card.dataset.active = 'false';
+            card.dataset.teamOrder = '';
+            card.querySelector('.status-badge').textContent = 'Storage';
+            
+            // Move to storage
+            storageContainer.appendChild(card);
+            
+            updateSaveButton();
+        }
+
+        function updateSaveButton() {
+            const saveBtn = document.getElementById('save-btn');
+            const hasChanges = JSON.stringify(originalTeam) !== JSON.stringify(currentTeam);
+            saveBtn.disabled = !hasChanges;
+            saveBtn.textContent = hasChanges ? '🔒 Save Team Changes' : '✅ No Changes';
+        }
+
+        async function saveTeam() {
+            const teamData = {};
+            Object.entries(currentTeam).forEach(([petId, position]) => {
+                teamData[petId] = position;
+            });
+
+            try {
+                const response = await fetch('/teambuilder/""" + nickname + """/save', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(teamData)
+                });
+
+                const result = await response.json();
+                if (result.success) {
+                    document.getElementById('pin-section').style.display = 'block';
+                    showMessage('PIN sent to IRC! Check your private messages.', 'success');
+                } else {
+                    showMessage('Error: ' + result.error, 'error');
+                }
+            } catch (error) {
+                showMessage('Network error: ' + error.message, 'error');
+            }
+        }
+
+        async function verifyPin() {
+            const pin = document.getElementById('pin-input').value;
+            if (!pin || pin.length !== 6) {
+                showMessage('Please enter a 6-digit PIN', 'error');
+                return;
+            }
+
+            try {
+                const response = await fetch('/teambuilder/""" + nickname + """/verify', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ pin: pin })
+                });
+
+                const result = await response.json();
+                if (result.success) {
+                    showMessage('Team saved successfully!', 'success');
+                    originalTeam = { ...currentTeam };
+                    updateSaveButton();
+                    document.getElementById('pin-section').style.display = 'none';
+                    document.getElementById('pin-input').value = '';
+                    
+                    // Celebration animation
+                    document.querySelectorAll('.pet-card').forEach(card => {
+                        card.style.animation = 'bounce 0.6s ease-in-out';
+                    });
+                    setTimeout(() => {
+                        document.querySelectorAll('.pet-card').forEach(card => {
+                            card.style.animation = '';
+                        });
+                    }, 600);
+                } else {
+                    showMessage('Verification failed: ' + result.error, 'error');
+                }
+            } catch (error) {
+                showMessage('Network error: ' + error.message, 'error');
+            }
+        }
+
+        function showMessage(text, type) {
+            const messageArea = document.getElementById('message-area');
+            messageArea.innerHTML = `<div class="message ${type}">${text}</div>`;
+            
+            if (type === 'success') {
+                setTimeout(() => {
+                    messageArea.innerHTML = '';
+                }, 5000);
+            }
+        }
+
+        // PIN input keyboard support
+        document.getElementById('pin-input').addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                verifyPin();
+            }
+        });
+        </script>
+        """
+        
+        # Get the unified template
+        html_content = self.get_page_template(f"Team Builder - {nickname}", team_builder_content, "")
+        
         self.send_response(200)
         self.send_header('Content-type', 'text/html')
         self.end_headers()
-        self.wfile.write(html.encode())
+        self.wfile.write(html_content.encode())
     
     def handle_team_save(self, nickname):
         """Handle team save request and generate PIN"""
@@ -3145,90 +4746,94 @@ class PetBotRequestHandler(BaseHTTPRequestHandler):
         print(f"🔐 PIN for {nickname}: {pin_code}")
         
         # Try to send via IRC bot if available
-        try:
-            # Check if the bot instance is accessible via global state
-            import sys
-            if hasattr(sys.modules.get('__main__'), 'bot_instance'):
-                bot = sys.modules['__main__'].bot_instance
-                if hasattr(bot, 'send_message'):
-                    # Send directly via bot's send_message method (non-async)
-                    message = f"🔐 Team Builder PIN: {pin_code} (expires in 10 minutes)"
-                    bot.send_message(nickname, message)
-                    print(f"✅ PIN sent to {nickname} via IRC")
-                    return
-        except Exception as e:
-            print(f"Could not send PIN via IRC bot: {e}")
-        
-        # Fallback: just print to console for now
-        print(f"⚠️ IRC bot not available - PIN displayed in console only")
-    
-    def send_json_response(self, data, status_code=200):
-        """Send JSON response"""
-        import json
-        response = json.dumps(data)
-        
-        self.send_response(status_code)
-        self.send_header('Content-type', 'application/json')
-        self.end_headers()
-        self.wfile.write(response.encode())
+        if self.bot and hasattr(self.bot, 'send_message'):
+            try:
+                # Send PIN via private message
+                self.bot.send_message(nickname, f"🔐 Team Builder PIN: {pin_code}")
+                self.bot.send_message(nickname, f"💡 Enter this PIN on the web page to confirm your team changes. PIN expires in 10 minutes.")
+                print(f"✅ PIN sent to {nickname} via IRC")
+            except Exception as e:
+                print(f"❌ Failed to send PIN via IRC: {e}")
+        else:
+            print(f"❌ No IRC bot available to send PIN to {nickname}")
+            print(f"💡 Manual PIN for {nickname}: {pin_code}")
+
 
 class PetBotWebServer:
-    def __init__(self, database, port=8080):
-        self.database = database
+    """Standalone web server for PetBot"""
+    
+    def __init__(self, database=None, port=8080, bot=None):
+        self.database = database or Database()
         self.port = port
+        self.bot = bot
         self.server = None
-        
+    
     def run(self):
-        """Start the HTTP web server"""
-        print(f"🌐 Starting PetBot web server on http://0.0.0.0:{self.port}")
-        print(f"📡 Accessible from WSL at: http://172.27.217.61:{self.port}")
-        print(f"📡 Accessible from Windows at: http://localhost:{self.port}")
+        """Start the web server"""
         self.server = HTTPServer(('0.0.0.0', self.port), PetBotRequestHandler)
-        # Pass database to the server so handlers can access it
         self.server.database = self.database
+        self.server.bot = self.bot
+        
+        print(f'🌐 Starting PetBot web server on http://0.0.0.0:{self.port}')
+        print(f'📡 Accessible from WSL at: http://172.27.217.61:{self.port}')
+        print(f'📡 Accessible from Windows at: http://localhost:{self.port}')
+        print('')
+        print('🌐 Public access at: http://petz.rdx4.com/')
+        print('')
+        
         self.server.serve_forever()
     
     def start_in_thread(self):
         """Start the web server in a background thread"""
-        thread = Thread(target=self.run, daemon=True)
-        thread.start()
-        print(f"✅ Web server started at http://localhost:{self.port}")
-        print(f"🌐 Public access at: http://petz.rdx4.com/")
-        return thread
+        import threading
+        self.thread = threading.Thread(target=self.run, daemon=True)
+        self.thread.start()
+    
+    def stop(self):
+        """Stop the web server"""
+        if self.server:
+            self.server.shutdown()
+            self.server.server_close()
 
 def run_standalone():
-    """Run the web server standalone for testing"""
-    print("🐾 PetBot Web Server (Standalone Mode)")
-    print("=" * 40)
+    """Run the web server in standalone mode"""
+    import sys
     
-    # Initialize database
-    database = Database()
-    # Note: In standalone mode, we can't easily run async init
-    # This is mainly for testing the web routes
+    port = 8080
+    if len(sys.argv) > 1:
+        try:
+            port = int(sys.argv[1])
+        except ValueError:
+            print('Usage: python webserver.py [port]')
+            sys.exit(1)
     
-    # Start web server
-    server = PetBotWebServer(database)
-    print("🚀 Starting web server...")
-    print("📝 Available routes:")
-    print("   http://localhost:8080/        - Game Hub (local)")
-    print("   http://localhost:8080/help    - Command Help (local)") 
-    print("   http://localhost:8080/players - Player List (local)")
-    print("   http://localhost:8080/leaderboard - Leaderboard (local)")
-    print("   http://localhost:8080/locations - Locations (local)")
-    print("")
-    print("🌐 Public URLs:")
-    print("   http://petz.rdx4.com/         - Game Hub")
-    print("   http://petz.rdx4.com/help     - Command Help") 
-    print("   http://petz.rdx4.com/players  - Player List")
-    print("   http://petz.rdx4.com/leaderboard - Leaderboard")
-    print("   http://petz.rdx4.com/locations - Locations")
-    print("")
-    print("Press Ctrl+C to stop")
+    server = PetBotWebServer(port)
+    
+    print('🌐 PetBot Web Server')
+    print('=' * 50)
+    print(f'Port: {port}')
+    print('')
+    print('🔗 Local URLs:')
+    print(f'   http://localhost:{port}/         - Game Hub (local)')
+    print(f'   http://localhost:{port}/help     - Command Help (local)')
+    print(f'   http://localhost:{port}/players  - Player List (local)')
+    print(f'   http://localhost:{port}/leaderboard - Leaderboard (local)')
+    print(f'   http://localhost:{port}/locations - Locations (local)')
+    print('')
+    print('🌐 Public URLs:')
+    print('   http://petz.rdx4.com/         - Game Hub')
+    print('   http://petz.rdx4.com/help     - Command Help') 
+    print('   http://petz.rdx4.com/players  - Player List')
+    print('   http://petz.rdx4.com/leaderboard - Leaderboard')
+    print('   http://petz.rdx4.com/locations - Locations')
+    print('')
+    print('Press Ctrl+C to stop')
     
     try:
         server.run()
     except KeyboardInterrupt:
-        print("\n✅ Web server stopped")
+        print('\n✅ Web server stopped')
+
+if __name__ == '__main__':
+    run_standalone()
 
-if __name__ == "__main__":
-    run_standalone()
\ No newline at end of file