diff --git a/kel/index.html b/kel/index.html
new file mode 100644
index 0000000..e432927
--- /dev/null
+++ b/kel/index.html
@@ -0,0 +1,49 @@
+<html>
+<head>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+</head>
+<body>
+<script>
+    (async () => {
+        const subdir = window.location.pathname.split('/')[2];
+        const main = 'https://github.com/imroi/diversen/blob/main/';
+        const response = await fetch('https://api.github.com/repos/imroi/diversen/contents/' + subdir);
+        const data = await response.json();
+        let htmlString = `<div class="container">
+            <nav class="navbar navbar-expand-lg">
+            <div class="container-fluid">
+              <ol class="breadcrumb">
+                <li class="breadcrumb-item"><a href="https://imroi.github.io/diversen/">Home</a></li>
+                <li class="breadcrumb-item active" aria-current="page">${subdir}</li>
+              </ol>
+              <a class="navbar-brand" href="#">${subdir.toUpperCase()}</a>
+              <div class="navbar-nav">
+                  <a class="nav-link" href="${main}${subdir}/stylesheet.sld">SLD</a>
+                  <a class="nav-link" href="${main}${subdir}/stylesheet.geostyler">GeoStyler</a>
+                </div>
+            </div>
+          </nav>
+          </div>`;
+        htmlString += '<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">';
+        htmlString += '<ol class="list-group">';
+        for (let file of data) {
+            if (file.name.endsWith('.png') || file.name.endsWith('.jpg') || file.name.endsWith('.jpeg') || file.name.endsWith('.svg')) {
+                htmlString += `<li class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+                <img src="${file.download_url}" alt="${file.name}" width="32" height="32">
+                <div class="d-flex gap-2 w-100 justify-content-between">
+                  <div>
+                    <h6><a href="${file.html_url}">${file.name}</a></h6>
+                    <p>${document.URL}${file.name}</p>
+                  </div>
+                  <small class="opacity-50 text-nowrap">${Math.round(file.size / 1024)}kb</small>
+                </div>
+              </li>`;
+            }
+        }
+        htmlString += '</ol></div>';
+        document.getElementsByTagName('body')[0].innerHTML = htmlString;
+    })()
+</script>
+</body>
+</html>
diff --git a/kel/kel_ambulancepost.png b/kel/kel_ambulancepost.png
new file mode 100644
index 0000000..5381874
Binary files /dev/null and b/kel/kel_ambulancepost.png differ
diff --git a/kel/kel_brandweer.png b/kel/kel_brandweer.png
new file mode 100644
index 0000000..65ecd15
Binary files /dev/null and b/kel/kel_brandweer.png differ
diff --git a/kel/kel_politie.png b/kel/kel_politie.png
new file mode 100644
index 0000000..4b33ea3
Binary files /dev/null and b/kel/kel_politie.png differ
diff --git a/kel/kel_vestiging_veiligheidsregio.png b/kel/kel_vestiging_veiligheidsregio.png
new file mode 100644
index 0000000..78f33d5
Binary files /dev/null and b/kel/kel_vestiging_veiligheidsregio.png differ
