diff --git a/.htaccess b/.htaccess
new file mode 100644
index 0000000..5a928f6
--- /dev/null
+++ b/.htaccess
@@ -0,0 +1 @@
+Options -Indexes
diff --git a/common.css b/common.css
new file mode 100644
index 0000000..584b229
--- /dev/null
+++ b/common.css
@@ -0,0 +1,68 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  color: #212121;
+  font-size: 16px;
+  font-family: system-ui, sans-serif;
+  line-height: 1.5;
+}
+
+body {
+  min-height: 100vh;
+  border-top: 0.5rem solid #90a4ae;
+  border-bottom: 0.5rem solid #90a4ae;
+}
+
+a {
+  color: #6200ea;
+  display: inline-block;
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+}
+
+a:hover {
+  border-bottom: 1px solid currentColor;
+}
+
+table {
+  text-align: left;
+  white-space: nowrap;
+  border-collapse: collapse;
+}
+
+table tr:hover {
+  background-color: #eee;
+}
+
+table tr .indexcolicon a {
+  border: none;
+}
+
+main {
+  margin: 0 auto;
+  padding: 2rem 1rem;
+  max-width: 56rem;
+}
+
+.title {
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin: 2rem 0;
+}
+
+.title .js-path a {
+  padding: 0 0.25rem 0;
+  text-decoration: none;
+}
+
+footer,
+address {
+  padding: 2rem 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+  opacity: 0.875;
+}
diff --git a/darkmode.css b/darkmode.css
new file mode 100644
index 0000000..f522589
--- /dev/null
+++ b/darkmode.css
@@ -0,0 +1,18 @@
+html {
+  color-scheme: dark;
+}
+
+body {
+  background-color: #212121;
+  border-top: 0.5rem solid #424242;
+  border-bottom: 0.5rem solid #424242;
+  color: #eeeeee;
+}
+
+table tr:hover {
+  background-color: #424242;
+}
+
+a {
+  color: #82b1ff;
+}
diff --git a/footer.html b/footer.html
new file mode 100644
index 0000000..7a09aba
--- /dev/null
+++ b/footer.html
@@ -0,0 +1,46 @@
+  </main>
+
+  <footer>
+    <!--
+      Add any other listing related copyright content here
+    -->
+
+    <a href="https://tik.unej.ac.id"><em>UPA TIK UNEJ</em></a>
+  </footer>
+  
+  <script>
+    function joinUntil(array, index, separator) {
+      var result = [];
+
+      for (var i = 0; i <= index; i++) {
+        result.push(array[i]);
+      }
+
+      return result.join(separator);
+    }
+
+    // Make all the icon links unfocusable with tab
+    var iconLinks = document.querySelectorAll('.indexcolicon a');
+    Array.prototype.forEach.call(iconLinks, function(link) {
+      link.setAttribute('tabindex', '-1');
+    });
+
+    var path = document.querySelector('.js-path');
+    var pathParts = location.pathname.split('/');
+
+    // Removing empty strings
+    for (var i = 0; i < pathParts.length;) {
+      if (pathParts[i]) {
+        i++;
+      } else {
+        pathParts.splice(i, 1);
+      }
+    }
+
+    var pathContents = ['<a href="/">/</a>'];
+    Array.prototype.forEach.call(pathParts, function(part, index) {
+      pathContents.push('<a href="/' + joinUntil(pathParts, index, '/') + '">' + decodeURI(part) + '</a>');
+    });
+
+    path.innerHTML = pathContents.join('&rsaquo;');
+  </script>
diff --git a/header.html b/header.html
new file mode 100644
index 0000000..7440dd0
--- /dev/null
+++ b/header.html
@@ -0,0 +1,6 @@
+  <main>
+    <!--
+      Add any static information or notices here
+    -->
+
+    <h1 class="title">Index Data of <span class="js-path"></span></h1>
\ No newline at end of file