diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000000000000000000000000000000000000..73b5b5717b6c250970cf8f1ff0b5e6c932796c50
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,20 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {"name":"Python: Django test","type":"python","request":"launch","program":"${workspaceFolder}\\manage.py","args":["test"],"django":true},
+        {
+            "name": "Python: Django",
+            "type": "python",
+            "request": "launch",
+            "program": "${workspaceFolder}\\manage.py",
+            "args": [
+                "runserver",
+                "--noreload"
+            ],
+            "django": true
+        }
+    ]
+}
\ No newline at end of file
diff --git a/app/static/app/temp.js b/app/static/app/temp.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/app/templates/app/katalog_materi.html b/app/templates/app/katalog_materi.html
new file mode 100644
index 0000000000000000000000000000000000000000..0f48127f671e17ece1562b3abe45a1569c3d40c5
--- /dev/null
+++ b/app/templates/app/katalog_materi.html
@@ -0,0 +1,60 @@
+{% extends "base.html" %}
+
+{% block title %}Test pages{% endblock %}
+<!-- {% block header %} 
+
+{% endblock header %} -->
+{% block content %}
+<div class="container-fluid">
+    <div class="row header">
+        <div class="col">
+            <h2 class="title">Temukan Materi Yang Kamu Mau!</h2>
+            <p class="description">Cari dengan judul buku, penerbit, atau penulis</p>
+            <form>  
+                <div class="form-group">
+                    <input type="email" class="form-control" placeholder="Tulis di sini">
+                </div>
+            </form>
+        </div>
+    </div>
+    <div class="row content">
+        <div class="col-3 sidebar">
+            <button class="btn">Filter</button>
+            <button class="btn">Sort</button>
+        </div>
+        <div class="col-9 books">
+            <div class="card book">
+                <img src="https://scontent.fbdo6-2.fna.fbcdn.net/v/t1.0-9/60274038_2279638138757984_7988420823012605952_n.jpg?_nc_cat=108&_nc_sid=110474&_nc_oc=AQlRDnDhg1kJjuoXEwYCYWosatAaFqwSiZdMmfbX_ORoTXu7cvJoawUihJPCjHXCqr0&_nc_ht=scontent.fbdo6-2.fna&oh=169b2c36df1a49f6a394208f21d09f7b&oe=5E94FF4E" 
+                class="card-img-top" alt="cover"></img>
+                <div class="card-body">
+                    <h5 class="card-title">Wahyu</h5>
+                    <p class="card-text">Saul Andre Lumban Gaol</p>
+                    <button class="btn btn-book">Baca</button>
+                    <button class="btn btn-book">Detail</button>
+                </div>
+            </div>
+            <div class="card book">
+                <img src="https://scontent.fbdo6-2.fna.fbcdn.net/v/t1.0-9/60274038_2279638138757984_7988420823012605952_n.jpg?_nc_cat=108&_nc_sid=110474&_nc_oc=AQlRDnDhg1kJjuoXEwYCYWosatAaFqwSiZdMmfbX_ORoTXu7cvJoawUihJPCjHXCqr0&_nc_ht=scontent.fbdo6-2.fna&oh=169b2c36df1a49f6a394208f21d09f7b&oe=5E94FF4E" 
+                class="card-img-top" alt="cover"></img>
+                <div class="card-body">
+                    <h5 class="card-title">Wahyu</h5>
+                    <p class="card-text">Saul Andre Lumban Gaol</p>
+                    <button class="btn btn-book">Baca</button>
+                    <button class="btn btn-book">Detail</button>
+                </div>
+            </div>
+            <div class="card book">
+                <img src="https://scontent.fbdo6-2.fna.fbcdn.net/v/t1.0-9/60274038_2279638138757984_7988420823012605952_n.jpg?_nc_cat=108&_nc_sid=110474&_nc_oc=AQlRDnDhg1kJjuoXEwYCYWosatAaFqwSiZdMmfbX_ORoTXu7cvJoawUihJPCjHXCqr0&_nc_ht=scontent.fbdo6-2.fna&oh=169b2c36df1a49f6a394208f21d09f7b&oe=5E94FF4E" 
+                class="card-img-top" alt="cover"></img>
+                <div class="card-body">
+                    <h5 class="card-title">Wahyu</h5>
+                    <p class="card-text">Saul Andre Lumban Gaol</p>
+                    <button class="btn btn-book">Baca</button>
+                    <button class="btn btn-book">Detail</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
diff --git a/app/urls.py b/app/urls.py
index d1119fe284dd4eb12771294cac98a89e610540d4..f2d865be387e2886ed8baddfbb351ae7d5b14014 100644
--- a/app/urls.py
+++ b/app/urls.py
@@ -2,6 +2,8 @@ from django.urls import path, re_path
 from app import views
 
 urlpatterns = [
+    # Matches any html file 
+    path("", views.DaftarKatalog.as_view(), name='daftar_katalog'),
     # Matches any html file 
     re_path(r'^.*\.html', views.pages, name='pages'),
 ]
\ No newline at end of file
diff --git a/app/views.py b/app/views.py
index 745665c0fbf9eeb948a8ad67761fccd1c360c336..c7dd735c2df6f2a27b1708dbc5e66fb59633a45f 100644
--- a/app/views.py
+++ b/app/views.py
@@ -4,7 +4,14 @@ from django.http import HttpResponse, JsonResponse, HttpResponseRedirect
 from django.views.generic import TemplateView 
 
 class DaftarKatalog(TemplateView):
-    pass
+    template_name = "app/katalog_materi.html"
+
+    def get_context_data(self, **kwargs):
+        return super().get_context_data(**kwargs)
+
+    def get(self, request, *args, **kwargs):
+        context = self.get_context_data(**kwargs)
+        return self.render_to_response(context=context)
 
 def pages(request):
     context = {}