Index: frontend/src/components/playlist/CreatePlaylistModal.tsx
===================================================================
--- frontend/src/components/playlist/CreatePlaylistModal.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
+++ frontend/src/components/playlist/CreatePlaylistModal.tsx	(revision c807e22a23a43e4044ff83aa0fe6a9c8c59a7cb4)
@@ -8,4 +8,5 @@
   onClose,
   onSuccess,
+  songId,
 }: CreatePlaylistModalProps) => {
   const [playlistName, setPlaylistName] = useState("");
@@ -39,9 +40,13 @@
     setIsSubmitting(true);
     try {
-      await axiosInstance.post(
-        `/playlists?playlistName=${encodeURIComponent(playlistName.trim())}`,
-      );
+      await axiosInstance.post("/playlists", null, {
+        params: {
+          playlistName: playlistName.trim(),
+          ...(songId != null && { songId }),
+        },
+      });
+
       toast.success("Playlist created successfully!");
-      onSuccess();
+      await onSuccess();
       handleClose();
     } catch (err: any) {
Index: frontend/src/components/playlist/PlaylistDropdown.tsx
===================================================================
--- frontend/src/components/playlist/PlaylistDropdown.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
+++ frontend/src/components/playlist/PlaylistDropdown.tsx	(revision c807e22a23a43e4044ff83aa0fe6a9c8c59a7cb4)
@@ -3,4 +3,5 @@
 import axiosInstance from "../../api/axiosInstance";
 import { useCreatedPlaylists } from "../../context/playlistContext";
+import CreatePlaylistModal from "./CreatePlaylistModal";
 
 interface PlaylistDropdownProps {
@@ -13,6 +14,4 @@
 
   direction?: "above" | "below";
-
-  onCreateNewPlaylist?: () => void;
 }
 
@@ -24,5 +23,4 @@
   usePortal = false,
   direction = "above",
-  onCreateNewPlaylist,
 }: PlaylistDropdownProps) => {
   const { createdPlaylists, refreshPlaylists } = useCreatedPlaylists();
@@ -31,7 +29,6 @@
   );
   const [loading, setLoading] = useState(false);
-  const [processingPlaylistId, setProcessingPlaylistId] = useState<
-    number | null
-  >(null);
+  const [processingIds, setProcessingIds] = useState<Set<number>>(new Set());
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -75,7 +72,7 @@
 
   const handleTogglePlaylist = async (playlistId: number, songId: number) => {
-    if (processingPlaylistId !== null) return;
-
-    setProcessingPlaylistId(playlistId);
+    if (processingIds.has(playlistId)) return;
+
+    setProcessingIds((prev) => new Set(prev).add(playlistId));
 
     try {
@@ -104,5 +101,9 @@
       refreshPlaylists(true);
       setTimeout(() => {
-        setProcessingPlaylistId(null);
+        setProcessingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(playlistId);
+          return next;
+        });
       }, 500);
     }
@@ -110,9 +111,11 @@
 
   const handleCreateNew = () => {
-    onCreateNewPlaylist?.();
     onClose();
+    setIsModalOpen(true);
   };
 
-  if (!isOpen) return null;
+  const handleModalSuccess = async () => {
+    await refreshPlaylists(false);
+  };
 
   const inlinePositionClass =
@@ -121,8 +124,8 @@
       : "absolute right-0 bottom-full mb-2";
 
-  const dropdownContent = (
+  const dropdownContent = !isOpen ? null : (
     <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`}
+      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
@@ -147,5 +150,5 @@
       ) : createdPlaylists && createdPlaylists.length > 0 ? (
         createdPlaylists.map((playlist) => {
-          const isProcessing = processingPlaylistId === playlist.id;
+          const isProcessing = processingIds.has(playlist.id);
           const isChecked = containingPlaylistIds.includes(playlist.id);
 
@@ -153,15 +156,15 @@
             <label
               key={playlist.id}
-              className={`flex items-center px-4 py-2 hover:bg-white/10 transition-colors group/item ${
+              className={`flex items-center gap-1.5 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">
+              <div className="relative flex items-center justify-center  shrink-0">
                 <input
                   type="checkbox"
                   className="peer sr-only"
                   checked={isChecked}
-                  disabled={processingPlaylistId !== null}
+                  disabled={isProcessing}
                   onChange={() => handleTogglePlaylist(playlist.id, songId)}
                 />
@@ -172,5 +175,5 @@
                       : isChecked
                         ? "bg-[#1db954] border-[#1db954]"
-                        : "border-gray-500"
+                        : "border-gray-500 text=wjot"
                   }`}
                 >
@@ -182,9 +185,9 @@
                 </div>
                 <svg
-                  className={`absolute w-3 h-3  transition-opacity ${
+                  className={`absolute w-3 h-3 transition-opacity ${
                     isChecked && !isProcessing ? "opacity-100" : "opacity-0"
                   }`}
                   fill="none"
-                  stroke="currentColor"
+                  stroke="white"
                   strokeWidth="3"
                   viewBox="0 0 24 24"
@@ -198,5 +201,5 @@
               </div>
               <span
-                className={`ml-3 text-sm truncate transition-all ${
+                className={`text-sm truncate transition-all ${
                   isProcessing
                     ? "text-[#1db954] animate-pulse"
@@ -206,9 +209,4 @@
                 {playlist.name}
               </span>
-              {isProcessing && (
-                <span className="ml-auto text-xs text-[#1db954] animate-pulse">
-                  •••
-                </span>
-              )}
             </label>
           );
@@ -245,7 +243,24 @@
   );
 
-  return usePortal
-    ? createPortal(dropdownContent, document.body)
-    : dropdownContent;
+  const dropdown = dropdownContent
+    ? usePortal
+      ? createPortal(dropdownContent, document.body)
+      : dropdownContent
+    : null;
+
+  return (
+    <>
+      {dropdown}
+      {createPortal(
+        <CreatePlaylistModal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          onSuccess={handleModalSuccess}
+          songId={songId}
+        />,
+        document.body,
+      )}
+    </>
+  );
 };