diff --git a/src/index.pug b/src/index.pug
index f811aa0..ea6910b 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -85,7 +85,7 @@ html(lang="en")
             include views/page-circle.pug
 
         if endpoints.get.users
-          #messages(hidden, data-view="messages", no-render).with-sidebar
+          #messages(hidden, data-view="messages", no-render).whitespace-normal
             hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.contacts")
             include views/page-messages.pug
 
diff --git a/src/styles/chat/_index.scss b/src/styles/chat/_index.scss
new file mode 100644
index 0000000..061961b
--- /dev/null
+++ b/src/styles/chat/_index.scss
@@ -0,0 +1,3 @@
+.chat-view {
+  height: calc(100vh - 72px - 78px);
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 16d7809..516229c 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -49,3 +49,4 @@ solid-display>div {
 @import 'left-nav/_index';
 @import 'content/_index';
 @import 'about/_index';
+@import 'chat/_index';
diff --git a/src/views/page-messages.pug b/src/views/page-messages.pug
index 6bf8782..b9a8067 100644
--- a/src/views/page-messages.pug
+++ b/src/views/page-messages.pug
@@ -1,25 +1,27 @@
-.content-box.flex.full-width
+div.segment.lg-full.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.border-bottom.border-color-grey
+  solid-display.labelled-avatar.small(
+    bind-resources
+    fields='segment1(account.picture), segment2(name, hyphen, at, username)'
+    value-hyphen=" - "
+    value-at="@"
 
-  div.content-box__header
-    solid-display(
-      bind-resources
-      fields='avatar-container(account.picture), text(name, hyphen, at, username)'
-      value-hyphen=" - "
-      value-at="@"
+    class-segment1='segment'
+    class-account.picture='avatar small'
+    
+    class-segment2='segment margin-left-xsmall text-xxlarge'
+    class-name='text-color-heading text-uppercase text-semibold'
+    class-hypen=''
+    class-at=''
+    class-username=''
 
-      widget-account.picture='hubl-user-avatar'
-      class-text="avatar-text"
-      class-avatar-container="avatar-container"
-      class-account.picture='avatar'
-      class-name='h1-like'
-      class-hypen='h1-like'
-    )
+    widget-account.picture='hubl-user-avatar'
+  )
 
-  .chat-view
-    solid-xmpp-chat(
-      data-authentication='login',
-      data-auto-login='true',
-      data-websocket-url=`${xmppWebsocket || 'wss://jabber.happy-dev.fr/xmpp-websocket'}`,
-      data-i18n='en',
-      bind-resources
-    )
+.chat-view.segment.lg-full.whitespace-normal
+  solid-xmpp-chat(
+    data-authentication='login',
+    data-auto-login='true',
+    data-websocket-url=`${xmppWebsocket || 'wss://jabber.happy-dev.fr/xmpp-websocket'}`,
+    data-i18n='en',
+    bind-resources
+  )