diff --git a/app/migrations/0008_auto_20200422_2202.py b/app/migrations/0008_auto_20200422_2202.py
new file mode 100644
index 0000000000000000000000000000000000000000..5b14ce8f01839ff8ba416738a1da64578fef8ee7
--- /dev/null
+++ b/app/migrations/0008_auto_20200422_2202.py
@@ -0,0 +1,23 @@
+# Generated by Django 3.0.3 on 2020-04-22 15:02
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('app', '0007_auto_20200421_2151'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='comment',
+            name='profile',
+            field=models.CharField(default='d91905', max_length=100),
+        ),
+        migrations.AlterField(
+            model_name='comment',
+            name='user',
+            field=models.CharField(default='2565edd4bdac454d9cd87e2e7d93d27f', max_length=100),
+        ),
+    ]
diff --git a/app/migrations/0009_auto_20200422_2206.py b/app/migrations/0009_auto_20200422_2206.py
new file mode 100644
index 0000000000000000000000000000000000000000..d366787dfb542e3f78268d73de263cff824e0d5c
--- /dev/null
+++ b/app/migrations/0009_auto_20200422_2206.py
@@ -0,0 +1,28 @@
+# Generated by Django 3.0.3 on 2020-04-22 15:06
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('app', '0008_auto_20200422_2202'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='comment',
+            name='profile',
+            field=models.CharField(default='cbacb3', max_length=100),
+        ),
+        migrations.AlterField(
+            model_name='comment',
+            name='user',
+            field=models.CharField(default='31d4991724a9498fb58b631db4636bff', max_length=100),
+        ),
+        migrations.AlterField(
+            model_name='materi',
+            name='verified',
+            field=models.BooleanField(default=False, null=True),
+        ),
+    ]
diff --git a/app/migrations/0010_auto_20200422_2206.py b/app/migrations/0010_auto_20200422_2206.py
new file mode 100644
index 0000000000000000000000000000000000000000..4e614725cc6aede7efd98ed9249c41bbab27d07a
--- /dev/null
+++ b/app/migrations/0010_auto_20200422_2206.py
@@ -0,0 +1,23 @@
+# Generated by Django 3.0.3 on 2020-04-22 15:06
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('app', '0009_auto_20200422_2206'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='comment',
+            name='profile',
+            field=models.CharField(default='e2db20', max_length=100),
+        ),
+        migrations.AlterField(
+            model_name='comment',
+            name='user',
+            field=models.CharField(default='e230956660bd4b899b4b81f03e6553a6', max_length=100),
+        ),
+    ]
diff --git a/app/models.py b/app/models.py
index b9f114800d3032c80d5826daee47a50ffe30a3b0..856a855c249f65044d7ddb6fa95711cdddd8ad57 100644
--- a/app/models.py
+++ b/app/models.py
@@ -28,13 +28,14 @@ class Comment(models.Model):
         return self.user
 
 class Materi(models.Model):
+    #TODO: file fields, cover ubah jadi image fields, uploader jadi one to one kontributor
     cover = models.URLField(max_length=1000)
     title = models.CharField(max_length=50, default='title') 
     author = models.CharField(max_length=30, default='author')
-    uploader = models.CharField(max_length=30, default='uploader')
+    uploader = models.CharField(max_length=30, default='uploader') #ubah jadi one to one ke kontributor 
     publisher = models.CharField(max_length=30, default='publiser')
     descriptions = models.TextField(default='descriptions')
-    verified = models.BooleanField(default=False)
+    verified = models.BooleanField(default=False, null=True)
     categories = models.ManyToManyField(Category)
     comments = models.ManyToManyField(Comment)
 
diff --git a/app/templates/app/detail_materi.html b/app/templates/app/detail_materi.html
index a11b647dc6f76453c5b4ae3e128f9e6b1c00b080..1b8796e34256fc0f710b67f4f4e66a44c69e6589 100644
--- a/app/templates/app/detail_materi.html
+++ b/app/templates/app/detail_materi.html
@@ -3,6 +3,7 @@
 
 {% block header %}
 <link rel="stylesheet" type="text/css" href="{% static 'app/css/detail_materi.css' %}">
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;1,100&display=swap" rel="stylesheet">
 {% endblock header %}
 
 {% block title %}
@@ -10,21 +11,26 @@ Materi
 {% endblock title %}
 
 {% block content %}
+    {% block verification %} {% endblock verification %}
     <div class="container">
         <div class="row materi-data">
             <div class="col col-3 cover">
-                <img src="https://cache.umusic.com/_sites/billieeilish/v2/images/pic-red.jpg" alt="cover">
+                <img src={{materi_data.cover}} alt="cover">
             </div>
-            <div class="col col-6 offset-md-1 book">
-                <h2>Billie Eilish Starter Pack</h2>
-                <p>kategory</p>
+            <div class="col col-6 ml-3 book">
+                <h2>{{materi_data.title}}</h2>
+                <div class="category-wrapper">
+                    {% for category in materi_data.categories.all %}
+                        <span class="mr-1">#{{category.name}}</span>
+                    {% endfor %}
+                </div>
                 <div class="info-wrapper">
                     <div class="info" id="1">
                         <dt class="col col-4">
                             <p class="info-name">Penulis</p>
                         </dt>
                         <dd>
-                            <p class="info-content">Saul Andre Lumban Gaol</p>
+                            <p class="info-content">{{materi_data.author}}</p>
                         </dd>
                     </div>
                     <div class="info" id="1">
@@ -32,7 +38,7 @@ Materi
                             <p class="info-name">Penerbit</p>
                         </dt>
                         <dd>
-                            <p class="info-content">Gramedia</p>
+                            <p class="info-content">{{materi_data.publisher}}</p>
                         </dd>
                     </div>
                     <div class="info" id="1">
@@ -40,7 +46,7 @@ Materi
                             <p class="info-name">Jumlah Halaman</p>
                         </dt>
                         <dd>
-                            <p class="info-content">62 Halaman</p>
+                            <p class="info-content">{{materi_data.author}}</p>
                         </dd>
                     </div>
                     <div class="info" id="1">
@@ -71,9 +77,7 @@ Materi
                 <div id="section1" class="container-fluid description-wrapper">
                     <h1>Deskripsi</h1>
                     <div class="col col-8 description">
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
-                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+                        <p>{{materi_data.descriptions}}</p>
                     </div>
                 </div>
                 <div id="section2" class="container-fluid comments-wrapper">
@@ -91,34 +95,15 @@ Materi
                         </form>
                         
                     </div>
-                    <div class="col col-8 comment shadow-sm p-3 mb-1 bg-white rounded">
-                        <div class="user">
-                            <span class="profile"></span>
-                            <p><b>user1</b></p>
-                        </div>
-                        <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
-                    </div>
-                    <div class="col col-8  comment shadow-sm p-3 mb-1 bg-white rounded">
-                        <div class="user">
-                            <span class="profile"></span>
-                            <p><b>user2</b></p>
-                        </div>
-                        <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
-                    </div>
-                    <div class="col col-8 comment shadow-sm p-3 mb-1 bg-white rounded">
-                        <div class="user">
-                            <span class="profile"></span>
-                            <p><b>user3</b></p>
-                        </div>
-                        <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
-                    </div>
-                    <div class="col col-8 comment shadow-sm p-3 mb-1 bg-white rounded">
-                        <div class="user">
-                            <span class="profile"></span>
-                            <p><b>user4</b></p>
+                    {% for comment in materi_data.comments.all %}
+                        <div class="col col-8 comment shadow-sm p-3 mb-1 bg-white rounded">
+                            <div class="user">
+                                <span class="profile"></span>
+                                <p><b>{{comment.user}}</b></p>
+                            </div>
+                            <p class="text">{{comment.comment}}</p>
                         </div>
-                        <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
-                    </div>
+                    {% endfor %}
                 </div>
             <!-- <div class="col col-12">
                 <nav id="navbar-example2" class="navbar ">
diff --git a/app/templates/app/katalog_materi.html b/app/templates/app/katalog_materi.html
index f7b0709b36ff8aaee618f083d2de5790e380d3fa..33c447de739581edb004f87817e505c86d132c34 100644
--- a/app/templates/app/katalog_materi.html
+++ b/app/templates/app/katalog_materi.html
@@ -73,7 +73,7 @@
                         <h5 class="card-title">{{item.title}}</h5>
                         <p class="card-text">{{item.author}}</p>
                         <button class="btn btn-book">Baca</button>
-                        <button class="btn btn-book">Detail</button>
+                        <button class="btn btn-book" onclick="">Detail</button>
                     </div>
                 </div>
             {% endfor %}
diff --git a/app/urls.py b/app/urls.py
index 0f02b86d75d386f3dd5daa623a367ac81c47fccf..9aed71efa3076504fe0177ddffb72613a5bc716d 100644
--- a/app/urls.py
+++ b/app/urls.py
@@ -3,7 +3,7 @@ from app import views
 
 urlpatterns = [
     path("", views.DaftarKatalog.as_view(), name='daftar_katalog'),
-    path('materi/', views.DetailMateri.as_view(), name='detailMateri'),
+    path('materi/<slug:slug>/', views.DetailMateri.as_view(), name='detailMateri'),
     path('list-materi/', views.listMateri, name='listMateri'),
     # Matches any html file 
     re_path(r'^.*\.html', views.pages, name='pages'),
diff --git a/app/views.py b/app/views.py
index 8de3667b74d35505f76f8f2ccb87d8b3d6801b12..1bd033f90f452aba0003e843299676ccf1bceee7 100644
--- a/app/views.py
+++ b/app/views.py
@@ -24,7 +24,10 @@ class DetailMateri(TemplateView):
 
     def get(self, request, *args, **kwargs):
         context = self.get_context_data(**kwargs)
-        context["materi_list"] = Materi.objects.all()
+        context = super().get_context_data(**kwargs)
+        print(context['slug'])
+        context["materi_data"] = get_object_or_404(Materi, pk=kwargs['slug'])
+        print(context["materi_data"])
         return self.render_to_response(context=context)
     
 def listMateri(self):