diff --git a/client/src/assets/images/logo-only.svg b/client/src/assets/images/logo-only.svg
new file mode 100644
index 0000000..6f3252e
--- /dev/null
+++ b/client/src/assets/images/logo-only.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="146.76816mm"
+   height="146.76816mm"
+   viewBox="0 0 146.76816 146.76816"
+   version="1.1"
+   id="svg376"
+   inkscape:version="1.2-beta (1b65182ce9, 2022-04-05)"
+   sodipodi:docname="logo-only.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview378"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.74564394"
+     inkscape:cx="361.43256"
+     inkscape:cy="284.31801"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs373" />
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(412.61681,-70.306681)">
+    <path
+       d="m -287.75448,268.39575 c 13.33774,0 25.84187,-5.12074 35.24974,-14.52861 9.40787,-9.40787 14.52861,-21.912 14.52861,-35.24974 0,-13.33774 -5.12074,-25.84187 -14.52861,-35.24974 -9.40787,-9.40787 -21.912,-14.52861 -35.24974,-14.52861 -13.33774,0 -25.84187,5.12074 -35.24974,14.52861 -9.40787,9.40787 -14.52861,21.912 -14.52861,35.24974 0,13.33774 5.12074,25.84187 14.52861,35.24974 9.40787,9.40787 21.912,14.52861 35.24974,14.52861 z m 2.85809,-8.45517 c -0.9527,0.11908 -1.90539,0.11908 -2.85809,0.11908 -1.30996,0 -2.61991,-0.11908 -3.92987,-0.23817 -4.28713,-6.66887 -7.50248,-13.81409 -9.40787,-21.31657 h 21.07839 c 0.71452,1.78631 2.02448,3.45352 3.57261,4.52531 -2.02448,5.95435 -4.88256,11.55143 -8.45517,16.91035 z m 11.31326,-2.38174 c 2.26265,-4.16805 4.04896,-8.33609 5.478,-12.74231 3.45352,-0.71452 6.19252,-3.09626 7.50248,-6.31161 h 9.16969 c -4.76348,8.69335 -12.7423,15.48131 -22.15017,19.05392 z m 27.15183,-38.94144 c 0,3.92987 -0.59544,7.74065 -1.54813,11.43235 h -12.8614 c -0.71452,-1.54813 -1.90539,-2.97718 -3.33443,-4.04896 0.23817,-2.61991 0.35726,-5.23982 0.35726,-7.85974 0,-3.69169 -0.23817,-7.38339 -0.71452,-10.956 h 16.434 c 1.19087,3.57261 1.66722,7.50248 1.66722,11.43235 z m -5.00166,-19.88752 h -14.52861 c -1.54813,-6.54979 -3.81078,-12.74231 -6.90704,-18.69666 9.05061,3.45353 16.67217,10.24148 21.43565,18.69666 z m -20.72113,19.41117 c 0,2.02448 -0.11908,4.04896 -0.23817,6.07344 -3.33444,0.71452 -6.07344,2.85808 -7.38339,5.83526 h -22.98379 c -0.47634,-3.57261 -0.83361,-7.26431 -0.83361,-10.83692 0,-2.26265 0.11909,-4.5253 0.35727,-6.78795 3.09626,-0.59544 5.59708,-2.61992 7.14521,-5.23983 h 23.22196 c 0.47635,3.57261 0.71452,7.26431 0.71452,10.956 z m -18.69665,-40.72774 c 1.07178,-0.11909 2.14356,-0.11909 3.09626,-0.11909 1.19087,0 2.38174,0 3.57261,0.11909 4.28713,6.66887 7.50248,13.81409 9.40787,21.31657 h -20.72113 c -0.71452,-2.02448 -2.02448,-3.81079 -3.6917,-5.12074 2.14357,-5.71618 4.88257,-11.07509 8.33609,-16.19583 z m -11.31326,2.38174 c -2.02448,3.81078 -3.81079,7.85974 -5.23983,11.9087 -3.69169,0.71452 -6.66887,3.45352 -7.85974,6.90704 h -8.69335 c 4.6444,-8.45517 12.38505,-15.24313 21.79292,-18.81574 z m -26.91366,38.82235 c 0,-3.92987 0.59544,-7.85974 1.66722,-11.43235 h 12.98048 c 0.71452,1.30996 1.78631,2.50083 2.97717,3.45352 -0.23817,2.85809 -0.47634,5.71618 -0.47634,8.57426 0,3.6917 0.23817,7.26431 0.71452,10.83692 h -16.19583 c -1.19087,-3.6917 -1.66722,-7.50248 -1.66722,-11.43235 z m 19.29209,19.76844 c 1.54813,6.43069 3.81078,12.7423 6.90705,18.69665 -9.05061,-3.57261 -16.55309,-10.24148 -21.19748,-18.69665 z"
+       id="path7"
+       style="fill:#ffd7d7;fill-opacity:1;stroke-width:1.19087"
+       transform="matrix(1.4676816,0,0,1.4676816,83.023709,-177.3159)" />
+  </g>
+</svg>
diff --git a/client/src/components/AppHeader.tsx b/client/src/components/AppHeader.tsx
index 7c41be2..32da63a 100644
--- a/client/src/components/AppHeader.tsx
+++ b/client/src/components/AppHeader.tsx
@@ -1,8 +1,9 @@
-import logo from '@assets/images/logo.svg';
+import logo from '@assets/images/logo-only.svg';
 import { useQuery } from '@tanstack/react-query';
 import { useCookies } from 'react-cookie';
 import Avatar from '@components/Avatar';
 import { getMeInfo } from '@controllers/UserController';
+import { FiLogOut } from 'react-icons/fi';
 
 const AppHeader = () => {
   const meInfo = useQuery(['me'], getMeInfo, {
@@ -22,11 +23,12 @@ const AppHeader = () => {
   return (
     <header className="sticky top-0 z-100 w-full shadow-sm shadow-slate-900">
       <div className="min-h-80 flex items-center justify-between bg-grey-dark p-2">
-        <div className="app-header__logo">
+        <div className="app-header__logo flex items-center gap-3">
           <img src={logo} alt="logo" className="h-14" />
+          <span className="w-0 transition-all duration-500 sm:w-full flex-shrink overflow-hidden text-red font-bold text-4xl">Groupomania</span>
         </div>
         <div className="right">
-          <div className="flex items-center space-x-6">
+          <div className="flex items-center gap-2 sm:gap-4">
             {meInfo.data && <Avatar user={meInfo.data} />}
             <div className="app-header__user__name">
               <span className="text-white">
@@ -37,7 +39,8 @@ const AppHeader = () => {
               className="group relative flex w-auto justify-center rounded-md border border-red bg-red py-2 px-2 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
               onClick={() => logOut()}
             >
-              Deconnexion
+              <FiLogOut className="h-5 w-5" />
+              <span className="w-0 transition-all duration-500 sm:w-full sm:pl-2 origin-left overflow-hidden">Deconnexion</span>
             </button>
           </div>
         </div>
diff --git a/client/src/components/Avatar.tsx b/client/src/components/Avatar.tsx
index cb0baea..742545f 100644
--- a/client/src/components/Avatar.tsx
+++ b/client/src/components/Avatar.tsx
@@ -19,7 +19,7 @@ const Avatar = ({ user }: any) => {
 
   return (
     <div className="avatar shrink-0">
-      <img src={avatar} alt="avatar" className="rounded-full w-16 h-16 cursor-pointer" />
+      <img src={avatar} alt="avatar" className="rounded-full w-12 h-12 md:w-16 md:h-16 transition-all cursor-pointer" />
     </div>
   );
 };
diff --git a/client/src/components/MessageWrapper.tsx b/client/src/components/MessageWrapper.tsx
index 20eb3b3..0cfae61 100644
--- a/client/src/components/MessageWrapper.tsx
+++ b/client/src/components/MessageWrapper.tsx
@@ -20,8 +20,8 @@ const MessageWrapper = () => {
   }
 
   return (
-    <main className="messages-wrapper rounded-md w-full max-w-3xl flex flex-col max-h-[83vh] relative">
-      <ScrollToBottom className="message-container overflow-y-scroll flex flex-col gap-4 w-full pt-4 pb-6 -mb-3">
+    <main className="messages-wrapper rounded-md w-full max-w-3xl flex flex-col flex-shrink relative overflow-y-scroll">
+      <ScrollToBottom className="message-container flex flex-col gap-4 w-full max-w-3xl pt-4 pb-6 -mb-3 px-2 md:px-0">
         {isLoading
           ? ''
           : isError
diff --git a/client/src/components/NewMessage.tsx b/client/src/components/NewMessage.tsx
index 3040689..3ba694f 100644
--- a/client/src/components/NewMessage.tsx
+++ b/client/src/components/NewMessage.tsx
@@ -29,8 +29,8 @@ const NewMessage = () => {
   };
 
   return (
-    <footer className="new-message bg-grey-dark rounded-xl w-full max-w-3xl p-3 gap-5 shadow-md shadow-grey-dark z-10">
-      <form onSubmit={handleSubmit} className="flex gap-2">
+    <footer className="new-message z-10 flex justify-center w-full">
+      <form onSubmit={handleSubmit} className="flex gap-2 bg-grey-dark rounded-xl w-full max-w-3xl p-2 mx-2 sm:p-3 md:mx-0 shadow-md shadow-grey-dark">
         <div className="file">
           <label htmlFor="image" className="cursor-pointer block p-2">
             <div className="rounded-full text-grey-dark bg-red-light text-lg p-2">
diff --git a/client/src/components/ScrollToBottom.tsx b/client/src/components/ScrollToBottom.tsx
index ee50abd..0b4fa32 100644
--- a/client/src/components/ScrollToBottom.tsx
+++ b/client/src/components/ScrollToBottom.tsx
@@ -24,7 +24,7 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
     container?.addEventListener('DOMNodeInserted', () => {
       if (node?.getBoundingClientRect() && node.getBoundingClientRect().y >= window.innerHeight) {
         node?.scrollIntoView({ behavior: 'smooth' });
-      } 
+      }
     });
   }, [node]);
 
@@ -33,15 +33,15 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
       <div className={className}>
         {children}
         <div className="scroll-bottom" ref={bottom}></div>
+        <button
+          onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
+          className={'absolute right-3 transition-all' + (show ? ' bottom-3' : ' -bottom-10')}
+        >
+          <div className="popup-btn cursor-pointer rounded-full shadow-lg shadow-slate-900 bg-grey-dark hover:bg-grey-light transition-all">
+            <FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
+          </div>
+        </button>
       </div>
-      <button
-        onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
-        className={'absolute right-3 transition-all' + (show ? ' bottom-3' : ' -bottom-10')}
-      >
-        <div className="popup-btn cursor-pointer rounded-full shadow-lg shadow-slate-900 bg-grey-dark hover:bg-grey-light transition-all">
-          <FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
-        </div>
-      </button>
     </>
   );
 };
diff --git a/client/src/routes/home.tsx b/client/src/routes/home.tsx
index 940e4c5..3912c88 100644
--- a/client/src/routes/home.tsx
+++ b/client/src/routes/home.tsx
@@ -5,7 +5,7 @@ import 'react-toastify/dist/ReactToastify.css';
 
 const Home = () => {
   return (
-    <div className="min-h-full max-h-full bg-grey flex flex-col items-center">
+    <div className="min-h-full max-h-full bg-grey flex flex-col items-center overflow-y-hidden">
       <AppHeader />
       <MessageWrapper />
       <NewMessage />