diff --git a/ravens-team-react/ravens-team-react/src/components/bars/headers/header-nav-component.tsx b/ravens-team-react/ravens-team-react/src/components/bars/headers/header-nav-component.tsx
index 0236506..2b06209 100644
--- a/ravens-team-react/ravens-team-react/src/components/bars/headers/header-nav-component.tsx
+++ b/ravens-team-react/ravens-team-react/src/components/bars/headers/header-nav-component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { TeamResponse } from '../../../utils/twitch-api-types/team-types';
 import { TabList, Tab, Image, makeStyles, tokens, SelectTabEvent, SelectTabData } from '@fluentui/react-components';
 
@@ -45,27 +45,8 @@ const useStyles = makeStyles({
     }
 });
 
-
-
 export const HeaderNav: React.FC<HeaderNavProps> = ({ teams, defaultTab, onTabChange }: HeaderNavProps) => {
     const styles = useStyles();
-    const renderTabs = () => {
-        return (
-            <>
-                {
-                    teams.map((team) => (
-                        <Tab key={team.team_name} value={team.id} aria-label={team.team_display_name}>
-                            <Image src={team.thumbnail_url}
-                                fit='contain'
-                                shape="circular"
-                                alt={`${team.team_display_name} logo`}
-                                className={styles.tabImage} />
-                        </Tab>
-                    ))}
-            </>
-        );
-    };
-
     return (
         <nav className={styles.headerNavRow}>
             <TabList
@@ -74,7 +55,15 @@ export const HeaderNav: React.FC<HeaderNavProps> = ({ teams, defaultTab, onTabCh
                 selectTabOnFocus={true}
                 className={styles.headerTitleRow}>
                 {
-                    renderTabs()
+                    teams.map((team) => (
+                        <Tab id={team.team_name} value={team.id} aria-label={team.team_display_name}>
+                            <Image src={team.thumbnail_url}
+                                fit='contain'
+                                shape="circular"
+                                alt={`${team.team_display_name} logo`}
+                                className={styles.tabImage} />
+                        </Tab>
+                    ))
                 }
             </TabList>
         </nav >
diff --git a/ravens-team-react/ravens-team-react/src/components/layouts/content-layout.tsx b/ravens-team-react/ravens-team-react/src/components/layouts/content-layout.tsx
index 62c409b..50a6faa 100644
--- a/ravens-team-react/ravens-team-react/src/components/layouts/content-layout.tsx
+++ b/ravens-team-react/ravens-team-react/src/components/layouts/content-layout.tsx
@@ -2,6 +2,7 @@ import { makeStyles, tokens } from "@fluentui/react-components";
 
 const useStyles = makeStyles({
     sectionLayout: {
+        width: "100%",
         justifyContent: "stretch",
         alignContent: "center"
     }
diff --git a/ravens-team-react/ravens-team-react/src/components/layouts/main-layout.tsx b/ravens-team-react/ravens-team-react/src/components/layouts/main-layout.tsx
index 6690dab..d1ed449 100644
--- a/ravens-team-react/ravens-team-react/src/components/layouts/main-layout.tsx
+++ b/ravens-team-react/ravens-team-react/src/components/layouts/main-layout.tsx
@@ -1,15 +1,18 @@
 // src/components/TeamContainer.tsx
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Footer } from '../bars/footers/footer-nav';
 import { HeaderComponent } from '../bars/headers/header-component';
 import { Body1Strong, Spinner, makeStyles, tokens } from '@fluentui/react-components';
-import type { SelectTabData, SelectTabEvent,TabValue} from "@fluentui/react-components";
+import type { SelectTabData, SelectTabEvent, TabValue } from "@fluentui/react-components";
 import { TeamTabPanel } from '../teams/teams-list/team-tab-panel';
 import { HeaderNav } from '../bars/headers/header-nav-component';
 import { useQuery } from '../../utils/axios-instance';
 import { getBroadcasterInfo } from '../../utils/twitchApi';
 import { TwitchBroadcasterResponse } from '../../utils/twitch-api-types/user-types';
 import { useTeamInfo } from '../../hooks/team-hooks/use-team-info';
+import { TeamResponse } from '../../utils/twitch-api-types/team-types';
+import { ContentLayout } from './content-layout';
+import { TeamPanels } from '../teams/teams-list/team-panels-view';
 interface MainLayoutProps {
     broadcasterId: string;
 }
@@ -28,11 +31,12 @@ const useStyles = makeStyles({
         justifyContent: 'center',
         width: '100%',
         marginTop: tokens.spacingVerticalL,
+        marginBottom: tokens.spacingVerticalL,
         zIndex: tokens.zIndexContent
     },
     footerNavBar: {
         width: '100%',
-        bottom:0,
+        bottom: 0,
         paddingTop: tokens.spacingVerticalL,
         color: tokens.colorNeutralForeground1,
         justifyContent: "space-evenly",
@@ -46,65 +50,38 @@ const useStyles = makeStyles({
 });
 
 
+
 export const MainLayout: React.FC<MainLayoutProps> = ({ broadcasterId }) => {
+    const { teams, loading, error } = useTeamInfo(broadcasterId);
+    const [broadcasterInfo, { loading: broadcasterLoading, error: broadcasterError }] = useQuery<TwitchBroadcasterResponse, string>(getBroadcasterInfo, broadcasterId);
+    const [selectedValue, setSelectedValue] = useState<TabValue>(teams[0]?.id);
     const styles = useStyles();
-    const [broadcasterInfo, {loading: broadcasterLoading, error: broadcasterError}] = useQuery<TwitchBroadcasterResponse, string>(getBroadcasterInfo, broadcasterId); 
-    const {teams,  loading, error } = useTeamInfo(broadcasterId);
-    const [selectedValue, setSelectedValue] = useState<TabValue>(teams[0]?.id ?? "");
-    
-    if (loading || broadcasterLoading) return <Spinner appearance='primary' label={'Loading broadcaster data...'} labelPosition='before' />;
-    if (broadcasterError) return <Body1Strong as="strong" align='center'>Error loading broadcaster information: [broadcasterError]</Body1Strong>;
-    if (error) return <Body1Strong as="strong" align='center'>Error loading broadcaster information: <code>[error]</code></Body1Strong>;
 
-  const onTabSelect = (event: SelectTabEvent, data: SelectTabData) => {
-    setSelectedValue(data.value);
-  };
+    if (loading || broadcasterLoading) return <Spinner appearance='primary' label={'Loading broadcaster data...'} labelPosition='before' />;
+    if (broadcasterError) return <Body1Strong as="strong" align='center'>Error loading broadcaster information: <code>{broadcasterError}</code></Body1Strong>;
+    if (error) return <Body1Strong as="strong" align='center'>Error loading broadcaster information: <code>{error.message}</code></Body1Strong>;
 
-    const renderHeader = () => {
-        return (
+    const onTabSelect = (event: SelectTabEvent, data: SelectTabData) => {
+        setSelectedValue(data.value);
+    };
+    const team = teams?.find((team) => team?.id === selectedValue) ?? teams[0];
+    return (
+        <div className={styles.removeOverflow}>
+            {/* Header content */}
             <header className={styles.headerProp}>
                 <HeaderComponent broadcasterName={broadcasterInfo[0].broadcaster_name ?? ""} />
-                <HeaderNav teams={teams} defaultTab={teams[0]?.id} onTabChange={onTabSelect}/>
+                <HeaderNav teams={teams} defaultTab={team?.id} onTabChange={onTabSelect} />
             </header>
-        );
-    };
-
-    const renderMainContent = () => {
-        return (
+            {/* Main content */}
             <main className={styles.mainLayout}>
-                {
-                    teams.map(team => {
-                        return(
-                            <div role="tabpanel" aria-labelledby={team.id}>
-                                <TeamTabPanel teamId={team.id} />
-                            </div>
-                        );
-                    })
-                }
+                <ContentLayout>
+                   <div></div>
+                </ContentLayout>
             </main>
-        );
-    };
-    const renderFooter = () => {
-        return (
+            {/* Footer content */}
             <footer className={styles.footerNavBar}>
                 <Footer />
             </footer>
-        );
-    };
-    return (
-        <div className={styles.removeOverflow}>
-            {
-            /* Header with navigation and broadcaster name */
-            renderHeader()
-            }
-            {
-            /* Main content area */
-            renderMainContent()
-            }
-            {
-            /* Footer */
-            renderFooter()
-            }
         </div>
     );
 };
\ No newline at end of file
diff --git a/ravens-team-react/ravens-team-react/src/components/teams/teams-list/team-list-item.tsx b/ravens-team-react/ravens-team-react/src/components/teams/teams-list/team-list-item.tsx
index 82582c6..0a76102 100644
--- a/ravens-team-react/ravens-team-react/src/components/teams/teams-list/team-list-item.tsx
+++ b/ravens-team-react/ravens-team-react/src/components/teams/teams-list/team-list-item.tsx
@@ -1,10 +1,11 @@
 // src/components/TeamListItem.tsx
-import React from 'react';
+import React, { memo, useMemo } from 'react';
 import { Body1Strong, Button, buttonClassNames, Caption1, Card, CardFooter, CardHeader, CardPreview, Image, InfoLabel, makeResetStyles, makeStyles, mergeClasses, Spinner, tokens } from '@fluentui/react-components';
 import { TwitchUser } from '../../../utils/twitch-api-types/user-types';
 import { ArrowReplyRegular } from '@fluentui/react-icons';
 import { TwitchPersona } from '../../../features/profiles/twitch-persona';
 import { ListItem } from '@fluentui/react-list-preview';
+import { areEqual } from 'react-window';
 
 interface TeamListItemProps {
   member: TwitchUser;
@@ -49,12 +50,11 @@ const useStyles = makeStyles({
   }
 });
 
-const renderPersonaDetails = (user: TwitchUser) => 
-   <InfoLabel id={`btn-${user.id}`} onClick={e => e.preventDefault()} info={<TwitchPersona twitchUser={user} links={[]} />} />;
 
 export const TeamListItem: React.FC<TeamListItemProps> = ({ member }: TeamListItemProps) => {
   const [loading, setLoading] = React.useState<boolean>(false);
   const [followedChannel, setFollowedChannel] = React.useState<boolean>(false);
+  const memoizedPersona = useMemo(() => <InfoLabel id={`btn-${member.id}`} onClick={e => e.preventDefault()} info={<TwitchPersona twitchUser={member} links={[]} />} />, [member]);
   const styles = useStyles();
   const determineButtonIcon = loading ? <Spinner size="tiny" /> : <ArrowReplyRegular fontSize={16} />;
   const didTheyFollow = (didFollow: boolean, channelName: string) => {
@@ -63,13 +63,14 @@ export const TeamListItem: React.FC<TeamListItemProps> = ({ member }: TeamListIt
     }
     setLoading(false);
   };
-  const buttonClassName = !loading || followedChannel ? undefined : styles.buttonNonInteractive;
+
   const followMember = (e: React.MouseEvent) => {
-    setLoading(true);
     e.preventDefault();
     window.Twitch.ext.actions.onFollow(didTheyFollow);
     window.Twitch.ext.actions.followChannel(member.login);
   };
+  
+  const buttonClassName = !loading || followedChannel ? undefined : styles.buttonNonInteractive;
 
   return (
     <Card appearance='filled-alternative'
@@ -89,19 +90,17 @@ export const TeamListItem: React.FC<TeamListItemProps> = ({ member }: TeamListIt
           }
         }
         description={<Caption1 as="p" className={styles.caption}>{member.broadcaster_type}</Caption1>}
-        action={renderPersonaDetails(member)}
+        action={
+          <div role="gridcell">
+            {memoizedPersona}
+          </div>
+        }
       />
       <Caption1 as="p" className={styles.caption}>{member.description}</Caption1>
       <CardFooter>
-        <Button
-          id={`btn-follow-${member.id}`}
-          className={buttonClassName}
-          iconPosition='before'
-          icon={determineButtonIcon}
-          onClick={followMember}
-          appearance='primary'>
-          Follow
-        </Button>
+        <div role="gridcell">
+        <Button id={`btn-follow-${member.id}`} className={buttonClassName} iconPosition='before' icon={determineButtonIcon} onClick={followMember} appearance='primary'>Follow</Button>
+        </div>
       </CardFooter>
     </Card>
   );
diff --git a/ravens-team-react/ravens-team-react/src/components/teams/teams-list/team-list.tsx b/ravens-team-react/ravens-team-react/src/components/teams/teams-list/team-list.tsx
index 23b650a..d60a3b3 100644
--- a/ravens-team-react/ravens-team-react/src/components/teams/teams-list/team-list.tsx
+++ b/ravens-team-react/ravens-team-react/src/components/teams/teams-list/team-list.tsx
@@ -1,10 +1,10 @@
 // src/components/TeamList.tsx
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { areEqual, FixedSizeList } from "react-window";
 import { List, ListItem } from "@fluentui/react-list-preview";
 import { TeamListItem } from './team-list-item';
 import { BasicTwitchUser } from '../../../utils/twitch-api-types/team-types';
-import { Body1, makeResetStyles, makeStyles, mergeClasses, tokens } from '@fluentui/react-components';
+import { Body1, Caption1, makeResetStyles, makeStyles, mergeClasses, tokens } from '@fluentui/react-components';
 import { useBatchRequests } from '../../../hooks/batch-request-hooks/use-batch-requests';
 import { TableSkeleton } from '../../skeletons/initializer-skeleton';
 import { TwitchUser } from '../../../utils/twitch-api-types/user-types';
@@ -20,54 +20,61 @@ const useListItemRootStyles = makeResetStyles({
     gridTemplate: `"preview preview preview" auto
         "header action secondary_action" auto / 1fr auto auto
       `,
-  });
+});
 const useStyles = makeStyles({
     list: {
         display: "flex",
         flexDirection: "column",
         gap: "1em",
-        maxWidth: "300px",
+        width: "100%",
+        height: "500px",
+        overflowX: "hidden",
+        overflowY: "scroll"
     },
     listItem: {
         display: "grid",
-        padding: "8px",
-      },
-      caption: {
+        width: "100%",
+        height: "100%",
+        marginLeft: tokens.spacingHorizontalXL,
+        marginRight: tokens.spacingHorizontalXL,
+
+    },
+    caption: {
         color: tokens.colorNeutralForeground3,
-      },
-      image: {
+    },
+    image: {
         height: "160px",
         maxWidth: "100%",
         borderRadius: "5px",
-      },
-      title: {
+    },
+    title: {
         color: tokens.colorNeutralForeground1,
         fontWeight: 600,
         display: "block",
-      }
+    }
 });
 
-
 // Inside the TeamList component, use the useQuery hook to fetch the user details
 export const TeamList: React.FC<TeamListProps> = ({ members }: TeamListProps) => {
     const { userDetails, loading, error } = useBatchRequests(members);
     const rootStyles = useListItemRootStyles();
     const styles = useStyles();
     if (loading) return <TableSkeleton />;
-    if (error) return <div>Error: <code>{error}</code></div>;
-
+    if (error) return <div><Body1 as="h2">Error: </Body1><Caption1 as="p"><code>{error}</code></Caption1></div>;
 
     return (
         <List navigationMode="composite"
-            className={mergeClasses(rootStyles,styles.list)}>
-            {userDetails.map((member, index) => (
+            className={mergeClasses(rootStyles, styles.list)}>
+            {userDetails.map((member) => (
                 <ListItem key={member.id}
-                value={member.display_name}
-                data-value={member.display_name}
-                aria-label={member.display_name}
-                className={styles.listItem}
-                checkmark={null}>
-                    <TeamListItem key={index} member={member} />
+                    value={member.display_name}
+                    data-value={member.display_name}
+                    aria-label={member.display_name}
+                    className={styles.listItem}
+                    checkmark={null}>
+                    <div role="gridcell" className={styles.listItem}>
+                        <TeamListItem member={member} />
+                    </div>
                 </ListItem>
             ))}
         </List>
diff --git a/ravens-team-react/ravens-team-react/src/components/teams/teams-list/team-panels-view.tsx b/ravens-team-react/ravens-team-react/src/components/teams/teams-list/team-panels-view.tsx
new file mode 100644
index 0000000..c0aff15
--- /dev/null
+++ b/ravens-team-react/ravens-team-react/src/components/teams/teams-list/team-panels-view.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { TeamResponse } from "../../../utils/twitch-api-types/team-types";
+import { useTeamParticipants } from "../../../hooks/team-hooks/use-team-participant-info";
+import { Body1, Caption1, Spinner, Title2 } from "@fluentui/react-components";
+import { TeamList } from "./team-list";
+import { areEqual } from "react-window";
+
+interface TeamPanelsProps {
+    teams: TeamResponse[];
+}
+
+export const TeamPanels: React.FC<TeamPanelsProps> = ({ teams }: TeamPanelsProps) => {
+    const { resolvedTeamMembersbyTeam, loading, error } = useTeamParticipants(teams.map(team => team.id));
+
+    if (loading) return <Spinner appearance="inverted" labelPosition="before" label="Loading team information" />;
+    if (error) return <div><Body1 as="h2">An error occured:</Body1><Caption1 as="p">{JSON.stringify(error)}</Caption1></div>
+
+    const teamIds = Object.keys(resolvedTeamMembersbyTeam).forEach(teamId => {
+    });
+    const teampanels: React.ReactElement[] = [];
+     teams.forEach(team => {
+       const panel = <div role="tabpanel" aria-labelledby={team.id}>
+            <Title2>{team.team_display_name}</Title2>
+        </div>;
+        teampanels.push(panel);});
+
+return (
+    <div>
+        {teampanels}
+    </div>
+);
+}
\ No newline at end of file
diff --git a/ravens-team-react/ravens-team-react/src/components/teams/teams-list/team-tab-panel.tsx b/ravens-team-react/ravens-team-react/src/components/teams/teams-list/team-tab-panel.tsx
index 8b7f3cb..efdbef2 100644
--- a/ravens-team-react/ravens-team-react/src/components/teams/teams-list/team-tab-panel.tsx
+++ b/ravens-team-react/ravens-team-react/src/components/teams/teams-list/team-tab-panel.tsx
@@ -1,6 +1,6 @@
 // src/components/TeamTabPanel.tsx
 import React, { useState } from 'react';
-import { Body1Strong, Spinner } from '@fluentui/react-components';
+import { Body1Strong, Caption1, Spinner } from '@fluentui/react-components';
 import { TeamList } from './team-list';
 import { ContentLayout } from '../../layouts/content-layout';
 import { useQuery } from '../../../utils/axios-instance';
@@ -19,22 +19,11 @@ function batchReduce<T>({ arr, batchSize }: { arr: T[]; batchSize: number; }): T
     }, [] as T[][]);
 };
 
-export const TeamTabPanel: React.FC<TeamTabPanelProps> = ({teamId}: TeamTabPanelProps) => {
-    console.info('Team Tab Panel - Team ID:', teamId);
+export const TeamTabPanel: React.FC<TeamTabPanelProps> = ({ teamId }: TeamTabPanelProps) => {
     const [teamUsers, { loading, error }] = useQuery<TeamMembersResponse, string>(getChunkedTeamMembers, teamId);
-
-    if (loading) return <Spinner appearance='primary' label={'Loading panel data...'} labelPosition='before' />;
-    if (error) return <Body1Strong as="strong" align='center'><code>Error loading members information: {JSON.stringify(error)}</code></Body1Strong>;
-
-    const renderTeamList = () => {
-    const batchedResolvedTwitchUsers = batchReduce<BasicTwitchUser>(
-        { arr: teamUsers[0].users as BasicTwitchUser[], batchSize: 100 });
-        return <TeamList members={batchedResolvedTwitchUsers} />;
-    };
     
-    return (
-        <ContentLayout>
-            {renderTeamList()}
-        </ContentLayout>
-    );
+    if (loading) return <Spinner appearance='primary' label={'Loading panel data...'} labelPosition='before' />;
+    if (error) return <div><Body1Strong as="strong" align='center'>Error loading members information:</Body1Strong><Caption1 as="p"><code>{JSON.stringify(error)}</code></Caption1></div>;
+    const batchedResolvedTwitchUsers = batchReduce<BasicTwitchUser>({ arr: teamUsers[0].users as BasicTwitchUser[], batchSize: 100 });
+    return <TeamList members={batchedResolvedTwitchUsers} />;
 };
diff --git a/ravens-team-react/ravens-team-react/src/features/profiles/twitch-persona.tsx b/ravens-team-react/ravens-team-react/src/features/profiles/twitch-persona.tsx
index 1f5cd25..9bcb5b6 100644
--- a/ravens-team-react/ravens-team-react/src/features/profiles/twitch-persona.tsx
+++ b/ravens-team-react/ravens-team-react/src/features/profiles/twitch-persona.tsx
@@ -1,4 +1,4 @@
-import { Toolbar, ToolbarDivider, ToolbarButton, PresenceBadge, makeStyles, Caption2, Caption1, Divider, tokens } from "@fluentui/react-components";
+import { Toolbar, ToolbarDivider, ToolbarButton, PresenceBadge, makeStyles, Caption2, Caption1, Divider, tokens, Body1 } from "@fluentui/react-components";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGithub } from "@awesome.me/kit-1d3f5f4627/icons/classic/brands";
 import { faDiscord } from "@awesome.me/kit-1d3f5f4627/icons/classic/brands";
@@ -38,7 +38,7 @@ const useStyles = makeStyles({
   personaRow: {
     display: "flex",
     alignItems: "center",
-    "flex-direction": "row",
+    flexDirection: "row",
     gap: "10px",
     justifyContent: "space-between",
   }
@@ -49,7 +49,7 @@ export const TwitchPersona = (props: TwitchPersonaProps) => {
   const [streamInfo, { loading, error }] = useQuery<StreamDataResponse, string>(getStreamDetails, twitchUserId);
   const styles = useStyles();
   if (loading) return <PopOverSkeleton />;
-  if (error) return <div>Error: {error.message}</div>;
+  if (error) return <div><Body1 as="h2">Error:</Body1><Caption1 as="p">{error.message}</Caption1> </div>;
 
   return (
     <div className={styles.wrapperContent}>
diff --git a/ravens-team-react/ravens-team-react/src/hooks/team-hooks/use-team-info.ts b/ravens-team-react/ravens-team-react/src/hooks/team-hooks/use-team-info.ts
index 70afc7f..1df415e 100644
--- a/ravens-team-react/ravens-team-react/src/hooks/team-hooks/use-team-info.ts
+++ b/ravens-team-react/ravens-team-react/src/hooks/team-hooks/use-team-info.ts
@@ -22,7 +22,11 @@ export const useTeamInfo = (broadcasterId: string) => {
             setLoading(false);
         }
 
+        try{
         getTeamDataAsync();
+        } catch(error){
+            setError(error as Error);
+        }
     }, [broadcasterId]);
     return { teams, loading, error };
 };
diff --git a/ravens-team-react/ravens-team-react/src/hooks/team-hooks/use-team-participant-info.ts b/ravens-team-react/ravens-team-react/src/hooks/team-hooks/use-team-participant-info.ts
new file mode 100644
index 0000000..cbf6edb
--- /dev/null
+++ b/ravens-team-react/ravens-team-react/src/hooks/team-hooks/use-team-participant-info.ts
@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import { BasicTwitchUser, TeamDetailsByTeam } from "../../utils/twitch-api-types/team-types";
+import { getChunkedTeamMembers } from "../../utils/twitchApi";
+
+const batchReduceTeamUsers = ({ arr, batchSize }: { arr: BasicTwitchUser[]; batchSize: number; }): BasicTwitchUser[][] => {
+    return arr.reduce((batches, _, i) => {
+        if (i % batchSize === 0) batches.push([]);
+        batches[batches.length - 1].push(arr[i]);
+        return batches;
+    }, [] as BasicTwitchUser[][]);
+};
+
+export const useTeamParticipants = (teamIds: string[]) => {
+    const [resolvedTeamMembersbyTeam, setTeamMembersByTeam] = useState<TeamDetailsByTeam>({});
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+    useEffect(() => {
+        const teamMembersByTeam: TeamDetailsByTeam = {};
+        const getTeamDataAsync = () => {
+            teamIds.forEach(async (teamId) => {
+                const teamResponse = await getChunkedTeamMembers(teamId);
+                const basicTwitchUserData: BasicTwitchUser[] = teamResponse.data.flatMap(member => member.users);
+                const reducedTeamMembers: BasicTwitchUser[][] = batchReduceTeamUsers({ arr: basicTwitchUserData, batchSize: 100 });
+                teamMembersByTeam[teamId] = reducedTeamMembers;
+            })};
+            
+        try {          
+        getTeamDataAsync();
+        }
+        catch (error) {
+            setError(error as Error);
+        } finally {
+            setLoading(false);
+        }
+    }, [teamIds]);
+    return {resolvedTeamMembersbyTeam, loading, error};
+}
\ No newline at end of file
diff --git a/ravens-team-react/ravens-team-react/src/index.css b/ravens-team-react/ravens-team-react/src/index.css
index 521b566..c714e9f 100644
--- a/ravens-team-react/ravens-team-react/src/index.css
+++ b/ravens-team-react/ravens-team-react/src/index.css
@@ -15,4 +15,5 @@ body {
   margin: 0;
   min-width: 320px;
   width: '100%';
+  overflow: hidden;
 }
\ No newline at end of file
diff --git a/ravens-team-react/ravens-team-react/src/utils/twitch-api-types/team-types.ts b/ravens-team-react/ravens-team-react/src/utils/twitch-api-types/team-types.ts
index cb42159..89f9398 100644
--- a/ravens-team-react/ravens-team-react/src/utils/twitch-api-types/team-types.ts
+++ b/ravens-team-react/ravens-team-react/src/utils/twitch-api-types/team-types.ts
@@ -51,6 +51,6 @@ export interface TeamImages {
 }
 
 // Map of team members grouped by team ID
- export type TeamMembersByTeam = { [teamDisplayName: string]: TwitchUser[] };
-
- export type TeamDetails = { [teamDisplayName: string]: TeamImages };
\ No newline at end of file
+export type TeamMembersByTeam = { [teamDisplayName: string]: TwitchUser[] };
+export type TeamDetailsByTeam = { [teamDisplayName: string]: BasicTwitchUser[][] };
+export type TeamDetails = { [teamDisplayName: string]: TeamImages };
\ No newline at end of file