diff --git a/jaas-client/src/components/ContactList.js b/jaas-client/src/components/ContactList.js
new file mode 100644
index 0000000..af232a0
--- /dev/null
+++ b/jaas-client/src/components/ContactList.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+class ContactList extends React.Component {
+    render() {
+
+        return (
+            <div className="rooms-list">
+                <ul>
+                    <h3>Liste de contacts</h3>
+                </ul>
+            </div>
+        )
+    }
+}
+
+export default ContactList
\ No newline at end of file
diff --git a/jaas-client/src/components/Header.js b/jaas-client/src/components/Header.js
new file mode 100644
index 0000000..22a6c74
--- /dev/null
+++ b/jaas-client/src/components/Header.js
@@ -0,0 +1,43 @@
+import React from 'react'
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import { useHistory } from "react-router-dom";
+
+export default function Header() {
+    const history = useHistory();
+
+    const [anchorEl, setAnchorEl] = React.useState(null);
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const disconnect = () => {
+        let path = `/`;
+        history.push(path);
+    }
+
+    return (
+        <div>
+            <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
+                Menu
+      </Button>
+            <Menu
+                id="simple-menu"
+                anchorEl={anchorEl}
+                keepMounted
+                open={Boolean(anchorEl)}
+                onClose={handleClose}
+            >
+                <MenuItem onClick={handleClose}>Profile</MenuItem>
+                <MenuItem onClick={handleClose}>Mon compte</MenuItem>
+                <MenuItem onClick={disconnect}>Déconnexion</MenuItem>
+            </Menu>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/jaas-client/src/components/Message.js b/jaas-client/src/components/Message.js
new file mode 100644
index 0000000..2e1c086
--- /dev/null
+++ b/jaas-client/src/components/Message.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+function Message(props) {
+    return (
+        <div className="message">
+            <div className="message-username">{props.username}</div>
+            <div className="message-text">{props.text}</div>
+        </div>
+    )
+}
+
+export default Message
\ No newline at end of file
diff --git a/jaas-client/src/components/MessageList.js b/jaas-client/src/components/MessageList.js
new file mode 100644
index 0000000..08bdbea
--- /dev/null
+++ b/jaas-client/src/components/MessageList.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import Message from './Message'
+
+
+class MessageList extends React.Component {
+    render() {
+        return (
+            <div className="message-list">
+
+                {
+                    this.props.messages.map((message, index) => {
+                        /*DUMMY_DATA.map((message, index) => {*/
+                        return (
+                            <Message key={index} username={message.senderId} text={message.text} />
+                        )
+                    })}
+            </div>
+        )
+    }
+}
+
+export default MessageList
\ No newline at end of file
diff --git a/jaas-client/src/components/NewContactForm.js b/jaas-client/src/components/NewContactForm.js
new file mode 100644
index 0000000..ef590c5
--- /dev/null
+++ b/jaas-client/src/components/NewContactForm.js
@@ -0,0 +1,19 @@
+import React from 'react'
+
+class NewContactForm extends React.Component {
+    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>
+        )
+    }
+}
+
+export default NewContactForm
\ No newline at end of file
diff --git a/jaas-client/src/components/SendMessageForm.js b/jaas-client/src/components/SendMessageForm.js
new file mode 100644
index 0000000..e52635d
--- /dev/null
+++ b/jaas-client/src/components/SendMessageForm.js
@@ -0,0 +1,51 @@
+import React from 'react'
+import InputEmoji from "react-input-emoji";
+
+class SendMessageForm extends React.Component {
+
+    constructor() {
+        super()
+        this.state = {
+            message: ''
+        }
+        this.handleChange = this.handleChange.bind(this)
+        this.handleSubmit = this.handleSubmit.bind(this)
+    }
+
+    handleChange(e) {
+        this.setState({
+            message: e
+        })
+    }
+
+    handleSubmit(e) {
+        //e.preventDefault()
+        this.props.sendMessage(this.state.message)
+        //this.props.sendMessage(this.state.message)
+        this.setState({
+            message: ''
+        })
+
+    }
+
+    render() {
+        return (
+            <div
+                //onSubmit={this.handleSubmit}
+                className="send-message-form">
+                <InputEmoji
+                    disabled={this.props.disabled}
+                    onChange={this.handleChange}
+                    value={this.state.message}
+                    cleanOnEnter
+                    onEnter={this.handleSubmit}
+                    placeholder="Écris ton message et cliques sur Entrer"
+                    height="35"
+                />
+
+            </div>
+        )
+    }
+}
+
+export default SendMessageForm
\ No newline at end of file