diff --git a/src/App.css b/src/App.css
index 2af3445..2f36007 100644
--- a/src/App.css
+++ b/src/App.css
@@ -238,8 +238,6 @@ body {
   letter-spacing: -2.5px;
 }
 .project-container {
-  display: flex;
-  justify-content: space-between;
   width: 80%;
   margin: 2% auto 0;
 }
diff --git a/src/Pages/Projects.jsx b/src/Pages/Projects.jsx
index d1afcac..2274a86 100644
--- a/src/Pages/Projects.jsx
+++ b/src/Pages/Projects.jsx
@@ -1,45 +1,65 @@
 import React from "react";
 import * as Images from "../images";
-import {Container, Row, Col} from "react-bootstrap"
+import { Container, Row, Col } from "react-bootstrap";
 export default function Projects() {
   return (
     <Container fluid className="project-page">
       <Row className="project-header">Project</Row>
-      <Row className="project-container flex flex-lg-row flex-column align-items-center align-items-lg-start">
-        <Col lg = {3} sm = {12} className="project-section w-lg-50 w-75 mr-lg-1 mb-5 pr-0 pl-0 ">
+      <Row className="project-container flex flex-lg-row flex-column align-items-center align-items-lg-start justify-content-between">
+        <Col
+          lg={3}
+          sm={12}
+          className="project-section w-lg-50 w-75 mr-lg-1 mb-5 pr-0 pl-0 "
+        >
           <div className="image-container">
-          <img
-            src={Images.weatherThumbNail}
-            alt="weather-thumb-nail"
-            className="project-thumb-nail"
-          />
-          <div className="middle">
-            <div className="text">
-             <a href = "https://clinquant-marshmallow-2752bd.netlify.app/" target="_blank" rel="noopener noreferrer">View live</a>
-             <a href="https://github.com/tin0312/weather-app">View source</a>
+            <img
+              src={Images.weatherThumbNail}
+              alt="weather-thumb-nail"
+              className="project-thumb-nail"
+            />
+            <div className="middle">
+              <div className="text">
+                <a
+                  href="https://clinquant-marshmallow-2752bd.netlify.app/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  View live
+                </a>
+                <a href="https://github.com/tin0312/weather-app">View source</a>
+              </div>
             </div>
           </div>
-          </div>
           <div className="project-content">
             <h3 className="project-title">WEATHER APP</h3>
             <h4 className="project-stacks">HTML • CSS • React • API </h4>
           </div>
         </Col>
         {/* project section-2 */}
-        <Col lg = {3} sm = {12} className="project-section w-lg-18 w-75 mb-5 pr-0 pl-0">
+        <Col
+          lg={3}
+          sm={12}
+          className="project-section w-lg-18 w-75 mb-5 pr-0 pl-0"
+        >
           <div className="image-container">
-          <img
-            src={Images.quizThumbNail}
-            alt="weather-thumb-nail"
-            className="project-thumb-nail"
-          />
-          <div className="middle">
-            <div className="text">
-             <a href = "https://unrivaled-sorbet-b6c280.netlify.app/" target="_blank" rel="noopener noreferrer">View live</a>
-             <a href="https://github.com/tin0312/quizApp">View source</a>
+            <img
+              src={Images.quizThumbNail}
+              alt="weather-thumb-nail"
+              className="project-thumb-nail"
+            />
+            <div className="middle">
+              <div className="text">
+                <a
+                  href="https://unrivaled-sorbet-b6c280.netlify.app/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  View live
+                </a>
+                <a href="https://github.com/tin0312/quizApp">View source</a>
+              </div>
             </div>
           </div>
-          </div>
           <div className="project-content">
             <h3 className="project-title"> QUIZZICAL</h3>
             <h4 className="project-stacks">HTML • CSS • React • API </h4>
@@ -47,20 +67,32 @@ export default function Projects() {
         </Col>
 
         {/* Project section-3 */}
-        <Col lg = {3} sm = {12} className="project-section w-lg-18 mb-5 w-75 pr-0 pl-0">
+        <Col
+          lg={3}
+          sm={12}
+          className="project-section w-lg-18 mb-5 w-75 pr-0 pl-0"
+        >
           <div className="image-container">
-          <img
-            src={Images.roomsystemThumbNail}
-            alt="weather-thumb-nail"
-            className="project-thumb-nail"
-          />
-          <div className="middle">
-            <div className="text">
-             <a href = "http://roomreservation.pythonanywhere.com/" target="_blank" rel="noopener noreferrer">View live</a>
-             <a href="https://github.com/tin0312/roomBookingSystem">View source</a>
+            <img
+              src={Images.roomsystemThumbNail}
+              alt="weather-thumb-nail"
+              className="project-thumb-nail"
+            />
+            <div className="middle">
+              <div className="text">
+                <a
+                  href="http://roomreservation.pythonanywhere.com/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  View live
+                </a>
+                <a href="https://github.com/tin0312/roomBookingSystem">
+                  View source
+                </a>
+              </div>
             </div>
           </div>
-          </div>
           <div className="project-content">
             <h3 className="project-title">ROOM BOOKING SYSTEM</h3>
             <h4 className="project-stacks">
@@ -70,19 +102,29 @@ export default function Projects() {
         </Col>
 
         {/* Project section-4 */}
-        <Col lg = {3} sm = {12} className="project-section w-lg-18 mb-5 w-75 pr-0 pl-0">
+        <Col
+          lg={3}
+          sm={12}
+          className="project-section w-lg-18 mb-5 w-75 pr-0 pl-0"
+        >
           <div className="image-container">
-          <img
-            src={Images.chromeExtThumbNail}
-            alt="weather-thumb-nail"
-            className="project-thumb-nail"
-          />
-          <div className="middle">
-            <div className="text">
-             <a href = "https://github.com/tin0312/walk-more-than-you-scroll" target="_blank" rel="noopener noreferrer">View source</a>
+            <img
+              src={Images.chromeExtThumbNail}
+              alt="weather-thumb-nail"
+              className="project-thumb-nail"
+            />
+            <div className="middle">
+              <div className="text">
+                <a
+                  href="https://github.com/tin0312/walk-more-than-you-scroll"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  View source
+                </a>
+              </div>
             </div>
           </div>
-          </div>
           <div className="project-content">
             <h3 className="project-title">Walk-As-You-Scroll</h3>
             <h4 className="project-stacks">
@@ -90,6 +132,82 @@ export default function Projects() {
             </h4>
           </div>
         </Col>
+
+        {/* Project section-5 */}
+        <Col
+          lg={3}
+          sm={12}
+          className="project-section w-lg-18 mb-5 w-75 pr-0 pl-0"
+        >
+          <div className="image-container">
+            <img
+              src={Images.pwAppThumbnail}
+              alt="pwApp-thumb-nail"
+              className="project-thumb-nail"
+            />
+            <div className="middle">
+              <div className="text">
+                <a
+                  href="https://dynamic-platypus-74b5b2.netlify.app/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  View live
+                </a>
+                <a
+                  href="https://github.com/tin0312/password-generator"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  View source
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="project-content">
+            <h3 className="project-title">Password Generator</h3>
+            <h4 className="project-stacks">HTML • CSS • React • Bootstrap </h4>
+          </div>
+        </Col>
+
+        {/* Project section-6 */}
+        <Col
+          lg={3}
+          sm={12}
+          className="project-section w-lg-18 mb-5 w-75 pr-0 pl-0"
+        >
+          <div className="image-container">
+            <img
+              src={Images.ecommerceThumbnail}
+              alt="upcoming-thumb-nail"
+              className="project-thumb-nail"
+            />
+            <div className="middle">
+              <div className="text">
+              <a
+                  href="#"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  In Progress
+                </a>
+                <a
+                  href="https://github.com/tin0312/e-commerce"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  View source
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="project-content">
+            <h3 className="project-title">E-Commerce</h3>
+            <h4 className="project-stacks">
+              HTML • SASS • React • Tailwind • NextJS • Prisma • Stripe
+            </h4>
+          </div>
+        </Col>
       </Row>
     </Container>
   );
diff --git a/src/images/e-commerceThumbnail.png b/src/images/e-commerceThumbnail.png
new file mode 100644
index 0000000..cf8493c
Binary files /dev/null and b/src/images/e-commerceThumbnail.png differ
diff --git a/src/images/index.js b/src/images/index.js
index eb10d14..7004f16 100644
--- a/src/images/index.js
+++ b/src/images/index.js
@@ -18,4 +18,5 @@ export { default as weatherThumbNail} from "./weatherThumbNail.png"
 export { default as quizThumbNail} from "./quizThumbNail.png"
 export { default as roomsystemThumbNail} from "./roomsystemThumbNail.png"
 export { default as chromeExtThumbNail} from "./chromeExtThumbNail.png"
-
+export { default as pwAppThumbnail} from "./pwAppThumbnail.png"
+export { default as ecommerceThumbnail} from "./e-commerceThumbnail.png"
diff --git a/src/images/pwAppThumbnail.png b/src/images/pwAppThumbnail.png
new file mode 100644
index 0000000..007f840
Binary files /dev/null and b/src/images/pwAppThumbnail.png differ