diff --git a/index.php b/index.php
index 5de72ff..484f5dc 100755
--- a/index.php
+++ b/index.php
@@ -24,9 +24,294 @@ OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
 OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
-require_once("include/init.inc.php");
+require_once(__DIR__.'/include/init.inc.php');
 $block = new Block();
 $current = $block->current();
+?>
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Arionum Node</title>
+    <style>
+        .title:not(:last-child) {
+            margin-bottom: 1.5rem;
+        }
 
-echo "<h3>Arionum Node</h3>";
-echo "System check complete.<br><br> Current block: $current[height]";
+        body, h1, html {
+            margin: 0;
+            padding: 0;
+        }
+
+        h1 {
+            font-size: 100%;
+            font-weight: 400;
+        }
+
+        html {
+            box-sizing: border-box;
+        }
+
+        *, ::after, ::before {
+            box-sizing: inherit;
+        }
+
+        html {
+            background-color: #fff;
+            font-size: 16px;
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            min-width: 300px;
+            overflow-x: hidden;
+            overflow-y: scroll;
+            text-rendering: optimizeLegibility;
+            -webkit-text-size-adjust: 100%;
+            -moz-text-size-adjust: 100%;
+            -ms-text-size-adjust: 100%;
+            text-size-adjust: 100%;
+        }
+
+        section {
+            display: block;
+        }
+
+        body {
+            font-family: "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+        }
+
+        body {
+            color: #4a4a4a;
+            font-size: 1rem;
+            font-weight: 400;
+            line-height: 1.5;
+        }
+
+        span {
+            font-style: inherit;
+            font-weight: inherit;
+        }
+
+        strong {
+            color: #363636;
+            font-weight: 700;
+        }
+
+        .container {
+            margin: 0 auto;
+            position: relative;
+        }
+
+        @media screen and (min-width: 1088px) {
+            .container {
+                max-width: 960px;
+                width: 960px;
+            }
+        }
+
+        @media screen and (min-width: 1280px) {
+            .container {
+                max-width: 1152px;
+                width: 1152px;
+            }
+        }
+
+        @media screen and (min-width: 1472px) {
+            .container {
+                max-width: 1344px;
+                width: 1344px;
+            }
+        }
+
+        .field.is-grouped {
+            display: flex;
+            justify-content: flex-start;
+        }
+
+        .field.is-grouped > .control {
+            flex-shrink: 0;
+        }
+
+        .field.is-grouped > .control:not(:last-child) {
+            margin-bottom: 0;
+            margin-right: .75rem;
+        }
+
+        .field.is-grouped.is-grouped-multiline {
+            flex-wrap: wrap;
+        }
+
+        .field.is-grouped.is-grouped-multiline > .control:last-child, .field.is-grouped.is-grouped-multiline > .control:not(:last-child) {
+            margin-bottom: .75rem;
+        }
+
+        .field.is-grouped.is-grouped-multiline:last-child {
+            margin-bottom: -.75rem;
+        }
+
+        .control {
+            font-size: 1rem;
+            position: relative;
+            text-align: left;
+        }
+
+        .tags {
+            align-items: center;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+        }
+
+        .tags .tag {
+            margin-bottom: .5rem;
+        }
+
+        .tags .tag:not(:last-child) {
+            margin-right: .5rem;
+        }
+
+        .tags:last-child {
+            margin-bottom: -.5rem;
+        }
+
+        .tags.has-addons .tag {
+            margin-right: 0;
+        }
+
+        .tags.has-addons .tag:not(:first-child) {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+        }
+
+        .tags.has-addons .tag:not(:last-child) {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        }
+
+        .tag:not(body) {
+            align-items: center;
+            background-color: #f5f5f5;
+            border-radius: 4px;
+            color: #4a4a4a;
+            display: inline-flex;
+            font-size: .75rem;
+            height: 2em;
+            justify-content: center;
+            line-height: 1.5;
+            padding-left: .75em;
+            padding-right: .75em;
+            white-space: nowrap;
+        }
+
+        .tag:not(body).is-light {
+            background-color: #f5f5f5;
+            color: #363636;
+        }
+
+        .tag:not(body).is-info {
+            background-color: #209cee;
+            color: #fff;
+        }
+
+        .tag:not(body).is-success {
+            background-color: #23d160;
+            color: #fff;
+        }
+
+        .title {
+            word-break: break-word;
+        }
+
+        .title {
+            color: #363636;
+            font-size: 2rem;
+            font-weight: 600;
+            line-height: 1.125;
+        }
+
+        .hero {
+            align-items: stretch;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        .hero.is-dark {
+            background-color: #363636;
+            color: #f5f5f5;
+        }
+
+        .hero.is-dark strong {
+            color: inherit;
+        }
+
+        .hero.is-dark .title {
+            color: #f5f5f5;
+        }
+
+        .hero.is-fullheight .hero-body {
+            align-items: center;
+            display: flex;
+        }
+
+        .hero.is-fullheight .hero-body > .container {
+            flex-grow: 1;
+            flex-shrink: 1;
+        }
+
+        .hero.is-fullheight {
+            min-height: 100vh;
+        }
+
+        .hero-body {
+            flex-grow: 1;
+            flex-shrink: 0;
+            padding: 3rem 1.5rem;
+        }
+
+        a {
+            color: #3273dc;
+            cursor: pointer;
+            text-decoration: none;
+        }
+
+        a:hover {
+            color: #363636;
+        }
+
+        a.is-dark {
+            color: white;
+        }
+    </style>
+</head>
+
+<body>
+<section class="hero is-dark is-fullheight">
+    <div class="hero-body">
+        <div class="container">
+            <h1 class="title">Arionum Node</h1>
+
+            <div class="field is-grouped is-grouped-multiline">
+                <div class="control">
+                    <div class="tags has-addons">
+                        <strong class="tag is-success">Current Block</strong>
+                        <span class="tag is-light"><?= $current['height']; ?></span>
+                    </div>
+                </div>
+                <div class="control">
+                    <div class="tags has-addons">
+                        <strong class="tag is-info">Public API</strong>
+                        <span class="tag is-light"><?= ($_config['public_api']) ? 'yes' : 'no'; ?></span>
+                    </div>
+                </div>
+                <div class="control">
+                    <a class="tags is-dark" href="./doc/" target="_blank">
+                        <strong class="tag is-info">Documentation</strong>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+</body>
+</html>
