diff --git a/prisma/dev.db b/prisma/dev.db
index 3c8070a..1a131c9 100644
Binary files a/prisma/dev.db and b/prisma/dev.db differ
diff --git a/src/app/lib/create.ts b/src/app/lib/create.ts
index 63cf474..cf41f49 100644
--- a/src/app/lib/create.ts
+++ b/src/app/lib/create.ts
@@ -47,3 +47,13 @@ export async function createPub(data) {
 	redirect("/publication")
 }
 
+
+
+export async function createSub(data) {
+	"use server"
+	const res = await prisma.sub.create({ data })
+	console.log(res)
+	revalidatePath("/submission")
+	redirect("/submission")
+
+}
diff --git a/src/app/submission/create.tsx b/src/app/submission/create.tsx
new file mode 100644
index 0000000..537ae58
--- /dev/null
+++ b/src/app/submission/create.tsx
@@ -0,0 +1,33 @@
+
+"use client"
+import { createStory, createSub } from "app/lib/create"
+import { Dialog, DialogHeader, DialogTrigger, DialogContent, DialogClose, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ComponentProps } from "react";
+import { Genre, Pub, Story } from "@prisma/client";
+import StoryForm from "app/ui/forms/story";
+import SubmissionForm from "app/ui/forms/sub";
+import { getPubs, getResponses, getStories } from "app/lib/get";
+
+
+export default function CreateSubmissionDialog({ stories, pubs, responses }: ComponentProps<"div"> & { stories: Story[], pubs: Pub[], responses: Response[] }) {
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Create new Story</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>New story</DialogTitle>
+          <DialogDescription>Create an entry for a new story i.e. a thing you intend to submit for publication.</DialogDescription>
+        </DialogHeader>
+        <SubmissionForm createSub={createSub} pubs={pubs} responses={responses} stories={stories} />
+        <DialogFooter>
+          <Button form="subform">Submit</Button>
+        </DialogFooter>
+
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/app/submission/page.tsx b/src/app/submission/page.tsx
index 5d7ccb1..09896d6 100644
--- a/src/app/submission/page.tsx
+++ b/src/app/submission/page.tsx
@@ -1,7 +1,8 @@
-import { getSubsComplete } from "app/lib/get"
+import { getGenres, getPubs, getResponses, getStories, getSubsComplete } from "app/lib/get"
 import { DataTable } from "app/ui/tables/data-table"
 import { columns } from "./columns"
 import { Pub, Response, Story, Sub } from "@prisma/client"
+import CreateSubmissionDialog from "./create"
 
 export type SubComplete = Sub & {
   pub: Pub,
@@ -10,9 +11,18 @@ export type SubComplete = Sub & {
 }
 export default async function Page() {
   const subs: Array<SubComplete> = await getSubsComplete()
+  const stories = await getStories()
+  const pubs = await getPubs()
+  const responses = await getResponses()
   return (
     <div className="container">
-      <DataTable data={subs} columns={columns} type="submission" />
+      <DataTable data={subs} columns={columns} type="submission">
+        <CreateSubmissionDialog
+          stories={stories}
+          pubs={pubs}
+          responses={responses}
+        />
+      </DataTable>
     </div>
   )
 }
diff --git a/src/app/ui/forms/sub.tsx b/src/app/ui/forms/sub.tsx
index 52a6496..ac46fec 100644
--- a/src/app/ui/forms/sub.tsx
+++ b/src/app/ui/forms/sub.tsx
@@ -123,7 +123,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 
 	return (
 		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
 				<FormField
 					control={form.control}
 					name="storyId"
@@ -177,7 +177,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
 							<FormLabel>Date of submission</FormLabel>
-							<Popover open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
+							<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
 										<Button
@@ -222,7 +222,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
 							<FormLabel>Date of response</FormLabel>
-							<Popover open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
+							<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
 										<Button
@@ -276,7 +276,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 										</SelectValue>
 									</SelectTrigger>
 								</FormControl>
-								<SelectContent>
+								<SelectContent aria-modal={true}>
 									{reponsesSelectItems}
 								</SelectContent>
 							</Select>
@@ -286,7 +286,6 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 					)}
 				/>
 
-				<Button type="submit">Submit</Button>
 			</form>
 		</Form>
 	)