diff --git a/dashboard_static/index.html b/dashboard_static/index.html
index 471a822..3cd4c9c 100644
--- a/dashboard_static/index.html
+++ b/dashboard_static/index.html
@@ -107,7 +107,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 9efef3f..2627449 100644
--- a/dashboard_static/js/events.js
+++ b/dashboard_static/js/events.js
@@ -67,4 +67,12 @@ $(".logo").on("click", function() {
         root.style.setProperty('--tweet-color', 'whitesmoke');
         root.style.setProperty('--column-color', 'rgba(112, 128, 144, 0.388');
     }
+})
+
+$(".order-btn").on("click", function() {
+    if($(this).html() == "arrow_downward") {    // Descending to ascending
+        $(this).html("arrow_upward")
+    } else {    // Ascending to descending
+        $(this).html("arrow_downward")
+    }
 })
\ No newline at end of file
diff --git a/dashboard_static/style/style.css b/dashboard_static/style/style.css
index 4207dbe..3b04eee 100644
--- a/dashboard_static/style/style.css
+++ b/dashboard_static/style/style.css
@@ -245,6 +245,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;