diff --git a/src/static/app.mjs b/src/static/app.mjs
index 358a66e..bfe4032 100644
--- a/src/static/app.mjs
+++ b/src/static/app.mjs
@@ -1,11 +1,20 @@
+"use strict";
+
 import SystemQueryClient from './js/SystemQueryClient.mjs';
 import make_router from './js/routes_client.mjs';
 
+import TableView from './js/TableView.mjs';
+
 window.addEventListener("load", async (_event) => {
+	const el_version = document.querySelector(".version");
+	const el_table = document.querySelector("main");
+	
 	globalThis.sysquery = new SystemQueryClient();
 	globalThis.sysquery_router = make_router();
+	globalThis.sysui = {
+		tableview: new TableView(el_table)
+	}
 	
-	const el_version = document.querySelector(".version");
 	
 	
 	const status = await globalThis.sysquery.status();
diff --git a/src/static/js/TableView.mjs b/src/static/js/TableView.mjs
new file mode 100644
index 0000000..250ba97
--- /dev/null
+++ b/src/static/js/TableView.mjs
@@ -0,0 +1,27 @@
+"use strict";
+
+class TableView {
+	constructor(el) {
+		if(this.el === null || typeof this.el === "undefined") throw new Error(`Expected HTML element as the first argument, but got null or undefined.`);
+		this.el = el;
+		this.el_parts = new Map();
+	}
+	
+	clear() {
+		this.el.replaceChildren();
+		this.el_parts.clear();
+	}
+	
+	async switch_table(table_name) {
+		this.clear();
+		for await (let tabledef of await globalThis.sysquery.table(table_name)) {
+			this.append_table(tabledef.peer, tabledef.table);
+		}
+	}
+	
+	append_table(peer, table) {
+		
+	}
+}
+
+export default TableView;