diff --git a/ci/application/controllers/Albums.php b/ci/application/controllers/Albums.php
index 5e832c0..0200e56 100644
--- a/ci/application/controllers/Albums.php
+++ b/ci/application/controllers/Albums.php
@@ -20,11 +20,8 @@ class Albums extends CI_Controller {
         if (empty($songs)) {
             $songs = []; 
         }
-
-        log_message('debug', 'Songs: ' . print_r($songs, true));
-        
         $this->load->view('layout/header');
-        $this->load->view('song_album_list', ['songs' => $songs]);
+        $this->load->view('song_album_list', ['songs' => $songs, 'album' => $album]);
         $this->load->view('layout/footer');
     }
 }
diff --git a/ci/application/controllers/Playlist.php b/ci/application/controllers/Playlist.php
index 4af69bb..00b3648 100644
--- a/ci/application/controllers/Playlist.php
+++ b/ci/application/controllers/Playlist.php
@@ -10,16 +10,16 @@ class Playlist extends CI_Controller {
 
     public function index(){
         $playlists = $this->model_music->getPlaylist();
-        //$this->load->view('layout/header_album');
+      //  $this->load->view('layout/header');
         $this->load->view('playlist_list', ['playlists' => $playlists]);
-        //$this->load->view('layout/footer_album');
+        $this->load->view('layout/footer');
     }
 
     public function view(){
         $playlists = $this->model_music->deletePlaylist();
         //$this->load->view('layout/header_album');
         $this->load->view('playlist_list', ['playlists' => $playlists]);
-        //$this->load->view('layout/footer_album');
+        $this->load->view('layout/footer');
     }
 
     public function SongPlaylist($playlist_id){
@@ -37,6 +37,8 @@ class Playlist extends CI_Controller {
     public function MenuCreate() {
         //$this->load->view('layout/header_album');
         $this->load->view('create_playlist');
+        $this->load->view('layout/footer');
+
     }
 
     public function createPlaylistController() {
diff --git a/ci/application/views/create_playlist.php b/ci/application/views/create_playlist.php
index 27ee44b..ce0be49 100644
--- a/ci/application/views/create_playlist.php
+++ b/ci/application/views/create_playlist.php
@@ -1,10 +1,6 @@
-<h5>Créer une nouvelle Playlist</h5>
-<?php
-
-?>
-
-<form action="<?= base_url('index.php/playlist/createPlaylistController') ?>" method="post">
-    <label for="name_playlist">Nom de la Playlist:</label>
-    <input type="text" name="name_playlist" id="name_playlist" required>
-    <button type="submit" name="submit">Créer</button>
-</form>
\ No newline at end of file
+<h5 class="playlist-title">Créer une nouvelle Playlist</h5>
+<form action="<?= base_url('index.php/playlist/createPlaylistController') ?>" method="post" class="playlist-form">
+    <label for="name_playlist" class="playlist-label">Nom de la Playlist:</label>
+    <input type="text" name="name_playlist" id="name_playlist" class="playlist-input" required>
+    <button type="submit" name="submit" class="playlist-button">Créer</button>
+</form>
diff --git a/ci/application/views/layout/footer.php b/ci/application/views/layout/footer.php
index 3e5cdea..f5253c0 100644
--- a/ci/application/views/layout/footer.php
+++ b/ci/application/views/layout/footer.php
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <title>MUSIC APP</title>
     <link rel="stylesheet" href="<?= base_url('assets/style.css') ?>">
+    <link rel="stylesheet" href="<?= base_url('assets/playlist.css') ?>">
 </head>
 <body>
 <footer class="footer">
diff --git a/ci/application/views/layout/header.php b/ci/application/views/layout/header.php
index 29698f6..8721f0a 100644
--- a/ci/application/views/layout/header.php
+++ b/ci/application/views/layout/header.php
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="<?= base_url('assets/song.css') ?>">
     <link rel="stylesheet" href="<?= base_url('assets/artiste.css') ?>">
     <link rel="stylesheet" href="<?= base_url('assets/album.css') ?>">
+    <link rel="stylesheet" href="<?= base_url('assets/playlist.css') ?>">
 </head>
 <body>
     <main class='contain'>
diff --git a/ci/application/views/playlist_list.php b/ci/application/views/playlist_list.php
index 67ed953..396e947 100644
--- a/ci/application/views/playlist_list.php
+++ b/ci/application/views/playlist_list.php
@@ -1,18 +1,19 @@
-<h5>Playlist List</h5>
 <?php
-
 echo "<form action='" . base_url("index.php/playlist/MenuCreate/") . "' method='post'>";
-echo "<button type='Créer Playlist'>Create</button>";
+echo "<button type='submit' class='create-button'>Create</button>";
 echo "</form>";
+echo "<div class='playlist-container'>";
 
 foreach($playlists as $playlist){ 
-    echo "<div><article>";
+    echo "<div class='playlist-item'>";
     echo "<header class='short-text'>";
-    echo anchor("playlist/SongPlaylist/{$playlist->id}","{$playlist->name}");
+    echo anchor("playlist/SongPlaylist/{$playlist->id}","<h3>{$playlist->name}</h3>");
     echo "<form action='" . base_url("index.php/playlist/delete/{$playlist->id}") . "' method='post'>";
-    echo "<button type='Supprimer Playlist'>Delete</button>";
+    echo "<button type='submit' class='delete-button'>Delete</button>";
     echo "</form>";
     echo "</header>";
-    echo "</article></div>";
+    // If you want to add an image, you can add it here
+    echo "</div>";
 }
+echo "</div>";
 ?>
diff --git a/ci/application/views/song_album_list.php b/ci/application/views/song_album_list.php
index bd87cf4..dfcc7c3 100644
--- a/ci/application/views/song_album_list.php
+++ b/ci/application/views/song_album_list.php
@@ -1,4 +1,3 @@
-
 <section class="list">
 <?php
 foreach($songs as $song){ 
@@ -12,3 +11,4 @@ foreach($songs as $song){
 }
 ?>
 </section>
+
diff --git a/ci/assets/album.css b/ci/assets/album.css
index 4dc7e21..0c674ab 100644
--- a/ci/assets/album.css
+++ b/ci/assets/album.css
@@ -21,7 +21,7 @@
 }
 
 .album img {
-    max-width: 100%;
+    max-width: 80%;
     height: auto;
     border-bottom: 1px solid #ccc;
     margin-bottom: 10px;
diff --git a/ci/assets/playlist.css b/ci/assets/playlist.css
new file mode 100644
index 0000000..7920b89
--- /dev/null
+++ b/ci/assets/playlist.css
@@ -0,0 +1,59 @@
+/* Style for the buttons */
+button[type='submit'].create-button,
+button[type='submit'].delete-button {
+    background-color: #1ed860 !important;
+    color: white;
+    padding: 5px 10px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    margin: 5px;
+}
+button.upload-image-button {
+    background-color: transparent;
+    color: green;
+    border: 1px solid green;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+button.upload-image-button:hover {
+    background-color: green;
+    color: white;
+}
+
+/* Style for the playlist container */
+div.playlist-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding-top: 20px; /* Ajoutez un padding pour éviter que le contenu ne soit caché par la barre de navigation */
+}
+
+/* Style for each playlist */
+div.playlist-item {
+    width: 200px;
+    margin: 10px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    text-align: center;
+}
+
+div.playlist-item img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Style for the playlist name */
+div.playlist-item h3 {
+    margin-top: 10px;
+    font-size: 18px;
+}
+
+div.playlist-item:hover {
+    transform: scale(1.05);
+}
+
diff --git a/ci/assets/style.css b/ci/assets/style.css
index 0904124..04f95c2 100644
--- a/ci/assets/style.css
+++ b/ci/assets/style.css
@@ -4,7 +4,7 @@ body {
     box-sizing: border-box;
     background-color: white;
     font-size: 16px;
-    height: 100%;
+    height: 80%;
 
 }
 .navbar a {
@@ -202,12 +202,6 @@ body {
     color: #1ed860;
 }
 
-html, body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    font-family: 'Arial', sans-serif;
-}
 .logo img {
     padding-left: 10px;
     width: 200px;
