diff --git a/main.css b/main.css
index 54a2155..ff8bd6e 100644
--- a/main.css
+++ b/main.css
@@ -239,10 +239,6 @@ main {
     color: var(--darkgrey);
 }
 
-.result-translation::before {
-    content: " - ";
-}
-
 .result summary {
     margin-top: 4px;
     color: grey;
@@ -254,6 +250,10 @@ main {
     font-size: 1.25rem;
 }
 
+.result details.result-meta p {
+    font-size: 1rem;
+}
+
 .results-header-count::after {
     content: ", ";
 }
diff --git a/main.js b/main.js
index 8144f36..5bba123 100644
--- a/main.js
+++ b/main.js
@@ -132,7 +132,7 @@ heonianConsonants = {
     "10": "h",
 };
 
-function heonianToRoman(text) {
+function heonianToRoman(text, strict = false) {
     let roman = "";
     for (let i = 0; i < text.length; i++) {
         let h = text.codePointAt(i);
@@ -147,7 +147,7 @@ function heonianToRoman(text) {
                     roman += heonianConsonants[h[1] + "" + h[2]] + heonianVowels[h[3] - 1];
                 }
             }
-        } else {
+        } else if (strict == false) {
             roman += text.charAt(i);
         }
     }
@@ -161,6 +161,15 @@ function processVerb(word) {
     //but ... not yet uwu
 }
 
+function generateRuby(word) {
+    letters = word.split("");
+    ruby = "";
+    for (let i = 0; i < letters.length; i++) {
+        ruby += `<ruby>${letters[i]}<rt>${heonianToRoman(letters[i])}</rt></ruby>`;
+    }
+    return ruby;
+}
+
 function loadDictionary() {
     fetch("./wordlist.json").then((e) => {
         if (e.status === 200) {
@@ -241,9 +250,9 @@ function doSearch() {
             result.classList.add("result");
 
             // 1. add word in heo + romanized ruby as header
-            let header = document.createElement("ruby");
+            let header = document.createElement("span");
             header.classList.add("result-header");
-            header.innerHTML = results[i] + " <rt>" + heonianToRoman(results[i]) + "</rt>";
+            header.innerHTML = generateRuby(results[i]);
 
             // 2. add tags [tags like. common word, slang, formal???, type, etc]
             // hhh how do i do this part, what tags. would i add. would this be. per word, or per definition?
@@ -261,28 +270,30 @@ function doSearch() {
                 repeat for all meanings of word,
             */
             result.appendChild(header);
+            let last = "";
             for (let o = 0; o < json[results[i]].length; o++) {
                 let meaning = document.createElement("div");
                 meaning.classList.add("result-meaning");
                 //ripping off jisho: Bold, word type (*required)
-                meaning.innerHTML += "<b class='capitalize'>"+json[results[i]][o]["type"]+"</b>";
+                if (last != json[results[i]][o]["type"]) meaning.innerHTML += "<b class='capitalize'>"+json[results[i]][o]["type"]+"</b><br>";
+                last = json[results[i]][o]["type"];
                 if (types[json[results[i]][o]["type"]] == undefined) {
                     types[json[results[i]][o]["type"]] = 1;
                 } else {
                     types[json[results[i]][o]["type"]]++;
                 }
                 //number, meaning (*required)
-                meaning.innerHTML += "<br><span class='result-number'>"+(o+1)+"</span><span class='result-big'>"+json[results[i]][o]["meaning"]+"</span>";
+                meaning.innerHTML += "<span class='result-number'>"+(o+1)+"</span><span class='result-big'>"+json[results[i]][o]["meaning"]+"</span>";
                 //longer translation (below are not required, make sure to check for them)
                 if (json[results[i]][o]["translation"] != undefined && json[results[i]][o]["translation"].toLowerCase() != json[results[i]][o]["meaning"].toLowerCase()) {
-                    meaning.innerHTML += "<span class='result-translation'>"+json[results[i]][o]["translation"]+"</span>";
+                    meaning.innerHTML += "<br><span class='result-translation'>"+json[results[i]][o]["translation"]+"</span>";
                 }
                 //example
                 if (json[results[i]][o]["examples"] != undefined) {
                     let temp = ""
                     temp += "<details><summary>Examples</summary><p>";
                     for (let e in json[results[i]][o]["examples"]) {
-                        temp += "<span class='heonian'>"+e+"</span> - "+json[results[i]][o]["examples"][e]+"<br>";
+                        temp += "<span class='heonian'>"+generateRuby(e)+"</span> - "+json[results[i]][o]["examples"][e]+"<br>";
                     }
                     temp += "</p></details>";
                     meaning.innerHTML += temp;
@@ -293,10 +304,10 @@ function doSearch() {
                 }
                 //(source, etc)
                 if (json[results[i]][o]["canon-etymology"] != undefined) {
-                    meaning.innerHTML += "<details><summary>Canon Etymology</summary><p>"+json[results[i]][o]["canon-etymology"]+"</p></details>";
+                    meaning.innerHTML += "<details class='result-meta'><summary>Canon Etymology</summary><p>"+json[results[i]][o]["canon-etymology"]+"</p></details>";
                 }
                 if (json[results[i]][o]["meta-etymology"] != undefined) {
-                    meaning.innerHTML += "<details><summary>Meta Etymology</summary><p>"+json[results[i]][o]["meta-etymology"]+"</p></details>";
+                    meaning.innerHTML += "<details class='result-meta'><summary>Meta Etymology</summary><p>"+json[results[i]][o]["meta-etymology"]+"</p></details>";
                 }
                 //todo
                 result.appendChild(meaning); //y, yeah.