diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..c0861c3
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,18 @@
+# Changelog
+
+> logs are top-recent and using `## SEMVER - DD-MM-YY`
+
+## 2.2.0 - 1-12-2024
+
+Happy December. This update changed server schema a bit, but majorly .
+Backend compatibility still back to 1.0
+
+### Changed
+
+- Changed list query schema to `PaginatedQueryField` wagtail format (single one too)
+- Changed pagination format to `page` and `perPage`
+
+### Added
+
+- Added `pagination` info to any list query
+- Added `intro` to `BlogPage` query
diff --git a/README.md b/README.md
index cbc43a4..4ca5f0d 100644
--- a/README.md
+++ b/README.md
@@ -31,14 +31,27 @@ A pretty simple `wagtail` setup for simple kind of JUST BLOGGING, and scaling un
 
 ## Client
 
-### V2
-
-Migrated to GraphQL query system
-
-> [!NOTE]
-> As to avoid redirection that cause performance issue at scale, I won't enable trail-slash redirection. The graphql endpoint would be: `http://host/api/graphql/` (notice the trailing slash)
-
-### V1
-
-> [!IMPORTANT]
-> Deprecated
+Here is the example `listBlog` query
+
+```json
+{
+  "pagination": {
+    "total": 1,
+    "count": 1,
+    "perPage": 10,
+    "currentPage": 1,
+    "prevPage": null,
+    "nextPage": null,
+    "totalPages": 1
+  },
+  "items": [
+    {
+      "id": "3",
+      "slug": "hello-world",
+      "title": "Hello World",
+      "seoTitle": "Hello World",
+      "thumb": null
+    }
+  ]
+}
+```
diff --git a/codegen.ts b/codegen.ts
index 1bcc5bc..1b96396 100644
--- a/codegen.ts
+++ b/codegen.ts
@@ -8,21 +8,24 @@ const config: CodegenConfig = {
     './src/graphql/': {
       preset: 'client',
       presetConfig: {
-        persistedDocuments: true,
+        persistedDocuments: {
+          hashAlgorithm: 'sha1'
+        },
         fragmentMasking: false,
+        avoidOptional: true,
+        enumAsType: true
       },
       config: {
         documentMode: 'string',
         dedupeFragments: true,
-        constEnums: true
       }
     },
-    './src/graphql/schema.graphql': {
-      plugins: ['schema-ast'],
-      config: {
-        includeDirectives: true
-      }
-    }
+    // './src/graphql/schema.graphql': {
+    //   plugins: ['schema-ast'],
+    //   config: {
+    //     includeDirectives: true
+    //   }
+    // }
   }
 }
 
diff --git a/package.json b/package.json
index c791a81..0a1f50b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@team-fuho/wt",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "powered by `wagtail`. awesome!",
   "type": "module",
   "main": "dist/index.js",
diff --git a/src/client.gql b/src/client.gql
index 12b4c07..5754ca9 100644
--- a/src/client.gql
+++ b/src/client.gql
@@ -16,6 +16,7 @@ fragment BlogPageOuterView on BlogPage {
   id
   slug
   title
+  intro
   seoTitle
   thumb {
     ...DefaultImageView
@@ -58,53 +59,71 @@ fragment GalleryOuterView on Picture {
   imageDate
 }
 
+fragment PaginationView on PaginationType {
+  total
+  count
+  perPage
+  currentPage
+  prevPage
+  nextPage
+  totalPages
+}
+
 query GalleryListView {
-  pages(contentType: "gallery.Picture") {
-    ...GalleryOuterView
+  pictures(page: 1, perPage: 10) {
+    items {
+      ...GalleryOuterView
+    }
   }
 }
 
 query GalleryPaginatedListView(
-  $offset: PositiveInt
-  $limit: PositiveInt
+  $page: PositiveInt
+  $perPage: PositiveInt
   $order: String
 ) {
-  pages(
-    contentType: "gallery.Picture"
-    offset: $offset
-    limit: $limit
-    order: $order
-  ) {
-    ...GalleryOuterView
+  pictures(page: $page, perPage: $perPage, order: $order) {
+    items {
+      ...GalleryOuterView
+    }
   }
 }
 
 query BlogListView {
-  pages(contentType: "blog.BlogPage") {
-    ...BlogPageOuterView
+  blogs(page: 1, perPage: 10) {
+    pagination {
+      ...PaginationView
+    }
+    items {
+      ...BlogPageOuterView
+    }
   }
 }
 
-query BlogPaginatedListView($offset: PositiveInt, $limit: PositiveInt, $order: String) {
-  pages(
-    contentType: "blog.BlogPage"
-    offset: $offset
-    limit: $limit
-    order: $order
-  ) {
-    ...BlogPageOuterView
+query BlogPaginatedListView(
+  $page: PositiveInt
+  $perPage: PositiveInt
+  $order: String
+) {
+  blogs(page: $page, perPage: $perPage, order: $order) {
+    pagination {
+      ...PaginationView
+    }
+    items {
+      ...BlogPageOuterView
+    }
   }
 }
 
 query BlogPreviewView($token: String) {
-  page(id: 0, token: $token) {
+  blog(token: $token) {
     ...BlogPageOuterView
     ...BlogPageInnerView
   }
 }
 
 query BlogLiveView($slug: String) {
-  page(slug: $slug) {
+  blog(slug: $slug) {
     ...BlogPageOuterView
     ...BlogPageInnerView
   }
diff --git a/src/graphql/gql.ts b/src/graphql/gql.ts
index 7d0d3f5..378ccfd 100644
--- a/src/graphql/gql.ts
+++ b/src/graphql/gql.ts
@@ -15,13 +15,13 @@ import * as types from './graphql';
  * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
-    "fragment DefaultImageView on TFImage {\n  id\n  url\n  rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) {\n    id\n    url\n    width\n    height\n  }\n  srcSet(sizes: [768, 1080], format: \"webp\")\n  width\n  height\n}\n\nfragment BlogPageOuterView on BlogPage {\n  id\n  slug\n  title\n  seoTitle\n  thumb {\n    ...DefaultImageView\n  }\n}\n\nfragment BlogPageInnerView on BlogPage {\n  body {\n    ... on StreamFieldInterface {\n      blockType\n    }\n    ... on RichTextBlock {\n      value\n    }\n    ... on ImageBlock {\n      caption\n      link\n      alignment\n      image {\n        ...DefaultImageView\n      }\n    }\n    ... on QuoteBlock {\n      quote\n      attribution\n    }\n    ... on HeadingBlock {\n      text\n      importance\n    }\n  }\n}\n\nfragment GalleryOuterView on Picture {\n  id\n  cap\n  image {\n    ...DefaultImageView\n  }\n  imageDate\n}\n\nquery GalleryListView {\n  pages(contentType: \"gallery.Picture\") {\n    ...GalleryOuterView\n  }\n}\n\nquery GalleryPaginatedListView($offset: PositiveInt, $limit: PositiveInt, $order: String) {\n  pages(\n    contentType: \"gallery.Picture\"\n    offset: $offset\n    limit: $limit\n    order: $order\n  ) {\n    ...GalleryOuterView\n  }\n}\n\nquery BlogListView {\n  pages(contentType: \"blog.BlogPage\") {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPaginatedListView($offset: PositiveInt, $limit: PositiveInt, $order: String) {\n  pages(\n    contentType: \"blog.BlogPage\"\n    offset: $offset\n    limit: $limit\n    order: $order\n  ) {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPreviewView($token: String) {\n  page(id: 0, token: $token) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}\n\nquery BlogLiveView($slug: String) {\n  page(slug: $slug) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}": types.DefaultImageViewFragmentDoc,
+    "fragment DefaultImageView on TFImage {\n  id\n  url\n  rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) {\n    id\n    url\n    width\n    height\n  }\n  srcSet(sizes: [768, 1080], format: \"webp\")\n  width\n  height\n}\n\nfragment BlogPageOuterView on BlogPage {\n  id\n  slug\n  title\n  intro\n  seoTitle\n  thumb {\n    ...DefaultImageView\n  }\n}\n\nfragment BlogPageInnerView on BlogPage {\n  body {\n    ... on StreamFieldInterface {\n      blockType\n    }\n    ... on RichTextBlock {\n      value\n    }\n    ... on ImageBlock {\n      caption\n      link\n      alignment\n      image {\n        ...DefaultImageView\n      }\n    }\n    ... on QuoteBlock {\n      quote\n      attribution\n    }\n    ... on HeadingBlock {\n      text\n      importance\n    }\n  }\n}\n\nfragment GalleryOuterView on Picture {\n  id\n  cap\n  image {\n    ...DefaultImageView\n  }\n  imageDate\n}\n\nfragment PaginationView on PaginationType {\n  total\n  count\n  perPage\n  currentPage\n  prevPage\n  nextPage\n  totalPages\n}\n\nquery GalleryListView {\n  pictures(page: 1, perPage: 10) {\n    items {\n      ...GalleryOuterView\n    }\n  }\n}\n\nquery GalleryPaginatedListView($page: PositiveInt, $perPage: PositiveInt, $order: String) {\n  pictures(page: $page, perPage: $perPage, order: $order) {\n    items {\n      ...GalleryOuterView\n    }\n  }\n}\n\nquery BlogListView {\n  blogs(page: 1, perPage: 10) {\n    pagination {\n      ...PaginationView\n    }\n    items {\n      ...BlogPageOuterView\n    }\n  }\n}\n\nquery BlogPaginatedListView($page: PositiveInt, $perPage: PositiveInt, $order: String) {\n  blogs(page: $page, perPage: $perPage, order: $order) {\n    pagination {\n      ...PaginationView\n    }\n    items {\n      ...BlogPageOuterView\n    }\n  }\n}\n\nquery BlogPreviewView($token: String) {\n  blog(token: $token) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}\n\nquery BlogLiveView($slug: String) {\n  blog(slug: $slug) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}": types.DefaultImageViewFragmentDoc,
 };
 
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "fragment DefaultImageView on TFImage {\n  id\n  url\n  rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) {\n    id\n    url\n    width\n    height\n  }\n  srcSet(sizes: [768, 1080], format: \"webp\")\n  width\n  height\n}\n\nfragment BlogPageOuterView on BlogPage {\n  id\n  slug\n  title\n  seoTitle\n  thumb {\n    ...DefaultImageView\n  }\n}\n\nfragment BlogPageInnerView on BlogPage {\n  body {\n    ... on StreamFieldInterface {\n      blockType\n    }\n    ... on RichTextBlock {\n      value\n    }\n    ... on ImageBlock {\n      caption\n      link\n      alignment\n      image {\n        ...DefaultImageView\n      }\n    }\n    ... on QuoteBlock {\n      quote\n      attribution\n    }\n    ... on HeadingBlock {\n      text\n      importance\n    }\n  }\n}\n\nfragment GalleryOuterView on Picture {\n  id\n  cap\n  image {\n    ...DefaultImageView\n  }\n  imageDate\n}\n\nquery GalleryListView {\n  pages(contentType: \"gallery.Picture\") {\n    ...GalleryOuterView\n  }\n}\n\nquery GalleryPaginatedListView($offset: PositiveInt, $limit: PositiveInt, $order: String) {\n  pages(\n    contentType: \"gallery.Picture\"\n    offset: $offset\n    limit: $limit\n    order: $order\n  ) {\n    ...GalleryOuterView\n  }\n}\n\nquery BlogListView {\n  pages(contentType: \"blog.BlogPage\") {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPaginatedListView($offset: PositiveInt, $limit: PositiveInt, $order: String) {\n  pages(\n    contentType: \"blog.BlogPage\"\n    offset: $offset\n    limit: $limit\n    order: $order\n  ) {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPreviewView($token: String) {\n  page(id: 0, token: $token) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}\n\nquery BlogLiveView($slug: String) {\n  page(slug: $slug) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}"): typeof import('./graphql').DefaultImageViewFragmentDoc;
+export function graphql(source: "fragment DefaultImageView on TFImage {\n  id\n  url\n  rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) {\n    id\n    url\n    width\n    height\n  }\n  srcSet(sizes: [768, 1080], format: \"webp\")\n  width\n  height\n}\n\nfragment BlogPageOuterView on BlogPage {\n  id\n  slug\n  title\n  intro\n  seoTitle\n  thumb {\n    ...DefaultImageView\n  }\n}\n\nfragment BlogPageInnerView on BlogPage {\n  body {\n    ... on StreamFieldInterface {\n      blockType\n    }\n    ... on RichTextBlock {\n      value\n    }\n    ... on ImageBlock {\n      caption\n      link\n      alignment\n      image {\n        ...DefaultImageView\n      }\n    }\n    ... on QuoteBlock {\n      quote\n      attribution\n    }\n    ... on HeadingBlock {\n      text\n      importance\n    }\n  }\n}\n\nfragment GalleryOuterView on Picture {\n  id\n  cap\n  image {\n    ...DefaultImageView\n  }\n  imageDate\n}\n\nfragment PaginationView on PaginationType {\n  total\n  count\n  perPage\n  currentPage\n  prevPage\n  nextPage\n  totalPages\n}\n\nquery GalleryListView {\n  pictures(page: 1, perPage: 10) {\n    items {\n      ...GalleryOuterView\n    }\n  }\n}\n\nquery GalleryPaginatedListView($page: PositiveInt, $perPage: PositiveInt, $order: String) {\n  pictures(page: $page, perPage: $perPage, order: $order) {\n    items {\n      ...GalleryOuterView\n    }\n  }\n}\n\nquery BlogListView {\n  blogs(page: 1, perPage: 10) {\n    pagination {\n      ...PaginationView\n    }\n    items {\n      ...BlogPageOuterView\n    }\n  }\n}\n\nquery BlogPaginatedListView($page: PositiveInt, $perPage: PositiveInt, $order: String) {\n  blogs(page: $page, perPage: $perPage, order: $order) {\n    pagination {\n      ...PaginationView\n    }\n    items {\n      ...BlogPageOuterView\n    }\n  }\n}\n\nquery BlogPreviewView($token: String) {\n  blog(token: $token) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}\n\nquery BlogLiveView($slug: String) {\n  blog(slug: $slug) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}"): typeof import('./graphql').DefaultImageViewFragmentDoc;
 
 
 export function graphql(source: string) {
diff --git a/src/graphql/graphql.ts b/src/graphql/graphql.ts
index e76085c..8aae52f 100644
--- a/src/graphql/graphql.ts
+++ b/src/graphql/graphql.ts
@@ -1264,53 +1264,55 @@ export type UrlBlock = StreamFieldInterface & {
 
 export type DefaultImageViewFragment = { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null };
 
-export type BlogPageOuterViewFragment = { __typename?: 'BlogPage', id?: string | null, slug: string, title: string, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null };
+export type BlogPageOuterViewFragment = { __typename?: 'BlogPage', id?: string | null, slug: string, title: string, intro?: string | null, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null };
 
 export type BlogPageInnerViewFragment = { __typename?: 'BlogPage', body?: Array<{ __typename?: 'BlockQuoteBlock', blockType: string } | { __typename?: 'BooleanBlock', blockType: string } | { __typename?: 'CharBlock', blockType: string } | { __typename?: 'ChoiceBlock', blockType: string } | { __typename?: 'DateBlock', blockType: string } | { __typename?: 'DateTimeBlock', blockType: string } | { __typename?: 'DecimalBlock', blockType: string } | { __typename?: 'DocumentChooserBlock', blockType: string } | { __typename?: 'EmailBlock', blockType: string } | { __typename?: 'EmbedBlock', blockType: string } | { __typename?: 'FloatBlock', blockType: string } | { __typename?: 'HeadingBlock', blockType: string, text?: string | null, importance?: string | null } | { __typename?: 'ImageBlock', blockType: string, caption?: string | null, link?: string | null, alignment?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'ImageChooserBlock', blockType: string } | { __typename?: 'IntegerBlock', blockType: string } | { __typename?: 'ListBlock', blockType: string } | { __typename?: 'PageChooserBlock', blockType: string } | { __typename?: 'QuoteBlock', blockType: string, quote?: string | null, attribution?: string | null } | { __typename?: 'RawHTMLBlock', blockType: string } | { __typename?: 'RegexBlock', blockType: string } | { __typename?: 'RichTextBlock', blockType: string, value: string } | { __typename?: 'SnippetChooserBlock', blockType: string } | { __typename?: 'StaticBlock', blockType: string } | { __typename?: 'StreamBlock', blockType: string } | { __typename?: 'StreamFieldBlock', blockType: string } | { __typename?: 'StructBlock', blockType: string } | { __typename?: 'TFStreamBlocks', blockType: string } | { __typename?: 'TextBlock', blockType: string } | { __typename?: 'TimeBlock', blockType: string } | { __typename?: 'URLBlock', blockType: string } | null> | null };
 
 export type GalleryOuterViewFragment = { __typename?: 'Picture', id?: string | null, cap?: string | null, imageDate?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null };
 
+export type PaginationViewFragment = { __typename?: 'PaginationType', total: any, count: any, perPage: any, currentPage: any, prevPage?: any | null, nextPage?: any | null, totalPages: any };
+
 export type GalleryListViewQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GalleryListViewQuery = { __typename?: 'Query', pages: Array<{ __typename?: 'BlogPage' } | { __typename?: 'Page' } | { __typename?: 'Picture', id?: string | null, cap?: string | null, imageDate?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'TFFuncGroup' }> };
+export type GalleryListViewQuery = { __typename?: 'Query', pictures?: { __typename?: 'PicturePaginatedType', items?: Array<{ __typename?: 'Picture', id?: string | null, cap?: string | null, imageDate?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | null> | null } | null };
 
 export type GalleryPaginatedListViewQueryVariables = Exact<{
-  offset?: InputMaybe<Scalars['PositiveInt']['input']>;
-  limit?: InputMaybe<Scalars['PositiveInt']['input']>;
+  page?: InputMaybe<Scalars['PositiveInt']['input']>;
+  perPage?: InputMaybe<Scalars['PositiveInt']['input']>;
   order?: InputMaybe<Scalars['String']['input']>;
 }>;
 
 
-export type GalleryPaginatedListViewQuery = { __typename?: 'Query', pages: Array<{ __typename?: 'BlogPage' } | { __typename?: 'Page' } | { __typename?: 'Picture', id?: string | null, cap?: string | null, imageDate?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'TFFuncGroup' }> };
+export type GalleryPaginatedListViewQuery = { __typename?: 'Query', pictures?: { __typename?: 'PicturePaginatedType', items?: Array<{ __typename?: 'Picture', id?: string | null, cap?: string | null, imageDate?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | null> | null } | null };
 
 export type BlogListViewQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type BlogListViewQuery = { __typename?: 'Query', pages: Array<{ __typename?: 'BlogPage', id?: string | null, slug: string, title: string, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'Page' } | { __typename?: 'Picture' } | { __typename?: 'TFFuncGroup' }> };
+export type BlogListViewQuery = { __typename?: 'Query', blogs?: { __typename?: 'BlogPagePaginatedType', pagination?: { __typename?: 'PaginationType', total: any, count: any, perPage: any, currentPage: any, prevPage?: any | null, nextPage?: any | null, totalPages: any } | null, items?: Array<{ __typename?: 'BlogPage', id?: string | null, slug: string, title: string, intro?: string | null, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | null> | null } | null };
 
 export type BlogPaginatedListViewQueryVariables = Exact<{
-  offset?: InputMaybe<Scalars['PositiveInt']['input']>;
-  limit?: InputMaybe<Scalars['PositiveInt']['input']>;
+  page?: InputMaybe<Scalars['PositiveInt']['input']>;
+  perPage?: InputMaybe<Scalars['PositiveInt']['input']>;
   order?: InputMaybe<Scalars['String']['input']>;
 }>;
 
 
-export type BlogPaginatedListViewQuery = { __typename?: 'Query', pages: Array<{ __typename?: 'BlogPage', id?: string | null, slug: string, title: string, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'Page' } | { __typename?: 'Picture' } | { __typename?: 'TFFuncGroup' }> };
+export type BlogPaginatedListViewQuery = { __typename?: 'Query', blogs?: { __typename?: 'BlogPagePaginatedType', pagination?: { __typename?: 'PaginationType', total: any, count: any, perPage: any, currentPage: any, prevPage?: any | null, nextPage?: any | null, totalPages: any } | null, items?: Array<{ __typename?: 'BlogPage', id?: string | null, slug: string, title: string, intro?: string | null, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | null> | null } | null };
 
 export type BlogPreviewViewQueryVariables = Exact<{
   token?: InputMaybe<Scalars['String']['input']>;
 }>;
 
 
-export type BlogPreviewViewQuery = { __typename?: 'Query', page?: { __typename?: 'BlogPage', id?: string | null, slug: string, title: string, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null, body?: Array<{ __typename?: 'BlockQuoteBlock', blockType: string } | { __typename?: 'BooleanBlock', blockType: string } | { __typename?: 'CharBlock', blockType: string } | { __typename?: 'ChoiceBlock', blockType: string } | { __typename?: 'DateBlock', blockType: string } | { __typename?: 'DateTimeBlock', blockType: string } | { __typename?: 'DecimalBlock', blockType: string } | { __typename?: 'DocumentChooserBlock', blockType: string } | { __typename?: 'EmailBlock', blockType: string } | { __typename?: 'EmbedBlock', blockType: string } | { __typename?: 'FloatBlock', blockType: string } | { __typename?: 'HeadingBlock', blockType: string, text?: string | null, importance?: string | null } | { __typename?: 'ImageBlock', blockType: string, caption?: string | null, link?: string | null, alignment?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'ImageChooserBlock', blockType: string } | { __typename?: 'IntegerBlock', blockType: string } | { __typename?: 'ListBlock', blockType: string } | { __typename?: 'PageChooserBlock', blockType: string } | { __typename?: 'QuoteBlock', blockType: string, quote?: string | null, attribution?: string | null } | { __typename?: 'RawHTMLBlock', blockType: string } | { __typename?: 'RegexBlock', blockType: string } | { __typename?: 'RichTextBlock', blockType: string, value: string } | { __typename?: 'SnippetChooserBlock', blockType: string } | { __typename?: 'StaticBlock', blockType: string } | { __typename?: 'StreamBlock', blockType: string } | { __typename?: 'StreamFieldBlock', blockType: string } | { __typename?: 'StructBlock', blockType: string } | { __typename?: 'TFStreamBlocks', blockType: string } | { __typename?: 'TextBlock', blockType: string } | { __typename?: 'TimeBlock', blockType: string } | { __typename?: 'URLBlock', blockType: string } | null> | null } | { __typename?: 'Page' } | { __typename?: 'Picture' } | { __typename?: 'TFFuncGroup' } | null };
+export type BlogPreviewViewQuery = { __typename?: 'Query', blog?: { __typename?: 'BlogPage', id?: string | null, slug: string, title: string, intro?: string | null, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null, body?: Array<{ __typename?: 'BlockQuoteBlock', blockType: string } | { __typename?: 'BooleanBlock', blockType: string } | { __typename?: 'CharBlock', blockType: string } | { __typename?: 'ChoiceBlock', blockType: string } | { __typename?: 'DateBlock', blockType: string } | { __typename?: 'DateTimeBlock', blockType: string } | { __typename?: 'DecimalBlock', blockType: string } | { __typename?: 'DocumentChooserBlock', blockType: string } | { __typename?: 'EmailBlock', blockType: string } | { __typename?: 'EmbedBlock', blockType: string } | { __typename?: 'FloatBlock', blockType: string } | { __typename?: 'HeadingBlock', blockType: string, text?: string | null, importance?: string | null } | { __typename?: 'ImageBlock', blockType: string, caption?: string | null, link?: string | null, alignment?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'ImageChooserBlock', blockType: string } | { __typename?: 'IntegerBlock', blockType: string } | { __typename?: 'ListBlock', blockType: string } | { __typename?: 'PageChooserBlock', blockType: string } | { __typename?: 'QuoteBlock', blockType: string, quote?: string | null, attribution?: string | null } | { __typename?: 'RawHTMLBlock', blockType: string } | { __typename?: 'RegexBlock', blockType: string } | { __typename?: 'RichTextBlock', blockType: string, value: string } | { __typename?: 'SnippetChooserBlock', blockType: string } | { __typename?: 'StaticBlock', blockType: string } | { __typename?: 'StreamBlock', blockType: string } | { __typename?: 'StreamFieldBlock', blockType: string } | { __typename?: 'StructBlock', blockType: string } | { __typename?: 'TFStreamBlocks', blockType: string } | { __typename?: 'TextBlock', blockType: string } | { __typename?: 'TimeBlock', blockType: string } | { __typename?: 'URLBlock', blockType: string } | null> | null } | null };
 
 export type BlogLiveViewQueryVariables = Exact<{
   slug?: InputMaybe<Scalars['String']['input']>;
 }>;
 
 
-export type BlogLiveViewQuery = { __typename?: 'Query', page?: { __typename?: 'BlogPage', id?: string | null, slug: string, title: string, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null, body?: Array<{ __typename?: 'BlockQuoteBlock', blockType: string } | { __typename?: 'BooleanBlock', blockType: string } | { __typename?: 'CharBlock', blockType: string } | { __typename?: 'ChoiceBlock', blockType: string } | { __typename?: 'DateBlock', blockType: string } | { __typename?: 'DateTimeBlock', blockType: string } | { __typename?: 'DecimalBlock', blockType: string } | { __typename?: 'DocumentChooserBlock', blockType: string } | { __typename?: 'EmailBlock', blockType: string } | { __typename?: 'EmbedBlock', blockType: string } | { __typename?: 'FloatBlock', blockType: string } | { __typename?: 'HeadingBlock', blockType: string, text?: string | null, importance?: string | null } | { __typename?: 'ImageBlock', blockType: string, caption?: string | null, link?: string | null, alignment?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'ImageChooserBlock', blockType: string } | { __typename?: 'IntegerBlock', blockType: string } | { __typename?: 'ListBlock', blockType: string } | { __typename?: 'PageChooserBlock', blockType: string } | { __typename?: 'QuoteBlock', blockType: string, quote?: string | null, attribution?: string | null } | { __typename?: 'RawHTMLBlock', blockType: string } | { __typename?: 'RegexBlock', blockType: string } | { __typename?: 'RichTextBlock', blockType: string, value: string } | { __typename?: 'SnippetChooserBlock', blockType: string } | { __typename?: 'StaticBlock', blockType: string } | { __typename?: 'StreamBlock', blockType: string } | { __typename?: 'StreamFieldBlock', blockType: string } | { __typename?: 'StructBlock', blockType: string } | { __typename?: 'TFStreamBlocks', blockType: string } | { __typename?: 'TextBlock', blockType: string } | { __typename?: 'TimeBlock', blockType: string } | { __typename?: 'URLBlock', blockType: string } | null> | null } | { __typename?: 'Page' } | { __typename?: 'Picture' } | { __typename?: 'TFFuncGroup' } | null };
+export type BlogLiveViewQuery = { __typename?: 'Query', blog?: { __typename?: 'BlogPage', id?: string | null, slug: string, title: string, intro?: string | null, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null, body?: Array<{ __typename?: 'BlockQuoteBlock', blockType: string } | { __typename?: 'BooleanBlock', blockType: string } | { __typename?: 'CharBlock', blockType: string } | { __typename?: 'ChoiceBlock', blockType: string } | { __typename?: 'DateBlock', blockType: string } | { __typename?: 'DateTimeBlock', blockType: string } | { __typename?: 'DecimalBlock', blockType: string } | { __typename?: 'DocumentChooserBlock', blockType: string } | { __typename?: 'EmailBlock', blockType: string } | { __typename?: 'EmbedBlock', blockType: string } | { __typename?: 'FloatBlock', blockType: string } | { __typename?: 'HeadingBlock', blockType: string, text?: string | null, importance?: string | null } | { __typename?: 'ImageBlock', blockType: string, caption?: string | null, link?: string | null, alignment?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'ImageChooserBlock', blockType: string } | { __typename?: 'IntegerBlock', blockType: string } | { __typename?: 'ListBlock', blockType: string } | { __typename?: 'PageChooserBlock', blockType: string } | { __typename?: 'QuoteBlock', blockType: string, quote?: string | null, attribution?: string | null } | { __typename?: 'RawHTMLBlock', blockType: string } | { __typename?: 'RegexBlock', blockType: string } | { __typename?: 'RichTextBlock', blockType: string, value: string } | { __typename?: 'SnippetChooserBlock', blockType: string } | { __typename?: 'StaticBlock', blockType: string } | { __typename?: 'StreamBlock', blockType: string } | { __typename?: 'StreamFieldBlock', blockType: string } | { __typename?: 'StructBlock', blockType: string } | { __typename?: 'TFStreamBlocks', blockType: string } | { __typename?: 'TextBlock', blockType: string } | { __typename?: 'TimeBlock', blockType: string } | { __typename?: 'URLBlock', blockType: string } | null> | null } | null };
 
 export class TypedDocumentString<TResult, TVariables>
   extends String
@@ -1346,6 +1348,7 @@ export const BlogPageOuterViewFragmentDoc = new TypedDocumentString(`
   id
   slug
   title
+  intro
   seoTitle
   thumb {
     ...DefaultImageView
@@ -1426,10 +1429,23 @@ export const GalleryOuterViewFragmentDoc = new TypedDocumentString(`
   width
   height
 }`, {"fragmentName":"GalleryOuterView"}) as unknown as TypedDocumentString<GalleryOuterViewFragment, unknown>;
+export const PaginationViewFragmentDoc = new TypedDocumentString(`
+    fragment PaginationView on PaginationType {
+  total
+  count
+  perPage
+  currentPage
+  prevPage
+  nextPage
+  totalPages
+}
+    `, {"fragmentName":"PaginationView"}) as unknown as TypedDocumentString<PaginationViewFragment, unknown>;
 export const GalleryListViewDocument = new TypedDocumentString(`
     query GalleryListView {
-  pages(contentType: "gallery.Picture") {
-    ...GalleryOuterView
+  pictures(page: 1, perPage: 10) {
+    items {
+      ...GalleryOuterView
+    }
   }
 }
     fragment DefaultImageView on TFImage {
@@ -1452,16 +1468,13 @@ fragment GalleryOuterView on Picture {
     ...DefaultImageView
   }
   imageDate
-}`, {"hash":"bc73a1301295701b7bb12544d5a516c075d827bc"}) as unknown as TypedDocumentString<GalleryListViewQuery, GalleryListViewQueryVariables>;
+}`, {"hash":"c883aba22b509293b2e6b458e84bd51f0bd3eac2"}) as unknown as TypedDocumentString<GalleryListViewQuery, GalleryListViewQueryVariables>;
 export const GalleryPaginatedListViewDocument = new TypedDocumentString(`
-    query GalleryPaginatedListView($offset: PositiveInt, $limit: PositiveInt, $order: String) {
-  pages(
-    contentType: "gallery.Picture"
-    offset: $offset
-    limit: $limit
-    order: $order
-  ) {
-    ...GalleryOuterView
+    query GalleryPaginatedListView($page: PositiveInt, $perPage: PositiveInt, $order: String) {
+  pictures(page: $page, perPage: $perPage, order: $order) {
+    items {
+      ...GalleryOuterView
+    }
   }
 }
     fragment DefaultImageView on TFImage {
@@ -1484,11 +1497,16 @@ fragment GalleryOuterView on Picture {
     ...DefaultImageView
   }
   imageDate
-}`, {"hash":"263a1a0d428bf9f7b4341fcb405542b77c7f7765"}) as unknown as TypedDocumentString<GalleryPaginatedListViewQuery, GalleryPaginatedListViewQueryVariables>;
+}`, {"hash":"20af1500d74e7b94cd7d6301185e5e90a471e80f"}) as unknown as TypedDocumentString<GalleryPaginatedListViewQuery, GalleryPaginatedListViewQueryVariables>;
 export const BlogListViewDocument = new TypedDocumentString(`
     query BlogListView {
-  pages(contentType: "blog.BlogPage") {
-    ...BlogPageOuterView
+  blogs(page: 1, perPage: 10) {
+    pagination {
+      ...PaginationView
+    }
+    items {
+      ...BlogPageOuterView
+    }
   }
 }
     fragment DefaultImageView on TFImage {
@@ -1508,20 +1526,30 @@ fragment BlogPageOuterView on BlogPage {
   id
   slug
   title
+  intro
   seoTitle
   thumb {
     ...DefaultImageView
   }
-}`, {"hash":"e1c027ed6403289772d00fc4ab20cbb715d56dd8"}) as unknown as TypedDocumentString<BlogListViewQuery, BlogListViewQueryVariables>;
+}
+fragment PaginationView on PaginationType {
+  total
+  count
+  perPage
+  currentPage
+  prevPage
+  nextPage
+  totalPages
+}`, {"hash":"9910c3ca7c6fab537a6000158b58d114535c6b2c"}) as unknown as TypedDocumentString<BlogListViewQuery, BlogListViewQueryVariables>;
 export const BlogPaginatedListViewDocument = new TypedDocumentString(`
-    query BlogPaginatedListView($offset: PositiveInt, $limit: PositiveInt, $order: String) {
-  pages(
-    contentType: "blog.BlogPage"
-    offset: $offset
-    limit: $limit
-    order: $order
-  ) {
-    ...BlogPageOuterView
+    query BlogPaginatedListView($page: PositiveInt, $perPage: PositiveInt, $order: String) {
+  blogs(page: $page, perPage: $perPage, order: $order) {
+    pagination {
+      ...PaginationView
+    }
+    items {
+      ...BlogPageOuterView
+    }
   }
 }
     fragment DefaultImageView on TFImage {
@@ -1541,14 +1569,24 @@ fragment BlogPageOuterView on BlogPage {
   id
   slug
   title
+  intro
   seoTitle
   thumb {
     ...DefaultImageView
   }
-}`, {"hash":"3335902d4991e2a90f463cad36363e644ad5c2d6"}) as unknown as TypedDocumentString<BlogPaginatedListViewQuery, BlogPaginatedListViewQueryVariables>;
+}
+fragment PaginationView on PaginationType {
+  total
+  count
+  perPage
+  currentPage
+  prevPage
+  nextPage
+  totalPages
+}`, {"hash":"381ef6d2797bdc5cd3ef42be903235b74241c363"}) as unknown as TypedDocumentString<BlogPaginatedListViewQuery, BlogPaginatedListViewQueryVariables>;
 export const BlogPreviewViewDocument = new TypedDocumentString(`
     query BlogPreviewView($token: String) {
-  page(id: 0, token: $token) {
+  blog(token: $token) {
     ...BlogPageOuterView
     ...BlogPageInnerView
   }
@@ -1570,6 +1608,7 @@ fragment BlogPageOuterView on BlogPage {
   id
   slug
   title
+  intro
   seoTitle
   thumb {
     ...DefaultImageView
@@ -1600,10 +1639,10 @@ fragment BlogPageInnerView on BlogPage {
       importance
     }
   }
-}`, {"hash":"3b58296f25c4263c58bc4877c22469d789da26d6"}) as unknown as TypedDocumentString<BlogPreviewViewQuery, BlogPreviewViewQueryVariables>;
+}`, {"hash":"11f4e491f000aa421dba376b409f8b01f02754e0"}) as unknown as TypedDocumentString<BlogPreviewViewQuery, BlogPreviewViewQueryVariables>;
 export const BlogLiveViewDocument = new TypedDocumentString(`
     query BlogLiveView($slug: String) {
-  page(slug: $slug) {
+  blog(slug: $slug) {
     ...BlogPageOuterView
     ...BlogPageInnerView
   }
@@ -1625,6 +1664,7 @@ fragment BlogPageOuterView on BlogPage {
   id
   slug
   title
+  intro
   seoTitle
   thumb {
     ...DefaultImageView
@@ -1655,4 +1695,4 @@ fragment BlogPageInnerView on BlogPage {
       importance
     }
   }
-}`, {"hash":"1ef7624b0c89de8f5c7007e299ef6b4e9f1ebb13"}) as unknown as TypedDocumentString<BlogLiveViewQuery, BlogLiveViewQueryVariables>;
\ No newline at end of file
+}`, {"hash":"d29eaa87b95b75ce4980d3c2d0195ee24a46d0dd"}) as unknown as TypedDocumentString<BlogLiveViewQuery, BlogLiveViewQueryVariables>;
\ No newline at end of file
diff --git a/src/graphql/persisted-documents.json b/src/graphql/persisted-documents.json
index 0eb9eec..ed1967a 100644
--- a/src/graphql/persisted-documents.json
+++ b/src/graphql/persisted-documents.json
@@ -1,8 +1,8 @@
 {
-  "bc73a1301295701b7bb12544d5a516c075d827bc": "fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } fragment GalleryOuterView on Picture { cap id image { ...DefaultImageView } imageDate } query GalleryListView { pages(contentType: \"gallery.Picture\") { ...GalleryOuterView } }",
-  "263a1a0d428bf9f7b4341fcb405542b77c7f7765": "fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } fragment GalleryOuterView on Picture { cap id image { ...DefaultImageView } imageDate } query GalleryPaginatedListView($limit: PositiveInt, $offset: PositiveInt, $order: String) { pages( contentType: \"gallery.Picture\" offset: $offset limit: $limit order: $order ) { ...GalleryOuterView } }",
-  "e1c027ed6403289772d00fc4ab20cbb715d56dd8": "fragment BlogPageOuterView on BlogPage { id seoTitle slug thumb { ...DefaultImageView } title } fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } query BlogListView { pages(contentType: \"blog.BlogPage\") { ...BlogPageOuterView } }",
-  "3335902d4991e2a90f463cad36363e644ad5c2d6": "fragment BlogPageOuterView on BlogPage { id seoTitle slug thumb { ...DefaultImageView } title } fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } query BlogPaginatedListView($limit: PositiveInt, $offset: PositiveInt, $order: String) { pages( contentType: \"blog.BlogPage\" offset: $offset limit: $limit order: $order ) { ...BlogPageOuterView } }",
-  "3b58296f25c4263c58bc4877c22469d789da26d6": "fragment BlogPageInnerView on BlogPage { body { ... on HeadingBlock { importance text } ... on ImageBlock { alignment caption image { ...DefaultImageView } link } ... on QuoteBlock { attribution quote } ... on RichTextBlock { value } ... on StreamFieldInterface { blockType } } } fragment BlogPageOuterView on BlogPage { id seoTitle slug thumb { ...DefaultImageView } title } fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } query BlogPreviewView($token: String) { page(id: 0, token: $token) { ...BlogPageInnerView ...BlogPageOuterView } }",
-  "1ef7624b0c89de8f5c7007e299ef6b4e9f1ebb13": "fragment BlogPageInnerView on BlogPage { body { ... on HeadingBlock { importance text } ... on ImageBlock { alignment caption image { ...DefaultImageView } link } ... on QuoteBlock { attribution quote } ... on RichTextBlock { value } ... on StreamFieldInterface { blockType } } } fragment BlogPageOuterView on BlogPage { id seoTitle slug thumb { ...DefaultImageView } title } fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } query BlogLiveView($slug: String) { page(slug: $slug) { ...BlogPageInnerView ...BlogPageOuterView } }"
+  "c883aba22b509293b2e6b458e84bd51f0bd3eac2": "fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } fragment GalleryOuterView on Picture { cap id image { ...DefaultImageView } imageDate } query GalleryListView { pictures(page: 1, perPage: 10) { items { ...GalleryOuterView } } }",
+  "20af1500d74e7b94cd7d6301185e5e90a471e80f": "fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } fragment GalleryOuterView on Picture { cap id image { ...DefaultImageView } imageDate } query GalleryPaginatedListView($order: String, $page: PositiveInt, $perPage: PositiveInt) { pictures(page: $page, perPage: $perPage, order: $order) { items { ...GalleryOuterView } } }",
+  "9910c3ca7c6fab537a6000158b58d114535c6b2c": "fragment BlogPageOuterView on BlogPage { id intro seoTitle slug thumb { ...DefaultImageView } title } fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } fragment PaginationView on PaginationType { count currentPage nextPage perPage prevPage total totalPages } query BlogListView { blogs(page: 1, perPage: 10) { items { ...BlogPageOuterView } pagination { ...PaginationView } } }",
+  "381ef6d2797bdc5cd3ef42be903235b74241c363": "fragment BlogPageOuterView on BlogPage { id intro seoTitle slug thumb { ...DefaultImageView } title } fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } fragment PaginationView on PaginationType { count currentPage nextPage perPage prevPage total totalPages } query BlogPaginatedListView($order: String, $page: PositiveInt, $perPage: PositiveInt) { blogs(page: $page, perPage: $perPage, order: $order) { items { ...BlogPageOuterView } pagination { ...PaginationView } } }",
+  "11f4e491f000aa421dba376b409f8b01f02754e0": "fragment BlogPageInnerView on BlogPage { body { ... on HeadingBlock { importance text } ... on ImageBlock { alignment caption image { ...DefaultImageView } link } ... on QuoteBlock { attribution quote } ... on RichTextBlock { value } ... on StreamFieldInterface { blockType } } } fragment BlogPageOuterView on BlogPage { id intro seoTitle slug thumb { ...DefaultImageView } title } fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } query BlogPreviewView($token: String) { blog(token: $token) { ...BlogPageInnerView ...BlogPageOuterView } }",
+  "d29eaa87b95b75ce4980d3c2d0195ee24a46d0dd": "fragment BlogPageInnerView on BlogPage { body { ... on HeadingBlock { importance text } ... on ImageBlock { alignment caption image { ...DefaultImageView } link } ... on QuoteBlock { attribution quote } ... on RichTextBlock { value } ... on StreamFieldInterface { blockType } } } fragment BlogPageOuterView on BlogPage { id intro seoTitle slug thumb { ...DefaultImageView } title } fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } query BlogLiveView($slug: String) { blog(slug: $slug) { ...BlogPageInnerView ...BlogPageOuterView } }"
 }
\ No newline at end of file
diff --git a/src/index.spec.ts b/src/index.spec.ts
index 1fc4abc..bdf7ee8 100644
--- a/src/index.spec.ts
+++ b/src/index.spec.ts
@@ -31,4 +31,6 @@ async function exampleUsage() {
   }
 }
 
-console.log(await exampleUsage(), null, 5)
+const data = await exampleUsage()
+
+console.log(data, null, 5)
diff --git a/src/index.ts b/src/index.ts
index c1881cc..830de01 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,6 +8,8 @@ import {
   type TypedDocumentString
 } from './graphql/graphql'
 
+// import persisted from './graphql/persisted-documents.json'
+
 export interface GraphQLClientConfig {
   endpoint: string
   headers?: Record<string, string>
@@ -18,6 +20,8 @@ async function execute<TResult, TVariables>(
   query: TypedDocumentString<TResult, TVariables>,
   ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
 ): Promise<TResult> {
+  const hash = query.__meta__?.hash
+
   const response = await fetch(config.endpoint, {
     method: 'POST',
     headers: {
@@ -26,9 +30,10 @@ async function execute<TResult, TVariables>(
       ...config.headers
     },
     body: JSON.stringify({
+      // query: persisted[hash],
       query: query.trim(),
       variables: variables || {},
-      hash: query.__meta__?.hash
+      hash: hash
     })
   })
 
@@ -42,9 +47,7 @@ async function execute<TResult, TVariables>(
 
   if (!response || !responseObject.data) {
     console.log(responseObject)
-    throw new Error(
-      'WTClientRequestError: Malformed JSON data'
-    )
+    throw new Error('WTClientRequestError: Malformed JSON data')
   }
 
   return responseObject.data as TResult
@@ -60,27 +63,31 @@ export default class WTClient {
   /**
    * List all gallery image
    */
-  async listPictures(offset?: number, limit?: number, order?: string) {
-    return offset && limit
-      ? execute(this.config, GalleryPaginatedListViewDocument, {
-        offset,
-        limit,
-        order: order || "id"
-      })
-      : execute(this.config, GalleryListViewDocument)
+  async listPictures(page?: number, perPage?: number, order?: string) {
+    return (
+      await (page && perPage
+        ? execute(this.config, GalleryPaginatedListViewDocument, {
+          page: page,
+          perPage: perPage,
+          order: order || '-id'
+        })
+        : execute(this.config, GalleryListViewDocument))
+    ).pictures
   }
 
   /**
    * List all blog page
    */
-  async listBlogs(offset?: number, limit?: number, order?: string) {
-    return offset && limit
-      ? execute(this.config, BlogPaginatedListViewDocument, {
-        offset,
-        limit,
-        order: order || "id"
-      })
-      : execute(this.config, BlogListViewDocument)
+  async listBlogs(page?: number, perPage?: number, order?: string) {
+    return (
+      await (page && perPage
+        ? execute(this.config, BlogPaginatedListViewDocument, {
+          page: page,
+          perPage: perPage,
+          order: order || '-id'
+        })
+        : execute(this.config, BlogListViewDocument))
+    ).blogs
   }
 
   /**
@@ -88,17 +95,19 @@ export default class WTClient {
    * @param token urlparsed token query (added by wagtail addon)
    */
   async getBlogPreview(token: string) {
-    return execute(
-      {
-        ...this.config,
-        headers: {
-          ...this.config.headers,
-          Authorization: `Bearer ${token}`
-        }
-      },
-      BlogPreviewViewDocument,
-      { token }
-    )
+    return (
+      await execute(
+        {
+          ...this.config,
+          headers: {
+            ...this.config.headers,
+            Authorization: `Bearer ${token}`
+          }
+        },
+        BlogPreviewViewDocument,
+        { token }
+      )
+    ).blog
   }
 
   /**
@@ -106,6 +115,6 @@ export default class WTClient {
    * @param slug
    */
   async getBlogBySlug(slug: string) {
-    return execute(this.config, BlogLiveViewDocument, { slug })
+    return (await execute(this.config, BlogLiveViewDocument, { slug })).blog
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 505732d..63d5a76 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,7 +11,9 @@
         "name": "@0no-co/graphqlsp",
         "schema": "./src/graphql/schema.graphql"
       }
-    ]
+    ],
+    "resolveJsonModule": true,
+    "esModuleInterop": true
   },
   "include": ["src/**/*"],
   "exclude": ["**/*.spec.ts", "dist/**/*", "**/*.legacy.*"]