diff --git a/database/items.db b/database/items.db
index 675286ef..08f2850e 100644
--- a/database/items.db
+++ b/database/items.db
@@ -1,11 +1,4 @@
 {"name":"raw-fish","count":"2","_id":"a0TVkMwP8M99LLbp"}
-{"name":"iron-ore","count":26524,"_id":"bEcyT728rLO8JvqY"}
-{"name":"\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000iron-ore","count":8,"_id":"i6fEF857vuxZpRfw"}
+{"name":"iron-ore","count":25823,"_id":"bEcyT728rLO8JvqY"}
 {"name":"electronic-circuit","count":200,"_id":"n3JBn8ksl9YIkCWy"}
 {"name":"coal","count":10406,"_id":"qnEjvk1EypjWAEQk"}
-{"name":"\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000\u0000iron-ore","count":4,"_id":"xOe2eh4SbnodgQG2"}
-{"name":"iron-ore","count":26523,"_id":"bEcyT728rLO8JvqY"}
-{"name":"iron-ore","count":26522,"_id":"bEcyT728rLO8JvqY"}
-{"name":"iron-ore","count":26513,"_id":"bEcyT728rLO8JvqY"}
-{"name":"iron-ore","count":26423,"_id":"bEcyT728rLO8JvqY"}
-{"name":"iron-ore","count":25823,"_id":"bEcyT728rLO8JvqY"}
diff --git a/master.js b/master.js
index c9c34f53..c95932ef 100644
--- a/master.js
+++ b/master.js
@@ -15,6 +15,10 @@ app.use(bodyParser.urlencoded({ extended: true }));
 
 // Set folder to serve static content from (the website)
 app.use(express.static('static'));
+// Set convenient paths to 3rd party libs like metroUI and jquery from their bower installs
+// Use this to make it nice an easy to change without touching the HTML in production
+app.use(express.static('bower_components/metro-dist'));
+app.use(express.static('bower_components/jquery/dist'));
 
 // set up database
 var Datastore = require('nedb');
@@ -79,6 +83,15 @@ app.post("/remove", function(req, res) {
 	// save items we get
 	db.items.removeitem(req.body, res);
 });
+// endpoint for getting an inventory of what we got
+app.get("/inventory", function(req, res) {
+	res.header("Access-Control-Allow-Origin", "*");
+	res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+	// Check it and send it
+	db.items.find({}, function (err, docs) {
+		res.send(docs);
+	});
+});
 
 var server = app.listen(config.masterPort || 8080, function () {
 	console.log("Listening on port %s...", server.address().port);
diff --git a/server-settings.json b/server-settings.json
new file mode 100644
index 00000000..6e6009ff
--- /dev/null
+++ b/server-settings.json
@@ -0,0 +1,23 @@
+{
+  "name": "Name of the game as it will appear in the game listing",
+  "description": "Description of the game that will appear in the listing",
+  "tags": ["game", "tags"],
+  "max_players": "0",
+
+  "_comment_visibility": ["public: Game will be published on the official Factorio matching server",
+                          "lan: Game will be broadcast on LAN",
+                          "hidden: Game will not be published anywhere"],
+  "visibility": "public",
+
+  "_comment_credentials": "Your factorio.com login credentials. Required for games with visibility public",
+  "username": "",
+  "password": "",
+
+  "_comment_token": "Authentication token. May be used instead of 'password' above.",
+  "token": "",
+
+  "game_password": "",
+
+  "_comment_verify_user_identity": "When set to true, the server will only allow clients that have a valid Factorio.com account",
+  "verify_user_identity": false
+}
diff --git a/static/index.html b/static/index.html
new file mode 100644
index 00000000..9d55d35e
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,30 @@
+<doctype HTML>
+<head>
+	<title>Clusterio</title>
+	<link rel="stylesheet" type="text/css" href="style.css">
+	<script src="main.js"></script>
+</head>
+
+<body>
+	<div id="header">
+		
+	</div>
+	<div id="sidenav">
+		<div id="logo">
+			<h1>Clusterio</h1>
+		</div>
+		<div id="storage" class="button-black">
+			<p>Storage</p>
+		</div>
+		<div id="production" class="button-black">
+			<p>Production</p>
+		</div>
+	</div>
+	<div id="body">
+		<div id="storage">
+			<h2>Storage</h2>
+			<div id="contents">
+			</div>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git a/static/main.js b/static/main.js
new file mode 100644
index 00000000..d56bb0dc
--- /dev/null
+++ b/static/main.js
@@ -0,0 +1,27 @@
+
+
+contents = {
+	"iron-plate":100,
+	"copper-plate":7312,
+}
+
+function drawcontents(data) {
+	keys = Object.keys(data);
+	result = "<table>";
+	for(i = 0;i < data.length; i++) {
+		result = result + "<tr><td>" + data[i].name + "</td><td>" + data[i].count + "</td></tr>";
+	}
+	result = result + "</table>"
+	document.getElementById("contents").innerHTML = result;
+}
+setInterval(function() {
+	var xmlhttp = new XMLHttpRequest();
+	xmlhttp.onreadystatechange = function() {
+		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+			data = JSON.parse(xmlhttp.responseText);
+			drawcontents(data);
+		}
+	}
+	xmlhttp.open("GET", "inventory", true);
+	xmlhttp.send();
+}, 500)
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 00000000..010a76ea
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,39 @@
+* {
+	margin:0px;
+}
+
+#logo {
+	background-color: yellow;
+}
+
+#sidenav {
+	position:fixed;
+	left:0px;
+	width:200px;
+	background-color:darkgrey;
+	height:100%;
+}
+#body {
+	margin-left:200px;
+}
+#contents table {
+	border: 1px solid black;
+}
+.button-black {
+	width:100%;
+	height:40px;
+	background-color:black;
+	color:white;
+	transition: all 300ms;
+}
+.button-black:hover {
+	background-color:#444;
+	color:yellow;
+	cursor:pointer;
+}
+.button-black * {
+	text-align:center;
+	position: relative;
+	top: 50%;
+	transform: translateY(-50%);
+}
\ No newline at end of file