diff --git a/app/app/(admin)/admin/page.tsx b/app/app/(admin)/admin/page.tsx
new file mode 100644
index 000000000..9e0f43e2c
--- /dev/null
+++ b/app/app/(admin)/admin/page.tsx
@@ -0,0 +1,39 @@
+"use client";
+import { Grid, Col, Card, Text, AreaChart, Metric } from "@tremor/react";
+
+export default function AdminPage() {
+  return (
+    <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-2">
+      <Col numColSpan={1} numColSpanLg={2}>
+        <Card>
+          <Text>Title</Text>
+          {/*<AreaChart*/}
+          {/*    className="mt-6 h-28"*/}
+          {/*    data={data}*/}
+          {/*    index="Month"*/}
+          {/*    valueFormatter={(number: number) =>*/}
+          {/*        `${Intl.NumberFormat("us").format(number).toString()}`*/}
+          {/*    }*/}
+          {/*    categories={["Total Visitors"]}*/}
+          {/*    colors={["blue"]}*/}
+          {/*    showXAxis={true}*/}
+          {/*    showGridLines={false}*/}
+          {/*    startEndOnly={true}*/}
+          {/*    showYAxis={false}*/}
+          {/*    showLegend={false}*/}
+          {/*/>*/}
+        </Card>
+      </Col>
+      <Card>
+        <Text>Title</Text>
+        <Metric>KPI 2</Metric>
+      </Card>
+      <Col>
+        <Card>
+          <Text>Title</Text>
+          <Metric>KPI 3</Metric>
+        </Card>
+      </Col>
+    </Grid>
+  );
+}
diff --git a/app/app/(admin)/layout.tsx b/app/app/(admin)/layout.tsx
new file mode 100644
index 000000000..8b7376bc6
--- /dev/null
+++ b/app/app/(admin)/layout.tsx
@@ -0,0 +1,24 @@
+import "@/app/app/login.scss";
+import { Metadata } from "next";
+import { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "Admin | 管理页面",
+};
+
+export default async function AdminLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <div className="flex max-w-screen-xl flex-col space-y-12 p-8">
+      <div className="flex flex-col space-y-6">
+        <h1 className="font-cal text-3xl font-bold dark:text-white">
+          Admin Page
+        </h1>
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/app/app/(auth)/layout.tsx b/app/app/(auth)/layout.tsx
index 57458206e..cc4df20a9 100644
--- a/app/app/(auth)/layout.tsx
+++ b/app/app/(auth)/layout.tsx
@@ -1,4 +1,4 @@
-import "@/app/styles/login.scss";
+import "@/app/app/login.scss";
 import { Metadata } from "next";
 import { ReactNode } from "react";
 // import { useEffect } from "react";
diff --git a/app/styles/login.scss b/app/app/login.scss
similarity index 100%
rename from app/styles/login.scss
rename to app/app/login.scss
diff --git a/middleware.ts b/middleware.ts
index 5eb43c8ae..cafb99b3b 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -29,6 +29,11 @@ export default async function middleware(req: NextRequest) {
             new URL(`/app${path}`, req.url),
         );
     }
+    if (path == "/admin") {
+        return NextResponse.rewrite(
+            new URL(`/app${path}`, req.url),
+        );
+    }
 
     if (req.method == 'POST' && (path.startsWith("/api/openai/") || path.startsWith("/api/midjourney"))) {
         // 重写header，添加用户名
diff --git a/package.json b/package.json
index 997f0269b..fabc42e25 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^5.7.0",
     "@svgr/webpack": "^8.1.0",
+    "@tremor/react": "^3.12.1",
     "@vercel/analytics": "^1.1.1",
     "emoji-picker-react": "^4.5.15",
     "fuse.js": "^7.0.0",
diff --git a/tailwind.config.js b/tailwind.config.js
index f8c4fd898..6fc00d3d8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,7 @@ module.exports = {
   content: [
     // "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}", // Tremor module
   ],
   theme: {
     extend: {