diff --git a/app.js b/app.js
index 3c6fab8..4c35838 100644
--- a/app.js
+++ b/app.js
@@ -28,6 +28,12 @@ app.get('/', (req, res) => {
   res.render('home', { siteName, pageTitle, data } )
 })
 
+app.get('/list', (req, res) => {
+  const pageTitle = "List";
+  const pronounList = data.map(pronounObject => Object.values(pronounObject).join('/'))
+  res.render('list', { siteName, pageTitle, pronounList } )
+})
+
 app.get('/:nominative/:accusative/:predicative_possessive/:reflexive', (req, res) => {
   const {
     nominative,
diff --git a/src/app.css b/src/app.css
index 10d0ea0..5084e89 100644
--- a/src/app.css
+++ b/src/app.css
@@ -66,6 +66,26 @@ footer {
     background-color: var(--callout);
 }
 
+.button-cta {
+    background-color: var(--callout);
+    color: var(--text-shout);
+    border-bottom: 2px solid var(--text-shout);
+    border-left: 1px solid var(--text-shout);
+    border-radius: 1rem 0.5rem 1rem 0.5rem;
+    padding: 0.5rem 1rem;
+    display: inline-block;
+}
+
+.button-cta:not(:active) {
+    margin-bottom: 1px;
+    margin-left: 1px;
+}
+
+.button-cta:active {
+    border-top: 1px solid var(--text-shout);
+    border-right: 1px solid var(--text-shout);
+    transform: translate(-1px, 2px)
+}
 
 @media (min-width: 1024px) {
     .t-row:not(:last-child) {
@@ -75,4 +95,4 @@ footer {
         @apply border-r;
         border-color: var(--stroke);
     }
-}
\ No newline at end of file
+}
diff --git a/src/views/home.handlebars b/src/views/home.handlebars
index 9f40951..8dc4b6d 100644
--- a/src/views/home.handlebars
+++ b/src/views/home.handlebars
@@ -1,5 +1,8 @@
 <div class="flex flex-col gap-8">
   <h1 class="text-3xl">Howl your pronouns loud and proud</h1>
   <p class="md:w-1/2">Because while we are silly, your gender identity is important. Be your genuine self. Share how you are to be referred to by newer users of neopronouns or English language learners.</p>
+  <div>
+    <a href="/list" class="button-cta">View full database</a>
+  </div>
 </div>