diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
index 3c7c0c2c..d53ccaa6 100644
--- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
+++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
@@ -94,17 +94,17 @@ const MessageWithTransliteration = ({ item }) => {
         const hira = token.hira ?? "";
         const hepburn = token.hepburn ?? "";
 
-        if ((hira && orig === hira)) {
+        if (hira && hira === orig && hepburn) {
             return (
-                <span key={key} title={hepburn} className={styles.token}>
+                <span key={key} title={hepburn} className={styles.with_hepburn}>
                     {orig}
                 </span>
             );
         }
 
-        if (hira && hira !== orig) {
+        if (hira && hira !== orig && hepburn) {
             return (
-                <ruby key={key} title={hepburn} className={styles.tokenRuby}>
+                <ruby key={key} title={hepburn} className={styles.with_hepburn}>
                     {orig}
                     <rt>{hira}</rt>
                 </ruby>
@@ -113,7 +113,7 @@ const MessageWithTransliteration = ({ item }) => {
 
         if (hepburn && hepburn !== orig) {
             return (
-                <ruby key={key} className={styles.tokenRuby}>
+                <ruby key={key} className={styles.ruby}>
                     {orig}
                     <rt>{hepburn}</rt>
                 </ruby>
@@ -121,7 +121,7 @@ const MessageWithTransliteration = ({ item }) => {
         }
 
         return (
-            <span key={key} className={styles.token}>
+            <span key={key} className={styles.original_only}>
                 {orig}
             </span>
         );
diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
index ea82b297..b0986c3f 100644
--- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
+++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
@@ -112,4 +112,11 @@
         font-size: 1.2rem;
         color: var(--dark_500_color);
     }
+}
+
+// For ruby
+.with_hepburn {
+    &:hover {
+        color: var(--dark_500_color);
+    }
 }
\ No newline at end of file