diff --git a/client/src/components/UsernameChooser.js b/client/src/components/UsernameChooser.js
index 7703639..0061701 100644
--- a/client/src/components/UsernameChooser.js
+++ b/client/src/components/UsernameChooser.js
@@ -1,48 +1,59 @@
-import { useEffect, useState } from 'react'
-import usePromise from "react-fetch-hook/usePromise"
-import { InputAdornment, TextField } from '@mui/material'
-import { SearchRounded } from '@mui/icons-material'
-import authManager from '../AuthManager'
+import { useEffect, useState } from 'react';
+import usePromise from 'react-fetch-hook/usePromise';
+import { InputAdornment, TextField } from '@mui/material';
+import { SearchRounded } from '@mui/icons-material';
+import authManager from '../AuthManager';
 
-const isInputValid = input => input && input.length > 2
+const isInputValid = (input) => input && input.length > 2;
 
 export default function UsernameChooser(props) {
-  const [query, setQuery] = useState('')
+  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])
+  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('')
+      if (error === 404) props.setName(query);
+      else props.setName('');
     }
-  }, [query, isLoading, data, error])
+  }, [query, isLoading, data, error]);
 
-  const handleChange = event => setQuery(event.target.value)
+  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>
-          )
-        }}
-      />
-  )
+    <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>
+        ),
+      }}
+    />
+  );
 }