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