diff --git a/assets/views/fragments/thumbnail-dt.jet.html b/assets/views/fragments/thumbnail-dt.jet.html
index bdfb352..69b3a6d 100644
--- a/assets/views/fragments/thumbnail-dt.jet.html
+++ b/assets/views/fragments/thumbnail-dt.jet.html
@@ -2,35 +2,37 @@
 {{- hideR18 := CookieList["pixivfe-HideArtR18"] }}
 {{- hideR18G := CookieList["pixivfe-HideArtR18G"] }}
 {{- hideAi := CookieList["pixivfe-HideArtAI"] }}
-<div class="card h-100">
-  <div class="position-relative">
-    <div class="position-absolute top-0 start-0 p-2 d-flex justify-content-between w-100">
-      {{- if isset(.Rank) }}
-      <span class="badge bg-primary rounded-pill">{{ .Rank }}</span>
-      {{- end }}
+<div class="card position-relative">
+  <div class="position-absolute top-0 start-0 end-0 d-flex justify-content-between p-2">
+    {{- if isset(.Rank) }}
+    <div class="badge bg-dark rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">{{ .Rank }}</div>
+    {{- end }}
+    <div class="d-flex">
       {{- if .XRestrict != 0 }}
-      <span class="badge bg-danger">
-        {{ if .XRestrict == 1 }}R-18{{ else }}R-18G{{ end }}
-      </span>
+      <div class="badge bg-danger me-1">
+        <span>{{ if .XRestrict == 1 }}R-18{{ else }}R-18G{{ end }}</span>
+      </div>
       {{- end }}
-    </div>
-    <div class="position-absolute bottom-0 end-0 p-2">
       {{- if .Pages > 1 }}
-      <span class="badge bg-secondary">&boxbox; {{ .Pages }}</span>
+      <div class="badge bg-dark">
+        <span>&boxbox; {{ .Pages }}</span>
+      </div>
       {{- end }}
       {{- if .IllustType == 2 }}
-      <span class="badge bg-info">&#9654;</span>
+      <div class="badge bg-dark">
+        <span>&#9654;</span>
+      </div>
       {{- end }}
     </div>
-    {{- AiType := isset(.AiType) ? .AiType : 0}}
-    <a target="{{ target }}" href="/artworks/{{ .ID }}#checkpoint" class="d-block">
-      {{- if (.XRestrict > 0 && hideR18 != "" && hideR18G != "") || (.XRestrict == 2 && hideR18G != "") }}
-      <img src="/img/nsfw.png" alt="{{ .Title }}" class="card-img-top img-fluid" loading="lazy" />
-      {{- else if AiType == 2 && hideAi }}
-      <img src="/img/ai.png" alt="{{ .Title }}" class="card-img-top img-fluid" loading="lazy" />
-      {{- else }}
-      <img src="{{ .Thumbnail }}" alt="{{ .Title }}" class="card-img-top img-fluid" loading="lazy" />
-      {{- end }}
-    </a>
   </div>
+  {{- AiType := isset(.AiType) ? .AiType : 0}}
+  <a target="{{ target }}" href="/artworks/{{ .ID }}#checkpoint" class="text-decoration-none">
+    {{- if (.XRestrict > 0 && hideR18 != "" && hideR18G != "") || (.XRestrict == 2 && hideR18G != "") }}
+    <img src="/img/nsfw.png" alt="{{ .Title }}" class="card-img-top img-fluid" loading="lazy" />
+    {{- else if AiType == 2 && hideAi }}
+    <img src="/img/ai.png" alt="{{ .Title }}" class="card-img-top img-fluid" loading="lazy" />
+    {{- else }}
+    <img src="{{ .Thumbnail }}" alt="{{ .Title }}" class="card-img-top img-fluid" loading="lazy" />
+    {{- end }}
+  </a>
 </div>