diff --git a/frontend/bitmatch/src/App.jsx b/frontend/bitmatch/src/App.jsx
index c3e5c5a..d99e804 100644
--- a/frontend/bitmatch/src/App.jsx
+++ b/frontend/bitmatch/src/App.jsx
@@ -15,6 +15,7 @@ import ProjectListPage from "./views/ProjectListPage";
 import ProjectDetailPage from "./views/IndividualProjectPage";
 import AddProjectPage from "./views/AddProjectPage";
 import ProfilePage from "./views/ProfilePage";
+import AboutPage from "./views/AboutPage";
 
 import OnboardPage from "./views/OnboardPage";
 import InterestPage from "./components/onboarding/Interest";
@@ -33,8 +34,9 @@ function AppRoutes() {
   const pathname = location.pathname;
   const isLanding = pathname === "/" && !isSignedIn;
   const isOnboard = pathname.startsWith("/onboard");
+  const isAbout = pathname.startsWith("/about");
 
-  const shouldUseContainer = !isLanding && !isOnboard;
+  const shouldUseContainer = !isLanding && !isOnboard && !isAbout;
 
   const layoutClass = shouldUseContainer
     ? "container mx-auto px-4 py-16 pb-6 min-h-screen"
@@ -145,6 +147,17 @@ function AppRoutes() {
               }
             />
           </Route>
+
+          {/* About */}
+          <Route
+            path="/about"
+            element={
+              <>
+                <AboutPage />
+              </>
+            }
+          />
+
         </Routes>
       </main>
 
diff --git a/frontend/bitmatch/src/components/about/TeamCard.jsx b/frontend/bitmatch/src/components/about/TeamCard.jsx
new file mode 100644
index 0000000..09c51c8
--- /dev/null
+++ b/frontend/bitmatch/src/components/about/TeamCard.jsx
@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { teamMembers } from "@/lib/team_data";
+import { motion } from "framer-motion";
+
+export default function TeamCard() {
+  const [profiles, setProfiles] = useState([]);
+
+  useEffect(() => {
+    setProfiles(teamMembers);
+  }, []);
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+      {profiles.map((member, idx) => (
+        <motion.a
+          key={member.id}
+          href={member.linkedin}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group border border-border text-muted-foreground p-6 rounded-2xl shadow-sm hover:shadow-lg hover:border-primary/40 hover:scale-[1.02] transition-all duration-300 ease-in-out"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.4, delay: idx * 0.1 }}
+        >
+          <div className="overflow-hidden rounded-xl mb-4">
+            <img
+              src={member.image || "/placeholder.svg"}
+              alt={member.name}
+              className="w-full h-64 object-cover group-hover:brightness-90 transition duration-300 ease-in-out rounded-xl"
+            />
+          </div>
+          <h3 className="text-center text-lg font-semibold text-foreground mb-1">
+            {member.name}
+          </h3>
+          <p className="text-center text-sm text-muted-foreground">{member.title}</p>
+        </motion.a>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/bitmatch/src/components/footer.jsx b/frontend/bitmatch/src/components/footer.jsx
index 542317a..e51d9a0 100644
--- a/frontend/bitmatch/src/components/footer.jsx
+++ b/frontend/bitmatch/src/components/footer.jsx
@@ -1,14 +1,6 @@
 import { Link } from "react-router-dom";
 
 export default function Footer({ links = [], showSocial = true }) {
-  const defaultLinks = [
-    { href: "/terms", label: "Terms" },
-    { href: "/privacy", label: "Privacy" },
-    { href: "/contact", label: "Contact" },
-  ];
-
-  const footerLinks = links.length > 0 ? links : defaultLinks;
-
   return (
     <footer className="flex flex-col items-center justify-center border-t">
       <div className="container flex flex-col items-center justify-center gap-4 py-6 px-4 text-center md:flex-row md:items-center md:justify-between md:text-left">
@@ -17,76 +9,6 @@ export default function Footer({ links = [], showSocial = true }) {
             &copy; {new Date().getFullYear()} BITMATCH. All rights reserved.
           </p>
         </div>
-
-        <nav className="flex flex-wrap gap-4 md:gap-6">
-          {footerLinks.map((link) => (
-            <Link
-              key={link.href}
-              to={link.href}
-              className="text-sm font-medium hover:underline underline-offset-4"
-            >
-              {link.label}
-            </Link>
-          ))}
-        </nav>
-
-        {showSocial && (
-          <div className="flex gap-4">
-            <Link to="#" className="text-muted-foreground hover:text-foreground">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="h-5 w-5"
-              >
-                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
-              </svg>
-              <span className="sr-only">Facebook</span>
-            </Link>
-            <Link to="#" className="text-muted-foreground hover:text-foreground">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="h-5 w-5"
-              >
-                <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
-                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
-                <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
-              </svg>
-              <span className="sr-only">Instagram</span>
-            </Link>
-            <Link to="#" className="text-muted-foreground hover:text-foreground">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className="h-5 w-5"
-              >
-                <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
-              </svg>
-              <span className="sr-only">Twitter</span>
-            </Link>
-          </div>
-        )}
       </div>
     </footer>
   );
diff --git a/frontend/bitmatch/src/components/navbar.jsx b/frontend/bitmatch/src/components/navbar.jsx
index c6edeec..c37b4b5 100644
--- a/frontend/bitmatch/src/components/navbar.jsx
+++ b/frontend/bitmatch/src/components/navbar.jsx
@@ -15,7 +15,6 @@ export default function Navbar({ links = [] }) {
   const { user } = useUser();
   const defaultLinks = [
     { href: "/about", label: "About" },
-    { href: "/contact", label: "Contact" },
     ...(user?.id
       ? [
           { href: "/project-list", label: "Browse" },
diff --git a/frontend/bitmatch/src/lib/team_data.js b/frontend/bitmatch/src/lib/team_data.js
new file mode 100644
index 0000000..72d882a
--- /dev/null
+++ b/frontend/bitmatch/src/lib/team_data.js
@@ -0,0 +1,33 @@
+// src/lib/team_data.js
+
+export const teamMembers = [
+    {
+      id: 1,
+      name: "Larry La",
+      title: "Software Engineer",
+      image: "https://avatars.githubusercontent.com/u/137100338?v=4",
+      linkedin: "https://www.linkedin.com/in/lqla/",
+    },
+    {
+      id: 2,
+      name: "Rebecca Smith",
+      title: "Frontend Developer",
+      image: "https://avatars.githubusercontent.com/u/2145912?v=4",
+      linkedin: "https://www.linkedin.com/in/rebecca-l-smith-3075604/",
+    },
+    {
+      id: 3,
+      name: "Luis Dominguez",
+      title: "Software Engineer",
+      image: "https://avatars.githubusercontent.com/u/118137779?v=4",
+      linkedin: "https://www.linkedin.com/in/luis-dominguez-9b11702b5/",
+    },
+    {
+      id: 4,
+      name: "William Garcia",
+      title: "Software Engineer",
+      image: "https://avatars.githubusercontent.com/u/102125255?v=4",
+      linkedin: "https://www.linkedin.com/in/william-garcia-946709297/",
+    },
+  ];
+  
\ No newline at end of file
diff --git a/frontend/bitmatch/src/views/AboutPage.jsx b/frontend/bitmatch/src/views/AboutPage.jsx
new file mode 100644
index 0000000..2ac328c
--- /dev/null
+++ b/frontend/bitmatch/src/views/AboutPage.jsx
@@ -0,0 +1,189 @@
+import React from "react";
+import { motion } from "framer-motion";
+import TeamCard from "@/components/about/TeamCard";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+
+function ContactItem({ icon: Icon, label, value }) {
+  return (
+    <div className="flex items-start">
+      <Icon className="h-5 w-5 mr-3 text-muted-foreground mt-0.5" />
+      <div>
+        <h3 className="font-medium text-foreground">{label}</h3>
+        <p className="text-muted-foreground">{value}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function AboutPage() {
+  return (
+    <div className="mt-16">
+      {/* Header Section */}
+      <motion.section
+        initial={{ opacity: 0, y: 40 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, ease: "easeOut" }}
+      >
+        <div className="py-24 w-full bg-black text-white text-center">
+          <motion.h1
+            className="text-4xl md:text-5xl font-bold tracking-tight"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.2 }}
+          >
+            About
+          </motion.h1>
+        </div>
+
+        {/* Story Section */}
+        <motion.div
+          className="pt-24 pb-32 px-4 sm:px-6 max-w-4xl mx-auto space-y-6 text-muted-foreground text-lg leading-relaxed"
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+        >
+          <p>
+            BitMatch was created by a team of students from Cal Poly Pomona who
+            came together under the name Bit by Bit to solve a common challenge:
+            helping students connect with meaningful project opportunities.
+          </p>
+          <p>
+            Our platform acts as a digital project incubator, where users can
+            post their ideas, specify skills they need, and discover teammates
+            with shared interests. Meanwhile, students looking to contribute can
+            receive intelligent project recommendations based on their profile.
+          </p>
+          <p>
+            Our mission is to foster collaboration, drive innovation, and give
+            students real-world experience in their fields by enabling them to
+            build together.
+          </p>
+        </motion.div>
+      </motion.section>
+
+      {/* Team Section */}
+      <motion.section
+        className="bg-white pb-24 px-4 sm:px-6"
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.6 }}
+      >
+        <div className="max-w-6xl mx-auto text-center">
+          <motion.h2
+            className="text-3xl md:text-4xl font-bold text-foreground mb-6"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+          >
+            The Developers
+          </motion.h2>
+          <p className="text-muted-foreground text-sm md:text-base mb-12">
+            Meet the passionate team behind BitMatch.
+          </p>
+          <TeamCard />
+        </div>
+      </motion.section>
+
+      {/* Contact Form Section */}
+      <motion.section
+        className="bg-muted py-24 mt-32 px-4 sm:px-6 hidden"
+        initial={{ opacity: 0, y: 40 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.6 }}
+      >
+        <div className="max-w-2xl mx-auto">
+          <h2 className="text-3xl font-bold mb-6 text-center text-foreground">
+            Contact Us
+          </h2>
+          <p className="text-muted-foreground mb-10 text-center text-sm md:text-base">
+            Have questions or want to learn more about our mission? Send us a
+            message—we'd love to hear from you.
+          </p>
+
+          <form className="space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <label
+                  htmlFor="first-name"
+                  className="text-sm font-medium text-foreground"
+                >
+                  First name
+                </label>
+                <Input
+                  id="first-name"
+                  name="firstName"
+                  placeholder="John"
+                  className="bg-background text-foreground focus:ring-2 focus:ring-primary"
+                />
+              </div>
+              <div className="space-y-2">
+                <label
+                  htmlFor="last-name"
+                  className="text-sm font-medium text-foreground"
+                >
+                  Last name
+                </label>
+                <Input
+                  id="last-name"
+                  name="lastName"
+                  placeholder="Doe"
+                  className="bg-background text-foreground focus:ring-2 focus:ring-primary"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <label
+                htmlFor="email"
+                className="text-sm font-medium text-foreground"
+              >
+                Email
+              </label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                placeholder="john.doe@example.com"
+                className="bg-background text-foreground focus:ring-2 focus:ring-primary"
+              />
+            </div>
+            <div className="space-y-2">
+              <label
+                htmlFor="subject"
+                className="text-sm font-medium text-foreground"
+              >
+                Subject
+              </label>
+              <Input
+                id="subject"
+                name="subject"
+                placeholder="How can we help you?"
+                className="bg-background text-foreground focus:ring-2 focus:ring-primary"
+              />
+            </div>
+            <div className="space-y-2">
+              <label
+                htmlFor="message"
+                className="text-sm font-medium text-foreground"
+              >
+                Message
+              </label>
+              <Textarea
+                id="message"
+                name="message"
+                placeholder="Tell us about your project..."
+                className="min-h-[150px] bg-background text-foreground focus:ring-2 focus:ring-primary"
+              />
+            </div>
+            <Button type="submit" className="w-full">
+              Send Message
+            </Button>
+          </form>
+        </div>
+      </motion.section>
+    </div>
+  );
+}