diff --git a/README.md b/README.md
index 2ee835c6..50536216 100644
--- a/README.md
+++ b/README.md
@@ -119,7 +119,7 @@ To run **bitvid** locally:
      npx serve
      ```
 
-3. Open the site in your browser:
+4. Open the site in your browser:
 
 ```
 http://localhost:8000
@@ -330,7 +330,7 @@ placeholder at “—” and development builds log a warning—so mixed deploym
 5. **Test**:
    - Run unit tests: `npm run test:unit`
    - Validate the site functionality locally before submitting.
-5. **Submit a Pull Request**:
+6. **Submit a Pull Request**:
    - Explain your changes and reference any related issues.
 
 ### Contribution Guidelines
diff --git a/components/login-modal.html b/components/login-modal.html
index 28cbcff4..92b89c3b 100644
--- a/components/login-modal.html
+++ b/components/login-modal.html
@@ -349,7 +349,7 @@
           <div data-nip46-handshake-panel class="space-y-6">
             <div class="flex flex-col items-center gap-6">
               <div
-                class="flex aspect-square w-full max-w-[280px] items-center justify-center rounded-2xl border border-border-strong bg-white p-4 shadow-sm"
+                class="flex aspect-square w-full max-w-xs items-center justify-center rounded-2xl border border-border-strong bg-white p-4 shadow-sm"
                 data-nip46-qr
                 aria-hidden="true"
               >
diff --git a/js/ui/components/EventDetailsModal.js b/js/ui/components/EventDetailsModal.js
index d1c1307d..2fccc6e9 100644
--- a/js/ui/components/EventDetailsModal.js
+++ b/js/ui/components/EventDetailsModal.js
@@ -102,7 +102,7 @@ export class EventDetailsModal {
               </button>
             </div>
             <div class="relative flex-1 min-h-[200px] bg-black/80 rounded-lg border border-border overflow-hidden group">
-              <pre class="absolute inset-0 p-4 overflow-auto text-xs font-mono text-gray-300 scrollbar-thin"><code data-json-content></code></pre>
+              <pre class="absolute inset-0 p-4 overflow-auto text-xs font-mono text-white/80 scrollbar-thin"><code data-json-content></code></pre>
             </div>
           </section>
         </div>
@@ -135,8 +135,7 @@ export class EventDetailsModal {
     const container = this.document.getElementById("modalContainer") || this.document.body;
     const modal = this.document.createElement("div");
     modal.id = "eventDetailsModal";
-    modal.style.zIndex = "140";
-    modal.className = "bv-modal hidden items-center justify-center p-4";
+    modal.className = "bv-modal z-[140] hidden items-center justify-center p-4";
     modal.innerHTML = this.buildMarkup();
 
     this.root = modal;
diff --git a/js/ui/components/SimilarContentCard.js b/js/ui/components/SimilarContentCard.js
index 79bc5680..b0f39e8e 100644
--- a/js/ui/components/SimilarContentCard.js
+++ b/js/ui/components/SimilarContentCard.js
@@ -482,7 +482,7 @@ export class SimilarContentCard {
     button.textContent = "Show";
     button.addEventListener("click", this.boundShowAnywayHandler);
     // Explicit pointer events since container is none
-    button.style.pointerEvents = "auto";
+    button.classList.add("pointer-events-auto");
     return button;
   }
 
@@ -503,7 +503,7 @@ export class SimilarContentCard {
     button.setAttribute("aria-label", ariaLabel);
     button.textContent = "Hide";
     button.addEventListener("click", this.boundModerationHideHandler);
-    button.style.pointerEvents = "auto";
+    button.classList.add("pointer-events-auto");
     return button;
   }
 
@@ -520,7 +520,7 @@ export class SimilarContentCard {
     button.dataset.moderationAction = "block";
     button.textContent = "Block";
     button.addEventListener("click", this.boundModerationBlockHandler);
-    button.style.pointerEvents = "auto";
+    button.classList.add("pointer-events-auto");
     return button;
   }
 
@@ -669,7 +669,7 @@ export class SimilarContentCard {
       : "trusted-mute";
 
     // Allow interaction with children
-    badge.style.pointerEvents = "auto";
+    badge.classList.add("pointer-events-auto");
 
     const label = this.document.createElement("span");
     label.className = "moderation-badge__label inline-flex items-center gap-xs";
@@ -763,14 +763,12 @@ export class SimilarContentCard {
         // Force blur style in case class utility is missing or overridden,
         // and clear the backdrop so the sharp background doesn't show through.
         // Scale up to hide feathered edges of the blur.
-        this.thumbnailEl.style.filter = "blur(24px)";
-        this.thumbnailEl.style.transform = "scale(1.2)";
+        this.thumbnailEl.classList.add("scale-[1.2]");
         this.setCardBackdropImage("");
       } else {
         delete this.thumbnailEl.dataset.thumbnailState;
         this.thumbnailEl.classList.remove("blur-xl");
-        this.thumbnailEl.style.filter = "";
-        this.thumbnailEl.style.transform = "";
+        this.thumbnailEl.classList.remove("scale-[1.2]");
         // Restore backdrop if src is available
         if (this.thumbnailEl.src) {
           this.setCardBackdropImage(this.thumbnailEl.src);
@@ -845,8 +843,7 @@ export class SimilarContentCard {
       img.dataset.thumbnailState = "blurred";
       img.classList.add("blur-xl");
       // Pre-apply style to avoid flash and crop edges
-      img.style.filter = "blur(24px)";
-      img.style.transform = "scale(1.2)";
+      img.classList.add("scale-[1.2]");
     }
 
     const handleLoad = () => {