diff --git a/src/App.js b/src/App.js
index 1346ce2..2135a95 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,6 +13,7 @@ import Tasks from './pages/Tasks';
 import RASummary from './pages/RASummary';
 import PersonalSummary from './pages/PersonalSummary';
 import ProjectDocuments from './pages/ProjectDocuments';
+import BioSummary from './pages/BioSummary';
 
 function App() {
   const theme = extendTheme({
@@ -38,6 +39,7 @@ function App() {
           <Route path="/ra-summary" element={<RASummary/>}/>
           <Route path="/studies/:organization/:project_name" element={<IndividualProject/>}/>
           <Route path="/personal-summary" element={<PersonalSummary />} />
+          <Route path="/bio-summary" element={<BioSummary/>} />
 
         </Routes>
       </Router>
diff --git a/src/components/MembersGrid.jsx b/src/components/MembersGrid.jsx
index 0687a3a..feafdb4 100644
--- a/src/components/MembersGrid.jsx
+++ b/src/components/MembersGrid.jsx
@@ -1,15 +1,20 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import { Button } from "@chakra-ui/react";
 
+import {useNavigate} from "react-router-dom";
+import { supabase } from "../config/supabase";
+import { useSession } from "@supabase/auth-helpers-react";
+
 const membersGrid = [
   {
-    name: "Marie Sharp",
+    name: "Test User 2",
     role: "Designer",
     imageUrl:
       "https://img.freepik.com/free-vector/cute-cool-boy-dabbing-pose-cartoon-vector-icon-illustration-people-fashion-icon-concept-isolated_138676-5680.jpg?t=st=1724332220~exp=1724335820~hmac=bc603da56e53ea1ab04b26d87afa62513c5d0bf94d014f37741598a1370b8564&w=1060",
     url: "https://www.google.com",
   },
   {
+    id:"48fd95db-ba9c-4f14-8b68-a89265e0ecff",
     name: "Marie Sharp",
     role: "Developer",
     imageUrl:
@@ -102,18 +107,75 @@ const styles = {
   visit: {
     margin: "10px",
   },
-};
+}
+
+
+
+const MembersGrid = (members) => {
+  //
+  // members must include  {name, id, role, imageUrl}
+
+  const {session} = useSession();
+    const [username, setUsername] = useState(
+    localStorage.getItem("username") ? localStorage.getItem("username") : ""
+  );
+  const [userType, setUserType] = useState(
+    localStorage.getItem("usertype") ? localStorage.getItem("usertype") : ""
+  );
+
+
+  // create member state. (useState)
+  useEffect(() => {
+    console.log(username, userType)
+    // get member info from database
+    // save member info in member state.
+  }, []);
+  const navigate = useNavigate();
+
+  // async function getMemberUsername(member) {
+  //   if (session) {
+  //     const {data: Users, error} = await supabase
+  //         .from("Users")
+  //         .select("*")
+  //         .eq("user_", member.name);
+  //   }
+  // }
+
+  const handleClick = async (member) => {
+    // 1. get user info
+    // 2. compare member
+    // 3.if not current member --> route new page
+    // 4.if yes, check user_type,
+    // 5.if admin, route-->personal summary
+    // 6.if not, route-->personal summary
+    // const user = session.user;
+    if (userType === true){
+      navigate("/personal-summary")
+    }else{
+      // @TODO: how to get member's username
+      // const targetMember = await getMemberUsername(member);
+      // if( targetMember.username === username){
+      if (member.name === username){
+        navigate("/personal-summary")
+
+      }else{
+        navigate(`/bio-summary?username=${member.name}&id=${member.id}`)
+      }
+    }
+
+    console.log(session)
 
-const MembersGrid = () => {
-  const handleClick = (url) => {
-    const newWindow = window.open(url, "_blank");
-    if (newWindow) newWindow.opener = null;
+    // navigate("/bio-summary")
+    // const newWindow = window.open(url, "_blank");
+    // if (newWindow) newWindow.opener = null;
   };
   return (
     <div style={styles.container}>
       <h1 style={styles.header}>Project Members</h1>
       <div style={styles.grid}>
         {membersGrid.map((member, index) => (
+        // {members.map((member, index) => (
+            // replace dom to component(org card, project card)
           <div key={index} style={styles.card}>
             <img src={member.imageUrl} alt={member.name} style={styles.image} />
             <div style={styles.cardContent}>
@@ -122,7 +184,7 @@ const MembersGrid = () => {
             </div>
             <Button
               style={styles.visit}
-              onClick={() => handleClick(member.url)}
+              onClick={() => handleClick(member)}
             >
               {" "}
               View Individual Page{" "}
diff --git a/src/pages/BioSummary.jsx b/src/pages/BioSummary.jsx
new file mode 100644
index 0000000..119357e
--- /dev/null
+++ b/src/pages/BioSummary.jsx
@@ -0,0 +1,155 @@
+import React, {useEffect, useState} from "react";
+import Sidenav from "../components/Sidenav";
+import Header from "../components/Header";
+import {
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  Divider,
+  Flex,
+  Heading, Image,
+  Spacer,
+  Tag,
+  TagCloseButton,
+  TagLabel,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import { useSession } from "@supabase/auth-helpers-react";
+import {useSearchParams} from "react-router-dom"
+import { supabase } from "../config/supabase";
+
+import { AddIcon } from "@chakra-ui/icons";
+
+function BioSummary() {
+  const [searchParams,setSearchParams] = useSearchParams();
+  const [member,setMember] = useState({});
+  const username = searchParams.get("username");
+  const id = searchParams.get("id");
+
+  const session = useSession();
+  const tag = [
+    ["Admin", "blue"],
+    ["Organization", "green"],
+    ["Project-Two", "purple"],
+    ["Organization-One", "pink"],
+  ];
+  const date = new Date();
+  const tasks = [
+    "Task 1: Finish the personal information page",
+    "Task 2: Looking into backend APIs",
+    "Task 3: Implement the user profile",
+    "Task 4: do something",
+    "Task 5: do something again",
+  ];
+  const hours = [10, 20, 13, 15, 17, 23, 19, 10, 20, 19];
+  const userName = localStorage.getItem("username");
+
+  function getNumberSuffix(day) {
+    if (day > 3 && day < 21) return "th";
+    switch (day % 10) {
+      case 1:
+        return "st";
+      case 2:
+        return "nd";
+      case 3:
+        return "rd";
+      default:
+        return "th";
+    }
+  }
+
+  async function getMember(id) {
+    if (session) {
+      const data = {};
+      const {data: Users, error} = await supabase
+          .from("Users")
+          .select("*")
+          .eq("user_id", id);
+        if (!error){
+          setMember(data[0])
+
+      }
+    }
+  }
+
+  useEffect(()=> {
+    console.log("id:", id);
+    const fetchMember = async () => {
+      if (session) {
+        const {data, error} = await supabase
+            .from("Users")
+            .select("*")
+            .eq("user_id", id);
+        if (!error) {
+          console.log("member", data);
+          setMember(data[0])
+
+        }
+
+      }
+    }
+    fetchMember();
+  },[id, session]);
+
+  return (
+    <Flex flexDirection={"column"} height={"100vh"}>
+      <Header />
+      {session ? (
+        <Box flex={1} display={"flex"} flexDirection={"row"} zIndex={1}>
+          <Sidenav />
+          <Box width="98%" marginLeft="1%" marginRight="1%" p={10}>
+            <Flex flexDirection={"column"}>
+              <Heading fontSize="3.2rem" mb={4}>
+                {userName}
+              </Heading>
+              <Flex flexDirection={"row"}>
+                {tag.map(([name, color]) => (
+                  <Tag
+                    key={name}
+                    borderRadius="5px"
+                    variant="solid"
+                    colorScheme={color}
+                    marginRight={5}
+                    padding={1}
+                    paddingLeft={2}
+                    paddingRight={2}
+                  >
+                    <TagLabel>{name}</TagLabel>
+                    <TagCloseButton />
+                  </Tag>
+                ))}
+              </Flex>
+              <Divider marginTop={10}/>
+
+              <Flex flexDirection={"row"} marginTop={10}>
+                <Flex flexDirection={"column"}>
+                  <Image src={member.url} width={400} height={300} />
+
+                  <Box marginTop="2%">
+                    <Text>{member.display_name}</Text>
+                    <Text>{member.profession}</Text>
+                  </Box>
+
+
+
+                </Flex>
+                <Box marginLeft="1%" marginRight="1%">
+                  <Text>{member.bio}</Text>
+{/*                <Text>If they click on other members page, create this new page to show it. All data for the member is available in the*/}
+{/*database. Make the requests to database necessary.</Text>*/}
+                  </Box>
+              </Flex>
+            </Flex>
+          </Box>
+        </Box>
+      ) : (
+        <div>Not logged in</div>
+      )}
+    </Flex>
+  );
+}
+
+export default BioSummary;
+