diff --git a/src/components/chat/MessageList.tsx b/src/components/chat/MessageList.tsx
index 4448e81..ffce938 100644
--- a/src/components/chat/MessageList.tsx
+++ b/src/components/chat/MessageList.tsx
@@ -1,23 +1,19 @@
 import type {Message as MessageType, User} from '@prisma/client';
 import Message from '@/components/chat/Message';
-import {Flex, Box} from '@chakra-ui/react';
+import {Flex} from '@chakra-ui/react';
 
 type Props = {
   user: User,
   messages: MessageType[]
 }
 
-const MessageList = ({messages, user}: Props) => {
-  return (
-      <Box w={'70vh'} overflow={'scroll'}>
-        <Flex direction={'column'} gap={1} justifyContent={'flex-end'}>
-          {messages.map((message, index) => <Message
-              align={user.id === message.UserID ? 'right' : 'left'} key={index}
-              message={message}/>,
-          )}
-        </Flex>
-      </Box>
-  );
-};
+const MessageList = ({messages, user}: Props) => (
+    <Flex direction={'column'} gap={1} justifyContent={'flex-end'}>
+      {messages.map((message, index) => <Message
+          align={user.id === message.UserID ? 'right' : 'left'} key={index}
+          message={message}/>,
+      )}
+    </Flex>
+);
 
 export default MessageList;
\ No newline at end of file
diff --git a/src/pages/chat/[id].tsx b/src/pages/chat/[id].tsx
index b56778e..99a3016 100644
--- a/src/pages/chat/[id].tsx
+++ b/src/pages/chat/[id].tsx
@@ -1,4 +1,11 @@
-import {Button, Container, Flex, FormControl, Input} from '@chakra-ui/react';
+import {
+  Box,
+  Container,
+  Flex,
+  FormControl,
+  IconButton,
+  Input,
+} from '@chakra-ui/react';
 import Head from 'next/head';
 import {websiteName} from '@/lib/constants';
 import {useSession} from 'next-auth/react';
@@ -11,6 +18,7 @@ import {io, Socket} from 'socket.io-client';
 import {Message, User} from '@prisma/client';
 import LoadingPage from '@/components/LoadingPage';
 import Navbar from '@/components/Navbar';
+import {ArrowForwardIcon, CalendarIcon} from '@chakra-ui/icons';
 
 export default function ChatId() {
   const router = useRouter();
@@ -56,27 +64,29 @@ export default function ChatId() {
 
   if (status === 'loading') return <LoadingPage/>;
   return (
-      <>
+      <Box bgColor={'gray.50'}>
         <Head><title>{websiteName}</title></Head>
 
         <Navbar/>
 
-        <Container pt={20}>
+        <Container pt={20} bgColor={"white"}>
           <MessageList user={session.user as User} messages={messages}/>
 
-
           <form onSubmit={handleSubmit}>
             <FormControl>
-              <Flex gap={5} py={5}>
-                <Input type={'text'}
-                       onChange={evt => setText(evt.target.value)}
-                       value={text}/>
-                <Button type={'submit'} colorScheme={'purple'}>Envoyer</Button>
+              <Flex gap={2} py={5} width={"100%"}>
+                <Input type={'text'} value={text} flexGrow={"grow"}
+                       onChange={evt => setText(evt.target.value)}/>
+                <IconButton aria-label={"Map"} onClick={evt => {
+                  evt.preventDefault();
+                  router.push("/map");
+                }} icon={<CalendarIcon/>} variant={"outline"}/>
+                <IconButton aria-label={"Envoyer"} variant={"outline"} icon={<ArrowForwardIcon/>} type={"submit"}/>
               </Flex>
             </FormControl>
           </form>
           <AlwaysScrollToBottom/>
         </Container>
-      </>
+      </Box>
   );
 }
\ No newline at end of file
