diff --git a/examples/noise-js/index.html b/examples/noise-js/index.html
index fea39fc..32cc96f 100644
--- a/examples/noise-js/index.html
+++ b/examples/noise-js/index.html
@@ -8,6 +8,62 @@
     <link rel="manifest" href="./manifest.json" />
     <link rel="icon" href="./favicon.ico" />
     <style>
+      * {
+        margin: 0;
+        padding: 0;
+        word-wrap: break-word;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      html {
+        font-size: 16px;
+        overflow: hidden;
+      }
+
+      body {
+        display: flex;
+        align-items: center;
+        padding: 10px;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      .container {
+        width: 800px;
+        min-width: 300px;
+        max-width: 800px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-content: space-between;
+      }
+
+      h2 {
+        text-align: center;
+        margin-bottom: 5px;
+      }
+
+      h3 {
+        margin-bottom: 10px;
+      }
+
+      h3:last-of-type {
+        margin-bottom: 20px;
+      }
+
+      h2 span,
+      h3 span {
+        font-weight: normal;
+      }
+
       .progress {
         color: #9ea13b;
       }
@@ -19,43 +75,115 @@
       .error {
         color: #c84740;
       }
+
+      button.progress {
+        color: white;
+        background-color: #9ea13b;
+      }
+
+      button.success {
+        color: white;
+        background-color: #3ba183;
+      }
+
+      button.error {
+        color: white;
+        background-color: #c84740;
+      }
+
+      .pairingInfo {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .pairingInfo input {
+        display: block;
+        min-width: 250px;
+        width: 100%;
+        max-width: 600px;
+        font-size: 1.1rem;
+        line-height: 1.5rem;
+        padding: 5px;
+        margin-bottom: 10px;
+      }
+
+      .pairingInfo button {
+        flex-grow: 1;
+        cursor: pointer;
+        padding: 10px;
+      }
+
+      .pairingInfo button + button {
+        margin-left: 5px;
+      }
+
+      .chatArea {
+      }
+
+      .chatArea ul {
+        margin-bottom: 30px;
+        list-style: none;
+      }
+
+      .chatArea ul li + li {
+        margin-top: 5px;
+      }
+
+      .chatArea div {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .chatArea div > * {
+        font-size: 1.1rem;
+        line-height: 1.5rem;
+        padding: 5px;
+        margin-bottom: 10px;
+      }
     </style>
   </head>
   <body>
-    <p><b>Waku Node Status:</b> <span id="waku-status">connecting...</span></p>
-    <p id="handshake-span">
-      <b>Handshake Status:</b> <span id="handshake-status">-</span>
-    </p>
+    <div class="container">
+      <div class="status">
+        <h3>
+          <b>Waku Node Status:</b> <span id="waku-status">connecting...</span>
+        </h3>
+        <h3 id="handshake-span">
+          <b>Handshake Status:</b>
+          <span id="handshake-status" class="progress">waiting for waku</span>
+        </h3>
+      </div>
 
-    <div id="qr-url-container">
-      <p>
-        <b>URL for handshake:</b>
+      <div class="pairingInfo" id="qr-url-container" style="display: none">
+        <h2>Pairing information</h2>
         <input
           type="text"
           id="qr-url"
-          style="display: inline-block; width: 250px"
           readonly
+          placeholder="generating URL..."
         />
-      </p>
-      <button id="copy-url" style="width: 100px">Copy URL</button>
-      <button id="open-tab" style="width: 100px">Open in new</button>
-    </div>
+        <div>
+          <button id="copy-url" style="width: 100px">Copy URL</button>
+          <button id="open-tab" style="width: 100px">Open in new</button>
+        </div>
+        <canvas id="qr-canvas"></canvas>
+      </div>
 
-    <canvas id="qr-canvas"></canvas>
-    <!-- <a href="#" id="qr-url" style="display: none" target="_blank"
-      >Open QR code link in new window instead of scanning it.</a
-    > -->
+      <div class="chatArea" id="chat-area" style="display: none">
+        <h2>Chat</h2>
+        <ul id="messages"></ul>
 
-    <div id="chat-area" style="display: none">
-      <label for="nick-input">Your nickname</label>
-      <input id="nick-input" placeholder="Choose a nickname" type="text" />
-      <label for="text-input">Message text</label>
-      <input id="text-input" placeholder="Type your message here" type="text" />
-      <button id="send-btn" type="button" disabled>Send message</button>
-      <span id="sending-status"></span>
-
-      <h4 class="mu1">Messages</h4>
-      <ul id="messages"></ul>
+        <div>
+          <input id="nick-input" placeholder="Choose a nickname" type="text" />
+          <textarea
+            id="text-input"
+            placeholder="Type your message here"
+            type="text"
+          ></textarea>
+          <button id="send-btn" type="button" disabled>Send message</button>
+        </div>
+      </div>
     </div>
 
     <script src="./index.js"></script>
diff --git a/examples/noise-js/index.js b/examples/noise-js/index.js
index 89a9c9a..1a39a99 100644
--- a/examples/noise-js/index.js
+++ b/examples/noise-js/index.js
@@ -42,10 +42,6 @@ async function main() {
     const myStaticKey = noise.generateX25519KeyPair();
     const urlPairingInfo = getPairingInfoFromURL();
 
-    if (urlPairingInfo) {
-      ui.shareInfo.hide();
-    }
-
     const pairingObj = new noise.WakuPairing(
       sender,
       responder,
@@ -66,6 +62,7 @@ async function main() {
         const pairingURL = buildPairingURLFromObj(pairingObj);
         ui.shareInfo.setURL(pairingURL);
         ui.shareInfo.renderQR(pairingURL);
+        ui.shareInfo.show();
       }
 
       [encoder, decoder] = await pExecute;
@@ -246,8 +243,10 @@ function initUI() {
         qrUrl.value = url;
       },
       hide() {
-        qrCanvas.remove();
-        qrUrlContainer.remove();
+        qrUrlContainer.style.display = "none";
+      },
+      show() {
+        qrUrlContainer.style.display = "flex";
       },
       renderQR(url) {
         QRCode.toCanvas(qrCanvas, url, (err) => {
@@ -316,8 +315,7 @@ function initUI() {
         `;
       },
       _status(text, className) {
-        sendingStatusSpan.innerText = text;
-        sendingStatusSpan.className = className;
+        sendButton.className = className;
       },
       onReceive({ payload }) {
         const { timestamp, nick, text } = ProtoChatMessage.decode(payload);
@@ -353,7 +351,7 @@ function initUI() {
     },
     hide() {
       this.shareInfo.hide();
-      chatArea.remove();
+      chatArea.style.display = "none";
     },
   };
 }
