diff --git a/' b/'
new file mode 100644
index 0000000..d0f9f77
--- /dev/null
+++ b/'
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
+        <script>  
+            window.addEventListener("load", function(evt) {
+                var output = document.getElementById("output");
+                var input = document.getElementById("input");
+                var ws;
+            
+                var print = function(message) {
+                    var before = output.innerHTML.split("<br>");
+                    before.unshift(`<span>${new Date().toLocaleTimeString()} | ${message}</span>`);
+                    if (before.length > 20) {
+                        before = before.slice(0, 20);
+                    }
+                    var after = before.join("<br>");
+                    output.innerHTML = after;
+                    output.scroll(0, 0);
+                };
+
+                const synth = window.speechSynthesis;
+                const voices = synth.getVoices().sort(function (a, b) {
+                    const aname = a.name.toUpperCase();
+                    const bname = b.name.toUpperCase();
+
+                    if (aname < bname) {
+                        return -1;
+                    } else if (aname == bname) {
+                        return 0;
+                    } else {
+                        return +1;
+                    }
+                });
+                var voices_idx = 0;
+
+                {
+                    var ele = document.getElementById("voices");
+                    for(var i in voices) {
+                        var voice = voices[i];
+                        const opt = document.createElement("input");
+                        opt.type = "radio";
+                        opt.name = "voice";
+                        opt.id = `voices-${i}-${voice.name}`
+                        opt.value = i;
+
+                        const label = document.createElement("label");
+                        label.for = opt.id;
+                        label.textContent = voice.name;
+
+                        ele.appendChild(opt);
+                        ele.appendChild(label);
+                        ele.appendChild(document.createElement("br"));
+                    }
+                }
+            
+                ws = new WebSocket("ws://"+window.location.host+"/ws");
+                ws.onopen = function(evt) {
+                    print("READY");
+                }
+                ws.onclose = function(evt) {
+                    print("CLOSE");
+                    ws = null;
+                }
+                ws.onmessage = function(evt) {
+                    console.log("evt.data:", evt.data)
+                    const data = JSON.parse(evt.data);
+
+                    const utterThis = new SpeechSynthesisUtterance(data.Text);
+
+                    const idx = data.VoiceIdx || 0;
+                    utterThis.voice = voices[idx];
+
+                    if (data.Pitch) {
+                        utterThis.pitch = data.Pitch
+                    }
+
+                    if (data.Rate) {
+                        utterThis.rate = data.Rate
+                    }
+
+                    window.speechSynthesis.speak(utterThis);
+                    print(data.Text);
+                }
+                ws.onerror = function(evt) {
+                    print("ERROR: " + evt.data);
+                }
+            
+                document.getElementById("send").onclick = function(evt) {
+                    if (!ws || !input.value) {
+                        return false;
+                    }
+
+                    var voiceIdx = "0";
+                    var voiceEles = document.getElementsByName("voice");
+                    for (var i = 0; i < voiceEles.length; i++)
+                        if (voiceEles[i].checked)
+                            voiceIdx = voiceEles[i].value;
+                    
+                    const data = JSON.stringify({
+                        "Text": input.value,
+                        "Pitch": Number.parseInt(document.getElementById("pitch").value, 10),
+                        "Rate": Number.parseFloat(document.getElementById("rate").value, 10),
+                        "VoiceIdx": Number.parseInt(voiceIdx, 10),
+                    });
+
+                    ws.send(data);
+                    print("SENT: " + input.value);
+                    input.value = "";
+                    if (document.getElementById("listen").checked) {
+                        ws.onmessage({data: data});
+                    }
+                    return false;
+                };
+            });
+        </script>
+        <style>
+            #output > span {
+                opacity: 0.33;
+            }
+            #output > span:nth-child(1) {
+                opacity: 1;
+            }
+            #output > span:nth-child(2) 
+            , #output > span:nth-child(3) 
+            {
+                opacity: 0.66;
+            }
+        </style>
+    </head>
+    <body>
+        <div style="width: 80%; height: 80%; margin: auto; display: flex; flex-direction: row;">
+            <div style="display: flex; flex-direction: column;">
+                <form style="flex-grow: 1;">
+                    <p><input id="input" type="textarea" value="" autofocus style="width: 80%">
+                    <p>
+                    <button id="send">Send</button>
+                </form>
+                <div>
+                    <form id="voices"></form>
+
+                    <input id="pitch" type="number" value="0"/>
+                    <label for="pitch">pitch</label></br>
+
+                    <input id="rate" type="number" value="0"/>
+                    <label for="rate">rate</label></br>
+
+                    <input id="listen" type="checkbox" />
+                    <label for="listen">listen</label></br>
+                </div>
+            </div>
+            <div id="output" style="flex-grow: 1; overflow-y: scroll;"></div>
+        </div>
+    </body>
+</html>
diff --git a/src/public/index.html b/src/public/index.html
index 10ec692..d0f9f77 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -13,7 +13,7 @@
             
                 var print = function(message) {
                     var before = output.innerHTML.split("<br>");
-                    before.unshift(`${new Date().toLocaleTimeString()} | ${message}`);
+                    before.unshift(`<span>${new Date().toLocaleTimeString()} | ${message}</span>`);
                     if (before.length > 20) {
                         before = before.slice(0, 20);
                     }
@@ -83,7 +83,7 @@
                     }
 
                     window.speechSynthesis.speak(utterThis);
-                    print("RESPONSE: " + data.Text);
+                    print(data.Text);
                 }
                 ws.onerror = function(evt) {
                     print("ERROR: " + evt.data);
@@ -117,6 +117,19 @@
                 };
             });
         </script>
+        <style>
+            #output > span {
+                opacity: 0.33;
+            }
+            #output > span:nth-child(1) {
+                opacity: 1;
+            }
+            #output > span:nth-child(2) 
+            , #output > span:nth-child(3) 
+            {
+                opacity: 0.66;
+            }
+        </style>
     </head>
     <body>
         <div style="width: 80%; height: 80%; margin: auto; display: flex; flex-direction: row;">
