diff --git a/backend/logs/access.log b/backend/logs/access.log
index efaee8d..a1f3f79 100644
--- a/backend/logs/access.log
+++ b/backend/logs/access.log
@@ -5536,3 +5536,121 @@
 [2025-08-14 20:16:05.601] [undefined] GET(/:id/stats): Successfully get stats with status 200
 [2025-08-14 20:16:09.229] [undefined] PUT(/:id): try to update channel with id 4
 [2025-08-14 20:16:09.234] [undefined] PUT(/:id): Successfully updated channel with status 200
+[2025-08-14 20:19:48.593] [undefined] POST(/login): try to login with username 'sacha2'
+[2025-08-14 20:19:48.645] [undefined] POST(/login): Successfully logged in with status 200
+[2025-08-14 20:19:50.397] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:19:50.401] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:19:50.404] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:19:50.409] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:19:50.416] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:19:52.573] [undefined] GET(/:id): try to get channel with id 1
+[2025-08-14 20:19:52.582] [undefined] GET(/:id/stats): try to get stats
+[2025-08-14 20:19:52.586] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
+[2025-08-14 20:19:52.596] [undefined] GET(/:id/stats): Successfully get stats with status 200
+[2025-08-14 20:19:57.515] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:19:57.518] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:19:59.762] [undefined] GET(/:id): try to get channel with id 1
+[2025-08-14 20:19:59.773] [undefined] GET(/:id/stats): try to get stats
+[2025-08-14 20:19:59.777] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
+[2025-08-14 20:19:59.785] [undefined] GET(/:id/stats): Successfully get stats with status 200
+[2025-08-14 20:20:00.371] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:20:00.375] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:20:00.377] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:20:00.382] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:20:00.389] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:23:01.532] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:23:01.536] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:23:01.538] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:23:01.544] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:23:01.551] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:31:39.192] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:31:39.195] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:31:39.198] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:31:39.204] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:31:39.211] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:31:53.915] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:31:53.918] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:31:53.942] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:31:53.947] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:31:53.956] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:31:56.423] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:31:56.426] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:31:56.428] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:31:56.434] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:31:56.442] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:32:02.387] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:32:02.390] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:32:02.393] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:32:02.399] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:32:02.406] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:32:11.988] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:32:11.992] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:32:11.994] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:32:11.999] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:32:12.007] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:32:12.840] [undefined] GET(/:id): try to get channel with id 1
+[2025-08-14 20:32:12.850] [undefined] GET(/:id/stats): try to get stats
+[2025-08-14 20:32:12.854] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
+[2025-08-14 20:32:12.862] [undefined] GET(/:id/stats): Successfully get stats with status 200
+[2025-08-14 20:32:13.944] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:32:13.947] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:32:13.950] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:32:13.953] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:32:13.961] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:32:50.173] [undefined] POST(/): try to register a user with username: test4 and email: test4@gmail.com
+[2025-08-14 20:32:50.223] [undefined] POST(/): successfully registered with status 200
+[2025-08-14 20:32:50.230] [undefined] POST(/login): try to login with username 'test4'
+[2025-08-14 20:32:50.281] [undefined] POST(/login): Successfully logged in with status 200
+[2025-08-14 20:32:51.673] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:32:51.677] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:32:51.679] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:32:51.682] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:32:51.691] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:33:07.906] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:33:07.909] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:33:07.911] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:33:07.914] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:33:07.924] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:33:16.345] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:33:16.348] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:33:16.351] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:33:16.354] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:33:16.363] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:34:21.620] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:34:21.624] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:34:21.627] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:34:21.631] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:34:21.639] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:34:36.364] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:34:36.367] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:34:36.369] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:34:36.372] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:34:36.381] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:34:55.418] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:34:55.422] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:34:55.425] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:34:55.428] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:34:55.436] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:35:04.997] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:35:05.000] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:35:05.004] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:35:05.008] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:35:05.015] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:36:01.767] [undefined] PUT(/:id): try to update user 6
+[2025-08-14 20:36:01.772] [undefined] PUT(/:id): successfully updated user 6 with status 200
+[2025-08-14 20:36:03.230] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:36:03.233] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:36:03.236] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:36:03.239] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:36:03.248] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:41:31.791] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:41:31.794] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:41:31.797] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:41:31.800] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:41:31.808] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:41:50.529] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:41:50.532] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:41:50.535] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:41:50.539] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:41:50.550] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:41:53.692] [undefined] POST(/): Playlist created with id 7 with status 200
diff --git a/frontend/src/modals/CreatePlaylistModal.jsx b/frontend/src/modals/CreatePlaylistModal.jsx
new file mode 100644
index 0000000..4215e71
--- /dev/null
+++ b/frontend/src/modals/CreatePlaylistModal.jsx
@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { createPlaylist } from "../services/playlist.service.js";
+
+export default function CreatePlaylistModal({ isOpen, onClose, addAlert }) {
+
+    const [name, setName] = useState('');
+
+    const onSubmit = async (e) => {
+        e.preventDefault();
+        const token = localStorage.getItem("token");
+        const body = { name };
+        await createPlaylist(body, token, addAlert);
+        onClose();
+    };
+
+    return isOpen && (
+
+        <div className="bg-[#00000080] fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center" >
+            <div className="glassmorphism p-4 w-1/4" >
+                <h2 className="text-2xl text-white font-montserrat font-bold" >Créer une playlist</h2>
+                <label htmlFor="name" className="block text-xl text-white font-montserrat font-semibold mt-2" >Nom de la playlist</label>
+                <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    placeholder="Nom de la playlist"
+                    className="block glassmorphism text-lg text-white font-inter w-full py-3 px-2 focus:outline-none"
+                    onChange={(e) => setName(e.target.value)}
+                    value={name}
+                />
+                <button
+                    className="bg-primary mt-2 py-2 px-3 rounded-sm text-white font-montserrat text-2xl font-semibold cursor-pointer"
+                    onClick={(e) => onSubmit(e) }
+                >
+                    Valider
+                </button>
+                <button
+                    className="bg-red-500 ml-2 mt-2 py-2 px-3 rounded-sm text-white font-montserrat text-2xl font-semibold cursor-pointer"
+                    onClick={onClose}
+                >
+                    Annuler
+                </button>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Account.jsx b/frontend/src/pages/Account.jsx
index d8e5e9a..9586aa5 100644
--- a/frontend/src/pages/Account.jsx
+++ b/frontend/src/pages/Account.jsx
@@ -1,9 +1,10 @@
 import Navbar from "../components/Navbar.jsx";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import PlaylistCard from "../components/PlaylistCard.jsx";
 import VideoCard from "../components/VideoCard.jsx";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import CreateChannelModal from "../modals/CreateChannelModal.jsx";
+import CreatePlaylistModal from "../modals/CreatePlaylistModal.jsx";
 import { getChannel, getUserHistory, getPlaylists, updateUser } from "../services/user.service.js";
 
 
@@ -21,6 +22,7 @@ export default function Account() {
     const [userPlaylists, setUserPlaylists] = useState([]);
     const [userChannel, setUserChannel] = useState(null);
     const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isCreatePlaylistModalOpen, setIsCreatePlaylistModalOpen] = useState(false);
     const [alerts, setAlerts] = useState([]);
 
     const navigation = useNavigate();
@@ -92,160 +94,166 @@ export default function Account() {
             <main className="px-36 pt-[118px] flex justify-between items-start">
                 {/* Left side */}
 
-                    {/* Profile / Edit profile */}
-                    <form className="glassmorphism  w-1/3 p-10">
-                        <div className="relative w-1/3 aspect-square overflow-hidden mb-3 mx-auto" onMouseEnter={() => setIsPictureEditActive(true)} onMouseLeave={() => setIsPictureEditActive(false)} >
-                            <label htmlFor="image">
-                                <img
-                                    src={user.picture}
-                                    className="w-full aspect-square rounded-full object-cover"
-                                />
-                                <div className={`absolute w-full h-full bg-[#000000EF] flex items-center justify-center top-0 left-0 rounded-full ${(isPictureEditActive && editMode) ? "opacity-100 cursor-pointer" : "opacity-0 cursor-default"} ` } >
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" className="fill-white" viewBox="0 0 24 24">
-                                        <path d="M19.045 7.401c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.378-.378-.88-.586-1.414-.586s-1.036.208-1.413.585L4 13.585V18h4.413L19.045 7.401zm-3-3 1.587 1.585-1.59 1.584-1.586-1.585 1.589-1.584zM6 16v-1.585l7.04-7.018 1.586 1.586L7.587 16H6zm-2 4h16v2H4z"></path>
-                                    </svg>
-                                </div>
-                            </label>
-                            <input type="file" accept="image/*" id="image" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" disabled={!editMode}/>
-                        </div>
-                        <label htmlFor="name" className="text-2xl text-white mb-1 block font-montserrat">
-                        Nom d'utilisateur
-                        </label>
-                        <input
-                            type="text"
-                            id="name"
-                            value={username}
-                            className={(editMode ? editModeClasses : nonEditModeClasses)}
-                            onChange={(e) => setUsername(e.target.value)}
-                            placeholder="Nom d'utilisateur"
-                            disabled={!editMode}
-                        />
-
-                        <label htmlFor="email" className="text-2xl text-white mb-1 mt-4 block font-montserrat">
-                            Adresse e-mail
+                {/* Profile / Edit profile */}
+                <form className="glassmorphism  w-1/3 p-10">
+                    <div className="relative w-1/3 aspect-square overflow-hidden mb-3 mx-auto" onMouseEnter={() => setIsPictureEditActive(true)} onMouseLeave={() => setIsPictureEditActive(false)} >
+                        <label htmlFor="image">
+                            <img
+                                src={user.picture}
+                                className="w-full aspect-square rounded-full object-cover"
+                            />
+                            <div className={`absolute w-full h-full bg-[#000000EF] flex items-center justify-center top-0 left-0 rounded-full ${(isPictureEditActive && editMode) ? "opacity-100 cursor-pointer" : "opacity-0 cursor-default"} `} >
+                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" className="fill-white" viewBox="0 0 24 24">
+                                    <path d="M19.045 7.401c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.378-.378-.88-.586-1.414-.586s-1.036.208-1.413.585L4 13.585V18h4.413L19.045 7.401zm-3-3 1.587 1.585-1.59 1.584-1.586-1.585 1.589-1.584zM6 16v-1.585l7.04-7.018 1.586 1.586L7.587 16H6zm-2 4h16v2H4z"></path>
+                                </svg>
+                            </div>
                         </label>
-                        <input
-                            type="email"
-                            id="email"
-                            value={email}
-                            className={(editMode ? editModeClasses : nonEditModeClasses)}
-                            onChange={(e) => setEmail(e.target.value)}
-                            placeholder="Adresse mail"
-                            disabled={!editMode}
-                        />
-
-                        { editMode && (
-                            <>
-                                <label htmlFor="password" className="text-2xl text-white mb-1 mt-4 block font-montserrat">
-                                    Mot de passe
-                                </label>
-                                <input
-                                    type="password"
-                                    id="password"
-                                    value={password}
-                                    className={(editMode ? editModeClasses : nonEditModeClasses)}
-                                    onChange={(e) => setPassword(e.target.value)}
-                                    placeholder="**************"
-                                    disabled={!editMode}
-                                />
-
-                                <label htmlFor="confirm-password" className="text-2xl text-white mb-1 mt-4 block font-montserrat">
-                                    Confirmer le mot de passe
-                                </label>
-                                <input
-                                    type="password"
-                                    id="confirm-password"
-                                    value={confirmPassword}
-                                    className={(editMode ? editModeClasses : nonEditModeClasses)}
-                                    onChange={(e) => setConfirmPassword(e.target.value)}
-                                    placeholder=""
-                                    disabled={!editMode}
-                                />
-                            </>
-                        )
+                        <input type="file" accept="image/*" id="image" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" disabled={!editMode} />
+                    </div>
+                    <label htmlFor="name" className="text-2xl text-white mb-1 block font-montserrat">
+                        Nom d'utilisateur
+                    </label>
+                    <input
+                        type="text"
+                        id="name"
+                        value={username}
+                        className={(editMode ? editModeClasses : nonEditModeClasses)}
+                        onChange={(e) => setUsername(e.target.value)}
+                        placeholder="Nom d'utilisateur"
+                        disabled={!editMode}
+                    />
 
-                        }
+                    <label htmlFor="email" className="text-2xl text-white mb-1 mt-4 block font-montserrat">
+                        Adresse e-mail
+                    </label>
+                    <input
+                        type="email"
+                        id="email"
+                        value={email}
+                        className={(editMode ? editModeClasses : nonEditModeClasses)}
+                        onChange={(e) => setEmail(e.target.value)}
+                        placeholder="Adresse mail"
+                        disabled={!editMode}
+                    />
+
+                    {editMode && (
+                        <>
+                            <label htmlFor="password" className="text-2xl text-white mb-1 mt-4 block font-montserrat">
+                                Mot de passe
+                            </label>
+                            <input
+                                type="password"
+                                id="password"
+                                value={password}
+                                className={(editMode ? editModeClasses : nonEditModeClasses)}
+                                onChange={(e) => setPassword(e.target.value)}
+                                placeholder="**************"
+                                disabled={!editMode}
+                            />
+
+                            <label htmlFor="confirm-password" className="text-2xl text-white mb-1 mt-4 block font-montserrat">
+                                Confirmer le mot de passe
+                            </label>
+                            <input
+                                type="password"
+                                id="confirm-password"
+                                value={confirmPassword}
+                                className={(editMode ? editModeClasses : nonEditModeClasses)}
+                                onChange={(e) => setConfirmPassword(e.target.value)}
+                                placeholder=""
+                                disabled={!editMode}
+                            />
+                        </>
+                    )
+
+                    }
 
-                        <div className="flex justify-center mt-5">
-                            {
-                                editMode ? (
-                                    <div>
-                                        <button
-                                            type="button"
-                                            className="bg-primary p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer"
-                                            onClick={handleUpdateUser}
-                                        >
-                                            Enregistrer
-                                        </button>
-                                        <button
-                                            type="button"
-                                            className="bg-red-500 p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer ml-3"
-                                            onClick={() => setEditMode(!editMode)}
-                                        >
-                                            Annuler
-                                        </button>
-                                    </div>
-                                ) : (
+                    <div className="flex justify-center mt-5">
+                        {
+                            editMode ? (
+                                <div>
                                     <button
                                         type="button"
                                         className="bg-primary p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer"
+                                        onClick={handleUpdateUser}
+                                    >
+                                        Enregistrer
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="bg-red-500 p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer ml-3"
                                         onClick={() => setEditMode(!editMode)}
                                     >
-                                        Modifier le profil
+                                        Annuler
                                     </button>
-                                )
-                            }
-                        </div>
-                    </form>
+                                </div>
+                            ) : (
+                                <button
+                                    type="button"
+                                    className="bg-primary p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer"
+                                    onClick={() => setEditMode(!editMode)}
+                                >
+                                    Modifier le profil
+                                </button>
+                            )
+                        }
+                    </div>
+                </form>
 
                 { /* Right side */}
 
-                    <div className="w-2/3 flex flex-col items-start pl-10">
-                        {/* Channel */}
-                        {userChannel ? (
-                            <div className="glassmorphism p-10 w-full flex justify-between">
-                                <p className="text-3xl text-white mb-2 font-montserrat font-bold">{userChannel.channel.name}</p>
-                                <button>
-                                    <span onClick={() => navigation(`/manage-channel/${userChannel.channel.id}`)} className="bg-primary p-3 rounded-sm text-white font-montserrat text-2xl font-semibold cursor-pointer">
-                                        Gérer la chaîne
-                                    </span>
-                                </button>
-                            </div>
-                        ) : (
-                            <div className="glassmorphism p-10 w-full">
-                                <h2 className="text-3xl font-bold text-white mb-4">Chaîne</h2>
-                                <p className="text-xl text-white mb-2">Aucune chaîne associée à ce compte.</p>
-                                <button className=" mt-4">
-                                    <a onClick={() => setIsModalOpen(true)} className="bg-primary p-3 rounded-sm text-white font-montserrat text-2xl font-semibold cursor-pointer">
-                                        Créer une chaîne
-                                    </a>
-                                </button>
-                            </div>
-                        )}
-                        {/* Playlists */}
-                        <h2 className="font-montserrat font-bold text-3xl text-white mt-10" >Playlists</h2>
-                        <div className="w-full mt-5 flex flex-wrap" >
-                            {
-                                userPlaylists && userPlaylists.map((playlist, index) => (
-                                    <PlaylistCard playlist={playlist} key={index} onClick={handlePlaylistClick} />
-                                ))
-                            }
+                <div className="w-2/3 flex flex-col items-start pl-10">
+                    {/* Channel */}
+                    {userChannel ? (
+                        <div className="glassmorphism p-10 w-full flex justify-between">
+                            <p className="text-3xl text-white mb-2 font-montserrat font-bold">{userChannel.channel.name}</p>
+                            <button>
+                                <span onClick={() => navigation(`/manage-channel/${userChannel.channel.id}`)} className="bg-primary p-3 rounded-sm text-white font-montserrat text-2xl font-semibold cursor-pointer">
+                                    Gérer la chaîne
+                                </span>
+                            </button>
                         </div>
-                        {/* History */}
-                        <h2 className="font-montserrat font-bold text-3xl text-white mt-10" >Historique</h2>
-                        <div className="w-full mt-5 flex flex-wrap gap-2" >
-                            {
-                                userHistory && userHistory.map((video, index) => (
-                                    <div className="w-1/3" key={index}>
-                                        <VideoCard video={video}/>
-                                    </div>
-                                ))
-                            }
+                    ) : (
+                        <div className="glassmorphism p-10 w-full">
+                            <h2 className="text-3xl font-bold text-white mb-4">Chaîne</h2>
+                            <p className="text-xl text-white mb-2">Aucune chaîne associée à ce compte.</p>
+                            <button className=" mt-4">
+                                <a onClick={() => setIsModalOpen(true)} className="bg-primary p-3 rounded-sm text-white font-montserrat text-2xl font-semibold cursor-pointer">
+                                    Créer une chaîne
+                                </a>
+                            </button>
                         </div>
+                    )}
+                    {/* Playlists */}
+                    <div className="flex justify-between items-center w-full mt-10">
+                        <h2 className="font-montserrat font-bold text-3xl text-white" >Playlists</h2>
+                        <button onClick={() => setIsCreatePlaylistModalOpen(true)} className="bg-primary p-3 rounded-sm text-white font-montserrat text-lg font-semibold cursor-pointer">
+                            Créer une playlist
+                        </button>
+                    </div>
+                    <div className="w-full mt-5 flex flex-wrap" >
+                        {
+                            userPlaylists && userPlaylists.map((playlist, index) => (
+                                <PlaylistCard playlist={playlist} key={index} onClick={handlePlaylistClick} />
+                            ))
+                        }
+                    </div>
+                    {/* History */}
+                    <h2 className="font-montserrat font-bold text-3xl text-white mt-10" >Historique</h2>
+                    <div className="w-full mt-5 flex flex-wrap gap-2" >
+                        {
+                            userHistory && userHistory.map((video, index) => (
+                                <div className="w-1/3" key={index}>
+                                    <VideoCard video={video} />
+                                </div>
+                            ))
+                        }
                     </div>
+                </div>
 
             </main>
             <CreateChannelModal isOpen={isModalOpen} onClose={() => closeModal()} addAlert={addAlert} />
+            <CreatePlaylistModal isOpen={isCreatePlaylistModalOpen} onClose={() => setIsCreatePlaylistModalOpen(false)} addAlert={addAlert} />
         </div>
     )
 
diff --git a/frontend/src/services/playlist.service.js b/frontend/src/services/playlist.service.js
new file mode 100644
index 0000000..e520f92
--- /dev/null
+++ b/frontend/src/services/playlist.service.js
@@ -0,0 +1,23 @@
+
+export async function createPlaylist(body, token, addAlert) {
+    try {
+        const response = await fetch(`https://localhost/api/playlists`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${token}`
+            },
+            body: JSON.stringify(body)
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to create playlist');
+        }
+
+        const data = await response.json();
+        addAlert('success', 'Playlist created successfully');
+        return data;
+    } catch (error) {
+        addAlert('error', error.message);
+    }
+}
\ No newline at end of file