From 77c45b3a6caaf17a9f7fa5547017632135fd8722 Mon Sep 17 00:00:00 2001
From: Silberengel <silberengel7@protonmail.com>
Date: Thu, 5 Feb 2026 13:31:27 +0100
Subject: [PATCH] add favorite relays to the relay page and a field for
 entering a relay manually

---
 src/app.css                                   |  12 +-
 .../content/MediaAttachments.svelte           |   3 +-
 .../preferences/UserPreferences.svelte        |  76 +-
 .../components/write/CreateEventForm.svelte   |  70 +-
 src/lib/components/write/FindEventForm.svelte |  32 +-
 .../modules/discussions/DiscussionCard.svelte |   4 +-
 src/lib/modules/feed/FeedPage.svelte          | 885 +++---------------
 src/lib/modules/feed/FeedPost.svelte          | 263 +-----
 src/lib/services/nostr/nostr-client.ts        |   7 +-
 src/routes/cache/+page.svelte                 |   6 +-
 src/routes/discussions/+page.svelte           |  36 +-
 src/routes/feed/+page.svelte                  |  26 +-
 src/routes/feed/relay/[relay]/+page.svelte    |  40 +-
 src/routes/find/+page.svelte                  |  18 +-
 src/routes/relay/+page.svelte                 | 300 +++++-
 src/routes/replaceable/[d_tag]/+page.svelte   |  23 +-
 src/routes/repos/+page.svelte                 |  35 +-
 src/routes/rss/+page.svelte                   |   6 +-
 src/routes/topics/+page.svelte                |   3 +-
 src/routes/topics/[name]/+page.svelte         |  23 +-
 src/routes/write/+page.svelte                 |   3 +-
 21 files changed, 661 insertions(+), 1210 deletions(-)

diff --git a/src/app.css b/src/app.css
index 797eb06..7af3d0f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -108,11 +108,11 @@ h1 {
   margin-bottom: 1.5rem;
   margin-top: 0;
   font-weight: 700;
-  color: var(--fog-text, #1f2937);
+  color: var(--fog-text, #475569);
 }
 
 :global(.dark) h1 {
-  color: var(--fog-dark-text, #f9fafb);
+  color: var(--fog-dark-text, #cbd5e1);
 }
 
 h2 {
@@ -121,11 +121,11 @@ h2 {
   margin-bottom: 0.875rem;
   margin-top: 0;
   font-weight: 600;
-  color: var(--fog-text, #1f2937);
+  color: var(--fog-text, #475569);
 }
 
 :global(.dark) h2 {
-  color: var(--fog-dark-text, #f9fafb);
+  color: var(--fog-dark-text, #cbd5e1);
 }
 
 h3 {
@@ -134,11 +134,11 @@ h3 {
   margin-bottom: 0.625rem;
   margin-top: 1.25rem;
   font-weight: 600;
-  color: var(--fog-text, #1f2937);
+  color: var(--fog-text, #475569);
 }
 
 :global(.dark) h3 {
-  color: var(--fog-dark-text, #f9fafb);
+  color: var(--fog-dark-text, #cbd5e1);
 }
 
 h4, h5, h6 {
diff --git a/src/lib/components/content/MediaAttachments.svelte b/src/lib/components/content/MediaAttachments.svelte
index 51930fd..3eb54e9 100644
--- a/src/lib/components/content/MediaAttachments.svelte
+++ b/src/lib/components/content/MediaAttachments.svelte
@@ -384,6 +384,7 @@
 
   .cover-image img {
     border: 1px solid var(--fog-border, #e5e7eb);
+    max-width: 600px;
   }
 
   :global(.dark) .cover-image img {
@@ -412,7 +413,7 @@
 
   .media-item img,
   .media-item video {
-    max-width: 100%;
+    max-width: 600px;
     height: auto;
   }
 
diff --git a/src/lib/components/preferences/UserPreferences.svelte b/src/lib/components/preferences/UserPreferences.svelte
index 04db472..a3bd738 100644
--- a/src/lib/components/preferences/UserPreferences.svelte
+++ b/src/lib/components/preferences/UserPreferences.svelte
@@ -126,13 +126,21 @@
 
   $effect(() => {
     if (showPreferences) {
+      // Prevent body scroll when modal is open
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      
       const handleEscape = (e: KeyboardEvent) => {
         if (e.key === 'Escape') {
           showPreferences = false;
         }
       };
       document.addEventListener('keydown', handleEscape);
-      return () => document.removeEventListener('keydown', handleEscape);
+      
+      return () => {
+        document.body.style.overflow = originalOverflow;
+        document.removeEventListener('keydown', handleEscape);
+      };
     }
   });
 </script>
@@ -304,7 +312,7 @@
     border-radius: 0.25rem;
     border: 1px solid var(--fog-border, #e5e7eb);
     background: var(--fog-post, #ffffff);
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     cursor: pointer;
     transition: all 0.2s;
   }
@@ -312,7 +320,7 @@
   :global(.dark) .preferences-button {
     border-color: var(--fog-dark-border, #374151);
     background: var(--fog-dark-post, #1f2937);
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .preferences-button:hover {
@@ -331,31 +339,37 @@
   }
 
   .preferences-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    background: rgba(0, 0, 0, 0.5) !important;
     backdrop-filter: blur(4px);
-    z-index: 999;
+    -webkit-backdrop-filter: blur(4px);
+    z-index: 99999 !important;
     animation: fadeIn 0.2s ease-out;
+    pointer-events: auto !important;
+    isolation: isolate;
   }
 
   .preferences-panel {
-    position: fixed;
-    top: 0;
-    left: 0;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
     width: 320px;
     height: 100vh;
     background: var(--fog-post, #ffffff);
     border-right: 1px solid var(--fog-border, #e5e7eb);
     box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
+    z-index: 100000 !important;
     display: flex;
     flex-direction: column;
     animation: slideIn 0.3s ease-out;
     overflow: hidden;
+    isolation: isolate;
   }
 
   :global(.dark) .preferences-panel {
@@ -399,11 +413,11 @@
     margin: 0;
     font-size: 1.25rem;
     font-weight: 600;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
   }
 
   :global(.dark) .preferences-header h2 {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .close-button {
@@ -417,13 +431,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     border-radius: 0.25rem;
     transition: background 0.2s;
   }
 
   :global(.dark) .close-button {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .close-button:hover {
@@ -450,13 +464,13 @@
     display: block;
     font-weight: 600;
     margin-bottom: 0.5rem;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     padding: 0;
     font-size: 0.875rem;
   }
 
   :global(.dark) .preference-label {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .preference-options {
@@ -470,7 +484,7 @@
     border: 1px solid var(--fog-border, #e5e7eb);
     border-radius: 0.25rem;
     background: var(--fog-post, #ffffff);
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     cursor: pointer;
     transition: all 0.2s;
     font-size: 0.875rem;
@@ -485,7 +499,7 @@
   :global(.dark) .preference-option {
     background: var(--fog-dark-post, #1f2937);
     border-color: var(--fog-dark-border, #374151);
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .preference-option:hover {
@@ -499,13 +513,13 @@
 
   .preference-option.active {
     background: var(--fog-accent, #64748b);
-    color: white;
+    color: var(--fog-text, #f1f5f9);
     border-color: var(--fog-accent, #64748b);
   }
 
   :global(.dark) .preference-option.active {
     background: var(--fog-dark-accent, #94a3b8);
-    color: var(--fog-dark-text, #1f2937);
+    color: var(--fog-dark-text, #f1f5f9);
     border-color: var(--fog-dark-accent, #94a3b8);
   }
 
@@ -514,12 +528,12 @@
     align-items: center;
     gap: 0.5rem;
     cursor: pointer;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     font-size: 0.875rem;
   }
 
   :global(.dark) .checkbox-label {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .checkbox-input {
@@ -545,14 +559,14 @@
     border: 1px solid var(--fog-border, #e5e7eb);
     border-radius: 0.25rem;
     background: var(--fog-post, #ffffff);
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     font-size: 0.875rem;
   }
 
   :global(.dark) .text-input {
     border-color: var(--fog-dark-border, #374151);
     background: var(--fog-dark-post, #1f2937);
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .manage-cache-button {
@@ -561,7 +575,7 @@
     border: 1px solid var(--fog-border, #e5e7eb);
     border-radius: 0.25rem;
     background: var(--fog-accent, #64748b);
-    color: white;
+    color: var(--fog-text, #f1f5f9);
     cursor: pointer;
     font-size: 0.875rem;
     font-weight: 500;
@@ -595,11 +609,11 @@
     margin: 0 0 0.5rem 0;
     font-size: 0.875rem;
     font-weight: 600;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
   }
 
   :global(.dark) .about-title {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .about-text {
diff --git a/src/lib/components/write/CreateEventForm.svelte b/src/lib/components/write/CreateEventForm.svelte
index 34e0a86..e984790 100644
--- a/src/lib/components/write/CreateEventForm.svelte
+++ b/src/lib/components/write/CreateEventForm.svelte
@@ -1135,7 +1135,7 @@
   .create-form-container {
     display: flex;
     gap: 2rem;
-    max-width: 1200px;
+    max-width: var(--content-width);
     width: 100%;
   }
 
@@ -1175,14 +1175,14 @@
 
   .form-title {
     margin: 0;
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     font-weight: 600;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     flex-shrink: 0;
   }
 
   :global(.dark) .form-title {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .help-text-panel {
@@ -1215,13 +1215,13 @@
 
   .help-description {
     margin: 0 0 0.75rem 0;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     line-height: 1.5;
     flex: 1;
   }
 
   :global(.dark) .help-description {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .example-button-wrapper {
@@ -1234,7 +1234,7 @@
     border-radius: 50%;
     border: 1px solid var(--fog-border, #e5e7eb);
     background: var(--fog-post, #ffffff);
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     cursor: pointer;
     font-size: 0.875rem;
     font-weight: 600;
@@ -1248,12 +1248,12 @@
   :global(.dark) .example-button {
     border-color: var(--fog-dark-border, #374151);
     background: var(--fog-dark-post, #1f2937);
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .example-button:hover {
     background: var(--fog-accent, #64748b);
-    color: white;
+    color: var(--fog-text, #f1f5f9);
     border-color: var(--fog-accent, #64748b);
   }
 
@@ -1283,14 +1283,14 @@
     margin: 0;
     font-size: 0.75rem;
     font-family: 'Courier New', Courier, monospace;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     white-space: pre-wrap;
     word-wrap: break-word;
     line-height: 1.4;
   }
 
   :global(.dark) .example-json {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .suggested-tags {
@@ -1300,12 +1300,12 @@
   .suggested-tags strong {
     display: block;
     margin-bottom: 0.5rem;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     font-size: 0.8125rem;
   }
 
   :global(.dark) .suggested-tags strong {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .suggested-tags ul {
@@ -1331,12 +1331,12 @@
 
   .form-label {
     font-weight: 500;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     font-size: 0.875rem;
   }
 
   :global(.dark) .form-label {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .kind-select {
@@ -1344,14 +1344,14 @@
     border: 1px solid var(--fog-border, #e5e7eb);
     border-radius: 0.25rem;
     background: var(--fog-post, #ffffff);
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     font-size: 0.875rem;
   }
 
   :global(.dark) .kind-select {
     border-color: var(--fog-dark-border, #374151);
     background: var(--fog-dark-post, #1f2937);
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .custom-kind-input {
@@ -1366,14 +1366,14 @@
     border: 1px solid var(--fog-border, #e5e7eb);
     border-radius: 0.25rem;
     background: var(--fog-post, #ffffff);
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     font-size: 0.875rem;
   }
 
   :global(.dark) .kind-id-input {
     border-color: var(--fog-dark-border, #374151);
     background: var(--fog-dark-post, #1f2937);
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .content-input {
@@ -1384,7 +1384,7 @@
     border: 1px solid var(--fog-border, #e5e7eb);
     border-radius: 0.25rem;
     background: var(--fog-post, #ffffff);
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     font-size: 0.875rem;
     font-family: monospace;
     resize: vertical;
@@ -1399,7 +1399,7 @@
   :global(.dark) .content-input {
     border-color: var(--fog-dark-border, #374151);
     background: var(--fog-dark-post, #1f2937);
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .tags-list {
@@ -1433,14 +1433,14 @@
     border: 1px solid var(--fog-border, #e5e7eb);
     border-radius: 0.25rem;
     background: var(--fog-post, #ffffff);
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     font-size: 0.875rem;
   }
 
   :global(.dark) .tag-input {
     border-color: var(--fog-dark-border, #374151);
     background: var(--fog-dark-post, #1f2937);
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .tag-add-value,
@@ -1449,7 +1449,7 @@
     border: 1px solid var(--fog-border, #e5e7eb);
     border-radius: 0.25rem;
     background: var(--fog-highlight, #f3f4f6);
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     cursor: pointer;
     font-size: 0.875rem;
     min-width: 2rem;
@@ -1459,7 +1459,7 @@
   :global(.dark) .tag-remove {
     border-color: var(--fog-dark-border, #374151);
     background: var(--fog-dark-highlight, #374151);
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .tag-add-value:hover,
@@ -1481,7 +1481,7 @@
     border: 1px solid var(--fog-border, #e5e7eb);
     border-radius: 0.25rem;
     background: var(--fog-highlight, #f3f4f6);
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     cursor: pointer;
     font-size: 0.875rem;
   }
@@ -1489,7 +1489,7 @@
   :global(.dark) .add-tag-button {
     border-color: var(--fog-dark-border, #374151);
     background: var(--fog-dark-highlight, #374151);
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .add-tag-button:hover {
@@ -1520,7 +1520,7 @@
   .publish-button {
     padding: 0.75rem 1.5rem;
     background: var(--fog-accent, #64748b);
-    color: white;
+    color: var(--fog-text, #f1f5f9);
     border: none;
     border-radius: 0.25rem;
     cursor: pointer;
@@ -1556,18 +1556,18 @@
 
   .republish-text {
     margin: 0 0 0.5rem 0;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     font-size: 0.875rem;
   }
 
   :global(.dark) .republish-text {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .republish-button {
     padding: 0.5rem 1rem;
     background: var(--fog-accent, #64748b);
-    color: white;
+    color: var(--fog-text, #f1f5f9);
     border: none;
     border-radius: 0.25rem;
     cursor: pointer;
@@ -1608,7 +1608,7 @@
     border: 1px solid var(--fog-border, #e5e7eb);
     border-radius: 0.25rem;
     background: var(--fog-post, #ffffff);
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     cursor: pointer;
     transition: all 0.2s;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -1627,7 +1627,7 @@
   :global(.dark) .toolbar-button {
     background: var(--fog-dark-post, #1f2937);
     border-color: var(--fog-dark-border, #374151);
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   }
 
@@ -1660,7 +1660,7 @@
     border: 1px solid var(--fog-border, #e5e7eb);
     border-radius: 0.25rem;
     background: var(--fog-highlight, #f3f4f6);
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     cursor: pointer;
     font-size: 0.875rem;
     transition: all 0.2s;
@@ -1669,7 +1669,7 @@
   :global(.dark) .content-button {
     border-color: var(--fog-dark-border, #374151);
     background: var(--fog-dark-highlight, #374151);
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .content-button:hover:not(:disabled) {
diff --git a/src/lib/components/write/FindEventForm.svelte b/src/lib/components/write/FindEventForm.svelte
index 9cd6b73..4e47a16 100644
--- a/src/lib/components/write/FindEventForm.svelte
+++ b/src/lib/components/write/FindEventForm.svelte
@@ -146,23 +146,23 @@
   .find-form {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
   }
 
   .form-title {
-    margin: 0;
-    font-size: 1.5rem;
+    margin: 0 0 1.5rem 0;
+    font-size: 1.25rem;
     font-weight: 600;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
   }
 
   :global(.dark) .form-title {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .form-description {
-    margin: 0;
+    margin: 0 0 1.5rem 0;
     color: var(--fog-text-light, #6b7280);
+    font-size: 0.875rem;
   }
 
   :global(.dark) .form-description {
@@ -180,14 +180,15 @@
     border: 1px solid var(--fog-border, #e5e7eb);
     border-radius: 0.25rem;
     background: var(--fog-post, #ffffff);
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     font-size: 0.875rem;
+    font-family: monospace;
   }
 
   :global(.dark) .event-input {
     border-color: var(--fog-dark-border, #374151);
     background: var(--fog-dark-post, #1f2937);
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .event-input:disabled {
@@ -198,12 +199,13 @@
   .find-button {
     padding: 0.75rem 1.5rem;
     background: var(--fog-accent, #64748b);
-    color: white;
+    color: var(--fog-text, #f1f5f9);
     border: none;
     border-radius: 0.25rem;
     cursor: pointer;
     font-size: 0.875rem;
     font-weight: 500;
+    font-family: monospace;
   }
 
   :global(.dark) .find-button {
@@ -220,6 +222,7 @@
   }
 
   .error-message {
+    margin-top: 1rem;
     padding: 0.75rem;
     background: var(--fog-danger-light, #fee2e2);
     color: var(--fog-danger, #dc2626);
@@ -255,11 +258,11 @@
     margin: 0;
     font-size: 1.25rem;
     font-weight: 600;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
   }
 
   :global(.dark) .event-title {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .view-link {
@@ -291,24 +294,25 @@
   .event-json pre {
     margin: 0;
     font-size: 0.75rem;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     white-space: pre-wrap;
     word-wrap: break-word;
   }
 
   :global(.dark) .event-json pre {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .edit-button {
     padding: 0.75rem 1.5rem;
     background: var(--fog-accent, #64748b);
-    color: white;
+    color: var(--fog-text, #f1f5f9);
     border: none;
     border-radius: 0.25rem;
     cursor: pointer;
     font-size: 0.875rem;
     font-weight: 500;
+    font-family: monospace;
   }
 
   :global(.dark) .edit-button {
diff --git a/src/lib/modules/discussions/DiscussionCard.svelte b/src/lib/modules/discussions/DiscussionCard.svelte
index ab05eb8..0bbb262 100644
--- a/src/lib/modules/discussions/DiscussionCard.svelte
+++ b/src/lib/modules/discussions/DiscussionCard.svelte
@@ -193,7 +193,7 @@
   <a href="/event/{thread.id}" class="card-link">
     <div class="card-content" class:expanded bind:this={contentElement}>
       <div class="flex justify-between items-start mb-2">
-        <h3 class="text-lg font-semibold">
+        <h3 class="text-lg font-semibold text-fog-text dark:text-fog-dark-text">
           {getTitle()}
         </h3>
         <div class="flex items-center gap-2">
@@ -211,7 +211,7 @@
         {/if}
       </div>
 
-      <p class="text-sm mb-2">{getPreview()}</p>
+      <p class="text-sm mb-2 text-fog-text dark:text-fog-dark-text">{getPreview()}</p>
 
       {#if getTopics().length > 0}
         <div class="flex gap-2 topic-tags">
diff --git a/src/lib/modules/feed/FeedPage.svelte b/src/lib/modules/feed/FeedPage.svelte
index 6fc41e2..271aa57 100644
--- a/src/lib/modules/feed/FeedPage.svelte
+++ b/src/lib/modules/feed/FeedPage.svelte
@@ -1,42 +1,11 @@
 <script lang="ts">
   import { nostrClient } from '../../services/nostr/nostr-client.js';
   import { relayManager } from '../../services/nostr/relay-manager.js';
-  import { sessionManager } from '../../services/auth/session-manager.js';
   import FeedPost from './FeedPost.svelte';
-  import HighlightCard from './HighlightCard.svelte';
   import ThreadDrawer from './ThreadDrawer.svelte';
   import type { NostrEvent } from '../../types/nostr.js';
-  import { onMount, tick } from 'svelte';
+  import { onMount } from 'svelte';
   import { KIND, getFeedKinds, getKindInfo } from '../../types/kind-lookup.js';
-  
-  // Virtual scrolling - lazy load component
-  let Virtualizer: any = null;
-  let virtualizerLoading = $state(false);
-  
-  async function loadVirtualizer() {
-    if (Virtualizer) return Virtualizer;
-    if (virtualizerLoading) return null;
-    
-    virtualizerLoading = true;
-    try {
-      const module = await import('@tanstack/svelte-virtual');
-      Virtualizer = module.Virtualizer;
-      return Virtualizer;
-    } catch (error) {
-      console.warn('Virtual scrolling not available, falling back to progressive rendering:', error);
-      return null;
-    } finally {
-      virtualizerLoading = false;
-    }
-  }
-  
-  // Load virtualizer when component mounts
-  $effect(() => {
-    if (visibleEvents.length > 50) {
-      // Only use virtual scrolling for large lists
-      loadVirtualizer();
-    }
-  });
 
   interface Props {
     singleRelay?: string; // If provided, use only this relay and disable cache
@@ -44,143 +13,57 @@
 
   let { singleRelay }: Props = $props();
 
-  let posts = $state<NostrEvent[]>([]);
-  let highlights = $state<NostrEvent[]>([]); // Store highlight events (kind 9802)
-  let otherFeedEvents = $state<NostrEvent[]>([]); // Store other feed kinds (not kind 1 or 9802)
+  let events = $state<NostrEvent[]>([]);
   let loading = $state(true);
   let loadingMore = $state(false);
   let hasMore = $state(true);
   let oldestTimestamp = $state<number | null>(null);
-  let relayError = $state<string | null>(null); // Error message for single-relay mode
+  let relayError = $state<string | null>(null);
   
-  // Progressive rendering: only render first N items initially, then expand as user scrolls
-  const INITIAL_RENDER_LIMIT = 25;
-  const RENDER_INCREMENT = 25;
-  let visibleItemCount = $state(INITIAL_RENDER_LIMIT);
-  
-  // Derived: sorted all events (memoized to avoid re-sorting on every render)
-  const allEvents = $derived.by(() => [...posts, ...highlights, ...otherFeedEvents].sort((a, b) => b.created_at - a.created_at));
-  const visibleEvents = $derived.by(() => allEvents.slice(0, visibleItemCount));
-  
-  // Batch-loaded parent events: eventId -> parentEvent
+  // Batch-loaded parent and quoted events
   let parentEventsMap = $state<Map<string, NostrEvent>>(new Map());
-  
-  // Batch-loaded quoted events: eventId -> quotedEvent
   let quotedEventsMap = $state<Map<string, NostrEvent>>(new Map());
   
-  // Batch-loaded zap counts: eventId -> count
-  let zapCountsMap = $state<Map<string, number>>(new Map());
-  
-  // Drawer state for viewing parent/quoted events
+  // Drawer state
   let drawerOpen = $state(false);
   let drawerEvent = $state<NostrEvent | null>(null);
   
-  // Debounce updates to prevent rapid re-renders
-  let updateTimeout: ReturnType<typeof setTimeout> | null = null;
-  let pendingUpdates: NostrEvent[] = [];
-  
+  let sentinelElement = $state<HTMLElement | null>(null);
+  let observer: IntersectionObserver | null = null;
+  let subscriptionId: string | null = $state(null);
+  let isMounted = $state(true);
+
   function openDrawer(event: NostrEvent) {
     drawerEvent = event;
     drawerOpen = true;
   }
-  
+
   function closeDrawer() {
     drawerOpen = false;
     drawerEvent = null;
   }
 
-  let sentinelElement = $state<HTMLElement | null>(null);
-  let observer: IntersectionObserver | null = null;
-  let subscriptionId: string | null = $state(null);
-  let refreshInterval: ReturnType<typeof setInterval> | null = null;
-  let subscriptionSetup = $state(false); // Track if subscription is already set up
-  let isMounted = $state(true); // Track if component is still mounted
-  let activeFetchPromises = $state<Set<Promise<any>>>(new Set()); // Track active fetch promises
-
-  onMount(async () => {
+  onMount(() => {
     isMounted = true;
-    await nostrClient.initialize();
-    if (!isMounted) return; // Check if unmounted during init
-    await loadFeed();
-    if (!isMounted) return;
-    // Set up persistent subscription for new events (only once)
-    if (!subscriptionSetup) {
+    (async () => {
+      await nostrClient.initialize();
+      if (!isMounted) return;
+      await loadFeed();
+      if (!isMounted) return;
       setupSubscription();
-      setupPeriodicRefresh();
-      subscriptionSetup = true;
-    }
-  });
-  
-  // Reset visible count when data changes (new feed loaded)
-  $effect(() => {
-    // Reset visible count when data changes (new feed loaded)
-    visibleItemCount = INITIAL_RENDER_LIMIT;
-  });
-  
-  // Auto-expand visible items when user scrolls near bottom (debounced)
-  $effect(() => {
-    let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
+      setupObserver();
+    })();
     
-    const handleScroll = () => {
-      if (loading || loadingMore) return;
-      if (visibleItemCount >= allEvents.length) return;
-      
-      const scrollPosition = window.innerHeight + window.scrollY;
-      const documentHeight = document.documentElement.scrollHeight;
-      const distanceFromBottom = documentHeight - scrollPosition;
-      
-      // If within 500px of bottom, auto-expand (debounced)
-      if (distanceFromBottom < 500) {
-        if (scrollTimeout) clearTimeout(scrollTimeout);
-        scrollTimeout = setTimeout(() => {
-          visibleItemCount = Math.min(visibleItemCount + RENDER_INCREMENT, allEvents.length);
-        }, 100); // Debounce by 100ms
-      }
-    };
-    
-    window.addEventListener('scroll', handleScroll, { passive: true });
     return () => {
-      window.removeEventListener('scroll', handleScroll);
-      if (scrollTimeout) clearTimeout(scrollTimeout);
-    };
-  });
-  
-  // Cleanup subscription on unmount
-  $effect(() => {
-    return () => {
-      isMounted = false; // Mark as unmounted to halt all operations
-      
-      // Cancel all active fetch promises
-      activeFetchPromises.forEach(promise => {
-        // Promises can't be cancelled directly, but we'll ignore their results
-      });
-      activeFetchPromises.clear();
-      
-      // Unsubscribe from real-time updates
+      isMounted = false;
       if (subscriptionId) {
         nostrClient.unsubscribe(subscriptionId);
         subscriptionId = null;
       }
-      
-      // Clear refresh interval
-      if (refreshInterval) {
-        clearInterval(refreshInterval);
-        refreshInterval = null;
-      }
-      
-      // Clear update timeout
-      if (updateTimeout) {
-        clearTimeout(updateTimeout);
-        updateTimeout = null;
-      }
-      
-      // Disconnect intersection observer
       if (observer) {
         observer.disconnect();
         observer = null;
       }
-      
-      subscriptionSetup = false;
     };
   });
 
@@ -199,155 +82,52 @@
     };
   });
 
-  // This cleanup is now handled in the main cleanup effect above
-  
-  // Set up persistent subscription for real-time updates
   function setupSubscription() {
-    if (subscriptionId) {
-      // Already subscribed
-      return;
-    }
-    
-    // Don't set up subscription for single relay mode
-    if (singleRelay) {
-      return;
-    }
+    if (subscriptionId || singleRelay) return;
     
     const relays = relayManager.getFeedReadRelays();
-    const feedKinds = getFeedKinds();
+    const feedKinds = getFeedKinds().filter(kind => kind !== KIND.DISCUSSION_THREAD);
     const filters = feedKinds.map(kind => ({ kinds: [kind], limit: 20 }));
     
-    // Subscribe to new kind 1 events and kind 9802 highlights
     subscriptionId = nostrClient.subscribe(
       filters,
       relays,
       (event: NostrEvent) => {
-        // Only add events that are newer than what we already have
-        // Check against all feed event types
-        const existingIds = new Set([
-          ...posts.map(p => p.id),
-          ...highlights.map(h => h.id),
-          ...otherFeedEvents.map(e => e.id)
-        ]);
+        if (event.kind === KIND.DISCUSSION_THREAD) return;
+        const existingIds = new Set(events.map(e => e.id));
         if (!existingIds.has(event.id)) {
-          handleUpdate([event]);
+          events = [event, ...events].sort((a, b) => b.created_at - a.created_at);
         }
       },
-      (relay: string) => {
-        console.debug(`[FeedPage] Subscription EOSE from ${relay}`);
-      }
+      () => {}
     );
-    
-    console.log(`[FeedPage] Set up persistent subscription for new events (ID: ${subscriptionId})`);
   }
-  
-  // Set up periodic refresh to ensure we get new events even if subscription fails
-  function setupPeriodicRefresh() {
-    if (refreshInterval) {
-      return; // Already set up
-    }
-    
-    // Don't set up periodic refresh for single relay mode
-    if (singleRelay) {
-      return;
-    }
+
+  function setupObserver() {
+    if (!sentinelElement || loading || observer) return;
     
-    // Refresh every 30 seconds
-    refreshInterval = setInterval(async () => {
-      if (!isMounted) {
-        if (refreshInterval) {
-          clearInterval(refreshInterval);
-          refreshInterval = null;
-        }
-        return; // Don't refresh if component is unmounted
-      }
-      try {
-        // Use single relay if provided, otherwise use normal relay list
-        const relays = singleRelay ? [singleRelay] : relayManager.getFeedReadRelays();
-        
-        // Get the newest event's timestamp from all feed event types to only fetch newer events
-        const allFeedEvents = [...posts, ...highlights, ...otherFeedEvents];
-        const newestTimestamp = allFeedEvents.length > 0 
-          ? Math.max(...allFeedEvents.map(e => e.created_at))
-          : Math.floor(Date.now() / 1000) - 60; // Last minute if no events
-        
-        const feedKinds = getFeedKinds();
-        const filters = feedKinds.map(kind => ({ 
-          kinds: [kind], 
-          limit: 50,
-          since: newestTimestamp + 1 // Only get events newer than what we have
-        }));
-        
-        // Fetch new events (relay-first for refresh)
-        // In single-relay mode: never use cache
-        const events = await nostrClient.fetchEvents(
-          filters,
-          relays,
-          singleRelay ? {
-            relayFirst: true, // Query relay first
-            useCache: false, // Never use cache in single-relay mode
-            cacheResults: false, // Don't cache in single-relay mode
-            timeout: 3000
-          } : {
-            relayFirst: true, // Query relays first
-            useCache: true, // Fill from cache if needed
-            cacheResults: true,
-            timeout: 3000
-          }
-        );
-        
-        // Check for new events
-        const existingIds = new Set(posts.map(p => p.id));
-        const newEvents = events.filter(e => !existingIds.has(e.id));
-        
-        if (newEvents.length > 0) {
-          console.log(`[FeedPage] Periodic refresh found ${newEvents.length} new events`);
-          handleUpdate(newEvents);
-        }
-      } catch (error) {
-        console.debug('[FeedPage] Periodic refresh error:', error);
+    observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting && hasMore && !loadingMore) {
+        loadMore();
       }
-    }, 30000); // 30 seconds
-    
-    console.log('[FeedPage] Set up periodic refresh (every 30 seconds)');
-  }
+    }, { threshold: 0.1 });
 
-  // Set up observer when sentinel element is available
-  $effect(() => {
-    if (sentinelElement && !loading && !observer) {
-      observer = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting && hasMore && !loadingMore) {
-          loadMore();
-        }
-      }, { threshold: 0.1 });
-
-      observer.observe(sentinelElement);
-      
-      return () => {
-        if (observer) {
-          observer.disconnect();
-          observer = null;
-        }
-      };
-    }
-  });
+    observer.observe(sentinelElement);
+  }
 
   async function loadFeed() {
-    if (!isMounted) return; // Don't load if component is unmounted
+    if (!isMounted) return;
     loading = true;
-    relayError = null; // Clear any previous errors
+    relayError = null;
+    
     try {
-      const config = nostrClient.getConfig();
-      
-      // Use single relay if provided, otherwise use normal relay list
       const relays = singleRelay ? [singleRelay] : relayManager.getFeedReadRelays();
       
-      // For single-relay mode, check if relay is available
       if (singleRelay) {
         try {
           const relay = await nostrClient.getRelay(singleRelay);
           if (!relay) {
-            relayError = `Relay ${singleRelay} is unavailable or returned an error. The relay may be down or unreachable.`;
+            relayError = `Relay ${singleRelay} is unavailable or returned an error.`;
             loading = false;
             return;
           }
@@ -358,139 +138,47 @@
         }
       }
       
-      // Load all feed kinds
-      const feedKinds = getFeedKinds();
+      const feedKinds = getFeedKinds().filter(kind => kind !== KIND.DISCUSSION_THREAD);
       const filters = feedKinds.map(kind => ({ kinds: [kind], limit: 20 }));
       
-      // In single-relay mode: never use cache, only fetch directly from relay
-      // In normal mode: use relay-first with cache fallback
       const fetchOptions = singleRelay ? {
-        relayFirst: true, // Query relay first
-        useCache: false, // Never use cache in single-relay mode
-        cacheResults: false, // Don't cache results in single-relay mode
-        timeout: 15000, // 15-second timeout for single-relay (relays can be slow, especially if auth is required)
-        onUpdate: (updatedEvents: NostrEvent[]) => {
-          // Update incrementally as events arrive
-          handleUpdate(updatedEvents);
-        }
+        relayFirst: true,
+        useCache: false,
+        cacheResults: false,
+        timeout: 15000
       } : {
-        relayFirst: true, // Query relays first with timeout
-        useCache: true, // Fill from cache if relay query returns nothing
-        cacheResults: true, // Cache the results
-        timeout: 3000, // 3-second timeout
-        priority: 'high' as const, // High priority for posts/highlights - display first
-        onUpdate: (updatedEvents: NostrEvent[]) => {
-          // Update incrementally as events arrive
-          handleUpdate(updatedEvents);
-        }
+        relayFirst: true,
+        useCache: true,
+        cacheResults: true,
+        timeout: 3000
       };
       
-      if (singleRelay) {
-        console.log(`[FeedPage] Single-relay mode: fetching from ${singleRelay} with useCache=false, cacheResults=false`);
-      }
+      const fetchedEvents = await nostrClient.fetchEvents(filters, relays, fetchOptions);
       
-      const fetchPromise = nostrClient.fetchEvents(filters, relays, fetchOptions);
-      activeFetchPromises.add(fetchPromise);
-      const events = await fetchPromise;
-      activeFetchPromises.delete(fetchPromise);
+      if (!isMounted) return;
       
-      if (!isMounted) return; // Don't process if component is unmounted
-      
-      console.log(`[FeedPage] Loaded ${events.length} events from ${singleRelay ? `single relay ${singleRelay}` : 'relays'} (relay-first mode)`);
-
-      // Separate events by kind - we'll handle all showInFeed kinds
-      const postsList = events.filter(e => e.kind === KIND.SHORT_TEXT_NOTE);
-      const highlightsList = events.filter(e => e.kind === KIND.HIGHLIGHTED_ARTICLE);
-      // Store other feed kinds separately for now (we'll create cards for them)
-      const newOtherFeedEvents = events.filter((e: NostrEvent) => 
-        e.kind !== KIND.SHORT_TEXT_NOTE && 
-        e.kind !== KIND.HIGHLIGHTED_ARTICLE &&
+      // Filter to only showInFeed kinds and exclude kind 11
+      const filteredEvents = fetchedEvents.filter((e: NostrEvent) => 
+        e.kind !== KIND.DISCUSSION_THREAD && 
         getKindInfo(e.kind).showInFeed === true
       );
-
-      // Deduplicate (relays already return events in reverse chronological order)
-      const uniquePostsMap = new Map<string, NostrEvent>();
-      for (const event of postsList) {
-        if (!uniquePostsMap.has(event.id)) {
-          uniquePostsMap.set(event.id, event);
-        }
-      }
-      posts = Array.from(uniquePostsMap.values());
-
-      const uniqueHighlightsMap = new Map<string, NostrEvent>();
-      for (const event of highlightsList) {
-        if (!uniqueHighlightsMap.has(event.id)) {
-          uniqueHighlightsMap.set(event.id, event);
-        }
-      }
-      highlights = Array.from(uniqueHighlightsMap.values());
       
-      // Store other feed events
-      const uniqueOtherMap = new Map<string, NostrEvent>();
-      for (const event of newOtherFeedEvents) {
-        if (!uniqueOtherMap.has(event.id)) {
-          uniqueOtherMap.set(event.id, event);
+      // Deduplicate
+      const uniqueMap = new Map<string, NostrEvent>();
+      for (const event of filteredEvents) {
+        if (!uniqueMap.has(event.id)) {
+          uniqueMap.set(event.id, event);
         }
       }
-      otherFeedEvents = Array.from(uniqueOtherMap.values());
-      
-      // Set loading to false immediately after showing cached data
-      // This allows the UI to render while fresh data loads in background
-      loading = false;
       
-        console.log(`[FeedPage] Loaded ${posts.length} posts and ${highlights.length} highlights`);
+      events = Array.from(uniqueMap.values()).sort((a, b) => b.created_at - a.created_at);
       
-      if (posts.length > 0 || highlights.length > 0) {
-        const allTimestamps = [...posts.map(e => e.created_at), ...highlights.map(e => e.created_at)];
-        oldestTimestamp = Math.min(...allTimestamps);
-        
-        // Load secondary data (reactions, profiles, etc.) AFTER posts are displayed
-        // Collect all post IDs and pubkeys first, then batch fetch everything
-        const allPostIds = [
-          ...posts.map(p => p.id),
-          ...highlights.map(p => p.id),
-          ...otherFeedEvents.map(p => p.id)
-        ];
-        const allPubkeys = new Set<string>();
-        posts.forEach(p => allPubkeys.add(p.pubkey));
-        highlights.forEach(p => allPubkeys.add(p.pubkey));
-        otherFeedEvents.forEach(p => allPubkeys.add(p.pubkey));
-        
-        // Use requestIdleCallback or setTimeout to defer loading so posts render first
-        const deferSecondaryData = () => {
-          if (!isMounted) return;
-          
-          // Batch load all secondary data in parallel using collected IDs/pubkeys
-          // Note: Reactions are handled by FeedPost component itself
-          const promise = Promise.all([
-            loadParentAndQuotedEvents(posts),
-            loadZapCountsForPosts(posts),
-            loadProfilesForPosts(posts)
-          ]).catch(error => {
-            if (isMounted) {
-              console.error('[FeedPage] Error loading secondary data:', error);
-            }
-          }).finally(() => {
-            activeFetchPromises.delete(promise);
-          });
-          activeFetchPromises.add(promise);
-        };
-        
-        // Use requestIdleCallback if available, otherwise setTimeout
-        if (typeof requestIdleCallback !== 'undefined') {
-          requestIdleCallback(deferSecondaryData, { timeout: 500 });
-        } else {
-          setTimeout(deferSecondaryData, 100);
-        }
-      } else {
-        console.log('[FeedPage] No events found. Relays:', relays);
-        // In single-relay mode, if we got 0 events, it might mean the relay doesn't have any
-        if (singleRelay && events.length === 0) {
-          relayError = `No events found on relay ${singleRelay}. This relay may not store feed event types, or it may be empty.`;
-        }
+      if (events.length > 0) {
+        oldestTimestamp = Math.min(...events.map(e => e.created_at));
+        loadParentAndQuotedEvents(events);
       }
       
-      hasMore = events.length >= 20;
+      hasMore = fetchedEvents.length >= 20;
     } catch (error) {
       console.error('Error loading feed:', error);
     } finally {
@@ -499,127 +187,55 @@
   }
 
   async function loadMore() {
-    if (!isMounted || loadingMore || !hasMore) return; // Don't load if unmounted
+    if (!isMounted || loadingMore || !hasMore) return;
     
     loadingMore = true;
     try {
-      const config = nostrClient.getConfig();
-      
-      // Use single relay if provided, otherwise use normal relay list
       const relays = singleRelay ? [singleRelay] : relayManager.getFeedReadRelays();
-      
-      const feedKinds = getFeedKinds();
+      const feedKinds = getFeedKinds().filter(kind => kind !== KIND.DISCUSSION_THREAD);
       const filters = feedKinds.map(kind => ({ 
         kinds: [kind], 
         limit: 20,
         until: oldestTimestamp || undefined
       }));
       
-      // In single-relay mode: never use cache, only fetch directly from relay
-      // In normal mode: use relay-first with cache fallback
-      const fetchPromise = nostrClient.fetchEvents(
-        filters,
-        relays,
-        singleRelay ? {
-          relayFirst: true, // Query relay first
-          useCache: false, // Never use cache in single-relay mode
-          cacheResults: false, // Don't cache results in single-relay mode
-          timeout: 3000 // 3-second timeout
-        } : {
-          relayFirst: true, // Query relays first with timeout
-          useCache: true, // Fill from cache if relay query returns nothing
-          cacheResults: true, // Cache the results
-          timeout: 3000 // 3-second timeout
-        }
-      );
-      activeFetchPromises.add(fetchPromise);
-      const events = await fetchPromise;
-      activeFetchPromises.delete(fetchPromise);
+      const fetchOptions = singleRelay ? {
+        relayFirst: true,
+        useCache: false,
+        cacheResults: false,
+        timeout: 3000
+      } : {
+        relayFirst: true,
+        useCache: true,
+        cacheResults: true,
+        timeout: 3000
+      };
       
-      if (!isMounted) return; // Don't process if component is unmounted
-
-      if (events.length === 0) {
+      const fetchedEvents = await nostrClient.fetchEvents(filters, relays, fetchOptions);
+      
+      if (!isMounted) return;
+      
+      if (fetchedEvents.length === 0) {
         hasMore = false;
         return;
       }
-
-      // Separate events by kind
-      const newPosts = events.filter(e => e.kind === KIND.SHORT_TEXT_NOTE);
-      const newHighlights = events.filter(e => e.kind === KIND.HIGHLIGHTED_ARTICLE);
-      const newOtherFeedEvents = events.filter((e: NostrEvent) => 
-        e.kind !== KIND.SHORT_TEXT_NOTE && 
-        e.kind !== KIND.HIGHLIGHTED_ARTICLE &&
+      
+      const filteredEvents = fetchedEvents.filter((e: NostrEvent) => 
+        e.kind !== KIND.DISCUSSION_THREAD && 
         getKindInfo(e.kind).showInFeed === true
       );
-
-      // Filter out duplicates
-      const existingPostIds = new Set(posts.map(p => p.id));
-      const existingHighlightIds = new Set(highlights.map(h => h.id));
-      const existingOtherIds = new Set(otherFeedEvents.map((e: NostrEvent) => e.id));
-      const uniqueNewPosts = newPosts.filter(e => !existingPostIds.has(e.id));
-      const uniqueNewHighlights = newHighlights.filter(e => !existingHighlightIds.has(e.id));
-      const uniqueNewOther = newOtherFeedEvents.filter((e: NostrEvent) => !existingOtherIds.has(e.id));
       
-      if (uniqueNewPosts.length > 0 || uniqueNewHighlights.length > 0) {
-        if (uniqueNewPosts.length > 0) {
-          // Append new posts (they're already in reverse chronological order from relays)
-          posts = [...posts, ...uniqueNewPosts];
-          // Load secondary data with low priority after posts are displayed
-          const secondaryDataPromise = new Promise<void>((resolve) => {
-            setTimeout(() => {
-              if (!isMounted) {
-                resolve();
-                return; // Don't load if component is unmounted
-              }
-              // Note: Reactions are handled by FeedPost component itself
-              const promise = Promise.all([
-                loadParentAndQuotedEvents(uniqueNewPosts),
-                loadZapCountsForPosts(uniqueNewPosts),
-                loadProfilesForPosts(uniqueNewPosts)
-              ]).catch(error => {
-                if (isMounted) { // Only log if still mounted
-                  console.error('[FeedPage] Error loading secondary data for new posts:', error);
-                }
-              }).finally(() => {
-                activeFetchPromises.delete(promise);
-                resolve();
-              });
-              activeFetchPromises.add(promise);
-            }, 100);
-          });
-          activeFetchPromises.add(secondaryDataPromise);
-        }
-        
-        if (uniqueNewHighlights.length > 0) {
-          // Append new highlights (they're already in reverse chronological order from relays)
-          highlights = [...highlights, ...uniqueNewHighlights];
-        }
-        
-        if (uniqueNewOther.length > 0) {
-          // Append new other events (they're already in reverse chronological order from relays)
-          otherFeedEvents = [...otherFeedEvents, ...uniqueNewOther];
-        }
-        
-        const allNewTimestamps = [...uniqueNewPosts.map(e => e.created_at), ...uniqueNewHighlights.map(e => e.created_at)];
-        const oldest = Math.min(...allNewTimestamps);
-        if (oldest < (oldestTimestamp || Infinity)) {
-          oldestTimestamp = oldest;
-        }
-        hasMore = events.length >= 20;
-      } else if (events.length > 0) {
-        // All events were duplicates, but we got some results
-        // This might mean we've reached the end, or we need to adjust the timestamp
-        if (oldestTimestamp) {
-          // Try moving the timestamp forward slightly to avoid getting the same results
-          oldestTimestamp = oldestTimestamp - 1;
-          hasMore = events.length >= 20;
-        } else {
-          hasMore = false;
-        }
-      } else {
-        // No events returned at all
-        hasMore = false;
+      const existingIds = new Set(events.map(e => e.id));
+      const newEvents = filteredEvents.filter(e => !existingIds.has(e.id));
+      
+      if (newEvents.length > 0) {
+        events = [...events, ...newEvents].sort((a, b) => b.created_at - a.created_at);
+        const allTimestamps = events.map(e => e.created_at);
+        oldestTimestamp = Math.min(...allTimestamps);
+        loadParentAndQuotedEvents(newEvents);
       }
+      
+      hasMore = fetchedEvents.length >= 20;
     } catch (error) {
       console.error('Error loading more:', error);
     } finally {
@@ -627,147 +243,19 @@
     }
   }
 
-  // Debounced update handler to prevent rapid re-renders and loops
-  function handleUpdate(updated: NostrEvent[]) {
-    if (!isMounted) return; // Don't update if component is unmounted
-    if (!updated || updated.length === 0) return;
-    
-    // Deduplicate incoming updates before adding to pending
-    // Check against all feed event types
-    const existingIds = new Set([
-      ...posts.map((p: NostrEvent) => p.id),
-      ...highlights.map((h: NostrEvent) => h.id),
-      ...otherFeedEvents.map((e: NostrEvent) => e.id)
-    ]);
-    const newUpdates = updated.filter(e => e && e.id && !existingIds.has(e.id));
-    
-    if (newUpdates.length === 0) {
-      return; // All duplicates, skip silently
-    }
-    
-    // Also deduplicate within pendingUpdates
-    const pendingIds = new Set(pendingUpdates.map(e => e.id));
-    const trulyNew = newUpdates.filter(e => !pendingIds.has(e.id));
-    
-    if (trulyNew.length === 0) {
-      return; // Already in pending, skip silently
-    }
-    
-    pendingUpdates.push(...trulyNew);
-    
-    if (updateTimeout) {
-      clearTimeout(updateTimeout);
-    }
-    
-    // Batch updates every 500ms to prevent rapid re-renders
-    updateTimeout = setTimeout(() => {
-      if (!isMounted) return; // Don't update if component is unmounted
-      if (pendingUpdates.length === 0) {
-        return;
-      }
-      
-      // Final deduplication check against all feed event types (may have changed)
-      const currentIds = new Set([
-        ...posts.map(p => p.id),
-        ...highlights.map(h => h.id),
-        ...otherFeedEvents.map(e => e.id)
-      ]);
-      const newEvents = pendingUpdates.filter(e => e && e.id && !currentIds.has(e.id));
-      
-      if (newEvents.length === 0) {
-        pendingUpdates = [];
-        return;
-      }
-      
-      console.log(`[FeedPage] Processing ${newEvents.length} new events, existing: ${posts.length}`);
-      
-      // Separate events by kind
-      const newPosts = newEvents.filter(e => e.kind === KIND.SHORT_TEXT_NOTE);
-      const newHighlights = newEvents.filter(e => e.kind === KIND.HIGHLIGHTED_ARTICLE);
-      const newOtherFeedEvents = newEvents.filter((e: NostrEvent) => 
-        e.kind !== KIND.SHORT_TEXT_NOTE && 
-        e.kind !== KIND.HIGHLIGHTED_ARTICLE &&
-        getKindInfo(e.kind).showInFeed === true
-      );
-
-      // Merge and deduplicate posts (relays already return in reverse chronological order)
-      if (newPosts.length > 0) {
-        const mergedPosts = [...posts, ...newPosts];
-        const uniquePostsMap = new Map<string, NostrEvent>();
-        for (const event of mergedPosts) {
-          if (event && event.id && !uniquePostsMap.has(event.id)) {
-            uniquePostsMap.set(event.id, event);
-        }
-      }
-        const uniquePosts = Array.from(uniquePostsMap.values());
-      
-      // Only update if we actually have new events to prevent loops
-        if (uniquePosts.length > posts.length || uniquePosts.some((e, i) => e.id !== posts[i]?.id)) {
-          posts = uniquePosts;
-        }
-      }
-
-      // Merge and deduplicate highlights (relays already return in reverse chronological order)
-      if (newHighlights.length > 0) {
-        const mergedHighlights = [...highlights, ...newHighlights];
-        const uniqueHighlightsMap = new Map<string, NostrEvent>();
-        for (const event of mergedHighlights) {
-          if (event && event.id && !uniqueHighlightsMap.has(event.id)) {
-            uniqueHighlightsMap.set(event.id, event);
-          }
-        }
-        const uniqueHighlights = Array.from(uniqueHighlightsMap.values());
-        
-        // Only update if we actually have new events to prevent loops
-        if (uniqueHighlights.length > highlights.length || uniqueHighlights.some((e, i) => e.id !== highlights[i]?.id)) {
-          highlights = uniqueHighlights;
-        }
-      }
-
-      // Merge and deduplicate other feed events (relays already return in reverse chronological order)
-      if (newOtherFeedEvents.length > 0) {
-        const mergedOther = [...otherFeedEvents, ...newOtherFeedEvents];
-        const uniqueOtherMap = new Map<string, NostrEvent>();
-        for (const event of mergedOther) {
-          if (event && event.id && !uniqueOtherMap.has(event.id)) {
-            uniqueOtherMap.set(event.id, event);
-          }
-        }
-        const uniqueOther = Array.from(uniqueOtherMap.values());
-        
-        // Only update if we actually have new events to prevent loops
-        if (uniqueOther.length > otherFeedEvents.length || uniqueOther.some((e, i) => e.id !== otherFeedEvents[i]?.id)) {
-          otherFeedEvents = uniqueOther;
-        }
-      }
-        
-      console.debug(`[FeedPage] Updated: ${posts.length} posts, ${highlights.length} highlights`);
-      
-      pendingUpdates = [];
-    }, 500);
-  }
-
-  // Reactions are handled by FeedPost component itself, not here
-  // FeedPage no longer loads or manages reactions
-
-  // Batch load parent and quoted events for all posts
   async function loadParentAndQuotedEvents(postsToLoad: NostrEvent[]) {
-    if (!isMounted || postsToLoad.length === 0) return; // Don't load if unmounted
+    if (!isMounted || postsToLoad.length === 0) return;
     
     try {
       const relays = singleRelay ? [singleRelay] : relayManager.getFeedReadRelays();
-      
-      // Collect all parent and quoted event IDs
       const parentEventIds = new Set<string>();
       const quotedEventIds = new Set<string>();
       
       for (const post of postsToLoad) {
-        // Check for parent event (reply)
         const replyTag = post.tags.find((t) => t[0] === 'e' && t[3] === 'reply');
         if (replyTag && replyTag[1]) {
           parentEventIds.add(replyTag[1]);
         } else {
-          // Fallback: find any 'e' tag that's not the root
           const rootId = post.tags.find((t) => t[0] === 'root')?.[1];
           const eTag = post.tags.find((t) => t[0] === 'e' && t[1] !== rootId && t[1] !== post.id);
           if (eTag && eTag[1]) {
@@ -775,47 +263,38 @@
           }
         }
         
-        // Check for quoted event
         const quotedTag = post.tags.find((t) => t[0] === 'q');
         if (quotedTag && quotedTag[1]) {
           quotedEventIds.add(quotedTag[1]);
         }
       }
       
-      // Batch fetch all parent and quoted events in one query
       const allEventIds = [...parentEventIds, ...quotedEventIds];
       if (allEventIds.length === 0) return;
       
-      const fetchPromise = nostrClient.fetchEvents(
+      const fetchedEvents = await nostrClient.fetchEvents(
         [{ kinds: [KIND.SHORT_TEXT_NOTE], ids: allEventIds }],
         relays,
         singleRelay ? {
           relayFirst: true,
           useCache: false,
           cacheResults: false,
-          timeout: 3000,
-          priority: 'low' // Low priority - secondary data
+          timeout: 3000
         } : {
           relayFirst: true,
           useCache: true,
           cacheResults: true,
-          timeout: 3000,
-          priority: 'low' // Low priority - secondary data
+          timeout: 3000
         }
       );
-      activeFetchPromises.add(fetchPromise);
-      const events = await fetchPromise;
-      activeFetchPromises.delete(fetchPromise);
       
-      if (!isMounted) return; // Don't process if component is unmounted
+      if (!isMounted) return;
       
-      // Map events by ID
       const eventsById = new Map<string, NostrEvent>();
-      for (const event of events) {
+      for (const event of fetchedEvents) {
         eventsById.set(event.id, event);
       }
       
-      // Store parent events
       for (const post of postsToLoad) {
         const replyTag = post.tags.find((t) => t[0] === 'e' && t[3] === 'reply');
         let parentId: string | undefined;
@@ -829,114 +308,14 @@
         if (parentId && eventsById.has(parentId)) {
           parentEventsMap.set(post.id, eventsById.get(parentId)!);
         }
-      }
-      
-      // Store quoted events
-      for (const post of postsToLoad) {
+        
         const quotedTag = post.tags.find((t) => t[0] === 'q');
         if (quotedTag && quotedTag[1] && eventsById.has(quotedTag[1])) {
           quotedEventsMap.set(post.id, eventsById.get(quotedTag[1])!);
         }
       }
     } catch (error) {
-      console.error('[FeedPage] Error batch loading parent/quoted events:', error);
-    }
-  }
-
-  // Batch load zap counts for all posts
-  async function loadZapCountsForPosts(postsToLoad: NostrEvent[]) {
-    if (!isMounted || postsToLoad.length === 0) return; // Don't load if unmounted
-    
-    try {
-      const config = nostrClient.getConfig();
-      const threshold = config.zapThreshold;
-      const zapRelays = singleRelay ? [singleRelay] : relayManager.getZapReceiptReadRelays();
-      const eventIds = postsToLoad.map(p => p.id);
-      
-      // Batch fetch all zap receipts in one query
-      const fetchPromise = nostrClient.fetchEvents(
-        [{ kinds: [KIND.ZAP_RECEIPT], '#e': eventIds, limit: 100 }],
-        zapRelays,
-        singleRelay ? {
-          relayFirst: true,
-          useCache: false,
-          cacheResults: false,
-          timeout: 3000,
-          priority: 'low' // Low priority - secondary data
-        } : {
-          relayFirst: true,
-          useCache: true,
-          cacheResults: true,
-          timeout: 3000,
-          priority: 'low' // Low priority - secondary data
-        }
-      );
-      activeFetchPromises.add(fetchPromise);
-      const receipts = await fetchPromise;
-      activeFetchPromises.delete(fetchPromise);
-      
-      if (!isMounted) return; // Don't process if component is unmounted
-      
-      // Count zaps per event (filtered by threshold)
-      const countsByEventId = new Map<string, number>();
-      for (const receipt of receipts) {
-        const eTags = receipt.tags.filter(t => t[0] === 'e' && t[1]);
-        for (const tag of eTags) {
-          const eventId = tag[1];
-          if (eventIds.includes(eventId)) {
-            const amountTag = receipt.tags.find((t) => t[0] === 'amount');
-            if (amountTag && amountTag[1]) {
-              const amount = parseInt(amountTag[1], 10);
-              if (!isNaN(amount) && amount >= threshold) {
-                countsByEventId.set(eventId, (countsByEventId.get(eventId) || 0) + 1);
-              }
-            }
-          }
-        }
-      }
-      
-      // Store zap counts
-      for (const [eventId, count] of countsByEventId.entries()) {
-        zapCountsMap.set(eventId, count);
-      }
-    } catch (error) {
-      console.error('[FeedPage] Error batch loading zap counts:', error);
-    }
-  }
-
-  // Batch load profiles for all posts
-  async function loadProfilesForPosts(postsToLoad: NostrEvent[]) {
-    if (!isMounted || postsToLoad.length === 0) return; // Don't load if unmounted
-    
-    try {
-      // Collect all unique pubkeys
-      const pubkeys = new Set<string>();
-      for (const post of postsToLoad) {
-        pubkeys.add(post.pubkey);
-        // Also collect pubkeys from parent/quoted events if we have them
-        const parentEvent = parentEventsMap.get(post.id);
-        if (parentEvent) {
-          pubkeys.add(parentEvent.pubkey);
-        }
-        const quotedEvent = quotedEventsMap.get(post.id);
-        if (quotedEvent) {
-          pubkeys.add(quotedEvent.pubkey);
-        }
-      }
-      
-      // Batch fetch all profiles using fetchProfiles (which handles caching)
-      const { fetchProfiles } = await import('../../services/user-data.js');
-      const relayList = singleRelay ? [singleRelay] : undefined;
-      const fetchPromise = fetchProfiles(Array.from(pubkeys), relayList);
-      activeFetchPromises.add(fetchPromise);
-      await fetchPromise;
-      activeFetchPromises.delete(fetchPromise);
-      
-      if (!isMounted) return; // Don't process if component is unmounted
-      
-      // Profiles are now cached and ProfileBadge will use the cache
-    } catch (error) {
-      console.error('[FeedPage] Error batch loading profiles:', error);
+      console.error('[FeedPage] Error loading parent/quoted events:', error);
     }
   }
 </script>
@@ -957,46 +336,22 @@
   {:else if relayError}
     <div class="error-state">
       <p class="text-fog-text dark:text-fog-dark-text error-message">{relayError}</p>
-      <p class="text-fog-text-light dark:text-fog-dark-text-light error-hint">
-        The relay may be temporarily unavailable, or it may not store the event types you're looking for.
-      </p>
     </div>
-  {:else if posts.length === 0 && highlights.length === 0 && otherFeedEvents.length === 0}
+  {:else if events.length === 0}
     <div class="empty-state">
-      <p class="text-fog-text dark:text-fog-dark-text">
-        No posts found. Check back later!
-      </p>
+      <p class="text-fog-text dark:text-fog-dark-text">No posts found.</p>
     </div>
   {:else}
-    {#key visibleItemCount}
-      <div class="feed-posts">
-        {#each visibleEvents as event (event.id)}
-          {#if event.kind === KIND.HIGHLIGHTED_ARTICLE}
-            <HighlightCard highlight={event} onOpenEvent={openDrawer} />
-          {:else}
-            <FeedPost 
-              post={event} 
-              onOpenEvent={openDrawer} 
-              parentEvent={parentEventsMap.get(event.id)}
-              quotedEvent={quotedEventsMap.get(event.id)}
-              zapCount={zapCountsMap.get(event.id) || 0}
-            />
-          {/if}
-        {/each}
-        {#if allEvents.length > visibleItemCount}
-          <div class="load-more-visible text-center py-4">
-            <button 
-              class="px-4 py-2 bg-fog-accent dark:bg-fog-dark-accent text-white rounded hover:opacity-80"
-              onclick={() => {
-                visibleItemCount = Math.min(visibleItemCount + RENDER_INCREMENT, allEvents.length);
-              }}
-            >
-              Load {Math.min(RENDER_INCREMENT, allEvents.length - visibleItemCount)} more posts
-            </button>
-          </div>
-        {/if}
-      </div>
-    {/key}
+    <div class="feed-posts">
+      {#each events as event (event.id)}
+        <FeedPost 
+          post={event} 
+          onOpenEvent={openDrawer} 
+          parentEvent={parentEventsMap.get(event.id)}
+          quotedEvent={quotedEventsMap.get(event.id)}
+        />
+      {/each}
+    </div>
     
     {#if drawerOpen && drawerEvent}
       <ThreadDrawer opEvent={drawerEvent} isOpen={drawerOpen} onClose={closeDrawer} />
@@ -1029,18 +384,12 @@
   .error-message {
     font-weight: 600;
     color: var(--fog-accent, #64748b);
-    margin-bottom: 0.5rem;
   }
 
   :global(.dark) .error-message {
     color: var(--fog-dark-accent, #94a3b8);
   }
 
-  .error-hint {
-    font-size: 0.875rem;
-    margin-top: 0.5rem;
-  }
-
   .feed-posts {
     display: flex;
     flex-direction: column;
@@ -1089,4 +438,10 @@
     background: var(--fog-dark-post, #1f2937);
     border-color: var(--fog-dark-border, #374151);
   }
+
+  /* Limit all images to 600px wide */
+  :global(.feed-page img) {
+    max-width: 600px;
+    height: auto;
+  }
 </style>
diff --git a/src/lib/modules/feed/FeedPost.svelte b/src/lib/modules/feed/FeedPost.svelte
index ddaaa2e..285247e 100644
--- a/src/lib/modules/feed/FeedPost.svelte
+++ b/src/lib/modules/feed/FeedPost.svelte
@@ -45,19 +45,12 @@
     onParentLoaded?: (event: NostrEvent) => void; // Callback when parent is loaded
     onQuotedLoaded?: (event: NostrEvent) => void; // Callback when quoted event is loaded
     onOpenEvent?: (event: NostrEvent) => void; // Callback to open event in drawer
-    previewMode?: boolean; // If true, show only title and first 150 chars of content
-    reactions?: NostrEvent[]; // Optional pre-loaded reactions (for performance)
-    zapCount?: number; // Optional pre-loaded zap count (for performance)
   }
 
-  let { post, parentEvent: providedParentEvent, quotedEvent: providedQuotedEvent, onReply, onParentLoaded, onQuotedLoaded, onOpenEvent, previewMode = false, reactions, zapCount: providedZapCount }: Props = $props();
+  let { post, parentEvent: providedParentEvent, quotedEvent: providedQuotedEvent, onReply, onParentLoaded, onQuotedLoaded, onOpenEvent }: Props = $props();
 
   let loadedParentEvent = $state<NostrEvent | null>(null);
   let loadingParent = $state(false);
-  let expanded = $state(false);
-  let contentElement: HTMLElement | null = $state(null);
-  let needsExpansion = $state(false);
-  let zapCount = $state(0);
   
   // Check if this event is bookmarked (async, so we use state)
   // Only check if user is logged in
@@ -73,8 +66,6 @@
       bookmarked = false;
     }
   });
-  
-  // Vote counting is handled by DiscussionVoteButtons component - no calculation here
 
   // Derive the effective parent event: prefer provided, fall back to loaded
   let parentEvent = $derived(providedParentEvent || loadedParentEvent);
@@ -82,14 +73,10 @@
   // Sync provided parent event changes and load if needed
   $effect(() => {
     if (providedParentEvent) {
-      // If provided parent event is available, use it
       return;
     }
     
-    // Only load if not provided and this is a reply (fallback for edge cases)
-    // In most cases, FeedPage will have pre-loaded the parent
     if (!loadedParentEvent && isReply()) {
-      // Delay loading to give FeedPage time to batch load
       setTimeout(() => {
         if (!providedParentEvent && !loadedParentEvent && isReply()) {
           loadParentEvent();
@@ -97,15 +84,6 @@
       }, 1000);
     }
   });
-
-  // Sync provided zap count - initialize and update when prop changes
-  $effect(() => {
-    if (providedZapCount !== undefined) {
-      zapCount = providedZapCount;
-    } else {
-      zapCount = 0;
-    }
-  });
   
   // Lazy load PollCard when post is a poll and component is visible
   $effect(() => {
@@ -120,101 +98,10 @@
     }
   });
 
-  let isMounted = $state(true);
-  let zapCountTimeout: ReturnType<typeof setTimeout> | null = null;
-  
   onMount(() => {
-    isMounted = true;
-    // Only load zap count if not provided (fallback for edge cases)
-    // In most cases, FeedPage will have pre-loaded the zap count
-    // Wait longer to give FeedPage time to batch load all zaps at once
-    if (providedZapCount === undefined) {
-      // Delay loading significantly to give FeedPage time to batch load
-      // FeedPage loads secondary data after posts are displayed
-      zapCountTimeout = setTimeout(() => {
-        if (providedZapCount === undefined && isMounted) {
-          loadZapCount();
-        }
-      }, 3000); // Wait 3 seconds for FeedPage to batch load
-    }
-    // Votes are now calculated as derived values, no need to load separately
-    
-    return () => {
-      isMounted = false;
-      if (zapCountTimeout) {
-        clearTimeout(zapCountTimeout);
-        zapCountTimeout = null;
-      }
-    };
+    // No zap count loading needed
   });
 
-  async function loadZapCount() {
-    try {
-      const config = nostrClient.getConfig();
-      const threshold = config.zapThreshold;
-      const zapRelays = relayManager.getZapReceiptReadRelays();
-      
-      const filters = [{
-        kinds: [KIND.ZAP_RECEIPT],
-        '#e': [post.id]
-      }];
-      
-      const receipts = await nostrClient.fetchEvents(
-        filters,
-        zapRelays,
-        { 
-          useCache: true, 
-          cacheResults: true,
-          onUpdate: (updated: NostrEvent[]) => {
-            // Recalculate zap count when new receipts arrive
-            const validReceipts = updated.filter((receipt) => {
-              const amountTag = receipt.tags.find((t) => t[0] === 'amount');
-              if (amountTag && amountTag[1]) {
-                const amount = parseInt(amountTag[1], 10);
-                return !isNaN(amount) && amount >= threshold;
-              }
-              return false;
-            });
-            
-            // Get all receipts for this post (including cached ones)
-            nostrClient.fetchEvents(
-              filters,
-              zapRelays,
-              { useCache: true, cacheResults: false }
-            ).then(allReceipts => {
-              const allValidReceipts = allReceipts.filter((receipt) => {
-                const amountTag = receipt.tags.find((t) => t[0] === 'amount');
-                if (amountTag && amountTag[1]) {
-                  const amount = parseInt(amountTag[1], 10);
-                  return !isNaN(amount) && amount >= threshold;
-                }
-                return false;
-              });
-              zapCount = allValidReceipts.length;
-            }).catch(error => {
-              console.error('Error recalculating zap count:', error);
-            });
-          }
-        }
-      );
-      
-      // Filter by threshold and count
-      const validReceipts = receipts.filter((receipt) => {
-        const amountTag = receipt.tags.find((t) => t[0] === 'amount');
-        if (amountTag && amountTag[1]) {
-          const amount = parseInt(amountTag[1], 10);
-          return !isNaN(amount) && amount >= threshold;
-        }
-        return false;
-      });
-      
-      zapCount = validReceipts.length;
-    } catch (error) {
-      console.error('Error loading zap count:', error);
-      zapCount = 0;
-    }
-  }
-
   function getRelativeTime(): string {
     const now = Math.floor(Date.now() / 1000);
     const diff = now - post.created_at;
@@ -288,32 +175,6 @@
     }
   }
 
-  $effect(() => {
-    if (contentElement) {
-      checkContentHeight();
-      // Use ResizeObserver to detect when content changes (e.g., images loading)
-      const observer = new ResizeObserver(() => {
-        checkContentHeight();
-      });
-      observer.observe(contentElement);
-      return () => observer.disconnect();
-    }
-  });
-
-  function checkContentHeight() {
-    if (contentElement) {
-      // Use requestAnimationFrame to ensure DOM is fully updated
-      requestAnimationFrame(() => {
-        if (contentElement) {
-          needsExpansion = contentElement.scrollHeight > 500;
-        }
-      });
-    }
-  }
-
-  function toggleExpanded() {
-    expanded = !expanded;
-  }
 
   function getTitle(): string {
     const titleTag = post.tags.find((t) => t[0] === 'title');
@@ -389,56 +250,7 @@
   class:cursor-pointer={!!onOpenEvent}
   {...(onOpenEvent ? { role: "button", tabindex: 0 } : {})}
 >
-  {#if previewMode}
-    <!-- Preview mode: show only title and first 150 chars -->
-    <a href="/event/{post.id}" class="card-link">
-      <div class="card-content">
-        <div class="flex justify-between items-start mb-2">
-          <h3 class="text-lg font-semibold">
-            {getTitle()}
-          </h3>
-          <div class="flex items-center gap-2">
-            <span class="text-sm text-fog-text-light dark:text-fog-dark-text-light">{getRelativeTime()}</span>
-            <div class="interactive-element">
-              <EventMenu event={post} showContentActions={true} />
-            </div>
-          </div>
-        </div>
-
-        <div class="mb-2 flex items-center gap-2 flex-wrap">
-          <div class="interactive-element">
-            <ProfileBadge pubkey={post.pubkey} />
-          </div>
-          {#if getClientName()}
-            <span class="text-xs text-fog-text-light dark:text-fog-dark-text-light">via {getClientName()}</span>
-          {/if}
-          {#if post.kind === KIND.DISCUSSION_THREAD}
-            {@const topics = getTopics()}
-            {#if topics.length === 0}
-              <span class="topic-badge text-xs px-2 py-0.5 rounded bg-fog-border dark:bg-fog-dark-border text-fog-text-light dark:text-fog-dark-text-light">General</span>
-            {:else}
-              {#each topics.slice(0, 3) as topic}
-                <span class="topic-badge text-xs px-2 py-0.5 rounded bg-fog-border dark:bg-fog-dark-border text-fog-text-light dark:text-fog-dark-text-light">{topic}</span>
-              {/each}
-            {/if}
-          {/if}
-        </div>
-
-        <p class="text-sm mb-2">{getPreviewContent()}</p>
-        
-        {#if post.kind === KIND.POLL}
-          {@const optionTags = post.tags.filter(t => t[0] === 'option')}
-          <div class="text-xs text-fog-text-light dark:text-fog-dark-text-light mb-2">
-            Poll: {optionTags.length} {optionTags.length === 1 ? 'option' : 'options'}
-          </div>
-        {/if}
-
-        <!-- Vote counts are shown in full mode, not in preview mode -->
-      </div>
-    </a>
-  {:else}
-    <!-- Full mode: show complete content -->
-  <div class="card-content" class:expanded bind:this={contentElement}>
+  <div class="card-content">
     {#if isReply()}
       <ReplyContext 
         parentEvent={parentEvent || undefined} 
@@ -459,13 +271,13 @@
       />
     {/if}
 
-    <!-- Display title prominently for kind 30040 (book index) and 30041 (chapter sections) -->
-    {#if post.kind === 30040 || post.kind === 30041 || post.kind === 1 || post.kind === 30817}
+    <!-- Display title prominently for kind 30040 (book index), 30041 (chapter sections), and kind 11 (discussion threads) -->
+    {#if post.kind === 30040 || post.kind === 30041 || post.kind === 1 || post.kind === 30817 || post.kind === KIND.DISCUSSION_THREAD}
       {@const title = getTitle()}
       {#if title && title !== 'Untitled'}
-        <h1 class="post-title text-2xl font-bold mb-4 text-fog-text dark:text-fog-dark-text">
+        <h2 class="post-title text-2xl font-bold mb-4 text-fog-text dark:text-fog-dark-text">
           {title}
-        </h1>
+        </h2>
       {/if}
     {/if}
 
@@ -494,7 +306,7 @@
     </div>
 
     <div class="post-content mb-2">
-        <MediaAttachments event={post} />
+      <MediaAttachments event={post} />
       {#if post.kind === KIND.POLL}
         {#if PollCardComponent}
           {@const PollCard = PollCardComponent}
@@ -515,30 +327,10 @@
       {/if}
     </div>
   </div>
-  
-  {#if needsExpansion}
-    <button
-      onclick={toggleExpanded}
-      class="show-more-button text-sm text-fog-accent dark:text-fog-dark-accent hover:underline mt-2"
-    >
-      {expanded ? 'Show less' : 'Show more'}
-    </button>
-  {/if}
-
-  <!-- Post actions (reactions, etc.) - always visible, outside collapsible content -->
+
+  <!-- Post actions: emoji button and menu -->
   <div class="post-actions flex flex-wrap items-center gap-2 sm:gap-4">
-    {#if zapCount > 0}
-      <span class="zap-count-display">
-        <span class="zap-emoji">⚡</span>
-        <span class="zap-count-number">{zapCount}</span>
-      </span>
-    {/if}
-    {#if post.kind === KIND.DISCUSSION_THREAD}
-      <!-- DiscussionVoteButtons includes both vote counts and buttons -->
-      <DiscussionVoteButtons event={post} preloadedReactions={reactions} />
-    {:else}
-      <FeedReactionButtons event={post} preloadedReactions={reactions} />
-    {/if}
+    <FeedReactionButtons event={post} />
     {#if onReply}
       <button
         onclick={() => onReply(post)}
@@ -553,7 +345,6 @@
     <span class="kind-number">{getKindInfo(post.kind).number}</span>
     <span class="kind-description">{getKindInfo(post.kind).description}</span>
   </div>
-  {/if}
 </article>
 
 <style>
@@ -574,6 +365,12 @@
     line-height: 1.6;
   }
 
+  /* Limit all images to 600px wide */
+  .post-content :global(img) {
+    max-width: 600px;
+    height: auto;
+  }
+
   .post-actions {
     padding-top: 0.5rem;
     padding-right: 6rem; /* Reserve space for kind badge */
@@ -673,32 +470,6 @@
     background: var(--fog-dark-highlight, #374151);
   }
 
-  .card-link {
-    display: block;
-    color: inherit;
-    text-decoration: none;
-    cursor: pointer;
-  }
-
-  .card-link:hover {
-    background: var(--fog-highlight, #f3f4f6);
-  }
-
-  :global(.dark) .card-link:hover {
-    background: var(--fog-dark-highlight, #475569);
-  }
-
-  .card-link {
-    pointer-events: auto;
-  }
-
-  .card-link > * {
-    pointer-events: none;
-  }
-
-  .card-link .interactive-element {
-    pointer-events: auto;
-  }
 
   .post-header {
     display: flex;
diff --git a/src/lib/services/nostr/nostr-client.ts b/src/lib/services/nostr/nostr-client.ts
index 6f229b1..a41f70b 100644
--- a/src/lib/services/nostr/nostr-client.ts
+++ b/src/lib/services/nostr/nostr-client.ts
@@ -1339,7 +1339,7 @@ class NostrClient {
           if (updatedEntry && !updatedEntry.pending) {
             if ((Date.now() - updatedEntry.cachedAt) < this.EMPTY_RESULT_CACHE_TTL) {
               const finalAge = Math.round((Date.now() - updatedEntry.cachedAt) / 1000);
-              console.log(`[nostr-client] Skipping fetch [${filterDesc}] from [${relayDesc}] - empty result cached ${finalAge}s ago (waited for pending)`);
+              console.debug(`[nostr-client] Skipping fetch [${filterDesc}] from [${relayDesc}] - empty result cached ${finalAge}s ago (waited for pending)`);
               return [];
             }
             break; // No longer pending, but result expired or had data
@@ -1351,7 +1351,8 @@ class NostrClient {
         // If still pending after waiting, proceed (might be a slow fetch)
       } else if (!emptyCacheEntry.pending && age < this.EMPTY_RESULT_CACHE_TTL) {
         const ageSeconds = Math.round(age / 1000);
-        console.log(`[nostr-client] Skipping fetch [${filterDesc}] from [${relayDesc}] - empty result cached ${ageSeconds}s ago`);
+        // Use debug level to reduce console noise - this is expected behavior
+        console.debug(`[nostr-client] Skipping fetch [${filterDesc}] from [${relayDesc}] - empty result cached ${ageSeconds}s ago`);
         return Promise.resolve([]);
       }
     }
@@ -1364,7 +1365,7 @@ class NostrClient {
       const recheck = this.emptyResultCache.get(emptyCacheKey);
       if (recheck && !recheck.pending && (Date.now() - recheck.cachedAt) < this.EMPTY_RESULT_CACHE_TTL) {
         const finalAge = Math.round((Date.now() - recheck.cachedAt) / 1000);
-        console.log(`[nostr-client] Skipping fetch [${filterDesc}] from [${relayDesc}] - empty result cached ${finalAge}s ago (waited for concurrent)`);
+        console.debug(`[nostr-client] Skipping fetch [${filterDesc}] from [${relayDesc}] - empty result cached ${finalAge}s ago (waited for concurrent)`);
         return [];
       }
     }
diff --git a/src/routes/cache/+page.svelte b/src/routes/cache/+page.svelte
index e574558..d90d01d 100644
--- a/src/routes/cache/+page.svelte
+++ b/src/routes/cache/+page.svelte
@@ -425,7 +425,7 @@
 
 <main class="container mx-auto px-4 py-8">
   <div class="cache-page">
-    <h1 class="font-mono">/Cache</h1>
+    <h1 class="text-2xl font-bold mb-6 text-fog-text dark:text-fog-dark-text font-mono">/Cache</h1>
 
     {#if loading && !stats}
       <div class="loading-state">
@@ -661,7 +661,9 @@
 
 <style>
   .cache-page {
-    max-width: 100%;
+    max-width: var(--content-width);
+    margin: 0 auto;
+    padding: 0 1rem;
   }
 
   .stats-section,
diff --git a/src/routes/discussions/+page.svelte b/src/routes/discussions/+page.svelte
index 4b89997..b6991e7 100644
--- a/src/routes/discussions/+page.svelte
+++ b/src/routes/discussions/+page.svelte
@@ -13,27 +13,39 @@
 <Header />
 
 <main class="container mx-auto px-4 py-8">
-  <div class="discussions-header mb-4">
-    <div>
-      <h1 class="text-2xl font-bold mb-4 text-fog-text dark:text-fog-dark-text font-mono">/Discussions</h1>
-      <p class="mb-4 text-fog-text dark:text-fog-dark-text">Decentralized discussion board on Nostr.</p>
+  <div class="discussions-content">
+    <div class="discussions-header mb-4">
+      <div>
+        <h1 class="text-2xl font-bold mb-6 text-fog-text dark:text-fog-dark-text font-mono">/Discussions</h1>
+        <p class="mb-4 text-fog-text dark:text-fog-dark-text">Decentralized discussion board on Nostr.</p>
+      </div>
+      <a href="/write?kind=11" class="write-button" title="Write a new thread">
+        <span class="emoji emoji-grayscale">✍️</span>
+      </a>
     </div>
-    <a href="/write?kind=11" class="write-button" title="Write a new thread">
-      <span class="emoji emoji-grayscale">✍️</span>
-    </a>
-  </div>
 
-  <div class="search-section mb-6">
-    <SearchBox />
-  </div>
+    <div class="search-section mb-6">
+      <SearchBox />
+    </div>
 
-  <DiscussionList />
+    <DiscussionList />
+  </div>
 </main>
 
 <style>
+  .discussions-content {
+    max-width: var(--content-width);
+    margin: 0 auto;
+  }
+
   .discussions-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
+    padding: 0 1rem;
+  }
+
+  .search-section {
+    padding: 0 1rem;
   }
 </style>
diff --git a/src/routes/feed/+page.svelte b/src/routes/feed/+page.svelte
index 0d382b6..3749ed4 100644
--- a/src/routes/feed/+page.svelte
+++ b/src/routes/feed/+page.svelte
@@ -13,25 +13,33 @@
 <Header />
 
 <main class="container mx-auto px-4 py-8">
-  <div class="feed-header mb-6">
-    <h1 class="text-2xl font-bold text-fog-text dark:text-fog-dark-text font-mono">/Feed</h1>
-    <div class="feed-controls">
-      <div class="search-section">
-        <SearchBox />
+  <div class="feed-content">
+    <div class="feed-header mb-6">
+      <h1 class="text-2xl font-bold text-fog-text dark:text-fog-dark-text font-mono">/Feed</h1>
+      <div class="feed-controls">
+        <div class="search-section">
+          <SearchBox />
+        </div>
+        <a href="/write?kind=1" class="write-button" title="Write a new post">
+          <span class="emoji emoji-grayscale">✍️</span>
+        </a>
       </div>
-      <a href="/write?kind=1" class="write-button" title="Write a new post">
-        <span class="emoji emoji-grayscale">✍️</span>
-      </a>
     </div>
+    <FeedPage />
   </div>
-  <FeedPage />
 </main>
 
 <style>
+  .feed-content {
+    max-width: var(--content-width);
+    margin: 0 auto;
+  }
+
   .feed-header {
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    padding: 0 1rem;
   }
 
   .feed-controls {
diff --git a/src/routes/feed/relay/[relay]/+page.svelte b/src/routes/feed/relay/[relay]/+page.svelte
index a8df91c..a6180b2 100644
--- a/src/routes/feed/relay/[relay]/+page.svelte
+++ b/src/routes/feed/relay/[relay]/+page.svelte
@@ -65,25 +65,35 @@
 <Header />
 
 <main class="container mx-auto px-4 py-8">
-  <div class="search-section mb-6">
-    <SearchBox />
-  </div>
-  
-  {#if error}
-    <div class="error-state">
-      <p class="text-fog-text dark:text-fog-dark-text">{error}</p>
-    </div>
-  {:else if decodedRelay}
-    <RelayInfo relayUrl={decodedRelay} />
-    <FeedPage singleRelay={decodedRelay} />
-  {:else}
-    <div class="loading-state">
-      <p class="text-fog-text dark:text-fog-dark-text">Loading relay feed...</p>
+  <div class="relay-feed-content">
+    <div class="search-section mb-6">
+      <SearchBox />
     </div>
-  {/if}
+    
+    {#if error}
+      <div class="error-state">
+        <p class="text-fog-text dark:text-fog-dark-text">{error}</p>
+      </div>
+    {:else if decodedRelay}
+      <RelayInfo relayUrl={decodedRelay} />
+      <FeedPage singleRelay={decodedRelay} />
+    {:else}
+      <div class="loading-state">
+        <p class="text-fog-text dark:text-fog-dark-text">Loading relay feed...</p>
+      </div>
+    {/if}
+  </div>
 </main>
 
 <style>
+  .relay-feed-content {
+    max-width: var(--content-width);
+    margin: 0 auto;
+  }
+
+  .search-section {
+    padding: 0 1rem;
+  }
 
   .error-state,
   .loading-state {
diff --git a/src/routes/find/+page.svelte b/src/routes/find/+page.svelte
index dfcb700..81500e3 100644
--- a/src/routes/find/+page.svelte
+++ b/src/routes/find/+page.svelte
@@ -151,8 +151,9 @@
 
 <style>
   .find-page {
-    max-width: 800px;
+    max-width: var(--content-width);
     margin: 0 auto;
+    padding: 0 1rem;
   }
 
   .find-sections {
@@ -173,6 +174,17 @@
     background: var(--fog-dark-post, #1f2937);
   }
 
+  .find-section h2 {
+    margin: 0 0 1.5rem 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--fog-text, #475569);
+  }
+
+  :global(.dark) .find-section h2 {
+    color: var(--fog-dark-text, #cbd5e1);
+  }
+
   .section-description {
     margin: 0 0 1.5rem 0;
     color: var(--fog-text-light, #6b7280);
@@ -194,7 +206,7 @@
     border: 1px solid var(--fog-border, #e5e7eb);
     border-radius: 0.25rem;
     background: var(--fog-post, #ffffff);
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     font-size: 0.875rem;
     font-family: monospace;
   }
@@ -202,7 +214,7 @@
   :global(.dark) .user-input {
     border-color: var(--fog-dark-border, #374151);
     background: var(--fog-dark-post, #1f2937);
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .user-input:disabled {
diff --git a/src/routes/relay/+page.svelte b/src/routes/relay/+page.svelte
index df10d8c..a27dfd4 100644
--- a/src/routes/relay/+page.svelte
+++ b/src/routes/relay/+page.svelte
@@ -6,6 +6,7 @@
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
   import { sessionManager } from '../../lib/services/auth/session-manager.js';
+  import { KIND } from '../../lib/types/kind-lookup.js';
 
   interface RelayInfo {
     url: string;
@@ -14,7 +15,9 @@
   }
 
   let relays = $state<RelayInfo[]>([]);
+  let favoriteRelays = $state<RelayInfo[]>([]);
   let loading = $state(true);
+  let customRelayUrl = $state('');
 
   function categorizeRelay(url: string): string[] {
     const categories: string[] = [];
@@ -78,9 +81,80 @@
     });
     
     relays = relayList;
+    
+    // Load favorite relays if user is logged in
+    await loadFavoriteRelays();
+    
     loading = false;
   }
 
+  async function loadFavoriteRelays() {
+    const currentPubkey = sessionManager.getCurrentPubkey();
+    if (!currentPubkey) {
+      favoriteRelays = [];
+      return;
+    }
+
+    try {
+      // Fetch kind 10012 (FAVORITE_RELAYS) event for current user
+      // Fetch multiple in case there are multiple replaceable events
+      const favoriteEvents = await nostrClient.fetchEvents(
+        [{ kinds: [KIND.FAVORITE_RELAYS], authors: [currentPubkey], limit: 10 }],
+        relayManager.getProfileReadRelays(),
+        { useCache: true, cacheResults: true, timeout: 5000 }
+      );
+
+      if (favoriteEvents.length === 0) {
+        favoriteRelays = [];
+        return;
+      }
+
+      // Get the latest event (replaceable event, so should be only one, but take latest just in case)
+      const latestEvent = favoriteEvents.sort((a, b) => b.created_at - a.created_at)[0];
+      
+      // Extract relay URLs from 'relay' tags (kind 10012 uses 'relay' tags)
+      const favoriteRelayUrls = new Set<string>();
+      for (const tag of latestEvent.tags) {
+        if (tag[0] === 'relay' && tag[1]) {
+          // Normalize URL: trim, remove trailing slash, ensure protocol
+          let url = tag[1].trim();
+          // Remove trailing slash
+          url = url.replace(/\/$/, '');
+          // If no protocol, assume wss://
+          if (!url.startsWith('ws://') && !url.startsWith('wss://')) {
+            url = `wss://${url}`;
+          }
+          favoriteRelayUrls.add(url);
+        }
+      }
+
+      // Get connection status - normalize URLs for comparison
+      const connectedRelays = nostrClient.getConnectedRelays();
+      const normalizeUrlForComparison = (url: string): string => {
+        return url.replace(/\/$/, '').toLowerCase();
+      };
+      const favoriteRelayList: RelayInfo[] = Array.from(favoriteRelayUrls).map(url => {
+        const normalizedUrl = normalizeUrlForComparison(url);
+        const isConnected = connectedRelays.some(connected => 
+          normalizeUrlForComparison(connected) === normalizedUrl
+        );
+        return {
+          url,
+          categories: ['Favorite'],
+          connected: isConnected
+        };
+      });
+
+      // Sort by URL
+      favoriteRelayList.sort((a, b) => a.url.localeCompare(b.url));
+      
+      favoriteRelays = favoriteRelayList;
+    } catch (err) {
+      console.error('Error loading favorite relays:', err);
+      favoriteRelays = [];
+    }
+  }
+
   function handleRelayClick(url: string) {
     // Extract hostname from relay URL (e.g., wss://thecitadel.nostr1.com -> thecitadel.nostr1.com)
     // The route expects just the domain without protocol or port
@@ -99,8 +173,37 @@
     goto(`/feed/relay/${relayPath}`);
   }
 
+  function handleCustomRelaySubmit() {
+    const url = customRelayUrl.trim();
+    if (!url) return;
+    
+    // Validate URL format
+    try {
+      // Try to parse as URL, add protocol if missing
+      let fullUrl = url;
+      if (!url.startsWith('ws://') && !url.startsWith('wss://')) {
+        fullUrl = `wss://${url}`;
+      }
+      new URL(fullUrl); // Validate URL format
+      
+      // Navigate to the relay
+      handleRelayClick(fullUrl);
+      customRelayUrl = ''; // Clear input after navigation
+    } catch {
+      alert('Please enter a valid relay URL (e.g., relay.example.com or wss://relay.example.com)');
+    }
+  }
+
   onMount(async () => {
     await nostrClient.initialize();
+    // Ensure session is restored before loading favorite relays
+    if (!sessionManager.isLoggedIn()) {
+      try {
+        await sessionManager.restoreSession();
+      } catch (error) {
+        console.error('Failed to restore session in relay page:', error);
+      }
+    }
     await loadRelays();
   });
 </script>
@@ -111,10 +214,69 @@
   <div class="relay-page">
     <h1 class="text-2xl font-bold mb-6 text-fog-text dark:text-fog-dark-text font-mono">/Relay</h1>
     
+    <!-- Custom Relay Input -->
+    <section class="relay-category custom-relay-section">
+      <h2 class="category-title">Custom Relay</h2>
+      <div class="custom-relay-input">
+        <input
+          type="text"
+          placeholder="Enter relay URL (e.g., relay.example.com or wss://relay.example.com)"
+          bind:value={customRelayUrl}
+          onkeydown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              handleCustomRelaySubmit();
+            }
+          }}
+          class="custom-relay-text-input"
+        />
+        <button
+          onclick={handleCustomRelaySubmit}
+          class="custom-relay-button"
+          disabled={!customRelayUrl.trim()}
+        >
+          Go
+        </button>
+      </div>
+    </section>
+
     {#if loading}
       <p class="text-fog-text dark:text-fog-dark-text">Loading relays...</p>
     {:else}
       <div class="relay-categories">
+        <!-- Favorite Relays Section -->
+        {#if favoriteRelays.length > 0}
+          <section class="relay-category">
+            <h2 class="category-title">Favorite</h2>
+            <div class="relay-list">
+              {#each favoriteRelays as relay}
+                <div 
+                  class="relay-item"
+                  onclick={() => handleRelayClick(relay.url)}
+                  role="button"
+                  tabindex="0"
+                  onkeydown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      handleRelayClick(relay.url);
+                    }
+                  }}
+                >
+                  <div class="relay-info">
+                    <span class="relay-url">{relay.url}</span>
+                    <div class="relay-meta">
+                      <span class="relay-status" class:connected={relay.connected} class:disconnected={!relay.connected}>
+                        {relay.connected ? '● Connected' : '○ Disconnected'}
+                      </span>
+                    </div>
+                  </div>
+                  <span class="relay-arrow">→</span>
+                </div>
+              {/each}
+            </div>
+          </section>
+        {/if}
+
         {#each ['Default', 'Profile', 'Thread Publish', 'GIF', 'Other'] as category}
           {@const categoryRelays = relays.filter(r => r.categories.includes(category))}
           {#if categoryRelays.length > 0}
@@ -137,14 +299,17 @@
                     <div class="relay-info">
                       <span class="relay-url">{relay.url}</span>
                       <div class="relay-meta">
-                        {#if relay.categories.length > 1}
-                          <span class="relay-categories-badge">
-                            {relay.categories.length} categories
-                          </span>
-                        {/if}
                         <span class="relay-status" class:connected={relay.connected} class:disconnected={!relay.connected}>
                           {relay.connected ? '● Connected' : '○ Disconnected'}
                         </span>
+                        {#if relay.categories.length > 1}
+                          {@const otherCategories = relay.categories.filter(c => c !== category)}
+                          {#if otherCategories.length > 0}
+                            {#each otherCategories as cat}
+                              <span class="relay-category-badge">{cat}</span>
+                            {/each}
+                          {/if}
+                        {/if}
                       </div>
                     </div>
                     <span class="relay-arrow">→</span>
@@ -162,8 +327,9 @@
 <style>
 
   .relay-page {
-    max-width: 1000px;
+    max-width: var(--content-width);
     margin: 0 auto;
+    padding: 0 1rem;
   }
 
   .relay-categories {
@@ -188,14 +354,14 @@
     margin: 0 0 1rem 0;
     font-size: 1.125rem;
     font-weight: 600;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     font-family: monospace;
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
 
   :global(.dark) .category-title {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .relay-list {
@@ -206,8 +372,8 @@
 
   .relay-item {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
+    gap: 0.75rem;
     padding: 0.75rem 1rem;
     border: 1px solid var(--fog-border, #e5e7eb);
     border-radius: 0.25rem;
@@ -217,6 +383,10 @@
     font-family: monospace;
   }
 
+  .relay-item > .relay-info {
+    flex: 1;
+  }
+
   :global(.dark) .relay-item {
     border-color: var(--fog-dark-border, #374151);
     background: var(--fog-dark-highlight, #374151);
@@ -243,6 +413,7 @@
     flex-direction: column;
     gap: 0.25rem;
     flex: 1;
+    min-width: 0;
   }
 
   .relay-meta {
@@ -252,61 +423,126 @@
     flex-wrap: wrap;
   }
 
-  .relay-categories-badge {
+  .relay-status {
+    font-size: 0.75rem;
+    opacity: 0.7;
+    flex-shrink: 0;
+  }
+
+  .relay-status.connected {
+    color: #10b981;
+  }
+
+  .relay-status.disconnected {
+    color: #ef4444;
+  }
+
+  .relay-item:hover .relay-status {
+    color: white;
+    opacity: 1;
+  }
+
+  .relay-category-badge {
     font-size: 0.7rem;
-    opacity: 0.6;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.125rem;
+    background: var(--fog-border, #e5e7eb);
     color: var(--fog-text-light, #6b7280);
     font-family: monospace;
   }
 
-  :global(.dark) .relay-categories-badge {
+  :global(.dark) .relay-category-badge {
+    background: var(--fog-dark-border, #475569);
     color: var(--fog-dark-text-light, #9ca3af);
   }
 
-  .relay-item:hover .relay-categories-badge {
+  .relay-item:hover .relay-category-badge {
+    background: rgba(255, 255, 255, 0.2);
     color: white;
-    opacity: 0.8;
   }
 
   .relay-url {
     font-size: 0.875rem;
-    color: var(--fog-text, #1f2937);
+    color: var(--fog-text, #475569);
     word-break: break-all;
   }
 
   :global(.dark) .relay-url {
-    color: var(--fog-dark-text, #f9fafb);
+    color: var(--fog-dark-text, #cbd5e1);
   }
 
   .relay-item:hover .relay-url {
     color: white;
   }
 
-  .relay-status {
-    font-size: 0.75rem;
-    opacity: 0.7;
+  .relay-arrow {
+    font-size: 1.25rem;
+    opacity: 0.5;
+    flex-shrink: 0;
+    margin-top: 0.125rem;
   }
 
-  .relay-status.connected {
-    color: #10b981;
+  .relay-item:hover .relay-arrow {
+    opacity: 1;
   }
 
-  .relay-status.disconnected {
-    color: #ef4444;
+  .custom-relay-section {
+    margin-bottom: 2rem;
   }
 
-  .relay-item:hover .relay-status {
-    color: white;
-    opacity: 1;
+  .custom-relay-input {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
   }
 
-  .relay-arrow {
-    font-size: 1.25rem;
+  .custom-relay-text-input {
+    flex: 1;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--fog-border, #e5e7eb);
+    border-radius: 0.25rem;
+    background: var(--fog-post, #ffffff);
+    color: var(--fog-text, #475569);
+    font-family: monospace;
+    font-size: 0.875rem;
+  }
+
+  :global(.dark) .custom-relay-text-input {
+    border-color: var(--fog-dark-border, #374151);
+    background: var(--fog-dark-post, #1f2937);
+    color: var(--fog-dark-text, #cbd5e1);
+  }
+
+  .custom-relay-text-input:focus {
+    outline: 2px solid var(--fog-accent, #64748b);
+    outline-offset: 2px;
+  }
+
+  .custom-relay-button {
+    padding: 0.75rem 1.5rem;
+    border: 1px solid var(--fog-accent, #64748b);
+    border-radius: 0.25rem;
+    background: var(--fog-accent, #64748b);
+    color: var(--fog-text, #f1f5f9);
+    font-family: monospace;
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .custom-relay-button:hover:not(:disabled) {
+    background: var(--fog-dark-accent, #94a3b8);
+    border-color: var(--fog-dark-accent, #94a3b8);
+  }
+
+  .custom-relay-button:disabled {
     opacity: 0.5;
-    margin-left: 1rem;
+    cursor: not-allowed;
   }
 
-  .relay-item:hover .relay-arrow {
-    opacity: 1;
+  .custom-relay-button:focus {
+    outline: 2px solid var(--fog-accent, #64748b);
+    outline-offset: 2px;
   }
 </style>
diff --git a/src/routes/replaceable/[d_tag]/+page.svelte b/src/routes/replaceable/[d_tag]/+page.svelte
index 24cd46f..2591eb9 100644
--- a/src/routes/replaceable/[d_tag]/+page.svelte
+++ b/src/routes/replaceable/[d_tag]/+page.svelte
@@ -94,14 +94,15 @@
 <Header />
 
 <main class="container mx-auto px-4 py-8">
-  <div class="replaceable-header mb-6">
-    <h1 class="text-2xl font-bold text-fog-text dark:text-fog-dark-text">
-      Replaceable Events: {dTag}
-    </h1>
-    <p class="text-fog-text-light dark:text-fog-dark-text-light mt-2">
-      {events.length} {events.length === 1 ? 'event' : 'events'} found
-    </p>
-  </div>
+  <div class="replaceable-content">
+    <div class="replaceable-header mb-6">
+      <h1 class="text-2xl font-bold text-fog-text dark:text-fog-dark-text">
+        Replaceable Events: {dTag}
+      </h1>
+      <p class="text-fog-text-light dark:text-fog-dark-text-light mt-2">
+        {events.length} {events.length === 1 ? 'event' : 'events'} found
+      </p>
+    </div>
 
   {#if loading}
     <div class="loading-state">
@@ -131,6 +132,7 @@
       {/each}
     </div>
   {/if}
+  </div>
 </main>
 
 {#if drawerOpen && drawerEvent}
@@ -138,8 +140,13 @@
 {/if}
 
 <style>
+  .replaceable-content {
+    max-width: var(--content-width);
+    margin: 0 auto;
+  }
 
   .replaceable-header {
+    padding: 0 1rem;
     border-bottom: 1px solid var(--fog-border, #e5e7eb);
     padding-bottom: 1rem;
   }
diff --git a/src/routes/repos/+page.svelte b/src/routes/repos/+page.svelte
index 1798a09..7025f19 100644
--- a/src/routes/repos/+page.svelte
+++ b/src/routes/repos/+page.svelte
@@ -142,21 +142,22 @@
 <Header />
 
 <main class="container mx-auto px-4 py-8">
-  <div class="repos-header mb-6">
-    <h1 class="text-2xl font-bold text-fog-text dark:text-fog-dark-text font-mono">/Repos</h1>
-    <p class="text-fog-text-light dark:text-fog-dark-text-light mt-2 mb-4">
-      Discover and explore repositories announced on Nostr
-    </p>
-    
-    <div class="search-container mb-4">
-      <input
-        type="text"
-        bind:value={searchQuery}
-        placeholder="Search repositories..."
-        class="search-input"
-      />
+  <div class="repos-content">
+    <div class="repos-header mb-6">
+      <h1 class="text-2xl font-bold text-fog-text dark:text-fog-dark-text font-mono">/Repos</h1>
+      <p class="text-fog-text-light dark:text-fog-dark-text-light mt-2 mb-4">
+        Discover and explore repositories announced on Nostr
+      </p>
+      
+      <div class="search-container mb-4">
+        <input
+          type="text"
+          bind:value={searchQuery}
+          placeholder="Search repositories..."
+          class="search-input"
+        />
+      </div>
     </div>
-  </div>
 
   {#if loading}
     <div class="loading-state">
@@ -199,11 +200,17 @@
       {/each}
     </div>
   {/if}
+  </div>
 </main>
 
 <style>
+  .repos-content {
+    max-width: var(--content-width);
+    margin: 0 auto;
+  }
 
   .repos-header {
+    padding: 0 1rem;
     border-bottom: 1px solid var(--fog-border, #e5e7eb);
     padding-bottom: 1rem;
   }
diff --git a/src/routes/rss/+page.svelte b/src/routes/rss/+page.svelte
index a6830d9..c60fcfe 100644
--- a/src/routes/rss/+page.svelte
+++ b/src/routes/rss/+page.svelte
@@ -63,7 +63,7 @@
 
 <main class="container mx-auto px-4 py-8">
   <div class="rss-page">
-    <h1 class="text-2xl font-bold mb-4 text-fog-text dark:text-fog-dark-text">RSS Feed</h1>
+    <h1 class="text-2xl font-bold mb-6 text-fog-text dark:text-fog-dark-text font-mono">/RSS</h1>
 
     {#if loading}
       <p class="text-fog-text dark:text-fog-dark-text">Loading...</p>
@@ -123,7 +123,9 @@
 
 <style>
   .rss-page {
-    max-width: 600px;
+    max-width: var(--content-width);
+    margin: 0 auto;
+    padding: 0 1rem;
   }
 
   .rss-setup {
diff --git a/src/routes/topics/+page.svelte b/src/routes/topics/+page.svelte
index 1b48b7f..7ec4f36 100644
--- a/src/routes/topics/+page.svelte
+++ b/src/routes/topics/+page.svelte
@@ -145,8 +145,9 @@
 <style>
 
   .topics-page {
-    max-width: 1000px;
+    max-width: var(--content-width);
     margin: 0 auto;
+    padding: 0 1rem;
   }
 
   .topics-list {
diff --git a/src/routes/topics/[name]/+page.svelte b/src/routes/topics/[name]/+page.svelte
index 5cefacb..b36e2a4 100644
--- a/src/routes/topics/[name]/+page.svelte
+++ b/src/routes/topics/[name]/+page.svelte
@@ -78,14 +78,15 @@
 <Header />
 
 <main class="container mx-auto px-4 py-8">
-  <div class="topic-header mb-6">
-    <h1 class="text-2xl font-bold text-fog-text dark:text-fog-dark-text">
-      Topic: #{topicName}
-    </h1>
-    <p class="text-fog-text-light dark:text-fog-dark-text-light mt-2">
-      {events.length} {events.length === 1 ? 'event' : 'events'} found
-    </p>
-  </div>
+  <div class="topic-content">
+    <div class="topic-header mb-6">
+      <h1 class="text-2xl font-bold text-fog-text dark:text-fog-dark-text">
+        Topic: #{topicName}
+      </h1>
+      <p class="text-fog-text-light dark:text-fog-dark-text-light mt-2">
+        {events.length} {events.length === 1 ? 'event' : 'events'} found
+      </p>
+    </div>
 
   {#if loading}
     <div class="loading-state">
@@ -104,11 +105,17 @@
       {/each}
     </div>
   {/if}
+  </div>
 </main>
 
 <style>
+  .topic-content {
+    max-width: var(--content-width);
+    margin: 0 auto;
+  }
 
   .topic-header {
+    padding: 0 1rem;
     border-bottom: 1px solid var(--fog-border, #e5e7eb);
     padding-bottom: 1rem;
   }
diff --git a/src/routes/write/+page.svelte b/src/routes/write/+page.svelte
index 83520e2..14d4223 100644
--- a/src/routes/write/+page.svelte
+++ b/src/routes/write/+page.svelte
@@ -87,8 +87,9 @@
 
 <style>
   .write-page {
-    max-width: 800px;
+    max-width: var(--content-width);
     margin: 0 auto;
+    padding: 0 1rem;
   }
 
   .form-container {