diff --git a/src/modules/story-event/dto/query-approved-character.dto.ts b/src/modules/story-event/dto/query-approved-character.dto.ts
index 0e630f3..1da2c62 100644
--- a/src/modules/story-event/dto/query-approved-character.dto.ts
+++ b/src/modules/story-event/dto/query-approved-character.dto.ts
@@ -1,6 +1,23 @@
 import { ApiPropertyOptional } from '@nestjs/swagger';
+import { CharacterSortType } from '../story-event.enum';
 
 export class QueryApprovedCharacterParamDto {
   @ApiPropertyOptional()
   user_id: string;
+
+  @ApiPropertyOptional({
+    enum: [
+      CharacterSortType.Created_At_Asc,
+      CharacterSortType.Created_At_Desc,
+      CharacterSortType.User_Collect_Asc,
+      CharacterSortType.User_Collect_Desc,
+    ],
+  })
+  order_by: CharacterSortType;
+
+  @ApiPropertyOptional()
+  limit: number;
+
+  @ApiPropertyOptional()
+  offset: number;
 }
diff --git a/src/modules/story-event/story-event.enum.ts b/src/modules/story-event/story-event.enum.ts
index e3fa754..57ab3bd 100644
--- a/src/modules/story-event/story-event.enum.ts
+++ b/src/modules/story-event/story-event.enum.ts
@@ -13,3 +13,10 @@ export enum SubmissionType {
   Manga = 'manga',
   Artwork = 'artwork',
 }
+
+export enum CharacterSortType {
+  Created_At_Asc = 'Created_At_Asc',
+  Created_At_Desc = 'Created_At_Desc',
+  User_Collect_Asc = 'User_Collect_Asc',
+  User_Collect_Desc = 'User_Collect_Desc',
+}
diff --git a/src/modules/story-event/story-event.graphql.ts b/src/modules/story-event/story-event.graphql.ts
index 0e531d0..07f83c5 100644
--- a/src/modules/story-event/story-event.graphql.ts
+++ b/src/modules/story-event/story-event.graphql.ts
@@ -213,7 +213,7 @@ export class StoryEventGraphql {
     );
   }
 
-  async queryApprovedCharacters(variables: any) {
+  async queryApprovedCharacters(variables: any, orderBy: string[]) {
     const headers = {
       'x-hasura-admin-secret': this.configSvc.get<string>(
         'graphql.adminSecret'
@@ -223,8 +223,15 @@ export class StoryEventGraphql {
     return this.graphqlSvc.query(
       this.configSvc.get<string>('graphql.endpoint'),
       '',
-      `query story_character($user_id: bpchar = "") {
-        story_character(where: {status: {_eq: "Approved"}}, order_by: {is_default_character: desc}) {
+      `query story_character($user_id: bpchar = "", $limit: Int = 10, $offset: Int = 0) {
+        story_character_aggregate(where: {status: {_eq: "Approved"}}) {
+          aggregate {
+            count
+          }
+        }
+        story_character(where: {status: {_eq: "Approved"}}, order_by: {${orderBy.join(
+          ','
+        )}}, limit: $limit, offset: $offset) {
           id
           avatar_url
           descripton_url
diff --git a/src/modules/story-event/story-event.service.ts b/src/modules/story-event/story-event.service.ts
index 4d8602c..f377df8 100644
--- a/src/modules/story-event/story-event.service.ts
+++ b/src/modules/story-event/story-event.service.ts
@@ -19,6 +19,7 @@ import {
   SubmitMangaRequestDto,
 } from './dto/submit-manga.dto';
 import {
+  CharacterSortType,
   StoryCharacterStatus,
   SubmissionStatus,
   SubmissionType,
@@ -395,9 +396,33 @@ export class StoryEventService {
   }
 
   async queryCharacter(data: QueryApprovedCharacterParamDto) {
-    return this.storyEventGraphql.queryApprovedCharacters({
-      user_id: data.user_id,
-    });
+    const { user_id, limit, offset, order_by } = data;
+    const orderBy = ['is_default_character: desc'];
+    switch (order_by) {
+      case CharacterSortType.Created_At_Asc:
+        orderBy.push('created_at: asc');
+        break;
+      case CharacterSortType.Created_At_Desc:
+        orderBy.push('created_at: desc');
+        break;
+      case CharacterSortType.User_Collect_Asc:
+        orderBy.push('user_collect_characters_aggregate: {count: asc}');
+        break;
+      case CharacterSortType.User_Collect_Desc:
+        orderBy.push('user_collect_characters_aggregate: {count: desc}');
+        break;
+      default:
+        break;
+    }
+
+    return this.storyEventGraphql.queryApprovedCharacters(
+      {
+        user_id,
+        limit,
+        offset,
+      },
+      orderBy
+    );
   }
 
   async queryCollectedCharacter() {