diff --git a/apps/api/src/app/auth/auth.service.ts b/apps/api/src/app/auth/auth.service.ts
index 43f053d..84117b4 100644
--- a/apps/api/src/app/auth/auth.service.ts
+++ b/apps/api/src/app/auth/auth.service.ts
@@ -26,14 +26,13 @@ export class AuthService {
   async register(
     registerData: Pick<User, 'email' | 'password'>
   ): Promise<User> {
-    const password = await bcrypt.hash(
-      registerData.password,
-      this.configService.get('PASSWORD_SALT_ROUND')
-    );
+    const password = await bcrypt.hash(registerData.password, 12);
 
     const userExists = await this.userService.getUserByEmail(
-      registerData.email
+      registerData.email,
+      true
     );
+
     if (userExists) {
       throw new ConflictException(AuthError.EMAIL_ALREADY_EXISTS);
     }
diff --git a/apps/api/src/app/message/message.controller.ts b/apps/api/src/app/message/message.controller.ts
index e5bdd65..f0f0810 100644
--- a/apps/api/src/app/message/message.controller.ts
+++ b/apps/api/src/app/message/message.controller.ts
@@ -2,17 +2,20 @@ import { Body, Controller, Get, Param, Post } from '@nestjs/common';
 import { MessageService } from './message.service';
 import { CreateMessageCommand } from './commands';
 import { ApiTags } from '@nestjs/swagger';
+import { Public } from '../auth/decorators';
 
 @ApiTags('Message')
 @Controller('message')
 export class MessageController {
   constructor(private readonly messageService: MessageService) {}
 
+  @Public()
   @Get()
   getMessages() {
     return this.messageService.getMessages();
   }
 
+  @Public()
   @Get('receiver/:id')
   getMessagesByReceiverId(@Param('id') id: string) {
     return this.messageService.getMessagesByReceiverId(id);
@@ -23,6 +26,7 @@ export class MessageController {
     return this.messageService.getMessageById(id);
   }
 
+  @Public()
   @Post()
   createMessage(@Body() data: CreateMessageCommand) {
     return this.messageService.createMessage(data);
diff --git a/apps/api/src/app/user/user.service.ts b/apps/api/src/app/user/user.service.ts
index 5fbd8dc..4a6bab9 100644
--- a/apps/api/src/app/user/user.service.ts
+++ b/apps/api/src/app/user/user.service.ts
@@ -24,10 +24,13 @@ export class UserService {
     return user;
   }
 
-  async getUserByEmail(email: string): Promise<User> {
+  async getUserByEmail(
+    email: string,
+    verification: boolean = false
+  ): Promise<User> {
     const user = await this.prisma.user.findFirst({ where: { email } });
 
-    if (!user) {
+    if (!user && !verification) {
       throw new NotFoundException(UserError.USER_NOT_FOUND);
     }
 
diff --git a/apps/front/components/chat/ChatBox.tsx b/apps/front/components/chat/ChatBox.tsx
index 1569312..19effa0 100644
--- a/apps/front/components/chat/ChatBox.tsx
+++ b/apps/front/components/chat/ChatBox.tsx
@@ -5,70 +5,140 @@ import { useRef } from 'react';
 import MessageItem from './message';
 import { BasicButton } from '../forms/Button';
 
-export default function ChatBox() {
-    const [messages, setMessages] = useState([
-        { text: 'Bonjour, comment puis-je vous aider?', user: 'user1', timestamp: new Date() },
-        { text: 'Voici un exemple de message.', user: 'user2', timestamp: new Date() },
-        { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() },
-        { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() },
-        { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() },
-        { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() },
-        { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() },
-        { text: 'Testons avec plusieurs messages.', user: 'user1', timestamp: new Date() },
+interface ChatProps {
+  chats: [{ text: string; user: string; timestamp: Date }];
+  onMessageSent: (messageText: string) => void;
+}
+
+export default function ChatBox({ chats, onMessageSent }: ChatProps) {
+  const dummyMessages = [
+    {
+      text: 'Bonjour, comment puis-je vous aider?',
+      user: 'user1',
+      timestamp: new Date(),
+    },
+    {
+      text: 'Voici un exemple de message.',
+      user: 'user2',
+      timestamp: new Date(),
+    },
+    {
+      text: 'Testons avec plusieurs messages.',
+      user: 'user1',
+      timestamp: new Date(),
+    },
+    {
+      text: 'Testons avec plusieurs messages.',
+      user: 'user1',
+      timestamp: new Date(),
+    },
+    {
+      text: 'Testons avec plusieurs messages.',
+      user: 'user1',
+      timestamp: new Date(),
+    },
+    {
+      text: 'Testons avec plusieurs messages.',
+      user: 'user1',
+      timestamp: new Date(),
+    },
+    {
+      text: 'Testons avec plusieurs messages.',
+      user: 'user1',
+      timestamp: new Date(),
+    },
+    {
+      text: 'Testons avec plusieurs messages.',
+      user: 'user1',
+      timestamp: new Date(),
+    },
+  ];
+  const [messages, setMessages] = useState([...dummyMessages, ...chats]);
 
-    ]);
-    const [inputValue, setInputValue] = useState(''); 
-    const handleKeyPress = (event: React.KeyboardEvent) => {
-        if (event.key === 'Enter' && !event.shiftKey) { // Vérifier si la touche "Entrée" est pressée sans "Shift"
-            event.preventDefault(); // Prévenir le comportement par défaut (saut de ligne)
-            sendMessage();
-        }
-    };
-    const inputRef = useRef<HTMLInputElement>(null);
-    const sendMessage = () => {
-        if (inputRef.current && inputRef.current.value.trim() !== '') { 
-            setMessages([...messages, { text: inputRef.current.value, user: 'user2', timestamp: new Date() }]);
-            inputRef.current.value = "";
-            setInputValue(''); 
-        }
-    };
+  const [inputValue, setInputValue] = useState('');
+  const handleKeyPress = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      sendMessage();
+    }
+  };
+  const inputRef = useRef<HTMLInputElement>(null);
+  const sendMessage = () => {
+    if (inputRef.current && inputRef.current.value.trim() !== '') {
+      setMessages([
+        ...messages,
+        { text: inputRef.current.value, user: 'user2', timestamp: new Date() },
+      ]);
+      onMessageSent(inputRef.current.value);
+      inputRef.current.value = '';
+      setInputValue('');
+    }
+  };
 
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => { 
-        setInputValue(event.target.value);
-    };
-    const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-    };
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+  };
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  };
 
-    useEffect(() => {
-        scrollToBottom();
-    }, [messages]);
-    return (
-        <Box sx={{ position: 'relative', height: '100%', width: '100%' }}>
-      
-        <Box sx={{ height: 'calc(100% - 60px)', overflowY: 'auto' }}>
-            {messages.map((message, index) => (
-            <MessageItem text={message.text} user={message.user} timestamp={message.timestamp} key={index} />
-            ))}
-            <div ref={messagesEndRef} />
-        </Box>
-            <Box sx={{ position: 'sticky', bottom: 0, display: 'flex', justifyContent: 'flex-end', marginTop: 2 }}>                
-                <BasicInput
-                        label=''
-                        variant='outlined'
-                        forwardedRef={inputRef}
-                        value={inputValue}
-                        onChange={handleInputChange} 
-                />
-                <BasicButton
-                    buttonVariant='contained'
-                    buttonColor='primary'
-                    onClick={sendMessage}
-                    chat='yes'
-                    disabled={inputValue.trim() === ''} 
-                />
-            </Box>
-        </Box>
-    );
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        height: '100%',
+        width: '100%',
+      }}
+    >
+      <Box
+        sx={{
+          height: 'calc(100% - 60px)',
+          overflowY: 'auto',
+          paddingX: '2%',
+        }}
+      >
+        {messages.map((message, index) => (
+          <MessageItem
+            text={message.text}
+            user={message.user}
+            timestamp={message.timestamp}
+            key={index}
+          />
+        ))}
+        <div ref={messagesEndRef} />
+      </Box>
+      <Box
+        sx={{
+          backgroundColor: 'background.default',
+          position: 'sticky',
+          bottom: 0,
+          display: 'flex',
+          justifyContent: 'flex-end',
+          marginTop: 2,
+          zIndex: 999,
+          width: '100%',
+        }}
+      >
+        <BasicInput
+          label=""
+          variant="outlined"
+          forwardedRef={inputRef}
+          value={inputValue}
+          onChange={handleInputChange}
+          onKeyPress={handleKeyPress}
+        />
+        <BasicButton
+          buttonVariant="contained"
+          buttonColor="primary"
+          onClick={sendMessage}
+          chat="yes"
+          disabled={inputValue.trim() === ''}
+        />
+      </Box>
+    </Box>
+  );
 }
diff --git a/apps/front/components/forms/Button.tsx b/apps/front/components/forms/Button.tsx
index ad35ffd..9f4ece1 100644
--- a/apps/front/components/forms/Button.tsx
+++ b/apps/front/components/forms/Button.tsx
@@ -8,19 +8,30 @@ interface BasicButtonProps {
   buttonColor: 'primary' | 'secondary';
   chat: 'yes' | 'no';
   disabled?: boolean;
+  buttonWidth?: number;
 }
 
 export function BasicButton(props: BasicButtonProps) {
-  const { buttonText, buttonVariant, onClick, buttonColor, chat, disabled } = props;
+  const {
+    buttonText,
+    buttonVariant,
+    onClick,
+    buttonColor,
+    chat,
+    disabled,
+    buttonWidth,
+  } = props;
 
   const buttonContent = chat === 'yes' ? <SendIcon /> : buttonText;
 
   return (
     <Button
       variant={buttonVariant}
-      color={buttonColor}
       onClick={onClick}
-      sx={{ color: 'white' }}
+      sx={{
+        color: buttonColor,
+        width: buttonWidth ? `${buttonWidth}%` : undefined,
+      }}
       disabled={disabled}
     >
       {buttonContent}
diff --git a/apps/front/components/forms/Input.tsx b/apps/front/components/forms/Input.tsx
index a2211ac..db9519e 100644
--- a/apps/front/components/forms/Input.tsx
+++ b/apps/front/components/forms/Input.tsx
@@ -7,24 +7,31 @@ interface BasicInputProps {
   variant?: 'standard' | 'filled' | 'outlined';
   value: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 export default function BasicInput(props: BasicInputProps) {
+  const { label, variant, forwardedRef, value, onChange, onKeyPress } = props;
+
   const handleKeyPress = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter' && !event.shiftKey) { 
-        event.preventDefault(); 
-       
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
     }
-};
+  };
   return (
     <TextField
-      sx={{ flexGrow: 1, marginRight: 1 }} 
+      sx={{
+        flexGrow: 1,
+        minWidth: '40%',
+        marginRight: 1,
+      }}
       className="standard-basic"
-      label={props.label !== '' ? props.label : undefined}
-      variant={props.variant || 'standard'}
-      inputRef={props.forwardedRef}
-      value={props.value} 
-      onChange={props.onChange}
+      label={label !== '' ? label : undefined}
+      variant={variant || 'standard'}
+      inputRef={forwardedRef}
+      value={value}
+      onChange={onChange}
+      onKeyPress={onKeyPress}
     />
   );
 }
diff --git a/apps/front/components/forms/LoginForm.tsx b/apps/front/components/forms/LoginForm.tsx
index 2e62fa8..db04d83 100644
--- a/apps/front/components/forms/LoginForm.tsx
+++ b/apps/front/components/forms/LoginForm.tsx
@@ -4,51 +4,73 @@ import { Button, Typography, Divider, Box, Link } from '@mui/material';
 import { BasicButton } from './Button';
 
 interface FormProps {
-  variant: 'login' | 'signup' | 'update';
-  onLogin?: () => void;
-  onSignup?: () => void;
-  onUpdate?: () => void;
+  formVariant: 'login' | 'signup' | 'update';
+  onLogin?: (email: string, password: string) => void;
+  onSignup?: (email: string, password: string, name: string) => void;
+  onUpdate?: (updatedInfo: {
+    name?: string;
+    email?: string;
+    password?: string;
+    confirmPassword?: string;
+  }) => void;
 }
 
-export default function LoginForm({ variant, onLogin, onSignup, onUpdate }: FormProps) {
+export default function LoginForm({
+  onLogin,
+  onSignup,
+  onUpdate,
+  formVariant,
+}: FormProps) {
   const emailRef = useRef<HTMLInputElement>(null);
   const passwordRef = useRef<HTMLInputElement>(null);
   const confirmPasswordRef = useRef<HTMLInputElement>(null);
   const nameRef = useRef<HTMLInputElement>(null);
 
+  const [currentFormVariant, setFormVariant] = useState<
+    'login' | 'signup' | 'update'
+  >(formVariant);
+
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [name, setName] = useState('');
-  const [formVariant, setFormVariant] = useState<'login' | 'signup'>('login');
 
   const toggleFormVariant = () => {
-    setFormVariant(formVariant === 'login' ? 'signup' : 'login');
+    setFormVariant(currentFormVariant === 'login' ? 'signup' : 'login');
   };
 
   const handleSubmit = () => {
-    if (variant === 'login' && onLogin) {
-      onLogin();  
-    } else if (variant === 'signup' && onSignup) {
-      onSignup(); 
-    }
-    else if (variant === 'update' && onUpdate) {
-      onUpdate(); 
+    if (currentFormVariant === 'login' && onLogin) {
+      onLogin(email, password);
+    } else if (currentFormVariant === 'signup' && onSignup) {
+      onSignup(email, password, name);
+    } else if (currentFormVariant === 'update' && onUpdate) {
+      onUpdate({ name, email, password, confirmPassword });
     }
   };
 
   return (
     <Box
       component="form"
-      display="flex"
-      flexDirection="column"
-      alignItems="start"
-      justifyContent="space-around"
-      sx={{width:1, height:1}}
+      sx={{
+        width: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        height: 'fill',
+        gap: 3,
+        paddingLeft: 1 / 5,
+        paddingRight: 1 / 5,
+      }}
     >
-      {variant === 'login' && (<Typography variant="h1">Connexion</Typography>)}
-      {variant === 'signup' && (<Typography variant="h1">Inscription</Typography>)}
-      {variant === 'signup' || variant === 'update' && (
+      {currentFormVariant === 'login' && (
+        <Typography variant="h1">Connexion</Typography>
+      )}
+      {currentFormVariant === 'signup' && (
+        <Typography variant="h1">Inscription</Typography>
+      )}
+      {(currentFormVariant === 'signup' || currentFormVariant === 'update') && (
         <BasicInput
           label="Nom"
           forwardedRef={nameRef}
@@ -71,7 +93,7 @@ export default function LoginForm({ variant, onLogin, onSignup, onUpdate }: Form
         value={password}
         onChange={(e) => setPassword(e.target.value)}
       />
-      {variant === 'signup' || variant === 'update' && (
+      {(currentFormVariant === 'signup' || currentFormVariant === 'update') && (
         <BasicInput
           label="Confirmation de mot de passe"
           forwardedRef={confirmPasswordRef}
@@ -80,15 +102,50 @@ export default function LoginForm({ variant, onLogin, onSignup, onUpdate }: Form
           onChange={(e) => setConfirmPassword(e.target.value)}
         />
       )}
-      {variant === 'login' && (
-        <Typography variant="body1">Pas de compte ?<span onClick={toggleFormVariant}>Créez-en un</span></Typography>
-      )
-      }
-      {variant === 'signup' && (
-        <Typography variant="body1">Vous avez déjà un compte ?<span onClick={toggleFormVariant}>Connectez-vous</span></Typography>
-      )
-      }
-        <BasicButton chat='no' onClick={handleSubmit} buttonText='Valider' buttonVariant='contained' buttonColor='primary' />
+      {currentFormVariant === 'login' && (
+        <Typography variant="body1">
+          Pas de compte ?
+          <Box
+            component="span"
+            sx={{
+              cursor: 'pointer',
+              color: 'text.primary', // Couleur par défaut
+              '&:hover': {
+                color: 'primary.main', // Couleur au survol
+              },
+            }}
+            onClick={toggleFormVariant}
+          >
+            Créez-en un
+          </Box>
+        </Typography>
+      )}
+      {currentFormVariant === 'signup' && (
+        <Typography variant="body1">
+          Vous avez déjà un compte ?
+          <Box
+            component="span"
+            sx={{
+              cursor: 'pointer',
+              color: 'text.primary', // Couleur par défaut
+              '&:hover': {
+                color: 'primary.main', // Couleur au survol
+              },
+            }}
+            onClick={toggleFormVariant}
+          >
+            Connectez-vous
+          </Box>
+        </Typography>
+      )}
+      <BasicButton
+        chat="no"
+        onClick={handleSubmit}
+        buttonText="Valider"
+        buttonVariant="contained"
+        buttonColor="primary"
+        buttonWidth={40}
+      />
     </Box>
   );
 }
diff --git a/apps/front/components/nav/header.tsx b/apps/front/components/nav/header.tsx
index d28ecad..bbecf68 100644
--- a/apps/front/components/nav/header.tsx
+++ b/apps/front/components/nav/header.tsx
@@ -18,8 +18,10 @@ import FormGroup from '@mui/material/FormGroup';
 import MenuItem from '@mui/material/MenuItem';
 import Menu from '@mui/material/Menu';
 import AccountCircle from '@mui/icons-material/AccountCircle';
-import MessagesList from './userlist';
+import MessagesList from './messagelist';
 import { useRef } from 'react';
+import { theme } from '../../style/theme';
+
 const drawerWidth = 240;
 const navItems = ['Home'];
 
@@ -31,7 +33,7 @@ interface HeaderProps {
 export default function DrawerAppBar({ auth, onProfileClick }: HeaderProps) {
   const [mobileOpen, setMobileOpen] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-
+  
   const handleDrawerToggle = () => {
     setMobileOpen(!mobileOpen);
   };
@@ -114,19 +116,18 @@ export default function DrawerAppBar({ auth, onProfileClick }: HeaderProps) {
         </Toolbar>
       </AppBar>
       {auth &&(
-        <nav >
-        <Drawer
-          variant="permanent"
-          sx={{
-            display: { xs: 'none', sm: 'block' },
-            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+        <nav>
+              <Drawer
+                variant="permanent"
+                sx={{
+                  display: { xs: 'none', sm: 'block' },
+                  '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
 
-          }}
-          open
-        >
+                }}
+                open
+              >
           <MessagesList/>
-        </Drawer>
-       
+        </Drawer>   
       </nav>
       )}
     </Box>
diff --git a/apps/front/components/nav/userlist.tsx b/apps/front/components/nav/messagelist.tsx
similarity index 91%
rename from apps/front/components/nav/userlist.tsx
rename to apps/front/components/nav/messagelist.tsx
index 890e3d2..7653cf0 100644
--- a/apps/front/components/nav/userlist.tsx
+++ b/apps/front/components/nav/messagelist.tsx
@@ -4,15 +4,16 @@ import ListItem from '@mui/material/ListItem';
 import Divider from '@mui/material/Divider';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
-import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import AvatarComponent from '../profile/pfp';
-
+import { theme } from '../../style/theme';
 
 
 export default function MessagesList() {
+  const appBarHeight = theme.mixins.toolbar.minHeight;
+  const paddingTopValue = typeof appBarHeight === 'number' ? appBarHeight + 30 : `calc(${appBarHeight} + 10px)`;
   return (
-    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background' }}>
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background', paddingTop: '80px'}}>
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
           <AvatarComponent alt="Remy Sharp" name="Remy Sharp" />
diff --git a/apps/front/components/profile/profile.tsx b/apps/front/components/profile/profile.tsx
index 8b16cb9..97a1274 100644
--- a/apps/front/components/profile/profile.tsx
+++ b/apps/front/components/profile/profile.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Box, Typography, Button, TextField, Avatar } from '@mui/material';
 import AvatarComponent from './pfp';
 import LoginForm from '../forms/LoginForm';
+import { BasicButton } from '../forms/Button';
 
 export default function ProfilePage() {
   const [user, setUser] = useState({
@@ -9,24 +10,67 @@ export default function ProfilePage() {
     email: 'johndoe@example.com',
   });
 
-  const handleLogout = () => {
-  };
+  const handleLogout = () => {};
 
-  const handleDeleteAccount = () => {
-  };
+  const handleDeleteAccount = () => {};
 
-  const handleUpdateInfo = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setUser({ ...user, [event.target.name]: event.target.value });
+  const handleUpdateInfo = (updatedInfo: {
+    name?: string;
+    email?: string;
+    password?: string;
+    confirmPassword?: string;
+  }) => {
+    setUser({ ...user, ...updatedInfo });
   };
 
   return (
-    <Box>
+    <Box
+      sx={{
+        width: 1,
+        height: 1,
+        paddingLeft: '10%',
+        paddingRight: '10%',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        alignItems: 'flex-start',
+      }}
+    >
       <AvatarComponent alt={user.name} name={user.name} />
-      <Typography variant="h6">{user.name}</Typography>
-      <Typography variant="body1">{user.email}</Typography>
-      <LoginForm variant='update'/>
-      <Button onClick={handleLogout}>Se déconnecter</Button>
-      <Button onClick={handleDeleteAccount}>Supprimer le compte</Button>
+      <Typography variant="h1">{user.name}</Typography>
+      <Typography
+        sx={{
+          marginBottom: '5vh',
+        }}
+        variant="h2"
+      >
+        {user.email}
+      </Typography>
+      <LoginForm formVariant="update" onUpdate={handleUpdateInfo} />
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          width: '40%',
+          alignItems: 'center',
+          justifyContent: 'space-around',
+        }}
+      >
+        <BasicButton
+          onClick={handleLogout}
+          buttonText="Se déconnecter"
+          buttonVariant="outlined"
+          chat="no"
+          buttonColor="primary"
+        />
+        <BasicButton
+          onClick={handleDeleteAccount}
+          buttonText="Supprimer le compte"
+          buttonVariant="text"
+          chat="no"
+          buttonColor="primary"
+        />
+      </Box>
     </Box>
   );
 }
diff --git a/apps/front/pages/_app.tsx b/apps/front/pages/_app.tsx
index 3a2122a..8d055df 100644
--- a/apps/front/pages/_app.tsx
+++ b/apps/front/pages/_app.tsx
@@ -10,19 +10,127 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { Box } from '@mui/material';
 import ProfilePage from '../components/profile/profile';
 
+interface Message {
+  text: string;
+  user: string;
+  timestamp: Date;
+}
+
 function CustomApp({ Component, pageProps }: AppProps) {
-  var [auth, setAuth] = useState<boolean>(false);
+  const [userId, setUserId] = useState('');
+  const [auth, setAuth] = useState<boolean>(false);
+  const [messages, setMessages] = useState<Message[]>([
+    { text: '', user: 'user1', timestamp: new Date() },
+  ]);
   const appBarHeight = theme.mixins.toolbar.minHeight;
+  const paddingTopValue =
+    typeof appBarHeight === 'number'
+      ? appBarHeight + 30
+      : `calc(${appBarHeight} + 10px)`;
+
   const isDesktop = useMediaQuery(theme.breakpoints.up('sm'));
-  const drawerWidth = 240; 
+  const drawerWidth = 240;
   const [showProfile, setShowProfile] = useState(false);
+  const apiUrl = 'http://localhost:3000/api';
+  let access_token = '';
+  const parseJwt = (token: string) => {
+    if (!token) {
+      return;
+    }
+    const base64Url = token.split('.')[1];
+    const base64 = base64Url.replace('-', '+').replace('_', '/');
+    return JSON.parse(window.atob(base64));
+  };
+
+  const Login = async (email: string, password: string) => {
+    console.log('login');
+    try {
+      const data = { email, password };
+      const signIn = await fetch(`${apiUrl}/auth/login`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      }).then((res) => res.text());
+      access_token = signIn;
+      const tokenPayload = parseJwt(access_token);
+      setUserId(tokenPayload.sub);
+    } catch (error) {
+      console.error(error);
+    }
+    setAuth(true);
+    getMessages();
+  };
+  const SignUp = async (email: string, password: string, name: string) => {
+    console.log('SignUp');
+
+    try {
+      const data = { email, password, name };
+      console.log(data);
+
+      const signup = await fetch(`${apiUrl}/auth/register`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      }).then((res) => res.json());
+      console.log(signup);
+      Login(email, password);
+      if (signup.error) console.error(signup.message);
+    } catch (error) {
+      console.error(error);
+    }
+
+    // setAuth(true);
+  };
+
+  const getMessages = async () => {
+    const fetchedMessages = await fetch(
+      `${apiUrl}/message/receiver/d685ecf9-8c83-474b-85fa-daa0ebb795cf`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    ).then((res) => res.json());
+    const checkedMessages = fetchedMessages.map((message: any) => {
+      let user = 'user1';
+      if (message.receiver == userId) {
+        user = 'user2';
+      }
+      return {
+        text: message.text,
+        user: user,
+        timestamp: message.created_at,
+      };
+    });
+    console.log(checkedMessages);
+
+    setMessages(checkedMessages);
+    console.log(messages);
+  };
+
+  const postMessage = async (textMessage: string) => {
+    const data = {
+      sender_id: userId,
+      text: textMessage,
+      receiver_id: 'd685ecf9-8c83-474b-85fa-daa0ebb795cf',
+    };
+    console.log(data);
+
+    const post = await fetch(`${apiUrl}/message`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    }).then((res) => res.json());
+    console.log(post);
+  };
 
-  const Login = () => {
-    setAuth(true)
-  }
-  const SignUp = () => {
-    setAuth(true)
-  }
   const toggleProfile = () => {
     setShowProfile(!showProfile);
   };
@@ -32,17 +140,41 @@ function CustomApp({ Component, pageProps }: AppProps) {
         <title>Web Chat</title>
       </Head>
 
-      <main style={{ 
-        paddingTop: appBarHeight, 
-        paddingLeft: isDesktop ? drawerWidth : 0,
-        minHeight: '100vh',
-        overflow: 'hidden'
-      }}>
-        <Header auth={auth} onProfileClick={toggleProfile}  />
-        <Box display="flex" justifyContent="center" alignItems="center" minHeight="100vh" width="100%" >
-        {auth ? (showProfile ? <ProfilePage /> : <ChatBox />) : <LoginForm variant='login'onLogin={Login} onSignup={SignUp} />}
+      <main
+        style={{
+          paddingTop: paddingTopValue,
+          paddingLeft: isDesktop ? drawerWidth : 0,
+          minHeight: '100vh',
+        }}
+      >
+        <Header auth={auth} onProfileClick={toggleProfile} />
+        <Box
+          sx={{
+            display: 'flex',
+            width: 1,
+            height: 1,
+            maxHeight: 1,
+            minHeight: 1,
+          }}
+        >
+          {auth ? (
+            showProfile ? (
+              <ProfilePage />
+            ) : messages ? (
+              <ChatBox
+                chats={[
+                  ...messages,
+                  { text: 'oui', user: 'user2', timestamp: new Date() },
+                ]}
+                onMessageSent={postMessage}
+              />
+            ) : (
+              <p>no messages ...</p>
+            )
+          ) : (
+            <LoginForm formVariant="login" onLogin={Login} onSignup={SignUp} />
+          )}
         </Box>
-        
       </main>
     </ThemeProvider>
   );