diff --git a/src/client/app/components/Home.jsx b/src/client/app/components/Home.jsx
index d390f21..6b8a0e8 100644
--- a/src/client/app/components/Home.jsx
+++ b/src/client/app/components/Home.jsx
@@ -1,22 +1,74 @@
 import React, {Component}   from 'react';
 import ReactDOM             from 'react-dom';
-import LogginForm           from './LogginForm.jsx';
-import MenuAppBar           from './MenuAppBar.jsx';
-import PropTypes            from 'prop-types';
 import Grid                 from 'material-ui/Grid';
+import LoginForm            from './LoginForm.jsx';
+import MenuAppBar           from './MenuAppBar.jsx';
+import RecordingCenter      from './RecordingCenter.jsx';
+
+const homeTitle = "Home";
+const recordingCenterTitle = "Recording Center";
+
+function DisplayLoginForm(isLoggedIn, callback) {
+  return (
+    <Grid container className="home-grid">
+      <Grid item xs={4}/>
+      <Grid item xs={4}>
+        <LoginForm isLoggedIn={isLoggedIn} callback={callback} />
+      </Grid>
+      <Grid item xs={4}/>
+    </Grid>
+  )
+}
+
+function DisplayRecordingCenter() {
+  return (
+    <Grid container className="home-grid">
+      <Grid item xs={2}/>
+      <Grid item xs={8}>
+        <RecordingCenter />
+      </Grid>
+      <Grid item xs={2}/>
+    </Grid>
+  )
+};
 
 class Home extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      isLoggedIn : false,
+      title: homeTitle,
+    };
+    this.handdleUserLogin = this.handdleUserLogin.bind(this);
+  }
+
+  handdleUserLogin(firstName, lastName) {
+    this.setState({
+      isLoggedIn: true,
+      title: recordingCenterTitle,
+    });
+  }
+
   render() {
+    const isLoggedIn = this.state.isLoggedIn;
+    var externalGrid = 4
+    var mainGrid = 4;
+    var display =  <LoginForm isLoggedIn={isLoggedIn} callback={this.handdleUserLogin}/>
+    if (isLoggedIn) {
+      externalGrid = 2;
+      mainGrid = 8;
+      display = <RecordingCenter />;
+    }
+
     return (
       <div className="component-home">
-        <MenuAppBar />
-        <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/><br/> <br/> <br/> <br/> <br/>
+        <MenuAppBar title={this.state.title}/>
         <Grid container className="home-grid">
-          <Grid item xs={4}/>
-          <Grid item xs={4}>
-            <LogginForm />
+          <Grid item xs={externalGrid}/>
+          <Grid item xs={mainGrid}>
+            {display}
           </Grid>
-          <Grid item xs={4}/>
+          <Grid item xs={externalGrid}/>
         </Grid>
       </div>
     );
diff --git a/src/client/app/components/LogginForm.jsx b/src/client/app/components/LogginForm.jsx
deleted file mode 100644
index 85ba41d..0000000
--- a/src/client/app/components/LogginForm.jsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, {Component}              from 'react';
-import ReactDOM                        from 'react-dom';
-import RecordingCenter                 from './RecordingCenter.jsx';
-import Button                          from 'material-ui/Button';
-import Input, { InputLabel }           from 'material-ui/Input';
-import { FormControl, FormHelperText } from 'material-ui/Form';
-import Grid                            from 'material-ui/Grid';
-import Paper                           from 'material-ui/Paper';
-
-
-class LogginForm extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = {
-      id        : null,
-      firstName : "",
-      lastName  : "",
-      logginRedirection : false
-    };
-
-    this.handleInputChange  = this.handleInputChange.bind(this);
-    this.handleSubmit       = this.handleSubmit.bind(this);
-  }
-
-  handleInputChange(event) {
-    const target = event.target;
-
-    this.setState({
-      [target.name]: target.value
-    });
-  }
-
-
-  handleSubmit(event) {
-    // TODO Add validation form
-    console.log("handleSubmit");
-    if (this.state.firstName.length > 2 && this.state.lastName.length > 2) {
-      this.setState({
-        logginRedirection: true
-     });
-      console.log("Form accepted => redirection enable");
-    }
-
-    event.preventDefault();
-  }
-
-  render() {
-    const { classes } = this.props;
-    if (this.state.logginRedirection)
-      return <RecordingCenter />
-    else {
-      return (
-        <Paper>
-          <Grid container direction="row" alignItems="center">
-            <Grid item xs={1}/>
-            <Grid item xs={10}>
-              <FormControl fullWidth>
-                <InputLabel htmlFor="firstname-input">Firstname</InputLabel>
-                <Input name="firstName" onChange={this.handleInputChange}
-                  value={this.state.firstName}
-                />
-              </FormControl>
-            </Grid>
-            <Grid item xs={1}/>
-
-            <Grid item xs={1}/>
-            <Grid item xs={10}>
-              <FormControl fullWidth>
-                <InputLabel htmlFor="name-input">Lastname</InputLabel>
-                <Input name="lastName" onChange={this.handleInputChange}
-                  value={this.state.lastName}
-                />
-              </FormControl>
-            </Grid>
-            <Grid item xs={1}/>
-
-            <Grid item xs={8}/>
-            <Grid item xs={3}>
-              <Button raised color="primary" className="submit"
-                onClick={this.handleSubmit}>
-                Log in
-              </Button>
-            </Grid>
-          </Grid>
-        </Paper>
-      );
-    }
-  }
-}
-
-export default LogginForm;
\ No newline at end of file
diff --git a/src/client/app/components/LoginForm.jsx b/src/client/app/components/LoginForm.jsx
new file mode 100644
index 0000000..3164559
--- /dev/null
+++ b/src/client/app/components/LoginForm.jsx
@@ -0,0 +1,88 @@
+import React, {Component}              from 'react';
+import ReactDOM                        from 'react-dom';
+import Button                          from 'material-ui/Button';
+import Input, { InputLabel }           from 'material-ui/Input';
+import { FormControl, FormHelperText } from 'material-ui/Form';
+import Grid                            from 'material-ui/Grid';
+import Paper                           from 'material-ui/Paper';
+import Send                            from 'material-ui-icons/Send';
+
+const iconStyle = {
+  marginLeft: 4,
+};
+
+
+class LoginForm extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      id: null,
+      firstName: "",
+      lastName: "",
+      isLoggedIn: this.props.isLoggedIn
+    };
+
+    this.handleInputChange  = this.handleInputChange.bind(this);
+    this.handleSubmit       = this.handleSubmit.bind(this);
+  }
+
+  handleInputChange(event) {
+    const target = event.target;
+
+    this.setState({
+      [target.name]: target.value
+    });
+  }
+
+
+  handleSubmit(event) {
+    // TODO Add validation form
+    if (this.state.firstName.length > 2 && this.state.lastName.length > 2) {
+      this.props.callback(this.state.firstName, this.state.lastName);
+      console.log("Form accepted => redirection enable");
+    }
+    event.preventDefault();
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+      <Paper>
+        <Grid container direction="row" alignItems="center">
+          <Grid item xs={1}/>
+          <Grid item xs={10}>
+            <FormControl fullWidth>
+              <InputLabel htmlFor="firstname-input">Firstname</InputLabel>
+              <Input name="firstName" onChange={this.handleInputChange}
+                value={this.state.firstName}
+              />
+            </FormControl>
+          </Grid>
+          <Grid item xs={1}/>
+
+          <Grid item xs={1}/>
+          <Grid item xs={10}>
+            <FormControl fullWidth>
+              <InputLabel htmlFor="name-input">Lastname</InputLabel>
+              <Input name="lastName" onChange={this.handleInputChange}
+                value={this.state.lastName}
+              />
+            </FormControl>
+          </Grid>
+          <Grid item xs={1}/>
+
+          <Grid item xs={8}/>
+          <Grid item xs={4}>
+            <Button type="submit" raised color="primary">
+              Login
+              <Send style={iconStyle}/>
+            </Button>
+          </Grid>
+        </Grid>
+      </Paper>
+      </form>
+    );
+  }
+}
+
+export default LoginForm;
\ No newline at end of file
diff --git a/src/client/app/components/MenuAppBar.jsx b/src/client/app/components/MenuAppBar.jsx
index 46e7d96..3864d95 100644
--- a/src/client/app/components/MenuAppBar.jsx
+++ b/src/client/app/components/MenuAppBar.jsx
@@ -57,7 +57,7 @@ class MenuAppBar extends React.Component {
               <MenuIcon />
             </IconButton>
             <Typography type="title" color="inherit" className={classes.flex}>
-              Home
+              {this.props.title}
             </Typography>
             {auth && (
               <div>
@@ -90,6 +90,7 @@ class MenuAppBar extends React.Component {
             )}
           </Toolbar>
         </AppBar>
+        <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/><br/> <br/> <br/> <br/> <br/>
       </div>
     );
   }