diff --git a/main.css b/main.css
new file mode 100644
index 0000000..eb171a2
--- /dev/null
+++ b/main.css
@@ -0,0 +1,39 @@
+body {
+	margin:0;
+}
+
+#root {
+	height: 100vh;
+	width: 100vw;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	justify-items: stretch;
+	align-items: stretch;
+}
+
+#navigation {
+	height: 50px;
+	box-shadow: inset 0 -2px 3px 0 #888;
+}
+
+#view {
+	flex: 1;
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr;
+	grid-template-rows: 1fr 1fr 1fr 1fr;
+	grid-gap: 5%;
+	padding: 5%;
+}
+
+.pecSlot {
+	border: solid 3px #666;
+	border-radius: 6px;
+	user-select: none;	
+}
+
+.empty {
+	color: #666;
+	font-size: 300%;
+	text-align: center;
+}
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..adbcddf
--- /dev/null
+++ b/main.js
@@ -0,0 +1,24 @@
+// Initialize gui
+
+window.app = {};
+app.gui = {};
+app.gui.main = document.createElement("div");
+app.gui.main.id = "root";
+document.body.appendChild(app.gui.main);
+app.gui.menu = document.createElement("nav");
+app.gui.menu.id = "navigation";
+app.gui.main.appendChild(app.gui.menu);
+app.gui.view = document.createElement("div");
+app.gui.view.id = "view";
+app.gui.main.appendChild(app.gui.view);
+// Library popup
+app.gui.library = document.createElement("dev");
+// pre-populate grid with emptys
+for (var x = 0; x < 16; x++) {
+	var name = "pec"+x;
+	var thisPec = app.gui[name] = document.createElement("span");
+	thisPec.classList.add("pecSlot","empty");
+	thisPec.innerHTML = "<p>+</p>";
+	app.gui.view.appendChild(thisPec);
+}
+