diff --git a/res/css/_content.sass b/res/css/_content.sass
index 3a54a1d80ce3ff15d68a5008d59167c04bc8f34b..8e3fbe7c9690ef727a81479f11c1b9470f8af98e 100644
--- a/res/css/_content.sass
+++ b/res/css/_content.sass
@@ -177,8 +177,8 @@
         &:before
           content: ""
           display: inline-block
-          height: 20px
-          width: 20px
+          height: 24px
+          width: 24px
           background-image: url(../icons/dots-horizontal.svg)
           background-size: cover
           vertical-align: top
diff --git a/res/css/search.css b/res/css/search.css
index 24ee91484ff32e911cc7f55d8b0a10aa4bed53b3..7101bccda0e063a65a53907c8a35b3c48de51c6a 100644
--- a/res/css/search.css
+++ b/res/css/search.css
@@ -550,8 +550,8 @@ body {
 .results .buffer .container > .inline-button:before {
     content: "";
     display: inline-block;
-    height: 20px;
-    width: 20px;
+    height: 24px;
+    width: 24px;
     background-image: url(../icons/dots-horizontal.svg);
     background-size: cover;
     vertical-align: top;
diff --git a/res/js/component/app.js b/res/js/component/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..60a3597425688a45f60aef6cda74e8029fb67c69
--- /dev/null
+++ b/res/js/component/app.js
@@ -0,0 +1,91 @@
+const statehandler = new StateHandler();
+
+class App {
+    constructor() {
+        this.navigation = new Navigation();
+        this.buffers = [];
+        this.loadingQuery = 0;
+        this.render();
+        this.navigation.addEventListener('search', query => {
+            this.search(query);
+        });
+        statehandler.addEventListener('update', query => {
+            this.search(query);
+        });
+        statehandler.init();
+    }
+
+    render() {
+        this.elem = function () {
+            var $$a = document.createElement('div');
+            $$a.appendChildren(this.navigation.elem);
+            $$a.appendChildren(this.resultContainer = function () {
+                var $$d = document.createElement('div');
+                $$d.setAttribute('class', 'results');
+                return $$d;
+            }.call(this));
+            return $$a;
+        }.call(this);
+        this.buffers.forEach(buffer => this.insert(buffer));
+    }
+
+    search(query, sender, buffer, network, before, since) {
+        this.clear();
+        this.navigation.input.blur();
+        this.navigation.historyView.resetNavigation();
+        this.navigation.historyView.add(new HistoryElement(query));
+        this.navigation.input.value = query;
+        statehandler.replace(query, sender, buffer, network, before, since);
+        if (query.trim() === '')
+            return;
+        this.loadingQuery++;
+        const queryId = this.loadingQuery;
+        load('web/search/', statehandler.parse()).then(result => {
+            if (this.loadingQuery !== queryId)
+                return;
+            this.buffers = result.map(buffer => {
+                return new Buffer(buffer.bufferid, buffer.buffername, buffer.networkname, buffer.hasmore, buffer.messages.map(msg => {
+                    return new Context(new Message(msg.messageid, msg.time, msg.sender, msg.message));
+                }));
+            });
+            this.buffers.forEach(buffer => this.insert(buffer));
+        });
+    }
+
+    clear() {
+        while (this.buffers.length) {
+            const buffer = this.buffers.pop();
+            this.resultContainer.removeChild(buffer.elem);
+        }
+    }
+
+    clearAll() {
+        this.clear();
+        this.navigation.historyView.clear();
+        statehandler.clear();
+    }
+
+    insert(buffer) {
+        this.resultContainer.appendChild(buffer.elem);
+        buffer.addEventListener('loadMore', () => this.bufferLoadMore(buffer));
+    }
+
+    bufferLoadMore(buffer) {
+        if (buffer.loading)
+            return;
+        buffer.setLoading(true);
+        const offset = buffer.count();
+        console.log(offset);
+        load('web/searchbuffer/', statehandler.parse({
+            buffer: buffer.id,
+            offset: offset
+        })).then(result => {
+            buffer.load(result);
+            buffer.setLoading(false);
+        });
+    }
+}
+
+moment.locale(navigator.languages || navigator.language);
+const app = new App();
+document.body.insertBefore(app.elem, document.body.firstChild);
\ No newline at end of file