diff --git a/src/components/BlogPage/BlogArticle/BlogArticle.scss b/src/components/BlogPage/BlogArticle/BlogArticle.scss
index e299bd60..1266970a 100644
--- a/src/components/BlogPage/BlogArticle/BlogArticle.scss
+++ b/src/components/BlogPage/BlogArticle/BlogArticle.scss
@@ -30,12 +30,16 @@
 
     p {
       margin-bottom: 15px;
-      font-size: 12px;
-      line-height: 18px;
+      font-size: 14px;
+      line-height: 24px;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       overflow: hidden;
+
+      em {
+        font-size: 14px;
+      }
     }
   }
 
@@ -76,10 +80,14 @@
         font-size: $large;
       }
 
-      p,
+      p, 
       a {
-        font-size: 16px;
+        font-size: 18px;
         line-height: 30px;
+
+        em {
+          font-size: 18px;
+        }
       }
     }
   }
diff --git a/src/components/BlogPage/BlogContainer.js b/src/components/BlogPage/BlogContainer.js
index 8793ffe0..156695c5 100644
--- a/src/components/BlogPage/BlogContainer.js
+++ b/src/components/BlogPage/BlogContainer.js
@@ -45,7 +45,7 @@ const Blog = () => {
           )}
           {data?.map((article, idx) => (
             <BlogGrid key={idx} title={article.name}>
-              {article?.articles?.map((item, idx) => (
+              {article?.article?.map((item, idx) => (
                 <BlogArticle
                   key={idx}
                   image={item.image}
diff --git a/src/hooks/useBlog.js b/src/hooks/useBlog.js
index f2927efe..e3aec237 100644
--- a/src/hooks/useBlog.js
+++ b/src/hooks/useBlog.js
@@ -6,7 +6,7 @@ const useBlog = () => {
       allStrapiBlogCategory {
         nodes {
           name
-          articles {
+          article {
             title
             summary
             slug
diff --git a/src/hooks/useEdTech.js b/src/hooks/useEdTech.js
index 58ae5174..4b20044b 100644
--- a/src/hooks/useEdTech.js
+++ b/src/hooks/useEdTech.js
@@ -36,11 +36,11 @@ const useEdTech = () => {
           title
           content
           icon {
-              localFile {
-                  childImageSharp {
-                    gatsbyImageData(height: 100)
-                  }
+            localFile {
+              childImageSharp {
+                gatsbyImageData(height: 100, quality: 100)
               }
+            }
           }
           edTechSubmodules {
             ed_tech_submodules {
diff --git a/src/hooks/useEdTechSubmodules.js b/src/hooks/useEdTechSubmodules.js
index 4c37f5b4..ee20161c 100644
--- a/src/hooks/useEdTechSubmodules.js
+++ b/src/hooks/useEdTechSubmodules.js
@@ -15,7 +15,7 @@ const useEdTechSubmodules = () => {
             logo {
               localFile {
                 childImageSharp {
-                  gatsbyImageData(width: 60)
+                  gatsbyImageData(width: 60, quality: 100)
                 }
               }
             }
@@ -27,7 +27,7 @@ const useEdTechSubmodules = () => {
             icon {
               localFile {
                 childImageSharp {
-                  gatsbyImageData(width: 60)
+                  gatsbyImageData(width: 60, quality: 100)
                 }
               }
             }
diff --git a/src/hooks/useServices.js b/src/hooks/useServices.js
index bacdfbc1..e6cebeeb 100644
--- a/src/hooks/useServices.js
+++ b/src/hooks/useServices.js
@@ -20,7 +20,7 @@ const useServices = () => {
           icon {
             localFile {
               childImageSharp {
-                gatsbyImageData(width: 150, quality: 100, placeholder: BLURRED)
+                gatsbyImageData(width: 150, quality: 100)
               }
             }
           }
diff --git a/src/templates/BlogItemDetail.js b/src/templates/BlogItemDetail.js
index 4802cfb6..5ae5d97a 100644
--- a/src/templates/BlogItemDetail.js
+++ b/src/templates/BlogItemDetail.js
@@ -4,13 +4,14 @@ import showdown from "showdown"
 import Layout from "../components/layout"
 import { Seo } from "../components/index.js"
 import { BannerTop } from "../components/index.js"
-// import { getImage, GatsbyImage } from "gatsby-plugin-image"
+import { getImage, GatsbyImage } from "gatsby-plugin-image"
 import "./BlogItemDetail.scss"
 
 const BlogDetail = ({ data }) => {
-  const { title, description, image } = data?.allStrapiArticle?.nodes[0]
+  const { title, description, image, author } = data?.allStrapiArticle?.nodes[0]
   const bannerTop = { title, image }
 
+  let { summary } = author
   let converter = new showdown.Converter()
   let html = converter.makeHtml(description)
 
@@ -26,7 +27,7 @@ const BlogDetail = ({ data }) => {
         <div className="col-lg-12">
           <div className="detail__description">
             <p dangerouslySetInnerHTML={ReplaceHtml()} />
-            {/* <div className="detail__description-author">
+            <div className="detail__description-author">
               {author?.map(author => (
                 <div className="detail__box-author">
                   <div className="detail__box-author-image">
@@ -42,7 +43,7 @@ const BlogDetail = ({ data }) => {
                   </div>
                 </div>
               ))}
-            </div> */}
+            </div>
           </div>
         </div>
         {/* <div className="col-lg-4">
@@ -80,6 +81,18 @@ export const query = graphql`
             }
           }
         }
+        author {
+          name
+          subTitle
+          summary
+          image {
+            localFile {
+              childImageSharp {
+                gatsbyImageData
+              }
+            }
+          }
+        }
       }
     }
   }
diff --git a/src/templates/BlogItemDetail.scss b/src/templates/BlogItemDetail.scss
index b78494f9..3a16b369 100644
--- a/src/templates/BlogItemDetail.scss
+++ b/src/templates/BlogItemDetail.scss
@@ -111,6 +111,7 @@
       margin: 10px auto;
       border-radius: 50%;
       object-fit: cover;
+      box-shadow: none;
     }
   }
 
@@ -137,7 +138,7 @@
     }
 
     p {
-      font-size: 13px;
+      font-size: $small;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 4;
@@ -183,7 +184,7 @@
         margin: 1rem 0;
         display: -webkit-box;
         -webkit-box-orient: vertical;
-        -webkit-line-clamp: 4;
+        -webkit-line-clamp: 5;
         overflow: hidden;
         font-size: $small;
       }
@@ -251,8 +252,8 @@
       text-align: center;
 
       img {
-        width: 145px;
-        height: 145px;
+        width: 175px;
+        height: 150px;
       }
     }
 
@@ -322,8 +323,8 @@
       }
 
       p {
-        font-size: 13px;
-        line-height: 20px;
+        font-size: 16px;
+        line-height: 24px;
       }
     }