diff --git a/src/components/ExpandedCard.jsx b/src/components/ExpandedCard.jsx
new file mode 100644
index 0000000..a0b26ec
--- /dev/null
+++ b/src/components/ExpandedCard.jsx
@@ -0,0 +1,56 @@
+import Footer from "./Footer";
+
+const ExpandedCard = ({ post, similarPosts, onBack }) => {
+  return (
+    <>
+    <div className="relative min-h-screen bg-white text-black p-4">
+      {/* Back button in the top-left corner */}
+      <button
+        className="absolute top-64 left-56 text-white bg-gray-800 p-3 rounded-full"
+        onClick={onBack}
+      >
+        ← Back
+      </button>
+
+      <div className="flex flex-col items-center mt-8"> {/* Added margin-top to adjust spacing below the back button */}
+        <img
+          src={post.img}
+          alt={post.title}
+          className="w-full max-w-3xl h-auto object-cover rounded-lg mb-6"
+        />
+        <h2 className="text-3xl font-bold mb-2">{post.title}</h2>
+        <p className="text-lg text-black mb-12">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
+          commodo cursus magna, vel scelerisque nisl consectetur et.
+        </p>
+
+        <h3 className="text-2xl  font-bold mb-4">Similar Posts</h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {similarPosts.map((similarPost) => (
+            <div
+              key={similarPost.id}
+              className="bg-gray-800 rounded-lg shadow-md overflow-hidden"
+            >
+              <img
+                src={similarPost.img}
+                alt={similarPost.title}
+                className="w-full h-64 object-fill object-center"
+              />
+              <div className="p-4">
+                <h4 className="text-lg text-white font-bold">{similarPost.title}</h4>
+              </div>
+            </div>
+          ))}
+        </div>
+        
+      </div>
+     
+    </div>
+    
+     <Footer/>
+    
+     </>
+  );
+};
+
+export default ExpandedCard;
diff --git a/src/components/PostCard.jsx b/src/components/PostCard.jsx
index 001a4e7..a4f53c6 100644
--- a/src/components/PostCard.jsx
+++ b/src/components/PostCard.jsx
@@ -1,12 +1,10 @@
-// import React from "react";
-
 const PostCard = ({ post }) => {
   return (
-    <div className="bg-secondary rounded-lg shadow-md overflow-hidden">
+    <div className="bg-secondary rounded-lg shadow-md overflow-hidden transition-transform duration-300 ease-in-out transform hover:scale-105 cursor-pointer"> 
       <img
         src={post.img}
         alt={post.title}
-        className="w-full h-64 object-fill object-center"
+        className="w-full h-64 object-cover" // Use object-cover for proper scaling
       />
       <div className="p-4">
         <h3 className="text-lg text-white font-bold">{post.title}</h3>
diff --git a/src/components/RecentPosts.jsx b/src/components/RecentPosts.jsx
index 5fa961e..08d965d 100644
--- a/src/components/RecentPosts.jsx
+++ b/src/components/RecentPosts.jsx
@@ -1,58 +1,33 @@
-import React, { useEffect, useState } from "react";
-import PostCard from "./PostCard";
-import LoadMoreButton from "./LoadMoreButton";
-
-const RecentPosts = () => {
-  const [posts, setPosts] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  // Fetch posts from the /get-blogs route
-  useEffect(() => {
-    const fetchPosts = async () => {
-      try {
-        const response = await fetch("/get-blogs");
-
-        // Check if the response is JSON because sometime response geting is not in json
-        const contentType = response.headers.get("content-type");
-        if (!contentType || !contentType.includes("application/json")) {
-          throw new Error("Expected JSON, received: " + contentType);
-        }
-
-        const data = await response.json();
-        setPosts(data);
-        setLoading(false);
-      } catch (error) {
-        setError(error.message);
-        setLoading(false);
-      }
-    };
-
-    fetchPosts();
-  }, []);
-
-  if (loading) {
-    return <p className="text-white">Loading...</p>;
-  }
-
-  if (error) {
-    return <p className="text-red-500">Error: {error}</p>;
-  }
-
+const RecentPosts = ({ blogPosts, onCardClick }) => {
   return (
-    <section className="container mx-auto px-4 py-12">
-      <h2 className="text-2xl text-white font-semibold mb-8">
-        Recent blog posts
-      </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-        {posts.length > 0 ? (
-          posts.map((post) => <PostCard key={post.id} post={post} />)
-        ) : (
-          <p className="text-white">No posts available</p>
-        )}
+    <div className="py-12">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="lg:text-center">
+        
+        </div>
+
+        <div className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {blogPosts.map((post) => (
+            <div
+              key={post.id}
+              className="relative rounded-lg shadow-lg overflow-hidden cursor-pointer"
+              onClick={() => onCardClick(post)} // Handle card click
+            >
+              <img
+                src={post.img}
+                alt={post.title}
+                className="w-full h-64 object-cover object-center"
+              />
+              <div className="p-6">
+                <h3 className="text-lg font-bold">{post.title}</h3>
+                <p className="mt-2 text-gray-600">{post.author}</p>
+                <p className="mt-1 text-sm text-gray-500">{post.date}</p>
+              </div>
+            </div>
+          ))}
+        </div>
       </div>
-      <LoadMoreButton />
-    </section>
+    </div>
   );
 };
 
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index c43fc63..9ecfb1a 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,26 +1,24 @@
+import  { useState } from "react";
 import Footer from "../components/Footer";
 import HeroSection from "../components/HeroSection";
 import RecentPosts from "../components/RecentPosts";
+import ExpandedCard from "../components/ExpandedCard"; 
 
 const Home = () => {
   const heroPosts = [
     {
-      title:
-        "Breaking Into Product Design: Advice from Untitled Founder, Frankie",
-      description:
-        "Learn key strategies to break into the product design field with insights from Frankie.",
+      title: "Breaking Into Product Design: Advice from Untitled Founder, Frankie",
+      description: "Learn key strategies to break into the product design field with insights from Frankie.",
       img: "https://images.unsplash.com/photo-1651066471224-b970dd45acc3?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     },
     {
       title: "Mastering UX Design: Tips from Industry Experts",
-      description:
-        "Discover how leading UX designers build intuitive experiences.",
+      description: "Discover how leading UX designers build intuitive experiences.",
       img: "https://plus.unsplash.com/premium_photo-1681755915233-9acafb348a7f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     },
     {
       title: "The Importance of Wireframing in UX Design",
-      description:
-        "How wireframing can streamline your design process and improve outcomes.",
+      description: "How wireframing can streamline your design process and improve outcomes.",
       img: "https://images.unsplash.com/photo-1657639466571-15adb5ab7bea?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     },
   ];
@@ -68,18 +66,47 @@ const Home = () => {
       date: "Mar 10, 2020",
       img: "https://plus.unsplash.com/premium_photo-1727537538673-07a31d71efe3?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
     },
-    // More posts...
   ];
 
+  // State to track the selected post
+  const [selectedPost, setSelectedPost] = useState(null);
+
+  // Handle card click
+  const handleCardClick = (post) => {
+    setSelectedPost(post);
+  };
+
+  // Handle back button click
+  const handleBackClick = () => {
+    setSelectedPost(null);
+  };
+
+  // Get similar posts (for simplicity, we'll just filter out the selected one)
+  const getSimilarPosts = (selectedPost) => {
+    return blogPosts.filter((post) => post.id !== selectedPost.id).slice(0, 3);
+  };
+
   return (
     <div className="bg-background min-h-screen">
-      {/* Hero Section with multiple posts */}
-      <HeroSection posts={heroPosts} />
+      {/* If a post is selected, show the ExpandedCard */}
+      {selectedPost ? (
+        <ExpandedCard
+          post={selectedPost}
+          similarPosts={getSimilarPosts(selectedPost)}
+          onBack={handleBackClick}
+        />
+      ) : (
+        <>
+          {/* Hero Section */}
+          <HeroSection posts={heroPosts} />
 
-      {/* Recent Blog Posts */}
-      <RecentPosts posts={blogPosts} />
+          {/* Recent Posts Section */}
+          <RecentPosts blogPosts={blogPosts} onCardClick={handleCardClick} />
 
-      <Footer />
+          {/* Footer */}
+          <Footer />
+        </>
+      )}
     </div>
   );
 };