diff --git a/assets/js/illust-preview.js b/assets/js/illust-preview.js
index 11b3d97..2c7d3b5 100644
--- a/assets/js/illust-preview.js
+++ b/assets/js/illust-preview.js
@@ -7,10 +7,11 @@ function OpenPreviewer(url) {
     top: 0;
     left: 0;
     background: rgba(0,0,0,.8);
-		display: flex;
-		flex-direction: column;
-		padding: 0 3rem;
-		overflow: scroll;
+    display: flex;
+    flex-direction: column;
+    padding: 0 3rem;
+    overflow: scroll;
+    z-index: 999;
   `;
 
   const imageLink = url.replace(/c\/\d+x\d+.*?\//, "").replace(/square1200/, "master1200");
@@ -38,23 +39,24 @@ function AddOverlay() {
   let className, html;
 
   if (type === "cover") {
-    className = "overlay-cover";
+    className = "overlay-cover position-absolute w-100 h-100 z-5 top-0 start-0";
     html = "";
   } else if (type === "button") {
-    className = "overlay-button";
+    className = "overlay-button position-absolute p-1 z-5 bottom-0 end-0 rounded bg-neutral-950";
     html = "↗";
   } else {
     return;
   }
 
-  document.querySelectorAll('.artwork-small .artwork-image img').forEach(illust => {
+  document.querySelectorAll('.ratio-1x1 .thumbnail-wrapper img').forEach(illust => {
     const url = illust.getAttribute("src");
     const button = document.createElement('div');
 
     button.setAttribute("class", className);
     button.innerHTML = html;
 
-    illust.parentElement.parentElement.appendChild(button);
+    // TODO: Need a better way to do this
+    illust.parentElement.parentElement.parentElement.parentElement.appendChild(button);
 
     button.onclick = (e) => {
       OpenPreviewer(url);
diff --git a/assets/views/fragments/thumbnail-dt.jet.html b/assets/views/fragments/thumbnail-dt.jet.html
index d7d2045..1b8405c 100644
--- a/assets/views/fragments/thumbnail-dt.jet.html
+++ b/assets/views/fragments/thumbnail-dt.jet.html
@@ -5,49 +5,51 @@
 {{- AiType := isset(.AiType) ? .AiType : 0}}
 <div class="position-relative h-100 thumbnail-hover-dark">
   <!-- Placing the anchor element out here so that the div that contains the tags acts as a hyperlink -->
-  <a target="{{ target }}" href="/artworks/{{ .ID }}" class="d-block h-100">
-  <div class="position-absolute top-0 start-0 p-2 d-flex justify-content-between w-100">
-    <div class="d-flex flex-column align-items-start z-3">
-      <!-- When an artwork is listed on the ranking page -->
-      {{- if isset(.Rank) }}
-      <span class="badge bg-black fs-6 rounded-pill bg-opacity-75 mb-1">{{ .Rank }}</span>
-      {{- end }}
-      <!-- When an artwork is tagged as R-18 or R-18G -->
-      {{- if .XRestrict != 0 }}
-      <span class="badge bg-danger mb-1">{{ if .XRestrict == 1 }}R-18{{ else }}R-18G{{ end }}</span>
-      {{- end }}
-      <!-- When an artwork is tagged as AI-generated -->
-      {{- if AiType == 2 }}
-      <span class="badge bg-warning small text-dark mb-1">AI</span>
-      {{- end }}
-    </div>
-    <div class="d-flex flex-column align-items-end z-3">
-      <!-- When an artwork has multiple images -->
-      {{- if .Pages > 1 }}
-      <span class="badge bg-secondary"><i class="bi bi-image"></i> {{ .Pages }}</span>
-      {{- end }}
-    </div>
-  </div>
-    <div class="ratio ratio-1x1">
-      <div class="thumbnail-wrapper rounded overflow-hidden">
-        {{- if (.XRestrict > 0 && hideR18 != "" && hideR18G != "") || (.XRestrict == 2 && hideR18G != "") }}
-        <!-- When the user has enabled hideR18 or hideR18G, display a plain thumbnail instead -->
-        <img src="/img/nsfw.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
-        <!-- When the user has enabled hideAi, display a plain thumbnail instead -->
-        {{- else if AiType == 2 && hideAi }}
-        <img src="/img/ai.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
-        {{- else }}
-        <img src="{{ .Thumbnail }}" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
+  <div> <!-- Empty div for the illust preview (it needs to wrap the anchor) -->
+    <a target="{{ target }}" href="/artworks/{{ .ID }}" class="d-block h-100">
+    <div class="position-absolute top-0 start-0 p-2 d-flex justify-content-between w-100">
+      <div class="d-flex flex-column align-items-start z-3">
+        <!-- When an artwork is listed on the ranking page -->
+        {{- if isset(.Rank) }}
+        <span class="badge bg-black fs-6 rounded-pill bg-opacity-75 mb-1">{{ .Rank }}</span>
+        {{- end }}
+        <!-- When an artwork is tagged as R-18 or R-18G -->
+        {{- if .XRestrict != 0 }}
+        <span class="badge bg-danger mb-1">{{ if .XRestrict == 1 }}R-18{{ else }}R-18G{{ end }}</span>
+        {{- end }}
+        <!-- When an artwork is tagged as AI-generated -->
+        {{- if AiType == 2 }}
+        <span class="badge bg-warning small text-dark mb-1">AI</span>
+        {{- end }}
+      </div>
+      <div class="d-flex flex-column align-items-end z-3">
+        <!-- When an artwork has multiple images -->
+        {{- if .Pages > 1 }}
+        <span class="badge bg-secondary"><i class="bi bi-image"></i> {{ .Pages }}</span>
         {{- end }}
       </div>
     </div>
-    <!-- When an artwork is a ugoira -->
-    <!-- Creates a centered, circular overlay (60x60px) with semi-transparent black background.
-         The play icon is centered within this overlay and appears on top of the thumbnail. -->
-    {{- if .IllustType == 2 }}
-    <div class="position-absolute top-50 start-50 translate-middle d-flex justify-content-center align-items-center bg-dark bg-opacity-75 rounded-circle w-25 h-25 p-4">
-      <i class="bi bi-play-fill text-white fs-2"></i>
-    </div>
-    {{- end }}
-  </a>
+      <div class="ratio ratio-1x1">
+        <div class="thumbnail-wrapper rounded overflow-hidden">
+          {{- if (.XRestrict > 0 && hideR18 != "" && hideR18G != "") || (.XRestrict == 2 && hideR18G != "") }}
+          <!-- When the user has enabled hideR18 or hideR18G, display a plain thumbnail instead -->
+          <img src="/img/nsfw.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
+          <!-- When the user has enabled hideAi, display a plain thumbnail instead -->
+          {{- else if AiType == 2 && hideAi }}
+          <img src="/img/ai.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
+          {{- else }}
+          <img src="{{ .Thumbnail }}" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
+          {{- end }}
+        </div>
+      </div>
+      <!-- When an artwork is a ugoira -->
+      <!-- Creates a centered, circular overlay (60x60px) with semi-transparent black background.
+           The play icon is centered within this overlay and appears on top of the thumbnail. -->
+      {{- if .IllustType == 2 }}
+      <div class="position-absolute top-50 start-50 translate-middle d-flex justify-content-center align-items-center bg-dark bg-opacity-75 rounded-circle w-25 h-25 p-4">
+        <i class="bi bi-play-fill text-white fs-2"></i>
+      </div>
+      {{- end }}
+    </a>
+  </div>
 </div>
diff --git a/assets/views/index.jet.html b/assets/views/index.jet.html
index 3c8a25e..a69488d 100644
--- a/assets/views/index.jet.html
+++ b/assets/views/index.jet.html
@@ -38,7 +38,7 @@
         {{- range .Data.Pixivision }}
         {* TODO: make the entire pixivision card clickable while preserving the text underline effect *}
         {* NOTE: intentionally choosing indivisible col widths to create a visible affordance *}
-        <div class="col-11 col-md-9 col-lg-5">
+        <div class="col-11 col-md-9 col-lg-5 position-relative">
           <div class="custom-card bg-charcoal-surface1 thumbnail-hover-dark">
             <a href="/pixivision/a/{{.ID}}">
               <div class="thumbnail-wrapper rounded-top-5 overflow-hidden">
diff --git a/assets/views/settings.jet.html b/assets/views/settings.jet.html
index 23c5ccf..97d2c92 100644
--- a/assets/views/settings.jet.html
+++ b/assets/views/settings.jet.html
@@ -177,21 +177,21 @@
                   </div>
                   <form id="artwork-preview-form" hx-post="/settings/artworkPreview" hx-target="#artwork-preview-response" hx-swap="outerHTML">
                     <div class="form-check mb-3">
-                      <input class="form-check-input" type="radio" name="app" id="app-c" value="cover" disabled />
+                      <input class="form-check-input" type="radio" name="app" id="app-c" value="cover" />
                       <label class="form-check-label fw-bold" for="app-c"> Cover </label>
                       <div id="app-c-help" class="form-text">Open the previewer when you click into the thumbnails. This allows for quick previews without leaving the current page.</div>
                     </div>
                     <div class="form-check mb-3">
-                      <input class="form-check-input" type="radio" name="app" id="app-b" value="button" disabled />
+                      <input class="form-check-input" type="radio" name="app" id="app-b" value="button" />
                       <label class="form-check-label fw-bold" for="app-b"> Button </label>
                       <div id="app-b-help" class="form-text">Add a button at the bottom-right of the thumbnails and open the previewer when you click into it. This provides more control over when previews are shown.</div>
                     </div>
                     <div class="form-check mb-3">
-                      <input class="form-check-input" type="radio" name="app" id="app-d" value="disable" checked disabled />
+                      <input class="form-check-input" type="radio" name="app" id="app-d" value="disable" checked />
                       <label class="form-check-label fw-bold" for="app-d"> Disable </label>
                       <div id="app-d-help" class="form-text">No previewing. Clicking on thumbnails will directly open the full artwork page.</div>
                     </div>
-                    <button type="submit" class="custom-btn-secondary" disabled>Save</button>
+                    <button type="submit" class="custom-btn-secondary">Save</button>
                   </form>
                   <div id="artwork-preview-response"></div>
                 </li>