diff --git a/components/Loading/index.tsx b/components/Loading/index.tsx
new file mode 100644
index 0000000..3677ad6
--- /dev/null
+++ b/components/Loading/index.tsx
@@ -0,0 +1,21 @@
+import { Divider } from "antd";
+
+export default function Loading() {
+  return (
+    <div 
+      className="container mx-auto flex flex-col max-w-md m-10 bg-white p-10 rounded-lg shadow-md space-y-5 items-center animate-pulse"
+    >
+      {/* header */}
+      <div className="flex flex-row space-x-2">
+
+        <div className="animate-pulse w-8 h-8 border-4 rounded-full border-teal-300" role="status">
+        </div>
+        
+        <div className="text-lg text-center">Loading</div>
+
+        
+      </div>
+      
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/contexts/teamDashboardContext.tsx b/contexts/teamDashboardContext.tsx
new file mode 100644
index 0000000..8305ec5
--- /dev/null
+++ b/contexts/teamDashboardContext.tsx
@@ -0,0 +1,148 @@
+import { useRouter } from "next/router";
+import React, { useContext, useEffect, useState } from "react";
+import Loading from "../components/Loading";
+import { Team } from "../models/team";
+import { TeamMember, TeamMemberStatus } from "../models/teamMember";
+import { User } from "../models/user";
+import TeamService from "../services/teamService";
+import UserService from "../services/userService";
+import { useAuth } from "./authContext";
+
+interface TeamDashboardContextInterface {
+  team: Team;
+  teamMembers: TeamMember[];
+  userTeamMember: TeamMember;
+  user: User;
+}
+
+const TeamDashboardContext =
+  React.createContext<TeamDashboardContextInterface | null>(null);
+
+const teamService = new TeamService();
+const userService = new UserService();
+
+export function TeamDashboardContextProvider({ children }) {
+  const { currUser } = useAuth();
+  const [loading, setLoading] = useState<Boolean>(true);
+  const router = useRouter();
+  const { teamid } = router.query;
+
+  // this context can only be used if it's a specific route: '/teams'
+  if (!teamid) {
+    router.push("/teams");
+  }
+
+  // update this "global" object to send to children
+  const [value, setValue] = useState<TeamDashboardContextInterface>(
+    {} as TeamDashboardContextInterface
+  );
+
+  useEffect(() => {
+    (async function () {
+      try {
+        // SECTION: authentication
+        if (!currUser) {
+          console.log(
+            "not authenticated...routing from dashboard to teams home"
+          );
+          router.push("/teams/login");
+          return;
+        }
+
+        // SECTION: get user details
+        const returnedUser = await userService.getUser(currUser.uid);
+        setValue((prevValue) => ({ ...prevValue, user: returnedUser }));
+
+        // SECTION: getting team data and team member information
+        if (typeof teamid !== "string") {
+          console.log("not a proper query with teamid");
+          router.push("/teams");
+          return;
+        }
+
+        // check if the team is a valid team and that user is in it
+        const returnedTeam = await teamService.getTeam(teamid);
+        if (!returnedTeam) {
+          console.log("team doesnt exist");
+          router.push("/teams");
+          return;
+        }
+        setValue((prevValue) => ({ ...prevValue, team: returnedTeam }));
+
+        const returnedTeamMember = await teamService.getTeamMemberByUserId(
+          teamid,
+          currUser.uid
+        );
+
+        //  if you are not a member of this team, then get out of here
+        //   but have to check through email invite and userid
+        if (
+          returnedTeamMember &&
+          returnedTeamMember.status == TeamMemberStatus.deleted
+        ) {
+          console.log("user was deleted from team");
+          router.push("/teams");
+          return;
+        }
+
+        // if there is no team member through user id,
+        // give him last chance and see if he was invited
+        if (!returnedTeamMember) {
+          const invitedTeamMember =
+            await teamService.getTeamMemberByEmailInvite(
+              teamid,
+              currUser.email
+            );
+
+          if (!invitedTeamMember) {
+            console.log("not invited to team either");
+            router.push("/teams");
+            return;
+          }
+
+          // if I am new to the team but I was invited, and this is my first time, then activate me into the team
+          // and proceed with showing the dashboard stuff
+
+          invitedTeamMember.status = TeamMemberStatus.activated;
+          invitedTeamMember.userId = currUser.uid;
+          await teamService.updateTeamMember(invitedTeamMember);
+
+          setValue((prevValue) => ({
+            ...prevValue,
+            userTeamMember: invitedTeamMember,
+          }));
+        } else {
+          setValue((prevValue) => ({
+            ...prevValue,
+            userTeamMember: returnedTeamMember,
+          }));
+        }
+
+        // SECTION: get all teammembers for team, will have listeners in other subcomponents
+        const teamMembers = await teamService.getTeamMembersByTeamId(
+          returnedTeam.id
+        );
+        setValue((prevValue) => ({ ...prevValue, teamMembers: teamMembers }));
+      } catch (error) {
+        console.log(error);
+        router.push("/teams/login");
+      }
+
+      setLoading(false);
+    })();
+  }, []);
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <TeamDashboardContext.Provider value={value}>
+      {children}
+    </TeamDashboardContext.Provider>
+  );
+}
+
+export function useTeamDashboardContext() {
+  return useContext(TeamDashboardContext);
+}
diff --git a/pages/teams/[teamid].tsx b/pages/teams/[teamid].tsx
index 60a8870..c4429d9 100644
--- a/pages/teams/[teamid].tsx
+++ b/pages/teams/[teamid].tsx
@@ -1,99 +1,35 @@
-import { GetServerSidePropsContext, GetServerSidePropsResult } from 'next'
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import BackgroundLayout from '../../components/Layouts/BackgroundLayout'
-import { useAuth } from '../../contexts/authContext'
-import { Team } from '../../models/team'
-import { TeamMemberStatus } from '../../models/teamMember'
-import TeamService from '../../services/teamService'
+import { GetServerSidePropsContext, GetServerSidePropsResult } from "next";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
+import Loading from "../../components/Loading";
+import { useAuth } from "../../contexts/authContext";
+import {
+  TeamDashboardContextProvider,
+  useTeamDashboardContext,
+} from "../../contexts/teamDashboardContext";
+import { Team } from "../../models/team";
+import { TeamMemberStatus } from "../../models/teamMember";
+import TeamService from "../../services/teamService";
 
-const teamService = new TeamService()
+function TeamDashboard() {
+  const { currUser } = useAuth();
+  const router = useRouter();
+  const teamDashboardContext = useTeamDashboardContext();
 
-export default function TeamDashboard() {
-  const { currUser } = useAuth()
-  const router = useRouter()
-  const { teamid } = router.query
+  console.log(teamDashboardContext);
 
-  const [loading, setLoading] = useState<Boolean>(true)
-  const [team, setTeam] = useState<Team>(null)
-
-  useEffect(() => {
-    (async function() {
-      try {
-        // if not authenticated, take user to the login
-        if (!currUser) {
-          console.log('not authenticated...routing from dashboard to teams home')
-          router.push('/teams/login')
-          return
-        }
-
-        if (typeof teamid !== "string") {
-          console.log('not a proper query with teamid')
-          router.push('/teams')
-          return
-        }
-
-        // check if the team is a valid team and that user is in it
-        const returnedTeam = await teamService.getTeam(teamid)
-        if (!returnedTeam) {
-          console.log('team doesnt exist')
-          router.push('/teams')
-          return
-        }
-
-        const returnedTeamMember = await teamService.getTeamMemberByUserId(teamid, currUser.uid)          
-
-        console.log(returnedTeam)
-        console.log(returnedTeamMember)
-
-        //  if you are not a member of this team, then get out of here
-        //   but have to check through email invite and userid
-        if (returnedTeamMember && returnedTeamMember.status == TeamMemberStatus.deleted) {
-          console.log('user was deleted from team')
-          router.push('/teams')
-          return
-        }
-
-        // if there is no team member through user id,
-        // give him last chance and see if he was invited
-        if (!returnedTeamMember) {
-          const invitedTeamMember = await teamService.getTeamMemberByEmailInvite(teamid, currUser.email)
-
-          if (!invitedTeamMember) {
-            console.log('not invited to team either')
-            router.push('/teams')
-            return 
-          }
-
-          // if I am new to the team but I was invited, and this is my first time, then activate me into the team
-          // and proceed with showing the dashboard stuff
-
-          invitedTeamMember.status = TeamMemberStatus.activated
-          invitedTeamMember.userId = currUser.uid
-          await teamService.updateTeamMember(invitedTeamMember)
-        }
-      } catch(error) {
-        console.log(error)
-        router.push('/teams/login')
-      }
-
-      setLoading(false)
-    })();
-  }, [])
-
-  if (loading) {
-    return (
-      <div>loading</div> 
-    )
-  }
+  return <div>{JSON.stringify(teamDashboardContext)}</div>;
+}
 
+export default function TeamDashboardWrapper() {
   return (
-    <BackgroundLayout>
-      the team is {teamid}
-      
-    
-    </BackgroundLayout>
-  )
+    <TeamDashboardContextProvider>
+      <BackgroundLayout>
+        <TeamDashboard />
+      </BackgroundLayout>
+    </TeamDashboardContextProvider>
+  );
 }
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
@@ -105,5 +41,5 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
   return {
     props: {},
-  }
-}
\ No newline at end of file
+  };
+}
diff --git a/pages/teams/index.tsx b/pages/teams/index.tsx
index a803708..952745a 100644
--- a/pages/teams/index.tsx
+++ b/pages/teams/index.tsx
@@ -1,72 +1,80 @@
-import { useAuth } from "../../contexts/authContext"
-import { useRouter } from "next/router"
-import { useEffect, useState } from "react"
-import UserService from '../../services/userService'
-import { User } from "../../models/user"
-import { GetServerSidePropsContext } from "next"
-import nookies from 'nookies'
-import firebaseAdmin from 'firebase-admin'
-import unfetch from 'isomorphic-unfetch'
-import {
-  FaPeopleCarry,
-  FaArrowRight,
-  FaBullhorn
-} from "react-icons/fa";
-import BackgroundLayout from "../../components/Layouts/BackgroundLayout"
-import TeamService from "../../services/teamService"
+import { useAuth } from "../../contexts/authContext";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import UserService from "../../services/userService";
+import { User } from "../../models/user";
+import { GetServerSidePropsContext } from "next";
+import nookies from "nookies";
+import firebaseAdmin from "firebase-admin";
+import unfetch from "isomorphic-unfetch";
+import { FaPeopleCarry, FaArrowRight, FaBullhorn } from "react-icons/fa";
+import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
+import TeamService from "../../services/teamService";
 
 /**
  * figure out where to take the user based on everything
  */
 
-const userService: UserService = new UserService()
-const teamService: TeamService = new TeamService()
+const userService: UserService = new UserService();
+const teamService: TeamService = new TeamService();
 
 function RouteHandler() {
-  const { currUser } = useAuth()
-  const router = useRouter()
-  
-  const [loading, setLoading] = useState<Boolean>(true)
-  const [user, setUser] = useState<User | null>(null)
+  const { currUser } = useAuth();
+  const router = useRouter();
+
+  const [loading, setLoading] = useState<Boolean>(true);
+  const [user, setUser] = useState<User | null>(null);
 
   useEffect(() => {
-    (async function() {
+    (async function () {
       try {
         // if not authenticated, take user to the login
         if (!currUser) {
-          console.log('not authenticated...routing from dashboard to teams home')
-          router.push('/teams/login')
+          console.log(
+            "not authenticated...routing from dashboard to teams home"
+          );
+          router.push("/teams/login");
         }
 
-        // get user 
-        const returnedUser: User | null = await userService.getUser(currUser.uid)
-        console.log(returnedUser)
+        // get user
+        const returnedUser: User | null = await userService.getUser(
+          currUser.uid
+        );
+        console.log(returnedUser);
         // if user has no profile, then go to create profile
-        if (!returnedUser || !returnedUser.firstName || !returnedUser.lastName || !returnedUser.nickName) {
-          console.log('no profile for the user, routing him/her there')
-          router.push('/teams/profile')
-        }
-        setUser(returnedUser)
-        
-        // check if user is in a team go to the team dashboard
-        const returnedTeamMembers = await teamService.getTeamMembersByUserId(currUser.uid)
-        if (returnedTeamMembers.length > 0) {
-          console.log('in a team! going to the team dashboard of the first one!')
-          router.push('/teams/' + returnedTeamMembers[0].teamId)
-          return
+        if (
+          !returnedUser ||
+          !returnedUser.firstName ||
+          !returnedUser.lastName ||
+          !returnedUser.nickName
+        ) {
+          console.log("no profile for the user, routing him/her there");
+          router.push("/teams/profile");
         }
+        setUser(returnedUser);
 
-      } catch(error) {
-        console.log(error)
-        router.push('/teams/login')
+        // check if user is in a team go to the team dashboard
+        const returnedTeamMembers = await teamService.getTeamMembersByUserId(
+          currUser.uid
+        );
+        if (returnedTeamMembers.length > 0) {
+          console.log(
+            "in a team! going to the team dashboard of the first one!"
+          );
+          router.push("/teams/" + returnedTeamMembers[0].teamId);
+          return;
+        }
+      } catch (error) {
+        console.log(error);
+        router.push("/teams/login");
       }
     })();
 
-    setLoading(false)
-  }, [currUser])
+    setLoading(false);
+  }, [currUser]);
 
   if (loading || !user) {
-    return <div></div>
+    return <div></div>;
   }
 
   // not in a team yet, and have not created a team yet
@@ -76,25 +84,36 @@ function RouteHandler() {
       <div className="flex flex-row items-center justify-between">
         <span className="flex flex-col justify-start">
           <div className="text-lg">👋Hey, {user.firstName}</div>
-          <span className="text-gray-300 text-md">Let&apos;s get you started.</span>
+          <span className="text-gray-300 text-md">
+            Let&apos;s get you started.
+          </span>
         </span>
-        
-        <button onClick={() => router.push('/teams/profile')}>
-          <img src={user ? user.avatarUrl : currUser.photoURL} alt="asdf" className="rounded-full w-12" />
+
+        <button onClick={() => router.push("/teams/profile")}>
+          <img
+            src={user ? user.avatarUrl : currUser.photoURL}
+            alt="asdf"
+            className="rounded-full w-12"
+          />
         </button>
       </div>
 
       {/* create team hover thing */}
-      <button onClick={() => router.push('/teams/create')} className="group flex flex-row py-5 px-3 items-center border border-dashed rounded hover:shadow-lg transition duration-400">
+      <button
+        onClick={() => router.push("/teams/create")}
+        className="group flex flex-row py-5 px-3 items-center border border-dashed rounded hover:shadow-lg transition duration-400"
+      >
         <FaPeopleCarry className="text-5xl text-teal-500" />
 
         <span className="flex flex-col items-start ml-2 mr-10">
           <span className="text-gray-500">Create a Team</span>
-          <span className="text-gray-300 text-sm text-left">Add members, and get started immediately.</span>
+          <span className="text-gray-300 text-sm text-left">
+            Add members, and get started immediately.
+          </span>
         </span>
 
-        <span className='ml-auto bg-gray-500 bg-opacity-25 p-2 rounded group-hover:bg-opacity-40 group-hover:bg-teal-500'>
-            <FaArrowRight className='text-sm text-white' />
+        <span className="ml-auto bg-gray-500 bg-opacity-25 p-2 rounded group-hover:bg-opacity-40 group-hover:bg-teal-500">
+          <FaArrowRight className="text-sm text-white" />
         </span>
       </button>
 
@@ -104,14 +123,23 @@ function RouteHandler() {
 
         <span className="flex flex-col items-start ml-2 mr-10">
           <span className="text-gray-500">Remind Your Manager</span>
-          <span className="text-gray-300 text-sm text-left">Your account email is {user.emailAddress}</span>
+          <span className="text-gray-300 text-sm text-left">
+            Your account email is {user.emailAddress}
+          </span>
         </span>
-
       </button>
 
-      <span className="text-gray-300 ml-auto text-md mt-10">or learn more about <button onClick={() => router.push('/teams/landing')} className="underline font-satisfy text-xl text-teal-500 decoration-teal-500">nirvana</button></span>
+      <span className="text-gray-300 ml-auto text-md mt-10">
+        or learn more about{" "}
+        <button
+          onClick={() => router.push("/teams/landing")}
+          className="underline font-satisfy text-xl text-teal-500 decoration-teal-500"
+        >
+          nirvana
+        </button>
+      </span>
     </div>
-  )
+  );
 }
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
@@ -143,14 +171,14 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   //     console.log(e)
   //   }
   // }
-  
+
   // // Pass data to the page via props
-  // return { props: { 
+  // return { props: {
   //   user
   //  }
   // }
 
-  return { props: { }}
+  return { props: {} };
 }
 
-export default RouteHandler
+export default RouteHandler;
diff --git a/services/teamService.tsx b/services/teamService.tsx
index a34e56c..16660b0 100644
--- a/services/teamService.tsx
+++ b/services/teamService.tsx
@@ -1,34 +1,55 @@
-import { addDoc, collection, doc, DocumentReference, Firestore, getDoc, getDocs, getFirestore, orderBy, query, serverTimestamp, setDoc, where } from 'firebase/firestore'
-import { Team } from '../models/team'
-import { TeamMember, TeamMemberRole, TeamMemberStatus } from '../models/teamMember'
-import { Collections } from './collections'
-import IService from './IService'
+import {
+  addDoc,
+  collection,
+  doc,
+  DocumentReference,
+  Firestore,
+  getDoc,
+  getDocs,
+  getFirestore,
+  orderBy,
+  query,
+  serverTimestamp,
+  setDoc,
+  where,
+} from "firebase/firestore";
+import { Team } from "../models/team";
+import {
+  TeamMember,
+  TeamMemberRole,
+  TeamMemberStatus,
+} from "../models/teamMember";
+import { Collections } from "./collections";
+import IService from "./IService";
 
 export default class TeamService implements IService {
-  db : Firestore = getFirestore()
+  db: Firestore = getFirestore();
 
   async createTeam(team: Team): Promise<string> {
     // create team
     const teamDocRef = await addDoc(collection(this.db, Collections.teams), {
       ...team,
-      createdDate: serverTimestamp()
-    })
+      createdDate: serverTimestamp(),
+    });
 
-    const teamMember = new TeamMember()
-    teamMember.role = TeamMemberRole.admin
-    teamMember.teamId = teamDocRef.id
-    teamMember.userId = team.createdByUserId
-    teamMember.status = TeamMemberStatus.activated
+    const teamMember = new TeamMember();
+    teamMember.role = TeamMemberRole.admin;
+    teamMember.teamId = teamDocRef.id;
+    teamMember.userId = team.createdByUserId;
+    teamMember.status = TeamMemberStatus.activated;
 
     // create team member as admin who created the team
-    const teamMemberRef = await addDoc(collection(this.db, Collections.teamMembers), {
-      ...teamMember,
-      createdDate: serverTimestamp()
-    })
+    const teamMemberRef = await addDoc(
+      collection(this.db, Collections.teamMembers),
+      {
+        ...teamMember,
+        createdDate: serverTimestamp(),
+      }
+    );
 
-    console.log('created team')
+    console.log("created team");
 
-    return teamDocRef.id
+    return teamDocRef.id;
   }
 
   async getTeam(teamId: string): Promise<Team | null> {
@@ -36,105 +57,135 @@ export default class TeamService implements IService {
     const docSnap = await getDoc(docRef);
 
     if (docSnap.exists()) {
-      console.log('got team data')
-      let team: Team = docSnap.data() as Team
-      team.id = docSnap.id
-      return team
+      console.log("got team data");
+      let team: Team = docSnap.data() as Team;
+      team.id = docSnap.id;
+      return team;
     } else {
       // doc.data() will be undefined in this case
       console.log("team not found!");
-      
-      return null
+
+      return null;
     }
   }
-  
-  async getTeamMemberByUserId(teamId: string, userId: string): Promise<TeamMember | null> {
+
+  async getTeamMemberByUserId(
+    teamId: string,
+    userId: string
+  ): Promise<TeamMember | null> {
     const q = query(
-      collection(this.db, Collections.teamMembers), 
+      collection(this.db, Collections.teamMembers),
       where("teamId", "==", teamId),
       where("userId", "==", userId)
-    )
-    
+    );
+
     const querySnapshot = await getDocs(q);
-    
+
     if (querySnapshot.size > 1) {
-      console.log('there are multiple teammembers for this user...error in teamservice')
+      console.log(
+        "there are multiple teammembers for this user...error in teamservice"
+      );
     }
 
-    console.log(querySnapshot)
-
-    var teamMember: TeamMember | null = null
+    var teamMember: TeamMember | null = null;
     querySnapshot.forEach((doc) => {
       // doc.data() is never undefined for query doc snapshots
       // get the first one and just return...shouldn't be more
-      console.log('got teammember data')
-      teamMember = doc.data() as TeamMember
+      console.log("got teammember data");
+      teamMember = doc.data() as TeamMember;
 
-      teamMember.id = doc.id
+      teamMember.id = doc.id;
     });
 
-    return teamMember
+    return teamMember;
   }
 
-  async getTeamMemberByEmailInvite(teamId: string, emailAddress: string): Promise<TeamMember | null> {
+  async getTeamMemberByEmailInvite(
+    teamId: string,
+    emailAddress: string
+  ): Promise<TeamMember | null> {
     const q = query(
-      collection(this.db, Collections.teamMembers), 
+      collection(this.db, Collections.teamMembers),
       where("teamId", "==", teamId),
       where("inviteEmailAddress", "==", emailAddress)
-    )
-    
+    );
+
     const querySnapshot = await getDocs(q);
-    
+
     if (querySnapshot.size > 1) {
-      console.log('there are multiple teammembers for this user...error in teamservice')
+      console.log(
+        "there are multiple teammembers for this user...error in teamservice"
+      );
     }
 
-    console.log(querySnapshot)
-
-    var teamMember: TeamMember | null = null
+    var teamMember: TeamMember | null = null;
     querySnapshot.forEach((doc) => {
       // doc.data() is never undefined for query doc snapshots
       // get the first one and just return...shouldn't be more
-      console.log('got teammember data')
-      teamMember = doc.data() as TeamMember
+      console.log("got teammember data");
+      teamMember = doc.data() as TeamMember;
 
-      teamMember.id = doc.id
+      teamMember.id = doc.id;
     });
 
-    return teamMember
+    return teamMember;
   }
 
   async getTeamMembersByUserId(userId: string): Promise<TeamMember[]> {
     const q = query(
-      collection(this.db, Collections.teamMembers), 
-      where("userId", "==", userId),
-    )
-    
+      collection(this.db, Collections.teamMembers),
+      where("userId", "==", userId)
+    );
+
     const querySnapshot = await getDocs(q);
-    
+
     if (querySnapshot.size > 1) {
-      console.log('this user is part of multiple teams')
+      console.log("this user is part of multiple teams");
     }
 
-    console.log(querySnapshot)
-
-    var teamMembers: TeamMember[] = []
+    var teamMembers: TeamMember[] = [];
 
     querySnapshot.forEach((doc) => {
       // doc.data() is never undefined for query doc snapshots
       // get the first one and just return...shouldn't be more
-      console.log('got teammember data')
-      let teamMember:TeamMember = doc.data() as TeamMember
-      teamMember.id = doc.id
+      console.log("got teammember data");
+      let teamMember: TeamMember = doc.data() as TeamMember;
+      teamMember.id = doc.id;
 
-      teamMembers.push(teamMember)
+      teamMembers.push(teamMember);
     });
 
-    return teamMembers
+    return teamMembers;
+  }
+
+  async getTeamMembersByTeamId(teamId: string): Promise<TeamMember[]> {
+    const q = query(
+      collection(this.db, Collections.teamMembers),
+      where("teamId", "==", teamId)
+    );
+
+    const querySnapshot = await getDocs(q);
+
+    var teamMembers: TeamMember[] = [];
+
+    querySnapshot.forEach((doc) => {
+      // doc.data() is never undefined for query doc snapshots
+      // get the first one and just return...shouldn't be more
+      let teamMember: TeamMember = doc.data() as TeamMember;
+      teamMember.id = doc.id;
+
+      teamMembers.push(teamMember);
+    });
+
+    return teamMembers;
   }
 
   async updateTeamMember(teamMember: TeamMember) {
     const docRef = doc(this.db, Collections.teamMembers, teamMember.id);
-    await setDoc(docRef, { ...teamMember, lastUpdatedDate: serverTimestamp() }, { merge: true })
-  } 
-}
\ No newline at end of file
+    await setDoc(
+      docRef,
+      { ...teamMember, lastUpdatedDate: serverTimestamp() },
+      { merge: true }
+    );
+  }
+}