diff --git a/client/package.json b/client/package.json
index 56ad635..6cd7d4d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,11 +1,13 @@
 {
   "name": "jami-web-client",
+  "type": "module",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.10.2",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.56",
+    "@babel/runtime": "^7.13.10",
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.57",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
@@ -18,12 +20,15 @@
     "socket.io-client": "^2.3.0"
   },
   "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.13.15",
     "@babel/core": "^7.13.14",
     "@babel/preset-env": "^7.13.12",
     "@babel/preset-react": "^7.13.13",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-beta.3",
     "babel-loader": "^8.2.2",
     "css-loader": "^5.2.0",
     "html-webpack-plugin": "^5.3.1",
+    "react-refresh": "^0.10.0",
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
diff --git a/client/src/App.js b/client/src/App.js
index 10db90a..cc1b5bf 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -3,52 +3,59 @@
   Author: Larbi Gharib <larbi.gharib@savoirfairelinux.com>
   License: AGPL-3
 */
-
-import React from 'react';
-import CssBaseline from '@material-ui/core/CssBaseline';
+import React, { useState, useEffect } from 'react'
+import { Route, Switch, Redirect, useHistory, useLocation } from 'react-router-dom'
+import { CircularProgress, Container, CssBaseline } from '@material-ui/core'
 import authManager from './AuthManager'
-//import logo from './logo.svg';
-import './App.scss';
-
-import { BrowserRouter as Router, Route, Switch, Link, Redirect } from 'react-router-dom';
+//import logo from './logo.svg'
+import './App.scss'
 
 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 AddContactPage from "./pages/addContactPage.jsx"
-
+import ServerSetup from "./pages/serverSetup.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}))
-  }
+const App = (props) => {
+    const history = useHistory()
+    const { location } = useLocation()
+    const [state, setState] = useState({
+      loaded: false,
+      auth: authManager.getState()
+    })
+    useEffect(() => {
+      authManager.init(auth => {
+        setState({ loaded: true, auth })
+      })
+      return () => authManager.deinit()
+    }, []);
 
-  render() {
     console.log("App render")
-    console.log(this.props)
+    console.log(state)
+    console.log(location)
 
-      return <React.Fragment>
-        <CssBaseline />
-        <Router>
-          <Switch>
-            <Route exact path="/"><Redirect to="/account" /></Route>
-            <Route path="/account/:accountId/settings" component={AccountSettings} />
-            <Route path="/account/:accountId/addContact/:contactId" component={JamiMessenger} />
-            <Route path="/account/:accountId/conversation/:conversationId" component={JamiMessenger} />
-            <Route path="/account/:accountId" component={JamiMessenger} />
-            <Route path="/account" component={AccountSelection} />
-            <Route component={NotFoundPage} />
-          </Switch>
-        </Router>
-        {!this.state.authenticated && <SignInPage open={!this.state.authenticated}/>}
-      </React.Fragment>
-  }
+    if (!state.loaded) {
+      return <Container><CircularProgress /></Container>
+    } else if (!state.auth.setupComplete) {
+      return <Switch>
+          <Route path="/setup" component={ServerSetup} />
+          <Route><Redirect to="/setup" /></Route>
+        </Switch>
+    }
+    return <React.Fragment>
+      <CssBaseline />
+        <Switch>
+          <Route exact path="/"><Redirect to="/account" /></Route>
+          <Route path="/account/:accountId/settings" component={AccountSettings} />
+          <Route path="/account/:accountId/addContact/:contactId" component={JamiMessenger} />
+          <Route path="/account/:accountId/conversation/:conversationId" component={JamiMessenger} />
+          <Route path="/account/:accountId" component={JamiMessenger} />
+          <Route path="/account" component={AccountSelection} />
+          <Route component={NotFoundPage} />
+        </Switch>
+      {!state.auth.authenticated && <SignInPage open={!state.auth.authenticated}/>}
+    </React.Fragment>
 }
 
-export default App
\ No newline at end of file
+export default App
diff --git a/client/src/AuthManager.js b/client/src/AuthManager.js
index 09aef64..4f504db 100644
--- a/client/src/AuthManager.js
+++ b/client/src/AuthManager.js
@@ -17,39 +17,114 @@
  *  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.state = {
+            initialized: false,
+            authenticated: true,
+            setupComplete: true,
+            error: false
+        }
+
         this.tasks = []
         this.onAuthChanged = undefined
     }
-    setOnAuthChanged(onAuthChanged) {
-        this.onAuthChanged = onAuthChanged
-    }
 
     isAuthenticated() {
-        return this.authenticated
+        return this.state.authenticated
     }
 
-    authenticate() {
+    getState() {
+        return this.state
+    }
+
+    init(cb) {
+        this.onAuthChanged = cb
+        if (this.state.initialized || this.authenticating)
+            return
+        console.log("Init")
+        this.authenticating = true
+        fetch('/auth')
+            .then(async (response) => {
+                this.authenticating = false
+                this.state.initialized = true
+                console.log("Init ended")
+                console.log(response)
+                if (response.status === 200) {
+                    const jsonData = await response.json()
+                    Object.assign(this.state, {
+                        authenticated: true,
+                        setupComplete: true,
+                        error: false,
+                        user: { username: jsonData.username, type: jsonData.type }
+                    })
+                } else if (response.status === 401) {
+                    const jsonData = await response.json()
+                    Object.assign(this.state, {
+                        authenticated: false,
+                        setupComplete: 'setupComplete' in jsonData ? jsonData.setupComplete : true,
+                        error: false
+                    })
+                } else {
+                    this.state.error = true
+                }
+                console.log("New auth state")
+                console.log(this.state)
+
+                if (this.onAuthChanged)
+                    this.onAuthChanged(this.state)
+            })
+    }
+
+    deinit() {
+        console.log("Deinit")
+        this.onAuthChanged = undefined
+    }
+
+    async setup(password) {
+        if (this.authenticating || this.state.setupComplete)
+            return
+        console.log("Starting setup")
+        this.authenticating = true
+        const response = await fetch(`/setup`, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ password })
+        })
+        console.log(response)
+        if (response.ok) {
+            console.log("Success, going home")
+            //history.replace('/')
+        } else {
+        }
+        this.authenticating = false
+        this.state.setupComplete = true
+        if (this.onAuthChanged)
+            this.onAuthChanged(this.state)
+        return response.ok
+    }
+
+    authenticate(username, password) {
         if (this.authenticating)
             return
         console.log("Starting authentication")
         this.authenticating = true
-        fetch('/api/localLogin?username=local&password=local', { method:"POST" })
+        fetch(`/auth/local?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`, { method:"POST" })
             .then(response => {
                 console.log(response)
                 this.authenticating = false
-                this.authenticated = response.ok && response.status === 200
+                this.state.authenticated = response.ok && response.status === 200
                 if (this.onAuthChanged)
-                    this.onAuthChanged(this.authenticated)
+                    this.onAuthChanged(this.state)
                 while (this.tasks.length !== 0) {
                     const task = this.tasks.shift()
-                    if (this.authenticated)
+                    if (this.state.authenticated)
                         fetch(task.url, task.init).then(res => task.resolve(res))
                     else
                         task.reject(new Error("Authentication failed"))
@@ -59,14 +134,14 @@
 
     disconnect() {
         console.log("Disconnect")
-        this.authenticated = false
+        this.state.authenticated = false
         if (this.onAuthChanged)
-            this.onAuthChanged(this.authenticated)
+            this.onAuthChanged(this.state)
     }
 
     fetch(url, init) {
         console.log(`get ${url}`)
-        if (!this.authenticated) {
+        if (!this.state.authenticated) {
             return new Promise((resolve, reject) => this.tasks.push({url, init, resolve, reject}))
         }
         return fetch(url, init)
diff --git a/client/src/components/AccountList.js b/client/src/components/AccountList.js
index 6f38c3c..38f1291 100644
--- a/client/src/components/AccountList.js
+++ b/client/src/components/AccountList.js
@@ -1,29 +1,19 @@
-import React from 'react';
+import React from 'react'
+import { Avatar, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
+import { PersonRounded } from '@material-ui/icons';
 
-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 function AccountList(props) {
+  return <List>
+    {
+      props.accounts.map(account => {
+        const displayName = account.getDisplayNameNoFallback()
+        return <ListItem button key={account.getId()} onClick={() => props.onClick(account)}>
+          <ListItemAvatar>
+            <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
+          </ListItemAvatar>
+          <ListItemText primary={account.getDisplayName()} secondary={account.getDisplayUri()} />
+        </ListItem>
+      })
+    }
+  </List>
 }
-
-export default AccountList;
\ No newline at end of file
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index 7e13974..a769168 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -2,7 +2,7 @@
 import React from 'react'
 import Conversation from '../../../model/Conversation'
 import { useHistory, useParams } from "react-router-dom"
-import PersonIcon from '@material-ui/icons/PersonRounded'
+import { PersonRounded } from '@material-ui/icons'
 
 export default function ConversationListItem(props) {
     const { conversationId, contactId } = useParams()
@@ -22,7 +22,7 @@
                 style={{overflow:'hidden'}}
                 onClick={() => history.push(`/account/${conversation.getAccountId()}/${uri}`)}>
                 <ListItemAvatar>
-                    <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonIcon />}</Avatar>
+                    <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
                 </ListItemAvatar>
                 <ListItemText
                     style={{overflow:'hidden', textOverflow:'ellipsis'}}
diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index d245976..c0408a1 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -32,7 +32,7 @@
             <Menu
                 id="simple-menu"
                 anchorEl={anchorEl}
-                keepMounted
+
                 open={Boolean(anchorEl)}
                 onClose={handleClose}
             >
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index d856c17..4841ea1 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,7 +1,7 @@
-import { Avatar, Box, Divider, Typography } from '@material-ui/core'
-import React from 'react'
 import Message from './Message'
-import PersonIcon from '@material-ui/icons/PersonRounded'
+import React from 'react'
+import { Avatar, Box, Divider, Typography } from '@material-ui/core'
+import { PersonRounded } from '@material-ui/icons'
 
 export default function MessageList(props) {
     const displayName = props.conversation.getDisplayName()
@@ -10,7 +10,7 @@
         <div className="message-list">
             <Box>
                 <Box style={{ display: 'inline-block', margin: 16, verticalAlign: 'middle' }}>
-                    <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonIcon />}</Avatar>
+                    <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
                 </Box>
                 <Box style={{ display: 'inline-block', verticalAlign: 'middle' }}>
                     <Typography variant="h5">{displayName}</Typography>
diff --git a/client/src/components/NewContactForm.js b/client/src/components/NewContactForm.js
index c98c9b4..5636be2 100644
--- a/client/src/components/NewContactForm.js
+++ b/client/src/components/NewContactForm.js
@@ -1,7 +1,6 @@
 import React from 'react'
-import SearchIcon from '@material-ui/icons/Search';
-import InputBase from '@material-ui/core/InputBase';
-import InputAdornment from '@material-ui/core/InputAdornment';
+import { InputBase, InputAdornment } from '@material-ui/core';
+import { SearchRounded } from '@material-ui/icons';
 
 class NewContactForm extends React.Component {
     constructor(props) {
@@ -40,11 +39,8 @@
                     type="search"
                     placeholder="Ajouter un contact"
                     onChange={this.handleChange}
-                    startAdornment={
-                        <InputAdornment position="start">
-                            <SearchIcon />
-                        </InputAdornment>
-                        } />
+                    startAdornment={<InputAdornment position="start"><SearchRounded /></InputAdornment>}
+                />
             </form>
         )
     }
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index 6269e3b..48770ba 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -1,8 +1,7 @@
 import React from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import { IconButton, InputBase, Paper, Popper } from '@material-ui/core'
-import SendIcon from '@material-ui/icons/Send'
-import EmojiIcon from '@material-ui/icons/EmojiEmotionsRounded'
+import { Send, EmojiEmotionsRounded } from '@material-ui/icons'
 import EmojiPicker from 'emoji-picker-react'
 
 const useStyles = makeStyles((theme) => ({
@@ -58,7 +57,7 @@
         className="send-message-card"
         className={classes.root}>
         <IconButton aria-describedby={id} variant="contained" color="primary" onClick={handleOpenEmojiPicker}>
-          <EmojiIcon />
+          <EmojiEmotionsRounded />
         </IconButton>
         <Popper
           id={id}
@@ -66,7 +65,7 @@
           anchorEl={anchorEl}
           onClose={handleClose}
         >
-          <EmojiPicker
+          <EmojiPicker.default
             onEmojiClick={onEmojiClick}
             disableAutoFocus={true}
             disableSkinTonePicker={true}
@@ -82,7 +81,7 @@
           onChange={handleInputChange}
         />
         <IconButton type="submit" className={classes.iconButton} aria-label="search">
-          <SendIcon />
+          <Send />
         </IconButton>
       </Paper>
     </div>
diff --git a/client/src/index.js b/client/src/index.js
index f4c1f23..054afae 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,24 +1,30 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.scss';
-import App from './App';
-//import * as serviceWorker from './serviceWorker';
-const rootEl = document.getElementById('root');
+'use strict'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { BrowserRouter as Router } from 'react-router-dom'
+import App from './App.js'
+import './index.scss'
+
+//import * as serviceWorker from './serviceWorker'
+const rootEl = document.getElementById('root')
 
 const render = Component =>
 ReactDOM.render(
   <React.StrictMode>
+    <Router>
     <Component />
+    </Router>
   </React.StrictMode>,
   rootEl
-);
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-//serviceWorker.unregister();
+//serviceWorker.unregister()
 render(App)
-if (module.hot) module.hot.accept('./App', () => {
+
+if (import.meta.webpackHot) import.meta.webpackHot.accept('./App', () => {
   try {
     render(App)
   } catch (e) {
diff --git a/client/src/pages/loginDialog.jsx b/client/src/pages/loginDialog.jsx
index 93f9f59..4e15ae1 100644
--- a/client/src/pages/loginDialog.jsx
+++ b/client/src/pages/loginDialog.jsx
@@ -105,7 +105,7 @@
             submitted: true,
             loading: true
         })
-        authManager.authenticate()
+        authManager.authenticate('admin', 'admin')
         /*fetch('/api/localLogin?username=none&password=none', {
             header: { "Content-Type": "application/json" },
             method: "POST",
diff --git a/client/src/pages/serverSetup.jsx b/client/src/pages/serverSetup.jsx
new file mode 100644
index 0000000..70f9342
--- /dev/null
+++ b/client/src/pages/serverSetup.jsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { useHistory } from "react-router-dom";
+
+import { Box, Container, Fab, Card, CardContent, Typography, Input } from '@material-ui/core';
+import GroupAddRounded from '@material-ui/icons/GroupAddRounded';
+import { makeStyles } from '@material-ui/core/styles';
+import authManager from '../AuthManager'
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+  extendedIcon: {
+    marginRight: theme.spacing(1),
+  },
+  wizardCard: {
+    borderRadius: 8,
+    maxWidth: 360,
+    margin: "16px auto"
+  }, textField: {
+    margin: theme.spacing(1),
+  }
+}))
+
+export default function ServerSetup(props) {
+  const classes = useStyles()
+  const history = useHistory();
+  const [password, setPassword] = useState('');
+  const [passwordRepeat, setPasswordRepeat] = useState('');
+
+  const isValid = () => password && password === passwordRepeat
+
+  const handleSubmit = async e => {
+    e.preventDefault()
+    if (!isValid())
+      return
+    if (await authManager.setup(password)) {
+      history.replace('/')
+    }
+  }
+
+  return (
+    <Container className='message-list'>
+      <Card  className={classes.wizardCard}>
+        <CardContent component="form" onSubmit={handleSubmit}>
+          <Typography gutterBottom variant="h5" component="h2">
+          Jami Web Node setup
+          </Typography>
+          <Typography variant="body2" color="textSecondary" component="p">
+            Welcome to the Jami web node setup.<br/>
+            Let's start by creating a new administrator account to control access to the server configuration.
+          </Typography>
+
+          <Typography variant='body1'></Typography>
+          <div><Input className={classes.textField} value="admin" name="username" autoComplete="username" disabled /></div>
+          <div><Input
+            className={classes.textField}
+            value={password}
+            onChange={e => setPassword(e.target.value)}
+            name="password"
+            type='password'
+            placeholder="New password"
+            autoComplete="new-password" />
+          </div>
+          <div><Input
+            className={classes.textField}
+            value={passwordRepeat}
+            onChange={e => setPasswordRepeat(e.target.value)}
+            name="password"
+            error={!!passwordRepeat && !isValid()}
+            type='password'
+            placeholder="Repeat password"
+            autoComplete="new-password" /></div>
+          <Box style={{ textAlign: 'center', marginTop: 16 }}>
+            <Fab variant='extended' color='primary' type='submit' disabled={!isValid()}>
+              <GroupAddRounded className={classes.extendedIcon} />
+              Create admin account
+            </Fab>
+          </Box>
+        </CardContent>
+      </Card>
+    </Container>)
+}
diff --git a/client/webpack.config.js b/client/webpack.config.js
index f3b38cd..82caf43 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -1,27 +1,38 @@
 'use strict'
-const path = require('path')
-require('dotenv').config({ path: path.resolve(__dirname, '..', '.env') })
-const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+import dotenv from 'dotenv'
+dotenv.config({ path: resolve(import.meta.url, '..', '.env') })
+
+import { resolve } from 'path'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 const mode = process.env.NODE_ENV || 'development'
 
-let entry = [path.resolve(__dirname, 'src', 'index.js')]
+let entry = [resolve(__dirname, 'src', 'index.js')]
 let plugins = [new HtmlWebpackPlugin({
-    template: path.resolve(__dirname, 'src', 'index.ejs')
+    template: resolve(__dirname, 'src', 'index.ejs')
 })]
 let devtool = undefined
+let babelLoaderPlugins = ["@babel/plugin-transform-runtime"]
 
 if (mode === 'development') {
-    const webpack = require('webpack')
-    entry = ['react-hot-loader/patch', 'webpack-hot-middleware/client', ...entry]
-    plugins = [new webpack.HotModuleReplacementPlugin(), ...plugins]
+    const webpack = (await import('webpack')).default
+    const ReactRefreshWebpackPlugin = (await import('@pmmmwh/react-refresh-webpack-plugin')).default
+    entry = ['webpack-hot-middleware/client', ...entry]
+    plugins = [new webpack.HotModuleReplacementPlugin(), new ReactRefreshWebpackPlugin(), ...plugins]
+    babelLoaderPlugins = [...babelLoaderPlugins, "react-refresh/babel"]
     devtool = 'inline-source-map'
 }
 console.log(`Webpack configured for ${mode}`)
 
-module.exports = {
+export default {
     entry,
     output: {
-        path: path.resolve(__dirname, 'dist'),
+        path: resolve(__dirname, 'dist'),
         filename: 'bundle.js',
         publicPath: '/'
     },
@@ -31,14 +42,20 @@
         rules: [
             {
                 test: /\.jsx?/,
+                resolve: {
+                    fullySpecified: false
+                },
                 exclude: /node_modules/,
                 use: {
                     loader: 'babel-loader',
                     options: {
-                        presets: [['@babel/preset-env', {
-                            useBuiltIns: 'entry',
-                            corejs:{ version: "3.10", proposals: true },
-                        }], '@babel/preset-react']
+                        plugins: babelLoaderPlugins,
+                        presets: [
+                            ['@babel/preset-env', {
+                                useBuiltIns: 'entry',
+                                corejs:{ version: "3.10", proposals: true },
+                            }],
+                            '@babel/preset-react']
                     }
                 }
             },