diff --git a/src/components/NewVideoMenu.tsx b/src/components/NewVideoMenu.tsx
new file mode 100644
index 0000000..f7fc03e
--- /dev/null
+++ b/src/components/NewVideoMenu.tsx
@@ -0,0 +1,65 @@
+import { Menu, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+import VideoRecordModal from "~/components/VideoRecordModal";
+import VideoUploadModal from "~/components/VideoUploadModal";
+
+export default function NewVideoMenu() {
+  const [recordOpen, setRecordOpen] = useState<boolean>(false);
+  const [uploadOpen, setUploadOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <VideoRecordModal open={recordOpen} setOpen={setRecordOpen} />
+      <VideoUploadModal open={uploadOpen} setOpen={setUploadOpen} />
+      <Menu as="div" className="relative inline-block text-left">
+        <Menu.Button>
+          <span className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]">
+            New video
+          </span>
+        </Menu.Button>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items className="absolute right-0 z-10 mt-2 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+            <div className="px-1 py-1 ">
+              <Menu.Item>
+                {({ active }) => (
+                  <div
+                    onClick={() => setRecordOpen(true)}
+                    className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${
+                      active ? "bg-gray-100" : ""
+                    }`}
+                  >
+                    <p className="leading-2 text-sm leading-4">
+                      Record a video
+                    </p>
+                  </div>
+                )}
+              </Menu.Item>
+              <Menu.Item>
+                {({ active }) => (
+                  <div
+                    onClick={() => setUploadOpen(true)}
+                    className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${
+                      active ? "bg-gray-100" : ""
+                    }`}
+                  >
+                    <p className="leading-2 text-sm leading-4">
+                      Upload a video
+                    </p>
+                  </div>
+                )}
+              </Menu.Item>
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </>
+  );
+}
diff --git a/src/components/VideoRecordModal.tsx b/src/components/VideoRecordModal.tsx
index 07da247..2491374 100644
--- a/src/components/VideoRecordModal.tsx
+++ b/src/components/VideoRecordModal.tsx
@@ -3,16 +3,16 @@ import { Dialog, Transition } from "@headlessui/react";
 const Recorder = dynamic(() => import("~/components/Recorder"), { ssr: false });
 import dynamic from "next/dynamic";
 
-export default function VideoRecordModal() {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+interface Props {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+}
+
+export default function VideoRecordModal({ open, setOpen }: Props) {
   const [step, setStep] = useState<"pre" | "in" | "post">("pre");
 
   function closeModal() {
-    setIsOpen(false);
-  }
-
-  function openModal() {
-    setIsOpen(true);
+    setOpen(false);
   }
 
   const handleClose = () => {
@@ -20,39 +20,30 @@ export default function VideoRecordModal() {
   };
 
   return (
-    <>
-      <span
-        onClick={openModal}
-        className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]"
-      >
-        New video
-      </span>
-
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={handleClose}>
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className="w-fit transform rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all">
-                  <Recorder
-                    closeModal={closeModal}
-                    step={step}
-                    setStep={setStep}
-                  />
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
+    <Transition appear show={open} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={handleClose}>
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel className="w-fit transform rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all">
+                <Recorder
+                  closeModal={closeModal}
+                  step={step}
+                  setStep={setStep}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
           </div>
-        </Dialog>
-      </Transition>
-    </>
+        </div>
+      </Dialog>
+    </Transition>
   );
 }
diff --git a/src/components/VideoUploadModal.tsx b/src/components/VideoUploadModal.tsx
index 8bf40f9..bdc69d8 100644
--- a/src/components/VideoUploadModal.tsx
+++ b/src/components/VideoUploadModal.tsx
@@ -4,9 +4,13 @@ import { api } from "~/utils/api";
 import axios from "axios";
 import { useRouter } from "next/router";
 
-export default function VideoUploadModal() {
+interface Props {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+}
+
+export default function VideoUploadModal({ open, setOpen }: Props) {
   const router = useRouter();
-  const [isOpen, setIsOpen] = useState<boolean>(false);
   const [submitting, setSubmitting] = useState<boolean>(false);
   const [file, setFile] = useState<File>();
   const getSignedUrl = api.video.getUploadUrl.useMutation();
@@ -19,11 +23,7 @@ export default function VideoUploadModal() {
   };
 
   function closeModal() {
-    setIsOpen(false);
-  }
-
-  function openModal() {
-    setIsOpen(true);
+    setOpen(false);
   }
 
   const handleSubmit = async (): Promise<void> => {
@@ -47,108 +47,99 @@ export default function VideoUploadModal() {
   };
 
   return (
-    <>
-      <span
-        onClick={openModal}
-        className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]"
+    <Transition appear show={open} as={Fragment}>
+      <Dialog
+        as="div"
+        className="relative z-10"
+        onClose={() => void closeModal()}
       >
-        New video
-      </span>
-
-      <Transition appear show={isOpen} as={Fragment}>
-        <Dialog
-          as="div"
-          className="relative z-10"
-          onClose={() => void closeModal}
-        >
-          <div className="fixed inset-0 overflow-y-auto">
-            <div className="flex min-h-full items-center justify-center p-4 text-center">
-              <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 scale-95"
-                enterTo="opacity-100 scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 scale-100"
-                leaveTo="opacity-0 scale-95"
-              >
-                <Dialog.Panel className="w-fit transform rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all">
-                  <div className="flex flex-col items-center gap-2">
-                    <label className="flex h-32 w-full min-w-[300px] cursor-pointer appearance-none justify-center rounded-md border-2 border-dashed border-gray-300 px-4 transition hover:border-gray-400 focus:outline-none">
-                      <span className="flex items-center space-x-2 text-[#292D34]">
-                        {file ? (
-                          <span className="font-medium">{file.name}</span>
-                        ) : (
-                          <>
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              className="h-6 w-6"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                              strokeWidth="2"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-                              />
-                            </svg>
-                            <span className="font-medium">
-                              {"Drop files to Attach, or browse"}
-                            </span>
-                          </>
-                        )}
-                      </span>
-                      <input
-                        accept="video/mp4,video/webm"
-                        onChange={handleFileChange}
-                        type="file"
-                        name="file_upload"
-                        className="hidden"
-                      />
-                    </label>
-                    <button
-                      type="button"
-                      className="mt-4 inline-flex items-center rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold leading-6 text-white shadow transition duration-150 ease-in-out hover:bg-indigo-400 disabled:cursor-not-allowed"
-                      disabled={submitting}
-                      onClick={() => void handleSubmit()}
-                    >
-                      {submitting ? (
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center p-4 text-center">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel className="w-fit transform rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all">
+                <div className="flex flex-col items-center gap-2">
+                  <label className="flex h-32 w-full min-w-[300px] cursor-pointer appearance-none justify-center rounded-md border-2 border-dashed border-gray-300 px-4 transition hover:border-gray-400 focus:outline-none">
+                    <span className="flex items-center space-x-2 text-[#292D34]">
+                      {file ? (
+                        <span className="font-medium">{file.name}</span>
+                      ) : (
                         <>
                           <svg
-                            className="-ml-1 mr-3 h-5 w-5 animate-spin text-white"
                             xmlns="http://www.w3.org/2000/svg"
+                            className="h-6 w-6"
                             fill="none"
                             viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            strokeWidth="2"
                           >
-                            <circle
-                              className="opacity-25"
-                              cx="12"
-                              cy="12"
-                              r="10"
-                              stroke="currentColor"
-                              strokeWidth="4"
-                            ></circle>
                             <path
-                              className="opacity-75"
-                              fill="currentColor"
-                              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                            ></path>
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                            />
                           </svg>
-                          Uploading...
+                          <span className="font-medium">
+                            {"Drop files to Attach, or browse"}
+                          </span>
                         </>
-                      ) : (
-                        <>Upload</>
                       )}
-                    </button>
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
+                    </span>
+                    <input
+                      accept="video/mp4,video/webm"
+                      onChange={handleFileChange}
+                      type="file"
+                      name="file_upload"
+                      className="hidden"
+                    />
+                  </label>
+                  <button
+                    type="button"
+                    className="mt-4 inline-flex items-center rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold leading-6 text-white shadow transition duration-150 ease-in-out hover:bg-indigo-400 disabled:cursor-not-allowed"
+                    disabled={submitting}
+                    onClick={() => void handleSubmit()}
+                  >
+                    {submitting ? (
+                      <>
+                        <svg
+                          className="-ml-1 mr-3 h-5 w-5 animate-spin text-white"
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                        >
+                          <circle
+                            className="opacity-25"
+                            cx="12"
+                            cy="12"
+                            r="10"
+                            stroke="currentColor"
+                            strokeWidth="4"
+                          ></circle>
+                          <path
+                            className="opacity-75"
+                            fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                          ></path>
+                        </svg>
+                        Uploading...
+                      </>
+                    ) : (
+                      <>Upload</>
+                    )}
+                  </button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
           </div>
-        </Dialog>
-      </Transition>
-    </>
+        </div>
+      </Dialog>
+    </Transition>
   );
 }
diff --git a/src/pages/videos.tsx b/src/pages/videos.tsx
index f5f081f..8310de6 100644
--- a/src/pages/videos.tsx
+++ b/src/pages/videos.tsx
@@ -9,7 +9,7 @@ import Image from "next/image";
 import { getTime } from "~/utils/getTime";
 import Checkout from "~/components/Checkout";
 import ProfileMenu from "~/components/ProfileMenu";
-import VideoRecordModal from "~/components/VideoRecordModal";
+import NewVideoMenu from "~/components/NewVideoMenu";
 
 const VideoList: NextPage = () => {
   const router = useRouter();
@@ -34,7 +34,7 @@ const VideoList: NextPage = () => {
             {["active", "past_due"].includes(
               session?.user.stripeSubscriptionStatus ?? ""
             ) ? (
-              <VideoRecordModal />
+              <NewVideoMenu />
             ) : null}
             {status === "authenticated" && (
               <div className="ml-4 flex items-center justify-center">