diff --git a/src/components/TextareaField.svelte b/src/components/TextareaField.svelte
new file mode 100644
index 0000000..56355f4
--- /dev/null
+++ b/src/components/TextareaField.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	export let options: HTMLTextareaAttributes = {};
+	export let title: string = '';
+	export let value: string = '';
+	export let errorText: string = '';
+</script>
+
+<div class="relative w-full">
+	{#if title}
+		<div class="mb-1.5 text-sm font-normal">{title}</div>
+	{/if}
+	<textarea
+		bind:value
+		{...$$restProps}
+		{...options}
+		class="h-24 w-full rounded-lg border px-3 py-2 font-normal leading-relaxed"
+	/>
+	{#if errorText}
+		<div class="mt-1.5 text-[13px] font-light text-red-500">{errorText}</div>
+	{/if}
+</div>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 8871245..b76620b 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,7 +1,7 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-import { cubicOut } from "svelte/easing";
-import type { TransitionConfig } from "svelte/transition";
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { cubicOut } from 'svelte/easing';
+import type { TransitionConfig } from 'svelte/transition';
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
@@ -19,13 +19,9 @@ export const flyAndScale = (
 	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
 ): TransitionConfig => {
 	const style = getComputedStyle(node);
-	const transform = style.transform === "none" ? "" : style.transform;
+	const transform = style.transform === 'none' ? '' : style.transform;
 
-	const scaleConversion = (
-		valueA: number,
-		scaleA: [number, number],
-		scaleB: [number, number]
-	) => {
+	const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
 		const [minA, maxA] = scaleA;
 		const [minB, maxB] = scaleB;
 
@@ -35,13 +31,11 @@ export const flyAndScale = (
 		return valueB;
 	};
 
-	const styleToString = (
-		style: Record<string, number | string | undefined>
-	): string => {
+	const styleToString = (style: Record<string, number | string | undefined>): string => {
 		return Object.keys(style).reduce((str, key) => {
 			if (style[key] === undefined) return str;
 			return str + `${key}:${style[key]};`;
-		}, "");
+		}, '');
 	};
 
 	return {
@@ -59,4 +53,13 @@ export const flyAndScale = (
 		},
 		easing: cubicOut
 	};
-};
\ No newline at end of file
+};
+
+export function generateRandomHex(length: number): string {
+	const hexChars = '0123456789abcdef';
+	let result = '';
+	for (let i = 0; i < length; i++) {
+		result += hexChars[Math.floor(Math.random() * 16)];
+	}
+	return result;
+}
diff --git a/src/routes/problems/+page.svelte b/src/routes/problems/+page.svelte
index 5982b0a..eb87697 100644
--- a/src/routes/problems/+page.svelte
+++ b/src/routes/problems/+page.svelte
@@ -1,2 +1,140 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import * as Card from '$lib/components/ui/card/index.js';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import type NDKSvelte from '@nostr-dev-kit/ndk-svelte';
+	import { NDKEvent } from '@nostr-dev-kit/ndk';
+	import { currentUser, devmode } from '@/stores/session';
+	import Login from '../../components/Login.svelte';
+	import { ndk } from '@/ndk';
+	import * as RadioGroup from '$lib/components/ui/radio-group/index.js';
+	import { Label } from '$lib/components/ui/label/index.js';
+	import TextareaField from '../../components/TextareaField.svelte';
+	import { onDestroy } from 'svelte';
+	import type { NDKEventStore } from '@nostr-dev-kit/ndk-svelte';
+	import { generateRandomHex } from '@/utils';
+
+	let problems: NDKEventStore<NDKEvent> | undefined;
+	onDestroy(() => {
+		problems?.unsubscribe();
+	});
+
+	problems = $ndk.storeSubscribe([{ kinds: [31971 as number] }], { subId: 'rockets' });
+
+	let tldr: string = '';
+	let para: string = '';
+	let child_status: 'rfm' | 'open' = 'rfm';
+
+	function validateInputs(tldr: string, para: string) {
+		const errors = {
+			tldr: '',
+			para: ''
+		};
+
+		if (tldr.length > 140) {
+			errors.tldr = 'TLDR must be 140 characters or less';
+		}
+		if (para.length > 560) {
+			errors.para = 'Paragraph must be 560 characters or less';
+		}
+
+		return errors;
+	}
+
+	$: errors = validateInputs(tldr, para);
+	$: isValid = !errors.tldr && !errors.para;
+
+	function publish(ndk: NDKSvelte) {
+		if (!ndk.signer) {
+			throw new Error('no ndk signer found');
+		}
+		let author = $currentUser;
+		if (!author) {
+			throw new Error('no current user');
+		}
+
+		if (!isValid) {
+			throw new Error('input is not valid');
+		}
+
+		let e = new NDKEvent(ndk);
+		e.author = author;
+		e.kind = 31971;
+		e.tags.push(['d', generateRandomHex(32)]);
+		e.tags.push(['tldr', tldr]);
+		e.tags.push(['para', para]);
+		e.tags.push(['child_status', child_status]);
+		e.publish().then((x) => {
+			console.log(x);
+		});
+	}
+</script>
+
+<div class="flex flex-col gap-4">
+	<main class="grid w-full flex-1 grid-cols-1 items-start gap-4 sm:grid-cols-3 md:gap-2">
+		<Card.Root class="sm:col-span-3">
+			<Card.Header class="pb-3">
+				<Card.Title>Problem Tracker</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<Dialog.Root>
+					<Dialog.Trigger>
+						<Button>Create a problem</Button>
+					</Dialog.Trigger>
+					<Dialog.Content class="modal sm:max-w-[625px]">
+						<Dialog.Header>
+							<Dialog.Title>New problem</Dialog.Title>
+						</Dialog.Header>
+						<TextareaField
+							title="Title"
+							bind:value={tldr}
+							errorText={errors.tldr}
+							options={{
+								placeholder: 'Enter a brief description (max 140 characters)',
+								style: 'height: 80px;'
+							}}
+						/>
+						<TextareaField
+							title="Description"
+							bind:value={para}
+							errorText={errors.para}
+							options={{
+								placeholder: 'Enter a detailed description (max 560 characters)',
+								style: 'height: 200px;'
+							}}
+						/>
+						<div>Child status upon creation</div>
+						<RadioGroup.Root bind:value={child_status} class="flex">
+							<div class="flex items-center space-x-2">
+								<RadioGroup.Item value="rfm" id="r1" />
+								<Label for="r1">RFM</Label>
+							</div>
+							<div class="flex items-center space-x-2">
+								<RadioGroup.Item value="open" id="r2" />
+								<Label for="r2">Open</Label>
+							</div>
+							<RadioGroup.Input name="spacing" />
+						</RadioGroup.Root>
+						<Dialog.Footer>
+							{#if $currentUser}
+								<Button
+									disabled={!tldr || !para || !isValid}
+									on:click={() => publish($ndk)}
+									type="submit">Publish</Button
+								>
+							{:else}
+								<Login />
+							{/if}
+						</Dialog.Footer>
+					</Dialog.Content>
+				</Dialog.Root>
+				{#if $problems && $devmode}
+					<Button variant="outline" on:click={() => console.log($problems)}>
+						Print Problems to Console
+					</Button>
+				{/if}
+			</Card.Content>
+			<Card.Footer></Card.Footer>
+		</Card.Root>
+	</main>
+</div>