diff --git a/package.json b/package.json
index f551234..3488cbf 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "dotenv": "^17.2.3",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f354eaf..063480f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -81,6 +81,9 @@ importers:
       tailwindcss:
         specifier: ^4.1.18
         version: 4.1.18
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
@@ -1800,6 +1803,9 @@ packages:
     engines: {node: '>=18.0.0'}
     hasBin: true
 
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
   typescript@5.8.3:
     resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
     engines: {node: '>=14.17'}
@@ -3430,6 +3436,8 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  tw-animate-css@1.4.0: {}
+
   typescript@5.8.3: {}
 
   typescript@5.9.3: {}
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
deleted file mode 100644
index f608a2a..0000000
--- a/src/pages/App.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { basename } from '../modules/basename';
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
-console.log('basename', basename);
-import { App as AppDemo } from './app-demo';
-export const App = () => {
-  return <div className='bg-slate-200 w-full h-full border'>123</div>;
-};
-
-export const AppRoute = () => {
-  return (
-    <Router>
-      <Routes>
-        <Route path='/' element={<Navigate to='/app-demo/list' />} />
-        <Route path='/app-demo/*' element={<AppDemo />} />
-      </Routes>
-    </Router>
-  );
-};
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000..a16f8e1
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,3 @@
+export const Home = () => {
+  return <div>Home Page</div>
+}
\ No newline at end of file
diff --git a/src/pages/app-demo/index.tsx b/src/pages/app-demo/index.tsx
deleted file mode 100644
index e5a143e..0000000
--- a/src/pages/app-demo/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Routes, Route } from 'react-router';
-import { List } from './pages/List';
-
-export const App = () => {
-  return (
-    <Routes>
-      <Route index element={<List />} />
-      <Route path='/list' element={<List />} />
-    </Routes>
-  );
-};
diff --git a/src/pages/app-demo/pages/List.tsx b/src/pages/app-demo/pages/List.tsx
deleted file mode 100644
index b3819c4..0000000
--- a/src/pages/app-demo/pages/List.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useEffect } from 'react';
-import { useDemoStore } from '../store';
-import { useShallow } from 'zustand/react/shallow';
-import { Dialog, DialogTitle, DialogContent, TextField, Button } from '@mui/material';
-import { Controller, useForm } from 'react-hook-form';
-export const EditDialog = () => {
-  const { control, handleSubmit, reset } = useForm();
-  const store = useDemoStore(
-    useShallow((state) => ({
-      formData: state.formData,
-      setFormData: state.setFormData,
-      showEdit: state.showEdit,
-      setShowEdit: state.setShowEdit,
-    })),
-  );
-  useEffect(() => {
-    if (store.showEdit) {
-      reset(store.formData || {});
-    }
-  }, [store.formData]);
-  const onSubmit = (data: any) => {
-    console.log(data);
-  };
-  const hasId = !!store.formData?.id;
-  return (
-    <Dialog open={store.showEdit} onClose={() => store.setShowEdit(false)}>
-      <DialogTitle>{hasId ? 'Edit' : 'Add'}</DialogTitle>
-      <DialogContent>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <Controller control={control} name='title' render={({ field }) => <TextField {...field} label='Title' />} />
-          <Button type='submit'>提交</Button>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export const List = () => {
-  const store = useDemoStore(
-    useShallow((state) => ({
-      list: state.list,
-      init: state.init,
-      setShowEdit: state.setShowEdit,
-    })),
-  );
-  useEffect(() => {
-    store.init();
-  }, []);
-  return (
-    <div className='w-full h-full flex flex-col gap-2 bg-gray-100'>
-      <div className='flex justify-end'>
-        <Button onClick={() => store.setShowEdit(true)}>添加</Button>
-      </div>
-      <div>
-        {store.list.map((item) => (
-          <div key={item.id}>{item.title}</div>
-        ))}
-      </div>
-      <EditDialog />
-    </div>
-  );
-};
diff --git a/src/pages/app-demo/query.ts b/src/pages/app-demo/query.ts
deleted file mode 100644
index 1a7b073..0000000
--- a/src/pages/app-demo/query.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { BaseQuery } from '@kevisual/query';
-export class QueryApi extends BaseQuery {
-  constructor(options: { query: any }) {
-    super(options);
-  }
-  async getList(params?: any, dataOpts?: any) {
-    return this.query.post(
-      {
-        path: 'demo',
-        key: 'list',
-        ...params,
-      },
-      dataOpts,
-    );
-  }
-  async getDetail(id?: string, dataOpts?: any) {
-    return this.query.post(
-      {
-        path: 'demo',
-        key: 'get',
-        data: { id },
-      },
-      dataOpts,
-    );
-  }
-  async update(data?: any, dataOpts?: any) {
-    return this.query.post(
-      {
-        path: 'demo',
-        key: 'update',
-        data,
-      },
-      dataOpts,
-    );
-  }
-  async delete(id?: string, dataOpts?: any) {
-    return this.query.post(
-      {
-        path: 'demo',
-        key: 'delete',
-        data: { id },
-      },
-      dataOpts,
-    );
-  }
-}
diff --git a/src/pages/app-demo/store.ts b/src/pages/app-demo/store.ts
deleted file mode 100644
index 622d475..0000000
--- a/src/pages/app-demo/store.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { create } from 'zustand';
-import { query } from '@/modules/query';
-import { QueryApi } from './query';
-import { toast } from 'react-toastify';
-
-export const queryApi = new QueryApi({ query });
-type Store = {
-  list: any[];
-  setList: (list: any[]) => void;
-  data: any;
-  setData: (data: any) => void;
-  loading: boolean;
-  setLoading: (loading: boolean) => void;
-  formData: any;
-  setFormData: (data: any) => void;
-  showEdit: boolean;
-  setShowEdit: (showEdit: boolean) => void;
-  getList: () => Promise<any>;
-  init: () => Promise<void>;
-  getData: (id: string) => Promise<any>;
-  updateData: (data: any, opts?: { refresh?: boolean }) => Promise<any>;
-  deleteData: (id: string, opts?: { refresh?: boolean }) => Promise<any>;
-};
-export const useDemoStore = create<Store>((set, get) => ({
-  list: [],
-  setList: (list) => set({ list }),
-  data: null,
-  setData: (data) => set({ data }),
-  loading: false,
-  setLoading: (loading) => set({ loading }),
-  formData: null,
-  setFormData: (formData) => set({ formData }),
-  showEdit: false,
-  setShowEdit: (showEdit) => set({ showEdit }),
-  getList: async () => {
-    set({ loading: true });
-    const res = await queryApi.getList();
-    set({ loading: false });
-    if (res.code === 200) {
-      set({ list: res.data });
-    }
-    return res;
-  },
-  init: async () => {
-    await get().getList();
-  },
-  getData: async (id) => {
-    set({ loading: true });
-    const res = await queryApi.getDetail(id);
-    set({ loading: false });
-    if (res.code === 200) {
-      const data = res.data;
-      set({ data });
-    }
-    return res;
-  },
-  updateData: async (data, opts = { refresh: true }) => {
-    set({ loading: true });
-    const res = await queryApi.update(data);
-    set({ loading: false });
-    if (res.code === 200) {
-      set({ data: res.data });
-      toast.success('更新成功');
-    } else {
-      toast.error(res.message || '更新失败');
-    }
-    if (opts.refresh) {
-      await get().getList();
-    }
-    return res;
-  },
-  deleteData: async (id, opts = { refresh: true }) => {
-    set({ loading: true });
-    const res = await queryApi.delete(id);
-    set({ loading: false });
-    if (res.code === 200) {
-      set({ data: null });
-      toast.success('删除成功');
-    } else {
-      toast.error(res.message || '删除失败');
-    }
-    if (opts.refresh) {
-      await get().getList();
-    }
-    return res;
-  },
-}));
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index d79759b..21688d1 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,9 +1,9 @@
 import { createFileRoute } from '@tanstack/react-router'
-
+import { Home } from '@/pages/Home'
 export const Route = createFileRoute('/')({
   component: RouteComponent,
 })
 
 function RouteComponent() {
-  return <div>test</div>
+  return <Home />
 }
\ No newline at end of file