diff --git a/frontend/src/app/pages/altitude/chat/chat.component.scss b/frontend/src/app/pages/altitude/chat/chat.component.scss
index 40df6d3..7f357e8 100644
--- a/frontend/src/app/pages/altitude/chat/chat.component.scss
+++ b/frontend/src/app/pages/altitude/chat/chat.component.scss
@@ -27,6 +27,7 @@
       min-width: 0;
       padding: 0 5px 0 5px;
       min-height: 0;
+      box-sizing: border-box;
     }
   }
 }
diff --git a/frontend/src/app/pages/altitude/chat/components/chat-info/chat-info.component.scss b/frontend/src/app/pages/altitude/chat/components/chat-info/chat-info.component.scss
index d73a494..c98a9b9 100644
--- a/frontend/src/app/pages/altitude/chat/components/chat-info/chat-info.component.scss
+++ b/frontend/src/app/pages/altitude/chat/components/chat-info/chat-info.component.scss
@@ -1,6 +1,16 @@
-.server {
-  padding-left: 10px;
-  font-size: 25px;
-  font-family: minecraft-text, 'opensans-bold', sans-serif;
-  letter-spacing: 2px;
+.full-width {
+  display: flex;
+  align-items: center;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  border-radius: 8px;
+  margin-bottom: 10px;
+}
+
+.server {
+  font-size: 20px;
+  font-family: minecraft-text, 'opensans-bold', sans-serif;
+  letter-spacing: 1px;
+  font-weight: bold;
+  padding-left: 10px;
 }
diff --git a/frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.html b/frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.html
index b4e7eec..a74f664 100644
--- a/frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.html
+++ b/frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.html
@@ -1,8 +1,10 @@
-@for (message of messages(); track message.timestamp) {
-  <p>
-    <span class="date-time" [class.blocked]="!message.notBlocked">
-      [{{ message.timestamp * 1000 | date: 'mediumTime' }}]
-    </span>
-    <mini-message [node]="message.messageJson"></mini-message>
-  </p>
-}
+<div class="message-container">
+  @for (message of messages(); track message.timestamp) {
+    <p class="message">
+      <span class="date-time" [class.blocked]="!message.notBlocked">
+        [{{ message.timestamp * 1000 | date: 'mediumTime' }}]
+      </span>
+      <mini-message [node]="message.messageJson"></mini-message>
+    </p>
+  }
+</div>
diff --git a/frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.scss b/frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.scss
index 9219bed..2ca9f05 100644
--- a/frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.scss
+++ b/frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.scss
@@ -1,3 +1,20 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+.message-container {
+  display: flex;
+  flex-direction: column-reverse;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.message {
+  margin: 5px 0;
+}
+
 .blocked {
   color: red;
 }
diff --git a/frontend/src/app/pages/altitude/chat/components/server-list/server-list.component.scss b/frontend/src/app/pages/altitude/chat/components/server-list/server-list.component.scss
index be1af43..3adb54e 100644
--- a/frontend/src/app/pages/altitude/chat/components/server-list/server-list.component.scss
+++ b/frontend/src/app/pages/altitude/chat/components/server-list/server-list.component.scss
@@ -5,19 +5,25 @@
   .server {
     position: relative;
     display: flex;
-    padding: 2px 2px 2px 10px;
+    align-items: center;
+    padding: 10px 20px;
     border-bottom: 1px solid #222;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: #202c42;
+    }
 
     .server-name {
-      color: white
+      color: white;
+      font-weight: bold;
     }
 
     .notification {
       position: absolute;
-      right: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-      color: blue;
+      right: 15px;
+      color: #3b82f6;
     }
   }
 }
diff --git a/frontend/src/app/pages/altitude/chat/service/chat.service.ts b/frontend/src/app/pages/altitude/chat/service/chat.service.ts
index dfc328f..23e492a 100644
--- a/frontend/src/app/pages/altitude/chat/service/chat.service.ts
+++ b/frontend/src/app/pages/altitude/chat/service/chat.service.ts
@@ -20,7 +20,7 @@ export class ChatService implements OnDestroy {
   private eventSource?: EventSourcePolyfill;
   private readonly authService: AuthService = inject(AuthService)
   private readonly _messages = signal<ChatMessage[]>([])
-  public readonly messages = computed(() => this._messages().filter((message) => message.server === this._selectedServer()));
+  public readonly messages = computed(() => this._messages().filter((message) => message.server === this._selectedServer()).sort((a, b) => a.timestamp - b.timestamp));
   private readonly _servers = signal<ChatServer[]>([])
   public readonly servers = computed(() => this._servers().sort((a, b) => a.server.localeCompare(b.server)));
   private readonly _selectedServer = signal<string>('');