diff --git a/client/src/components/NewContactForm.js b/client/src/components/NewContactForm.js
index ef590c5..c98c9b4 100644
--- a/client/src/components/NewContactForm.js
+++ b/client/src/components/NewContactForm.js
@@ -1,17 +1,51 @@
 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';
 
 class NewContactForm extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {value: ''}
+        this.controller = new AbortController()
+        this.handleChange = this.handleChange.bind(this)
+        this.handleSubmit = this.handleSubmit.bind(this)
+    }
+
+    componentDidMount() {
+        this.controller = new AbortController()
+    }
+
+    componentWillUnmount() {
+        this.controller.abort()
+        this.req = undefined
+    }
+
+    handleChange(event) {
+        this.setState({value: event.target.value})
+        this.props.onChange(event.target.value)
+    }
+
+    handleSubmit(event) {
+        event.preventDefault()
+        if (this.props.onSubmit)
+            this.props.onSubmit(this.state.value)
+    }
+
     render() {
         return (
-            <div className="new-room-form">
-                <form>
-                    <input
-                        type="text"
-                        placeholder="Ajouter un contact"
-                        required />
-                    <button id="create-room-btn" type="submit">+</button>
-                </form>
-            </div>
+            <form className="main-search" onSubmit={this.handleSubmit} noValidate autoComplete="off">
+                <InputBase
+                    className="main-search-input"
+                    type="search"
+                    placeholder="Ajouter un contact"
+                    onChange={this.handleChange}
+                    startAdornment={
+                        <InputAdornment position="start">
+                            <SearchIcon />
+                        </InputAdornment>
+                        } />
+            </form>
         )
     }
 }