diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
index 478beae..5e120ce 100644
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
@@ -18478,16 +18478,16 @@
             }
         },
         "node_modules/typescript": {
-            "version": "5.4.5",
-            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-            "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+            "version": "4.9.5",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+            "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
             "peer": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
             },
             "engines": {
-                "node": ">=14.17"
+                "node": ">=4.2.0"
             }
         },
         "node_modules/unbox-primitive": {
diff --git a/Frontend/src/App.js b/Frontend/src/App.js
index 25e4574..1708c61 100644
--- a/Frontend/src/App.js
+++ b/Frontend/src/App.js
@@ -10,6 +10,7 @@ import { PrivateRoute } from "./components/router/PrivateRouter";
 import { PrivateRouteAnalysis } from "./components/router/PrivateRouterAnalysis";
 import Analysis from "./pages/analysis/analysis";
 import Error from "./pages/error/error";
+import AboutPage from "./pages/AboutUs/AboutPage";
 
 function App() {
   const { login } = useContext(LoginContext);
@@ -53,8 +54,9 @@ function App() {
             </PrivateRouteAnalysis>
           }
         />
-        <Route path="*"  element = {<Error />} />
-      </Routes> 
+        <Route path="/aboutus" element={<AboutPage />} />
+        <Route path="*" element={<Error />} />
+      </Routes>
     </BrowserRouter>
   );
 }
diff --git a/Frontend/src/pages/AboutUs/AboutPage.jsx b/Frontend/src/pages/AboutUs/AboutPage.jsx
new file mode 100644
index 0000000..418f461
--- /dev/null
+++ b/Frontend/src/pages/AboutUs/AboutPage.jsx
@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from "react";
+import style from "./AboutPage.module.css";
+import axios from "axios";
+import ContributorCard from "./ContributorCard";
+
+export default function AboutPage() {
+  const [contributors, setContributors] = useState([]);
+
+  useEffect(() => {
+    async function fetchContributors() {
+      try {
+        const response = await axios.get(
+          "https://api.github.com/repos/algovengers/MindMate/contributors"
+        );
+        setContributors(response.data);
+      } catch (error) {
+        console.error("Error fetching contributors:", error);
+      }
+    }
+
+    fetchContributors();
+  }, []);
+
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: "instant" });
+  }, []);
+
+  return (
+    <div className={style.about}>
+      <div
+        className={`${style.responsivecontainerblock} ${style.bigContainer}`}
+      >
+        <div
+          className={`${style.responsivecontainerblock} ${style.container} ${style.bottomContainer}`}
+        >
+          <div className={`${style.allText} ${style.bottomText}`}>
+            <p className={style.headingText}>About Us</p>
+            <p className={style.subHeadingText}>We Are build</p>
+            <p className={style.description}>
+              Welcome to our mental health chat assistant platform. We are here
+              for you – a supportive community where our empathetic AI actively
+              listens, offers encouragement, and provides valuable resources.
+              Together, we prioritize your well-being, fostering open dialogue
+              around mental health. You're not alone; we, as your dedicated
+              companions, stand with you on your journey. Let's build a space
+              where understanding and support thrive.
+            </p>
+            <a
+              href="https://www.youtube.com/watch?v=fUD5HcZhtQI"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <button className={style.explore}>View More</button>
+            </a>
+          </div>
+          <div className={style.videoContainer}>
+            <iframe
+              allowFullScreen
+              className={style.mainVideo}
+              controls
+              src="https://www.youtube.com/embed/fUD5HcZhtQI?si=GwQPNzqdOjFZ8kXG"
+            ></iframe>
+            <img
+              className={`${style.dotsImg} image-block`}
+              src="https://workik-widget-assets.s3.amazonaws.com/widget-assets/images/cw3.svg"
+              alt="Decorative dots"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className={style.contributors}>
+        <h1>Meet Our Team</h1>
+        <div className={style.contributorsGrid}>
+          {contributors.map((contributorData) => (
+            <ContributorCard
+              key={contributorData.id}
+              contributor={contributorData}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/Frontend/src/pages/AboutUs/AboutPage.module.css b/Frontend/src/pages/AboutUs/AboutPage.module.css
new file mode 100644
index 0000000..8a806f7
--- /dev/null
+++ b/Frontend/src/pages/AboutUs/AboutPage.module.css
@@ -0,0 +1,345 @@
+.about {
+  width: 100%;
+  min-height: 100vh;
+  padding: 10px 20px;
+  background: red;
+  background-image: linear-gradient(135deg, #f7f3ef 0%, #c0aa99 100%);
+  background-attachment: fixed;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  font-family: "Poppins", sans-serif;
+}
+
+.responsivecontainerblock {
+  min-height: 75px;
+  height: fit-content;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: auto;
+  justify-content: flex-start;
+}
+
+.textBlk {
+  margin: 0;
+  padding: 10px;
+  line-height: 25px;
+}
+
+.bigContainer {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 50px;
+}
+
+.headingText {
+  font-size: 23px;
+  font-weight: 700;
+  line-height: 28px;
+  color: rgb(0, 135, 177);
+  margin: 0 0 10px 0;
+  padding: 0 10px 0 0;
+}
+
+.allText {
+  padding: 0;
+  width: 50%;
+  margin: 0;
+}
+
+.subHeadingText {
+  color: rgb(102, 102, 102);
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 700;
+  margin: 0 0 15px 0;
+  padding: 0 10px 0 0;
+}
+
+.description {
+  font-size: 18px;
+  line-height: 28px;
+  color: rgb(0, 0, 0);
+  padding: 0 10px 0 0;
+  margin: 0 0 40px 0;
+}
+
+.explore {
+  font-size: 18px;
+  line-height: 28px;
+  color: rgb(255, 255, 255);
+  background-color: rgb(255, 17, 0);
+  cursor: pointer;
+  box-shadow: rgba(5, 5, 5, 0.25) 0px 10px 20px;
+  border-radius: 10px;
+  padding: 9px 45px;
+  transition: 0.5s all ease;
+}
+
+.explore:hover {
+  background-color: rgb(255, 235, 234);
+  color: rgb(0, 0, 0);
+}
+
+.container {
+  margin: 80px auto 50px auto;
+  justify-content: center;
+  align-items: center;
+  max-width: 1320px;
+  padding: 10px;
+}
+
+.bottomContainer {
+  flex-direction: row;
+  margin: 50px auto;
+}
+
+.aboveText {
+  margin-left: 40px;
+}
+
+.bottomText {
+  margin: 0 10px 0 0;
+}
+
+.mainVideo {
+  width: 85%;
+  height: 450px;
+  margin-top: -30px;
+  border-radius: 10px;
+}
+
+.videoContainer {
+  width: 46%;
+  height: 600px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  padding-left: 10px;
+}
+
+.mainVideo {
+  z-index: 10;
+}
+
+.dotsImg {
+  position: absolute;
+  width: 80%;
+  height: 600px;
+  top: 0;
+  right: 0;
+  object-fit: cover;
+}
+
+@media (max-width: 1024px) {
+  .container {
+    max-width: 850px;
+  }
+
+  .description {
+    font-size: 18px;
+  }
+
+  .allText {
+    width: 40%;
+    margin-left: 20px;
+  }
+
+  .bigContainer {
+    padding: 10px;
+  }
+
+  .subHeadingText {
+    font-size: 30px;
+  }
+
+  .bottomContainer {
+    margin-top: 80px;
+  }
+
+  .allText.bottomText {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 30px 0;
+  }
+
+  .bottomContainer {
+    flex-direction: column;
+  }
+
+  .headingText {
+    text-align: center;
+    font-size: 22px;
+  }
+
+  .subHeadingText {
+    text-align: center;
+  }
+
+  .description {
+    text-align: center;
+  }
+
+  .explore {
+    margin: 0 auto;
+  }
+
+  .dotsImg {
+    width: 50%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .videoContainer {
+    width: 100%;
+  }
+
+  .mainVideo {
+    width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .allText {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .container {
+    flex-direction: column;
+    height: auto;
+  }
+
+  .headingText {
+    text-align: center;
+  }
+
+  .subHeadingText {
+    text-align: center;
+    font-size: 28px;
+    line-height: 38px;
+  }
+
+  .description {
+    text-align: center;
+    font-size: 18px;
+    line-height: 27px;
+  }
+
+  .allText {
+    margin-top: 40px;
+  }
+
+  .container {
+    margin: 80px auto 50px auto;
+  }
+
+  .bottomContainer {
+    margin: 50px auto;
+    padding-left: 10px;
+  }
+
+  .bottomText {
+    margin-top: 40px;
+  }
+
+  .mainVideo {
+    height: 400px;
+  }
+
+  .videoContainer {
+    height: 550px;
+  }
+
+  .explore {
+    font-size: 16px;
+    padding: 8px 40px;
+  }
+
+  .bigContainer {
+    padding: 0 50px;
+  }
+}
+
+@media (max-width: 500px) {
+  .container {
+    padding: 10px 0;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .bigContainer {
+    padding: 10px 25px;
+  }
+
+  .allText {
+    width: 100%;
+  }
+
+  .bigContainer {
+    padding: 10px 20px;
+  }
+
+  .explore {
+    font-size: 16px;
+    line-height: 25px;
+    padding: 8px 35px;
+  }
+
+  .dotsImg {
+    width: 80%;
+    height: 100%;
+  }
+
+  .mainVideo {
+    height: 260px;
+  }
+
+  .videoContainer {
+    height: 320px;
+  }
+
+  .bottomContainer {
+    padding: 0;
+  }
+
+  .description {
+    font-size: 12px;
+    line-height: 23px;
+    margin-bottom: 30px;
+  }
+
+  .subHeadingText {
+    font-size: 24px;
+  }
+}
+
+/* Contributors section */
+
+.contributors {
+  margin: 10px 0;
+  padding: 0 20px;
+}
+
+.contributors h1 {
+  font-size: 35px;
+  text-transform: capitalize;
+  font-weight: 800;
+  color: blue;
+}
+
+.contributorsGrid {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+}
diff --git a/Frontend/src/pages/AboutUs/ContributorCard.jsx b/Frontend/src/pages/AboutUs/ContributorCard.jsx
new file mode 100644
index 0000000..80a450f
--- /dev/null
+++ b/Frontend/src/pages/AboutUs/ContributorCard.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+import style from "./ContributorCard.module.css";
+
+const ContributorCard = ({ contributor }) => {
+  return (
+    <div className={style.contributorCard}>
+      <img
+        src={contributor.avatar_url}
+        alt={`${contributor.login} avatar`}
+        className={style.avatar}
+      />
+      <div className={style.contributorDetails}>
+        <h2 className={style.contributorName}>{contributor.login}</h2>
+        <p className={style.contributorContributions}>
+          Contributions: {contributor.contributions}
+        </p>
+        <div className={style.contributorLinks}>
+          <a
+            href={contributor.html_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={style.profileLink}
+          >
+            GitHub Profile
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContributorCard;
diff --git a/Frontend/src/pages/AboutUs/ContributorCard.module.css b/Frontend/src/pages/AboutUs/ContributorCard.module.css
new file mode 100644
index 0000000..5fbfd82
--- /dev/null
+++ b/Frontend/src/pages/AboutUs/ContributorCard.module.css
@@ -0,0 +1,62 @@
+/* ContributorCard.module.css */
+
+.contributorCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 1px solid #ddd;
+  border-radius: 15px;
+  padding: 16px;
+  margin: 16px;
+  width: 220px;
+  background-color: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid red;
+}
+
+.avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+
+.contributorDetails {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.contributorName {
+  font-size: 18px;
+  text-align: left;
+  margin: 0;
+  text-transform: capitalize;
+  color: #333;
+}
+
+.contributorContributions {
+  font-size: 16px;
+  color: #000000;
+  margin: 8px 0;
+  font-weight: bolder;
+}
+
+.contributorLinks {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.contributorLinks a {
+  text-decoration: none;
+  color: #ffffff;
+  font-size: 14px;
+  text-align: center;
+  padding: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  background: #007bff;
+  width: 100%;
+}
diff --git a/Frontend/src/pages/homepage/homepage.js b/Frontend/src/pages/homepage/homepage.js
index 0ed4209..45bcfd7 100644
--- a/Frontend/src/pages/homepage/homepage.js
+++ b/Frontend/src/pages/homepage/homepage.js
@@ -1,6 +1,6 @@
 import styles from "./homepage.module.css";
 import { Logo } from "../../svgs/logoSVG";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import Image from "../../svgs/SVG/SVG/FrontImage3.svg";
 import { useCookies } from "react-cookie";
 import axios from "axios";
@@ -44,7 +44,7 @@ function Homepage() {
   const scrollToTop = () => {
     window.scrollTo({
       top: 0,
-      behavior: "smooth"
+      behavior: "smooth",
     });
   };
 
@@ -78,7 +78,15 @@ function Homepage() {
               }
             }}
           >
-            {!loggedIn ? <span className="flex items-center gap-2">Login <LuLogIn/></span> : <span className="flex items-center gap-2">Logout <LuLogOut/></span>}
+            {!loggedIn ? (
+              <span className="flex items-center gap-2">
+                Login <LuLogIn />
+              </span>
+            ) : (
+              <span className="flex items-center gap-2">
+                Logout <LuLogOut />
+              </span>
+            )}
           </button>
         </div>
       </header>
@@ -115,6 +123,7 @@ function Homepage() {
           you on your journey. Let's build a space where understanding and
           support thrive.
         </div>
+        <Link to={"/aboutus"}>Read More....</Link>
       </section>
       <section className={`mt-8 ${styles.statsBox}`}>
         <h1 className="text-center text-4xl font-bold mb-8">
@@ -181,7 +190,7 @@ function Homepage() {
           <div className="grid grid-cols-2 h-5/6">
             <div className="flex flex-col justify-center items-center gap-3 text-lg">
               <div onClick={aboutClick} className="cursor-pointer">
-                About
+                <Link to={"/aboutus"}> About</Link>
               </div>
               <div onClick={articlesClick} className="cursor-pointer">
                 Articles