diff --git a/components/TeamPage/TeamMember.js b/components/TeamPage/TeamMember.js
new file mode 100644
index 0000000..25f924d
--- /dev/null
+++ b/components/TeamPage/TeamMember.js
@@ -0,0 +1,30 @@
+import React, {useState} from 'react';
+import Constants from '../../global_constants/Constants';
+
+/**
+ * @returns {React.Component}
+ */
+const TeamMember = props => {
+
+ let select = false;
+ for (let i = 0; i < props.person.teams.length; i++) {
+ if (props.filter == props.person.teams[i]) {
+ select = true;
+ }
+ }
+
+ let blur =
+ if (select) {
+ blur =
+ }
+
+ return <>
+
+
+ {blur}
+
+
+ ;
+}
+
+export default TeamMember;
\ No newline at end of file
diff --git a/components/TeamPage/TeamPage.css b/components/TeamPage/TeamPage.css
new file mode 100644
index 0000000..71e48dd
--- /dev/null
+++ b/components/TeamPage/TeamPage.css
@@ -0,0 +1,51 @@
+.header {
+ font-family: Arial, Helvetica, sans-serif;
+ margin-left: 2rem;
+ margin-top: 3rem;
+}
+
+body {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.team-members {
+ display: flex;
+ flex-direction: column;
+}
+
+.person {
+ background-color: blueviolet;
+ box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
+ max-width: 20rem;
+ max-height: 20rem;
+ padding: 2rem;
+ margin: 2rem;
+}
+
+.image {
+ padding-top: 15rem;
+}
+
+.person-name {
+ font-family: Arial, Helvetica, sans-serif;
+ text-align: center;
+}
+
+.team-members {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+
+.teams {
+ display: flex;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
+}
+
+.col-xs {
+ flex: 1;
+ text-align: center;
+ padding: 0px 8px;
+}
diff --git a/components/TeamPage/TeamPage.js b/components/TeamPage/TeamPage.js
new file mode 100644
index 0000000..d120435
--- /dev/null
+++ b/components/TeamPage/TeamPage.js
@@ -0,0 +1,89 @@
+import './TeamPage.css';
+import TeamMember from './TeamMember';
+import React, {useState, useEffect} from 'react';
+import Constants from '../../global_constants/Constants';
+
+/**
+ * @returns {React.Component}
+ */
+const TeamPage = () => {
+ const [teamMembers, setTeamMembers] = useState([]);
+ const [filter, setFilter] = useState('All');
+ let data = require('./team_members.json');
+
+
+ // const fetchData = () => {
+ // fetch('https://jsonplaceholder.typicode.com/posts')
+ // .then(response => {
+ // return response.json();
+ // })
+ // .then(people => {
+ // setLoadedPeople(people);
+ // })
+ // .catch(err => {
+ // console.log(err);
+ // });
+ // };
+
+ useEffect(() => {
+ //fetchData();
+ setTeamMembers(data);
+ }, []);
+
+ return <>
+ Meet the Team
+
+
+
+ setFilter('Adviser')}>
+ Adviser
+
+
+
+ All
+
+
+ setFilter('Business')}>
+ Business
+
+
+
+ Collaborations
+
+
+ Design
+
+
+ Drylab
+
+
+ Leadership
+
+
+ Outreach
+
+
+ PI
+
+
+ Presenters
+
+
+ Wetlab
+
+
+ setFilter('Web Developer')}>
+ Web Development
+
+
+
+
+ {teamMembers.map(person => {
+ return ;
+ })}
+
+
+ ;
+}
+
+export default TeamPage;
\ No newline at end of file
diff --git a/components/TeamPage/team_members.json b/components/TeamPage/team_members.json
new file mode 100644
index 0000000..381083c
--- /dev/null
+++ b/components/TeamPage/team_members.json
@@ -0,0 +1,81 @@
+[
+ {
+ "id": 1,
+ "name": "William Kwok",
+ "teams": [
+ "All",
+ "DryLab Lead Engineer",
+ "Web Developer"
+ ],
+ "bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+ "linkedin": "https://www.linkedin.com",
+ "github": "https://github.com/"
+ },
+ {
+ "id": 2,
+ "name": "Allison Lee",
+ "teams": [
+ "All",
+ "Web Developer",
+ "Business"
+ ],
+ "bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+ "linkedin": "https://www.linkedin.com",
+ "github": "https://github.com/"
+ },
+ {
+ "id": 3,
+ "name": "Elisa Truong",
+ "teams": [
+ "All",
+ "Web Developer"
+ ],
+ "bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+ "linkedin": "https://www.linkedin.com",
+ "github": "https://github.com/"
+ },
+ {
+ "id": 4,
+ "name": "Jennifer Tao",
+ "teams": [
+ "All",
+ "Web Developer"
+ ],
+ "bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+ "linkedin": "https://www.linkedin.com",
+ "github": "https://github.com/"
+ },
+ {
+ "id": 5,
+ "name": "Laura Lan",
+ "teams": [
+ "All",
+ "Web Developer"
+ ],
+ "bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+ "linkedin": "https://www.linkedin.com",
+ "github": "https://github.com/"
+ },
+ {
+ "id": 6,
+ "name": "Nitesh Chetry",
+ "teams": [
+ "All",
+ "Web Developer"
+ ],
+ "bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+ "linkedin": "https://www.linkedin.com",
+ "github": "https://github.com/"
+ },
+ {
+ "id": 7,
+ "name": "Max Zhou",
+ "teams": [
+ "All",
+ "Web Developer"
+ ],
+ "bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+ "linkedin": "https://www.linkedin.com",
+ "github": "https://github.com/"
+ }
+]
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
new file mode 100644
index 0000000..5a200e8
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,2 @@
+const withCSS = require('@zeit/next-css');
+module.exports = withCSS();
\ No newline at end of file
diff --git a/out/index.html b/out/index.html
index 89e30ce..f2a4c2e 100644
--- a/out/index.html
+++ b/out/index.html
@@ -1 +1,27 @@
-Next js home page
-