diff --git a/src/app/admin/(dashboard)/_client/charts.tsx b/src/app/admin/(dashboard)/_client/charts.tsx
index bd26810..7e636b1 100644
--- a/src/app/admin/(dashboard)/_client/charts.tsx
+++ b/src/app/admin/(dashboard)/_client/charts.tsx
@@ -4,23 +4,21 @@ import DashboardChart from './chart'
 import Image from 'next/image'
 import soon from '../_assets/coming-soon.svg'
 import DatePicker from '@/components/date-picker'
-import {Card, CardHeader, CardTitle, CardContent} from '@/components/ui/card'
+import {Card, CardContent} from '@/components/ui/card'
 import {Form, FormField} from '@/components/ui/form'
 import {Input} from '@/components/ui/input'
 import {zodResolver} from '@hookform/resolvers/zod'
 import {useForm} from 'react-hook-form'
 import zod from 'zod'
 import {merge} from '@/lib/utils'
-import mask from '../_assets/Mask group.webp'
 import {Button} from '@/components/ui/button'
-import {useStatus} from '@/lib/states'
 import {useState} from 'react'
-import {useSearchParams} from 'next/navigation'
-import {log} from 'console'
 import {listAccount} from '@/actions/dashboard'
-import {ExtraReq, ExtraResp} from '@/lib/api'
+import {ExtraResp} from '@/lib/api'
 import {toast} from 'sonner'
 import {addDays, format} from 'date-fns'
+import {Label} from '@/components/ui/label'
+
 export default function Charts() {
   const dateStr = '2025-03-05'
   const dateStrA = '2024-03-05'
@@ -80,65 +78,51 @@ export default function Charts() {
   )
 
   return (
-    <Card className="col-start-1 row-start-3 col-span-3 row-span-2">
+    <Card className="h-full">
       <CardContent className="overflow-hidden">
         <Tabs defaultValue="dynamic" className="h-full gap-4">
           <TabsList>
             <TabsTrigger value="dynamic" className="data-[state=active]:text-primary">
-              {/* <Image src={mask} alt={`Mask group`} width={35} height={35} priority /> */}
               动态 IP 套餐
             </TabsTrigger>
             <TabsTrigger value="static" className="data-[state=active]:text-primary">静态 IP 套餐</TabsTrigger>
           </TabsList>
-          <Form<FormValues>
-            className={merge(`grid grid-cols-3 gap-4 items-start`)}
-            handler={handler}
-            form={form}
-          >
-            <FormField
-              name="resource_no"
-              label={<span className="w-full flex justify-end">套餐编号</span>}
-              className={`grid grid-cols-[70px_1fr] grid-rows-[auto_auto] `}
-              classNames={{
-                message: `col-start-2`,
-              }}
-            >
-              {({field}) => (
-                <Input {...field} className="w-52"/>
-              )}
-            </FormField>
-            <div className={`flex items-center `} >
-              <FormField
-                name="create_after"
-                label={<span className="w-full flex justify-end">时间范围筛选</span>}
-                className={`grid grid-cols-[100px_1fr] `}
-                classNames={{
-                  message: `col-start-2`,
-                }}
-              >
+          <Form<FormValues> className={merge(`flex items-end gap-4 flex-wrap`)} handler={handler} form={form} >
+            <div>
+              <FormField name="resource_no" label={<span className="text-sm">套餐编号</span>} >
                 {({field}) => (
-                  <DatePicker
-                    {...field}
-                    className="w-36"
-                    placeholder="开始时间"
-                    format="yyyy-MM-dd"
-                  />
+                  <Input {...field} className="w-52 "/>
                 )}
               </FormField>
-              <span className="px-1">-</span>
-              <FormField name="create_before">
-                {({field}) => (
-                  <DatePicker
-                    {...field}
-                    className="w-36"
-                    placeholder="结束时间"
-                    format="yyyy-MM-dd"
-                  />
-                )}
-              </FormField>
-              <Button className="h-9 w-20" type="submit">
-                <span>查询</span>
-              </Button>
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label className="text-sm">时间范围筛选</Label>
+              <div className="flex items-center">
+                <FormField name="create_after">
+                  {({field}) => (
+                    <DatePicker
+                      {...field}
+                      className="w-36"
+                      placeholder="开始时间"
+                      format="yyyy-MM-dd"
+                    />
+                  )}
+                </FormField>
+                <span className="px-1">-</span>
+                <FormField name="create_before">
+                  {({field}) => (
+                    <DatePicker
+                      {...field}
+                      className="w-36"
+                      placeholder="结束时间"
+                      format="yyyy-MM-dd"
+                    />
+                  )}
+                </FormField>
+                <Button className="h-9 w-20" type="submit">
+                  <span>查询</span>
+                </Button>
+              </div>
             </div>
           </Form>
           <TabsContent value="dynamic" className="overflow-hidden">
diff --git a/src/app/admin/(dashboard)/_client/userCenter.tsx b/src/app/admin/(dashboard)/_client/userCenter.tsx
index 6db93c6..2003ccb 100644
--- a/src/app/admin/(dashboard)/_client/userCenter.tsx
+++ b/src/app/admin/(dashboard)/_client/userCenter.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card'
+import {Card, CardContent} from '@/components/ui/card'
 import {getProfile} from '@/actions/auth'
 import {format} from 'date-fns'
 import {CheckCircleIcon, CircleAlertIcon} from 'lucide-react'
@@ -23,21 +23,21 @@ async function UserCenter() {
 
   const profile = resp.data
   return (
-    <Card className="col-start-4 row-start-1 row-span-2">
-      <CardContent className="flex-auto flex flex-col justify-between">
+    <Card className="h-full">
+      <CardContent className="flex-auto flex flex-col justify-between gap-4">
         <div className="flex flex-col gap-1">
           <p>{profile.phone}</p>
           <p className="text-sm text-weak">{`最后登录：${format(profile.last_login, 'yyyy-MM-dd HH:mm')}`}</p>
         </div>
         <div className={merge(
-          `flex justify-between  p-2 rounded-md`,
+          `flex justify-between p-2 rounded-md`,
           profile.id_token ? `bg-done-muted` : `bg-warn-muted`,
         )}
         >
           {profile.id_token
             ? (
               <>
-                <div className="flex gap-2 items-center">
+                <div className="flex gap-2 items-center ">
                   <CheckCircleIcon size={20} className="text-done"/>
                   <span>已实名</span>
                 </div>
diff --git a/src/app/admin/(dashboard)/page.tsx b/src/app/admin/(dashboard)/page.tsx
index 3b9eb21..4181cbe 100644
--- a/src/app/admin/(dashboard)/page.tsx
+++ b/src/app/admin/(dashboard)/page.tsx
@@ -30,16 +30,17 @@ export default async function DashboardPage(props: DashboardPageProps) {
   return (
     <Page className={merge(
       `flex-auto grid`,
-      `grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_300px]`,
-      `grid-rows-[150px_200px_minmax(150px,1fr)_minmax(150px,1fr)]`,
+      `grid-cols-1`,
+      `md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)_300px]`,
+      `md:grid-rows-[150px_200px_minmax(150px,1fr)_minmax(150px,1fr)]`,
     )}
     >
       {/* banner */}
-      <section className="col-start-1 row-start-1 col-span-3 relative rounded-lg overflow-hidden">
-        <Image src={banner} alt="banner image" className="w-full h-full inset-0 absolute object-cover"/>
+      <section className="md:row-start-1 md:col-start-1 md:col-span-3 relative md:rounded-lg overflow-hidden hidden md:block">
+        <Image src={banner} alt="banner image" className="w-full h-full inset-0 absolute "/>
         <div className="flex flex-col absolute inset-0 justify-center px-8 gap-1">
-          <h3 className="text-2xl text-primary font-medium">代理IP资源，先测后买</h3>
-          <p className="text-primary font-medium">短效/长效/固定IP代理，一站式服务</p>
+          <h3 className="text-2xl text-balance text-primary font-medium">代理IP资源，先测后买</h3>
+          <p className="text-primary text-balance font-medium">短效/长效/固定IP代理，一站式服务</p>
         </div>
       </section>
 
@@ -54,15 +55,19 @@ export default async function DashboardPage(props: DashboardPageProps) {
       )}
 
       {/* 图表 */}
-      <Charts/>
+      <div className="col-start-1 row-start-3 col-span-3 row-span-2 hidden md:block"><Charts/></div>
 
       {/* 信息 */}
-      <UserCenter/>
+      <div className=" md:col-start-4 md:row-start-1 md:row-span-2">
+        <UserCenter/>
+      </div>
 
       {/* 通知 */}
-      {initData && (
-        <Announcements list={initData.list}/>
-      )}
+      <div className="md:col-start-4 md:row-start-3 md:row-span-2">
+        {initData && (
+          <Announcements list={initData.list}/>
+        )}
+      </div>
 
     </Page>
   )
@@ -75,14 +80,12 @@ type DashboardChartProps = {
 }
 function Pins(props: DashboardChartProps) {
   return (
-    <>
-
+    <div className="flex md:row-start-2 md:col-start-1 md:col-span-3 gap-4">
       {/* 短效 */}
-      <Card className="col-start-1 row-start-2 py-4">
+      <Card className="flex-1">
         <CardHeader>
           <CardTitle>
-            <Image src={mask} alt="Mask group" width={35} height={35} priority/>
-            {' '}
+            <Image src={mask} alt="Mask group" priority/>
             短效动态套餐
           </CardTitle>
         </CardHeader>
@@ -91,52 +94,49 @@ function Pins(props: DashboardChartProps) {
             <h4>包时</h4>
             <p className="flex flex-col items-end">
               <span className="text-sm text-weak">当日可提取数量</span>
-              <span className="text-lg">{props.short_term ? props.short_term : '1'}</span>
+              <span className="text-sm">{props.short_term ? props.short_term : '1'}</span>
             </p>
           </div>
           <div className="border-b"></div>
           <div className="flex-1 flex items-center justify-between">
-            <h4>包量</h4>
+            <h4 className="text-balance">包量</h4>
             <p className="flex flex-col items-end">
               <span className="text-sm text-weak">剩余可提取数量</span>
-              <span className="text-lg">{props.short_term_monthly}</span>
+              <span className="text-sm">{props.short_term_monthly}</span>
             </p>
           </div>
         </CardContent>
       </Card>
 
       {/* 长效 */}
-      <Card className="col-start-2 row-start-2">
+      <Card className="flex-1">
         <CardHeader>
           <CardTitle>
-            <Image src={mask} alt="Mask group" width={35} height={35} priority/>
-            {' '}
+            <Image src={mask} alt="Mask group" priority/>
             长效动态套餐
           </CardTitle>
         </CardHeader>
         <CardContent className="flex-auto flex flex-col gap-2">
-          {/* <Image alt={`coming soon`} src={soon} />
-        <p>敬请期待</p> */}
           <div className="flex-1 flex items-center justify-between">
-            <h4>包时</h4>
+            <h4 className="text-balance">包时</h4>
             <p className="flex flex-col items-end">
-              <span className="text-sm text-weak">当日可提取数量</span>
-              <span className="text-lg">{props.long_term}</span>
+              <span className="text-sm  text-weak" >当日可提取数量</span>
+              <span className="text-sm">{props.long_term}</span>
             </p>
           </div>
           <div className="border-b"></div>
           <div className="flex-1 flex items-center justify-between">
-            <h4>包量</h4>
+            <h4 className="text-balance">包量</h4>
             <p className="flex flex-col items-end">
-              <span className="text-sm text-weak">剩余可提取数量</span>
-              <span className="text-lg">{props.long_term_monthly}</span>
+              <span className="text-sm  text-weak">剩余可提取数量</span>
+              <span className="text-sm">{props.long_term_monthly}</span>
             </p>
           </div>
         </CardContent>
       </Card>
 
       {/* 固定 */}
-      <Card className="col-start-3 row-start-2 py-4">
+      <Card className="flex-1 py-4 h-full hidden xl:block ">
         <CardHeader className="px-4">
           <CardTitle>固定IP套餐</CardTitle>
         </CardHeader>
@@ -145,7 +145,8 @@ function Pins(props: DashboardChartProps) {
           <p>敬请期待</p>
         </CardContent>
       </Card>
-    </>
+
+    </div>
   )
 }
 
@@ -158,17 +159,17 @@ type Props = {
 }
 function Announcements(props: Props) {
   return (
-    <Card className="col-start-4 row-start-3 row-span-2">
+    <Card className="h-full">
       <CardHeader>
         <div className="flex justify-between  gap-2">
           <CardTitle>公告</CardTitle>
-          <span className="text-sm text-weak">查看更多</span>
+          <span className="text-sm text-primary font-medium">查看更多</span>
         </div>
       </CardHeader>
       <CardContent className="flex-auto p-0">
         {!props.list.length
           ? (
-            <div className="flex flex-col items-center justify-center gap-2 h-full">
+            <div className="flex flex-col items-center justify-center gap-8 ">
               <Image alt="coming soon" src={soon}/>
               <p>暂无公告</p>
             </div>