diff --git a/assets/css/bootstrap-style.css b/assets/css/bootstrap-style.css
index 343fa6f..ee8c560 100644
--- a/assets/css/bootstrap-style.css
+++ b/assets/css/bootstrap-style.css
@@ -4463,7 +4463,7 @@ textarea.form-control-lg {
   --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }
 
-.card, .custom-card {
+.card, .custom-novel-card, .custom-card {
   --bs-card-spacer-y: 1rem;
   --bs-card-spacer-x: 1rem;
   --bs-card-title-spacer-y: 0.5rem;
@@ -4495,26 +4495,27 @@ textarea.form-control-lg {
   border: var(--bs-card-border-width) solid var(--bs-card-border-color);
   border-radius: var(--bs-card-border-radius);
 }
-.card > hr, .custom-card > hr {
+.card > hr, .custom-novel-card > hr, .custom-card > hr {
   margin-right: 0;
   margin-left: 0;
 }
-.card > .list-group, .custom-card > .list-group {
+.card > .list-group, .custom-novel-card > .list-group, .custom-card > .list-group {
   border-top: inherit;
   border-bottom: inherit;
 }
-.card > .list-group:first-child, .custom-card > .list-group:first-child {
+.card > .list-group:first-child, .custom-novel-card > .list-group:first-child, .custom-card > .list-group:first-child {
   border-top-width: 0;
   border-top-left-radius: var(--bs-card-inner-border-radius);
   border-top-right-radius: var(--bs-card-inner-border-radius);
 }
-.card > .list-group:last-child, .custom-card > .list-group:last-child {
+.card > .list-group:last-child, .custom-novel-card > .list-group:last-child, .custom-card > .list-group:last-child {
   border-bottom-width: 0;
   border-bottom-right-radius: var(--bs-card-inner-border-radius);
   border-bottom-left-radius: var(--bs-card-inner-border-radius);
 }
-.card > .card-header + .list-group, .custom-card > .card-header + .list-group,
+.card > .card-header + .list-group, .custom-novel-card > .card-header + .list-group, .custom-card > .card-header + .list-group,
 .card > .list-group + .card-footer,
+.custom-novel-card > .list-group + .card-footer,
 .custom-card > .list-group + .card-footer {
   border-top: 0;
 }
@@ -4609,7 +4610,7 @@ textarea.form-control-lg {
   border-bottom-left-radius: var(--bs-card-inner-border-radius);
 }
 
-.card-group > .card, .card-group > .custom-card {
+.card-group > .card, .card-group > .custom-novel-card, .card-group > .custom-card {
   margin-bottom: var(--bs-card-group-margin);
 }
 @media (min-width: 576px) {
@@ -4617,39 +4618,43 @@ textarea.form-control-lg {
     display: flex;
     flex-flow: row wrap;
   }
-  .card-group > .card, .card-group > .custom-card {
+  .card-group > .card, .card-group > .custom-novel-card, .card-group > .custom-card {
     flex: 1 0 0%;
     margin-bottom: 0;
   }
-  .card-group > .card + .card, .card-group > .custom-card + .card, .card-group > .card + .custom-card, .card-group > .custom-card + .custom-card {
+  .card-group > .card + .card, .card-group > .custom-novel-card + .card, .card-group > .card + .custom-novel-card, .card-group > .custom-novel-card + .custom-novel-card, .card-group > .custom-card + .card, .card-group > .custom-card + .custom-novel-card, .card-group > .card + .custom-card, .card-group > .custom-novel-card + .custom-card, .card-group > .custom-card + .custom-card {
     margin-left: 0;
     border-left: 0;
   }
-  .card-group > .card:not(:last-child), .card-group > .custom-card:not(:last-child) {
+  .card-group > .card:not(:last-child), .card-group > .custom-novel-card:not(:last-child), .card-group > .custom-card:not(:last-child) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
-  .card-group > .card:not(:last-child) .card-img-top, .card-group > .custom-card:not(:last-child) .card-img-top,
+  .card-group > .card:not(:last-child) .card-img-top, .card-group > .custom-novel-card:not(:last-child) .card-img-top, .card-group > .custom-card:not(:last-child) .card-img-top,
   .card-group > .card:not(:last-child) .card-header,
+  .card-group > .custom-novel-card:not(:last-child) .card-header,
   .card-group > .custom-card:not(:last-child) .card-header {
     border-top-right-radius: 0;
   }
-  .card-group > .card:not(:last-child) .card-img-bottom, .card-group > .custom-card:not(:last-child) .card-img-bottom,
+  .card-group > .card:not(:last-child) .card-img-bottom, .card-group > .custom-novel-card:not(:last-child) .card-img-bottom, .card-group > .custom-card:not(:last-child) .card-img-bottom,
   .card-group > .card:not(:last-child) .card-footer,
+  .card-group > .custom-novel-card:not(:last-child) .card-footer,
   .card-group > .custom-card:not(:last-child) .card-footer {
     border-bottom-right-radius: 0;
   }
-  .card-group > .card:not(:first-child), .card-group > .custom-card:not(:first-child) {
+  .card-group > .card:not(:first-child), .card-group > .custom-novel-card:not(:first-child), .card-group > .custom-card:not(:first-child) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
-  .card-group > .card:not(:first-child) .card-img-top, .card-group > .custom-card:not(:first-child) .card-img-top,
+  .card-group > .card:not(:first-child) .card-img-top, .card-group > .custom-novel-card:not(:first-child) .card-img-top, .card-group > .custom-card:not(:first-child) .card-img-top,
   .card-group > .card:not(:first-child) .card-header,
+  .card-group > .custom-novel-card:not(:first-child) .card-header,
   .card-group > .custom-card:not(:first-child) .card-header {
     border-top-left-radius: 0;
   }
-  .card-group > .card:not(:first-child) .card-img-bottom, .card-group > .custom-card:not(:first-child) .card-img-bottom,
+  .card-group > .card:not(:first-child) .card-img-bottom, .card-group > .custom-novel-card:not(:first-child) .card-img-bottom, .card-group > .custom-card:not(:first-child) .card-img-bottom,
   .card-group > .card:not(:first-child) .card-footer,
+  .card-group > .custom-novel-card:not(:first-child) .card-footer,
   .card-group > .custom-card:not(:first-child) .card-footer {
     border-bottom-left-radius: 0;
   }
@@ -7665,7 +7670,7 @@ textarea.form-control-lg {
   border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
 }
 
-.border-0, .custom-card-body, .custom-card, .custom-btn-secondary, .custom-btn-secondary-flex {
+.border-0, .custom-novel-card, .custom-card-body, .custom-card, .custom-btn-secondary, .custom-btn-secondary-flex {
   border: 0 !important;
 }
 
@@ -7882,7 +7887,7 @@ textarea.form-control-lg {
   height: 75% !important;
 }
 
-.h-100 {
+.h-100, .custom-novel-card {
   height: 100% !important;
 }
 
@@ -9153,7 +9158,7 @@ textarea.form-control-lg {
   pointer-events: auto !important;
 }
 
-.rounded {
+.rounded, .custom-novel-card {
   border-radius: var(--bs-border-radius) !important;
 }
 
diff --git a/assets/css/bootstrap-style.scss b/assets/css/bootstrap-style.scss
index b4f3bfb..03443a0 100644
--- a/assets/css/bootstrap-style.scss
+++ b/assets/css/bootstrap-style.scss
@@ -78,6 +78,13 @@ $utilities: map-merge(
   @extend .rounded-5;
 }
 
+.custom-novel-card {
+  @extend .card;
+  @extend .h-100;
+  @extend .border-0;
+  @extend .rounded;
+}
+
 /// Custom heading sizes (e.g., h1 gets h3 size, h2 gets h4 size, etc.)
 h1 {
   font-size: $h3-font-size;
diff --git a/assets/views/fragments/novel-tn.jet.html b/assets/views/fragments/novel-tn.jet.html
index a4bc122..92b5f16 100644
--- a/assets/views/fragments/novel-tn.jet.html
+++ b/assets/views/fragments/novel-tn.jet.html
@@ -1,25 +1,25 @@
 <div class="col">
-  <div class="card h-100 border-0 bg-charcoal-surface1 rounded p-3">
+  <div class="custom-novel-card bg-charcoal-surface1 p-3">
     <div class="row g-3">
-      <div class="col-4">
+      <div class="col-4 col-md-2">
         <a href="/novel/{{ .ID }}" class="text-decoration-none">
           <div class="ratio ratio-3x4">
             <img src="{{ .CoverURL }}" alt="{{ .Title }}" class="img-fluid rounded object-fit-cover" loading="lazy" />
           </div>
         </a>
       </div>
-      <div class="col-8">
+      <div class="col-8 col-md-10">
         <!-- Series name -->
         {{- if .SeriesID }}
-        <a href="/novel/series/{{ .SeriesID }}" class="text-decoration-none">
-          <p class="text-body-secondary small mb-1">{{ .SeriesTitle }}</p>
-        </a>
+        <p class="text-truncate mb-1">
+          <a href="/novel/series/{{ .SeriesID }}" class="fw-bold small text-body-secondary text-decoration-none">{{ .SeriesTitle }}</a>
+        </p>
         {{- end }}
 
         <!-- Novel title -->
-        <h3>
+        <h4 class="text-truncate">
           <a href="/novel/{{ .ID }}" class="text-body text-decoration-none">{{ .Title }}</a>
-        </h3>
+        </h4>
 
         <!-- Word count and reading time -->
         <p class="card-text text-muted small mb-3"><span>{{ .WordCount }} word(s)</span>&nbsp;<span>{{ floor: .ReadingTime / 60 }} mins</span></p>
@@ -28,29 +28,41 @@
           <span class="text-muted">{{ .UserName }}</span>
         </a>
 
+        {*
         <!-- Description -->
         <!-- TODO: figure this out -->
-        <!-- <p class="small mb-2">{{ raw: .Description }}</p> -->
+        <!-- <p class="text-truncate mb-1">
+          {{ raw: .Description }}
+        </p> -->
+        *}
 
         <!-- Tags -->
-        {{- if .AiType == 2 }}
-        <span class="badge bg-warning text-dark me-2 mb-2">AI-generated</span>
-        {{- end }}
-        {{- if .IsOriginal }}
-        <span class="badge bg-secondary me-2 mb-2">Original</span>
-        {{- end }}
-        {{- if .Genre != "0" }}
-        <span class="badge bg-light text-dark me-2 mb-2">{{ novelGenre: .Genre }}</span>
-        {{- end }}
-        {{- range .Tags }}
-          {{- if isEmphasize(.) }}
-          <span class="badge bg-danger me-2 mb-2">{{ . }}</span>
-          {{- else }}
-          <span class="badge fw-normal text-muted me-2 mb-2 p-0 text-wrap text-break text-start">
-            <a href="/tags/{{ escapeString(.) }}" class="text-decoration-none text-wrap text-break">#{{ . }}</a>
-          </span>
+        <div class="d-flex flex-wrap align-items-center mb-2">
+          {{- if .AiType == 2 }}
+          <span class="badge bg-warning text-dark me-2 mb-2">AI-generated</span>
           {{- end }}
-        {{- end }}
+          <!-- NOTE: early block to catch the R-18 tag -->
+          {{- range .Tags }}
+            {{- if isEmphasize(.) }}
+            <span class="badge bg-danger me-2 mb-2">{{ . }}</span>
+            {{- end }}
+          {{- end }}
+          {{- if .IsOriginal }}
+          <span class="badge bg-primary me-2 mb-2">Original</span>
+          {{- end }}
+          {{- if .Genre != "0" }}
+          <span class="badge bg-secondary me-2 mb-2">{{ novelGenre: .Genre }}</span>
+          {{- end }}
+          {{- range .Tags }}
+            {{- if isEmphasize(.) }}
+            {* Intentionally empty to not render anything to avoid duplication *}
+            {{- else }}
+            <span class="badge fw-normal text-muted me-2 mb-2 p-0 text-wrap text-break text-start">
+              <a href="/tags/{{ escapeString(.) }}" class="text-decoration-none text-wrap text-break">#{{ . }}</a>
+            </span>
+            {{- end }}
+          {{- end }}
+        </div>
 
         <!-- Metadata (bookmarks and creation date) -->
         <div class="d-flex justify-content-between align-items-center">
diff --git a/assets/views/fragments/thumbnail-tt.jet.html b/assets/views/fragments/thumbnail-tt.jet.html
index 2af2fa6..e152eb2 100644
--- a/assets/views/fragments/thumbnail-tt.jet.html
+++ b/assets/views/fragments/thumbnail-tt.jet.html
@@ -1,5 +1,5 @@
 {{- target := CookieList["pixivfe-ThumbnailToNewTab"] }}
 <!-- The thumbnail-tt.jet.html fragment templates in the work title -->
-<p class="card-title text-truncate mb-1">
+<p class="text-truncate mb-1">
   <a target="{{ target }}" href="/artworks/{{ .ID }}" class="fw-bold text-body text-decoration-none">{{ .Title }}</a>
 </p>