diff --git a/app/research/page.js b/app/research/page.js
index fbf01b5..098a908 100644
--- a/app/research/page.js
+++ b/app/research/page.js
@@ -1,25 +1,21 @@
 import Hero from "@/components/Hero";
 import CallToAction from "@/components/CallToAction";
 import BlogClientList from "@/components/BlogClientList";
-import { fetchBlogs } from "@/services/blogService";
-
 
 import "./ResearchPage.css";
 import AOSWrapper from "@/components/AOSWrapper";
 
 export default async function ResearchPage() {
-  const blogs = await fetchBlogs();
-
   return (
     <div>
-        <AOSWrapper />
-        <Hero
-          title="Blog & Research"
-          subtitle="Stay Updated with the Latest News, Events, and Insight"
-          backgroundClass="research-hero"
-        />
-        <BlogClientList initialBlogs={blogs} />
-        <CallToAction />
+      <AOSWrapper />
+      <Hero
+        title="Blog & Research"
+        subtitle="Stay Updated with the Latest News, Events, and Insight"
+        backgroundClass="research-hero"
+      />
+      <BlogClientList />
+      <CallToAction />
     </div>
   );
 }
diff --git a/components/BlogClientList.jsx b/components/BlogClientList.jsx
index 4204c2d..91a67f7 100644
--- a/components/BlogClientList.jsx
+++ b/components/BlogClientList.jsx
@@ -4,32 +4,28 @@ import { useState, useEffect } from "react";
 import { Container, Button } from "react-bootstrap";
 import BlogCard from "./BlogCard";
 import LoadingSpinner from "./LoadingSpinner"; // Import LoadingSpinner
+import { fetchBlogs } from "@/services/blogService";
 
-const BlogClientList = ({ initialBlogs }) => {
-  const [blogs, setBlogs] = useState(initialBlogs || []);
-  const [isLoading, setIsLoading] = useState(false);  // Use isLoading for managing loading state
+const BlogClientList = () => {
+  const [blogs, setBlogs] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);  // Use isLoading for managing loading state
   const [visibleBlogs, setVisibleBlogs] = useState(6);
 
   const handleLoadMore = () => setVisibleBlogs((prev) => prev + 6);
 
   // Optional: To fetch blogs dynamically if needed (for client-side fetching)
   useEffect(() => {
-    if (!initialBlogs || initialBlogs.length === 0) {
-      setIsLoading(true);
-      // Fetch blogs from an API or service if the initialBlogs prop is empty
-      const fetchBlogs = async () => {
-        try {
-          const response = await fetchBlogs();  // Fetching data from the service
-          setBlogs(response);
-        } catch (error) {
-          console.log("Error fetching blogs:", error);
-        } finally {
-          setIsLoading(false);
-        }
-      };
-      fetchBlogs();
-    }
-  }, [initialBlogs]);
+    (async () => {
+      try {
+        const response = await fetchBlogs();  // Fetching data from the service
+        setBlogs(response);
+      } catch (error) {
+        console.log("Error fetching blogs:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    })()
+  }, []);
 
   return (
     <section className="sections-container blog-section">