diff --git a/client/src/components/ConversationView.js b/client/src/components/ConversationView.js
index 075e96a..5cf0e87 100644
--- a/client/src/components/ConversationView.js
+++ b/client/src/components/ConversationView.js
@@ -116,7 +116,7 @@
           <Typography className="subtitle" variant="subtitle1" >{state.conversation.getId()}</Typography>
         </Box>
       </Stack>
-      <Stack flexGrow={1} overflow="auto">
+      <Stack flexGrow={1} overflow="auto" direction="column-reverse">
         <MessageList
           conversationId={state.conversation.getId()}
           loading={loadingMessages} 
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index 8377575..f1cb2d6 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -1,39 +1,11 @@
 import React from 'react'
-import makeStyles from '@mui/styles/makeStyles';
-import { Box, IconButton, InputBase, Paper, Popper } from '@mui/material'
-import { Send, EmojiEmotionsRounded } from '@mui/icons-material'
-import EmojiPicker from 'emoji-picker-react'
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    marginLeft: 16,
-    marginRight: 16,
-    padding: '2px 4px',
-    display: 'flex',
-    alignItems: 'center',
-    borderRadius: 8
-  },
-  input: {
-    marginLeft: theme.spacing(1),
-    flex: 1,
-  },
-  iconButton: {
-    padding: 10,
-  },
-  divider: {
-    height: 28,
-    margin: 4,
-  },
-}))
+import { Divider, InputBase } from '@mui/material'
+import { RecordVideoMessageButton, RecordVoiceMessageButton, SelectEmojiButton, SendMessageButton, UploadFileButton } from './buttons';
+import { Stack } from '@mui/system';
 
 export default function SendMessageForm(props) {
-  const classes = useStyles()
-  const [anchorEl, setAnchorEl] = React.useState(null)
   const [currentMessage, setCurrentMessage] = React.useState("")
 
-  const handleOpenEmojiPicker = e => setAnchorEl(anchorEl ? null : e.currentTarget)
-  const handleClose = () => setAnchorEl(null)
-
   const handleSubmit = e => {
     e.preventDefault()
     if (currentMessage) {
@@ -42,55 +14,56 @@
     }
   }
   const handleInputChange = (event) => setCurrentMessage(event.target.value)
-  const onEmojiClick = (e, emojiObject) => {
-    setCurrentMessage(currentMessage + emojiObject.emoji)
-    handleClose()
-  }
-  const open = Boolean(anchorEl)
-  const id = open ? 'simple-popover' : undefined
+
+  const onEmojiSelected = React.useCallback(
+    (emoji) => setCurrentMessage((currentMessage) => currentMessage + emoji),
+    [setCurrentMessage],
+  )
 
   return (
-    <Box >
-      <Paper component="form"
+    <Stack
+      padding="30px 16px 0px 16px"
+    >
+      <Divider
+        sx={{
+          bordeTop: "1px solid #E5E5E5",
+        }}
+      />
+      <Stack
+        component="form"
         onSubmit={handleSubmit}
-        className={classes.root}>
-        <IconButton
-          aria-describedby={id}
-          variant="contained"
-          color="primary"
-          onClick={handleOpenEmojiPicker}
-          size="large">
-          <EmojiEmotionsRounded />
-        </IconButton>
-        <Popper
-          id={id}
-          open={open}
-          anchorEl={anchorEl}
-          onClose={handleClose}
-        >
-          <EmojiPicker.default
-            onEmojiClick={onEmojiClick}
-            disableAutoFocus={true}
-            disableSkinTonePicker={true}
-            native
-          />
-        </Popper>
+        direction="row"
+        alignItems="center"
+        flexGrow={1}
+        spacing="20px"
+        padding="16px 0px"
+      >
+        <UploadFileButton/>
+        <RecordVoiceMessageButton/>
+        <RecordVideoMessageButton/>
 
-        <InputBase
-          className={classes.input}
-          placeholder="Write something nice"
-          height="35"
-          value={currentMessage}
-          onChange={handleInputChange}
+        <Stack
+          flexGrow={1}
+        >
+          <InputBase
+            placeholder="Write something nice"
+            value={currentMessage}
+            onChange={handleInputChange}
+            sx={{
+              fontSize: "15px",
+              color: "black",
+              "& ::placeholder": {
+                color: "#7E7E7E",
+                opacity: 1,
+              },
+            }}
+          />
+        </Stack>
+        <SelectEmojiButton
+          onEmojiSelected={onEmojiSelected}
         />
-        <IconButton
-          type="submit"
-          className={classes.iconButton}
-          aria-label="search"
-          size="large">
-          <Send />
-        </IconButton>
-      </Paper>
-    </Box>
+        { currentMessage && <SendMessageButton type="submit"/> }
+      </Stack>
+    </Stack>
   );
 }
diff --git a/client/src/components/avatar.js b/client/src/components/avatar.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/client/src/components/avatar.js
diff --git a/client/src/components/buttons.js b/client/src/components/buttons.js
index bf4700f..771033b 100644
--- a/client/src/components/buttons.js
+++ b/client/src/components/buttons.js
@@ -1,7 +1,10 @@
 import { QuestionMark } from "@mui/icons-material";
-import { IconButton } from "@mui/material";
+import { Box, IconButton, Popper } from "@mui/material";
+import { blue } from "@mui/material/colors";
 import { styled } from "@mui/styles";
-import { ArrowIcon, CameraIcon, CancelIcon, CrossedEyeIcon, CrossIcon, EyeIcon, FolderIcon, InfoIcon, PenIcon } from "./svgIcons";
+import EmojiPicker from "emoji-picker-react";
+import React from "react";
+import { Arrow2Icon, ArrowIcon, CameraIcon, CameraInBubbleIcon, CancelIcon, CrossedEyeIcon, CrossIcon, EmojiIcon, EyeIcon, FolderIcon, InfoIcon, MicroInBubbleIcon, PaperClipIcon, PenIcon } from "./svgIcons";
 
 const RoundButton = styled(
     ({Icon, ...props}) => (
@@ -34,7 +37,7 @@
     }
 }));
 
-export const CancelButton = (props) => {
+export const CancelPictureButton = (props) => {
     return (
         <RoundButton {...props}
             aria-label="remove picture"
@@ -44,7 +47,7 @@
     )
 }
 
-export const EditButton = (props) => {
+export const EditPictureButton = (props) => {
     return (
         <RoundButton {...props}
             aria-label="edit picture"
@@ -54,7 +57,7 @@
     )
 }
 
-export const UploadButton = (props) => {
+export const UploadPictureButton = (props) => {
     return (
         <RoundButton {...props}
             aria-label="upload picture"
@@ -87,7 +90,7 @@
 export const TipButton = (props) => {
     return (
         <RoundButton {...props}
-            aria-label="informations"
+            aria-label="tip"
             Icon={QuestionMark}
             size="medium"
         />
@@ -97,7 +100,11 @@
 export const BackButton = styled(
     (props) => {
         return (
-            <IconButton {...props} disableRipple={true}>
+            <IconButton
+                {...props}
+                disableRipple={true}
+                aria-label="back"
+            >
                 <ArrowIcon fontSize="inherit"/>
             </IconButton>
         )
@@ -116,7 +123,11 @@
 export const CloseButton = styled(
     (props) => {
         return (
-            <IconButton {...props} disableRipple={true}>
+            <IconButton
+                {...props}
+                disableRipple={true}
+                aria-label="close"
+            >
                 <CrossIcon fontSize="inherit"/>
             </IconButton>
         )
@@ -150,3 +161,105 @@
         background: theme.palette.primary.light,
     },
 }))
+
+const SquareButton = styled(
+    ({Icon, ...props}) => (
+        <IconButton {...props} disableRipple={true}>
+            <Icon fontSize="inherit"/>
+        </IconButton>
+    )
+)(({theme}) => ({
+    color: "#7E7E7E",
+    fontSize: "25px",
+    height: "36px",
+    width: "36px",
+    borderRadius: "5px",
+    "&:hover": {
+        background: "#E5E5E5",
+    },
+}));
+
+export const RecordVideoMessageButton = (props) => {
+    return (
+        <SquareButton {...props}
+            aria-label="record video message"
+            Icon={CameraInBubbleIcon}
+        />
+    )
+}
+
+export const RecordVoiceMessageButton = (props) => {
+    return (
+        <SquareButton {...props}
+            aria-label="record voice message"
+            Icon={MicroInBubbleIcon}
+        />
+    )
+}
+
+export const UploadFileButton = (props) => {
+    return (
+        <SquareButton {...props}
+            aria-label="upload file"
+            Icon={PaperClipIcon}
+        />
+    )
+}
+
+export const SendMessageButton = (props) => {
+    return (
+        <SquareButton {...props}
+            aria-label="send message"
+            Icon={Arrow2Icon}
+        />
+    )
+}
+
+export const SelectEmojiButton = (props) => {
+    const [anchorEl, setAnchorEl] = React.useState(null)
+  
+    const handleOpenEmojiPicker = React.useCallback(
+      e => setAnchorEl(anchorEl ? null : e.currentTarget),
+      [anchorEl],
+    )
+  
+    const handleClose = React.useCallback(
+      () => setAnchorEl(null),
+      [setAnchorEl],
+    )
+  
+    const onEmojiClick = React.useCallback(
+      (e, emojiObject) => {
+        props.onEmojiSelected(emojiObject.emoji)
+        handleClose()
+      },
+      [handleClose, props.onEmojiSelected],
+    )
+  
+    const open = Boolean(anchorEl)
+    const id = open ? 'simple-popover' : undefined
+  
+    return (
+      <Box>
+        <SquareButton
+          aria-describedby={id}
+          aria-label="select emoji"
+          Icon={EmojiIcon}
+          onClick={handleOpenEmojiPicker}
+        />
+        <Popper
+          id={id}
+          open={open}
+          anchorEl={anchorEl}
+          onClose={handleClose}
+        >
+          <EmojiPicker.default
+            onEmojiClick={onEmojiClick}
+            disableAutoFocus={true}
+            disableSkinTonePicker={true}
+            native
+          />
+        </Popper>
+      </Box>
+    )
+  }
diff --git a/client/src/components/svgIcons.js b/client/src/components/svgIcons.js
index bd14ced..5f5dc35 100644
--- a/client/src/components/svgIcons.js
+++ b/client/src/components/svgIcons.js
@@ -20,6 +20,14 @@
     )
 }
 
+export const Arrow2Icon = (props) => {
+    return (
+        <SvgIcon {...props} viewBox="0 0 21.776 20.23">
+            <path style={{fill:"none", stroke:"#7e7e7e", strokeMiterlimit:10, strokeWidth:"1.75px"}} d="M.219 18.221a.771.771 0 0 1-.143-.87l3.942-8.124L.076 1.1A.77.77 0 0 1 1.085.068l18.461 8.461a.765.765 0 0 1 0 1.394L1.085 18.385a.771.771 0 0 1-.867-.164Z" transform="translate(.903 .901)"/>
+        </SvgIcon>
+    )
+}
+
 export const CameraIcon = (props) => {
     return (
         <SvgIcon {...props} viewBox="2 3 20 19">
@@ -28,6 +36,15 @@
     )
 }
 
+export const CameraInBubbleIcon = (props) => {
+    return (
+        <SvgIcon {...props} viewBox="0 0 25 25">
+            <path d="M25 25H12.5A12.379 12.379 0 0 1 0 12.5 12.379 12.379 0 0 1 12.5 0 12.379 12.379 0 0 1 25 12.5ZM12.5 1.75a11 11 0 0 0-7.625 3.125 10.865 10.865 0 0 0 0 15.25A10.781 10.781 0 0 0 12.5 23.25h10.75V12.5a11 11 0 0 0-3.125-7.625A11 11 0 0 0 12.5 1.75Z"/>
+            <path d="M15.125 18.375H6.75a1.329 1.329 0 0 1-1.5-1.25v-8a1.465 1.465 0 0 1 1.375-1.25H15a1.286 1.286 0 0 1 1.375 1.25v.75l1.375-.75A1.146 1.146 0 0 1 19.125 9a1.034 1.034 0 0 1 .625 1v6.25a1.248 1.248 0 0 1-.625 1.125 1.479 1.479 0 0 1-1.25-.125L16.5 16.5v.75a1.276 1.276 0 0 1-1.375 1.125Zm-8.25-1.625h8v-1.625a1.08 1.08 0 0 1 .375-.75.8.8 0 0 1 .75 0l2 1.125v-4.75l-1.875 1.125a.8.8 0 0 1-.75 0 .685.685 0 0 1-.5-.75V9.5h-8Zm11.875-.875Z"/>
+        </SvgIcon>
+    )
+}
+
 export const CancelIcon = (props) => {
     return (
         <SvgIcon {...props} viewBox="2 2 20 20">
@@ -62,6 +79,15 @@
     )
 }
 
+export const EmojiIcon = (props) => {
+    return (
+        <SvgIcon {...props} viewBox="0 0 25 25">
+            <path d="M12.5 0A12.5 12.5 0 1 0 25 12.5 12.537 12.537 0 0 0 12.5 0Zm0 23.25A10.75 10.75 0 1 1 23.25 12.5 10.749 10.749 0 0 1 12.5 23.25Z"/>
+            <path d="M18.25 14a.688.688 0 0 0-.625.25 9.558 9.558 0 0 1-5.125 1.625 7.867 7.867 0 0 1-5.125-1.625C7.25 14 6.875 14 6.75 14a1.34 1.34 0 0 0-.75.25c-.125.125-.125.5-.125.75a.853.853 0 0 0 .375.625A10.559 10.559 0 0 0 12.5 17.5a11.419 11.419 0 0 0 6.25-1.875 1.726 1.726 0 0 0 .375-.5V15a.937.937 0 0 0-.125-.625ZM7.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.049 1.049 0 0 0 7.5 8.5a1.049 1.049 0 0 0-1.125 1.125A1.049 1.049 0 0 0 7.5 10.75ZM17.5 10.75a1.049 1.049 0 0 0 1.125-1.125A1.116 1.116 0 0 0 17.5 8.5a1.208 1.208 0 0 0-1.125 1.125.994.994 0 0 0 1.125 1.125Z"/>
+        </SvgIcon>
+    )
+}
+
 export const EyeIcon = (props) => {
     return (
         <SvgIcon {...props} viewBox="0 0 15.931 10.568">
@@ -101,6 +127,33 @@
     )
 }
 
+export const MicroInBubbleIcon = (props) => {
+    return (
+        <SvgIcon {...props} viewBox="0 0 25 25">
+            <g transform="translate(-2 -2)">
+                <g transform="translate(2 2)">
+                    <path d="M23.375,5.625A12.372,12.372,0,0,0,14.5,2,12.379,12.379,0,0,0,2,14.5,12.379,12.379,0,0,0,14.5,27H27V14.5A12.372,12.372,0,0,0,23.375,5.625ZM25.25,25.25H14.5a11,11,0,0,1-7.625-3.125A10.781,10.781,0,0,1,3.75,14.5,11,11,0,0,1,6.875,6.875a10.865,10.865,0,0,1,15.25,0A10.781,10.781,0,0,1,25.25,14.5Z" transform="translate(-2 -2)"/>
+                    <path d="M16.6,10.35a.649.649,0,0,0-.25.5V12.6a3.125,3.125,0,0,1-6.25,0V10.85a.948.948,0,0,0-.25-.5.649.649,0,0,0-.5-.25h0a.649.649,0,0,0-.5.25.649.649,0,0,0-.25.5V12.6a4.563,4.563,0,0,0,3.875,4.5v.625H11.35a.625.625,0,0,0,0,1.25h3.5a.625.625,0,0,0,0-1.25H13.725V17.1A4.68,4.68,0,0,0,17.6,12.6V10.85a.948.948,0,0,0-.25-.5A.564.564,0,0,0,16.6,10.35Zm-7.25.125Z" transform="translate(-0.35 0.025)"/>
+                </g>
+                <g transform="translate(12.625 8.5)">
+                    <path d="M12.75,15.575a2.241,2.241,0,0,1-2.25-2.25V9.45a2.25,2.25,0,0,1,4.5,0v4A2.138,2.138,0,0,1,12.75,15.575Zm0-6.875a.72.72,0,0,0-.75.75v4a.75.75,0,1,0,1.5,0v-4A.807.807,0,0,0,12.75,8.7Z" transform="translate(-10.5 -7.2)"/>
+                </g>
+            </g>
+        </SvgIcon>
+    )
+}
+
+export const PaperClipIcon = (props) => {
+    return(
+        <SvgIcon {...props} viewBox="0 0 12.208 25.75">
+            <path 
+                style={{ fill:"#7e7e7e", stroke:"#7e7e7e", strokeMiterlimit:10, strokeWidth:".75px" }}
+                d="M5.729 25A5.736 5.736 0 0 1 0 19.271V4.167a4.167 4.167 0 0 1 8.333 0v13.541a2.6 2.6 0 0 1-5.208 0V5.7a.521.521 0 1 1 1.042 0v12.008a1.563 1.563 0 0 0 3.125 0V4.167a3.125 3.125 0 0 0-6.25 0v15.1a4.687 4.687 0 0 0 9.375 0V5.053a.521.521 0 0 1 1.042 0v14.218A5.736 5.736 0 0 1 5.729 25Z"
+            />
+        </SvgIcon>
+    )
+}
+
 export const PenIcon = (props) => {
     return (
         <SvgIcon {...props} viewBox="0 0 14.863 14.863">
diff --git a/client/src/themes/ThemeDemonstrator.js b/client/src/themes/ThemeDemonstrator.js
index 7f4e0f3..968a2a5 100644
--- a/client/src/themes/ThemeDemonstrator.js
+++ b/client/src/themes/ThemeDemonstrator.js
@@ -1,5 +1,5 @@
 import { Button, Stack, Switch, ThemeProvider, Typography } from "@mui/material"
-import { CancelButton, EditButton, UploadButton, TakePictureButton, InfoButton, TipButton, BackButton, CloseButton } from "../components/buttons"
+import { CancelPictureButton, EditPictureButton, UploadPictureButton, TakePictureButton, InfoButton, TipButton, BackButton, CloseButton } from "../components/buttons"
 import { NickNameInput, PasswordInput, RegularInput, UsernameInput } from "../components/inputs"
 import defaultTheme from './default'
 
@@ -24,9 +24,9 @@
                     <Button variant="contained" size="small">Bouton liste préférences</Button>
                 </Stack>
                 <Stack direction="row" spacing="5px">
-                    <CancelButton/>
-                    <EditButton/>
-                    <UploadButton/>
+                    <CancelPictureButton/>
+                    <EditPictureButton/>
+                    <UploadPictureButton/>
                     <TakePictureButton/>
                 </Stack>
                 <Stack direction="row" spacing="5px">