diff --git a/src/components/elements/FileManager.tsx b/src/components/elements/FileManager.tsx
index 234257f..dd6dbcb 100644
--- a/src/components/elements/FileManager.tsx
+++ b/src/components/elements/FileManager.tsx
@@ -4,6 +4,7 @@ import UploadToIPFS from "./UploadToIPFS";
 import { useSignMessage } from "wagmi";
 import { Polybase } from "@polybase/client";
 import { Icon } from "@iconify/react";
+import Modal from "./Modal";
 
 interface Props {
   publicKey: `0x${string}`;
@@ -29,6 +30,10 @@ const FileManager = ({ publicKey }: Props) => {
   const sign = useSignMessage();
 
   const [songs, setSongs] = useState<Song[]>([]);
+  const [modalIsOpen, setModalIsOpen] = useState<boolean>(false);
+  const [playlistName, setPlaylistName] = useState<string>(
+    "My Amazing Playlist"
+  );
 
   const songsCollection = db.collection<Song>("Song");
 
@@ -58,7 +63,8 @@ const FileManager = ({ publicKey }: Props) => {
     setSongs(newSongs);
   };
 
-  const handleAddToPlaylist = async () => {
+  const handleCreatePlaylist = async () => {
+    setModalIsOpen(false);
     db.signer(async (data) => {
       return {
         h: "eth-personal-sign",
@@ -74,92 +80,105 @@ const FileManager = ({ publicKey }: Props) => {
 
     await db
       .collection("Playlist")
-      .record("My Amazing Playlist")
+      .record(playlistName)
       .call("setSongs", [songIds]);
+
+    setPlaylistName("");
   };
 
   return (
-    <div className="m-1 h-full">
-      <div className="flex flex-row place-content-between items-center group py-2">
-        <h1 className="text-white text-2xl mb-5">Files</h1>
-        <Button
-          type="button"
-          disabled={songs.length === 0}
-          handleClick={() => {
-            void handleAddToPlaylist();
-          }}
-        >
-          <span className="text-slate-900">Create playlist</span>
-        </Button>
-      </div>
-
-      <div className="grid grid-cols-3 gap-4 w-full">
-        <div className="col-span-1"></div>
-        <div className="col-span-2">
-          <div className="flex m-1 px-6 items-center ">
-            {songs.length > 0 && (
-              <>
-                <input
-                  id=""
-                  type="checkbox"
-                  value=""
-                  className="w-4 h-4focus:ring-2 accent-transparent"
-                  onChange={handleSelectAllCheckboxChange}
-                />
-                <label
-                  htmlFor="vue-checkbox"
-                  className="w-full py-3 ml-2 text-sm font-light text-gray-100"
-                >
-                  Select all
-                </label>
-              </>
-            )}
-          </div>
+    <>
+      <Modal
+        modalIsOpen={modalIsOpen}
+        setPlaylistName={setPlaylistName}
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        commitPlaylist={handleCreatePlaylist}
+        closeModal={() => {
+          setModalIsOpen(false);
+        }}
+      />
+      <div className="m-1 h-full">
+        <div className="flex flex-row place-content-between items-center group py-2">
+          <h1 className="text-white text-2xl mb-5">Files</h1>
+          <Button
+            type="button"
+            disabled={songs.length === 0}
+            handleClick={() => {
+              setModalIsOpen(true);
+            }}
+          >
+            <span className="text-slate-900">Create playlist</span>
+          </Button>
         </div>
-      </div>
-      <div className="grid grid-cols-3 gap-4 w-full h-[70%]">
-        <UploadToIPFS publicKey={publicKey} />
-
-        <div className="col-span-2 rounded-md border border-[#424242]  overflow-y overflow-y-auto">
-          {songs.length === 0 && (
-            <div className="flex flex-col items-center justify-center pt-5 pb-6 h-full">
-              <Icon
-                icon="pixelarticons:mood-sad"
-                className="w-8 h-8 text-white m-6"
-              />
-              <p className="mb-2 text-sm text-gray-100 text-center w-[70%]">
-                Ops, it looks like you don’t have any files yet. Upload files to
-                get started.
-              </p>
-            </div>
-          )}
-          <div>
-            <ul className="w-full h-full">
-              {songs.map((song) => (
-                <li
-                  key={song.id}
-                  className="w-full flex items-center py-3 hover:bg-[#424242] hover:bg-opacity-50 cursor-pointer pl-7"
-                >
+
+        <div className="grid grid-cols-3 gap-4 w-full">
+          <div className="col-span-1"></div>
+          <div className="col-span-2">
+            <div className="flex m-1 px-6 items-center ">
+              {songs.length > 0 && (
+                <>
                   <input
-                    id={song.id}
+                    id="select-all"
                     type="checkbox"
-                    checked={song.checked}
-                    onChange={handleAddToPlaylistButtonClick}
-                    className="w-4 h-4 focus:ring-2 accent-transparent"
+                    value=""
+                    className="w-4 h-4focus:ring-2 accent-transparent"
+                    onChange={handleSelectAllCheckboxChange}
                   />
                   <label
-                    htmlFor={song.id}
+                    htmlFor="select-all"
                     className="w-full py-3 ml-2 text-sm font-light text-gray-100"
                   >
-                    {song.filename}
+                    Select all
                   </label>
-                </li>
-              ))}
-            </ul>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="grid grid-cols-3 gap-4 w-full h-[70%]">
+          <UploadToIPFS publicKey={publicKey} />
+
+          <div className="col-span-2 rounded-md border border-[#424242]  overflow-y overflow-y-auto">
+            {songs.length === 0 && (
+              <div className="flex flex-col items-center justify-center pt-5 pb-6 h-full">
+                <Icon
+                  icon="pixelarticons:mood-sad"
+                  className="w-8 h-8 text-white m-6"
+                />
+                <p className="mb-2 text-sm text-gray-100 text-center w-[70%]">
+                  Ops, it looks like you don’t have any files yet. Upload files
+                  to get started.
+                </p>
+              </div>
+            )}
+            <div>
+              <ul className="w-full h-full">
+                {songs.map((song) => (
+                  <li
+                    key={song.id}
+                    className="w-full flex items-center py-3 hover:bg-[#424242] hover:bg-opacity-50 cursor-pointer pl-7"
+                  >
+                    <input
+                      id={song.id}
+                      type="checkbox"
+                      checked={song.checked}
+                      onChange={handleAddToPlaylistButtonClick}
+                      className="w-4 h-4 focus:ring-2 accent-transparent"
+                    />
+                    <label
+                      htmlFor={song.id}
+                      className="w-full py-3 ml-2 text-sm font-light text-gray-100"
+                    >
+                      {song.filename}
+                    </label>
+                  </li>
+                ))}
+              </ul>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/elements/Modal.tsx b/src/components/elements/Modal.tsx
new file mode 100644
index 0000000..aca97e2
--- /dev/null
+++ b/src/components/elements/Modal.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import Button from "./Button";
+
+interface Props {
+  modalIsOpen: boolean;
+  setPlaylistName: (name: string) => void;
+  commitPlaylist: () => void;
+  closeModal: () => void;
+}
+
+const Modal = ({
+  modalIsOpen,
+  setPlaylistName,
+  commitPlaylist,
+  closeModal,
+}: Props) => {
+  if (modalIsOpen) {
+    return (
+      <div
+        id="defaultModal"
+        aria-hidden="true"
+        className="fixed flex items-center justify-center top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full backdrop-blur-sm"
+      >
+        <div
+          className="h-full w-full bg-red absolute"
+          onClick={closeModal}
+        ></div>
+        <div
+          className="relative w-fit max-w-2xl max-h-full z-8"
+          onClick={() => {}}
+        >
+          <div
+            className="z-10 relative rounded-lg bg-black h-60 w-96 py-4  px-2 flex justify-center items-center"
+            style={{
+              boxShadow: "0px 0px 15px 2px rgba(255,255,255,0.3)",
+            }}
+          >
+            <div className="flex flex-col gap-8 items-start justify-between w-full p-4 px-6 rounded-t border-gray-600">
+              <span className="text-white text-center w-full">
+                How do you wanna call it?
+              </span>
+              <input
+                type="text"
+                className="bg-transparent border border-[#424242] text-[#d9d9d9] text-sm rounded-lg focus:ring-slate-100 focus:border-slate-100 block w-full p-2.5"
+                placeholder=""
+                required
+                onChange={(e) => {
+                  setPlaylistName(e.target.value);
+                }}
+              />
+              <Button
+                type="button"
+                extraClass="w-full bg-[#d9d9d9] w-full flex justify-center items-center"
+                handleClick={commitPlaylist}
+              >
+                <span className="w-full text-center text-slate-900">
+                  Create playlist
+                </span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+};
+
+export default Modal;