diff --git a/src/Pages/BlogPage.jsx b/src/Pages/BlogPage.jsx
index e84deb0..e5933c1 100644
--- a/src/Pages/BlogPage.jsx
+++ b/src/Pages/BlogPage.jsx
@@ -1,105 +1,132 @@
 import React from 'react'
 import { useState } from 'react'
-import { Link } from 'react-router-dom'
+import SingleBlog from '../components/SingleBlog';
 
 const BlogPage = () => {
-    const [blogs, setblogs] = useState([
-        {
-            "id":1,
-            "title": "Lorem Ipsum Blog",
-            "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-            "author": "John Doe",
-            "publication_date": "2024-05-03"
-        },
-        {
-            "id":2,
-            "title": "Lorem Ipsum Blog",
-            "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-            "author": "John Doe",
-            "publication_date": "2024-05-03"
-        },
-        {
-            "id":3,
-            "title": "Lorem Ipsum Blog",
-            "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-            "author": "John Doe",
-            "publication_date": "2024-05-03"
-        },
-        {
-            "id":4,
-            "title": "Lorem Ipsum Blog",
-            "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-            "author": "John Doe",
-            "publication_date": "2024-05-03"
-        },
-        {
-            "id":5,
-            "title": "Lorem Ipsum Blog",
-            "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-            "author": "John Doe",
-            "publication_date": "2024-05-03"
-        },
-        {
-            "id":6,
-            "title": "Lorem Ipsum Blog",
-            "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-            "author": "John Doe",
-            "publication_date": "2024-05-03"
-        },
-        {
-            "id":7,
-            "title": "Lorem Ipsum Blog",
-            "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-            "author": "John Doe",
-            "publication_date": "2024-05-03"
-        },
-        {
-            "id":8,
-            "title": "Lorem Ipsum Blog",
-            "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-            "author": "John Doe",
-            "publication_date": "2024-05-03"
-        },
-        {
-            "id":9,
-            "title": "Lorem Ipsum Blog",
-            "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-            "author": "John Doe",
-            "publication_date": "2024-05-03"
-        },
-        {
-            "id":10,
-            "title": "Lorem Ipsum Blog",
-            "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-            "author": "John Doe",
-            "publication_date": "2024-05-03"
-        },
-        // Add more blog objects as needed
-    ])
+  const [activeTab, setActiveTab] = useState("latest")
+  const [blogs, setblogs] = useState([
+    {
+      id: 1,
+      title: "Lorem Ipsum Blog latest-blog",
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
+      author: "John Doe",
+      publication_date: "2024-05-03",
+      tag:"latest"
+    },
+    {
+      id: 2,
+      title: "Lorem Ipsum Blog latest blog",
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
+      author: "John Doe",
+      publication_date: "2024-05-03",
+      tag:"latest"
+    },
+    {
+      id: 3,
+      title: "Lorem Ipsum Blog latest blog",
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
+      author: "John Doe",
+      publication_date: "2024-05-03",
+      tag:"latest"
+    },
+    {
+      id: 4,
+      title: "Lorem Ipsum Blog latest blog",
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
+      author: "John Doe",
+      publication_date: "2024-05-03",
+      tag:"latest"
+    },
+    {
+      id: 5,
+      title: "Lorem Ipsum Blog trending blog",
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
+      author: "John Doe",
+      publication_date: "2024-05-03",
+      tag:"trending"
+    },
+    {
+      id: 6,
+      title: "Lorem Ipsum Blog trending blog",
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
+      author: "John Doe",
+      publication_date: "2024-05-03",
+      tag:"trending"
+    },
+    {
+      id: 7,
+      title: "Lorem Ipsum Blog trending blog",
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
+      author: "John Doe",
+      publication_date: "2024-05-03",
+      tag:"trending"
+    },
+    {
+      id: 8,
+      title: "Lorem Ipsum Blog top blog",
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
+      author: "John Doe",
+      publication_date: "2024-05-03",
+      tag:"top"
+    },
+    {
+      id: 9,
+      title: "Lorem Ipsum Blog top blog",
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
+      author: "John Doe",
+      publication_date: "2024-05-03",
+      tag:"top"
+    },
+    {
+      id: 10,
+      title: "Lorem Ipsum Blog top blog",
+      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
+      author: "John Doe",
+      publication_date: "2024-05-03",
+      tag:"top"
+    },
+    // Add more blog objects as needed
+  ]);
+    const blogsGroupedByTags = Object.groupBy(blogs, ({tag})=> tag)
+    const handleTabClick = (e)=>{
+      console.log(e.target.id)
+        const previousActiveButton= document.querySelector(`#${activeTab + "Tab"}`)
+        const previousActiveContainer = document.querySelector(`#${activeTab + "TabContainer"}`)
+        const activeContainer = document.querySelector(`#${e.target.id + "Container"}`)
 
+        const buttonValue = e.target.textContent.toLowerCase();
+        if(activeTab!==buttonValue){
+            previousActiveButton.classList.add("text-gray-600")
+            previousActiveContainer.classList.remove("border-black")
+
+            activeContainer.classList.add("border-black")
+            e.target.classList.remove("text-gray-600")
+            setActiveTab(buttonValue) 
+        }
+
+    }
     return (
         <>
-            <h1 class="text-3xl font-bold mb-4 mt-10 text-center">Latest Blogs</h1>
+           <div className="grid grid-cols-3 lg:w-1/2 xl:w-1/4 md:w-2/3  w-5/6 mx-auto align-items-center  justify-items-center">
+            <div id="topTabContainer" className="border-b-2 w-full text-center transition-border duration-300">
+                <button id="topTab" className="relative p-0 m-0 border-0 bg-transparent w-full h-full text-gray-600" onClick={(e)=>handleTabClick(e)}>
+                  <h1 className="sticky top-0 left-0 z-[-1] text-2xl font-bold mb-4 mt-10 text-center transition-color duration-300">Top</h1>
+                </button>
+            </div>
+            <div id="trendingTabContainer" className="border-b-2 w-full text-center transition-border duration-300">
+                <button id="trendingTab" className="relative p-0 m-0 border-0 bg-transparent w-full h-full relative z-1 text-gray-600" onClick={(e)=>handleTabClick(e)}>
+                  <h1 className="sticky top-0 left-0 z-[-1] text-2xl font-bold mb-4 mt-10 text-center transition-color duration-300">Trending</h1>
+                </button>
+            </div>
+            <div id="latestTabContainer" className="border-b-2 w-full border-black text-center transition-border duration-300">
+                <button id="latestTab" className="relative p-0 m-0 border-0 bg-transparent w-full h-full" onClick={(e)=>handleTabClick(e)}>
+                  <h1 className="sticky top-0 left-0 w-full z-[-1] text-2xl font-bold mb-4 mt-10 text-center transition-color duration-300">Latest</h1>
+                </button>
+            </div>
+            </div> 
             <div class="container mx-auto px-4 py-8 w-full">
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 w-[80%] mx-auto">
-                    {blogs.map((blog) => {
-                        return <Link className='blog-card' to={`/blog/${blog.id}/`}>
-                            <div class="bg-white shadow-md rounded-lg overflow-hidden">
-                                <img className="w-full h-52 object-cover" src="https://imgs.search.brave.com/q3MJLK_ILOJjNNpDQfAoodURIpLLbhskPAuceu6vI6c/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5nZXR0eWltYWdl/cy5jb20vaWQvMTM0/OTE4MzAxMy9waG90/by9hZnJpY2FuLW1h/bGUtam91cm5hbGlz/dC1wcmVwYXJpbmct/cXVlc3Rpb25zLWZv/ci1wcmVzcy1jb25m/ZXJlbmNlLmpwZz9z/PTYxMng2MTImdz0w/Jms9MjAmYz1xaWRi/U3pfNmhwa2tyNmpS/QjUtMWhTTUsxSjZL/RUM2YXZJVkJsYXht/WmdvPQ" alt="Blog Image" />
-                                <div class="p-4 flex flex-col gap-1 blog-text">
-                                    <h2 class="font-bold text-xl mb-2">{blog.title}</h2>
-                                    <p class="text-gray-700">{blog.content}</p>
-                                    <div class="mt-4 flex items-center">
-                                        <img className="w-10 h-10 rounded-full mr-4" src="https://imgs.search.brave.com/g2CJldyVpLs0sy-8TKaPqzJiC1DwIWh0fglnNnFqmSA/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pLnBp/bmltZy5jb20vb3Jp/Z2luYWxzL2NlL2Y4/L2I1L2NlZjhiNWNl/ZDAwMjM0MzE3MmZk/MDRkNTljYjJlMTcy/LmpwZw" alt="Author Image" />
-                                        <div>
-                                            <p class="text-gray-900 font-semibold">{blog.author}</p>
-                                            <p class="text-gray-600">{blog.publication_date}</p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </Link>
-                    })}
+                    {blogsGroupedByTags[activeTab].map((blog)=> <SingleBlog blog={blog}/>)}
                 </div>
             </div>
         </>
diff --git a/src/Pages/Blogs.jsx b/src/Pages/Blogs.jsx
index e20758e..b215d2d 100644
--- a/src/Pages/Blogs.jsx
+++ b/src/Pages/Blogs.jsx
@@ -1,93 +1,12 @@
 import React, { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useParams,useLocation } from "react-router-dom";
 
 const Blogs = () => {
   const params = useParams();
   const { slug } = params;
-  const [blogs, setblogs] = useState([
-    {
-      id: 1,
-      title: "Lorem Ipsum Blog",
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-      author: "John Doe",
-      publication_date: "2024-05-03",
-    },
-    {
-      id: 2,
-      title: "Lorem Ipsum Blog",
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-      author: "John Doe",
-      publication_date: "2024-05-03",
-    },
-    {
-      id: 3,
-      title: "Lorem Ipsum Blog",
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-      author: "John Doe",
-      publication_date: "2024-05-03",
-    },
-    {
-      id: 4,
-      title: "Lorem Ipsum Blog",
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-      author: "John Doe",
-      publication_date: "2024-05-03",
-    },
-    {
-      id: 5,
-      title: "Lorem Ipsum Blog",
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-      author: "John Doe",
-      publication_date: "2024-05-03",
-    },
-    {
-      id: 6,
-      title: "Lorem Ipsum Blog",
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-      author: "John Doe",
-      publication_date: "2024-05-03",
-    },
-    {
-      id: 7,
-      title: "Lorem Ipsum Blog",
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-      author: "John Doe",
-      publication_date: "2024-05-03",
-    },
-    {
-      id: 8,
-      title: "Lorem Ipsum Blog",
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-      author: "John Doe",
-      publication_date: "2024-05-03",
-    },
-    {
-      id: 9,
-      title: "Lorem Ipsum Blog",
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-      author: "John Doe",
-      publication_date: "2024-05-03",
-    },
-    {
-      id: 10,
-      title: "Lorem Ipsum Blog",
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
-      author: "John Doe",
-      publication_date: "2024-05-03",
-    },
-    // Add more blog objects as needed
-  ]);
+  const location = useLocation();
 
-  const [blog, setBlog] = useState(null);
-
-  useEffect(() => {
-    const selectedBlog = blogs.find((blog) => blog.id === parseInt(slug));
-    setBlog(selectedBlog);
-  }, [slug]);
-
-  if (!blog) {
-    return <div>Loading...</div>;
-  }
+  const [blog, setBlog] = useState(location.state.blogProp);
 
   const getAvatarLetter = (author) => {
     return author.charAt(0).toUpperCase();
diff --git a/src/components/SingleBlog.jsx b/src/components/SingleBlog.jsx
new file mode 100644
index 0000000..ec1f5b8
--- /dev/null
+++ b/src/components/SingleBlog.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+const SingleBlog = ({blog}) => {
+
+    return <Link className='blog-card' to={`/blog/${blog.id}/`} state={{blogProp:blog}}>
+        <div class="bg-white shadow-md rounded-lg overflow-hidden">
+            <img className="w-full h-52 object-cover" src="https://imgs.search.brave.com/q3MJLK_ILOJjNNpDQfAoodURIpLLbhskPAuceu6vI6c/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5nZXR0eWltYWdl/cy5jb20vaWQvMTM0/OTE4MzAxMy9waG90/by9hZnJpY2FuLW1h/bGUtam91cm5hbGlz/dC1wcmVwYXJpbmct/cXVlc3Rpb25zLWZv/ci1wcmVzcy1jb25m/ZXJlbmNlLmpwZz9z/PTYxMng2MTImdz0w/Jms9MjAmYz1xaWRi/U3pfNmhwa2tyNmpS/QjUtMWhTTUsxSjZL/RUM2YXZJVkJsYXht/WmdvPQ" alt="Blog Image" />
+            <div class="p-4 flex flex-col gap-1 blog-text">
+                <h2 class="font-bold text-xl mb-2">{blog.title}</h2>
+                <p class="text-gray-700">{blog.content}</p>
+                <div class="mt-4 flex items-center">
+                    <img className="w-10 h-10 rounded-full mr-4" src="https://imgs.search.brave.com/g2CJldyVpLs0sy-8TKaPqzJiC1DwIWh0fglnNnFqmSA/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pLnBp/bmltZy5jb20vb3Jp/Z2luYWxzL2NlL2Y4/L2I1L2NlZjhiNWNl/ZDAwMjM0MzE3MmZk/MDRkNTljYjJlMTcy/LmpwZw" alt="Author Image" />
+                    <div>
+                        <p class="text-gray-900 font-semibold">{blog.author}</p>
+                        <p class="text-gray-600">{blog.publication_date}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Link>
+}
+
+export default SingleBlog
\ No newline at end of file