diff --git a/app/home.php b/app/home.php
new file mode 100644
index 0000000..378eaa1
--- /dev/null
+++ b/app/home.php
@@ -0,0 +1,37 @@
+<div class="flex hmax">
+	<div id="instances" class="center">
+	</div>
+	<div id="instances-item">
+		<a href="#instance/software={software};instance={instance}">
+		<div class="flex">
+			<img data-src="img/software-{software}.png"/>
+			<div class="flex" style="padding: 0 2em">
+				<span class="center">{instance}</span>
+			</div>
+		</div>
+		</a>
+	</div>
+</div>
+
+<script>
+function load__home() {
+	http.get('api/v1/config/get',{},function(data) {
+		window.vars['instance_config'] = JSON.parse(data);
+		E.template('instances', function(TPL) {
+			var html = '';
+			for (var i = 0; i < window.vars.instance_config['supported_ap_software'].length; i++) {
+				var tpl = TPL;
+				const soft = window.vars.instance_config['supported_ap_software'][i];
+				for (var j = 0; j < window.vars.instance_config['hosts'][soft].length; j++) {
+					const hostcfg = window.vars.instance_config['hosts'][soft][j];
+					tpl = tpl.replaceAll('{software}',			soft);
+					tpl = tpl.replaceAll('{software:cap}',		capitalize(soft));
+					tpl = tpl.replaceAll('{instance}',			hostcfg['instance']);
+					html += tpl;
+				}
+			}
+			return html;
+		});
+	});
+}
+</script>
diff --git a/css/base.php b/css/base.php
index f14a601..28effc3 100644
--- a/css/base.php
+++ b/css/base.php
@@ -2,7 +2,6 @@
 body {
 	padding: 0;
 	margin: 0;
-	padding-top: 1em;
 	font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,"mastodon-font-sans-serif",sans-serif;
 }
 
@@ -34,7 +33,45 @@ body {
 	background: #9b1919;
 }
 
+.window.hidden { display: none !important }
+*[id*="-item"] { display: none !important }
+
+.flex { display: flex }
+.center { margin: auto }
+.wmax { width: 100vw }
+.hmax { height: 100vh }
+
 textarea {
 	max-width: -moz-available;
 }
+
+a {
+	text-decoration: none;
+	color: inherit;
+}
+
+
+/* specific styles */
+#window-home {
+	background: #d7d7d7;
+}
+#window-home #instances .item {
+	padding: .5em;
+	background: #fff;
+	border-radius: .5em;
+	box-shadow: 0px 0px .5em #0000004f;
+	margin-top: .5em;
+}
+#window-home #instances .item:hover {
+	background: #f9f9f9;
+}
+#window-home #instances .item:active,
+#window-home #instances .item:focus {
+	background: #dfdfdf;
+}
+#window-home #instances .item img {
+	width: 2.5em;
+	height: 2.5em;
+}
+
 </style>
diff --git a/img/software-mastodon.png b/img/software-mastodon.png
new file mode 100644
index 0000000..b3eab90
Binary files /dev/null and b/img/software-mastodon.png differ
diff --git a/index.php b/index.php
index a17ca05..ead5e1c 100644
--- a/index.php
+++ b/index.php
@@ -9,30 +9,44 @@
 	<script type="application/javascript" src="js/updateLocale.js"></script>
 </head>
 <body>
+<script>window.vars = [];</script>
 
 <?php require 'css/base.php' ?>
 
 <main>
+<?php foreach (scandir('./app') as $t): ?>
+	<?php if (!in_array($t,['.','..']) && substr($t, -4) === '.php'): ?>
+	<div id="window-<?php echo substr($t, 0, -4) ?>"
+		class="window hidden">
+		<?php require './app/'.$t ?>
+	</div>
+	<?php endif ?>
+<?php endforeach ?>
 </main>
 
 <?php require 'js/base.php' ?>
 
 <script>
+
 function hashProcessor(initial) {
 	var args = window.location.hash.substring(1).trim().split('/');
 	if (args.length > 0 && args[0].trim() === '')
 		args = [];
 
 	if (args.length === 0) {
-		// no hash arguments
+		window.location.hash = '#home';
 		return;
 	}
 
 	initial = initial || false;
 	const processArgs = function() {
-		switch (args[0]) {
-			default:
-				console.log(args);
+		if (document.getElementById('window-'+args[0]) !== null) {
+			if (window['load__'+args[0]] !== undefined) {
+				E.class.removeAll('.window', 'hidden');
+				E.class.addAll('.window', 'hidden');
+				document.getElementById('window-'+args[0]).classList.remove('hidden');
+				window['load__'+args[0]](args);
+			}
 		}
 	};
 	processArgs();
@@ -59,6 +73,7 @@ window.onload = function(e) {
 			yy: "%s Y"
 		}
 	});
+	hashProcessor();
 }
 </script>
 </body>
diff --git a/js/base.php b/js/base.php
index a8ade93..7843e6e 100644
--- a/js/base.php
+++ b/js/base.php
@@ -41,6 +41,12 @@ var E = {
 			query.remove();
 		}
 	},
+	template: function(_id, cback) {
+		var tpl = E.elemid(_id+'-item').outerHTML;
+		tpl = tpl.replace('id="'+_id+'-item"','class="item"');
+		tpl = tpl.replace('data-src=', 'src=');
+		E.elemid(_id).innerHTML = cback(tpl);
+	},
 };
 
 function isVisible(element) {
@@ -100,6 +106,9 @@ function _get_func_params(func) {
 	return params;
 }
 
+function capitalize(str) {
+	return str[0].toUpperCase() + str.substring(1);
+}
 function printstack() { console.error(new Error().stack) }
 function uuidv4() {
 	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
