diff --git a/src/components/AboutUsBox.js b/src/components/AboutUsBox.js
index 9647755..9fb5c27 100644
--- a/src/components/AboutUsBox.js
+++ b/src/components/AboutUsBox.js
@@ -65,7 +65,7 @@ export default function AboutUsBox() {
   return (
     <>
       <Box className={classes.bigbadBackground} ref={myRef}>
-        <Grid container style={{ padding: '2rem' }} alignContent="center" justify="center">
+        <Grid container style={{ padding: '2rem' }} alignContent="center" justifyContent="center">
           <Grid item>
             <Box>
               <h1>
diff --git a/src/components/Aluminiapi.js b/src/components/Aluminiapi.js
new file mode 100644
index 0000000..0ba8aff
--- /dev/null
+++ b/src/components/Aluminiapi.js
@@ -0,0 +1,152 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Paper, Typography, Accordion, AccordionSummary, AccordionDetails, Grid } from '@material-ui/core';
+import Avatar from './Avatar';
+import GiveMeABreak from './GiveMeABreak';
+import SpacyDivider from './SpacyDivider';
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    ...theme.paper,
+    padding: theme.spacing(4),
+    backgroundColor: '#00000000',
+  },
+}));
+
+export default function Aluminiapi(props) {
+  const { members } = props;
+  const classes = useStyles();
+
+
+//    const[members,setMembers] = useState({
+//     "2020": [
+//         {
+//             "name": "Risha Dassi",
+//             "position": "Chair",
+//             "image": "https://ieee-rvce.org/assets/images/alumni/2020/compsoc/risha.jpg"
+//         },
+//         {
+//             "name": "Nischal J",
+//             "position": "Vice Chair",
+//             "image": "https://ieee-rvce.org/assets/images/alumni/2020/compsoc/nischal.jpg"
+//         },
+//         {
+//             "name": "Chirag Bapat",
+//             "position": "Treasurer",
+//             "image": "https://ieee-rvce.org/assets/images/alumni/2020/compsoc/chirag.jpg"
+//         },
+//         {
+//             "name": "Nikitha Srikanth",
+//             "position": "Secretary",
+//             "image": "https://ieee-rvce.org/assets/images/alumni/2020/compsoc/niks.jpg"
+//         }
+//     ],
+//     "2021": [
+//         {
+//             "name": "Dr. Ashok Kumar AR",
+//             "position": "Faculty Advisor",
+//             "image": "https://ieee-rvce.org/assets/images/alumni/2021/compsoc/ashok_sir.jpg"
+//         },
+//         {
+//             "name": "Akshara Udupa",
+//             "position": "Chair",
+//             "image": "https://ieee-rvce.org/assets/images/alumni/2021/compsoc/akshara.jpg"
+//         },
+//         {
+//             "name": "Vishal M",
+//             "position": "Vice Chair",
+//             "image": "https://ieee-rvce.org/assets/images/alumni/2021/compsoc/vishal.jpg"
+//         },
+//         {
+//             "name": "Namya LG",
+//             "position": "Treasurer",
+//             "image": "https://ieee-rvce.org/assets/images/alumni/2021/compsoc/namya.jpg"
+//         },
+//         {
+//             "name": "Shashank Dhavalla",
+//             "position": "Secretary",
+//             "image": "https://ieee-rvce.org/assets/images/alumni/2021/compsoc/shashank.jpg"
+//         }
+//     ],
+//     "2022": [
+//         {
+//             "name": "Dr. Ashok Kumar AR",
+//             "position": "Faculty Advisor",
+//             "image": "https://ieee-rvce.org/assets/images/alumni/2022/compsoc/ashok_sir.jpg"
+//         },
+//         {
+//             "name": "Shubhaprada K P",
+//             "position": "Chair",
+//             "image": "https://ieee-rvce.org/assets/images/alumni/2022/compsoc/ShubhaPrada.jpeg"
+//         },
+//         {
+//             "name": "Prajwal P",
+//             "position": "Vice Chair",
+//             "image": "https://ieee-rvce.org/assets/images/alumni/2022/compsoc/prajwal.PNG"
+//         },
+//         {
+//             "name": "Sonia Singh B",
+//             "position": "Treasurer",
+//             "image": "https://ieee-rvce.org/assets/images/alumni/2022/compsoc/Sonia_Singh.jpeg"
+//         },
+//         {
+//             "name": "Malavika Hariprasad ",
+//             "position": "Secretary",
+//             "image": "https://ieee-rvce.org/assets/images/alumni/2022/compsoc/Malavika_HariPrasad.jpg"
+//         }
+//        ]
+//     }
+// );
+  // useEffect(() => {
+  //   axios.get(hostname + `/api/execom/alumini/1`).then(response => {
+  //       setMember(response.data.execom);
+  //       console.log(member);
+  //     });
+  
+  // }, []);
+
+  let color = props.color ?? '#222222';
+  return (
+    <>
+      {
+        // Check if members is not empty
+        members !== undefined && Object.keys(members).length !== 0 && (
+          <>
+            <SpacyDivider color={color} />
+            <Paper className={classes.paper} elevation={0}>
+              <Typography variant="h4" align="center">
+                Alumni
+              </Typography>
+              <GiveMeABreak num={2} />
+              {Object.keys(members).map((batch,index) => (
+                <Accordion
+                  key={index}
+                  style={{
+                    borderLeft: '1px solid ' + color,
+                    borderBottom: '2px solid ' + color,
+                    backgroundColor: '#00000000',
+                    boxShadow: '0px 0px 0px 0px #00000000',
+                  }}
+                >
+                  <AccordionSummary>
+                    <Typography>{batch}</Typography>
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    <Grid container spacing={2} justifyContent="center">
+                      {members[batch].map(member => (
+                        <Grid item xs={12} md={4} key={member.id}>
+                          <Avatar name={member.name} position={member.position} src={member.image} />
+                        </Grid>
+                      ))}
+                    </Grid>
+                  </AccordionDetails>
+                </Accordion>
+              ))}
+            </Paper>
+            <br />
+          </>
+        )
+      }
+    </>
+  );
+}
diff --git a/src/components/AlumniAccordions.js b/src/components/AlumniAccordions.js
index a383eaf..c004deb 100644
--- a/src/components/AlumniAccordions.js
+++ b/src/components/AlumniAccordions.js
@@ -1,4 +1,7 @@
 import React from 'react';
+import { useState,useEffect } from 'react';
+import axios from 'axios';
+import { hostname } from '../links';
 import { makeStyles } from '@material-ui/core/styles';
 import { Paper, Typography, Accordion, AccordionSummary, AccordionDetails, Grid } from '@material-ui/core';
 import Avatar from './Avatar';
@@ -14,8 +17,20 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function AlumniAccordions(props) {
-  const { members } = props;
+ //const { members } = props;
+
+  const [members, setMembers] = useState({});
+
+  useEffect(() => {
+    axios.get(hostname + '/api/execom/alumini/' + props.sid).then(response => {
+      setMembers(response.data.alumini);
+      console.log(response.data.alumini);
+    });
+  }, [props.sid]);
+
+
   const classes = useStyles();
+ // console.log(members);
   let color = props.color ?? '#222222';
   return (
     <>
@@ -29,8 +44,9 @@ export default function AlumniAccordions(props) {
                 Alumni
               </Typography>
               <GiveMeABreak num={2} />
-              {Object.keys(members).map(batch => (
+              {Object.keys(members).map((batch,index) => (
                 <Accordion
+                  key={index}
                   style={{
                     borderLeft: '1px solid ' + color,
                     borderBottom: '2px solid ' + color,
@@ -42,9 +58,9 @@ export default function AlumniAccordions(props) {
                     <Typography>{batch}</Typography>
                   </AccordionSummary>
                   <AccordionDetails>
-                    <Grid container spacing={2} justify="center">
-                      {members[batch].map(member => (
-                        <Grid item xs={12} md={4}>
+                    <Grid container spacing={2} justifyContent="center">
+                      {members[batch].map((member,index) => (
+                        <Grid item xs={12} md={4} key={index}>
                           <Avatar name={member.name} position={member.position} src={member.image} />
                         </Grid>
                       ))}
diff --git a/src/components/AppBarMenu.js b/src/components/AppBarMenu.js
index 81a1367..e2a609a 100644
--- a/src/components/AppBarMenu.js
+++ b/src/components/AppBarMenu.js
@@ -101,7 +101,7 @@ export default function AppBarMenu(props) {
     let listitems = props.items;
     let items = listitems.map(item => {
       return (
-        <Link to={item.link} className={classes.menuitem}>
+        <Link to={item.link} className={classes.menuitem} key={item.name}>
           <ListItem onClick={() => handleDrawer(false)} button key={item.name} className={classes.nested}>
             <ListItemText primary={item.name} />
           </ListItem>
diff --git a/src/components/ArticlesBox.js b/src/components/ArticlesBox.js
index 4b86e39..254155f 100644
--- a/src/components/ArticlesBox.js
+++ b/src/components/ArticlesBox.js
@@ -66,7 +66,7 @@ export default function FrontBox() {
   return (
     <>
       <Box className={classes.bigbadBackground} ref={myRef}>
-        <Grid container style={{ padding: '2rem' }} alignContent="center" justify="center">
+        <Grid container style={{ padding: '2rem' }} alignContent="center" justifyContent="center">
           <Grid item>
             <Box>
               <h1 style={{ paddingTop: '10%' }}>
diff --git a/src/components/EventsBox.js b/src/components/EventsBox.js
index af87ee5..c8e8fd3 100644
--- a/src/components/EventsBox.js
+++ b/src/components/EventsBox.js
@@ -66,7 +66,7 @@ export default function EventsBox() {
   return (
     <>
       <Box className={classes.bigbadBackground} ref={myRef}>
-        <Grid container style={{ padding: '2rem' }} alignContent="center" justify="center">
+        <Grid container style={{ padding: '2rem' }} alignContent="center" justifyContent="center">
           <Grid item>
             <Box>
               <h1>
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 34b775c..7625f77 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -59,7 +59,7 @@ export default function Footer(props) {
     <footer>
       <Box sm={12} className={classes.root}>
         <Container maxWidth="xl">
-          <Grid container spacing={1} justify="space-evenly">
+          <Grid container spacing={1} justifyContent="space-evenly">
             <Grid item xs={12} md={6} lg={2} key={1}>
               <Typography className={classes.typography} variant="h6">
                 Useful links
@@ -106,7 +106,7 @@ export default function Footer(props) {
                 <br />
               </Typography>
               <br />
-              <Grid container justify="space-between" style={{ paddingRight: 60 }}>
+              <Grid container justifyContent="space-between" style={{ paddingRight: 60 }}>
                 <IconButton
                   href="https://instagram.com/ieee_rvce?igshid=1hbfgquvdu0yt"
                   target="_blank"
diff --git a/src/components/FrontBox.js b/src/components/FrontBox.js
index 3549500..5996b19 100644
--- a/src/components/FrontBox.js
+++ b/src/components/FrontBox.js
@@ -68,7 +68,7 @@ export default function FrontBox() {
   return (
     <>
       <Box className={classes.bigbadBackground} ref={myRef}>
-        <Grid container style={{ padding: '2rem' }} alignContent="center" justify="center">
+        <Grid container style={{ padding: '2rem' }} alignContent="center" justifyContent="center">
           <Grid item>
             <Box display={{ xs: 'none', sm: 'block' }}>
               <img className={classes.logoimage} src={images.logos.ieee_rvce_new_white_big} alt="logo" />
@@ -82,7 +82,7 @@ export default function FrontBox() {
         </Grid>
         <br />
 
-        <Grid container alignItems="center" justify="center">
+        <Grid container alignItems="center" justifyContent="center">
           <Grid item>
             <Link to="/about" className={classes.noUnderline}>
               <Button
diff --git a/src/components/FrontText.js b/src/components/FrontText.js
index ebf5381..bbabb61 100644
--- a/src/components/FrontText.js
+++ b/src/components/FrontText.js
@@ -18,7 +18,7 @@ export default function FrontText() {
   const classes = useStyles();
   return (
     <>
-      <Grid className={classes.less} container justify="space-around" alignItems="center" spacing={2}>
+      <Grid className={classes.less} container justifyContent="space-around" alignItems="center" spacing={2}>
         <Grid item sm={12} md={6}>
           <Typography variant="h4">What we do</Typography>
           <br />
@@ -38,7 +38,7 @@ export default function FrontText() {
         className={classes.less}
         direction="row-reverse"
         container
-        justify="space-around"
+        justifyContent="space-around"
         alignItems="center"
         spacing={2}
       >
@@ -58,7 +58,7 @@ export default function FrontText() {
           className={classes.less}
           direction="row-reverse"
           container
-          justify="space-around"
+          justifyContent="space-around"
           alignItems="center"
           spacing={2}
         >
diff --git a/src/components/Header.js b/src/components/Header.js
index 35b5d86..0edf9d6 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -145,9 +145,9 @@ export default function Header(props) {
   const Buttons = () => {
     let buttons = navs.map(nav => {
       if (nav.name === 'Societies') {
-        return <AppBarMenu name={nav.name} items={societies} />;
+        return <AppBarMenu name={nav.name} items={societies} key={nav.name}/>;
       } else if (nav.name === 'Affinities') {
-        return <AppBarMenu name={nav.name} items={affinities} />;
+        return <AppBarMenu name={nav.name} items={affinities} key={nav.name}/>;
       } else if (nav.name === 'Login') {
         if (loggedin) {
           return (
@@ -185,9 +185,9 @@ export default function Header(props) {
       <List>
         {navs.map(nav => {
           if (nav.name === 'Societies') {
-            return <AppBarMenu drawerHandle={setDrawer} name={nav.name} items={societies} />;
+            return <AppBarMenu drawerHandle={setDrawer} name={nav.name} items={societies} key={nav.name}/>;
           } else if (nav.name === 'Affinities') {
-            return <AppBarMenu drawerHandle={setDrawer} name={nav.name} items={affinities} />;
+            return <AppBarMenu drawerHandle={setDrawer} name={nav.name} items={affinities} key={nav.name}/>;
           } else if (nav.name === 'Login') {
             if (loggedin) {
               return (
@@ -200,7 +200,7 @@ export default function Header(props) {
             }
           } else {
             return (
-              <Link to={nav.link} className={classes.nav}>
+              <Link to={nav.link} className={classes.nav} key={nav.name}>
                 <ListItem onClick={handleDrawerToggle(false)} button key={nav.name}>
                   <ListItemText primary={nav.name} />
                 </ListItem>
diff --git a/src/components/MembershipBox.js b/src/components/MembershipBox.js
index b6c7167..6ea88c5 100644
--- a/src/components/MembershipBox.js
+++ b/src/components/MembershipBox.js
@@ -66,7 +66,7 @@ export default function MembershipBox() {
   return (
     <>
       <Box className={classes.bigbadBackground} ref={myRef}>
-        <Grid container alignContent="center" justify="center">
+        <Grid container alignContent="center" justifyContent="center">
           <Grid item>
             <Box>
               <h1>
@@ -84,7 +84,7 @@ export default function MembershipBox() {
 
             <GiveMeABreak num={2} />
           </Grid>
-          <Grid container alignItems="center" justify="center">
+          <Grid container alignItems="center" justifyContent="center">
             <Grid item>
               <HashLink smooth to="#whyjoinieee" className={classes.noUnderline}>
                 <Button
diff --git a/src/pages/APSSocietyPage.js b/src/pages/APSSocietyPage.js
index bd586ee..09c576d 100644
--- a/src/pages/APSSocietyPage.js
+++ b/src/pages/APSSocietyPage.js
@@ -3,11 +3,11 @@ import axios from 'axios';
 import { Container, Grid, Typography, Paper } from '@material-ui/core';
 import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '../components/Avatar';
 import EventCard from '../components/EventCard';
-import { hostname, ecats, images, execom, alumni } from '../links';
+import { hostname, ecats, images,alumni } from '../links';
 import AlumniAccordions from '../components/AlumniAccordions';
 import SpacyDivider from '../components/SpacyDivider';
+import SocietyExec from './SocietyExec';
 
 const useStyles = makeStyles(theme => ({
   root: theme.root,
@@ -94,7 +94,7 @@ export default function APSSocietyPage(props) {
             <Paper className={classes.paper}>
               <Typography variant="h3">Events</Typography>
               <br />
-              <Grid container spacing={2} justify="center">
+              <Grid container spacing={2} justifyContent="center">
                 {events.slice(0, 3).map(item => {
                   return (
                     <Grid item xs={12} md={4}>
@@ -113,7 +113,7 @@ export default function APSSocietyPage(props) {
             <SpacyDivider color="rgb(110 110 193)" />
           </>
         )}
-        <Paper className={classes.paper}>
+        {/* <Paper className={classes.paper}>
           <Typography variant="h3">Executive Committee</Typography>
           <br />
           <Grid container spacing={2} justify="center">
@@ -123,8 +123,10 @@ export default function APSSocietyPage(props) {
               </Grid>
             ))}
           </Grid>
-        </Paper>
-        <AlumniAccordions members={alumni.aps} color="rgb(110 110 193)" />
+        </Paper> */}
+
+           <SocietyExec sid = {ecats.aps}/>
+        <AlumniAccordions members={alumni.aps} sid={ecats.aps} color="rgb(110 110 193)" />
         <br />
       </Container>
     </div>
diff --git a/src/pages/CASSocietyPage.js b/src/pages/CASSocietyPage.js
index cff63f1..020c343 100644
--- a/src/pages/CASSocietyPage.js
+++ b/src/pages/CASSocietyPage.js
@@ -3,11 +3,11 @@ import axios from 'axios';
 import { Container, Grid, Typography, Paper } from '@material-ui/core';
 import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '../components/Avatar';
 import EventCard from '../components/EventCard';
-import { hostname, ecats, images, execom, alumni } from '../links';
+import { hostname, ecats, images, alumni } from '../links';
 import AlumniAccordions from '../components/AlumniAccordions';
 import SpacyDivider from '../components/SpacyDivider';
+import SocietyExec from './SocietyExec';
 
 const useStyles = makeStyles(theme => ({
   root: theme.root,
@@ -83,7 +83,7 @@ export default function CASSocietyPage(props) {
             <Paper className={classes.paper}>
               <Typography variant="h3">Events</Typography>
               <br />
-              <Grid container spacing={2} justify="center">
+              <Grid container spacing={2} justifyContent="center">
                 {events.slice(0, 3).map(item => {
                   return (
                     <Grid item xs={12} md={4}>
@@ -102,7 +102,7 @@ export default function CASSocietyPage(props) {
             <SpacyDivider color="rgb(153 221 227)" />
           </>
         )}
-        <Paper className={classes.paper}>
+        {/* <Paper className={classes.paper}>
           <Typography variant="h3">Executive Committee</Typography>
           <br />
           <Grid container spacing={2} justify="center">
@@ -112,8 +112,12 @@ export default function CASSocietyPage(props) {
               </Grid>
             ))}
           </Grid>
-        </Paper>
-        <AlumniAccordions members={alumni.cas} color="rgb(153 221 227)" />
+        </Paper> */}
+
+        <SocietyExec sid = {ecats.cas}/>
+        <AlumniAccordions members={alumni.cas} color="rgb(153 221 227)" 
+        sid={ecats.cas}
+        />
         <br />
       </Container>
     </div>
diff --git a/src/pages/COMSOCSocietyPage.js b/src/pages/COMSOCSocietyPage.js
index b29a168..03fa341 100644
--- a/src/pages/COMSOCSocietyPage.js
+++ b/src/pages/COMSOCSocietyPage.js
@@ -2,12 +2,12 @@ import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { Container, Grid, Typography, Paper } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '../components/Avatar';
 import EventCard from '../components/EventCard';
-import { hostname, ecats, images, execom, alumni } from '../links';
+import { hostname, ecats, images,alumni } from '../links';
 import { Link } from 'react-router-dom';
 import AlumniAccordions from '../components/AlumniAccordions';
 import SpacyDivider from '../components/SpacyDivider';
+import SocietyExec from './SocietyExec';
 
 const useStyles = makeStyles(theme => ({
   root: theme.root,
@@ -27,7 +27,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export default function COMSOCSocietyPage(_props) {
+export default function COMSOCSocietyPage(props) {
   const classes = useStyles();
 
   const [events, setEvents] = useState([]);
@@ -78,7 +78,7 @@ export default function COMSOCSocietyPage(_props) {
             <Paper className={classes.paper}>
               <Typography variant="h3">Events</Typography>
               <br />
-              <Grid container spacing={2} justify="center">
+              <Grid container spacing={2} justifyContent="center">
                 {events.slice(0, 3).map(item => {
                   return (
                     <Grid item xs={12} md={4}>
@@ -97,7 +97,7 @@ export default function COMSOCSocietyPage(_props) {
             <SpacyDivider color="rgb(61 144 142)" />
           </>
         )}
-        <Paper className={classes.paper}>
+        {/* <Paper className={classes.paper}>
           <Typography variant="h3">Executive Committee</Typography>
           <br />
           <Grid container spacing={2} justify="center">
@@ -107,10 +107,17 @@ export default function COMSOCSocietyPage(_props) {
               </Grid>
             ))}
           </Grid>
-        </Paper>
-        <AlumniAccordions members={alumni.comsoc} color="rgb(61 144 142)" />
+        </Paper> */}
+        <SocietyExec sid = {ecats.comsoc}/>
+
+        <AlumniAccordions members={alumni.compsoc} sid={ecats.comsoc} color="rgb(61 144 142)" />
+        {/* <Aluminiapi  /> */}
+
         <br />
       </Container>
+
+      
+
     </div>
   );
 }
diff --git a/src/pages/CSSocietyPage.js b/src/pages/CSSocietyPage.js
index d3d5a36..8078b96 100644
--- a/src/pages/CSSocietyPage.js
+++ b/src/pages/CSSocietyPage.js
@@ -3,12 +3,11 @@ import axios from 'axios';
 import { Container, Grid, Typography, Paper } from '@material-ui/core';
 import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '../components/Avatar';
 import EventCard from '../components/EventCard';
-import { hostname, ecats, images, execom, alumni } from '../links';
+import { hostname, ecats, images,alumni } from '../links';
 import AlumniAccordions from '../components/AlumniAccordions';
 import SpacyDivider from '../components/SpacyDivider';
-
+import SocietyExec from './SocietyExec';
 const useStyles = makeStyles(theme => ({
   root: theme.root,
   container: theme.page,
@@ -87,10 +86,10 @@ export default function CSSocietyPage(props) {
             <Paper className={classes.paper}>
               <Typography variant="h3">Events</Typography>
               <br />
-              <Grid container spacing={2} justify="center">
-                {events.slice(0, 3).map(item => {
+              <Grid container spacing={2} justifyContent="center">
+                {events.slice(0, 3).map((item,index) => {
                   return (
-                    <Grid item xs={12} md={4}>
+                    <Grid item xs={12} md={4} key={index}>
                       <EventCard event={item} />
                     </Grid>
                   );
@@ -106,7 +105,7 @@ export default function CSSocietyPage(props) {
             <SpacyDivider color="rgb(80 161 99)" />
           </>
         )}
-        <Paper className={classes.paper}>
+        {/* <Paper className={classes.paper}>
           <Typography variant="h3">Executive Committee</Typography>
           <br />
           <Grid container spacing={2} justify="center">
@@ -116,8 +115,9 @@ export default function CSSocietyPage(props) {
               </Grid>
             ))}
           </Grid>
-        </Paper>
-        <AlumniAccordions members={alumni.compsoc} color="rgb(80 161 99)" />
+        </Paper> */}
+         <SocietyExec sid = {ecats.compsoc}/>
+        <AlumniAccordions members={alumni.compsoc} sid = {ecats.compsoc} color="rgb(80 161 99)" />
         <br />
       </Container>
     </div>
diff --git a/src/pages/EventPage.js b/src/pages/EventPage.js
index 721ba53..08e9423 100644
--- a/src/pages/EventPage.js
+++ b/src/pages/EventPage.js
@@ -167,7 +167,7 @@ export default function EventPage() {
         </Typography>
         <br />
         <br />
-        <Grid container spacing={3} justify="center">
+        <Grid container spacing={3} justifyContent="center">
           <Grid xs={12} md={6}>
             <div className={classes.griditem}>
               <Typography variant="h6">
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index 367815e..c901f9f 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 import EventsCalendar from '../components/Calendar';
 import Avatar from '../components/Avatar';
 import FrontText from '../components/FrontText';
-import { execom, alumni, ecats, hostname } from '../links';
+import { alumni, ecats, hostname } from '../links';
 import FrontBox from '../components/FrontBox';
 import SpacyDivider from '../components/SpacyDivider';
 import AlumniAccordions from '../components/AlumniAccordions';
@@ -15,6 +15,8 @@ import GiveMeABreak from '../components/GiveMeABreak';
 import EventCard from '../components/EventCard';
 import axios from 'axios';
 import Confetti from '../animations/Confettie';
+
+
 const useStyles = makeStyles(theme => ({
   'root': theme.root,
   'container': theme.page,
@@ -40,12 +42,18 @@ const useStyles = makeStyles(theme => ({
 export default function HomePage(props) {
   const classes = useStyles();
   const [events, setEvents] = useState([]);
+  const [member, setMember] = useState([]);
   const { ref: myRef, inView: myElementIsVisible } = useInView();
 
   useEffect(() => {
     axios.get(hostname + '/api/event/cat/' + ecats.main).then(response => {
       setEvents(response.data.events);
     });
+
+    axios.get(hostname + `/api/execom/${ecats.main}`).then(response => {
+      setMember(response.data.execom);
+    });
+
   }, []);
   return (
     <div className={classes.root}>
@@ -62,7 +70,7 @@ export default function HomePage(props) {
           <Grid
             container
             spacing={3}
-            justify="space-evenly"
+            justifyContent="space-evenly"
             onScroll={() => {
               console.log('Came here ');
             }}
@@ -78,23 +86,33 @@ export default function HomePage(props) {
               ) : null}
             </div>
             {/* <Grid container item xs={12} sm={6} md={4} lg={3}> */}
-            {execom.main.map(member => (
+            {/* {execom.main.map(member => (
               <Grid item xs={12} sm={6} md={4} lg={4}>
                 <Avatar name={member.name} position={member.position} src={member.image} />
               </Grid>
-            ))}
+            ))} */}
+             <Grid container spacing={2} justifyContent="center">
+                {member.map(mem => {
+                  return (
+                    <Grid item xs={12} md={4}>
+                     <Avatar name={mem.name} position={mem.position} src={mem.image} />
+                    </Grid>
+                  );
+                })}
+              </Grid>
+            
             {/* </Grid> */}
           </Grid>
         </Container>
 
-        <AlumniAccordions members={alumni.main} color="#12c48c" />
+        <AlumniAccordions members={alumni.main} sid={ecats.main} color="#12c48c" />
         <SpacyDivider num={2} color="#12c48c" />
         {events.length !== 0 && (
           <div hidden>
             <Paper className={classes.paper}>
               <Typography variant="h3">Events</Typography>
               <br />
-              <Grid container spacing={2} justify="center">
+              <Grid container spacing={2} justifyContent="center">
                 {events.slice(0, 3).map(item => {
                   return (
                     <Grid item xs={12} md={4}>
diff --git a/src/pages/MembershipPage.js b/src/pages/MembershipPage.js
index 194fafa..c1a1889 100644
--- a/src/pages/MembershipPage.js
+++ b/src/pages/MembershipPage.js
@@ -332,7 +332,7 @@ export default function MembershipPage() {
               <Typography variant="h3">Why Join IEEE?</Typography>
               <GiveMeABreak num={2} />
 
-              <Grid container spacing={4} justify="center">
+              <Grid container spacing={4} justifyContent="center">
                 <Grid item xs={12} md={4} align="center">
                   <div>
                     <img src={images.membership.benefit1} alt="benefit" style={{ width: '40%', height: '40%' }} />
diff --git a/src/pages/PESSocietyPage.js b/src/pages/PESSocietyPage.js
index 78879f6..dcf2441 100644
--- a/src/pages/PESSocietyPage.js
+++ b/src/pages/PESSocietyPage.js
@@ -3,12 +3,11 @@ import axios from 'axios';
 import { Container, Grid, Typography, Paper } from '@material-ui/core';
 import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '../components/Avatar';
 import EventCard from '../components/EventCard';
-import { hostname, ecats, images, execom, alumni } from '../links';
+import { hostname, ecats, images, alumni } from '../links';
 import AlumniAccordions from '../components/AlumniAccordions';
 import SpacyDivider from '../components/SpacyDivider';
-
+import SocietyExec from './SocietyExec';
 const useStyles = makeStyles(theme => ({
   root: theme.root,
   container: theme.page,
@@ -85,7 +84,7 @@ export default function PESSocietyPage(props) {
             <Paper className={classes.paper}>
               <Typography variant="h3">Events</Typography>
               <br />
-              <Grid container spacing={2} justify="center">
+              <Grid container spacing={2} justifyContent="center">
                 {events.slice(0, 3).map(item => {
                   return (
                     <Grid item xs={12} md={4}>
@@ -104,7 +103,7 @@ export default function PESSocietyPage(props) {
             <SpacyDivider color="rgb(53 176 232)" />
           </>
         )}
-        <Paper className={classes.paper}>
+        {/* <Paper className={classes.paper}>
           <Typography variant="h3">Executive Committee</Typography>
           <br />
           <Grid container spacing={2} justify="center">
@@ -114,8 +113,9 @@ export default function PESSocietyPage(props) {
               </Grid>
             ))}
           </Grid>
-        </Paper>
-        <AlumniAccordions members={alumni.pes} color="rgb(53 176 232)" />
+        </Paper> */}
+         <SocietyExec sid = {ecats.pes}/>
+        <AlumniAccordions members={alumni.pes} sid={ecats.pes}color="rgb(53 176 232)" />
         <br />
       </Container>
     </div>
diff --git a/src/pages/RASSocietyPage.js b/src/pages/RASSocietyPage.js
index 119b95f..5eee9cb 100644
--- a/src/pages/RASSocietyPage.js
+++ b/src/pages/RASSocietyPage.js
@@ -3,12 +3,11 @@ import axios from 'axios';
 import { Container, Grid, Typography, Paper } from '@material-ui/core';
 import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '../components/Avatar';
 import EventCard from '../components/EventCard';
-import { hostname, ecats, images, execom, alumni } from '../links';
+import { hostname, ecats, images, alumni } from '../links';
 import AlumniAccordions from '../components/AlumniAccordions';
 import SpacyDivider from '../components/SpacyDivider';
-
+import SocietyExec from './SocietyExec';
 const useStyles = makeStyles(theme => ({
   root: theme.root,
   container: theme.page,
@@ -80,7 +79,7 @@ export default function RASSocietyPage(props) {
             <Paper className={classes.paper}>
               <Typography variant="h3">Events</Typography>
               <br />
-              <Grid container spacing={2} justify="center">
+              <Grid container spacing={2} justifyContent="center">
                 {events.slice(0, 3).map(item => {
                   return (
                     <Grid item xs={12} md={4}>
@@ -99,7 +98,7 @@ export default function RASSocietyPage(props) {
             <SpacyDivider color="rgb(12 104 171)" />
           </>
         )}
-        <Paper className={classes.paper}>
+        {/* <Paper className={classes.paper}>
           <Typography variant="h3">Executive Committee</Typography>
           <br />
           <Grid container spacing={2} justify="center">
@@ -109,8 +108,9 @@ export default function RASSocietyPage(props) {
               </Grid>
             ))}
           </Grid>
-        </Paper>
-        <AlumniAccordions members={alumni.ras} color="rgb(12 104 171)" />
+        </Paper> */}
+         <SocietyExec sid = {ecats.ras}/>
+        <AlumniAccordions members={alumni.ras} sid={ecats.ras} color="rgb(12 104 171)" />
         <br />
       </Container>
     </div>
diff --git a/src/pages/SCSocietyPage.js b/src/pages/SCSocietyPage.js
index f73651b..1fdca1d 100644
--- a/src/pages/SCSocietyPage.js
+++ b/src/pages/SCSocietyPage.js
@@ -3,12 +3,11 @@ import axios from 'axios';
 import { Container, Grid, Typography, Paper } from '@material-ui/core';
 import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '../components/Avatar';
 import EventCard from '../components/EventCard';
-import { hostname, ecats, images, execom, alumni } from '../links';
+import { hostname, ecats, images,alumni } from '../links';
 import AlumniAccordions from '../components/AlumniAccordions';
 import SpacyDivider from '../components/SpacyDivider';
-
+import SocietyExec from './SocietyExec';
 const useStyles = makeStyles(theme => ({
   root: theme.root,
   container: theme.page,
@@ -85,7 +84,7 @@ export default function SCSocietyPage(props) {
             <Paper className={classes.paper}>
               <Typography variant="h3">Events</Typography>
               <br />
-              <Grid container spacing={2} justify="center">
+              <Grid container spacing={2} justifyContent="center">
                 {events.slice(0, 3).map(item => {
                   return (
                     <Grid item xs={12} md={4}>
@@ -104,7 +103,7 @@ export default function SCSocietyPage(props) {
             <SpacyDivider color="rgb(153 221 227)" />
           </>
         )}
-        <Paper className={classes.paper}>
+        {/* <Paper className={classes.paper}>
           <Typography variant="h3">Executive Committee</Typography>
           <br />
           <Grid container spacing={2} justify="center">
@@ -114,8 +113,10 @@ export default function SCSocietyPage(props) {
               </Grid>
             ))}
           </Grid>
-        </Paper>
-        <AlumniAccordions members={alumni.sc} color="rgb(153 221 227)" />
+        </Paper> */}
+          <SocietyExec sid = {ecats.sc}/>
+          
+        <AlumniAccordions members={alumni.sc} sid = {ecats.sc} color="rgb(153 221 227)" />
         <br />
       </Container>
     </div>
diff --git a/src/pages/SIGHTAffinityPage.js b/src/pages/SIGHTAffinityPage.js
index 48a1016..75f945b 100644
--- a/src/pages/SIGHTAffinityPage.js
+++ b/src/pages/SIGHTAffinityPage.js
@@ -3,11 +3,11 @@ import axios from 'axios';
 import { Container, Grid, Typography, Paper, List, ListItem } from '@material-ui/core';
 import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '../components/Avatar';
 import EventCard from '../components/EventCard';
-import { hostname, ecats, images, execom, alumni } from '../links';
+import { hostname, ecats, images,alumni } from '../links';
 import AlumniAccordions from '../components/AlumniAccordions';
 import SpacyDivider from '../components/SpacyDivider';
+import SocietyExec from './SocietyExec';
 
 const useStyles = makeStyles(theme => ({
   root: theme.root,
@@ -93,7 +93,7 @@ export default function SIGHTAffinityPage(props) {
             <Paper className={classes.paper}>
               <Typography variant="h3">Events</Typography>
               <br />
-              <Grid container spacing={2} justify="center">
+              <Grid container spacing={2} justifyContent="center">
                 {events.slice(0, 3).map(item => {
                   return (
                     <Grid item xs={12} md={4}>
@@ -112,7 +112,7 @@ export default function SIGHTAffinityPage(props) {
             <br />
           </>
         )}
-        <Paper className={classes.paper}>
+        {/* <Paper className={classes.paper}>
           <Typography variant="h3">Executive Committee</Typography>
           <br />
           <Grid hidden container spacing={2} justify="center">
@@ -122,9 +122,10 @@ export default function SIGHTAffinityPage(props) {
               </Grid>
             ))}
           </Grid>
-        </Paper>
+        </Paper> */}
+         <SocietyExec sid = {ecats.sight}/>
         <br />
-        <AlumniAccordions members={alumni.sight} />
+        <AlumniAccordions members={alumni.sight} sid = {ecats.sight} />
         <br />
       </Container>
     </div>
diff --git a/src/pages/SPSSocietyPage.js b/src/pages/SPSSocietyPage.js
index 9251d8a..f113b5b 100644
--- a/src/pages/SPSSocietyPage.js
+++ b/src/pages/SPSSocietyPage.js
@@ -3,11 +3,11 @@ import axios from 'axios';
 import { Container, Grid, Typography, Paper } from '@material-ui/core';
 import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '../components/Avatar';
 import EventCard from '../components/EventCard';
-import { hostname, ecats, images, execom, alumni } from '../links';
+import { hostname, ecats, images,alumni } from '../links';
 import AlumniAccordions from '../components/AlumniAccordions';
 import SpacyDivider from '../components/SpacyDivider';
+import SocietyExec from './SocietyExec';
 
 const useStyles = makeStyles(theme => ({
   root: theme.root,
@@ -77,7 +77,7 @@ export default function SPSSocietyPage(props) {
             <Paper className={classes.paper}>
               <Typography variant="h3">Events</Typography>
               <br />
-              <Grid container spacing={2} justify="center">
+              <Grid container spacing={2} justifyContent="center">
                 {events.slice(0, 3).map(item => {
                   return (
                     <Grid item xs={12} md={4}>
@@ -96,7 +96,7 @@ export default function SPSSocietyPage(props) {
             <SpacyDivider color="rgb(153 221 227)" />
           </>
         )}
-        <Paper className={classes.paper}>
+        {/* <Paper className={classes.paper}>
           <Typography variant="h3">Executive Committee</Typography>
           <br />
           <Grid container spacing={2} justify="center">
@@ -106,8 +106,9 @@ export default function SPSSocietyPage(props) {
               </Grid>
             ))}
           </Grid>
-        </Paper>
-        <AlumniAccordions members={alumni.sps} color="rgb(153 221 227)" />
+        </Paper> */}
+         <SocietyExec sid = {ecats.sps}/>
+        <AlumniAccordions members={alumni.sps} sid = {ecats.sps} color="rgb(153 221 227)" />
         <br />
       </Container>
     </div>
diff --git a/src/pages/SocietyExec.js b/src/pages/SocietyExec.js
new file mode 100644
index 0000000..225eae3
--- /dev/null
+++ b/src/pages/SocietyExec.js
@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Container, Grid, Typography, Paper } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Avatar from '../components/Avatar';
+import { hostname} from '../links';
+
+
+
+const useStyles = makeStyles(theme => ({
+  root: theme.root,
+  container: theme.page,
+  paper: {
+    ...theme.paper,
+    padding: theme.spacing(4),
+  },
+  link: {
+    ...theme.link,
+    float: 'right',
+    textDecoration: 'none',
+  },
+  carousel: {
+    margin: 'auto',
+    paddingTop: theme.spacing(4),
+  },
+}));
+
+export default function SocietyExec({sid}) {
+  const classes = useStyles();
+
+  const [member, setMember] = useState([]);
+
+  useEffect(() => {
+    axios.get(hostname + `/api/execom/${sid}`).then(response => {
+        setMember(response.data.execom);
+      });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className={classes.root}>
+     
+      <Container maxWidth="md">
+        <br />
+        <Paper className={classes.paper}>
+          <Typography variant="h3">Executive Committee</Typography>
+          <br />
+          <Grid container spacing={2} justifyContent="center">
+                {member.map(mem => {
+                  return (
+                    <Grid item xs={12} md={4} key={mem.name}>
+                     <Avatar name={mem.name} position={mem.position} src={mem.image} />
+                    </Grid>
+                  );
+                })}
+              </Grid>
+
+        </Paper>
+        <br />
+      </Container>
+    </div>
+  );
+}
diff --git a/src/pages/WIEAffinityPage.js b/src/pages/WIEAffinityPage.js
index 3430420..dd5d86b 100644
--- a/src/pages/WIEAffinityPage.js
+++ b/src/pages/WIEAffinityPage.js
@@ -3,11 +3,11 @@ import axios from 'axios';
 import { Container, Grid, Typography, Paper } from '@material-ui/core';
 import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '../components/Avatar';
 import EventCard from '../components/EventCard';
-import { hostname, ecats, images, execom, alumni } from '../links';
+import { hostname, ecats, images, alumni } from '../links';
 import AlumniAccordions from '../components/AlumniAccordions';
 import SpacyDivider from '../components/SpacyDivider';
+import SocietyExec from './SocietyExec';
 
 const useStyles = makeStyles(theme => ({
   root: theme.root,
@@ -75,7 +75,7 @@ export default function WIEAffinityPage(props) {
             <Paper className={classes.paper}>
               <Typography variant="h3">Events</Typography>
               <br />
-              <Grid container spacing={2} justify="center">
+              <Grid container spacing={2} justifyContent="center">
                 {events.slice(0, 3).map(item => {
                   return (
                     <Grid item xs={12} md={4}>
@@ -94,7 +94,7 @@ export default function WIEAffinityPage(props) {
             <SpacyDivider color="rgb(128 58 120)" />
           </>
         )}
-        <Paper className={classes.paper}>
+        {/* <Paper className={classes.paper}>
           <Typography variant="h3">Executive Committee</Typography>
           <br />
           <Grid container spacing={2} justify="center">
@@ -104,8 +104,9 @@ export default function WIEAffinityPage(props) {
               </Grid>
             ))}
           </Grid>
-        </Paper>
-        <AlumniAccordions members={alumni.wie} color="rgb(128 58 120)" />
+        </Paper> */}
+        <SocietyExec sid = {ecats.wie}/>
+        <AlumniAccordions members={alumni.wie}sid = {ecats.wie}  color="rgb(128 58 120)" />
         <br />
       </Container>
     </div>