diff --git a/src/components/AboutCard/MainCard.js b/src/components/AboutCard/MainCard.js
index 4aed9c93..ad6d36ed 100644
--- a/src/components/AboutCard/MainCard.js
+++ b/src/components/AboutCard/MainCard.js
@@ -9,6 +9,7 @@ const useStyles = makeStyles(theme => ({
     padding: 0
   },
   card: {
+    minHeight: '628px',
     backgroundColor: '#EEF5FF',
     borderRadius: '10px',
     padding: '50px 30px'
diff --git a/src/components/AboutCard/SubCard.js b/src/components/AboutCard/SubCard.js
index 8fbf3388..c73306d8 100644
--- a/src/components/AboutCard/SubCard.js
+++ b/src/components/AboutCard/SubCard.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, Typography, makeStyles } from '@material-ui/core';
+import { Grid, Typography, makeStyles, Box } from '@material-ui/core';
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -20,14 +20,16 @@ const SubCard = ({ point }) => {
   return (
     <Grid container className={classes.root}>
       <Grid item md={2}>
-        <img alt="Select file" height="55px" src={point.img} />
+        <img alt="title-img" style={{ marginTop: '6px' }} height="55px" src={point.img} />
       </Grid>
       <Grid item md={10}>
+
         <Typography
           className={classes.extraMargin}
-          align="justify"
-          variant="subtitle2"
+          variant="subtitle1"
         >
+          <Box component="span" style={{ fontWeight: 'bold' }} display="inline-block">{`${point.contentTitle} :`}</Box>
+          {` `}
           {point.content}
         </Typography>
       </Grid>
diff --git a/src/views/pages/HomeView/CTA.js b/src/views/pages/HomeView/CTA.js
index 16c1be7d..21616c18 100755
--- a/src/views/pages/HomeView/CTA.js
+++ b/src/views/pages/HomeView/CTA.js
@@ -50,7 +50,11 @@ const useStyles = makeStyles(theme => ({
   },
   primeBtn: {
     backgroundColor: '#A60000',
-    color: '#ffffff'
+    color: '#ffffff',
+    '&:hover': {
+      backgroundColor: '#A60000',
+      opacity: '0.8',
+    }
   },
   secondaryBtn: {
     borderColor: '#A60000',
diff --git a/src/views/pages/HomeView/Events.js b/src/views/pages/HomeView/Events.js
index dc52cb96..532e5e9c 100755
--- a/src/views/pages/HomeView/Events.js
+++ b/src/views/pages/HomeView/Events.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
 import {
-  Link,
   Box,
   Button,
   Container,
@@ -63,6 +62,10 @@ const useStyles = makeStyles((theme) => ({
     [theme.breakpoints.down('sm')]: {
       width: '100%',
       marginBottom: '20px'
+    },
+    '&:hover': {
+      backgroundColor: '#000',
+      opacity: '0.8',
     }
   },
   btn: {
@@ -192,18 +195,8 @@ function Events({ className, ...rest }) {
                 </Grid>
               </Box>
               <Typography className={classes.secondaryText}>
-                Our Youtube Channel for
-                <Link
-                  style={{
-                    color: '#a60000'
-                  }}
-                  component="a"
-                  href="https://www.youtube.com/c/CodeforCause/videos"
-                  target="_blank"
-                >
-                  {` Previous Webinars`}
-                </Link>
-              </Typography>
+                Our Youtube Channel for Upcoming Webinars
+               </Typography>
             </div>
           </Grid>
         </Grid>
diff --git a/src/views/pages/HomeView/Hero.js b/src/views/pages/HomeView/Hero.js
index 1045880a..e6073dd7 100755
--- a/src/views/pages/HomeView/Hero.js
+++ b/src/views/pages/HomeView/Hero.js
@@ -55,12 +55,15 @@ const useStyles = makeStyles(theme => ({
   hide: {
     display: 'none'
   },
-  Button: {
+  btn: {
     backgroundColor: '#A60000',
     color: '#ffffff',
     textTransform: 'capitalize',
     [theme.breakpoints.down('sm')]: {
       width: '100%'
+    },
+    '&:hover': {
+      backgroundColor: 'rgba(166, 0, 0, 0.8)',
     }
   }
 }));
@@ -81,11 +84,10 @@ function Hero({ className, ...rest }) {
               className={clsx(classes.extraPadding, className)}
             >
               <Typography
-                variant="h4"
+                variant="h1"
                 gutterBottom
-                style={{ color: '#A60000' }}
               >
-                Welcome to
+                Learn for Cause
               </Typography>
               <Typography variant="h1">Code for Cause</Typography>
               <Hidden mdUp>
@@ -109,7 +111,7 @@ function Hero({ className, ...rest }) {
                 <Grid container xs={12} md={12}>
                   <Grid item xs={12} md={12}>
                     <Button
-                      className={classes.Button}
+                      className={classes.btn}
                       component="a"
                       href="https://youtube.com/codeforcause"
                       target="_blank"
diff --git a/src/views/pages/HomeView/HomeViewData.js b/src/views/pages/HomeView/HomeViewData.js
index 56233e10..80d21992 100644
--- a/src/views/pages/HomeView/HomeViewData.js
+++ b/src/views/pages/HomeView/HomeViewData.js
@@ -61,7 +61,7 @@ export const mentors = [
   },
   {
     id: '6',
-    name: 'Bharat Bhardwaj',
+    name: 'Bharat Kumar',
     avatar: '/static/images/members/bharat.png',
     linkedin: 'https://www.linkedin.com/in/bharatbbhardwaj/'
   }
@@ -105,18 +105,21 @@ export const openKnowledgeContent = {
     {
       id: '1',
       img: '/static/images/icons/ok1.svg',
+      contentTitle: 'Live Classes',
       content:
         'We host live classes and workshops regularly with focus on hands-on learning, which is crucial in gaining real-world software development experience.'
     },
     {
       id: '2',
       img: '/static/images/icons/ok2.svg',
+      contentTitle: 'Doubt Resolution',
       content:
         'Get connected to a large group of developers and open-source enthusiasts to get all your doubts resolved - whether technical, career-oriented or soft skills.'
     },
     {
       id: '3',
       img: '/static/images/icons/ok3.svg',
+      contentTitle: 'Career Guidance',
       content:
         'Learn from the experiences of the community members in the industry which will help you with career guidance for the path best suited to you.'
     }
@@ -131,20 +134,24 @@ export const openSourceContent = {
     {
       id: '1',
       img: '/static/images/icons/os1.svg',
+      contentTitle: 'Develop Products',
       content:
         'Practical development experience is crucial in becoming a pragmatic programmer. Join us and develop products to enhance your skill set for real.'
     },
     {
       id: '2',
       img: '/static/images/icons/os2.svg',
+      contentTitle: 'Collaborative Coding',
       content:
         'When talking about graphs, the edges matter as much as the nodes. We follow Collaborative Working that helps you generate showcasable work.'
     },
     {
       id: '3',
       img: '/static/images/icons/os3.svg',
+      contentTitle: 'Networking Events',
       content:
-        'Software development professionals flourish by networking. Get connected to people who matter by our online/offline events.'
+
+        'As we already know software development professionals flourish by networking. Get connected to people who matter by our online/offline events.'
     }
   ]
 };
diff --git a/src/views/pages/HomeView/MainCards.js b/src/views/pages/HomeView/MainCards.js
index 77a7cc28..af6d68fe 100755
--- a/src/views/pages/HomeView/MainCards.js
+++ b/src/views/pages/HomeView/MainCards.js
@@ -21,10 +21,10 @@ function MainCards({ className, ...rest }) {
   return (
     <Container className={clsx(classes.root, className)} {...rest}>
       <Grid alignItems="center" container justify="center" spacing={8}>
-        <Grid item md={6} xs={12}>
+        <Grid item md={6} sm={6} xs={12}>
           <MainCard content={openKnowledgeContent} />
         </Grid>
-        <Grid item md={6} xs={12}>
+        <Grid item md={6} sm={6} xs={12}>
           <MainCard content={openSourceContent} />
         </Grid>
       </Grid>
diff --git a/src/views/pages/HomeView/Promoters.js b/src/views/pages/HomeView/Promoters.js
index 537e10cd..1a88d978 100755
--- a/src/views/pages/HomeView/Promoters.js
+++ b/src/views/pages/HomeView/Promoters.js
@@ -39,7 +39,7 @@ function Promoters({ className, ...rest }) {
           justify="center"
           alignItems="center"
         >
-          <Grid item xs={12} md={4}>
+          <Grid item xs={12} md={5}>
             <Typography variant="h4" gutterBottom>
               Our mentors are associated with
             </Typography>
@@ -50,13 +50,12 @@ function Promoters({ className, ...rest }) {
           <Grid item xs={6} md={2}>
             <img alt="Logo" src="/static/images/promoters/microsoft.svg" />
           </Grid>
-          <Grid item xs={6} md={2}>
-            <img alt="Logo" src="/static/images/promoters/ibm.svg" />
-          </Grid>
-
           <Grid item xs={6} md={2}>
             <img alt="Logo" src="/static/images/promoters/redhat.svg" />
           </Grid>
+          <Grid item xs={6} md={1}>
+            <img alt="Logo" src="/static/images/promoters/ibm.svg" />
+          </Grid>
         </Grid>
       </Container>
     </div>
diff --git a/src/views/pages/HomeView/WatchVideos.js b/src/views/pages/HomeView/WatchVideos.js
index ce9a05de..85199a24 100644
--- a/src/views/pages/HomeView/WatchVideos.js
+++ b/src/views/pages/HomeView/WatchVideos.js
@@ -29,7 +29,8 @@ const useStyles = makeStyles(theme => ({
     height: 90,
     '&:hover': {
       scale: 1.2,
-      transition: 'ease-in .2s'
+      transition: 'ease-in .2s',
+      opacity: '0.8'
     },
     [theme.breakpoints.down('sm')]: {
       height: 120,