diff --git a/src/app/[lang]/components/menu/content.tsx b/src/app/[lang]/components/menu/content.tsx
index a700c41..6d8fab6 100644
--- a/src/app/[lang]/components/menu/content.tsx
+++ b/src/app/[lang]/components/menu/content.tsx
@@ -100,7 +100,7 @@ export function Content({
             icon: Quote,
             label: <span className="font-mono">{cardCount}</span>,
             variant: /^(\/quota)/.test(pathname) ? "default" : "ghost",
-            href: `/${lang}/quota/1`,
+            href: `/${lang}/quota`,
           },
         ]}
       />
diff --git a/src/app/[lang]/components/search.tsx b/src/app/[lang]/components/search.tsx
index 8bc7794..630e8f8 100644
--- a/src/app/[lang]/components/search.tsx
+++ b/src/app/[lang]/components/search.tsx
@@ -68,7 +68,7 @@ export default function SearchDialog({
           <Button
             size={"sm"}
             variant={"outline"}
-            className="h-8 w-8 bg-transparent p-0 lg:hidden"
+            className="h-8 w-8 p-0 lg:hidden"
             onClick={() => setOpen(true)}
           >
             <Search className="h-4 w-4" />
diff --git a/src/app/[lang]/quota/[page]/page.tsx b/src/app/[lang]/quota/[page]/page.tsx
deleted file mode 100644
index 21dd1d3..0000000
--- a/src/app/[lang]/quota/[page]/page.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import Image from "next/image";
-import { getDictionary, type Locale } from "~/dictionaries";
-import { api } from "~/trpc/server";
-import { R2Host } from "~/utils";
-import Loading from "../../loading";
-import Link from "next/link";
-import { Pagination } from "~/components/pagination";
-
-export default async function Page({
-  params,
-}: {
-  params: { lang: Locale; page: string };
-}) {
-  const dict = await getDictionary(params.lang);
-  const page = Number(params.page);
-  const data = await api.card.find.query({
-    page,
-    pageSize: 30,
-  });
-
-  if (!data) return <Loading />;
-
-  const { data: cards, hasNext } = data;
-
-  return (
-    <div className="py-4">
-      <div className="grid grid-cols-1 gap-4 px-4 sm:grid-cols-2 md:grid-cols-3">
-        {cards.map((item) => (
-          <Link
-            href={`/${params.lang}/poem/${item.poemId}`}
-            key={item.id}
-            title={item.content || "诗词片段摘抄"}
-            className="relative block aspect-[3/4] cursor-pointer overflow-hidden rounded-md shadow-md"
-          >
-            <Image
-              key={item.id}
-              alt={item.content || "诗词片段摘抄"}
-              src={`${R2Host}/aspoem/${item.url}_md.webp`}
-              fill
-              priority
-            />
-          </Link>
-        ))}
-      </div>
-      <Pagination
-        page={page}
-        hasNext={hasNext}
-        prefixUrl={`/${params.lang}/quota`}
-        dict={dict}
-      />
-    </div>
-  );
-}
diff --git a/src/app/[lang]/quota/page.tsx b/src/app/[lang]/quota/page.tsx
new file mode 100644
index 0000000..791847b
--- /dev/null
+++ b/src/app/[lang]/quota/page.tsx
@@ -0,0 +1,59 @@
+import Image from "next/image";
+import { type Locale } from "~/dictionaries";
+import { api } from "~/trpc/server";
+import { R2Host } from "~/utils";
+import Loading from "../loading";
+import Link from "next/link";
+import { HeaderMain } from "~/components/ui/header";
+import { Button } from "~/components/ui/button";
+import { ShuffleIcon } from "lucide-react";
+
+export default async function Page({
+  params,
+}: {
+  params: { lang: Locale; page: string };
+}) {
+  const data = await api.card.random.query();
+
+  if (!data) return <Loading />;
+
+  return (
+    <>
+      <HeaderMain>
+        <div className="flex items-center px-4">
+          随机诗词片段
+          <Button
+            asChild
+            variant={"outline"}
+            size={"sm"}
+            className="ml-4 h-8 w-8 p-0"
+          >
+            <Link href={`/${params.lang}/quota?t=${Date.now()}`}>
+              <ShuffleIcon className="h-4 w-4" />
+            </Link>
+          </Button>
+        </div>
+      </HeaderMain>
+      <div className="py-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
+          {data.map((item) => (
+            <Link
+              href={`/${params.lang}/poem/${item.poemId}`}
+              key={item.id}
+              title={item.content || "诗词片段摘抄"}
+              className="relative block aspect-[3/4] cursor-pointer overflow-hidden rounded-md shadow-md"
+            >
+              <Image
+                key={item.id}
+                alt={item.content || "诗词片段摘抄"}
+                src={`${R2Host}/aspoem/${item.url}_md.webp`}
+                fill
+                priority
+              />
+            </Link>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
index df23394..97952e9 100644
--- a/src/components/mode-toggle.tsx
+++ b/src/components/mode-toggle.tsx
@@ -18,11 +18,7 @@ export default function ModeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          size="icon"
-          className="h-8 w-8 bg-transparent"
-        >
+        <Button variant="outline" size="icon" className="h-8 w-8">
           <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
diff --git a/src/server/api/routers/card.ts b/src/server/api/routers/card.ts
index adf3c4f..c04eaf5 100644
--- a/src/server/api/routers/card.ts
+++ b/src/server/api/routers/card.ts
@@ -110,6 +110,19 @@ export const cardRouter = createTRPCRouter({
       };
     }),
 
+  random: publicProcedure.query(async ({ ctx }) => {
+    const count = await ctx.db.card.count();
+    const skip = Math.floor(Math.random() * count);
+
+    return ctx.db.card.findMany({
+      take: 30,
+      skip: skip,
+      orderBy: {
+        id: "desc",
+      },
+    });
+  }),
+
   count: publicProcedure.query(async ({ ctx }) => {
     return ctx.db.card.count();
   }),