diff --git a/dashboard_static/index.html b/dashboard_static/index.html
index f209f62..dc526af 100644
--- a/dashboard_static/index.html
+++ b/dashboard_static/index.html
@@ -110,7 +110,7 @@
                                 </ul>
                             </div>
                         </div>
-                        <!-- <div class="button">BLOCKED WORDS</div> -->
+                        <span class="material-symbols-outlined order-btn">arrow_downward</span>
                     </div>
                     <div class="popchart column">
                         <span class="colheader chartheader">Sports Popularity Chart</span>
diff --git a/dashboard_static/js/events.js b/dashboard_static/js/events.js
index 7ebd696..9000e11 100644
--- a/dashboard_static/js/events.js
+++ b/dashboard_static/js/events.js
@@ -79,3 +79,14 @@ $(window).on("filter", function() {
             parent.append(tweetCell(tweets[i]));
     }
 })
+$(".order-btn").on("click", function() {
+    if($(this).html() == "arrow_downward") {    // Descending to ascending
+        $(this).html("arrow_upward")
+        // trigger an event called ascending
+        $(window).trigger("ascending")
+    } else {    // Ascending to descending
+        $(this).html("arrow_downward")
+        // trigger an event called descending
+        $(window).trigger("descending")
+    }
+})
diff --git a/dashboard_static/style/style.css b/dashboard_static/style/style.css
index c580b0c..9b27667 100644
--- a/dashboard_static/style/style.css
+++ b/dashboard_static/style/style.css
@@ -242,6 +242,12 @@ body {
 	border: none;
 }
 
+.material-symbols-outlined.order-btn {
+	line-height: 52px;
+	font-weight: 600;
+	user-select: none;
+}
+
 .sort-btn {
 	user-select: none;
 	position: relative;