diff --git a/assets/views/fragments/novel-tn.jet.html b/assets/views/fragments/novel-tn.jet.html
index 3383f7c..003ec60 100644
--- a/assets/views/fragments/novel-tn.jet.html
+++ b/assets/views/fragments/novel-tn.jet.html
@@ -11,9 +11,10 @@
   </div>
   <div class="col-8 col-md-9">
     <!-- Novel title -->
-    <h4 class="text-truncate">
+    <!-- NOTE: using an h4 element here breaks the underline animation for some reason -->
+    <span class="fs-6 fw-bold text-truncate">
       <a href="/novel/{{ .ID }}" class="text-body text-decoration-none">{{ .Title }}</a>
-    </h4>
+    </span>
 
     <!-- Series name -->
     {{- if .SeriesID }}
@@ -23,13 +24,19 @@
     {{- end }}
 
     <!-- Word count and reading time -->
-    <p class="card-text text-muted small mb-2"><span>{{ .WordCount }} word(s)</span>&nbsp;<span>{{ floor: .ReadingTime / 60 }} mins</span></p>
+    <p class="card-text text-muted small mb-2">
+      <span>{{ .WordCount }} word(s)</span>&nbsp;<span>{{ floor: .ReadingTime / 60 }} mins</span>
+    </p>
 
     <!-- Author info -->
-    <a href="/users/{{ .UserID }}" class="text-decoration-none d-flex align-items-center me-auto mb-3">
-      <img src="{{ .UserAvatar }}" alt="{{ .UserName }}" class="rounded-circle object-fit-cover me-2" style="width: 24px; height: 24px" />
-      <span class="text-body-secondary">{{ .UserName }}</span>
-    </a>
+    <div class="d-flex align-items-center me-auto mb-3">
+      <a href="/users/{{ .UserID }}">
+        <img src="{{ .UserAvatar }}" alt="{{ .UserName }}" class="rounded-circle object-fit-cover me-2" style="width: 24px; height: 24px" />
+      </a>
+      <a href="/users/{{ .UserID }}" class="text-body-secondary text-decoration-none">
+        {{ .UserName }}
+      </a>
+    </div>
 
     {*
     <!-- Description -->
@@ -71,11 +78,17 @@
     <div class="d-flex justify-content-start align-items-center">
       {* NOTE: the following is needed due to incomplete fields in .Novel.UserNovels *}
       {{- if .Bookmarks == 0 }}
-      <span class="text-body-secondary small me-3"> <i class="bi bi-heart-fill me-2"></i>&#8212;</span>
+      <span class="text-body-secondary small me-3">
+        <i class="bi bi-heart-fill me-2"></i>&#8212;
+      </span>
       {{- else }}
-      <span class="text-body-secondary small me-3"> <i class="bi bi-heart-fill me-2"></i>{{ .Bookmarks }}</span>
+      <span class="text-body-secondary small me-3">
+        <i class="bi bi-heart-fill me-2"></i>{{ .Bookmarks }}
+      </span>
       {{- end }}
-      <span class="text-body-secondary small"> <i class="bi bi-calendar me-2"></i>{{ parseTime: .CreateDate }}</span>
+      <span class="text-body-secondary small">
+        <i class="bi bi-calendar me-2"></i>{{ parseTime: .CreateDate }}
+      </span>
     </div>
   </div>
 </div>