diff --git a/assets/tailwind.config.ts b/assets/tailwind.config.ts
index c3573590..67fd9e3d 100644
--- a/assets/tailwind.config.ts
+++ b/assets/tailwind.config.ts
@@ -3,7 +3,7 @@ import type { Config } from "tailwindcss";
 import typographyPlugin from "@tailwindcss/typography";
 
 export default {
-  content: ["./source/**/*.twig"],
+  content: ["./source/**/*.{md,twig}"],
   theme: {
     colors: {
       black: "#000",
diff --git a/source/_includes/button.html.twig b/source/_includes/button.html.twig
new file mode 100644
index 00000000..f731e031
--- /dev/null
+++ b/source/_includes/button.html.twig
@@ -0,0 +1,5 @@
+<div class="not-prose">
+  <a class="inline-flex justify-center items-center py-3 px-6 w-full text-base font-medium text-white no-underline rounded-md duration-200 ease-in-out md:w-auto hover:bg-white focus:bg-white bg-blue-primary transition-color hover:text-blue-primary focus:text-blue-primary "href="{{ url }}">
+    {{ text }}
+  </a>
+</div>
diff --git a/source/_pages/subscription.md b/source/_pages/subscription.md
index e6f2e248..39640706 100644
--- a/source/_pages/subscription.md
+++ b/source/_pages/subscription.md
@@ -111,7 +111,12 @@ Great software is an iterative process. I'll keep iterating with you until you'r
       {% endfor %}
     </ul>
 
-    <a href="{{ plan.url }}">Register now for the {{ plan.name|lower }} plan</a>
+    <footer class="mt-6">
+      {% include 'button.html.twig' with {
+        text: 'Register now for the ' ~ plan.name|lower ~ ' plan',
+        url: plan.url,
+      } %}
+    </footer>
   </div>
 {% endfor %}