diff --git a/src/layouts/MainLayout/TopBar/index.js b/src/layouts/MainLayout/TopBar/index.js
index 31307836..71499897 100755
--- a/src/layouts/MainLayout/TopBar/index.js
+++ b/src/layouts/MainLayout/TopBar/index.js
@@ -139,6 +139,7 @@ function TopBar({ className, onMobileNavOpen, ...rest }) {
           <Box ml={2} flexGrow={1} />
           {navItems.map((item, index) => (
             <Item
+              key={index}
               active={item.link === pathname}
               title={item.title}
               link={item.link}
diff --git a/src/views/pages/CLView/Apply.js b/src/views/pages/CLView/Apply.js
index 8021b85d..6611c3cf 100755
--- a/src/views/pages/CLView/Apply.js
+++ b/src/views/pages/CLView/Apply.js
@@ -54,7 +54,7 @@ function Apply({ className, ...rest }) {
       }}
       {...rest}
     >
-      <Grid container maxWidth="lg">
+      <Grid container maxwidth="lg">
         <Grid item lg={9} md={12} sm={12} xs={12} className={classes.applyleft}>
           <div className={classes.main}>
             <Typography
diff --git a/src/views/pages/CLView/ApplyNowModal.js b/src/views/pages/CLView/ApplyNowModal.js
index 496461c5..96068174 100644
--- a/src/views/pages/CLView/ApplyNowModal.js
+++ b/src/views/pages/CLView/ApplyNowModal.js
@@ -157,8 +157,12 @@ export default function ApplyNowModal() {
                   errorMessages={['Please select a country code']}
                   fullWidth
                 >
-                  {countryCodes.map(code => {
-                    return <MenuItem value={`+${code}`}>+{code}</MenuItem>;
+                  {countryCodes.map((code, index) => {
+                    return (
+                      <MenuItem key={index} value={`+${code}`}>
+                        +{code}
+                      </MenuItem>
+                    );
                   })}
                 </SelectValidator>
               </Grid>
diff --git a/src/views/pages/CLView/CTA.js b/src/views/pages/CLView/CTA.js
index 3da9c578..c098d34a 100755
--- a/src/views/pages/CLView/CTA.js
+++ b/src/views/pages/CLView/CTA.js
@@ -136,7 +136,7 @@ function CTA({ className, ...rest }) {
               </Hidden>
 
               <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
+                <Grid item container xs={12} sm={12}>
                   <Grid item xs={12} sm={12}>
                     <Button
                       className={classes.Button + ' ' + classes.secondaryBtn}
@@ -198,7 +198,7 @@ function CTA({ className, ...rest }) {
               </Hidden>
 
               <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
+                <Grid item container xs={12} sm={12}>
                   <Grid item xs={12} sm={12}>
                     <Button
                       className={classes.Button + ' ' + classes.secondaryBtn}
@@ -260,7 +260,7 @@ function CTA({ className, ...rest }) {
               </Hidden>
 
               <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
+                <Grid item container xs={12} sm={12}>
                   <Grid item xs={12} sm={12}>
                     <Button
                       className={classes.Button + ' ' + classes.secondaryBtn}
@@ -269,7 +269,7 @@ function CTA({ className, ...rest }) {
                       target="_blank"
                       size="large"
                       variant="outlined"
-                      disabled="true"
+                      disabled={true}
                     >
                       Apply Now
                     </Button>
diff --git a/src/views/pages/CLView/StandFor.js b/src/views/pages/CLView/StandFor.js
index 2519bc5f..e420dd89 100644
--- a/src/views/pages/CLView/StandFor.js
+++ b/src/views/pages/CLView/StandFor.js
@@ -116,28 +116,31 @@ function StandsFor({ className, ...rest }) {
               <Box mt={2}>
                 <Typography variant="body1">
                   He/she shall be entusiastic about going social and build &amp;
-                  contribute for the community<h4>- An Initiative taker</h4>
+                  contribute for the community
                 </Typography>
+                <Typography variant="h6">- An Initiative taker</Typography>
               </Box>
               <Box mt={2}>
                 <Typography variant="body1">
                   A Leader shall always have a way of talking people out from
                   problems and leading them to do that for others too{' '}
-                  <h4> - A Community Builder</h4>
                 </Typography>
+                <Typography variant="h6"> - A Community Builder</Typography>
               </Box>
               <Box mt={2}>
                 <Typography variant="body1">
                   He/she should be connecting to the resources available in
                   community that might help in building a better &amp; more
-                  helpful community <h4>- A Resource Seeker</h4>
+                  helpful community
                 </Typography>
+                <Typography variant="h6">- A Resource Seeker</Typography>
               </Box>
               <Box mt={2}>
                 <Typography variant="body1">
                   Most sought after value - an effort maker and giving
-                  peronality <h4>- An Investor</h4>
+                  peronality
                 </Typography>
+                <Typography variant="h6">- An Investor</Typography>
               </Box>
             </Box>
           </Grid>
diff --git a/src/views/pages/CoursesView/CTA.js b/src/views/pages/CoursesView/CTA.js
index 3ef99d12..8f0a9ef7 100755
--- a/src/views/pages/CoursesView/CTA.js
+++ b/src/views/pages/CoursesView/CTA.js
@@ -92,7 +92,7 @@ function CTA({ className, ...rest }) {
               </Hidden>
 
               <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
+                <Grid item container xs={12} sm={12}>
                   <Grid item xs={12} sm={12}>
                     <Button
                       className={classes.Button + ' ' + classes.primeBtn}
@@ -133,7 +133,7 @@ function CTA({ className, ...rest }) {
               </Hidden>
 
               <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
+                <Grid item container xs={12} sm={12}>
                   <Grid item xs={12} sm={12}>
                     <Button
                       className={classes.Button + ' ' + classes.secondaryBtn}
@@ -174,7 +174,7 @@ function CTA({ className, ...rest }) {
               </Hidden>
 
               <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
+                <Grid item container xs={12} sm={12}>
                   <Grid item xs={12} sm={12}>
                     <Button
                       className={classes.Button + ' ' + classes.secondaryBtn}
diff --git a/src/views/pages/CoursesView/Courses.js b/src/views/pages/CoursesView/Courses.js
index 1965dc96..75c0b610 100644
--- a/src/views/pages/CoursesView/Courses.js
+++ b/src/views/pages/CoursesView/Courses.js
@@ -119,7 +119,7 @@ export default function Courses() {
         </Typography>
       </Grid>
 
-      <Grid container>
+      <Grid container alignItems="center">
         <Grid
           item
           lg={12}
@@ -128,8 +128,6 @@ export default function Courses() {
           xs={12}
           align="center"
           display="flex"
-          justifyContent="center"
-          alignItems="center"
         >
           <CoursesGrid courses={foundation} />
         </Grid>
@@ -157,7 +155,7 @@ export default function Courses() {
         </Typography>
       </Grid>
 
-      <Grid container>
+      <Grid container alignItems="center">
         <Grid
           item
           lg={12}
@@ -166,8 +164,6 @@ export default function Courses() {
           xs={12}
           align="center"
           display="flex"
-          justifyContent="center"
-          alignItems="center"
         >
           <CoursesGrid courses={advanced} />
         </Grid>
@@ -191,7 +187,7 @@ const CoursesGrid = ({ courses }) => {
         return (
           <Grid
             item
-            key={course.id}
+            key={cname}
             lg={4}
             md={4}
             sm={6}
diff --git a/src/views/pages/CoursesView/Hero.js b/src/views/pages/CoursesView/Hero.js
index 72261b2a..a0db2acf 100755
--- a/src/views/pages/CoursesView/Hero.js
+++ b/src/views/pages/CoursesView/Hero.js
@@ -115,7 +115,7 @@ function Hero({ className, ...rest }) {
                 )}
               </Box>
               <Box mt={2} mb={3}>
-                <Grid container xs={12} md={12}>
+                <Grid item container xs={12} md={12}>
                   <Grid item xs={12} md={12}>
                     {!!user ? (
                       <Typography
diff --git a/src/views/pages/EventsView/CTA.js b/src/views/pages/EventsView/CTA.js
index 3ef99d12..8f0a9ef7 100755
--- a/src/views/pages/EventsView/CTA.js
+++ b/src/views/pages/EventsView/CTA.js
@@ -92,7 +92,7 @@ function CTA({ className, ...rest }) {
               </Hidden>
 
               <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
+                <Grid item container xs={12} sm={12}>
                   <Grid item xs={12} sm={12}>
                     <Button
                       className={classes.Button + ' ' + classes.primeBtn}
@@ -133,7 +133,7 @@ function CTA({ className, ...rest }) {
               </Hidden>
 
               <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
+                <Grid item container xs={12} sm={12}>
                   <Grid item xs={12} sm={12}>
                     <Button
                       className={classes.Button + ' ' + classes.secondaryBtn}
@@ -174,7 +174,7 @@ function CTA({ className, ...rest }) {
               </Hidden>
 
               <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
+                <Grid item container xs={12} sm={12}>
                   <Grid item xs={12} sm={12}>
                     <Button
                       className={classes.Button + ' ' + classes.secondaryBtn}
diff --git a/src/views/pages/EventsView/Events.js b/src/views/pages/EventsView/Events.js
index 31e15f5a..65e63962 100755
--- a/src/views/pages/EventsView/Events.js
+++ b/src/views/pages/EventsView/Events.js
@@ -192,7 +192,7 @@ function EventCards({ events, upcoming }) {
                   {event.domain}
                 </Typography>
                 <Typography
-                  variant="span"
+                  variant="caption"
                   display="inline"
                   style={{
                     background: '#1D006E',
diff --git a/src/views/pages/EventsView/Hero.js b/src/views/pages/EventsView/Hero.js
index 56379e27..0462eacc 100755
--- a/src/views/pages/EventsView/Hero.js
+++ b/src/views/pages/EventsView/Hero.js
@@ -113,7 +113,7 @@ function Hero({ className, ...rest }) {
                 )}
               </Box>
               <Box mt={2} mb={3}>
-                <Grid container xs={12} md={12}>
+                <Grid item container xs={12} md={12}>
                   <Grid item xs={12} md={12}>
                     {!!user ? (
                       <Typography
diff --git a/src/views/pages/HomeView/AboutUs/OurTeam/Team.js b/src/views/pages/HomeView/AboutUs/OurTeam/Team.js
index 034563e9..c1556fb2 100755
--- a/src/views/pages/HomeView/AboutUs/OurTeam/Team.js
+++ b/src/views/pages/HomeView/AboutUs/OurTeam/Team.js
@@ -101,7 +101,7 @@ function Team({ mentors, className, ...rest }) {
                       className={classes.teamName}
                       color="textPrimary"
                       variant="h5"
-                      underline="never"
+                      underline="none"
                       href={mentor.linkedin}
                       target="_blank"
                     >
diff --git a/src/views/pages/HomeView/CTA.js b/src/views/pages/HomeView/CTA.js
index 3ef99d12..8f0a9ef7 100755
--- a/src/views/pages/HomeView/CTA.js
+++ b/src/views/pages/HomeView/CTA.js
@@ -92,7 +92,7 @@ function CTA({ className, ...rest }) {
               </Hidden>
 
               <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
+                <Grid item container xs={12} sm={12}>
                   <Grid item xs={12} sm={12}>
                     <Button
                       className={classes.Button + ' ' + classes.primeBtn}
@@ -133,7 +133,7 @@ function CTA({ className, ...rest }) {
               </Hidden>
 
               <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
+                <Grid item container xs={12} sm={12}>
                   <Grid item xs={12} sm={12}>
                     <Button
                       className={classes.Button + ' ' + classes.secondaryBtn}
@@ -174,7 +174,7 @@ function CTA({ className, ...rest }) {
               </Hidden>
 
               <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
+                <Grid item container xs={12} sm={12}>
                   <Grid item xs={12} sm={12}>
                     <Button
                       className={classes.Button + ' ' + classes.secondaryBtn}
diff --git a/src/views/pages/HomeView/Courses.js b/src/views/pages/HomeView/Courses.js
index f7084a36..e716950a 100644
--- a/src/views/pages/HomeView/Courses.js
+++ b/src/views/pages/HomeView/Courses.js
@@ -158,7 +158,7 @@ export default function Courses() {
           with a purely practical approach to learning.
         </Typography>
       </Grid>
-      <Grid container>
+      <Grid container alignItems="center">
         <Grid
           item
           lg={12}
@@ -167,8 +167,6 @@ export default function Courses() {
           xs={12}
           align="center"
           display="flex"
-          justifyContent="center"
-          alignItems="center"
         >
           <Tabs
             value={value}
@@ -189,9 +187,7 @@ export default function Courses() {
                   <Typography variant="h5">
                     <Box fontWeight={600}>Foundation</Box>
                   </Typography>
-                  <Typography variant="body2">
-                    <Box>(Reg. Open)</Box>
-                  </Typography>
+                  <Typography variant="body2">(Reg. Open)</Typography>
                 </Fragment>
               }
               disableRipple={true}
@@ -203,9 +199,7 @@ export default function Courses() {
                   <Typography variant="h5">
                     <Box fontWeight={600}>Advanced</Box>
                   </Typography>
-                  <Typography variant="body2">
-                    <Box>(Reg. Open)</Box>
-                  </Typography>
+                  <Typography variant="body2">(Reg. Open)</Typography>
                 </Fragment>
               }
               disableRipple={true}
@@ -218,9 +212,7 @@ export default function Courses() {
                   <Typography variant="h5">
                     <Box fontWeight={600}>Complete</Box>
                   </Typography>
-                  <Typography variant="body2">
-                    <Box>(Launching Soon)</Box>
-                  </Typography>
+                  <Typography variant="body2">(Launching Soon)</Typography>
                 </Fragment>
               }
               disabled
@@ -232,13 +224,12 @@ export default function Courses() {
             <GridList
               className={classes.gridList}
               display="flex"
-              alignItems="center"
               cols={large ? 3 : medium ? 2.5 : small ? 1.7 : 1.2}
             >
               {Object.entries(foundation).map(([cname, course], index) => {
                 return (
                   <GridListTile
-                    key={course.id}
+                    key={cname}
                     style={{
                       height: '530px'
                     }}
@@ -257,7 +248,7 @@ export default function Courses() {
               {Object.entries(advanced).map(([cname, course], index) => {
                 return (
                   <GridListTile
-                    key={course.id}
+                    key={cname}
                     style={{
                       height: '530px'
                     }}
diff --git a/src/views/pages/HomeView/Events.js b/src/views/pages/HomeView/Events.js
index d5273d41..6b5e6a06 100755
--- a/src/views/pages/HomeView/Events.js
+++ b/src/views/pages/HomeView/Events.js
@@ -169,7 +169,7 @@ function Events({ className, ...rest }) {
                     {event.domain}
                   </Typography>
                   <Typography
-                    variant="span"
+                    variant="caption"
                     display="inline"
                     style={{
                       background: '#1D006E',
diff --git a/src/views/pages/HomeView/Hero.js b/src/views/pages/HomeView/Hero.js
index f40eed84..70bdcce7 100755
--- a/src/views/pages/HomeView/Hero.js
+++ b/src/views/pages/HomeView/Hero.js
@@ -105,7 +105,7 @@ function Hero({ className, ...rest }) {
                 </Typography>
               </Box>
               <Box mt={4}>
-                <Grid container xs={12} md={12}>
+                <Grid item container xs={12} md={12}>
                   <Grid item xs={12} md={12}>
                     <Button
                       className={classes.btn}
diff --git a/src/views/pages/common/Apply.js b/src/views/pages/common/Apply.js
index 77beb7f3..59a3763c 100755
--- a/src/views/pages/common/Apply.js
+++ b/src/views/pages/common/Apply.js
@@ -73,7 +73,7 @@ function Apply({ className, ...rest }) {
       }}
       {...rest}
     >
-      <Grid container maxWidth="lg">
+      <Grid container maxwidth="lg">
         <Grid
           item
           lg={12}
diff --git a/src/views/pages/common/CourseCard.js b/src/views/pages/common/CourseCard.js
index db084b6e..049fd741 100644
--- a/src/views/pages/common/CourseCard.js
+++ b/src/views/pages/common/CourseCard.js
@@ -177,6 +177,7 @@ export default function CourseCard({ course }) {
             <Box mt={2} display="flex" flexDirection="row">
               {course.tags.slice(0, 3).map((tag, index) => (
                 <div
+                  key={index}
                   style={{
                     margin: '4px 8px 4px 0px',
                     padding: '4px 8px',
@@ -197,7 +198,6 @@ export default function CourseCard({ course }) {
 
         <Link
           display="flex"
-          justifyContent="center"
           to={course.link}
           style={{
             background: '#A60000',
@@ -206,16 +206,16 @@ export default function CourseCard({ course }) {
             marginBottom: '16px'
           }}
         >
-          <Typography
-            align="center"
-            style={{
-              color: '#FFFFFF'
-            }}
-          >
-            <Box m={1} fontWeight={600}>
+          <Box m={1} fontWeight={600}>
+            <Typography
+              align="center"
+              style={{
+                color: '#FFFFFF'
+              }}
+            >
               Check Details
-            </Box>
-          </Typography>
+            </Typography>
+          </Box>
         </Link>
       </Card>
     </Box>
@@ -227,6 +227,7 @@ const ParallaxCarousel = ({ slides }) => {
     slides.map((slide, index) => {
       return (
         <Box
+          key={index}
           display="flex"
           flexDirection="column"
           alignItems="bottom"
diff --git a/src/views/pages/common/Footer.js b/src/views/pages/common/Footer.js
index 32083b72..45e6b7c1 100755
--- a/src/views/pages/common/Footer.js
+++ b/src/views/pages/common/Footer.js
@@ -213,12 +213,7 @@ function Footer({ className, ...rest }) {
             {'. All rights reserved.'}
           </Typography>
 
-          <Typography
-            display="block"
-            guitterBottom
-            variant="body2"
-            color="textSecondary"
-          >
+          <Typography display="block" variant="body2" color="textSecondary">
             <Link color="inherit" component={RouterLink} to="/privacy">
               Privacy Policy
             </Link>
diff --git a/src/views/pages/common/Recommendations.js b/src/views/pages/common/Recommendations.js
index cc60a622..dfb32121 100644
--- a/src/views/pages/common/Recommendations.js
+++ b/src/views/pages/common/Recommendations.js
@@ -168,12 +168,14 @@ export default function Recommendations({ recommendationsImages }) {
 
                   <CardContent className={classes.cardContent}>
                     <Box display="flex" justifyContent="center">
-                      <Typography
-                        variant="body2"
-                        className={classes.recommenderDetail}
-                      >
-                        <Box m={1}>{recommendation.text}</Box>
-                      </Typography>
+                      <Box m={1}>
+                        <Typography
+                          variant="body2"
+                          className={classes.recommenderDetail}
+                        >
+                          {recommendation.text}
+                        </Typography>
+                      </Box>
                     </Box>
                   </CardContent>
 
@@ -186,11 +188,9 @@ export default function Recommendations({ recommendationsImages }) {
                         src={recommendation['avatar']}
                       />
                       <Box display="flex" flexDirection="column">
-                        <Typography>
-                          <Box fontWeight="fontWeightBold">
-                            {recommendation.name}
-                          </Box>
-                        </Typography>
+                        <Box fontWeight="fontWeightBold">
+                          <Typography>{recommendation.name}</Typography>
+                        </Box>
                       </Box>
                     </Box>
                   </CardContent>