diff --git a/src/components/Team.tsx b/src/components/Team.tsx
index e7d78a1..87b6e8e 100644
--- a/src/components/Team.tsx
+++ b/src/components/Team.tsx
@@ -1,15 +1,13 @@
 import Table from '@mui/joy/Table';
 import Typography from '@mui/joy/Typography';
-import Button from "@mui/joy/Button";
-import blank from "../images/Team/blank.jpeg";
-import e from "../images/email.png";
-import g from "../images/github.png";
+import Button from '@mui/joy/Button';
+import blank from '../images/Team/blank.jpeg';
+import e from '../images/email.png';
+import g from '../images/github.png';
 
 function addPerson(name: string, image: string, role: string, link: string, type: string) {
-
     let typeImage = type === "Github" ? g : e;
     return { name, image, role, link, type, typeImage};
-
 }
 
 const directors = [
@@ -49,125 +47,177 @@ const sponsorship = [
 ];
 
 const teams = [
-    { name: "Directors", members: directors },
-    { name: "Tech", members: tech },
-    { name: "Outreach", members: outreach },
-    { name: "Sponsorship", members: sponsorship }
+    { name:"Directors", members: directors },
+    { name:"Tech", members: tech },
+    { name:"Outreach", members: outreach },
+    { name:"Sponsorship", members: sponsorship }
 ];
 
 export default function Team() {
     return (
-        <div style={{ padding: '5%' }}>
+        <div style={{ padding:'5%' }}>
             <Typography
-                level="h2"
+                level='h2'
                 sx={{
-                    color: '#ffffff',
-                    marginBottom: '2%',
-                    textAlign: "center"
+                    color:'#ffffff',
+                    marginBottom:'2%',
+                    textAlign:'center'
                 }}
             >
                 TEAM
             </Typography>
 
             {teams.map((team) => (
-
                 <Table
+                    key={team.name}
                     sx={{
-                        backgroundColor: '#221a46',
-                        marginTop: '2%',
-                        color: 'white',
-                        border: '6px solid #c6add4',
-                        overflow: 'hidden',
+                        backgroundColor:'#221a46',
+                        marginTop:'2%',
+                        color:'white',
+                        border:'6px solid #c6add4',
+                        overflow:'hidden',
                         '& td, & th': { 
-                            padding: '12px 16px', 
-                            fontSize: '1.1rem', 
-                            wordWrap: 'break-word', 
-                            whiteSpace: 'normal' }
+                            padding:'12px 16px', 
+                            fontSize:'1.1rem', 
+                            wordWrap:'break-word', 
+                            whiteSpace:'normal' 
+                        },
+                        '@media (max-width: 700px)': {
+                            '& tr > td > div': {
+                                display:'flex',
+                                flexWrap:'wrap',
+                                justifyContent:'space-evenly',
+                                gap:'12px' 
+                            },
+                            '& tr > td > div > div': {
+                                width:'46% !important',
+                                margin:'0px !important',
+                                display:'flex',
+                                flexDirection:'column',
+                                alignItems:'center',
+                                gap:'2px'
+                            },
+                            '& tr > td > div > div img': {
+                                height:'90px',
+                                width:'90px',
+                                objectFit:'cover'
+                            },
+                            '& tr > td > div > div > div:first-of-type': {
+                                fontSize:'13px !important',
+                                fontWeight:'bold',
+                                color:'white',
+                            },
+                            '& tr > td > div > div > div:nth-of-type(2)': {
+                                fontSize:'10px !important',
+                                color:'grey',
+                            }
+                        }
                     }}
                 >
-                    <tbody key={team.name}> 
+                    <tbody> 
                         <tr>
-                            <td style={{ 
-                                fontSize: '20px', 
-                                textTransform: 'uppercase', 
-                                padding: '12px 16px' 
-                            }}>  
+                            <td
+                                style={{
+                                    fontSize:'20px',
+                                    textTransform:'uppercase',
+                                    padding:'12px 16px'
+                                }}
+                            >
                                 {team.name}
                             </td>
                         </tr>
                         <tr>
-                            <td> 
-                                <div style={{ 
-                                    display: 'flex', 
-                                    flexWrap: 'wrap', 
-                                    justifyContent: 'left',
-                                    gap: '16px' 
-                                }}>
-
-                                {team.members.map((member, i) => (
-                                    <div key={i} style={{ 
-                                        width: '180px', 
-                                        textAlign: 'center', 
-                                        justifyContent: 'center', 
-                                        alignItems: 'center' 
-                                    }}>
-                                        <img 
-                                            src={member.image} 
-                                            height="170px" 
-                                            width="170px" 
-                                            id="member" 
-                                            alt="member-image" 
-                                            style={{ objectFit: "cover"}} 
-                                        />
-                                        <div style={{ 
-                                            fontSize: '17px', 
-                                            fontWeight: 'bold',
-                                             color: 'white'
-                                        }}>
-                                            {member.name}
-                                        </div>
-                                        <div style={{ 
-                                            fontSize: '15px', 
-                                            color: 'grey'
-                                        }}>
-                                            {member.role}
-                                        </div>
-                                        <div>
-                                            <Button
-                                                sx={{ 
-                                                    borderRadius: "10px", 
-                                                    marginTop: "3%", 
-                                                    backgroundColor: '#c6add4', 
-                                                    height: "30px", 
-                                                    width:"170px",
-                                                    '&:hover': {backgroundColor: '#bb97cf'}
+                            <td>
+                                <div
+                                    style={{
+                                        display:'flex',
+                                        flexWrap:'wrap',
+                                        justifyContent:'center',
+                                        gap:'16px'
+                                    }}
+                                >
+                                    {team.members.map((member, i) => (
+                                        <div
+                                            key={i}
+                                            style={{
+                                                textAlign:'center',
+                                                justifyContent:'center',
+                                                alignItems:'center',
+                                                width:'45%',
+                                                maxWidth:'180px',
+                                                margin:'5px'
+                                            }}
+                                        >
+                                            <img
+                                                src={member.image}
+                                                height="170px"
+                                                width="170px"
+                                                id="member"
+                                                alt="member-image"
+                                                style={{ objectFit: 'cover' }}
+                                            />
+                                            <div
+                                                style={{
+                                                    fontSize:'17px',
+                                                    fontWeight:'bold',
+                                                    color:'white'
                                                 }}
-                                                id="link"
-                                                component="a"
-                                                href={member.link}
                                             >
-                                                <img 
-                                                    src={member.typeImage} 
-                                                    height="25" 
-                                                    width="25" 
-                                                    id="member" 
-                                                    alt="member-link" 
-                                                    style={{paddingRight: "10px"}}
-                                                />
-                                                {member.type}
-                                            </Button>
+                                                {member.name}
+                                            </div>
+                                            <div
+                                                style={{
+                                                    fontSize:'15px',
+                                                    color:'grey'
+                                                }}
+                                            >
+                                                {member.role}
+                                            </div>
+                                            <div>
+                                                <Button
+                                                    sx={{
+                                                        borderRadius:'10px',
+                                                        marginTop:'3%',
+                                                        backgroundColor:'#c6add4',
+                                                        height:'30px',
+                                                        width:'170px',
+                                                        '&:hover': {
+                                                            backgroundColor:'#bb97cf'
+                                                        },
+                                                        '@media (max-width: 700px)': {
+                                                            height:'20px', 
+                                                            width:'90px',
+                                                            fontSize:'13px',
+                                                            padding:'0 8px',
+                                                            '& img': {
+                                                                height:'18px !important',
+                                                                width:'18px !important'
+                                                            }
+                                                        }
+                                                    }}
+                                                    id="link"
+                                                    component="a"
+                                                    href={member.link}
+                                                >
+                                                    <img
+                                                        src={member.typeImage}
+                                                        height="25"
+                                                        width="25"
+                                                        id="member"
+                                                        alt="member-link"
+                                                        style={{ paddingRight: '10px' }} 
+                                                    />
+                                                    {member.type}
+                                                </Button>
+                                            </div>
                                         </div>
-                                    </div>
-                                ))}
-
+                                    ))}
                                 </div>
                             </td>
                         </tr>
                     </tbody>
-            </Table>
-
+                </Table>
             ))}
-            
         </div>
     );
-}
\ No newline at end of file
+}