diff --git a/render_event.go b/render_event.go
index 0b6c71e..da3f5b0 100644
--- a/render_event.go
+++ b/render_event.go
@@ -270,7 +270,7 @@ func renderEvent(w http.ResponseWriter, r *http.Request) {
 		err = OtherTemplate.Render(w, &OtherPage{
 			HeadCommonPartial: HeadCommonPartial{IsProfile: false},
 			DetailsPartial: DetailsPartial{
-				HideDetails:     true,
+				HideDetails:     false,
 				CreatedAt:       data.createdAt,
 				KindDescription: data.kindDescription,
 				KindNIP:         data.kindNIP,
diff --git a/static/styles.css b/static/styles.css
index 3fb6b54..dabc648 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -37,57 +37,6 @@ body {
     color: #000000 !important;
   }
 }
-@media (max-width: 580px) {
-  body.lock {
-    overflow: hidden;
-  }
-}
-
-h1,
-h2,
-h3 {
-  font-weight: 300;
-  line-height: 1.1em;
-  margin-bottom: 0.5em;
-}
-
-.theme--default h2 {
-  color: #e32a6d;
-}
-.theme--dark h2 {
-  color: #e32a6d;
-}
-
-.theme--default a {
-  color: #373737;
-}
-.theme--dark a {
-  color: #fafafa;
-}
-
-p {
-  margin-top: 0.5em;
-  text-align: justify;
-}
-@media (max-width: 580px) {
-  p {
-    text-align: left;
-  }
-}
-
-iframe {
-  width: 100%;
-  height: 500px;
-}
-@media (max-width: 580px) {
-  iframe {
-    height: 250px;
-  }
-}
-
-.h {
-  display: none;
-}
 
 .background {
   position: fixed;
@@ -216,33 +165,6 @@ iframe {
     margin-top: 0rem;
   }
 }
-.columnA .info-wrapper {
-  display: none;
-  font-size: 1.6rem;
-  margin-bottom: 0.6em;
-  text-align: center;
-}
-.columnA .info-wrapper .display {
-  display: block;
-  font-size: 1.2rem;
-}
-.theme--default .columnA .info-wrapper .display {
-  color: #c9c9c9;
-}
-.theme--dark .columnA .info-wrapper .display {
-  color: #969696;
-}
-@media (max-width: 580px) {
-  .columnA .info-wrapper {
-    display: block;
-    text-align: left;
-    margin-bottom: 0;
-    flex-basis: 64%;
-    max-width: 64%;
-    overflow: hidden;
-    font-size: 1.6rem;
-  }
-}
 .columnA .last_update {
   font-size: 0.8em;
   margin-top: 0.5rem;
@@ -265,32 +187,6 @@ iframe {
   flex-shrink: 0;
   word-wrap: break-word;
 }
-.column_content .info-wrapper {
-  font-size: 1.6rem;
-}
-.column_content .info-wrapper h1 {
-  font-size: 1.6rem;
-}
-.theme--default .column_content .info-wrapper .display {
-  color: #c9c9c9;
-}
-.theme--dark .column_content .info-wrapper .display {
-  color: #969696;
-}
-.column_content .info-wrapper .npub {
-  font-size: 1rem;
-}
-.theme--default .column_content .info-wrapper .npub {
-  color: #c9c9c9;
-}
-.theme--dark .column_content .info-wrapper .npub {
-  color: #969696;
-}
-@media (max-width: 580px) {
-  .column_content .info-wrapper {
-    display: none;
-  }
-}
 .column_content .separator {
   height: 6px;
   width: 30%;
@@ -549,16 +445,6 @@ iframe {
 .theme--dark .column_content .field.last_notes a.note .header .is_reply {
   color: #969696;
 }
-.column_content .field.last_notes a.note .content {
-  flex-basis: 100%;
-  margin-top: 0.2rem;
-  max-height: 160px;
-  overflow: hidden;
-}
-.column_content .field.last_notes a.note .content.gradient {
-  -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
-  mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
-}
 .column_content .field.last_notes a:hover {
   padding-left: 1rem;
   margin-left: -1.5rem;
@@ -659,13 +545,6 @@ iframe {
   border-bottom: 1px solid rgba(250, 250, 250, 0.24);
   padding-bottom: 0.1rem;
 }
-.column_content .field.content, .column_content .field.about {
-  line-height: 1.4rem;
-}
-.column_content .field.content img, .column_content .field.about img {
-  max-width: 100%;
-  margin: 1rem 0;
-}
 .column_content .field .json {
   font-family: "Courier New", Courier, monospace;
   font-size: 0.9rem;
@@ -930,31 +809,6 @@ body.other .column_content .profile_intro a {
     margin-bottom: -0.5rem;
   }
 }
-body.note .column_content .profile_intro .info-wrapper,
-body.other .column_content .profile_intro .info-wrapper {
-  flex-grow: 1;
-}
-@media (max-width: 580px) {
-  body.note .column_content .profile_intro .info-wrapper,
-  body.other .column_content .profile_intro .info-wrapper {
-    display: block;
-  }
-}
-@media print {
-  body.note .column_content .profile_intro .info-wrapper,
-  body.other .column_content .profile_intro .info-wrapper {
-    font-size: 1rem;
-  }
-}
-@media (max-width: 580px) {
-  body.note .column_content .profile_intro .info-wrapper .name,
-  body.note .column_content .profile_intro .info-wrapper .npub,
-  body.other .column_content .profile_intro .info-wrapper .name,
-  body.other .column_content .profile_intro .info-wrapper .npub {
-    display: block-inline;
-    font-size: 0.9rem;
-  }
-}
 body.note .column_content .published_at,
 body.note .column_content .reply_of,
 body.other .column_content .published_at,
@@ -993,16 +847,6 @@ body.other .column_content .reply_of {
   margin-top: 0.2rem;
 }
 
-.footer {
-  margin-top: 2rem;
-  color: #9a9a9a;
-  font-size: 0.8rem;
-  text-align: center;
-}
-.footer a {
-  color: #9a9a9a;
-}
-
 @media print {
   @page {
     margin: 2cm 3cm;
diff --git a/static/styles.scss b/static/styles.scss
index ce7111f..329aad2 100644
--- a/static/styles.scss
+++ b/static/styles.scss
@@ -116,45 +116,6 @@ body {
     margin: 0;
     color: #000000 !important;
   }
-  &.lock {
-    @media (max-width: 580px) {
-      overflow: hidden;
-    }
-  }
-}
-h1,
-h2,
-h3 {
-  font-weight: 300;
-  line-height: 1.1em;
-  margin-bottom: 0.5em;
-}
-h2 {
-  @include themed() {
-    color: t($accent1);
-  }
-}
-a {
-  @include themed() {
-    color: t($base7);
-  }
-}
-p {
-  margin-top: 0.5em;
-  text-align: justify;
-  @media (max-width: 580px) {
-    text-align: left;
-  }
-}
-iframe {
-  width: 100%;
-  height: 500px;
-  @media (max-width: 580px) {
-    height: 250px;
-  }
-}
-.h {
-  display: none;
 }
 .background {
   position: fixed;
@@ -262,28 +223,6 @@ iframe {
     align-items: center;
     margin-top: 0rem;
   }
-  .info-wrapper {
-    display: none;
-    font-size: 1.6rem;
-    margin-bottom: 0.6em;
-    text-align: center;
-    .display {
-      display: block;
-      font-size: 1.2rem;
-      @include themed() {
-        color: t($base4);
-      }
-    }
-    @media (max-width: 580px) {
-      display: block;
-      text-align: left;
-      margin-bottom: 0;
-      flex-basis: 64%;
-      max-width: 64%;
-      overflow: hidden;
-      font-size: 1.6rem;
-    }
-  }
   .last_update {
     font-size: 0.8em;
     margin-top: 0.5rem;
@@ -302,26 +241,6 @@ iframe {
   flex-shrink: 0;
   word-wrap: break-word;
 
-  .info-wrapper {
-    font-size: 1.6rem;
-    h1 {
-      font-size: 1.6rem;
-    }
-    .display {
-      @include themed() {
-        color: t($base4);
-      }
-    }
-    .npub {
-      font-size: 1rem;
-      @include themed() {
-        color: t($base4);
-      }
-    }
-    @media (max-width: 580px) {
-      display: none;
-    }
-  }
   .separator {
     height: 6px;
     width: 30%;
@@ -517,24 +436,6 @@ iframe {
               }
             }
           }
-          .content {
-            flex-basis: 100%;
-            margin-top: 0.2rem;
-            max-height: 160px;
-            overflow: hidden;
-            &.gradient {
-              -webkit-mask-image: linear-gradient(
-                to bottom,
-                rgba(0, 0, 0, 1) 50%,
-                rgba(0, 0, 0, 0) 100%
-              );
-              mask-image: linear-gradient(
-                to bottom,
-                rgba(0, 0, 0, 1) 50%,
-                rgba(0, 0, 0, 0) 100%
-              );
-            }
-          }
         }
       }
       a:hover {
@@ -619,14 +520,6 @@ iframe {
         }
       }
     }
-    &.content,
-    &.about {
-      line-height: 1.4rem;
-      img {
-        max-width: 100%;
-        margin: 1rem 0;
-      }
-    }
     .json {
       font-family: 'Courier New', Courier, monospace;
       font-size: 0.9rem;
@@ -848,22 +741,6 @@ body.other {
           margin-bottom: -0.5rem;
         }
       }
-      .info-wrapper {
-        flex-grow: 1;
-        @media (max-width: 580px) {
-          display: block;
-        }
-        @media print {
-          font-size: 1rem;
-        }
-        .name,
-        .npub {
-          @media (max-width: 580px) {
-            display: block-inline;
-            font-size: 0.9rem;
-          }
-        }
-      }
     }
     .published_at,
     .reply_of {
@@ -886,16 +763,6 @@ body.other {
   }
 }
 
-.footer {
-  margin-top: 2rem;
-  color: $color-base5;
-  font-size: 0.8rem;
-  text-align: center;
-  a {
-    color: $color-base5;
-  }
-}
-
 @media print {
   @page {
     margin: 2cm 3cm;
diff --git a/templates/archive.html b/templates/archive.html
index 54893af..88e5883 100644
--- a/templates/archive.html
+++ b/templates/archive.html
@@ -17,22 +17,18 @@
         class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
       >
         <div class="column columnA">
-          <div class="info-wrapper">
-            {{.Title}}
-            <span class="display">&nbsp;</span>
-          </div>
+          <div class="text-2xl">{{.Title}}</div>
         </div>
 
         <div class="column column_content">
-          <div class="field info-wrapper">
-            <h1 class="name">{{.Title}}</h1>
+          <div class="field">
+            <h1 class="text-xl">{{.Title}}</h1>
           </div>
-          <div class="field separator long"></div>
 
           <div class="field last_notes">
             {{range $element := .Data }}
             <a href="/{{$.PathPrefix}}{{$element}}" class="note">
-              <div class="content">{{$element}}</div>
+              <div>{{$element}}</div>
             </a>
             {{end}}
           </div>
diff --git a/templates/clients.html b/templates/clients.html
index 0343a8e..7b5cc26 100644
--- a/templates/clients.html
+++ b/templates/clients.html
@@ -1,6 +1,6 @@
 <aside
   class="column column_clients"
-  _="on click toggle .up on .column_clients then toggle .lock on <body />"
+  _="on click toggle .up on .column_clients then toggle .overflow-hidden on <body />"
 >
   <div class="title">
     <span class="text">Open in</span>
diff --git a/templates/details.html b/templates/details.html
index 7222e28..ab54696 100644
--- a/templates/details.html
+++ b/templates/details.html
@@ -1,3 +1,4 @@
+{{ if .HideDetails }}
 <div
   class="field advanced-switch-wrapper"
   _="on load make a URLSearchParams from location.search then get it.get('details') then if it is 'yes' add @checked to #advanced-switch then add .visible to .advanced"
@@ -10,6 +11,7 @@
   <label for="advanced-switch">X</label>
   <label for="advanced-switch">Show more details</label>
 </div>
+{{ end }}
 
 <div class="field {{if .HideDetails}}advanced{{end}}">
   <div class="label">Published at</div>
diff --git a/templates/footer.html b/templates/footer.html
index f86c8ac..b550236 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,7 +1,10 @@
 <div class="background"></div>
 
-<footer class="footer mb-4">
-  powered by <a href="https://github.com/fiatjaf/njump">njump</a>
+<footer class="mb-4 mt-6 text-gray-400 text-sm text-center">
+  powered by
+  <a class="underline text-gray-400" href="https://github.com/fiatjaf/njump"
+    >njump</a
+  >
 </footer>
 
 <svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg">
diff --git a/templates/head_common.html b/templates/head_common.html
index d8fc048..204f26a 100644
--- a/templates/head_common.html
+++ b/templates/head_common.html
@@ -54,7 +54,18 @@
           strongpink: '#e32a6d',
           crimson: '#bc1150',
           garnet: '#42091e'
-        }
+        },
+        typography: ({theme}) => ({
+          /* for markdown html content */
+          DEFAULT: {
+            css: {
+              '--tw-prose-headings': theme('colors.strongpink'),
+              '--tw-prose-invert-headings': theme('colors.strongpink'),
+              '--tw-prose-links': theme('colors.gray[700]'),
+              '--tw-prose-invert-links': theme('colors.neutral[50]')
+            }
+          }
+        })
       }
     }
   }
@@ -64,11 +75,16 @@
     .imgclip {
       clip-path: url(#svg-shape);
     }
+    .gradient {
+      mask-image: linear-gradient(
+        to bottom,
+        rgb(0, 0, 0) 50%,
+        rgba(0, 0, 0, 0) 100%
+      );
+    }
   }
 </style>
 
 <script type="text/hyperscript">
   on load get [navigator.userAgent.includes('Safari'), navigator.userAgent.includes('Chrome')] then if it[0] is true and it[1] is false add .safari to <body /> end
-
-  on load repeat for div in .content if div's offsetHeight == 160 add .gradient to it end end
 </script>
diff --git a/templates/homepage.html b/templates/homepage.html
index 51a24a0..f7cffec 100644
--- a/templates/homepage.html
+++ b/templates/homepage.html
@@ -18,7 +18,7 @@
         class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
       >
         <div>
-          <h2 class="text-2xl">What is njump?</h2>
+          <h2 class="text-strongpink text-2xl">What is njump?</h2>
 
           <p class="leading-5 my-3">
             <i>njump</i> is a HTTP
@@ -66,7 +66,9 @@
             >.
           </p>
 
-          <h2 class="text-xl">Try it now, jump to some Nostr content</h2>
+          <h2 class="text-strongpink text-xl">
+            Try it now, jump to some Nostr content
+          </h2>
 
           <div
             class="my-3 mb-8 p-4 pb-3 sm:p-6 sm:pb-4 rounded-lg bg-zinc-100 dark:bg-neutral-800"
@@ -102,7 +104,7 @@
             content outside of Nostr:
           </p>
 
-          <h2 class="text-2xl">Clean, fast and solid</h2>
+          <h2 class="text-strongpink text-2xl">Clean, fast and solid</h2>
           <p class="leading-5 my-3">
             Pages by <i>njump</i> are extremely lightweight and fast to load
             because there isn't any client side javascript involved; they are
@@ -113,7 +115,7 @@
             onboard new users!
           </p>
 
-          <h2 class="text-2xl">Good preview</h2>
+          <h2 class="text-strongpink text-2xl">Good preview</h2>
           <p class="leading-5 my-3">
             <i>njump</i> renders everything on the server-side, so it is able to
             generate useful rich previews that work on Telegram, Discord,
@@ -127,7 +129,7 @@
             for printing or exporting to PDF.
           </p>
 
-          <h2 class="text-2xl">Cooperative (jump-out)</h2>
+          <h2 class="text-strongpink text-2xl">Cooperative (jump-out)</h2>
           <p class="leading-5 my-3">
             <i>njump</i> is not interested capturing users at all, on the
             contrary it invites them to "jump" to the Nostr resource by picking
@@ -144,7 +146,7 @@
             support coming!
           </p>
 
-          <h2 class="text-2xl">Search friendly (jump-in)</h2>
+          <h2 class="text-strongpink text-2xl">Search friendly (jump-in)</h2>
           <p class="leading-5 my-3">
             This is crucial: <i>njump</i> pages are static so search engines can
             index them, this means that <i>njump</i> can help others to discover
@@ -154,7 +156,7 @@
             you also help Nostr flourish.
           </p>
 
-          <h2 class="text-2xl">Share NIP-05 profiles</h2>
+          <h2 class="text-strongpink text-2xl">Share NIP-05 profiles</h2>
           <p class="leading-5 my-3">
             Now you can share your own profile with a pretty
             <a
@@ -177,7 +179,9 @@
             and the last notes.
           </p>
 
-          <h2 class="text-2xl">Share on Twitter and Telegram</h2>
+          <h2 class="text-strongpink text-2xl">
+            Share on Twitter and Telegram
+          </h2>
           <p class="leading-5 my-3">
             Now you can quickly and effortlessly share Nostr notes on Twitter
             and Telegram, and maybe on many other "social platforms": just drop
@@ -187,7 +191,7 @@
             in-app!
           </p>
 
-          <h2 class="text-2xl">Relays view</h2>
+          <h2 class="text-strongpink text-2xl">Relays view</h2>
           <p class="leading-5 my-3">
             You can have a view of the last content posted to a relay using
             <span class="rounded px-1 bg-lavender dark:bg-garnet"
@@ -206,7 +210,7 @@
             to join a relay.
           </p>
 
-          <h2 class="text-2xl">Inspector tool</h2>
+          <h2 class="text-strongpink text-2xl">Inspector tool</h2>
           <p class="leading-5 my-3">
             You know, we are all programmers, including our moms, so for every
             <i>njump</i> page you can toggle the "Show more details" switch and
diff --git a/templates/note.html b/templates/note.html
index 6b149f8..e366085 100644
--- a/templates/note.html
+++ b/templates/note.html
@@ -55,29 +55,34 @@
   <body class="note">
     {{template "top" .}}
 
-    <div
-      class="block sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0"
-    >
+    <div class="sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0">
       <div
-        class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
+        class="sm:flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
       >
         <div class="column column_content">
-          <header class="profile_intro">
-            <a href="/{{.Npub}}">
+          <header class="max-w-full mb-4">
+            <a class="flex items-center flex-wrap" href="/{{.Npub}}">
               <div
-                class="mr-2 sm:mr-4 basis-2/5 sm:basis-1/6 print:basis-1-12 max-w-full imgclip overflow-hidden"
+                class="mr-2 sm:mr-4 basis-1/6 print:basis-1-12 max-w-full imgclip overflow-hidden"
               >
                 <img class="block w-full h-auto" src="{{.Metadata.Picture}}" />
               </div>
-              <div class="info-wrapper">
-                <div class="name">
+              <div class="block sm:grow print:text-base">
+                <div class="text-sm sm:text-2xl">
                   {{.Metadata.Name}}
                   <!---->
                   {{if not (eq .Metadata.Name .Metadata.DisplayName)}}
-                  <span class="display">{{.Metadata.DisplayName}}</span>
+                  <span
+                    class="text-sm sm:text-xl text-neutral-300 dark:text-slate-400"
+                    >{{.Metadata.DisplayName}}</span
+                  >
                   {{end}}
                 </div>
-                <div class="npub">{{.NpubShort}}</div>
+                <div
+                  class="text-sm sm:text-base text-neutral-300 dark:text-slate-400"
+                >
+                  {{.NpubShort}}
+                </div>
               </div>
             </a>
           </header>
@@ -90,11 +95,13 @@
 
           <div class="field separator"></div>
 
-          <article class="field content">
+          <article
+            class="field | prose dark:prose-invert sm:prose-a:text-justify prose-headings:font-light;"
+          >
             {{ if (not (eq "" .Subject))}}
-            <h1>{{.Subject}}</h1>
+            <h1 class="text-2xl">{{.Subject}}</h1>
             {{ else }}
-            <h1 class="h">
+            <h1 class="hidden">
               {{.Metadata.Name}} on Nostr: {{.TitleizedContent}}
             </h1>
             {{ end }}
diff --git a/templates/other.html b/templates/other.html
index 6a374fc..19aec44 100644
--- a/templates/other.html
+++ b/templates/other.html
@@ -22,10 +22,8 @@
         class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
       >
         <div class="column column_content">
-          <header class="profile_intro">
-            <div class="info-wrapper">
-              <div class="kind_desc">{{.KindDescription}}</div>
-            </div>
+          <header class="">
+            <div class="text-2xl mb-4">{{.KindDescription}}</div>
           </header>
 
           <div class="field separator"></div>
diff --git a/templates/profile.html b/templates/profile.html
index be63e5b..3b43407 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -31,21 +31,21 @@
   <body class="profile">
     {{template "top" .}}
 
-    <div
-      class="block sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0"
-    >
+    <div class="sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0">
       <div
-        class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
+        class="w-full sm:flex sm:w-9/12 sm:px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
       >
         <header class="column columnA">
           <div
-            class="info-wrapper"
-            _="on scroll from window get #profile_name then measure its top, height then if top is less than height / -2 set my *display to 'block' otherwise set my *display to 'none' end"
+            class="text-left basis-2/3 overflow-hidden hidden flex items-center"
+            _="on load or scroll from window or resize from window get #profile_name then measure its top, height then if top is less than height / -2 or height is 0 add .flex then remove .hidden otherwise remove .flex then add .hidden"
           >
-            <div class="name">
-              {{.Metadata.Name}} {{if not (eq .Metadata.Name
-              .Metadata.DisplayName)}}
-              <span class="display">{{.Metadata.DisplayName}}</span>
+            <div>
+              <div class="text-2xl">{{.Metadata.Name}}</div>
+              {{if not (eq .Metadata.Name .Metadata.DisplayName)}}
+              <div class="text-xl text-neutral-300 dark:text-slate-400">
+                {{.Metadata.DisplayName}}
+              </div>
               {{end}}
             </div>
           </div>
@@ -57,11 +57,13 @@
         </header>
 
         <div class="column column_content">
-          <header class="field info-wrapper">
-            <h1 id="profile_name" class="name">
-              {{.Metadata.Name}} {{if not (eq .Metadata.Name
-              .Metadata.DisplayName)}}
-              <span class="display">{{.Metadata.DisplayName}}</span>
+          <header class="field hidden sm:flex sm:items-center">
+            <h1>
+              <div id="profile_name" class="text-2xl">{{.Metadata.Name}}</div>
+              {{if not (eq .Metadata.Name .Metadata.DisplayName)}}
+              <div class="text-xl text-neutral-300 dark:text-slate-400">
+                {{.Metadata.DisplayName}}
+              </div>
               {{end}}
             </h1>
           </header>
@@ -105,7 +107,7 @@
           {{if not (eq 0 (len .LastNotes))}}
           <div class="field separator"></div>
           <nav class="field last_notes">
-            <h2>Last Notes</h2>
+            <h2 class="text-strongpink text-2xl">Last Notes</h2>
             {{range $i, $ee := .LastNotes}}
             <a href="/{{$ee.Nevent}}" class="note">
               <div class="header">
@@ -114,7 +116,12 @@
                 <div class="is_reply">- reply</div>
                 {{end}}
               </div>
-              <div class="content">{{$ee.Preview}}</div>
+              <div
+                class="basis-full max-h-40 overflow-hidden mt-0.5"
+                _="on load if my scrollHeight > my offsetHeight add .gradient"
+              >
+                {{$ee.Preview}}
+              </div>
             </a>
             {{end}}
           </nav>
diff --git a/templates/relay.html b/templates/relay.html
index ea43efb..d129917 100644
--- a/templates/relay.html
+++ b/templates/relay.html
@@ -28,16 +28,16 @@
   <body class="profile">
     {{template "top" .}}
 
-    <div
-      class="block sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0"
-    >
+    <div class="sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0">
       <div
-        class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
+        class="sm:flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
       >
         <div class="column columnA">
-          <div class="info-wrapper">
+          <div
+            class="text-left basis-2/3 overflow-hidden hidden flex items-center text-2xl sm:break-all"
+            _="on load or scroll from window or resize from window get #relay_name then measure its top, height then if top is less than height / -2 or height is 0 add .flex then remove .hidden otherwise remove .flex then add .hidden"
+          >
             {{.Info.Name}}
-            <span class="display">&nbsp;</span>
           </div>
           <div
             class="max-w-full imgclip overflow-hidden basis-2/5 sm:basis-auto"
@@ -47,11 +47,13 @@
         </div>
 
         <div class="column column_content">
-          <div class="field info-wrapper">
-            <h1 class="name">{{.Info.Name}}</h1>
-          </div>
-          <div class="field separator long"></div>
+          <header class="field hidden sm:flex sm:items-center">
+            <h1>
+              <div id="relay_name" class="text-2xl">{{.Info.Name}}</div>
+            </h1>
+          </header>
 
+          <div class="field separator long"></div>
           <div class="field">wss://{{.Hostname}}</div>
           <div class="field about">{{.Info.Description}}</div>
           <div class="field separator long"></div>
@@ -73,7 +75,7 @@
           <div class="field separator"></div>
 
           <div class="field last_notes">
-            <h2>Last Notes</h2>
+            <h2 class="text-strongpink text-2xl">Last Notes</h2>
             {{range $i, $ee := .LastNotes}}
             <a href="/{{$ee.Nevent}}" class="note">
               <div class="header">
@@ -86,7 +88,12 @@
                   by <span href="/{{$ee.Npub}}">{{$ee.NpubShort}}</span>
                 </div>
               </div>
-              <div class="content">{{$ee.Preview}}</div>
+              <div
+                class="basis-full max-h-40 overflow-hidden mt-0.5"
+                _="on load if my scrollHeight >= my offsetHeight add .gradient"
+              >
+                {{$ee.Preview}}
+              </div>
             </a>
             {{end}}
           </div>