diff --git a/.air.toml b/.air.toml
index 915a6e4..62ef533 100644
--- a/.air.toml
+++ b/.air.toml
@@ -5,7 +5,7 @@ tmp_dir = "tmp"
 [build]
   args_bin = []
   bin = "./tmp/main"
-  cmd = "just refresh_build"
+  cmd = "go build -tags=nocache -o ./tmp/main ."
   delay = 0
   exclude_dir = ["tmp", "vendor", "testdata", "node_modules"]
   exclude_file = []
diff --git a/justfile b/justfile
index 16175d1..ae6823d 100644
--- a/justfile
+++ b/justfile
@@ -7,7 +7,11 @@ deploy: build
     ssh turgot 'mv njump/njump-new njump/njump'
     ssh root@turgot 'systemctl start njump'
 
-refresh_build:
-    sass static/styles.scss static/styles.css
-    prettier -w static/*.css static/*.scss templates/*.html
+refresh_build: scss prettier
     go build -tags=nocache -o ./tmp/main .
+
+scss:
+    sass static/styles.scss static/styles.css
+
+prettier:
+    prettier -w static/*.css static/*.scss templates/*.html
diff --git a/static/styles.css b/static/styles.css
index 7069dc9..9829302 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,5 +1,5 @@
+
 html {
-  font-family: Helvetica, sans-serif;
   font-size: 19px;
   font-weight: 300;
 }
@@ -99,7 +99,7 @@ iframe {
   z-index: -1;
 }
 .background::after {
-  content: '';
+  content: "";
   position: absolute;
   width: 140%;
   height: 100%;
@@ -214,156 +214,7 @@ iframe {
   height: auto;
 }
 
-.container_wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-@media (max-width: 580px) {
-  .container_wrapper {
-    display: block;
-    padding: 0 1rem;
-    margin: 0 auto;
-  }
-}
-
-.nostr_link {
-  flex-basis: 15%;
-  text-align: right;
-  text-decoration: none;
-}
-@media print {
-  .nostr_link {
-    display: block;
-    text-align: right;
-  }
-}
-
-.container {
-  display: flex;
-  width: 70%;
-  justify-content: space-between;
-  gap: 4.8vw;
-  overflow: visible;
-}
-@media (max-width: 580px) {
-  .container {
-    display: block;
-    width: 100%;
-  }
-}
-@media print {
-  .container {
-    width: 100%;
-  }
-}
-.container .try {
-  padding: 1.6rem 1.6rem 1rem 1.6rem;
-  margin-bottom: 2rem;
-  border-radius: 8px;
-  font-size: 0.8rem;
-}
-.theme--default .container .try {
-  background-color: #f3f3f3;
-}
-.theme--dark .container .try {
-  background-color: #2d2d2d;
-}
-@media (max-width: 580px) {
-  .container .try {
-    padding: 1rem 1rem 0.8rem 1rem;
-  }
-}
-.container .try .tryForm {
-  display: flex;
-  align-items: center;
-}
-@media (max-width: 580px) {
-  .container .try .tryForm {
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-}
-.container .try .tryForm input,
-.container .try .tryForm button {
-  flex-basis: 90%;
-  width: 100%;
-  padding: 0.5rem;
-  font-size: 1.2rem;
-  border-radius: 8px;
-}
-@media (max-width: 580px) {
-  .container .try .tryForm input,
-  .container .try .tryForm button {
-    flex-basis: 100%;
-  }
-}
-.container .try .tryForm div {
-  font-size: 1.4rem;
-}
-@media (max-width: 580px) {
-  .container .try .tryForm div {
-    margin-bottom: 0.4rem;
-  }
-}
-.container .try .tryForm input {
-  margin-left: 0.3rem;
-}
-.theme--default .container .try .tryForm input {
-  color: #373737;
-  background-color: #ffffff;
-  border: none;
-}
-.theme--dark .container .try .tryForm input {
-  color: #fafafa;
-  background-color: #1e1e1e;
-  border: none;
-}
-@media (max-width: 580px) {
-  .container .try .tryForm input {
-    margin-left: 0;
-    border-radius: 8px 8px 0px 0px;
-  }
-}
-.container .try .tryForm input:focus {
-  outline: none; /* Remove the default outline */
-}
-.theme--default .container .try .tryForm ::placeholder {
-  color: #c9c9c9;
-}
-.theme--dark .container .try .tryForm ::placeholder {
-  color: #969696;
-}
-.container .try .tryForm button {
-  flex-basis: 10%;
-  color: #ffffff;
-  border: none;
-  margin-left: -16px;
-}
-.theme--default .container .try .tryForm button {
-  background-color: #e32a6d;
-}
-.theme--dark .container .try .tryForm button {
-  background-color: #e32a6d;
-}
-@media (max-width: 580px) {
-  .container .try .tryForm button {
-    flex-basis: 100%;
-    margin-left: 0px;
-    border-radius: 0px 0px 8px 8px;
-  }
-}
-.container .try #pickRandomEntityLink {
-  display: block;
-  margin-top: 0.2rem;
-}
-@media (max-width: 580px) {
-  .container .try #pickRandomEntityLink {
-    margin-top: 0.8rem;
-    text-align: center;
-  }
-}
-.container .columnA {
+.columnA {
   position: -webkit-sticky;
   position: sticky;
   top: 2rem;
@@ -374,7 +225,7 @@ iframe {
   margin-top: 2rem;
 }
 @media (max-width: 580px) {
-  .container .columnA {
+  .columnA {
     display: flex;
     position: relative;
     max-width: none;
@@ -383,24 +234,24 @@ iframe {
     margin-top: 0rem;
   }
 }
-.container .columnA .info-wrapper {
+.columnA .info-wrapper {
   display: none;
   font-size: 1.6rem;
   margin-bottom: 0.6em;
   text-align: center;
 }
-.container .columnA .info-wrapper .display {
+.columnA .info-wrapper .display {
   display: block;
   font-size: 1.2rem;
 }
-.theme--default .container .columnA .info-wrapper .display {
+.theme--default .columnA .info-wrapper .display {
   color: #c9c9c9;
 }
-.theme--dark .container .columnA .info-wrapper .display {
+.theme--dark .columnA .info-wrapper .display {
   color: #969696;
 }
 @media (max-width: 580px) {
-  .container .columnA .info-wrapper {
+  .columnA .info-wrapper {
     display: block;
     text-align: left;
     margin-bottom: 0;
@@ -410,105 +261,106 @@ iframe {
     font-size: 1.6rem;
   }
 }
-.container .columnA .last_update {
+.columnA .last_update {
   font-size: 0.8em;
   margin-top: 0.5rem;
   text-align: center;
 }
-.theme--default .container .columnA .last_update {
+.theme--default .columnA .last_update {
   color: #c9c9c9;
 }
-.theme--dark .container .columnA .last_update {
+.theme--dark .columnA .last_update {
   color: #969696;
 }
 @media (max-width: 580px) {
-  .container .columnA .last_update {
+  .columnA .last_update {
     display: none;
   }
 }
-.container .column_content {
+
+.column_content {
   flex-grow: 0;
   flex-shrink: 0;
   word-wrap: break-word;
 }
-.container .column_content .info-wrapper {
+.column_content .info-wrapper {
   font-size: 1.6rem;
 }
-.container .column_content .info-wrapper h1 {
+.column_content .info-wrapper h1 {
   font-size: 1.6rem;
 }
-.theme--default .container .column_content .info-wrapper .display {
+.theme--default .column_content .info-wrapper .display {
   color: #c9c9c9;
 }
-.theme--dark .container .column_content .info-wrapper .display {
+.theme--dark .column_content .info-wrapper .display {
   color: #969696;
 }
-.container .column_content .info-wrapper .npub {
+.column_content .info-wrapper .npub {
   font-size: 1rem;
 }
-.theme--default .container .column_content .info-wrapper .npub {
+.theme--default .column_content .info-wrapper .npub {
   color: #c9c9c9;
 }
-.theme--dark .container .column_content .info-wrapper .npub {
+.theme--dark .column_content .info-wrapper .npub {
   color: #969696;
 }
 @media (max-width: 580px) {
-  .container .column_content .info-wrapper {
+  .column_content .info-wrapper {
     display: none;
   }
 }
-.container .column_content .separator {
+.column_content .separator {
   height: 6px;
   width: 30%;
   margin-left: -0.6rem;
 }
-.theme--default .container .column_content .separator {
+.theme--default .column_content .separator {
   background: #f3f3f3;
 }
-.theme--dark .container .column_content .separator {
+.theme--dark .column_content .separator {
   background: #2d2d2d;
 }
-.container .column_content .separator.long {
+.column_content .separator.long {
   width: 50%;
 }
 @media (max-width: 580px) {
-  .container .column_content .separator {
+  .column_content .separator {
     margin-left: -1rem;
   }
 }
-.container .column_content .field {
+.column_content .field {
   margin-bottom: 1.5rem;
   line-height: 1.3rem;
 }
-.container .column_content .field a {
+.column_content .field a {
   padding-bottom: 0.05rem;
   margin-right: 0.2rem;
   text-decoration: none;
 }
-.theme--default .container .column_content .field a {
+.theme--default .column_content .field a {
   color: #373737;
   border-bottom: 1px solid rgba(55, 55, 55, 0.24);
 }
-.theme--default .container .column_content .field a:hover {
+.theme--default .column_content .field a:hover {
   color: #e32a6d;
 }
-.theme--dark .container .column_content .field a {
+.theme--dark .column_content .field a {
   color: #fafafa;
   border-bottom: 1px solid rgba(250, 250, 250, 0.24);
 }
-.theme--dark .container .column_content .field a:hover {
+.theme--dark .column_content .field a:hover {
   color: #e32a6d;
 }
-.container .column_content .field a.nostr {
+.column_content .field a.nostr {
   border-bottom: none;
 }
-.theme--default .container .column_content .field a.nostr {
+.theme--default .column_content .field a.nostr {
   background-color: #fdf0f5;
 }
-.theme--dark .container .column_content .field a.nostr {
+.theme--dark .column_content .field a.nostr {
   background-color: #42091e;
 }
-.container .column_content .field a.button {
+.column_content .field a.button {
   display: inline-block;
   max-width: 100%;
   padding: 2px 8px;
@@ -518,137 +370,137 @@ iframe {
   border: 1px solid #c9c9c9;
   border-radius: 8px;
 }
-.container .column_content .field a.button:hover {
+.column_content .field a.button:hover {
   color: #ffffff;
   background-color: #e32a6d;
   border: 1px solid #e32a6d;
 }
-.container .column_content .field .label {
+.column_content .field .label {
   font-size: 0.8rem;
 }
-.theme--default .container .column_content .field .label {
+.theme--default .column_content .field .label {
   color: #e32a6d;
 }
-.theme--dark .container .column_content .field .label {
+.theme--dark .column_content .field .label {
   color: #e32a6d;
 }
-.container .column_content .field.advanced {
+.column_content .field.advanced {
   display: none;
 }
-.container .column_content .field.advanced.visible {
+.column_content .field.advanced.visible {
   display: block;
 }
-.container .column_content .field.boxed {
+.column_content .field.boxed {
   padding: 0 1rem 1rem;
   margin-left: -1rem;
   margin-right: -1rem;
 }
-.theme--default .container .column_content .field.boxed {
+.theme--default .column_content .field.boxed {
   background: #f3f3f3;
 }
-.theme--dark .container .column_content .field.boxed {
+.theme--dark .column_content .field.boxed {
   background: #131313;
 }
-.container .column_content .field.boxed .label {
+.column_content .field.boxed .label {
   padding: 0.2rem 1rem;
   margin: 0 -1rem;
 }
-.theme--default .container .column_content .field.boxed .label {
+.theme--default .column_content .field.boxed .label {
   color: #373737;
 }
-.theme--dark .container .column_content .field.boxed .label {
+.theme--dark .column_content .field.boxed .label {
   color: #9a9a9a;
 }
-.theme--default .container .column_content .field.boxed .label {
+.theme--default .column_content .field.boxed .label {
   background: #c9c9c9;
 }
-.theme--dark .container .column_content .field.boxed .label {
+.theme--dark .column_content .field.boxed .label {
   background: #191919;
 }
-.container .column_content .field pre {
+.column_content .field pre {
   overflow-x: scroll;
   padding: 1rem;
 }
-.theme--default .container .column_content .field pre {
+.theme--default .column_content .field pre {
   background: #f3f3f3;
 }
-.theme--dark .container .column_content .field pre {
+.theme--dark .column_content .field pre {
   background: #2d2d2d;
 }
-.container .column_content .field blockquote {
+.column_content .field blockquote {
   padding: 0.5rem 0 0.5rem 1rem;
   margin: 2rem 0;
   font-style: italic;
 }
-.theme--default .container .column_content .field blockquote {
+.theme--default .column_content .field blockquote {
   border-left: 0.5rem solid #f3f3f3;
 }
-.theme--dark .container .column_content .field blockquote {
+.theme--dark .column_content .field blockquote {
   border-left: 0.5rem solid #2d2d2d;
 }
-.container .column_content .field blockquote.mention {
+.column_content .field blockquote.mention {
   border-left: 0.5rem solid #e32a6d;
   padding: 0rem 0 0.5rem 1rem;
 }
-.theme--default .container .column_content .field blockquote.mention div {
+.theme--default .column_content .field blockquote.mention div {
   padding: 0.5rem 0.5rem 0.5rem 1rem;
   margin: 0 0 1rem -1rem;
   background-color: #f3f3f3;
 }
-.theme--dark .container .column_content .field blockquote.mention div {
+.theme--dark .column_content .field blockquote.mention div {
   padding: 0.5rem 0.5rem 0.5rem 1rem;
   margin: 0 0 1rem -1rem;
   background-color: #2d2d2d;
 }
-.container .column_content .field blockquote p {
+.column_content .field blockquote p {
   margin: 0 0 0.5rem 0;
 }
-.container .column_content .field cite {
+.column_content .field cite {
   font-size: 0.8em;
 }
-.container .column_content .field strong {
+.column_content .field strong {
   font-weight: 400;
 }
-.container .column_content .field ol,
-.container .column_content .field ul {
+.column_content .field ol,
+.column_content .field ul {
   margin: 0;
   padding: 0 0 0 1rem;
 }
-.container .column_content .field ol li,
-.container .column_content .field ul li {
+.column_content .field ol li,
+.column_content .field ul li {
   margin-bottom: 0.5rem;
 }
-.container .column_content .field sup {
+.column_content .field sup {
   font-size: 0.6rem;
   vertical-align: baseline;
   position: relative;
   top: -0.8em;
   margin: 0 0.3rem 0 0.1rem;
 }
-.container .column_content .field hr {
+.column_content .field hr {
   display: none;
 }
-.container .column_content .field .footnotes {
+.column_content .field .footnotes {
   padding-top: 1rem;
   margin-top: 2rem;
   font-size: 0.9rem;
   line-height: 1.2rem;
 }
-.theme--default .container .column_content .field .footnotes {
+.theme--default .column_content .field .footnotes {
   border-top: 6px solid #f3f3f3;
 }
-.theme--dark .container .column_content .field .footnotes {
+.theme--dark .column_content .field .footnotes {
   border-top: 6px solid #2d2d2d;
 }
-.container .column_content .field.last_notes a {
+.column_content .field.last_notes a {
   display: block;
   text-decoration: none;
   border-bottom: none;
 }
-.container .column_content .field.last_notes a.note {
+.column_content .field.last_notes a.note {
   margin: 2rem 0;
 }
-.container .column_content .field.last_notes a.note .header {
+.column_content .field.last_notes a.note .header {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -657,175 +509,100 @@ iframe {
   padding-left: 0.6rem;
   padding-bottom: 0.2rem;
 }
-.theme--default .container .column_content .field.last_notes a.note .header {
+.theme--default .column_content .field.last_notes a.note .header {
   border-bottom: 6px solid #f3f3f3;
 }
-.theme--dark .container .column_content .field.last_notes a.note .header {
+.theme--dark .column_content .field.last_notes a.note .header {
   border-bottom: 6px solid #2d2d2d;
 }
-.container .column_content .field.last_notes a.note .header .published_at,
-.container .column_content .field.last_notes a.note .header .npub {
+.column_content .field.last_notes a.note .header .published_at,
+.column_content .field.last_notes a.note .header .npub {
   font-size: 0.8rem;
 }
-.theme--default
-  .container
-  .column_content
-  .field.last_notes
-  a.note
-  .header
-  .published_at,
-.theme--default
-  .container
-  .column_content
-  .field.last_notes
-  a.note
-  .header
-  .npub {
+.theme--default .column_content .field.last_notes a.note .header .published_at,
+.theme--default .column_content .field.last_notes a.note .header .npub {
   color: #e32a6d;
 }
-.theme--dark
-  .container
-  .column_content
-  .field.last_notes
-  a.note
-  .header
-  .published_at,
-.theme--dark .container .column_content .field.last_notes a.note .header .npub {
+.theme--dark .column_content .field.last_notes a.note .header .published_at,
+.theme--dark .column_content .field.last_notes a.note .header .npub {
   color: #e32a6d;
 }
-.container .column_content .field.last_notes a.note .header .npub {
+.column_content .field.last_notes a.note .header .npub {
   margin-left: auto;
 }
-.theme--default
-  .container
-  .column_content
-  .field.last_notes
-  a.note
-  .header
-  .npub {
+.theme--default .column_content .field.last_notes a.note .header .npub {
   color: #3d3d3d;
 }
-.theme--dark .container .column_content .field.last_notes a.note .header .npub {
+.theme--dark .column_content .field.last_notes a.note .header .npub {
   color: #fafafa;
 }
-.container .column_content .field.last_notes a.note .header .npub span {
+.column_content .field.last_notes a.note .header .npub span {
   padding: 0 0.2rem;
   border-radius: 4px;
 }
-.theme--default
-  .container
-  .column_content
-  .field.last_notes
-  a.note
-  .header
-  .npub
-  span {
+.theme--default .column_content .field.last_notes a.note .header .npub span {
   background-color: #fdf0f5;
 }
-.theme--dark
-  .container
-  .column_content
-  .field.last_notes
-  a.note
-  .header
-  .npub
-  span {
+.theme--dark .column_content .field.last_notes a.note .header .npub span {
   background-color: #42091e;
 }
-.container .column_content .field.last_notes a.note .header .npub span:hover {
+.column_content .field.last_notes a.note .header .npub span:hover {
   text-decoration: none;
 }
-.theme--default
-  .container
-  .column_content
-  .field.last_notes
-  a.note
-  .header
-  .npub
-  span:hover {
+.theme--default .column_content .field.last_notes a.note .header .npub span:hover {
   color: #ffffff;
   background-color: #e32a6d;
 }
-.theme--dark
-  .container
-  .column_content
-  .field.last_notes
-  a.note
-  .header
-  .npub
-  span:hover {
+.theme--dark .column_content .field.last_notes a.note .header .npub span:hover {
   color: #373737;
   background-color: #e32a6d;
 }
-.container .column_content .field.last_notes a.note .header .is_reply {
+.column_content .field.last_notes a.note .header .is_reply {
   margin-left: 0.5em;
   font-size: 0.8rem;
 }
-.theme--default
-  .container
-  .column_content
-  .field.last_notes
-  a.note
-  .header
-  .is_reply {
+.theme--default .column_content .field.last_notes a.note .header .is_reply {
   color: #c9c9c9;
 }
-.theme--dark
-  .container
-  .column_content
-  .field.last_notes
-  a.note
-  .header
-  .is_reply {
+.theme--dark .column_content .field.last_notes a.note .header .is_reply {
   color: #969696;
 }
-.container .column_content .field.last_notes a.note .content {
+.column_content .field.last_notes a.note .content {
   flex-basis: 100%;
   margin-top: 0.2rem;
   max-height: 160px;
   overflow: hidden;
 }
-.container .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.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%);
 }
-.container .column_content .field.last_notes a:hover {
+.column_content .field.last_notes a:hover {
   padding-left: 1rem;
   margin-left: -1.5rem;
 }
-.theme--default .container .column_content .field.last_notes a:hover {
+.theme--default .column_content .field.last_notes a:hover {
   border-left: 0.5rem solid #f3f3f3;
 }
-.theme--dark .container .column_content .field.last_notes a:hover {
+.theme--dark .column_content .field.last_notes a:hover {
   border-left: 0.5rem solid #2d2d2d;
 }
-.container .column_content .field.advanced-switch-wrapper {
+.column_content .field.advanced-switch-wrapper {
   display: flex;
   align-items: center;
 }
-.container
-  .column_content
-  .field.advanced-switch-wrapper
-  input[type='checkbox'] {
+.column_content .field.advanced-switch-wrapper input[type=checkbox] {
   height: 0;
   width: 0;
   visibility: hidden;
   display: none;
 }
 @media print {
-  .container .column_content .field.advanced-switch-wrapper {
+  .column_content .field.advanced-switch-wrapper {
     display: none;
   }
 }
-.container .column_content .field.advanced-switch-wrapper label:first-of-type {
+.column_content .field.advanced-switch-wrapper label:first-of-type {
   cursor: pointer;
   text-indent: -9999px;
   width: 2.6rem;
@@ -835,34 +612,20 @@ iframe {
   position: relative;
   margin-right: 0.5rem;
 }
-.theme--default
-  .container
-  .column_content
-  .field.advanced-switch-wrapper
-  label:first-of-type {
+.theme--default .column_content .field.advanced-switch-wrapper label:first-of-type {
   background: #f3f3f3;
 }
-.theme--dark
-  .container
-  .column_content
-  .field.advanced-switch-wrapper
-  label:first-of-type {
+.theme--dark .column_content .field.advanced-switch-wrapper label:first-of-type {
   background: #2d2d2d;
 }
 @media (max-width: 580px) {
-  .container
-    .column_content
-    .field.advanced-switch-wrapper
-    label:first-of-type {
+  .column_content .field.advanced-switch-wrapper label:first-of-type {
     width: 3rem;
     height: 1.4rem;
   }
 }
-.container
-  .column_content
-  .field.advanced-switch-wrapper
-  label:first-of-type:after {
-  content: '';
+.column_content .field.advanced-switch-wrapper label:first-of-type:after {
+  content: "";
   position: absolute;
   top: 2px;
   left: 2px;
@@ -871,177 +634,119 @@ iframe {
   border-radius: 1rem;
   transition: 0.2s;
 }
-.theme--default
-  .container
-  .column_content
-  .field.advanced-switch-wrapper
-  label:first-of-type:after {
+.theme--default .column_content .field.advanced-switch-wrapper label:first-of-type:after {
   background: #373737;
 }
-.theme--dark
-  .container
-  .column_content
-  .field.advanced-switch-wrapper
-  label:first-of-type:after {
+.theme--dark .column_content .field.advanced-switch-wrapper label:first-of-type:after {
   background: #fafafa;
 }
 @media (max-width: 580px) {
-  .container
-    .column_content
-    .field.advanced-switch-wrapper
-    label:first-of-type:after {
+  .column_content .field.advanced-switch-wrapper label:first-of-type:after {
     width: 1.2rem;
     height: 1.2rem;
   }
 }
-.theme--default
-  .container
-  .column_content
-  .field.advanced-switch-wrapper
-  input:checked
-  + label {
+.theme--default .column_content .field.advanced-switch-wrapper input:checked + label {
   background: #e32a6d;
 }
-.theme--dark
-  .container
-  .column_content
-  .field.advanced-switch-wrapper
-  input:checked
-  + label {
+.theme--dark .column_content .field.advanced-switch-wrapper input:checked + label {
   background: #e32a6d;
 }
-.container
-  .column_content
-  .field.advanced-switch-wrapper
-  input:checked
-  + label:first-of-type:after {
+.column_content .field.advanced-switch-wrapper input:checked + label:first-of-type:after {
   left: calc(100% - 2px);
   transform: translateX(-100%);
 }
-.theme--default
-  .container
-  .column_content
-  .field.advanced-switch-wrapper
-  input:checked
-  + label:first-of-type:after {
+.theme--default .column_content .field.advanced-switch-wrapper input:checked + label:first-of-type:after {
   background: #ffffff;
 }
-.theme--dark
-  .container
-  .column_content
-  .field.advanced-switch-wrapper
-  input:checked
-  + label:first-of-type:after {
+.theme--dark .column_content .field.advanced-switch-wrapper input:checked + label:first-of-type:after {
   background: #373737;
 }
-.container
-  .column_content
-  .field.advanced-switch-wrapper
-  label:first-of-type:active:after {
+.column_content .field.advanced-switch-wrapper label:first-of-type:active:after {
   width: 2rem;
 }
-.container .column_content .field.advanced-switch-wrapper label:last-of-type {
+.column_content .field.advanced-switch-wrapper label:last-of-type {
   cursor: pointer;
   font-size: 0.8rem;
 }
-.theme--default
-  .container
-  .column_content
-  .field.advanced-switch-wrapper
-  label:last-of-type {
+.theme--default .column_content .field.advanced-switch-wrapper label:last-of-type {
   border-bottom: 1px solid rgba(55, 55, 55, 0.24);
   padding-bottom: 0.1rem;
 }
-.theme--dark
-  .container
-  .column_content
-  .field.advanced-switch-wrapper
-  label:last-of-type {
+.theme--dark .column_content .field.advanced-switch-wrapper label:last-of-type {
   border-bottom: 1px solid rgba(250, 250, 250, 0.24);
   padding-bottom: 0.1rem;
 }
-.container .column_content .field.content,
-.container .column_content .field.about {
+.column_content .field.content, .column_content .field.about {
   line-height: 1.4rem;
 }
-.container .column_content .field.content img,
-.container .column_content .field.about img {
+.column_content .field.content img, .column_content .field.about img {
   max-width: 100%;
   margin: 1rem 0;
 }
-.container .column_content .field .json,
-.container .column_content .field .data {
-  font-family: 'Courier New', Courier, monospace;
+.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;
 }
-.container .column_content .field .json .key,
-.container .column_content .field .data .key {
+.column_content .field .json .key {
   display: inline-block;
 }
-.theme--default .container .column_content .field .json .key,
-.theme--default .container .column_content .field .data .key {
+.theme--default .column_content .field .json .key {
   color: #e32a6d;
 }
-.theme--dark .container .column_content .field .json .key,
-.theme--dark .container .column_content .field .data .key {
+.theme--dark .column_content .field .json .key {
   color: #e32a6d;
 }
-.theme--default .container .column_content .field .json .string,
-.theme--default .container .column_content .field .data .string {
+.theme--default .column_content .field .json .string {
   color: #373737;
 }
-.theme--dark .container .column_content .field .json .string,
-.theme--dark .container .column_content .field .data .string {
+.theme--dark .column_content .field .json .string {
   color: #fafafa;
 }
-.container .column_content .field .json .number,
-.container .column_content .field .data .number {
+.column_content .field .json .number {
   color: darkorange;
 }
-.theme--default .container .column_content .field .json .boolean,
-.theme--default .container .column_content .field .data .boolean {
+.theme--default .column_content .field .json .boolean {
   color: #373737;
 }
-.theme--dark .container .column_content .field .json .boolean,
-.theme--dark .container .column_content .field .data .boolean {
+.theme--dark .column_content .field .json .boolean {
   color: #fafafa;
 }
-.theme--default .container .column_content .field .json .null,
-.theme--default .container .column_content .field .data .null {
+.theme--default .column_content .field .json .null {
   color: #373737;
 }
-.theme--dark .container .column_content .field .json .null,
-.theme--dark .container .column_content .field .data .null {
+.theme--dark .column_content .field .json .null {
   color: #fafafa;
 }
-.container .column_content .field.last_update {
+.column_content .field.last_update {
   display: none;
 }
 @media (max-width: 580px) {
-  .container .column_content .field.last_update {
+  .column_content .field.last_update {
     display: block;
     font-size: 0.8em;
   }
-  .theme--default .container .column_content .field.last_update {
+  .theme--default .column_content .field.last_update {
     color: #c9c9c9;
   }
-  .theme--dark .container .column_content .field.last_update {
+  .theme--dark .column_content .field.last_update {
     color: #969696;
   }
 }
-.container .column_content a.pagination {
+.column_content a.pagination {
   color: #e32a6d;
 }
-.container .column_content a.pagination.next {
+.column_content a.pagination.next {
   float: right;
 }
-.container .column_content a.pagination.prev {
+.column_content a.pagination.prev {
   float: left;
 }
-.container .column_clients {
+
+.column_clients {
   position: -webkit-sticky;
   position: sticky;
   top: 2rem;
@@ -1050,7 +755,7 @@ iframe {
   margin-top: 1rem;
 }
 @media (max-width: 580px) {
-  .container .column_clients {
+  .column_clients {
     position: fixed;
     top: auto;
     bottom: 0;
@@ -1058,29 +763,29 @@ iframe {
     width: 100%;
     transition: all 500ms ease-in-out;
   }
-  .container .column_clients.up .btn {
+  .column_clients.up .btn {
     display: block;
   }
-  .container .column_clients.up .title span.open {
+  .column_clients.up .title span.open {
     display: none;
   }
 }
 @media print {
-  .container .column_clients {
+  .column_clients {
     display: none;
   }
 }
-.container .column_clients .title {
+.column_clients .title {
   font-size: 0.8rem;
   margin-bottom: 1rem;
   text-align: center;
 }
-.container .column_clients .title span.open,
-.container .column_clients .title span.close {
+.column_clients .title span.open,
+.column_clients .title span.close {
   display: none;
 }
 @media (max-width: 580px) {
-  .container .column_clients .title {
+  .column_clients .title {
     position: absolute;
     top: 0;
     right: 0;
@@ -1088,33 +793,33 @@ iframe {
     height: 2.6rem;
     border-left: 1px solid #bc1150;
   }
-  .container .column_clients .title span.text {
+  .column_clients .title span.text {
     display: none;
   }
-  .container .column_clients .title span.open,
-  .container .column_clients .title span.close {
+  .column_clients .title span.open,
+  .column_clients .title span.close {
     display: inline;
   }
-  .container .column_clients .title span.open svg,
-  .container .column_clients .title span.close svg {
+  .column_clients .title span.open svg,
+  .column_clients .title span.close svg {
     width: 50%;
     height: 50%;
     margin: 28% auto auto auto;
     display: block;
   }
 }
-.container .column_clients .btn {
+.column_clients .btn {
   display: flex;
   align-items: center;
   margin-bottom: 0.8rem;
 }
 @media (max-width: 580px) {
-  .container .column_clients .btn {
+  .column_clients .btn {
     display: none;
     margin-bottom: 0;
   }
 }
-.container .column_clients .btn a {
+.column_clients .btn a {
   flex-basis: 100%;
   padding: 0.4rem;
   text-align: center;
@@ -1126,7 +831,7 @@ iframe {
   border-radius: 8px;
 }
 @media (max-width: 580px) {
-  .container .column_clients .btn a {
+  .column_clients .btn a {
     display: block;
     padding: 0.8rem;
     border-radius: 0px;
@@ -1134,86 +839,54 @@ iframe {
     text-align: left;
   }
 }
-.container .column_clients .btn a span {
+.column_clients .btn a span {
   display: none;
 }
 @media (max-width: 580px) {
-  .container .column_clients .btn a span {
+  .column_clients .btn a span {
     display: inline;
     color: #ffffff;
   }
 }
-.container .column_clients .btn a:hover {
+.column_clients .btn a:hover {
   background: #373737;
 }
 @media (max-width: 580px) {
-  .container .column_clients .btn:first-of-type {
+  .column_clients .btn:first-of-type {
     display: block;
   }
 }
-.container .column_clients .btn:first-of-type a {
+.column_clients .btn:first-of-type a {
   border-bottom: none;
 }
-.theme--default .container .column_clients .btn:first-of-type a {
+.theme--default .column_clients .btn:first-of-type a {
   background: #e32a6d;
 }
-.theme--dark .container .column_clients .btn:first-of-type a {
+.theme--dark .column_clients .btn:first-of-type a {
   background: #e32a6d;
 }
 @media (max-width: 580px) {
-  .container .column_clients .btn:first-of-type a {
+  .column_clients .btn:first-of-type a {
     border-radius: 8px 8px 0 0;
   }
 }
-.theme--default .container .column_clients .btn:first-of-type a:hover {
+.theme--default .column_clients .btn:first-of-type a:hover {
   background: #bc1150;
 }
-.theme--dark .container .column_clients .btn:first-of-type a:hover {
+.theme--dark .column_clients .btn:first-of-type a:hover {
   background: #bc1150;
 }
-.container .column_clients .btn span {
+.column_clients .btn span {
   flex-basis: 20%;
   margin-left: 0.4rem;
   color: #ffffff;
 }
 @media (max-width: 580px) {
-  .container .column_clients .btn span {
+  .column_clients .btn span {
     display: none;
   }
 }
 
-body.homepage .container_wrapper {
-  display: block;
-}
-@media (max-width: 580px) {
-  body.homepage .container_wrapper {
-    display: block;
-    padding: 0 1rem;
-    margin: 0 auto;
-  }
-}
-body.homepage .container_wrapper .container {
-  display: block;
-  width: 60%;
-  margin: 0 auto;
-}
-@media (max-width: 580px) {
-  body.homepage .container_wrapper .container {
-    display: block;
-    width: 100%;
-  }
-}
-body.homepage .container_wrapper .container span.exampleUrl {
-  padding: 0 0.2rem;
-  border-radius: 4px;
-}
-.theme--default body.homepage .container_wrapper .container span.exampleUrl {
-  background-color: #fdf0f5;
-}
-.theme--dark body.homepage .container_wrapper .container span.exampleUrl {
-  background-color: #42091e;
-}
-
 body.profile .column_content {
   flex-basis: 50%;
   max-width: 50%;
diff --git a/static/styles.scss b/static/styles.scss
index 298ccc6..306cef0 100644
--- a/static/styles.scss
+++ b/static/styles.scss
@@ -93,7 +93,6 @@ $theme-map: null;
 
 /*# sourceMappingURL=styles.css.map */
 html {
-  font-family: Helvetica, sans-serif;
   font-size: 19px;
   font-weight: 300;
   @media (max-width: 580px) {
@@ -262,703 +261,558 @@ iframe {
   }
 }
 
-.container_wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.columnA {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 2rem;
+  align-self: flex-start;
+  flex-basis: 25%;
+  max-width: 25%;
+  word-wrap: break-word;
+  margin-top: 2rem;
   @media (max-width: 580px) {
-    display: block;
-    padding: 0 1rem;
-    margin: 0 auto;
+    display: flex;
+    position: relative;
+    max-width: none;
+    top: auto;
+    align-items: center;
+    margin-top: 0rem;
   }
-}
-.nostr_link {
-  flex-basis: 15%;
-  text-align: right;
-  text-decoration: none;
-  @media print {
-    display: block;
-    text-align: right;
-  }
-}
-
-.container {
-  display: flex;
-  width: 70%;
-  justify-content: space-between;
-  gap: 4.8vw;
-  overflow: visible;
-  @media (max-width: 580px) {
-    display: block;
-    width: 100%;
-  }
-  @media print {
-    width: 100%;
-  }
-
-  .try {
-    @include themed() {
-      background-color: t($over-bg);
-    }
-    padding: 1.6rem 1.6rem 1rem 1.6rem;
-    margin-bottom: 2rem;
-    border-radius: 8px;
-    font-size: 0.8rem;
-    @media (max-width: 580px) {
-      padding: 1rem 1rem 0.8rem 1rem;
-    }
-    .tryForm {
-      display: flex;
-      align-items: center;
-      @media (max-width: 580px) {
-        flex-wrap: wrap;
-        justify-content: center;
-      }
-
-      input,
-      button {
-        flex-basis: 90%;
-        width: 100%;
-        padding: 0.5rem;
-        font-size: 1.2rem;
-        border-radius: 8px;
-        @media (max-width: 580px) {
-          flex-basis: 100%;
-        }
-      }
-      div {
-        font-size: 1.4rem;
-        @media (max-width: 580px) {
-          margin-bottom: 0.4rem;
-        }
-      }
-      input {
-        @include themed() {
-          color: t($base7);
-          background-color: t($bg-up);
-          // border: 1px solid t($base4);
-          border: none;
-        }
-        margin-left: 0.3rem;
-        @media (max-width: 580px) {
-          margin-left: 0;
-          border-radius: 8px 8px 0px 0px;
-        }
-        &:focus {
-          outline: none; /* Remove the default outline */
-        }
-      }
-      ::placeholder {
-        @include themed() {
-          color: t($base4);
-        }
-      }
-      button {
-        flex-basis: 10%;
-        @include themed() {
-          background-color: t($accent1);
-        }
-        color: $color-base1;
-        border: none;
-        margin-left: -16px;
-        @media (max-width: 580px) {
-          flex-basis: 100%;
-          margin-left: 0px;
-          border-radius: 0px 0px 8px 8px;
-        }
-      }
-    }
-    #pickRandomEntityLink {
+  .info-wrapper {
+    display: none;
+    font-size: 1.6rem;
+    margin-bottom: 0.6em;
+    text-align: center;
+    .display {
       display: block;
-      margin-top: 0.2rem;
-      @media (max-width: 580px) {
-        margin-top: 0.8rem;
-        text-align: center;
-      }
-    }
-  }
-
-  .columnA {
-    position: -webkit-sticky;
-    position: sticky;
-    top: 2rem;
-    align-self: flex-start;
-    flex-basis: 25%;
-    max-width: 25%;
-    word-wrap: break-word;
-    margin-top: 2rem;
-    @media (max-width: 580px) {
-      display: flex;
-      position: relative;
-      max-width: none;
-      top: auto;
-      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;
-      text-align: center;
+      font-size: 1.2rem;
       @include themed() {
         color: t($base4);
       }
-      @media (max-width: 580px) {
-        display: none;
-      }
+    }
+    @media (max-width: 580px) {
+      display: block;
+      text-align: left;
+      margin-bottom: 0;
+      flex-basis: 64%;
+      max-width: 64%;
+      overflow: hidden;
+      font-size: 1.6rem;
     }
   }
-  .column_content {
-    flex-grow: 0;
-    flex-shrink: 0;
-    word-wrap: break-word;
+  .last_update {
+    font-size: 0.8em;
+    margin-top: 0.5rem;
+    text-align: center;
+    @include themed() {
+      color: t($base4);
+    }
+    @media (max-width: 580px) {
+      display: none;
+    }
+  }
+}
 
-    .info-wrapper {
+.column_content {
+  flex-grow: 0;
+  flex-shrink: 0;
+  word-wrap: break-word;
+
+  .info-wrapper {
+    font-size: 1.6rem;
+    h1 {
       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;
+    }
+    .display {
+      @include themed() {
+        color: t($base4);
       }
     }
-    .separator {
-      height: 6px;
-      width: 30%;
-      margin-left: -0.6rem;
+    .npub {
+      font-size: 1rem;
+      @include themed() {
+        color: t($base4);
+      }
+    }
+    @media (max-width: 580px) {
+      display: none;
+    }
+  }
+  .separator {
+    height: 6px;
+    width: 30%;
+    margin-left: -0.6rem;
+    @include themed() {
+      background: t($over-bg);
+    }
+    &.long {
+      width: 50%;
+    }
+    @media (max-width: 580px) {
+      margin-left: -1rem;
+    }
+  }
+  .field {
+    margin-bottom: 1.5rem;
+    line-height: 1.3rem;
+    a {
+      padding-bottom: 0.05rem;
+      margin-right: 0.2rem;
+      text-decoration: none;
+      @include themed() {
+        &:hover {
+          color: $color-accent1;
+        }
+        color: t($base7);
+        border-bottom: 1px solid rgba(t($base7), 0.24);
+      }
+    }
+    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);
+      }
+    }
+    &.advanced {
+      display: none;
+      &.visible {
+        display: block;
+      }
+    }
+    &.boxed {
+      padding: 0 1rem 1rem;
+      margin-left: -1rem;
+      margin-right: -1rem;
+      @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);
+        }
+      }
+    }
+    pre {
+      overflow-x: scroll;
       @include themed() {
         background: t($over-bg);
       }
-      &.long {
-        width: 50%;
+      padding: 1rem;
+    }
+    blockquote {
+      @include themed() {
+        border-left: 0.5rem solid t($over-bg);
       }
-      @media (max-width: 580px) {
-        margin-left: -1rem;
+      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;
       }
     }
-    .field {
-      margin-bottom: 1.5rem;
-      line-height: 1.3rem;
+    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;
+    }
+    &.last_notes {
       a {
-        padding-bottom: 0.05rem;
-        margin-right: 0.2rem;
+        display: block;
         text-decoration: none;
-        @include themed() {
-          &:hover {
-            color: $color-accent1;
-          }
-          color: t($base7);
-          border-bottom: 1px solid rgba(t($base7), 0.24);
-        }
-      }
-      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;
+        &.note {
+          margin: 2rem 0;
+          .header {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            margin-left: -0.6rem;
+            margin-bottom: 0.4rem;
+            padding-left: 0.6rem;
+            padding-bottom: 0.2rem;
+            @include themed() {
+              border-bottom: 6px solid t($over-bg);
+            }
+            .published_at,
+            .npub {
+              font-size: 0.8rem;
+              @include themed() {
+                color: t($accent1);
+              }
+            }
+            .npub {
+              margin-left: auto;
+              @include themed() {
+                color: t($base6);
+              }
+              span {
+                padding: 0 0.2rem;
+                border-radius: 4px;
+                @include themed() {
+                  background-color: t($hrefbg);
+                }
+                &:hover {
+                  text-decoration: none;
+                  @include themed() {
+                    color: t($base1);
+                    background-color: t($accent1);
+                  }
+                }
+              }
+            }
+            .is_reply {
+              margin-left: 0.5em;
+              font-size: 0.8rem;
+              @include themed() {
+                color: t($base4);
+              }
+            }
+          }
+          .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%
+              );
+            }
+          }
         }
       }
-      .label {
+      a:hover {
+        padding-left: 1rem;
+        margin-left: -1.5rem;
+        @include themed() {
+          border-left: 0.5rem solid t($over-bg);
+        }
+      }
+    }
+    &.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;
+        }
+      }
+    }
+    &.content,
+    &.about {
+      line-height: 1.4rem;
+      img {
+        max-width: 100%;
+        margin: 1rem 0;
+      }
+    }
+    .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;
-      }
-      &.last_notes {
-        a {
-          display: block;
-          text-decoration: none;
-          border-bottom: none;
-          &.note {
-            margin: 2rem 0;
-            .header {
-              display: flex;
-              flex-direction: row;
-              flex-wrap: wrap;
-              margin-left: -0.6rem;
-              margin-bottom: 0.4rem;
-              padding-left: 0.6rem;
-              padding-bottom: 0.2rem;
-              @include themed() {
-                border-bottom: 6px solid t($over-bg);
-              }
-              .published_at,
-              .npub {
-                font-size: 0.8rem;
-                @include themed() {
-                  color: t($accent1);
-                }
-              }
-              .npub {
-                margin-left: auto;
-                @include themed() {
-                  color: t($base6);
-                }
-                span {
-                  padding: 0 0.2rem;
-                  border-radius: 4px;
-                  @include themed() {
-                    background-color: t($hrefbg);
-                  }
-                  &:hover {
-                    text-decoration: none;
-                    @include themed() {
-                      color: t($base1);
-                      background-color: t($accent1);
-                    }
-                  }
-                }
-              }
-              .is_reply {
-                margin-left: 0.5em;
-                font-size: 0.8rem;
-                @include themed() {
-                  color: t($base4);
-                }
-              }
-            }
-            .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 {
-          padding-left: 1rem;
-          margin-left: -1.5rem;
-          @include themed() {
-            border-left: 0.5rem solid t($over-bg);
-          }
-        }
-      }
-      &.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;
-          }
-        }
-      }
-      &.content,
-      &.about {
-        line-height: 1.4rem;
-        img {
-          max-width: 100%;
-          margin: 1rem 0;
-        }
-      }
-      .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);
+        }
       }
     }
   }
-
-  .column_clients {
-    position: -webkit-sticky;
-    position: sticky;
-    top: 2rem;
-    align-self: flex-start;
-    flex-basis: 25%;
-    margin-top: 1rem;
-    @media (max-width: 580px) {
-      position: fixed;
-      top: auto;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      transition: all 500ms ease-in-out;
-      &.up {
-        .btn {
-          display: block;
-        }
-        .title span.open {
-          display: none;
-        }
-      }
+  a.pagination {
+    color: $color-accent1;
+    &.next {
+      float: right;
     }
-    @media print {
-      display: none;
-    }
-    .title {
-      font-size: 0.8rem;
-      margin-bottom: 1rem;
-      text-align: center;
-      span.open,
-      span.close {
-        display: none;
-      }
-      @media (max-width: 580px) {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 2.6rem;
-        height: 2.6rem;
-        border-left: 1px solid #bc1150;
-        span.text {
-          display: none;
-        }
-        span.open,
-        span.close {
-          display: inline;
-          svg {
-            width: 50%;
-            height: 50%;
-            margin: 28% auto auto auto;
-            display: block;
-          }
-        }
-      }
-    }
-    .btn {
-      display: flex;
-      align-items: center;
-      margin-bottom: 0.8rem;
-      @media (max-width: 580px) {
-        display: none;
-        margin-bottom: 0;
-      }
-      a {
-        flex-basis: 100%;
-        padding: 0.4rem;
-        text-align: center;
-        font-size: 0.9rem;
-        color: $color-base1;
-        background-color: $color-base6;
-        border-bottom: 1px solid darken($color-base7, 14%);
-        text-decoration: none;
-        border-radius: 8px;
-        @media (max-width: 580px) {
-          display: block;
-          padding: 0.8rem;
-          border-radius: 0px;
-          font-weight: 400;
-          text-align: left;
-        }
-        span {
-          display: none;
-          @media (max-width: 580px) {
-            display: inline;
-            color: $color-base1;
-          }
-        }
-        &:hover {
-          background: $color-base7;
-        }
-      }
-      &:first-of-type {
-        @media (max-width: 580px) {
-          display: block;
-        }
-        a {
-          @include themed() {
-            background: t($accent1);
-          }
-          border-bottom: none;
-          @media (max-width: 580px) {
-            border-radius: 8px 8px 0 0;
-          }
-          &:hover {
-            @include themed() {
-              background: t($accent2);
-            }
-          }
-        }
-      }
-      span {
-        flex-basis: 20%;
-        margin-left: 0.4rem;
-        color: $color-base1;
-        @media (max-width: 580px) {
-          display: none;
-        }
-      }
+    &.prev {
+      float: left;
     }
   }
 }
 
-body.homepage {
-  .container_wrapper {
-    display: block;
-    @media (max-width: 580px) {
-      display: block;
-      padding: 0 1rem;
-      margin: 0 auto;
+.column_clients {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 2rem;
+  align-self: flex-start;
+  flex-basis: 25%;
+  margin-top: 1rem;
+  @media (max-width: 580px) {
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    transition: all 500ms ease-in-out;
+    &.up {
+      .btn {
+        display: block;
+      }
+      .title span.open {
+        display: none;
+      }
     }
-
-    .container {
-      display: block;
-      width: 60%;
-      margin: 0 auto;
+  }
+  @media print {
+    display: none;
+  }
+  .title {
+    font-size: 0.8rem;
+    margin-bottom: 1rem;
+    text-align: center;
+    span.open,
+    span.close {
+      display: none;
+    }
+    @media (max-width: 580px) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 2.6rem;
+      height: 2.6rem;
+      border-left: 1px solid #bc1150;
+      span.text {
+        display: none;
+      }
+      span.open,
+      span.close {
+        display: inline;
+        svg {
+          width: 50%;
+          height: 50%;
+          margin: 28% auto auto auto;
+          display: block;
+        }
+      }
+    }
+  }
+  .btn {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.8rem;
+    @media (max-width: 580px) {
+      display: none;
+      margin-bottom: 0;
+    }
+    a {
+      flex-basis: 100%;
+      padding: 0.4rem;
+      text-align: center;
+      font-size: 0.9rem;
+      color: $color-base1;
+      background-color: $color-base6;
+      border-bottom: 1px solid darken($color-base7, 14%);
+      text-decoration: none;
+      border-radius: 8px;
       @media (max-width: 580px) {
         display: block;
-        width: 100%;
+        padding: 0.8rem;
+        border-radius: 0px;
+        font-weight: 400;
+        text-align: left;
       }
-
-      span.exampleUrl {
-        @include themed() {
-          background-color: t($hrefbg);
+      span {
+        display: none;
+        @media (max-width: 580px) {
+          display: inline;
+          color: $color-base1;
         }
-        padding: 0 0.2rem;
-        border-radius: 4px;
+      }
+      &:hover {
+        background: $color-base7;
+      }
+    }
+    &:first-of-type {
+      @media (max-width: 580px) {
+        display: block;
+      }
+      a {
+        @include themed() {
+          background: t($accent1);
+        }
+        border-bottom: none;
+        @media (max-width: 580px) {
+          border-radius: 8px 8px 0 0;
+        }
+        &:hover {
+          @include themed() {
+            background: t($accent2);
+          }
+        }
+      }
+    }
+    span {
+      flex-basis: 20%;
+      margin-left: 0.4rem;
+      color: $color-base1;
+      @media (max-width: 580px) {
+        display: none;
       }
     }
   }
diff --git a/templates/archive.html b/templates/archive.html
index 19861d6..d7eda5e 100644
--- a/templates/archive.html
+++ b/templates/archive.html
@@ -10,8 +10,12 @@
   <body class="profile">
     {{template "top" .}}
 
-    <div class="container_wrapper">
-      <div class="container">
+    <div
+      class="block sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0"
+    >
+      <div
+        class="flex w-full sm:w-8/12 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
+      >
         <div class="column columnA">
           <div class="info-wrapper">
             {{.Title}}
diff --git a/templates/head_common.html b/templates/head_common.html
index b537532..3d5f7bb 100644
--- a/templates/head_common.html
+++ b/templates/head_common.html
@@ -40,6 +40,26 @@
 {{end}}
 <meta name="theme-color" content="#e42a6d" />
 <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
+<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
+<script>
+  tailwind.config = {
+    darkMode: ['class', '.theme--dark'],
+    theme: {
+      extend: {
+        fontFamily: {
+          sans: ['Helvetica', 'ui-sans-serif', 'system-ui']
+        },
+        colors: {
+          lavender: '#fdf0f5',
+          strongpink: '#e32a6d',
+          crimson: '#bc1150',
+          garnet: '#42091e'
+        }
+      }
+    }
+  }
+</script>
+
 <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
 
diff --git a/templates/homepage.html b/templates/homepage.html
index 83d24d7..22210f0 100644
--- a/templates/homepage.html
+++ b/templates/homepage.html
@@ -11,31 +11,41 @@
   <body class="homepage">
     {{template "top" .}}
 
-    <div class="container_wrapper">
-      <div class="container">
+    <div
+      class="block sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0"
+    >
+      <div
+        class="flex w-full sm:w-8/12 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
+      >
         <div>
-          <h2>What is njump?</h2>
+          <h2 class="text-2xl">What is njump?</h2>
 
-          <p>
+          <p class="leading-5 my-3">
             <i>njump</i> is a HTTP
-            <a href="https://github.com/nostr-protocol/nostr">Nostr</a> gateway
-            that allows you to browse profiles, notes and relays; it is an easy
-            way to preview a resource and then open it with your preferred
-            client. The typical use of <i>njump</i> is to share a resource
-            outside the Nostr world, where the <code>nostr:</code> schema is not
-            (yet) working.
+            <a class="underline" href="https://github.com/nostr-protocol/nostr"
+              >Nostr</a
+            >
+            gateway that allows you to browse profiles, notes and relays; it is
+            an easy way to preview a resource and then open it with your
+            preferred client. The typical use of <i>njump</i> is to share a
+            resource outside the Nostr world, where the
+            <code>nostr:</code> schema is not (yet) working.
           </p>
-          <p>
+          <p class="leading-5 my-3">
             <i>njump</i> currently lives under {{ .Host }}, you can reach it
             appending a Nostr
-            <a href="https://github.com/nostr-protocol/nips/blob/master/19.md"
+            <a
+              class="underline"
+              href="https://github.com/nostr-protocol/nips/blob/master/19.md"
               >NIP-19</a
             >
             entity (<code>npub</code>, <code>nevent</code>, <code>naddr</code>,
             etc) after the domain:
-            <span class="exampleUrl">{{ .Host }}/&lt;nip-19-entity&gt;</span>.
+            <span class="rounded px-1 bg-lavender dark:bg-garnet"
+              >{{ .Host }}/&lt;nip-19-entity&gt;</span
+            >.
           </p>
-          <p>
+          <p class="leading-5 my-3">
             For example, here's
             <a
               href="/npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6"
@@ -56,32 +66,44 @@
             >.
           </p>
 
-          <h2>Try it now, jump to some Nostr content</h2>
+          <h2 class="text-xl">Try it now, jump to some Nostr content</h2>
 
-          <div class="try">
-            <form action="/try" method="POST">
-              <div class="tryForm">
-                <div>{{ .Host }}/</div>
+          <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"
+          >
+            <form
+              _="on submit halt the event's default then go to url `/${event.target.code.value}`"
+            >
+              <div
+                class="flex items-center flex-wrap sm:flex-nowrap justify-center sm:justify-normal"
+              >
+                <div class="text-xl mb-1.5 sm:mb-0">{{ .Host }}/</div>
                 <input
-                  id="nip19entity"
-                  name="nip19entity"
-                  type="text"
+                  name="code"
                   placeholder="paste a npub / nprofile / nevent / ..."
                   autofocus
+                  class="basis-full sm:basis-11/12 w-full text-base p-2 ml-0 sm:ml-1 border-0 rounded-lg sm:rounded-s-lg focus:outline-0 bg-white text-gray-700 dark:bg-zinc-900 dark:text-neutral-50 placeholder:text-gray-300 dark:placeholder:text-gray-400"
                 />
-                <button>VIEW</button>
+                <button
+                  class="uppercase basis-full sm:basis-2/12 w-full text-base p-2 rounded-lg sm:rounded-s-lg text-white ml-0 sm:-ml-4 border-0 bg-strongpink"
+                >
+                  View
+                </button>
               </div>
             </form>
-            <div>or pick <a href="/random">some random content</a></div>
+            <div class="mt-3 sm:mt-1 text-sm text-center sm:text-left">
+              or pick
+              <a class="underline" href="/random">some random content</a>
+            </div>
           </div>
 
-          <p>
+          <p class="leading-5 my-3">
             There are several reasons to choose <i>njump</i> when sharing Nostr
             content outside of Nostr:
           </p>
 
-          <h2>Clean, fast and solid</h2>
-          <p>
+          <h2 class="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
             minimalistic with the right attention to typography, focusing the
@@ -91,13 +113,13 @@
             onboard new users!
           </p>
 
-          <h2>Good preview</h2>
-          <p>
+          <h2 class="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,
             Twitter and other places.
           </p>
-          <p>
+          <p class="leading-5 my-3">
             When opening the URL directly in a browser, visitors will find
             referenced content like images, video and links to referenced Nostr
             events displayed in a simple but effective way. It shows the note
@@ -105,23 +127,25 @@
             for printing or exporting to PDF.
           </p>
 
-          <h2>Cooperative (jump-out)</h2>
-          <p>
+          <h2 class="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
             from a list of web clients or with a <code>nostr:</code> for native
             clients. It even remembers the most used one for each visitor and
             puts it on the top for fast clicking or tap.
           </p>
-          <p>
-            <a href="https://github.com/nostr-protocol/nips/blob/master/89.md"
+          <p class="leading-5 my-3">
+            <a
+              class="underline"
+              href="https://github.com/nostr-protocol/nips/blob/master/89.md"
               >NIP-89</a
             >
             support coming!
           </p>
 
-          <h2>Search friendly (jump-in)</h2>
-          <p>
+          <h2 class="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
             great content on Nostr, jump in and join us! <i>njump</i> is the
@@ -130,26 +154,31 @@
             you also help Nostr flourish.
           </p>
 
-          <h2>Share NIP-05 profiles</h2>
-          <p>
+          <h2 class="text-2xl">Share NIP-05 profiles</h2>
+          <p class="leading-5 my-3">
             Now you can share your own profile with a pretty
-            <a href="https://github.com/nostr-protocol/nips/blob/master/05.md"
+            <a
+              class="underline"
+              href="https://github.com/nostr-protocol/nips/blob/master/05.md"
               >NIP-05</a
             >
             inspired permalink:
-            <span class="exampleUrl">{{ .Host }}/&lt;nip-5&gt;</span>, for
-            example: <a href="/nvk.org">https://{{ .Host }}/nvk.org</a> or
-            <a href="/mike@mikedilger.com"
+            <span class="rounded px-1 bg-lavender dark:bg-garnet"
+              >{{ .Host }}/&lt;nip-5&gt;</span
+            >, for example:
+            <a class="underline" href="/nvk.org">https://{{ .Host }}/nvk.org</a>
+            or
+            <a class="underline" href="/mike@mikedilger.com"
               >https://{{ .Host }}/mike@mikedilger.com</a
             >.
           </p>
-          <p>
+          <p class="leading-5 my-3">
             A profile shows the basic metadata infos, the used "outbox" relays
             and the last notes.
           </p>
 
-          <h2>Share on Twitter and Telegram</h2>
-          <p>
+          <h2 class="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
             a link, and njump will render the note text using the preview image
@@ -157,16 +186,18 @@
             On Telegram we have also the Instant View to access long content
             in-app!
           </p>
-          <p></p>
 
-          <h2>Relays view</h2>
-          <p>
+          <h2 class="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="exampleUrl">{{ .Host }}/r/&lt;relay-host&gt;</span>,
-            for example:
-            <a href="/r/nostr.wine">https://{{ .Host }}/r/nostr.wine</a>
+            <span class="rounded px-1 bg-lavender dark:bg-garnet"
+              >{{ .Host }}/r/&lt;relay-host&gt;</span
+            >, for example:
+            <a class="underline" href="/r/nostr.wine"
+              >https://{{ .Host }}/r/nostr.wine</a
+            >
           </p>
-          <p>
+          <p class="leading-5 my-3">
             Some basic infos (<a
               href="https://github.com/nostr-protocol/nips/blob/master/11.md"
               >NIP-11</a
@@ -175,13 +206,13 @@
             to join a relay.
           </p>
 
-          <h2>Inspector tool</h2>
-          <p>
+          <h2 class="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
             inspect the full event JSON. Without installing other tools (like
-            <a href="https://github.com/fiatjaf/nak">nak</a>) this is probably
-            the fastest way to access that.
+            <a class="underline" href="https://github.com/fiatjaf/nak">nak</a>)
+            this is probably the fastest way to access that.
           </p>
         </div>
       </div>
diff --git a/templates/note.html b/templates/note.html
index 837c99d..295cb1c 100644
--- a/templates/note.html
+++ b/templates/note.html
@@ -55,8 +55,12 @@
   <body class="note">
     {{template "top" .}}
 
-    <div class="container_wrapper">
-      <div class="container">
+    <div
+      class="block sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0"
+    >
+      <div
+        class="flex w-full sm:w-8/12 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
+      >
         <div class="column column_content">
           <header class="profile_intro">
             <a href="/{{.Npub}}">
diff --git a/templates/other.html b/templates/other.html
index 1f249ba..d2372c4 100644
--- a/templates/other.html
+++ b/templates/other.html
@@ -15,8 +15,12 @@
   <body class="other">
     {{template "top" .}}
 
-    <div class="container_wrapper">
-      <div class="container">
+    <div
+      class="block sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0"
+    >
+      <div
+        class="flex w-full sm:w-8/12 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">
diff --git a/templates/profile.html b/templates/profile.html
index 27dac96..ce77597 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -31,8 +31,12 @@
   <body class="profile">
     {{template "top" .}}
 
-    <div class="container_wrapper">
-      <div class="container">
+    <div
+      class="block sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0"
+    >
+      <div
+        class="flex w-full sm:w-8/12 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
+      >
         <header class="column columnA">
           <div
             class="info-wrapper"
diff --git a/templates/relay.html b/templates/relay.html
index a9427a8..c1aff9b 100644
--- a/templates/relay.html
+++ b/templates/relay.html
@@ -28,8 +28,12 @@
   <body class="profile">
     {{template "top" .}}
 
-    <div class="container_wrapper">
-      <div class="container">
+    <div
+      class="block sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0"
+    >
+      <div
+        class="flex w-full sm:w-8/12 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
+      >
         <div class="column columnA">
           <div class="info-wrapper">
             {{.Info.Name}}
diff --git a/templates/top.html b/templates/top.html
index d8c659e..8ac7077 100644
--- a/templates/top.html
+++ b/templates/top.html
@@ -1,5 +1,7 @@
 <header class="top">
-  <a href="https://nostr.com" class="nostr_link">What is <span>Nostr</span>?</a>
+  <a href="https://nostr.com" class="print:hidden text-md text-right basis-1/6"
+    >What is <span>Nostr</span>?</a
+  >
   <div
     class="theme-toggle"
     _="on click tell <html /> toggle between .theme--dark and .theme--default then get your @class then get it[0].split('--')[1].split(' ')[0] then set localStorage.theme to it