diff --git a/html/popup.html b/html/popup.html
index 844295b..9c70c22 100644
--- a/html/popup.html
+++ b/html/popup.html
@@ -900,9 +900,9 @@
             <button class="big-button back-btn" data-i18n="back">Back</button>
         </div>
         <div class="option-container">
-            <h3 class="header-small" id="fontsDropdown" style="cursor: pointer;">
+            <h3 class="header-small" id="fontsDropdown" style="cursor:pointer; display:flex; align-items:center; gap:8px;">
                 Dashboard Font
-                <img src="../icon/dropdownArrow.svg" width="16px" height="16px">
+                <img id="fontsDropdownArrow" style="transform:rotate(180deg);" src="../icon/dropdownArrow.svg" width="16px" height="16px">
             </h3>
             
             <div id="quick-fonts"></div>
diff --git a/js/popup.js b/js/popup.js
index 2077320..5cc037f 100644
--- a/js/popup.js
+++ b/js/popup.js
@@ -510,7 +510,7 @@ function setup() {
     });
 
     document.querySelector("#alert").addEventListener("click", clearAlert);
-
+    // TODO: maybe fix this at some point, idk what is causing the error here
     document.querySelectorAll(".preset-button.customization-button").forEach(btn => btn.addEventListener("click", changeToPresetCSS));
 
     // activate card color inputs
@@ -752,12 +752,16 @@ function setup() {
     document.getElementById("fontsDropdown").addEventListener("click", (e) => {
         const el = document.getElementById("quick-fonts");
         const el2 = document.getElementsByClassName("custom-font")[0];
+        const arrow = document.getElementById("fontsDropdownArrow");
         if (el.style.display === "none") {
             el.style.display = "flex";
             el2.style.display = "block";
+            arrow.style.transform = "rotate(180deg)";
+
         } else {
             el.style.display = "none";
             el2.style.display = "none";
+            arrow.style.transform = "rotate(0deg)";
         }
     });