diff --git a/frontend/src/lib/components/PronounLink.svelte b/frontend/src/lib/components/PronounLink.svelte
index bd73bf6..983a405 100644
--- a/frontend/src/lib/components/PronounLink.svelte
+++ b/frontend/src/lib/components/PronounLink.svelte
@@ -12,11 +12,14 @@
     else pronounText = split.slice(0, 2).join("/");
   }
 
+  const link = pronouns.display_text
+    ? `${pronouns.pronouns},${pronouns.display_text}`
+    : pronouns.pronouns;
   const shouldLink = pronouns.pronouns.split("/").length === 5;
 </script>
 
 {#if shouldLink}
-  <a href="/pronouns/{pronouns.pronouns}">{pronounText}</a>
+  <a href="/pronouns/{link}">{pronounText}</a>
 {:else}
   {pronounText}
 {/if}
diff --git a/frontend/src/lib/pronouns.json b/frontend/src/lib/pronouns.json
new file mode 100644
index 0000000..ac48e89
--- /dev/null
+++ b/frontend/src/lib/pronouns.json
@@ -0,0 +1,12 @@
+{
+  "pronouns": {
+    "they": { "pronouns": ["they", "them", "their", "theirs", "themself"] },
+    "they/them": { "pronouns": ["they", "them", "their", "theirs", "themself"] },
+    "he": { "pronouns": ["he", "him", "his", "his", "himself"] },
+    "he/him": { "pronouns": ["he", "him", "his", "his", "himself"] },
+    "she": { "pronouns": ["she", "her", "her", "hers", "herself"] },
+    "she/her": { "pronouns": ["she", "her", "her", "hers", "herself"] },
+    "it": { "pronouns": ["it", "it", "its", "its", "itself"], "display": "it/its" },
+    "it/its": { "pronouns": ["it", "it", "its", "its", "itself"], "display": "it/its" }
+  }
+}
diff --git a/frontend/src/routes/pronouns/[...pronouns]/+page.svelte b/frontend/src/routes/pronouns/[...pronouns]/+page.svelte
new file mode 100644
index 0000000..32e40f8
--- /dev/null
+++ b/frontend/src/routes/pronouns/[...pronouns]/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { PageData } from "../../$types";
+
+  export let data: PageData;
+
+  const { subjective, objective, possessiveDeterminer, possessivePronoun, reflexive } = data;
+
+  const displayText = data.displayText || `${subjective}/${objective}`;
+</script>
+
+<h1>{displayText}</h1>
+
+<p>Here are some example sentences using <b>{displayText}</b> pronouns!</p>
+
+<blockquote class="blockquote">
+  <p><b class="text-capitalize">{subjective}</b> went to the park.</p>
+  <p>I went with <b>{objective}</b>.</p>
+  <p><b class="text-capitalize">{subjective}</b> brought <b>{possessiveDeterminer}</b> frisbee.</p>
+  <p>At least, I think it was <b>{possessivePronoun}</b>.</p>
+  <p>
+    <b class="text-capitalize">{objective}</b> threw the frisbee to
+    <b>{reflexive}</b>.
+  </p>
+</blockquote>
diff --git a/frontend/src/routes/pronouns/[...pronouns]/+page.ts b/frontend/src/routes/pronouns/[...pronouns]/+page.ts
new file mode 100644
index 0000000..8abd55c
--- /dev/null
+++ b/frontend/src/routes/pronouns/[...pronouns]/+page.ts
@@ -0,0 +1,42 @@
+import { error } from "@sveltejs/kit";
+import type { PageLoad } from "./$types";
+
+interface Pronouns {
+  [key: string]: { pronouns: string[]; display?: string };
+}
+
+export const load = (async ({ params }) => {
+  const [param, displayText] = params.pronouns.split(",");
+
+  const arr = param.split("/");
+  if (arr.length === 0 || params.pronouns === "") {
+    throw error(404, "Pronouns not found");
+  }
+
+  if (arr.length === 5) {
+    return {
+      displayText,
+      subjective: arr[0],
+      objective: arr[1],
+      possessiveDeterminer: arr[2],
+      possessivePronoun: arr[3],
+      reflexive: arr[4],
+    };
+  }
+
+  const pronouns: Pronouns = (await import("$lib/pronouns.json")).pronouns;
+
+  if (params.pronouns in pronouns) {
+    const entry = pronouns[params.pronouns];
+    return {
+      displayText: entry.display || "",
+      subjective: entry.pronouns[0],
+      objective: entry.pronouns[1],
+      possessiveDeterminer: entry.pronouns[2],
+      possessivePronoun: entry.pronouns[3],
+      reflexive: entry.pronouns[4],
+    };
+  }
+
+  throw error(404, "Pronouns not found");
+}) satisfies PageLoad;