diff --git a/src/component/Blog/Blog/Main.js b/src/component/Blog/Blog/Main.js
index 43a4623..ba78687 100644
--- a/src/component/Blog/Blog/Main.js
+++ b/src/component/Blog/Blog/Main.js
@@ -42,6 +42,7 @@ const Main = ({ brdcum, bgimg }) => {
       }
     }
   };
+  
 
   return (
     <>
diff --git a/src/component/Blog/BlogSingle/Main.js b/src/component/Blog/BlogSingle/Main.js
index 0d1503f..b2be0a5 100644
--- a/src/component/Blog/BlogSingle/Main.js
+++ b/src/component/Blog/BlogSingle/Main.js
@@ -16,7 +16,7 @@ const Main = ({ brdcum }) => {
   let api_call = new SiteService();
   useEffect(() => {
     getBlogData();
-  }, [blogData]);
+  }, []);
 
   const getBlogData = async () => {
     /* 
@@ -185,7 +185,8 @@ const Main = ({ brdcum }) => {
                       dangerouslySetInnerHTML={{
                         __html: item.post_content.substring(0, 100) + "  . . .",
                       }}></div>
-                    <Link to={`/blogdetails/${item.id}`}>READ MORE</Link>
+                    <a href={`/blogdetails/${item.id}`}>READ MORE</a>
+                    {/* <Link to={`/blogdetails/${item.id}`}>READ MORE</Link> */}
                   </div>
                 </div>
               </div>
diff --git a/src/component/HomeMain/Story/Main.js b/src/component/HomeMain/Story/Main.js
index 6767e66..6a1b5bf 100644
--- a/src/component/HomeMain/Story/Main.js
+++ b/src/component/HomeMain/Story/Main.js
@@ -1,20 +1,64 @@
-import { Link } from 'react-router-dom'
-import React from 'react'
-import story1 from '../../../assets/images/story01.png'
-import story2 from '../../../assets/images/story02.png'
-import story3 from '../../../assets/images/story03.png'
+import React, { useEffect, useState } from "react";
+import { Link } from 'react-router-dom';
+// import story1 from '../../../assets/images/story01.png';
+// import story2 from '../../../assets/images/story02.png';
+// import story3 from '../../../assets/images/story03.png';
+import SiteService from "../../../vendors/service/siteService";
+
 
 const Main = () => {
+    const [blogData, setBlogData] = useState([]);
+
+  let api = new SiteService();
+  useEffect(() => {
+    getBlogData();
+  }, []);
+
+  const getBlogData = async () => { 
+      try {
+        let res = await api.blogData();
+        setBlogData(res.data);
+       
+      } catch (error) {
+        console.log("Error from blog data ", error);
+      }    
+  };
+  
   return (
     <>
         <section className="row_am latest_story" id="blog">
             <div className="container">
                 <div className="section_title" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
                     <h2>Read latest <span>story</span></h2>
-                    <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
                 </div>
                 <div className="row">
-                    <div className="col-md-4">
+                {blogData.slice(1, 4).map((item, index) => (
+              <div
+                className="col-md-4"
+                key={index}>
+                <div
+                  className="story_box"
+                  data-aos="fade-up"
+                  data-aos-duration="1500">
+                  <div className="story_img">
+                    <img
+                      src={item.meta_value}
+                      alt="image"
+                    />
+                    <span>{new Date(item.post_date).toDateString()}</span>
+                  </div>
+                  <div className="story_text">
+                    <h3>{item.post_title}</h3>
+                    <div
+                      dangerouslySetInnerHTML={{
+                        __html: item.post_content.substring(0, 100) + "  . . .",
+                      }}></div>
+                    <Link to={`/blogdetails/${item.id}`}>READ MORE</Link>
+                  </div>
+                </div>
+              </div>
+            ))}
+                    {/* <div className="col-md-4">
                         <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
                             <div className="story_img">
                             <img src={story1} alt="image" />
@@ -53,7 +97,7 @@ const Main = () => {
                                 <Link to="/blog-single">READ MORE</Link>
                             </div>
                         </div>
-                    </div>
+                    </div> */}
                 </div>
             </div>
         </section>