diff --git a/public/static/campusLeaders/apply.png b/public/static/campusLeaders/apply.png
new file mode 100644
index 00000000..f729546a
Binary files /dev/null and b/public/static/campusLeaders/apply.png differ
diff --git a/public/static/campusLeaders/hero.png b/public/static/campusLeaders/hero.png
index b15bd1f6..59b13aac 100644
Binary files a/public/static/campusLeaders/hero.png and b/public/static/campusLeaders/hero.png differ
diff --git a/public/static/campusLeaders/standFor.png b/public/static/campusLeaders/standFor.png
index 7b450d8e..89c51dac 100644
Binary files a/public/static/campusLeaders/standFor.png and b/public/static/campusLeaders/standFor.png differ
diff --git a/src/Routes.js b/src/Routes.js
index 05ee3124..3b385445 100755
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -2,6 +2,7 @@
 import React, { lazy, Suspense, Fragment } from 'react';
 import { Switch, Redirect, Route } from 'react-router-dom';
 import MainLayout from 'src/layouts/MainLayout';
+import CLLayout from 'src/layouts/CLLayout';
 import DocsLayout from 'src/layouts/DocsLayout';
 import HomeView from 'src/views/pages/HomeView';
 import CAView from 'src/views/pages/CLView';
@@ -46,7 +47,7 @@ const routesConfig = [
   },
   {
     path: '/campusLeaders',
-    layout: MainLayout,
+    layout: CLLayout,
     routes: [
       {
         exact: true,
@@ -108,8 +109,8 @@ const renderRoutes = routes =>
                     {route.routes ? (
                       renderRoutes(route.routes)
                     ) : (
-                      <Component {...props} />
-                    )}
+                        <Component {...props} />
+                      )}
                   </Layout>
                 </Guard>
               )}
diff --git a/src/layouts/CLLayout/TopBar/OpenSource.js b/src/layouts/CLLayout/TopBar/OpenSource.js
new file mode 100644
index 00000000..dd4544df
--- /dev/null
+++ b/src/layouts/CLLayout/TopBar/OpenSource.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Typography } from '@material-ui/core';
+// import authService from 'src/services/authService';
+
+const OpenSource = () => (
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      minHeight: 64,
+      backgroundColor: '#A60000'
+    }}
+  >
+    <div
+      style={{
+        padding: '10% 10px',
+        whiteSpace: 'nowrap'
+      }}
+    >
+      <Typography variant="h6">Open Source</Typography>
+    </div>
+  </div>
+);
+
+export default OpenSource;
diff --git a/src/layouts/CLLayout/TopBar/index.js b/src/layouts/CLLayout/TopBar/index.js
new file mode 100755
index 00000000..783942b2
--- /dev/null
+++ b/src/layouts/CLLayout/TopBar/index.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import {
+  AppBar,
+  Box,
+  Hidden,
+  Toolbar,
+  makeStyles
+} from '@material-ui/core';
+import Logo from 'src/components/Logo';
+import OpenSource from './OpenSource';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    zIndex: theme.zIndex.drawer + 100,
+    backgroundColor: theme.palette.background.default,
+    paddingLeft: 70,
+    paddingRight: 70,
+    [theme.breakpoints.down('md')]: {
+      paddingLeft: 15,
+      paddingRight: 15
+    }
+  },
+  toolbar: {
+    minHeight: 64
+  },
+  menuButton: {
+    float: 'right',
+    color: '#000',
+    marginRight: '0px'
+  },
+  list: {
+    width: '100% !important',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  textStyle: {
+    textDecoration: 'none'
+  }
+}));
+
+function TopBar({ className, onMobileNavOpen, ...rest }) {
+  const classes = useStyles();
+
+  return (
+    <AppBar className={clsx(classes.root, className)} {...rest}>
+      <Toolbar className={classes.toolbar}>
+        <RouterLink to="/">
+          <Logo className={classes.logo} />
+        </RouterLink>
+        <Hidden smDown>
+          <Box ml={2} flexGrow={1} />
+          <Box ml={2} flexGrow={0.05} />
+
+          <Box ml={2}>
+            <OpenSource />
+          </Box>
+          <Box ml={2} flexGrow={0.05} />
+
+        </Hidden>
+      </Toolbar>
+    </AppBar>
+  );
+}
+
+TopBar.propTypes = {
+  className: PropTypes.string,
+  onMobileNavOpen: PropTypes.func
+};
+
+export default TopBar;
diff --git a/src/layouts/CLLayout/index.js b/src/layouts/CLLayout/index.js
new file mode 100755
index 00000000..8e7cf603
--- /dev/null
+++ b/src/layouts/CLLayout/index.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core';
+import TopBar from './TopBar';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    backgroundColor: theme.palette.background.default,
+    display: 'flex',
+    height: '100%',
+    overflow: 'hidden',
+    width: '100%'
+  },
+  wrapper: {
+    display: 'flex',
+    flex: '1 1 auto',
+    overflow: 'hidden',
+    paddingTop: 64
+  },
+  contentContainer: {
+    display: 'flex',
+    flex: '1 1 auto',
+    overflow: 'hidden'
+  },
+  content: {
+    flex: '1 1 auto',
+    height: '100%',
+    overflow: 'auto'
+  }
+}));
+
+function CLLayout({ children }) {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <TopBar />
+      <div className={classes.wrapper}>
+        <div className={classes.contentContainer}>
+          <div className={classes.content}>{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+CLLayout.propTypes = {
+  children: PropTypes.any
+};
+
+export default CLLayout;
diff --git a/src/views/pages/CLView/Apply.js b/src/views/pages/CLView/Apply.js
index 2b24cb7e..04041597 100755
--- a/src/views/pages/CLView/Apply.js
+++ b/src/views/pages/CLView/Apply.js
@@ -11,13 +11,11 @@ import {
   Hidden
 } from '@material-ui/core';
 
-const background = 'linear-gradient(270.72deg, #180255 0.25%, #000000 97.54%)';
 
 const useStyles = makeStyles(theme => ({
   root: {
     minHeight: '350px',
     color: '#FFF',
-    background,
     padding: '100px 70px',
     [theme.breakpoints.down('md')]: {
       paddingLeft: 15,
@@ -54,7 +52,7 @@ function Apply({ className, ...rest }) {
   const classes = useStyles();
 
   return (
-    <div className={clsx(classes.root, className)} {...rest}>
+    <div className={clsx(classes.root, className)} style={{ backgroundImage: 'url("/static/campusLeaders/apply.png")', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }} {...rest}>
       <Grid container maxWidth="lg">
         <Grid item lg={9} md={12} sm={12} xs={12} className={classes.applyleft}>
           <div className={classes.main}>
diff --git a/src/views/pages/CLView/CLViewData.js b/src/views/pages/CLView/CLViewData.js
index 929fb020..5e941ef4 100644
--- a/src/views/pages/CLView/CLViewData.js
+++ b/src/views/pages/CLView/CLViewData.js
@@ -21,3 +21,23 @@ export const benefits = [
     detail: 'Connect with our mentors and Industry experts linked with us.'
   }
 ];
+
+export const values = [
+  {
+    id: '1',
+    detail: 'He/she shall be entusiastic about going social and build & contribute for the community'
+  },
+  {
+    id: '2',
+    detail:
+      'A Leader shall always have a way of talking people out from problems and leading them to do that for others too'
+  },
+  {
+    id: '3',
+    detail: 'He/she should be connecting to the resources available in community that might help in building a better & more helpful community'
+  },
+  {
+    id: '4',
+    detail: 'Connect with our mentors and Industry experts linked with us.'
+  }
+];
diff --git a/src/views/pages/CLView/Hero.js b/src/views/pages/CLView/Hero.js
index 37ab8b2e..b69cd5f4 100755
--- a/src/views/pages/CLView/Hero.js
+++ b/src/views/pages/CLView/Hero.js
@@ -10,13 +10,11 @@ import {
   makeStyles
 } from '@material-ui/core';
 
-const background = 'linear-gradient(270.72deg, #180255 0.25%, #000000 97.54%)';
 
 const useStyles = makeStyles(theme => ({
   root: {
     minHeight: '350px',
     color: '#FFF',
-    background,
     padding: '100px 70px',
     [theme.breakpoints.down('md')]: {
       paddingLeft: 15,
@@ -48,7 +46,7 @@ function Hero({ className, ...rest }) {
   const classes = useStyles();
 
   return (
-    <div className={clsx(classes.root, className)} {...rest}>
+    <div className={clsx(classes.root, className)} style={{ backgroundImage: 'url("/static/campusLeaders/hero.png")', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }} {...rest}>
       <Container maxWidth="lg">
         <div className={classes.main}>
           <Typography variant="h1">Campus Leaders</Typography>
diff --git a/src/views/pages/CLView/ProcessSteppers.js b/src/views/pages/CLView/ProcessSteppers.js
index e0846c8e..3b6ad910 100644
--- a/src/views/pages/CLView/ProcessSteppers.js
+++ b/src/views/pages/CLView/ProcessSteppers.js
@@ -6,9 +6,10 @@ import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
 import Check from '@material-ui/icons/Check';
-import SettingsIcon from '@material-ui/icons/Settings';
-import GroupAddIcon from '@material-ui/icons/GroupAdd';
-import VideoLabelIcon from '@material-ui/icons/VideoLabel';
+import ListAltIcon from '@material-ui/icons/ListAlt';
+import PeopleIcon from '@material-ui/icons/People';
+import VideocamIcon from '@material-ui/icons/Videocam';
+import AssignmentTurnedInIcon from '@material-ui/icons/AssignmentTurnedIn';
 import StepConnector from '@material-ui/core/StepConnector';
 
 const useQontoStepIconStyles = makeStyles({
@@ -47,8 +48,8 @@ function QontoStepIcon(props) {
       {completed ? (
         <Check className={classes.completed} />
       ) : (
-        <div className={classes.circle} />
-      )}
+          <div className={classes.circle} />
+        )}
     </div>
   );
 }
@@ -116,10 +117,12 @@ function ColorlibStepIcon(props) {
   const { active, completed } = props;
 
   const icons = {
-    1: <SettingsIcon />,
-    2: <GroupAddIcon />,
-    3: <VideoLabelIcon />,
-    4: <VideoLabelIcon />
+    1: <ListAltIcon />,
+
+    // 1: <SettingsIcon />,
+    2: <AssignmentTurnedInIcon />,
+    3: <VideocamIcon />,
+    4: <PeopleIcon />
   };
 
   return (
diff --git a/src/views/pages/CLView/StandFor.js b/src/views/pages/CLView/StandFor.js
index c867ddb2..58ff468f 100644
--- a/src/views/pages/CLView/StandFor.js
+++ b/src/views/pages/CLView/StandFor.js
@@ -15,16 +15,16 @@ const useStyles = makeStyles(theme => ({
   root: {
     background: '#FFF',
     paddingTop: 80,
-    paddingBottom: 60,
+    paddingBottom: 80,
     paddingLeft: 70,
     paddingRight: 70,
     [theme.breakpoints.down('md')]: {
       paddingLeft: 15,
-      paddingRight: 15
+      paddingRight: 15,
     }
   },
   extraPadding: {
-    padding: '0 70px 0px 0px',
+    padding: '0 35px',
     textAlign: 'justify',
     [theme.breakpoints.down('sm')]: {
       padding: '0'
@@ -64,6 +64,12 @@ const useStyles = makeStyles(theme => ({
   listPointers: {
     fontSize: '45px',
     marginRight: '5px'
+  },
+  extraMargin: {
+    marginTop: '50px',
+    [theme.breakpoints.down('md')]: {
+      marginTop: '30px',
+    }
   }
 }));
 
@@ -82,7 +88,20 @@ function StandsFor({ className, ...rest }) {
         >
           What Does the Campus Leader Stands For
         </Typography>
-        <Grid container spacing={3} style={{ marginTop: '50px' }}>
+        <Grid container spacing={3} className={classes.extraMargin}>
+          <Hidden smDown>
+            <Grid item xs={12} md={6}>
+              <Box>
+                <div className={classes.image}>
+                  <img
+                    alt="What Does the Campus Leader Stands For"
+                    src="/static/campusLeaders/standFor.png"
+                  />
+                </div>
+              </Box>
+            </Grid>
+          </Hidden>
+
           <Grid item xs={12} md={6}>
             <Box
               display="flex"
@@ -101,27 +120,27 @@ function StandsFor({ className, ...rest }) {
                   from our campus leaders are
                 </Typography>
               </Box>
-              <Box mt={5}>
+              <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>
                 </Typography>
               </Box>
-              <Box mt={4}>
+              <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>
               </Box>
-              <Box mt={4}>
+              <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>
                 </Typography>
               </Box>
-              <Box mt={4}>
+              <Box mt={2}>
                 <Typography variant="body1">
                   Most sought after value - an effort maker and giving
                   peronality <h4>- An Investor</h4>
@@ -129,18 +148,6 @@ function StandsFor({ className, ...rest }) {
               </Box>
             </Box>
           </Grid>
-          <Hidden smDown>
-            <Grid item xs={12} md={6}>
-              <Box>
-                <div className={classes.image}>
-                  <img
-                    alt="codeforcauseimg"
-                    src="/static/campusLeaders/standFor.png"
-                  />
-                </div>
-              </Box>
-            </Grid>
-          </Hidden>
         </Grid>
       </Container>
     </div>