diff --git a/src/pages/Characters.tsx b/src/pages/Characters.tsx
index ae1f85e..0df60f8 100644
--- a/src/pages/Characters.tsx
+++ b/src/pages/Characters.tsx
@@ -39,6 +39,7 @@ const ROLE_LABELS: Record<string, string> = {
 };
 
 const Characters: React.FC = () => {
+	const [allHeroes, setAllHeroes] = useState<any[]>([]);
 	const [selectedStars, setSelectedStars] = useState<number>(0);
 	const [selectedElement, setSelectedElement] = useState<string>("all");
 	const [selectedRole, setSelectedRole] = useState<string>("all");
@@ -53,7 +54,11 @@ const Characters: React.FC = () => {
 
 	// 拉取英雄数据
 	useEffect(() => {
-		EpicApi.getHeroList().then(setHeroes);
+		EpicApi.getHeroList().then(data => {
+			// console.log('Heroes:', data);
+			setHeroes(data);
+			setAllHeroes(data);
+		});
 	}, []);
 
 	// // 拉取 team-list 下拉数据（只请求一次）
@@ -104,7 +109,7 @@ const Characters: React.FC = () => {
 	};
 
 	// 下拉选项过滤
-	const filteredDropdownOptions = dropdownOptions.filter((hero: any) => {
+	const filteredDropdownOptions = allHeroes.filter((hero: any) => {
 		if (!searchTerm) return true;
 		return hero.heroName.toLowerCase().includes(searchTerm.toLowerCase()) ||
 			(hero.nickName && hero.nickName.toLowerCase().includes(searchTerm.toLowerCase()));
@@ -151,7 +156,7 @@ const Characters: React.FC = () => {
 								<span className={`ml-2 transition-transform ${dropdownOpen ? 'rotate-180' : ''}`}>▼</span>
 							</div>
 							{dropdownOpen && (
-								<div className="absolute left-0 right-0 mt-1 bg-[#1A1412] border border-[#C17F59]/30 rounded-md shadow-lg max-h-60 overflow-y-auto z-50">
+								<div className="absolute left-0 right-0 mt-1 bg-[#1A1412] border border-[#C17F59]/30 rounded-md shadow-lg max-h-60 overflow-y-auto z-100">
 									<input
 										type="text"
 										value={searchTerm}
@@ -226,7 +231,7 @@ const Characters: React.FC = () => {
 				<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-6">
 					{filteredHeroes.map((hero) => (
 						<div
-							key={hero.id}
+							key={hero.heroCode}
 							className="flex items-center bg-[#23201B] rounded-xl border border-[#C17F59]/30 hover:border-[#C17F59] transition-all duration-300 shadow-md px-4 py-3 min-h-[96px] max-h-[96px] cursor-pointer backdrop-blur-sm"
 							onClick={() => navigate(`/character/${hero.heroCode}`)}
 						>