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>
+          )
+        }}
+      />
+  )
+}