diff --git a/static/styles.css b/static/styles.css
index e99bec5..da7ee4f 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,43 +1,3 @@
-
-html {
-  font-size: 19px;
-  font-weight: 300;
-}
-@media (max-width: 580px) {
-  html {
-    font-size: 18px;
-  }
-}
-@media print {
-  html {
-    font-size: 17px;
-    margin: 0;
-  }
-}
-
-body {
-  margin: 0;
-  margin-bottom: 4rem;
-}
-.theme--default body {
-  color: #373737;
-}
-.theme--dark body {
-  color: #fafafa;
-}
-.theme--default body {
-  background: #ffffff;
-}
-.theme--dark body {
-  background: #1e1e1e;
-}
-@media print {
-  body {
-    margin: 0;
-    color: #000000 !important;
-  }
-}
-
 .column_content {
   flex-grow: 0;
   flex-shrink: 0;
@@ -157,14 +117,4 @@ body.other .column_content {
   }
 }
 
-@media print {
-  @page {
-    margin: 2cm 3cm;
-  }
-  /* Safari specific styles */
-  body.safari {
-    margin: 1cm 3cm;
-  }
-}
-
 /*# sourceMappingURL=styles.css.map */
diff --git a/static/styles.scss b/static/styles.scss
index b268aeb..fa632da 100644
--- a/static/styles.scss
+++ b/static/styles.scss
@@ -91,33 +91,6 @@ $theme-map: null;
   @return map-get($theme-map, $key);
 }
 
-/*# sourceMappingURL=styles.css.map */
-html {
-  font-size: 19px;
-  font-weight: 300;
-  @media (max-width: 580px) {
-    font-size: 18px;
-  }
-  @media print {
-    font-size: 17px;
-    margin: 0;
-  }
-}
-body {
-  @include themed() {
-    color: t($base7);
-  }
-  @include themed() {
-    background: t($bg-up);
-  }
-  margin: 0;
-  margin-bottom: 4rem;
-  @media print {
-    margin: 0;
-    color: #000000 !important;
-  }
-}
-
 .column_content {
   flex-grow: 0;
   flex-shrink: 0;
@@ -223,13 +196,3 @@ body.other {
     }
   }
 }
-
-@media print {
-  @page {
-    margin: 2cm 3cm;
-  }
-  /* Safari specific styles */
-  body.safari {
-    margin: 1cm 3cm;
-  }
-}
diff --git a/templates/archive.html b/templates/archive.html
index 5cf9d8a..cf65131 100644
--- a/templates/archive.html
+++ b/templates/archive.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="theme--default">
+<html class="theme--default text-lg sm:text-xl font-light print:text-base">
   <meta charset="UTF-8" />
   <head>
     <title>{{.Title}}</title>
@@ -7,7 +7,7 @@
     {{template "head_common" .}}
   </head>
 
-  <body class="profile">
+  <body class="profile | mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-stone-900">
     {{template "top" .}}
 
     <div
diff --git a/templates/details.html b/templates/details.html
index 9e3f7e0..d8d2fc2 100644
--- a/templates/details.html
+++ b/templates/details.html
@@ -9,13 +9,13 @@
          remove .hidden from #hidden-fields
          tell the next <label /> from me
            add .bg-strongpink .after:translate-x-full
-           remove .bg-gray-300 .dark:bg-zinc
+           remove .bg-gray-300 .dark:bg-zinc-800
          end
        otherwise
          add .hidden to #hidden-fields
          tell the next <label /> from me
            remove .bg-strongpink .after:translate-x-full
-           add .bg-gray-300 .dark:bg-zinc
+           add .bg-gray-300 .dark:bg-zinc-800
          end
        end
     "
diff --git a/templates/footer.html b/templates/footer.html
index e023e0c..4654a4f 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-zinc-900 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-stone-800 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 204f26a..eccd69b 100644
--- a/templates/head_common.html
+++ b/templates/head_common.html
@@ -82,6 +82,16 @@
         rgba(0, 0, 0, 0) 100%
       );
     }
+    .safari {
+      margin: 1cm 3cm;
+    }
+  }
+</style>
+<style>
+  @media print {
+    @page {
+      margin: 2cm 3cm;
+    }
   }
 </style>
 
diff --git a/templates/note.html b/templates/note.html
index c84998d..217091b 100644
--- a/templates/note.html
+++ b/templates/note.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="theme--default">
+<html class="theme--default text-lg sm:text-xl font-light print:text-base">
   <meta charset="UTF-8" />
   <head>
     <title>{{.TitleizedContent}}</title>
@@ -52,7 +52,9 @@
     {{template "head_common" .}}
   </head>
 
-  <body class="note">
+  <body
+    class="note | mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-stone-900"
+  >
     {{template "top" .}}
 
     <div class="sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0">
@@ -72,22 +74,22 @@
                   {{.Metadata.Name}}
                   <!---->
                   {{if not (eq .Metadata.Name .Metadata.DisplayName)}}
-                  <span class="text-sm sm:text-xl text-slate-400"
+                  <span class="text-sm sm:text-xl text-stone-400"
                     >{{.Metadata.DisplayName}}</span
                   >
                   {{end}}
                 </div>
-                <div class="text-sm sm:text-base text-slate-400">
+                <div class="text-sm sm:text-base text-stone-400">
                   {{.NpubShort}}
                 </div>
               </div>
             </a>
           </header>
-          <div class="w-full text-right text-sm text-slate-400">
+          <div class="w-full text-right text-sm text-stone-400">
             {{.CreatedAt}}
           </div>
 
-          <div class="w-full text-right text-sm text-slate-400">
+          <div class="w-full text-right text-sm text-stone-400">
             {{ if not (eq "" .ParentLink) }} In reply to
             <span class="text-strongpink">{{ .ParentLink }}</span> {{ end }}
           </div>
diff --git a/templates/other.html b/templates/other.html
index d9eb7a0..0081217 100644
--- a/templates/other.html
+++ b/templates/other.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="theme--default">
+<html class="theme--default text-lg sm:text-xl font-light print:text-base">
   <meta charset="UTF-8" />
   <head>
     {{ if .IsParameterizedReplaceable }}
@@ -12,7 +12,9 @@
     {{template "head_common" .}}
   </head>
 
-  <body class="other">
+  <body
+    class="other | mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-stone-900"
+  >
     {{template "top" .}}
 
     <div
diff --git a/templates/profile.html b/templates/profile.html
index f2879a1..d85119e 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="theme--default">
+<html class="theme--default text-lg sm:text-xl font-light print:text-base">
   <meta charset="UTF-8" />
   <head>
     <title>{{.Metadata.Name}} / {{.Metadata.DisplayName}} is on nostr</title>
@@ -28,7 +28,9 @@
     {{template "head_common" .}}
   </head>
 
-  <body class="profile">
+  <body
+    class="profile | mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-stone-900"
+  >
     {{template "top" .}}
 
     <div class="sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0">
@@ -36,16 +38,16 @@
         class="w-full sm:flex sm:w-9/12 sm:px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
       >
         <header
-          class="flex items-center sm:items-start relative sm:sticky self-start basis-1/4 sm:mt-8 top-auto sm:top-8"
+          class="flex flex-col items-center sm:items-start relative sm:sticky self-start basis-1/4 sm:mt-8 top-auto sm:top-8"
         >
           <div
             class="text-left basis-2/3 overflow-hidden hidden flex items-center"
             _="on load or scroll from window or resize from window get #profile_name then measure its top, height then if top is less than height / -2 or height is 0 add .flex then remove .hidden otherwise remove .flex then add .hidden"
           >
-            <div>
-              <div class="text-2xl">{{.Metadata.Name}}</div>
+            <div class="mb-3">
+              <div class="text-2xl text-center">{{.Metadata.Name}}</div>
               {{if not (eq .Metadata.Name .Metadata.DisplayName)}}
-              <div class="text-xl text-slate-400">
+              <div class="text-base text-stone-400 text-center">
                 {{.Metadata.DisplayName}}
               </div>
               {{end}}
@@ -63,7 +65,7 @@
             <h1>
               <div id="profile_name" class="text-2xl">{{.Metadata.Name}}</div>
               {{if not (eq .Metadata.Name .Metadata.DisplayName)}}
-              <div class="text-xl text-slate-400">
+              <div class="text-xl text-stone-400">
                 {{.Metadata.DisplayName}}
               </div>
               {{end}}
diff --git a/templates/relay.html b/templates/relay.html
index a03229b..e89b299 100644
--- a/templates/relay.html
+++ b/templates/relay.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="theme--default">
+<html class="theme--default text-lg sm:text-xl font-light print:text-base">
   <meta charset="UTF-8" />
   <head>
     <title>Nostr Relay {{.Hostname}} - {{.Info.Name}}</title>
@@ -25,7 +25,9 @@
     {{template "head_common" .}}
   </head>
 
-  <body class="profile">
+  <body
+    class="profile | mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-stone-900"
+  >
     {{template "top" .}}
 
     <div class="sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0">
