diff --git a/src/pages/Characters.tsx b/src/pages/Characters.tsx
index 0c9659e..bf3212c 100644
--- a/src/pages/Characters.tsx
+++ b/src/pages/Characters.tsx
@@ -118,6 +118,277 @@ const Characters: React.FC = () => {
 			imageUrl:
 				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20soul%20weaver%20with%20dark%20purple%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=12&orientation=squarish",
 		},
+		// 新增30个英雄数据
+		{
+			id: 13,
+			name: "Alencia",
+			stars: 5,
+			element: "earth",
+			class: "Earth Knight",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20knight%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=13&orientation=squarish",
+		},
+		{
+			id: 14,
+			name: "Ambitious Tywin",
+			stars: 5,
+			element: "light",
+			class: "Light Knight",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20knight%20with%20blonde%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=14&orientation=squarish",
+		},
+		{
+			id: 15,
+			name: "Angelica",
+			stars: 4,
+			element: "water",
+			class: "Water Soul Weaver",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20healer%20with%20blue%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=15&orientation=squarish",
+		},
+		{
+			id: 16,
+			name: "Angel of Light Angelica",
+			stars: 5,
+			element: "light",
+			class: "Light Soul Weaver",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20healer%20with%20white%20hair%20and%20wings%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=16&orientation=squarish",
+		},
+		{
+			id: 17,
+			name: "Arbiter Vildred",
+			stars: 5,
+			element: "dark",
+			class: "Dark Thief",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20thief%20with%20black%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=17&orientation=squarish",
+		},
+		{
+			id: 18,
+			name: "Architect Laika",
+			stars: 5,
+			element: "fire",
+			class: "Fire Warrior",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20warrior%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=18&orientation=squarish",
+		},
+		{
+			id: 19,
+			name: "Armin",
+			stars: 4,
+			element: "earth",
+			class: "Earth Knight",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20knight%20with%20brown%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=19&orientation=squarish",
+		},
+		{
+			id: 20,
+			name: "Assassin Cartuja",
+			stars: 4,
+			element: "dark",
+			class: "Dark Thief",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20thief%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=20&orientation=squarish",
+		},
+		{
+			id: 21,
+			name: "Assassin Coli",
+			stars: 4,
+			element: "dark",
+			class: "Dark Thief",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20thief%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=21&orientation=squarish",
+		},
+		{
+			id: 22,
+			name: "Auxiliary Lots",
+			stars: 5,
+			element: "light",
+			class: "Light Mage",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20white%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=22&orientation=squarish",
+		},
+		{
+			id: 23,
+			name: "Baal & Sezan",
+			stars: 5,
+			element: "fire",
+			class: "Fire Mage",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=23&orientation=squarish",
+		},
+		{
+			id: 24,
+			name: "Basar",
+			stars: 5,
+			element: "earth",
+			class: "Earth Mage",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=24&orientation=squarish",
+		},
+		{
+			id: 25,
+			name: "Batisse",
+			stars: 3,
+			element: "fire",
+			class: "Fire Warrior",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20warrior%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=25&orientation=squarish",
+		},
+		{
+			id: 26,
+			name: "Bellona",
+			stars: 5,
+			element: "earth",
+			class: "Earth Warrior",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20warrior%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=26&orientation=squarish",
+		},
+		{
+			id: 27,
+			name: "Benevolent Romann",
+			stars: 5,
+			element: "light",
+			class: "Light Mage",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20white%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=27&orientation=squarish",
+		},
+		{
+			id: 28,
+			name: "Blaze Dingo",
+			stars: 4,
+			element: "fire",
+			class: "Fire Soul Weaver",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20healer%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=28&orientation=squarish",
+		},
+		{
+			id: 29,
+			name: "Blood Blade Karin",
+			stars: 5,
+			element: "dark",
+			class: "Dark Thief",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20thief%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=29&orientation=squarish",
+		},
+		{
+			id: 30,
+			name: "Blue Krau",
+			stars: 5,
+			element: "water",
+			class: "Water Knight",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20knight%20with%20blue%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=30&orientation=squarish",
+		},
+		{
+			id: 31,
+			name: "Briar Witch Iseria",
+			stars: 5,
+			element: "dark",
+			class: "Dark Ranger",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20ranger%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=31&orientation=squarish",
+		},
+		{
+			id: 32,
+			name: "Butcher Corps Inquisitor",
+			stars: 4,
+			element: "dark",
+			class: "Dark Warrior",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20warrior%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=32&orientation=squarish",
+		},
+		{
+			id: 33,
+			name: "Cecilia",
+			stars: 5,
+			element: "earth",
+			class: "Earth Knight",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20knight%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=33&orientation=squarish",
+		},
+		{
+			id: 34,
+			name: "Celestial Mercedes",
+			stars: 5,
+			element: "light",
+			class: "Light Mage",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20mage%20with%20white%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=34&orientation=squarish",
+		},
+		{
+			id: 35,
+			name: "Cerise",
+			stars: 5,
+			element: "fire",
+			class: "Fire Ranger",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20ranger%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=35&orientation=squarish",
+		},
+		{
+			id: 36,
+			name: "Challenger Dominiel",
+			stars: 5,
+			element: "light",
+			class: "Light Mage",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20mage%20with%20white%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=36&orientation=squarish",
+		},
+		{
+			id: 37,
+			name: "Champion Zerato",
+			stars: 5,
+			element: "dark",
+			class: "Dark Mage",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20mage%20with%20dark%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=37&orientation=squarish",
+		},
+		{
+			id: 38,
+			name: "Charles",
+			stars: 5,
+			element: "earth",
+			class: "Earth Warrior",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20warrior%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=38&orientation=squarish",
+		},
+		{
+			id: 39,
+			name: "Charlotte",
+			stars: 5,
+			element: "fire",
+			class: "Fire Warrior",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20warrior%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=39&orientation=squarish",
+		},
+		{
+			id: 40,
+			name: "Chloe",
+			stars: 5,
+			element: "fire",
+			class: "Fire Knight",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20knight%20with%20red%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=40&orientation=squarish",
+		},
+		{
+			id: 41,
+			name: "Cidd",
+			stars: 4,
+			element: "earth",
+			class: "Earth Thief",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20male%20thief%20with%20green%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=41&orientation=squarish",
+		},
+		{
+			id: 42,
+			name: "Clarissa",
+			stars: 4,
+			element: "water",
+			class: "Water Warrior",
+			imageUrl:
+				"https://readdy.ai/api/search-image?query=anime%20style%20game%20character%20portrait%20of%20a%20female%20warrior%20with%20blue%20hair%2C%20fantasy%20RPG%20character%20icon%2C%20detailed%20face%2C%20high%20quality%2C%20digital%20art&width=100&height=100&seq=42&orientation=squarish",
+		},
 	];
 
 	const renderStars = (count: number) => {
@@ -231,222 +502,230 @@ const Characters: React.FC = () => {
 	});
 
 	return (
-		<div
-			className="min-h-screen bg-gray-900 text-white p-4 md:p-8 w-full"
-			style={{ maxWidth: "1440px", margin: "0 auto", minHeight: "1024px" }}
-		>
-			<h1 className="text-4xl font-bold text-center my-8">
-				All Epic Seven Heroes
-			</h1>
+		<div className="min-h-screen bg-[#1A1412] text-white font-sans relative">
+			{/* 背景装饰 */}
+			<div className="absolute inset-0 bg-gradient-to-b from-[#1A1412] via-[#2A211E] to-[#1A1412]"></div>
 
-			<div className="bg-gray-800 p-4 rounded-lg mb-8">
-				<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
-					<input
-						type="text"
-						placeholder="Hero Name"
-						className="bg-gray-700 border-none px-4 py-2 rounded-md text-sm w-full"
-						value={searchTerm}
-						onChange={(e) => setSearchTerm(e.target.value)}
-					/>
+			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative py-24">
+				<h1 className="text-4xl font-bold text-center mb-8">
+					<span className="bg-clip-text text-transparent bg-gradient-to-r from-[#E6B17E] via-[#C17F59] to-[#A66D4F]">
+						All Epic Seven Heroes
+					</span>
+				</h1>
 
-					<div className="flex">
-						{["All Stars", "3 Stars", "4 Stars", "5 Stars"].map((stars) => (
+				<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-6 rounded-lg mb-8 border border-[#C17F59]/30">
+					<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
+						<input
+							type="text"
+							placeholder="Hero Name"
+							className="bg-[#1A1412] border border-[#C17F59]/30 px-4 py-2 rounded-md text-sm w-full text-[#E6B17E] placeholder-[#9B8579] focus:border-[#C17F59] focus:outline-none"
+							value={searchTerm}
+							onChange={(e) => setSearchTerm(e.target.value)}
+						/>
+					</div>
+
+					<div className="mb-4">
+						<div className="flex flex-wrap gap-1">
+							{["All Stars", "3 Stars", "4 Stars", "5 Stars"].map((stars) => (
+								<button
+									key={stars}
+									className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
+										selectedStars === stars
+											? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
+											: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
+									}`}
+									onClick={() => setSelectedStars(stars)}
+								>
+									{stars}
+								</button>
+							))}
+						</div>
+					</div>
+
+					<div className="mb-4">
+						<div className="flex flex-wrap gap-1">
 							<button
-								key={stars}
 								className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
-									selectedStars === stars
-										? "bg-amber-700"
-										: "bg-gray-700 hover:bg-gray-600"
+									selectedElement === "All"
+										? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
+										: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
 								}`}
-								onClick={() => setSelectedStars(stars)}
+								onClick={() => setSelectedElement("All")}
 							>
-								{stars}
+								All
 							</button>
-						))}
-					</div>
-				</div>
 
-				<div className="mb-4">
-					<div className="flex flex-wrap gap-1">
-						<button
-							className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
-								selectedElement === "All"
-									? "bg-amber-700"
-									: "bg-gray-700 hover:bg-gray-600"
-							}`}
-							onClick={() => setSelectedElement("All")}
-						>
-							All
-						</button>
-
-						<button
-							className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
-								selectedElement === "fire"
-									? "bg-amber-700"
-									: "bg-gray-700 hover:bg-gray-600"
-							}`}
-							onClick={() => setSelectedElement("fire")}
-						>
-							<div className="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center">
-								<i className="fas fa-fire text-white text-xs"></i>
-							</div>
-						</button>
-
-						<button
-							className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
-								selectedElement === "water"
-									? "bg-amber-700"
-									: "bg-gray-700 hover:bg-gray-600"
-							}`}
-							onClick={() => setSelectedElement("water")}
-						>
-							<div className="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center">
-								<i className="fas fa-tint text-white text-xs"></i>
-							</div>
-						</button>
-
-						<button
-							className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
-								selectedElement === "earth"
-									? "bg-amber-700"
-									: "bg-gray-700 hover:bg-gray-600"
-							}`}
-							onClick={() => setSelectedElement("earth")}
-						>
-							<div className="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
-								<i className="fas fa-leaf text-white text-xs"></i>
-							</div>
-						</button>
-
-						<button
-							className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
-								selectedElement === "light"
-									? "bg-amber-700"
-									: "bg-gray-700 hover:bg-gray-600"
-							}`}
-							onClick={() => setSelectedElement("light")}
-						>
-							<div className="w-5 h-5 rounded-full bg-yellow-500 flex items-center justify-center">
-								<i className="fas fa-sun text-white text-xs"></i>
-							</div>
-						</button>
-
-						<button
-							className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
-								selectedElement === "dark"
-									? "bg-amber-700"
-									: "bg-gray-700 hover:bg-gray-600"
-							}`}
-							onClick={() => setSelectedElement("dark")}
-						>
-							<div className="w-5 h-5 rounded-full bg-purple-700 flex items-center justify-center">
-								<i className="fas fa-moon text-white text-xs"></i>
-							</div>
-						</button>
-					</div>
-				</div>
-
-				<div className="mb-4">
-					<div className="flex flex-wrap gap-1">
-						<button
-							className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
-								selectedClass === "All"
-									? "bg-amber-700"
-									: "bg-gray-700 hover:bg-gray-600"
-							}`}
-							onClick={() => setSelectedClass("All")}
-						>
-							All
-						</button>
-
-						{[
-							"Knight",
-							"Warrior",
-							"Thief",
-							"Ranger",
-							"Mage",
-							"Soul Weaver",
-						].map((classType) => (
 							<button
-								key={classType}
 								className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
-									selectedClass === classType
-										? "bg-amber-700"
-										: "bg-gray-700 hover:bg-gray-600"
+									selectedElement === "fire"
+										? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
+										: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
 								}`}
-								onClick={() => setSelectedClass(classType)}
+								onClick={() => setSelectedElement("fire")}
 							>
-								{getClassIcon(classType)}
+								<div className="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center">
+									<i className="fas fa-fire text-white text-xs"></i>
+								</div>
 							</button>
-						))}
-					</div>
-				</div>
 
-				<div className="mb-4">
-					<div className="flex flex-wrap gap-1">
-						<button
-							className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
-								selectedZodiac === "All"
-									? "bg-amber-700"
-									: "bg-gray-700 hover:bg-gray-600"
-							}`}
-							onClick={() => setSelectedZodiac("All")}
-						>
-							All
-						</button>
-
-						{[...Array(12)].map((_, index) => (
 							<button
-								key={index}
 								className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
-									selectedZodiac === `zodiac-${index}`
-										? "bg-amber-700"
-										: "bg-gray-700 hover:bg-gray-600"
+									selectedElement === "water"
+										? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
+										: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
 								}`}
-								onClick={() => setSelectedZodiac(`zodiac-${index}`)}
+								onClick={() => setSelectedElement("water")}
 							>
-								{getZodiacIcon(index)}
+								<div className="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center">
+									<i className="fas fa-tint text-white text-xs"></i>
+								</div>
 							</button>
-						))}
-					</div>
-				</div>
 
-				<div className="grid grid-cols-1 gap-2">
-					<div className="bg-gray-700 px-4 py-2 rounded-md">
-						<p className="text-gray-400">Select Buffs</p>
-					</div>
-					<div className="bg-gray-700 px-4 py-2 rounded-md">
-						<p className="text-gray-400">Select Debuffs</p>
-					</div>
-				</div>
-			</div>
+							<button
+								className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
+									selectedElement === "earth"
+										? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
+										: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
+								}`}
+								onClick={() => setSelectedElement("earth")}
+							>
+								<div className="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
+									<i className="fas fa-leaf text-white text-xs"></i>
+								</div>
+							</button>
 
-			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-				{filteredHeroes.map((hero) => (
-					<div
-						key={hero.id}
-						className="bg-gray-800 rounded-lg p-4 flex items-center gap-4 cursor-pointer hover:bg-gray-700 transition-colors"
-					>
-						<div className="relative">
-							<img
-								src={hero.imageUrl}
-								alt={hero.name}
-								className="w-16 h-16 rounded-full object-cover object-top"
-							/>
-							<div className="absolute -bottom-1 -right-1">
-								{getElementIcon(hero.element)}
-							</div>
-						</div>
+							<button
+								className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
+									selectedElement === "light"
+										? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
+										: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
+								}`}
+								onClick={() => setSelectedElement("light")}
+							>
+								<div className="w-5 h-5 rounded-full bg-yellow-500 flex items-center justify-center">
+									<i className="fas fa-sun text-white text-xs"></i>
+								</div>
+							</button>
 
-						<div className="flex-1">
-							<h3 className="text-xl font-semibold text-amber-400">
-								{hero.name}
-							</h3>
-							<div className="flex">{renderStars(hero.stars)}</div>
-							<p className="text-gray-400">{hero.class}</p>
+							<button
+								className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
+									selectedElement === "dark"
+										? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
+										: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
+								}`}
+								onClick={() => setSelectedElement("dark")}
+							>
+								<div className="w-5 h-5 rounded-full bg-purple-700 flex items-center justify-center">
+									<i className="fas fa-moon text-white text-xs"></i>
+								</div>
+							</button>
 						</div>
 					</div>
-				))}
+
+					<div className="mb-4">
+						<div className="flex flex-wrap gap-1">
+							<button
+								className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
+									selectedClass === "All"
+										? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
+										: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
+								}`}
+								onClick={() => setSelectedClass("All")}
+							>
+								All
+							</button>
+
+							{[
+								"Knight",
+								"Warrior",
+								"Thief",
+								"Ranger",
+								"Mage",
+								"Soul Weaver",
+							].map((classType) => (
+								<button
+									key={classType}
+									className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
+										selectedClass === classType
+											? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
+											: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
+									}`}
+									onClick={() => setSelectedClass(classType)}
+								>
+									{getClassIcon(classType)}
+								</button>
+							))}
+						</div>
+					</div>
+
+					<div className="mb-4">
+						<div className="flex flex-wrap gap-1">
+							<button
+								className={`px-4 py-2 rounded-md cursor-pointer whitespace-nowrap !rounded-button ${
+									selectedZodiac === "All"
+										? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
+										: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
+								}`}
+								onClick={() => setSelectedZodiac("All")}
+							>
+								All
+							</button>
+
+							{[...Array(12)].map((_, index) => (
+								<button
+									key={index}
+									className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button ${
+										selectedZodiac === `zodiac-${index}`
+											? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412]"
+											: "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border border-[#C17F59]/30"
+									}`}
+									onClick={() => setSelectedZodiac(`zodiac-${index}`)}
+								>
+									{getZodiacIcon(index)}
+								</button>
+							))}
+						</div>
+					</div>
+
+					<div className="grid grid-cols-1 gap-2">
+						<div className="bg-[#1A1412] px-4 py-2 rounded-md border border-[#C17F59]/30">
+							<p className="text-[#9B8579]">Select Buffs</p>
+						</div>
+						<div className="bg-[#1A1412] px-4 py-2 rounded-md border border-[#C17F59]/30">
+							<p className="text-[#9B8579]">Select Debuffs</p>
+						</div>
+					</div>
+				</div>
+
+				<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+					{filteredHeroes.map((hero) => (
+						<div
+							key={hero.id}
+							className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg overflow-hidden border border-[#C17F59]/30 hover:border-[#C17F59] transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-[#C17F59]/10 cursor-pointer backdrop-blur-sm"
+						>
+							<div className="relative h-48 overflow-hidden">
+								<img
+									src={hero.imageUrl}
+									alt={hero.name}
+									className="w-full h-full object-cover object-center transition-transform duration-500 hover:scale-105"
+								/>
+								<div className="absolute top-2 left-2 flex space-x-1">
+									{renderStars(hero.stars)}
+								</div>
+								<div className="absolute top-2 right-2">
+									{getElementIcon(hero.element)}
+								</div>
+							</div>
+							<div className="p-4">
+								<h3 className="text-lg font-bold text-[#E6B17E] mb-2">{hero.name}</h3>
+								<div className="flex items-center space-x-2 text-[#9B8579]">
+									{getClassIcon(hero.class)}
+									<span className="text-sm">{hero.class}</span>
+								</div>
+							</div>
+						</div>
+					))}
+				</div>
 			</div>
 		</div>
 	);