diff --git a/pages.go b/pages.go
index 24d54e1..4e37750 100644
--- a/pages.go
+++ b/pages.go
@@ -156,8 +156,8 @@ type ArchivePage struct {
 	Data          []string
 	ModifiedAt    string
 	PaginationUrl string
-	NextPage      string
-	PrevPage      string
+	NextPage      int
+	PrevPage      int
 }
 
 func (*ArchivePage) TemplateText() string {
diff --git a/render_archive.go b/render_archive.go
index daaec31..a552477 100644
--- a/render_archive.go
+++ b/render_archive.go
@@ -1,7 +1,6 @@
 package main
 
 import (
-	"fmt"
 	"math/rand"
 	"net/http"
 	"strconv"
@@ -93,8 +92,8 @@ func renderArchive(w http.ResponseWriter, r *http.Request) {
 			Data:          data,
 			ModifiedAt:    modifiedAt,
 			PaginationUrl: area,
-			NextPage:      fmt.Sprint(nextPage),
-			PrevPage:      fmt.Sprint(prevPage),
+			NextPage:      nextPage,
+			PrevPage:      prevPage,
 		})
 	} else {
 		w.Header().Add("content-type", "text/xml")
diff --git a/static/styles.css b/static/styles.css
index 0f2d9aa..7865bbe 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -187,16 +187,16 @@ body {
   flex-shrink: 0;
   word-wrap: break-word;
 }
-.column_content .field a.nostr {
+.column_content a.nostr {
   border-bottom: none;
 }
-.theme--default .column_content .field a.nostr {
+.theme--default .column_content a.nostr {
   background-color: #fdf0f5;
 }
-.theme--dark .column_content .field a.nostr {
+.theme--dark .column_content a.nostr {
   background-color: #42091e;
 }
-.column_content .field a.button {
+.column_content a.button {
   display: inline-block;
   max-width: 100%;
   padding: 2px 8px;
@@ -206,144 +206,139 @@ body {
   border: 1px solid #c9c9c9;
   border-radius: 8px;
 }
-.column_content .field a.button:hover {
+.column_content a.button:hover {
   color: #ffffff;
   background-color: #e32a6d;
   border: 1px solid #e32a6d;
 }
-.column_content .field .label {
+.column_content .label {
   font-size: 0.8rem;
 }
-.theme--default .column_content .field .label {
+.theme--default .column_content .label {
   color: #e32a6d;
 }
-.theme--dark .column_content .field .label {
+.theme--dark .column_content .label {
   color: #e32a6d;
 }
-.column_content .field.advanced {
-  display: none;
-}
-.column_content .field.advanced.visible {
-  display: block;
-}
-.column_content .field.boxed {
-  padding: 0 1rem 1rem;
-  margin-left: -1rem;
-  margin-right: -1rem;
-}
-.theme--default .column_content .field.boxed {
-  background: #f3f3f3;
-}
-.theme--dark .column_content .field.boxed {
-  background: #131313;
-}
-.column_content .field.boxed .label {
-  padding: 0.2rem 1rem;
-  margin: 0 -1rem;
-}
-.theme--default .column_content .field.boxed .label {
-  color: #373737;
-}
-.theme--dark .column_content .field.boxed .label {
-  color: #9a9a9a;
-}
-.theme--default .column_content .field.boxed .label {
-  background: #c9c9c9;
-}
-.theme--dark .column_content .field.boxed .label {
-  background: #191919;
-}
-.column_content .field pre {
-  overflow-x: scroll;
-  padding: 1rem;
-}
-.theme--default .column_content .field pre {
-  background: #f3f3f3;
-}
-.theme--dark .column_content .field pre {
-  background: #2d2d2d;
-}
-.column_content .field blockquote {
+.column_content blockquote {
   padding: 0.5rem 0 0.5rem 1rem;
   margin: 2rem 0;
   font-style: italic;
 }
-.theme--default .column_content .field blockquote {
+.theme--default .column_content blockquote {
   border-left: 0.5rem solid #f3f3f3;
 }
-.theme--dark .column_content .field blockquote {
+.theme--dark .column_content blockquote {
   border-left: 0.5rem solid #2d2d2d;
 }
-.column_content .field blockquote.mention {
+.column_content blockquote.mention {
   border-left: 0.5rem solid #e32a6d;
   padding: 0rem 0 0.5rem 1rem;
 }
-.theme--default .column_content .field blockquote.mention div {
+.theme--default .column_content blockquote.mention div {
   padding: 0.5rem 0.5rem 0.5rem 1rem;
   margin: 0 0 1rem -1rem;
   background-color: #f3f3f3;
 }
-.theme--dark .column_content .field blockquote.mention div {
+.theme--dark .column_content blockquote.mention div {
   padding: 0.5rem 0.5rem 0.5rem 1rem;
   margin: 0 0 1rem -1rem;
   background-color: #2d2d2d;
 }
-.column_content .field blockquote p {
+.column_content blockquote p {
   margin: 0 0 0.5rem 0;
 }
-.column_content .field cite {
+.column_content cite {
   font-size: 0.8em;
 }
-.column_content .field strong {
+.column_content strong {
   font-weight: 400;
 }
-.column_content .field ol,
-.column_content .field ul {
+.column_content ol,
+.column_content ul {
   margin: 0;
   padding: 0 0 0 1rem;
 }
-.column_content .field ol li,
-.column_content .field ul li {
+.column_content ol li,
+.column_content ul li {
   margin-bottom: 0.5rem;
 }
-.column_content .field sup {
+.column_content sup {
   font-size: 0.6rem;
   vertical-align: baseline;
   position: relative;
   top: -0.8em;
   margin: 0 0.3rem 0 0.1rem;
 }
-.column_content .field hr {
+.column_content hr {
   display: none;
 }
-.column_content .field .footnotes {
+.column_content .footnotes {
   padding-top: 1rem;
   margin-top: 2rem;
   font-size: 0.9rem;
   line-height: 1.2rem;
 }
-.theme--default .column_content .field .footnotes {
+.theme--default .column_content .footnotes {
   border-top: 6px solid #f3f3f3;
 }
-.theme--dark .column_content .field .footnotes {
+.theme--dark .column_content .footnotes {
   border-top: 6px solid #2d2d2d;
 }
-.column_content .field.advanced-switch-wrapper {
+.column_content .json {
+  font-family: "Courier New", Courier, monospace;
+  font-size: 0.9rem;
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin-top: 1rem;
+}
+.column_content .json .key {
+  display: inline-block;
+}
+.theme--default .column_content .json .key {
+  color: #e32a6d;
+}
+.theme--dark .column_content .json .key {
+  color: #e32a6d;
+}
+.theme--default .column_content .json .string {
+  color: #373737;
+}
+.theme--dark .column_content .json .string {
+  color: #fafafa;
+}
+.column_content .json .number {
+  color: darkorange;
+}
+.theme--default .column_content .json .boolean {
+  color: #373737;
+}
+.theme--dark .column_content .json .boolean {
+  color: #fafafa;
+}
+.theme--default .column_content .json .null {
+  color: #373737;
+}
+.theme--dark .column_content .json .null {
+  color: #fafafa;
+}
+
+.advanced-switch-wrapper {
   display: flex;
   align-items: center;
 }
-.column_content .field.advanced-switch-wrapper input[type=checkbox] {
+.advanced-switch-wrapper input[type=checkbox] {
   height: 0;
   width: 0;
   visibility: hidden;
   display: none;
 }
 @media print {
-  .column_content .field.advanced-switch-wrapper {
+  .advanced-switch-wrapper {
     display: none;
   }
 }
-.column_content .field.advanced-switch-wrapper label:first-of-type {
+.advanced-switch-wrapper label:first-of-type {
   cursor: pointer;
   text-indent: -9999px;
   width: 2.6rem;
@@ -353,19 +348,19 @@ body {
   position: relative;
   margin-right: 0.5rem;
 }
-.theme--default .column_content .field.advanced-switch-wrapper label:first-of-type {
+.theme--default .advanced-switch-wrapper label:first-of-type {
   background: #f3f3f3;
 }
-.theme--dark .column_content .field.advanced-switch-wrapper label:first-of-type {
+.theme--dark .advanced-switch-wrapper label:first-of-type {
   background: #2d2d2d;
 }
 @media (max-width: 580px) {
-  .column_content .field.advanced-switch-wrapper label:first-of-type {
+  .advanced-switch-wrapper label:first-of-type {
     width: 3rem;
     height: 1.4rem;
   }
 }
-.column_content .field.advanced-switch-wrapper label:first-of-type:after {
+.advanced-switch-wrapper label:first-of-type:after {
   content: "";
   position: absolute;
   top: 2px;
@@ -375,110 +370,49 @@ body {
   border-radius: 1rem;
   transition: 0.2s;
 }
-.theme--default .column_content .field.advanced-switch-wrapper label:first-of-type:after {
+.theme--default .advanced-switch-wrapper label:first-of-type:after {
   background: #373737;
 }
-.theme--dark .column_content .field.advanced-switch-wrapper label:first-of-type:after {
+.theme--dark .advanced-switch-wrapper label:first-of-type:after {
   background: #fafafa;
 }
 @media (max-width: 580px) {
-  .column_content .field.advanced-switch-wrapper label:first-of-type:after {
+  .advanced-switch-wrapper label:first-of-type:after {
     width: 1.2rem;
     height: 1.2rem;
   }
 }
-.theme--default .column_content .field.advanced-switch-wrapper input:checked + label {
+.theme--default .advanced-switch-wrapper input:checked + label {
   background: #e32a6d;
 }
-.theme--dark .column_content .field.advanced-switch-wrapper input:checked + label {
+.theme--dark .advanced-switch-wrapper input:checked + label {
   background: #e32a6d;
 }
-.column_content .field.advanced-switch-wrapper input:checked + label:first-of-type:after {
+.advanced-switch-wrapper input:checked + label:first-of-type:after {
   left: calc(100% - 2px);
   transform: translateX(-100%);
 }
-.theme--default .column_content .field.advanced-switch-wrapper input:checked + label:first-of-type:after {
+.theme--default .advanced-switch-wrapper input:checked + label:first-of-type:after {
   background: #ffffff;
 }
-.theme--dark .column_content .field.advanced-switch-wrapper input:checked + label:first-of-type:after {
+.theme--dark .advanced-switch-wrapper input:checked + label:first-of-type:after {
   background: #373737;
 }
-.column_content .field.advanced-switch-wrapper label:first-of-type:active:after {
+.advanced-switch-wrapper label:first-of-type:active:after {
   width: 2rem;
 }
-.column_content .field.advanced-switch-wrapper label:last-of-type {
+.advanced-switch-wrapper label:last-of-type {
   cursor: pointer;
   font-size: 0.8rem;
 }
-.theme--default .column_content .field.advanced-switch-wrapper label:last-of-type {
+.theme--default .advanced-switch-wrapper label:last-of-type {
   border-bottom: 1px solid rgba(55, 55, 55, 0.24);
   padding-bottom: 0.1rem;
 }
-.theme--dark .column_content .field.advanced-switch-wrapper label:last-of-type {
+.theme--dark .advanced-switch-wrapper label:last-of-type {
   border-bottom: 1px solid rgba(250, 250, 250, 0.24);
   padding-bottom: 0.1rem;
 }
-.column_content .field .json {
-  font-family: "Courier New", Courier, monospace;
-  font-size: 0.9rem;
-  white-space: pre-wrap;
-  word-break: break-all;
-  margin-top: 1rem;
-}
-.column_content .field .json .key {
-  display: inline-block;
-}
-.theme--default .column_content .field .json .key {
-  color: #e32a6d;
-}
-.theme--dark .column_content .field .json .key {
-  color: #e32a6d;
-}
-.theme--default .column_content .field .json .string {
-  color: #373737;
-}
-.theme--dark .column_content .field .json .string {
-  color: #fafafa;
-}
-.column_content .field .json .number {
-  color: darkorange;
-}
-.theme--default .column_content .field .json .boolean {
-  color: #373737;
-}
-.theme--dark .column_content .field .json .boolean {
-  color: #fafafa;
-}
-.theme--default .column_content .field .json .null {
-  color: #373737;
-}
-.theme--dark .column_content .field .json .null {
-  color: #fafafa;
-}
-.column_content .field.last_update {
-  display: none;
-}
-@media (max-width: 580px) {
-  .column_content .field.last_update {
-    display: block;
-    font-size: 0.8em;
-  }
-  .theme--default .column_content .field.last_update {
-    color: #c9c9c9;
-  }
-  .theme--dark .column_content .field.last_update {
-    color: #969696;
-  }
-}
-.column_content a.pagination {
-  color: #e32a6d;
-}
-.column_content a.pagination.next {
-  float: right;
-}
-.column_content a.pagination.prev {
-  float: left;
-}
 
 .column_clients {
   position: -webkit-sticky;
diff --git a/static/styles.scss b/static/styles.scss
index 706b8fc..fa312d2 100644
--- a/static/styles.scss
+++ b/static/styles.scss
@@ -241,243 +241,201 @@ body {
   flex-shrink: 0;
   word-wrap: break-word;
 
-  .field {
-    a.nostr {
+  a.nostr {
+    @include themed() {
+      background-color: t($hrefbg);
+    }
+    border-bottom: none;
+  }
+  a.button {
+    display: inline-block;
+    max-width: 100%;
+    padding: 2px 8px;
+    margin-top: 0.6em;
+    margin-right: 0.2em;
+    border-bottom: 0;
+    border: 1px solid $color-base4;
+    border-radius: 8px;
+    &:hover {
+      color: $color-base1;
+      background-color: $color-accent1;
+      border: 1px solid $color-accent1;
+    }
+  }
+  .label {
+    font-size: 0.8rem;
+    @include themed() {
+      color: t($accent1);
+    }
+  }
+  blockquote {
+    @include themed() {
+      border-left: 0.5rem solid t($over-bg);
+    }
+    padding: 0.5rem 0 0.5rem 1rem;
+    margin: 2rem 0;
+    font-style: italic;
+    &.mention {
+      border-left: 0.5rem solid $color-accent1;
+      padding: 0rem 0 0.5rem 1rem;
+      div {
+        @include themed() {
+          padding: 0.5rem 0.5rem 0.5rem 1rem;
+          margin: 0 0 1rem -1rem;
+          background-color: t($over-bg);
+        }
+      }
+    }
+    p {
+      margin: 0 0 0.5rem 0;
+    }
+  }
+  cite {
+    font-size: 0.8em;
+  }
+  strong {
+    font-weight: 400;
+  }
+  ol,
+  ul {
+    margin: 0;
+    padding: 0 0 0 1rem;
+    li {
+      margin-bottom: 0.5rem;
+    }
+  }
+  sup {
+    font-size: 0.6rem;
+    vertical-align: baseline;
+    position: relative;
+    top: -0.8em;
+    margin: 0 0.3rem 0 0.1rem;
+  }
+  hr {
+    display: none;
+  }
+  .footnotes {
+    padding-top: 1rem;
+    margin-top: 2rem;
+    @include themed() {
+      border-top: 6px solid t($over-bg);
+    }
+    font-size: 0.9rem;
+    line-height: 1.2rem;
+  }
+  &.advanced-switch-wrapper {
+    display: flex;
+    align-items: center;
+    input[type='checkbox'] {
+      height: 0;
+      width: 0;
+      visibility: hidden;
+      display: none;
+    }
+    @media print {
+      display: none;
+    }
+    label:first-of-type {
+      cursor: pointer;
+      text-indent: -9999px;
+      width: 2.6rem;
+      height: 1.2rem;
       @include themed() {
-        background-color: t($hrefbg);
+        background: t($over-bg);
       }
-      border-bottom: none;
-    }
-    a.button {
       display: inline-block;
-      max-width: 100%;
-      padding: 2px 8px;
-      margin-top: 0.6em;
-      margin-right: 0.2em;
-      border-bottom: 0;
-      border: 1px solid $color-base4;
-      border-radius: 8px;
-      &:hover {
-        color: $color-base1;
-        background-color: $color-accent1;
-        border: 1px solid $color-accent1;
+      border-radius: 100px;
+      position: relative;
+      margin-right: 0.5rem;
+      @media (max-width: 580px) {
+        width: 3rem;
+        height: 1.4rem;
       }
     }
-    .label {
+
+    label:first-of-type:after {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 1rem;
+      height: 1rem;
+      @include themed() {
+        background: t($base7);
+      }
+      border-radius: 1rem;
+      transition: 0.2s;
+      @media (max-width: 580px) {
+        width: 1.2rem;
+        height: 1.2rem;
+      }
+    }
+
+    input:checked + label {
+      @include themed() {
+        background: t($accent1);
+      }
+    }
+
+    input:checked + label:first-of-type:after {
+      left: calc(100% - 2px);
+      transform: translateX(-100%);
+      @include themed() {
+        background: t($base1);
+      }
+    }
+
+    label:first-of-type:active:after {
+      width: 2rem;
+    }
+    label:last-of-type {
+      cursor: pointer;
       font-size: 0.8rem;
+      @include themed() {
+        border-bottom: 1px solid rgba(t($base7), 0.24);
+        padding-bottom: 0.1rem;
+      }
+    }
+  }
+  .json {
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 0.9rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+    margin-top: 1rem;
+    .key {
+      display: inline-block;
       @include themed() {
         color: t($accent1);
       }
     }
-    &.advanced {
-      display: none;
-      &.visible {
-        display: block;
-      }
-    }
-    &.boxed {
-      padding: 0 1rem 1rem;
-      margin-left: -1rem;
-      margin-right: -1rem;
+    .string {
       @include themed() {
-        background: t($boxed-bg);
-      }
-      .label {
-        padding: 0.2rem 1rem;
-        margin: 0 -1rem;
-        @include themed() {
-          color: t($boxed-title);
-        }
-        @include themed() {
-          background: t($boxed-bg-title);
-        }
+        color: t($base7);
       }
     }
-    pre {
-      overflow-x: scroll;
+    .number {
+      color: darkorange;
+    }
+    .boolean {
       @include themed() {
-        background: t($over-bg);
+        color: t($base7);
       }
-      padding: 1rem;
     }
-    blockquote {
+    .null {
       @include themed() {
-        border-left: 0.5rem solid t($over-bg);
-      }
-      padding: 0.5rem 0 0.5rem 1rem;
-      margin: 2rem 0;
-      font-style: italic;
-      &.mention {
-        border-left: 0.5rem solid $color-accent1;
-        padding: 0rem 0 0.5rem 1rem;
-        div {
-          @include themed() {
-            padding: 0.5rem 0.5rem 0.5rem 1rem;
-            margin: 0 0 1rem -1rem;
-            background-color: t($over-bg);
-          }
-        }
-      }
-      p {
-        margin: 0 0 0.5rem 0;
-      }
-    }
-    cite {
-      font-size: 0.8em;
-    }
-    strong {
-      font-weight: 400;
-    }
-    ol,
-    ul {
-      margin: 0;
-      padding: 0 0 0 1rem;
-      li {
-        margin-bottom: 0.5rem;
-      }
-    }
-    sup {
-      font-size: 0.6rem;
-      vertical-align: baseline;
-      position: relative;
-      top: -0.8em;
-      margin: 0 0.3rem 0 0.1rem;
-    }
-    hr {
-      display: none;
-    }
-    .footnotes {
-      padding-top: 1rem;
-      margin-top: 2rem;
-      @include themed() {
-        border-top: 6px solid t($over-bg);
-      }
-      font-size: 0.9rem;
-      line-height: 1.2rem;
-    }
-    &.advanced-switch-wrapper {
-      display: flex;
-      align-items: center;
-      input[type='checkbox'] {
-        height: 0;
-        width: 0;
-        visibility: hidden;
-        display: none;
-      }
-      @media print {
-        display: none;
-      }
-      label:first-of-type {
-        cursor: pointer;
-        text-indent: -9999px;
-        width: 2.6rem;
-        height: 1.2rem;
-        @include themed() {
-          background: t($over-bg);
-        }
-        display: inline-block;
-        border-radius: 100px;
-        position: relative;
-        margin-right: 0.5rem;
-        @media (max-width: 580px) {
-          width: 3rem;
-          height: 1.4rem;
-        }
-      }
-
-      label:first-of-type:after {
-        content: '';
-        position: absolute;
-        top: 2px;
-        left: 2px;
-        width: 1rem;
-        height: 1rem;
-        @include themed() {
-          background: t($base7);
-        }
-        border-radius: 1rem;
-        transition: 0.2s;
-        @media (max-width: 580px) {
-          width: 1.2rem;
-          height: 1.2rem;
-        }
-      }
-
-      input:checked + label {
-        @include themed() {
-          background: t($accent1);
-        }
-      }
-
-      input:checked + label:first-of-type:after {
-        left: calc(100% - 2px);
-        transform: translateX(-100%);
-        @include themed() {
-          background: t($base1);
-        }
-      }
-
-      label:first-of-type:active:after {
-        width: 2rem;
-      }
-      label:last-of-type {
-        cursor: pointer;
-        font-size: 0.8rem;
-        @include themed() {
-          border-bottom: 1px solid rgba(t($base7), 0.24);
-          padding-bottom: 0.1rem;
-        }
-      }
-    }
-    .json {
-      font-family: 'Courier New', Courier, monospace;
-      font-size: 0.9rem;
-      white-space: pre-wrap;
-      word-break: break-all;
-      margin-top: 1rem;
-      .key {
-        display: inline-block;
-        @include themed() {
-          color: t($accent1);
-        }
-      }
-      .string {
-        @include themed() {
-          color: t($base7);
-        }
-      }
-      .number {
-        color: darkorange;
-      }
-      .boolean {
-        @include themed() {
-          color: t($base7);
-        }
-      }
-      .null {
-        @include themed() {
-          color: t($base7);
-        }
-      }
-    }
-    &.last_update {
-      display: none;
-      @media (max-width: 580px) {
-        display: block;
-        font-size: 0.8em;
-        @include themed() {
-          color: t($base4);
-        }
+        color: t($base7);
       }
     }
   }
-  a.pagination {
-    color: $color-accent1;
-    &.next {
-      float: right;
-    }
-    &.prev {
-      float: left;
+  &.last_update {
+    display: none;
+    @media (max-width: 580px) {
+      display: block;
+      font-size: 0.8em;
+      @include themed() {
+        color: t($base4);
+      }
     }
   }
 }
diff --git a/templates/archive.html b/templates/archive.html
index ebd8971..b145e0f 100644
--- a/templates/archive.html
+++ b/templates/archive.html
@@ -21,11 +21,11 @@
         </div>
 
         <div class="column column_content">
-          <div class="field">
+          <div class="leading-5 mb-6">
             <h1 class="text-xl">{{.Title}}</h1>
           </div>
 
-          <div class="field">
+          <div class="leading-5 mb-6">
             {{range $element := .Data }}
             <a href="/{{$.PathPrefix}}{{$element}}">
               <div>{{$element}}</div>
@@ -33,12 +33,13 @@
             {{end}}
           </div>
 
-          {{if not (eq .PrevPage "0")}}
-          <a href="/{{.PaginationUrl}}/{{.PrevPage}}" class="pagination prev"
+          <div class="flex justify-between">
+          {{if not (eq .PrevPage 0)}}
+          <a href="/{{.PaginationUrl}}/{{.PrevPage}}"
             ><< Prev page</a
           >
-          {{end}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{if not (eq .NextPage "0")}}
-          <a href="/{{.PaginationUrl}}/{{.NextPage}}" class="pagination next"
+          {{end}} {{if not (eq .NextPage 0)}}
+          <a href="/{{.PaginationUrl}}/{{.NextPage}}"
             >Next page >></a
           >
           {{end}}
diff --git a/templates/details.html b/templates/details.html
index ab54696..06aafe0 100644
--- a/templates/details.html
+++ b/templates/details.html
@@ -1,42 +1,50 @@
 {{ 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"
+  class="leading-5 mb-6 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 remove .hidden from #hidden-fields"
 >
   <input
     type="checkbox"
     id="advanced-switch"
-    _="on change toggle .visible on .advanced"
+    _="on change toggle .hidden on #hidden-fields"
   />
   <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>
-  {{.CreatedAt}}
-</div>
+<div id="hidden-fields" class="{{if .HideDetails}}hidden{{end}}">
+  <div class="leading-5 mb-6">
+    <div class="label">Published at</div>
+    {{.CreatedAt}}
+  </div>
 
-<div class="field {{if .HideDetails}}advanced{{end}}">
-  <div class="label">Kind type</div>
-  {{.Kind}} {{ if not (eq .KindNIP "")}} -
-  <a href="https://github.com/nostr-protocol/nips/blob/master/{{.KindNIP}}.md"
-    >{{.KindDescription}}</a
-  >
+  <div class="leading-5 mb-6">
+    <div class="label">Kind type</div>
+    {{.Kind}} {{ if not (eq .KindNIP "")}} -
+    <a href="https://github.com/nostr-protocol/nips/blob/master/{{.KindNIP}}.md"
+      >{{.KindDescription}}</a
+    >
+    {{ end }}
+  </div>
+
+  {{ if not (eq "" .Nevent) }}
+  <div class="leading-5 mb-6">
+    <div class="label">Address Code</div>
+    <div>{{.Nevent}}</div>
+  </div>
   {{ end }}
-</div>
 
-{{ if not (eq "" .Nevent) }}
-<div class="field {{if .HideDetails}}advanced{{end}}">
-  <div class="label">Address Code</div>
-  <div>{{.Nevent}}</div>
-</div>
-{{ end }}
-
-<div class="field {{if .HideDetails}}advanced{{end}} boxed">
-  <div class="label">Event JSON</div>
-  <div class="json" _="on load call syntaxHighlight(me)">{{- .EventJSON}}</div>
+  <div class="leading-5 mb-6 px-4 pb-4 -mx-4 bg-gray-100 dark:bg-gray-700">
+    <div
+      class="px-4 py-1 -mx-4 text-gray-100 dark:text-gray-400 bg-gray-300 dark:bg-gray-800"
+    >
+      Event JSON
+    </div>
+    <div class="json" _="on load call syntaxHighlight(me)">
+      {{- .EventJSON}}
+    </div>
+  </div>
 </div>
 
 <script>
diff --git a/templates/note.html b/templates/note.html
index 5b643db..287dd65 100644
--- a/templates/note.html
+++ b/templates/note.html
@@ -98,7 +98,7 @@
           ></div>
 
           <article
-            class="field | prose dark:prose-invert sm:prose-a:text-justify prose-headings:font-light;"
+            class="leading-5 mb-6 prose dark:prose-invert sm:prose-a:text-justify prose-headings:font-light"
           >
             {{ if (not (eq "" .Subject))}}
             <h1 class="text-2xl">{{.Subject}}</h1>
@@ -115,13 +115,13 @@
             class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/3"
           ></div>
 
-          <div class="field">
+          <div class="leading-5 mb-6">
             <div class="label">Author Public key</div>
             {{.Npub}}
           </div>
 
           {{ if not (eq 0 (len .SeenOn)) }}
-          <div class="field">
+          <div class="leading-5 mb-6">
             <div class="label">Seen on</div>
             {{ range .SeenOn }}<a href="/r/{{.}}">{{.}}</a>
             {{ end }}
diff --git a/templates/other.html b/templates/other.html
index c279a4f..4433585 100644
--- a/templates/other.html
+++ b/templates/other.html
@@ -30,7 +30,7 @@
             class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/3"
           ></div>
 
-          <div class="field">
+          <div class="leading-5 mb-6">
             <div class="label">Author Public key</div>
             <a href="/{{.Npub}}">{{.Npub}}</a>
           </div>
diff --git a/templates/profile.html b/templates/profile.html
index 03116e8..08dd85a 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -57,7 +57,7 @@
         </header>
 
         <div class="column column_content">
-          <header class="field hidden sm:flex sm:items-center">
+          <header class="leading-5 mb-6 hidden sm:flex sm:items-center">
             <h1>
               <div id="profile_name" class="text-2xl">{{.Metadata.Name}}</div>
               {{if not (eq .Metadata.Name .Metadata.DisplayName)}}
@@ -70,28 +70,36 @@
           <div
             class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/2"
           ></div>
-          <div class="field">
-            <a href="{{.NormalizedAuthorWebsiteURL}}">{{.Metadata.Website}}</a>
+          <div class="leading-5 mb-6">
+            <a
+              class="border-b-2 pb-0.5 border-b-gray-300 hover:text-strongpink"
+              href="{{.NormalizedAuthorWebsiteURL}}"
+              >{{.Metadata.Website}}</a
+            >
+          </div>
+          <div
+            class="leading-5 mb-6 prose dark:prose-invert sm:prose-a:text-justify prose-headings:font-light"
+          >
+            {{.RenderedAuthorAboutText}}
           </div>
-          <div class="field about">{{.RenderedAuthorAboutText}}</div>
           <div
             class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/3"
           ></div>
-          <div class="field">
+          <div class="leading-5 mb-6">
             <div class="label">Public key</div>
             {{.Npub}}
           </div>
-          <div class="field">
+          <div class="leading-5 mb-6">
             <div class="label">NIP-05</div>
             {{.Metadata.NIP05}}
           </div>
-          <div class="field">
+          <div class="leading-5 mb-6">
             <div class="label">LN Address</div>
             {{.Metadata.LUD16}}
           </div>
 
           {{ if not (eq 0 (len .AuthorRelays)) }}
-          <div class="field">
+          <div class="leading-5 mb-6">
             <div class="label">Posting on these relays</div>
             {{range $index, $element := .AuthorRelays}}
             <a href="/r/{{$element}}" class="button">{{$element}}</a>
@@ -103,16 +111,13 @@
 
           {{template "details" .DetailsPartial}}
 
-          <div class="field last_update">
-            Last update:<br />
-            {{.CreatedAt}}
-          </div>
+          <!---->
 
           {{if not (eq 0 (len .LastNotes))}}
           <div
             class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/3"
           ></div>
-          <nav class="field">
+          <nav class="leading-5 mb-6">
             <h2 class="text-strongpink text-2xl">Last Notes</h2>
             {{range $i, $ee := .LastNotes}}
             <a
diff --git a/templates/relay.html b/templates/relay.html
index dd501a1..c46e108 100644
--- a/templates/relay.html
+++ b/templates/relay.html
@@ -47,7 +47,7 @@
         </div>
 
         <div class="column column_content">
-          <header class="field hidden sm:flex sm:items-center">
+          <header class="leading-5 mb-6 hidden sm:flex sm:items-center">
             <h1>
               <div id="relay_name" class="text-2xl">{{.Info.Name}}</div>
             </h1>
@@ -56,21 +56,34 @@
           <div
             class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/2"
           ></div>
-          <div class="field">wss://{{.Hostname}}</div>
-          <div class="field about">{{.Info.Description}}</div>
+          <div class="leading-5 mb-6">
+            <a
+              class="border-b-2 pb-0.5 border-b-gray-300 hover:text-strongpink"
+              href="https://{{.Hostname}}"
+              target="_blank"
+              _="on mouseenter set my innerText to my.innerText.replace('wss://', 'https://')
+                 on mouseleave set my innerText to my.innerText.replace('https://', 'wss://')"
+              >wss://{{.Hostname}}</a
+            >
+          </div>
+          <div
+            class="leading-5 mb-6 prose dark:prose-invert sm:prose-a:text-justify prose-headings:font-light"
+          >
+            {{.Info.Description}}
+          </div>
           <div
             class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/2"
           ></div>
 
           {{ if not (eq "" .Info.PubKey) }}
-          <div class="field">
+          <div class="leading-5 mb-6">
             <div class="label">Public Key</div>
             {{.Info.PubKey}}
           </div>
           {{ end }}
           <!---->
           {{ if not (eq "" .Info.Contact) }}
-          <div class="field">
+          <div class="leading-5 mb-6">
             <div class="label">Contact</div>
             <a href="{{.Info.Contact}}">{{.Info.Contact}}</a>
           </div>
@@ -80,7 +93,7 @@
             class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/3"
           ></div>
 
-          <div class="field">
+          <div class="leading-5 mb-6">
             <h2 class="text-strongpink text-2xl">Last Notes</h2>
             {{range $i, $ee := .LastNotes}}
             <a