diff --git a/common/post.ts b/common/post.ts
index aa3df76a..262859d1 100644
--- a/common/post.ts
+++ b/common/post.ts
@@ -12,7 +12,7 @@ export type Post = {
 export type DateDoc = Post & {
   bounty: number
   birthday: number
-  profilePicUrl: string
+  photoUrl: string
   type: 'date-doc'
 }
 
diff --git a/web/pages/date/create.tsx b/web/pages/date/create.tsx
new file mode 100644
index 00000000..f29915fa
--- /dev/null
+++ b/web/pages/date/create.tsx
@@ -0,0 +1,155 @@
+import Router from 'next/router'
+import { useEffect, useState } from 'react'
+
+import { DateDoc } from 'common/post'
+import { useTextEditor, TextEditor } from 'web/components/editor'
+import { Page } from 'web/components/page'
+import { Title } from 'web/components/title'
+import { useUser } from 'web/hooks/use-user'
+import { createPost } from 'web/lib/firebase/api'
+import { postPath } from 'web/lib/firebase/posts'
+import { Row } from 'web/components/layout/row'
+import { Button } from 'web/components/button'
+import dayjs from 'dayjs'
+import { MINUTE_MS } from 'common/util/time'
+import { Col } from 'web/components/layout/col'
+import { uploadImage } from 'web/lib/firebase/storage'
+import { LoadingIndicator } from 'web/components/loading-indicator'
+
+export default function CreateDateDocPage() {
+  const user = useUser()
+
+  useEffect(() => {
+    if (user === null) Router.push('/date')
+  })
+
+  const title = `${user?.name}'s Date Doc`
+  const [birthday, setBirthday] = useState<undefined | string>(undefined)
+  const [photoUrl, setPhotoUrl] = useState(user?.avatarUrl ?? '')
+  const [avatarLoading, setAvatarLoading] = useState(false)
+
+  const [error, setError] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const { editor, upload } = useTextEditor({
+    disabled: isSubmitting,
+  })
+
+  const birthdayTime = birthday ? dayjs(birthday).valueOf() : undefined
+  const isValid =
+    user && birthday && photoUrl && editor && editor.isEmpty === false
+
+  const fileHandler = async (event: any) => {
+    if (!user) return
+
+    const file = event.target.files[0]
+
+    setAvatarLoading(true)
+
+    await uploadImage(user.username, file)
+      .then(async (url) => {
+        setPhotoUrl(url)
+        setAvatarLoading(false)
+      })
+      .catch(() => {
+        setAvatarLoading(false)
+        setPhotoUrl(user.avatarUrl || '')
+      })
+  }
+
+  async function saveDateDoc() {
+    if (!editor || !birthdayTime) return
+
+    const newPost: Omit<DateDoc, 'id' | 'creatorId' | 'createdTime' | 'slug'> =
+      {
+        title,
+        content: editor.getJSON(),
+        bounty: 0,
+        birthday: birthdayTime,
+        photoUrl,
+        type: 'date-doc',
+      }
+
+    const result = await createPost(newPost).catch((e) => {
+      console.log(e)
+      setError('There was an error creating the post, please try again')
+      return e
+    })
+    if (result.post) {
+      await Router.push(postPath(result.post.slug))
+    }
+  }
+
+  return (
+    <Page>
+      <div className="mx-auto w-full max-w-3xl">
+        <div className="rounded-lg px-6 py-4 sm:py-0">
+          <Row className="mb-8 items-center justify-between">
+            <Title className="!my-0 text-blue-500" text="Your Date Doc" />
+            <Button
+              type="submit"
+              disabled={isSubmitting || !isValid || upload.isLoading}
+              onClick={async () => {
+                setIsSubmitting(true)
+                await saveDateDoc()
+                setIsSubmitting(false)
+              }}
+              color="blue"
+            >
+              {isSubmitting ? 'Publishing...' : 'Publish'}
+            </Button>
+          </Row>
+
+          <Col className="gap-6">
+            <Col className="max-w-[150px] justify-start gap-4">
+              <div className="">Birthday</div>
+              <input
+                type={'date'}
+                className="input input-bordered"
+                onClick={(e) => e.stopPropagation()}
+                onChange={(e) => setBirthday(e.target.value)}
+                max={Math.round(Date.now() / MINUTE_MS) * MINUTE_MS}
+                disabled={isSubmitting}
+                value={birthday}
+              />
+            </Col>
+
+            <Col className="gap-4">
+              <div className="">Photo</div>
+              <Row className="items-center gap-4">
+                {avatarLoading ? (
+                  <LoadingIndicator />
+                ) : (
+                  <>
+                    {photoUrl && (
+                      <img
+                        src={photoUrl}
+                        width={80}
+                        height={80}
+                        className="flex h-[80px] w-[80px] items-center justify-center rounded-full bg-gray-400 object-cover"
+                      />
+                    )}
+                    <input
+                      className="text-sm text-gray-500"
+                      type="file"
+                      name="file"
+                      accept="image/*"
+                      onChange={fileHandler}
+                    />
+                  </>
+                )}
+              </Row>
+            </Col>
+
+            <Col className="gap-4">
+              <div className="">
+                Tell us about you! What are you looking for?
+              </div>
+              <TextEditor editor={editor} upload={upload} />
+            </Col>
+          </Col>
+        </div>
+      </div>
+    </Page>
+  )
+}
diff --git a/web/pages/date/index.tsx b/web/pages/date/index.tsx
index c77a9730..b47d2ac8 100644
--- a/web/pages/date/index.tsx
+++ b/web/pages/date/index.tsx
@@ -32,7 +32,7 @@ export default function DatePage(props: { dateDocs: DateDoc[] }) {
     <Page>
       <div className="mx-auto w-full max-w-3xl ">
         <Row className="items-center justify-between">
-          <Title className="!my-0 px-2 text-blue-400" text="Date docs" />
+          <Title className="!my-0 px-2 text-blue-500" text="Date docs" />
           <SiteLink href="/date/create" className="!no-underline">
             <Button className="flex flex-row gap-1" color="blue">
               <PlusCircleIcon