diff --git a/src/app/story/create/page.tsx b/src/app/story/create/page.tsx
new file mode 100644
index 0000000..1e2bf0b
--- /dev/null
+++ b/src/app/story/create/page.tsx
@@ -0,0 +1,5 @@
+import StoryForm from "app/ui/forms/story";
+
+export default function Page() {
+	return <StoryForm />
+}
diff --git a/src/app/ui/forms/genreCheckboxes.tsx b/src/app/ui/forms/genreCheckboxes.tsx
new file mode 100644
index 0000000..4732f65
--- /dev/null
+++ b/src/app/ui/forms/genreCheckboxes.tsx
@@ -0,0 +1,21 @@
+import prisma from "app/lib/db"
+import React from "react"
+import { letterCase } from "app/lib/functions"
+export default async function GenreCheckboxes() {
+	async function getGenres() {
+		"use server"
+		const genres = await prisma.genre.findMany()
+		return genres
+	}
+	const genres = await getGenres()
+	const genreCheckboxes = genres.map(e => {
+		const label = letterCase(e.name)
+		return (<React.Fragment key={`fragment${e.name}`}>
+			<input type="checkbox" id={e.name} key={`genreCheckboxInput${e.id}`} />
+			<label htmlFor={e.name} key={`genreCheckboxLabel${e.id}`}>{label}</label>
+		</React.Fragment>
+		)
+	})
+	return <>{genreCheckboxes}</>
+
+}
diff --git a/src/app/ui/forms/story.tsx b/src/app/ui/forms/story.tsx
new file mode 100644
index 0000000..a884059
--- /dev/null
+++ b/src/app/ui/forms/story.tsx
@@ -0,0 +1,10 @@
+import GenreCheckboxes from "./genreCheckboxes"
+export default async function StoryForm() {
+	return <form>
+		<label htmlFor="title">Title:</label>
+		<input type="text" id="title" />
+		<label htmlFor="word-count">Word Count:</label>
+		<input type="text" id="word-count" />
+		<GenreCheckboxes />
+	</form>
+}