diff --git a/arrows/left.svg b/arrows/left.svg
new file mode 100644
index 0000000..216f5bc
--- /dev/null
+++ b/arrows/left.svg
@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.39781" height="40.84766" viewBox="0,0,24.39781,40.84766"><g transform="translate(-383.10315,-227.43774)"><g fill="#59d1ff" stroke="none" stroke-width="0" stroke-miterlimit="10"><path d="M383.11376,235.59304c0.0417,-1.28124 0.28408,-3.05221 0.52072,-4.52665c0.06427,-0.40046 0.95106,-2.75365 1.55773,-2.75365c1.46906,0 7.96106,-0.875 14.92534,-0.875c9.3685,0 9.82235,7.18112 1.35686,7.18521c-3.8115,0.00185 -7.59051,0.64161 -9.6918,0.68055c-2.03349,0.03769 1.02447,24.24763 -0.13762,28.15481c-2.69245,9.05257 -7.94532,2.59519 -7.94532,2.59519c0,0 -0.68953,-27.27634 -0.58591,-30.46046z"/></g></g></svg><!--rotationCenter:41.89684967562516:12.562256428571374-->
\ No newline at end of file
diff --git a/arrows/right.svg b/arrows/right.svg
new file mode 100644
index 0000000..9145fe9
--- /dev/null
+++ b/arrows/right.svg
@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30.09294" height="45.84839" viewBox="0,0,30.09294,45.84839"><g transform="translate(-382.61101,-201.83478)"><g fill="#59d1ff" stroke="none" stroke-width="0" stroke-miterlimit="10"><path d="M383.20753,204.06668c0,0 5.25287,-6.45738 7.94532,2.59519c1.16209,3.90718 -1.89587,28.11712 0.13762,28.15481c2.10129,0.03894 5.8803,0.6787 9.6918,0.68055c8.46549,0.00409 8.01164,7.18521 -1.35686,7.18521c-6.96428,0 -13.45628,-0.875 -14.92534,-0.875c-0.60667,0 -1.49346,-2.35319 -1.55773,-2.75365c-0.23664,-1.47444 -0.47902,-3.24541 -0.52072,-4.52665c-0.10362,-3.18412 0.58591,-30.46046 0.58591,-30.46046z"/><path d="M412.70395,238.07506l-9.82048,9.60811l0.44465,-20.24512z"/></g></g></svg><!--rotationCenter:42.38899245042728:38.16522307833455-->
\ No newline at end of file
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..97f2874
--- /dev/null
+++ b/index.css
@@ -0,0 +1,94 @@
+:root,
+input,
+button {
+ font-family: sans-serif;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 100vh;
+
+}
+
+#form {
+ background: rgba(0, 0, 0, 0.15);
+ padding: 0.25rem;
+ box-sizing: border-box;
+ backdrop-filter: blur(10px);
+ position: sticky;
+ bottom: 0;
+}
+
+.inner-form {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
+#input {
+ border: none;
+ padding: 0 1rem;
+ border-radius: 0.3rem;
+ margin: 0.25rem;
+ height: 2rem;
+ flex-grow: 1;
+}
+
+#input:focus {
+ outline: none;
+}
+
+.inner-form>button {
+ background: #333;
+ border: none;
+ padding: 0 1rem;
+ margin: 0.25rem;
+ height: 2rem;
+ border-radius: 3px;
+ outline: none;
+ flex-grow: 1;
+}
+
+button, button a {
+ color: #fff;
+ text-decoration: none;
+}
+
+button a {
+ width: 100%;
+ height: 2rem;
+ text-align: center;
+ line-height:2rem;
+ vertical-align: middle;
+ display: inline-block;
+}
+
+#messages {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+#messages>li {
+ padding: 0.5rem 1rem;
+ white-space: pre-wrap;
+}
+#messages>li>li {
+ margin: 0;
+ line-height: 1em;
+ height: 1em;
+ padding-bottom: 0.1em;
+ overflow: hidden;
+}
+
+
+#messages>li>li>img {
+ height: 1.1em;
+}
+
+#messages>li:nth-child(odd) {
+ background: #efefef;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6f7f524
--- /dev/null
+++ b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <title>Dervland</title>
+ <link rel="stylesheet" href="index.css">
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+ <ul id="messages"></ul>
+ <form id="form" action="">
+ <div class='inner-form'>
+ <input id="input" autocomplete="off" />
+ </div>
+ <div class='inner-form'>
+ <button class='send'><a href='#'>Send</a></button>
+ <button class='next'><a href='#'>Previous</a></button>
+ <button class='prev'><a href='#'>Next</a></button>
+ </div>
+ <div class='inner-form'>
+ <button><a href='https://git.dervland.net/elemental'>Frontends</a></button>
+ <button><a href='https://discord.gg/Wkr7PVk3cF'>Discord</a></button>
+ </div>
+ </form>
+ <script src='/index.js'></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..ae6600c
--- /dev/null
+++ b/index.js
@@ -0,0 +1,76 @@
+
+var messages = document.getElementById('messages');
+var form = document.getElementById('form');
+var input = document.getElementById('input');
+const server = new URLSearchParams(document.location.search).get('server') || '/';
+
+async function goPage(count) {
+ let counter = input.value.match(/[^\s]+$/g);
+ if (!counter) return false;
+
+ input.value = `${input.value.match(/^[^\s]+/g)[0]} ${counter[0] * 1 + count}`;
+ main(new Event('placeholder'));
+ return false;
+}
+
+async function addMsg(msg) {
+ let lines = msg.split('\n');
+ var wrap = document.createElement('li');
+
+ for (let line of lines) {
+ var item = document.createElement('li');
+ item.textContent = line;
+
+ if (line.startsWith('-') || line.startsWith('<')) {
+ let img = new Image();
+ if (line.startsWith('<') || line[2] == '>') {
+ item.textContent = line.slice(3);
+ img.src = `arrows/left.svg`;
+ } else {
+ item.textContent = line.slice(2);
+ img.src = `arrows/right.svg`;
+ }
+ item.insertBefore(img, item.childNodes[0])
+ }
+ wrap.appendChild(item);
+ }
+ messages.appendChild(wrap);
+ window.scrollTo(0, messages.offsetHeight);
+}
+
+async function main(e) {
+ e.preventDefault();
+
+ if (!input.value) return false;
+
+ let msg = await fetch(server, {
+ "method": "POST",
+ "headers": {
+ "content-type": "application/json",
+ },
+ "body": JSON.stringify({ "data": input.value })
+ })
+
+ msg = await msg.text();
+ msg = msg.trim();
+
+ addMsg(input.value)
+ addMsg(msg)
+
+ return false;
+}
+
+form.addEventListener('submit', main);
+
+document.querySelector('.send').addEventListener('click', main);
+document.querySelector('.prev').addEventListener('click', (e) => { e.preventDefault(); return goPage(1) });
+document.querySelector('.next').addEventListener('click', (e) => { e.preventDefault(); return goPage(-1) });
+
+
+input.value = '/help 1';
+goPage(0);
+
+setTimeout(function () {
+ input.value = '/inv 1';
+ goPage(0);
+}, 500)
\ No newline at end of file