diff --git a/src/components/CTAButton.astro b/src/components/CTAButton.astro
new file mode 100644
index 0000000..d56fbf8
--- /dev/null
+++ b/src/components/CTAButton.astro
@@ -0,0 +1,20 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  label: string;
+  href: string;
+}
+
+const { label, href } = Astro.props;
+---
+
+<a
+  href={href}
+  target="_blank"
+  rel="noopener"
+  class="bg-accent text-accent-contrast inline-flex w-full items-center justify-center gap-1 rounded-md px-4 py-2 text-center text-sm font-medium transition-opacity duration-200 hover:opacity-90 sm:w-auto sm:shrink-0"
+>
+  <Icon name="lucide:plus" aria-hidden="true" />
+  <span>{label}</span>
+</a>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index b1d598d..41d2aff 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -2,17 +2,28 @@
 import { getCollection } from 'astro:content';
 import Base from '../layouts/Base.astro';
 import Card from '../components/Card.astro';
+import CTAButton from '../components/CTAButton.astro';
 
 const projects = await getCollection('projects');
 projects.sort((a, b) => b.data.year - a.data.year);
 ---
 
 <Base title="Projects · Carleton Computer Science Showcase">
-  <h1 class="text-2xl font-bold tracking-tight">Projects</h1>
-  <p class="text-muted mt-1">
-    Projects built by Carleton Computer Science students.
-  </p>
+  <div
+    class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+  >
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight">Projects</h1>
+      <p class="text-muted mt-1">
+        Projects built by Carleton Computer Science students.
+      </p>
+    </div>
 
+    <CTAButton
+      label="Add a project"
+      href="https://github.com/CarletonComputerScienceSociety/showcase#adding-a-project"
+    />
+  </div>
   {
     /*
     FILTER BAR insertion point — "domain + year filter" ticket.
diff --git a/src/pages/webring.astro b/src/pages/webring.astro
index 45bfe49..6cac756 100644
--- a/src/pages/webring.astro
+++ b/src/pages/webring.astro
@@ -1,6 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 import Base from '../layouts/Base.astro';
+import CTAButton from '../components/CTAButton.astro';
 import RingGraph from '../components/RingGraph.astro';
 
 const members = await getCollection('webring');
@@ -11,11 +12,22 @@ const displayUrl = (url: string) =>
 ---
 
 <Base title="Webring · Carleton Computer Science Showcase">
-  <h1 class="text-2xl font-bold tracking-tight">Webring</h1>
-  <p class="text-muted mt-1">
-    Personal sites of Carleton Computer Science students, linked into a ring.
-  </p>
+  <div
+    class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+  >
+    <div>
+      <h1 class="text-2xl font-bold tracking-tight">Webring</h1>
+      <p class="text-muted mt-1">
+        Personal sites of Carleton Computer Science students, linked into a
+        ring.
+      </p>
+    </div>
 
+    <CTAButton
+      label="Join the webring"
+      href="https://github.com/CarletonComputerScienceSociety/showcase#joining-the-webring"
+    />
+  </div>
   {
     /*
     Two-column layout: directory table + graph panel. Stacks on mobile (table