diff --git a/justfile b/justfile
index ae6823d..5fdf60e 100644
--- a/justfile
+++ b/justfile
@@ -10,8 +10,5 @@ deploy: build
 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
+    prettier -w templates/*.html
diff --git a/static/styles.css b/static/styles.css
deleted file mode 100644
index da7ee4f..0000000
--- a/static/styles.css
+++ /dev/null
@@ -1,120 +0,0 @@
-.column_content {
-  flex-grow: 0;
-  flex-shrink: 0;
-  word-wrap: break-word;
-}
-.column_content 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 #c9c9c9;
-  border-radius: 8px;
-}
-.column_content a.button:hover {
-  color: #ffffff;
-  background-color: #e32a6d;
-  border: 1px solid #e32a6d;
-}
-.column_content blockquote {
-  padding: 0.5rem 0 0.5rem 1rem;
-  margin: 2rem 0;
-  font-style: italic;
-}
-.theme--default .column_content blockquote {
-  border-left: 0.5rem solid #f3f3f3;
-}
-.theme--dark .column_content blockquote {
-  border-left: 0.5rem solid #2d2d2d;
-}
-.column_content blockquote.mention {
-  border-left: 0.5rem solid #e32a6d;
-  padding: 0rem 0 0.5rem 1rem;
-}
-.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 blockquote.mention div {
-  padding: 0.5rem 0.5rem 0.5rem 1rem;
-  margin: 0 0 1rem -1rem;
-  background-color: #2d2d2d;
-}
-.column_content blockquote p {
-  margin: 0 0 0.5rem 0;
-}
-.column_content cite {
-  font-size: 0.8em;
-}
-.column_content strong {
-  font-weight: 400;
-}
-.column_content ol,
-.column_content ul {
-  margin: 0;
-  padding: 0 0 0 1rem;
-}
-.column_content ol li,
-.column_content ul li {
-  margin-bottom: 0.5rem;
-}
-.column_content sup {
-  font-size: 0.6rem;
-  vertical-align: baseline;
-  position: relative;
-  top: -0.8em;
-  margin: 0 0.3rem 0 0.1rem;
-}
-.column_content hr {
-  display: none;
-}
-.column_content .footnotes {
-  padding-top: 1rem;
-  margin-top: 2rem;
-  font-size: 0.9rem;
-  line-height: 1.2rem;
-}
-.theme--default .column_content .footnotes {
-  border-top: 6px solid #f3f3f3;
-}
-.theme--dark .column_content .footnotes {
-  border-top: 6px solid #2d2d2d;
-}
-
-body.profile .column_content {
-  flex-basis: 50%;
-  max-width: 50%;
-}
-@media (max-width: 580px) {
-  body.profile .column_content {
-    flex-basis: 100%;
-    max-width: 100%;
-    margin-right: 0;
-  }
-}
-
-body.note .column_content,
-body.other .column_content {
-  flex-basis: 75%;
-  max-width: 75%;
-}
-@media (max-width: 580px) {
-  body.note .column_content,
-  body.other .column_content {
-    flex-basis: 100%;
-    max-width: 100%;
-    margin-right: 0;
-  }
-}
-@media print {
-  body.note .column_content,
-  body.other .column_content {
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-
-/*# sourceMappingURL=styles.css.map */
diff --git a/static/styles.scss b/static/styles.scss
deleted file mode 100644
index fa632da..0000000
--- a/static/styles.scss
+++ /dev/null
@@ -1,198 +0,0 @@
-$color-base1: #ffffff;
-$color-base2: #fafafa;
-$color-base3: #f3f3f3;
-$color-base4: #c9c9c9;
-$color-base5: #9a9a9a;
-$color-base6: #3d3d3d;
-$color-base7: #373737;
-$color-accent1: #e32a6d;
-$color-accent2: #bc1150;
-
-$themes: (
-  default: (
-    base1: $color-base1,
-    base2: $color-base2,
-    base3: $color-base3,
-    base4: $color-base4,
-    base5: $color-base5,
-    base6: $color-base6,
-    base7: $color-base7,
-    accent1: $color-accent1,
-    accent2: $color-accent2,
-    bg-up: $color-base1,
-    bg-down: $color-base2,
-    boxed-title: $color-base7,
-    boxed-bg-title: $color-base4,
-    boxed-bg: $color-base3,
-    over-bg: $color-base3,
-    theme-toggle: $color-base3,
-    hrefbg: lighten($color-accent1, 44%)
-  ),
-  dark: (
-    base1: $color-base7,
-    base2: $color-base6,
-    base3: $color-base5,
-    base4: darken($color-base4, 20%),
-    base5: $color-base3,
-    base6: $color-base2,
-    base7: $color-base2,
-    accent1: $color-accent1,
-    accent2: $color-accent2,
-    bg-up: darken($color-base6, 12%),
-    bg-down: darken($color-base7, 12%),
-    boxed-title: $color-base5,
-    boxed-bg-title: darken($color-base6, 14%),
-    boxed-bg: darken($color-base7, 14%),
-    over-bg: darken($color-base7, 4%),
-    theme-toggle: $color-base6,
-    hrefbg: darken($color-accent1, 38%)
-  )
-);
-
-$base1: 'base1';
-$base2: 'base2';
-$base3: 'base3';
-$base4: 'base4';
-$base5: 'base5';
-$base6: 'base6';
-$base7: 'base7';
-$accent1: 'accent1';
-$accent2: 'accent2';
-$bg-up: 'bg-up';
-$bg-down: 'bg-down';
-$boxed-title: 'boxed-title';
-$boxed-bg-title: 'boxed-bg-title';
-$boxed-bg: 'boxed-bg';
-$over-bg: 'over-bg';
-$theme-toggle: 'theme-toggle';
-$hrefbg: 'hrefbg';
-
-$theme-map: null;
-@mixin themed() {
-  @each $theme, $map in $themes {
-    .theme--#{$theme} & {
-      $theme-map: () !global;
-      @each $key, $submap in $map {
-        $value: map-get(map-get($themes, $theme), '#{$key}');
-        $theme-map: map-merge(
-          $theme-map,
-          (
-            $key: $value
-          )
-        ) !global;
-      }
-      @content;
-      $theme-map: null !global;
-    }
-  }
-}
-
-@function t($key) {
-  @return map-get($theme-map, $key);
-}
-
-.column_content {
-  flex-grow: 0;
-  flex-shrink: 0;
-  word-wrap: break-word;
-
-  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;
-    }
-  }
-  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;
-  }
-}
-
-body.profile {
-  .column_content {
-    flex-basis: 50%;
-    max-width: 50%;
-    @media (max-width: 580px) {
-      flex-basis: 100%;
-      max-width: 100%;
-      margin-right: 0;
-    }
-  }
-}
-
-body.note,
-body.other {
-  .column_content {
-    flex-basis: 75%;
-    max-width: 75%;
-    @media (max-width: 580px) {
-      flex-basis: 100%;
-      max-width: 100%;
-      margin-right: 0;
-    }
-    @media print {
-      flex-basis: 100%;
-      max-width: 100%;
-    }
-  }
-}
diff --git a/templates/archive.html b/templates/archive.html
index cf65131..a7972ea 100644
--- a/templates/archive.html
+++ b/templates/archive.html
@@ -7,7 +7,7 @@
     {{template "head_common" .}}
   </head>
 
-  <body class="profile | mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-stone-900">
+  <body class="mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-neutral-800">
     {{template "top" .}}
 
     <div
@@ -20,7 +20,7 @@
           <div class="text-2xl">{{.Title}}</div>
         </div>
 
-        <div class="column column_content">
+        <div class="break-words w-full sm:w-1/2 print:w-full break-all">
           <div class="leading-5 mb-6">
             <h1 class="text-xl">{{.Title}}</h1>
           </div>
diff --git a/templates/footer.html b/templates/footer.html
index 4654a4f..c2fb254 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,5 +1,5 @@
 <div
-  class="fixed overflow-hidden -z-10 inset-y-64 -inset-x-24 bg-gray-50 dark:bg-stone-800 w-[200%] h-full -rotate-12 print:hidden"
+  class="fixed overflow-hidden -z-10 inset-y-64 -inset-x-24 bg-gray-50 dark:bg-neutral-900 w-[200%] h-full -rotate-12 print:hidden"
 ></div>
 
 <footer class="mb-4 mt-6 text-gray-400 text-sm text-center">
diff --git a/templates/head_common.html b/templates/head_common.html
index eccd69b..5303efe 100644
--- a/templates/head_common.html
+++ b/templates/head_common.html
@@ -1,5 +1,4 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<link rel="stylesheet" href="/njump/static/styles.css?v=20230914" />
 
 {{if .IsProfile}}
 <link
diff --git a/templates/note.html b/templates/note.html
index 217091b..62beae1 100644
--- a/templates/note.html
+++ b/templates/note.html
@@ -53,7 +53,7 @@
   </head>
 
   <body
-    class="note | mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-stone-900"
+    class="mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-neutral-800"
   >
     {{template "top" .}}
 
@@ -61,7 +61,7 @@
       <div
         class="sm:flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
       >
-        <div class="column column_content">
+        <div class="break-words w-full sm:w-9/12 print:w-full">
           <header class="max-w-full mb-4">
             <a class="flex items-center flex-wrap" href="/{{.Npub}}">
               <div
@@ -99,7 +99,7 @@
           ></div>
 
           <article
-            class="leading-5 mb-6 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 prose-blockquote:mx-0 prose-blockquote:my-8 prose-blockquote:pl-4 prose-blockquote:pr-0 prose-blockquote:py-2 prose-blockquote:border-l-8 prose-blockquote:border-solid prose-blockquote:border-l-gray-100 dark:prose-blockquote:border-l-zinc-800 prose-p:m-0 prose-p:mb-2 prose-cite:text-sm prose-ul:m-0 prose-ul:p-0 prose-ul:pl-4 prose-ol:m-0 prose-ol:p-0 prose-ol:pl-4 prose-li:mb-2 prose"
           >
             {{ if (not (eq "" .Subject))}}
             <h1 class="text-2xl">{{.Subject}}</h1>
diff --git a/templates/other.html b/templates/other.html
index 0081217..38a251d 100644
--- a/templates/other.html
+++ b/templates/other.html
@@ -13,7 +13,7 @@
   </head>
 
   <body
-    class="other | mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-stone-900"
+    class="mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-neutral-800"
   >
     {{template "top" .}}
 
@@ -23,7 +23,7 @@
       <div
         class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
       >
-        <div class="column column_content">
+        <div class="break-words w-full sm:w-9/12 print:w-full">
           <header class="">
             <div class="text-2xl mb-4">{{.KindDescription}}</div>
           </header>
diff --git a/templates/profile.html b/templates/profile.html
index d85119e..268189e 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -29,7 +29,7 @@
   </head>
 
   <body
-    class="profile | mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-stone-900"
+    class="mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-neutral-800"
   >
     {{template "top" .}}
 
@@ -60,7 +60,7 @@
           </div>
         </header>
 
-        <div class="column column_content">
+        <div class="break-words w-full sm:w-1/2 print:w-full">
           <header class="leading-5 mb-6 hidden sm:flex sm:items-center">
             <h1>
               <div id="profile_name" class="text-2xl">{{.Metadata.Name}}</div>
@@ -106,7 +106,11 @@
           <div class="leading-5 mb-6">
             <div class="text-sm text-strongpink">Posting on these relays</div>
             {{range $index, $element := .AuthorRelays}}
-            <a href="/r/{{$element}}" class="button">{{$element}}</a>
+            <a
+              href="/r/{{$element}}"
+              class="inline-block max-w-full border mr-1 mt-2.5 px-2 py-0.5 rounded-lg border-slate-300 hover:text-white hover:bg-strongpink hover:border hover:border-solid hover:border-strongpink"
+              >{{$element}}</a
+            >
             {{end}}
           </div>
           {{ end }}
diff --git a/templates/relay.html b/templates/relay.html
index e89b299..6f094f7 100644
--- a/templates/relay.html
+++ b/templates/relay.html
@@ -26,7 +26,7 @@
   </head>
 
   <body
-    class="profile | mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-stone-900"
+    class="mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-neutral-800"
   >
     {{template "top" .}}
 
@@ -50,7 +50,7 @@
           </div>
         </div>
 
-        <div class="column column_content">
+        <div class="break-words w-full sm:w-1/2 print:w-full">
           <header class="leading-5 mb-6 hidden sm:flex sm:items-center">
             <h1>
               <div id="relay_name" class="text-2xl">{{.Info.Name}}</div>
diff --git a/utils.go b/utils.go
index 1ca3395..a7ddcb5 100644
--- a/utils.go
+++ b/utils.go
@@ -312,7 +312,7 @@ func renderQuotesAsHTML(ctx context.Context, input string, usingTelegramInstantV
 		}
 
 		content := fmt.Sprintf(
-			`<blockquote class="mention"><div>quoting %s </div> %s </blockquote>`, match, event.Content)
+			`<blockquote class="pl-4 pr-0 pt-0 pb-2 border-l-8 border-l-strongpink border-solid"><div class="-ml-4 bg-gray-100 dark:bg-zinc-800 mr-0 mt-0 mb-4 pl-4 pr-2 py-2">quoting %s </div> %s </blockquote>`, match, event.Content)
 		return basicFormatting(content, false, usingTelegramInstantView)
 	})
 }