diff --git a/client/src/components/AccountList.js b/client/src/components/AccountList.js
deleted file mode 100644
index 594c979..0000000
--- a/client/src/components/AccountList.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import { List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
-import ConversationAvatar from './ConversationAvatar'
-
-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>
-            <ConversationAvatar displayName={displayName} />
-          </ListItemAvatar>
-          <ListItemText primary={account.getDisplayName()} secondary={account.getDisplayUri()} />
-        </ListItem>
-      })
-    }
-  </List>
-}
diff --git a/client/src/components/ConversationAvatar.js b/client/src/components/ConversationAvatar.js
index b9160a1..601fcf6 100644
--- a/client/src/components/ConversationAvatar.js
+++ b/client/src/components/ConversationAvatar.js
@@ -1,7 +1,9 @@
-import React from 'react';
-import { Avatar } from '@material-ui/core';
+import React from 'react'
+import { Avatar } from '@material-ui/core'
 import { PersonRounded } from '@material-ui/icons'
 
 export default function ConversationAvatar(props) {
-  return <Avatar>{props.displayName ? props.displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
+  return <Avatar>
+    {props.displayName ? props.displayName[0].toUpperCase() : <PersonRounded />}
+  </Avatar>
 }
diff --git a/client/src/components/ListItemLink.js b/client/src/components/ListItemLink.js
new file mode 100644
index 0000000..8ff17d1
--- /dev/null
+++ b/client/src/components/ListItemLink.js
@@ -0,0 +1,30 @@
+import React, { useMemo, forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import { Link as RouterLink } from 'react-router-dom';
+
+function ListItemLink(props) {
+  const { icon, primary, secondary, to } = props
+
+  const renderLink = useMemo(
+    () => forwardRef((itemProps, ref) => <RouterLink to={to} ref={ref} {...itemProps} />),
+    [to])
+
+  return (
+    <ListItem button component={renderLink}>
+      {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
+      <ListItemText primary={primary} secondary={secondary} />
+    </ListItem>
+  )
+}
+
+ListItemLink.propTypes = {
+  icon: PropTypes.element,
+  primary: PropTypes.string.isRequired,
+  secondary: PropTypes.string,
+  to: PropTypes.string.isRequired,
+}
+
+export default ListItemLink
\ No newline at end of file
diff --git a/client/src/components/Message.js b/client/src/components/Message.js
index f4b4f57..ab28177 100644
--- a/client/src/components/Message.js
+++ b/client/src/components/Message.js
@@ -8,9 +8,9 @@
     if (message.type == 'text/plain')
         return (<div className="message">
             <div className="message-avatar">
-                    <ConversationAvatar name="{message.author}" /></div>
-                    <Typography className="message-text">{message.body}</Typography>
-                </div>)
+                <ConversationAvatar name={message.author} /></div>
+            <Typography className="message-text">{message.body}</Typography>
+        </div>)
     else if (message.type == 'contact')
         return (<div className="contact-event">
             <Typography className="message-text">Contact event</Typography>
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index 82ee7af..fa7c0f2 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -37,8 +37,10 @@
 
   const handleSubmit = e => {
     e.preventDefault()
-    props.onSend(currentMessage)
-    setCurrentMessage('')
+    if (currentMessage) {
+      props.onSend(currentMessage)
+      setCurrentMessage('')
+    }
   }
   const handleInputChange = (event) => setCurrentMessage(event.target.value)
   const onEmojiClick = (e, emojiObject) => {
diff --git a/client/src/components/UsernameChooser.js b/client/src/components/UsernameChooser.js
new file mode 100644
index 0000000..3d795ce
--- /dev/null
+++ b/client/src/components/UsernameChooser.js
@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react'
+import usePromise from "react-fetch-hook/usePromise"
+import { InputAdornment, TextField } from '@material-ui/core'
+import { SearchRounded } from '@material-ui/icons'
+import authManager from '../AuthManager'
+
+const isInputValid = input => input && input.length > 2
+
+export default function UsernameChooser(props) {
+  const [query, setQuery] = useState('')
+
+  const { isLoading, data, error } = usePromise(() => isInputValid(query) ? authManager.fetch(`/api/ns/name/${query}`)
+    .then(res => {
+      if (res.status === 200)
+        return res.json()
+      else throw res.status
+    }) : new Promise((res, rej) => rej(400)),
+    [query])
+
+  useEffect(() => {
+    if (!isLoading) {
+      if (error === 404)
+        props.setName(query)
+      else
+        props.setName('')
+    }
+  }, [query, isLoading, data, error])
+
+  const handleChange = event => setQuery(event.target.value)
+
+  return (
+      <TextField
+        className="main-search-input"
+        type="search"
+        placeholder="Register a unique name"
+        error={!error}
+        label={isLoading ? 'Searching...' : (error && error !== 400 ? 'This name is available' : (data && data.address ? 'This name is not available' : ''))}
+        value={query}
+        disabled={props.disabled}
+        onChange={handleChange}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start"><SearchRounded /></InputAdornment>
+          )
+        }}
+      />
+  )
+}