diff --git a/assets/views/fragments/ranking-tn.jet.html b/assets/views/fragments/ranking-tn.jet.html
index 843c1be..b4b3dae 100644
--- a/assets/views/fragments/ranking-tn.jet.html
+++ b/assets/views/fragments/ranking-tn.jet.html
@@ -1,8 +1,14 @@
+<div class="row">
 {{- range . }}
 {{- target := CookieList["pixivfe-ThumbnailToNewTab"] }}
-<div class="artwork-small artwork">
-  {{- include "thumbnail-dt" }}
-  {{- include "thumbnail-tt" }}
-  {{- include "thumbnail-at" }}
+<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
+  <div class="card h-100">
+    {{- include "thumbnail-dt" }}
+    <div class="card-body">
+      {{- include "thumbnail-tt" }}
+      {{- include "thumbnail-at" }}
+    </div>
+  </div>
 </div>
 {{- end }}
+</div>
diff --git a/assets/views/fragments/small-tn.jet.html b/assets/views/fragments/small-tn.jet.html
index bf38568..68b30f2 100644
--- a/assets/views/fragments/small-tn.jet.html
+++ b/assets/views/fragments/small-tn.jet.html
@@ -1,26 +1,28 @@
+<div class="row">
 {{- range . }}
-<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
   {{- if .ID == "#" }}
-  <div class="card h-100">
-    <img src="/img/deleted.png" class="card-img-top" alt="{{ .Title }}" loading="lazy">
-    <div class="card-body">
-      <h5 class="card-title text-truncate">{{ .Title }}</h5>
-      <div class="d-flex align-items-center mt-2">
-        <img src="/img/deleted.png" class="rounded-circle me-2" alt="{{ .ArtistName }}" width="32" height="32" loading="lazy">
-        <span class="text-muted text-truncate">{{ .ArtistName }}</span>
+  <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
+    <div class="card h-100">
+      <img src="/img/deleted.png" alt="{{ .Title }}" class="card-img-top img-fluid" loading="lazy" />
+      <div class="card-body">
+        <h5 class="card-title">{{ .Title }}</h5>
+        <div class="d-flex align-items-center mt-2">
+          <img src="/img/deleted.png" alt="{{ .ArtistName }}" class="rounded-circle me-2" style="width: 24px; height: 24px;" loading="lazy" />
+          <span class="text-muted">{{ .ArtistName }}</span>
+        </div>
       </div>
     </div>
   </div>
   {{- else if .ID }}
-  <div class="card h-100">
-    <div class="position-relative">
+  <div class="col-sm-6 col-md-4 col-lg-3 mb-4">
+    <div class="card h-100">
       {{ include "thumbnail-dt" . }}
-    </div>
-    <div class="card-body">
-      {{ include "thumbnail-tt" . }}
-      {{ include "thumbnail-at" . }}
+      <div class="card-body">
+        {{ include "thumbnail-tt" . }}
+        {{ include "thumbnail-at" . }}
+      </div>
     </div>
   </div>
   {{- end }}
-</div>
 {{- end }}
+</div>
diff --git a/assets/views/fragments/thumbnail-at.jet.html b/assets/views/fragments/thumbnail-at.jet.html
index 01e650c..65eb764 100644
--- a/assets/views/fragments/thumbnail-at.jet.html
+++ b/assets/views/fragments/thumbnail-at.jet.html
@@ -1,6 +1,7 @@
-<div class="artwork-author">
-  <a href="/users/{{ .ArtistID }}">
-    <img src="{{ .ArtistAvatar }}" alt="{{ .ArtistName }}" />
-    <span>{{ .ArtistName }}</span>
+{{- target := CookieList["pixivfe-ThumbnailToNewTab"] }}
+<div class="d-flex align-items-center mt-2">
+  <a href="/users/{{ .ArtistID }}" class="d-flex align-items-center text-decoration-none">
+    <img src="{{ .ArtistAvatar }}" alt="{{ .ArtistName }}" class="rounded-circle me-2" style="width: 24px; height: 24px;" />
+    <span class="text-muted">{{ .ArtistName }}</span>
   </a>
 </div>
diff --git a/assets/views/fragments/thumbnail-dt.jet.html b/assets/views/fragments/thumbnail-dt.jet.html
index 69b3a6d..595e06d 100644
--- a/assets/views/fragments/thumbnail-dt.jet.html
+++ b/assets/views/fragments/thumbnail-dt.jet.html
@@ -2,31 +2,23 @@
 {{- hideR18 := CookieList["pixivfe-HideArtR18"] }}
 {{- hideR18G := CookieList["pixivfe-HideArtR18G"] }}
 {{- hideAi := CookieList["pixivfe-HideArtAI"] }}
-<div class="card position-relative">
-  <div class="position-absolute top-0 start-0 end-0 d-flex justify-content-between p-2">
+<div class="position-relative">
+  <div class="position-absolute top-0 start-0 p-2 d-flex justify-content-between w-100">
     {{- 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>
+    <span class="badge bg-primary rounded-pill">{{ .Rank }}</span>
+    {{- end }}
+    {{- if .XRestrict != 0 }}
+    <span class="badge bg-danger">{{ if .XRestrict == 1 }}R-18{{ else }}R-18G{{ end }}</span>
+    {{- end }}
+    {{- if .Pages > 1 }}
+    <span class="badge bg-secondary">&boxbox; {{ .Pages }}</span>
+    {{- end }}
+    {{- if .IllustType == 2 }}
+    <span class="badge bg-info">&#9654;</span>
     {{- end }}
-    <div class="d-flex">
-      {{- if .XRestrict != 0 }}
-      <div class="badge bg-danger me-1">
-        <span>{{ if .XRestrict == 1 }}R-18{{ else }}R-18G{{ end }}</span>
-      </div>
-      {{- end }}
-      {{- if .Pages > 1 }}
-      <div class="badge bg-dark">
-        <span>&boxbox; {{ .Pages }}</span>
-      </div>
-      {{- end }}
-      {{- if .IllustType == 2 }}
-      <div class="badge bg-dark">
-        <span>&#9654;</span>
-      </div>
-      {{- end }}
-    </div>
   </div>
   {{- AiType := isset(.AiType) ? .AiType : 0}}
-  <a target="{{ target }}" href="/artworks/{{ .ID }}#checkpoint" class="text-decoration-none">
+  <a target="{{ target }}" href="/artworks/{{ .ID }}#checkpoint">
     {{- 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 }}
diff --git a/assets/views/fragments/thumbnail-tt.jet.html b/assets/views/fragments/thumbnail-tt.jet.html
index 2d5ff9f..ecaee0c 100644
--- a/assets/views/fragments/thumbnail-tt.jet.html
+++ b/assets/views/fragments/thumbnail-tt.jet.html
@@ -1,4 +1,4 @@
 {{- target := CookieList["pixivfe-ThumbnailToNewTab"] }}
-<div class="artwork-title">
-  <a target="{{ target }}" href="/artworks/{{ .ID }}#checkpoint"> {{ .Title }} </a>
-</div>
+<h5 class="card-title">
+  <a target="{{ target }}" href="/artworks/{{ .ID }}#checkpoint" class="text-decoration-none">{{ .Title }}</a>
+</h5>