diff --git a/jaas-client/dist/index.html b/jaas-client/dist/index.html
index eaccd26..3353d9d 100644
--- a/jaas-client/dist/index.html
+++ b/jaas-client/dist/index.html
@@ -9,7 +9,7 @@
 
 <body>
     <div id="root"></div>
-    <script src="bundle.js"></script>
+    <script src="/bundle.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/jaas-client/src/App.css b/jaas-client/src/App.css
index 74b5e05..915ab44 100644
--- a/jaas-client/src/App.css
+++ b/jaas-client/src/App.css
@@ -28,6 +28,10 @@
   color: #61dafb;
 }
 
+.loginCard {
+  margin-top: 2em;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
diff --git a/jaas-client/src/App.js b/jaas-client/src/App.js
index d1c880b..c943b71 100644
--- a/jaas-client/src/App.js
+++ b/jaas-client/src/App.js
@@ -1,35 +1,47 @@
 /*
   Company: Savoir-faire Linux
   Author: Larbi Gharib <larbi.gharib@savoirfairelinux.com>
-  UI Project inspired from https://scrimba.com/p/pbNpTv/cbZBmfV
   License: AGPL-3
 */
 
 import React from 'react';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import authManager from './AuthManager'
 //import logo from './logo.svg';
 import './App.css';
 
-
 import { BrowserRouter as Router, Route, Switch, Link, Redirect } from 'react-router-dom';
 
-import SignInPage from "./pages/index.jsx";
-import Jaas from "./pages/jaas.jsx"
+import SignInPage from "./pages/loginDialog.jsx";
+import JamiMessenger from "./pages/messenger.jsx"
+import AccountSettings from "./pages/accountSettings.jsx"
+import AccountSelection from "./pages/accountSelection.jsx"
 import NotFoundPage from "./pages/404.jsx"
 
-
 class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      authenticated: authManager.isAuthenticated(),
+    };
+    authManager.setOnAuthChanged(authenticated => this.setState({authenticated}))
+  }
 
   render() {
-    return <Router>
-      <Switch>
-        <Route exact path="/" component={SignInPage} />
-        <Route to="/Jaas" component={Jaas} />
-        <Route exact path="/404" component={NotFoundPage} />
-        <Redirect to="/404" />
-      </Switch>
-
-    </Router>
+      return <React.Fragment>
+        <CssBaseline />
+        <Router>
+          <Switch>
+            <Route exact path="/"><Redirect to="/account" /></Route>
+            <Route path="/account/:accountId" component={AccountSettings} />
+            <Route path="/account" component={AccountSelection} />
+            <Route path="/messaging" component={JamiMessenger} />
+            <Route component={NotFoundPage} />
+          </Switch>
+        </Router>
+        {!this.state.authenticated && <SignInPage open={!this.state.authenticated}/>}
+      </React.Fragment>
   }
 }
 
-export default App;
\ No newline at end of file
+export default App
\ No newline at end of file
diff --git a/jaas-client/src/AuthManager.js b/jaas-client/src/AuthManager.js
new file mode 100644
index 0000000..09aef64
--- /dev/null
+++ b/jaas-client/src/AuthManager.js
@@ -0,0 +1,84 @@
+/*
+ *  Copyright (c) 2017-2021 Savoir-faire Linux Inc.
+ *
+ *  Author: Adrien Béraud <adrien.beraud@savoirfairelinux.com>
+ *
+ *  This program is free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+//import cookie from 'cookie';
+
+class AuthManager {
+    constructor() {
+        console.log("AuthManager()")
+        this.authenticated = true//'connect.sid' in cookie.parse(document.cookie)
+        this.authenticating = false
+        this.tasks = []
+        this.onAuthChanged = undefined
+    }
+    setOnAuthChanged(onAuthChanged) {
+        this.onAuthChanged = onAuthChanged
+    }
+
+    isAuthenticated() {
+        return this.authenticated
+    }
+
+    authenticate() {
+        if (this.authenticating)
+            return
+        console.log("Starting authentication")
+        this.authenticating = true
+        fetch('/api/localLogin?username=local&password=local', { method:"POST" })
+            .then(response => {
+                console.log(response)
+                this.authenticating = false
+                this.authenticated = response.ok && response.status === 200
+                if (this.onAuthChanged)
+                    this.onAuthChanged(this.authenticated)
+                while (this.tasks.length !== 0) {
+                    const task = this.tasks.shift()
+                    if (this.authenticated)
+                        fetch(task.url, task.init).then(res => task.resolve(res))
+                    else
+                        task.reject(new Error("Authentication failed"))
+                }
+            })
+    }
+
+    disconnect() {
+        console.log("Disconnect")
+        this.authenticated = false
+        if (this.onAuthChanged)
+            this.onAuthChanged(this.authenticated)
+    }
+
+    fetch(url, init) {
+        console.log(`get ${url}`)
+        if (!this.authenticated) {
+            return new Promise((resolve, reject) => this.tasks.push({url, init, resolve, reject}))
+        }
+        return fetch(url, init)
+            .then(response => {
+                console.log(`Got status ${response.status}`)
+                if (response.status === 401) {
+                    this.disconnect()
+                    return this.fetch(url, init)
+                }
+                return response
+            })
+    }
+}
+
+export default new AuthManager()
\ No newline at end of file
diff --git a/jaas-client/src/components/AccountList.js b/jaas-client/src/components/AccountList.js
new file mode 100644
index 0000000..6f38c3c
--- /dev/null
+++ b/jaas-client/src/components/AccountList.js
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import Avatar from '@material-ui/core/Avatar';
+import PersonRoundedIcon from '@material-ui/icons/PersonRounded';
+
+class AccountList extends React.Component {
+  render() {
+    return (
+        <List>
+          {
+            this.props.accounts.map(account => <ListItem button key={account.getId()} onClick={() => this.props.onClick(account)}>
+              <ListItemAvatar>
+                <Avatar>
+                  <PersonRoundedIcon />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={account.getDisplayName()} secondary={account.getDisplayUri()} />
+            </ListItem>
+            )
+          }
+        </List>)
+  }
+}
+
+export default AccountList;
\ No newline at end of file
diff --git a/jaas-client/src/components/AccountPreferences.js b/jaas-client/src/components/AccountPreferences.js
new file mode 100644
index 0000000..f486dd9
--- /dev/null
+++ b/jaas-client/src/components/AccountPreferences.js
@@ -0,0 +1,63 @@
+import React from 'react';
+
+import Typography from '@material-ui/core/Typography';
+
+import JamiIdCard from './JamiIdCard';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import Switch from '@material-ui/core/Switch';
+import PhoneCallbackIcon from '@material-ui/icons/PhoneCallback';
+import GroupRoundedIcon from '@material-ui/icons/GroupRounded';
+import Account from '../../../model/Account';
+
+class AccountPreferences extends React.Component {
+
+  render() {
+    const account = this.props.account
+    const isJamiAccount = account.getType() === Account.TYPE_JAMI
+    return (
+      <React.Fragment>
+        <Typography variant="h2" component="h2">Jami account</Typography>
+
+        {isJamiAccount &&
+          <JamiIdCard account={account} />}
+
+        <List subheader={<ListSubheader>Settings</ListSubheader>}>
+          <ListItem>
+            <ListItemIcon>
+              <GroupRoundedIcon />
+            </ListItemIcon>
+            <ListItemText id="switch-list-label-rendezvous" primary="Rendez-Vous point" />
+            <ListItemSecondaryAction>
+              <Switch
+                edge="end"
+                /*onChange={handleToggle('wifi')}*/
+                checked={account.isRendezVous()}
+                inputProps={{ 'aria-labelledby': 'switch-list-label-wifi' }}
+              />
+            </ListItemSecondaryAction>
+          </ListItem>
+          <ListItem>
+            <ListItemIcon>
+              <PhoneCallbackIcon />
+            </ListItemIcon>
+            <ListItemText id="switch-list-label-publicin" primary="Allow connection from unkown peers" />
+            <ListItemSecondaryAction>
+              <Switch
+                edge="end"
+                /*onChange={handleToggle('bluetooth')}*/
+                checked={account.isPublicIn()}
+                inputProps={{ 'aria-labelledby': 'switch-list-label-bluetooth' }}
+              />
+            </ListItemSecondaryAction>
+          </ListItem>
+        </List>
+      </React.Fragment>)
+  }
+}
+
+export default AccountPreferences;
\ No newline at end of file
diff --git a/jaas-client/src/components/Header.js b/jaas-client/src/components/Header.js
index 22a6c74..d245976 100644
--- a/jaas-client/src/components/Header.js
+++ b/jaas-client/src/components/Header.js
@@ -2,10 +2,11 @@
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
-import { useHistory } from "react-router-dom";
+//import { useHistory } from "react-router-dom";
+import authManager from '../AuthManager'
 
 export default function Header() {
-    const history = useHistory();
+    //const history = useHistory();
 
     const [anchorEl, setAnchorEl] = React.useState(null);
 
@@ -18,15 +19,16 @@
     };
 
     const disconnect = () => {
-        let path = `/`;
-        history.push(path);
+        authManager.disconnect()
+        //let path = `/`;
+        //history.push(path);
     }
 
     return (
         <div>
             <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
                 Menu
-      </Button>
+            </Button>
             <Menu
                 id="simple-menu"
                 anchorEl={anchorEl}
diff --git a/jaas-client/src/components/JamiIdCard.js b/jaas-client/src/components/JamiIdCard.js
new file mode 100644
index 0000000..eb31a26
--- /dev/null
+++ b/jaas-client/src/components/JamiIdCard.js
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography';
+
+class JamiIdCard extends React.Component {
+  render() {
+    const account = this.props.account
+    const registeredName = account.getRegisteredName()
+    return (
+        <Card style={{marginBottom:16}}>
+          <CardContent>
+            <Typography variant="h6">Jami key ID</Typography>
+            <Typography variant="body1">{account.getUri()}</Typography>
+            {registeredName && <div>
+                <Typography variant="h6">Jami username</Typography>
+                <Typography variant="body1">{registeredName}</Typography></div>
+            }
+          </CardContent>
+        </Card>)
+  }
+}
+
+export default JamiIdCard;
\ No newline at end of file
diff --git a/jaas-client/src/components/SendMessageForm.js b/jaas-client/src/components/SendMessageForm.js
index e52635d..43a4998 100644
--- a/jaas-client/src/components/SendMessageForm.js
+++ b/jaas-client/src/components/SendMessageForm.js
@@ -1,5 +1,6 @@
 import React from 'react'
-import InputEmoji from "react-input-emoji";
+import TextField from '@material-ui/core/TextField'
+//import InputEmoji from "react-input-emoji";
 
 class SendMessageForm extends React.Component {
 
@@ -25,7 +26,6 @@
         this.setState({
             message: ''
         })
-
     }
 
     render() {
@@ -33,7 +33,7 @@
             <div
                 //onSubmit={this.handleSubmit}
                 className="send-message-form">
-                <InputEmoji
+                <TextField
                     disabled={this.props.disabled}
                     onChange={this.handleChange}
                     value={this.state.message}
diff --git a/jaas-client/src/pages/accountSelection.jsx b/jaas-client/src/pages/accountSelection.jsx
new file mode 100644
index 0000000..2a4c99b
--- /dev/null
+++ b/jaas-client/src/pages/accountSelection.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import Header from '../components/Header'
+import authManager from '../AuthManager'
+import AccountList from '../components/AccountList';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { withRouter } from 'react-router-dom';
+import Card from '@material-ui/core/Card';
+import CardHeader from '@material-ui/core/CardHeader';
+import Container from '@material-ui/core/Container';
+import Account from '../../../model/Account';
+
+class AccountSelection extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.controller = new AbortController()
+    this.state = {
+      loaded: false,
+      error: false,
+      accounts: []
+    }
+  }
+
+  componentDidMount() {
+    if (!this.state.loaded) {
+      authManager.fetch('/api/accounts', {signal: this.controller.signal})
+        .then(res => res.json())
+        .then(result => {
+          console.log(result)
+          this.setState({
+            loaded: true,
+            accounts: result.map(account => Account.from(account)),
+          })
+        }, error => {
+          console.log(`get error ${error}`)
+          this.setState({
+            loaded: true,
+            error: true
+          })
+        })
+      }
+  }
+  componentWillUnmount() {
+    this.controller.abort()
+  }
+
+  render() {
+    if (!this.state.loaded)
+      return <Container><CircularProgress /></Container>
+    return (
+      <div className="app" style={{marginBottom:32}} >
+        <Header />
+        <Container>
+          <Card style={{marginTop:32, marginBottom:32}}>
+            <CardHeader title="Choose an account" />
+            <AccountList accounts={this.state.accounts} onClick={account => this.props.history.push(`/account/${account.getId()}`)} />
+          </Card>
+        </Container>
+      </div>
+    )
+  }
+}
+
+export default withRouter(AccountSelection);
\ No newline at end of file
diff --git a/jaas-client/src/pages/accountSettings.jsx b/jaas-client/src/pages/accountSettings.jsx
new file mode 100644
index 0000000..d7f71cf
--- /dev/null
+++ b/jaas-client/src/pages/accountSettings.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import Header from '../components/Header'
+import AccountPreferences from '../components/AccountPreferences'
+import Container from '@material-ui/core/Container';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import authManager from '../AuthManager'
+import Account from '../../../model/Account'
+
+class AccountSettings extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.accountId = props.accountId || props.match.params.accountId
+    this.state = { loaded: false, account: props.account }
+    this.req = undefined
+    this.controller = new AbortController()
+  }
+
+  componentDidMount() {
+    if (this.req === undefined) {
+      this.req = authManager.fetch(`/api/accounts/${this.accountId}`, {signal: this.controller.signal})
+        .then(res => res.json())
+        .then(result => {
+          console.log(result)
+          this.setState({loaded: true, account: Account.from(result)})
+        })
+    }
+  }
+
+  componentWillUnmount() {
+    this.controller.abort()
+    this.req = undefined
+  }
+
+  render() {
+    return (
+      <Container maxWidth="sm" className="app" >
+        <Header />
+        {this.state.loaded ? <AccountPreferences account={this.state.account} /> : <CircularProgress />}
+      </Container>
+    )
+  }
+}
+
+export default AccountSettings;
\ No newline at end of file
diff --git a/jaas-client/src/pages/index.jsx b/jaas-client/src/pages/index.jsx
deleted file mode 100644
index ad831b1..0000000
--- a/jaas-client/src/pages/index.jsx
+++ /dev/null
@@ -1,223 +0,0 @@
-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 FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-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 { Redirect } from 'react-router-dom';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Dialog from '@material-ui/core/Dialog';
-
-
-function Copyright() {
-    return (
-        <Typography variant="body2" color="textSecondary" align="center">
-            {'Copyright © 2016-'}{new Date().getFullYear()}{' Savoir-faire Linux Inc. GNU '}
-            <Link color="inherit" href="https://jami.net/">
-                Jami.net
-        </Link>{' '}
-
-            {'.'}
-        </Typography>
-    );
-}
-
-/*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(1),
-    },
-    submit: {
-        margin: theme.spacing(3, 0, 2),
-    },
-}));*/
-
-/*function SignIn() {
-    const classes = useStyles();
-
-
-}*/
-
-/* 
-    TODO:
-    Use useState to handle username password and redirect states to render this page to 
-    comply with material-ui usage of useStyles
-    Src: https://blog.logrocket.com/a-guide-to-usestate-in-react-ecb9952e406c/
-*/
-
-class SignInPage extends React.Component {
-
-    constructor() {
-        super()
-        this.state = {
-            username: '',
-            password: '',
-            redirect: false,
-            session: null,
-            submitted: false,
-            loading: false,
-            error: false,
-            open: false,
-            errorMessage: ''
-        }
-        this.handleSubmit = this.handleSubmit.bind(this);
-    }
-
-    handleusername(text) {
-        this.setState({ username: text.target.value })
-    }
-
-    handlePassword(text) {
-        this.setState({ password: text.target.value })
-    }
-
-    handleSubmit(event) {
-        event.preventDefault();
-        let obj = {}
-        obj.username = this.state.username;
-        obj.password = this.state.password;
-
-        this.setState({
-            submitted: true,
-            loading: true
-        })
-
-        fetch('/api/login?username=' + obj.username + '&password=' + obj.password,
-            {
-                header: {
-                    "Content-Type": "application/json"
-                },
-                method: "POST",
-                credentials: 'same-origin'
-                //body: JSON.stringify({ obj })
-            }
-        ).then((res) => {
-            if (res.status == '200') {
-                this.setState({
-                    redirect: true
-                });
-            } else if (res.status == '401') {
-                this.setState({
-                    loading: false,
-                    error: true,
-                    open: true,
-                    errorMessage: "Wrong credentials! Your are not allowed to connect"
-                })
-            }
-            //this.setState({ session: res });
-        }).catch((e) => {
-            this.setState({
-                loading: false,
-                error: true,
-                open: true,
-                errorMessage: e.toString()
-            })
-        })
-    }
-
-
-    render() {
-        if (this.state.redirect) {
-            return <Redirect to="/jaas" />
-        }
-
-        return (
-            <Container component="main" maxWidth="xs" >
-                <CssBaseline />
-                <div className=""/*{classes.paper}*/>
-                    <Typography component="h1" variant="h5">
-                        Se connecter
-              </Typography>
-                    <form className=""/*{classes.form}*/ onSubmit={this.handleSubmit} >
-                        <TextField
-                            variant="outlined"
-                            margin="normal"
-                            required
-                            fullWidth
-                            id="username"
-                            label="LDAP Savoir-faire Linux"
-                            name="username"
-                            autoComplete="email"
-                            autoFocus
-                            onChange={(text) => { this.handleusername(text) }}
-                        />
-                        <TextField
-                            variant="outlined"
-                            margin="normal"
-                            required
-                            fullWidth
-                            name="password"
-                            label="Mot de passe"
-                            type="password"
-                            id="password"
-                            autoComplete="current-password"
-                            onChange={(text) => { this.handlePassword(text) }}
-                        />
-                        <FormControlLabel
-                            control={<Checkbox value="remember" color="primary" />}
-                            label="Se rapeller de moi"
-                        />
-                        <Button
-                            type="submit"
-                            fullWidth
-                            variant="contained"
-                            color="primary"
-                            className=""/*{classes.submit}*/
-                        // onClick={() => { this.login() }}
-                        >
-                            Se connecter
-                        </Button>
-                        <Grid container>
-                            <Grid item xs>
-                                <Link href="#" variant="body2">
-                                    Mot de passe oublié ?
-                                </Link>
-                            </Grid>
-                            <Grid item>
-                                <Link href="#" variant="body2">
-                                    {"Tu n'as pas de compte? Inscris-toi"}
-                                </Link>
-                            </Grid>
-                        </Grid>
-                    </form>
-                </div>
-                <Box mt={8}>
-                    <Copyright />
-                </Box>
-                {this.state.submitted && this.state.loading && <CircularProgress
-                    style={{ position: 'relative' }}
-                    size={40}
-                    top={10}
-                    style={{ marginLeft: '50%' }}
-                />}
-                {
-                    this.state.error && <Dialog aria-labelledby="simple-dialog-title" open={this.state.open} >
-                        <DialogTitle id="simple-dialog-title">{this.state.errorMessage}</DialogTitle>
-                    </Dialog>
-                }
-            </Container>
-        );
-    }
-}
-
-
-export default SignInPage;
\ No newline at end of file
diff --git a/jaas-client/src/pages/loginDialog.jsx b/jaas-client/src/pages/loginDialog.jsx
new file mode 100644
index 0000000..93f9f59
--- /dev/null
+++ b/jaas-client/src/pages/loginDialog.jsx
@@ -0,0 +1,245 @@
+import React from 'react';
+
+import Avatar from '@material-ui/core/Avatar';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+import Link from '@material-ui/core/Link';
+import Grid from '@material-ui/core/Grid';
+import Box from '@material-ui/core/Box';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+
+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 { Redirect } from 'react-router-dom';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+
+import authManager from '../AuthManager'
+
+function Copyright() {
+    return (
+        <Typography variant="body2" color="textSecondary" align="center">
+            {'Copyright © 2016-'}{new Date().getFullYear()}{' Savoir-faire Linux Inc.'}
+            <Link color="inherit" href="https://jami.net/">
+                Jami.net
+        </Link>{' '}
+            {'.'}
+        </Typography>
+    );
+}
+
+/*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(1),
+    },
+    submit: {
+        margin: theme.spacing(3, 0, 2),
+    },
+}));*/
+
+/*function SignIn() {
+    const classes = useStyles();
+
+
+}*/
+
+/*
+    TODO:
+    Use useState to handle username password and redirect states to render this page to
+    comply with material-ui usage of useStyles
+    Src: https://blog.logrocket.com/a-guide-to-usestate-in-react-ecb9952e406c/
+*/
+
+class SignInPage extends React.Component {
+
+    constructor(props) {
+        console.log("SignInPage " + props.open)
+        super(props)
+        this.state = {
+            /*username: '',
+            password: '',
+            redirect: false,
+            session: null,*/
+            submitted: false,
+            loading: false/*,
+            error: false,
+            open: false,
+            errorMessage: ''*/
+        }
+        this.handleSubmit = this.handleSubmit.bind(this);
+        this.localLogin = this.localLogin.bind(this);
+    }
+
+    handleusername(text) {
+        this.setState({ username: text.target.value })
+    }
+
+    handlePassword(text) {
+        this.setState({ password: text.target.value })
+    }
+
+    localLogin() {
+        this.setState({
+            submitted: true,
+            loading: true
+        })
+        authManager.authenticate()
+        /*fetch('/api/localLogin?username=none&password=none', {
+            header: { "Content-Type": "application/json" },
+            method: "POST",
+            credentials: 'same-origin'
+            //body: JSON.stringify({ obj })
+        })
+            .then((res) => {
+                if (res.status === '200') {
+                    this.setState({
+                        redirect: true
+                    });
+                } else if (res.status === '401') {
+                    this.setState({
+                        loading: false,
+                        error: true,
+                        open: true,
+                        errorMessage: "Wrong credentials! Your are not allowed to connect"
+                    })
+                }
+                //this.setState({ session: res });
+            }).catch((e) => {
+                this.setState({
+                    loading: false,
+                    error: true,
+                    open: true,
+                    errorMessage: e.toString()
+                })
+            })*/
+    }
+
+    handleSubmit(event) {
+        event.preventDefault();
+        let obj = {}
+        obj.username = this.state.username;
+        obj.password = this.state.password;
+
+        this.setState({
+            submitted: true,
+            loading: true
+        })
+
+        fetch('/api/login?username=' + obj.username + '&password=' + obj.password,
+            {
+                header: {
+                    "Content-Type": "application/json"
+                },
+                method: "POST",
+                credentials: 'same-origin'
+                //body: JSON.stringify({ obj })
+            }
+        ).then((res) => {
+            if (res.status === '200') {
+                this.setState({
+                    redirect: true
+                });
+            } else if (res.status === '401') {
+                this.setState({
+                    loading: false,
+                    error: true,
+                    open: true,
+                    errorMessage: "Wrong credentials! Your are not allowed to connect"
+                })
+            }
+            //this.setState({ session: res });
+        }).catch((e) => {
+            this.setState({
+                loading: false,
+                error: true,
+                open: true,
+                errorMessage: e.toString()
+            })
+        })
+    }
+
+    render() {
+        console.log("SignInPage render " + this.props.open)
+        return (
+            <Dialog open={this.props.open}>
+                <DialogTitle>Se connecter</DialogTitle>
+                <DialogContent>
+                    <Button
+                        type="submit"
+                        fullWidth
+                        variant="contained"
+                        color="primary"
+                        className=""/*{classes.submit}*/
+                        onClick={() => { this.localLogin() }}
+                    >
+                        Compte local
+                    </Button>
+
+                    <TextField
+                        variant="outlined"
+                        margin="normal"
+                        required
+                        fullWidth
+                        id="username"
+                        label="LDAP Savoir-faire Linux"
+                        name="username"
+                        autoComplete="email"
+                        autoFocus
+                        onChange={(text) => { this.handleusername(text) }}
+                    />
+                    <TextField
+                        variant="outlined"
+                        margin="normal"
+                        required
+                        fullWidth
+                        name="password"
+                        label="Mot de passe"
+                        type="password"
+                        id="password"
+                        autoComplete="current-password"
+                        onChange={(text) => { this.handlePassword(text) }}
+                    />
+                    <FormControlLabel
+                        control={<Checkbox value="remember" color="primary" />}
+                        label="Se rapeller de moi"
+                    />
+                </DialogContent>
+
+                <DialogActions>
+                    <Button
+                        type="submit"
+                        size="medium"
+                        onClick={this.handleSubmit}
+                    >
+                        Se connecter
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        );
+    }
+}
+
+
+export default SignInPage;
\ No newline at end of file
diff --git a/jaas-client/src/pages/jaas.jsx b/jaas-client/src/pages/messenger.jsx
similarity index 84%
rename from jaas-client/src/pages/jaas.jsx
rename to jaas-client/src/pages/messenger.jsx
index 5c8a4aa..23f3935 100644
--- a/jaas-client/src/pages/jaas.jsx
+++ b/jaas-client/src/pages/messenger.jsx
@@ -4,11 +4,11 @@
 import MessageList from '../components/MessageList'
 import SendMessageForm from '../components/SendMessageForm'
 import NewContactForm from '../components/NewContactForm'
-import Sound from 'react-sound';
+//import Sound from 'react-sound';
 import io from "socket.io-client";
-var socket = io.connect('http://localhost:3000');
+//const socket = io.connect('http://localhost:3000');
 
-class Jaas extends React.Component {
+class JamiMessenger extends React.Component {
 
   constructor() {
     super()
@@ -17,11 +17,10 @@
       sound: false
     }
 
-    socket.on('connect', () => {
+    /*socket.on('connect', () => {
       console.log("Success !")
-    })
+    })*/
 
-    //import io from 'socket.io-client';
 
     //this.socket = socketIOClient(ENDPOINT);
     //this.socket.on("FromAPI", data => {
@@ -33,8 +32,8 @@
   }
 
   componentDidMount() {
-    socket.on('receivedMessage', (data) => {
-      var message = {
+    /*socket.on('receivedMessage', (data) => {
+      const message = {
         senderId: '65f6674b26e5af6ed0b4e92a13b80ff4bbfdf1e8',
         text: data
       }
@@ -42,7 +41,7 @@
         messages: [...this.state.messages, message],
         sound: true
       })
-    });
+    });*/
   }
 
   sendMessage(text) {
@@ -51,7 +50,7 @@
       destinationId: '65f6674b26e5af6ed0b4e92a13b80ff4bbfdf1e8',
       text: text
     }
-    socket.emit("SendMessage", data);
+    //socket.emit("SendMessage", data);
     console.log(data.text);
     this.setState({
       messages: [...this.state.messages, data],
@@ -79,4 +78,4 @@
   }
 }
 
-export default Jaas;
\ No newline at end of file
+export default JamiMessenger;
\ No newline at end of file