diff --git a/web/src/components/layouts/withGame.tsx b/web/src/components/layouts/withGame.tsx
index 458f0a8a..a63eaec1 100644
--- a/web/src/components/layouts/withGame.tsx
+++ b/web/src/components/layouts/withGame.tsx
@@ -40,7 +40,7 @@ export default function withGame(WrappedComponent: React.ComponentType<any>) {
 								flexShrink: 0,
 							}}
 						>
-							<Text fw={700} size="1.5rem">
+							<Text fw={700} size="2rem">
 								{game?.title}
 							</Text>
 						</Box>
diff --git a/web/src/components/modals/ChallengeModal.tsx b/web/src/components/modals/ChallengeModal.tsx
index 80e7caa9..78e9aab8 100644
--- a/web/src/components/modals/ChallengeModal.tsx
+++ b/web/src/components/modals/ChallengeModal.tsx
@@ -36,6 +36,8 @@ import {
 } from "@/utils/notification";
 import { useForm } from "@mantine/form";
 import { useTeamStore } from "@/stores/team";
+import { useInterval } from "@mantine/hooks";
+import { set } from "zod";
 
 interface ChallengeModalProps extends ModalProps {
 	challenge?: Challenge;
@@ -54,7 +56,11 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 	const teamStore = useTeamStore();
 
 	const [pod, setPod] = useState<Pod>();
+	const [podTime, setPodTime] = useState<number>(0);
+	const interval = useInterval(() => setPodTime((s) => s - 1), 1000);
 	const [podCreateLoading, setPodCreateLoading] = useState(false);
+	const [podRemoveLoading, setPodRemoveLoading] = useState(false);
+	const [podRenewLoading, setPodRenewLoading] = useState(false);
 
 	const form = useForm({
 		mode: "uncontrolled",
@@ -108,23 +114,26 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 	}
 
 	function removePod() {
+		setPodRemoveLoading(true);
 		podApi
 			.removePod({
 				id: pod?.id as number,
 			})
-			.then((res) => {
-				const r = res.data;
-				if (r?.code === 200) {
-					setPod(undefined);
-				}
+			.then((_) => {
+				setPod(undefined);
+				setPodTime(0);
 				showSuccessNotification({
 					title: "操作成功",
 					message: "实例已销毁！",
 				});
+			})
+			.finally(() => {
+				setPodRemoveLoading(false);
 			});
 	}
 
 	function renewPod() {
+		setPodRenewLoading(true);
 		podApi
 			.renewPod({
 				id: pod?.id!,
@@ -134,6 +143,9 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 				if (r?.code === 200) {
 					getPod();
 				}
+			})
+			.finally(() => {
+				setPodRenewLoading(false);
 			});
 	}
 
@@ -196,14 +208,31 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 			});
 	}
 
+	useEffect(() => {
+		if (podTime > 0) {
+			interval.start();
+			return interval.stop;
+		}
+	}, [podTime]);
+
+	useEffect(() => {
+		if (pod) {
+			setPodTime(
+				Math.ceil(pod?.removed_at - new Date().getTime() / 1000)
+			);
+		}
+	}, [pod]);
+
 	useEffect(() => {
 		if (challenge?.is_dynamic) {
 			getPod();
 		}
-	}, [challenge]);
+	}, [challenge, modalProps.opened]);
 
 	useEffect(() => {
 		form.reset();
+		setPodTime(0);
+		setPod(undefined);
 	}, [modalProps.opened]);
 
 	return (
@@ -238,18 +267,7 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 							}}
 						>
 							<Group gap={6}>
-								<MDIcon
-									color={
-										colorScheme === "light"
-											? challenge?.category?.color ||
-												"#3F51B5"
-											: lighten(
-													challenge?.category
-														?.color || "#3F51B5",
-													0.15
-												)
-									}
-								>
+								<MDIcon color={challenge?.category?.color}>
 									{challenge?.category?.icon}
 								</MDIcon>
 								<Text fw={700}>{challenge?.title}</Text>
@@ -345,16 +363,7 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 											key={nat?.id}
 											value={nat?.entry}
 											readOnly
-											sx={{
-												input: {
-													"&:focus": {
-														borderColor:
-															challenge?.category
-																?.color ||
-															"#3F51B5",
-													},
-												},
-											}}
+											color={challenge?.category?.color}
 											leftSectionWidth={135}
 											leftSection={
 												<Flex
@@ -431,36 +440,23 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 											本题为动态容器题目，解题需开启容器实例
 										</Text>
 										<Text size="0.8rem" c="secondary">
-											本题容器时间 {challenge?.duration}s
+											本题容器时间{" "}
+											{podTime || challenge?.duration}s
 										</Text>
 									</Stack>
 									<Flex gap={10}>
 										{pod?.id && (
 											<>
 												<Button
-													sx={{
-														backgroundColor:
-															"#3b81f5",
-														"&:hover": {
-															backgroundColor:
-																"#3b81f5",
-														},
-														color: "#FFF",
-													}}
+													loading={podRenewLoading}
+													color={"blue"}
 													onClick={renewPod}
 												>
 													实例续期
 												</Button>
 												<Button
-													sx={{
-														backgroundColor:
-															"#d22e2d",
-														"&:hover": {
-															backgroundColor:
-																"#d22e2d",
-														},
-														color: "#FFF",
-													}}
+													loading={podRemoveLoading}
+													color={"red"}
 													onClick={removePod}
 												>
 													销毁实例
@@ -470,18 +466,8 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 										{!pod?.id && (
 											<Button
 												size="sm"
-												bg={
-													colorScheme === "light"
-														? challenge?.category
-																?.color ||
-															"#3F51B5"
-														: darken(
-																challenge
-																	?.category
-																	?.color ||
-																	"#3F51B5",
-																0.25
-															)
+												color={
+													challenge?.category?.color
 												}
 												loading={podCreateLoading}
 												onClick={createPod}
@@ -523,16 +509,7 @@ export default function ChallengeModal(props: ChallengeModalProps) {
 									{...form.getInputProps("flag")}
 								/>
 								<Button
-									bg={
-										colorScheme === "light"
-											? challenge?.category?.color ||
-												"#3F51B5"
-											: darken(
-													challenge?.category
-														?.color || "#3F51B5",
-													0.25
-												)
-									}
+									color={challenge?.category?.color}
 									w={"15%"}
 									type="submit"
 								>
diff --git a/web/src/components/navigations/Navbar.tsx b/web/src/components/navigations/Navbar.tsx
index b8e57b12..38a5e544 100644
--- a/web/src/components/navigations/Navbar.tsx
+++ b/web/src/components/navigations/Navbar.tsx
@@ -304,7 +304,7 @@ export default function Navbar() {
 						</Menu.Target>
 						<Menu.Dropdown>
 							<Menu.Item
-								c={"brand"}
+								color={"brand"}
 								leftSection={<MDIcon>person</MDIcon>}
 								onClick={() => navigate("/profile")}
 							>
@@ -314,7 +314,7 @@ export default function Navbar() {
 							</Menu.Item>
 							<Menu.Divider />
 							<Menu.Item
-								c={"red"}
+								color={"red"}
 								leftSection={
 									<MDIcon color={"red"}>logout</MDIcon>
 								}
diff --git a/web/src/components/widgets/GameNoticeArea.tsx b/web/src/components/widgets/GameNoticeArea.tsx
index 2a0c03f6..71341f22 100644
--- a/web/src/components/widgets/GameNoticeArea.tsx
+++ b/web/src/components/widgets/GameNoticeArea.tsx
@@ -1,6 +1,6 @@
 import { useGameApi } from "@/api/game";
 import { Notice } from "@/types/notice";
-import { Box, Flex, ScrollArea } from "@mantine/core";
+import { Box, Flex, ScrollArea, ThemeIcon } from "@mantine/core";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import MDIcon from "@/components/ui/MDIcon";
@@ -75,13 +75,19 @@ export default function GameNoticeArea() {
 								<MDIcon>campaign</MDIcon>
 							)}
 							{notice?.type === "first_blood" && (
-								<FirstBloodIcon />
+								<ThemeIcon variant={"transparent"}>
+									<FirstBloodIcon />
+								</ThemeIcon>
 							)}
 							{notice?.type === "second_blood" && (
-								<SecondBloodIcon />
+								<ThemeIcon variant={"transparent"}>
+									<SecondBloodIcon />
+								</ThemeIcon>
 							)}
 							{notice?.type === "third_blood" && (
-								<ThirdBloodIcon />
+								<ThemeIcon variant={"transparent"}>
+									<ThirdBloodIcon />
+								</ThemeIcon>
 							)}
 							{notice?.type === "new_challenge" && (
 								<MDIcon color={"green"}>add</MDIcon>
diff --git a/web/src/components/widgets/TeamCard.tsx b/web/src/components/widgets/TeamCard.tsx
index aedfcb2e..0a3fb039 100644
--- a/web/src/components/widgets/TeamCard.tsx
+++ b/web/src/components/widgets/TeamCard.tsx
@@ -9,6 +9,7 @@ import {
 	Stack,
 	Tooltip,
 	Divider,
+	Title,
 } from "@mantine/core";
 import MDIcon from "@/components/ui/MDIcon";
 
@@ -34,10 +35,28 @@ export default function TeamCard({ team }: { team?: Team }) {
 					<MDIcon size={40}>people</MDIcon>
 				</Avatar>
 				<Stack gap={5}>
-					<Text size="2rem" fw={600}>
+					<Title
+						size="2rem"
+						fw={600}
+						maw={200}
+						sx={{
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap",
+						}}
+					>
 						{team?.name}
+					</Title>
+					<Text
+						maw={200}
+						sx={{
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap",
+						}}
+					>
+						{team?.description}
 					</Text>
-					<Text>{team?.description}</Text>
 				</Stack>
 			</Flex>
 			<Divider my={15} />
diff --git a/web/src/composables/useTheme.ts b/web/src/composables/useTheme.ts
index aeade87b..5a46b165 100644
--- a/web/src/composables/useTheme.ts
+++ b/web/src/composables/useTheme.ts
@@ -53,6 +53,15 @@ export default function useTheme() {
 			],
 		},
 		primaryColor: "brand",
+		components: {
+			LoadingOverlay: {
+				defaultProps: {
+					transitionProps: {
+						exitDuration: 250,
+					},
+				},
+			},
+		},
 	});
 	return { theme: theme };
 }
diff --git a/web/src/pages/challenges/index.tsx b/web/src/pages/challenges/index.tsx
index 3e213d26..eb3f655f 100644
--- a/web/src/pages/challenges/index.tsx
+++ b/web/src/pages/challenges/index.tsx
@@ -38,7 +38,7 @@ export default function Page() {
 	const [selectedCategory, setSelectedCategory] = useState<number>(0);
 	const [sort, setSort] = useState<string>("id_desc");
 
-	const [loading, setLoading] = useState<boolean>(false);
+	const [loading, setLoading] = useState<boolean>(true);
 
 	const [opened, { open, close }] = useDisclosure(false);
 	const [selectedChallenge, setSelectedChallenge] = useState<Challenge>();
diff --git a/web/src/pages/games/[id]/challenges.tsx b/web/src/pages/games/[id]/challenges.tsx
index d924c211..1a2af86a 100644
--- a/web/src/pages/games/[id]/challenges.tsx
+++ b/web/src/pages/games/[id]/challenges.tsx
@@ -16,6 +16,7 @@ import { calculateAndSort } from "@/utils/game";
 import { showErrNotification } from "@/utils/notification";
 import {
 	Avatar,
+	Badge,
 	Box,
 	Button,
 	Card,
@@ -26,6 +27,8 @@ import {
 	ScrollArea,
 	Stack,
 	Text,
+	Title,
+	Transition,
 	UnstyledButton,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
@@ -54,6 +57,7 @@ function Page() {
 	const [submissions, setSubmissions] = useState<Array<Submission>>([]);
 
 	const [loadingTeamStatus, setLoadingTeamStatus] = useState<boolean>(false);
+	const [loadingChallenges, setLoadingChallenges] = useState<boolean>(false);
 
 	const [opened, { open, close }] = useDisclosure(false);
 	const [selectedChallenge, setSelectedChallenge] = useState<GameChallenge>();
@@ -93,6 +97,7 @@ function Page() {
 	}
 
 	function getGameChallenges() {
+		setLoadingChallenges(true);
 		gameApi
 			.getGameChallenges({
 				game_id: Number(id),
@@ -102,6 +107,9 @@ function Page() {
 			.then((res) => {
 				const r = res.data;
 				setGameChallenges(r.data);
+			})
+			.finally(() => {
+				setLoadingChallenges(false);
 			});
 	}
 
@@ -263,6 +271,7 @@ function Page() {
 					</Stack>
 					<Box mx={20} w={"100%"}>
 						<ScrollArea h={"calc(100vh - 250px)"}>
+							<LoadingOverlay visible={loadingChallenges} />
 							<Group gap={"lg"} justify={"start"}>
 								{selectedGameChallenges?.map(
 									(gameChallenge) => (
@@ -288,43 +297,54 @@ function Page() {
 						</ScrollArea>
 					</Box>
 					<Stack miw={330} maw={330} mx={10}>
-						<Card mih={200} shadow="md" p={25} pos={"relative"}>
+						<Card mih={185} shadow="md" p={25} pos={"relative"}>
 							<LoadingOverlay
 								visible={loadingTeamStatus}
 								zIndex={2}
 							/>
-							<Group gap={20}>
-								<Avatar
-									color="brand"
-									size={72}
-									src={`${import.meta.env.VITE_BASE_API}/media/teams/${gameTeam?.team_id}/${gameTeam?.team?.avatar?.name}`}
-								>
-									<MDIcon size={36}>people</MDIcon>
-								</Avatar>
-								<Text fw={700} size="1rem">
-									{gameTeam?.team?.name}
-								</Text>
-							</Group>
-							<Flex justify={"space-between"} mt={20} mx={36}>
-								<Stack align={"center"}>
-									<Text fw={700} size="1.2rem">
-										{score || 0}
-									</Text>
-									<Text fw={700}>得分</Text>
-								</Stack>
-								<Stack align={"center"}>
-									<Text fw={700} size="1.2rem">
-										{rank > 0 ? rank : "无排名"}
-									</Text>
-									<Text fw={700}>排名</Text>
-								</Stack>
-								<Stack align={"center"}>
-									<Text fw={700} size="1.2rem">
-										{solves || 0}
-									</Text>
-									<Text fw={700}>已解决</Text>
-								</Stack>
-							</Flex>
+							<Stack>
+								<Flex gap={20} align={"center"}>
+									<Avatar
+										color="brand"
+										size={64}
+										src={`${import.meta.env.VITE_BASE_API}/media/teams/${gameTeam?.team_id}/${gameTeam?.team?.avatar?.name}`}
+									>
+										<MDIcon size={36}>people</MDIcon>
+									</Avatar>
+									<Title
+										fw={700}
+										size={"1.25rem"}
+										sx={{
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap",
+											flexGrow: 1,
+										}}
+									>
+										{gameTeam?.team?.name}
+									</Title>
+								</Flex>
+								<Flex justify={"space-between"} mx={36}>
+									<Stack align={"center"} gap={10}>
+										<Text fw={700} size="1.2rem">
+											{rank > 0 ? rank : "无排名"}
+										</Text>
+										<Badge>排名</Badge>
+									</Stack>
+									<Stack align={"center"} gap={10}>
+										<Text fw={700} size="1.2rem">
+											{score || 0}
+										</Text>
+										<Badge>得分</Badge>
+									</Stack>
+									<Stack align={"center"} gap={10}>
+										<Text fw={700} size="1.2rem">
+											{solves || 0}
+										</Text>
+										<Badge>已解决</Badge>
+									</Stack>
+								</Flex>
+							</Stack>
 						</Card>
 						<Card h={"calc(100vh - 450px)"} shadow="md">
 							<GameNoticeArea />
diff --git a/web/src/pages/games/index.tsx b/web/src/pages/games/index.tsx
index 56a61d76..85ced7c0 100644
--- a/web/src/pages/games/index.tsx
+++ b/web/src/pages/games/index.tsx
@@ -6,6 +6,7 @@ import { Game } from "@/types/game";
 import {
 	Button,
 	Flex,
+	LoadingOverlay,
 	Pagination,
 	Stack,
 	TextInput,
@@ -22,10 +23,16 @@ export default function Page() {
 	const [games, setGames] = useState<Array<Game>>([]);
 	const [page, setPage] = useState<number>(1);
 	const [total, setTotal] = useState<number>(0);
+	const [search, setSearch] = useState<string>("");
+	const [searchInput, setSearchInput] = useState<string>("");
+
+	const [loading, setLoading] = useState<boolean>(true);
 
 	function getGames() {
+		setLoading(true);
 		gameApi
 			.getGames({
+				title: search,
 				page: page,
 				is_enabled: true,
 			})
@@ -33,12 +40,15 @@ export default function Page() {
 				const r = res.data;
 				setGames(r.data);
 				setTotal(r.total);
+			})
+			.finally(() => {
+				setLoading(false);
 			});
 	}
 
 	useEffect(() => {
 		getGames();
-	}, [page]);
+	}, [page, search]);
 
 	useEffect(() => {
 		document.title = `比赛 - ${configStore?.pltCfg?.site?.title}`;
@@ -59,11 +69,16 @@ export default function Page() {
 						size="lg"
 						w={"90%"}
 						placeholder={"搜索比赛"}
+						value={searchInput}
+						onChange={(e) => setSearchInput(e.currentTarget.value)}
 					/>
 					<Button
 						w={"10%"}
 						size="lg"
 						leftSection={<MDIcon c={"white"}>search</MDIcon>}
+						onClick={() => {
+							setSearch(searchInput);
+						}}
 					>
 						搜索
 					</Button>
@@ -73,7 +88,9 @@ export default function Page() {
 					sx={{
 						flexGrow: 1,
 					}}
+					pos={"relative"}
 				>
+					<LoadingOverlay visible={loading} />
 					{games.map((game) => (
 						<UnstyledButton
 							key={game?.id}
diff --git a/web/src/pages/teams/index.tsx b/web/src/pages/teams/index.tsx
index aeaf2af7..bdff004b 100644
--- a/web/src/pages/teams/index.tsx
+++ b/web/src/pages/teams/index.tsx
@@ -7,7 +7,15 @@ import TeamCard from "@/components/widgets/TeamCard";
 import { useAuthStore } from "@/stores/auth";
 import { useConfigStore } from "@/stores/config";
 import { Team } from "@/types/team";
-import { Button, Flex, Group, Stack, UnstyledButton } from "@mantine/core";
+import {
+	Box,
+	Button,
+	Flex,
+	Group,
+	LoadingOverlay,
+	Stack,
+	UnstyledButton,
+} from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { useEffect, useState } from "react";
 
@@ -20,6 +28,8 @@ export default function Page() {
 
 	const [teams, setTeams] = useState<Array<Team>>([]);
 
+	const [loading, setLoading] = useState<boolean>(true);
+
 	const [createOpened, { open: createOpen, close: createClose }] =
 		useDisclosure(false);
 
@@ -31,6 +41,7 @@ export default function Page() {
 		useDisclosure(false);
 
 	function getTeams() {
+		setLoading(true);
 		teamApi
 			.getTeams({
 				user_id: authStore?.user?.id,
@@ -38,6 +49,9 @@ export default function Page() {
 			.then((res) => {
 				const r = res.data;
 				setTeams(r.data);
+			})
+			.finally(() => {
+				setLoading(false);
 			});
 	}
 
@@ -68,19 +82,22 @@ export default function Page() {
 						创建团队
 					</Button>
 				</Flex>
-				<Group gap={20} my={20}>
-					{teams?.map((team) => (
-						<UnstyledButton
-							key={team?.id}
-							onClick={() => {
-								editOpen();
-								setEditTeam(team);
-							}}
-						>
-							<TeamCard team={team} />
-						</UnstyledButton>
-					))}
-				</Group>
+				<Box mih={"calc(100vh - 250px)"} pos={"relative"} my={20}>
+					<LoadingOverlay visible={loading} />
+					<Group gap={20}>
+						{teams?.map((team) => (
+							<UnstyledButton
+								key={team?.id}
+								onClick={() => {
+									editOpen();
+									setEditTeam(team);
+								}}
+							>
+								<TeamCard team={team} />
+							</UnstyledButton>
+						))}
+					</Group>
+				</Box>
 			</Stack>
 			<TeamCreateModal
 				setRefresh={() => {