diff --git a/html/pop_up.html b/html/pop_up.html
index 05fd6f6..0ab4b7b 100644
--- a/html/pop_up.html
+++ b/html/pop_up.html
@@ -4,17 +4,13 @@
                 <div>
                     <span id="popup-e">heonian: </span><span id="popup-heo"></span><br>
                     type: <span id="popup-type"></span><br>
-                    quirks: <span id="popup-quirks"></span>
+                    <div id="popup-quirks-container">quirks: <span id="popup-quirks"></span></div>
                 </div>
                 <p id="popup-meaning"></p>
             </div>
         </div>
         <div id="smol-popup" style="opacity: 0; pointer-events: none;">
             <h1>um</h1>
-            <div>
-                <span id="smol-e">heonian: </span><span id="smol-heo"></span><br>
-                type: <span id="smol-type"></span><br>
-                quirks: <span id="smol-quirks"></span>
-            </div>
             <p id="smol-meaning"></p>
+            <p>click for more info!</p>
         </div>
\ No newline at end of file
diff --git a/main.js b/main.js
index 5429c92..bca3f54 100644
--- a/main.js
+++ b/main.js
@@ -9,11 +9,65 @@ let currentFont = "r";
 
 let timeout = "";
 
+let quirkBadges = {
+    "present-tense": {
+        "name": "Present tense",
+        "description": "The word is in the present tense.",
+        "color": "#00dd00",
+        "type": "Tense",
+        "bending": "ka'nya"
+    },
+    "past-tense": {
+        "name": "Past tense",
+        "description": "The word is in the past tense.",
+        "color": "#dd00dd",
+        "type": "Tense",
+        "bending": "kome"
+    },
+    "volitional-mood": {
+        "name": "Feeling mood",
+        "description": "A feeling,",
+        "color": "#dd00dd",
+        "type": "Mood",
+        "bending": "pash"
+    },
+    "imperative-mood": {
+        "name": "Imperative mood",
+        "description": "Commanding mood.",
+        "color": "#dd0000",
+        "type": "Mood",
+        "bending": "dash"
+    },
+    "shy-mood": {
+        "name": "Shy mood",
+        "description": "Shy mood.",
+        "color": "#dddd00",
+        "type": "Mood",
+        "bending": "bash"
+    },
+    "threat-mood": {
+        "name": "Threat mood",
+        "description": "Threat mood.",
+        "color": "#00dddd",
+        "type": "Mood",
+        "bending": "tash"
+    },
+    "negated": {
+        "name": "Negated",
+        "description": "The word is negated.",
+        "color": "#7777dd",
+        "type": "Negation",
+        "bending": "fa"
+    }
+}
+
 function init() {
     createWordList();
-    document.querySelector("#popup-container").addEventListener("click", () => {
-        document.querySelector("#popup-container").style.opacity = 0;
-        document.querySelector("#popup-container").style.pointerEvents = "none";
+    document.querySelector("#popup-container").addEventListener("click", (e) => {
+        if (e.target.id == "popup-container") {
+            document.querySelector("#popup-container").style.opacity = 0;
+            document.querySelector("#popup-container").style.pointerEvents = "none";
+        }
     });
     // above are commented out until wordlist is added~
     document.querySelector("#font-button").addEventListener("click", () => {fontButton();});
@@ -45,11 +99,29 @@ function showPopup(ogword, word, quirks = "") {
     }
     p.querySelector("#popup-type").innerText = words[word]["type"];
     p.querySelector("#popup-meaning").innerText = words[word]["meaning"];
-    let wq = "";
+    p.querySelector("#popup-quirks").innerHTML = "";
     if (quirks.trim() != "") {
-        wq = quirks.split(" ").join(", ");
+        p.querySelector("#popup-quirks-container").style.display = "block";
+        let qyuirks = quirks.split(" ");
+        qyuirks.forEach(quirk => {
+            let badge = document.createElement("div");
+            badge.classList.add("badge");
+            console.log(quirk);
+            badge.style.backgroundColor = quirkBadges[quirk]["color"];
+            badge.innerText = quirkBadges[quirk]["name"];
+            badge.onclick = () => {
+                p.querySelector("h1").innerText = quirkBadges[quirk]["name"];
+                p.querySelector("#popup-meaning").innerText = quirkBadges[quirk]["description"];
+                p.querySelector("#popup-type").innerText = quirkBadges[quirk]["type"];
+                p.querySelector("#popup-quirks-container").style.display = "none";
+                p.querySelector("#popup-e").innerText = "bending: ";
+                p.querySelector("#popup-heo").innerText = quirkBadges[quirk]["bending"];
+            }
+            p.querySelector("#popup-quirks").appendChild(badge);
+        });
+    } else {
+        p.querySelector("#popup-quirks-container").style.display = "none";
     }
-    p.querySelector("#popup-quirks").innerText = wq;
     c.style.opacity = 1;
     c.style.pointerEvents = "all";
     } catch (e) {
@@ -65,22 +137,12 @@ function showSmolPopup(ogword, word, self, quirks) {
     word = cleanWord(word);
     if (currentFont == "r") {
         p.querySelector("h1").innerText = words[word]["romanizationProper"];
-        p.querySelector("#smol-heo").innerText = words[word]["heonian"];
         p.querySelector("h1").style.fontFamily = "var(--font-normal)";
-        p.querySelector("#smol-e").innerText = "heonian: ";
     } else {
         p.querySelector("h1").innerText = words[word]["heonian"];
-        p.querySelector("#smol-heo").innerText = words[word]["romanizationProper"];
         p.querySelector("h1").style.fontFamily = "var(--font-heonian)";
-        p.querySelector("#smol-e").innerText = "romanization: ";
     }
-    p.querySelector("#smol-type").innerText = words[word]["type"];
     p.querySelector("#smol-meaning").innerText = words[word]["meaning"];
-    let wq = "";
-    if (quirks.trim() != "") {
-        wq = quirks.split(" ").join(", ");
-    }
-    p.querySelector("#smol-quirks").innerText = wq;
     p.style.opacity = 1;
     p.style.pointerEvents = "all";
     // set position to cursor position (but we dont have the event)
diff --git a/test.html b/test.html
index e8a9da6..eb04514 100644
--- a/test.html
+++ b/test.html
@@ -4332,19 +4332,15 @@ fayu
                 <div>
                     <span id="popup-e">heonian: </span><span id="popup-heo"></span><br>
                     type: <span id="popup-type"></span><br>
-                    quirks: <span id="popup-quirks"></span>
+                    <div id="popup-quirks-container">quirks: <span id="popup-quirks"></span></div>
                 </div>
                 <p id="popup-meaning"></p>
             </div>
         </div>
         <div id="smol-popup" style="opacity: 0; pointer-events: none;">
             <h1>um</h1>
-            <div>
-                <span id="smol-e">heonian: </span><span id="smol-heo"></span><br>
-                type: <span id="smol-type"></span><br>
-                quirks: <span id="smol-quirks"></span>
-            </div>
             <p id="smol-meaning"></p>
+            <p>click for more info!</p>
         </div>
     </main>
     <script src="main.js"></script>
diff --git a/text_analysis.css b/text_analysis.css
index 41ca1a5..e05811c 100644
--- a/text_analysis.css
+++ b/text_analysis.css
@@ -191,16 +191,38 @@ main {
     top: 0;
     left: 0;
     transition: opacity 0.3s;
+    text-align: center;
 }
 
-#popup h1, #smol-popup h1 {
+#popup h1 {
     text-align: center;
 }
 
+#smol-popup h1 {
+    margin: 0;
+}
+
 #popup-heo, #smol-heo {
     font-family: "heonian";
 }
 
+#popup-quirks {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+}
+
+#popup-quirks * {
+    margin-bottom: 8px;
+}
+
+.badge {
+    padding: 4px;
+    border-radius: 8px;
+    color: white;
+    cursor: pointer;
+}
+
 .button {
     text-decoration: underline;
     text-align: center;