diff --git a/htmlexample.html b/htmlexample.html
index 3859573..0183574 100644
--- a/htmlexample.html
+++ b/htmlexample.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Basic HTML Example</title>
+  <title>About Me</title>
   <style>
     body {
       font-family: Arial, sans-serif;
@@ -38,8 +38,8 @@
 </head>
 <body>
 
-  <h1>Welcome to My Page</h1>
-  <p>Hello World!</p>
+  <h1>Hello World!</h1>
+  <p>I am him</p>
   <a href="https://google.com">This is a link</a>
   <hr>
   <div>
diff --git a/index.html b/index.html
index 8f203c7..c2ef4f6 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/public/RonaldPhoto.jpg b/public/RonaldPhoto.jpg
new file mode 100644
index 0000000..536ee63
Binary files /dev/null and b/public/RonaldPhoto.jpg differ
diff --git a/public/aaryan.jpg b/public/aaryan.jpg
new file mode 100644
index 0000000..d03850d
Binary files /dev/null and b/public/aaryan.jpg differ
diff --git a/public/anushapic.png b/public/anushapic.png
new file mode 100644
index 0000000..1aafd1e
Binary files /dev/null and b/public/anushapic.png differ
diff --git a/public/mayukha_pfp.png b/public/mayukha_pfp.png
new file mode 100644
index 0000000..3935ddc
Binary files /dev/null and b/public/mayukha_pfp.png differ
diff --git a/public/mihika-profilepic.jpeg b/public/mihika-profilepic.jpeg
new file mode 100644
index 0000000..477cee3
Binary files /dev/null and b/public/mihika-profilepic.jpeg differ
diff --git a/public/ml_pfp.jpg b/public/ml_pfp.jpg
new file mode 100644
index 0000000..23d5338
Binary files /dev/null and b/public/ml_pfp.jpg differ
diff --git a/public/shivam.png b/public/shivam.png
new file mode 100644
index 0000000..0d04174
Binary files /dev/null and b/public/shivam.png differ
diff --git a/src/Home.jsx b/src/Home.jsx
index 5c24f14..f2897bc 100644
--- a/src/Home.jsx
+++ b/src/Home.jsx
@@ -1,24 +1,28 @@
-import React, { useState} from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { FaInstagram, FaLinkedin, FaGithubSquare } from "react-icons/fa";
 
 export default function Home() {
-
   const [showOutline, setShowOutline] = useState(false);
 
-  // Names and images for each profile 
+  // Names and images for each profile
   const profileData = [
-    { name: "Ryan(Demo)", imageSrc: "/ryanpic.jpg" },  // Feel free to remove demo page whenever you want
-    { name: "Person1", imageSrc: "/defaultpfp.jpg" },
-    { name: "Person2", imageSrc: "/defaultpfp.jpg" },
-    { name: "Person3", imageSrc: "/defaultpfp.jpg" },
-    { name: "Person4", imageSrc: "/defaultpfp.jpg" },
-    { name: "Person5", imageSrc: "/defaultpfp.jpg" },
-    { name: "Person6", imageSrc: "/defaultpfp.jpg" },
-    { name: "Person7", imageSrc: "/defaultpfp.jpg" },
+    { name: "Ryan(Demo)", imageSrc: "/ryanpic.jpg" }, // Feel free to remove demo page whenever you want
+    { name: "Mayukha", imageSrc: "/mayukha_pfp.png" },  // Feel free to remove demo page whenever you want
+    { name: "Shivam", imageSrc: "/shivam.png" },
+    { name: "Ronald Tsai", imageSrc: "/RonaldPhoto.jpg" },
+    { name: "Matthew", imageSrc: "/ml_pfp.jpg" },
+    { name: "Mihika", imageSrc: "/public/mihika-profilepic.jpeg" },
+    {
+      name: "Pradyun Tandra",
+      imageSrc:
+        "https://media.licdn.com/dms/image/v2/D5603AQH156V3qNZ3Wg/profile-displayphoto-shrink_200_200/profile-displayphoto-shrink_200_200/0/1709673303373?e=1735171200&v=beta&t=slV4nVpzXIH3_0x8pzmF6ezu69WIg3-NCk_Bycv3I6Q",
+    },
+    { name: "Aaryan Bondre", imageSrc: "/aaryan.jpg" },
+    { name: "Anusha", imageSrc: "/anushapic.png" },
     { name: "Person8", imageSrc: "/defaultpfp.jpg" },
     { name: "Person9", imageSrc: "/defaultpfp.jpg" },
-    { name: "Person10", imageSrc: "/defaultpfp.jpg" }
+    { name: "Person10", imageSrc: "/defaultpfp.jpg" },
   ];
 
   const toggleOutline = () => {
@@ -27,11 +31,19 @@ export default function Home() {
 
   return (
     <>
-      <div className={`min-h-screen w-screen bg-black flex flex-col ${showOutline ? 'outline' : ''}`}>
+      <div
+        className={`min-h-screen w-screen bg-black flex flex-col ${
+          showOutline ? "outline" : ""
+        }`}
+      >
         {/* Outline Toggle Button */}
         <div className="absolute top-4 right-4 flex items-center">
           <label className="switch">
-            <input type="checkbox" checked={showOutline} onChange={toggleOutline} />
+            <input
+              type="checkbox"
+              checked={showOutline}
+              onChange={toggleOutline}
+            />
             <span className="slider round"></span>
           </label>
           <span className="ml-2 text-white">Toggle Outline</span>
@@ -45,7 +57,10 @@ export default function Home() {
 
         <div className="w-full flex flex-wrap justify-center px-48 gap-16 mb-12">
           {profileData.map((profile) => (
-            <div key={profile.name} className="w-48 h-48 flex flex-col items-center font-monument text-xl">
+            <div
+              key={profile.name}
+              className="w-48 h-48 flex flex-col items-center font-monument text-xl"
+            >
               <Link to={`/profile/${profile.name}`}>
                 <img
                   className="profile-img"
@@ -53,7 +68,9 @@ export default function Home() {
                   alt={`${profile.name}'s profile`}
                 />
               </Link>
-              <span className="text-white font-semibold mt-2">{profile.name}</span>
+              <span className="text-white font-semibold mt-2">
+                {profile.name}
+              </span>
             </div>
           ))}
         </div>
@@ -63,10 +80,16 @@ export default function Home() {
             <h1 className="pb-4 text-htfgreen">CONTACT US</h1>
             <h1>htfpurdue@gmail.com</h1>
             <div className="flex text-4xl pt-4 gap-4">
-              <a href="https://www.instagram.com/hackthefuturepurdue/" target="_blank">
+              <a
+                href="https://www.instagram.com/hackthefuturepurdue/"
+                target="_blank"
+              >
                 <FaInstagram className="hover:animate-pop cursor-pointer" />
               </a>
-              <a href="https://www.linkedin.com/company/hack-the-future-at-purdue/" target="_blank">
+              <a
+                href="https://www.linkedin.com/company/hack-the-future-at-purdue/"
+                target="_blank"
+              >
                 <FaLinkedin className="hover:animate-pop cursor-pointer" />
               </a>
               <a href="https://github.com/Hack-the-Future" target="_blank">
@@ -76,11 +99,17 @@ export default function Home() {
           </div>
           <div className="flex-col pt-16 w-1/2"></div>
           <div className="flex-col justify-right px-8 pt-16">
-            <img src="/Logo.png" className="h-12 w-42 pl-12 mb-8 ml-6 object-right" alt="Logo" />
-            <h1 className="text-right">Purdue University, West Lafayette, IN, 47906</h1>
+            <img
+              src="/Logo.png"
+              className="h-12 w-42 pl-12 mb-8 ml-6 object-right"
+              alt="Logo"
+            />
+            <h1 className="text-right">
+              Purdue University, West Lafayette, IN, 47906
+            </h1>
           </div>
         </div>
       </div>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/src/main.jsx b/src/main.jsx
index 23d221e..1ddab1a 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,24 +1,33 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import { useParams } from "react-router-dom";
+import "./index.css";
+import Home from "./Home.jsx";
+import Example from "./pages/example.jsx";
+import PradyunTPage from "./pages/PradyunTPage.jsx";
 import DemoPage from './pages/demoPage.jsx'
-import './index.css'
-import Home from './Home.jsx'
-import Example from './pages/example.jsx';
+import RonaldPage from './pages/RonaldPage.jsx'
+import MatthewPage from './pages/MatthewPage'
+import ShivamPage from './pages/shivamPage.jsx';
+import Mihika from "./pages/Mihika.jsx";
+import AnushaPage from "./pages/AnushaPage.jsx";
+import AaryanPage from "./pages/aaryanPage.jsx";
+import MayukhaPage from "./pages/mayukhaPage.jsx";
 
-createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById("root")).render(
   <StrictMode>
     <Router>
       <Routes>
-        <Route path='/' element={<Home />} />
-        <Route path='/example' element={<Example />} />
-        <Route path='/demo' element={<DemoPage />} />
-        <Route path='/profile/:name' element={<ProfileRouter />} />
+        <Route path="/" element={<Home />} />
+        <Route path="/example" element={<Example />} />
+        <Route path="/demo" element={<DemoPage />} />
+        <Route path="/mihika" element={<Mihika />} />
+        <Route path="/profile/:name" element={<ProfileRouter />} />
       </Routes>
     </Router>
-  </StrictMode>,
-)
+  </StrictMode>
+);
 
 function ProfileRouter() {
   const { name } = useParams();
@@ -30,25 +39,26 @@ function ProfileRouter() {
     // Change <DemoPage /> to your custom profile page, and change the case to your name
     case "Person1":
       return <DemoPage />;
-    case "Person2":
-      return <DemoPage />;
-    case "Person3":
-      return <DemoPage />;
-    case "Person4":
-      return <DemoPage />;
+    case "Mayukha":
+      return <MayukhaPage />;
+    case "Anusha":
+      return <AnushaPage />;
+    case "Aaryan Bondre":
+      return <AaryanPage />;
+    case "Pradyun Tandra":
+      return <PradyunTPage />;
+    case "Shivam":
+      return <ShivamPage />;
+    case "Ronald Tsai":
+      return <RonaldPage />;
+    case "Matthew":
+      return <MatthewPage />;
+    case "Mihika":
+      return <Mihika />;
     case "Person5":
       return <DemoPage />;
-    case "Person6":
-      return <DemoPage />;
-    case "Person7":
-      return <DemoPage />;
-    case "Person8":
-        return <DemoPage />;
-    case "Person9":
-      return <DemoPage />;
-    case "Person10":
-      return <DemoPage />;
+
     default:
       return <div>Profile not found</div>;
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/AnushaPage.jsx b/src/pages/AnushaPage.jsx
new file mode 100644
index 0000000..70d52e6
--- /dev/null
+++ b/src/pages/AnushaPage.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom"; // Import Link for navigation
+import { FaInstagram, FaLinkedin, FaGithubSquare } from "react-icons/fa";
+
+export default function AnushaPage() {
+  const [isHovered, setIsHovered] = useState(false);
+  const [showOutline, setShowOutline] = useState(false);
+
+  const toggleOutline = () => {
+    setShowOutline((prev) => !prev);
+  };
+
+  return (
+    <div className={`h-screen w-screen bg-black ${showOutline ? 'outline' : ''}`}>
+      <div className="h-full w-full bg-black flex-col relative pt-10">
+
+        <div className="absolute top-4 right-4 flex items-center">
+          <label className="switch">
+            <input type="checkbox" checked={showOutline} onChange={toggleOutline} />
+            <span className="slider round"></span>
+          </label>
+          <span className="ml-2 text-white">Toggle Outline</span>
+        </div>
+
+        {/* Header */}
+        <div className="h-1/12 w-full font-monument text-white text-5xl flex-col items-center">
+          <div className="flex items-center justify-center h-full ">
+            <img src="/leftarrow.png" alt="left arrow" />
+            <h1 className="pt-2 mx-8 animate-text gradient">Team Member Profile</h1>
+            <img src="/rightarrow.png" alt="right arrow" />
+          </div>
+        </div>
+
+        {/* Profile Section */}
+        <div className="w-full h-3/6 flex flex-col items-center mt-4 pt-12">
+          {/* Profile Picture */}
+          <img
+            src="../anushapic.png" // Placeholder image
+            alt="Profile Picture"
+            className={`w-48 h-48 object-cover ${isHovered ? "scale-110" : "scale-100"} transition-transform duration-300`}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          />
+
+          {/* Member Info */}
+          <div className="text-center text-white mt-8">
+            <h2 className="text-4xl font-bold">Anusha Kumar</h2>
+            <h3 className="text-xl mt-2">Developer</h3>
+            <p className="mt-4 text-gray-400 max-w-md">
+              Computer science student at Purdue University from Plainsboro, NJ.
+              1st year in Hack the Future; love to play tennis and be outdoors!
+            </p>
+          </div>
+          <Link to="/" className="z-10 mt-6 bg-htfgreen text-white font-bold py-2 px-4 rounded transition duration-300 hover:bg-green-700">
+            Back to Home
+          </Link>
+
+          {/* Contact Links */}
+          <div className="flex mt-8 gap-8 z-10">
+            <a href="https://www.linkedin.com/in/anusha-kumar-6a26bb1aa/" target="_blank" rel="noreferrer">
+              <FaLinkedin className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://github.com/anushakumar05" target="_blank" rel="noreferrer">
+              <FaGithubSquare className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://www.instagram.com/anushakumarr_/" target="_blank" rel="noreferrer">
+              <FaInstagram className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="w-full flex gap-10 font-monument text-base bg-black text-white pt-20">
+          <div className="flex-col px-8 pt-16">
+            <h1 className="pb-4 text-htfgreen">CONTACT US</h1>
+            <h1>htfpurdue@gmail.com</h1>
+            <div className="flex absolute z-10 text-4xl pt-4 gap-4">
+              <a href="https://www.instagram.com/hackthefuturepurdue/" target="_blank" rel="noreferrer">
+                <FaInstagram className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a href="https://www.linkedin.com/company/hack-the-future-at-purdue/" target="_blank" rel="noreferrer">
+                <FaLinkedin className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a href="https://github.com/Hack-the-Future" target="_blank" rel="noreferrer">
+                <FaGithubSquare className="hover:animate-pop cursor-pointer" />
+              </a>
+            </div>
+          </div>
+          <div className="flex-col pt-16 w-1/2"></div>
+          <div className="flex-col relative justify-right px-8 pt-16">
+            <img src="/Logo.png" className="h-12 w-42 pl-32 mb-8 ml-40 object-end" alt="Logo" />
+            <h1 className="text-right">Purdue University, West Lafayette, IN, 47906</h1>
+          </div>
+          <img className="absolute overflow-hidden bottom-0 z-0" src="/globe.png" alt="Globe Background" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/MatthewPage.jsx b/src/pages/MatthewPage.jsx
new file mode 100644
index 0000000..c13e05f
--- /dev/null
+++ b/src/pages/MatthewPage.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom"; // Import Link for navigation
+import { FaInstagram, FaLinkedin, FaGithubSquare } from "react-icons/fa";
+
+export default function MatthewPage() {
+  const [isHovered, setIsHovered] = useState(false);
+  const [showOutline, setShowOutline] = useState(false);
+
+  const toggleOutline = () => {
+    setShowOutline((prev) => !prev);
+  };
+
+  return (
+    <div className={`h-screen w-screen bg-black ${showOutline ? 'outline' : ''}`}>
+      <div className="h-full w-full bg-black flex-col relative pt-10">
+
+        <div className="absolute top-4 right-4 flex items-center">
+          <label className="switch">
+            <input type="checkbox" checked={showOutline} onChange={toggleOutline} />
+            <span className="slider round"></span>
+          </label>
+          <span className="ml-2 text-white">Toggle Outline</span>
+        </div>
+
+        {/* Header */}
+        <div className="h-1/12 w-full font-monument text-white text-5xl flex-col items-center">
+          <div className="flex items-center justify-center h-full ">
+            <img src="/leftarrow.png" alt="left arrow" />
+            <h1 className="pt-2 mx-8 animate-text gradient">Team Member Profile</h1>
+            <img src="/rightarrow.png" alt="right arrow" />
+          </div>
+        </div>
+
+        {/* Profile Section */}
+        <div className="w-full h-3/6 flex flex-col items-center mt-4 pt-12">
+          {/* Profile Picture */}
+          <img
+            src="../ml_pfp.jpg" // Placeholder image
+            alt="Profile Picture"
+            className={`w-48 h-48 object-cover ${isHovered ? "scale-110" : "scale-100"} transition-transform duration-300`}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          />
+
+          {/* Member Info */}
+          <div className="text-center text-white mt-8">
+            <h2 className="text-4xl font-bold">Matthew Lee</h2>
+            <h3 className="text-xl mt-2">Developer</h3>
+            <p className="mt-4 text-gray-400 max-w-md">
+              Computer science student at Purdue University, from Dallas Texas.
+              1st year in Hack the Future
+            </p>
+          </div>
+          <Link to="/" className="z-10 mt-6 bg-htfgreen text-white font-bold py-2 px-4 rounded transition duration-300 hover:bg-green-700">
+            Back to Home
+          </Link>
+
+          {/* Contact Links */}
+          <div className="flex mt-8 gap-8 z-10">
+            <a href="https://www.linkedin.com/in/matthew-lee18/" target="_blank" rel="noreferrer">
+              <FaLinkedin className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://github.com/operlaston" target="_blank" rel="noreferrer">
+              <FaGithubSquare className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://www.instagram.com/" target="_blank" rel="noreferrer">
+              <FaInstagram className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="w-full flex gap-10 font-monument text-base bg-black text-white pt-20">
+          <div className="flex-col px-8 pt-16">
+            <h1 className="pb-4 text-htfgreen">CONTACT US</h1>
+            <h1>htfpurdue@gmail.com</h1>
+            <div className="flex absolute z-10 text-4xl pt-4 gap-4">
+              <a href="https://www.instagram.com/hackthefuturepurdue/" target="_blank" rel="noreferrer">
+                <FaInstagram className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a href="https://www.linkedin.com/company/hack-the-future-at-purdue/" target="_blank" rel="noreferrer">
+                <FaLinkedin className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a href="https://github.com/Hack-the-Future" target="_blank" rel="noreferrer">
+                <FaGithubSquare className="hover:animate-pop cursor-pointer" />
+              </a>
+            </div>
+          </div>
+          <div className="flex-col pt-16 w-1/2"></div>
+          <div className="flex-col relative justify-right px-8 pt-16">
+            <img src="/Logo.png" className="h-12 w-42 pl-32 mb-8 ml-40 object-end" alt="Logo" />
+            <h1 className="text-right">Purdue University, West Lafayette, IN, 47906</h1>
+          </div>
+          <img className="absolute overflow-hidden bottom-0 z-0" src="/globe.png" alt="Globe Background" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Mihika.jsx b/src/pages/Mihika.jsx
new file mode 100644
index 0000000..17c59b4
--- /dev/null
+++ b/src/pages/Mihika.jsx
@@ -0,0 +1,145 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom"; // Import Link for navigation
+import { FaInstagram, FaLinkedin, FaGithubSquare } from "react-icons/fa";
+
+export default function Mihika() {
+  const [isHovered, setIsHovered] = useState(false);
+  const [showOutline, setShowOutline] = useState(false);
+
+  const toggleOutline = () => {
+    setShowOutline((prev) => !prev);
+  };
+
+  return (
+    <div
+      className={`h-screen w-screen bg-black ${showOutline ? "outline" : ""}`}
+    >
+      <div className="h-full w-full bg-black flex-col relative pt-10">
+        <div className="absolute top-4 right-4 flex items-center">
+          <label className="switch">
+            <input
+              type="checkbox"
+              checked={showOutline}
+              onChange={toggleOutline}
+            />
+            <span className="slider round"></span>
+          </label>
+          <span className="ml-2 text-white">Toggle Outline</span>
+        </div>
+
+        {/* Header */}
+        <div className="h-1/12 w-full font-monument text-white text-5xl flex-col items-center">
+          <div className="flex items-center justify-center h-full ">
+            <img src="/leftarrow.png" alt="left arrow" />
+            <h1 className="pt-2 mx-8 animate-text gradient">
+              Team Member Profile
+            </h1>
+            <img src="/rightarrow.png" alt="right arrow" />
+          </div>
+        </div>
+
+        {/* Profile Section */}
+        <div className="w-full h-3/6 flex flex-col items-center mt-4 pt-12">
+          {/* Profile Picture */}
+          <img
+            src="../public/mihika-profilepic.jpeg" // Placeholder image
+            alt="Profile Picture"
+            className={`w-48 h-48 object-cover ${
+              isHovered ? "scale-110" : "scale-100"
+            } transition-transform duration-300`}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          />
+
+          {/* Member Info */}
+          <div className="text-center text-white mt-8">
+            <h2 className="text-4xl font-bold">Mihika Sharma</h2>
+            <h3 className="text-xl mt-2">Developer</h3>
+            <p className="mt-4 text-gray-400 max-w-md">
+              Computer science student at Purdue University, from New Delhi,
+              India.
+            </p>
+          </div>
+          <Link
+            to="/"
+            className="z-10 mt-6 bg-htfgreen text-white font-bold py-2 px-4 rounded transition duration-300 hover:bg-green-700"
+          >
+            Back to Home
+          </Link>
+
+          {/* Contact Links */}
+          <div className="flex mt-8 gap-8 z-10">
+            <a
+              href="https://www.linkedin.com/in/mihika0916/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <FaLinkedin className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a
+              href="https://github.com/mihika0916"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <FaGithubSquare className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a
+              href="https://www.instagram.com/mihika_sharma_04/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <FaInstagram className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="w-full flex gap-10 font-monument text-base bg-black text-white pt-20">
+          <div className="flex-col px-8 pt-16">
+            <h1 className="pb-4 text-htfgreen">CONTACT US</h1>
+            <h1>htfpurdue@gmail.com</h1>
+            <div className="flex absolute z-10 text-4xl pt-4 gap-4">
+              <a
+                href="https://www.instagram.com/hackthefuturepurdue/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <FaInstagram className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a
+                href="https://www.linkedin.com/company/hack-the-future-at-purdue/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <FaLinkedin className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a
+                href="https://github.com/Hack-the-Future"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <FaGithubSquare className="hover:animate-pop cursor-pointer" />
+              </a>
+            </div>
+          </div>
+          <div className="flex-col pt-16 w-1/2"></div>
+          <div className="flex-col relative justify-right px-8 pt-16">
+            <img
+              src="/Logo.png"
+              className="h-12 w-42 pl-32 mb-8 ml-40 object-end"
+              alt="Logo"
+            />
+            <h1 className="text-right">
+              Purdue University, West Lafayette, IN, 47906
+            </h1>
+          </div>
+          <img
+            className="absolute overflow-hidden bottom-0 z-0"
+            src="/globe.png"
+            alt="Globe Background"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/PradyunTPage.jsx b/src/pages/PradyunTPage.jsx
new file mode 100644
index 0000000..f507774
--- /dev/null
+++ b/src/pages/PradyunTPage.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom"; // Import Link for navigation
+import { FaInstagram, FaLinkedin, FaGithubSquare, FaTree } from "react-icons/fa";
+
+export default function DemoPage() {
+  const [isHovered, setIsHovered] = useState(false);
+  return (
+    <div className={`h-screen w-screen bg-black`}>
+      <div className="h-full w-full bg-black flex-col relative pt-10">
+        {/* Header */}
+        <div className="h-1/12 w-full font-monument text-white text-5xl flex-col items-center">
+          <div className="flex items-center justify-center h-full ">
+            <img src="/leftarrow.png" alt="left arrow" />
+            <h1 className="pt-2 mx-8 animate-text gradient">Team Member Profile</h1>
+            <img src="/rightarrow.png" alt="right arrow" />
+          </div>
+        </div>
+
+        {/* Profile Section */}
+        <div className="w-full h-3/6 flex flex-col items-center mt-4 pt-12">
+          {/* Profile Picture */}
+          <img
+            src="https://media.licdn.com/dms/image/v2/D5603AQH156V3qNZ3Wg/profile-displayphoto-shrink_200_200/profile-displayphoto-shrink_200_200/0/1709673303373?e=1735171200&v=beta&t=slV4nVpzXIH3_0x8pzmF6ezu69WIg3-NCk_Bycv3I6Q"
+            alt="Profile Picture"
+            className={`w-48 h-48 object-cover ${isHovered ? "scale-110" : "scale-100"} transition-transform duration-300`}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          />
+
+          {/* Member Info */}
+          <div className="text-center text-white mt-8">
+            <h2 className="text-4xl font-bold">Pradyun Tandra</h2>
+            <h3 className="text-xl mt-2">Developer (Team 🤫)</h3>
+            <p className="mt-4 text-gray-400 max-w-md">
+              Freshman Computer science student at Purdue University, from Texas. 1st year at Hack The Future.
+            </p>
+          </div>
+          <Link
+            to="/"
+            className="z-10 mt-6 bg-htfgreen text-white font-bold py-2 px-4 rounded transition duration-300 hover:bg-green-700">
+            Back to Home
+          </Link>
+
+          {/* Contact Links */}
+          <div className="flex mt-8 gap-8 z-10">
+            <a href="https://linktr.ee/pradyunt/" target="_blank" rel="noreferrer">
+              <FaTree className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://www.linkedin.com/in/pradyun-tandra/" target="_blank" rel="noreferrer">
+              <FaLinkedin className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://github.com/PradyunT" target="_blank" rel="noreferrer">
+              <FaGithubSquare className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="w-full flex gap-10 font-monument text-base bg-black text-white pt-20">
+          <div className="flex-col px-8 pt-16">
+            <h1 className="pb-4 text-htfgreen">CONTACT ME</h1>
+            <h1>pradyun.tandra@gmail.com</h1>
+            <div className="flex absolute z-10 text-4xl pt-4 gap-4">
+              <a href="https://www.linkedin.com/in/pradyun-tandra/" target="_blank" rel="noreferrer">
+                <FaLinkedin className="text-white text-4xl hover:animate-pop cursor-pointer" />
+              </a>
+              <a href="https://github.com/PradyunT" target="_blank" rel="noreferrer">
+                <FaGithubSquare className="text-white text-4xl hover:animate-pop cursor-pointer" />
+              </a>
+            </div>
+          </div>
+          <div className="flex-col pt-16 w-1/2"></div>
+          <div className="flex-col relative justify-right px-8 pt-16">
+            <img src="/Logo.png" className="h-12 w-42 pl-32 mb-8 ml-40 object-end" alt="Logo" />
+            <h1 className="text-right">Purdue University, West Lafayette, IN, 47906</h1>
+          </div>
+          <img className="absolute overflow-hidden bottom-0 z-0" src="/globe.png" alt="Globe Background" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/RonaldPage.jsx b/src/pages/RonaldPage.jsx
new file mode 100644
index 0000000..4de3c58
--- /dev/null
+++ b/src/pages/RonaldPage.jsx
@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom"; // Import Link for navigation
+import { FaInstagram, FaLinkedin, FaGithubSquare } from "react-icons/fa";
+
+export default function DemoPage() {
+  const [isHovered, setIsHovered] = useState(false);
+  const [showOutline, setShowOutline] = useState(false);
+
+  const toggleOutline = () => {
+    setShowOutline((prev) => !prev);
+  };
+
+  return (
+    <div className={`h-screen w-screen bg-black ${showOutline ? 'outline' : ''}`}>
+      <div className="h-full w-full bg-black flex-col relative pt-10">
+
+        <div className="absolute top-4 right-4 flex items-center">
+          <label className="switch">
+            <input type="checkbox" checked={showOutline} onChange={toggleOutline} />
+            <span className="slider round"></span>
+          </label>
+          <span className="ml-2 text-white">Toggle Outline</span>
+        </div>
+
+        {/* Header */}
+        <div className="h-1/12 w-full font-monument text-white text-5xl flex-col items-center">
+          <div className="flex items-center justify-center h-full ">
+            <img src="/leftarrow.png" alt="left arrow" />
+            <h1 className="pt-2 mx-8 animate-text gradient">Team Member Profile</h1>
+            <img src="/rightarrow.png" alt="right arrow" />
+          </div>
+        </div>
+
+        {/* Profile Section */}
+        <div className="w-full h-3/6 flex flex-col items-center mt-4 pt-12">
+          {/* Profile Picture */}
+          <img
+            src="../RonaldPhoto.jpg" // Placeholder image
+            alt="Profile Picture"
+            className={`w-48 h-48 object-cover ${isHovered ? "scale-110" : "scale-100"} transition-transform duration-300`}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          />
+
+          {/* Member Info */}
+          <div className="text-center text-white mt-8">
+            <h2 className="text-4xl font-bold">Ronald Tsai</h2>
+            <h3 className="text-xl mt-2">Developer</h3>
+            <p className="mt-4 text-gray-400 max-w-md">
+              Sophomore majoring in Computer Science and Linguistics at Purdue University from the Philadelphia area.
+            </p>
+          </div>
+          <Link to="/" className="z-10 mt-6 bg-htfgreen text-white font-bold py-2 px-4 rounded transition duration-300 hover:bg-green-700">
+            Back to Home
+          </Link>
+
+          {/* Contact Links */}
+          <div className="flex mt-8 gap-8 z-10">
+            <a href="https://www.linkedin.com/in/ronald-tsai/" target="_blank" rel="noreferrer">
+              <FaLinkedin className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://github.com/Ronald-Tsai" target="_blank" rel="noreferrer">
+              <FaGithubSquare className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://www.instagram.com/ronaldtsai1/" target="_blank" rel="noreferrer">
+              <FaInstagram className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="w-full flex gap-10 font-monument text-base bg-black text-white pt-20">
+          <div className="flex-col px-8 pt-16">
+            <h1 className="pb-4 text-htfgreen">CONTACT US</h1>
+            <h1>htfpurdue@gmail.com</h1>
+            <div className="flex absolute z-10 text-4xl pt-4 gap-4">
+              <a href="https://www.instagram.com/hackthefuturepurdue/" target="_blank" rel="noreferrer">
+                <FaInstagram className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a href="https://www.linkedin.com/company/hack-the-future-at-purdue/" target="_blank" rel="noreferrer">
+                <FaLinkedin className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a href="https://github.com/Hack-the-Future" target="_blank" rel="noreferrer">
+                <FaGithubSquare className="hover:animate-pop cursor-pointer" />
+              </a>
+            </div>
+          </div>
+          <div className="flex-col pt-16 w-1/2"></div>
+          <div className="flex-col relative justify-right px-8 pt-16">
+            <img src="/Logo.png" className="h-12 w-42 pl-32 mb-8 ml-40 object-end" alt="Logo" />
+            <h1 className="text-right">Purdue University, West Lafayette, IN, 47906</h1>
+          </div>
+          <img className="absolute overflow-hidden bottom-0 z-0" src="/globe.png" alt="Globe Background" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/aaryanPage.jsx b/src/pages/aaryanPage.jsx
new file mode 100644
index 0000000..ba42a48
--- /dev/null
+++ b/src/pages/aaryanPage.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom"; // Import Link for navigation
+import { FaInstagram, FaLinkedin, FaGithubSquare } from "react-icons/fa";
+
+export default function AaryanPage() {
+  const [isHovered, setIsHovered] = useState(false);
+  const [showOutline, setShowOutline] = useState(false);
+
+  const toggleOutline = () => {
+    setShowOutline((prev) => !prev);
+  };
+
+  return (
+    <div className={`h-screen w-screen bg-black ${showOutline ? 'outline' : ''}`}>
+      <div className="h-full w-full bg-black flex-col relative pt-10">
+
+        <div className="absolute top-4 right-4 flex items-center">
+          <label className="switch">
+            <input type="checkbox" checked={showOutline} onChange={toggleOutline} />
+            <span className="slider round"></span>
+          </label>
+          <span className="ml-2 text-white">Toggle Outline</span>
+        </div>
+
+        {/* Header */}
+        <div className="h-1/12 w-full font-monument text-white text-5xl flex-col items-center">
+          <div className="flex items-center justify-center h-full ">
+            <img src="/leftarrow.png" alt="left arrow" />
+            <h1 className="pt-2 mx-8 animate-text gradient">Team Member Profile</h1>
+            <img src="/rightarrow.png" alt="right arrow" />
+          </div>
+        </div>
+
+        {/* Profile Section */}
+        <div className="w-full h-3/6 flex flex-col items-center mt-4 pt-12">
+          {/* Profile Picture */}
+          <img
+            src="../aaryan.jpg" // Placeholder image
+            alt="Profile Picture"
+            className={`w-48 h-48 object-cover ${isHovered ? "scale-110" : "scale-100"} transition-transform duration-300`}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          />
+
+          {/* Member Info */}
+          <div className="text-center text-white mt-8">
+            <h2 className="text-4xl font-bold">Aaryan Bondre</h2>
+            <h3 className="text-xl mt-2">Member</h3>
+            <p className="mt-4 text-gray-400 max-w-md">
+              Computer science and data science student at Purdue University, from Seattle, WA.
+              1st year in Hack the Future, loves football and basketball, drawing.
+            </p>
+          </div>
+          <Link to="/" className="z-10 mt-6 bg-htfgreen text-white font-bold py-2 px-4 rounded transition duration-300 hover:bg-green-700">
+            Back to Home
+          </Link>
+
+          {/* Contact Links */}
+          <div className="flex mt-8 gap-8 z-10">
+            <a href="https://www.linkedin.com/in/aaryanbondre/" target="_blank" rel="noreferrer">
+              <FaLinkedin className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://github.com/aaryanbondre" target="_blank" rel="noreferrer">
+              <FaGithubSquare className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://www.instagram.com/aaryan.bondre/" target="_blank" rel="noreferrer">
+              <FaInstagram className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="w-full flex gap-10 font-monument text-base bg-black text-white pt-20">
+          <div className="flex-col px-8 pt-16">
+            <h1 className="pb-4 text-htfgreen">CONTACT US</h1>
+            <h1>htfpurdue@gmail.com</h1>
+            <div className="flex absolute z-10 text-4xl pt-4 gap-4">
+              <a href="https://www.instagram.com/hackthefuturepurdue/" target="_blank" rel="noreferrer">
+                <FaInstagram className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a href="https://www.linkedin.com/company/hack-the-future-at-purdue/" target="_blank" rel="noreferrer">
+                <FaLinkedin className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a href="https://github.com/Hack-the-Future" target="_blank" rel="noreferrer">
+                <FaGithubSquare className="hover:animate-pop cursor-pointer" />
+              </a>
+            </div>
+          </div>
+          <div className="flex-col pt-16 w-1/2"></div>
+          <div className="flex-col relative justify-right px-8 pt-16">
+            <img src="/Logo.png" className="h-12 w-42 pl-32 mb-8 ml-40 object-end" alt="Logo" />
+            <h1 className="text-right">Purdue University, West Lafayette, IN, 47906</h1>
+          </div>
+          <img className="absolute overflow-hidden bottom-0 z-0" src="/globe.png" alt="Globe Background" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/demoPage.jsx b/src/pages/demoPage.jsx
index 2ca3d5d..861cb17 100644
--- a/src/pages/demoPage.jsx
+++ b/src/pages/demoPage.jsx
@@ -3,25 +3,9 @@ import { Link } from "react-router-dom"; // Import Link for navigation
 import { FaInstagram, FaLinkedin, FaGithubSquare } from "react-icons/fa";
 
 export default function DemoPage() {
-  const [isHovered, setIsHovered] = useState(false);
-  const [showOutline, setShowOutline] = useState(false);
-
-  const toggleOutline = () => {
-    setShowOutline((prev) => !prev);
-  };
-
   return (
-    <div className={`h-screen w-screen bg-black ${showOutline ? 'outline' : ''}`}>
+    <div className={`h-screen w-screen bg-black ${showOutline ? "outline" : ""}`}>
       <div className="h-full w-full bg-black flex-col relative pt-10">
-
-        <div className="absolute top-4 right-4 flex items-center">
-          <label className="switch">
-            <input type="checkbox" checked={showOutline} onChange={toggleOutline} />
-            <span className="slider round"></span>
-          </label>
-          <span className="ml-2 text-white">Toggle Outline</span>
-        </div>
-
         {/* Header */}
         <div className="h-1/12 w-full font-monument text-white text-5xl flex-col items-center">
           <div className="flex items-center justify-center h-full ">
@@ -47,11 +31,13 @@ export default function DemoPage() {
             <h2 className="text-4xl font-bold">Ryan Erickson</h2>
             <h3 className="text-xl mt-2">Technical Director</h3>
             <p className="mt-4 text-gray-400 max-w-md">
-              Computer science student at Purdue University, from Prior Lake Minnesota.
-              2nd year in Hack the Future, previously a member of YWCA Scheduling team.
+              Computer science student at Purdue University, from Prior Lake Minnesota. 2nd year in Hack the Future, previously a
+              member of YWCA Scheduling team.
             </p>
           </div>
-          <Link to="/" className="z-10 mt-6 bg-htfgreen text-white font-bold py-2 px-4 rounded transition duration-300 hover:bg-green-700">
+          <Link
+            to="/"
+            className="z-10 mt-6 bg-htfgreen text-white font-bold py-2 px-4 rounded transition duration-300 hover:bg-green-700">
             Back to Home
           </Link>
 
diff --git a/src/pages/example.jsx b/src/pages/example.jsx
index adc7a67..87299ef 100644
--- a/src/pages/example.jsx
+++ b/src/pages/example.jsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import Button from "../components/Button.jsx";
 
 export default function Example() {
+
   const [count, setCount] = useState(0);
 
   const handleIncrement = () => {
diff --git a/src/pages/mayukhaPage.jsx b/src/pages/mayukhaPage.jsx
new file mode 100644
index 0000000..6130c68
--- /dev/null
+++ b/src/pages/mayukhaPage.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom"; // Import Link for navigation
+import { FaInstagram, FaLinkedin, FaGithubSquare } from "react-icons/fa";
+
+export default function MayukhaPage() {
+  const [isHovered, setIsHovered] = useState(false);
+  const [showOutline, setShowOutline] = useState(false);
+
+  const toggleOutline = () => {
+    setShowOutline((prev) => !prev);
+  };
+
+  return (
+    <div className={`h-screen w-screen bg-black ${showOutline ? 'outline' : ''}`}>
+      <div className="h-full w-full bg-black flex-col relative pt-10">
+
+        <div className="absolute top-4 right-4 flex items-center">
+          <label className="switch">
+            <input type="checkbox" checked={showOutline} onChange={toggleOutline} />
+            <span className="slider round"></span>
+          </label>
+          <span className="ml-2 text-white">Toggle Outline</span>
+        </div>
+
+        {/* Header */}
+        <div className="h-1/12 w-full font-monument text-white text-5xl flex-col items-center">
+          <div className="flex items-center justify-center h-full ">
+            <img src="/leftarrow.png" alt="left arrow" />
+            <h1 className="pt-2 mx-8 animate-text gradient">Team Member Profile</h1>
+            <img src="/rightarrow.png" alt="right arrow" />
+          </div>
+        </div>
+
+        {/* Profile Section */}
+        <div className="w-full h-3/6 flex flex-col items-center mt-4 pt-12">
+          {/* Profile Picture */}
+          <img
+            src="../mayukha_pfp.png" // Placeholder image
+            alt="Profile Picture"
+            className={`w-48 h-48 object-cover ${isHovered ? "scale-110" : "scale-100"} transition-transform duration-300`}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          />
+
+          {/* Member Info */}
+          <div className="text-center text-white mt-8">
+            <h2 className="text-4xl font-bold">Mayukha Reddivari</h2>
+            <h3 className="text-xl mt-2">Developer</h3>
+            <p className="mt-4 text-gray-400 max-w-md">
+              Freshman in Computer Science at Purdue University from Naperville, IL!
+              1st year in Hack the Future, favorite hobby is waching TV and Movies.
+            </p>
+          </div>
+          <Link to="/" className="z-10 mt-6 bg-htfgreen text-white font-bold py-2 px-4 rounded transition duration-300 hover:bg-green-700">
+            Back to Home
+          </Link>
+
+          {/* Contact Links */}
+          <div className="flex mt-8 gap-8 z-10">
+            <a href="https://www.linkedin.com/in/mreddiva" target="_blank" rel="noreferrer">
+              <FaLinkedin className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://github.com/mreddiva" target="_blank" rel="noreferrer">
+              <FaGithubSquare className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://www.instagram.com/mayukhar_18/" target="_blank" rel="noreferrer">
+              <FaInstagram className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="w-full flex gap-10 font-monument text-base bg-black text-white pt-20">
+          <div className="flex-col px-8 pt-16">
+            <h1 className="pb-4 text-htfgreen">CONTACT US</h1>
+            <h1>htfpurdue@gmail.com</h1>
+            <div className="flex absolute z-10 text-4xl pt-4 gap-4">
+              <a href="https://www.instagram.com/hackthefuturepurdue/" target="_blank" rel="noreferrer">
+                <FaInstagram className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a href="https://www.linkedin.com/company/hack-the-future-at-purdue/" target="_blank" rel="noreferrer">
+                <FaLinkedin className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a href="https://github.com/Hack-the-Future" target="_blank" rel="noreferrer">
+                <FaGithubSquare className="hover:animate-pop cursor-pointer" />
+              </a>
+            </div>
+          </div>
+          <div className="flex-col pt-16 w-1/2"></div>
+          <div className="flex-col relative justify-right px-8 pt-16">
+            <img src="/Logo.png" className="h-12 w-42 pl-32 mb-8 ml-40 object-end" alt="Logo" />
+            <h1 className="text-right">Purdue University, West Lafayette, IN, 47906</h1>
+          </div>
+          <img className="absolute overflow-hidden bottom-0 z-0" src="/globe.png" alt="Globe Background" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/shivamPage.jsx b/src/pages/shivamPage.jsx
new file mode 100644
index 0000000..5b8c63a
--- /dev/null
+++ b/src/pages/shivamPage.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom"; // Import Link for navigation
+import { FaInstagram, FaLinkedin, FaGithubSquare } from "react-icons/fa";
+
+export default function ShivamPage() {
+  const [isHovered, setIsHovered] = useState(false);
+  const [showOutline, setShowOutline] = useState(false);
+
+  const toggleOutline = () => {
+    setShowOutline((prev) => !prev);
+  };
+
+  return (
+    <div className={`h-screen w-screen bg-black ${showOutline ? 'outline' : ''}`}>
+      <div className="h-full w-full bg-black flex-col relative pt-10">
+
+        <div className="absolute top-4 right-4 flex items-center">
+          <label className="switch">
+            <input type="checkbox" checked={showOutline} onChange={toggleOutline} />
+            <span className="slider round"></span>
+          </label>
+          <span className="ml-2 text-white">Toggle Outline</span>
+        </div>
+
+        {/* Header */}
+        <div className="h-1/12 w-full font-monument text-white text-5xl flex-col items-center">
+          <div className="flex items-center justify-center h-full ">
+            <img src="/leftarrow.png" alt="left arrow" />
+            <h1 className="pt-2 mx-8 animate-text gradient">Team Member Profile</h1>
+            <img src="/rightarrow.png" alt="right arrow" />
+          </div>
+        </div>
+
+        {/* Profile Section */}
+        <div className="w-full h-3/6 flex flex-col items-center mt-4 pt-12">
+          {/* Profile Picture */}
+          <img
+            src="../shivam.png" // Placeholder image
+            alt="Profile Picture"
+            className={`w-48 h-48 object-cover ${isHovered ? "scale-110" : "scale-100"} transition-transform duration-300`}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          />
+
+          {/* Member Info */}
+          <div className="text-center text-white mt-8">
+            <h2 className="text-4xl font-bold">Shivam Rastogi</h2>
+            <h3 className="text-xl mt-2">Team Leader</h3>
+            <p className="mt-4 text-gray-400 max-w-md">
+              Computer science student at Purdue University, from Moradabad, India.
+              1st year in Hack the Future, loves going to the Gym.
+            </p>
+          </div>
+          <Link to="/" className="z-10 mt-6 bg-htfgreen text-white font-bold py-2 px-4 rounded transition duration-300 hover:bg-green-700">
+            Back to Home
+          </Link>
+
+          {/* Contact Links */}
+          <div className="flex mt-8 gap-8 z-10">
+            <a href="https://www.linkedin.com/in/rastog18/" target="_blank" rel="noreferrer">
+              <FaLinkedin className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://github.com/rastog18" target="_blank" rel="noreferrer">
+              <FaGithubSquare className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+            <a href="https://www.instagram.com/_shivam_rastogi_/" target="_blank" rel="noreferrer">
+              <FaInstagram className="text-white text-4xl hover:animate-pop cursor-pointer" />
+            </a>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="w-full flex gap-10 font-monument text-base bg-black text-white pt-20">
+          <div className="flex-col px-8 pt-16">
+            <h1 className="pb-4 text-htfgreen">CONTACT US</h1>
+            <h1>htfpurdue@gmail.com</h1>
+            <div className="flex absolute z-10 text-4xl pt-4 gap-4">
+              <a href="https://www.instagram.com/hackthefuturepurdue/" target="_blank" rel="noreferrer">
+                <FaInstagram className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a href="https://www.linkedin.com/company/hack-the-future-at-purdue/" target="_blank" rel="noreferrer">
+                <FaLinkedin className="hover:animate-pop cursor-pointer" />
+              </a>
+              <a href="https://github.com/Hack-the-Future" target="_blank" rel="noreferrer">
+                <FaGithubSquare className="hover:animate-pop cursor-pointer" />
+              </a>
+            </div>
+          </div>
+          <div className="flex-col pt-16 w-1/2"></div>
+          <div className="flex-col relative justify-right px-8 pt-16">
+            <img src="/Logo.png" className="h-12 w-42 pl-32 mb-8 ml-40 object-end" alt="Logo" />
+            <h1 className="text-right">Purdue University, West Lafayette, IN, 47906</h1>
+          </div>
+          <img className="absolute overflow-hidden bottom-0 z-0" src="/globe.png" alt="Globe Background" />
+        </div>
+      </div>
+    </div>
+  );
+}
