Index: frontend/src/components/PlaylistDropdown.tsx
===================================================================
--- frontend/src/components/PlaylistDropdown.tsx	(revision ce45c7a7871379455b3a3c55a48f767ca2e0e739)
+++ 	(revision )
@@ -1,252 +1,0 @@
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import axiosInstance from "../api/axiosInstance";
-import { useCreatedPlaylists } from "../context/playlistContext";
-
-interface PlaylistDropdownProps {
-  songId: number;
-  isOpen: boolean;
-  onClose: () => void;
-  position?: { top: number; left: number };
-
-  usePortal?: boolean;
-
-  direction?: "above" | "below";
-
-  onCreateNewPlaylist?: () => void;
-}
-
-const PlaylistDropdown = ({
-  songId,
-  isOpen,
-  onClose,
-  position,
-  usePortal = false,
-  direction = "above",
-  onCreateNewPlaylist,
-}: PlaylistDropdownProps) => {
-  const { createdPlaylists, refreshPlaylists } = useCreatedPlaylists();
-  const [containingPlaylistIds, setContainingPlaylistIds] = useState<number[]>(
-    [],
-  );
-  const [loading, setLoading] = useState(false);
-  const [processingPlaylistId, setProcessingPlaylistId] = useState<
-    number | null
-  >(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (isOpen && songId) {
-      const fetchPlaylistIds = async () => {
-        setLoading(true);
-        setContainingPlaylistIds([]);
-        try {
-          const response = await axiosInstance.get<number[]>(
-            `/playlists/song/${songId}`,
-          );
-          setContainingPlaylistIds(response.data);
-        } catch (error) {
-          console.error("Failed to fetch song presence:", error);
-        } finally {
-          setLoading(false);
-        }
-      };
-      fetchPlaylistIds();
-    } else {
-      setContainingPlaylistIds([]);
-    }
-  }, [isOpen, songId]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        onClose();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isOpen, onClose]);
-
-  const handleTogglePlaylist = async (playlistId: number, songId: number) => {
-    if (processingPlaylistId !== null) return;
-
-    setProcessingPlaylistId(playlistId);
-
-    try {
-      const response = await axiosInstance.post<{
-        playlistId: number;
-        isSongAddedToPlaylist: boolean;
-      }>(`/playlists/${playlistId}/song/${songId}`);
-
-      const { playlistId: returnedPlaylistId, isSongAddedToPlaylist } =
-        response.data;
-
-      if (isSongAddedToPlaylist) {
-        setContainingPlaylistIds((prev) =>
-          prev.includes(returnedPlaylistId)
-            ? prev
-            : [...prev, returnedPlaylistId],
-        );
-      } else {
-        setContainingPlaylistIds((prev) =>
-          prev.filter((id) => id !== returnedPlaylistId),
-        );
-      }
-    } catch (error) {
-      console.error("Failed to toggle playlist:", error);
-    } finally {
-      refreshPlaylists(true);
-      setTimeout(() => {
-        setProcessingPlaylistId(null);
-      }, 500);
-    }
-  };
-
-  const handleCreateNew = () => {
-    onCreateNewPlaylist?.();
-    onClose();
-  };
-
-  if (!isOpen) return null;
-
-  const inlinePositionClass =
-    direction === "below"
-      ? "absolute left-0 top-full mt-2"
-      : "absolute right-0 bottom-full mb-2";
-
-  const dropdownContent = (
-    <div
-      ref={dropdownRef}
-      className={`${usePortal ? "fixed" : inlinePositionClass} w-56 bg-[#282828] rounded-lg shadow-2xl py-2 z-[9999] border border-white/10 max-h-60 overflow-y-auto custom-scrollbar`}
-      style={
-        usePortal && position
-          ? {
-              top: position.top,
-              left: position.left,
-              transform:
-                direction === "below" ? undefined : "translateY(-100%)",
-            }
-          : undefined
-      }
-      onClick={(e) => e.stopPropagation()}
-    >
-      <div className="px-4 py-2 text-xs font-bold text-gray-400 uppercase tracking-wider border-b border-white/5 mb-1">
-        Add to playlist
-      </div>
-
-      {loading ? (
-        <div className="flex items-center justify-center py-4">
-          <div className="w-5 h-5 border-2 border-white/10 border-t-[#1db954] rounded-full animate-spin"></div>
-        </div>
-      ) : createdPlaylists && createdPlaylists.length > 0 ? (
-        createdPlaylists.map((playlist) => {
-          const isProcessing = processingPlaylistId === playlist.id;
-          const isChecked = containingPlaylistIds.includes(playlist.id);
-
-          return (
-            <label
-              key={playlist.id}
-              className={`flex items-center px-4 py-2 hover:bg-white/10 transition-colors group/item ${
-                isProcessing ? "pointer-events-none" : "cursor-pointer"
-              }`}
-              onClick={(e) => e.stopPropagation()}
-            >
-              <div className="relative flex items-center justify-center">
-                <input
-                  type="checkbox"
-                  className="peer sr-only"
-                  checked={isChecked}
-                  disabled={processingPlaylistId !== null}
-                  onChange={() => handleTogglePlaylist(playlist.id, songId)}
-                />
-                <div
-                  className={`w-5 h-5 border-2 rounded bg-[#181818] transition-all ${
-                    isProcessing
-                      ? "border-[#1db954] animate-pulse"
-                      : isChecked
-                        ? "bg-[#1db954] border-[#1db954]"
-                        : "border-gray-500"
-                  }`}
-                >
-                  {isProcessing && (
-                    <div className="absolute inset-0 flex items-center justify-center">
-                      <div className="w-3 h-3 border-2 border-transparent border-t-[#1db954] rounded-full animate-spin"></div>
-                    </div>
-                  )}
-                </div>
-                <svg
-                  className={`absolute w-3 h-3  transition-opacity ${
-                    isChecked && !isProcessing ? "opacity-100" : "opacity-0"
-                  }`}
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="3"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M5 13l4 4L19 7"
-                  />
-                </svg>
-              </div>
-              <span
-                className={`ml-3 text-sm truncate transition-all ${
-                  isProcessing
-                    ? "text-[#1db954] animate-pulse"
-                    : "text-gray-200 group-hover/item:text-white"
-                }`}
-              >
-                {playlist.name}
-              </span>
-              {isProcessing && (
-                <span className="ml-auto text-xs text-[#1db954] animate-pulse">
-                  •••
-                </span>
-              )}
-            </label>
-          );
-        })
-      ) : (
-        <div className="px-4 py-3 text-sm text-gray-500 italic">
-          No playlists created
-        </div>
-      )}
-
-      <button
-        onClick={(e) => {
-          e.stopPropagation();
-          handleCreateNew();
-        }}
-        className="w-full text-left px-4 py-2 mt-1 text-sm text-[#1db954] hover:bg-white/5 transition-colors border-t border-white/5 flex items-center gap-2 font-medium cursor-pointer"
-      >
-        <svg
-          className="w-4 h-4"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M12 4v16m8-8H4"
-          />
-        </svg>
-        Create new playlist
-      </button>
-    </div>
-  );
-
-  return usePortal
-    ? createPortal(dropdownContent, document.body)
-    : dropdownContent;
-};
-
-export default PlaylistDropdown;
Index: frontend/src/components/Sidebar.tsx
===================================================================
--- frontend/src/components/Sidebar.tsx	(revision ce45c7a7871379455b3a3c55a48f767ca2e0e739)
+++ frontend/src/components/Sidebar.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
@@ -43,14 +43,4 @@
     }
   }, [user]);
-
-  const handleCreatePlaylist = async (playlistName: string) => {
-    try {
-      await axiosInstance.post("/playlists", { name: playlistName });
-      toast.success("Playlist created successfully!");
-      await refreshPlaylists(false);
-    } catch (error) {
-      toast.error(getErrorMessage(error));
-    }
-  };
 
   const isLoading = songsLoading || playlistsLoading;
@@ -282,5 +272,5 @@
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
-        onSubmit={handleCreatePlaylist}
+        onSuccess={() => refreshPlaylists(false)}
       />
     </>
Index: frontend/src/components/SongItem.tsx
===================================================================
--- frontend/src/components/SongItem.tsx	(revision ce45c7a7871379455b3a3c55a48f767ca2e0e739)
+++ frontend/src/components/SongItem.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
@@ -4,5 +4,5 @@
 import { usePlayer } from "../context/playerContext";
 import { toEmbedUrl } from "../utils/utils";
-import PlaylistDropdown from "./PlaylistDropdown";
+import PlaylistDropdown from "./playlist/PlaylistDropdown";
 
 export interface SongItemData {
Index: frontend/src/components/playlist/CreatePlaylistModal.tsx
===================================================================
--- frontend/src/components/playlist/CreatePlaylistModal.tsx	(revision ce45c7a7871379455b3a3c55a48f767ca2e0e739)
+++ frontend/src/components/playlist/CreatePlaylistModal.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
@@ -1,3 +1,5 @@
 import { useState, useEffect } from "react";
+import { toast } from "react-toastify";
+import axiosInstance from "../../api/axiosInstance";
 import type { CreatePlaylistModalProps } from "../../utils/types";
 
@@ -5,9 +7,11 @@
   isOpen,
   onClose,
-  onSubmit,
+  onSuccess,
 }: CreatePlaylistModalProps) => {
   const [playlistName, setPlaylistName] = useState("");
   const [isClosing, setIsClosing] = useState(false);
   const [isOpening, setIsOpening] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState("");
 
   useEffect(() => {
@@ -15,4 +19,5 @@
       setIsClosing(false);
       setPlaylistName("");
+      setError("");
       setIsOpening(true);
       setTimeout(() => setIsOpening(false), 10);
@@ -28,9 +33,20 @@
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (playlistName.trim()) {
-      onSubmit(playlistName.trim());
+    if (!playlistName.trim() || isSubmitting) return;
+
+    setIsSubmitting(true);
+    try {
+      await axiosInstance.post(
+        `/playlists?playlistName=${encodeURIComponent(playlistName.trim())}`,
+      );
+      toast.success("Playlist created successfully!");
+      onSuccess();
       handleClose();
+    } catch (err: any) {
+      setError(err?.response?.data?.error || "Failed to create playlist");
+    } finally {
+      setIsSubmitting(false);
     }
   };
@@ -88,9 +104,35 @@
               id="playlistName"
               autoFocus
-              className="w-full bg-[#282828] border border-white/10 rounded-lg py-3 px-4 text-white placeholder-gray-500 focus:outline-none focus:border-[#1db954] focus:ring-1 focus:ring-[#1db954] transition-all"
+              className={`w-full bg-[#282828] border rounded-lg py-3 px-4 text-white placeholder-gray-500 focus:outline-none transition-all ${
+                error
+                  ? "border-red-500 focus:border-red-500 focus:ring-1 focus:ring-red-500"
+                  : "border-white/10 focus:border-[#1db954] focus:ring-1 focus:ring-[#1db954]"
+              }`}
               placeholder="Enter playlist name"
               value={playlistName}
-              onChange={(e) => setPlaylistName(e.target.value)}
+              onChange={(e) => {
+                setPlaylistName(e.target.value);
+              }}
             />
+            <div
+              className={`overflow-hidden transition-all duration-200 ease-out ${
+                error ? "max-h-20 opacity-100 mt-2" : "max-h-0 opacity-0"
+              }`}
+            >
+              <p className="text-sm text-red-400 flex items-center gap-1.5">
+                <svg
+                  className="w-4 h-4 shrink-0"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+                {error}
+              </p>
+            </div>
           </div>
 
@@ -99,5 +141,6 @@
               type="button"
               onClick={handleClose}
-              className="flex-1 py-3 bg-[#282828] rounded-full text-white font-semibold hover:bg-[#3a3a3a] transition-colors cursor-pointer"
+              disabled={isSubmitting}
+              className="flex-1 py-3 bg-[#282828] rounded-full text-white font-semibold hover:bg-[#3a3a3a] transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
             >
               Cancel
@@ -105,8 +148,15 @@
             <button
               type="submit"
-              disabled={!playlistName.trim()}
-              className="flex-1 py-3 bg-[#1db954] rounded-full text-black font-semibold hover:bg-[#1ed760] transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-[#1db954] cursor-pointer"
+              disabled={!playlistName.trim() || isSubmitting}
+              className="flex-1 py-3 bg-[#1db954] rounded-full text-black font-semibold hover:bg-[#1ed760] transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-[#1db954] cursor-pointer flex items-center justify-center gap-2"
             >
-              Create
+              {isSubmitting ? (
+                <>
+                  <div className="w-4 h-4 border-2 border-black/20 border-t-black rounded-full animate-spin"></div>
+                  Creating...
+                </>
+              ) : (
+                "Create"
+              )}
             </button>
           </div>
Index: frontend/src/components/playlist/PlaylistDropdown.tsx
===================================================================
--- frontend/src/components/playlist/PlaylistDropdown.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
+++ frontend/src/components/playlist/PlaylistDropdown.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
@@ -0,0 +1,252 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import axiosInstance from "../../api/axiosInstance";
+import { useCreatedPlaylists } from "../../context/playlistContext";
+
+interface PlaylistDropdownProps {
+  songId: number;
+  isOpen: boolean;
+  onClose: () => void;
+  position?: { top: number; left: number };
+
+  usePortal?: boolean;
+
+  direction?: "above" | "below";
+
+  onCreateNewPlaylist?: () => void;
+}
+
+const PlaylistDropdown = ({
+  songId,
+  isOpen,
+  onClose,
+  position,
+  usePortal = false,
+  direction = "above",
+  onCreateNewPlaylist,
+}: PlaylistDropdownProps) => {
+  const { createdPlaylists, refreshPlaylists } = useCreatedPlaylists();
+  const [containingPlaylistIds, setContainingPlaylistIds] = useState<number[]>(
+    [],
+  );
+  const [loading, setLoading] = useState(false);
+  const [processingPlaylistId, setProcessingPlaylistId] = useState<
+    number | null
+  >(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isOpen && songId) {
+      const fetchPlaylistIds = async () => {
+        setLoading(true);
+        setContainingPlaylistIds([]);
+        try {
+          const response = await axiosInstance.get<number[]>(
+            `/playlists/song/${songId}`,
+          );
+          setContainingPlaylistIds(response.data);
+        } catch (error) {
+          console.error("Failed to fetch song presence:", error);
+        } finally {
+          setLoading(false);
+        }
+      };
+      fetchPlaylistIds();
+    } else {
+      setContainingPlaylistIds([]);
+    }
+  }, [isOpen, songId]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen, onClose]);
+
+  const handleTogglePlaylist = async (playlistId: number, songId: number) => {
+    if (processingPlaylistId !== null) return;
+
+    setProcessingPlaylistId(playlistId);
+
+    try {
+      const response = await axiosInstance.post<{
+        playlistId: number;
+        isSongAddedToPlaylist: boolean;
+      }>(`/playlists/${playlistId}/song/${songId}`);
+
+      const { playlistId: returnedPlaylistId, isSongAddedToPlaylist } =
+        response.data;
+
+      if (isSongAddedToPlaylist) {
+        setContainingPlaylistIds((prev) =>
+          prev.includes(returnedPlaylistId)
+            ? prev
+            : [...prev, returnedPlaylistId],
+        );
+      } else {
+        setContainingPlaylistIds((prev) =>
+          prev.filter((id) => id !== returnedPlaylistId),
+        );
+      }
+    } catch (error) {
+      console.error("Failed to toggle playlist:", error);
+    } finally {
+      refreshPlaylists(true);
+      setTimeout(() => {
+        setProcessingPlaylistId(null);
+      }, 500);
+    }
+  };
+
+  const handleCreateNew = () => {
+    onCreateNewPlaylist?.();
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  const inlinePositionClass =
+    direction === "below"
+      ? "absolute left-0 top-full mt-2"
+      : "absolute right-0 bottom-full mb-2";
+
+  const dropdownContent = (
+    <div
+      ref={dropdownRef}
+      className={`${usePortal ? "fixed" : inlinePositionClass} w-56 bg-[#282828] rounded-lg shadow-2xl py-2 z-[9999] border border-white/10 max-h-60 overflow-y-auto custom-scrollbar`}
+      style={
+        usePortal && position
+          ? {
+              top: position.top,
+              left: position.left,
+              transform:
+                direction === "below" ? undefined : "translateY(-100%)",
+            }
+          : undefined
+      }
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div className="px-4 py-2 text-xs font-bold text-gray-400 uppercase tracking-wider border-b border-white/5 mb-1">
+        Add to playlist
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-4">
+          <div className="w-5 h-5 border-2 border-white/10 border-t-[#1db954] rounded-full animate-spin"></div>
+        </div>
+      ) : createdPlaylists && createdPlaylists.length > 0 ? (
+        createdPlaylists.map((playlist) => {
+          const isProcessing = processingPlaylistId === playlist.id;
+          const isChecked = containingPlaylistIds.includes(playlist.id);
+
+          return (
+            <label
+              key={playlist.id}
+              className={`flex items-center px-4 py-2 hover:bg-white/10 transition-colors group/item ${
+                isProcessing ? "pointer-events-none" : "cursor-pointer"
+              }`}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="relative flex items-center justify-center">
+                <input
+                  type="checkbox"
+                  className="peer sr-only"
+                  checked={isChecked}
+                  disabled={processingPlaylistId !== null}
+                  onChange={() => handleTogglePlaylist(playlist.id, songId)}
+                />
+                <div
+                  className={`w-5 h-5 border-2 rounded bg-[#181818] transition-all ${
+                    isProcessing
+                      ? "border-[#1db954] animate-pulse"
+                      : isChecked
+                        ? "bg-[#1db954] border-[#1db954]"
+                        : "border-gray-500"
+                  }`}
+                >
+                  {isProcessing && (
+                    <div className="absolute inset-0 flex items-center justify-center">
+                      <div className="w-3 h-3 border-2 border-transparent border-t-[#1db954] rounded-full animate-spin"></div>
+                    </div>
+                  )}
+                </div>
+                <svg
+                  className={`absolute w-3 h-3  transition-opacity ${
+                    isChecked && !isProcessing ? "opacity-100" : "opacity-0"
+                  }`}
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="3"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+              </div>
+              <span
+                className={`ml-3 text-sm truncate transition-all ${
+                  isProcessing
+                    ? "text-[#1db954] animate-pulse"
+                    : "text-gray-200 group-hover/item:text-white"
+                }`}
+              >
+                {playlist.name}
+              </span>
+              {isProcessing && (
+                <span className="ml-auto text-xs text-[#1db954] animate-pulse">
+                  •••
+                </span>
+              )}
+            </label>
+          );
+        })
+      ) : (
+        <div className="px-4 py-3 text-sm text-gray-500 italic">
+          No playlists created
+        </div>
+      )}
+
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          handleCreateNew();
+        }}
+        className="w-full text-left px-4 py-2 mt-1 text-sm text-[#1db954] hover:bg-white/5 transition-colors border-t border-white/5 flex items-center gap-2 font-medium cursor-pointer"
+      >
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 4v16m8-8H4"
+          />
+        </svg>
+        Create new playlist
+      </button>
+    </div>
+  );
+
+  return usePortal
+    ? createPortal(dropdownContent, document.body)
+    : dropdownContent;
+};
+
+export default PlaylistDropdown;
Index: frontend/src/pages/LandingPage.tsx
===================================================================
--- frontend/src/pages/LandingPage.tsx	(revision ce45c7a7871379455b3a3c55a48f767ca2e0e739)
+++ frontend/src/pages/LandingPage.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
@@ -2,5 +2,5 @@
 import { useNavigate } from "react-router-dom";
 import axiosInstance, { baseURL } from "../api/axiosInstance";
-import PlaylistDropdown from "../components/PlaylistDropdown";
+import PlaylistDropdown from "../components/playlist/PlaylistDropdown";
 import AlbumResult from "../components/search/AlbumResult";
 import SongResult from "../components/search/SongResult";
Index: frontend/src/pages/SongDetail.tsx
===================================================================
--- frontend/src/pages/SongDetail.tsx	(revision ce45c7a7871379455b3a3c55a48f767ca2e0e739)
+++ frontend/src/pages/SongDetail.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
@@ -3,5 +3,5 @@
 import { toast } from "react-toastify";
 import axiosInstance, { baseURL } from "../api/axiosInstance";
-import PlaylistDropdown from "../components/PlaylistDropdown";
+import PlaylistDropdown from "../components/playlist/PlaylistDropdown";
 import { useAuth } from "../context/authContext";
 import { usePlayer } from "../context/playerContext";
Index: frontend/src/utils/types.ts
===================================================================
--- frontend/src/utils/types.ts	(revision ce45c7a7871379455b3a3c55a48f767ca2e0e739)
+++ frontend/src/utils/types.ts	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
@@ -74,5 +74,5 @@
   isOpen: boolean;
   onClose: () => void;
-  onSubmit: (playlistName: string) => void;
+  onSuccess: () => void;
 }