diff --git a/api-explorer.db b/api-explorer.db
index e69de29..907dc25 100644
Binary files a/api-explorer.db and b/api-explorer.db differ
diff --git a/babel.config.json b/babel.config.json
index 6b87c59..ba98ad9 100644
--- a/babel.config.json
+++ b/babel.config.json
@@ -5,5 +5,5 @@
         {
           "loose": true
         }
-      ]]
+      ], "@babel/plugin-transform-runtime" ], 
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index d6a3787..5586830 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "@babel/core": "^7.1.2",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.16.8",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.4",
@@ -23,17 +24,18 @@
     "webpack-cli": "^3.1.2"
   },
   "dependencies": {
+    "@formspree/react": "^2.2.4",
     "animate.css": "^4.1.1",
     "animate.css-react": "^1.1.0",
-    "@formspree/react": "^2.2.4",
     "axios": "^0.19.1",
     "merge-images": "^2.0.0",
     "react": "^16.5.2",
     "react-bouncing-text": "0.0.4",
     "react-dom": "^16.5.2",
     "react-json-view": "^1.19.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.0",
     "requirements": "^1.3.2",
-    "run": "^1.4.0"
+    "run": "^1.4.0",
+    "swagger-parser": "^10.0.3"
   }
 }
diff --git a/src/Home.jsx b/src/Home.jsx
index ecd3064..e4844fe 100644
--- a/src/Home.jsx
+++ b/src/Home.jsx
@@ -1,57 +1,23 @@
+
 import React from 'react';
 import './styles/main.scss';
-import Form from './Form.jsx';
-import Footer from './Footer.jsx';
 import Header from './Header.jsx';
+import Sidebar from './Sidebar.jsx';
+
+function Home({api}) {
 
-function Home() {
-  const { useState } = React;
-  const [method, setMethod] = useState('');
-  const [endpoint, setEndpoint] = useState('');
-  const [showForm, setShowForm] = useState(false);
-    
-  const toggleButton = (method, endpoint) => {
-    setMethod(method);
-    setEndpoint(endpoint);
-    setShowForm(true);
-  }
+const createSidebarData = (api) => {
+  return null
+}
 
     return (
         <>
         <Header />
-        <div className="main">
-          <div className="sidebar">
-            <div className="sidenav">
-            <a href="#" onClick={() => toggleButton("GET",'/bitlinks/{Your_bitlink}')}><span className="Get">Retrieve</span> a Bitlink</a>
-            <a href="#" onClick={() => toggleButton("GET",'/bitlinks/{Your_bitlink}/clicks')}><span className="Get">GET</span> clicks for a Bitlink</a>
-            <a href="#" onClick={() => toggleButton("GET",'/groups/{Your_group_guid}/bitlinks')}><span className="Get">Retrieve</span> Bitlinks by Group</a>
-            <a href="#" onClick={() => toggleButton("POST",'/expand')}><span className="Post">Expand</span> a Bitlink</a>
-            <a href="#" onClick={() => toggleButton("POST",'/bitlinks')}><span className="Post">Create</span> a Bitlink</a>
-            <a href="#" onClick={() => toggleButton("POST",'/shorten')}><span className="Post">Shorten</span> a Link</a>
-            <a href="#" onClick={() => toggleButton("PATCH",'/bitlinks/{bitlink}')}><span className="Patch">Update</span> a Bitlink</a>
-            <a href="#" onClick={() => toggleButton("PATCH",'/user')}><span className="Patch">Update</span> a User</a>
-            <a href="#" onClick={() => toggleButton("PATCH",'/groups/{group_guid}')}><span className="Patch">Update</span> a Group</a>
-            <a href="#" onClick={() => toggleButton("DELETE",'/groups/{group_guid}')}><span className="Delete">Delete</span> a Group</a>
-          </div>
-        </div>
-        <div className="center">
-            {!showForm && <div>
-              <p>
-                Introduction: Welcome to the Bitly API! If you'd like to use Bitly to shorten, brand, share, or retrieve data from links programmatically, you've come to the right place.If you're interested in integrating
-              </p>
-              <p>
-                your app or software platform with Bitly, you'll need to register and authenticate your service with our API. To do so please contact us at API_sales@bit.ly
-              </p>
-              <p>
-                We currently provide our documentation in the form of an OpenAPI 2.0 document. We do not support any code-generation at this time but feel free to use the specification if you would like.
-              </p>
-            </div> }
-          <Footer />
-
-          {(showForm) && <Form endpoint={endpoint} method={method} />}
- 
-          </div>
-        </div>
+        {/*example.map(endpointObject=>{
+          return <div><span>{endpointObject.title}</span></div>
+        })*/}
+        <Sidebar items = {createSidebarData(api)}/>
+        
     </>
   );
         
diff --git a/src/Sidebar.jsx b/src/Sidebar.jsx
new file mode 100644
index 0000000..d5b9fc3
--- /dev/null
+++ b/src/Sidebar.jsx
@@ -0,0 +1,50 @@
+
+import React from 'react';
+import './styles/new_sidebar.scss';
+
+const Sidebar = ({items}) => {
+    const example = [{
+    title: "Retrieve a Bitlink", type: "GET", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Get Clicks for a Bitlink", type: "GET", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Retrieve Bitlinks by Group", type: "GET", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Expand a Bitlink", type: "POST", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Create a Bitlink", type: "POST", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Shorten a Link", type: "POST", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Update a Bitlink", type: "PATCH", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Update a User", type: "PATCH", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Update a Group", type: "PATCH", path: "/bitlinks/{bitlink}"
+    },{
+    title: "Delete a Group", type: "DEL", path: "/bitlinks/{bitlink}"
+    }]
+
+    const methodtypefunction = (methodtype) => {
+            if(methodtype === 'GET') { 
+                return 'green'
+            } else if (methodtype === 'POST') 
+                { return 'blue'
+            } else if (methodtype === 'PATCH') {
+                return 'orange'
+            } else if (methodtype === 'DEL') {
+                return 'red'
+            }
+    }
+
+    return (
+      <div className='sidebar-new'>
+        {example.map(endpointObject=>{
+          return <div className='sidebar-new-object'><div className={`sidebar-type--${methodtypefunction(endpointObject.type)}`}><h4>{endpointObject.type}</h4></div><div className='sidebar-title'><a href="#"><h5>{endpointObject.title}</h5></a></div></div>
+        })}
+
+      </div>
+    );
+  }
+  
+  export default Sidebar;
\ No newline at end of file
diff --git a/src/Team.jsx b/src/Team.jsx
index 8b97c86..a059931 100644
--- a/src/Team.jsx
+++ b/src/Team.jsx
@@ -16,6 +16,7 @@ function Team({year}) {
     
             <div className="sidebar">
                 <a onClick={() => setSelectedYear(2022)}>2022</a>
+                <br/>
                 <a onClick={() => setSelectedYear(2021)}>2021</a>
             </div>
             <div className="center">
diff --git a/src/assets/bio-photos/skyler-other-pics/skyler-vr.jpg b/src/assets/bio-photos/skyler-other-pics/skyler-vr.jpg
new file mode 100644
index 0000000..01573f5
Binary files /dev/null and b/src/assets/bio-photos/skyler-other-pics/skyler-vr.jpg differ
diff --git a/src/assets/meet-the-team-2022/anastasia-avatar.png b/src/assets/meet-the-team-2022/anastasia-avatar.png
new file mode 100644
index 0000000..b911c79
Binary files /dev/null and b/src/assets/meet-the-team-2022/anastasia-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/ange-avatar.png b/src/assets/meet-the-team-2022/ange-avatar.png
new file mode 100644
index 0000000..6535bf3
Binary files /dev/null and b/src/assets/meet-the-team-2022/ange-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/austin-avatar.png b/src/assets/meet-the-team-2022/austin-avatar.png
new file mode 100644
index 0000000..2fba93a
Binary files /dev/null and b/src/assets/meet-the-team-2022/austin-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/belinda-avatar.png b/src/assets/meet-the-team-2022/belinda-avatar.png
new file mode 100644
index 0000000..9cd2e53
Binary files /dev/null and b/src/assets/meet-the-team-2022/belinda-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/claire-avatar.png b/src/assets/meet-the-team-2022/claire-avatar.png
new file mode 100644
index 0000000..ae9d05c
Binary files /dev/null and b/src/assets/meet-the-team-2022/claire-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/desiree-avatar.png b/src/assets/meet-the-team-2022/desiree-avatar.png
new file mode 100644
index 0000000..69e62fa
Binary files /dev/null and b/src/assets/meet-the-team-2022/desiree-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/diana-avatar.png b/src/assets/meet-the-team-2022/diana-avatar.png
new file mode 100644
index 0000000..0b959d6
Binary files /dev/null and b/src/assets/meet-the-team-2022/diana-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/edison-avatar.png b/src/assets/meet-the-team-2022/edison-avatar.png
new file mode 100644
index 0000000..d6aec83
Binary files /dev/null and b/src/assets/meet-the-team-2022/edison-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/grace-avatar.png b/src/assets/meet-the-team-2022/grace-avatar.png
new file mode 100644
index 0000000..7c6c3fb
Binary files /dev/null and b/src/assets/meet-the-team-2022/grace-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/hannah-avatar.png b/src/assets/meet-the-team-2022/hannah-avatar.png
new file mode 100644
index 0000000..cc181a4
Binary files /dev/null and b/src/assets/meet-the-team-2022/hannah-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/jacob-avatar.png b/src/assets/meet-the-team-2022/jacob-avatar.png
new file mode 100644
index 0000000..fc2f740
Binary files /dev/null and b/src/assets/meet-the-team-2022/jacob-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/jake-avatar.png b/src/assets/meet-the-team-2022/jake-avatar.png
new file mode 100644
index 0000000..aa6b7dd
Binary files /dev/null and b/src/assets/meet-the-team-2022/jake-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/jenny-avatar.png b/src/assets/meet-the-team-2022/jenny-avatar.png
new file mode 100644
index 0000000..1d6291b
Binary files /dev/null and b/src/assets/meet-the-team-2022/jenny-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/julian-avatar.png b/src/assets/meet-the-team-2022/julian-avatar.png
new file mode 100644
index 0000000..e9643e2
Binary files /dev/null and b/src/assets/meet-the-team-2022/julian-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/julie-avatar.png b/src/assets/meet-the-team-2022/julie-avatar.png
new file mode 100644
index 0000000..b1d8bcb
Binary files /dev/null and b/src/assets/meet-the-team-2022/julie-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/kadiatou-avatar-modified.png b/src/assets/meet-the-team-2022/kadiatou-avatar-modified.png
new file mode 100644
index 0000000..c9be411
Binary files /dev/null and b/src/assets/meet-the-team-2022/kadiatou-avatar-modified.png differ
diff --git a/src/assets/meet-the-team-2022/katelyn-avatar.png b/src/assets/meet-the-team-2022/katelyn-avatar.png
new file mode 100644
index 0000000..ee1ca4b
Binary files /dev/null and b/src/assets/meet-the-team-2022/katelyn-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/kevin-avatar.png b/src/assets/meet-the-team-2022/kevin-avatar.png
new file mode 100644
index 0000000..8a8fbfb
Binary files /dev/null and b/src/assets/meet-the-team-2022/kevin-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/lauren-avatar.png b/src/assets/meet-the-team-2022/lauren-avatar.png
new file mode 100644
index 0000000..a28fae1
Binary files /dev/null and b/src/assets/meet-the-team-2022/lauren-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/lily-avatar.png b/src/assets/meet-the-team-2022/lily-avatar.png
new file mode 100644
index 0000000..8305695
Binary files /dev/null and b/src/assets/meet-the-team-2022/lily-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/mae-avatar.png b/src/assets/meet-the-team-2022/mae-avatar.png
new file mode 100644
index 0000000..1cee7ba
Binary files /dev/null and b/src/assets/meet-the-team-2022/mae-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/margaret-avatar-1.png b/src/assets/meet-the-team-2022/margaret-avatar-1.png
new file mode 100644
index 0000000..2d32b87
Binary files /dev/null and b/src/assets/meet-the-team-2022/margaret-avatar-1.png differ
diff --git a/src/assets/meet-the-team-2022/raghu-avatar.png b/src/assets/meet-the-team-2022/raghu-avatar.png
new file mode 100644
index 0000000..a772926
Binary files /dev/null and b/src/assets/meet-the-team-2022/raghu-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/skyler-avatar.png b/src/assets/meet-the-team-2022/skyler-avatar.png
new file mode 100644
index 0000000..b8da7ae
Binary files /dev/null and b/src/assets/meet-the-team-2022/skyler-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/suji-avatar.png b/src/assets/meet-the-team-2022/suji-avatar.png
new file mode 100644
index 0000000..d0a24fd
Binary files /dev/null and b/src/assets/meet-the-team-2022/suji-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/trupti-avatar.png b/src/assets/meet-the-team-2022/trupti-avatar.png
new file mode 100644
index 0000000..9c38ed3
Binary files /dev/null and b/src/assets/meet-the-team-2022/trupti-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/ty-avatar.png b/src/assets/meet-the-team-2022/ty-avatar.png
new file mode 100644
index 0000000..866ef8d
Binary files /dev/null and b/src/assets/meet-the-team-2022/ty-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/tyler-avatar.png b/src/assets/meet-the-team-2022/tyler-avatar.png
new file mode 100644
index 0000000..82a378c
Binary files /dev/null and b/src/assets/meet-the-team-2022/tyler-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/yang-avatar.png b/src/assets/meet-the-team-2022/yang-avatar.png
new file mode 100644
index 0000000..d03b73a
Binary files /dev/null and b/src/assets/meet-the-team-2022/yang-avatar.png differ
diff --git a/src/assets/meet-the-team-2022/zack-avatar.png b/src/assets/meet-the-team-2022/zack-avatar.png
new file mode 100644
index 0000000..29ba63a
Binary files /dev/null and b/src/assets/meet-the-team-2022/zack-avatar.png differ
diff --git a/src/index.jsx b/src/index.jsx
index d7bcfe4..82aa679 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,4 +1,5 @@
-import React from 'react';
+
+import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import{
      HashRouter as Router,
@@ -10,8 +11,33 @@ import './styles/main.scss';
 import Home from './Home.jsx';
 import Team from './Team.jsx';
 import APIinfo from './APIinfo.jsx';
+import SwaggerParser from "@apidevtools/swagger-parser";
+import AngesComponent from './wintern-bios/2022/AngesComponent.jsx';
+import KadiatouComponent from './wintern-bios/2022/KadiatouComponent.jsx';
+import LaurenComponent from './wintern-bios/2022/LaurenComponent.jsx';
+import SkylerComponent from './wintern-bios/2022/SkylerComponent.jsx';
+import MargaretComponent from './wintern-bios/2022/MargaretComponent.jsx';
 
+import Header from './Header.jsx';
 const App = () => {
+const [api, setApi] = useState(null);
+
+useEffect(() => {
+  const openSwaggerFile = async () => {
+    try {
+      let api = await SwaggerParser.validate("./static/v4.json");
+      setApi(api);
+      console.log("API name: %s, Version: %s", api.info.title, api.info.version);
+      console.log(api);
+    }
+    catch(err) {
+      console.error(err);
+    }
+  }
+
+  openSwaggerFile();
+}, [])
+  
     return (
       <Router>
         <Switch>
@@ -24,13 +50,34 @@ const App = () => {
           <Route path="/team-2022">
             <Team year={2022} />
           </Route>
+          <Route path="/ange-louis">
+            <Header />
+            <AngesComponent />
+          </Route>
+          <Route path="/kadiatou-diallo">
+            <Header />
+            <KadiatouComponent />
+          </Route>
+          <Route path="/lauren-avilla">
+            <Header />
+            <LaurenComponent />
+          </Route>
+          <Route path="/skyler-basco">
+            <Header />
+            <SkylerComponent />
+          </Route>
+          <Route path="/margaret-diaz">
+            <Header />
+            <MargaretComponent />
+          </Route>
           <Route path="/">
-            <Home />
+          {api ? <Home api={api} /> : <div>Loading ...</div>}
           </Route>
         </Switch>
     </Router>
     );
-}
+
+    }
 
 ReactDOM.render(<App />, document.getElementById('app'));
 
diff --git a/src/styles/2022_team_styles/_skyler-bio.scss b/src/styles/2022_team_styles/_skyler-bio.scss
index 5e20cc0..2b83127 100644
--- a/src/styles/2022_team_styles/_skyler-bio.scss
+++ b/src/styles/2022_team_styles/_skyler-bio.scss
@@ -11,8 +11,11 @@
     font-weight: 900 !important;
 }
 
+
 .about-content h1, h2, h3 {
     font-family: 'Poppins', sans-serif !important; 
+    color:black !important;
+
 }
 
 .about-content {
@@ -21,7 +24,8 @@
 
 .about-content p{
     text-align: center !important;
-  
+    color:black !important;
+
 }
 .aboutallcontent {
     text-align: center;
@@ -31,6 +35,7 @@
     font-size: 25px;
     font-family: 'Poppins', sans-serif !important; 
     font-weight: bolder !important;
+    color:black !important;
 
 }
 
@@ -38,6 +43,14 @@
     font-size: 18px;
     font-family: 'Poppins', sans-serif !important; 
     font-weight: bolder !important;
+    color:black !important;
+
+}
+
+.main-container{
+    background:#F2F1FF;
+    border: 1px solid black;
+    box-shadow: 3px 3px black;
 
 }
 
@@ -63,6 +76,9 @@
 .main-container p {
     text-align: left;
     font-family: 'Poppins', sans-serif !important; 
+    color:black !important;
+    font-size: 17px;
+
 
 }
 
@@ -74,12 +90,23 @@
     text-align: center;
 }
 
+.skyler-giphys {
+    display: block;
+    padding: 10px;
+    width: 200px;
+    height: auto;
+    text-align: center;
+    box-shadow: 3px 3px black;
+    border: 1px solid black;
+    background-color: white;
+}
+
 .main-container {
     display: table;
     overflow: hidden;
     min-height: 4200px; /* USE THIS TO ADJUST FIXED CONTAINER HEIGHT */
-    padding-left: 250px;
-    padding-right: 250px;
+    padding-left: 330px;
+    padding-right: 330px;
    /* min-height: 1300px !important; 
     /* increase size of div according to contents? https://stackoverflow.com/questions/20814855/how-to-increase-size-of-div-according-to-its-contents
     /*
@@ -97,6 +124,9 @@
     padding: 10px;
     width: 200px;
     height: auto;
+    box-shadow: 3px 3px black;
+    border: 1px solid black;
+    background-color: white;
 }
 
 
@@ -229,7 +259,7 @@
     padding: 0px;
     width: auto;
     height: 250px;
-    border-radius: 10px;
+    border-radius: 0px;
     box-shadow: 3px 3px black;
     border: 1px solid black;
 
@@ -242,7 +272,7 @@
     padding: 0px;
     width: auto;
     height: 250px;
-    border-radius: 10px;
+    border-radius: 0px;
     box-shadow: 3px 3px black;
     border: 1px solid black;
 }
@@ -281,6 +311,8 @@
 .contact-formspree textarea {
     font-family: 'Poppins', sans-serif !important;  
     width: 400px; 
+    border: 1px solid black;
+
 }
 
 .contact-formspree-button button p {
diff --git a/src/styles/2022_team_styles/_teamlist2022.scss b/src/styles/2022_team_styles/_teamlist2022.scss
new file mode 100644
index 0000000..00f8524
--- /dev/null
+++ b/src/styles/2022_team_styles/_teamlist2022.scss
@@ -0,0 +1,252 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'), url('https://www.scdn.co/i/connect/header-spikes-sm.jpg');
+   
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  src: url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+}
+
+.teampage2022 h1 {
+    font-family: 'Poppins', sans-serif !important; 
+    font-weight: 900;
+    color: black;
+    text-align: center;
+}
+
+.teampage2022 p {
+    font-family: 'Poppins', sans-serif !important; 
+    font-weight: 200;
+    color: black;
+}
+
+.avatar-cards {
+  display: flex;
+}
+
+/* Create two equal columns that sits next to each other */
+.avatar-card {
+  flex: 50%;
+  padding: 35px;
+}
+
+.avatar-card h5 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  padding-bottom: 15px;
+
+  font-family: 'Poppins', sans-serif !important; 
+  font-weight: 200;
+  margin-right: auto;
+  margin-left: auto;
+  text-align: center;
+
+}
+.avatar-circle {
+  display: block;
+  padding: 10px;
+  width: 200px;
+  height: auto;
+  margin-right: auto;
+  margin-left: auto;
+  text-align: center;
+}
+
+.learn-more-button-yellow {
+  display: block;
+  padding: 10px 20px 10px 20px;
+  width: fit-content;
+  border-radius: 5px;
+  text-decoration: none;
+  line-height: 0px;
+  border: 1px solid black;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 10px;
+
+  /* Colors */
+  background-color: #FAF1D2;
+  box-shadow: 3px 3px black;
+
+  color: var(--navy);
+  transition: .5s ease-out;
+
+  /* Font */
+  font-weight: 600;
+  font-size: 11px !important;
+  color: black !important;
+
+}
+
+.learn-more-button-yellow p {
+  font-size: 14px !important;
+  font-weight: 900;
+
+}
+
+.learn-more-button-lightgreen {
+  display: block;
+  padding: 10px 20px 10px 20px;
+  width: fit-content;
+  border-radius: 5px;
+  text-decoration: none;
+  line-height: 0px;
+  border: 1px solid black;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 10px;
+
+
+  /* Colors */
+  background-color: #E8F9E8;
+  box-shadow: 3px 3px black;
+
+  color: var(--navy);
+  transition: .5s ease-out;
+
+  /* Font */
+  font-weight: 600;
+  font-size: 11px !important;
+  color: black !important;
+
+}
+
+.learn-more-button-lightgreen p {
+  font-size: 14px !important;
+  font-weight: 900;
+
+}
+
+.learn-more-button-green {
+  display: block;
+  padding: 10px 20px 10px 20px;
+  width: fit-content;
+  border-radius: 5px;
+  text-decoration: none;
+  line-height: 0px;
+  border: 1px solid black;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 10px;
+
+
+  /* Colors */
+  background-color: #9DC79F;
+  box-shadow: 3px 3px black;
+
+  color: var(--navy);
+  transition: .5s ease-out;
+
+  /* Font */
+  font-weight: 600;
+  font-size: 11px !important;
+  color: black !important;
+
+}
+
+.learn-more-button-green p {
+  font-size: 14px !important;
+  font-weight: 900;
+
+}
+
+.learn-more-button-green {
+  display: block;
+  padding: 10px 20px 10px 20px;
+  width: fit-content;
+  border-radius: 5px;
+  text-decoration: none;
+  line-height: 0px;
+  border: 1px solid black;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 10px;
+
+
+  /* Colors */
+  background-color: #9DC79F;
+  box-shadow: 3px 3px black;
+
+  color: var(--navy);
+  transition: .5s ease-out;
+
+  /* Font */
+  font-weight: 600;
+  font-size: 11px !important;
+  color: black !important;
+
+}
+
+.learn-more-button-green p {
+  font-size: 14px !important;
+  font-weight: 900;
+
+}
+
+.learn-more-button-blue {
+  display: block;
+  padding: 10px 20px 10px 20px;
+  width: fit-content;
+  border-radius: 5px;
+  text-decoration: none;
+  line-height: 0px;
+  border: 1px solid black;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 10px;
+
+
+  /* Colors */
+  background-color: #C8DEFF;
+  box-shadow: 3px 3px black;
+
+  color: var(--navy);
+  transition: .5s ease-out;
+
+  /* Font */
+  font-weight: 600;
+  font-size: 11px !important;
+  color: black !important;
+
+}
+
+.learn-more-button-blue p {
+  font-size: 14px !important;
+  font-weight: 900;
+
+}
+
+.learn-more-button-purple {
+  display: block;
+  padding: 10px 20px 10px 20px;
+  width: fit-content;
+  border-radius: 5px;
+  text-decoration: none;
+  line-height: 0px;
+  border: 1px solid black;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 10px;
+
+
+  /* Colors */
+  background-color: #E0DDFF;
+  box-shadow: 3px 3px black;
+
+  color: var(--navy);
+  transition: .5s ease-out;
+
+  /* Font */
+  font-weight: 600;
+  font-size: 11px !important;
+  color: black !important;
+
+}
+
+.learn-more-button-purple p {
+  font-size: 14px !important;
+  font-weight: 900;
+
+}
+
+
diff --git a/src/styles/main.scss b/src/styles/main.scss
index f35b33a..19a26d4 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -26,6 +26,7 @@ $blue: #03b5d2;
 @import '2021_team_styles/margaret-bio.scss';
 @import 'lauren-bio.scss';
 @import '2022_team_styles/_skyler-bio.scss';
+@import '2022_team_styles/teamlist2022.scss';
 
 .main {
     display: flex;
diff --git a/src/styles/new_sidebar.scss b/src/styles/new_sidebar.scss
new file mode 100644
index 0000000..4308621
--- /dev/null
+++ b/src/styles/new_sidebar.scss
@@ -0,0 +1,97 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'), url('https://www.scdn.co/i/connect/header-spikes-sm.jpg');
+   
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  src: url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+}
+
+.sidebar-new{
+    width: 23%;
+    background: #F2F8FC;
+    padding-bottom: 200px;
+    overflow: scroll;
+    display: inline-block;
+    font-family: 'Poppins', sans-serif; 
+    color: black;
+    height: 800px; /* USE THIS TO ADJUST FIXED CONTAINER HEIGHT */
+    } 
+
+.sidebar-new-object h5 {
+    color: black;
+    margin-right: 10px;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    display: inline;
+    margin-bottom: 30px;
+    font-family: 'Poppins', sans-serif; 
+
+}
+
+.sidebar-title {
+    display: inline-block;
+}
+
+.sidebar-new-object {
+    padding-bottom: 10px;
+    padding-top: 10px;
+
+}
+
+
+.sidebar-type {
+    
+    &--green, &--blue, &--orange, &--red {
+        display: inline-block;
+        width: 110px;
+    }
+    &--green h4 {
+        background-color: #75C0AD;
+    }
+    
+    &--blue h4 {
+        background-color: #61B3DE;
+    }
+    
+    &--orange h4 {
+        background-color: #E2986A;
+    }
+    
+    &--red h4 {
+        background-color: #E47F7F;
+    }
+
+}
+
+
+.sidebar-new-object h4 {
+    color: white;
+    padding-left: 7px;
+    padding-right: 7px;
+    margin: 0;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    display: inline;
+    border-radius: 15px;
+    margin-left: 20px;
+    margin-bottom: 30px;
+    font-size: 20px;
+    width: 50px;
+    display: inline;
+
+}
+
+
+.sidebar-new-object:hover {
+    background-color: #D0EAFE;
+    //border-left: #163B6B 5px solid;
+    box-shadow:5px 0px 0px 0px #163B6B inset;
+
+  }
+
+  .sidebar-new-object:active {
+    background-color: #D0EAFE;
+
+  }
\ No newline at end of file
diff --git a/src/wintern-bios/2022/SkylerComponent.jsx b/src/wintern-bios/2022/SkylerComponent.jsx
index aec6ad7..33c5121 100644
--- a/src/wintern-bios/2022/SkylerComponent.jsx
+++ b/src/wintern-bios/2022/SkylerComponent.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import skylerheadshot from '../../assets/bio-photos/Skyler-Basco-Headshot-Circle.png';
+import skylervr from '../../assets/bio-photos/skyler-other-pics/skyler-vr.jpg';
 import unicornstackpic from '../../assets/bio-photos/skyler-other-pics/unicorn-stack-pic.png';
 import m4mpic from '../../assets/bio-photos/skyler-other-pics/m4m-pic.png';
 import learnifypic from '../../assets/bio-photos/skyler-other-pics/learnify-pic.png';
@@ -17,6 +18,7 @@ import animatedcap from '../../assets/bio-photos/skyler-other-pics/animatedcap.g
 import mcsheep from '../../assets/bio-photos/skyler-other-pics/mcsheep.gif';
 import qrcode3dbitly from '../../assets/bio-photos/skyler-other-pics/qrcode3dbitly.jpg';
 import mcparrot from '../../assets/bio-photos/skyler-other-pics/mcparrot.gif';
+import smileybackground from '../../assets/bio-photos/skyler-other-pics/smiley-background.png';
 
 const SkylerComponent = () => {
     return (
@@ -30,18 +32,14 @@ const SkylerComponent = () => {
         <var>M<sup> 3</sup></var> = Minecrafter. Marvel(er). Maker.
         <br />
         </h2>
-        <div className='project-cards'>
-        <div className="project-card-skyler">
-        <img className = "skyler-headshot" src={animatedcap} text-align="center" />
-        </div>
-        <div className="project-card-skyler">
-        <img className = "skyler-headshot" src={skylerheadshot} />
+        
+        
         </div>
         <div className="project-card-skyler">
-        <img className = "skyler-headshot" src={minecraftsteve} />
-        </div>
-        </div>
+        <img className = "qrcodecss" src={skylervr} />
         </div>
+       
+
 
         <h1 className='about'> About <span class="waving-hand">🦋</span> </h1>
         <p className='about-content'> My name is Skyler! I’m a developer and designer with an affinity for creative mediums in tech, including augmented/virtual reality, 3D software, and visual effects.
@@ -51,6 +49,7 @@ const SkylerComponent = () => {
         <p>👇 Scan the QR Code below with your phone to see Bitly's logo in 3D/AR! Made with Blender and echo3D.</p>
         <img className = "qrcodecss" src={qrcode3dbitly}/>
         </div>
+        <br/>
         <a class="button-qrcode3d" href="https://go.echo3d.co/Rerj" target="_blank"><p>See a 3D/AR model of the Bitly logo!</p></a>
         <br />
 
@@ -59,32 +58,32 @@ const SkylerComponent = () => {
 
         <div className='project-cards'>
             <div className="project-card-skyler">
-            <img className = "flix-pic" src={unicornstackpic} />
+            <img className = "frontdoor-pic" src={unicornstackpic} />
             <h2>Unicorn Stack</h2>
             <p>A fun, easy-to-use platform to strengthen healthy financial habits through Augmented Reality (AR), 3D experiences, and more.      </p>
             <a class="button-skyler" href="https://devpost.com/software/unicorn-stack" target="_blank"><p>Explore on Devpost</p></a>
             </div>
 
             <div className="project-card-skyler">
-            <img className = "flix-pic" src={learnifypic} />
+            <img className = "frontdoor-pic" src={learnifypic} />
             <h2>Learnify</h2>
             <p>A gamified web app that improves the focus, vocabulary, and mathematical skills of students with learning disabilities. </p>
             <a class="button-skyler" href="https://github.com/skylerbasco/Learnify" target="_blank"><p>Explore on GitHub</p></a>
             </div>
         </div>
-
+<br />
         <div className='project-cards'>
             <div className="project-card-skyler">
-            <img className = "flix-pic" src={m4mpic} />
+            <img className = "frontdoor-pic" src={m4mpic} />
             <h2>Melodies for Math</h2>
             <p>Responsive website for a nonprofit simplifying math concepts for high school students, comprising a database of math songs.</p>
             <a class="button-skyler" href="https://github.com/skylerbasco/Melodies-for-Math-Website" target="_blank"><p>Explore on GitHub</p></a>
             </div>
 
             <div className="project-card-skyler">
-            <img className = "flix-pic" src={flixpic} />
+            <img className = "frontdoor-pic" src={flixpic} />
             <h2>Flix</h2>
-            <p>iOS app for browsing movies currently playing in theaters. Displays the title, description, and poster for each film with a CollectionView layout.</p>
+            <p>iOS app for browsing movies currently playing in theaters. Displays the title, description, poster for each film with a CollectionView layout.</p>
             <a class="button-skyler" href="https://github.com/skylerbasco/Flix" target="_blank"><p>Explore on GitHub</p></a>
             </div>
         </div>
@@ -142,26 +141,29 @@ const SkylerComponent = () => {
             </div>
         </div>
 
-        <h1 className='contact'> Contact <span class="waving-hand">📩</span></h1>
-        <p className='contact-content'>Want to connect, collaborate, or build something innovative together? I’m happy to chat about anything from CS to design to future projects. <br /> <br /> Feel free to shoot me a DM on <a href="https://www.linkedin.com/in/skylerbasco/" target="_blank" className='hyperlink'>LinkedIn</a>, email me at <a href="mailto: skylerbasco@gmail.com" target="_blank">skylerbasco@gmail.com</a>, or send a message through the form below! ⬇️</p>
+        <h1 className='contact-skyler'> Contact <span class="waving-hand">📩</span></h1>
+        <p className='contact-content-skyler'>Want to connect, collaborate, or build something innovative together? I’m happy to chat about anything from CS to design to future projects. <br /> <br /> Feel free to shoot me a DM on <a href="https://www.linkedin.com/in/skylerbasco/" target="_blank" className='hyperlink'>LinkedIn</a>, email me at <a href="mailto: skylerbasco@gmail.com" target="_blank">skylerbasco@gmail.com</a>, or send a message through the form below! ⬇️</p>
         <div className='project-cards'>
             <div className="project-card-skyler">
         <form action="https://formspree.io/f/mzbopzgv" method="POST"> 
         <div className='contact-formspree'>
-        <label classname='formspree-name'> Full Name <br/> <textarea name="name"  placeholder="Peter Parker"></textarea></label> 
-        <br/>
-        <br/>
-        <label > Email Address <br/> <textarea name="email"  placeholder="spidermannowayhome@gmail.com"></textarea></label>
+        <label classname='formspree-name'> <h2>Full Name</h2>  <textarea name="name"  placeholder="Peter Parker"></textarea></label> 
+        
         <br/>
+        <label > <h2>Email Address</h2>  <textarea name="email"  placeholder="spidermannowayhome@gmail.com"></textarea></label>
+        
         <br/>
-        <label> Message <br/> <textarea classname='formspree-message-box' name="message" placeholder="I'm your friendly neighborhood Spider-Man..."></textarea> </label>
+        <label> <h2>Message</h2> <textarea classname='formspree-message-box' name="message" placeholder="I'm your friendly neighborhood Spider-Man..."></textarea> </label>
         <br/>
         <br/>
         <button  type="submit" id="submit-btn-formspree"><p className='contact-formspree-button'>Submit</p></button>
+        <br/>
         </div>
         </form>
         </div>
         <div className="project-card-skyler">
+            <br/>
+            <br/>
         <img className = "qrcodecss" src={mcparrot} />
         </div>
         </div>
diff --git a/src/wintern-bios/2022/TeamLandingPage2022.jsx b/src/wintern-bios/2022/TeamLandingPage2022.jsx
index d02a844..306f6d1 100644
--- a/src/wintern-bios/2022/TeamLandingPage2022.jsx
+++ b/src/wintern-bios/2022/TeamLandingPage2022.jsx
@@ -4,16 +4,14 @@ import MargaretComponent from './MargaretComponent.jsx';
 import AngesComponent from './AngesComponent.jsx';
 import LaurenComponent from './LaurenComponent.jsx';
 import SkylerComponent from './SkylerComponent.jsx';
+import TeamList2022 from './TeamList2022.jsx';
 
 const TeamLandingPage2022 = () => {
 
   return (
     <div>
-        <AngesComponent />
-        <LaurenComponent />
-        <KadiatouComponent/>
-        <SkylerComponent />
-        <MargaretComponent /> 
+        <TeamList2022 /> 
+      
     </div>
   );
 }
diff --git a/src/wintern-bios/2022/TeamList2022.jsx b/src/wintern-bios/2022/TeamList2022.jsx
new file mode 100644
index 0000000..cf83b94
--- /dev/null
+++ b/src/wintern-bios/2022/TeamList2022.jsx
@@ -0,0 +1,228 @@
+import React from 'react';
+import anastasia_avatar from '../../assets/meet-the-team-2022/anastasia-avatar.png';
+import ange_avatar from '../../assets/meet-the-team-2022/ange-avatar.png';
+import lauren_avatar from '../../assets/meet-the-team-2022/lauren-avatar.png';
+import kadiatou_avatar from '../../assets/meet-the-team-2022/kadiatou-avatar-modified.png';
+import skyler_avatar from '../../assets/meet-the-team-2022/skyler-avatar.png';
+import margaret_avatar from '../../assets/meet-the-team-2022/margaret-avatar-1.png';
+import kevin_avatar from '../../assets/meet-the-team-2022/kevin-avatar.png';
+import grace_avatar from '../../assets/meet-the-team-2022/grace-avatar.png';
+import diana_avatar from '../../assets/meet-the-team-2022/diana-avatar.png';
+import belinda_avatar from '../../assets/meet-the-team-2022/belinda-avatar.png';
+import katelyn_avatar from '../../assets/meet-the-team-2022/katelyn-avatar.png';
+import tyler_avatar from '../../assets/meet-the-team-2022/tyler-avatar.png';
+import zack_avatar from '../../assets/meet-the-team-2022/zack-avatar.png';
+import julian_avatar from '../../assets/meet-the-team-2022/julian-avatar.png';
+import jenny_avatar from '../../assets/meet-the-team-2022/jenny-avatar.png';
+import claire_avatar from '../../assets/meet-the-team-2022/claire-avatar.png';
+import hannah_avatar from '../../assets/meet-the-team-2022/hannah-avatar.png';
+import julie_avatar from '../../assets/meet-the-team-2022/julie-avatar.png';
+import yang_avatar from '../../assets/meet-the-team-2022/yang-avatar.png';
+import suji_avatar from '../../assets/meet-the-team-2022/suji-avatar.png';
+import raghu_avatar from '../../assets/meet-the-team-2022/raghu-avatar.png';
+import austin_avatar from '../../assets/meet-the-team-2022/austin-avatar.png';
+import ty_avatar from '../../assets/meet-the-team-2022/ty-avatar.png';
+import desiree_avatar from '../../assets/meet-the-team-2022/desiree-avatar.png';
+import edison_avatar from '../../assets/meet-the-team-2022/edison-avatar.png';
+import jacob_avatar from '../../assets/meet-the-team-2022/jacob-avatar.png';
+import trupti_avatar from '../../assets/meet-the-team-2022/trupti-avatar.png';
+import jake_avatar from '../../assets/meet-the-team-2022/jake-avatar.png';
+import lily_avatar from '../../assets/meet-the-team-2022/lily-avatar.png';
+import mae_avatar from '../../assets/meet-the-team-2022/mae-avatar.png';
+import {Link} from "react-router-dom";
+
+const TeamList2022 = () => {
+  return (
+    <div className="teampage2022">  
+    <h1>Meet the Sprinterns</h1>
+    <p>Welcome to our team page! Click on the “Learn more” buttons below each of our icons to get to know us better.</p>
+    <div className='avatar-cards'>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={ange_avatar} text-align="center" />
+        <h5><b>Ange Louis</b></h5>
+        <h5>Engineering Intern</h5>
+        <Link to="/ange-louis" class="learn-more-button-yellow" target="_blank"><p>Learn more!</p></Link>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={lauren_avatar} text-align="center" />
+        <h5><b>Lauren Avilla</b></h5>
+        <h5>Engineering Intern</h5>
+        <Link to="/lauren-avilla" class="learn-more-button-lightgreen" target="_blank"><p>Learn more!</p></Link>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={kadiatou_avatar} text-align="center" />
+        <h5><b>Kadiatou Diallo</b></h5>
+        <h5>Engineering Intern</h5>
+        <Link to="/kadiatou-diallo" class="learn-more-button-green" target="_blank"><p>Learn more!</p></Link>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={skyler_avatar} text-align="center" />
+        <h5><b>Skyler Basco</b></h5>
+        <h5>Engineering Intern</h5>
+        <Link to="/skyler-basco" class="learn-more-button-blue" target="_blank"><p>Learn more!</p></Link>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={margaret_avatar} text-align="center" />
+        <h5><b>Margaret Diaz</b></h5>
+        <h5>Engineering Intern</h5>
+        <Link to="/margaret-diaz" class="learn-more-button-purple" target="_blank"><p>Learn more!</p></Link>
+        </div>
+    </div>
+    <h1>Meet the Hosts</h1>
+    <p>Say hello to our fun, hardworking Sprinternship hosts who have made this life-changing experience possible at Bitly!</p>
+    <div className='avatar-cards'>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={kevin_avatar} text-align="center" />
+        <h5><b>Kevin Li</b></h5>
+        <h5>Frontend Engineer</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={grace_avatar} text-align="center" />
+        <h5><b>Grace McGrath</b></h5>
+        <h5>Backend Engineer Intern</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={diana_avatar} text-align="center" />
+        <h5><b>Diana Bishop</b></h5>
+        <h5>Technical Lead</h5>
+        </div>
+    </div>
+    <h1>Meet the Speakers</h1>
+    <p>Round of applause to our talented workshop hosts for teaching us valuable skills!</p>
+    <div className='avatar-cards'>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={belinda_avatar} text-align="center" />
+        <h5><b>Belinda Black</b></h5>
+        <h5>“Meet Bitly Engineering”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={katelyn_avatar} text-align="center" />
+        <h5><b>Katelyn Arenas</b></h5>
+        <h5>“API 101”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={tyler_avatar} text-align="center" />
+        <h5><b>Tyler Lugger</b></h5>
+        <h5>“Python 101”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={zack_avatar} text-align="center" />
+        <h5><b>Zack Jones</b></h5>
+        <h5>“Product 101”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={julian_avatar} text-align="center" />
+        <h5><b>Julian Lasius</b></h5>
+        <h5>“Agile 101”</h5>
+        </div>
+    </div>
+    <div className='avatar-cards'>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={jenny_avatar} text-align="center" />
+        <h5><b>Jenny McKenzie</b></h5>
+        <h5>“Product Design 101”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={claire_avatar} text-align="center" />
+        <h5><b>Claire Cowger</b></h5>
+        <h5>“Sales/CS Session”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={hannah_avatar} text-align="center" />
+        <h5><b>Hannah McCaffrey</b></h5>
+        <h5>“Sales/CS Session”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={julie_avatar} text-align="center" />
+        <h5><b>Julie Zorn</b></h5>
+        <h5>“Sales/CS Session”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={yang_avatar} text-align="center" />
+        <h5><b>Yang Gu</b></h5>
+        <h5>“Sales/CS Session”</h5>
+        </div>
+    
+    </div>
+    <div className='avatar-cards'>
+    <div className="avatar-card">
+        <img className = "avatar-circle" src={anastasia_avatar} text-align="center" />
+        <h5><b>Anastasia Garelli</b></h5>
+        <h5>“QA 101”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={suji_avatar} text-align="center" />
+        <h5><b>Suji Gorle</b></h5>
+        <h5>“Bitly 101/Devops”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={raghu_avatar} text-align="center" />
+        <h5><b>Raghu Srinivasan</b></h5>
+        <h5>“CTO AMA”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={austin_avatar} text-align="center" />
+        <h5><b>Austin Whiting</b></h5>
+        <h5>“Marketing Session”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={ty_avatar} text-align="center" />
+        <h5><b>Ty Ratchford</b></h5>
+        <h5>“Technical Interview AMA”</h5>
+        </div>
+    </div>
+    <div className='avatar-cards'>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={desiree_avatar} text-align="center" />
+        <h5><b>Desiree Johnson</b></h5>
+        <h5>“Marketing Session”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={edison_avatar} text-align="center" />
+        <h5><b>Edison Giang</b></h5>
+        <h5>“Marketing Session”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={jacob_avatar} text-align="center" />
+        <h5><b>Jacob Segerman</b></h5>
+        <h5>“Marketing Session”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={trupti_avatar} text-align="center" />
+        <h5><b>Trupti Desai</b></h5>
+        <h5>“Marketing Session”</h5>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={jake_avatar} text-align="center" />
+        <h5><b>Jake Heft</b></h5>
+        <h5>“Technical Interview AMA”</h5>
+        </div>
+        <br/>
+    </div>
+    <div className='avatar-cards'>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={lily_avatar} text-align="center" />
+        <h5><b>Lily Elogullari</b></h5>
+        <h5>“Marketing Session”</h5>
+        <br/>
+        <br/>
+        </div>
+        <div className="avatar-card">
+        <img className = "avatar-circle" src={mae_avatar} text-align="center" />
+        <h5><b>Mae Tunney</b></h5>
+        <h5>“LinkedIn Session”</h5>
+        <br/>
+        <br/>
+        </div>
+        <br/>
+        <br/>
+        <br/>
+        
+    </div>
+    </div>
+    
+  );
+}
+
+
+export default TeamList2022;
\ No newline at end of file