diff --git a/wtm-bamenda-website-frontend/src/App.js b/wtm-bamenda-website-frontend/src/App.js
index 8f00a6f..6383b1e 100644
--- a/wtm-bamenda-website-frontend/src/App.js
+++ b/wtm-bamenda-website-frontend/src/App.js
@@ -6,12 +6,13 @@ import Blog from './pages/Blog';
 import Events from './pages/Events';
 import { Route, Routes } from 'react-router-dom'
 import './App.css';
-
+import NavBar from './NavBar/NavBar';
+import Footer from './Footer/Footer';
 function App() {
 
    return(
     <div>
-     
+     <NavBar />
       <Routes>
         <Route path='/' element={<Landing/>} />
         <Route path='/about' element={<About/>} />
@@ -19,7 +20,7 @@ function App() {
         <Route path='/events' element={<Events/>} />
         <Route path='/blog' element={<Blog/>} />
       </Routes>
-    
+    <Footer></Footer>
     </div>
    )
 
diff --git a/wtm-bamenda-website-frontend/src/Blog.css b/wtm-bamenda-website-frontend/src/Blog.css
new file mode 100644
index 0000000..f8abacf
--- /dev/null
+++ b/wtm-bamenda-website-frontend/src/Blog.css
@@ -0,0 +1,145 @@
+.blog {
+  text-align: center;
+  margin-left: 120px;
+  margin-right: 120px;
+}
+
+.blog-title {
+  font-family: "Roboto", sans-serif;
+  font-size: 70px;
+  font-weight: 500;
+  line-height: 74px;
+  letter-spacing: 0;
+  color: black; 
+  margin-top: 80px;
+}
+
+.blog-description {
+  text-align: center;
+  max-width: 761px;
+  margin: 20px auto;
+  font-family: "Roboto", sans-serif;
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 28px;
+  color: black; 
+  margin-top: 20px;
+}
+
+.blog-image {
+  width: 100%;
+  height: 550px;
+  border-radius: 28px 8px 28px 8px;
+  margin-top: 30px;
+  object-fit: cover;
+  object-position: center top;
+}
+
+.blog-list {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 40px;
+  margin-bottom: 30px;
+}
+
+.blog-list-title {
+  font-family: "Roboto", sans-serif;
+  font-size: 42px;
+  font-weight: 300;
+  line-height: 50px;
+  color: black; 
+  margin-top: 20px;
+}
+
+.submit-button {
+  background-color: #ff7370;
+  color: rgb(0, 0, 0);
+  padding: 8px 16px;
+  width: 200px;
+  border: 1;
+  border-radius: 8px;
+  cursor: pointer;
+  padding: 20px, 24px, 20px, 24px;
+  font-weight: 500;
+}
+
+.blog-posts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 30px;
+  justify-content: space-between;
+}
+
+.blog-card {
+  background: rgb(255, 255, 255);
+  border-radius: 28px 8px 28px 8px;
+  border: 2px solid #ffdad7;
+  height: auto;
+  width: 450px;
+  padding: 20px;
+  gap: 20px;
+}
+
+.blog-card-image {
+  width: 400px;
+  height: 300px;
+}
+
+.blog-card-content {
+  padding: 10px;
+}
+
+.blog-card-title {
+  font-family: Roboto;
+  font-size: 32px;
+  font-weight: 500;
+  line-height: 41px;
+  letter-spacing: 0em;
+}
+
+.blog-card-description {
+  font-size: 1rem;
+  color: #777;
+}
+/* Blog.css */
+.blog-topics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px; 
+  margin-top: 10px;
+}
+
+.related-topic-container {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 10px;
+  column-gap: 20px;
+}
+
+.related-topic {
+  background-color: #ffedeb;
+  color: black;
+  padding: 5px 15px; 
+  border-radius: 20px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.related-topic:hover {
+  background-color: #ffcbc5;
+}
+
+.read-more-button {
+  background-color: #ff7370;
+  color: rgb(0, 0, 0);
+  width: fill;
+  height: 40px;
+  padding: 20px, 24px, 20px, 24px;
+  gap:4px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 400;
+  margin-top: 20px;
+}
diff --git a/wtm-bamenda-website-frontend/src/Project.css b/wtm-bamenda-website-frontend/src/Project.css
new file mode 100644
index 0000000..069a03e
--- /dev/null
+++ b/wtm-bamenda-website-frontend/src/Project.css
@@ -0,0 +1,141 @@
+.project-page {
+  margin-left: 90px;
+  margin-right: 90px;
+}
+
+.header {
+  margin-top: 80px;
+  font-family: Roboto;
+  font-size: 70px;
+  font-weight: 550;
+  line-height: 74px;
+  letter-spacing: 0em;
+  margin-bottom: 50px;
+}
+.project-title {
+  font-family: Roboto;
+  font-size: 60px;
+  font-weight: 400;
+  line-height: 74px;
+  margin-bottom: 20px;
+}
+
+.projects{
+    margin-top: 60px;
+    width: 100%;
+    margin-right: 40px ;
+    margin-bottom: 350px;
+}
+
+
+.project-details {
+    margin-top: 70px;
+    display: flex;
+    justify-content: center;
+  width: 100%;
+  margin-bottom: 50px;
+}
+
+.project-details{
+    column-gap: 130px;
+}
+
+.project-image img {
+  width: 100%;
+  max-width: 100%;
+}
+
+@media(max-width: 768px) {
+    .project-details {
+      flex-direction: column;
+    }
+    .project-image {
+      width: auto;
+      margin-bottom: 20px;
+    }
+    .project-content {
+      width: auto;
+    }
+  }
+
+
+.project-image {
+    width: 50%;
+}
+
+.project-content {
+    max-width: 500px;
+  width: 50%;
+}
+
+.tag-container {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 10px;
+    column-gap: 20px;
+  }
+  
+  .project-tags{
+    background-color: #d1d5ff;
+    color: black;
+    padding: 5px 15px; 
+    border-radius: 20px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+  
+  .project-tags:hover {
+    background-color: #b1b6ff;
+  }
+
+  
+.description {
+  margin-top: 10px;
+  line-height: 1.5;
+  font-family: "Roboto", sans-serif;
+  font-size: 20px;
+  margin-bottom: 30px;
+}
+
+.tagging{
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 10px;
+    column-gap: 20px;
+  }
+
+  .project-tags {
+    background-color: #d1d5ff;
+    color: black;
+    padding: 5px 15px;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    text-align: center; /* Center text within the button */
+  }
+  
+  .project-tags:hover {
+    background-color: #b1b6ff;
+  }
+  
+
+  .view-projects-button {
+    background-color: 
+    
+    #005AC1;  
+    margin-top: 25px;
+    color: white;  
+    border: none;
+    font-family: Roboto;
+  font-weight: 450;
+    padding: 10px;
+    border-radius: 8px;
+    width: 100%;  
+    gap: 4px;
+  }
+
+  .selected-tag {
+    background-color: #838bfc;
+    color: black; /* You can adjust the text color as needed */
+  }
+  
\ No newline at end of file
diff --git a/wtm-bamenda-website-frontend/src/pages/Blog.jsx b/wtm-bamenda-website-frontend/src/pages/Blog.jsx
index 569c3c4..c3c5488 100644
--- a/wtm-bamenda-website-frontend/src/pages/Blog.jsx
+++ b/wtm-bamenda-website-frontend/src/pages/Blog.jsx
@@ -1,10 +1,100 @@
+import React from "react";
+import "../Blog.css";
+import HeroImg from "../assets/blog/hero-img.JPG";
+import BlogImg1 from '../assets/blog/blog1.jpeg'
+import BlogImg2 from '../assets/blog/blog2.jpeg'
+import BlogImg3 from '../assets/blog/blog3.jpg'
+import BlogImg4 from '../assets/blog/blog4.jpg'
 
 
-function Blog(){
-    <div>
+const blogPosts = [
+  {
+    id: 1,
+    title: 'Blog Post 1',
+    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ad eum accusantium, deserunt repellendus consectetur omnis error nam, exercitationem sapiente a unde quibusdam molestias vitae expedita. Odit cupiditate tempora quidem!',
+    imageUrl: BlogImg1,
+    relatedTopics: ['Frontend dev', 'backend dev', 'devops'],
+  },
+  {
+    id: 2,
+    title: 'Blog Post 2',
+    description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis qui autem sit tempora sint eligendi dicta laboriosam eius provident vitae harum consequuntur, doloribus maxime error debitis accusantium nulla velit quae!',
+    imageUrl: BlogImg2, 
+    relatedTopics: ['Frontend dev', 'Backend development', 'devops'],
+  },
+  {
+    id: 3,
+    title: 'Blog Post 3',
+    description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis qui autem sit tempora sint eligendi dicta laboriosam eius provident vitae harum consequuntur, doloribus maxime error debitis accusantium nulla velit quae!',
+    imageUrl: BlogImg3,
+    relatedTopics: ['App dev', 'Cloud'], 
+  },
+  {
+    id: 4,
+    title: 'Blog Post 4',
+    description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis qui autem sit tempora sint eligendi dicta laboriosam eius provident vitae harum consequuntur, doloribus maxime error debitis accusantium nulla velit quae!',
+    imageUrl: BlogImg4,
+    relatedTopics: ['BlockChain Developement', 'Artificial intelligence', 'DSA'],
+  },
+  {
+    id: 5,
+    title: 'Blog Post 5',
+    description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis qui autem sit tempora sint eligendi dicta laboriosam eius provident vitae harum consequuntur, doloribus maxime error debitis accusantium nulla velit quae!',
+    imageUrl: BlogImg1, 
+    relatedTopics: ['Frontend dev', 'backend dev', 'devops'], 
+  },
+  {
+    id: 6,
+    title: 'Blog Post 6',
+    description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis qui autem sit tempora sint eligendi dicta laboriosam eius provident vitae harum consequuntur, doloribus maxime error debitis accusantium nulla velit quae!',
+    imageUrl: BlogImg2,
+    relatedTopics: ['Frontend dev', 'backend dev', 'devops'], 
+  }
+];
 
+function Blog() {
+  return (
+    <div className="blog">
+      <h1 className="blog-title">
+        {" "}
+        <span style={{ color: "#005AC1" }}>Insights</span>,
+        <span style={{ color: "#00BFA5" }}> Stories</span>
+        <span style={{ color: "black" }}>, and </span>
+        <span style={{ color: "#FF7370" }}>Inspiration</span>
+      </h1>
+      <p className="blog-description">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
+        placeat iusto, tempora perferendis labore dolor eligendi dolore ducimus
+        quaerat neque incidunt, sequi ab, esse fugiat animi et doloremque natus
+        provident?
+      </p>
+      <img className="blog-image" src={HeroImg} alt="" />
+      <div className="blog-list">
+        <h2 className="blog-list-title">Blog Post</h2>
+        <button className="submit-button">Submit Blog Post</button>
+      </div>
+      <div className="blog-posts">
+        {blogPosts.map((post) => (
+          <div key={post.id} className="blog-card">
+            <img src={post.imageUrl} alt={post.title} className="blog-card-image" />
+            <div className="blog-card-content">
+              <h3 className="blog-card-title">{post.title}</h3>
+              <p className="blog-card-description">{post.description}</p>
+              <div className="blog-topics">
+                <div className="related-topic-container">
+                  {post.relatedTopics.map((topic, index) => (
+                    <span key={index} className="related-topic">{topic}</span>
+                  ))}
+                </div>
+              </div>
+              <button className="read-more-button">Read More</button>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
+  );
 }
 
+export default Blog;
 
-export default Blog;
\ No newline at end of file
diff --git a/wtm-bamenda-website-frontend/src/pages/Landing.jsx b/wtm-bamenda-website-frontend/src/pages/Landing.jsx
index 8523b2e..ecfae6e 100644
--- a/wtm-bamenda-website-frontend/src/pages/Landing.jsx
+++ b/wtm-bamenda-website-frontend/src/pages/Landing.jsx
@@ -22,7 +22,6 @@ import "../Landing.css";
 export default function Landing() {
   return (
     <div className="HomePage">
-      <NavBar />
       <section className="hero-section">
         <div className="hero-overview">
           <h1 className="hero-heading">Women TechMakers Bamenda</h1>
diff --git a/wtm-bamenda-website-frontend/src/pages/Projects.jsx b/wtm-bamenda-website-frontend/src/pages/Projects.jsx
index ac0d84e..0b0a057 100644
--- a/wtm-bamenda-website-frontend/src/pages/Projects.jsx
+++ b/wtm-bamenda-website-frontend/src/pages/Projects.jsx
@@ -1,11 +1,166 @@
+import React, { useState } from "react";
+import ProjectImg from "../assets/project/project.png";
+import "../Project.css";
 
+const Project = () => {
+  const projects = [
+    {
+      name: "WTM BADEMA WEBSITE",
+      tags: [
+        "Design",
+        "Android Development",
+        "UI/UX",
+        "DevOps",
+        "Machine Learning",
+      ],
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ad eum accusantium, deserunt repellendus consectetur omnis error nam, exercitationem sapiente a unde quibusdam molestias vitae expedita. Odit cupiditate tempora quidem!",
+      img: ProjectImg,
+    },
+    {
+      name: "WTM BADEMA WEBSITE",
+      tags: [
+        "Design",
+        "Android Development",
+        "Backend Development",
+        "Frontend Development",
+        "UI/UX",
+      ],
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ad eum accusantium, deserunt repellendus consectetur omnis error nam, exercitationem sapiente a unde quibusdam molestias vitae expedita. Odit cupiditate tempora quidem!",
+      img: ProjectImg,
+    },
+    {
+      name: "WTM BADEMA WEBSITE",
+      tags: [
+        "Android Development",
+        "Cybersecurity",
+        "Cloud Computing",
+        "Game Development",
+      ],
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum ad eum accusantium, deserunt repellendus consectetur omnis error nam, exercitationem sapiente a unde quibusdam molestias vitae expedita. Odit cupiditate tempora quidem!",
+      img: ProjectImg,
+    },
+  ];
 
-function Projects(){
-    <div>
-     
-    </div>
-}
+  const alltags = [
+    { tags: "Design" },
+    { tags: "Android Development" },
+    { tags: "Backend Development" },
+    { tags: "Frontend Development" },
+    { tags: "UI/UX" },
+    { tags: "DevOps" },
+    { tags: "Machine Learning" },
+    { tags: "Data Science" },
+    { tags: "Cybersecurity" },
+    { tags: "Cloud Computing" },
+    { tags: "Game Development" },
+  ];
+
+  const [showAll, setShowAll] = useState(false);
+  const [selectedTag, setSelectedTag] = useState("");
+
+  const displayProjects = () => {
+    return projects
+      .filter((project) => !selectedTag || project.tags.includes(selectedTag))
+      .map((project, index) => (
+        <div
+          key={index}
+          className={`project ${index % 2 === 0 ? "even" : "odd"}`}
+        >
+          {index % 2 === 0 ? (
+            <div className="project-details">
+              <div className="project-content">
+                <div className="project-title">{project.name}</div>
+                <div className="description">{project.description}</div>
+                <div className="tag-container">
+                  {project.tags?.map((tag, index) => (
+                    <div className="project-tags" key={index}>
+                      {tag}
+                    </div>
+                  ))}
+                </div>
+                <button className="view-projects-button"> View projects</button>
+              </div>
+              <div className="project-image">
+                <img src={project.img} alt="" />
+              </div>
+            </div>
+          ) : (
+            <div className="project-details">
+              <div className="project-image">
+                <img src={project.img} alt="" />
+              </div>
+              <div className="project-content">
+                <div className="project-title">{project.name}</div>
+                <div className="description">{project.description}</div>
+                <div className="tag-container">
+                  {project.tags?.map((tag, index) => (
+                    <div className="project-tags" key={index}>
+                      {tag}
+                    </div>
+                  ))}
+                </div>
+                <button className="view-projects-button"> View projects</button>
+              </div>
+            </div>
+          )}
+        </div>
+      ));
+  };
+
+  const toggleShowAll = () => {
+    setShowAll(!showAll);
+  };
+
+  const visibleTags = showAll
+  ? alltags.flatMap((tag) => (
+      <button
+        key={tag.tags}
+        className={`project-tags ${selectedTag === tag.tags ? 'selected-tag' : ''}`}
+        onClick={() => setSelectedTag(tag.tags)}
+      >
+        {tag.tags}
+      </button>
+    ))
+  : alltags.slice(0, 3).flatMap((tag) => (
+      <button
+        key={tag.tags}
+        className={`project-tags ${selectedTag === tag.tags ? 'selected-tag' : ''}`}
+        onClick={() => setSelectedTag(tag.tags)}
+      >
+        {tag.tags}
+      </button>
+    ));
 
 
+  return (
+    <div className="project-page">
+      <div className="header">Our Projects</div>
+
+      <div className="tagging">
+        <button
+          className="project-tags"
+          style={{
+            backgroundColor: "#005AC1",
+            color: "white",
+          }}
+          onClick={() => setSelectedTag("")}
+        >
+          All
+        </button>
+
+        {visibleTags}
+
+        <button className="project-tags" onClick={toggleShowAll}>
+          {showAll ? "less" : "more.."}
+        </button>
+      </div>
+
+      <div className="projects">{displayProjects()}</div>
+    </div>
+  );
+};
 
-export default Projects;
\ No newline at end of file
+export default Project;