diff --git a/static/button.css b/static/button.css
new file mode 100644
index 0000000..801c434
--- /dev/null
+++ b/static/button.css
@@ -0,0 +1,29 @@
+.btn {
+  text-decoration: none;
+  border-radius: 5px;
+  border: 1px solid;
+  color: var(--text-color-dark);
+  border-color: var(--border-color-light);
+  background-color: var(--bg-light);
+  padding: 0.25em 0.5em;
+  font-weight: bold;
+  font-size: var(--font-size-base);
+
+  &:hover {
+    color: var(--color-brand-blue-3);
+    border-color: var(--color-brand-blue-3);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .btn {
+    color: var(--text-color-light);
+    border-color: var(--border-color-dark);
+    background-color: var(--bg-dark);
+
+    &:hover {
+      color: var(--color-brand-complement);
+      border-color: var(--color-brand-complement);
+    }
+  }
+}
diff --git a/static/card.css b/static/card.css
new file mode 100644
index 0000000..6f741be
--- /dev/null
+++ b/static/card.css
@@ -0,0 +1,170 @@
+.card_content {
+  & .invisible {
+    display: none;
+  }
+
+  & .emoji {
+    display: inline;
+    height: calc(1rem + 6px);
+    margin-bottom: -4px;
+  }
+
+  & .ellipsis::after {
+    content: "...";
+  }
+
+  & .body {
+    .hashtag:not(.pill),
+    .mention:not(.pill) {
+      color: var(--text-color-dark-faded);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    & code {
+      font-size: var(--font-size-sm);
+      background: rgb(245, 242, 240);
+      padding: 0.25em 0.3em;
+      border-radius: 5px;
+      display: inline-block;
+      vertical-align: text-bottom;
+    }
+
+    & a:has(.link_card) {
+      text-decoration: none;
+    }
+
+    & .media,
+    & .link_card {
+      border: 1px solid rgba(34, 34, 34, 0.15);
+      border-radius: 5px;
+      box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
+      max-width: 100%;
+      margin: 15px 0 1em;
+      object-fit: contain;
+      height: auto;
+      text-decoration: none;
+      text-wrap: balance;
+    }
+
+    & .media:hover,
+    & .link_card:hover {
+      color: var(--color-link);
+      text-decoration-color: var(--color-link);
+      border-color: var(--color-link);
+    }
+
+    & p {
+      margin-bottom: 1em;
+    }
+  }
+
+  & .heading {
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 5px;
+    height: 20px;
+
+    & .author {
+      font-size: var(--font-size-lg);
+    }
+
+    & .right_menu {
+      font-size: var(--font-size-sm);
+      text-align: right;
+
+      & a,
+      & span {
+        line-height: 36px;
+      }
+
+      & a {
+        color: var(--text-color-dark-faded);
+        text-decoration: none;
+
+        &:hover {
+          color: var(--color-link);
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  & .link_card {
+    color: var(--text-color-dark-faded);
+    text-decoration: underline;
+    text-decoration-color: var(--text-color-light-faded);
+
+    & strong,
+    & small {
+      text-decoration-thickness: 1px;
+      display: block;
+    }
+
+    padding: 1rem;
+  }
+}
+
+article.card {
+  /* border-bottom: 1px solid;
+  border-color: var(--border-color-light);
+ */
+
+  & .bottom-menu {
+    padding: 1em 0;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .card_content {
+    & .action {
+      color: var(--color-brand-complement);
+    }
+
+    & .heading .right_menu a {
+      color: var(--text-color-light-faded);
+
+      &:hover {
+        color: var(--color-brand-complement);
+      }
+    }
+
+    & .body {
+      .hashtag:not(.pill),
+      .mention:not(.pill) {
+        color: var(--text-color-light-faded);
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      code {
+        background: rgb(45, 51, 59);
+        color: rgb(197, 209, 222);
+      }
+
+      & .media,
+      & .link_card {
+        border: 1px solid rgba(197, 209, 222, 0.15);
+        color: var(--text-color-light-faded);
+        background: var(--bg-dark);
+      }
+
+      & .media:hover,
+      & .link_card:hover {
+        color: var(--color-brand-complement);
+        text-decoration-color: var(--color-brand-complement);
+        border-color: var(--color-brand-complement);
+      }
+    }
+  }
+
+  /* article.card {
+    border-color: var(--border-color-dark);
+  } */
+}
diff --git a/static/pills.css b/static/pills.css
index 03fc910..c3ed8a5 100644
--- a/static/pills.css
+++ b/static/pills.css
@@ -3,18 +3,18 @@
   & .pill {
     border-radius: 5px;
     border: 1px solid;
-    border-color: rgba(197, 209, 222, 0.25);
-    background-color: rgba(197, 209, 222, 0.15);
+    border-color: var(--border-color-light);
+    background-color: var(--bg-light);
     margin-bottom: 0.5em;
-    padding: 0.25em 1em;
+    padding: 0.25em 0.5em;
     display: inline-block;
     font-size: var(--font-size-sm);
     color: var(--text-color-dark-faded);
     text-decoration: none;
 
     &:hover {
-      color: var(--color-link);
-      border: 1px solid var(--color-link);
+      color: var(--color-brand-blue-3);
+      border: 1px solid var(--color-brand-blue-3);
     }
 
     & .pill-label {
@@ -32,8 +32,8 @@
     & .pill {
       color: var(--text-color-light-faded);
       border: 1px solid;
-      border-color: rgba(0, 0, 0, 0.25);
-      background-color: rgba(0, 0, 0, 0.15);
+      border-color: var(--border-color-dark);
+      background-color: var(--bg-dark);
       text-decoration: none;
 
       &:hover {
@@ -44,12 +44,24 @@
   }
 }
 
-.featured-tags .pill {
-  color: var(--text-color-dark);
+.featured-tags {
+  & strong small {
+    color: var(--text-color-dark-faded);
+  }
+
+  & .pill {
+    color: var(--text-color-dark);
+  }
 }
 
 @media (prefers-color-scheme: dark) {
-  .featured-tags .pill {
-    color: var(--text-color-light);
+  .featured-tags {
+    & strong small {
+      color: var(--text-color-light-faded);
+    }
+
+    & .pill {
+      color: var(--text-color-light);
+    }
   }
 }
diff --git a/static/variables.css b/static/variables.css
index 8efe5ba..182f347 100644
--- a/static/variables.css
+++ b/static/variables.css
@@ -1,28 +1,31 @@
 :root {
-	--content-width: 700px;
-	--font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem);
-	--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
-	--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
-	--font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
+  --content-width: 700px;
+  --font-size-sm: clamp(0.75rem, 0.2vw + 0.66rem, 0.8rem);
+  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
+  --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
+  --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
 
-	--color-border: hsl(17, 24%, 90%);
-	--color-link: var(--color-brand-blue-5);
+  --color-border: hsl(17, 24%, 90%);
+  --color-link: var(--color-brand-blue-5);
 
-	--color-brand-blue-1: #3054bf;
-	--color-brand-blue-2: #203880;
-	--color-brand-blue-3: #416fff;
-	--color-brand-blue-4: #101c40;
-	--color-brand-blue-5: #3964e6;
+  --color-brand-blue-1: #3054bf;
+  --color-brand-blue-2: #203880;
+  --color-brand-blue-3: #416fff;
+  --color-brand-blue-4: #101c40;
+  --color-brand-blue-5: #3964e6;
 
-	--color-brand-complement: orange;
+  --color-brand-complement: orange;
 
-	--ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
-	--text-color-dark: #232323;
-	--text-color-dark-faded: #555;
-	--text-color-light: #f8f9fa;
-	--text-color-light-faded: #999;
+  --ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
+  --text-color-dark: #232323;
+  --text-color-dark-faded: #555;
+  --text-color-light: #f8f9fa;
+  --text-color-light-faded: #999;
 
-	--bg-dark: #343a40;
-	--bg-darker: #212529;
-	--bg-darkest: #000;
+  --border-color-light: rgba(197, 209, 222, 0.7);
+  --bg-light: rgba(197, 209, 222, 0.15);
+  --border-color-dark: rgba(0, 0, 0, 0.25);
+  --bg-dark: #343a40;
+  --bg-darker: #212529;
+  --bg-darkest: #000;
 }
diff --git a/templates/_home.html b/templates/_home.html
index b63c1c9..b6cae97 100644
--- a/templates/_home.html
+++ b/templates/_home.html
@@ -18,15 +18,6 @@
   <meta property="og:site_name" content="{{ app.site_name }}" />
   <meta property="og:title" content="{{ app.title }}" />
 
-  {% include "import-map.html" %}
-
-  <!-- Use parent app's variables & reset stylesheets -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
-  <link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
-
-  <!-- threads specific static css-->
-  <link rel="stylesheet" href="{{ url_for('threads.static', filename='pills.css') }}" />
-
   <style>
     html {
       scroll-behavior: smooth;
@@ -39,7 +30,6 @@
       color: var(--text-color-dark);
       font-size: var(--font-size-base);
       display: grid;
-      padding: 0 1em;
       gap: 1em;
 
       a {
@@ -149,6 +139,15 @@
 
     }
   </style>
+
+  <!-- Use parent app's variables & reset stylesheets -->
+  <link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
+  <link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
+
+  <!-- threads specific static css-->
+  {% include "styles.html" %}
+
+  {% include "import-map.html" %}
 </head>
 
 <body>
@@ -168,7 +167,7 @@
     {% endwith %}
     {% endif %}
     <div class="back">
-      <a href="{{url_for('threads.home')}}">Back</a>
+      <a class="btn" href="{{url_for('threads.home')}}">&larr; Back</a>
     </div>
     {% for thread in threads %}
     {% with thread=thread, parent_id=thread.id, is_thread=threads|length > 1, server=app.server %}
@@ -182,7 +181,7 @@
     {% endfor %}
     {% endif %}
     {% endfor %}
-    <a href="#top">Top</a>
+    <a class="btn" href="#top">&uarr; Top</a>
   </main>
   <footer>
     <p>
diff --git a/templates/_tag.html b/templates/_tag.html
index 996c141..ad36fbe 100644
--- a/templates/_tag.html
+++ b/templates/_tag.html
@@ -18,14 +18,6 @@
   <meta property="og:site_name" content="{{ app.site_name }}" />
   <meta property="og:title" content="{{ app.title }} / {{ tag }}" />
 
-  {% include "import-map.html" %}
-
-  <!-- Use parent app's variables & reset stylesheets -->
-  <link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
-  <link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
-
-  <!-- threads specific static css-->
-  <link rel="stylesheet" href="{{ url_for('threads.static', filename='pills.css') }}" />
 
   <style>
     html {
@@ -39,7 +31,6 @@
       color: var(--text-color-dark);
       font-size: var(--font-size-base);
       display: grid;
-      padding: 0 1em;
       gap: 1em;
 
       a {
@@ -143,6 +134,15 @@
       }
     }
   </style>
+
+  <!-- Use parent app's variables & reset stylesheets -->
+  <link rel="stylesheet" href="{{ url_for('static', filename='variables.css') }}" />
+  <link rel="stylesheet" href="{{ url_for('static', filename='reset.css') }}" />
+
+  <!-- threads specific static css-->
+  {% include "styles.html" %}
+
+  {% include "import-map.html" %}
 </head>
 
 <body>
@@ -161,7 +161,7 @@
     {% endwith %}
     {% endif %} -->
     <div class="back">
-      <a href="{{url_for('threads.home')}}">Back</a>
+      <a class="btn" href="{{url_for('threads.home')}}">&larr; Back</a>
     </div>
     <h2>{{ tag }}</h2>
     {% for thread in threads %}
@@ -176,7 +176,7 @@
     {% endfor %}
     {% endif %}
     {% endfor %}
-    <a href="#top">Top</a>
+    <a class="btn" href="#top">&uarr; Top</a>
   </main>
   <footer>
     <p>
diff --git a/templates/card.html b/templates/card.html
index 61250aa..f9cbf87 100644
--- a/templates/card.html
+++ b/templates/card.html
@@ -1,165 +1,3 @@
-<style>
-  .card_content {
-
-    & .invisible {
-      display: none;
-    }
-
-    & .emoji {
-      display: inline;
-      height: calc(1rem + 6px);
-      margin-bottom: -4px;
-    }
-
-    & .ellipsis::after {
-      content: '...'
-    }
-
-    & .body {
-
-      .hashtag:not(.pill),
-      .mention:not(.pill) {
-        color: var(--text-color-dark-faded);
-        text-decoration: none;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      & code {
-        font-size: var(--font-size-sm);
-        background: rgb(245, 242, 240);
-        padding: 0.25em 0.3em;
-        border-radius: 5px;
-        display: inline-block;
-        vertical-align: text-bottom;
-      }
-
-      & a:has(.link_card) {
-        text-decoration: none
-      }
-
-      & .media,
-      & .link_card {
-        border: 1px solid rgba(34, 34, 34, 0.15);
-        border-radius: 5px;
-        box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
-        max-width: 100%;
-        margin: 15px 0 1em;
-        object-fit: contain;
-        height: auto;
-        text-decoration: none;
-        text-wrap: balance;
-      }
-
-      & .media:hover,
-      & .link_card:hover {
-        color: var(--color-link);
-        text-decoration-color: var(--color-link);
-        border-color: var(--color-link);
-      }
-
-      & p {
-        margin-bottom: 1em;
-      }
-    }
-
-    & .heading {
-
-      display: grid;
-      grid-template-columns: auto auto;
-      gap: 5px;
-      height: 20px;
-
-      & .author {
-        font-size: var(--font-size-lg)
-      }
-
-      & .right_menu {
-        font-size: var(--font-size-sm);
-        text-align: right;
-
-        & a,
-        & span {
-          line-height: 36px;
-        }
-
-        & a {
-          color: var(--text-color-dark);
-
-          &:hover {
-            color: var(--color-link);
-          }
-        }
-      }
-
-    }
-
-    & .link_card {
-      color: var(--text-color-dark-faded);
-      text-decoration: underline;
-      text-decoration-color: var(--text-color-light-faded);
-
-      & strong,
-      & small {
-        text-decoration-thickness: 1px;
-        display: block;
-      }
-
-      padding: 1rem;
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .card_content {
-
-      & .action {
-        color: var(--color-brand-complement);
-      }
-
-      & .heading .right_menu a {
-        color: var(--text-color-light);
-
-        &:hover {
-          color: var(--color-brand-complement);
-        }
-      }
-
-      & .body {
-
-        .hashtag:not(.pill),
-        .mention:not(.pill) {
-          color: var(--text-color-light-faded);
-          text-decoration: none;
-
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-
-        code {
-          background: rgb(45, 51, 59);
-          color: rgb(197, 209, 222);
-        }
-
-        & .media,
-        & .link_card {
-          border: 1px solid rgba(197, 209, 222, 0.15);
-          color: var(--text-color-light-faded);
-          background: var(--bg-dark);
-        }
-
-        & .media:hover,
-        & .link_card:hover {
-          color: var(--color-brand-complement);
-          text-decoration-color: var(--color-brand-complement);
-          border-color: var(--color-brand-complement);
-        }
-      }
-    }
-  }
-</style>
 <article class="card">
   <div class="card_avatar">
     {% if thread.account.avatar is defined %}
@@ -219,6 +57,8 @@
 
     </div>
     {% if is_thread and not is_tag %}
-    <a href="{{ url_for('threads.thread', id=thread.id) }}">Read full thread</a>
+    <div class="bottom-menu">
+      <a class="btn" href="{{ url_for('threads.thread', id=thread.id) }}">Read full thread &rarr;</a>
+    </div>
     {% endif %}
 </article>
\ No newline at end of file
diff --git a/templates/styles.html b/templates/styles.html
new file mode 100644
index 0000000..4358698
--- /dev/null
+++ b/templates/styles.html
@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="{{ url_for('threads.static', filename='pills.css') }}" />
+<link rel="stylesheet" href="{{ url_for('threads.static', filename='card.css') }}" />
+<link rel="stylesheet" href="{{ url_for('threads.static', filename='button.css') }}" />
\ No newline at end of file
diff --git a/templates/tag-pills.html b/templates/tag-pills.html
index d367388..43b5f39 100644
--- a/templates/tag-pills.html
+++ b/templates/tag-pills.html
@@ -1,4 +1,7 @@
 <div class="featured-tags">
+    <div>
+        <strong><small>Featured tags</small></strong>
+    </div>
     {% for tag in tags %}
     <a class="hashtag pill" href="{{url_for('threads.tag', id=tag.name) }}">
         {{ tag.name }}