diff --git a/src/App.css b/src/App.css
index 2667d08..459e738 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,4 +1,4 @@
-/* custom fonts */
+/* Custom fonts */
 @font-face {
   font-family: centra;
   src: url('./assets/font/CentraNo2-Bold.ttf');
@@ -15,36 +15,34 @@
   font-weight: 400;
 }
 
-/* default CSS */
-/* Set a minimum height for the parent container */
+/* Default CSS */
 #root {
-  min-height: 100vh; /* 100% of the viewport height */
-  /* You can adjust this value based on your design */
+  min-height: 100vh;
 }
 
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-} 
+}
 
-html { 
+html {
   scroll-behavior: smooth;
   scroll-padding-top: 75px;
-} 
+}
 
-body { 
+body {
   font-weight: 400;
   position: relative;
   color: #685454 !important;
   font-family: 'Centra', sans-serif !important;
-} 
-h1, h2, h3, h4, h5, h6 {  
-  margin: 0;              
-  padding: 0;             
-  line-height: normal;    
-}                         
+}
 
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0;
+  line-height: normal;
+}
 
 p, a, li, button, ul {
   margin: 0;
@@ -71,35 +69,36 @@ input:focus, textarea:focus, select:focus {
   outline: none;
 }
 
-@media (min-width:1700px) {
-	main .container {
-		max-width: 100%;
-		padding: 0 150px;
-	}
+@media (min-width: 1700px) {
+  main .container {
+    max-width: 100%;
+    padding: 0 150px;
+  }
 }
 
 p.success {
-	color: green;
+  color: green;
 }
 
 p.danger {
-	color: red;
+  color: red;
 }
-/************ Navbar Css ************/
+
+/* Navbar CSS */
 nav.navbar {
   padding: 18px 0;
   position: fixed;
   width: 100%;
   top: 0;
   z-index: 9999;
-  transition:  0.32s ease-in-out;
+  transition: 0.32s ease-in-out;
 }
 nav.navbar.scrolled {
   padding: 0px 0;
   background-color: #121212;
 }
 nav.navbar a.navbar-brand {
-    width: 9%;
+  width: 9%;
 }
 nav.navbar .navbar-nav .nav-link.navbar-link {
   font-weight: 400;
@@ -111,48 +110,48 @@ nav.navbar .navbar-nav .nav-link.navbar-link {
 }
 nav.navbar .navbar-nav a.nav-link.navbar-link:hover,
 nav.navbar .navbar-nav a.nav-link.navbar-link.active {
-    opacity: 1;
+  opacity: 1;
 }
 span.navbar-text {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 .social-icon {
-    display: inline-block;
-    margin-left: 14px;
+  display: inline-block;
+  margin-left: 14px;
 }
 .social-icon a {
-    width: 42px;
-    height: 42px;
-    background: rgba(217, 217, 217, 0.1);
-    display: inline-flex;
-    border-radius: 50%;
-    margin-right: 6px;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-    border: 1px solid rgba(255, 255, 255, 0.5);
+  width: 42px;
+  height: 42px;
+  background: rgba(217, 217, 217, 0.1);
+  display: inline-flex;
+  border-radius: 50%;
+  margin-right: 6px;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  border: 1px solid rgba(255, 255, 255, 0.5);
 }
 .social-icon a::before {
-    content: "";
-    width: 42px;
-    height: 42px;
-    position: absolute;
-    background-color: #ffffff;
-    border-radius: 50%;
-    transform: scale(0);
-	transition: 0.3s ease-in-out;
+  content: "";
+  width: 42px;
+  height: 42px;
+  position: absolute;
+  background-color: #ffffff;
+  border-radius: 50%;
+  transform: scale(0);
+  transition: 0.3s ease-in-out;
 }
 .social-icon a:hover::before {
-    transform: scale(1);
+  transform: scale(1);
 }
 .social-icon a img {
-	width: 40%;
-	z-index: 1;
-	transition: 0.3s ease-in-out;
+  width: 40%;
+  z-index: 1;
+  transition: 0.3s ease-in-out;
 }
 .social-icon a:hover img {
-	filter: brightness(0) saturate(100%) invert(0%) sepia(7%) saturate(98%) hue-rotate(346deg) brightness(95%) contrast(86%);
+  filter: brightness(0) saturate(100%) invert(0%) sepia(7%) saturate(98%) hue-rotate(346deg) brightness(95%) contrast(86%);
 }
 .navbar-text button {
   font-weight: 700;
@@ -161,9 +160,9 @@ span.navbar-text {
   padding: 18px 34px;
   font-size: 18px;
   margin-left: 18px;
-	position: relative;
-	background-color: transparent;
-	transition: 0.3s ease-in-out;
+  position: relative;
+  background-color: transparent;
+  transition: 0.3s ease-in-out;
 }
 .navbar-text button span {
   z-index: 1;
@@ -183,15 +182,15 @@ span.navbar-text {
   color: #121212;
 }
 .navbar-text button:hover::before {
-	content: "";
-	width: 100%;
-	height: 100%;
-	position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
 }
 nav.navbar .navbar-toggler:active,
 nav.navbar .navbar-toggler:focus {
-	outline: none;
-    box-shadow: none;
+  outline: none;
+  box-shadow: none;
 }
 nav.navbar .navbar-toggler-icon {
   width: 24px;
@@ -203,37 +202,37 @@ nav.navbar .navbar-toggler-icon {
   top: -2px;
 }
 nav.navbar .navbar-toggler-icon:focus {
-	border-bottom: 2px solid #fff;
+  border-bottom: 2px solid #fff;
 }
 nav.navbar .navbar-toggler-icon:after,
 nav.navbar .navbar-toggler-icon:before {
-	width: 24px;
-	position: absolute;
-	height: 2px;
-	background-color: #fff;
-	top: 0;
-	left: 0;
-	content: '';
-	z-index: 2;
-	transition: all 300ms linear;
+  width: 24px;
+  position: absolute;
+  height: 2px;
+  background-color: #fff;
+  top: 0;
+  left: 0;
+  content: '';
+  z-index: 2;
+  transition: all 300ms linear;
 }
 nav.navbar .navbar-toggler-icon:after {
-	top: 8px;
+  top: 8px;
 }
 nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
-	transform: rotate(45deg);
-	background-color: #fff;
-	height: 2px;
+  transform: rotate(45deg);
+  background-color: #fff;
+  height: 2px;
 }
 nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
-	transform: translateY(8px) rotate(-45deg);
-	background-color: #fff;
-	height: 2px;
+  transform: translateY(8px) rotate(-45deg);
+  background-color: #fff;
+  height: 2px;
 }
 nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
-	border-color: transparent;
+  border-color: transparent;
 }
-/* banner  */
+/* Banner */
 .banner {
   margin-top: 0;
   padding: 150px 0 100px 0;
@@ -291,55 +290,71 @@ nav.navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
   animation: updown 3s linear infinite;
 }
 @keyframes updown {
-    0% {
-        transform: translateY(-20px);
-    }
-    50% {
-        transform: translateY(20px);
-    }
-    100% {
-        transform: translateY(-20px);
-    }
+  0% {
+    transform: translateY(-20px);
+  }
+  50% {
+    transform: translateY(20px);
+  }
+  100% {
+    transform: translateY(-20px);
+  }
 }
 .txt-rotate > .wrap {
   border-right: 0.08em solid #666;
 }
 
-.skill {
-  padding: 0 0 50px 0;
+/* Projects */
+.card-custom {
   position: relative;
+  overflow: hidden;
+  border: none;
+  cursor: pointer;
+  transition: transform 0.3s ease-in-out;
 }
-.skill-bx {
-  background: #151515;
-  border-radius: 64px;
-  text-align: center;
-  padding: 60px 50px;
-  margin-top: -60px;
-}
-.skill h2 {
-	font-size: 45px;
-	font-weight: 700;
-}
-.skill p {
-    color: #B8B8B8;
-    font-size: 18px;
-    letter-spacing: 0.8px;
-    line-height: 1.5em;
-    margin: 14px 0 75px 0;
-}
-.skill-slider {
-  width: 80%;
-  margin: 0 auto;
-  position: relative;
+
+.card-custom:hover {
+  transform: scale(1.05);
 }
-.skill-slider .item img {
-  width: 50%;
-  margin: 0 auto 15px auto;
+
+.card-custom img {
+  transition: transform 0.3s ease-in-out;
 }
-.background-image-left {
-  top: 28%;
+
+.card-custom:hover img {
+  transform: scale(1.1);
+}
+
+.card-custom .card-body {
   position: absolute;
   bottom: 0;
-  width: 40%;
-  z-index: -4;
+  left: 0;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  padding: 20px;
+  transition: opacity 0.3s ease-in-out;
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+.card-custom:hover .card-body {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.card-custom .card-title {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.card-custom .card-text {
+  font-size: 16px;
+}
+
+/* Wrapper for Banner and Projects */
+.content-wrapper {
+  background: url('./assets/img/136646.jpg') no-repeat center center;
+  background-size: cover;
+  padding-top: 150px; /* Same as the padding top of the banner */
 }
diff --git a/src/App.js b/src/App.js
index 740ae14..8e4cfc2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,17 @@
 import './App.css';
 import NavBar from './components/Navbar';
 import Banner from './components/banner';
+import Projects from './components/Projects';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 function App() {
   return (
-    <div className ="App">
-          <NavBar />
-          <Banner /> 
+    <div className="App">
+      <NavBar />
+      <div className="content-wrapper">
+        <Banner />
+        <Projects />
+      </div>
     </div>
   );
 }
diff --git a/src/components/ContactForm.js b/src/components/ContactForm.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 08eeecb..ab055ba 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Container, Nav, Navbar } from "react-bootstrap";
 import logo from "../assets/img/logo.svg";
-
 import navIcon from "../assets/img/github.svg";
 import linkedin from "../assets/img/linkedln.svg"
 const NavBar = () => {
@@ -46,15 +45,6 @@ const NavBar = () => {
             >
               Home
             </Nav.Link>
-            <Nav.Link
-              href="#skills"
-              className={
-                activeLink === "skills" ? "active navbar-link" : "navbar-link"
-              }
-              onClick={() => onUpdateLink("skills")}
-            >
-              Skills
-            </Nav.Link>
             <Nav.Link
               href="#projects"
               className={
diff --git a/src/components/Projects.js b/src/components/Projects.js
index e69de29..ea57dfb 100644
--- a/src/components/Projects.js
+++ b/src/components/Projects.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Card, Container, Row, Col } from 'react-bootstrap';
+
+const projects = [
+  {
+    title: 'Project One',
+    description: 'This is a brief description of project one.',
+    imageUrl: 'https://via.placeholder.com/150',
+    link: 'https://github.com/yourusername/project-one'
+  },
+  {
+    title: 'Project Two',
+    description: 'This is a brief description of project two.',
+    imageUrl: 'https://via.placeholder.com/150',
+    link: 'https://github.com/yourusername/project-two'
+  },
+  {
+    title: 'Project Three',
+    description: 'This is a brief description of project three.',
+    imageUrl: 'https://via.placeholder.com/150',
+    link: 'https://github.com/yourusername/project-three'
+  }
+];
+
+const Projects = () => {
+  const handleCardClick = (link) => {
+    window.open(link, '_blank');
+  };
+
+  return (
+    <section className="projects-section" id="projects">
+      <Container>
+        <Row>
+          {projects.map((project, index) => (
+            <Col key={index} sm={12} md={6} lg={4}>
+              <Card className="mb-4" onClick={() => handleCardClick(project.link)}>
+                <Card.Img variant="top" src={project.imageUrl} />
+                <Card.Body>
+                  <Card.Title>{project.title}</Card.Title>
+                  <Card.Text>{project.description}</Card.Text>
+                </Card.Body>
+              </Card>
+            </Col>
+          ))}
+        </Row>
+      </Container>
+    </section>
+  );
+};
+
+export default Projects;
diff --git a/src/components/Skills.js b/src/components/Skills.js
deleted file mode 100644
index 63a8bf7..0000000
--- a/src/components/Skills.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import meter1 from "../assets/img/meter1.svg";
-import meter2 from "../assets/img/meter2.svg";
-import meter3 from "../assets/img/meter3.svg";
-import Carousel from 'react-multi-carousel';
-import 'react-multi-carousel/lib/styles.css';
-import colorSharp from "../assets/img/color-sharp.png"
-
-const Skills = () => {
-  const responsive = {
-    superLargeDesktop: {
-      // the naming can be any, depends on you.
-      breakpoint: { max: 4000, min: 3000 },
-      items: 5
-    },
-    desktop: {
-      breakpoint: { max: 3000, min: 1024 },
-      items: 3
-    },
-    tablet: {
-      breakpoint: { max: 1024, min: 464 },
-      items: 2
-    },
-    mobile: {
-      breakpoint: { max: 464, min: 0 },
-      items: 1
-    }
-  };
-
-  return (
-    <section className="skill" id="skills">
-        <div className="container">
-            <div className="row">
-                <div className="col-12">
-                    <div className="skill-bx wow zoomIn">
-                        <h2>Skills</h2>
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br></br> Lorem Ipsum has been the industry's standard dummy text.</p>
-                        <Carousel responsive={responsive} infinite={true} className="owl-carousel owl-theme skill-slider">
-                            <div className="item">
-                                <img src={meter1} alt="Image" />
-                                <h5>Web Development</h5>
-                            </div>
-                            <div className="item">
-                                <img src={meter2} alt="Image" />
-                                <h5>Brand Identity</h5>
-                            </div>
-                            <div className="item">
-                                <img src={meter3} alt="Image" />
-                                <h5>Logo Design</h5>
-                            </div>
-                            <div className="item">
-                                <img src={meter1} alt="Image" />
-                                <h5>Web Development</h5>
-                            </div>
-                        </Carousel>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <img className="background-image-left" src={colorSharp} alt="Image" />
-    </section>
-  )
-}
-
-export default Skills;
\ No newline at end of file