diff --git a/package-lock.json b/package-lock.json
index 5f87cd21..b4353f0d 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -1442,8 +1442,6 @@
       "version": "10.0.29",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
       "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@emotion/sheet": "0.9.4",
         "@emotion/stylis": "0.8.5",
@@ -1455,8 +1453,6 @@
       "version": "10.0.28",
       "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.28.tgz",
       "integrity": "sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@babel/runtime": "^7.5.5",
         "@emotion/cache": "^10.0.27",
@@ -1470,8 +1466,6 @@
       "version": "10.0.27",
       "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
       "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@emotion/serialize": "^0.11.15",
         "@emotion/utils": "0.11.3",
@@ -1487,8 +1481,6 @@
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
       "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@emotion/memoize": "0.7.4"
       }
@@ -1496,16 +1488,12 @@
     "@emotion/memoize": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
     },
     "@emotion/serialize": {
       "version": "0.11.16",
       "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
       "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@emotion/hash": "0.8.0",
         "@emotion/memoize": "0.7.4",
@@ -1517,25 +1505,19 @@
         "@emotion/hash": {
           "version": "0.8.0",
           "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-          "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
-          "dev": true,
-          "optional": true
+          "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
         }
       }
     },
     "@emotion/sheet": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
-      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
     },
     "@emotion/styled": {
       "version": "10.0.27",
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz",
       "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@emotion/styled-base": "^10.0.27",
         "babel-plugin-emotion": "^10.0.27"
@@ -1545,8 +1527,6 @@
       "version": "10.0.31",
       "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.31.tgz",
       "integrity": "sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@babel/runtime": "^7.5.5",
         "@emotion/is-prop-valid": "0.8.8",
@@ -1557,30 +1537,22 @@
     "@emotion/stylis": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
     },
     "@emotion/unitless": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
     "@emotion/utils": {
       "version": "0.11.3",
       "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
     },
     "@emotion/weak-memoize": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
-      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
     "@fortawesome/fontawesome-common-types": {
       "version": "0.2.29",
@@ -3645,8 +3617,6 @@
       "version": "10.0.29",
       "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.29.tgz",
       "integrity": "sha512-7Jpi1OCxjyz0k163lKtqP+LHMg5z3S6A7vMBfHnF06l2unmtsOmFDzZBpGf0CWo1G4m8UACfVcDJiSiRuu/cSw==",
-      "dev": true,
-      "optional": true,
       "requires": {
         "@babel/helper-module-imports": "^7.0.0",
         "@emotion/hash": "0.8.0",
@@ -3663,9 +3633,7 @@
         "@emotion/hash": {
           "version": "0.8.0",
           "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-          "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
-          "dev": true,
-          "optional": true
+          "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
         }
       }
     },
@@ -3807,9 +3775,7 @@
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
-      "dev": true,
-      "optional": true
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
     },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
@@ -7609,9 +7575,7 @@
     "find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
-      "dev": true,
-      "optional": true
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
     },
     "find-up": {
       "version": "2.1.0",
diff --git a/package.json b/package.json
index 95ae76d9..048fdc4a 100755
--- a/package.json
+++ b/package.json
@@ -30,6 +30,8 @@
   "dependencies": {
     "@date-io/core": "^2.5.0",
     "@date-io/moment": "^1.3.13",
+    "@emotion/core": "^10.0.28",
+    "@emotion/styled": "^10.0.27",
     "@fortawesome/fontawesome-svg-core": "^1.2.29",
     "@fortawesome/free-brands-svg-icons": "^5.13.1",
     "@fortawesome/free-regular-svg-icons": "^5.13.1",
diff --git a/src/views/pages/HomeView/Events.js b/src/views/pages/HomeView/Events.js
index dc52cb96..b1decf98 100755
--- a/src/views/pages/HomeView/Events.js
+++ b/src/views/pages/HomeView/Events.js
@@ -38,10 +38,10 @@ const useStyles = makeStyles((theme) => ({
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
-    position: 'relative',
+    position: 'relative'
   },
   cardMedia: {
-    paddingTop: '55.75%', // set 61.25% for 16:9 or highresolution images--- currently set to 55.75% to fit hqquality images.
+    paddingTop: '55.75%' // 16:9
   },
   cardContent: {
     flexGrow: 1
@@ -87,7 +87,7 @@ const useStyles = makeStyles((theme) => ({
     borderRadius: '0px 5px 5px 0px',
     color: 'black',
     backgroundColor: '#00FF75'
-  },
+  }
 }));
 
 function Events({ className, ...rest }) {
@@ -113,22 +113,21 @@ function Events({ className, ...rest }) {
               md={4}
             >
               <Card className={classes.card}>
-                {
-                  event.date_time ? (
-                    <div className={classes.eventdate}>
-                      <Typography
-                        variant="caption"
-                        style={{
-                          padding: '0px 12px',
-                          fontWeight: 500
-                        }}
-                      >
-                        {event.date_time}
-                      </Typography>
-                    </div>
-                  )
-                    : <></>
-                }
+                {event.date_time ? (
+                  <div className={classes.eventdate}>
+                    <Typography
+                      variant="caption"
+                      style={{
+                        padding: '0px 12px',
+                        fontWeight: 500
+                      }}
+                    >
+                      {event.date_time}
+                    </Typography>
+                  </div>
+                ) : (
+                  <></>
+                )}
                 <CardMedia
                   className={classes.cardMedia}
                   image={event.img}
diff --git a/src/views/pages/HomeView/HomeViewData.js b/src/views/pages/HomeView/HomeViewData.js
index 56233e10..bc3aecac 100644
--- a/src/views/pages/HomeView/HomeViewData.js
+++ b/src/views/pages/HomeView/HomeViewData.js
@@ -149,7 +149,39 @@ export const openSourceContent = {
   ]
 };
 
-export const whatWeStandForDescription = ' We aim to provide a real world practical learning experience and'
-  + 'keep students informed about the latest trends in technology,'
-  + 'open-source and opportunities, so that they can keep up with the'
-  + 'fast-paced digital world by following a pi-shaped learning pattern.';
+export const whatWeStandForDescription =
+  ' We aim to provide a real world practical learning experience and' +
+  'keep students informed about the latest trends in technology,' +
+  'open-source and opportunities, so that they can keep up with the' +
+  'fast-paced digital world by following a pi-shaped learning pattern.';
+
+export const students = [
+  {
+    id: 1,
+    msg: 'Thank you for the great ML webinars this is just a small gesture :)',
+    img: '/static/images.icons/os3.svg',
+    name: 'Sarthak',
+    subName: 'Dell'
+  },
+  {
+    id: 2,
+    msg: 'CFC Testimonial msg 2',
+    img: '/static/images.icons/os3.svg',
+    name: 'Name2',
+    subName: 'Dell'
+  },
+  {
+    id: 3,
+    msg: 'CFC Testimonial msg 3',
+    img: '/static/images.icons/os3.svg',
+    name: 'Name3',
+    subName: 'Dell'
+  },
+  {
+    id: 4,
+    msg: 'CFC Testimonial msg 4',
+    img: '/static/images.icons/os3.svg',
+    name: 'Name4',
+    subName: 'Dell'
+  }
+];
diff --git a/src/views/pages/HomeView/Testimonials/TestimonialCard.js b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
new file mode 100644
index 00000000..4db34627
--- /dev/null
+++ b/src/views/pages/HomeView/Testimonials/TestimonialCard.js
@@ -0,0 +1,100 @@
+//eslint-disable-next-line
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Avatar from '@material-ui/core/Avatar';
+import Box from '@material-ui/core/Box';
+import FormatQuoteIcon from '@material-ui/icons/FormatQuote';
+
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+import styled from '@emotion/styled';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    padding: '130px 0px',
+    '& > *': {
+      margin: theme.spacing(1),
+      width: theme.spacing(16),
+      height: theme.spacing(16)
+    }
+  },
+  small: {
+    width: theme.spacing(3),
+    height: theme.spacing(3)
+  }
+}));
+
+function TestimonialCard({ student }) {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Box style={{ margin: '20px 10px'}}>
+        <Message>
+          <FormatQuoteIcon
+            fontSize="large"
+            style={{ margin: '0px 115px', color: 'purple' }}
+          />
+          <Typography variant="h3" align="center" style={{ fontSize: '20px' }}>
+            {student.msg}
+          </Typography>
+        </Message>
+        <Box style={{ margin: '2.3rem 8.2rem' }}>
+          <Avatar
+            alt={student.name}
+            src="./quote.png"
+            className={classes.large}
+          />
+
+          <Typography
+            variant="h5"
+            align="center"
+            style={{ margin: '10px -5px' }}
+          >
+            {student.name}
+          </Typography>
+          <Typography
+            variant="h7"
+            align="center"
+            style={{ margin: '10px' }}
+          >
+            {student.subName}
+          </Typography>
+        </Box>
+      </Box>
+    </div>
+  );
+}
+
+const Message = styled.div`
+  position: relative;
+  height: 200px;
+  width: 300px;
+  max-width: 400px;
+  background: white;
+
+  padding: 40px 20px;
+  box-sizing: box-order;
+  &:after {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-top: 0px solid black;
+   
+    top: 100%;
+    left: 50%;
+    margin-left: -10px;
+    content: '';
+    transform: rotate(45deg);
+    margin-top: -10px;
+    background: white;
+  }
+  &:hover {
+    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2);
+  }
+`;
+
+export default TestimonialCard;
diff --git a/src/views/pages/HomeView/Testimonials/index.js b/src/views/pages/HomeView/Testimonials/index.js
new file mode 100644
index 00000000..65a92819
--- /dev/null
+++ b/src/views/pages/HomeView/Testimonials/index.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container, Grid, Typography, makeStyles } from '@material-ui/core';
+
+import TestimonialCard from './TestimonialCard';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    flexGrow: 1,
+    backgroundColor: 'white',
+    paddingLeft: 70,
+    paddingRight: 70,
+    paddingTop: 100,
+    paddingBottom: 170,
+    [theme.breakpoints.down('xs')]: {
+      paddingLeft: 15,
+      paddingRight: 15
+    }
+  }
+}));
+const Testimonials = ({ students }) => {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <Container maxWidth="lg">
+        <Typography variant="h4" align="center" style={{ color: '#A60000' }}>
+          Testimonials
+        </Typography>
+        <Typography
+          style={{ marginTop: '10px' }}
+          variant="h2"
+          align="center"
+          gutterBottom
+          color="textPrimary"
+        >
+          What do our Mentees Say About Us
+        </Typography>
+        <Grid container spacing={2} component="div">
+          {students.map((student, i) => (
+            <Grid item key={i} md={3} sm={6} xs={12}>
+              <TestimonialCard student={student} />
+            </Grid>
+          ))}
+        </Grid>
+      </Container>
+    </div>
+  );
+};
+
+Testimonials.propTypes = {
+  students: PropTypes.array.isRequired
+};
+
+export default Testimonials;
diff --git a/src/views/pages/HomeView/index.js b/src/views/pages/HomeView/index.js
index a273e20b..83898f63 100755
--- a/src/views/pages/HomeView/index.js
+++ b/src/views/pages/HomeView/index.js
@@ -10,7 +10,9 @@ import Team from './Team';
 import Promoters from './Promoters';
 import MentorExperience from './MentorExperience';
 import WatchOurVideoView from './WatchVideos';
-import { experience, mentors } from './HomeViewData';
+import { experience, students, mentors } from './HomeViewData';
+
+import Testimonials from './Testimonials/index';
 
 const useStyles = makeStyles(() => ({
   root: {}
@@ -26,6 +28,7 @@ function HomeView() {
       <Events id="events" />
       <MentorExperience experience={experience} />
       <StandForSection id="about" />
+      <Testimonials students={students} />
       <Team id="team" mentors={mentors} />
       <WatchOurVideoView />
       <CTA id="actions" />