diff --git a/framework/commerce/api/operations.ts b/framework/commerce/api/operations.ts
index ca9b325c2..efbbce35d 100644
--- a/framework/commerce/api/operations.ts
+++ b/framework/commerce/api/operations.ts
@@ -9,6 +9,10 @@ import type {
   GetAllProductsOperation,
   GetProductOperation,
 } from '../types/product'
+import type {
+  GetAllBlogsOperation,
+  GetFeaturedBlogsOperation
+} from '../types/blogs'
 import type { APIProvider, CommerceAPI } from '.'
 import { GetAllCollectionsOperation } from '@commerce/types/collection';
 
@@ -27,7 +31,8 @@ export const OPERATIONS = [
   'getProduct',
   'getAllFacets',
   'getAllCollections',
-
+  'getAllBlogs',
+  'getFeaturedBlog'
 ] as const
 
 export const defaultOperations = OPERATIONS.reduce((ops, k) => {
@@ -144,6 +149,41 @@ export type Operations<P extends APIProvider> = {
     ): Promise<T['data']>
   }
 
+
+  getAllBlogs: {
+    <T extends GetAllBlogsOperation>(opts: {
+      variables?: T['variables']
+      config?: P['config']
+      preview?: boolean
+    }): Promise<T['data']>
+
+    <T extends GetAllBlogsOperation>(
+      opts: {
+        variables?: T['variables']
+        config?: P['config']
+        preview?: boolean
+      } & OperationOptions
+    ): Promise<T['data']>
+  }
+
+  getFeaturedBlog: {
+    <T extends GetFeaturedBlogsOperation>(opts: {
+      variables?: T['variables']
+      config?: P['config']
+      preview?: boolean
+    }): Promise<T['data']>
+
+    <T extends GetFeaturedBlogsOperation>(
+      opts: {
+        variables?: T['variables']
+        config?: P['config']
+        preview?: boolean
+      } & OperationOptions
+    ): Promise<T['data']>
+  }
+
+
+
   getProduct: {
     <T extends GetProductOperation>(opts: {
       variables: T['variables']
diff --git a/framework/commerce/types/blogs.ts b/framework/commerce/types/blogs.ts
new file mode 100644
index 000000000..fcdca972d
--- /dev/null
+++ b/framework/commerce/types/blogs.ts
@@ -0,0 +1,31 @@
+import { Asset, BlogTranslation, Maybe, Product } from './../../vendure/schema.d';
+
+export type BlogList = Node &{
+    id: string
+    featuredAsset?: Maybe<Asset>
+    isPublic:Boolean
+    translations: BlogTranslation[]
+    authorName: string
+    authorAvatarAsset:Asset[]
+    relevantProducts: Product
+}
+export type BlogsType = {
+    items: BlogList
+    totalItems: number
+}
+export type GetAllBlogsOperation<T extends BlogsType = BlogsType> = {
+    data: { items: T['items'][] }
+    variables: {
+        take?: number
+        skip?: number
+    }
+}
+
+  
+export type GetFeaturedBlogsOperation<T extends BlogsType = BlogsType> = {
+    data: { items: T['items'][] }
+    variables: {
+        take?: number
+        skip?: number
+    }
+}
\ No newline at end of file
diff --git a/framework/vendure/api/index.ts b/framework/vendure/api/index.ts
index 95ec47d66..edf67d14f 100644
--- a/framework/vendure/api/index.ts
+++ b/framework/vendure/api/index.ts
@@ -11,7 +11,8 @@ import getProduct from './operations/get-product'
 import getSiteInfo from './operations/get-site-info'
 import login from './operations/login'
 import fetchGraphqlApi from './utils/fetch-graphql-api'
-
+import getAllBlogs from './operations/get-all-blogs'
+import getFeaturedBlog from './operations/get-featured-blog'
 
 export interface VendureConfig extends CommerceAPIConfig {}
 
@@ -44,6 +45,8 @@ const operations = {
   getProduct,
   getAllFacets,
   getAllCollections,
+  getAllBlogs,
+  getFeaturedBlog
 }
 
 export const provider = { config, operations }
diff --git a/framework/vendure/api/operations/get-all-blogs.ts b/framework/vendure/api/operations/get-all-blogs.ts
new file mode 100644
index 000000000..d3998aa59
--- /dev/null
+++ b/framework/vendure/api/operations/get-all-blogs.ts
@@ -0,0 +1,61 @@
+import { OperationContext } from '@commerce/api/operations'
+import { Provider, VendureConfig } from '..'
+import { GetAllBlogsQuery,BlogList } from '../../schema'
+import { getAllBlogsQuery } from '../../utils/queries/get-all-blog-query'
+
+export type BlogVariables = {
+  excludeBlogIds?: string[],
+  take?: number,
+  skip?:number
+}
+
+export default function getAllBlogsOperation({
+  commerce,
+}: OperationContext<Provider>) {
+  async function getAllBlogs(opts?: {
+    variables?: BlogVariables
+    config?: Partial<VendureConfig>
+    preview?: boolean
+  }): Promise<{ blogs: GetAllBlogsQuery[],totalItems:number }>
+
+  async function getAllBlogs({
+    query = getAllBlogsQuery,
+    variables: { ...vars } = {},
+    config: cfg,
+  }: {
+    query?: string
+    variables?: BlogVariables
+    config?: Partial<VendureConfig>
+    preview?: boolean
+  } = {}): Promise<{ blogs: GetAllBlogsQuery[] | any[] ,totalItems?:number }> {
+    
+    const config = commerce.getConfig(cfg)
+    const variables = {
+      excludeBlogIds: vars.excludeBlogIds,
+      options: {
+        take: vars.take,
+        skip: vars.skip,
+      },
+    }
+    const { data } = await config.fetch<GetAllBlogsQuery>(query, {
+      variables,
+    })
+    return {
+        blogs: data?.blogs?.items?.map((val:BlogList)=>({
+            id: val.id,
+            title: val.translations[0]?.title,
+            imageSrc: val.featuredAsset?.preview ?? null,
+            slug: val.translations[0]?.slug,
+            description: val.translations[0]?.description,
+            isPublish: val.isPublish,
+            isFeatured: val.isFeatured,
+            authorName: val.authorName,
+            authorAvatarAsset : val.authorAvatarAsset?.preview,
+            createdAt: val.createdAt
+        })),
+        totalItems: data?.blogs?.totalItems || null
+    }
+  }
+
+  return getAllBlogs
+}
diff --git a/framework/vendure/api/operations/get-featured-blog.ts b/framework/vendure/api/operations/get-featured-blog.ts
new file mode 100644
index 000000000..727db46ed
--- /dev/null
+++ b/framework/vendure/api/operations/get-featured-blog.ts
@@ -0,0 +1,56 @@
+import { OperationContext } from '@commerce/api/operations'
+import { Provider, VendureConfig } from '..'
+import { GetFeaturedBlogQuery,BlogList } from '../../schema'
+import { getFeatuedBlogsQuery } from '../../utils/queries/get-featued-query'
+
+export type BlogVariables = {
+  take?: number,
+  skip?:number
+}
+
+export default function getFeaturedBlogOperation({
+  commerce,
+}: OperationContext<Provider>) {
+  async function getFeaturedBlog(opts?: {
+    variables?: BlogVariables
+    config?: Partial<VendureConfig>
+    preview?: boolean
+  }): Promise<{ featuredBlogs: GetFeaturedBlogQuery[],totalItems:number }>
+
+  async function getFeaturedBlog({
+    query = getFeatuedBlogsQuery,
+    variables: { ...vars } = {},
+    config: cfg,
+  }: {
+    query?: string
+    variables?: BlogVariables
+    config?: Partial<VendureConfig>
+    preview?: boolean
+  } = {}): Promise<{ featuredBlogs: GetFeaturedBlogQuery[] | any[] ,totalItems?:number }> {
+    const config = commerce.getConfig(cfg)
+    const variables = {
+      options: {
+        take: vars.take,
+      },
+    }
+    const { data } = await config.fetch<GetFeaturedBlogQuery>(query, {
+      variables,
+    })
+    return {
+      featuredBlogs: data?.featuredBlogs?.items?.map((val:BlogList)=>({
+            id: val.id,
+            title: val.translations[0]?.title,
+            imageSrc: val.featuredAsset?.preview ?? null,
+            slug: val.translations[0]?.slug,
+            description: val.translations[0]?.description,
+            isPublish: val.isPublish,
+            isFeatured: val.isFeatured,
+            authorName: val.authorName,
+            authorAvatarAsset : val.authorAvatarAsset?.preview,
+            createdAt: val.createdAt
+        }))
+    }
+  }
+
+  return getFeaturedBlog
+}
diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts
index baf37c7f3..d77e82b84 100644
--- a/framework/vendure/schema.d.ts
+++ b/framework/vendure/schema.d.ts
@@ -2371,6 +2371,55 @@ export type Product = Node & {
   customFields?: Maybe<Scalars['JSON']>
 }
 
+export type BlogList = Node &{
+  id: ID!
+  createdAt: DateTime!
+  updatedAt: DateTime!
+  featuredAsset?: Maybe<Asset>
+  isPublish:Boolean
+  translations: Array<BlogTranslation>
+  authorName: Scalars['String']
+  authorAvatarAsset:Asset
+  relevantProducts: Product
+  isFeatured: Boolean
+}
+
+export type BlogTranslation = {
+  __typename?: 'BlogTranslation'
+  id: Scalars['ID']
+  createdAt: Scalars['DateTime']
+  updatedAt: Scalars['DateTime']
+  languageCode: LanguageCode
+  title: Scalars['String']
+  slug: Scalars['String']
+  description: Scalars['String']
+  content: Scalars['String']
+}
+
+export type GetAllBlogsQuery = PaginatedList & {
+  blogs: { __typename?: 'BlogList' } & {
+    items:  Array<{ __typename?: 'Blog' } & BlogList!>,
+    'totalItems'
+  }
+}
+export type GetFeaturedBlogQuery = PaginatedList & {
+  id:string,
+  featuredBlogs: { __typename?: 'BlogList' } & {
+    items:  Array<{ __typename?: 'Blog' } & BlogList!>,
+    'totalItems'
+  }
+}
+
+export type QueryBlogs = {
+  excludeBlogIds:Array,
+  options: BlogListOptions
+}
+
+export type BlogListOptions = {
+  skip?: Maybe<Scalars['Int']>
+  take?: Maybe<Scalars['Int']>
+}
+
 export type ProductTranslation = {
   __typename?: 'ProductTranslation'
   id: Scalars['ID']
@@ -3485,3 +3534,4 @@ export type SearchQuery = { __typename?: 'Query' } & {
     'totalItems'
   > & { items: Array<{ __typename?: 'SearchResult' } & SearchResultFragment> }
 }
+
diff --git a/framework/vendure/utils/normalize.ts b/framework/vendure/utils/normalize.ts
index 871352070..c095ec030 100644
--- a/framework/vendure/utils/normalize.ts
+++ b/framework/vendure/utils/normalize.ts
@@ -1,6 +1,6 @@
 import { Cart } from '@commerce/types/cart'
 import { ProductCard, Product } from '@commerce/types/product'
-import { CartFragment, SearchResultFragment,Favorite } from '../schema'
+import { CartFragment, SearchResultFragment,Favorite, BlogList } from '../schema'
 
 export function normalizeSearchResult(item: SearchResultFragment): ProductCard {
   return {
@@ -83,4 +83,19 @@ export function normalizeProductCard(product: Product): ProductCard {
     facetValueIds: product.facetValueIds,
     collectionIds: product.collectionIds,
   }
+}
+
+export function normalizeBlogList(blog: BlogList) {
+  return {
+      id: blog.id,
+      title: blog.translations[0]?.title,
+      imageSrc: blog.featuredAsset?.preview ?? null,
+      slug: blog.translations[0]?.slug,
+      description: blog.translations[0]?.description,
+      isPublish: blog.isPublish,
+      isFeatured:blog.isFeatured,
+      authorName: blog.authorName,
+      authorAvatarAsset : blog.authorAvatarAsset?.preview,
+      createdAt: blog.createdAt
+  }
 }
\ No newline at end of file
diff --git a/framework/vendure/utils/queries/get-all-blog-query.ts b/framework/vendure/utils/queries/get-all-blog-query.ts
new file mode 100644
index 000000000..57c17ace7
--- /dev/null
+++ b/framework/vendure/utils/queries/get-all-blog-query.ts
@@ -0,0 +1,26 @@
+export const getAllBlogsQuery = /* GraphQL */ `
+query GetBlogs($excludeBlogIds: [ID]!,  $options: BlogListOptions) {
+  blogs(excludeBlogIds: $excludeBlogIds, options: $options) {
+    totalItems
+    items {
+      id
+      isPublish
+      isFeatured
+      authorName
+      createdAt
+      authorAvatarAsset{
+        preview
+      }
+      featuredAsset {
+        preview
+      }
+      translations {
+        title
+        slug
+        description
+        content
+      }
+    }
+  }
+}
+`
diff --git a/framework/vendure/utils/queries/get-featued-query.ts b/framework/vendure/utils/queries/get-featued-query.ts
new file mode 100644
index 000000000..ff0a77e5b
--- /dev/null
+++ b/framework/vendure/utils/queries/get-featued-query.ts
@@ -0,0 +1,25 @@
+export const getFeatuedBlogsQuery = /* GraphQL */ `
+    query GetFeaturedBlogs($options: BlogListOptions) {
+        featuredBlogs( options: $options){
+        items {
+            id
+            isPublish
+            isFeatured
+            authorName
+            createdAt
+            authorAvatarAsset{
+                preview
+            }
+            featuredAsset {
+                preview
+            }
+            translations {
+                title
+                slug
+                description
+                content
+            }
+            }
+        }
+    }
+`
\ No newline at end of file
diff --git a/next-env.d.ts b/next-env.d.ts
index 9bc3dd46b..c6643fda1 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/pages/blogs.tsx b/pages/blogs.tsx
index 84e56b55d..715d9fe24 100644
--- a/pages/blogs.tsx
+++ b/pages/blogs.tsx
@@ -1,14 +1,91 @@
+import commerce from '@lib/api/commerce';
+import { GetStaticPropsContext } from 'next';
 import { Layout } from 'src/components/common';
-import { BlogsList, FeaturedCardBlog, BlogHeading, BlogBreadCrumb } from 'src/components/modules/blogs';
+import { BlogCardProps } from 'src/components/common/CardBlog/CardBlog';
+import { BlogBreadCrumb, BlogHeading, BlogsList, FeaturedCardBlog } from 'src/components/modules/blogs';
+import { DEFAULT_BLOG_PAGE_SIZE } from "src/utils/constanst.utils";
+import { getAllPromies } from 'src/utils/funtion.utils';
+import { PromiseWithKey } from 'src/utils/types.utils';
 
-export default function BlogsPage() {
+interface Props {
+    blogs?: BlogCardProps[],
+    featuredBlog?: BlogCardProps[],
+    totalItems: number
+}
+export default function BlogsPage({ blogs, featuredBlog, totalItems }:Props) {
+ 
+    let date = new Date(featuredBlog?.[0]?.createdAt ?? '' );
+    let fullDate = date.toLocaleString('en-us', { month: 'long' }) + " " + date.getDate()+","+date.getFullYear();
+ 
     return(
         <>
             <BlogBreadCrumb />
             <BlogHeading />
-            <FeaturedCardBlog />
-            <BlogsList />
+            <FeaturedCardBlog 
+            title={featuredBlog?.[0]?.title} 
+            slug={featuredBlog?.[0]?.slug} 
+            imgSrc={featuredBlog?.[0]?.imageSrc ?? ''}
+            content={featuredBlog?.[0]?.description}
+            imgAuthor={featuredBlog?.[0]?.authorAvatarAsset}
+            authorName={featuredBlog?.[0]?.authorName}
+            date={fullDate}
+            />
+            <BlogsList blogList={blogs} total={totalItems} idFeatured={featuredBlog?.[0]?.id} />
         </>
     )
 }
-BlogsPage.Layout = Layout
\ No newline at end of file
+
+
+export async function getStaticProps({
+  preview,
+  locale,
+  locales,
+}: GetStaticPropsContext) {
+  const config = { locale, locales }
+  let promisesWithKey = [] as PromiseWithKey[]
+  let props = {} as any;
+
+  const {featuredBlogs} = await commerce.getFeaturedBlog({
+    variables: {
+      take: 1
+    },
+    config,
+    preview,
+  })
+  
+ // Blogs
+  const idFeaturedBlog = featuredBlogs?.[0]?.id;
+  const blogsPromise = commerce.getAllBlogs({
+    variables: {
+      excludeBlogIds: [idFeaturedBlog],
+      take: DEFAULT_BLOG_PAGE_SIZE
+    },
+    config,
+    preview,
+  })
+  promisesWithKey.push({ key: 'blogsResult', promise: blogsPromise })
+
+
+  try {
+    const promises = getAllPromies(promisesWithKey)
+    const rs = await Promise.all(promises)
+
+    promisesWithKey.map((item, index) => {
+      props[item.key] = item.keyResult ? rs[index][item.keyResult] : rs[index]
+      return null
+    })
+
+    props.featuredBlog = featuredBlogs;
+    
+    console.log(props)
+    return {
+      props,
+      revalidate: 60
+    }
+  } catch (err) {
+
+  }
+}
+
+
+BlogsPage.Layout = Layout
diff --git a/pages/index.tsx b/pages/index.tsx
index fbcecadef..2bbe38cc9 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -12,6 +12,7 @@ import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED,COLLECTION_SLUG_SPICE } from '
 import { getAllFacetValueIdsByParentCode, getAllFacetValuesForFeatuedProducts, getAllPromies, getFreshFacetId } from 'src/utils/funtion.utils';
 import { PromiseWithKey } from 'src/utils/types.utils';
 
+
 interface Props {
   featuredAndDiscountFacetsValue: FacetValue[],
   freshProducts: ProductCard[],
@@ -63,7 +64,7 @@ export async function getStaticProps({
   
 
   props.featuredAndDiscountFacetsValue = getAllFacetValuesForFeatuedProducts(facets)
-  
+
   // fresh products
   const freshProductvariables: ProductVariables = {}
   const freshFacetId = getFreshFacetId(facets)
diff --git a/src/components/common/CardBlog/CardBlog.tsx b/src/components/common/CardBlog/CardBlog.tsx
index a44f45494..babf2e987 100644
--- a/src/components/common/CardBlog/CardBlog.tsx
+++ b/src/components/common/CardBlog/CardBlog.tsx
@@ -6,17 +6,20 @@ import { ImgWithLink } from '..'
 import s from './CardBlog.module.scss'
 
 export interface BlogCardProps extends BlogProps {
-  // todo: edit when intergrate API
-
+  isPublish?:Boolean,
+  isFeatured?:Boolean,
+  authorAvatarAsset?:string,
+  authorName?:string,
+  createdAt?:string
 }
 
 const CardBlog = ({ imageSrc, title, description, slug }: BlogCardProps) => {
   return (
     <div className={s.cardBlogWarpper}>
       <Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
-        <a>
+        <a> 
           <div className={s.image}>
-            <ImgWithLink src={imageSrc} alt="image cardblog" />
+            <ImgWithLink src={imageSrc ?? ''} alt={title} />
           </div>
         </a>
       </Link>
diff --git a/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.module.scss b/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.module.scss
new file mode 100644
index 000000000..2f6541e7e
--- /dev/null
+++ b/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.module.scss
@@ -0,0 +1,18 @@
+.listBlogCardSkeleton {
+    display: flex;
+    overflow: hidden;
+    width: 90%;
+    justify-content: space-between;
+    div{
+        min-width: 32rem;
+    }
+
+    &.wrap {
+        flex-wrap: wrap;
+        overflow: unset;
+        > div {
+            margin-bottom: 1.6rem;
+        }
+    }
+    
+}
diff --git a/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.tsx b/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.tsx
new file mode 100644
index 000000000..015a97374
--- /dev/null
+++ b/src/components/common/ListBlogCardSkeleton/ListBlogCardSkeleton.tsx
@@ -0,0 +1,20 @@
+import classNames from 'classnames'
+import { ProductCardSkeleton } from '..'
+import s from './ListBlogCardSkeleton.module.scss'
+
+type Props = {
+  count?: number
+  isWrap?: boolean,
+}
+const ListBlogCardSkeleton = ({ count = 3, isWrap }: Props) => {
+
+  return (
+    <div className={classNames(s.listBlogCardSkeleton, { [s.wrap]: isWrap })}>
+      {
+        Array.from(Array(count).keys()).map(item => <ProductCardSkeleton key={item}  />)
+      }
+    </div>
+  )
+}
+
+export default ListBlogCardSkeleton
diff --git a/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.module.scss b/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.module.scss
index f8dfec116..9ce1dfb77 100644
--- a/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.module.scss
+++ b/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.module.scss
@@ -1,7 +1,7 @@
 .listProductCardSkeleton {
     display: flex;
     overflow: hidden;
-
+    
     &.wrap {
         flex-wrap: wrap;
         overflow: unset;
@@ -9,4 +9,11 @@
             margin-bottom: 1.6rem;
         }
     }
+    &.isBlog{
+        width: 90%;
+        justify-content: space-between;
+        div{
+            min-width: 32rem;
+        }
+    }
 }
diff --git a/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx b/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx
index 218f9fb11..20447851a 100644
--- a/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx
+++ b/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx
@@ -4,15 +4,14 @@ import s from './ListProductCardSkeleton.module.scss'
 
 type Props = {
   count?: number
-  isWrap?: boolean
+  isWrap?: boolean,
 }
-const ListProductCardSkeleton = ({ count = 5, isWrap }: Props) => {
+const ListProductCardSkeleton = ({ count = 3, isWrap }: Props) => {
 
   return (
     <div className={classNames(s.listProductCardSkeleton, { [s.wrap]: isWrap })}>
       {
         Array.from(Array(count).keys()).map(item => <ProductCardSkeleton key={item} />)
-
       }
     </div>
   )
diff --git a/src/components/common/ProductCardSkeleton/ProductCardSkeleton.tsx b/src/components/common/ProductCardSkeleton/ProductCardSkeleton.tsx
index 52c4b0fea..373099314 100644
--- a/src/components/common/ProductCardSkeleton/ProductCardSkeleton.tsx
+++ b/src/components/common/ProductCardSkeleton/ProductCardSkeleton.tsx
@@ -1,14 +1,16 @@
 import SkeletonImage from "../SkeletonCommon/SkeletonImage/SkeletonImage"
 import SkeletonParagraph from "../SkeletonCommon/SkeletonParagraph/SkeletonParagraph"
 import s from './ProductCardSkeleton.module.scss'
-
-const ProductCardSkeleton = ({ }) => {
+type Props = {
+  isBlog?:boolean
+}
+const ProductCardSkeleton = ({isBlog=false }) => {
 
   return (
     <div className={s.productCardSkeleton}>
       <SkeletonImage />
       <div className={s.content}>
-        <SkeletonParagraph rows={3} />
+        <SkeletonParagraph rows={isBlog ? 2 : 3} />
       </div>
     </div>
   )
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 2b7724b73..e2c28e186 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -55,4 +55,5 @@ export { default as FormForgot} from './ForgotPassword/FormForgot/FormForgot'
 export { default as FormResetPassword} from './ForgotPassword/FormResetPassword/FormResetPassword'
 export { default as ProductCardSkeleton} from './ProductCardSkeleton/ProductCardSkeleton'
 export { default as ListProductCardSkeleton} from './ListProductCardSkeleton/ListProductCardSkeleton'
+export { default as ListBlogCardSkeleton} from './ListBlogCardSkeleton/ListBlogCardSkeleton'
 
diff --git a/src/components/hooks/blog/index.ts b/src/components/hooks/blog/index.ts
new file mode 100644
index 000000000..e8359671a
--- /dev/null
+++ b/src/components/hooks/blog/index.ts
@@ -0,0 +1 @@
+export {default as useGetBlogList }from "./useGetBlogList"
\ No newline at end of file
diff --git a/src/components/hooks/blog/useGetBlogList.tsx b/src/components/hooks/blog/useGetBlogList.tsx
new file mode 100644
index 000000000..9db7a3a5a
--- /dev/null
+++ b/src/components/hooks/blog/useGetBlogList.tsx
@@ -0,0 +1,18 @@
+import { GetAllBlogsQuery, QueryBlogs,BlogList } from '@framework/schema'
+import { normalizeBlogList } from '@framework/utils/normalize'
+import { getAllBlogsQuery } from '@framework/utils/queries/get-all-blog-query'
+import gglFetcher from 'src/utils/gglFetcher'
+import useSWR from 'swr'
+
+const useGetBlogList = (options?: QueryBlogs) => {
+  const { data, isValidating, ...rest } = useSWR<GetAllBlogsQuery>([getAllBlogsQuery, options], gglFetcher)
+
+  return { 
+          blogs: data?.blogs?.items?.map((blog:BlogList)=>normalizeBlogList(blog)),
+          totalItems: data?.blogs?.totalItems || null,
+          loading: isValidating,
+           ...rest 
+        }
+}
+
+export default useGetBlogList
diff --git a/src/components/modules/blogs/BlogsList/BlogsList.tsx b/src/components/modules/blogs/BlogsList/BlogsList.tsx
index 9b7ddc1e0..d9dbf26ed 100644
--- a/src/components/modules/blogs/BlogsList/BlogsList.tsx
+++ b/src/components/modules/blogs/BlogsList/BlogsList.tsx
@@ -1,151 +1,96 @@
-import React, { useState } from 'react'
+import { useRouter } from 'next/router'
+import React, { useEffect, useState,useRef, useMemo } from 'react'
 import CardBlog, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
 import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
+import { DEFAULT_BLOG_PAGE_SIZE, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import s from "./BlogsList.module.scss"
-import { DEFAULT_BLOG_PAGE_SIZE } from 'src/utils/constanst.utils'
+import { QueryBlogs } from '@framework/schema'
+import { useGetBlogList } from 'src/components/hooks/blog'
+import { getPageFromQuery } from 'src/utils/funtion.utils'
+import { ListBlogCardSkeleton  } from 'src/components/common'
 
 interface BlogsListProps {
-    data?: BlogCardProps[],
+    blogList?: BlogCardProps[],
+    total?: number,
+    idFeatured?:string
 }
 
-const BLOGSLIST_DATA = [
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
-      title: "1",
-      description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
-      title: "2",
-      description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
-      title: "3",
-      description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133186410-d8718d90-82fb-46cb-a0f2-0ec96356ae89.png",
-      title: "4",
-      description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133186474-b2d89bbc-32ed-4174-a05e-3d388c0a39ff.png",
-      title: "5",
-      description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133186545-d860f4ee-222c-4d72-a876-808af0f397a0.png",
-      title: "6",
-      description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
-      title: "7",
-      description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
-      title: "8",
-      description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
-      title: "9",
-      description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133186545-d860f4ee-222c-4d72-a876-808af0f397a0.png",
-      title: "10",
-      description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133186410-d8718d90-82fb-46cb-a0f2-0ec96356ae89.png",
-      title: "11",
-      description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133186474-b2d89bbc-32ed-4174-a05e-3d388c0a39ff.png",
-      title: "12",
-      description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
-      title: "13",
-      description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
-      title: "14",
-      description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
-      title: "15",
-      description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133186410-d8718d90-82fb-46cb-a0f2-0ec96356ae89.png",
-      title: "16",
-      description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133186545-d860f4ee-222c-4d72-a876-808af0f397a0.png",
-      title: "17",
-      description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
-      slug: "happy-diet"
-    },
-    {
-      imageSrc: "https://user-images.githubusercontent.com/46085455/133186474-b2d89bbc-32ed-4174-a05e-3d388c0a39ff.png",
-      title: "18",
-      description: "Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...",
-      slug: "happy-diet"
-    },
-  
-  ]
 
-const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => {
-    const [currentPage, setCurrentPage] = useState(0)
+
+const BlogsList = ({ blogList,total,idFeatured }:BlogsListProps) => {
+
+    const DEFAULT_BLOGS_ARGS = useMemo(()=> ({
+        excludeBlogIds: [idFeatured],
+        options:{
+            skip: 1, take: DEFAULT_BLOG_PAGE_SIZE
+        }
+    }),[idFeatured]);
+
+
+    const router = useRouter();
+    const [initialQueryFlag, setInitialQueryFlag] = useState<boolean>(true)
+
+    const [optionQueryBlog, setOptionQueryBlog] = useState<QueryBlogs>(DEFAULT_BLOGS_ARGS)
+    const { blogs, totalItems, loading } = useGetBlogList(optionQueryBlog);
+
+
+
     const onPageChange = (page:number) => {
-        setCurrentPage(page)
+        router.push({
+            pathname: ROUTE.BLOGS,
+            query: {
+              ...router.query,
+              [QUERY_KEY.PAGE]: page
+            }
+          },
+            undefined, { shallow: true }
+        )
+    }
+
+      // skip
+      const firstRender = useRef(true);
+      useEffect(() => {
+        firstRender.current = false;
+        const query = { ...DEFAULT_BLOGS_ARGS } as QueryBlogs;
+        const page = getPageFromQuery(router.query[QUERY_KEY.PAGE] as string);
+        query.options.skip = page * DEFAULT_BLOG_PAGE_SIZE;
+        setOptionQueryBlog(query);
+        setInitialQueryFlag(false);
+    },[router.query])
+
+       
+    let data;
+    if(initialQueryFlag == true){
+        data = blogList;
+    }else{
+        data = blogs
     }
     
+
     return (
         <section>
             <div className={s.wrapper}>
+                {(!initialQueryFlag && loading && !blogs) && <ListBlogCardSkeleton count={DEFAULT_BLOG_PAGE_SIZE} isWrap  />}
                 <div className={s.list}>
+                    
                     {
-                        data.slice(currentPage*DEFAULT_BLOG_PAGE_SIZE,(currentPage+1)*DEFAULT_BLOG_PAGE_SIZE).map((product,index)=> {
-                            return(
+                        data?.map((product,index)=> {
+                        return(
                                 <div className={s.card} key={`${product.title}-${index}`}>
-                                    <CardBlog {...product} />
+                                    {product.isPublish && <CardBlog {...product} /> }
                                 </div>
                             )
                         })
                     }
                 </div>
                 <div className={s.pagination}>
-                    <PaginationCommon total={data.length} pageSize={DEFAULT_BLOG_PAGE_SIZE} onChange={onPageChange}/>
+                    <PaginationCommon total={totalItems !== undefined ? totalItems : total} pageSize={DEFAULT_BLOG_PAGE_SIZE} onChange={onPageChange}/>
                 </div>
             </div>
         </section>
     )
 }
 
-export default BlogsList
\ No newline at end of file
+export default BlogsList
+
+
diff --git a/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx
index ec90633d8..a7c7708f1 100644
--- a/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx
+++ b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx
@@ -1,8 +1,10 @@
 import s from './FeaturedCardBlog.module.scss'
 import { Author, DateTime, ImgWithLink } from 'src/components/common'
-
+import Link from 'next/link'
+import { ROUTE } from 'src/utils/constanst.utils'
 interface FeaturedCardBlogProps{
     title?: string,
+    slug?:string,
     content?: string,
     imgSrc?: string,
     imgAuthor?: string,
@@ -10,33 +12,31 @@ interface FeaturedCardBlogProps{
     authorName?: string,
 }
 
-const FEATURED_DATA = {
-    title: "Flammekueche with green asparagus",
-    content: "Traditionally, the Flammekueche is made with rapeseed oil, which, contrary to popular belief, is indeed an oil that can be cooked hot and is not limited to seasoning. It is important to vary the oils in the kitchen to take advantage of the benefits of each. Rapeseed oil is an oil rich in omega 3 which participate in the proper functioning of the cardiovascular system as well as in vitamins E which contributes to the protection of cells against oxidative stress. In short, oils are your friends 😉",
-    imgSrc: "https://user-images.githubusercontent.com/46085455/133186666-1ea8081f-4319-4617-8644-d20ed14b1825.png",
-    imgAuthor: "https://user-images.githubusercontent.com/46085455/133186783-d0c71d43-b7bc-44b6-b560-818c71bd162f.png",
-    date: "APRIL 30, 2021",
-    author: "Alessandro Del Piero"
-}
-
 const FeaturedCardBlog = ({ 
-    title = FEATURED_DATA.title, 
-    content = FEATURED_DATA.content, 
-    imgSrc = FEATURED_DATA.imgSrc, 
-    imgAuthor = FEATURED_DATA.imgAuthor, 
-    date = FEATURED_DATA.date, 
-    authorName = FEATURED_DATA.author 
+    title,
+    slug,
+    content, 
+    imgSrc = '', 
+    imgAuthor = '', 
+    date = '', 
+    authorName = ''
 }: FeaturedCardBlogProps) => {
     return (
         <section className={s.featuredCard}>
             <div className={s.featuredCardWrapper}>
-                <div className={s.left}>
-                    <ImgWithLink src={imgSrc} alt="image feature card"/>
-                </div>
+                <Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
+                    <a> 
+                        <div className={s.left}>
+                            <ImgWithLink src={imgSrc} alt="image feature card"/>
+                        </div>
+                    </a>
+                </Link>
                 <div className={s.right}>
                     <div className={s.titleWrapper}>
-                        <DateTime date={date}/>
-                        <a className={s.title}>{title}</a>
+                        <DateTime date={date }/>
+                        <Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
+                            <a className={s.title}>{title}</a>
+                        </Link>
                     </div>
                     <Author name={authorName} image={imgAuthor}/>
                     <div className={s.content}>{content}</div>
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index 8ad8657ed..b3ec1cd50 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -184,6 +184,8 @@ export const FEATURED = [
 
 export const DEFAULT_BLOG_PAGE_SIZE = 6;
 
+export const DEFAULT_FEATURED_BLOG_PAGE_SIZE = 1;
+
 export const FILTER_PAGE = [ROUTE.HOME, ROUTE.PRODUCTS]
 
 export const STATE_OPTIONS = [
diff --git a/src/utils/funtion.utils.ts b/src/utils/funtion.utils.ts
index 94521e072..25c394487 100644
--- a/src/utils/funtion.utils.ts
+++ b/src/utils/funtion.utils.ts
@@ -143,6 +143,10 @@ export function getAllPromies(promies: PromiseWithKey[]) {
   return promies.map(item => item.promise)
 }
 
+export function getIdFeaturedBlog(blog: BlogList) {
+  return blog?.id
+}
+
 export const FilterOneVatiant = (products:ProductCard[]) => {
   let idList:string[] = []
   let filtedProduct: ProductCard[]=[]
@@ -173,4 +177,4 @@ export function getProductVariant(product: Product, opts: SelectedOptions) {
     )
   })
   return variant
-}
\ No newline at end of file
+}
diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts
index 055fb799c..f3dd654f3 100644
--- a/src/utils/types.utils.ts
+++ b/src/utils/types.utils.ts
@@ -30,7 +30,7 @@ export interface BlogProps {
     title: string
     slug: string
     description: string
-    imageSrc: string
+    imageSrc: string | null,
 }
 
 export interface CheckOutForm {