diff --git a/src/components/Recorder.tsx b/src/components/Recorder.tsx
index f2707e6..7e52809 100644
--- a/src/components/Recorder.tsx
+++ b/src/components/Recorder.tsx
@@ -12,7 +12,19 @@ import { useRouter } from "next/router";
 import { api } from "~/utils/api";
 import fixWebmDuration from "fix-webm-duration";
 
-export default function Recorder() {
+interface Props {
+  closeModal: () => void;
+  step: string;
+  setStep: (
+    value:
+      | ((prevState: "pre" | "in" | "post") => "pre" | "in" | "post")
+      | "pre"
+      | "in"
+      | "post"
+  ) => void;
+}
+
+export default function Recorder({ closeModal, step, setStep }: Props) {
   const [steam, setStream] = useState<null | MediaStream>(null);
   const [blob, setBlob] = useState<null | Blob>(null);
   const refVideo = useRef<null | HTMLVideoElement>(null);
@@ -22,7 +34,6 @@ export default function Recorder() {
   const [selectedDevice, setSelectedDevice] = useState<MediaDeviceInfo | null>(
     null
   );
-  const [step, setStep] = useState<"pre" | "in" | "post">("pre");
   const router = useRouter();
   const [submitting, setSubmitting] = useState<boolean>(false);
   const apiUtils = api.useContext();
@@ -84,6 +95,9 @@ export default function Recorder() {
     recorderRef.current.stopRecording(() => {
       steam?.getTracks().map((track) => track.stop());
     });
+
+    closeModal();
+    setStep("pre");
   };
 
   const handlePause = () => {
@@ -262,7 +276,7 @@ export default function Recorder() {
               controls
               autoPlay
               ref={refVideo}
-              style={{ width: "700px", margin: "1em" }}
+              className="mb-4 w-[75vw]"
             />
           )}
           <div className="flex items-center justify-center">
@@ -307,6 +321,13 @@ export default function Recorder() {
                 <>Upload</>
               )}
             </button>
+            <button
+              type="button"
+              className="ml-auto 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"
+              onClick={() => void closeModal()}
+            >
+              Close
+            </button>
           </div>
         </div>
       ) : null}
diff --git a/src/components/VideoRecordModal.tsx b/src/components/VideoRecordModal.tsx
new file mode 100644
index 0000000..07da247
--- /dev/null
+++ b/src/components/VideoRecordModal.tsx
@@ -0,0 +1,58 @@
+import { Fragment, useState } from "react";
+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);
+  const [step, setStep] = useState<"pre" | "in" | "post">("pre");
+
+  function closeModal() {
+    setIsOpen(false);
+  }
+
+  function openModal() {
+    setIsOpen(true);
+  }
+
+  const handleClose = () => {
+    if (step === "pre") closeModal();
+  };
+
+  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>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+}
diff --git a/src/components/VideoUploadModal.tsx b/src/components/VideoUploadModal.tsx
index 8dc0450..8bf40f9 100644
--- a/src/components/VideoUploadModal.tsx
+++ b/src/components/VideoUploadModal.tsx
@@ -3,8 +3,6 @@ import { Dialog, Transition } from "@headlessui/react";
 import { api } from "~/utils/api";
 import axios from "axios";
 import { useRouter } from "next/router";
-const Recorder = dynamic(() => import("~/components/Recorder"), { ssr: false });
-import dynamic from "next/dynamic";
 
 export default function VideoUploadModal() {
   const router = useRouter();
@@ -74,81 +72,77 @@ export default function VideoUploadModal() {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-md transform rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all">
-                  {1 + 1 === 2 ? (
-                    <Recorder />
-                  ) : (
-                    <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 ? (
+                <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>
-                  )}
+                      </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>
diff --git a/src/pages/videos.tsx b/src/pages/videos.tsx
index 51b6568..f5f081f 100644
--- a/src/pages/videos.tsx
+++ b/src/pages/videos.tsx
@@ -6,10 +6,10 @@ import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import Image from "next/image";
-import VideoUploadModal from "~/components/VideoUploadModal";
 import { getTime } from "~/utils/getTime";
 import Checkout from "~/components/Checkout";
 import ProfileMenu from "~/components/ProfileMenu";
+import VideoRecordModal from "~/components/VideoRecordModal";
 
 const VideoList: NextPage = () => {
   const router = useRouter();
@@ -34,7 +34,7 @@ const VideoList: NextPage = () => {
             {["active", "past_due"].includes(
               session?.user.stripeSubscriptionStatus ?? ""
             ) ? (
-              <VideoUploadModal />
+              <VideoRecordModal />
             ) : null}
             {status === "authenticated" && (
               <div className="ml-4 flex items-center justify-center">