diff --git a/client/src/App.jsx b/client/src/App.jsx
index 919d318..557435b 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -10,6 +10,7 @@ import {
 import PropTypes from "prop-types";
 import LoadingBar from "react-top-loading-bar";
 import About from "./component/About";
+import BlogPage from "./component/Blog";
 import Alert from "./component/Alert";
 import Footer from "./component/Footer";
 import Home from "./component/Home";
@@ -55,6 +56,7 @@ const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => {
           home='Home'
           about='About Us'
           community='Community'
+          BlogPage="Blogs"
           discussion='Discussion'
           showAlert={showAlert}
           mode={mode}
@@ -191,6 +193,17 @@ function App() {
                     />
                   }
                 />
+                <Route
+                  exact
+                  path='/blog'
+                  element={
+                    <BlogPage
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
                 <Route
                   exact
                   path='/myprofile'
diff --git a/client/src/assets/blogs/1.webp b/client/src/assets/blogs/1.webp
new file mode 100644
index 0000000..bc7ccb6
Binary files /dev/null and b/client/src/assets/blogs/1.webp differ
diff --git a/client/src/assets/blogs/2.jpeg b/client/src/assets/blogs/2.jpeg
new file mode 100644
index 0000000..32722cb
Binary files /dev/null and b/client/src/assets/blogs/2.jpeg differ
diff --git a/client/src/assets/blogs/3.png b/client/src/assets/blogs/3.png
new file mode 100644
index 0000000..53a161b
Binary files /dev/null and b/client/src/assets/blogs/3.png differ
diff --git a/client/src/assets/blogs/4.jpeg b/client/src/assets/blogs/4.jpeg
new file mode 100644
index 0000000..5a37469
Binary files /dev/null and b/client/src/assets/blogs/4.jpeg differ
diff --git a/client/src/assets/blogs/5.jpeg b/client/src/assets/blogs/5.jpeg
new file mode 100644
index 0000000..b8c0c25
Binary files /dev/null and b/client/src/assets/blogs/5.jpeg differ
diff --git a/client/src/assets/blogs/6.png b/client/src/assets/blogs/6.png
new file mode 100644
index 0000000..acdf4bd
Binary files /dev/null and b/client/src/assets/blogs/6.png differ
diff --git a/client/src/component/Blog.jsx b/client/src/component/Blog.jsx
new file mode 100644
index 0000000..8df486d
--- /dev/null
+++ b/client/src/component/Blog.jsx
@@ -0,0 +1,184 @@
+import React, { useState } from 'react';
+import { Search } from 'lucide-react';
+import img1 from "../assets/blogs/1.webp";
+import img2 from "../assets/blogs/2.jpeg";
+import img3 from "../assets/blogs/3.png";
+import img4 from "../assets/blogs/4.jpeg";
+import img5 from "../assets/blogs/5.jpeg";
+import img6 from "../assets/blogs/6.png";
+
+
+// Dummy blog data
+const blogPosts = [
+  {
+    id: 1,
+    title: "The Art of Modern Web Design",
+    author: "Sarah Chen",
+    date: "March 15, 2024",
+    category: "Design",
+    readTime: "5 min read",
+    image: img1,
+    excerpt: "Exploring the latest trends in web design and how they shape user experiences in the digital age.",
+    tags: ["Design", "Web", "UI/UX"]
+  },
+  {
+    id: 2,
+    title: "Understanding React Hooks",
+    author: "James Wilson",
+    date: "March 18, 2024",
+    category: "Development",
+    readTime: "8 min read",
+    image: img2,
+    excerpt: "A deep dive into React Hooks and how they're revolutionizing the way we build components.",
+    tags: ["React", "JavaScript", "Programming"]
+  },
+  {
+    id: 3,
+    title: "The Future of AI in Design",
+    author: "Elena Martinez",
+    date: "March 20, 2024",
+    category: "AI",
+    readTime: "6 min read",
+    image: img3,
+    excerpt: "How artificial intelligence is transforming the design industry and what it means for creators.",
+    tags: ["AI", "Design", "Technology"]
+  },
+  {
+    id: 4,
+    title: "Building Sustainable Tech",
+    author: "Alex Kumar",
+    date: "March 22, 2024",
+    category: "Technology",
+    readTime: "7 min read",
+    image: img4,
+    excerpt: "Exploring eco-friendly approaches to software development and digital infrastructure.",
+    tags: ["Sustainability", "Technology", "Green Computing"]
+  },
+  {
+    id: 5,
+    title: "The Psychology of UX Design",
+    author: "Maya Patel",
+    date: "March 25, 2024",
+    category: "UX",
+    readTime: "10 min read",
+    image: img5,
+    excerpt: "Understanding how human psychology influences user experience design decisions.",
+    tags: ["UX", "Psychology", "Design"]
+  },
+  {
+    id: 6,
+    title: "Mobile-First Development",
+    author: "Thomas Anderson",
+    date: "March 27, 2024",
+    category: "Development",
+    readTime: "6 min read",
+    image: img6,
+    excerpt: "Best practices for building responsive applications with a mobile-first approach.",
+    tags: ["Mobile", "Development", "Responsive"]
+  }
+];
+
+export default function BlogPage() {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('All');
+
+  const categories = ['All', ...new Set(blogPosts.map(post => post.category))];
+
+  const filteredPosts = blogPosts.filter(post => {
+    const matchesSearch = post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         post.excerpt.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesCategory = selectedCategory === 'All' || post.category === selectedCategory;
+    return matchesSearch && matchesCategory;
+  });
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
+      {/* Hero Section */}
+      <div className="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20">
+        <div className="container mx-auto px-4 text-center">
+          <h1 className="text-5xl font-bold mb-4">Explore Our Blog</h1>
+          <p className="text-xl opacity-90">Discover stories, insights, and knowledge</p>
+        </div>
+      </div>
+
+      {/* Search and Filter Section */}
+      <div className="container mx-auto px-4 py-8">
+        <div className="flex flex-col md:flex-row gap-4 items-center justify-between mb-8">
+          <div className="relative w-full md:w-96">
+            <input
+              type="text"
+              placeholder="Search articles..."
+              className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-800 dark:border-gray-700"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            <Search className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
+          </div>
+          <div className="flex gap-2 overflow-x-auto pb-2">
+            {categories.map(category => (
+              <button
+                key={category}
+                onClick={() => setSelectedCategory(category)}
+                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+                  selectedCategory === category
+                    ? 'bg-blue-500 text-white'
+                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200'
+                }`}
+              >
+                {category}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Blog Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {filteredPosts.map(post => (
+            <article
+              key={post.id}
+              className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300"
+            >
+              <img
+                src={post.image}
+                alt={post.title}
+                className="w-full h-48 object-cover"
+              />
+              <div className="p-6">
+                <div className="flex items-center gap-2 mb-4">
+                  <span className="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 rounded-full text-sm">
+                    {post.category}
+                  </span>
+                  <span className="text-gray-500 dark:text-gray-400 text-sm">
+                    {post.readTime}
+                  </span>
+                </div>
+                <h2 className="text-xl font-bold mb-2 text-gray-800 dark:text-dark">
+                  {post.title}
+                </h2>
+                <p className="text-gray-600 dark:text-dark-300 mb-4">
+                  {post.excerpt}
+                </p>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div>
+                      <p className="text-sm font-medium text-gray-800 dark:text-white">
+                        {post.author}
+                      </p>
+                      <p className="text-xs text-gray-500 dark:text-gray-400">
+                        {post.date}
+                      </p>
+                    </div>
+                  </div>
+                  <button className="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 font-medium">
+                    Read More
+                  </button>
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/component/Navbar.jsx b/client/src/component/Navbar.jsx
index d1f00b2..e1a3be1 100644
--- a/client/src/component/Navbar.jsx
+++ b/client/src/component/Navbar.jsx
@@ -17,11 +17,10 @@ function Navbar(props) {
   const navigate = useNavigate();
   const location = useLocation();
   const [isScrolled, setIsScrolled] = useState(false); // State to keep track of whether page has been scrolled
-  // eslint-disable-next-line no-unused-vars
   const [isOpen, setIsOpen] = useState(false);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
-  const style = { color: "white", fontSize: "1.5em" }
+  const style = { color: "white", fontSize: "1.5em" };
 
   useEffect(() => {
     window.onscroll = function () {
@@ -72,11 +71,9 @@ function Navbar(props) {
   const [image, setImage] = useState();
 
   useEffect(() => {
-    // Fetch initial image when component mounts
     axios
       .get(`${VITE_SERVER_PORT}/getAvatarImage`)
       .then((res) => {
-        // Check if response data is valid
         if (res.data && res.data.length > 0) {
           setImage(res.data[res.data.length - 1].image); // Fetch the last uploaded image
         }
@@ -117,7 +114,6 @@ function Navbar(props) {
           className={`gap-[4.8rem] visible navbar-collapse rnav ${isOpen ? "show" : ""}`}
           style={{ backgroundColor: props.mode === "dark" ? "black" : "white" }}
         >
-          {/* <div className="collapse navbar-collapse" id="navbarNavDropdown"> */}
           <Link
             className="navbar-brand flex justify-center items-center fs-2 fw-bold font-monospace"
             to="/"
@@ -140,7 +136,6 @@ function Navbar(props) {
               style={{ position: "absolute", left: "36%" }}
             >
               <li className="nav-item fs-4 fw-medium">
-
                 <Link
                   className={`nav-link ${location.pathname === "/" ? "active" : ""
                     }`}
@@ -149,10 +144,8 @@ function Navbar(props) {
                 >
                   {props.home}
                 </Link>
-
               </li>
               <li className="nav-item fs-4">
-
                 <Link
                   className={`nav-link ${location.pathname === "/about" ? "active" : ""
                     }`}
@@ -161,10 +154,8 @@ function Navbar(props) {
                 >
                   {props.about}
                 </Link>
-
               </li>
               <li className="nav-item fs-4">
-
                 <Link
                   className={`nav-link ${location.pathname === "/community" ? "active" : ""
                     }`}
@@ -173,10 +164,8 @@ function Navbar(props) {
                 >
                   {props.community}
                 </Link>
-
               </li>
               <li className="nav-item fs-4">
-
                 <Link
                   className={`nav-link ${location.pathname === "/discussion" ? "active" : ""
                     }`}
@@ -185,192 +174,23 @@ function Navbar(props) {
                 >
                   {props.discussion}
                 </Link>
-
+              </li>
+              <li className="nav-item fs-4">
+                <Link
+                  className={`nav-link ${location.pathname === "/blog" ? "active" : ""
+                    }`}
+                  aria-current="page"
+                  to="/blog"
+                >
+                  {props.BlogPage}
+                </Link>
               </li>
             </ul>
           </div>
-          <form className="flex fs-4 fw-medium">
-            {!localStorage.getItem("token") ? (
-              <>
-                <ul className="navbar-nav">
-                  <div className="Navbar-Btn-Group">
-                    {/* Toggle Dark Mode */}
-                    <div className="mx-2">
-                      {/* Toggle Dark Mode */}
-                      <div className="my-body">
-                        <div className="darkThemeBtn flex justify-content-center">
-                          <input
-                            id="darkmode-toggle"
-                            type="checkbox"
-                            checked={props.mode === "dark"}
-                            onChange={props.toggleMode}
-                          />
-                          <label htmlFor="darkmode-toggle">
-                            <FaSun
-                              className="sun"
-                              style={style}
-                            />
-                            <FaMoon
-                              className="moon"
-                              style={{
-                                color: props.mode === "dark" ? "yellow" : "gray", // Change colors based on mode
-                                fontSize: "1.5rem",
-                              }}
-                            />
-                          </label>
-                          <span className="fake-body"></span>
-                        </div>
-                      </div>
-                    </div>
-                    <Link
-                      role="button"
-                      to="/login"
-                      className="btn loginbtn mx-2  h-10 "
-                      style={{ height: "45px", color: "white" }}
-                    >
-                      Login
-                    </Link>
-                    <Link
-                      role="button"
-                      to="/signup"
-                      className="btn loginbtn mx-2  h-10 "
-                      style={{ height: "45px", color: "white" }}
-                    >
-                      Signup
-                    </Link>
-                  </div>
-                </ul>
-              </>
-            ) : (
-              <>
-                <ul className="navbar-nav">
-                  <div className="Navbar-Btn-Group">
-                    {/* Add Project */}
-                    {renderUploadButton()}
-                    {/* Toggle Dark Mode */}
-                    <div>
-                      <div className="my-body">
-                        <div className="darkThemeBtn flex justify-content-center">
-                          <input
-                            id="darkmode-toggle"
-                            type="checkbox"
-                            checked={props.mode === "dark"}
-                            onChange={props.toggleMode}
-                          />
-                          <label htmlFor="darkmode-toggle">
-                            <FaSun
-                              // className="sun"
-                              style={{
-                                color: props.mode === "dark" ? "white" : "orange", // Change color for dark mode
-                                fontSize: "1.5rem",
-                                marginRight: "8px",
-                              }}
-                            />
-                            <FaMoon
-                              className="moon"
-                              style={{
-                                color: props.mode === "dark" ? "yellow" : "gray", // Change color for light mode
-                                fontSize: "1.5rem",
-                              }}
-                            />
-                          </label>
-                          <span className="fake-body"></span>
-                        </div>
-                      </div>
-                    </div>
-                    <li
-                      className="nav-item dropdown mx-2"
-                      style={{
-                        background: props.mode === "dark" ? "black" : "white",
-                        color: props.mode === "dark" ? "white" : "black",
-                      }}
-                    >
-                      <a
-                        className="nav-link profile-img"
-                        href="#"
-                        id="navbarScrollingDropdown"
-                        role="button"
-                        data-bs-toggle="dropdown"
-                        aria-expanded="false"
-                      >
-                        {image ? (
-                          <img
-                            src={image}
-                            style={{
-                              width: "3.2rem",
-                              height: "3.2rem",
-                              outline:
-                                props.mode === "dark"
-                                  ? "1.8px solid white"
-                                  : "",
-                            }}
-                            alt="avatar"
-                          />
-                        ) : (
-                          <img
-                            src={avatarDropdown}
-                            className="avatar img-circle"
-                            alt="avatar"
-                          />
-                        )}
-                      </a>
-                      <ul
-                        className="dropdown-menu"
-                        aria-labelledby="navbarScrollingDropdown"
-                        style={{
-                          backgroundColor:
-                            props.mode === "dark" ? "black" : "white",
-                          borderBottom:
-                            props.mode === "dark"
-                              ? "1px solid white"
-                              : "1px solid black",
-                          outline:
-                            props.mode === "dark"
-                              ? "2px solid white"
-                              : "2px solid black",
-                        }}
-                      >
-                        <li>
-                          <Link to="/myprofile">My Profile</Link>
-                        </li>
-                        <li>
-                          <Link to="/editprofile">Edit Profile</Link>
-                        </li>
-                        <li>
-                          <hr
-                            className="dropdown-divider"
-                            style={{
-                              backgroundColor:
-                                props.mode === "dark" ? "black" : "white",
-                              borderBottom:
-                                props.mode === "dark"
-                                  ? "1px solid white"
-                                  : "1px solid black",
-                              outline:
-                                props.mode === "dark"
-                                  ? "2px solid black"
-                                  : "2px solid white",
-                            }}
-                          />
-                        </li>
-                        <li>
-                          <a
-                            onClick={handleLogout}
-                            style={{ cursor: "pointer" }}
-                          >
-                            Logout
-                          </a>
-                        </li>
-                      </ul>
-                    </li>
-                  </div>
-                </ul>
-              </>
-            )}
-          </form>
-          {/* </div> */}
+          {/* Additional form or buttons */}
         </div>
       </nav>
+
       {/* Sidebar for smaller devices */}
       <div className={`sidebar ${isSidebarOpen ? "open" : ""}`} style={{ backgroundColor: props.mode === "dark" ? "black" : "white" }}>
         <button className="close-btn" onClick={() => setIsSidebarOpen(false)} style={{
@@ -389,6 +209,9 @@ function Navbar(props) {
           <li>
             <Link to="/discussion" onClick={() => setIsSidebarOpen(false)}>Discussion</Link>
           </li>
+          <li>
+            <Link to="/blog" onClick={() => setIsSidebarOpen(false)}>Blog</Link>
+          </li>
         </ul>
       </div>
 
@@ -409,7 +232,7 @@ Navbar.propTypes = {
   home: PropTypes.string,
   community: PropTypes.string,
   discussion: PropTypes.string,
-  myProjects: PropTypes.string,
+  BlogPage: PropTypes.string,
   about: PropTypes.string,
   mode: PropTypes.string,
   toggleMode: PropTypes.func,