diff --git a/.storybook/main.ts b/.storybook/main.ts
index 6addc407..429d8ad4 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,32 +1,32 @@
-import { type StorybookConfig } from "@storybook/nextjs";
-import { merge } from "merge-anything";
+import { type StorybookConfig } from '@storybook/nextjs'
+import { merge } from 'merge-anything'
 
-import { dirname, join } from "path";
+import { dirname, join } from 'path'
 
 const config: StorybookConfig = {
-	stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 	staticDirs: [
 		{
-			from: "../public",
-			to: "/",
+			from: '../public',
+			to: '/',
 		},
 	],
 	addons: [
-		getAbsolutePath("@storybook/addon-a11y"),
-		getAbsolutePath("@storybook/addon-links"),
-		getAbsolutePath("@storybook/addon-essentials"),
-		getAbsolutePath("@storybook/addon-interactions"),
+		getAbsolutePath('@storybook/addon-a11y'),
+		getAbsolutePath('@storybook/addon-links'),
+		getAbsolutePath('@storybook/addon-essentials'),
+		getAbsolutePath('@storybook/addon-interactions'),
 	],
 	framework: {
-		name: "@storybook/nextjs",
+		name: '@storybook/nextjs',
 		options: {},
 	},
 	docs: {
-		autodocs: "tag",
+		autodocs: 'tag',
 	},
 	typescript: {
 		check: true,
-		reactDocgen: "react-docgen-typescript", //'react-docgen-typescript',
+		reactDocgen: 'react-docgen-typescript', //'react-docgen-typescript',
 		reactDocgenTypescriptOptions: {
 			shouldExtractLiteralValuesFromEnum: true,
 			shouldExtractValuesFromUnion: true,
@@ -42,14 +42,14 @@ const config: StorybookConfig = {
 					// 'next-i18next': 'react-i18next',
 				},
 			},
-		};
-		const mergedConfig = merge(config, configAdditions);
-		return mergedConfig;
+		}
+		const mergedConfig = merge(config, configAdditions)
+		return mergedConfig
 	},
-};
+}
 
-export default config;
+export default config
 
 function getAbsolutePath(value: string): string {
-	return dirname(require.resolve(join(value, "package.json")));
+	return dirname(require.resolve(join(value, 'package.json')))
 }
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 14d43838..e01ec016 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,16 +1,16 @@
-import { Global, MantineProvider } from "@mantine/core";
-import { type MantineProviderProps } from "@mantine/core";
-import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
-import { type StoryFn } from "@storybook/react";
-import { type ReactNode } from "react";
-import { I18nextProvider } from "react-i18next";
+import { Global, MantineProvider } from '@mantine/core'
+import { type MantineProviderProps } from '@mantine/core'
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { type StoryFn } from '@storybook/react'
+import { type ReactNode } from 'react'
+import { I18nextProvider } from 'react-i18next'
 
-import { i18n, i18nLocales } from "./i18next";
-import { storybookFont } from "../src/styles";
-import { theme } from "../src/styles/theme";
+import { i18n, i18nLocales } from './i18next'
+import { storybookFont } from '../src/styles'
+import { theme } from '../src/styles/theme'
 
 export const parameters = {
-	layout: "centered",
+	layout: 'centered',
 	controls: {
 		matchers: {
 			color: /(background|color)$/i,
@@ -18,17 +18,17 @@ export const parameters = {
 		},
 	},
 	i18n,
-	locale: "en",
+	locale: 'en',
 	locales: i18nLocales,
 	viewport: {
 		viewports: INITIAL_VIEWPORTS,
 	},
-};
-const mantineProviderProps: Omit<MantineProviderProps, "children"> = {
+}
+const mantineProviderProps: Omit<MantineProviderProps, 'children'> = {
 	withCSSVariables: false,
 	withGlobalStyles: true,
 	withNormalizeCSS: false,
-};
+}
 
 const ThemeWrapper = ({ children }: DecoratorProps) => {
 	return (
@@ -38,8 +38,8 @@ const ThemeWrapper = ({ children }: DecoratorProps) => {
 			<I18nextProvider i18n={i18n}>{children}</I18nextProvider>
 			{/* </TypographyStylesProvider> */}
 		</MantineProvider>
-	);
-};
+	)
+}
 
 export const decorators = [
 	(Story: StoryFn) => (
@@ -47,8 +47,8 @@ export const decorators = [
 			<Story />
 		</ThemeWrapper>
 	),
-];
+]
 
 type DecoratorProps = {
-	children: ReactNode;
-};
+	children: ReactNode
+}
diff --git a/prisma/dataMigrationRunner.ts b/prisma/dataMigrationRunner.ts
index 10f72349..17572a98 100644
--- a/prisma/dataMigrationRunner.ts
+++ b/prisma/dataMigrationRunner.ts
@@ -8,9 +8,9 @@ import {
 	type ListrTaskWrapper,
 	PRESET_TIMER,
 	PRESET_TIMESTAMP,
-} from "listr2";
+} from 'listr2'
 
-import * as jobList from "./data-migrations";
+import * as jobList from './data-migrations'
 
 /**
  * Job Runner
@@ -22,18 +22,18 @@ const rendererOptions = {
 	outputBar: 10,
 	persistentOutput: true,
 	timer: PRESET_TIMER,
-} satisfies ListrJob["rendererOptions"];
+} satisfies ListrJob['rendererOptions']
 
 const injectOptions = (job: ListrJob): ListrJob => ({
 	...job,
 	rendererOptions,
-});
+})
 
 const jobs = new Listr<Context>(
 	Object.values(jobList).map((job) => injectOptions(job)),
 	{
 		rendererOptions: {
-			formatOutput: "wrap",
+			formatOutput: 'wrap',
 			timer: PRESET_TIMER,
 			suffixSkips: true,
 		},
@@ -42,21 +42,17 @@ const jobs = new Listr<Context>(
 			timestamp: PRESET_TIMESTAMP,
 		},
 		exitOnError: false,
-	},
-);
+	}
+)
 
-jobs.run();
+jobs.run()
 
 export type Context = {
-	error?: boolean;
-};
-export type PassedTask = ListrTaskWrapper<
-	Context,
-	ListrDefaultRenderer,
-	ListrDefaultRenderer
->;
-export type ListrJob = ListrTaskObj<Context, ListrDefaultRenderer>;
+	error?: boolean
+}
+export type PassedTask = ListrTaskWrapper<Context, ListrDefaultRenderer, ListrDefaultRenderer>
+export type ListrJob = ListrTaskObj<Context, ListrDefaultRenderer>
 export type ListrTask = (
 	ctx: Context,
-	task: PassedTask,
-) => void | Promise<void | Listr<Context, any, any>> | Listr<Context, any, any>;
+	task: PassedTask
+) => void | Promise<void | Listr<Context, any, any>> | Listr<Context, any, any>
diff --git a/src/server/api/routers/stories.ts b/src/server/api/routers/stories.ts
index 91d784e1..ed5a5abf 100644
--- a/src/server/api/routers/stories.ts
+++ b/src/server/api/routers/stories.ts
@@ -1,33 +1,33 @@
-import { z } from "zod";
+import { z } from 'zod'
 
-import { SurveySchema } from "~/pages/survey";
-import { crowdin } from "~/server/crowdin";
+import { SurveySchema } from '~/pages/survey'
+import { crowdin } from '~/server/crowdin'
 
-import { createTRPCRouter, publicProcedure } from "../trpc";
+import { createTRPCRouter, publicProcedure } from '../trpc'
 
 export const storyRouter = createTRPCRouter({
 	getStoryBySlug: publicProcedure
 		.input(
 			z.object({
 				publicSlug: z.string(),
-			}),
+			})
 		)
 		.query(async ({ ctx, input }) => {
 			const story = await ctx.prisma.story.findUniqueOrThrow({
 				where: { publicSlug: input.publicSlug },
 				include: { categories: { include: { category: true } } },
-			});
-			return story;
+			})
+			return story
 		}),
 	getStoryById: publicProcedure
 		.input(
 			z.object({
 				id: z.string(),
-				locale: z.enum(["en", "es"]),
-			}),
+				locale: z.enum(['en', 'es']),
+			})
 		)
 		.query(async ({ ctx, input }) => {
-			const isEN = input.locale === "en";
+			const isEN = input.locale === 'en'
 			if (isEN) {
 				const story = await ctx.prisma.story.findUniqueOrThrow({
 					where: { id: input.id, published: true },
@@ -51,9 +51,8 @@ export const storyRouter = createTRPCRouter({
 						},
 						pronouns: { select: { pronoun: { select: { pronounsEN: true } } } },
 					},
-				});
-				const { categories, pronouns, response1EN, response2EN, ...rest } =
-					story;
+				})
+				const { categories, pronouns, response1EN, response2EN, ...rest } = story
 				const formatted = {
 					...rest,
 					response1: response1EN,
@@ -70,8 +69,8 @@ export const storyRouter = createTRPCRouter({
 					pronouns: pronouns.map(({ pronoun }) => ({
 						pronoun: pronoun.pronounsEN,
 					})),
-				};
-				return formatted;
+				}
+				return formatted
 			}
 			const story = await ctx.prisma.story.findUniqueOrThrow({
 				where: { id: input.id, published: true },
@@ -95,8 +94,8 @@ export const storyRouter = createTRPCRouter({
 					},
 					pronouns: { select: { pronoun: { select: { pronounsES: true } } } },
 				},
-			});
-			const { categories, pronouns, response1ES, response2ES, ...rest } = story;
+			})
+			const { categories, pronouns, response1ES, response2ES, ...rest } = story
 			const formatted = {
 				...rest,
 				response1: response1ES,
@@ -113,8 +112,8 @@ export const storyRouter = createTRPCRouter({
 				pronouns: pronouns.map(({ pronoun }) => ({
 					pronoun: pronoun.pronounsES,
 				})),
-			};
-			return formatted;
+			}
+			return formatted
 		}),
 	// unpublishStory: protectedProcedure.input(z.object({ id: z.string() })).mutation(async ({ ctx, input }) => {
 	// 	const { id } = input
@@ -125,9 +124,9 @@ export const storyRouter = createTRPCRouter({
 	// 	})
 	// }),
 	getCategories: publicProcedure
-		.input(z.object({ locale: z.enum(["en", "es"]) }))
+		.input(z.object({ locale: z.enum(['en', 'es']) }))
 		.query(async ({ ctx, input }) => {
-			if (input.locale === "en") {
+			if (input.locale === 'en') {
 				const categories = await ctx.prisma.storyCategory.findMany({
 					select: {
 						categoryEN: true,
@@ -136,16 +135,14 @@ export const storyRouter = createTRPCRouter({
 						imageAltEN: true,
 						tag: true,
 					},
-					orderBy: { order: "asc" },
-				});
-				const formatted = categories.map(
-					({ categoryEN, imageAltEN, ...rest }) => ({
-						...rest,
-						category: categoryEN,
-						imageAlt: imageAltEN,
-					}),
-				);
-				return formatted;
+					orderBy: { order: 'asc' },
+				})
+				const formatted = categories.map(({ categoryEN, imageAltEN, ...rest }) => ({
+					...rest,
+					category: categoryEN,
+					imageAlt: imageAltEN,
+				}))
+				return formatted
 			}
 
 			const categories = await ctx.prisma.storyCategory.findMany({
@@ -156,27 +153,25 @@ export const storyRouter = createTRPCRouter({
 					imageAltES: true,
 					tag: true,
 				},
-				orderBy: { order: "asc" },
-			});
-			const formatted = categories.map(
-				({ categoryES, imageAltES, ...rest }) => ({
-					...rest,
-					category: categoryES,
-					imageAlt: imageAltES,
-				}),
-			);
-			return formatted;
+				orderBy: { order: 'asc' },
+			})
+			const formatted = categories.map(({ categoryES, imageAltES, ...rest }) => ({
+				...rest,
+				category: categoryES,
+				imageAlt: imageAltES,
+			}))
+			return formatted
 		}),
 	getByCategory: publicProcedure
 		.input(
 			z.object({
 				tag: z.string(),
 				take: z.number().optional(),
-				locale: z.enum(["en", "es"]),
-			}),
+				locale: z.enum(['en', 'es']),
+			})
 		)
 		.query(async ({ ctx, input }) => {
-			if (input.locale === "en") {
+			if (input.locale === 'en') {
 				const stories = await ctx.prisma.story.findMany({
 					where: {
 						published: true,
@@ -195,25 +190,23 @@ export const storyRouter = createTRPCRouter({
 						response2EN: true,
 					},
 					...(input.take ? { take: input.take } : {}),
-					orderBy: { createdAt: "desc" },
-				});
-				const formatted = stories.map(
-					({ categories, pronouns, response1EN, response2EN, ...rest }) => ({
-						...rest,
-						response1: response1EN,
-						response2: response2EN,
-						categories: categories.map(({ category }) => ({
-							category: {
-								id: category.id,
-								category: category.categoryEN,
-							},
-						})),
-						pronouns: pronouns.map(({ pronoun }) => ({
-							pronoun: pronoun.pronounsEN,
-						})),
-					}),
-				);
-				return formatted;
+					orderBy: { createdAt: 'desc' },
+				})
+				const formatted = stories.map(({ categories, pronouns, response1EN, response2EN, ...rest }) => ({
+					...rest,
+					response1: response1EN,
+					response2: response2EN,
+					categories: categories.map(({ category }) => ({
+						category: {
+							id: category.id,
+							category: category.categoryEN,
+						},
+					})),
+					pronouns: pronouns.map(({ pronoun }) => ({
+						pronoun: pronoun.pronounsEN,
+					})),
+				}))
+				return formatted
 			}
 			const stories = await ctx.prisma.story.findMany({
 				where: {
@@ -233,100 +226,93 @@ export const storyRouter = createTRPCRouter({
 					response2ES: true,
 				},
 				...(input.take ? { take: input.take } : {}),
-				orderBy: { createdAt: "desc" },
-			});
-			const formatted = stories.map(
-				({ categories, pronouns, response1ES, response2ES, ...rest }) => ({
-					...rest,
-					response1: response1ES,
-					response2: response2ES,
-					categories: categories.map(({ category }) => ({
-						category: {
-							id: category.id,
-							category: category.categoryES,
-						},
-					})),
-					pronouns: pronouns.map(({ pronoun }) => ({
-						pronoun: pronoun.pronounsES,
-					})),
-				}),
-			);
-			return formatted;
+				orderBy: { createdAt: 'desc' },
+			})
+			const formatted = stories.map(({ categories, pronouns, response1ES, response2ES, ...rest }) => ({
+				...rest,
+				response1: response1ES,
+				response2: response2ES,
+				categories: categories.map(({ category }) => ({
+					category: {
+						id: category.id,
+						category: category.categoryES,
+					},
+				})),
+				pronouns: pronouns.map(({ pronoun }) => ({
+					pronoun: pronoun.pronounsES,
+				})),
+			}))
+			return formatted
 		}),
-	submit: publicProcedure
-		.input(SurveySchema())
-		.mutation(async ({ ctx, input }) => {
-			const submission = await ctx.prisma.storySubmission.create({
-				data: {
-					responses: input,
-					userId: "noUserId",
+	submit: publicProcedure.input(SurveySchema()).mutation(async ({ ctx, input }) => {
+		const submission = await ctx.prisma.storySubmission.create({
+			data: {
+				responses: input,
+				userId: 'noUserId',
+			},
+			select: {
+				id: true,
+			},
+		})
+		const storyRecord = await ctx.prisma.story.create({
+			data: {
+				name: input.q4,
+				response1EN: input.q8,
+				response2EN: input.q9,
+				categories: {
+					create: input.q5.map((tag) => ({ category: { connect: { tag } } })),
 				},
-				select: {
-					id: true,
+				pronouns: {
+					create: input.q7.map((tag) => ({ pronoun: { connect: { tag } } })),
 				},
-			});
-			const storyRecord = await ctx.prisma.story.create({
-				data: {
-					name: input.q4,
-					response1EN: input.q8,
-					response2EN: input.q9,
-					categories: {
-						create: input.q5.map((tag) => ({ category: { connect: { tag } } })),
-					},
-					pronouns: {
-						create: input.q7.map((tag) => ({ pronoun: { connect: { tag } } })),
-					},
-					published: false,
-				},
-			});
+				published: false,
+			},
+		})
 
-			const crowdinAdditions: CrowdinBatchAdd[] = [];
-			if (storyRecord.response1EN) {
-				crowdinAdditions.push({
-					op: "add",
-					path: "/-",
-					value: {
-						text: storyRecord.response1EN,
-						identifier: `${storyRecord.id}.response1`,
-						fileId: 2653,
-						context: `Submitter's Name: "${input.q4}" | Pronouns: "${input.q7.join("/")}"`,
-					},
-				});
-			}
-			if (storyRecord.response2EN) {
-				crowdinAdditions.push({
-					op: "add",
-					path: "/-",
-					value: {
-						text: storyRecord.response2EN,
-						identifier: `${storyRecord.id}.response2`,
-						fileId: 2653,
-						context: `Submitter's Name: "${input.q4}" | Pronouns: "${input.q7.join("/")}"`,
-					},
-				});
-			}
+		const crowdinAdditions: CrowdinBatchAdd[] = []
+		if (storyRecord.response1EN) {
+			crowdinAdditions.push({
+				op: 'add',
+				path: '/-',
+				value: {
+					text: storyRecord.response1EN,
+					identifier: `${storyRecord.id}.response1`,
+					fileId: 2653,
+					context: `Submitter's Name: "${input.q4}" | Pronouns: "${input.q7.join('/')}"`,
+				},
+			})
+		}
+		if (storyRecord.response2EN) {
+			crowdinAdditions.push({
+				op: 'add',
+				path: '/-',
+				value: {
+					text: storyRecord.response2EN,
+					identifier: `${storyRecord.id}.response2`,
+					fileId: 2653,
+					context: `Submitter's Name: "${input.q4}" | Pronouns: "${input.q7.join('/')}"`,
+				},
+			})
+		}
 
-			if (crowdinAdditions.length) {
-				try {
-					await crowdin.sourceStringsApi.stringBatchOperations(
-						14,
-						crowdinAdditions,
-					);
-				} catch (e) {
-					console.error(e);
-				}
+		if (crowdinAdditions.length) {
+			try {
+				await crowdin.sourceStringsApi.stringBatchOperations(14, crowdinAdditions)
+			} catch (e) {
+				console.error(e)
 			}
-			return submission;
-		}),
-});
+		}
+		return submission
+	}),
+})
 
 type CrowdinBatchAdd = {
-	op: "add";
-	path: string;
+	op: 'add'
+	path: string
 	value: {
-		text: string;
-		identifier: string;
-		fileId: number;
-		context?: string;
-	};
-};
+		text: string
+		identifier: string
+		fileId: number
+		context?: string
+	}
+}