diff --git a/app/templates/app/detail_materi.html b/app/templates/app/detail_materi.html
index 3a0db58e5b88b78a8c4ffa721e037b290442ce06..54b0bb090fa529d1cc3562e06369a7dd462536cd 100644
--- a/app/templates/app/detail_materi.html
+++ b/app/templates/app/detail_materi.html
@@ -185,6 +185,28 @@
                         <button class="dropdown-item btn-book" onclick="copyToClipboard('#url')">Bagikan Tautan</button>
                     </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>
+                    <button class="btn btn-link btn-book shadow-sm p-2 mr-2 bg-white rounded" onclick="CitateAPA('{{citationAPA}}')">Citate APA</button>
+                    <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>
                 <form action="" method="POST">
                     <input type="hidden" name="action" value="like">
                 </form>
@@ -442,6 +464,10 @@
             $('#thumbIcon').removeClass("far fa-thumbs-up").addClass('fas fa-thumbs-up')
             document.getElementById("thumb").firstChild.data = " Disukai"
         }
-    }
+        function CitateAPA(text){
+            alert('Hasil citasi :  '+text);
+        }
+
+        
 </script>
 {% endblock extra_scripts %}
\ No newline at end of file
diff --git a/app/tests.py b/app/tests.py
index 465349e365fcf80fdb424b19eabb6ae78441a7b3..adf63c619e866fda2bfc9044834a3dec7961a9d2 100644
--- a/app/tests.py
+++ b/app/tests.py
@@ -217,6 +217,21 @@ class DetailMateriTest(TestCase):
         self.assertEqual(Comment.objects.all().filter(
             comment="This is new comment by Anonymous").count(), 0)
 
+    def test_tombol_citasiAPA(self):
+        response = self.client.get(self.url)
+        self.assertContains(response, 'Citate APA')
+
+    def test_hasil_citasi_APA(self):
+        response = self.client.get(self.url)
+        publishedDate = ''
+        if(self.materi1.published_date == None):
+            publishedDate = 'n.d'
+        else :
+            publishedDate = self.materi1.published_date
+        expected = self.materi1.author+' . ('  + publishedDate +') . ' + self.materi1.title +' . '+ self.materi1.publisher
+        self.assertIn(expected,
+                      response.context["citationAPA"])
+
 
 class PostsViewTest(TestCase):
 
diff --git a/app/views.py b/app/views.py
index 9e77e36dfe695f149f4c6509cc0fd29b95b899b1..8a5ef310d506b74c73c38bfef6000f9e5b7a1302 100644
--- a/app/views.py
+++ b/app/views.py
@@ -111,6 +111,13 @@ class DetailMateri(TemplateView):
         context["report"] = VerificationReport.objects.filter(materi=materi)
         context["has_liked"] = Like.objects.filter(
             materi=materi, session_id=self.request.session.session_key).exists()
+        publishedDate = ''
+        if(materi.published_date == None):
+            publishedDate = 'n.d'
+        else :
+            publishedDate = materi.published_date
+        citationAPA = materi.author+' . ('  + publishedDate +') . ' + materi.title +' . '+materi.publisher
+        context["citationAPA"] = citationAPA
         context['materi_rating_score'] = 0
 
         if self.request.user.is_authenticated: