diff --git a/app/static/app/css/katalog_kontri.css b/app/static/app/css/katalog_kontri.css
new file mode 100644
index 0000000000000000000000000000000000000000..c6ff672311e4bfad5a4811ff2b0816fcb5c99e9c
--- /dev/null
+++ b/app/static/app/css/katalog_kontri.css
@@ -0,0 +1,9 @@
+.img-profile {
+    width: 10vw;
+    height: 10vw;
+}
+
+.profile-data {
+    color: #615CFD;
+    padding-right: 75px;
+}
\ No newline at end of file
diff --git a/app/templates/app/detail_materi.html b/app/templates/app/detail_materi.html
index 7eade72301d133cf466a3d71a7ba3606c1484866..3a0db58e5b88b78a8c4ffa721e037b290442ce06 100644
--- a/app/templates/app/detail_materi.html
+++ b/app/templates/app/detail_materi.html
@@ -5,7 +5,8 @@
 <link href="{% static 'css/sb-admin-2.min.css' %}" rel="stylesheet">
 <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">
-<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0"></script>
+<script async defer crossorigin="anonymous"
+    src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0"></script>
 <script src="{% static 'js/detail_materi.js'%}"></script>
 {% endblock header %}
 
@@ -14,51 +15,53 @@
 {% endblock title %}
 
 {% block content %}
-    {% block verification %} {% endblock verification %}
-    <div id="fb-root"></div>
-    <div class="container-fluid p-0 bg detail-materi-color">
-        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
+{% block verification %} {% endblock verification %}
+<div id="fb-root"></div>
+<div class="container-fluid p-0 bg detail-materi-color">
+    <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
 
-          <!-- Sidebar Toggle (Topbar) -->
-          <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
+        <!-- Sidebar Toggle (Topbar) -->
+        <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
             <i class="fa fa-bars" aria-hidden="true"></i>
-          </button>
+        </button>
 
-          <div class="sidebar-brand-text mx-3">Diskominfo Kota Depok</div>
+        <div class="sidebar-brand-text mx-3">Diskominfo Kota Depok</div>
 
-          <!-- Topbar Navbar -->
-          <ul class="navbar-nav ml-auto">
+        <!-- Topbar Navbar -->
+        <ul class="navbar-nav ml-auto">
 
             {% if request.user.is_contributor %}
-                {% if materi_data.status == "DISAPPROVE" %}
-                <li class="nav-item black-text">
-                    <a class="nav-link feedback" data-toggle="modal" data-target="#umpanBalikModal">
-                        <span class="mr-2 d-none d-lg-inline text-gray-600 small">Umpan Balik Materi</span>
-                    </a>
-                    <div class="modal fade" id="umpanBalikModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-                        <div class="modal-dialog" role="document">
-                          <div class="modal-content">
+            {% if materi_data.status == "DISAPPROVE" %}
+            <li class="nav-item black-text">
+                <a class="nav-link feedback" data-toggle="modal" data-target="#umpanBalikModal">
+                    <span class="mr-2 d-none d-lg-inline text-gray-600 small">Umpan Balik Materi</span>
+                </a>
+                <div class="modal fade" id="umpanBalikModal" tabindex="-1" role="dialog"
+                    aria-labelledby="exampleModalLabel" aria-hidden="true">
+                    <div class="modal-dialog" role="document">
+                        <div class="modal-content">
                             <div class="modal-header">
-                              <h5 class="modal-title black-text" id="exampleModalLabel">Umpan Balik Materi</h5>
-                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                <span aria-hidden="true">&times;</span>
-                              </button>
+                                <h5 class="modal-title black-text" id="exampleModalLabel">Umpan Balik Materi</h5>
+                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                    <span aria-hidden="true">&times;</span>
+                                </button>
                             </div>
                             <div class="modal-body">
-                              {% for item in report %}
+                                {% for item in report %}
                                 <p class="black-text">Alasan materi ditolak:</p>
                                 <p class="black-text">{{ item.report.feedback }}</p>
-                                <p class="black-text">Untuk merevisi materi, sila tekan tombol revisi di halaman riwayat unggah.</p>
-                              {% endfor %}
+                                <p class="black-text">Untuk merevisi materi, sila tekan tombol revisi di halaman riwayat
+                                    unggah.</p>
+                                {% endfor %}
                             </div>
                             <div class="modal-footer">
-                              <button type="button" class="btn btn-danger" data-dismiss="modal">Tutup</button>
+                                <button type="button" class="btn btn-danger" data-dismiss="modal">Tutup</button>
                             </div>
-                          </div>
                         </div>
-                      </div>
-                </li>
-                {% endif %}
+                    </div>
+                </div>
+            </li>
+            {% endif %}
             {% endif %}
 
             <li class="nav-item">
@@ -80,222 +83,239 @@
             <!-- Nav Item - User Information -->
             {% if request.user.is_authenticated %}
             <li class="nav-item dropdown no-arrow">
-              <a class="nav-link dropdown-toggle" href="/dashboard/">
-                <span class="mr-2 d-none d-lg-inline text-gray-600 small">{{ user.name }}</span>
-                {% if not user.default_profile_picture %}
-                <img class="img-profile rounded-circle" src="https://i.ibb.co/9wgPzyZ/default-image.png" alt="User profile picture">
-                {% else %}
-                <img class="img-profile rounded-circle" src="{{ user.profile_picture.url }}" alt="User profile picture">
-                {% endif %}
-              </a>
+                <a class="nav-link dropdown-toggle" href="/dashboard/">
+                    <span class="mr-2 d-none d-lg-inline text-gray-600 small">{{ user.name }}</span>
+                    {% if not user.default_profile_picture %}
+                    <img class="img-profile rounded-circle" src="https://i.ibb.co/9wgPzyZ/default-image.png"
+                        alt="User profile picture">
+                    {% else %}
+                    <img class="img-profile rounded-circle" src="{{ user.profile_picture.url }}"
+                        alt="User profile picture">
+                    {% endif %}
+                </a>
             </li>
             {% endif %}
 
-          </ul>
+        </ul>
 
-        </nav>
-        <div class="row materi-data mr-4 ml-4 p-3 shadow-sm rounded">
-            <div class="col col-3 cover">
-                <img src={{materi_data.cover.url}} alt="cover">
+    </nav>
+    <div class="row materi-data mr-4 ml-4 p-3 shadow-sm rounded">
+        <div class="col col-3 cover">
+            <img src={{materi_data.cover.url}} alt="cover">
+        </div>
+        <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="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 class="info-wrapper">
+                <div class="info" id="1">
+                    <dl class="col col-4">
+                        <dt class="info-name">Penulis</dt>
+                    </dl>
+                    <dd>
+                        <p class="info-content">{{materi_data.author}}</p>
+                    </dd>
                 </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">{{materi_data.author}}</p>
-                        </dd>
-                    </div>
-                    <div class="info" id="1">
-                        <dt class="col col-4">
-                            <p class="info-name">Penerbit</p>
-                        </dt>
-                        <dd>
-                            <p class="info-content">{{materi_data.publisher}}</p>
-                        </dd>
-                    </div>
-                    <div class="info" id="1">
-                        <dt class="col col-4">
-                            <p class="info-name">Jumlah Halaman</p>
-                        </dt>
-                        <dd>
-                            <p class="info-content">{{materi_data.pages}}</p>
-                        </dd>
-                    </div>
-                    <div class="info" id="1">
-                        <dt class="col col-4">
-                            <p class="info-name">Ukuran File</p>
-                        </dt>
-                        <dd>
-                            <p class="info-content">{{materi_data.content.size|filesizeformat}}</p>
-                        </dd>
-                    </div>
+                <div class="info" id="1">
+                    <dl class="col col-4">
+                        <dt class="info-name">Penerbit</dt>
+                    </dl>
+                    <dd>
+                        <p class="info-content">{{materi_data.publisher}}</p>
+                    </dd>
                 </div>
-                <div class="buttons d-flex flex-row bd-highlight mb-1">
-                    <a href="{% url 'view-materi' materi_data.id %}" class="btn btn-link btn-book shadow-sm p-2 mr-2 bg-white rounded">Baca</a>
-                    <a href="{% url 'download-materi' materi_data.id %}" class="btn btn-link btn-book shadow-sm p-2 mr-2 bg-white rounded">Unduh</a>
-                    <div class="dropdown">
-                        <button class="btn dropdown-toggle btn-book shadow-sm p-2 mr-2 bg-white rounded" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            Bagikan
-                        </button>
-                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                            <div class="fb-share-button" data-href="{% url 'detail-materi' materi_data.id %}" data-layout="button" data-size="small">
-                                <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdigipus-staging-2.herokuapp.com%2Fmateri%2F{{materi_data.id}}%2F&amp;src=sdkpreparse" class="dropdown-item fb-xfbml-parse-ignore">Facebook</a>
-                            </div>
-                            <a class="twitter-share-button dropdown-item"
-                                href="https://twitter.com/intent/tweet?text=Cek%20materi%20ini%20yuk%20https%3A%2F%2Fdigipus-staging-2.herokuapp.com%2Fmateri%2F{{materi_data.id}}%2F"
-                                target="_blank"
-                                data-size="large">
-                                Twitter
-                            </a>
-                            <a class="dropdown-item" href="whatsapp://send?text=Cek materi ini yuk! https://digipus-staging-2.herokuapp.com{{request.path}}" target="_blank">Whatsapp</a>
-                            <a class="dropdown-item" href="https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Fdigipus-staging-2.herokuapp.com%2Fmateri%2F{{materi_data.id}}%2F" target="_blank">Line</a>
-                            <p id="url" style="display: none">https://digipus-staging-2.herokuapp.com{{request.path}}</p>
-                            <button class="dropdown-item btn-book" onclick="copyToClipboard('#url')">Bagikan Tautan</button>
+                <div class="info" id="1">
+                    <dl class="col col-4">
+                        <dt class="info-name">Kontributor</dt>
+                    </dl>
+                    <dd>
+                        <a class="info-content"
+                            href="{% url 'katalog-per-kontributor' materi_data.uploader.email %}">{{materi_data.uploader.name}}</a>
+                    </dd>
+                </div>
+                <div class="info" id="1">
+                    <dl class="col col-4">
+                        <dt class="info-name">Jumlah Halaman</dt>
+                    </dl>
+                    <dd>
+                        <p class="info-content">{{materi_data.pages}}</p>
+                    </dd>
+                </div>
+                <div class="info" id="1">
+                    <dl class="col col-4">
+                        <dt class="info-name">Ukuran File</dt>
+                    </dl>
+                    <dd>
+                        <p class="info-content">{{materi_data.content.size|filesizeformat}}</p>
+                    </dd>
+                </div>
+            </div>
+            <div class="buttons d-flex flex-row bd-highlight mb-1">
+                <a href="{% url 'view-materi' materi_data.id %}"
+                    class="btn btn-link btn-book shadow-sm p-2 mr-2 bg-white rounded">Baca</a>
+                <a href="{% url 'download-materi' materi_data.id %}"
+                    class="btn btn-link btn-book shadow-sm p-2 mr-2 bg-white rounded">Unduh</a>
+                <div class="dropdown">
+                    <button class="btn dropdown-toggle btn-book shadow-sm p-2 mr-2 bg-white rounded" type="button"
+                        id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Bagikan
+                    </button>
+                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                        <div class="fb-share-button" data-href="{% url 'detail-materi' materi_data.id %}"
+                            data-layout="button" data-size="small">
+                            <a target="_blank"
+                                href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdigipus-staging-2.herokuapp.com%2Fmateri%2F{{materi_data.id}}%2F&amp;src=sdkpreparse"
+                                class="dropdown-item fb-xfbml-parse-ignore">Facebook</a>
                         </div>
+                        <a class="twitter-share-button dropdown-item"
+                            href="https://twitter.com/intent/tweet?text=Cek%20materi%20ini%20yuk%20https%3A%2F%2Fdigipus-staging-2.herokuapp.com%2Fmateri%2F{{materi_data.id}}%2F"
+                            target="_blank" data-size="large">
+                            Twitter
+                        </a>
+                        <a class="dropdown-item"
+                            href="whatsapp://send?text=Cek materi ini yuk! https://digipus-staging-2.herokuapp.com{{request.path}}"
+                            target="_blank">Whatsapp</a>
+                        <a class="dropdown-item"
+                            href="https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Fdigipus-staging-2.herokuapp.com%2Fmateri%2F{{materi_data.id}}%2F"
+                            target="_blank">Line</a>
+                        <p id="url" style="display: none">https://digipus-staging-2.herokuapp.com{{request.path}}</p>
+                        <button class="dropdown-item btn-book" onclick="copyToClipboard('#url')">Bagikan Tautan</button>
                     </div>
-                    <form action="" method="POST">
-                        <input type="hidden" name="action" value="like">
-                    </form>
-                    {% if has_liked %}
-                    <button id="thumb" class="btn btn-link btn-book shadow-sm p-2 mr-2 bg-white rounded"><i id="thumbIcon" aria-hidden="true" class="fas fa-thumbs-up"></i> Disukai</button>
-                    {% else %}
-                    <button id="thumb" class="btn btn-link btn-book shadow-sm p-2 mr-2 bg-white rounded"><i id="thumbIcon" aria-hidden="true" class="far fa-thumbs-up"></i> Sukai</button>
-                    {% endif %}
+                </div>
+                <form action="" method="POST">
+                    <input type="hidden" name="action" value="like">
+                </form>
+                {% if has_liked %}
+                <button id="thumb" class="btn btn-link btn-book shadow-sm p-2 mr-2 bg-white rounded"><i id="thumbIcon"
+                        aria-hidden="true" class="fas fa-thumbs-up"></i> Disukai</button>
+                {% else %}
+                <button id="thumb" class="btn btn-link btn-book shadow-sm p-2 mr-2 bg-white rounded"><i id="thumbIcon"
+                        aria-hidden="true" class="far fa-thumbs-up"></i> Sukai</button>
+                {% endif %}
 
-                    {% if user.is_authenticated %}
-                        <div class="dropdown">
-                            <button class="btn dropdown-toggle btn-book shadow-sm p-2 mr-2 bg-white rounded align-self-center"
-                                    type="button" data-toggle="dropdown" aria-haspopup="true"
-                                    aria-expanded="false">
-                                <em id="button-rating-star-icon" class="align-self-center far fa-star"></em>
-                                <span id="button-rating-text">Beri Rating</span>
-                            </button>
-                            <div id="star-dropdown" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                                <div class="text-center btn-book">
-                                    <em onclick="postAddRating(1)" id="star-1" class="far fa-star fa-lg"></em>
-                                    <em onclick="postAddRating(2)" id="star-2" class="far fa-star fa-lg"></em>
-                                    <em onclick="postAddRating(3)" id="star-3" class="far fa-star fa-lg"></em>
-                                    <em onclick="postAddRating(4)" id="star-4" class="far fa-star fa-lg"></em>
-                                    <em onclick="postAddRating(5)" id="star-5" class="far fa-star fa-lg"></em>
-                                </div>
-                            </div>
+                {% if user.is_authenticated %}
+                <div class="dropdown">
+                    <button class="btn dropdown-toggle btn-book shadow-sm p-2 mr-2 bg-white rounded align-self-center"
+                        type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <em id="button-rating-star-icon" class="align-self-center far fa-star"></em>
+                        <span id="button-rating-text">Beri Rating</span>
+                    </button>
+                    <div id="star-dropdown" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                        <div class="text-center btn-book">
+                            <em onclick="postAddRating(1)" id="star-1" class="far fa-star fa-lg"></em>
+                            <em onclick="postAddRating(2)" id="star-2" class="far fa-star fa-lg"></em>
+                            <em onclick="postAddRating(3)" id="star-3" class="far fa-star fa-lg"></em>
+                            <em onclick="postAddRating(4)" id="star-4" class="far fa-star fa-lg"></em>
+                            <em onclick="postAddRating(5)" id="star-5" class="far fa-star fa-lg"></em>
                         </div>
-                    {% else %}
-                        <button class="btn dropdown-toggle btn-book shadow-sm p-2 mr-2 bg-white rounded align-self-center"
-                                type="button"
-                                id="dropdownMenuButton" aria-haspopup="true"
-                                aria-expanded="false" data-toggle="modal"
-                                data-target="#notLoggedInModal">
-                            <em class="align-self-center far fa-star"></em> Beri Rating
-                        </button>
-                    {% endif %}
+                    </div>
                 </div>
+                {% else %}
+                <button class="btn dropdown-toggle btn-book shadow-sm p-2 mr-2 bg-white rounded align-self-center"
+                    type="button" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false" data-toggle="modal"
+                    data-target="#notLoggedInModal">
+                    <em class="align-self-center far fa-star"></em> Beri Rating
+                </button>
+                {% endif %}
             </div>
         </div>
-        <div class="row menu-wrapper mr-4 ml-4 p-3">
-            <nav class="navbar navbar-expand-sm border-top border-bottom p-0 mt-3 mb-3">
-                <ul class="navbar-nav">
-                    <li class="nav-item">
-                        <a class="nav-link" href="#deskripsi">Deskripsi</a>
-                    </li>
-                    {% if materi_data.status == "APPROVE" %}
-                    <li class="nav-item">
-                        <a class="nav-link" href="#komentar">Komentar</a>
-                    </li>
-                    {% endif %}
-                </ul>
-            </nav>
-            <div id="deskripsi" class="container-fluid description-wrapper bg-white shadow-sm rounded p-3">
-                <h1>Deskripsi</h1>
-                <div class="col col-8 description">
-                    <p>{{materi_data.descriptions}}</p>
-                </div>
+    </div>
+    <div class="row menu-wrapper mr-4 ml-4 p-3">
+        <nav class="navbar navbar-expand-sm border-top border-bottom p-0 mt-3 mb-3">
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link" href="#deskripsi">Deskripsi</a>
+                </li>
+                {% if materi_data.status == "APPROVE" %}
+                <li class="nav-item">
+                    <a class="nav-link" href="#komentar">Komentar</a>
+                </li>
+                {% endif %}
+            </ul>
+        </nav>
+        <div id="deskripsi" class="container-fluid description-wrapper bg-white shadow-sm rounded p-3">
+            <h1>Deskripsi</h1>
+            <div class="col col-8 description">
+                <p>{{materi_data.descriptions}}</p>
             </div>
-            {% if materi_data.status == "APPROVE" %}
-                <div id="komentar" class="container-fluid comments-wrapper p-0">
-                    <div class="add-comments col col-8 bg-white shadow-sm rounded p-3 mb-3">
-                        <form method="POST">
-                            {% csrf_token %}
-                            <h1>Komentar</h1>
-                            <div class="form-group">
-                                <textarea placeholder="Beri komentar..." class="form-control"
-                                        id="exampleFormControlTextarea1"
-                                        rows="3" name="comment" required
-                                ></textarea>
-                                <button type="submit" class="btn btn-link btn-book shadow-sm p-2 mt-2 bg-white rounded">Kirim</button>
-                            </div>
-                        </form>
+        </div>
+        {% if materi_data.status == "APPROVE" %}
+        <div id="komentar" class="container-fluid comments-wrapper p-0">
+            <div class="add-comments col col-8 bg-white shadow-sm rounded p-3 mb-3">
+                <form method="POST">
+                    {% csrf_token %}
+                    <h1>Komentar</h1>
+                    <div class="form-group">
+                        <textarea placeholder="Beri komentar..." class="form-control" id="exampleFormControlTextarea1"
+                            rows="3" name="comment" required></textarea>
+                        <button type="submit"
+                            class="btn btn-link btn-book shadow-sm p-2 mt-2 bg-white rounded">Kirim</button>
                     </div>
-                    {% for comment in comment_data %}
-                        <div class="col col-8 comment shadow-sm p-3 mb-1 bg-white rounded">
-                            <div class="d-flex bd-highlight mb-3 align-items-center user">
-                                {% if comment.user != Null %}
-                                    {% if not user.default_profile_picture %}
-                                    <img class="profile" src="https://i.ibb.co/9wgPzyZ/default-image.png" alt="profile-picture">
-                                    {% else %}
-                                    <img class="profile" src="{{ comment.user.profile_picture.url }}" alt="profile-picture">
-                                    {% endif %}
-                                {% else %}
-                                    <span style="background-color: #{{comment.profile}}" class="profile p-1 bd-highligh"></span>
-                                {% endif %}
-                                <p class="p-1 bd-highligh m-0"><b>{{comment.user.name}}</b></p>
-                                <p class="p-1 bd-highligh m-0">•</p>
-                                <p
-                                    class="timestamp p-1 bd-highligh m-0 text-muted"
-                                >
-                                    {{ comment.timestamp|naturaltime }}
-                                </p>
-                                {% if user.is_admin %}
-                                    <a class="ml-auto p-1 bd-highlight close" href="{% url 'delete-comment' materi_data.id comment.id %}">
-                                        <span aria-hidden="true">&times;</span>
-                                    </a>
-                                {% endif %}
-                            </div>
-                            <p class="text">{{comment.comment}}</p>
-                        </div>
-                    {% endfor %}
+                </form>
+            </div>
+            {% for comment in comment_data %}
+            <div class="col col-8 comment shadow-sm p-3 mb-1 bg-white rounded">
+                <div class="d-flex bd-highlight mb-3 align-items-center user">
+                    {% if comment.user != Null %}
+                    {% if not user.default_profile_picture %}
+                    <img class="profile" src="https://i.ibb.co/9wgPzyZ/default-image.png" alt="profile-picture">
+                    {% else %}
+                    <img class="profile" src="{{ comment.user.profile_picture.url }}" alt="profile-picture">
+                    {% endif %}
+                    {% else %}
+                    <span style="background-color: #{{comment.profile}}" class="profile p-1 bd-highligh"></span>
+                    {% endif %}
+                    <p class="p-1 bd-highligh m-0"><b>{{comment.user.name}}</b></p>
+                    <p class="p-1 bd-highligh m-0">•</p>
+                    <p class="timestamp p-1 bd-highligh m-0 text-muted">
+                        {{ comment.timestamp|naturaltime }}
+                    </p>
+                    {% if user.is_admin %}
+                    <a class="ml-auto p-1 bd-highlight close"
+                        href="{% url 'delete-comment' materi_data.id comment.id %}">
+                        <span aria-hidden="true">&times;</span>
+                    </a>
+                    {% endif %}
                 </div>
-            {% endif %}
+                <p class="text">{{comment.comment}}</p>
+            </div>
+            {% endfor %}
         </div>
+        {% endif %}
     </div>
-    <footer class="sticky-footer bg-white p-4">
-        <div class="container my-auto">
-          <div class="copyright text-center my-auto">
+</div>
+<footer class="sticky-footer bg-white p-4">
+    <div class="container my-auto">
+        <div class="copyright text-center my-auto">
             <span>Copyright &copy; Diskominfo Kota Depok 2020</span>
-          </div>
         </div>
-      </footer>
+    </div>
+</footer>
 
-    <!-- Modal -->
-    <div class="modal fade" id="notLoggedInModal" tabindex="-1" role="dialog" aria-labelledby="notLoggedInModalLabel"
-         aria-hidden="true">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="notLoggedInModalLabel">Belum Login</h5>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    Login untuk memberikan rating
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
-                    <button type="button" class="btn btn-primary" onclick="window.location.href = '/login';">Login</button>
-                </div>
+<!-- Modal -->
+<div class="modal fade" id="notLoggedInModal" tabindex="-1" role="dialog" aria-labelledby="notLoggedInModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="notLoggedInModalLabel">Belum Login</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                Login untuk memberikan rating
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
+                <button type="button" class="btn btn-primary" onclick="window.location.href = '/login';">Login</button>
             </div>
         </div>
     </div>
+</div>
 {% endblock content %}
 {% block extra_scripts %}
 <script src="https://kit.fontawesome.com/bc2cedd6b2.js" crossorigin="anonymous"></script>
@@ -329,9 +349,9 @@
 
     function fillRatingStar(ratingScore) {
         for (let i = 1; i <= ratingScore; i++) {
-                $('#star-' + i).addClass('fas');
-                $('#star-' + i).removeClass('far');
-            }
+            $('#star-' + i).addClass('fas');
+            $('#star-' + i).removeClass('far');
+        }
     }
 
     function makeHoverStar(starAmount) {
@@ -365,63 +385,63 @@
     }
 </script>
 <script>
-        $('#thumb').click(function () {
+    $('#thumb').click(function () {
 
-            $.ajaxSetup({
-                beforeSend: function (xhr, settings) {
-                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
-                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
-                    }
+        $.ajaxSetup({
+            beforeSend: function (xhr, settings) {
+                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
+                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                 }
-            });
-            $.ajax({
-                type: 'POST',
-                url: "{% url 'PostLikeToggle' %}",
-                data: {
-                    'materi_id': "{{ materi_data.id }}",
-                    'session_id': "{{ session_id }}"
-                },
-                success: LikePost,
-                dataType: 'html'
-            });
+            }
         });
+        $.ajax({
+            type: 'POST',
+            url: "{% url 'PostLikeToggle' %}",
+            data: {
+                'materi_id': "{{ materi_data.id }}",
+                'session_id': "{{ session_id }}"
+            },
+            success: LikePost,
+            dataType: 'html'
+        });
+    });
 
-        function postAddRating(rating_score) {
-            $.ajaxSetup({
-                beforeSend: function (xhr, settings) {
-                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
-                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
-                    }
+    function postAddRating(rating_score) {
+        $.ajaxSetup({
+            beforeSend: function (xhr, settings) {
+                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
+                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                 }
-            });
+            }
+        });
 
-            $.ajax({
-                type: 'POST',
-                url: "{% url 'rate-materi' %}",
-                data: {
-                    'materi_id': "{{ materi_data.id }}",
-                    'rating_score': rating_score
-                },
-                success: function (data) {
-                    const response = JSON.parse(data)
-                    currentRating = response.rating_score
-                    makeUnHoverStar(currentRating)()
-                    changeButtonIntoRated()
+        $.ajax({
+            type: 'POST',
+            url: "{% url 'rate-materi' %}",
+            data: {
+                'materi_id': "{{ materi_data.id }}",
+                'rating_score': rating_score
+            },
+            success: function (data) {
+                const response = JSON.parse(data)
+                currentRating = response.rating_score
+                makeUnHoverStar(currentRating)()
+                changeButtonIntoRated()
 
-                },
-                dataType: 'html'
-            });
-        }
+            },
+            dataType: 'html'
+        });
+    }
 
-        function LikePost(data, jqXHR) {
-            var data = $.parseJSON(data)
-            if (data['liked']) {
-                $('#thumbIcon').removeClass("fas fa-thumbs-up").addClass('far fa-thumbs-up')
-                document.getElementById("thumb").firstChild.data = " Sukai"
-            } else {
-                $('#thumbIcon').removeClass("far fa-thumbs-up").addClass('fas fa-thumbs-up')
-                document.getElementById("thumb").firstChild.data = " Disukai"
-            }
+    function LikePost(data, jqXHR) {
+        var data = $.parseJSON(data)
+        if (data['liked']) {
+            $('#thumbIcon').removeClass("fas fa-thumbs-up").addClass('far fa-thumbs-up')
+            document.getElementById("thumb").firstChild.data = " Sukai"
+        } else {
+            $('#thumbIcon').removeClass("far fa-thumbs-up").addClass('fas fa-thumbs-up')
+            document.getElementById("thumb").firstChild.data = " Disukai"
         }
+    }
 </script>
-{% endblock extra_scripts %}
+{% endblock extra_scripts %}
\ No newline at end of file
diff --git a/app/templates/app/katalog_kontri.html b/app/templates/app/katalog_kontri.html
new file mode 100644
index 0000000000000000000000000000000000000000..3ddaf130261abbbb2ccc0c546f855e93b876f14d
--- /dev/null
+++ b/app/templates/app/katalog_kontri.html
@@ -0,0 +1,135 @@
+{% extends "base.html" %}
+{% load static %}
+{% block title %}Digipus - {% endblock %}
+{% block header %}
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Digipus Home</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link href="../../static/app/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="../../static/app/css/heroic-features.css" rel="stylesheet">
+
+    <link rel="stylesheet" type="text/css" href="{% static 'app/css/katalog_materi.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'app/css/katalog_kontri.css' %}">
+
+    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'css/util.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
+
+    <link rel="stylesheet" type="text/css" href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'vendor/animsition/css/animsition.min.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'vendor/daterangepicker/daterangepicker.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'vendor/css-hamburgers/hamburgers.min.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'vendor/select2/select2.min.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'vendor/animate/animate.css' %}">
+
+    <link rel="icon" type="image/png" href="{% static 'images/icons/logo.ico' %}" />
+
+
+    {% endblock header %}
+    {% block content %}
+
+</head>
+
+<body style="background-color: #f8f8f8;">
+    <div class="container main">
+        <header class="jumbotron my-4" id="profile">
+            <div class="container sub">
+                <div class="row">
+                    <div class="col-lg-3">
+                        <div class="img-squared">
+                            {% if not contributor.default_profile_picture %}
+                            <img class="img-profile rounded-circle" src="https://i.ibb.co/9wgPzyZ/default-image.png"
+                                alt="Contributor profile picture">
+                            {% else %}
+                            <img class="img-profile rounded-circle" src="{{ contributor.profile_picture.url }}"
+                                alt="Contributor profile picture">
+                            {% endif %}
+                        </div>
+                    </div>
+                    <div class="col-lg-9">
+
+                        <table aria-describedby="profile">
+                            <th colspan="2" id="contributor-data">
+                                <h3 class="profile-data">{{ contributor.name }}</h3>
+                                <br>
+                            </th>
+                            <tr>
+                                <td class="profile-data">Instansi</td>
+                                <td>{{ contributor.instansi }}</td>
+                            </tr>
+
+                            <tr>
+                                <td class="profile-data">LinkedIn</td>
+                                <td><a href="https://linkedin.com">{{ contributor.linkedin }}</a></td>
+                            </tr>
+
+                            <tr>
+                                <td class="profile-data">Facebook</td>
+                                <td><a href="https://facebook.com">{{ contributor.facebook }}</a></td>
+                            </tr>
+
+                            <tr>
+                                <td class="profile-data">Twitter</td>
+                                <td><a href="https://twitter.com">{{ contributor.twitter }}</a></td>
+                            </tr>
+
+                            <tr>
+                                <td class="profile-data">Instagram</td>
+                                <td><a href="https://instagram.com">{{ contributor.instagram }}</a></td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <div class="container">
+            <div class="row content">
+                <div class="col books">
+                    {% for materi in materi_list %}
+                    <div class="card book">
+                        <img src={{materi.cover.url}} class="card-img-top" alt="cover"
+                            style="height:200px; widows: 200px; overflow: hidden;"></img>
+                        <div class="card-body">
+                            <h5 class="card-title">{{materi.title}}</h5>
+                            <p class="card-text">{{materi.author}}</p>
+                            <a href="{% url 'view-materi' materi.id %}" class="btn btn-book">Baca</a>
+                            <a href="{% url 'detail-materi' materi.id %}" class="btn btn-book">Detail</a>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+                <div class="center">
+                    <div class="pagination">
+                        <span class="step-links">
+                            <span class="current">
+                                Page {{ materi_list.number }} of {{ materi_list.paginator.num_pages }}
+                            </span>
+                            <br>
+                            {% if materi_list.has_previous %}
+                            <a href="?page=1{{url}}">&laquo; first</a>
+                            <a href="?page={{ materi_list.previous_page_number }}{{url}}">previous</a>
+                            {% endif %}
+
+                            {% if materi_list.has_next %}
+                            <a href="?page={{ materi_list.next_page_number }}{{url}}">next</a>
+                            <a href="?page={{ materi_list.paginator.num_pages }}{{url}}">last &raquo;</a>
+                            {% endif %}
+                        </span>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
+
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/app/katalog_materi.html b/app/templates/app/katalog_materi.html
index 9782d19d98c75aafb5239947bcd5ffbfdb193cec..c4013e21b6549391bcea6a7281e3540f782a98d0 100644
--- a/app/templates/app/katalog_materi.html
+++ b/app/templates/app/katalog_materi.html
@@ -41,13 +41,13 @@
     <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
     <!--===============================================================================================-->
 
-{% endblock header %}
-{% block content %}
+    {% endblock header %}
+    {% block content %}
 
 </head>
 
 <body style="background-color: #f8f8f8;">
-<!-- Page Content -->
+    <!-- Page Content -->
     <div class="container">
 
         <header class="jumbotron my-4">
@@ -56,18 +56,20 @@
                     <div class="col">
                         <h2 class="pageTitle">Temukan Materi Yang Kamu Mau!</h2>
                         <p class="description">Cari dengan judul buku, penerbit, atau penulis</p>
-                        <form class="searchBar" action=''>  
+                        <form class="searchBar" action=''>
                             <div class="col-6 form-group">
-                                <input type="text" name='search' class="form-control" placeholder="Tulis di sini" value='{{request.GET.search}}'>
+                                <input type="text" name='search' class="form-control" placeholder="Tulis di sini"
+                                    value='{{request.GET.search}}'>
                             </div>
                             <button type="submit" class="btn btn-cari">Cari</button>
                         </form>
-                        <p class="pageTitle">Tidak menemukan materi yang kamu cari ? ajukan permintaan materi kami <a href="/req-materi">disini</a></p>
+                        <p class="pageTitle">Tidak menemukan materi yang kamu cari ? ajukan permintaan materi kami <a
+                                href="/req-materi">disini</a></p>
                     </div>
                 </div>
-            </div>    
+            </div>
         </header>
-        
+
         <div class="container">
             <div class="row content">
                 <div class="col-3 sidebar">
@@ -75,26 +77,20 @@
                         <div class="card">
                             <div class="card-header" id="headingOne">
                                 <h2 class="mb-0">
-                                    <button class="btn collapsed" 
-                                    type="button" 
-                                    data-toggle="collapse" 
-                                    data-target="#collapseOne" 
-                                    aria-expanded="true" 
-                                    aria-controls="collapseOne">
-                                    Filter
+                                    <button class="btn collapsed" type="button" data-toggle="collapse"
+                                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                        Filter
                                     </button>
                                 </h2>
                             </div>
-                            
-                            <div id="collapseOne" 
-                            class="collapse" 
-                            aria-labelledby="headingOne" 
-                            data-parent="#accordionExample">
+
+                            <div id="collapseOne" class="collapse" aria-labelledby="headingOne"
+                                data-parent="#accordionExample">
                                 <div class="card-body">
                                     {% for itemKategori in kategori_list %}
-                                        <li>
-                                            <a href="?kategori={{itemKategori.pk}}">{{itemKategori.name}}</a>
-                                        </li>                        
+                                    <li>
+                                        <a href="?kategori={{itemKategori.pk}}">{{itemKategori.name}}</a>
+                                    </li>
                                     {% endfor %}
                                 </div>
                             </div>
@@ -102,33 +98,35 @@
 
                         <div class="card">
                             <div class="card-header" id="headingTwo">
-                            <h2 class="mb-0">
-                                <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-                                Sort
-                                </button>
-                            </h2>
-                            </div>
-                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
-                            <div class="card-body">                                
-                                <li>
-                                    <a href="?sort=terbaru">terbaru</a>
-                                </li>                                
-                                <li>
-                                    <a href="?sort=terlama">terlama</a>
-                                </li> 
-                                <li>
-                                    <a href="?sort=terpopuler">terpopuler</a>
-                                </li> 
-                                <li>
-                                    <a href="?sort=judul">judul</a>
-                                </li> 
-                                <li>
-                                    <a href="?sort=penulis">penulis</a>
-                                </li> 
-                                <li>
-                                    <a href="?sort=pengunggah">pengunggah</a>
-                                </li> 
+                                <h2 class="mb-0">
+                                    <button class="btn collapsed" type="button" data-toggle="collapse"
+                                        data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                                        Sort
+                                    </button>
+                                </h2>
                             </div>
+                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
+                                data-parent="#accordionExample">
+                                <div class="card-body">
+                                    <li>
+                                        <a href="?sort=terbaru">terbaru</a>
+                                    </li>
+                                    <li>
+                                        <a href="?sort=terlama">terlama</a>
+                                    </li>
+                                    <li>
+                                        <a href="?sort=terpopuler">terpopuler</a>
+                                    </li>
+                                    <li>
+                                        <a href="?sort=judul">judul</a>
+                                    </li>
+                                    <li>
+                                        <a href="?sort=penulis">penulis</a>
+                                    </li>
+                                    <li>
+                                        <a href="?sort=pengunggah">pengunggah</a>
+                                    </li>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -137,11 +135,16 @@
                 <div class="col-9 books">
                     {% for item in materi_list %}
                     <div class="card book">
-                        <img src={{item.cover.url}} class="card-img-top" alt="cover" 
+                        <img src={{item.cover.url}} class="card-img-top" alt="cover"
                             style="height:200px; widows: 200px;; overflow: hidden;"></img>
                         <div class="card-body">
                             <h5 class="card-title">{{item.title}}</h5>
                             <p class="card-text">{{item.author}}</p>
+                            <p class="card-text">Diunggah oleh
+                                <a class="card-link" href="{% url 'katalog-per-kontributor' item.uploader.email %}">
+                                    {{item.uploader.name}}
+                                </a>
+                            </p>
                             <a href="{% url 'view-materi' item.id %}" class="btn btn-book">Baca</a>
                             <a href="{% url 'detail-materi' item.id %}" class="btn btn-book">Detail</a>
                         </div>
@@ -158,14 +161,14 @@
 
                             <br>
                             </br>
-                            
+
                             {% if materi_list.has_previous %}
-                            <a href="?page=1{{url}}" >&laquo; first</a>
+                            <a href="?page=1{{url}}">&laquo; first</a>
                             <a href="?page={{ materi_list.previous_page_number }}{{url}}">previous</a>
                             {% endif %}
-                    
-                            
-                    
+
+
+
                             {% if materi_list.has_next %}
                             <a href="?page={{ materi_list.next_page_number }}{{url}}">next</a>
                             <a href="?page={{ materi_list.paginator.num_pages }}{{url}}">last &raquo;</a>
@@ -173,16 +176,14 @@
                         </span>
                     </div>
                 </div>
-                
+
             </div>
         </div>
     </div>
-    
-<!-- /.container -->
+
+    <!-- /.container -->
 </body>
 
 </html>
 
-{% endblock %}
-
-    
\ No newline at end of file
+{% endblock %}
\ No newline at end of file
diff --git a/app/tests.py b/app/tests.py
index e17d391a3e362c5179a15649d368369a12e9bb26..c298f5f420f4dcf817749f7d3ef209dd2a6c0a57 100644
--- a/app/tests.py
+++ b/app/tests.py
@@ -19,7 +19,8 @@ from .models import Category, Comment, Materi, Like, Rating
 from .views import (DaftarKatalog, DashboardKontributorView, DetailMateri,
                     ProfilKontributorView, SuksesLoginAdminView,
                     SuksesLoginKontributorView, SuntingProfilView,
-                    ProfilAdminView, PostsView, SuntingProfilAdminView, RevisiMateriView)
+                    ProfilAdminView, PostsView, SuntingProfilAdminView, 
+                    RevisiMateriView, KatalogPerKontributorView)
 from app.forms import SuntingProfilForm
 from app.utils.fileManagementUtil import get_random_filename, remove_image_exifdata
 
@@ -48,6 +49,60 @@ class DaftarKatalogTest(TestCase):
         resp = Materi.objects.get(id=materi.id)
         self.assertEqual(resp, materi)
 
+class DaftarKatalogPerKontributorTest(TestCase):
+    def setUp(self):
+        self.client = Client()
+    
+        self.contributor_credential = {
+                "email": "kontributor@gov.id",
+                "password": "passwordtest"
+            }
+        
+        self.contributor_credential_2 = {
+                "email": "kontributor2@gov.id",
+                "password": "passwordtest"
+            }
+
+        self.contributor = get_user_model().objects.create_user(
+            **self.contributor_credential, name="Kontributor 1", is_contributor=True)
+        self.contributor2 = get_user_model().objects.create_user(
+            **self.contributor_credential_2, name="Kontributor 2", is_contributor=True)
+        
+        self.cover = SimpleUploadedFile(
+            "Cherprang_Areekul40_nJM9dGt.jpg", b"Test file")
+        self.content = SimpleUploadedFile("Bahan_PA_RKK.pdf", b"Test file")
+
+        Materi(title="Materi 1", author="Agas", uploader=self.contributor,
+               publisher="Kelas SC", descriptions="Deskripsi Materi 1",
+               status="APPROVE", cover=self.cover, content=self.content).save()
+        Materi(title="Materi 2", author="Agas", uploader=self.contributor,
+               publisher="Kelas SC", descriptions="Deskripsi Materi 2",
+               status="APPROVE", cover=self.cover, content=self.content).save()
+        Materi(title="Materi 3", author="Agas", uploader=self.contributor2,
+               publisher="Kelas SC", descriptions="Deskripsi Materi 3",
+               status="APPROVE", cover=self.cover, content=self.content).save()
+        
+        self.url = f"/profil/{self.contributor.email}/"
+        
+    def test_katalog_per_kontributor_url_exist(self):
+        response = self.client.get(self.url)
+        self.assertEqual(response.status_code, 200)
+
+    def test_katalog_per_kontributor_using_katalog_kontri_template(self):
+        response = self.client.get(self.url)
+        self.assertTemplateUsed(response, "app/katalog_kontri.html")    
+
+    def test_katalog_per_kontributor_using_katalog_per_kontributor_func(self):
+        found = resolve(self.url)
+        self.assertEqual(found.func.__name__, KatalogPerKontributorView.as_view().__name__)
+
+    def test_katalog_per_kontributor_show_daftar_materi_kontributor(self):
+        response = self.client.get(self.url)
+        
+        list_materi = Materi.objects.filter(uploader=self.contributor)        
+        data = response.context_data['materi_list']
+        self.assertEqual(len(list_materi), len(data))    
+
 
 class DetailMateriTest(TestCase):
     def setUp(self):
diff --git a/app/urls.py b/app/urls.py
index 1d28cfd54a29e5d262ae013de98e1d4a5b3ed360..ac2c7682946dd6e6bb6eb4c7a500fb9c2c8f414e 100644
--- a/app/urls.py
+++ b/app/urls.py
@@ -4,7 +4,8 @@ from app import views
 from app.views import (DashboardKontributorView, ProfilKontributorView,
                        SuksesLoginAdminView, SuksesLoginKontributorView,
                        SuntingProfilView, UploadMateriHTML, UploadMateriView,
-                       ProfilAdminView, PostsView, SuntingProfilAdminView, ReqMateriView)
+                       ProfilAdminView, PostsView, SuntingProfilAdminView,
+                       ReqMateriView, KatalogPerKontributorView)
 
 urlpatterns = [
     path("", views.DaftarKatalog.as_view(), name="daftar_katalog"),
@@ -28,5 +29,7 @@ urlpatterns = [
     path("sunting-admin/", SuntingProfilAdminView.as_view(), name="sunting-admin"),
     path("req-materi/", ReqMateriView.as_view(), name="req-materi"),
     path("post-req-materi/", views.post_req_materi, name="post-req-materi"),
+    path("profil/<str:email>/", KatalogPerKontributorView.as_view(),
+         name="katalog-per-kontributor"),
     path("materi/rate/", views.add_rating_materi, name="rate-materi"),
 ]
diff --git a/app/views.py b/app/views.py
index 08c480443d37699e08d1030683c55dbadced92c1..31dbbbcada3a5dd3783cc813a6538b52d90336c4 100644
--- a/app/views.py
+++ b/app/views.py
@@ -77,6 +77,26 @@ class DaftarKatalog(TemplateView):
         context["url"] = url
         return self.render_to_response(context=context)
 
+class KatalogPerKontributorView(TemplateView):
+    template_name = "app/katalog_kontri.html"
+    
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        contributor = get_object_or_404(User, email=kwargs["email"])
+        context["contributor"] = contributor
+        return context
+
+    def get(self, request, *args, **kwargs):
+        context = self.get_context_data(**kwargs)
+         
+        materi_list = Materi.objects.filter(status="APPROVE", uploader=context["contributor"]).order_by("date_modified")
+                    
+        paginator = Paginator(materi_list, 15)
+        page_number = request.GET.get('page')
+        materi_list_by_page = paginator.get_page(page_number)
+        context["materi_list"] = materi_list_by_page
+
+        return self.render_to_response(context=context)
 
 class DetailMateri(TemplateView):
     template_name = "app/detail_materi.html"