diff --git a/client/src/pages/accountCreation.jsx b/client/src/pages/accountCreation.jsx
new file mode 100644
index 0000000..9fc30cf
--- /dev/null
+++ b/client/src/pages/accountCreation.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Container, Card, CardContent, Typography, List, Avatar, Divider } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { DialerSipRounded, GroupOutlined, RoomRounded } from '@material-ui/icons';
+import ListItemLink from '../components/ListItemLink';
+
+const useStyles = makeStyles((theme) => ({
+  wizardCard: {
+    borderRadius: 8,
+    maxWidth: 360,
+    margin: "16px auto"
+  }
+}))
+
+export default function AccountCreationDialog(props) {
+  const classes = useStyles()
+
+  return (
+    <Container>
+      <Card className={classes.wizardCard}>
+        <CardContent>
+          <Typography gutterBottom variant="h5" component="h2">
+            Create new account
+          </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>
+        </CardContent>
+
+        <List className={classes.root}>
+          <ListItemLink
+            to="/newAccount/rendezVous"
+            icon={<Avatar><RoomRounded /></Avatar>}
+            primary="Rendez-vous point"
+            secondary="A Rendez-vous account provides a unique space suitable to easily organize meetings" />
+          <Divider />
+          <ListItemLink
+            to="/newAccount/jami"
+            icon={<Avatar><GroupOutlined /></Avatar>}
+            primary="Jami account"
+            secondary="A pesonal communication account to join a Rendez-vous point or directly contact other Jami users" />
+          <Divider />
+          <ListItemLink
+            to="/newAccount/sip"
+            icon={<Avatar><DialerSipRounded /></Avatar>}
+            primary="SIP Account"
+            secondary="Connect with standard SIP communication providers or classic telephony services" />
+        </List>
+      </Card>
+    </Container>)
+}
diff --git a/client/src/pages/accountSelection.jsx b/client/src/pages/accountSelection.jsx
index 40c0750..0cd9e29 100644
--- a/client/src/pages/accountSelection.jsx
+++ b/client/src/pages/accountSelection.jsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { withRouter } from 'react-router-dom';
-import { Card, CardHeader, Container, CircularProgress } from '@material-ui/core';
+import { Avatar, Card, CardHeader, Container, List } from '@material-ui/core';
 import Header from '../components/Header'
-import AccountList from '../components/AccountList';
 import authManager from '../AuthManager'
 import Account from '../../../model/Account';
 import LoadingPage from '../components/loading';
+import ListItemLink from '../components/ListItemLink';
+import ConversationAvatar from '../components/ConversationAvatar';
+import { AddRounded } from '@material-ui/icons';
 
 const AccountSelection = (props) => {
   const [state, setState] = useState({
@@ -30,7 +31,7 @@
           loaded: true,
           error: true
         })
-      })
+      }).catch(e => console.log(e))
     return () => controller.abort()
   }, [])
 
@@ -42,11 +43,21 @@
       <Container maxWidth="sm" style={{paddingBottom:32}}>
         <Card style={{marginTop:32, marginBottom:32}}>
           <CardHeader title="Choose an account" />
-          <AccountList accounts={state.accounts} onClick={account => props.history.push(`/account/${account.getId()}/settings`)} />
+          <List>
+            {state.accounts.map(account => <ListItemLink key={account.getId()}
+              icon={<ConversationAvatar displayName={account.getDisplayNameNoFallback()} />}
+              to={`/account/${account.getId()}/settings`}
+              primary={account.getDisplayName()}
+              secondary={account.getDisplayUri()} />)}
+            <ListItemLink
+              icon={<Avatar><AddRounded /></Avatar>}
+              to='/newAccount'
+              primary="Create new account" />
+          </List>
         </Card>
       </Container>
     </React.Fragment>
   )
 }
 
-export default withRouter(AccountSelection);
\ No newline at end of file
+export default AccountSelection
\ No newline at end of file
diff --git a/client/src/pages/jamiAccountCreation.jsx b/client/src/pages/jamiAccountCreation.jsx
new file mode 100644
index 0000000..2bd8ea9
--- /dev/null
+++ b/client/src/pages/jamiAccountCreation.jsx
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Container, Card, CardContent, Typography, Fab, CardActions, Box } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { AddRounded } from '@material-ui/icons';
+import UsernameChooser from '../components/UsernameChooser';
+import authManager from '../AuthManager'
+import { useHistory } from 'react-router';
+
+const useStyles = makeStyles((theme) => ({
+  extendedIcon: {
+    marginRight: theme.spacing(1),
+  },
+  wizardCard: {
+    borderRadius: 8,
+    maxWidth: 360,
+    margin: "16px auto"
+  },
+  actionArea: {
+    textAlign: 'center',
+    display: 'block'
+  },
+  chooser: {
+    marginTop: 16
+  }
+}))
+
+export default function JamiAccountDialog(props) {
+  const classes = useStyles()
+  const [name, setName] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(false)
+  const history = useHistory()
+
+  const onSubmit = async event => {
+    event.preventDefault()
+    setLoading(true)
+    const result = await authManager.fetch('/api/accounts', {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        'Account.registeredName': name
+      })
+    })
+      .then(res => res.json())
+      .catch(error => {
+        setLoading(false)
+        setError(error)
+      })
+    console.log(result)
+    if (result && result.accountId)
+      history.replace(`/account/${result.accountId}/settings`)
+  }
+
+  return (
+    <Container>
+      <Card component="form" onSubmit={onSubmit} className={classes.wizardCard}>
+        <CardContent>
+          <Typography gutterBottom variant="h5" component="h2">
+            Create Jami account
+          </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>
+
+          <Box className={classes.chooser} >
+            <UsernameChooser disabled={loading} setName={setName} />
+          </Box>
+        </CardContent>
+        <CardActions className={classes.actionArea}>
+          {error && <Typography color="error">Error: {JSON.stringify(error)}</Typography>}
+          <Fab color="primary" type="submit" variant="extended" disabled={!name || loading}>
+            <AddRounded className={classes.extendedIcon} />
+            Register name
+          </Fab>
+        </CardActions>
+      </Card>
+    </Container>)
+}