diff --git a/components/Layout.js b/components/Layout.js
index 3e5da52..d686256 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -1,3 +1,4 @@
+import React from "react";
 import Header from "./Header";
 import NavBar from "./NavBar";
 import VirtualTourDialog from "./VirtualTourDialog";
@@ -5,49 +6,51 @@ import VirtualTourDialog from "./VirtualTourDialog";
 import navButtons from "../configs/navButtons";
 import tourButton from "../configs/tourButton";
 
-const Layout = (props) => (
-  <div className="Layout">
-    <VirtualTourDialog tourButton={tourButton} />
-    <Header />
-    <div className="Content">{props.children}</div>
-    <NavBar navButtons={navButtons} />
-    <style jsx global>{`
-      * {
-        box-sizing: border-box;
-      }
+function Layout(props) {
+  return (
+    <div className="Layout">
+      <VirtualTourDialog tourButton={tourButton} />
+      <Header />
+      <div className="Content">{props.children}</div>
+      <NavBar navButtons={navButtons} />
+      <style jsx global>{`
+        * {
+          box-sizing: border-box;
+        }
 
-      html,
-      body,
-      #__next {
-        height: 100%;
-        width: 100%;
-      }
+        html,
+        body,
+        #__next {
+          height: 100%;
+          width: 100%;
+        }
 
-      body {
-        margin: 0;
-        padding: 0;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-          "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-          "Helvetica Neue", sans-serif;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-      }
+        body {
+          margin: 0;
+          padding: 0;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+            "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+            "Helvetica Neue", sans-serif;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+        }
 
-      .Layout {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        width: 100%;
-      }
+        .Layout {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          width: 100%;
+        }
 
-      .Content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        font-family: Arial;
-      }
-    `}</style>
-  </div>
-);
+        .Content {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          font-family: Arial;
+        }
+      `}</style>
+    </div>
+  );
+}
 
 export default Layout;
diff --git a/components/NavBar.js b/components/NavBar.js
index a101d9a..e5f3c1e 100644
--- a/components/NavBar.js
+++ b/components/NavBar.js
@@ -6,7 +6,7 @@ const NavBar = (props) => (
       <NavButton key={button.path} path={button.path} label={button.label} />
     ))}
     <style jsx>{`
-      background-color: grey;
+      background-color: red;
       color: white;
       width: 100%;
       height: 90px;
diff --git a/components/VirtualTourDialog.js b/components/VirtualTourDialog.js
index 10837f3..a925e97 100644
--- a/components/VirtualTourDialog.js
+++ b/components/VirtualTourDialog.js
@@ -21,39 +21,45 @@ const useStyles = makeStyles((theme) => ({
 
 export default function VirtualTourDialog() {
   const classes = useStyles();
+
+  const [open, setOpen] = React.useState(true);
   const [fullWidth] = React.useState(true);
   const [maxWidth] = React.useState("sm");
 
   const handleSkip = () => {
+    setOpen(false);
     console.log("Look at Me Hey. Skip is triggered");
   };
 
   return (
     <React.Fragment>
-      <Dialog
-        fullWidth={fullWidth}
-        maxWidth={maxWidth}
-        open={true}
-        aria-labelledby="virtual-tour-dialog-title"
-        onEnter={console.log("Look at Me Hey. Dialog opened")}
-      >
-        <DialogTitle id="virtual-tour-dialog-title">Take Tour?</DialogTitle>
-        <DialogContent>
-          <DialogContentText>
-            -- later is display logo and mascot{" "}
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions className={classes.setButtons}>
-          <Link href="/register-tour" passHref>
-            <Button variant="contained" color="secondary">
-              Yes!
+      {open && (
+        <Dialog
+          fullWidth={fullWidth}
+          maxWidth={maxWidth}
+          open={true}
+          aria-labelledby="virtual-tour-dialog-title"
+          onEnter={console.log("Look at Me Hey. Dialog opened")}
+        >
+          <DialogTitle id="virtual-tour-dialog-title">Take Tour?</DialogTitle>
+
+          <DialogContent>
+            <DialogContentText>
+              -- later is display logo and mascot{" "}
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions className={classes.setButtons}>
+            <Link href="/register-tour" passHref>
+              <Button variant="contained" color="secondary">
+                Yes!
+              </Button>
+            </Link>
+            <Button onClick={() => handleSkip()} color="primary">
+              Skip
             </Button>
-          </Link>
-          <Button onClick={handleSkip} color="primary">
-            Skip
-          </Button>
-        </DialogActions>
-      </Dialog>
+          </DialogActions>
+        </Dialog>
+      )}
     </React.Fragment>
   );
 }
diff --git a/package.json b/package.json
index 2d6fadb..2188a0d 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,14 @@
   },
   "dependencies": {
     "@material-ui/core": "4.11.3",
+    "@material-ui/icons": "4.11.2",
     "@material-ui/styles": "4.11.3",
+    "@material-ui/utils": "4.11.2",
     "next": "latest",
     "prop-types": "15.7.2",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "react-iframe": "1.8.0"
   },
   "license": "MIT",
   "keywords": [],
diff --git a/pages/contact-us.js b/pages/contact-us.js
index 0ec464f..287c134 100644
--- a/pages/contact-us.js
+++ b/pages/contact-us.js
@@ -1,3 +1,190 @@
+import React from "react";
+import Avatar from "@material-ui/core/Avatar";
+import Button from "@material-ui/core/Button";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import TextField from "@material-ui/core/TextField";
+import FormLabel from "@material-ui/core/FormLabel";
+import FormControl from "@material-ui/core/FormControl";
+import FormGroup from "@material-ui/core/FormGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import Checkbox from "@material-ui/core/Checkbox";
+import Link from "@material-ui/core/Link";
+import Paper from "@material-ui/core/Paper";
+import Box from "@material-ui/core/Box";
+import Grid from "@material-ui/core/Grid";
+import FlightTakeoffOutlinedIcon from "@material-ui/icons/FlightTakeoffOutlined";
+import Typography from "@material-ui/core/Typography";
+import InputLabel from "@material-ui/core/InputLabel";
+import MenuItem from "@material-ui/core/MenuItem";
+
+import Select from "@material-ui/core/Select";
+import InputBase from "@material-ui/core/InputBase";
+
+import { makeStyles, withStyles } from "@material-ui/core/styles";
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {"Copyright © "}
+      <Link color="inherit" href="~">
+        Your Website
+      </Link>{" "}
+      {new Date().getFullYear()}
+      {"."}
+    </Typography>
+  );
+}
+
+const BootstrapInput = withStyles((theme) => ({
+  root: {
+    "label + &": {
+      marginTop: theme.spacing(2)
+    }
+  },
+  input: {
+    borderRadius: 4,
+    position: "relative",
+    backgroundColor: theme.palette.background.paper,
+    border: "1px solid #ced4da",
+    fontSize: 16,
+    padding: "10px 26px 10px 12px",
+    transition: theme.transitions.create(["border-color", "box-shadow"]),
+
+    "&:focus": {
+      borderRadius: 4,
+      borderColor: "#80bdff",
+      boxShadow: "0 0 0 0.2rem rgba(0,123,255,.25)"
+    }
+  }
+}))(InputBase);
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    height: "100vh"
+  },
+  paper: {
+    margin: theme.spacing(8, 4),
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  },
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 120
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2)
+  },
+  form: {
+    width: "100%", // Fix IE 11 issue.
+    marginTop: theme.spacing(1)
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2)
+  }
+}));
+
 export default function ContactUs() {
-  return <div>Contact Us</div>;
+  const classes = useStyles();
+
+  return (
+    <Grid container component="main" className={classes.root}>
+      <CssBaseline />
+      <Grid item xs={false} sm={4} md={7} className={classes.image} />
+      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+        <div className={classes.paper}>
+          <Avatar className={classes.avatar}>
+            <FlightTakeoffOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Contact Us
+          </Typography>
+          <form className={classes.form} noValidate>
+            <TextField
+              variant="outlined"
+              required
+              fullWidth
+              name="full-name"
+              label="Full Name"
+              autoFocus
+            />
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              name="email"
+              autoComplete="email"
+            />
+            <TextField
+              variant="outlined"
+              fullWidth
+              name="contact-number"
+              label="Contact Number"
+            />
+            <FormControl className={classes.formControl}>
+              <Select
+                value={"industryType"}
+                onChange={"handleChange"}
+                displayEmpty
+                className={classes.selectEmpty}
+                inputProps={{ "aria-label": "Without label" }}
+              >
+                <MenuItem value="" disabled>
+                  Industry
+                </MenuItem>
+                <MenuItem value="Healthcare and Services">
+                  Healthcare and Services
+                </MenuItem>
+                <MenuItem value="Banking and Financial Services">
+                  Banking and Financial Services
+                </MenuItem>
+                <MenuItem value="Hospitality and Travel">
+                  Hospitality and Travel
+                </MenuItem>
+                <MenuItem value="Consumer Goods">Consumer Goods</MenuItem>
+                <MenuItem value="Modern Retail">Modern Retail</MenuItem>
+                <MenuItem value="Others">Others</MenuItem>
+              </Select>
+              <FormHelperText>Industry</FormHelperText>
+            </FormControl>
+
+            <TextField
+              variant="outlined"
+              fullWidth
+              name="company"
+              label="Company"
+            />
+            <FormControlLabel
+              control={<Checkbox value="Selected A" color="primary" />}
+              label="Gamification Check A"
+            />
+            <TextField
+              id="outlined-multiline-static"
+              label="Message"
+              multiline
+              rows={4}
+              defaultValue="Say hello to our team"
+              variant="outlined"
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              color="primary"
+              className={classes.submit}
+            >
+              Get in Touch
+            </Button>
+            <Box mt={5}>
+              <Copyright />
+            </Box>
+          </form>
+        </div>
+      </Grid>
+    </Grid>
+  );
 }
diff --git a/pages/iframe-tour.js b/pages/iframe-tour.js
new file mode 100644
index 0000000..ded6f2b
--- /dev/null
+++ b/pages/iframe-tour.js
@@ -0,0 +1,31 @@
+import React from "react";
+import Iframe from "react-iframe";
+
+const styles = {
+  textAlign: "center"
+};
+
+const article_url =
+  "https://wenzagroup.com/mahenza-assets/Mahenza%20Creative%20Logo-black.png";
+
+const IframeTour = () => (
+  <div style={styles}>
+    <h2>Testing react-iframe</h2>
+    <Iframe
+      url={article_url}
+      frameborder="0"
+      marginheight="0"
+      marginwidth="0"
+      width="100%"
+      height="100%"
+      scrolling="auto"
+      allowfullscreen="allowfullscreen"
+      mozallowfullscreen="mozallowfullscreen"
+      msallowfullscreen="msallowfullscreen"
+      oallowfullscreen="oallowfullscreen"
+      webkitallowfullscreen="webkitallowfullscreen"
+    />
+  </div>
+);
+
+export default IframeTour;
diff --git a/pages/register-tour.js b/pages/register-tour.js
index 182ea64..1d0e757 100644
--- a/pages/register-tour.js
+++ b/pages/register-tour.js
@@ -1,3 +1,198 @@
+import React from "react";
+import Link from "next/link";
+import Avatar from "@material-ui/core/Avatar";
+import Button from "@material-ui/core/Button";
+
+import Popover from "@material-ui/core/Popover";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import TextField from "@material-ui/core/TextField";
+//import Link from "@material-ui/core/Link";
+import Grid from "@material-ui/core/Grid";
+import Box from "@material-ui/core/Box";
+import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
+import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@material-ui/core/styles";
+import Container from "@material-ui/core/Container";
+import Slide from "@material-ui/core/Slide";
+
+import Paper from "@material-ui/core/Paper";
+import InputBase from "@material-ui/core/InputBase";
+import Divider from "@material-ui/core/Divider";
+import IconButton from "@material-ui/core/IconButton";
+import FiberPinOutlinedIcon from "@material-ui/icons/FiberPinOutlined";
+
+import FormHelperText from "@material-ui/core/FormHelperText";
+
+//usecase
+// 1- if user already signed up then display pop over warning
+// with login menu
+
+function SimplePopover() {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? "simple-popover" : undefined;
+
+  return (
+    <div>
+      <Button
+        aria-describedby={id}
+        variant="contained"
+        color="secondary"
+        onClick={handleClick}
+        className={classes.submit}
+        //type="submit"
+        fullWidth
+      >
+        Open Popover if user is already registered
+      </Button>
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "center"
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "center"
+        }}
+      >
+        <Typography className={classes.typography}>
+          The content of the Popover.
+        </Typography>
+      </Popover>
+    </div>
+  );
+}
+
+function Copyright() {
+  return (
+    <Typography variant="body1" color="textSecondary" align="center">
+      {"Copyright © "}
+      <Link color="inherit" href="#">
+        Your Website
+      </Link>{" "}
+      {new Date().getFullYear()}
+      {"."}
+    </Typography>
+  );
+}
+
+function ResendOTP() {
+  return (
+    <FormHelperText>
+      Click here to
+      <Link href="#"> resend OTP</Link>
+    </FormHelperText>
+  );
+}
+
+function CustomizedInputBase() {
+  const classes = useStyles();
+
+  return (
+    <Paper component="form" className={classes.root}>
+      <IconButton className={classes.iconButton} aria-label="menu">
+        <FiberPinOutlinedIcon />
+      </IconButton>
+      <InputBase className={classes.input} placeholder="Input OTP" />
+
+      <Divider className={classes.divider} orientation="vertical" />
+    </Paper>
+  );
+}
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    marginTop: theme.spacing(8),
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  },
+  avatar: {
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.secondary.main
+  },
+  form: {
+    width: "100%", // Fix IE 11 issue.
+    marginTop: theme.spacing(3)
+  },
+  typography: {
+    padding: theme.spacing(2)
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2)
+  }
+}));
+
 export default function RegisterTour() {
-  return <div>Register Tour</div>;
+  const classes = useStyles();
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <CssBaseline />
+      <div className={classes.paper}>
+        <Avatar className={classes.avatar}>
+          <LockOutlinedIcon />
+        </Avatar>
+        <Typography variant="h4">Virtual Tour</Typography>
+        <Typography variant="subtitle1" align="center">
+          Earn free poin and redeem after completing virtual tour
+        </Typography>
+        <Slide direction="up" in={true} mountOnEnter unmountOnExit>
+          <form className={classes.form} noValidate>
+            <Grid container spacing={2}>
+              <Grid item xs={12}>
+                <TextField
+                  variant="outlined"
+                  required
+                  fullWidth
+                  name="full-name"
+                  label="Full Name"
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  variant="outlined"
+                  required
+                  fullWidth
+                  name="mobile-number"
+                  label="Mobile Number"
+                />
+                <CustomizedInputBase />
+              </Grid>
+              <Grid item xs={12}>
+                <ResendOTP />
+              </Grid>
+            </Grid>
+
+            <Button
+              //type="submit"
+              fullWidth
+              variant="contained"
+              color="primary"
+              className={classes.submit}
+            >
+              Start Tour
+            </Button>
+          </form>
+        </Slide>
+      </div>
+      <Box mt={5}>
+        <Copyright />
+      </Box>
+    </Container>
+  );
 }
diff --git a/yarn.lock b/yarn.lock
index ab6e010..dab2ae3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -89,6 +89,13 @@
     react-is "^16.8.0 || ^17.0.0"
     react-transition-group "^4.4.0"
 
+"@material-ui/icons@4.11.2":
+  version "4.11.2"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
+  integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+
 "@material-ui/styles@4.11.3", "@material-ui/styles@^4.11.3":
   version "4.11.3"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.3.tgz#1b8d97775a4a643b53478c895e3f2a464e8916f2"
@@ -126,7 +133,7 @@
   resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
   integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
 
-"@material-ui/utils@^4.11.2":
+"@material-ui/utils@4.11.2", "@material-ui/utils@^4.11.2":
   version "4.11.2"
   resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
   integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
@@ -1413,6 +1420,13 @@ react-dom@^16.13.1:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-iframe@1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/react-iframe/-/react-iframe-1.8.0.tgz#8c78f2c59b894ca5605fa7e45e61e27e57e96091"
+  integrity sha512-NYi89+rEqREwQxW9sDf+akh6/dtwWd3bOjByoVEIQ7SicOxVawRMer3pLdWjFaHXpuxTB9NqobPf/Ohj2iAKkg==
+  dependencies:
+    object-assign "^4.1.1"
+
 react-is@16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"