diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 36929d7..2d473ed 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -10,12 +10,12 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
 	const location = useLocation();
 
 	return (
-		<nav className="fixed top-0 left-0 right-0 z-50 bg-[#1A1412]/95 backdrop-blur-md border-b border-[#C17F59]/30">
+		<nav className="fixed top-0 left-0 right-0 z-50 bg-[#1A1412]/95 backdrop-blur-md border-b border-[#C17F59]/30 shadow-lg">
 			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 				<div className="flex items-center justify-between h-16">
 					<div className="flex items-center">
 						<div className="flex-shrink-0">
-							<Link to="/" className="text-2xl font-bold text-[#E6B17E]">
+							<Link to="/" className="text-2xl font-bold text-[#E6B17E] hover:text-[#F5C28A] transition-colors duration-200">
 								战神纪元
 							</Link>
 						</div>
@@ -23,60 +23,60 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
 							<div className="flex items-baseline space-x-4">
 								<Link
 									to="/"
-									className={`px-3 py-2 rounded-md text-sm font-medium ${
+									className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
 										location.pathname === "/"
-											? "text-[#E6B17E] bg-[#2A211E]"
-											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+											? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
+											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
 									} !rounded-button whitespace-nowrap cursor-pointer`}
 								>
 									主页
 								</Link>
 								<Link
 									to="/characters"
-									className={`px-3 py-2 rounded-md text-sm font-medium ${
+									className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
 										location.pathname === "/characters"
-											? "text-[#E6B17E] bg-[#2A211E]"
-											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+											? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
+											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
 									} !rounded-button whitespace-nowrap cursor-pointer`}
 								>
 									角色列表
 								</Link>
 								<Link
 									to="/builds"
-									className={`px-3 py-2 rounded-md text-sm font-medium ${
+									className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
 										location.pathname === "/builds"
-											? "text-[#E6B17E] bg-[#2A211E]"
-											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+											? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
+											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
 									} !rounded-button whitespace-nowrap cursor-pointer`}
 								>
 									配装攻略
 								</Link>
 								<Link
 									to="/battles"
-									className={`px-3 py-2 rounded-md text-sm font-medium ${
+									className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
 										location.pathname === "/battles"
-											? "text-[#E6B17E] bg-[#2A211E]"
-											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+											? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
+											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
 									} !rounded-button whitespace-nowrap cursor-pointer`}
 								>
 									对战信息
 								</Link>
 								<Link
 									to="/news"
-									className={`px-3 py-2 rounded-md text-sm font-medium ${
+									className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
 										location.pathname === "/news"
-											? "text-[#E6B17E] bg-[#2A211E]"
-											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+											? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
+											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
 									} !rounded-button whitespace-nowrap cursor-pointer`}
 								>
 									资讯中心
 								</Link>
 								<Link
 									to="/community"
-									className={`px-3 py-2 rounded-md text-sm font-medium ${
+									className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
 										location.pathname === "/community"
-											? "text-[#E6B17E] bg-[#2A211E]"
-											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+											? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
+											: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
 									} !rounded-button whitespace-nowrap cursor-pointer`}
 								>
 									社区
@@ -87,7 +87,7 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
 					<div className="hidden md:block">
 						<button
 							onClick={onLoginClick}
-							className="px-4 py-2 rounded-md text-sm font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] !rounded-button whitespace-nowrap cursor-pointer transition-colors duration-200"
+							className="px-5 py-2 rounded-md text-sm font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] hover:shadow-md !rounded-button whitespace-nowrap cursor-pointer transition-all duration-200 transform hover:scale-105"
 						>
 							登录
 						</button>
@@ -95,7 +95,7 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
 					<div className="-mr-2 flex md:hidden">
 						<button
 							onClick={() => setIsMenuOpen(!isMenuOpen)}
-							className="inline-flex items-center justify-center p-2 rounded-md text-[#C17F59] hover:text-[#E6B17E] hover:bg-[#2A211E] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[#1A1412] focus:ring-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer"
+							className="inline-flex items-center justify-center p-2 rounded-md text-[#C17F59] hover:text-[#E6B17E] hover:bg-[#2A211E] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[#1A1412] focus:ring-[#E6B17E] !rounded-button whitespace-nowrap cursor-pointer transition-all duration-200"
 						>
 							<span className="sr-only">打开主菜单</span>
 							<i className={`fas ${isMenuOpen ? "fa-times" : "fa-bars"}`}></i>
@@ -105,71 +105,71 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
 			</div>
 			{/* 移动端菜单 */}
 			{isMenuOpen && (
-				<div className="md:hidden bg-[#1A1412] border-t border-[#C17F59]/30">
+				<div className="md:hidden bg-[#1A1412] border-t border-[#C17F59]/30 shadow-lg">
 					<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
 						<Link
 							to="/"
-							className={`block px-3 py-2 rounded-md text-base font-medium ${
+							className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
 								location.pathname === "/"
-									? "text-[#E6B17E] bg-[#2A211E]"
-									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+									? "text-[#E6B17E] bg-[#2A211E] shadow-md"
+									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
 							} !rounded-button whitespace-nowrap cursor-pointer`}
 						>
 							主页
 						</Link>
 						<Link
 							to="/characters"
-							className={`block px-3 py-2 rounded-md text-base font-medium ${
+							className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
 								location.pathname === "/characters"
-									? "text-[#E6B17E] bg-[#2A211E]"
-									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+									? "text-[#E6B17E] bg-[#2A211E] shadow-md"
+									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
 							} !rounded-button whitespace-nowrap cursor-pointer`}
 						>
 							角色列表
 						</Link>
 						<Link
 							to="/builds"
-							className={`block px-3 py-2 rounded-md text-base font-medium ${
+							className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
 								location.pathname === "/builds"
-									? "text-[#E6B17E] bg-[#2A211E]"
-									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+									? "text-[#E6B17E] bg-[#2A211E] shadow-md"
+									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
 							} !rounded-button whitespace-nowrap cursor-pointer`}
 						>
 							配装攻略
 						</Link>
 						<Link
 							to="/battles"
-							className={`block px-3 py-2 rounded-md text-base font-medium ${
+							className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
 								location.pathname === "/battles"
-									? "text-[#E6B17E] bg-[#2A211E]"
-									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+									? "text-[#E6B17E] bg-[#2A211E] shadow-md"
+									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
 							} !rounded-button whitespace-nowrap cursor-pointer`}
 						>
 							对战信息
 						</Link>
 						<Link
 							to="/news"
-							className={`block px-3 py-2 rounded-md text-base font-medium ${
+							className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
 								location.pathname === "/news"
-									? "text-[#E6B17E] bg-[#2A211E]"
-									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+									? "text-[#E6B17E] bg-[#2A211E] shadow-md"
+									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
 							} !rounded-button whitespace-nowrap cursor-pointer`}
 						>
 							资讯中心
 						</Link>
 						<Link
 							to="/community"
-							className={`block px-3 py-2 rounded-md text-base font-medium ${
+							className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
 								location.pathname === "/community"
-									? "text-[#E6B17E] bg-[#2A211E]"
-									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E]"
+									? "text-[#E6B17E] bg-[#2A211E] shadow-md"
+									: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
 							} !rounded-button whitespace-nowrap cursor-pointer`}
 						>
 							社区
 						</Link>
 						<button
 							onClick={onLoginClick}
-							className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] !rounded-button whitespace-nowrap cursor-pointer transition-colors duration-200"
+							className="block w-full text-left px-4 py-3 rounded-md text-base font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] hover:shadow-md !rounded-button whitespace-nowrap cursor-pointer transition-all duration-200"
 						>
 							登录
 						</button>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 703b407..ccbf7c8 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -178,6 +178,7 @@ const Home: React.FC = () => {
 			description: "掌控星辰能量的神秘法师，可以操纵时空进行战斗。",
 			features: "星辰轨道 / 时空裂隙 / 引力操控",
 			color: "purple",
+			status: "即将登场"
 		},
 		{
 			id: 2,
@@ -187,6 +188,7 @@ const Home: React.FC = () => {
 			description: "融合古代武士精神与现代能量技术的战士。",
 			features: "能量刀刃 / 武士之魂 / 烈焰斩击",
 			color: "red",
+			status: "即将登场"
 		},
 		{
 			id: 3,
@@ -197,6 +199,37 @@ const Home: React.FC = () => {
 			description: "运用生态能量的远程射手，善于控制战场环境。",
 			features: "自然之力 / 生态屏障 / 藤蔓控制",
 			color: "green",
+			status: "即将登场"
+		},
+		{
+			id: 4,
+			name: "暗影刺客",
+			role: "刺客",
+			image:
+				"https://public.readdy.ai/ai/img_res/2d91abc57bd6b7d125bf2f87ed449c3d.jpg",
+			description: "暗影刺客获得了全新的技能组合，提升了突进能力和爆发伤害。",
+			changes: "基础攻击力 +15%，技能冷却时间 -10%",
+			status: "最新更新"
+		},
+		{
+			id: 5,
+			name: "元素法师",
+			role: "法师",
+			image:
+				"https://public.readdy.ai/ai/img_res/fad8f5cdf974a6cdf13f117039146645.jpg",
+			description: "元素法师的控场能力得到加强，新增了区域冻结效果。",
+			changes: "法术穿透 +8%，控制效果持续时间 +1秒",
+			status: "最新更新"
+		},
+		{
+			id: 6,
+			name: "钢铁守卫",
+			role: "坦克",
+			image:
+				"https://public.readdy.ai/ai/img_res/618fff0b876f9d124ad1921db66683e5.jpg",
+			description: "钢铁守卫现在拥有更强的生存能力和团队保护机制。",
+			changes: "护甲值 +20%，生命回复速度 +15%",
+			status: "最新更新"
 		},
 	];
 
@@ -436,140 +469,68 @@ const Home: React.FC = () => {
 			<section className="py-24 relative pt-0">
 				<div className="absolute inset-0 bg-gradient-to-b from-[#2A211E] to-[#1A1412]"></div>
 				<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative pb-24 border-b border-[#C17F59]/30">
-					<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-						{/* 即将登场 */}
+					<div className="flex justify-between items-center mb-6">
 						<div>
-							<div className="flex justify-between items-center mb-6">
-								<div>
-									<div className="inline-block px-3 py-1 bg-gradient-to-r from-[#C17F59]/20 to-[#A66D4F]/20 border border-[#C17F59] rounded-full mb-2 backdrop-blur-sm">
-										<span className="text-[#E6B17E] text-sm font-semibold">
-											新英雄预告
+							<div className="inline-block px-3 py-1 bg-gradient-to-r from-[#C17F59]/20 to-[#A66D4F]/20 border border-[#C17F59] rounded-full mb-2 backdrop-blur-sm">
+								<span className="text-[#E6B17E] text-sm font-semibold">
+									角色更新
+								</span>
+							</div>
+							<h2 className="text-2xl font-bold text-[#E6B17E]">
+								角色更新
+							</h2>
+						</div>
+						<a
+							href="#"
+							className="text-[#C17F59] hover:text-[#E6B17E] flex items-center cursor-pointer transition-colors duration-200"
+						>
+							查看全部
+							<i className="fas fa-arrow-right ml-2"></i>
+						</a>
+					</div>
+					<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
+						{upcomingCharacters.map((character) => (
+							<div
+								key={character.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-52 overflow-hidden">
+									<div className="absolute top-0 left-0 bg-gradient-to-r from-[#C17F59]/80 to-transparent px-2 py-1 rounded-br-lg z-10">
+										<span className="text-[#E6B17E] font-medium text-xs">
+											{character.role}
 										</span>
 									</div>
-									<h2 className="text-2xl font-bold text-[#E6B17E]">
-										即将登场
-									</h2>
+									<img
+										src={character.image}
+										alt={character.name}
+										className="w-full h-full object-cover object-center transition-transform duration-500 hover:scale-105"
+									/>
 								</div>
-								<a
-									href="#"
-									className="text-[#C17F59] hover:text-[#E6B17E] flex items-center cursor-pointer transition-colors duration-200"
-								>
-									查看全部
-									<i className="fas fa-arrow-right ml-2"></i>
-								</a>
-							</div>
-							<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-								{upcomingCharacters.map((character) => (
-									<div
-										key={character.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-40 overflow-hidden">
-											<div className="absolute top-0 left-0 bg-gradient-to-r from-[#C17F59]/80 to-transparent px-4 py-1 rounded-br-lg z-10">
-												<span className="text-[#E6B17E] font-medium">
-													{character.role}
-												</span>
-											</div>
-											<img
-												src={character.image}
-												alt={character.name}
-												className="w-full h-full object-cover object-center transition-transform duration-500 hover:scale-105"
-											/>
-										</div>
-										<div className="p-4">
-											<div className="flex items-center justify-between mb-2">
-												<h3 className="text-lg font-bold text-[#E6B17E]">
-													{character.name}
-												</h3>
-												<span className="text-[#C17F59] text-sm">即将登场</span>
-											</div>
-											<p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight">
-												{character.description}
-											</p>
-											<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-2 rounded-md">
-												<p className="text-[#C17F59] font-medium text-xs mb-1">
-													核心特性
-												</p>
-												<p className="text-[#9B8579] text-xs line-clamp-1">
-													{character.features}
-												</p>
-											</div>
-											<button className="mt-3 w-full py-1.5 bg-gradient-to-r from-[#C17F59]/20 to-[#A66D4F]/20 hover:from-[#C17F59]/30 hover:to-[#A66D4F]/30 text-[#E6B17E] rounded-md flex items-center justify-center text-sm transition-all duration-300">
-												预约获取
-												<i className="fas fa-chevron-right ml-2 text-xs"></i>
-											</button>
-										</div>
+								<div className="p-2">
+									<div className="flex items-center justify-between mb-1">
+										<h3 className="text-sm font-bold text-[#E6B17E]">
+											{character.name}
+										</h3>
+										<span className="text-[#C17F59] text-xs">{character.status}</span>
 									</div>
-								))}
-							</div>
-						</div>
-
-						{/* 最新更新 */}
-						<div>
-							<div className="flex justify-between items-center mb-6">
-								<div>
-									<div className="inline-block px-3 py-1 bg-gradient-to-r from-[#C17F59]/20 to-[#A66D4F]/20 border border-[#C17F59] rounded-full mb-2 backdrop-blur-sm">
-										<span className="text-[#E6B17E] text-sm font-semibold">
-											平衡性调整
-										</span>
+									<p className="text-[#9B8579] text-xs line-clamp-2 mb-2 leading-tight">
+										{character.description}
+									</p>
+									<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-1 rounded-md">
+										<p className="text-[#C17F59] font-medium text-xs mb-0.5">
+											{character.status === "即将登场" ? "核心特性" : "变更数据"}
+										</p>
+										<p className="text-[#9B8579] text-xs line-clamp-1">
+											{character.status === "即将登场" ? character.features : character.changes}
+										</p>
 									</div>
-									<h2 className="text-2xl font-bold text-[#E6B17E]">
-										最新更新
-									</h2>
+									<button className="mt-2 w-full py-1 bg-gradient-to-r from-[#C17F59]/20 to-[#A66D4F]/20 hover:from-[#C17F59]/30 hover:to-[#A66D4F]/30 text-[#E6B17E] rounded-md flex items-center justify-center text-xs transition-all duration-300">
+										{character.status === "即将登场" ? "预约获取" : "查看详情"}
+										<i className="fas fa-chevron-right ml-1 text-xs"></i>
+									</button>
 								</div>
-								<a
-									href="#"
-									className="text-[#C17F59] hover:text-[#E6B17E] flex items-center cursor-pointer transition-colors duration-200"
-								>
-									查看全部
-									<i className="fas fa-arrow-right ml-2"></i>
-								</a>
 							</div>
-							<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-								{updatedCharacters.map((character) => (
-									<div
-										key={character.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-40 overflow-hidden">
-											<div className="absolute top-0 left-0 bg-gradient-to-r from-[#C17F59]/80 to-transparent px-4 py-1 rounded-br-lg z-10">
-												<span className="text-[#E6B17E] font-medium">
-													{character.role}
-												</span>
-											</div>
-											<img
-												src={character.image}
-												alt={character.name}
-												className="w-full h-full object-cover object-center transition-transform duration-500 hover:scale-105"
-											/>
-										</div>
-										<div className="p-4">
-											<div className="flex items-center justify-between mb-2">
-												<h3 className="text-lg font-bold text-[#E6B17E]">
-													{character.name}
-												</h3>
-												<span className="text-[#C17F59] text-sm">最新更新</span>
-											</div>
-											<p className="text-[#9B8579] text-sm line-clamp-2 mb-3 leading-tight">
-												{character.description}
-											</p>
-											<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] p-2 rounded-md">
-												<p className="text-[#C17F59] font-medium text-xs mb-1">
-													变更数据
-												</p>
-												<p className="text-[#9B8579] text-xs line-clamp-1">
-													{character.changes}
-												</p>
-											</div>
-											<button className="mt-3 w-full py-1.5 bg-gradient-to-r from-[#C17F59]/20 to-[#A66D4F]/20 hover:from-[#C17F59]/30 hover:to-[#A66D4F]/30 text-[#E6B17E] rounded-md flex items-center justify-center text-sm transition-all duration-300">
-												查看详情
-												<i className="fas fa-chevron-right ml-2 text-xs"></i>
-											</button>
-										</div>
-									</div>
-								))}
-							</div>
-						</div>
+						))}
 					</div>
 				</div>
 			</section>