diff --git a/README.md b/README.md
index 9ea1db5..81f542c 100644
--- a/README.md
+++ b/README.md
@@ -91,7 +91,7 @@ pnpm test
 - no user authentication
 - Client Websockets should be more robust, i.e. reconnecting
 - Client state does not persist on refresh
-- Client messages are rendered all at once, a virtual list would be better after a certain amount of messages
+- Performance: when sending a very large amount of messages, like 100000, the browser will freeze. This is not due to bad rendering per se, but the websocket message ingestion. Fixing this would be quite easy with a server-sided message debounce.
 - Test coverage very limited: only a single component is tested
 - Keyboard navigation and focus management could be improved
 - Entire deployment process is missing, i.e. Dockerfiles, CI/CD, reverse proxy
diff --git a/client/src/components/ChatMessage/ChatMessageDisplay.tsx b/client/src/components/ChatMessage/ChatMessageDisplay.tsx
index b2ff29e..c926c80 100644
--- a/client/src/components/ChatMessage/ChatMessageDisplay.tsx
+++ b/client/src/components/ChatMessage/ChatMessageDisplay.tsx
@@ -39,7 +39,7 @@ function ChatMessageDisplay({
   return (
     <article
       key={message.id}
-      className={`${isOwn ? "ml-auto" : "mr-auto"}`}
+      className={`m-2 ${isOwn ? "ml-auto" : "mr-auto"}`}
       aria-label={`Message from ${message.author.name} on ${timestamp}`}
     >
       <MessageHeader
diff --git a/client/src/components/Layout.tsx b/client/src/components/Layout.tsx
index 043a5b1..2c49006 100644
--- a/client/src/components/Layout.tsx
+++ b/client/src/components/Layout.tsx
@@ -5,11 +5,11 @@ interface LayoutProps {
 function Layout({ children }: LayoutProps) {
   return (
     <>
-      <main className="min-h-screen p-4">
+      <main className="min-h-screen p-1 sm:p-4">
         <header className="top-0 w-full bg-white" role="banner">
-          <h1 className="text-3xl text-center">Simple Chat</h1>
+          <h1 className="text-3xl text-center mb-3">Simple Chat</h1>
         </header>
-        <div className="max-w-2xl md:p-8 m-auto" role="main">
+        <div className="max-w-2xl m-auto" role="main">
           {children}
         </div>
       </main>
diff --git a/client/src/components/MessageDisplay.tsx b/client/src/components/MessageDisplay.tsx
index c426cc4..f2ff888 100644
--- a/client/src/components/MessageDisplay.tsx
+++ b/client/src/components/MessageDisplay.tsx
@@ -37,9 +37,9 @@ function MessageDisplay({ sendMessage }: MessageDisplayProps) {
     sendMessage(editMessage);
   };
 
-  // Scroll to bottom when messages change
   useEffect(() => {
     if (listRef.current) {
+      // Scroll to bottom when messages change
       listRef.current.scrollToItem(state.messages.length - 1);
     }
   }, [state.messages]);
@@ -83,7 +83,7 @@ function MessageDisplay({ sendMessage }: MessageDisplayProps) {
   };
 
   return (
-    <div className="h-[calc(100vh-theme('spacing.48'))]">
+    <div className="h-[calc(100vh-theme('spacing.64'))]">
       <AutoSizer>
         {({ height, width }) => (
           <List
diff --git a/client/src/components/RoomHeader.tsx b/client/src/components/RoomHeader.tsx
index 6c0495f..b15a1a0 100644
--- a/client/src/components/RoomHeader.tsx
+++ b/client/src/components/RoomHeader.tsx
@@ -13,7 +13,9 @@ function RoomHeader(props: RoomHeaderProps) {
     <h2 className="text-xl bg-gray-100 p-4 flex justify-between items-center">
       <span className="font-medium">Room ID: {props.roomId}</span>
       {state.currentUser && (
-        <span className="font-medium">User: {state.currentUser?.name}</span>
+        <span className="font-medium hidden sm:block">
+          User: {state.currentUser?.name}
+        </span>
       )}
       <span
         className={`px-3 py-1 text-sm font-medium rounded-xl ${