diff --git a/src/components/core/Image/Image.module.scss b/src/components/core/Image/Image.module.scss
index 6903aa0..c6f512a 100644
--- a/src/components/core/Image/Image.module.scss
+++ b/src/components/core/Image/Image.module.scss
@@ -6,7 +6,7 @@
     height: var(--image-height);
     border-radius: var(--image-radius);
     overflow: hidden;
-    background-color: light-dark(#0000001d, #ffffff0d);
+    background-color: light-dark(#cbcbcb, #2a3539);
     transition: all 0.2s ease-in-out;
     user-select: none;
     display: flex;
@@ -15,9 +15,14 @@
 }
 
 .img {
+    object-fit: cover;
+    display: block;
     width: 100%;
     height: 100%;
-    object-fit: cover;
+
+    &[data-error="true"] {
+        display: none;
+    }
 }
 
 .loading {
@@ -26,7 +31,17 @@
     left: 0;
     width: 100%;
     height: 100%;
+    border: none;
     backdrop-filter: blur(5px);
+
+    &.exit {
+        opacity: 1;
+    }
+
+    &.exit-active {
+        opacity: 0;
+        transition: opacity 150ms ease-out;
+    }
 }
 
 .loading-icon {
diff --git a/src/components/core/Image/Image.tsx b/src/components/core/Image/Image.tsx
index d96ead9..8fc6d6d 100644
--- a/src/components/core/Image/Image.tsx
+++ b/src/components/core/Image/Image.tsx
@@ -4,6 +4,7 @@ import Loading from "~icons/svg-spinners/180-ring-with-bg";
 import { Box } from "../Box";
 import clsx from "clsx";
 import Flag2BoldDuotone from "~icons/solar/flag-2-bold-duotone";
+import { CSSTransition } from "react-transition-group";
 
 export interface ImageProps extends ComponentProps<"img"> {
     src?: string;
@@ -36,6 +37,8 @@ export function Image(props: ImageProps) {
     const [loading, setLoading] = useState<boolean>(true);
     const [currentSrc, setCurrentSrc] = useState<string | undefined>(src);
 
+    const nodeRef = React.useRef(null);
+
     useEffect(() => {
         setErr(false);
         setLoading(true);
@@ -57,29 +60,37 @@ export function Image(props: ImageProps) {
             }}
         >
             {err && fallback}
-            {!err && (
-                <>
-                    <img
-                        className={styles["img"]}
-                        src={currentSrc}
-                        alt={""}
-                        onLoad={() => setLoading(false)}
-                        onError={() => setErr(true)}
-                        draggable={false}
-                    />
-                    {loading && (
-                        <Box className={styles["loading"]}>
-                            <Box className={styles["loading-icon"]}>
-                                <Loading
-                                    color={
-                                        "light-dark(var(--color-primary), white)"
-                                    }
-                                />
-                            </Box>
+            <>
+                <img
+                    className={styles["img"]}
+                    src={currentSrc}
+                    onLoad={() => {
+                        setTimeout(() => {
+                            setLoading(false);
+                        }, 500);
+                    }}
+                    onError={() => setErr(true)}
+                    draggable={false}
+                    data-error={err}
+                    loading={"lazy"}
+                />
+                <CSSTransition
+                    in={!err && loading}
+                    timeout={500}
+                    unmountOnExit
+                    classNames={{
+                        exit: styles["exit"],
+                        exitActive: styles["exit-active"],
+                    }}
+                    nodeRef={nodeRef}
+                >
+                    <Box className={styles["loading"]} ref={nodeRef}>
+                        <Box className={styles["loading-icon"]}>
+                            <Loading color={"white"} />
                         </Box>
-                    )}
-                </>
-            )}
+                    </Box>
+                </CSSTransition>
+            </>
         </Box>
     );
 }
diff --git a/src/components/widgets/Navbar/Navbar.tsx b/src/components/widgets/Navbar/Navbar.tsx
index d78030f..cdd5293 100644
--- a/src/components/widgets/Navbar/Navbar.tsx
+++ b/src/components/widgets/Navbar/Navbar.tsx
@@ -5,9 +5,7 @@ import UsersGroupTwoRoundedBoldDuotone from "~icons/solar/users-group-two-rounde
 import SolarSettingsBoldDuotone from "~icons/solar/settings-bold-duotone";
 import SolarRoundArrowLeftBoldDuotone from "~icons/solar/round-arrow-left-bold-duotone";
 import styles from "./Navbar.module.scss";
-import useThemeColor from "@/hooks/useThemeColor";
-import { CSSProperties, useMemo, useRef, useState } from "react";
-import chroma from "chroma-js";
+import { useMemo, useRef, useState } from "react";
 import { Link, useLocation } from "react-router";
 import { Avatar, Button, Popover, Tooltip } from "@/components/core";
 import { Box } from "@/components/core/Box";
diff --git a/src/pages/Challenges/Challenges.module.scss b/src/pages/Challenges/Challenges.module.scss
deleted file mode 100644
index 45362ea..0000000
--- a/src/pages/Challenges/Challenges.module.scss
+++ /dev/null
@@ -1 +0,0 @@
-@use "@/styles/mixins";
diff --git a/src/pages/Challenges/index.ts b/src/pages/Challenges/index.ts
deleted file mode 100644
index 21080aa..0000000
--- a/src/pages/Challenges/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Challenges } from "./Challenges";
diff --git a/src/pages/Default/index.ts b/src/pages/Default/index.ts
deleted file mode 100644
index d98d2bc..0000000
--- a/src/pages/Default/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Default } from "./Default";
diff --git a/src/pages/Login/index.ts b/src/pages/Login/index.ts
deleted file mode 100644
index 66a2839..0000000
--- a/src/pages/Login/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Login } from "./Login";
diff --git a/src/pages/_games/Default/Default.tsx b/src/pages/_games/Default/Default.tsx
deleted file mode 100644
index 339e55e..0000000
--- a/src/pages/_games/Default/Default.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import styles from "./Default.module.scss";
-import { Stack } from "@/components/core";
-import { Recent } from "./Recent";
-
-export function Default() {
-    return (
-        <Stack className={styles["root"]} gap={0}>
-            <Recent />
-            <Stack className={styles["all"]}>11</Stack>
-        </Stack>
-    );
-}
diff --git a/src/pages/_games/Default/index.ts b/src/pages/_games/Default/index.ts
deleted file mode 100644
index d98d2bc..0000000
--- a/src/pages/_games/Default/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Default } from "./Default";
diff --git a/src/pages/_games/_[id]/Default/Default.tsx b/src/pages/_games/_[id]/Default/Default.tsx
deleted file mode 100644
index fcc7c8a..0000000
--- a/src/pages/_games/_[id]/Default/Default.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { useParams } from "react-router";
-
-export function Default() {
-    const { id } = useParams();
-
-    return (
-        <div>
-            <h1>Game: {id}</h1>
-            <p>Game details here...</p>
-        </div>
-    );
-}
diff --git a/src/pages/_games/_[id]/Default/index.ts b/src/pages/_games/_[id]/Default/index.ts
deleted file mode 100644
index d98d2bc..0000000
--- a/src/pages/_games/_[id]/Default/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Default } from "./Default";
diff --git a/src/pages/_settings/Default/Default.tsx b/src/pages/_settings/Default/Default.tsx
deleted file mode 100644
index 7e278bf..0000000
--- a/src/pages/_settings/Default/Default.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export function Default() {
-    return <>111</>;
-}
diff --git a/src/pages/_settings/Default/index.ts b/src/pages/_settings/Default/index.ts
deleted file mode 100644
index d98d2bc..0000000
--- a/src/pages/_settings/Default/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Default } from "./Default";
diff --git a/src/pages/Challenges/Challenges.tsx b/src/pages/challenges/index.tsx
similarity index 99%
rename from src/pages/Challenges/Challenges.tsx
rename to src/pages/challenges/index.tsx
index df96e25..170f39a 100644
--- a/src/pages/Challenges/Challenges.tsx
+++ b/src/pages/challenges/index.tsx
@@ -20,7 +20,7 @@ import { LoadingOverlay } from "@/components/core/LoadingOverlay/LoadingOverlay"
 import { Box } from "@/components/core/Box";
 import { useSharedStore } from "@/stores/shared";
 
-export function Challenges() {
+export function Index() {
     const authStore = useAuthStore();
     const sharedStore = useSharedStore();
 
diff --git a/src/pages/_games/_[id]/Challenges/index.ts b/src/pages/games/[id]/challenges/index.ts
similarity index 100%
rename from src/pages/_games/_[id]/Challenges/index.ts
rename to src/pages/games/[id]/challenges/index.ts
diff --git a/src/pages/Default/Default.module.scss b/src/pages/games/[id]/index.module.scss
similarity index 100%
rename from src/pages/Default/Default.module.scss
rename to src/pages/games/[id]/index.module.scss
diff --git a/src/pages/games/[id]/index.tsx b/src/pages/games/[id]/index.tsx
new file mode 100644
index 0000000..307be7e
--- /dev/null
+++ b/src/pages/games/[id]/index.tsx
@@ -0,0 +1,3 @@
+export function Index() {
+    return <>1122</>;
+}
diff --git a/src/pages/_games/_[id]/Scoreboard/index.ts b/src/pages/games/[id]/scoreboard/index.ts
similarity index 100%
rename from src/pages/_games/_[id]/Scoreboard/index.ts
rename to src/pages/games/[id]/scoreboard/index.ts
diff --git a/src/pages/games/_blocks/All/All.module.scss b/src/pages/games/_blocks/All/All.module.scss
new file mode 100644
index 0000000..73a8efc
--- /dev/null
+++ b/src/pages/games/_blocks/All/All.module.scss
@@ -0,0 +1,7 @@
+.root {
+    min-height: 100%;
+    scroll-snap-align: center;
+    flex: 1;
+
+    padding: 3vh 10rem;
+}
diff --git a/src/pages/games/_blocks/All/All.tsx b/src/pages/games/_blocks/All/All.tsx
new file mode 100644
index 0000000..63f0fc0
--- /dev/null
+++ b/src/pages/games/_blocks/All/All.tsx
@@ -0,0 +1,77 @@
+import { Button, Flex, Pagination, Stack, TextInput } from "@/components/core";
+import styles from "./All.module.scss";
+import { useEffect, useState } from "react";
+import MinimalisticMagniferBoldDuotone from "~icons/solar/minimalistic-magnifer-bold-duotone";
+import { Game } from "@/models/game";
+import { get } from "@/api/game";
+import { GameCard } from "./GameCard";
+
+export function All() {
+    const [search, setSearch] = useState("");
+    const [searchInput, setSearchInput] = useState("");
+    const [games, setGames] = useState<Array<Game>>();
+
+    const [size, _] = useState(4);
+    const [page, setPage] = useState(1);
+    const [total, setTotal] = useState(0);
+
+    function fetchGames() {
+        get({
+            title: search,
+            sorts: "-id",
+            size: size,
+            page: page,
+        }).then((res) => {
+            setGames(res.data);
+            setTotal(res.total || 0);
+        });
+    }
+
+    useEffect(() => {
+        fetchGames();
+    }, [search, page]);
+
+    return (
+        <Stack
+            className={styles["root"]}
+            align={"center"}
+            width={"100%"}
+            gap={25}
+        >
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    setSearch(searchInput);
+                }}
+                style={{
+                    width: "80%",
+                }}
+            >
+                <Flex align={"center"} gap={15}>
+                    <TextInput
+                        icon={<MinimalisticMagniferBoldDuotone />}
+                        placeholder={"搜索"}
+                        value={searchInput}
+                        onChange={setSearchInput}
+                        clearable
+                        variant={"outlined"}
+                        style={{
+                            flex: "1",
+                        }}
+                    />
+                    <Button type={"submit"}>搜索</Button>
+                </Flex>
+            </form>
+            <Stack width={"100%"} align={"center"} style={{ flex: 1 }} gap={15}>
+                {games?.map((game) => <GameCard key={game.id} game={game} />)}
+            </Stack>
+            <Stack width={"100%"} align={"center"}>
+                <Pagination
+                    total={Math.ceil(total / size)}
+                    value={page}
+                    onChange={setPage}
+                />
+            </Stack>
+        </Stack>
+    );
+}
diff --git a/src/pages/games/_blocks/All/GameCard/GameCard.module.scss b/src/pages/games/_blocks/All/GameCard/GameCard.module.scss
new file mode 100644
index 0000000..eac4158
--- /dev/null
+++ b/src/pages/games/_blocks/All/GameCard/GameCard.module.scss
@@ -0,0 +1,38 @@
+.root {
+    position: relative;
+    box-shadow: var(--shadow-md);
+    background-color: var(--bg-2nd-color);
+    min-height: calc(25% - 15px);
+    max-height: calc(25% - 15px);
+    width: 80%;
+
+    border-radius: 20px;
+
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    user-select: none;
+
+    &:hover {
+        filter: brightness(1.2);
+    }
+
+    &:active {
+        box-shadow: none;
+        transform: translateY(4px);
+    }
+}
+
+.icon {
+    position: absolute;
+    left: -50%;
+}
+
+.trapezoid {
+    position: absolute;
+    right: -2px;
+    top: -2px;
+    width: 85px;
+    height: 85px;
+    background-color: var(--color-primary);
+    clip-path: polygon(100% 100%, 100% 50%, 50% 0, 0% 0);
+}
diff --git a/src/pages/games/_blocks/All/GameCard/GameCard.tsx b/src/pages/games/_blocks/All/GameCard/GameCard.tsx
new file mode 100644
index 0000000..f109445
--- /dev/null
+++ b/src/pages/games/_blocks/All/GameCard/GameCard.tsx
@@ -0,0 +1,46 @@
+import { Box, Flex, Image, Stack } from "@/components/core";
+import styles from "./GameCard.module.scss";
+import { Game } from "@/models/game";
+
+export interface GameCardProps {
+    game: Game;
+}
+
+export function GameCard(props: GameCardProps) {
+    const { game } = props;
+
+    return (
+        <Flex className={styles["root"]} gap={30} align={"flex-start"}>
+            <Image
+                src={`/api/games/${game?.id}/poster`}
+                width={"25%"}
+                radius={"20px 0 0 20px"}
+            />
+            <Stack
+                gap={10}
+                width={"50%"}
+                style={{
+                    margin: "2rem 0",
+                }}
+            >
+                <h2
+                    style={{
+                        fontSize: "1.25rem",
+                        fontWeight: 600,
+                    }}
+                >
+                    {game?.title}
+                </h2>
+                <p
+                    style={{
+                        fontSize: "0.875rem",
+                        fontWeight: 500,
+                    }}
+                >
+                    {game?.sketch}
+                </p>
+            </Stack>
+            <Box className={styles["trapezoid"]} />
+        </Flex>
+    );
+}
diff --git a/src/pages/games/_blocks/All/GameCard/index.ts b/src/pages/games/_blocks/All/GameCard/index.ts
new file mode 100644
index 0000000..5dc2074
--- /dev/null
+++ b/src/pages/games/_blocks/All/GameCard/index.ts
@@ -0,0 +1 @@
+export { GameCard } from "./GameCard";
diff --git a/src/pages/games/_blocks/All/index.ts b/src/pages/games/_blocks/All/index.ts
new file mode 100644
index 0000000..abf48b8
--- /dev/null
+++ b/src/pages/games/_blocks/All/index.ts
@@ -0,0 +1 @@
+export { All } from "./All";
diff --git a/src/pages/_games/Default/Recent/Recent.module.scss b/src/pages/games/_blocks/Recent/Recent.module.scss
similarity index 92%
rename from src/pages/_games/Default/Recent/Recent.module.scss
rename to src/pages/games/_blocks/Recent/Recent.module.scss
index 0037ed2..45a1e78 100644
--- a/src/pages/_games/Default/Recent/Recent.module.scss
+++ b/src/pages/games/_blocks/Recent/Recent.module.scss
@@ -26,14 +26,6 @@
     border-radius: 25px;
     background-color: light-dark(#0000000d, #ffffff0d);
 
-    .poster {
-        transition: all 0.2s ease-in-out;
-
-        &:hover {
-            filter: brightness(0.8);
-        }
-    }
-
     .info-section {
         position: absolute;
         top: -10%;
@@ -50,7 +42,7 @@
         left: -2px;
         height: calc(12vh + 4px);
         aspect-ratio: 1.25/1;
-        background-color: var(--bg-2nd-color);
+        background-color: var(--color-primary);
         border: 2.75px solid var(--color-primary);
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
@@ -61,12 +53,13 @@
     }
 
     .info {
+        box-sizing: content-box;
         position: relative;
         height: 12vh;
         border-radius: 35px;
+        border: 2.75px dotted var(--color-primary);
         box-shadow: var(--shadow-md);
-        background-color: var(--color-primary);
-        backdrop-filter: blur(10px);
+        background-color: var(--bg-2nd-color);
 
         padding-left: 22.5%;
     }
@@ -74,7 +67,7 @@
     .enter {
         position: absolute;
         height: 7vh;
-        bottom: 0;
+        bottom: 15px;
         right: 0;
         transform: translate(50%, 50%);
     }
diff --git a/src/pages/_games/Default/Recent/Recent.tsx b/src/pages/games/_blocks/Recent/Recent.tsx
similarity index 68%
rename from src/pages/_games/Default/Recent/Recent.tsx
rename to src/pages/games/_blocks/Recent/Recent.tsx
index 2ee95da..a7ac951 100644
--- a/src/pages/_games/Default/Recent/Recent.tsx
+++ b/src/pages/games/_blocks/Recent/Recent.tsx
@@ -6,6 +6,7 @@ import { Game, ScoreRecord } from "@/models/game";
 import React, { useEffect, useState } from "react";
 import { get, getScoreboard } from "@/api/game";
 import CupBold from "~icons/solar/cup-bold";
+import Planet2BoldDuotone from "~icons/solar/planet-2-bold-duotone";
 
 export function Recent() {
     const [games, setGames] = useState<Array<Game>>();
@@ -56,7 +57,7 @@ export function Recent() {
         if (games?.length) {
             const timer = setInterval(() => {
                 setIndex((prev) => (prev === games.length - 1 ? 0 : prev + 1));
-            }, 3000);
+            }, 5000);
             return () => {
                 clearInterval(timer);
             };
@@ -86,42 +87,67 @@ export function Recent() {
                             积分榜
                         </span>
                     </Flex>
-                    {scoreboard?.map((item, index) => (
-                        <Flex key={index} width={"100%"} align={"center"}>
-                            <Flex gap={10} align={"center"}>
-                                <Box>{getRankIcon(item?.game_team?.rank!)}</Box>
-                                <span>
-                                    <Badge>{item?.game_team?.team?.name}</Badge>
-                                </span>
-                            </Flex>
-                            <Flex
-                                justify={"flex-end"}
-                                style={{
-                                    flex: 1,
-                                }}
-                            >
-                                {item?.game_team?.pts}
+                    <Stack
+                        gap={5}
+                        width={"100%"}
+                        style={{ flex: 1, position: "relative" }}
+                    >
+                        {scoreboard?.map((item, index) => (
+                            <Flex key={index} width={"100%"} align={"center"}>
+                                <Flex gap={10} align={"center"}>
+                                    <Box>
+                                        {getRankIcon(item?.game_team?.rank!)}
+                                    </Box>
+                                    <span>
+                                        <Badge>
+                                            {item?.game_team?.team?.name}
+                                        </Badge>
+                                    </span>
+                                </Flex>
+                                <Flex
+                                    justify={"flex-end"}
+                                    style={{
+                                        flex: 1,
+                                    }}
+                                >
+                                    {item?.game_team?.pts}
+                                </Flex>
                             </Flex>
-                        </Flex>
-                    ))}
+                        ))}
+                    </Stack>
                     <Box className={styles["trapezoid"]} />
                     <CupBold color={"white"} className={styles["cup"]} />
+                    {!scoreboard?.length && (
+                        <Stack
+                            style={{
+                                position: "absolute",
+                                top: "50%",
+                                left: "50%",
+                                transform: "translate(-50%, -50%)",
+                                width: "50%",
+                                color: "color-mix(in srgb, light-dark(var(--color-primary), white) 40%, transparent 60%)",
+                            }}
+                            align={"center"}
+                            gap={5}
+                        >
+                            <Planet2BoldDuotone />
+                            <span>暂无数据</span>
+                        </Stack>
+                    )}
                 </Stack>
             </Box>
 
             <Box className={styles["left-section"]}>
                 <Box className={styles["panel"]}>
-                    <Box className={styles["poster"]}>
-                        <Image
-                            src={`/api/games/${games?.[index]?.id || 1}/poster`}
-                            height="50vh"
-                            width="45vw"
-                            radius={25}
-                            style={{
-                                boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
-                            }}
-                        />
-                    </Box>
+                    <Image
+                        src={`/api/games/${games?.[index]?.id}/poster`}
+                        height="50vh"
+                        width="45vw"
+                        radius={25}
+                        style={{
+                            boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
+                        }}
+                    />
                     <Box className={styles["info-section"]}>
                         <Flex
                             className={styles["info"]}
@@ -136,10 +162,14 @@ export function Recent() {
                                     }}
                                 >
                                     <Image
-                                        src={`/api/games/${games?.[index]?.id || 1}/icon`}
+                                        src={`/api/games/${games?.[index]?.id}/icon`}
                                         height="100%"
                                         width="100%"
                                         radius={9999}
+                                        style={{
+                                            border: "2px solid white",
+                                            backgroundColor: "transparent",
+                                        }}
                                     />
                                 </Box>
                             </Box>
@@ -155,7 +185,7 @@ export function Recent() {
                                     style={{
                                         fontWeight: 600,
                                         fontSize: "1.75rem",
-                                        color: "white",
+                                        color: "light-dark(var(--color-primary), white)",
                                         maxWidth: "80%",
                                         textWrap: "nowrap",
                                         overflow: "hidden",
@@ -166,7 +196,7 @@ export function Recent() {
                                 </span>
                                 <span
                                     style={{
-                                        color: "white",
+                                        color: "light-dark(var(--color-primary), white)",
                                         fontStyle: "italic",
                                         textWrap: "nowrap",
                                         maxWidth: "75%",
@@ -199,7 +229,11 @@ export function Recent() {
                             <Button
                                 key={i}
                                 width={"100%"}
-                                color={i === index ? "primary" : "#2222221d"}
+                                color={
+                                    i === index
+                                        ? "primary"
+                                        : "light-dark(#0000000d, #ffffff0d)"
+                                }
                                 onClick={() => {
                                     setIndex(i);
                                 }}
diff --git a/src/pages/_games/Default/Recent/Tip/Tip.module.scss b/src/pages/games/_blocks/Recent/Tip/Tip.module.scss
similarity index 100%
rename from src/pages/_games/Default/Recent/Tip/Tip.module.scss
rename to src/pages/games/_blocks/Recent/Tip/Tip.module.scss
diff --git a/src/pages/_games/Default/Recent/Tip/Tip.tsx b/src/pages/games/_blocks/Recent/Tip/Tip.tsx
similarity index 100%
rename from src/pages/_games/Default/Recent/Tip/Tip.tsx
rename to src/pages/games/_blocks/Recent/Tip/Tip.tsx
diff --git a/src/pages/_games/Default/Recent/Tip/index.ts b/src/pages/games/_blocks/Recent/Tip/index.ts
similarity index 100%
rename from src/pages/_games/Default/Recent/Tip/index.ts
rename to src/pages/games/_blocks/Recent/Tip/index.ts
diff --git a/src/pages/_games/Default/Recent/index.ts b/src/pages/games/_blocks/Recent/index.ts
similarity index 100%
rename from src/pages/_games/Default/Recent/index.ts
rename to src/pages/games/_blocks/Recent/index.ts
diff --git a/src/pages/_games/Default/Default.module.scss b/src/pages/games/index.module.scss
similarity index 51%
rename from src/pages/_games/Default/Default.module.scss
rename to src/pages/games/index.module.scss
index 41215e9..8959a6f 100644
--- a/src/pages/_games/Default/Default.module.scss
+++ b/src/pages/games/index.module.scss
@@ -1,13 +1,7 @@
 .root {
     position: absolute;
     scroll-snap-type: y mandatory;
-    overflow: scroll;
+    overflow-y: scroll;
     height: 100%;
     width: 100%;
 }
-
-.all {
-    min-height: 100%;
-    scroll-snap-align: center;
-    flex: 1;
-}
diff --git a/src/pages/games/index.tsx b/src/pages/games/index.tsx
new file mode 100644
index 0000000..3f7069a
--- /dev/null
+++ b/src/pages/games/index.tsx
@@ -0,0 +1,13 @@
+import styles from "./index.module.scss";
+import { Stack } from "@/components/core";
+import { Recent } from "./_blocks/Recent";
+import { All } from "./_blocks/All";
+
+export function Index() {
+    return (
+        <Stack className={styles["root"]} gap={0}>
+            <Recent />
+            <All />
+        </Stack>
+    );
+}
diff --git a/src/pages/_games/_[id]/challenges/index.ts b/src/pages/index.module.scss
similarity index 100%
rename from src/pages/_games/_[id]/challenges/index.ts
rename to src/pages/index.module.scss
diff --git a/src/pages/Default/Default.tsx b/src/pages/index.tsx
similarity index 99%
rename from src/pages/Default/Default.tsx
rename to src/pages/index.tsx
index f03abeb..de056b8 100644
--- a/src/pages/Default/Default.tsx
+++ b/src/pages/index.tsx
@@ -8,7 +8,7 @@ import { Tooltip } from "@/components/core/Tooltip";
 import UserBold from "~icons/solar/user-bold";
 import { useToastStore } from "@/stores/toast";
 import { DateTime } from "luxon";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { ChallengeCard } from "@/components/widgets/ChallengeCard";
 import { Switch } from "@/components/core/Switch/Switch";
 import { ChallengeModal } from "@/components/modals/ChallengeModal";
@@ -19,7 +19,7 @@ import globalRouter from "@/utils/globalRouter";
 import { Popover } from "@/components/core/Popover/Popover";
 import { Pagination } from "@/components/core/Pagination";
 
-export function Default() {
+export function Index() {
     const [color, setColor] = useState("#0d47a1");
     const handleChange = (e: any) => {
         setColor(e.target.value);
diff --git a/src/pages/Login/Login.module.scss b/src/pages/login/index.module.scss
similarity index 76%
rename from src/pages/Login/Login.module.scss
rename to src/pages/login/index.module.scss
index 3c7fb6e..a0c5033 100644
--- a/src/pages/Login/Login.module.scss
+++ b/src/pages/login/index.module.scss
@@ -1,7 +1,5 @@
 @use "@/styles/mixins";
 
-$bg-color: var(--category-bg-color);
-
 .root {
     display: flex;
     height: 100vh;
@@ -21,13 +19,8 @@ $bg-color: var(--category-bg-color);
     height: 100%;
     width: 0%;
     position: relative;
-    background-color: $bg-color;
+    background-color: var(--category-bg-color);
     transition: background-color 2000ms ease-in-out;
-
-    // background-image: linear-gradient(to right, #ffffff0d 1px, transparent 1px),
-    //     linear-gradient(to bottom, #ffffff0d 1px, transparent 1px);
-
-    // background-size: 25px 25px;
 }
 
 .icon {
diff --git a/src/pages/Login/Login.tsx b/src/pages/login/index.tsx
similarity index 98%
rename from src/pages/Login/Login.tsx
rename to src/pages/login/index.tsx
index 8d2419e..ea2d845 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/login/index.tsx
@@ -1,4 +1,4 @@
-import styles from "./Login.module.scss";
+import styles from "./index.module.scss";
 import { useCategoryStore } from "@/stores/category";
 import { CSSProperties, useEffect, useState } from "react";
 import { Button, TextInput } from "@/components/core";
@@ -11,7 +11,7 @@ import { useAuthStore } from "@/stores/auth";
 import { useNavigate } from "react-router";
 import { useToastStore } from "@/stores/toast";
 
-export function Login() {
+export function Index() {
     const authStore = useAuthStore();
     const categoryStore = useCategoryStore();
     const toastStore = useToastStore();
diff --git a/src/pages/_games/_[id]/scoreboard/index.ts b/src/pages/register/index.ts
similarity index 100%
rename from src/pages/_games/_[id]/scoreboard/index.ts
rename to src/pages/register/index.ts
diff --git a/src/pages/_settings/Appearance/Appearance.module.scss b/src/pages/settings/appearance/Appearance.module.scss
similarity index 100%
rename from src/pages/_settings/Appearance/Appearance.module.scss
rename to src/pages/settings/appearance/Appearance.module.scss
diff --git a/src/pages/_settings/Appearance/Appearance.tsx b/src/pages/settings/appearance/Appearance.tsx
similarity index 100%
rename from src/pages/_settings/Appearance/Appearance.tsx
rename to src/pages/settings/appearance/Appearance.tsx
diff --git a/src/pages/_settings/Appearance/index.ts b/src/pages/settings/appearance/index.ts
similarity index 100%
rename from src/pages/_settings/Appearance/index.ts
rename to src/pages/settings/appearance/index.ts
diff --git a/src/pages/_settings/_challenges/Default/Default.module.scss b/src/pages/settings/challenges/Default/Default.module.scss
similarity index 100%
rename from src/pages/_settings/_challenges/Default/Default.module.scss
rename to src/pages/settings/challenges/Default/Default.module.scss
diff --git a/src/pages/_settings/_challenges/Default/Default.tsx b/src/pages/settings/challenges/Default/Default.tsx
similarity index 100%
rename from src/pages/_settings/_challenges/Default/Default.tsx
rename to src/pages/settings/challenges/Default/Default.tsx
diff --git a/src/pages/_settings/System/index.ts b/src/pages/settings/challenges/Default/index.ts
similarity index 100%
rename from src/pages/_settings/System/index.ts
rename to src/pages/settings/challenges/Default/index.ts
diff --git a/src/pages/_settings/_challenges/Default/index.ts b/src/pages/settings/challenges/index.ts
similarity index 100%
rename from src/pages/_settings/_challenges/Default/index.ts
rename to src/pages/settings/challenges/index.ts
diff --git a/src/pages/_settings/_games/Default/Default.module.scss b/src/pages/settings/games/Default/Default.module.scss
similarity index 100%
rename from src/pages/_settings/_games/Default/Default.module.scss
rename to src/pages/settings/games/Default/Default.module.scss
diff --git a/src/pages/_settings/_games/Default/Default.tsx b/src/pages/settings/games/Default/Default.tsx
similarity index 100%
rename from src/pages/_settings/_games/Default/Default.tsx
rename to src/pages/settings/games/Default/Default.tsx
diff --git a/src/pages/_settings/_challenges/index.ts b/src/pages/settings/games/Default/index.ts
similarity index 100%
rename from src/pages/_settings/_challenges/index.ts
rename to src/pages/settings/games/Default/index.ts
diff --git a/src/pages/_settings/_games/Default/index.ts b/src/pages/settings/games/index.ts
similarity index 100%
rename from src/pages/_settings/_games/Default/index.ts
rename to src/pages/settings/games/index.ts
diff --git a/src/pages/_settings/Default/Default.module.scss b/src/pages/settings/index.module.scss
similarity index 100%
rename from src/pages/_settings/Default/Default.module.scss
rename to src/pages/settings/index.module.scss
diff --git a/src/pages/settings/index.tsx b/src/pages/settings/index.tsx
new file mode 100644
index 0000000..945d359
--- /dev/null
+++ b/src/pages/settings/index.tsx
@@ -0,0 +1,3 @@
+export function Index() {
+    return <>111</>;
+}
diff --git a/src/pages/_settings/System/System.module.scss b/src/pages/settings/system/System.module.scss
similarity index 100%
rename from src/pages/_settings/System/System.module.scss
rename to src/pages/settings/system/System.module.scss
diff --git a/src/pages/_settings/System/System.tsx b/src/pages/settings/system/System.tsx
similarity index 100%
rename from src/pages/_settings/System/System.tsx
rename to src/pages/settings/system/System.tsx
diff --git a/src/pages/_settings/_games/index.ts b/src/pages/settings/system/index.ts
similarity index 100%
rename from src/pages/_settings/_games/index.ts
rename to src/pages/settings/system/index.ts
diff --git a/src/pages/_settings/_users/index.ts b/src/pages/settings/users/index.ts
similarity index 100%
rename from src/pages/_settings/_users/index.ts
rename to src/pages/settings/users/index.ts
diff --git a/src/pages/_settings/_users/page.module.scss b/src/pages/settings/users/page.module.scss
similarity index 100%
rename from src/pages/_settings/_users/page.module.scss
rename to src/pages/settings/users/page.module.scss
diff --git a/src/pages/_settings/_users/page.tsx b/src/pages/settings/users/page.tsx
similarity index 100%
rename from src/pages/_settings/_users/page.tsx
rename to src/pages/settings/users/page.tsx
diff --git a/src/pages/_teams/index.ts b/src/pages/teams/index.ts
similarity index 100%
rename from src/pages/_teams/index.ts
rename to src/pages/teams/index.ts
diff --git a/src/routers.tsx b/src/routers.tsx
index 197a909..1b3e043 100644
--- a/src/routers.tsx
+++ b/src/routers.tsx
@@ -13,8 +13,8 @@ export const router = createBrowserRouter([
             {
                 path: "login",
                 lazy: async () => {
-                    let { Login } = await import("@/pages/Login");
-                    return { Component: Login };
+                    let { Index } = await import("@/pages/login");
+                    return { Component: Index };
                 },
             },
             {
@@ -27,26 +27,22 @@ export const router = createBrowserRouter([
                     {
                         index: true,
                         lazy: async () => {
-                            let { Default } = await import("@/pages/Default");
-                            return { Component: Default };
+                            let { Index } = await import("@/pages");
+                            return { Component: Index };
                         },
                     },
                     {
                         path: "games",
                         lazy: async () => {
-                            let { Default } = await import(
-                                "@/pages/_games/Default"
-                            );
-                            return { Component: Default };
+                            let { Index } = await import("@/pages/games");
+                            return { Component: Index };
                         },
                     },
                     {
                         path: "challenges",
                         lazy: async () => {
-                            let { Challenges } = await import(
-                                "@/pages/Challenges"
-                            );
-                            return { Component: Challenges };
+                            let { Index } = await import("@/pages/challenges");
+                            return { Component: Index };
                         },
                     },
                     {
@@ -55,10 +51,10 @@ export const router = createBrowserRouter([
                             {
                                 index: true,
                                 lazy: async () => {
-                                    let { Default } = await import(
-                                        "@/pages/_settings/Default"
+                                    let { Index } = await import(
+                                        "@/pages/settings"
                                     );
-                                    return { Component: Default };
+                                    return { Component: Index };
                                 },
                             },
                         ],
@@ -71,10 +67,8 @@ export const router = createBrowserRouter([
                     {
                         path: ":id",
                         lazy: async () => {
-                            let { Default } = await import(
-                                "@/pages/_games/_[id]/Default"
-                            );
-                            return { Component: Default };
+                            let { Index } = await import("@/pages/games/[id]");
+                            return { Component: Index };
                         },
                     },
                 ],
diff --git a/src/utils/alova.ts b/src/utils/alova.ts
index 9801ba3..c380e70 100644
--- a/src/utils/alova.ts
+++ b/src/utils/alova.ts
@@ -10,6 +10,11 @@ export const alovaInstance = createAlova({
     timeout: 5000,
     shareRequest: true,
     statesHook: ReactHook,
+    cacheFor: {
+        POST: 0,
+        PUT: 0,
+        DELETE: 0,
+    },
     responded: {
         onSuccess: async (response, _method) => {
             if (response.status === 401) {
@@ -19,7 +24,9 @@ export const alovaInstance = createAlova({
                     title: "请先登录",
                     description: "登录后才能继续操作",
                 });
+                return Promise.reject(response);
             }
+
             return response.json();
         },
     },