diff --git a/App/Controllers/Api.php b/App/Controllers/Api.php
new file mode 100644
index 0000000..5c9d419
--- /dev/null
+++ b/App/Controllers/Api.php
@@ -0,0 +1,32 @@
+<?php
+namespace App\Controllers;
+use Core\Token;
+
+class Api
+{
+    public function posts() {
+        $get = [
+            'data' => [
+                [
+                    'id' => 1,
+                    'judul' => 'post_1',
+                    'status' => 1
+                ],
+                [
+                    'id' => 2,
+                    'judul' => 'post_2',
+                    'status' => 0
+                ],
+                [
+                    'id' => 3,
+                    'judul' => 'post_3',
+                    'status' => 2
+                ]
+            ]
+        ];
+
+        $get['count'] = count($get['data']);
+        header('Content-Type: application/json');
+        echo json_encode($get);
+    }
+}
diff --git a/App/Views/Data/mithril.html b/App/Views/Data/mithril.html
index 3848421..c7ab863 100644
--- a/App/Views/Data/mithril.html
+++ b/App/Views/Data/mithril.html
@@ -3,36 +3,41 @@
 {% block title %}Mithril{% endblock %}
 
 {% block body %}
-<main class="documentation">
-    <section id="mit">
-    </section>
+<main id="mit" class="documentation">
 </main>
 <script>
-    var count = 0
+    var root = document.getElementById('mit')
+    var text = ''
 
-    var Hello = {
+    var rend = {
         view: function() {
-            return m("main", [
-                m("h1", "Mithril"),
-                m("code", "You do " + count + " clicks"),
-                m("button", {onclick: function() {
-                    count++
-                }}, "Click"),
+            return m('section', [
+                m('h1', 'Mithril'),
+                m('p', text),
+                m('button', {
+                    class: 'pseudo',
+                    onclick: getdata
+                }, 'Click')
             ])
         }
     }
 
-    var Splash = {
-        view: function() {
-            return m("a", {href: "#!/hello"}, "Enter!")
+    var getdata = function() {
+        m.request({
+            list: [],
+            method: 'GET',
+            url: '/api/posts',
+            withCredentials: true
+        })
+        .then(function(get) {
+            getdata.list = get.data
+        })
+
+        for (var i = 0; i < getdata.list.length; i++) {
+            text = text + getdata.list[i].judul + ' '
         }
     }
 
-    var root = document.getElementById('mit')
-
-    m.route(root, "/splash", {
-        "/splash": Splash,
-        "/hello": Hello,
-    })
+    m.mount(root, rend)
 </script>
 {% endblock %}