diff --git a/app/app/(admin)/admin/date-picker.tsx b/app/app/(admin)/admin/date-picker.tsx
new file mode 100644
index 000000000..d06d987e9
--- /dev/null
+++ b/app/app/(admin)/admin/date-picker.tsx
@@ -0,0 +1,27 @@
+"use client";
+import {
+  DatePicker,
+  DateRangePickerItem,
+  DatePickerValue,
+} from "@tremor/react";
+import { da, es, zhCN } from "date-fns/locale";
+
+export default function DateRangePickerSpanish() {
+  // const [value, setValue] = useState<DateRangePickerValue>({
+  //     from: new Date(2023, 1, 1),
+  //     to: new Date(),
+  // });
+
+  const currentDate: DatePickerValue = new Date();
+
+  return (
+    <DatePicker
+      className="max-w-sm mx-auto justify-center"
+      // value={dataRange}
+      locale={zhCN}
+      defaultValue={new Date()}
+      // minDate={new Date(2023, 1, 1)}
+      maxDate={new Date()}
+    />
+  );
+}
diff --git a/app/app/(admin)/admin/page.tsx b/app/app/(admin)/admin/page.tsx
index 31d614e03..a13e1b259 100644
--- a/app/app/(admin)/admin/page.tsx
+++ b/app/app/(admin)/admin/page.tsx
@@ -1,4 +1,12 @@
-import { Grid, Col, Card, Text, AreaChart, Metric } from "@tremor/react";
+import {
+  Grid,
+  Col,
+  Card,
+  Text,
+  AreaChart,
+  Metric,
+  DatePicker,
+} from "@tremor/react";
 import UsageByModel from "./usage-by-model";
 import { getSession, ADMIN_LIST, isName } from "@/lib/auth";
 import { redirect } from "next/navigation";
@@ -13,11 +21,13 @@ export default async function AdminPage() {
   return (
     <>
       <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-2">
-        <Col numColSpan={1} numColSpanLg={1}>
+        <Col numColSpan={1} numColSpanSm={2} numColSpanLg={3}>
           {/*<UsageAnalysis />*/}
           {/*<Card></Card>*/}
+          {/*<DatePicker className="max-w-sm mx-auto justify-center" />*/}
+          {/*<DateRangePickerSpanish />*/}
         </Col>
-        <Col numColSpan={1} numColSpanLg={2}>
+        <Col numColSpan={1} numColSpanSm={2} numColSpanLg={3}>
           <UsageByModel />
         </Col>
       </Grid>
diff --git a/app/app/(admin)/admin/usage-by-model-chart.tsx b/app/app/(admin)/admin/usage-by-model-chart.tsx
index ba41dc53f..1fd071b31 100644
--- a/app/app/(admin)/admin/usage-by-model-chart.tsx
+++ b/app/app/(admin)/admin/usage-by-model-chart.tsx
@@ -1,6 +1,8 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import * as echarts from "echarts"; // 导入 echarts
+import * as echarts from "echarts";
+import { DatePicker } from "@tremor/react";
+import { zhCN } from "date-fns/locale"; // 导入 echarts
 
 export default function UsageByModelChart({
   option,
@@ -14,9 +16,20 @@ export default function UsageByModelChart({
   }, [option]); // 空数组作为第二个参数，表示仅在组件挂载和卸载时执行
 
   return (
-    <div
-      id="usage-by-model-chart"
-      style={{ width: "100%", height: "400px" }}
-    ></div>
+    <div>
+      <DatePicker
+        className="max-w-sm mx-auto justify-center"
+        // value={dataRange}
+        locale={zhCN}
+        defaultValue={new Date()}
+        // minDate={new Date(2023, 1, 1)}
+        maxDate={new Date()}
+      />
+      )
+      <div
+        id="usage-by-model-chart"
+        style={{ width: "100%", height: "400px" }}
+      ></div>
+    </div>
   );
 }
diff --git a/app/app/(admin)/admin/usage-by-model.tsx b/app/app/(admin)/admin/usage-by-model.tsx
index 4a3f1f3ec..369708c19 100644
--- a/app/app/(admin)/admin/usage-by-model.tsx
+++ b/app/app/(admin)/admin/usage-by-model.tsx
@@ -1,10 +1,11 @@
-import * as echarts from "echarts";
+// import * as echarts from "echarts";
 import { EChartsOption } from "echarts";
 import dynamic from "next/dynamic";
 import prisma from "@/lib/prisma";
 import { addHours, subMinutes } from "date-fns";
 import { log } from "util";
 import { use } from "react";
+import type { InferGetServerSidePropsType, GetServerSideProps } from "next";
 
 // import { getTokenLength } from "@/app/utils/token";
 
@@ -85,6 +86,21 @@ export default async function UsageByModel() {
   // @ts-ignore
   const log_data = HandleLogData(todayLog);
 
+  // const usageByModelTimelineOption : EChartsOption = {
+  //   timeline: {
+  //     // ...,
+  //     axisType: "time",
+  //     autoPlay: false,
+  //
+  //     data: ['2023/12/32', '2023/12/32'],
+  //     // label: {
+  //     //   formatter: ((s) => {
+  //     //     return new Date(s).getDate().toString()
+  //     //   })
+  //     // }
+  //   }
+  // }
+
   const usageByModelOption: EChartsOption = {
     tooltip: {
       trigger: "axis",
@@ -136,3 +152,11 @@ export default async function UsageByModel() {
     </>
   );
 }
+
+export const getServerSideProps = async () => {
+  // Fetch data from external API
+  const data = {};
+
+  // Pass data to the page via props
+  return { props: { data } };
+};