diff --git a/client/src/Components/Event/Create/Tabs/Basic.js b/client/src/Components/Event/Create/Tabs/Basic.js
new file mode 100644
index 000000000..87760d33a
--- /dev/null
+++ b/client/src/Components/Event/Create/Tabs/Basic.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+import { withStyles } from '@material-ui/core/styles';
+import styles from '../styles';
+
+
+class Basic extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <React.Fragment>
+        <Typography
+          className={classes.title}
+          variant='h4'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+        Basic
+        </Typography>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(Basic);
diff --git a/client/src/Components/Event/Create/Tabs/PresentationPage.js b/client/src/Components/Event/Create/Tabs/PresentationPage.js
new file mode 100644
index 000000000..1c674ddcc
--- /dev/null
+++ b/client/src/Components/Event/Create/Tabs/PresentationPage.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+import { withStyles } from '@material-ui/core/styles';
+import styles from '../styles';
+
+
+class PresentationPage extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <React.Fragment>
+        <Typography
+          className={classes.title}
+          variant='h4'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+        PresentationPage
+        </Typography>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(PresentationPage);
diff --git a/client/src/Components/Event/Create/Tabs/TeamsServer.js b/client/src/Components/Event/Create/Tabs/TeamsServer.js
new file mode 100644
index 000000000..874c72d6f
--- /dev/null
+++ b/client/src/Components/Event/Create/Tabs/TeamsServer.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+import { withStyles } from '@material-ui/core/styles';
+import styles from '../styles';
+
+
+class TeamsServer extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <React.Fragment>
+        <Typography
+          className={classes.title}
+          variant='h4'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+        TeamsServer
+        </Typography>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(TeamsServer);
diff --git a/client/src/Components/Event/Create/Tabs/Technical.js b/client/src/Components/Event/Create/Tabs/Technical.js
new file mode 100644
index 000000000..f091e6bd2
--- /dev/null
+++ b/client/src/Components/Event/Create/Tabs/Technical.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+import { withStyles } from '@material-ui/core/styles';
+import styles from '../styles';
+
+
+class Technical extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <React.Fragment>
+        <Typography
+          className={classes.title}
+          variant='h4'
+          align='center'
+          color='textPrimary'
+          gutterBottom
+        >
+        Technical
+        </Typography>
+      </React.Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(Technical);
diff --git a/client/src/Components/Event/Create/Tabs/index.js b/client/src/Components/Event/Create/Tabs/index.js
new file mode 100644
index 000000000..feecaaf55
--- /dev/null
+++ b/client/src/Components/Event/Create/Tabs/index.js
@@ -0,0 +1,11 @@
+import Basic from './Basic';
+import PresentationPage from './PresentationPage';
+import TeamsServer from './TeamsServer';
+import Technical from './Technical';
+
+export {
+  Basic,
+  PresentationPage,
+  TeamsServer,
+  Technical,
+};
diff --git a/client/src/Components/Event/Create/index.js b/client/src/Components/Event/Create/index.js
index 69c200d2c..cfbd9686e 100644
--- a/client/src/Components/Event/Create/index.js
+++ b/client/src/Components/Event/Create/index.js
@@ -15,18 +15,44 @@ import {
   Paper,
   Grid,
   Typography,
+  AppBar,
+  Tabs,
+  Tab,
 } from '@material-ui/core';
-import { ChevronLeft, ChevronRight } from '@material-ui/icons';
+import {
+  ChevronLeft,
+  ChevronRight,
+  Face as BasicIcon,
+  Alarm as TechnicalIcon,
+  Group as TeamAndServerIcon,
+  PresentToAll as PresentationIcon,
+} from '@material-ui/icons';
 import { DateTimePicker } from 'material-ui-pickers';
 import { withStyles } from '@material-ui/core/styles';
 import styles from './styles';
 
+import {
+  Basic,
+  PresentationPage,
+  TeamsServer,
+  Technical,
+} from './Tabs';
+
 import { hostedEventsCalls } from '../../../GraphQL/Calls';
 
+function TabContainer(props) {
+  return (
+    <Typography component='div' style={{ padding: 8 * 3 }}>
+      {props.children}
+    </Typography>
+  );
+}
+
 class Create extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      value: 0,
       name: '',
       description: '',
       startDatetime: DateTime.local().plus({ days: 1 }).startOf('day'),
@@ -34,9 +60,13 @@ class Create extends React.Component {
     };
   }
 
+  handleChange = (event, value) => {
+    this.setState({ value });
+  }
+
   render() {
     const {
-      name, description, startDatetime, finishDatetime,
+      name, description, startDatetime, finishDatetime, value,
     } = this.state;
     const { classes } = this.props;
     return (
@@ -47,60 +77,94 @@ class Create extends React.Component {
         }
       >
         {hostEvent => (
-
-          <Paper className={classes.root}>
-            <Typography className={classes.typography} variant='headline' gutterBottom>
-              Create a new event
-            </Typography>
-            <form
-              onSubmit={(e) => {
-                e.preventDefault();
-                hostEvent({
-                  variables: {
-                    event: {
-                      name,
-                      description,
-                      startDatetime: startDatetime.valueOf() / 1000,
-                      finishDatetime: startDatetime.valueOf() / 1000,
-                    },
-                  },
-                });
-              }}
+          <div className={classes.root}>
+            <AppBar position='static' color='default'>
+              <Tabs
+              value={value}
+              onChange={this.handleChange}
+              scrollable
+              scrollButtons='off'
+              indicatorColor='primary'
+              textColor='primary'
             >
-              <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
+                <Tab
+                className={classes.tabTitle}
+                label='Basic information'
+                icon={<BasicIcon />}
+              />
+                <Tab
+                className={classes.tabTitle}
+                label='Technical information'
+                icon={<TechnicalIcon />}
+              />
+                <Tab
+                className={classes.tabTitle}
+                label='Teams &amp; server setup(disabled)'
+                icon={<TeamAndServerIcon />}
+                disabled
+              />
+                <Tab
+                className={classes.tabTitle}
+                label='Presentation page(disabled)'
+                icon={<PresentationIcon />}
+                disabled
+              />
+              </Tabs>
+            </AppBar>
+            <Paper className={classes.paperRoot}>
+              <Typography className={classes.typography} variant='headline' gutterBottom>
+                Create a new event
+              </Typography>
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  hostEvent({
+                    variables: {
+                      event: {
+                        name,
+                        description,
+                        startDatetime: startDatetime.valueOf() / 1000,
+                        finishDatetime: startDatetime.valueOf() / 1000,
+                      },
+                    },
+                  });
+                }}
+              >
+                {value === 0 && <TabContainer>
+                  <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
                 These are the basic information you need to input in order to create an event.
                 There might be some heavy changes in the near future as the application is still at a very early stage.
-              </Typography>
+                  </Typography>
 
-              <TextField
+                  <TextField
                 label='Public id'
                 value='Your public ID will be generated automatically'
                 className={classes.inputField}
                 disabled
               />
 
-              <TextField
+                  <TextField
                 label='Name'
                 value={name}
                 className={classes.inputField}
               />
-              <TextField
+                  <TextField
                 multiline
                 label='Description'
                 value={description}
                 className={classes.inputField}
               />
 
-              <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
+                  <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
                 The dates are purely indicative, as it is important for you to make sure everything is
                 ready before manually triggering the beginning and end of the event.
                 If you are confident use the scheduler to start it for you(incoming).
-              </Typography>
+                  </Typography>
 
-              <FormGroup row className={classes.inputField}>
-                <Grid container justify='space-around' >
-                  <Grid item>
-                    <DateTimePicker
+                  <FormGroup row className={classes.inputField}>
+                    <Grid container justify='space-around' >
+                      <Grid item>
+                        <DateTimePicker
                       autoOk
                       disablePast
                       format="DD' at 'HH:mm"
@@ -111,9 +175,9 @@ class Create extends React.Component {
                       value={startDatetime}
                       helperText='Competition start date'
                     />
-                  </Grid>
-                  <Grid item>
-                    <DateTimePicker
+                      </Grid>
+                      <Grid item>
+                        <DateTimePicker
                       autoOk
                       disablePast
                       format="DD' at 'HH:mm"
@@ -124,15 +188,15 @@ class Create extends React.Component {
                       value={finishDatetime}
                       helperText='Competition finishing date'
                     />
-                  </Grid>
-                </Grid>
-              </FormGroup>
+                      </Grid>
+                    </Grid>
+                  </FormGroup>
 
-              <FormControl className={classes.inputField}>
-                <InputLabel shrink htmlFor='select'>
+                  <FormControl className={classes.inputField}>
+                    <InputLabel shrink htmlFor='select'>
                   Select the formula
-                </InputLabel>
-                <Select
+                    </InputLabel>
+                    <Select
                   id='select'
                   value='1'
                   input={<Input name='Role' id='role-label-placeholder' />}
@@ -140,17 +204,17 @@ class Create extends React.Component {
                   name='select'
                   className={classes.selectEmpty}
                 >
-                  <MenuItem key='1' value='1'>moi</MenuItem>
-                  <MenuItem key='2' value='2'>toi</MenuItem>
-                  <MenuItem key='3' value='3'>nous</MenuItem>
-                </Select>
-                <FormHelperText> For new formula, select {'"'}create new{'"'} </FormHelperText>
-              </FormControl>
-              <FormControl className={classes.inputField}>
-                <InputLabel shrink htmlFor='select'>
+                      <MenuItem key='1' value='1'>moi</MenuItem>
+                      <MenuItem key='2' value='2'>toi</MenuItem>
+                      <MenuItem key='3' value='3'>nous</MenuItem>
+                    </Select>
+                    <FormHelperText> For new formula, select {'"'}create new{'"'} </FormHelperText>
+                  </FormControl>
+                  <FormControl className={classes.inputField}>
+                    <InputLabel shrink htmlFor='select'>
                   Select the Plotter
-                </InputLabel>
-                <Select
+                    </InputLabel>
+                    <Select
                   id='select'
                   value='1'
                   input={<Input name='Role' id='role-label-placeholder' />}
@@ -158,19 +222,27 @@ class Create extends React.Component {
                   name='select'
                   className={classes.selectEmpty}
                 >
-                  <MenuItem key='1' value='1'>moi</MenuItem>
-                  <MenuItem key='2' value='2'>toi</MenuItem>
-                  <MenuItem key='3' value='3'>nous</MenuItem>
-                </Select>
-                <FormHelperText> For new plotter, select {'"'}create new{'"'} </FormHelperText>
-              </FormControl>
-              <Grid container justify='center' >
-                <Grid item>
-                  <Button type='submit' variant='contained' color='secondary'>Create New Project</Button>
-                </Grid>
-              </Grid>
-            </form>
-          </Paper>
+                      <MenuItem key='1' value='1'>moi</MenuItem>
+                      <MenuItem key='2' value='2'>toi</MenuItem>
+                      <MenuItem key='3' value='3'>nous</MenuItem>
+                    </Select>
+                    <FormHelperText> For new plotter, select {'"'}create new{'"'} </FormHelperText>
+                  </FormControl>
+                  <Grid container justify='center' >
+                    <Grid item>
+                      <Button className={classes.bottomButton} type='submit' variant='contained' color='secondary'>
+                        Create New Project
+                      </Button>
+                    </Grid>
+                  </Grid>
+                </TabContainer>
+              }
+                {value === 1 && <TabContainer><Technical /></TabContainer>}
+                {value === 2 && <TabContainer><TeamsServer /></TabContainer>}
+                {value === 3 && <TabContainer><PresentationPage /></TabContainer>}
+              </form>
+            </Paper>
+          </div>
         )}
       </Mutation>
     );
diff --git a/client/src/Components/Event/Create/styles.js b/client/src/Components/Event/Create/styles.js
index 44ef163a0..150cf362d 100644
--- a/client/src/Components/Event/Create/styles.js
+++ b/client/src/Components/Event/Create/styles.js
@@ -1,5 +1,34 @@
 const styles = theme => ({
   root: {
+    flexGrow: 1,
+    width: '100%',
+    backgroundColor: theme.palette.background.paper,
+    padding: 0,
+    margin: 0,
+  },
+  tabTitle: {
+    width: '25%',
+    maxWidth: 'none',
+  },
+  card: {
+    flexGrow: 1,
+    padding: 20,
+    marginTop: 20,
+    marginBottom: 20,
+    marginLeft: 400,
+    marginRight: 400,
+  },
+  buttonList: {
+    margin: theme.spacing.unit,
+    float: 'right',
+  },
+  buttonGrid: {
+    marginTop: -20,
+  },
+  title: {
+    marginTop: 20,
+  },
+  paperRoot: {
     width: '50%',
     flexGrow: 1,
     padding: 10,
@@ -16,23 +45,12 @@ const styles = theme => ({
     marginLeft: '10%',
     marginTop: 40,
   },
-  checkbox: {
-    width: 150,
-    marginLeft: '0%',
-    marginTop: 20,
-  },
   selectEmpty: {
     marginTop: theme.spacing.unit * 2,
   },
-  button: {
-    margin: theme.spacing.unit,
-    marginTop: theme.spacing.unit * 3,
-  },
-  img: {
-    display: 'block',
-    marginTop: 20,
-    maxWidth: 120,
-    maxHeight: 24,
+  bottomButton: {
+    padding: 15,
+    margin: 20,
   },
 });