diff --git a/change/@acedatacloud-nexior-74d4f150-ff04-4c0d-af43-0d25c08af9d6.json b/change/@acedatacloud-nexior-74d4f150-ff04-4c0d-af43-0d25c08af9d6.json
new file mode 100644
index 00000000..ff7eae87
--- /dev/null
+++ b/change/@acedatacloud-nexior-74d4f150-ff04-4c0d-af43-0d25c08af9d6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add pika hailuo pagination",
+  "packageName": "@acedatacloud/nexior",
+  "email": "1348977728@qq.com",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/hailuo/RecentPanel.vue b/src/components/hailuo/RecentPanel.vue
index eb114b1b..d539a109 100644
--- a/src/components/hailuo/RecentPanel.vue
+++ b/src/components/hailuo/RecentPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="panel recent">
+  <div ref="panel" class="panel recent" @scroll="onHandleScroll">
     <div v-if="tasks?.items === undefined" class="tasks">
       <div v-for="_ in 3" :key="_" class="task placeholder">
         <div class="left">
@@ -40,6 +40,7 @@ export default defineComponent({
     ElSkeleton,
     ElSkeletonItem
   },
+  emits: ['reach-top'],
   data() {
     return {
       job: 0
@@ -50,9 +51,18 @@ export default defineComponent({
       // reverse the order of the tasks.items
       return {
         ...this.$store.state.hailuo?.tasks,
-        items: this.$store.state.hailuo?.tasks?.items?.slice().reverse()
+        items: this.$store.state.hailuo?.tasks?.items?.slice()
       };
     }
+  },
+  methods: {
+    onHandleScroll() {
+      const el = this.$refs.panel as HTMLElement;
+      console.log('reach-top reach-top reach-top');
+      if (el.scrollTop === 0) {
+        this.$emit('reach-top');
+      }
+    }
   }
 });
 </script>
diff --git a/src/components/hailuo/task/Preview.vue b/src/components/hailuo/task/Preview.vue
index 26ead5f2..603886a2 100644
--- a/src/components/hailuo/task/Preview.vue
+++ b/src/components/hailuo/task/Preview.vue
@@ -147,7 +147,6 @@ export default defineComponent({
           result.push(audio);
         });
       }
-      console.log('videos', result);
       return result;
     }
   },
diff --git a/src/components/pika/RecentPanel.vue b/src/components/pika/RecentPanel.vue
index 03e74ceb..759a5d03 100644
--- a/src/components/pika/RecentPanel.vue
+++ b/src/components/pika/RecentPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="panel recent">
+  <div ref="panel" class="panel recent" @scroll="onHandleScroll">
     <div v-if="tasks?.items === undefined" class="tasks">
       <div v-for="_ in 3" :key="_" class="task placeholder">
         <div class="left">
@@ -40,6 +40,7 @@ export default defineComponent({
     ElSkeleton,
     ElSkeletonItem
   },
+  emits: ['reach-top'],
   data() {
     return {
       job: 0
@@ -50,9 +51,18 @@ export default defineComponent({
       // reverse the order of the tasks.items
       return {
         ...this.$store.state.pika?.tasks,
-        items: this.$store.state.pika?.tasks?.items?.slice().reverse()
+        items: this.$store.state.pika?.tasks?.items?.slice()
       };
     }
+  },
+  methods: {
+    onHandleScroll() {
+      const el = this.$refs.panel as HTMLElement;
+      console.log('reach-top reach-top reach-top');
+      if (el.scrollTop === 0) {
+        this.$emit('reach-top');
+      }
+    }
   }
 });
 </script>
diff --git a/src/components/pika/task/Preview.vue b/src/components/pika/task/Preview.vue
index 64230ab4..86f33f55 100644
--- a/src/components/pika/task/Preview.vue
+++ b/src/components/pika/task/Preview.vue
@@ -137,7 +137,6 @@ export default defineComponent({
           result.push(audio);
         });
       }
-      console.log('videos', result);
       return result;
     }
   },
diff --git a/src/models/hailuo.ts b/src/models/hailuo.ts
index 0f57ec84..27dd717a 100644
--- a/src/models/hailuo.ts
+++ b/src/models/hailuo.ts
@@ -35,7 +35,7 @@ export interface IHailuoGenerateResponse {
 
 export interface IHailuoTask {
   id: string;
-  created_at?: string;
+  created_at?: number;
   request?: IHailuoGenerateRequest;
   response?: IHailuoGenerateResponse;
 }
diff --git a/src/models/pika.ts b/src/models/pika.ts
index fff493c4..06eab075 100644
--- a/src/models/pika.ts
+++ b/src/models/pika.ts
@@ -43,7 +43,7 @@ export interface IPikaGenerateResponse {
 
 export interface IPikaTask {
   id: string;
-  created_at?: string;
+  created_at?: number;
   request?: IPikaGenerateRequest;
   response?: IPikaGenerateResponse;
 }
diff --git a/src/operators/hailuo.ts b/src/operators/hailuo.ts
index 89fe6117..409ec527 100644
--- a/src/operators/hailuo.ts
+++ b/src/operators/hailuo.ts
@@ -30,6 +30,8 @@ class HailuoOperator {
       type?: string;
       limit?: number;
       offset?: number;
+      createdAtMax?: number;
+      createdAtMin?: number;
     },
     options: { token: string }
   ): Promise<AxiosResponse<IHailuoTasksResponse>> {
@@ -66,6 +68,16 @@ class HailuoOperator {
           ? {
               offset: filter.offset
             }
+          : {}),
+        ...(filter.createdAtMax !== undefined
+          ? {
+              created_at_max: filter.createdAtMax
+            }
+          : {}),
+        ...(filter.createdAtMin !== undefined
+          ? {
+              created_at_min: filter.createdAtMin
+            }
           : {})
       },
       {
diff --git a/src/operators/pika.ts b/src/operators/pika.ts
index 125bb6f7..0cd4eae2 100644
--- a/src/operators/pika.ts
+++ b/src/operators/pika.ts
@@ -30,6 +30,8 @@ class PikaOperator {
       type?: string;
       limit?: number;
       offset?: number;
+      createdAtMax?: number;
+      createdAtMin?: number;
     },
     options: { token: string }
   ): Promise<AxiosResponse<IPikaTasksResponse>> {
@@ -66,6 +68,16 @@ class PikaOperator {
           ? {
               offset: filter.offset
             }
+          : {}),
+        ...(filter.createdAtMax !== undefined
+          ? {
+              created_at_max: filter.createdAtMax
+            }
+          : {}),
+        ...(filter.createdAtMin !== undefined
+          ? {
+              created_at_min: filter.createdAtMin
+            }
           : {})
       },
       {
diff --git a/src/pages/hailuo/Index.vue b/src/pages/hailuo/Index.vue
index 24f28a60..78ca299e 100644
--- a/src/pages/hailuo/Index.vue
+++ b/src/pages/hailuo/Index.vue
@@ -12,7 +12,7 @@
         class="mb-4"
         @refresh="onGetApplication"
       />
-      <recent-panel class="panel recent" />
+      <recent-panel class="panel recent" @reach-top="onReachTop" />
       <!-- <operation-panel class="panel operation" @generate="onGenerate" /> -->
     </template>
   </layout>
@@ -35,6 +35,7 @@ const CALLBACK_URL = 'https://webhook.acedata.cloud/hailuo';
 interface IData {
   task: IHailuoTask | undefined;
   job: number;
+  timer: NodeJS.Timer;
 }
 
 export default defineComponent({
@@ -48,7 +49,9 @@ export default defineComponent({
   data(): IData {
     return {
       task: undefined,
-      job: 0
+      job: 0,
+      // @ts-ignore
+      timer: undefined
     };
   },
   computed: {
@@ -72,6 +75,21 @@ export default defineComponent({
     },
     application() {
       return this.$store.state.hailuo.application;
+    },
+    tasks() {
+      return this.$store.state.hailuo.tasks;
+    }
+  },
+  watch: {
+    tasks: {
+      handler(value, oldValue) {
+        // scroll down if new tasks are added
+        if (value?.items?.length > oldValue?.items?.length) {
+          console.debug('new tasks detected');
+          // this.onScrollDown();
+        }
+      },
+      deep: true
     }
   },
   async mounted() {
@@ -87,8 +105,15 @@ export default defineComponent({
   },
   async unmounted() {
     clearInterval(this.job);
+    clearInterval(this.timer);
   },
   methods: {
+    async onReachTop() {
+      console.debug('reached top');
+      await this.onGetTasks({
+        createdAtMax: this.tasks?.items?.[0]?.created_at
+      });
+    },
     async onGetService() {
       console.debug('start onGetService');
       await this.$store.dispatch('hailuo/getService');
@@ -125,14 +150,18 @@ export default defineComponent({
         }
       }, 500);
     },
-    async onGetTasks() {
+    async onGetTasks(payload?: { limit?: number; createdAtMin?: number; createdAtMax?: number }) {
       if (this.loading) {
         console.debug('loading');
         return;
       }
+      console.debug('start onGetTasks', payload);
+      const { limit = 5, createdAtMin, createdAtMax } = payload || {};
+      console.debug('limit', limit, 'createdAtMin', createdAtMin, 'createdAtMax', createdAtMax);
       await this.$store.dispatch('hailuo/getTasks', {
-        limit: 30,
-        offset: 0
+        limit,
+        createdAtMin,
+        createdAtMax
       });
     },
     async onGenerateVideo() {
@@ -165,8 +194,10 @@ export default defineComponent({
           }
         })
         .finally(async () => {
-          await this.onGetTasks();
-          await this.onScrollDown();
+          setTimeout(async () => {
+            await this.onGetTasks();
+            await this.onScrollDown();
+          }, 1000);
         });
     }
   }
diff --git a/src/pages/pika/Index.vue b/src/pages/pika/Index.vue
index 1fc4f45a..84c0cb0d 100644
--- a/src/pages/pika/Index.vue
+++ b/src/pages/pika/Index.vue
@@ -12,7 +12,7 @@
         class="mb-4"
         @refresh="onGetApplication"
       />
-      <recent-panel class="panel recent" />
+      <recent-panel class="panel recent" @reach-top="onReachTop" />
       <!-- <operation-panel class="panel operation" @generate="onGenerate" /> -->
     </template>
   </layout>
@@ -35,6 +35,7 @@ const CALLBACK_URL = 'https://webhook.acedata.cloud/pika';
 interface IData {
   task: IPikaTask | undefined;
   job: number;
+  timer: NodeJS.Timer;
 }
 
 export default defineComponent({
@@ -48,7 +49,9 @@ export default defineComponent({
   data(): IData {
     return {
       task: undefined,
-      job: 0
+      job: 0,
+      // @ts-ignore
+      timer: undefined
     };
   },
   computed: {
@@ -72,6 +75,21 @@ export default defineComponent({
     },
     application() {
       return this.$store.state.pika.application;
+    },
+    tasks() {
+      return this.$store.state.pika.tasks;
+    }
+  },
+  watch: {
+    tasks: {
+      handler(value, oldValue) {
+        // scroll down if new tasks are added
+        if (value?.items?.length > oldValue?.items?.length) {
+          console.debug('new tasks detected');
+          // this.onScrollDown();
+        }
+      },
+      deep: true
     }
   },
   async mounted() {
@@ -79,7 +97,7 @@ export default defineComponent({
     await this.onGetApplication();
     await this.onScrollDown();
     await this.onGetTasks();
-    await this.onScrollDown();
+    // await this.onScrollDown();
     // @ts-ignore
     this.job = setInterval(() => {
       this.onGetTasks();
@@ -87,8 +105,15 @@ export default defineComponent({
   },
   async unmounted() {
     clearInterval(this.job);
+    clearInterval(this.timer);
   },
   methods: {
+    async onReachTop() {
+      console.debug('reached top');
+      await this.onGetTasks({
+        createdAtMax: this.tasks?.items?.[0]?.created_at
+      });
+    },
     async onGetService() {
       console.debug('start onGetService');
       await this.$store.dispatch('pika/getService');
@@ -125,14 +150,18 @@ export default defineComponent({
         }
       }, 500);
     },
-    async onGetTasks() {
+    async onGetTasks(payload?: { limit?: number; createdAtMin?: number; createdAtMax?: number }) {
       if (this.loading) {
         console.debug('loading');
         return;
       }
+      console.debug('start onGetTasks', payload);
+      const { limit = 5, createdAtMin, createdAtMax } = payload || {};
+      console.debug('limit', limit, 'createdAtMin', createdAtMin, 'createdAtMax', createdAtMax);
       await this.$store.dispatch('pika/getTasks', {
-        limit: 30,
-        offset: 0
+        limit,
+        createdAtMin,
+        createdAtMax
       });
     },
     async onGenerateVideo() {
@@ -165,8 +194,10 @@ export default defineComponent({
           }
         })
         .finally(async () => {
-          await this.onGetTasks();
-          await this.onScrollDown();
+          setTimeout(async () => {
+            await this.onGetTasks();
+            await this.onScrollDown();
+          }, 1000);
         });
     }
   }
diff --git a/src/pages/suno/Index.vue b/src/pages/suno/Index.vue
index 9544a17b..a8905c3c 100644
--- a/src/pages/suno/Index.vue
+++ b/src/pages/suno/Index.vue
@@ -149,10 +149,8 @@ export default defineComponent({
       setTimeout(() => {
         // scroll to bottom for `.recent`
         const el = document.querySelector('.recent');
-        console.log('onScrollDown  ', el, el.scrollTop, el.scrollHeight);
         if (el) {
           el.scrollTop = el.scrollHeight;
-          console.log('onScrollDown  ', el.scrollTop, el.scrollHeight);
         }
       }, 1000);
     },
diff --git a/src/store/hailuo/actions.ts b/src/store/hailuo/actions.ts
index 1ede488c..237b5af1 100644
--- a/src/store/hailuo/actions.ts
+++ b/src/store/hailuo/actions.ts
@@ -5,6 +5,7 @@ import { IRootState } from '../common/models';
 import { IApplication, ICredential, IHailuoConfig, IHailuoTask, IService, IApplicationType } from '@/models';
 import { Status } from '@/models/common';
 import { HAILUO_SERVICE_ID } from '@/constants';
+import { mergeAndSortLists } from '@/utils/merge';
 
 export const resetAll = ({ commit }: ActionContext<IHailuoState, IRootState>): void => {
   commit('resetAll');
@@ -113,7 +114,12 @@ export const getService = async ({ commit, state }: ActionContext<IHailuoState,
 
 export const getTasks = async (
   { commit, state, rootState }: ActionContext<IHailuoState, IRootState>,
-  { offset, limit }: { offset?: number; limit?: number }
+  {
+    offset,
+    limit,
+    createdAtMin,
+    createdAtMax
+  }: { offset?: number; limit?: number; createdAtMin?: number; createdAtMax?: number }
 ): Promise<IHailuoTask[]> => {
   return new Promise((resolve, reject) => {
     console.debug('start to get tasks', offset, limit);
@@ -126,6 +132,8 @@ export const getTasks = async (
       .tasks(
         {
           userId: rootState?.user?.id,
+          createdAtMin,
+          createdAtMax,
           type: 'videos'
         },
         {
@@ -133,8 +141,15 @@ export const getTasks = async (
         }
       )
       .then((response) => {
-        console.debug('get imagine tasks success', response.data.items);
-        commit('setTasksItems', response.data.items);
+        console.debug('get videos tasks success', response.data.items);
+        // merge with existing tasks
+        const existingItems = state?.tasks?.items || [];
+        console.debug('existing items', existingItems);
+        const newItems = response.data.items || [];
+        console.debug('new items', newItems);
+        // sort and de-duplicate using created_at
+        const mergedItems = mergeAndSortLists(existingItems, newItems);
+        commit('setTasksItems', mergedItems);
         commit('setTasksTotal', response.data.count);
         resolve(response.data.items);
       })
diff --git a/src/store/hailuo/persist.ts b/src/store/hailuo/persist.ts
index 6d53293f..6618d9b7 100644
--- a/src/store/hailuo/persist.ts
+++ b/src/store/hailuo/persist.ts
@@ -1 +1 @@
-export default ['hailuo.credential', 'hailuo.application', 'hailuo.tasks'];
+export default ['hailuo.credential', 'hailuo.application'];
diff --git a/src/store/pika/actions.ts b/src/store/pika/actions.ts
index 9165c115..5e88414b 100644
--- a/src/store/pika/actions.ts
+++ b/src/store/pika/actions.ts
@@ -5,6 +5,7 @@ import { IRootState } from '../common/models';
 import { IApplication, ICredential, IPikaConfig, IPikaTask, IService, IApplicationType } from '@/models';
 import { Status } from '@/models/common';
 import { PIKA_SERVICE_ID } from '@/constants';
+import { mergeAndSortLists } from '@/utils/merge';
 
 export const resetAll = ({ commit }: ActionContext<IPikaState, IRootState>): void => {
   commit('resetAll');
@@ -113,7 +114,12 @@ export const getService = async ({ commit, state }: ActionContext<IPikaState, IR
 
 export const getTasks = async (
   { commit, state, rootState }: ActionContext<IPikaState, IRootState>,
-  { offset, limit }: { offset?: number; limit?: number }
+  {
+    offset,
+    limit,
+    createdAtMin,
+    createdAtMax
+  }: { offset?: number; limit?: number; createdAtMin?: number; createdAtMax?: number }
 ): Promise<IPikaTask[]> => {
   return new Promise((resolve, reject) => {
     console.debug('start to get tasks', offset, limit);
@@ -126,6 +132,8 @@ export const getTasks = async (
       .tasks(
         {
           userId: rootState?.user?.id,
+          createdAtMin,
+          createdAtMax,
           type: 'videos'
         },
         {
@@ -133,8 +141,15 @@ export const getTasks = async (
         }
       )
       .then((response) => {
-        console.debug('get imagine tasks success', response.data.items);
-        commit('setTasksItems', response.data.items);
+        console.debug('get videos tasks success', response.data.items);
+        // merge with existing tasks
+        const existingItems = state?.tasks?.items || [];
+        console.debug('existing items', existingItems);
+        const newItems = response.data.items || [];
+        console.debug('new items', newItems);
+        // sort and de-duplicate using created_at
+        const mergedItems = mergeAndSortLists(existingItems, newItems);
+        commit('setTasksItems', mergedItems);
         commit('setTasksTotal', response.data.count);
         resolve(response.data.items);
       })
diff --git a/src/store/pika/persist.ts b/src/store/pika/persist.ts
index c86e94bd..e1a05a5a 100644
--- a/src/store/pika/persist.ts
+++ b/src/store/pika/persist.ts
@@ -1 +1 @@
-export default ['pika.credential', 'pika.application', 'pika.tasks'];
+export default ['pika.credential', 'pika.application'];