diff --git a/assets/views/fragments/novel-tn.jet.html b/assets/views/fragments/novel-tn.jet.html
index 3e12f96..a4bc122 100644
--- a/assets/views/fragments/novel-tn.jet.html
+++ b/assets/views/fragments/novel-tn.jet.html
@@ -1,5 +1,5 @@
 <div class="col">
-  <div class="card h-100 border-0 bg-body-tertiary rounded p-3">
+  <div class="card h-100 border-0 bg-charcoal-surface1 rounded p-3">
     <div class="row g-3">
       <div class="col-4">
         <a href="/novel/{{ .ID }}" class="text-decoration-none">
@@ -9,38 +9,50 @@
         </a>
       </div>
       <div class="col-8">
+        <!-- Series name -->
         {{- if .SeriesID }}
         <a href="/novel/series/{{ .SeriesID }}" class="text-decoration-none">
-          <p class="small text-muted mb-1">{{ .SeriesTitle }}</p>
+          <p class="text-body-secondary small mb-1">{{ .SeriesTitle }}</p>
         </a>
         {{- end }}
+
+        <!-- Novel title -->
         <h3>
           <a href="/novel/{{ .ID }}" class="text-body text-decoration-none">{{ .Title }}</a>
         </h3>
-        <p class="card-text text-muted small mb-2"><span>{{ .WordCount }} word(s)</span>&nbsp;<span>{{ floor: .ReadingTime / 60 }} mins</span></p>
-        <a href="/users/{{ .UserID }}" class="text-decoration-none d-flex align-items-center mb-2">
+
+        <!-- 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>
+        <a href="/users/{{ .UserID }}" class="text-decoration-none d-flex align-items-center mb-3">
           <img src="{{ .UserAvatar }}" alt="{{ .UserName }}" class="rounded-circle me-2" style="width: 24px; height: 24px" />
           <span class="text-muted">{{ .UserName }}</span>
         </a>
+
+        <!-- Description -->
         <!-- TODO: figure this out -->
         <!-- <p class="small mb-2">{{ raw: .Description }}</p> -->
-        <div class="mb-2">
-          {{- if .AiType == 2 }}
-          <span class="badge bg-warning text-dark me-1 mb-1">AI-generated</span>
-          {{- end }}
-          {{- if .IsOriginal }}
-          <span class="badge bg-secondary me-1 mb-1">Original</span>
-          {{- end }}
-          {{- if .Genre != "0" }}
-          <span class="badge bg-info text-dark me-1 mb-1">{{ novelGenre: .Genre }}</span>
-          {{- end }}
-          {{- range .Tags }}
+
+        <!-- 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-primary me-1 mb-1">{{ . }}</span>
+          <span class="badge bg-danger me-2 mb-2">{{ . }}</span>
           {{- else }}
-          <a href="/tags/{{ escapeString(.) }}" class="badge bg-light text-dark text-decoration-none me-1 mb-1">#{{ . }}</a>
-          {{- end }} {{- end }}
-        </div>
+          <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 }}
+
+        <!-- Metadata (bookmarks and creation date) -->
         <div class="d-flex justify-content-between align-items-center">
           <span class="text-muted small"> <i class="bi bi-heart-fill me-1"></i>{{ .Bookmarks }} </span>
           <span class="text-muted small"> <i class="bi bi-calendar me-1"></i>{{ parseTime: .CreateDate }} </span>
diff --git a/assets/views/novelDiscovery.jet.html b/assets/views/novelDiscovery.jet.html
index b2e195e..e61520e 100644
--- a/assets/views/novelDiscovery.jet.html
+++ b/assets/views/novelDiscovery.jet.html
@@ -21,7 +21,7 @@
     </div>
 
     <!-- Main content -->
-    <div class="row row-cols-2 g-4">
+    <div class="row row-cols-1 row-cols-lg-2 g-4">
       {{- range .Novels }}
         {{- include "fragments/novel-tn" . }}
       {{- end }}