diff --git a/src/app/components/Waku.tsx b/src/app/components/Waku.tsx
index 807a846..30f18b8 100644
--- a/src/app/components/Waku.tsx
+++ b/src/app/components/Waku.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Block } from "@/components/Block";
+import { Block, BlockTypes } from "@/components/Block";
 import { Subtitle } from "@/components/Subtitle";
 import { Button } from "@/components/Button";
 import { MessageContent, useWaku } from "@/hooks";
@@ -20,52 +20,53 @@ export const Waku: React.FunctionComponent<{}> = () => {
   );
 
   return (
-    <Block className="mt-10">
+    <Block className="mt-10 flex flex-col md:flex-row lg:flex-row">
       <Block>
-        <Subtitle>
-          Waku
-        </Subtitle>
-        <p className="text-sm">Content topic: {CONTENT_TOPIC}</p>
-      </Block>
+        <Block>
+          <Subtitle>
+            Waku
+          </Subtitle>
+          <p className="text-sm">Content topic: {CONTENT_TOPIC}</p>
+        </Block>
 
-      <Block className="mt-4">
-        <label
-          htmlFor="nick-input"
-          className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-        >
-          Your nickname
-        </label>
-        <input
-          type="text"
-          id="nick-input"
-          placeholder="Choose a nickname"
-          value={nick}
-          onChange={onNickChange}
-          className="w-full mr-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-        />
-      </Block>
-
-      <Block className="mt-4">
-        <Block className="mb-2">
+        <Block className="mt-4 mr-10 min-w-fit">
           <label
-            htmlFor="message-input"
+            htmlFor="nick-input"
             className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
           >
-            Message
+            Your nickname
           </label>
           <input
             type="text"
-            id="message-input"
-            value={text}
-            onChange={onMessageChange}
-            placeholder="Text your message here"
-            className="w-full mr-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            id="nick-input"
+            placeholder="Choose a nickname"
+            value={nick}
+            onChange={onNickChange}
+            className="w-96 mr-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
           />
         </Block>
-        <Button onClick={onSendClick}>Send</Button>
+
+        <Block className="mt-4">
+          <Block className="mb-2">
+            <label
+              htmlFor="message-input"
+              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            >
+              Message
+            </label>
+            <textarea
+              id="message-input"
+              value={text}
+              onChange={onMessageChange}
+              placeholder="Text your message here"
+              className="w-96 h-60 mr-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            />
+          </Block>
+          <Button onClick={onSendClick}>Send</Button>
+        </Block>
       </Block>
 
-      <Block className="mt-8">
+      <Block className="max-w-screen-md mt-10 md:mt-0">
         <p className="text-l mb-4">Messages</p>
         <div>
           <ul>{renderedMessages}</ul>
@@ -83,7 +84,7 @@ function useMessage() {
     setNick(e.currentTarget.value || "");
   };
 
-  const onMessageChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
+  const onMessageChange = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
     setText(e.currentTarget.value || "");
   };
 
@@ -110,7 +111,7 @@ function renderMessage(content: MessageContent) {
         </span>
         :
       </p>
-      <p>{content.text}</p>
+      <p className="break-words">{content.text}</p>
     </li>
   );
 }
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index 8270f84..837dd65 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -4,7 +4,7 @@ import { Waku } from "@/app/components/Waku";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col p-24 font-mono max-w-screen-lg m-auto">
+    <main className="flex min-h-screen flex-col p-24 font-mono max-w-screen-lg">
       <Header />
       <Waku />
     </main>