diff --git a/content/archive/_index.md b/content/archive/_index.md
index 8406ec7..08c52cc 100644
--- a/content/archive/_index.md
+++ b/content/archive/_index.md
@@ -1,4 +1,5 @@
 +++
 sort_by = "date"
 template= "archive.html"
-+++
\ No newline at end of file
+paginate_by= 10
++++
diff --git a/sass/_codeblocks.scss b/sass/_codeblocks.scss
new file mode 100644
index 0000000..39aeb4b
--- /dev/null
+++ b/sass/_codeblocks.scss
@@ -0,0 +1,29 @@
+pre {
+    display: block;
+    padding: 0.25rem 1.25rem;
+    font-size: 85%;
+    border-left: 0.25rem solid var(--primary-accent-color);
+  }
+  
+  code {
+    padding: 0 0.4rem;
+    // background-color: #3c3836;
+    background-color: var(--inline-code-background-color);
+    /* Inline code blocks look less aggresive with a little rounding. */
+    border-radius: 2px;
+  }
+  
+  pre, code {
+    overflow: auto;
+    font-family: var(--default-mono-font);
+  }
+  
+  /* Without this the <code> tag gains a little padding that offsets text by like
+     2 pixels. Let's *not* do that. */
+  pre > code {
+    padding: 0;
+    background-color: var(--code-background-color);
+    // Code inside a pre block doesn't need rounded borders.
+    border-radius: unset;
+  }
+  
\ No newline at end of file
diff --git a/sass/_pagination.scss b/sass/_pagination.scss
new file mode 100644
index 0000000..a0b436f
--- /dev/null
+++ b/sass/_pagination.scss
@@ -0,0 +1,16 @@
+.pagination{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    list-style: none;
+
+    .page-item .disabled{
+        opacity: 0.5;
+        pointer-events: none;
+    }
+    
+    .page-numbers{
+        font-size: 0.9rem;
+        color: var(--link-color);
+    }
+}
\ No newline at end of file
diff --git a/sass/site.scss b/sass/site.scss
index 96f02a9..f6b85d8 100644
--- a/sass/site.scss
+++ b/sass/site.scss
@@ -5,10 +5,13 @@
    - Serve fonts from the local server rather than Google's API.
    - Support a "display title" in an [extra] section to allow for <br> elements
      or other manual control over title display. */
-
      @charset "utf-8";
+     @use '_pagination.scss';
+     @use '_codeblocks.scss';
+     
      @import url('https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif|Noto+Sans+Mono');
      
+     
      :root {
        /* Fonts and Text Sizes */
        --default-serif-font: "Noto Serif", serif;
@@ -165,37 +168,6 @@
        color: var(--muted-color);
      }
      
-     /* ---- Code blocks ---------------------------------------------------------*/
-     
-     pre {
-       display: block;
-       padding: 0.25rem 1.25rem;
-       font-size: 85%;
-       border-left: 0.25rem solid var(--primary-accent-color);
-     }
-     
-     code {
-       padding: 0 0.4rem;
-       // background-color: #3c3836;
-       background-color: var(--inline-code-background-color);
-       /* Inline code blocks look less aggresive with a little rounding. */
-       border-radius: 2px;
-     }
-     
-     pre, code {
-       overflow: auto;
-       font-family: var(--default-mono-font);
-     }
-     
-     /* Without this the <code> tag gains a little padding that offsets text by like
-        2 pixels. Let's *not* do that. */
-     pre > code {
-       padding: 0;
-       background-color: var(--code-background-color);
-       // Code inside a pre block doesn't need rounded borders.
-       border-radius: unset;
-     }
-     
      /* ---- Tables --------------------------------------------------------------*/
      
      table {
diff --git a/templates/archive.html b/templates/archive.html
index 2fe517b..20ce9f3 100644
--- a/templates/archive.html
+++ b/templates/archive.html
@@ -1,5 +1,6 @@
 {% extends "section.html" %}
 {% import "post_macros.html" as page_macros %}
+{% import "paginate.html" as paginate_macro %}
 {% block content %}
     <main id="content">
         <header>
@@ -22,6 +23,7 @@
                 </ul>
             </div>
         {% endfor %}
+        {% if paginator %}{{ paginate_macro::paginate() }}{% endif %}
     </main>
     {% include "footer.html" %}
 {% endblock content %}
diff --git a/templates/footer.html b/templates/footer.html
index 750503e..ce19d81 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -18,5 +18,4 @@
         <a href="https://github.com/andwati/andwati.com">Source</a>
         ⬡
         <a href="/rss.xml">Feed</a>
-    </p>
-</footer>
+    </footer>
diff --git a/templates/paginate.html b/templates/paginate.html
new file mode 100644
index 0000000..947d373
--- /dev/null
+++ b/templates/paginate.html
@@ -0,0 +1,25 @@
+{% macro paginate() %}
+    {% if paginator %}
+        <ul class="pagination">
+            {% if paginator.previous %}
+                <li class="page-item page-prev">
+                    <a href="{{ paginator.previous }}" class="page-link">← Prev</a>
+                </li>
+            {% else %}
+                <li class="page-item page-prev">
+                    <span class="page-link disabled" aria-disabled="true">← Prev</span>
+                </li>
+            {% endif %}
+            <li class="page-item page-numbers">{{ paginator.current_index }} of {{ paginator.number_pagers }}</li>
+            {% if paginator.next %}
+                <li class="page-item page-next">
+                    <a href="{{ paginator.next }}" class="page-link">Next →</a>
+                </li>
+            {% else %}
+                <li class="page-item page-next">
+                    <span class="page-link disabled" aria-disabled="trues">Next →</span>
+                </li>
+            {% endif %}
+        </ul>
+    {% endif %}
+{% endmacro paginate %}
diff --git a/templates/post_macros.html b/templates/post_macros.html
index db4befc..f971f8d 100644
--- a/templates/post_macros.html
+++ b/templates/post_macros.html
@@ -8,7 +8,7 @@
                 {%- if page.taxonomies.tags | length > 1 and loop.index != page.taxonomies.tags | length -%},{% endif %}
             {% endfor %}
         {% endif %}
-        <div class="accent">☕{{ page.reading_time }} minutes 📝 {{ page.word_count }}</div>
+        <div class="accent">☕ {{ page.reading_time }} minutes 📝 {{ page.word_count }}</div>
     </div>
 {% endmacro meta %}
 {% macro snippet(page) %}
diff --git a/templates/posts.html b/templates/posts.html
index f482016..420c75c 100644
--- a/templates/posts.html
+++ b/templates/posts.html
@@ -1,15 +1,18 @@
 {% extends "section.html" %}
 {% import "post_macros.html" as post_macros %}
+{% import "paginate.html" as paginate_macro %}
 {% block content %}
     <main id="content">
         <header>
             <h1>Posts</h1>
         </header>
         {% for page in paginator.pages %}{{ post_macros::snippet(page=page) }}{% endfor %}
-        <nav>
-            {% if paginator.previous %}<a href="{{ paginator.previous }}" class="previous">Previous</a>{% endif %}
-            {% if paginator.next %}<a href="{{ paginator.next }}" class="next">Next</a>{% endif %}
-        </nav>
+        <!--<div class="pagination">
+            {% if paginator.previous %}<a href="{{ paginator.previous }}" class="page-item previous">Previous</a>{% endif %}
+            {% if paginator.next %}<a href="{{ paginator.next }}" class="page-item  next">Next</a>{% endif %}
+        </div>
+-->
+        {% if paginator %}{{ paginate_macro::paginate() }}{% endif %}
     </main>
     {% include "footer.html" %}
 {% endblock content %}