diff --git a/package-lock.json b/package-lock.json
old mode 100755
new mode 100644
index a187f332..ec768c22
--- a/package-lock.json
+++ b/package-lock.json
@@ -2608,6 +2608,21 @@
       "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.5.0.tgz",
       "integrity": "sha512-GifWlc0hyLdYwivltV8KVwE+OOVgYoHF4DvvKn6VOA73iVvqxbXXeL18PVFjMw8r0JUHmuhP6S+4TD8INBzXZA=="
     },
+    "@date-io/date-fns": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-1.3.13.tgz",
+      "integrity": "sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==",
+      "requires": {
+        "@date-io/core": "^1.3.13"
+      },
+      "dependencies": {
+        "@date-io/core": {
+          "version": "1.3.13",
+          "resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
+          "integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
+        }
+      }
+    },
     "@date-io/moment": {
       "version": "1.3.13",
       "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-1.3.13.tgz",
@@ -7503,6 +7518,11 @@
       "resolved": "https://registry.npmjs.org/date-arithmetic/-/date-arithmetic-4.1.0.tgz",
       "integrity": "sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg=="
     },
+    "date-fns": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz",
+      "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ=="
+    },
     "debug": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
diff --git a/package.json b/package.json
index a13dda67..081cb434 100755
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@date-io/core": "^2.5.0",
+    "@date-io/date-fns": "^1.3.13",
     "@date-io/moment": "^1.3.13",
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
@@ -61,6 +62,7 @@
     "change-case": "^4.1.1",
     "chart.js": "^2.9.3",
     "clsx": "^1.1.0",
+    "date-fns": "^2.16.1",
     "draft-js": "^0.11.7",
     "firebase": "^7.21.1",
     "formik": "^2.1.4",
diff --git a/public/static/images/backs/course.png b/public/static/images/backs/course.png
new file mode 100644
index 00000000..5a81d065
Binary files /dev/null and b/public/static/images/backs/course.png differ
diff --git a/public/static/images/backs/ws.png b/public/static/images/backs/ws.png
new file mode 100644
index 00000000..062c337c
Binary files /dev/null and b/public/static/images/backs/ws.png differ
diff --git a/src/Routes.js b/src/Routes.js
index 50a17a58..bcea6441 100755
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -16,6 +16,7 @@ import Error404View from 'src/views/pages/Error404View';
 import StudentDashboardView from 'src/views/pages/StudentDashboardView';
 import EditProfileView from 'src/views/pages/StudentDashboardView/EditProfile';
 import CoursePage from 'src/views/pages/Course/CoursePage';
+import WorkshopView from 'src/views/pages/WorkshopView';
 import TermsView from './views/pages/documents/termsView';
 import DocsLayout from './layouts/DocsLayout';
 import PrivacyView from './views/pages/documents/privacyView';
@@ -156,6 +157,16 @@ const renderRoutes = () => (
         )}
       />
 
+      <Route
+        path="/workshops"
+        exact
+        render={props => (
+          <MainLayout>
+            <WorkshopView {...props} />
+          </MainLayout>
+        )}
+      />
+
       <Route
         path={`/machine-learning-using-python`}
         exact
diff --git a/src/views/pages/CoursesView/CTA.js b/src/components/CTA/CTA.js
similarity index 99%
rename from src/views/pages/CoursesView/CTA.js
rename to src/components/CTA/CTA.js
index 3ef99d12..15964d2b 100755
--- a/src/views/pages/CoursesView/CTA.js
+++ b/src/components/CTA/CTA.js
@@ -97,7 +97,7 @@ function CTA({ className, ...rest }) {
                     <Button
                       className={classes.Button + ' ' + classes.primeBtn}
                       component="a"
-                      href="https://codecau.se/ws"
+                      href="/workshops"
                       target="_blank"
                       size="large"
                       variant="contained"
diff --git a/src/views/pages/Course/partials/Projects.js b/src/components/SidePanel/Projects.js
similarity index 94%
rename from src/views/pages/Course/partials/Projects.js
rename to src/components/SidePanel/Projects.js
index ae35beed..2b3bec34 100755
--- a/src/views/pages/Course/partials/Projects.js
+++ b/src/components/SidePanel/Projects.js
@@ -15,7 +15,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-function Projects({ projects, flat }) {
+function Projects({ title, projects, flat }) {
   const classes = useStyles();
 
   return (
@@ -39,7 +39,7 @@ function Projects({ projects, flat }) {
               margin: '12px 0px 12px 8px'
             }}
           >
-            Projects you'll make in this course
+            {title}
           </Typography>
           {projects.map((project, index) => {
             return <Project project={project} />;
diff --git a/src/constants/index.js b/src/constants/index.js
index c5951164..eb88c513 100755
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -9,4 +9,4 @@ export const horizontalGradient =
   'linear-gradient(270.72deg, #180255 0.25%, #000000 97.54%)';
 
 export const verticalGradient =
-  'linear-gradient(180.72deg, #180255 0.25%, #000000 97.54%)';
+  'linear-gradient(180.72deg, #180255 0.25%, #000000 85.54%)';
diff --git a/src/views/pages/CLView/CTA.js b/src/views/pages/CLView/CTA.js
index 3da9c578..63382a99 100755
--- a/src/views/pages/CLView/CTA.js
+++ b/src/views/pages/CLView/CTA.js
@@ -145,6 +145,7 @@ function CTA({ className, ...rest }) {
                       target="_blank"
                       size="large"
                       variant="outlined"
+                      focusRipple={false}
                     >
                       Submit Request
                     </Button>
@@ -203,10 +204,11 @@ function CTA({ className, ...rest }) {
                     <Button
                       className={classes.Button + ' ' + classes.secondaryBtn}
                       component="a"
-                      href="https://codecau.se/ws"
+                      href="/workshops"
                       target="_blank"
                       size="large"
                       variant="outlined"
+                      focusRipple={false}
                     >
                       Submit Request
                     </Button>
diff --git a/src/views/pages/Course/Major.js b/src/views/pages/Course/Major.js
index 7bafd8cd..ed4a2278 100644
--- a/src/views/pages/Course/Major.js
+++ b/src/views/pages/Course/Major.js
@@ -4,7 +4,7 @@ import { Grid, Box, Hidden } from '@material-ui/core';
 import Details from './partials/Details';
 import Overview from './partials/Overview';
 import Topics from './partials/Topics';
-import Projects from './partials/Projects';
+import Projects from '../../../components/SidePanel/Projects';
 
 const useStyles = makeStyles(theme => ({
   icon: {
@@ -106,7 +106,10 @@ export default function Major({ course }) {
 
         <Hidden smDown>
           <Box display="flex" flexDirection="column" mb={3} ml={2}>
-            <Projects projects={course.projects} />
+            <Projects
+              title="Projects you'll make in this course"
+              projects={course.projects}
+            />
           </Box>
         </Hidden>
       </Box>
diff --git a/src/views/pages/CoursesView/index.js b/src/views/pages/CoursesView/index.js
index 143cdb99..459d79a5 100755
--- a/src/views/pages/CoursesView/index.js
+++ b/src/views/pages/CoursesView/index.js
@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core';
 import Page from 'src/components/Page';
 import Hero from './Hero';
 import Footer from '../common/Footer';
-import CTA from './CTA';
+import CTA from '../../../components/CTA/CTA';
 import Courses from './Courses';
 import Apply from '../common/Apply';
 
diff --git a/src/views/pages/EventsView/CTA.js b/src/views/pages/EventsView/CTA.js
deleted file mode 100755
index 3ef99d12..00000000
--- a/src/views/pages/EventsView/CTA.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-
-import {
-  Box,
-  Grid,
-  Container,
-  Typography,
-  makeStyles,
-  Button,
-  Hidden
-} from '@material-ui/core';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    backgroundColor: theme.palette.background.LIGHT,
-    paddingLeft: 70,
-    paddingRight: 70,
-    //write css for small screen
-    [theme.breakpoints.down('md')]: {
-      paddingLeft: 15,
-      paddingRight: 15
-    }
-  },
-  cardGrid: {
-    paddingTop: theme.spacing(4),
-    paddingBottom: theme.spacing(8)
-  },
-  extraMargin: {
-    marginTop: theme.spacing(6)
-  },
-  extraMarginTop: {
-    marginTop: theme.spacing(2)
-  },
-  extraPadding: {
-    padding: '32px !important'
-  },
-  flex: {
-    paddingTop: theme.spacing(4),
-    paddingBottom: theme.spacing(4)
-  },
-  Button: {
-    textTransform: 'capitalize',
-    fontSize: '16px',
-    padding: '8px 32px',
-    [theme.breakpoints.down('sm')]: {
-      width: '100%'
-    }
-  },
-  primeBtn: {
-    backgroundColor: '#A60000',
-    color: '#ffffff',
-    '&:hover': {
-      backgroundColor: '#A60000',
-      opacity: '0.8'
-    }
-  },
-  secondaryBtn: {
-    borderColor: '#A60000',
-    color: '#A60000'
-  }
-}));
-
-function CTA({ className, ...rest }) {
-  const classes = useStyles();
-
-  return (
-    <div className={clsx(classes.root, className)} {...rest}>
-      <Container className={classes.cardGrid} maxWidth="lg">
-        <Grid container spacing={2} className={classes.extraMargin}>
-          <Grid item xs={12} sm={6} md={4}>
-            <Box className={classes.flex} display="flex" flexDirection="column">
-              <Hidden mdUp>
-                <Typography
-                  color="textPrimary"
-                  variant="h4"
-                  style={{ lineHeight: '1.5' }}
-                >
-                  Want Us to conduct a Workshop
-                </Typography>
-              </Hidden>
-
-              <Hidden smDown>
-                <Typography
-                  color="textPrimary"
-                  variant="h4"
-                  style={{ lineHeight: '1.5' }}
-                >
-                  Want Us to conduct a <br /> Workshop
-                </Typography>
-              </Hidden>
-
-              <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
-                  <Grid item xs={12} sm={12}>
-                    <Button
-                      className={classes.Button + ' ' + classes.primeBtn}
-                      component="a"
-                      href="https://codecau.se/ws"
-                      target="_blank"
-                      size="large"
-                      variant="contained"
-                    >
-                      Register
-                    </Button>
-                  </Grid>
-                </Grid>
-              </Box>
-            </Box>
-          </Grid>
-
-          <Grid item xs={12} sm={6} md={4}>
-            <Box className={classes.flex} display="flex" flexDirection="column">
-              <Hidden mdUp>
-                <Typography
-                  color="textPrimary"
-                  variant="h4"
-                  style={{ lineHeight: '1.5' }}
-                >
-                  Join Us or Submit a YouTube Video
-                </Typography>
-              </Hidden>
-
-              <Hidden smDown>
-                <Typography
-                  color="textPrimary"
-                  variant="h4"
-                  style={{ lineHeight: '1.5' }}
-                >
-                  Join Us or Submit a <br /> YouTube Video
-                </Typography>
-              </Hidden>
-
-              <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
-                  <Grid item xs={12} sm={12}>
-                    <Button
-                      className={classes.Button + ' ' + classes.secondaryBtn}
-                      component="a"
-                      href="https://codecau.se/sv"
-                      target="_blank"
-                      size="large"
-                      variant="outlined"
-                    >
-                      Know More
-                    </Button>
-                  </Grid>
-                </Grid>
-              </Box>
-            </Box>
-          </Grid>
-
-          <Grid item xs={12} sm={12} md={4}>
-            <Box className={classes.flex} display="flex" flexDirection="column">
-              <Hidden mdUp>
-                <Typography
-                  color="textPrimary"
-                  variant="h4"
-                  style={{ lineHeight: '1.5' }}
-                >
-                  Get Updates About Our Initiatives
-                </Typography>
-              </Hidden>
-
-              <Hidden smDown>
-                <Typography
-                  color="textPrimary"
-                  variant="h4"
-                  style={{ lineHeight: '1.5' }}
-                >
-                  Get Updates About Our <br /> Initiatives
-                </Typography>
-              </Hidden>
-
-              <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
-                  <Grid item xs={12} sm={12}>
-                    <Button
-                      className={classes.Button + ' ' + classes.secondaryBtn}
-                      component="a"
-                      href="https://cdn.forms-content.sg-form.com/34a5f5b6-c515-11ea-ae40-26ea0c9b1f0c"
-                      target="_blank"
-                      size="large"
-                      variant="outlined"
-                    >
-                      Enroll Now
-                    </Button>
-                  </Grid>
-                </Grid>
-              </Box>
-            </Box>
-          </Grid>
-        </Grid>
-      </Container>
-    </div>
-  );
-}
-
-CTA.propTypes = {
-  className: PropTypes.string
-};
-
-export default CTA;
diff --git a/src/views/pages/EventsView/index.js b/src/views/pages/EventsView/index.js
index 13bc7d79..41c40c9b 100755
--- a/src/views/pages/EventsView/index.js
+++ b/src/views/pages/EventsView/index.js
@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core';
 import Page from 'src/components/Page';
 import Hero from './Hero';
 import Footer from '../common/Footer';
-import CTA from './CTA';
+import CTA from '../../../components/CTA/CTA';
 import Events from './Events';
 import Apply from '../common/Apply';
 
diff --git a/src/views/pages/HomeView/CTA.js b/src/views/pages/HomeView/CTA.js
deleted file mode 100755
index 3ef99d12..00000000
--- a/src/views/pages/HomeView/CTA.js
+++ /dev/null
@@ -1,204 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-
-import {
-  Box,
-  Grid,
-  Container,
-  Typography,
-  makeStyles,
-  Button,
-  Hidden
-} from '@material-ui/core';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    backgroundColor: theme.palette.background.LIGHT,
-    paddingLeft: 70,
-    paddingRight: 70,
-    //write css for small screen
-    [theme.breakpoints.down('md')]: {
-      paddingLeft: 15,
-      paddingRight: 15
-    }
-  },
-  cardGrid: {
-    paddingTop: theme.spacing(4),
-    paddingBottom: theme.spacing(8)
-  },
-  extraMargin: {
-    marginTop: theme.spacing(6)
-  },
-  extraMarginTop: {
-    marginTop: theme.spacing(2)
-  },
-  extraPadding: {
-    padding: '32px !important'
-  },
-  flex: {
-    paddingTop: theme.spacing(4),
-    paddingBottom: theme.spacing(4)
-  },
-  Button: {
-    textTransform: 'capitalize',
-    fontSize: '16px',
-    padding: '8px 32px',
-    [theme.breakpoints.down('sm')]: {
-      width: '100%'
-    }
-  },
-  primeBtn: {
-    backgroundColor: '#A60000',
-    color: '#ffffff',
-    '&:hover': {
-      backgroundColor: '#A60000',
-      opacity: '0.8'
-    }
-  },
-  secondaryBtn: {
-    borderColor: '#A60000',
-    color: '#A60000'
-  }
-}));
-
-function CTA({ className, ...rest }) {
-  const classes = useStyles();
-
-  return (
-    <div className={clsx(classes.root, className)} {...rest}>
-      <Container className={classes.cardGrid} maxWidth="lg">
-        <Grid container spacing={2} className={classes.extraMargin}>
-          <Grid item xs={12} sm={6} md={4}>
-            <Box className={classes.flex} display="flex" flexDirection="column">
-              <Hidden mdUp>
-                <Typography
-                  color="textPrimary"
-                  variant="h4"
-                  style={{ lineHeight: '1.5' }}
-                >
-                  Want Us to conduct a Workshop
-                </Typography>
-              </Hidden>
-
-              <Hidden smDown>
-                <Typography
-                  color="textPrimary"
-                  variant="h4"
-                  style={{ lineHeight: '1.5' }}
-                >
-                  Want Us to conduct a <br /> Workshop
-                </Typography>
-              </Hidden>
-
-              <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
-                  <Grid item xs={12} sm={12}>
-                    <Button
-                      className={classes.Button + ' ' + classes.primeBtn}
-                      component="a"
-                      href="https://codecau.se/ws"
-                      target="_blank"
-                      size="large"
-                      variant="contained"
-                    >
-                      Register
-                    </Button>
-                  </Grid>
-                </Grid>
-              </Box>
-            </Box>
-          </Grid>
-
-          <Grid item xs={12} sm={6} md={4}>
-            <Box className={classes.flex} display="flex" flexDirection="column">
-              <Hidden mdUp>
-                <Typography
-                  color="textPrimary"
-                  variant="h4"
-                  style={{ lineHeight: '1.5' }}
-                >
-                  Join Us or Submit a YouTube Video
-                </Typography>
-              </Hidden>
-
-              <Hidden smDown>
-                <Typography
-                  color="textPrimary"
-                  variant="h4"
-                  style={{ lineHeight: '1.5' }}
-                >
-                  Join Us or Submit a <br /> YouTube Video
-                </Typography>
-              </Hidden>
-
-              <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
-                  <Grid item xs={12} sm={12}>
-                    <Button
-                      className={classes.Button + ' ' + classes.secondaryBtn}
-                      component="a"
-                      href="https://codecau.se/sv"
-                      target="_blank"
-                      size="large"
-                      variant="outlined"
-                    >
-                      Know More
-                    </Button>
-                  </Grid>
-                </Grid>
-              </Box>
-            </Box>
-          </Grid>
-
-          <Grid item xs={12} sm={12} md={4}>
-            <Box className={classes.flex} display="flex" flexDirection="column">
-              <Hidden mdUp>
-                <Typography
-                  color="textPrimary"
-                  variant="h4"
-                  style={{ lineHeight: '1.5' }}
-                >
-                  Get Updates About Our Initiatives
-                </Typography>
-              </Hidden>
-
-              <Hidden smDown>
-                <Typography
-                  color="textPrimary"
-                  variant="h4"
-                  style={{ lineHeight: '1.5' }}
-                >
-                  Get Updates About Our <br /> Initiatives
-                </Typography>
-              </Hidden>
-
-              <Box className={classes.flex}>
-                <Grid container xs={12} sm={12}>
-                  <Grid item xs={12} sm={12}>
-                    <Button
-                      className={classes.Button + ' ' + classes.secondaryBtn}
-                      component="a"
-                      href="https://cdn.forms-content.sg-form.com/34a5f5b6-c515-11ea-ae40-26ea0c9b1f0c"
-                      target="_blank"
-                      size="large"
-                      variant="outlined"
-                    >
-                      Enroll Now
-                    </Button>
-                  </Grid>
-                </Grid>
-              </Box>
-            </Box>
-          </Grid>
-        </Grid>
-      </Container>
-    </div>
-  );
-}
-
-CTA.propTypes = {
-  className: PropTypes.string
-};
-
-export default CTA;
diff --git a/src/views/pages/HomeView/index.js b/src/views/pages/HomeView/index.js
index 6f6e2d18..fad2e313 100755
--- a/src/views/pages/HomeView/index.js
+++ b/src/views/pages/HomeView/index.js
@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core';
 import Page from 'src/components/Page';
 import Hero from './Hero';
 import Events from './Events';
-import CTA from './CTA';
+import CTA from '../../../components/CTA/CTA';
 import Footer from '../common/Footer';
 import StandForSection from './AboutUs/AboutUsView/StandForView';
 import Team from './AboutUs/OurTeam/Team';
diff --git a/src/views/pages/WorkshopView/AboutWorkshops.js b/src/views/pages/WorkshopView/AboutWorkshops.js
new file mode 100644
index 00000000..2c31257c
--- /dev/null
+++ b/src/views/pages/WorkshopView/AboutWorkshops.js
@@ -0,0 +1,126 @@
+import { Divider, Grid, makeStyles, Typography } from '@material-ui/core';
+import React from 'react';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: '80%',
+    margin: 'auto',
+    [theme.breakpoints.down('sm')]: {
+      width: '90%'
+    }
+  },
+  mainHeading: {
+    padding: '150px 0px 80px'
+  },
+  desc: {
+    fontStyle: 'italic',
+    fontWeight: 500,
+    paddingBottom: '20px'
+  },
+  stats: {},
+  divider: {
+    backgroundColor: '#D4D4D4',
+    padding: '0px 1px',
+    height: 'auto',
+    width: 'auto',
+    border: '0.5px  #525252'
+  },
+  aboutText: {
+    color: '#747474',
+    paddingBottom: '10px'
+  },
+  extraPadding: {
+    padding: '0px 0px 20px',
+    [theme.breakpoints.down('sm')]: {
+      margin: 'auto',
+      padding: '40px 0px'
+    }
+  }
+}));
+
+export default function AboutWorkshops() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Typography className={classes.mainHeading} variant="h2" align="center">
+        About Wokshops
+      </Typography>
+      <Grid container xs={12} justify="space-between">
+        <Grid className={classes.stats} container item md={3}>
+          <Grid item xs={4}>
+            <Typography variant="h4">120+</Typography>
+          </Grid>
+          <Grid item xs={6}>
+            <Typography className={classes.desc}>Workshops</Typography>
+          </Grid>
+          <Grid item xs={4}>
+            <Typography variant="h4">30+</Typography>
+          </Grid>
+          <Grid item xs={6}>
+            <Typography className={classes.desc}>Topics</Typography>
+          </Grid>
+          <Grid item xs={4}>
+            <Typography variant="h4">25+</Typography>
+          </Grid>
+          <Grid item xs={6}>
+            <Typography className={classes.desc}>Speakers</Typography>
+          </Grid>
+          <Grid item xs={4}>
+            <Typography variant="h4">15000+</Typography>
+          </Grid>
+          <Grid item xs={6}>
+            <Typography className={classes.desc}>participants</Typography>
+          </Grid>
+        </Grid>
+        <Divider
+          className={classes.divider}
+          variant="fullWidth"
+          orientation="vertical"
+        />
+        <Grid container item md={7}>
+          <Typography
+            align="center"
+            className={classes.extraPadding}
+            variant="h4"
+          >
+            Workshops are About...
+          </Typography>
+          <ABoutText
+            left="How To Learn Technology?"
+            right="AR/VR Technology"
+          />
+          <ABoutText left="Machine Learning" right="Physics Simulators" />
+          <ABoutText
+            left="Data Structures And Algorithms"
+            right="OPen Source and Communities"
+          />
+          <ABoutText left="Placements and Targets" right="Fronend & Backend Development" />
+          <ABoutText left="Game Development" right="Devops and Kubernetes" />
+          <ABoutText left="Real Life Strategies" right="Google Cloud and AWS" />
+        </Grid>
+      </Grid>
+
+      <Divider
+        className={classes.divider}
+        variant="fullWidth"
+        style={{ margin: '80px 0px', padding: '0.5px' }}
+      />
+    </div>
+  );
+}
+
+function ABoutText({ left, right }) {
+  const classes = useStyles();
+
+  return (
+    <Grid container item justify="space-evenly">
+      <Grid className={classes.aboutText} sm={6} xs={12}>
+        <Typography variant="body2">{left}</Typography>
+      </Grid>
+      <Grid className={classes.aboutText} sm={6} xs={12}>
+        <Typography variant="body2">{right}</Typography>
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/src/views/pages/WorkshopView/Form.js b/src/views/pages/WorkshopView/Form.js
new file mode 100644
index 00000000..342d5fd1
--- /dev/null
+++ b/src/views/pages/WorkshopView/Form.js
@@ -0,0 +1,333 @@
+import React, { useState } from 'react';
+import {
+  CircularProgress,
+  Container,
+  FormControlLabel,
+  Grid,
+  makeStyles,
+  MenuItem,
+  Paper,
+  Radio,
+  RadioGroup,
+  Typography
+} from '@material-ui/core';
+import {
+  SelectValidator,
+  TextValidator,
+  ValidatorForm
+} from 'react-material-ui-form-validator';
+import axios from 'axios';
+import {
+  KeyboardDatePicker,
+  MuiPickersUtilsProvider
+} from '@material-ui/pickers';
+import DateFnsUtils from '@date-io/date-fns';
+import ButtonComponent from 'src/components/Button/ButtonComponent';
+import { useSnackbar } from 'notistack';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    width: '65%',
+    margin: '0px auto 100px',
+    [theme.breakpoints.down('sm')]: {
+      width: '85%'
+    }
+  },
+  mainHeading: {
+    fontWeight: 700,
+    color: '#000'
+  },
+  container: {
+    padding: '10% 12%'
+  },
+  subhead: {
+    padding: '10px 0'
+  },
+  textField: {
+    marginBottom: '16px',
+    background: '#e2e2e2'
+  },
+  btn: {
+    padding: '13px'
+  },
+  submissions: {
+    padding: '10px 0',
+    width: '80px',
+    height: '50px'
+  },
+  extraPadding: {
+    padding: '20px 0px'
+  },
+  rightPadding: {
+    [theme.breakpoints.up('md')]: {
+      paddingRight: '10px'
+    }
+  },
+  leftPadding: {
+    [theme.breakpoints.up('md')]: {
+      paddingLeft: '10px'
+    }
+  }
+}));
+
+function Form({ ...rest }) {
+  const classes = useStyles();
+
+  const [formData, updateFormData] = useState({});
+  const [submitting, setSubmitting] = useState(0);
+  const [selectedDate, setSelectedDate] = useState(new Date());
+
+  const { enqueueSnackbar } = useSnackbar();
+
+  const handleDateChange = date => {
+    setSelectedDate(date);
+    updateFormData({
+      ...formData,
+      date: date
+    });
+  };
+
+  const handleChange = event => {
+    updateFormData({
+      ...formData,
+      [event.target.name]: event.target.value
+    });
+  };
+
+  const handleSubmit = e => {
+    setSubmitting(1);
+    console.log('d : ' + formData.date);
+    e.preventDefault();
+    axios({
+      method: 'post',
+      url:
+        'https://us-central1-codeforcauseorg.cloudfunctions.net/widgets/workshop',
+      data: formData
+    })
+      .then(response => {
+        setSubmitting(0);
+        enqueueSnackbar('Application Submitted Successfully');
+      })
+      .catch(error => {
+        enqueueSnackbar('Application Failed. Try again later');
+      });
+  };
+
+  const workshopTopics = [
+    'Machine Learning',
+    'Placements',
+    'Google Cloud',
+    'Social Wellbeing',
+    'Open Source',
+    'Fellowship'
+  ];
+
+  return (
+    <Paper elevation={20} className={classes.root} {...rest}>
+      <Container className={classes.container}>
+        <Typography align="center" className={classes.mainHeading} variant="h1">
+          Excited For Workshop!! Submit Request
+        </Typography>
+        <Typography
+          align="center"
+          className={classes.extraPadding}
+          variant="subtitle2"
+        >
+          We will Contact You Regarding Your Request as the request is reviewed
+          by Us
+        </Typography>
+        <Typography
+          align="center"
+          style={{ padding: '12px 0px 20px' }}
+          color="error"
+        >
+          As of now, we are only taking virtual workshops till further Notice
+        </Typography>
+        <Typography className={classes.subhead} variant="h6" color="primary">
+          Contact Information
+        </Typography>
+        <ValidatorForm onSubmit={handleSubmit}>
+          <Typography variant="caption">Name</Typography>
+          <TextValidator
+            key="name"
+            className={classes.textField}
+            variant="outlined"
+            value={formData.name}
+            fullWidth
+            name="name"
+            onChange={handleChange}
+            validators={['required']}
+            errorMessages={['This is a required field']}
+          />
+
+          <Grid container justify="space-between">
+            <Grid md={6} xs={12} className={classes.rightPadding}>
+              <Typography variant="caption">Contact Number</Typography>
+              <TextValidator
+                key="contact"
+                className={classes.textField}
+                variant="outlined"
+                value={formData.phone}
+                fullWidth
+                name="phone"
+                onChange={handleChange}
+                validators={[
+                  'required',
+                  'matchRegexp:^[+]*[(]*[+]{0,1}[0-9]{1,3}[)]{0,1}[-s./0-9]*$'
+                ]}
+                errorMessages={[
+                  'This is a required field',
+                  'Please enter a valid contact number'
+                ]}
+              />
+            </Grid>
+            <Grid md={6} xs={12} className={classes.leftPadding}>
+              <Typography variant="caption">Email</Typography>
+              <TextValidator
+                key="email"
+                className={classes.textField}
+                variant="outlined"
+                value={formData.email}
+                fullWidth
+                name="email"
+                onChange={handleChange}
+                validators={['required', 'isEmail']}
+                errorMessages={[
+                  'This is a required field',
+                  'Please enter a valid email'
+                ]}
+              />
+            </Grid>
+          </Grid>
+
+          <Typography variant="caption">College</Typography>
+          <TextValidator
+            key="college"
+            className={classes.textField}
+            variant="outlined"
+            value={formData.college}
+            fullWidth
+            name="college"
+            onChange={handleChange}
+            validators={['required']}
+            errorMessages={['This is a required field']}
+          />
+
+          <Typography variant="caption">Are you a college society</Typography>
+          <RadioGroup
+            row
+            key="isCollegeSociety"
+            name="isCollegeSociety"
+            value={formData.isCollegeSociety}
+            onChange={handleChange}
+          >
+            <FormControlLabel value="Yes" control={<Radio />} label="Yes" />
+            <FormControlLabel value="No" control={<Radio />} label="No" />
+          </RadioGroup>
+
+          <Typography variant="caption">Link to social profile</Typography>
+          <TextValidator
+            key="social"
+            className={classes.textField}
+            variant="outlined"
+            value={formData.social}
+            fullWidth
+            name="social"
+            onChange={handleChange}
+            validators={['required', 'matchRegexp:^(http(s)?://)']}
+            errorMessages={[
+              'This is a required field',
+              'Enter Correct social platform link'
+            ]}
+          />
+
+          <Typography className={classes.subhead} variant="h6" color="primary">
+            Workshop Information
+          </Typography>
+
+          <Typography variant="caption">Topic for Workshop</Typography>
+          <SelectValidator
+            key="topic"
+            name="topic"
+            className={classes.textField}
+            variant="outlined"
+            value={formData.topic}
+            fullWidth
+            onChange={handleChange}
+            validators={['required']}
+            errorMessages={['This is a required field']}
+          >
+            {workshopTopics.map(topic => {
+              return (
+                <MenuItem style={{ backgroundColor: 'white' }} value={topic}>
+                  {topic}
+                </MenuItem>
+              );
+            })}
+          </SelectValidator>
+
+          <Typography variant="caption">Referred Date For Workshop</Typography>
+          <MuiPickersUtilsProvider utils={DateFnsUtils}>
+            <KeyboardDatePicker
+              className={classes.textField}
+              disableToolbar
+              variant="standard"
+              style={{ border: '0.5px solid grey', padding: '10px' }}
+              format="MM/dd/yyyy"
+              minDate={new Date()}
+              margin="normal"
+              id="date-picker-inline"
+              fullWidth
+              autoOk
+              autoSave
+              value={selectedDate}
+              onChange={handleDateChange}
+              KeyboardButtonProps={{
+                'aria-label': 'change date'
+              }}
+            />
+          </MuiPickersUtilsProvider>
+
+          <Typography variant="caption">
+            Approximate Footfall Expected
+          </Typography>
+          <TextValidator
+            key="footfall"
+            name="footfall"
+            className={classes.textField}
+            variant="outlined"
+            value={formData.footfall}
+            fullWidth
+            onChange={handleChange}
+            validators={['required']}
+            errorMessages={['This is a required field']}
+          />
+
+          <div style={{ padding: '30px 0 15px' }}>
+            <Typography style={{ margin: 0 }} variant="caption" color="initial">
+              By continuing, you agree to the Code For Cause Terms of Use and
+              Privacy Policy
+            </Typography>
+          </div>
+
+          {submitting === 0 ? (
+            <ButtonComponent
+              className={classes.btn}
+              title="Submit Request"
+              fullWidth
+              type="submit"
+              variant="contained"
+              color="secondary"
+            />
+          ) : (
+            <div className={classes.submissions}>
+              <CircularProgress />
+            </div>
+          )}
+        </ValidatorForm>
+      </Container>
+    </Paper>
+  );
+}
+
+export default Form;
diff --git a/src/views/pages/WorkshopView/Hero.js b/src/views/pages/WorkshopView/Hero.js
new file mode 100644
index 00000000..f0c244e5
--- /dev/null
+++ b/src/views/pages/WorkshopView/Hero.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import HeroWithOneButton from '../../../components/Hero/HeroWithOneButton';
+import { verticalGradient } from '../../../constants';
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    background: verticalGradient
+  },
+  subtitle: {
+    fontWeight: 600,
+    fontStyle: 'italic'
+    // fontSize: '18px'
+  }
+}));
+
+function Hero({ className, ...rest }) {
+  const classes = useStyles();
+  return (
+    <HeroWithOneButton
+      title="A Workshop With An Experienced Tech Team"
+      subtitle="Give Your People Oppotunity to Learn New In A Practical & Innovative Way"
+      subtitleDesign={classes.subtitle}
+      className={classes.root}
+      backgroundImage="/static/images/backs/ws.png"
+    />
+  );
+}
+
+Hero.propTypes = {
+  className: PropTypes.string
+};
+
+export default Hero;
diff --git a/src/views/pages/WorkshopView/RegisterWorkshop.js b/src/views/pages/WorkshopView/RegisterWorkshop.js
new file mode 100644
index 00000000..95cf10a3
--- /dev/null
+++ b/src/views/pages/WorkshopView/RegisterWorkshop.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ButtonComponent from '../../../components/Button/ButtonComponent';
+
+function RegisterWorkshopButton({ className }) {
+  return (
+    <ButtonComponent title="Fill Form For Workshop" className={className} />
+  );
+}
+
+export default RegisterWorkshopButton;
diff --git a/src/views/pages/WorkshopView/index.js b/src/views/pages/WorkshopView/index.js
new file mode 100644
index 00000000..e4da0e39
--- /dev/null
+++ b/src/views/pages/WorkshopView/index.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import Hero from './Hero';
+import Footer from '../common/Footer';
+import { makeStyles } from '@material-ui/core';
+import Page from 'src/components/Page';
+import AboutWorkShop from './AboutWorkshops';
+import Form from './Form';
+const useStyles = makeStyles(() => ({
+  root: {}
+}));
+
+function WorkshopView() {
+  const classes = useStyles();
+
+  return (
+    <Page className={classes.root} title="Courses">
+      <Hero />
+      <AboutWorkShop />
+      <Form />
+      <Footer />
+    </Page>
+  );
+}
+
+export default WorkshopView;