diff --git a/web/src/App.tsx b/web/src/App.tsx
index 474361d0..8595f267 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,26 +1,35 @@
 import { useRoutes } from "react-router";
-import Navbar from "@/components/navigations/Navbar";
+import Navbar, {
+	NavItems,
+	AdminNavItems,
+} from "@/components/navigations/Navbar";
 import routes from "~react-pages";
-import { Box, LoadingOverlay, MantineProvider } from "@mantine/core";
-import { emotionTransform, MantineEmotionProvider } from "@mantine/emotion";
-import { Suspense, useEffect } from "react";
-import { useTheme } from "@/utils/theme";
+import {
+	AppShell,
+	Button,
+	LoadingOverlay,
+	UnstyledButton,
+} from "@mantine/core";
+import { Suspense, useEffect, useState } from "react";
 import { useCategoryApi } from "@/api/category";
 import { useCategoryStore } from "@/stores/category";
 import { useConfigApi } from "@/api/config";
 import { useConfigStore } from "@/stores/config";
-import { Notifications } from "@mantine/notifications";
-import { ModalsProvider } from "@mantine/modals";
-import { DatesProvider } from "@mantine/dates";
 import "dayjs/locale/zh-cn";
+import { useDisclosure } from "@mantine/hooks";
+import { Link, useLocation } from "react-router-dom";
+import MDIcon from "./components/ui/MDIcon";
 
 function App() {
-	const { theme } = useTheme();
 	const categoryApi = useCategoryApi();
 	const categoryStore = useCategoryStore();
 	const configApi = useConfigApi();
 	const configStore = useConfigStore();
 
+	const [opened, { toggle }] = useDisclosure();
+	const [adminMode, setAdminMode] = useState<boolean>(false);
+	const location = useLocation();
+
 	// Get platform config
 	useEffect(() => {
 		configApi
@@ -54,35 +63,60 @@ function App() {
 		});
 	}, [categoryStore.refresh]);
 
+	useEffect(() => {
+		setAdminMode(false);
+		if (location.pathname.startsWith("/admin")) {
+			setAdminMode(true);
+		}
+	}, [location.pathname]);
+
 	return (
 		<>
-			<MantineProvider
-				stylesTransform={emotionTransform}
-				theme={theme}
-				defaultColorScheme="light"
+			<AppShell
+				header={{ height: 64 }}
+				navbar={{
+					width: 300,
+					breakpoint: "md",
+					collapsed: { desktop: true, mobile: !opened },
+				}}
 			>
-				<MantineEmotionProvider>
-					<ModalsProvider>
-						<DatesProvider
-							settings={{
-								locale: "zh-cn",
-								firstDayOfWeek: 0,
-								weekendDays: [0, 6],
-								timezone: "UTC",
-								consistentWeeks: true,
-							}}
-						>
-							<Navbar />
-							<Box pt={64}>
-								<Suspense fallback={<LoadingOverlay />}>
-									{useRoutes(routes)}
-								</Suspense>
-							</Box>
-							<Notifications zIndex={5000} />
-						</DatesProvider>
-					</ModalsProvider>
-				</MantineEmotionProvider>
-			</MantineProvider>
+				<AppShell.Header>
+					<Navbar
+						burger={{
+							opened: opened,
+							toggle: toggle,
+						}}
+						adminMode={adminMode}
+					/>
+				</AppShell.Header>
+				<AppShell.Navbar py={"md"}>
+					{!adminMode && (
+						<>
+							{NavItems?.map((item) => (
+								<Button
+									key={item.path}
+									variant={"subtle"}
+									h={50}
+									px={20}
+									radius={0}
+									justify={"start"}
+									component={Link}
+									to={item.path}
+									leftSection={<MDIcon>{item?.icon}</MDIcon>}
+									onClick={toggle}
+								>
+									{item.name}
+								</Button>
+							))}
+						</>
+					)}
+				</AppShell.Navbar>
+				<AppShell.Main>
+					<Suspense fallback={<LoadingOverlay />}>
+						{useRoutes(routes)}
+					</Suspense>
+				</AppShell.Main>
+			</AppShell>
 		</>
 	);
 }
diff --git a/web/src/components/layouts/withGame.tsx b/web/src/components/layouts/withGame.tsx
index a63eaec1..8d947aa9 100644
--- a/web/src/components/layouts/withGame.tsx
+++ b/web/src/components/layouts/withGame.tsx
@@ -34,7 +34,9 @@ export default function withGame(WrappedComponent: React.ComponentType<any>) {
 			<>
 				<Stack m={36}>
 					<Flex justify={"space-between"} align={"center"}>
-						<Box w={"50%"}></Box>
+						<Box w={"50%"}>
+							<Text fw={700}>距离结束还剩</Text>
+						</Box>
 						<Box
 							sx={{
 								flexShrink: 0,
diff --git a/web/src/components/navigations/Navbar.tsx b/web/src/components/navigations/Navbar.tsx
index 14a6378f..7b290f59 100644
--- a/web/src/components/navigations/Navbar.tsx
+++ b/web/src/components/navigations/Navbar.tsx
@@ -10,15 +10,70 @@ import {
 	Text,
 	ActionIcon,
 	useMantineColorScheme,
+	Burger,
 } from "@mantine/core";
-import { useLocation, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import MDIcon from "@/components/ui/MDIcon";
 import { useAuthStore } from "@/stores/auth";
 import { useConfigStore } from "@/stores/config";
-import { useEffect, useState } from "react";
 import { useTeamStore } from "@/stores/team";
 
-export default function Navbar() {
+export const NavItems = [
+	{
+		name: "题库",
+		path: "/challenges",
+		icon: "collections_bookmark",
+	},
+	{
+		name: "比赛",
+		path: "/games",
+		icon: "flag",
+	},
+	{
+		name: "团队",
+		path: "/teams",
+		icon: "people",
+	},
+];
+
+export const AdminNavItems = [
+	{
+		name: "全局",
+		path: "/admin/global",
+		icon: "settings",
+	},
+	{
+		name: "题库",
+		path: "/admin/challenges",
+		icon: "collections_bookmark",
+	},
+	{
+		name: "比赛",
+		path: "/admin/games",
+		icon: "flag",
+	},
+	{
+		name: "团队",
+		path: "/admin/teams",
+		icon: "people",
+	},
+	{
+		name: "用户",
+		path: "/admin/users",
+		icon: "person",
+	},
+];
+
+interface NavbarProps {
+	burger?: {
+		opened: boolean;
+		toggle: () => void;
+	};
+	adminMode?: boolean;
+}
+
+export default function Navbar(props: NavbarProps) {
+	const { burger, adminMode } = props;
 	const authStore = useAuthStore();
 	const configStore = useConfigStore();
 	const teamStore = useTeamStore();
@@ -27,9 +82,6 @@ export default function Navbar() {
 		keepTransitions: true,
 	});
 
-	const [adminMode, setAdminMode] = useState<boolean>(false);
-	const location = useLocation();
-
 	function logout() {
 		authStore.setPgsToken("");
 		authStore.setUser(undefined);
@@ -37,13 +89,6 @@ export default function Navbar() {
 		navigate("/login");
 	}
 
-	useEffect(() => {
-		setAdminMode(false);
-		if (location.pathname.startsWith("/admin")) {
-			setAdminMode(true);
-		}
-	}, [location.pathname]);
-
 	return (
 		<Flex
 			h={64}
@@ -59,22 +104,20 @@ export default function Navbar() {
 				zIndex: 2,
 			}}
 		>
-			<Box
-				w={"50%"}
-				sx={{
-					display: "flex",
-					justifyContent: "start",
-				}}
-			>
+			<Group w={"50%"} wrap={"nowrap"} gap={0}>
+				<Burger
+					opened={burger?.opened}
+					onClick={burger?.toggle}
+					hiddenFrom={"md"}
+					size={"sm"}
+					color={"white"}
+				/>
 				<Button
 					h={48}
-					sx={{
-						backgroundColor: "transparent",
-						"&:hover": {
-							backgroundColor: "transparent",
-						},
-					}}
-					onClick={() => navigate("/")}
+					component={Link}
+					variant={"transparent"}
+					to={"/"}
+					draggable={false}
 				>
 					<Flex align={"center"}>
 						<Image
@@ -95,163 +138,83 @@ export default function Navbar() {
 						</Title>
 					</Flex>
 				</Button>
-			</Box>
-			<Group
-				sx={{
-					flexShrink: 0,
-				}}
-			>
-				{!adminMode && (
-					<>
-						<Button
-							sx={{
-								backgroundColor: "transparent",
-								"&:hover": {
-									backgroundColor: "transparent",
-								},
-							}}
-							leftSection={
-								<MDIcon color={"white"}>
-									collections_bookmark
-								</MDIcon>
-							}
-							onClick={() => navigate("/challenges")}
-						>
-							题库
-						</Button>
-						<Button
-							sx={{
-								backgroundColor: "transparent",
-								"&:hover": {
-									backgroundColor: "transparent",
-								},
-							}}
-							leftSection={<MDIcon color={"white"}>flag</MDIcon>}
-							onClick={() => navigate("/games")}
-						>
-							比赛
-						</Button>
-						<Button
-							sx={{
-								backgroundColor: "transparent",
-								"&:hover": {
-									backgroundColor: "transparent",
-								},
-							}}
-							leftSection={
-								<MDIcon color={"white"}>people</MDIcon>
-							}
-							onClick={() => navigate("/teams")}
-						>
-							团队
-						</Button>
-						{authStore?.user?.group === "admin" && (
+			</Group>
+			<Box sx={{ flexShrink: 0 }}>
+				<Group visibleFrom={"md"}>
+					{!adminMode && (
+						<>
+							{NavItems?.map((item) => (
+								<Button
+									key={item?.name}
+									component={Link}
+									variant={"transparent"}
+									c={"white"}
+									leftSection={
+										<MDIcon color={"white"}>
+											{item?.icon}
+										</MDIcon>
+									}
+									draggable={false}
+									to={item?.path}
+								>
+									{item?.name}
+								</Button>
+							))}
+							{authStore?.user?.group === "admin" && (
+								<Button
+									variant={"transparent"}
+									c={"white"}
+									component={Link}
+									leftSection={
+										<MDIcon color={"white"}>
+											settings
+										</MDIcon>
+									}
+									draggable={false}
+									to={"/admin"}
+								>
+									管理
+								</Button>
+							)}
+						</>
+					)}
+					{adminMode && (
+						<>
 							<Button
-								sx={{
-									backgroundColor: "transparent",
-									"&:hover": {
-										backgroundColor: "transparent",
-									},
-								}}
+								component={Link}
+								variant={"transparent"}
+								c={"white"}
 								leftSection={
-									<MDIcon color={"white"}>settings</MDIcon>
+									<MDIcon color={"white"}>
+										keyboard_return
+									</MDIcon>
 								}
-								onClick={() => navigate("/admin")}
+								draggable={false}
+								to={"/"}
 							>
-								管理
+								返回
 							</Button>
-						)}
-					</>
-				)}
-				{adminMode && (
-					<>
-						<Button
-							sx={{
-								backgroundColor: "transparent",
-								"&:hover": {
-									backgroundColor: "transparent",
-								},
-							}}
-							leftSection={
-								<MDIcon color={"white"}>keyboard_return</MDIcon>
-							}
-							onClick={() => navigate("/")}
-						>
-							返回
-						</Button>
-						<Button
-							sx={{
-								backgroundColor: "transparent",
-								"&:hover": {
-									backgroundColor: "transparent",
-								},
-							}}
-							leftSection={
-								<MDIcon color={"white"}>settings</MDIcon>
-							}
-							onClick={() => navigate("/admin/global")}
-						>
-							全局
-						</Button>
-						<Button
-							sx={{
-								backgroundColor: "transparent",
-								"&:hover": {
-									backgroundColor: "transparent",
-								},
-							}}
-							leftSection={
-								<MDIcon color={"white"}>
-									collections_bookmark
-								</MDIcon>
-							}
-							onClick={() => navigate("/admin/challenges")}
-						>
-							题库
-						</Button>
-						<Button
-							sx={{
-								backgroundColor: "transparent",
-								"&:hover": {
-									backgroundColor: "transparent",
-								},
-							}}
-							leftSection={<MDIcon color={"white"}>flag</MDIcon>}
-							onClick={() => navigate("/admin/games")}
-						>
-							比赛
-						</Button>
-						<Button
-							sx={{
-								backgroundColor: "transparent",
-								"&:hover": {
-									backgroundColor: "transparent",
-								},
-							}}
-							leftSection={
-								<MDIcon color={"white"}>people</MDIcon>
-							}
-							onClick={() => navigate("/admin/teams")}
-						>
-							团队
-						</Button>
-						<Button
-							sx={{
-								backgroundColor: "transparent",
-								"&:hover": {
-									backgroundColor: "transparent",
-								},
-							}}
-							leftSection={
-								<MDIcon color={"white"}>person</MDIcon>
-							}
-							onClick={() => navigate("/admin/users")}
-						>
-							用户
-						</Button>
-					</>
-				)}
-			</Group>
+							{AdminNavItems?.map((item) => (
+								<Button
+									key={item?.name}
+									component={Link}
+									variant={"transparent"}
+									c={"white"}
+									leftSection={
+										<MDIcon color={"white"}>
+											{item?.icon}
+										</MDIcon>
+									}
+									draggable={false}
+									to={item?.path}
+								>
+									{item?.name}
+								</Button>
+							))}
+						</>
+					)}
+				</Group>
+			</Box>
 			<Flex w={"50%"} justify={"end"} align={"center"}>
 				<ActionIcon
 					aria-label="Settings"
diff --git a/web/src/components/widgets/GameCard.tsx b/web/src/components/widgets/GameCard.tsx
index 5e9c9c86..45978060 100644
--- a/web/src/components/widgets/GameCard.tsx
+++ b/web/src/components/widgets/GameCard.tsx
@@ -87,6 +87,7 @@ export default function GameCard({ game }: { game?: Game }) {
 										? "red"
 										: undefined
 							}
+							zIndex={3}
 							processing={status === 1 ? true : false}
 							sx={{
 								position: "absolute",
diff --git a/web/src/main.tsx b/web/src/main.tsx
index b930eae2..6303f1e5 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -7,11 +7,40 @@ import "@mantine/notifications/styles.css";
 import "@mantine/dates/styles.css";
 import "@mantine/dropzone/styles.css";
 import "./main.css";
+import { MantineProvider } from "@mantine/core";
+import { DatesProvider } from "@mantine/dates";
+import { emotionTransform, MantineEmotionProvider } from "@mantine/emotion";
+import { ModalsProvider } from "@mantine/modals";
+import { useTheme } from "@/utils/theme.ts";
+import { Notifications } from "@mantine/notifications";
+
+const { theme } = useTheme();
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
 		<Router>
-			<App />
+			<MantineProvider
+				stylesTransform={emotionTransform}
+				theme={theme}
+				defaultColorScheme="light"
+			>
+				<MantineEmotionProvider>
+					<ModalsProvider>
+						<DatesProvider
+							settings={{
+								locale: "zh-cn",
+								firstDayOfWeek: 0,
+								weekendDays: [0, 6],
+								timezone: "UTC",
+								consistentWeeks: true,
+							}}
+						>
+							<App />
+							<Notifications zIndex={5000} />
+						</DatesProvider>
+					</ModalsProvider>
+				</MantineEmotionProvider>
+			</MantineProvider>
 		</Router>
 	</React.StrictMode>
 );
diff --git a/web/src/pages/admin/challenges/index.tsx b/web/src/pages/admin/challenges/index.tsx
index ff8de263..d761875c 100644
--- a/web/src/pages/admin/challenges/index.tsx
+++ b/web/src/pages/admin/challenges/index.tsx
@@ -258,7 +258,7 @@ export default function Page() {
 								{challenges?.map((challenge) => (
 									<Table.Tr key={challenge?.id}>
 										<Table.Th>
-											<Group>
+											<Group wrap={"nowrap"}>
 												<Badge>{challenge?.id}</Badge>
 												<Switch
 													size="sm"
@@ -289,7 +289,7 @@ export default function Page() {
 											{challenge?.description}
 										</Table.Th>
 										<Table.Th>
-											<Group gap={10}>
+											<Group gap={10} wrap={"nowrap"}>
 												<MDIcon
 													color={
 														colorScheme === "dark"
@@ -328,7 +328,10 @@ export default function Page() {
 											</Group>
 										</Table.Th>
 										<Table.Th>
-											<Group justify="center">
+											<Group
+												justify="center"
+												wrap={"nowrap"}
+											>
 												<ActionIcon
 													onClick={() =>
 														navigate(
diff --git a/web/src/pages/admin/games/index.tsx b/web/src/pages/admin/games/index.tsx
index 823bc2d1..be015707 100644
--- a/web/src/pages/admin/games/index.tsx
+++ b/web/src/pages/admin/games/index.tsx
@@ -147,7 +147,7 @@ export default function Page() {
 	return (
 		<>
 			<Flex my={36} mx={"10%"} justify={"space-between"} gap={36}>
-				<Stack w={"15%"} gap={0}>
+				<Stack w={"15%"} gap={0} visibleFrom={"lg"}>
 					<Flex justify={"space-between"} align={"center"}>
 						<TextInput
 							variant="filled"
@@ -269,7 +269,7 @@ export default function Page() {
 									return (
 										<Table.Tr key={game?.id}>
 											<Table.Th>
-												<Group>
+												<Group wrap={"nowrap"}>
 													<Badge>{game?.id}</Badge>
 													<Switch
 														checked={
@@ -284,7 +284,7 @@ export default function Page() {
 												</Group>
 											</Table.Th>
 											<Table.Th p={0}>
-												<Group gap={15}>
+												<Group gap={15} wrap={"nowrap"}>
 													{game?.poster?.name && (
 														<Image
 															src={`${import.meta.env.VITE_BASE_API}/media/games/${game?.id}/poster/${game?.poster?.name}`}
@@ -344,7 +344,10 @@ export default function Page() {
 												</Badge>
 											</Table.Th>
 											<Table.Th>
-												<Group justify="center">
+												<Group
+													justify="center"
+													wrap={"nowrap"}
+												>
 													<ActionIcon
 														onClick={() => {
 															navigate(
diff --git a/web/src/pages/admin/teams/index.tsx b/web/src/pages/admin/teams/index.tsx
index d85e0812..98d2090e 100644
--- a/web/src/pages/admin/teams/index.tsx
+++ b/web/src/pages/admin/teams/index.tsx
@@ -220,7 +220,7 @@ export default function Page() {
 											<Badge>{team?.id}</Badge>
 										</Table.Th>
 										<Table.Th>
-											<Group gap={15}>
+											<Group gap={15} wrap={"nowrap"}>
 												<Avatar
 													color="brand"
 													src={`${import.meta.env.VITE_BASE_API}/media/teams/${team?.id}/${team?.avatar?.name}`}
@@ -263,7 +263,10 @@ export default function Page() {
 										<Table.Th>{team?.email}</Table.Th>
 										<Table.Th>{team?.description}</Table.Th>
 										<Table.Th>
-											<Group justify="center">
+											<Group
+												justify="center"
+												wrap={"nowrap"}
+											>
 												<ActionIcon
 													onClick={() => {
 														setSelectedTeam(team);
diff --git a/web/src/pages/admin/users/index.tsx b/web/src/pages/admin/users/index.tsx
index 13021276..cc193edb 100644
--- a/web/src/pages/admin/users/index.tsx
+++ b/web/src/pages/admin/users/index.tsx
@@ -219,7 +219,7 @@ export default function Page() {
 											<Badge>{user?.id}</Badge>
 										</Table.Th>
 										<Table.Th>
-											<Group gap={15}>
+											<Group gap={15} wrap={"nowrap"}>
 												<Avatar
 													color="brand"
 													src={`${import.meta.env.VITE_BASE_API}/media/users/${user?.id}/${user?.avatar?.name}`}
@@ -236,7 +236,10 @@ export default function Page() {
 										<Table.Th>{user?.email}</Table.Th>
 										<Table.Th>{user?.group}</Table.Th>
 										<Table.Th>
-											<Group justify="center">
+											<Group
+												justify="center"
+												wrap={"nowrap"}
+											>
 												<ActionIcon
 													onClick={() => {
 														setSelectedUser(user);
diff --git a/web/src/pages/games/[id]/challenges.tsx b/web/src/pages/games/[id]/challenges.tsx
index 1a2af86a..1dba87c4 100644
--- a/web/src/pages/games/[id]/challenges.tsx
+++ b/web/src/pages/games/[id]/challenges.tsx
@@ -28,7 +28,6 @@ import {
 	Stack,
 	Text,
 	Title,
-	Transition,
 	UnstyledButton,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
@@ -204,7 +203,18 @@ function Page() {
 					<Stack mx={10} miw={200} maw={200}>
 						<Button
 							size="lg"
-							leftSection={<MDIcon c={"white"}>upload</MDIcon>}
+							leftSection={
+								<MDIcon
+									c={
+										!game?.is_need_write_up
+											? "gray.5"
+											: "white"
+									}
+								>
+									upload
+								</MDIcon>
+							}
+							disabled={!game?.is_need_write_up}
 						>
 							上传题解
 						</Button>
diff --git a/web/src/pages/login.tsx b/web/src/pages/login.tsx
index c8f3cafa..3e799a2a 100644
--- a/web/src/pages/login.tsx
+++ b/web/src/pages/login.tsx
@@ -82,7 +82,6 @@ export default function Page() {
 					position: "fixed",
 					top: "50%",
 					left: "50%",
-					zIndex: -1,
 					transform: "translate(-50%, -50%)",
 				}}
 				className={"no-select"}
diff --git a/web/src/pages/register.tsx b/web/src/pages/register.tsx
index b4f9024d..2ed4ac8f 100644
--- a/web/src/pages/register.tsx
+++ b/web/src/pages/register.tsx
@@ -102,7 +102,6 @@ export default function Page() {
 					position: "fixed",
 					top: "50%",
 					left: "50%",
-					zIndex: -1,
 					transform: "translate(-50%, -50%)",
 				}}
 				className={"no-select"}