diff --git a/web/src/components/layouts/withGame.tsx b/web/src/components/layouts/withGame.tsx
index 44525b8e..458f0a8a 100644
--- a/web/src/components/layouts/withGame.tsx
+++ b/web/src/components/layouts/withGame.tsx
@@ -48,7 +48,17 @@ export default function withGame(WrappedComponent: React.ComponentType<any>) {
 							<Group>
 								<Button
 									size="md"
-									leftSection={<MDIcon>flag</MDIcon>}
+									leftSection={
+										<MDIcon
+											c={
+												path === "/challenges"
+													? "white"
+													: "brand"
+											}
+										>
+											flag
+										</MDIcon>
+									}
 									variant={
 										path === "/challenges"
 											? "filled"
@@ -62,7 +72,17 @@ export default function withGame(WrappedComponent: React.ComponentType<any>) {
 								</Button>
 								<Button
 									size="md"
-									leftSection={<MDIcon>trending_up</MDIcon>}
+									leftSection={
+										<MDIcon
+											c={
+												path === "/scoreboard"
+													? "white"
+													: "brand"
+											}
+										>
+											trending_up
+										</MDIcon>
+									}
 									variant={
 										path === "/scoreboard"
 											? "filled"
diff --git a/web/src/components/modals/ChallengeModal.tsx b/web/src/components/modals/ChallengeModal.tsx
index 9b55d3d9..d5231d51 100644
--- a/web/src/components/modals/ChallengeModal.tsx
+++ b/web/src/components/modals/ChallengeModal.tsx
@@ -264,25 +264,20 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 							}}
 						>
 							<Group gap={6}>
-								<Box
-									sx={{
-										color:
-											colorScheme === "light"
-												? challenge?.category?.color ||
-													"#3F51B5"
-												: lighten(
-														challenge?.category
-															?.color ||
-															"#3F51B5",
-														0.15
-													),
-										display: "flex",
-										alignItems: "center",
-									}}
-									className="no-select"
+								<MDIcon
+									color={
+										colorScheme === "light"
+											? challenge?.category?.color ||
+												"#3F51B5"
+											: lighten(
+													challenge?.category
+														?.color || "#3F51B5",
+													0.15
+												)
+									}
 								>
-									<MDIcon>{challenge?.category?.icon}</MDIcon>
-								</Box>
+									{challenge?.category?.icon}
+								</MDIcon>
 								<Text fw={700}>{challenge?.title}</Text>
 							</Group>
 							<Box
@@ -388,8 +383,7 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 													px={10}
 													gap={10}
 												>
-													<ThemeIcon
-														variant="transparent"
+													<MDIcon
 														c={
 															colorScheme ===
 															"light"
@@ -397,8 +391,8 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 																: "gray.3"
 														}
 													>
-														<MDIcon>lan</MDIcon>
-													</ThemeIcon>
+														lan
+													</MDIcon>
 
 													<Flex
 														align={"center"}
@@ -412,8 +406,7 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 														<Text>
 															{nat.src_port}
 														</Text>
-														<ThemeIcon
-															variant="transparent"
+														<MDIcon
 															c={
 																colorScheme ===
 																"light"
@@ -421,10 +414,8 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 																	: "gray.3"
 															}
 														>
-															<MDIcon>
-																arrow_right_alt
-															</MDIcon>
-														</ThemeIcon>
+															arrow_right_alt
+														</MDIcon>
 													</Flex>
 												</Flex>
 											}
@@ -530,7 +521,13 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 									variant="filled"
 									placeholder="Flag"
 									w={"85%"}
-									leftSection={<MDIcon>flag</MDIcon>}
+									leftSection={
+										<MDIcon
+											color={challenge?.category?.color}
+										>
+											flag
+										</MDIcon>
+									}
 									sx={{
 										input: {
 											"&:focus": {
diff --git a/web/src/components/modals/GameTeamApplyModal.tsx b/web/src/components/modals/GameTeamApplyModal.tsx
index 2d6fac10..5105b67a 100644
--- a/web/src/components/modals/GameTeamApplyModal.tsx
+++ b/web/src/components/modals/GameTeamApplyModal.tsx
@@ -125,9 +125,7 @@ export default function GameTeamApplyModal(props: GameTeamApplyModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>people</MDIcon>
-							</ThemeIcon>
+							<MDIcon>people</MDIcon>
 							<Text fw={600}>选择团队</Text>
 						</Flex>
 						<Divider my={10} />
@@ -157,7 +155,7 @@ export default function GameTeamApplyModal(props: GameTeamApplyModalProps) {
 												createGameTeam(team);
 											}}
 										>
-											<MDIcon>check</MDIcon>
+											<MDIcon c={"white"}>check</MDIcon>
 										</ActionIcon>
 									</Flex>
 								))}
diff --git a/web/src/components/modals/TeamCreateModal.tsx b/web/src/components/modals/TeamCreateModal.tsx
index 1504889f..a135e6a6 100644
--- a/web/src/components/modals/TeamCreateModal.tsx
+++ b/web/src/components/modals/TeamCreateModal.tsx
@@ -98,9 +98,7 @@ export default function TeamCreateModal(props: TeamCreateModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>group_add</MDIcon>
-							</ThemeIcon>
+							<MDIcon>group_add</MDIcon>
 							<Text fw={600}>创建团队</Text>
 						</Flex>
 						<Divider my={10} />
@@ -139,7 +137,9 @@ export default function TeamCreateModal(props: TeamCreateModalProps) {
 								<Flex mt={20} justify={"end"}>
 									<Button
 										type="submit"
-										leftSection={<MDIcon>check</MDIcon>}
+										leftSection={
+											<MDIcon c={"white"}>check</MDIcon>
+										}
 									>
 										创建
 									</Button>
diff --git a/web/src/components/modals/TeamEditModal.tsx b/web/src/components/modals/TeamEditModal.tsx
index 54817f9a..8228c116 100644
--- a/web/src/components/modals/TeamEditModal.tsx
+++ b/web/src/components/modals/TeamEditModal.tsx
@@ -177,9 +177,7 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent">
-							<MDIcon>person_remove</MDIcon>
-						</ThemeIcon>
+						<MDIcon>person_remove</MDIcon>
 						<Text fw={600}>踢出成员</Text>
 					</Flex>
 					<Divider my={10} />
@@ -205,9 +203,7 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent" color="orange">
-							<MDIcon>star</MDIcon>
-						</ThemeIcon>
+						<MDIcon>star</MDIcon>
 						<Text fw={600}>转让队长</Text>
 					</Flex>
 					<Divider my={10} />
@@ -232,9 +228,7 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent" color="red">
-							<MDIcon>swap_horiz</MDIcon>
-						</ThemeIcon>
+						<MDIcon color={"red"}>swap_horiz</MDIcon>
 						<Text fw={600}>解散团队</Text>
 					</Flex>
 					<Divider my={10} />
@@ -285,9 +279,7 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>group_add</MDIcon>
-							</ThemeIcon>
+							<MDIcon>group_add</MDIcon>
 							<Text fw={600}>团队详情</Text>
 						</Flex>
 						<Divider my={10} />
@@ -442,14 +434,11 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 														label="队长"
 														withArrow
 													>
-														<ThemeIcon
-															variant="transparent"
-															color="yellow"
+														<MDIcon
+															color={"yellow"}
 														>
-															<MDIcon>
-																star
-															</MDIcon>
-														</ThemeIcon>
+															star
+														</MDIcon>
 													</Tooltip>
 												)}
 												{isCaptain &&
@@ -511,7 +500,11 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 										</Button>
 										<Button
 											type="submit"
-											leftSection={<MDIcon>check</MDIcon>}
+											leftSection={
+												<MDIcon c={"white"}>
+													check
+												</MDIcon>
+											}
 										>
 											更新
 										</Button>
diff --git a/web/src/components/modals/TeamJoinModal.tsx b/web/src/components/modals/TeamJoinModal.tsx
index 05e7a977..6fdf5609 100644
--- a/web/src/components/modals/TeamJoinModal.tsx
+++ b/web/src/components/modals/TeamJoinModal.tsx
@@ -81,9 +81,7 @@ export default function TeamJoinModal(props: TeamJoinModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>waving_hand</MDIcon>
-							</ThemeIcon>
+							<MDIcon>waving_hand</MDIcon>
 							<Text fw={600}>加入团队</Text>
 						</Flex>
 						<Divider my={10} />
@@ -103,7 +101,9 @@ export default function TeamJoinModal(props: TeamJoinModalProps) {
 								<Flex mt={20} justify={"end"}>
 									<Button
 										type="submit"
-										leftSection={<MDIcon>check</MDIcon>}
+										leftSection={
+											<MDIcon c={"white"}>check</MDIcon>
+										}
 									>
 										加入
 									</Button>
diff --git a/web/src/components/modals/admin/ChallengeCreateModal.tsx b/web/src/components/modals/admin/ChallengeCreateModal.tsx
index 89c86891..8bffb37d 100644
--- a/web/src/components/modals/admin/ChallengeCreateModal.tsx
+++ b/web/src/components/modals/admin/ChallengeCreateModal.tsx
@@ -86,9 +86,7 @@ export default function ChallengeCreateModal(props: ChallengeCreateModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>collections_bookmark</MDIcon>
-							</ThemeIcon>
+							<MDIcon>collections_bookmark</MDIcon>
 							<Text fw={600}>创建题目</Text>
 						</Flex>
 						<Divider my={10} />
@@ -146,7 +144,9 @@ export default function ChallengeCreateModal(props: ChallengeCreateModalProps) {
 								<Flex mt={20} justify={"end"}>
 									<Button
 										type="submit"
-										leftSection={<MDIcon>check</MDIcon>}
+										leftSection={
+											<MDIcon c={"white"}>check</MDIcon>
+										}
 									>
 										创建
 									</Button>
diff --git a/web/src/components/modals/admin/ChallengeFlagCreateModal.tsx b/web/src/components/modals/admin/ChallengeFlagCreateModal.tsx
index ea13101b..b5ddd70c 100644
--- a/web/src/components/modals/admin/ChallengeFlagCreateModal.tsx
+++ b/web/src/components/modals/admin/ChallengeFlagCreateModal.tsx
@@ -82,9 +82,7 @@ export default function ChallengeFlagCreateModal(
 					w={"40rem"}
 				>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent">
-							<MDIcon>flag</MDIcon>
-						</ThemeIcon>
+						<MDIcon>flag</MDIcon>
 						<Text fw={600}>创建 Flag</Text>
 					</Flex>
 					<Divider my={10} />
@@ -138,7 +136,9 @@ export default function ChallengeFlagCreateModal(
 							<Flex mt={20} justify={"end"}>
 								<Button
 									type="submit"
-									leftSection={<MDIcon>check</MDIcon>}
+									leftSection={
+										<MDIcon c={"white"}>check</MDIcon>
+									}
 								>
 									创建
 								</Button>
diff --git a/web/src/components/modals/admin/ChallengeSelectModal.tsx b/web/src/components/modals/admin/ChallengeSelectModal.tsx
index af1637d8..f6229a01 100644
--- a/web/src/components/modals/admin/ChallengeSelectModal.tsx
+++ b/web/src/components/modals/admin/ChallengeSelectModal.tsx
@@ -68,9 +68,7 @@ export default function ChallengeSelectModal(props: ChallengeSelectModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>collections_bookmark</MDIcon>
-							</ThemeIcon>
+							<MDIcon>collections_bookmark</MDIcon>
 							<Text fw={600}>选择题目</Text>
 						</Flex>
 						<Divider my={10} />
@@ -90,16 +88,13 @@ export default function ChallengeSelectModal(props: ChallengeSelectModalProps) {
 									>
 										<Group gap={15}>
 											<Badge>{challenge?.id}</Badge>
-											<ThemeIcon
-												variant="transparent"
+											<MDIcon
 												color={
 													challenge?.category?.color
 												}
 											>
-												<MDIcon>
-													{challenge?.category?.icon}
-												</MDIcon>
-											</ThemeIcon>
+												{challenge?.category?.icon}
+											</MDIcon>
 											<Text fw={700} size="1rem">
 												{challenge?.title}
 											</Text>
diff --git a/web/src/components/modals/admin/GameChallengeCreateModal.tsx b/web/src/components/modals/admin/GameChallengeCreateModal.tsx
index 01f97eed..2fed7b7a 100644
--- a/web/src/components/modals/admin/GameChallengeCreateModal.tsx
+++ b/web/src/components/modals/admin/GameChallengeCreateModal.tsx
@@ -137,9 +137,7 @@ export default function GameChallengeCreateModal(
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>collections_bookmark</MDIcon>
-							</ThemeIcon>
+							<MDIcon>collections_bookmark</MDIcon>
 							<Text fw={600}>添加题目</Text>
 						</Flex>
 						<Divider my={10} />
@@ -161,22 +159,19 @@ export default function GameChallengeCreateModal(
 											{challenge && (
 												<>
 													<Group gap={15}>
-														<ThemeIcon
-															variant="transparent"
+														<MDIcon
 															color={
 																challenge
 																	?.category
 																	?.color
 															}
 														>
-															<MDIcon>
-																{
-																	challenge
-																		?.category
-																		?.icon
-																}
-															</MDIcon>
-														</ThemeIcon>
+															{
+																challenge
+																	?.category
+																	?.icon
+															}
+														</MDIcon>
 														<Text
 															fw={700}
 															size="1rem"
@@ -209,7 +204,9 @@ export default function GameChallengeCreateModal(
 								<Flex mt={20} justify={"end"}>
 									<Button
 										type="submit"
-										leftSection={<MDIcon>check</MDIcon>}
+										leftSection={
+											<MDIcon c={"white"}>check</MDIcon>
+										}
 									>
 										创建
 									</Button>
diff --git a/web/src/components/modals/admin/GameCreateModal.tsx b/web/src/components/modals/admin/GameCreateModal.tsx
index 4e741979..af9a465a 100644
--- a/web/src/components/modals/admin/GameCreateModal.tsx
+++ b/web/src/components/modals/admin/GameCreateModal.tsx
@@ -89,9 +89,7 @@ export default function GameCreateModal(props: GameCreateModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>flag</MDIcon>
-							</ThemeIcon>
+							<MDIcon>flag</MDIcon>
 							<Text fw={600}>创建比赛</Text>
 						</Flex>
 						<Divider my={10} />
@@ -152,7 +150,9 @@ export default function GameCreateModal(props: GameCreateModalProps) {
 								<Flex mt={20} justify={"end"}>
 									<Button
 										type="submit"
-										leftSection={<MDIcon>check</MDIcon>}
+										leftSection={
+											<MDIcon c={"white"}>check</MDIcon>
+										}
 									>
 										创建
 									</Button>
diff --git a/web/src/components/modals/admin/GameNoticeCreateModal.tsx b/web/src/components/modals/admin/GameNoticeCreateModal.tsx
index f256d9d1..21ed7a95 100644
--- a/web/src/components/modals/admin/GameNoticeCreateModal.tsx
+++ b/web/src/components/modals/admin/GameNoticeCreateModal.tsx
@@ -73,9 +73,7 @@ export default function GameNoticeCreateModal(
 					w={"40rem"}
 				>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent">
-							<MDIcon>campaign</MDIcon>
-						</ThemeIcon>
+						<MDIcon>campaign</MDIcon>
 						<Text fw={600}>创建公告</Text>
 					</Flex>
 					<Divider my={10} />
@@ -94,7 +92,9 @@ export default function GameNoticeCreateModal(
 							<Flex mt={20} justify={"end"}>
 								<Button
 									type="submit"
-									leftSection={<MDIcon>check</MDIcon>}
+									leftSection={
+										<MDIcon c={"white"}>check</MDIcon>
+									}
 								>
 									创建
 								</Button>
diff --git a/web/src/components/modals/admin/GameTeamCreateModal.tsx b/web/src/components/modals/admin/GameTeamCreateModal.tsx
index 5f5d47f7..ff819f98 100644
--- a/web/src/components/modals/admin/GameTeamCreateModal.tsx
+++ b/web/src/components/modals/admin/GameTeamCreateModal.tsx
@@ -109,9 +109,7 @@ export default function GameTeamCreateModal(props: GameTeamCreateModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>people</MDIcon>
-							</ThemeIcon>
+							<MDIcon>people</MDIcon>
 							<Text fw={600}>添加团队</Text>
 						</Flex>
 						<Divider my={10} />
@@ -158,7 +156,9 @@ export default function GameTeamCreateModal(props: GameTeamCreateModalProps) {
 								<Flex mt={20} justify={"end"}>
 									<Button
 										type="submit"
-										leftSection={<MDIcon>check</MDIcon>}
+										leftSection={
+											<MDIcon c={"white"}>check</MDIcon>
+										}
 									>
 										创建
 									</Button>
diff --git a/web/src/components/modals/admin/TeamCreateModal.tsx b/web/src/components/modals/admin/TeamCreateModal.tsx
index 40418145..88af1ef7 100644
--- a/web/src/components/modals/admin/TeamCreateModal.tsx
+++ b/web/src/components/modals/admin/TeamCreateModal.tsx
@@ -126,9 +126,7 @@ export default function TeamCreateModal(props: TeamCreateModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>group_add</MDIcon>
-							</ThemeIcon>
+							<MDIcon>group_add</MDIcon>
 							<Text fw={600}>创建团队</Text>
 						</Flex>
 						<Divider my={10} />
@@ -193,7 +191,9 @@ export default function TeamCreateModal(props: TeamCreateModalProps) {
 								<Flex mt={20} justify={"end"}>
 									<Button
 										type="submit"
-										leftSection={<MDIcon>check</MDIcon>}
+										leftSection={
+											<MDIcon c={"white"}>check</MDIcon>
+										}
 									>
 										创建
 									</Button>
diff --git a/web/src/components/modals/admin/TeamEditModal.tsx b/web/src/components/modals/admin/TeamEditModal.tsx
index daddd04d..af4b1a44 100644
--- a/web/src/components/modals/admin/TeamEditModal.tsx
+++ b/web/src/components/modals/admin/TeamEditModal.tsx
@@ -189,9 +189,7 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent">
-							<MDIcon>person_remove</MDIcon>
-						</ThemeIcon>
+						<MDIcon>person_remove</MDIcon>
 						<Text fw={600}>踢出成员</Text>
 					</Flex>
 					<Divider my={10} />
@@ -217,9 +215,7 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent" color="orange">
-							<MDIcon>star</MDIcon>
-						</ThemeIcon>
+						<MDIcon color={"orange"}>star</MDIcon>
 						<Text fw={600}>转让队长</Text>
 					</Flex>
 					<Divider my={10} />
@@ -277,9 +273,7 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>group_add</MDIcon>
-							</ThemeIcon>
+							<MDIcon>group_add</MDIcon>
 							<Text fw={600}>团队详情</Text>
 						</Flex>
 						<Divider my={10} />
@@ -418,14 +412,11 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 														label="队长"
 														withArrow
 													>
-														<ThemeIcon
-															variant="transparent"
-															color="yellow"
+														<MDIcon
+															color={"yellow"}
 														>
-															<MDIcon>
-																star
-															</MDIcon>
-														</ThemeIcon>
+															star
+														</MDIcon>
 													</Tooltip>
 												)}
 												{user?.id !==
@@ -476,7 +467,9 @@ export default function TeamEditModal(props: TeamEditModalProps) {
 								<Flex mt={20} justify={"end"} gap={10}>
 									<Button
 										type="submit"
-										leftSection={<MDIcon>check</MDIcon>}
+										leftSection={
+											<MDIcon c={"white"}>check</MDIcon>
+										}
 									>
 										更新
 									</Button>
diff --git a/web/src/components/modals/admin/TeamSelectModal.tsx b/web/src/components/modals/admin/TeamSelectModal.tsx
index c842d464..99bc6c20 100644
--- a/web/src/components/modals/admin/TeamSelectModal.tsx
+++ b/web/src/components/modals/admin/TeamSelectModal.tsx
@@ -68,9 +68,7 @@ export default function TeamSelectModal(props: TeamSelectModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>people</MDIcon>
-							</ThemeIcon>
+							<MDIcon>people</MDIcon>
 							<Text fw={600}>选择团队</Text>
 						</Flex>
 						<Divider my={10} />
diff --git a/web/src/components/modals/admin/UserCreateModal.tsx b/web/src/components/modals/admin/UserCreateModal.tsx
index 993b8990..6305850f 100644
--- a/web/src/components/modals/admin/UserCreateModal.tsx
+++ b/web/src/components/modals/admin/UserCreateModal.tsx
@@ -105,9 +105,7 @@ export default function UserCreateModal(props: UserCreateModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>person_add</MDIcon>
-							</ThemeIcon>
+							<MDIcon>person_add</MDIcon>
 							<Text fw={600}>创建用户</Text>
 						</Flex>
 						<Divider my={10} />
@@ -158,7 +156,9 @@ export default function UserCreateModal(props: UserCreateModalProps) {
 								<Flex mt={20} justify={"end"}>
 									<Button
 										type="submit"
-										leftSection={<MDIcon>check</MDIcon>}
+										leftSection={
+											<MDIcon c={"white"}>check</MDIcon>
+										}
 									>
 										创建
 									</Button>
diff --git a/web/src/components/modals/admin/UserEditModal.tsx b/web/src/components/modals/admin/UserEditModal.tsx
index a90cc371..c158b0e0 100644
--- a/web/src/components/modals/admin/UserEditModal.tsx
+++ b/web/src/components/modals/admin/UserEditModal.tsx
@@ -163,9 +163,7 @@ export default function UserEditModal(props: UserEditModalProps) {
 						pos={"relative"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>person_add</MDIcon>
-							</ThemeIcon>
+							<MDIcon>person_add</MDIcon>
 							<Text fw={600}>更新用户</Text>
 						</Flex>
 						<Divider my={10} />
@@ -286,7 +284,9 @@ export default function UserEditModal(props: UserEditModalProps) {
 								<Flex mt={20} justify={"end"}>
 									<Button
 										type="submit"
-										leftSection={<MDIcon>check</MDIcon>}
+										leftSection={
+											<MDIcon c={"white"}>check</MDIcon>
+										}
 									>
 										更新
 									</Button>
diff --git a/web/src/components/modals/admin/UserSelectModal.tsx b/web/src/components/modals/admin/UserSelectModal.tsx
index 20a0a00a..5f3d60ea 100644
--- a/web/src/components/modals/admin/UserSelectModal.tsx
+++ b/web/src/components/modals/admin/UserSelectModal.tsx
@@ -68,9 +68,7 @@ export default function UserSelectModal(props: UserSelectModalProps) {
 						w={"40rem"}
 					>
 						<Flex gap={10} align={"center"}>
-							<ThemeIcon variant="transparent">
-								<MDIcon>person</MDIcon>
-							</ThemeIcon>
+							<MDIcon>person</MDIcon>
 							<Text fw={600}>选择用户</Text>
 						</Flex>
 						<Divider my={10} />
diff --git a/web/src/components/navigations/Navbar.tsx b/web/src/components/navigations/Navbar.tsx
index 2def01f1..181d7c69 100644
--- a/web/src/components/navigations/Navbar.tsx
+++ b/web/src/components/navigations/Navbar.tsx
@@ -107,7 +107,11 @@ export default function Navbar() {
 									backgroundColor: "transparent",
 								},
 							}}
-							leftSection={<MDIcon>collections_bookmark</MDIcon>}
+							leftSection={
+								<MDIcon color={"white"}>
+									collections_bookmark
+								</MDIcon>
+							}
 							onClick={() => navigate("/challenges")}
 						>
 							题库
@@ -119,7 +123,7 @@ export default function Navbar() {
 									backgroundColor: "transparent",
 								},
 							}}
-							leftSection={<MDIcon>flag</MDIcon>}
+							leftSection={<MDIcon color={"white"}>flag</MDIcon>}
 							onClick={() => navigate("/games")}
 						>
 							比赛
@@ -131,7 +135,9 @@ export default function Navbar() {
 									backgroundColor: "transparent",
 								},
 							}}
-							leftSection={<MDIcon>people</MDIcon>}
+							leftSection={
+								<MDIcon color={"white"}>people</MDIcon>
+							}
 							onClick={() => navigate("/teams")}
 						>
 							团队
@@ -144,7 +150,9 @@ export default function Navbar() {
 										backgroundColor: "transparent",
 									},
 								}}
-								leftSection={<MDIcon>settings</MDIcon>}
+								leftSection={
+									<MDIcon color={"white"}>settings</MDIcon>
+								}
 								onClick={() => navigate("/admin")}
 							>
 								管理
@@ -161,7 +169,9 @@ export default function Navbar() {
 									backgroundColor: "transparent",
 								},
 							}}
-							leftSection={<MDIcon>keyboard_return</MDIcon>}
+							leftSection={
+								<MDIcon color={"white"}>keyboard_return</MDIcon>
+							}
 							onClick={() => navigate("/")}
 						>
 							返回
@@ -173,7 +183,9 @@ export default function Navbar() {
 									backgroundColor: "transparent",
 								},
 							}}
-							leftSection={<MDIcon>settings</MDIcon>}
+							leftSection={
+								<MDIcon color={"white"}>settings</MDIcon>
+							}
 							onClick={() => navigate("/admin/global")}
 						>
 							全局
@@ -185,7 +197,11 @@ export default function Navbar() {
 									backgroundColor: "transparent",
 								},
 							}}
-							leftSection={<MDIcon>collections_bookmark</MDIcon>}
+							leftSection={
+								<MDIcon color={"white"}>
+									collections_bookmark
+								</MDIcon>
+							}
 							onClick={() => navigate("/admin/challenges")}
 						>
 							题库
@@ -197,7 +213,9 @@ export default function Navbar() {
 									backgroundColor: "transparent",
 								},
 							}}
-							leftSection={<MDIcon>category</MDIcon>}
+							leftSection={
+								<MDIcon color={"white"}>category</MDIcon>
+							}
 							onClick={() => navigate("/admin/categories")}
 						>
 							分类
@@ -209,7 +227,7 @@ export default function Navbar() {
 									backgroundColor: "transparent",
 								},
 							}}
-							leftSection={<MDIcon>flag</MDIcon>}
+							leftSection={<MDIcon color={"white"}>flag</MDIcon>}
 							onClick={() => navigate("/admin/games")}
 						>
 							比赛
@@ -221,7 +239,9 @@ export default function Navbar() {
 									backgroundColor: "transparent",
 								},
 							}}
-							leftSection={<MDIcon>people</MDIcon>}
+							leftSection={
+								<MDIcon color={"white"}>people</MDIcon>
+							}
 							onClick={() => navigate("/admin/teams")}
 						>
 							团队
@@ -233,7 +253,9 @@ export default function Navbar() {
 									backgroundColor: "transparent",
 								},
 							}}
-							leftSection={<MDIcon>person</MDIcon>}
+							leftSection={
+								<MDIcon color={"white"}>person</MDIcon>
+							}
 							onClick={() => navigate("/admin/users")}
 						>
 							用户
@@ -253,7 +275,7 @@ export default function Navbar() {
 						);
 					}}
 				>
-					<MDIcon>
+					<MDIcon color={"white"}>
 						{colorScheme === "dark" ? "light_mode" : "dark_mode"}
 					</MDIcon>
 				</ActionIcon>
@@ -304,7 +326,9 @@ export default function Navbar() {
 							<Menu.Divider />
 							<Menu.Item
 								c={"red"}
-								leftSection={<MDIcon>logout</MDIcon>}
+								leftSection={
+									<MDIcon color={"red"}>logout</MDIcon>
+								}
 								onClick={logout}
 							>
 								退出
diff --git a/web/src/components/navigations/admin/ChallengeEditSidebar.tsx b/web/src/components/navigations/admin/ChallengeEditSidebar.tsx
index 36fea1bd..ae1c06b3 100644
--- a/web/src/components/navigations/admin/ChallengeEditSidebar.tsx
+++ b/web/src/components/navigations/admin/ChallengeEditSidebar.tsx
@@ -16,7 +16,7 @@ export default function ChallengeEditSidebar(props: ChallengeEditSidebarProps) {
 		<Stack w={150} {...stackProps}>
 			<Button
 				size="md"
-				leftSection={<MDIcon>arrow_back</MDIcon>}
+				leftSection={<MDIcon c={"white"}>arrow_back</MDIcon>}
 				onClick={() => navigate(`/admin/challenges`)}
 			>
 				返回上级
@@ -26,21 +26,33 @@ export default function ChallengeEditSidebar(props: ChallengeEditSidebarProps) {
 				<Button
 					variant={path === "" ? "filled" : "subtle"}
 					onClick={() => navigate(`/admin/challenges/${id}`)}
-					leftSection={<MDIcon>info</MDIcon>}
+					leftSection={
+						<MDIcon c={path === "" ? "white" : "brand"}>
+							info
+						</MDIcon>
+					}
 				>
 					基本信息
 				</Button>
 				<Button
 					variant={path === "/flags" ? "filled" : "subtle"}
 					onClick={() => navigate(`/admin/challenges/${id}/flags`)}
-					leftSection={<MDIcon>flag</MDIcon>}
+					leftSection={
+						<MDIcon c={path === "/flags" ? "white" : "brand"}>
+							flag
+						</MDIcon>
+					}
 				>
 					Flags
 				</Button>
 				<Button
 					variant={path === "/images" ? "filled" : "subtle"}
 					onClick={() => navigate(`/admin/challenges/${id}/images`)}
-					leftSection={<MDIcon>package_2</MDIcon>}
+					leftSection={
+						<MDIcon c={path === "/images" ? "white" : "brand"}>
+							package_2
+						</MDIcon>
+					}
 				>
 					镜像
 				</Button>
@@ -49,7 +61,11 @@ export default function ChallengeEditSidebar(props: ChallengeEditSidebarProps) {
 					onClick={() =>
 						navigate(`/admin/challenges/${id}/submissions`)
 					}
-					leftSection={<MDIcon>verified</MDIcon>}
+					leftSection={
+						<MDIcon c={path === "/submissions" ? "white" : "brand"}>
+							verified
+						</MDIcon>
+					}
 				>
 					提交记录
 				</Button>
diff --git a/web/src/components/navigations/admin/GameEditSidebar.tsx b/web/src/components/navigations/admin/GameEditSidebar.tsx
index 9a6b719b..3e64dfce 100644
--- a/web/src/components/navigations/admin/GameEditSidebar.tsx
+++ b/web/src/components/navigations/admin/GameEditSidebar.tsx
@@ -16,7 +16,7 @@ export default function GameEditSidebar(props: GameEditSidebarProps) {
 		<Stack w={150} {...stackProps}>
 			<Button
 				size="md"
-				leftSection={<MDIcon>arrow_back</MDIcon>}
+				leftSection={<MDIcon c={"white"}>arrow_back</MDIcon>}
 				onClick={() => navigate(`/admin/games`)}
 			>
 				返回上级
@@ -26,35 +26,55 @@ export default function GameEditSidebar(props: GameEditSidebarProps) {
 				<Button
 					variant={path === "" ? "filled" : "subtle"}
 					onClick={() => navigate(`/admin/games/${id}`)}
-					leftSection={<MDIcon>info</MDIcon>}
+					leftSection={
+						<MDIcon c={path === "" ? "white" : "brand"}>
+							info
+						</MDIcon>
+					}
 				>
 					基本信息
 				</Button>
 				<Button
 					variant={path === "/challenges" ? "filled" : "subtle"}
 					onClick={() => navigate(`/admin/games/${id}/challenges`)}
-					leftSection={<MDIcon>collections_bookmark</MDIcon>}
+					leftSection={
+						<MDIcon c={path === "/challenges" ? "white" : "brand"}>
+							collections_bookmark
+						</MDIcon>
+					}
 				>
 					题目
 				</Button>
 				<Button
 					variant={path === "/teams" ? "filled" : "subtle"}
 					onClick={() => navigate(`/admin/games/${id}/teams`)}
-					leftSection={<MDIcon>people</MDIcon>}
+					leftSection={
+						<MDIcon c={path === "/teams" ? "white" : "brand"}>
+							people
+						</MDIcon>
+					}
 				>
 					参赛团队
 				</Button>
 				<Button
 					variant={path === "/submissions" ? "filled" : "subtle"}
 					onClick={() => navigate(`/admin/games/${id}/submissions`)}
-					leftSection={<MDIcon>verified</MDIcon>}
+					leftSection={
+						<MDIcon c={path === "/submissions" ? "white" : "brand"}>
+							verified
+						</MDIcon>
+					}
 				>
 					提交记录
 				</Button>
 				<Button
 					variant={path === "/notices" ? "filled" : "subtle"}
 					onClick={() => navigate(`/admin/games/${id}/notices`)}
-					leftSection={<MDIcon>campaign</MDIcon>}
+					leftSection={
+						<MDIcon c={path === "/notices" ? "white" : "brand"}>
+							campaign
+						</MDIcon>
+					}
 				>
 					公告
 				</Button>
diff --git a/web/src/components/ui/MDIcon.tsx b/web/src/components/ui/MDIcon.tsx
index 77a2e62c..3517dd6c 100644
--- a/web/src/components/ui/MDIcon.tsx
+++ b/web/src/components/ui/MDIcon.tsx
@@ -1,18 +1,26 @@
-export default function MDIcon({
-	size,
-	children,
-}: {
-	size?: number;
-	children: React.ReactNode;
-}) {
-	return (
-		<span
-			className="material-symbols-rounded"
-			style={{
-				fontSize: size || 24,
-			}}
-		>
-			{children}
-		</span>
-	);
+import { forwardRef, ReactNode } from "react";
+import { ThemeIcon, ThemeIconProps } from "@mantine/core";
+
+interface MDIconProps extends ThemeIconProps {
+	children: ReactNode;
 }
+
+const MDIcon = forwardRef<HTMLSpanElement, MDIconProps>(
+	({ children, size, ...themeIconProps }, ref) => {
+		return (
+			<ThemeIcon variant="transparent" {...themeIconProps} size={size}>
+				<span
+					ref={ref}
+					className="material-symbols-rounded"
+					style={{
+						fontSize: size,
+					}}
+				>
+					{children}
+				</span>
+			</ThemeIcon>
+		);
+	}
+);
+
+export default MDIcon;
diff --git a/web/src/components/widgets/ChallengeCard.tsx b/web/src/components/widgets/ChallengeCard.tsx
index 4fedeb44..a5ed24f1 100644
--- a/web/src/components/widgets/ChallengeCard.tsx
+++ b/web/src/components/widgets/ChallengeCard.tsx
@@ -84,14 +84,16 @@ export default function ChallengeCard({
 		>
 			<Box
 				pos={"absolute"}
-				right={-15}
-				bottom={-22.5}
+				right={0}
+				bottom={-20}
 				sx={{
 					opacity: 0.2,
 					color: cardTextColor,
 				}}
 			>
-				<MDIcon size={180}>{challenge?.category?.icon}</MDIcon>
+				<MDIcon color={cardTextColor} size={180}>
+					{challenge?.category?.icon}
+				</MDIcon>
 			</Box>
 			{challenge?.solved && (
 				<Box
@@ -103,9 +105,9 @@ export default function ChallengeCard({
 					}}
 				>
 					<Tooltip label="已解决">
-						<ThemeIcon variant="transparent" c={"#FFF"}>
-							<MDIcon size={30}>done</MDIcon>
-						</ThemeIcon>
+						<MDIcon size={30} color={"#FFF"}>
+							done
+						</MDIcon>
 					</Tooltip>
 				</Box>
 			)}
diff --git a/web/src/components/widgets/GameNoticeArea.tsx b/web/src/components/widgets/GameNoticeArea.tsx
index 118cd7b1..768d17f2 100644
--- a/web/src/components/widgets/GameNoticeArea.tsx
+++ b/web/src/components/widgets/GameNoticeArea.tsx
@@ -72,9 +72,7 @@ export default function GameNoticeArea() {
 							}}
 						>
 							{notice?.type === "normal" && (
-								<ThemeIcon variant="transparent" color="brand">
-									<MDIcon>campaign</MDIcon>
-								</ThemeIcon>
+								<MDIcon>campaign</MDIcon>
 							)}
 							{notice?.type === "first_blood" && (
 								<FirstBloodIcon />
@@ -86,9 +84,7 @@ export default function GameNoticeArea() {
 								<ThirdBloodIcon />
 							)}
 							{notice?.type === "new_challenge" && (
-								<ThemeIcon variant="transparent" color="green">
-									<MDIcon>add</MDIcon>
-								</ThemeIcon>
+								<MDIcon color={"green"}>add</MDIcon>
 							)}
 						</Box>
 						<Box
diff --git a/web/src/components/widgets/TeamCard.tsx b/web/src/components/widgets/TeamCard.tsx
index 37c3d30a..f5d53067 100644
--- a/web/src/components/widgets/TeamCard.tsx
+++ b/web/src/components/widgets/TeamCard.tsx
@@ -32,9 +32,7 @@ export default function TeamCard({ team }: { team?: Team }) {
 					size={"xl"}
 					color="brand"
 				>
-					<ThemeIcon variant="transparent">
-						<MDIcon size={40}>people</MDIcon>
-					</ThemeIcon>
+					<MDIcon size={40}>people</MDIcon>
 				</Avatar>
 				<Stack gap={5}>
 					<Text size="2rem" fw={600}>
@@ -73,16 +71,16 @@ export default function TeamCard({ team }: { team?: Team }) {
 			<Box
 				sx={{
 					position: "absolute",
-					right: 70,
+					right: 50,
 					bottom: 10,
 				}}
 			>
-				<ThemeIcon
-					variant="transparent"
-					c={alpha("var(--mantine-color-gray-1)", 0.1)}
+				<MDIcon
+					c={alpha("var(--mantine-color-gray-1)", 0.2)}
+					size={120}
 				>
-					<MDIcon size={120}>people</MDIcon>
-				</ThemeIcon>
+					people
+				</MDIcon>
 			</Box>
 		</Card>
 	);
diff --git a/web/src/components/widgets/admin/ChallengeFlagAccordion.tsx b/web/src/components/widgets/admin/ChallengeFlagAccordion.tsx
index 2659d8f6..b82718ec 100644
--- a/web/src/components/widgets/admin/ChallengeFlagAccordion.tsx
+++ b/web/src/components/widgets/admin/ChallengeFlagAccordion.tsx
@@ -83,9 +83,7 @@ export default function ChallengeFlagAccordion(
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent">
-							<MDIcon>flag</MDIcon>
-						</ThemeIcon>
+						<MDIcon>flag</MDIcon>
 						<Text fw={600}>删除 Flag</Text>
 					</Flex>
 					<Divider my={10} />
@@ -132,10 +130,9 @@ export default function ChallengeFlagAccordion(
 					<Tooltip label="删除 Flag" withArrow>
 						<ActionIcon
 							variant="transparent"
-							color="red"
 							onClick={() => openDeleteFlagModal()}
 						>
-							<MDIcon>delete</MDIcon>
+							<MDIcon color="red">delete</MDIcon>
 						</ActionIcon>
 					</Tooltip>
 				</Flex>
@@ -188,7 +185,7 @@ export default function ChallengeFlagAccordion(
 						<Flex justify={"end"}>
 							<Button
 								type="submit"
-								leftSection={<MDIcon>check</MDIcon>}
+								leftSection={<MDIcon c={"white"}>check</MDIcon>}
 							>
 								保存
 							</Button>
diff --git a/web/src/components/widgets/admin/GameChallengeAccordion.tsx b/web/src/components/widgets/admin/GameChallengeAccordion.tsx
index bd1ae929..e30ceb5e 100644
--- a/web/src/components/widgets/admin/GameChallengeAccordion.tsx
+++ b/web/src/components/widgets/admin/GameChallengeAccordion.tsx
@@ -99,9 +99,7 @@ export default function GameChallengeAccordion({
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent">
-							<MDIcon>bookmark_remove</MDIcon>
-						</ThemeIcon>
+						<MDIcon>bookmark_remove</MDIcon>
 						<Text fw={600}>删除题目</Text>
 					</Flex>
 					<Divider my={10} />
@@ -143,16 +141,13 @@ export default function GameChallengeAccordion({
 					<Flex justify={"space-between"}>
 						<Group gap={15}>
 							<Badge>{gameChallenge?.challenge?.id}</Badge>
-							<ThemeIcon
-								variant="transparent"
+							<MDIcon
 								color={
 									gameChallenge?.challenge?.category?.color
 								}
 							>
-								<MDIcon>
-									{gameChallenge?.challenge?.category?.icon}
-								</MDIcon>
-							</ThemeIcon>
+								{gameChallenge?.challenge?.category?.icon}
+							</MDIcon>
 							<Text fw={700} size="1rem">
 								{gameChallenge?.challenge?.title}
 							</Text>
@@ -180,12 +175,11 @@ export default function GameChallengeAccordion({
 					<Tooltip label="删除题目" withArrow>
 						<ActionIcon
 							variant="transparent"
-							color="red"
 							onClick={() =>
 								openDeleteGameChallengeModal(gameChallenge)
 							}
 						>
-							<MDIcon>delete</MDIcon>
+							<MDIcon color={"red"}>delete</MDIcon>
 						</ActionIcon>
 					</Tooltip>
 				</Flex>
@@ -209,7 +203,7 @@ export default function GameChallengeAccordion({
 						</Group>
 						<Button
 							type="submit"
-							leftSection={<MDIcon>check</MDIcon>}
+							leftSection={<MDIcon c={"white"}>check</MDIcon>}
 						>
 							保存
 						</Button>
diff --git a/web/src/pages/admin/categories/index.tsx b/web/src/pages/admin/categories/index.tsx
new file mode 100644
index 00000000..d2d2d588
--- /dev/null
+++ b/web/src/pages/admin/categories/index.tsx
@@ -0,0 +1,111 @@
+import MDIcon from "@/components/ui/MDIcon";
+import {
+	Flex,
+	Stack,
+	ActionIcon,
+	Paper,
+	Table,
+	Badge,
+	Group,
+	Text,
+	ColorSwatch,
+} from "@mantine/core";
+import { useEffect, useState } from "react";
+import { Category } from "@/types/category";
+import { useCategoryApi } from "@/api/category";
+
+export default function Page() {
+	const categoryApi = useCategoryApi();
+	const [categories, setCategories] = useState<Array<Category>>([]);
+
+	function getCategories() {
+		categoryApi.getCategories().then((res) => {
+			const r = res.data;
+			setCategories(r?.data);
+		});
+	}
+
+	useEffect(() => {
+		getCategories();
+	}, []);
+
+	return (
+		<>
+			<Flex my={36} mx={"10%"} justify={"center"}>
+				<Stack
+					align="center"
+					gap={36}
+					component={Paper}
+					mih={"calc(100vh - 10rem)"}
+					sx={{
+						flexGrow: 1,
+					}}
+				>
+					<Table stickyHeader horizontalSpacing={"md"} striped>
+						<Table.Thead>
+							<Table.Tr
+								sx={{
+									lineHeight: 3,
+								}}
+							>
+								<Table.Th>#</Table.Th>
+								<Table.Th>分类名</Table.Th>
+								<Table.Th>颜色（Hex）</Table.Th>
+								<Table.Th>图标</Table.Th>
+								<Table.Th>
+									<Flex justify={"center"}>
+										<ActionIcon variant="transparent">
+											<MDIcon>add</MDIcon>
+										</ActionIcon>
+									</Flex>
+								</Table.Th>
+							</Table.Tr>
+						</Table.Thead>
+						<Table.Tbody>
+							{categories?.map((category) => (
+								<Table.Tr key={category?.id}>
+									<Table.Th>
+										<Badge>{category?.id}</Badge>
+									</Table.Th>
+									<Table.Th>
+										{category?.name?.toUpperCase()}
+									</Table.Th>
+									<Table.Th>
+										<Group>
+											<ColorSwatch
+												color={
+													category?.color || "brand"
+												}
+											/>
+											<Text c={category?.color} fw={600}>
+												{category?.color?.toUpperCase()}
+											</Text>
+										</Group>
+									</Table.Th>
+									<Table.Th>
+										<Group>
+											<MDIcon>{category?.icon}</MDIcon>
+											<Text>{category?.icon}</Text>
+										</Group>
+									</Table.Th>
+									<Table.Th>
+										<Group justify="center">
+											<ActionIcon variant="transparent">
+												<MDIcon>edit</MDIcon>
+											</ActionIcon>
+											<ActionIcon variant="transparent">
+												<MDIcon color={"red"}>
+													delete
+												</MDIcon>
+											</ActionIcon>
+										</Group>
+									</Table.Th>
+								</Table.Tr>
+							))}
+						</Table.Tbody>
+					</Table>
+				</Stack>
+			</Flex>
+		</>
+	);
+}
diff --git a/web/src/pages/admin/challenges/[id]/flags.tsx b/web/src/pages/admin/challenges/[id]/flags.tsx
index ed497d37..66d0ab49 100644
--- a/web/src/pages/admin/challenges/[id]/flags.tsx
+++ b/web/src/pages/admin/challenges/[id]/flags.tsx
@@ -56,9 +56,7 @@ function Page() {
 				<Stack gap={10}>
 					<Flex justify={"space-between"} align={"center"}>
 						<Group>
-							<ThemeIcon variant="transparent">
-								<MDIcon>flag</MDIcon>
-							</ThemeIcon>
+							<MDIcon>flag</MDIcon>
 							<Text fw={700} size="xl">
 								Flags
 							</Text>
diff --git a/web/src/pages/admin/challenges/[id]/images.tsx b/web/src/pages/admin/challenges/[id]/images.tsx
index f4b060b6..0ace8935 100644
--- a/web/src/pages/admin/challenges/[id]/images.tsx
+++ b/web/src/pages/admin/challenges/[id]/images.tsx
@@ -95,9 +95,7 @@ function Page() {
 				<Stack>
 					<Stack gap={10}>
 						<Group>
-							<ThemeIcon variant="transparent">
-								<MDIcon>deployed_code_update</MDIcon>
-							</ThemeIcon>
+							<MDIcon>deployed_code_update</MDIcon>
 							<Text fw={700} size="xl">
 								镜像参数
 							</Text>
@@ -129,9 +127,7 @@ function Page() {
 					<Stack gap={10}>
 						<Flex justify={"space-between"} align="center">
 							<Group>
-								<ThemeIcon variant="transparent">
-									<MDIcon>upgrade</MDIcon>
-								</ThemeIcon>
+								<MDIcon>upgrade</MDIcon>
 								<Text fw={700} size="xl">
 									端口映射
 								</Text>
@@ -206,11 +202,8 @@ function Page() {
 										setPorts(newPorts);
 									}}
 								>
-									<ActionIcon
-										variant="transparent"
-										color="red"
-									>
-										<MDIcon>delete</MDIcon>
+									<ActionIcon variant="transparent">
+										<MDIcon color={"red"}>delete</MDIcon>
 									</ActionIcon>
 								</Tooltip>
 							</Flex>
@@ -219,9 +212,7 @@ function Page() {
 					<Stack gap={10}>
 						<Flex justify={"space-between"} align="center">
 							<Group>
-								<ThemeIcon variant="transparent">
-									<MDIcon>language</MDIcon>
-								</ThemeIcon>
+								<MDIcon>language</MDIcon>
 								<Text fw={700} size="xl">
 									环境变量
 								</Text>
@@ -294,11 +285,8 @@ function Page() {
 										setEnvs(newEnvs);
 									}}
 								>
-									<ActionIcon
-										variant="transparent"
-										color="red"
-									>
-										<MDIcon>delete</MDIcon>
+									<ActionIcon variant="transparent">
+										<MDIcon color={"red"}>delete</MDIcon>
 									</ActionIcon>
 								</Tooltip>
 							</Flex>
@@ -307,7 +295,7 @@ function Page() {
 					<Flex justify="end">
 						<Button
 							type="submit"
-							leftSection={<MDIcon>check</MDIcon>}
+							leftSection={<MDIcon c={"white"}>check</MDIcon>}
 						>
 							保存
 						</Button>
diff --git a/web/src/pages/admin/challenges/[id]/index.tsx b/web/src/pages/admin/challenges/[id]/index.tsx
index 79f70b2e..718bb5b7 100644
--- a/web/src/pages/admin/challenges/[id]/index.tsx
+++ b/web/src/pages/admin/challenges/[id]/index.tsx
@@ -155,9 +155,7 @@ function Page() {
 			<Stack m={36}>
 				<Stack gap={10}>
 					<Group>
-						<ThemeIcon variant="transparent">
-							<MDIcon>info</MDIcon>
-						</ThemeIcon>
+						<MDIcon>info</MDIcon>
 						<Text fw={700} size="xl">
 							基本信息
 						</Text>
@@ -240,11 +238,10 @@ function Page() {
 							<Tooltip label="清除附件" withArrow>
 								<ActionIcon
 									variant="transparent"
-									color="red"
 									my={7}
 									onClick={() => deleteAttachment()}
 								>
-									<MDIcon>delete</MDIcon>
+									<MDIcon color={"red"}>delete</MDIcon>
 								</ActionIcon>
 							</Tooltip>
 						</Group>
@@ -281,7 +278,7 @@ function Page() {
 							<Button
 								type="submit"
 								size="md"
-								leftSection={<MDIcon>check</MDIcon>}
+								leftSection={<MDIcon c={"white"}>check</MDIcon>}
 							>
 								保存
 							</Button>
diff --git a/web/src/pages/admin/challenges/[id]/submissions.tsx b/web/src/pages/admin/challenges/[id]/submissions.tsx
index 75517ff2..580c4206 100644
--- a/web/src/pages/admin/challenges/[id]/submissions.tsx
+++ b/web/src/pages/admin/challenges/[id]/submissions.tsx
@@ -127,9 +127,7 @@ function Page() {
 			<Stack m={36}>
 				<Stack gap={10}>
 					<Group>
-						<ThemeIcon variant="transparent">
-							<MDIcon>verified</MDIcon>
-						</ThemeIcon>
+						<MDIcon>verified</MDIcon>
 						<Text fw={700} size="xl">
 							提交记录
 						</Text>
@@ -226,11 +224,10 @@ function Page() {
 												withArrow
 												label="删除提交记录"
 											>
-												<ActionIcon
-													variant="transparent"
-													color="red"
-												>
-													<MDIcon>delete</MDIcon>
+												<ActionIcon variant="transparent">
+													<MDIcon color={"red"}>
+														delete
+													</MDIcon>
 												</ActionIcon>
 											</Tooltip>
 										</Group>
diff --git a/web/src/pages/admin/challenges/index.tsx b/web/src/pages/admin/challenges/index.tsx
index 9dc182da..0d53d600 100644
--- a/web/src/pages/admin/challenges/index.tsx
+++ b/web/src/pages/admin/challenges/index.tsx
@@ -112,9 +112,7 @@ export default function Page() {
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent">
-							<MDIcon>bookmark_remove</MDIcon>
-						</ThemeIcon>
+						<MDIcon>bookmark_remove</MDIcon>
 						<Text fw={600}>删除题目</Text>
 					</Flex>
 					<Divider my={10} />
@@ -158,7 +156,9 @@ export default function Page() {
 							}}
 						/>
 						<ActionIcon onClick={() => setSearch(searchInput)}>
-							<MDIcon size={15}>search</MDIcon>
+							<MDIcon size={15} c={"white"}>
+								search
+							</MDIcon>
 						</ActionIcon>
 					</Flex>
 					<Select
@@ -221,11 +221,9 @@ export default function Page() {
 									<Table.Th>
 										<Flex justify={"start"}>
 											<Tooltip label="投放到题库">
-												<ThemeIcon variant="transparent">
-													<MDIcon>
-														collections_bookmark
-													</MDIcon>
-												</ThemeIcon>
+												<MDIcon>
+													collections_bookmark
+												</MDIcon>
 											</Tooltip>
 										</Flex>
 									</Table.Th>
@@ -280,8 +278,7 @@ export default function Page() {
 										</Table.Th>
 										<Table.Th>
 											<Group gap={10}>
-												<ThemeIcon
-													variant="transparent"
+												<MDIcon
 													color={
 														colorScheme === "dark"
 															? lighten(
@@ -296,13 +293,8 @@ export default function Page() {
 																	?.color
 													}
 												>
-													<MDIcon>
-														{
-															challenge?.category
-																?.icon
-														}
-													</MDIcon>
-												</ThemeIcon>
+													{challenge?.category?.icon}
+												</MDIcon>
 												<Text
 													c={
 														colorScheme === "dark"
@@ -337,14 +329,15 @@ export default function Page() {
 												</ActionIcon>
 												<ActionIcon
 													variant="transparent"
-													color="red"
 													onClick={() =>
 														openDeleteChallengeModal(
 															challenge
 														)
 													}
 												>
-													<MDIcon>delete</MDIcon>
+													<MDIcon color={"red"}>
+														delete
+													</MDIcon>
 												</ActionIcon>
 											</Group>
 										</Table.Th>
diff --git a/web/src/pages/admin/games/[id]/challenges.tsx b/web/src/pages/admin/games/[id]/challenges.tsx
index af6a60e8..e59ff6d2 100644
--- a/web/src/pages/admin/games/[id]/challenges.tsx
+++ b/web/src/pages/admin/games/[id]/challenges.tsx
@@ -83,9 +83,7 @@ function Page() {
 				<Stack gap={10}>
 					<Flex justify={"space-between"} align={"center"}>
 						<Group>
-							<ThemeIcon variant="transparent">
-								<MDIcon>collections_bookmark</MDIcon>
-							</ThemeIcon>
+							<MDIcon>collections_bookmark</MDIcon>
 							<Text fw={700} size="xl">
 								题目
 							</Text>
diff --git a/web/src/pages/admin/games/[id]/index.tsx b/web/src/pages/admin/games/[id]/index.tsx
index 0bbfd485..5d001731 100644
--- a/web/src/pages/admin/games/[id]/index.tsx
+++ b/web/src/pages/admin/games/[id]/index.tsx
@@ -143,9 +143,7 @@ function Page() {
 			<Stack m={36}>
 				<Stack gap={10}>
 					<Group>
-						<ThemeIcon variant="transparent">
-							<MDIcon>info</MDIcon>
-						</ThemeIcon>
+						<MDIcon>info</MDIcon>
 						<Text fw={700} size="xl">
 							基本信息
 						</Text>
@@ -360,7 +358,7 @@ function Page() {
 							<Button
 								type="submit"
 								size="md"
-								leftSection={<MDIcon>check</MDIcon>}
+								leftSection={<MDIcon c={"white"}>check</MDIcon>}
 							>
 								保存
 							</Button>
diff --git a/web/src/pages/admin/games/[id]/notices.tsx b/web/src/pages/admin/games/[id]/notices.tsx
index 21ddc4de..fb065ff1 100644
--- a/web/src/pages/admin/games/[id]/notices.tsx
+++ b/web/src/pages/admin/games/[id]/notices.tsx
@@ -97,9 +97,7 @@ function Page() {
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent">
-							<MDIcon>campaign</MDIcon>
-						</ThemeIcon>
+						<MDIcon>campaign</MDIcon>
 						<Text fw={600}>删除公告</Text>
 					</Flex>
 					<Divider my={10} />
@@ -147,9 +145,7 @@ function Page() {
 				<Stack gap={10}>
 					<Flex justify={"space-between"} align={"center"}>
 						<Group>
-							<ThemeIcon variant="transparent">
-								<MDIcon>campaign</MDIcon>
-							</ThemeIcon>
+							<MDIcon>campaign</MDIcon>
 							<Text fw={700} size="xl">
 								公告
 							</Text>
@@ -200,14 +196,15 @@ function Page() {
 										<Tooltip label="删除公告" withArrow>
 											<ActionIcon
 												variant="transparent"
-												color="red"
 												onClick={() =>
 													openDeleteNoticeModal(
 														notice
 													)
 												}
 											>
-												<MDIcon>delete</MDIcon>
+												<MDIcon color={"red"}>
+													delete
+												</MDIcon>
 											</ActionIcon>
 										</Tooltip>
 									</Table.Td>
diff --git a/web/src/pages/admin/games/[id]/submissions.tsx b/web/src/pages/admin/games/[id]/submissions.tsx
index 6070948e..a703cd84 100644
--- a/web/src/pages/admin/games/[id]/submissions.tsx
+++ b/web/src/pages/admin/games/[id]/submissions.tsx
@@ -130,9 +130,7 @@ function Page() {
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent">
-							<MDIcon>verified</MDIcon>
-						</ThemeIcon>
+						<MDIcon>verified</MDIcon>
 						<Text fw={600}>删除提交记录</Text>
 					</Flex>
 					<Divider my={10} />
@@ -171,9 +169,7 @@ function Page() {
 			<Stack m={36}>
 				<Stack gap={10}>
 					<Group>
-						<ThemeIcon variant="transparent">
-							<MDIcon>verified</MDIcon>
-						</ThemeIcon>
+						<MDIcon>verified</MDIcon>
 						<Text fw={700} size="xl">
 							提交记录
 						</Text>
@@ -268,14 +264,15 @@ function Page() {
 											>
 												<ActionIcon
 													variant="transparent"
-													color="red"
 													onClick={() =>
 														openDeleteSubmissionModal(
 															submission
 														)
 													}
 												>
-													<MDIcon>delete</MDIcon>
+													<MDIcon color={"red"}>
+														delete
+													</MDIcon>
 												</ActionIcon>
 											</Tooltip>
 										</Group>
diff --git a/web/src/pages/admin/games/[id]/teams.tsx b/web/src/pages/admin/games/[id]/teams.tsx
index 6bda9a56..2bfa5c39 100644
--- a/web/src/pages/admin/games/[id]/teams.tsx
+++ b/web/src/pages/admin/games/[id]/teams.tsx
@@ -126,9 +126,7 @@ function Page() {
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent">
-							<MDIcon>people</MDIcon>
-						</ThemeIcon>
+						<MDIcon>people</MDIcon>
 						<Text fw={600}>移除团队</Text>
 					</Flex>
 					<Divider my={10} />
@@ -176,9 +174,7 @@ function Page() {
 				<Stack gap={10}>
 					<Flex justify={"space-between"} align={"center"}>
 						<Group>
-							<ThemeIcon variant="transparent">
-								<MDIcon>people</MDIcon>
-							</ThemeIcon>
+							<MDIcon>people</MDIcon>
 							<Text fw={700} size="xl">
 								参赛团队
 							</Text>
@@ -265,14 +261,15 @@ function Page() {
 										<Tooltip label="移除团队" withArrow>
 											<ActionIcon
 												variant="transparent"
-												color="red"
 												onClick={() =>
 													openDeleteGameTeamModal(
 														gameTeam
 													)
 												}
 											>
-												<MDIcon>delete</MDIcon>
+												<MDIcon color={"red"}>
+													delete
+												</MDIcon>
 											</ActionIcon>
 										</Tooltip>
 									</Table.Td>
diff --git a/web/src/pages/admin/games/index.tsx b/web/src/pages/admin/games/index.tsx
index bae7bc33..bb1f2c30 100644
--- a/web/src/pages/admin/games/index.tsx
+++ b/web/src/pages/admin/games/index.tsx
@@ -162,7 +162,9 @@ export default function Page() {
 							}}
 						/>
 						<ActionIcon onClick={() => setSearch(searchInput)}>
-							<MDIcon size={15}>search</MDIcon>
+							<MDIcon size={15} c={"white"}>
+								search
+							</MDIcon>
 						</ActionIcon>
 					</Flex>
 					<Select
@@ -357,14 +359,15 @@ export default function Page() {
 													</ActionIcon>
 													<ActionIcon
 														variant="transparent"
-														color="red"
 														onClick={() =>
 															openDeleteGameModal(
 																game
 															)
 														}
 													>
-														<MDIcon>delete</MDIcon>
+														<MDIcon color={"red"}>
+															delete
+														</MDIcon>
 													</ActionIcon>
 												</Group>
 											</Table.Th>
diff --git a/web/src/pages/admin/teams/index.tsx b/web/src/pages/admin/teams/index.tsx
index cbb998dd..7278a563 100644
--- a/web/src/pages/admin/teams/index.tsx
+++ b/web/src/pages/admin/teams/index.tsx
@@ -91,9 +91,7 @@ export default function Page() {
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent">
-							<MDIcon>person_remove</MDIcon>
-						</ThemeIcon>
+						<MDIcon>person_remove</MDIcon>
 						<Text fw={600}>删除团队</Text>
 					</Flex>
 					<Divider my={10} />
@@ -137,7 +135,9 @@ export default function Page() {
 							}}
 						/>
 						<ActionIcon onClick={() => setSearch(searchInput)}>
-							<MDIcon size={15}>search</MDIcon>
+							<MDIcon size={15} c={"white"}>
+								search
+							</MDIcon>
 						</ActionIcon>
 					</Flex>
 					<Select
@@ -276,14 +276,15 @@ export default function Page() {
 												</ActionIcon>
 												<ActionIcon
 													variant="transparent"
-													color="red"
 													onClick={() =>
 														openDeleteTeamModal(
 															team
 														)
 													}
 												>
-													<MDIcon>delete</MDIcon>
+													<MDIcon color={"red"}>
+														delete
+													</MDIcon>
 												</ActionIcon>
 											</Group>
 										</Table.Th>
diff --git a/web/src/pages/admin/users/index.tsx b/web/src/pages/admin/users/index.tsx
index 8f9f4357..9f755428 100644
--- a/web/src/pages/admin/users/index.tsx
+++ b/web/src/pages/admin/users/index.tsx
@@ -90,9 +90,7 @@ export default function Page() {
 			children: (
 				<>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent">
-							<MDIcon>person_remove</MDIcon>
-						</ThemeIcon>
+						<MDIcon>person_remove</MDIcon>
 						<Text fw={600}>删除用户</Text>
 					</Flex>
 					<Divider my={10} />
@@ -136,7 +134,9 @@ export default function Page() {
 							}}
 						/>
 						<ActionIcon onClick={() => setSearch(searchInput)}>
-							<MDIcon size={15}>search</MDIcon>
+							<MDIcon size={15} c={"white"}>
+								search
+							</MDIcon>
 						</ActionIcon>
 					</Flex>
 					<Select
@@ -249,14 +249,15 @@ export default function Page() {
 												</ActionIcon>
 												<ActionIcon
 													variant="transparent"
-													color="red"
 													onClick={() =>
 														openDeleteUserModal(
 															user
 														)
 													}
 												>
-													<MDIcon>delete</MDIcon>
+													<MDIcon color={"red"}>
+														delete
+													</MDIcon>
 												</ActionIcon>
 											</Group>
 										</Table.Th>
diff --git a/web/src/pages/challenges/index.tsx b/web/src/pages/challenges/index.tsx
index c2aeeab9..db4b1607 100644
--- a/web/src/pages/challenges/index.tsx
+++ b/web/src/pages/challenges/index.tsx
@@ -111,7 +111,9 @@ export default function Page() {
 								<ActionIcon
 									onClick={() => setSearch(searchInput)}
 								>
-									<MDIcon size={15}>search</MDIcon>
+									<MDIcon size={15} c={"white"}>
+										search
+									</MDIcon>
 								</ActionIcon>
 							</Flex>
 							<Select
@@ -137,7 +139,17 @@ export default function Page() {
 											? "filled"
 											: "subtle"
 									}
-									leftSection={<MDIcon>extension</MDIcon>}
+									leftSection={
+										<MDIcon
+											c={
+												selectedCategory === 0
+													? "white"
+													: "brand"
+											}
+										>
+											extension
+										</MDIcon>
+									}
 									onClick={() => setSelectedCategory(0)}
 									color="brand"
 								>
@@ -157,7 +169,16 @@ export default function Page() {
 												: "subtle"
 										}
 										leftSection={
-											<MDIcon>{category?.icon}</MDIcon>
+											<MDIcon
+												c={
+													selectedCategory ===
+													category?.id
+														? "white"
+														: category?.color
+												}
+											>
+												{category?.icon}
+											</MDIcon>
 										}
 										onClick={() =>
 											setSelectedCategory(category?.id!)
diff --git a/web/src/pages/games/[id]/challenges.tsx b/web/src/pages/games/[id]/challenges.tsx
index 1503b2fc..17efe164 100644
--- a/web/src/pages/games/[id]/challenges.tsx
+++ b/web/src/pages/games/[id]/challenges.tsx
@@ -149,7 +149,10 @@ function Page() {
 			<Stack my={10} mx={"2%"}>
 				<Flex justify={"space-between"}>
 					<Stack mx={10} miw={200} maw={200}>
-						<Button size="lg" leftSection={<MDIcon>upload</MDIcon>}>
+						<Button
+							size="lg"
+							leftSection={<MDIcon c={"white"}>upload</MDIcon>}
+						>
 							上传题解
 						</Button>
 						<Divider />
@@ -160,7 +163,17 @@ function Page() {
 								}
 								size="lg"
 								color="brand"
-								leftSection={<MDIcon>extension</MDIcon>}
+								leftSection={
+									<MDIcon
+										c={
+											selectedCategory === 0
+												? "white"
+												: "brand"
+										}
+									>
+										extension
+									</MDIcon>
+								}
 								onClick={() => {
 									setSelectedCategory(0);
 								}}
@@ -179,7 +192,17 @@ function Page() {
 										color={category?.color || "brand"}
 										size="lg"
 										leftSection={
-											<MDIcon>{category?.icon}</MDIcon>
+											<MDIcon
+												c={
+													selectedCategory ===
+													category?.id
+														? "white"
+														: category?.color ||
+															"brand"
+												}
+											>
+												{category?.icon}
+											</MDIcon>
 										}
 										onClick={() => {
 											setSelectedCategory(
diff --git a/web/src/pages/games/[id]/index.tsx b/web/src/pages/games/[id]/index.tsx
index e6136a3b..e6ef9a9d 100644
--- a/web/src/pages/games/[id]/index.tsx
+++ b/web/src/pages/games/[id]/index.tsx
@@ -116,9 +116,7 @@ export default function Page() {
 							<Stack my={20}>
 								<Group gap={5}>
 									<Badge>{startedAt}</Badge>
-									<ThemeIcon variant="transparent">
-										<MDIcon>arrow_right_alt</MDIcon>
-									</ThemeIcon>
+									<MDIcon>arrow_right_alt</MDIcon>
 									<Badge>{endedAt}</Badge>
 								</Group>
 								<Progress
diff --git a/web/src/pages/games/index.tsx b/web/src/pages/games/index.tsx
index 2d20daab..a296c412 100644
--- a/web/src/pages/games/index.tsx
+++ b/web/src/pages/games/index.tsx
@@ -64,7 +64,7 @@ export default function Page() {
 					<Button
 						w={"10%"}
 						size="lg"
-						leftSection={<MDIcon>search</MDIcon>}
+						leftSection={<MDIcon c={"white"}>search</MDIcon>}
 					>
 						搜索
 					</Button>
diff --git a/web/src/pages/profile.tsx b/web/src/pages/profile.tsx
index 81a69ebc..5914c645 100644
--- a/web/src/pages/profile.tsx
+++ b/web/src/pages/profile.tsx
@@ -139,9 +139,7 @@ export default function Page() {
 					w={"50rem"}
 				>
 					<Flex gap={10} align={"center"}>
-						<ThemeIcon variant="transparent">
-							<MDIcon>person</MDIcon>
-						</ThemeIcon>
+						<MDIcon>person</MDIcon>
 						<Text fw={600}>个人资料</Text>
 					</Flex>
 					<Divider my={10} />
@@ -251,7 +249,9 @@ export default function Page() {
 							<Flex mt={20} justify={"end"}>
 								<Button
 									type="submit"
-									leftSection={<MDIcon>check</MDIcon>}
+									leftSection={
+										<MDIcon c={"white"}>check</MDIcon>
+									}
 								>
 									更新
 								</Button>
diff --git a/web/src/pages/teams/index.tsx b/web/src/pages/teams/index.tsx
index cd7c935b..aeaf2af7 100644
--- a/web/src/pages/teams/index.tsx
+++ b/web/src/pages/teams/index.tsx
@@ -55,14 +55,14 @@ export default function Page() {
 				<Flex justify={"end"} gap={15}>
 					<Button
 						size="lg"
-						leftSection={<MDIcon>waving_hand</MDIcon>}
+						leftSection={<MDIcon c={"white"}>waving_hand</MDIcon>}
 						onClick={joinOpen}
 					>
 						加入团队
 					</Button>
 					<Button
 						size="lg"
-						leftSection={<MDIcon>group_add</MDIcon>}
+						leftSection={<MDIcon c={"white"}>group_add</MDIcon>}
 						onClick={createOpen}
 					>
 						创建团队
diff --git a/web/src/utils/notification.tsx b/web/src/utils/notification.tsx
index 01c11885..c01b13a0 100644
--- a/web/src/utils/notification.tsx
+++ b/web/src/utils/notification.tsx
@@ -16,7 +16,7 @@ export function showErrNotification({
 			title: title || "发生了错误",
 			message: message,
 			color: "red",
-			icon: <MDIcon>close</MDIcon>,
+			icon: <MDIcon c={"white"}>close</MDIcon>,
 			autoClose: 2000,
 			withCloseButton: true,
 			loading: false,
@@ -27,7 +27,7 @@ export function showErrNotification({
 		title: title || "发生了错误",
 		message: message,
 		color: "red",
-		icon: <MDIcon>close</MDIcon>,
+		icon: <MDIcon c={"white"}>close</MDIcon>,
 	});
 }
 
@@ -46,7 +46,7 @@ export function showSuccessNotification({
 			title: title || "成功",
 			message: message,
 			color: "green",
-			icon: <MDIcon>check</MDIcon>,
+			icon: <MDIcon c={"white"}>check</MDIcon>,
 			autoClose: 2000,
 			withCloseButton: true,
 			loading: false,
@@ -57,7 +57,7 @@ export function showSuccessNotification({
 		title: title || "成功",
 		message: message,
 		color: "green",
-		icon: <MDIcon>check</MDIcon>,
+		icon: <MDIcon c={"white"}>check</MDIcon>,
 	});
 }
 
@@ -76,7 +76,7 @@ export function showInfoNotification({
 			title: title || "信息",
 			message: message,
 			color: "blue",
-			icon: <MDIcon>info_i</MDIcon>,
+			icon: <MDIcon c={"white"}>info_i</MDIcon>,
 			autoClose: 2000,
 			withCloseButton: true,
 			loading: false,
@@ -87,7 +87,7 @@ export function showInfoNotification({
 		title: title || "信息",
 		message: message,
 		color: "blue",
-		icon: <MDIcon>info_i</MDIcon>,
+		icon: <MDIcon c={"white"}>info_i</MDIcon>,
 	});
 }
 
@@ -106,7 +106,7 @@ export function showWarnNotification({
 			title: title || "警告",
 			message: message,
 			color: "orange",
-			icon: <MDIcon>exclamation</MDIcon>,
+			icon: <MDIcon c={"white"}>exclamation</MDIcon>,
 			autoClose: 2000,
 			withCloseButton: true,
 			loading: false,
@@ -117,7 +117,7 @@ export function showWarnNotification({
 		title: title || "警告",
 		message: message,
 		color: "orange",
-		icon: <MDIcon>exclamation</MDIcon>,
+		icon: <MDIcon c={"white"}>exclamation</MDIcon>,
 	});
 }