diff --git a/App/Controllers/Api.php b/App/Controllers/Api.php
index a37b3eb..aa41890 100644
--- a/App/Controllers/Api.php
+++ b/App/Controllers/Api.php
@@ -14,9 +14,7 @@ class Api
     public function posts() {
         $get = [];
         $get['count'] = 0;
-        $get['data'] = $this->model->showJoin([
-            ['pengumuman.status', '=', 1]
-        ]);
+        $get['data'] = $this->model->showJoin();
 
         if (array_key_exists(0, $get['data']) == false) {
             $temp_data = $get['data'];
diff --git a/App/Models/Post.php b/App/Models/Post.php
index 03a8d0d..737a37b 100644
--- a/App/Models/Post.php
+++ b/App/Models/Post.php
@@ -122,7 +122,7 @@ class Post extends \Core\Model
         try {
             $db = static::connectDB();
 
-            $sql = "SELECT pengumuman.id, kategori.background, kategori.foreground, pengumuman.valid_at, pengumuman.expired_at, pengumuman.creator, pengumuman.editor, pengumuman.content, pengumuman.status FROM pengumuman INNER JOIN kategori ON pengumuman.category=kategori.id";
+            $sql = "SELECT pengumuman.id, kategori.category, kategori.background, kategori.foreground, pengumuman.valid_at, pengumuman.expired_at, pengumuman.creator, pengumuman.editor, pengumuman.content, pengumuman.status FROM pengumuman INNER JOIN kategori ON pengumuman.category=kategori.id";
 
             if ($conditions) {
                 $sql .= " WHERE";
diff --git a/App/Views/Data/mithril.html b/App/Views/Data/mithril.html
index 627836a..ea8186b 100644
--- a/App/Views/Data/mithril.html
+++ b/App/Views/Data/mithril.html
@@ -3,41 +3,76 @@
 {% block title %}Mithril{% endblock %}
 
 {% block body %}
-<main id="mit" class="documentation">
+<main class="documentation">
+    <div style="text-align:left;width:100%;">
+        <div style="background:#fff;text-align:left;width:100vw;padding:10vh 0 0;">
+            <div class="filter flex six-600 four grow">
+                <div class="sixth-600 none"></div>
+                <div>
+                    <a href="/" class="navy" style="font-size:smaller;">Semua</a>
+                </div>
+                <div>
+                    <a href="/?status=1" class="navy" style="font-size:smaller;">Aktif</a>
+                </div>
+                <div>
+                    <a href="/?status=2" class="navy" style="font-size:smaller;">Belum Aktif</a>
+                </div>
+                <div>
+                    <a href="/?status=0" class="navy" style="font-size:smaller;">Nonaktif</a>
+                </div>
+                <div class="sixth-600 none"></div>
+            </div>
+            <div id="mit">
+            </div>
+        </div>
+    </div>
 </main>
+
 <script>
     var root = document.getElementById('mit')
-    var count = 0
-    var timer = 10000; // 10 seconds
 
-    var rend = {
+    var Post = {
+        list: [],
+        loadList: function() {
+            return m.request({
+                method: 'GET',
+                url: '/api/posts',
+                withCredentials: true
+            })
+            .then(function(result) {
+                Post.list = result.data
+            })
+        }
+    }
+
+    var PostList = {
+        oninit: Post.loadList,
         view: function() {
-            return m('section', [
-                m('h1', 'Mithril'),
-                m('p', 'You got ' + count + ' data(s)'),
-                m('button', {
-                    class: 'pseudo',
-                    onclick: getdata
-                }, 'Click')
+            // return m('.user-list', Post.list.map(function(post) {
+            //     return m('.user-list-item', post.content + ' ' + post.category)
+            // }))
+            return m('.bungkus.flex.four-900.full.card-wrapper', {style:'padding:0 .6em;'}, [
+                m('a.fourth-900.half-600.card.box.new', {href:'/posts/entry'}, m('i.fa.fa-plus.fa-3x', '')),
+                Post.list.map(function(post) {
+                    return m('.fourth-900.half-600.card.box', {style:'background-color:' + post.background}, [
+                        m('span.stack', {style:'font-size:smaller;color:rgba(17,17,17,.4);margin-bottom:.6em;'}, post.valid_at),
+                        m('span.stack', {style:'color:' + post.foreground}, post.content),
+                        m('form', {method:'post',action:'/'}, m('footer.flex.full.grow', [
+                            m('.half-900', m('a.button.full', {href:'/posts/edit/' + post.id}, [
+                                m('i.fa.fa-edit.fa-fw', ''),
+                                m('span', {style:'font-size:smaller;'}, 'Ubah')
+                            ])),
+                            m('.half-900', m('button.error.full', {type:'submit'}, [
+                                m('i.fa.fa-times-circle-o.fa-fw', ''),
+                                m('span', {style:'font-size:smaller;'}, 'Matikan')
+                            ]))
+                        ]))
+                    ])
+                })
             ])
         }
     }
 
-    var getdata = function() {
-        m.request({
-            list: [],
-            method: 'GET',
-            url: '/api/posts',
-            withCredentials: true
-        })
-        .then(function(get) {
-            getdata.list = get
-            count = getdata.list.count
-        })
-    }
-
-    m.mount(root, rend)
-
-    setInterval(getdata, timer);
+    m.mount(root, PostList)
 </script>
 {% endblock %}
diff --git a/App/Views/base.html b/App/Views/base.html
index 0481b1e..cc8899f 100644
--- a/App/Views/base.html
+++ b/App/Views/base.html
@@ -120,6 +120,8 @@
             .card footer {
                 position: absolute;
                 bottom: 0;
+                padding-left: 0;
+                padding-bottom: 0;
             }
 
             .card-wrapper {
@@ -147,11 +149,6 @@
                 background-color: rgba(17, 17, 17, .05);
             }
 
-            .card footer {
-                padding-left: 0;
-                padding-bottom: 0;
-            }
-
             .fitty > p {
                 margin: 0;
             }