diff --git a/CHANGES.md b/CHANGES.md
index 0d562ed..c221fa7 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -1,5 +1,11 @@
 # Change Log  
 
+## 0.2.2 (2025-03-02)
+
+### Improvements
+
+- Delete button are only displayed on mouse over  
+
 ## 0.2.1 (2025-02-28)  
 
 ### IMPORTANT NOTICE  
diff --git a/README.md b/README.md
index 531ab44..a3f1548 100644
--- a/README.md
+++ b/README.md
@@ -22,11 +22,9 @@ Ascape Mixer is an audio player and mixer designed for TTRPG actual play, allowi
 
 ## Installation  
 
-1. Download the latest installer for your OS from the [Releases](#) page.  
+1. Download the latest installer for your OS from the [Releases](https://github.com/ilyaly/ascapes-mixer/releases) page.  
 2. Run the installer and follow the instructions.  
 3. Launch the application.
-4. Create a playlist in a section of your interset and open it.  
-4. Drag and drop `.mp3` or `.wav` files into the playlist.  
 
 ## Development  
 
diff --git a/package.json b/package.json
index 5337005..83f89a9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ascapes-mixer",
   "private": true,
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "scripts": {
     "dev": "vite dev",
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index ca3fd3a..1815e2d 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "ascapes-mixer",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "identifier": "ascapes.mixer",
   "build": {
     "frontendDist": "../build",
diff --git a/src/lib/catalog/CatalogItem.svelte b/src/lib/catalog/CatalogItem.svelte
index 657de36..be8083f 100644
--- a/src/lib/catalog/CatalogItem.svelte
+++ b/src/lib/catalog/CatalogItem.svelte
@@ -14,6 +14,7 @@
 
 	let name = $state(item.name);
 	let description = $state(item.description);
+	let isMouseOver = $state(false)
 
 	function handleNameChange() {
 		playlistsState.setPlaylist({
@@ -92,13 +93,13 @@
 			</textarea>
 		</div>
 
-
-	    <button 
-	    	class="button"
-	    	onclick={handleOpenPlaylist} 
-	    >
+		<button 
+		   	class="button"
+		   	onclick={handleOpenPlaylist} 
+		>
 			<OpenListIcon />
 		</button>
+	    
 	</div>
 
 	
@@ -140,6 +141,10 @@
 		
 	}
 
+	.playlist:hover button {
+		visibility: visible;
+	}
+
 
 	.playlist-header {
 		display: flex;
@@ -175,6 +180,7 @@
 		resize: none;
 		padding: 4px;
 		border-radius: 4px;
+		overflow: hidden;
 	}
 
 	.playlist-footer {
@@ -193,6 +199,7 @@
 	}
 
 	button {
+		visibility: hidden;
 		margin: 0;
 		padding: 0;
 		background: none;
diff --git a/src/lib/player/Player.svelte b/src/lib/player/Player.svelte
index 38d2ee9..8312aa9 100644
--- a/src/lib/player/Player.svelte
+++ b/src/lib/player/Player.svelte
@@ -6,6 +6,17 @@
   
   let { playlist } = $props();
   
+  /*
+
+  ToDo:
+
+  Move current track and playback states to the Music / Ambiente component
+  to be able to get to playlists page without stopping the playback.
+
+  Maybe should even put the player on the playlists page, to be able to 
+  controll playback while managing playlists.
+  
+  */
   let currentTrackState = $state({
     id: null,
     index: null,
diff --git a/src/lib/playlist/Playlist.svelte b/src/lib/playlist/Playlist.svelte
index 7945a7c..784b7de 100644
--- a/src/lib/playlist/Playlist.svelte
+++ b/src/lib/playlist/Playlist.svelte
@@ -172,8 +172,16 @@
     handleFilesDrop(droppedFiles);
     isDragging = false;
   }
+
+  function handleKeydown(event) {
+    console.log(event)
+  }
 </script>
 
+
+<svelte:window onkeydown={handleKeydown} />
+
+
 <div class="playlist">
   {#if items && items.length === 0}
     <span class="playlist-empty-tip">Drop audio files here</span>
diff --git a/src/lib/playlist/PlaylistItem.svelte b/src/lib/playlist/PlaylistItem.svelte
index b60fb60..89251d0 100644
--- a/src/lib/playlist/PlaylistItem.svelte
+++ b/src/lib/playlist/PlaylistItem.svelte
@@ -100,8 +100,11 @@
 
     await remove(item.path, { baseDir: BaseDirectory.AppLocalData });
   }
+
+  
 </script>
 
+
 <div
   class="playlist-item {isCurrentTrack ? 'active' : ''}"
 >
@@ -141,10 +144,12 @@
   </div>
 </div>
 
+
+
 <style>
   .playlist-item {
     font-family: "Roboto", serif;
-    width: -webkit-fill-available;
+    width: 100%;;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -160,12 +165,16 @@
     background-color: #f0f0ff;
   }
 
+  .playlist-item:hover .delete-button {
+    visibility: visible;
+  }
+
   .active {
     background-color: #0000001a;
   }
 
   .playlist-item-info {
-    width: -webkit-fill-available;
+    width: 100%;;
     display: flex;
     flex-direction: row;
     gap: 8px;
@@ -176,11 +185,11 @@
   }
 
   .playlist-item-meta {
+    width: 100%;;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 8px;
-    width: -webkit-fill-available;
   }
 
   .playlist-item-name-container {
@@ -201,7 +210,8 @@
     width: auto;
   }
 
-  .button {
+  button {
+
     width: 48px;
     height: 48px;
 
@@ -213,12 +223,13 @@
     border: none;
   }
 
-  .button:hover {
+  button:hover {
     cursor: pointer;
     fill: rgb(33 150 243 / 100%);
   }
 
   .delete-button {
+    visibility: hidden;
     cursor: pointer;
   }
 
diff --git a/src/lib/sections/Section.svelte b/src/lib/sections/Section.svelte
new file mode 100644
index 0000000..c1da043
--- /dev/null
+++ b/src/lib/sections/Section.svelte
@@ -0,0 +1,335 @@
+<script>
+	import { onMount } from "svelte";
+  import { setContext, getContext } from "svelte";
+
+  import Catalog from "../catalog/Catalog.svelte";
+  import CatalogNew from "../catalog/CatalogNew.svelte"
+  import Player from "../player/Player.svelte";
+  import OneShotPlayer from "../oneshot/OneShotPlayer.svelte";
+  import OpenListIcon from "../icons/OpenListIcon.svelte"
+
+  import {
+	    registerStore,
+	    writeData,
+	    readData,
+	    deleteData,
+			clearStore,
+	} from "../utils/indexeddb.js";
+
+	let { label, type, dbName, dbState, storeName } = $props();
+
+	let isReady = $state(false);
+
+	let playlists = $state([]);
+	
+	setContext("playlists", {
+	    getPlaylists() {
+	    	return playlists;
+	    },
+	    setPlaylists(items) {
+	    	playlists = items;
+	    },
+	    getPlaylist(id) {
+	    	return playlists.find(({ id }) => id === id);
+	    },
+	    setPlaylist(item) {
+	    	console.log(item)
+	    	playlists = playlists.map((obj) =>
+	   			obj.id === item.id ? item : obj,
+	    	);
+	    }
+	});
+
+	let activePlaylist =$state(null);
+
+	setContext("activePlaylist", {
+		getActivePlaylist() {
+			return activePlaylist;
+		},
+		setActivePlaylist(playlist) {
+			activePlaylist = playlist;
+			playlist.quantity = playlist.tracks.length;
+			playlists = playlists.map((obj) => 
+				obj.id === activePlaylist.id ? activePlaylist : obj
+			);
+		},
+		getActivePlaylistTrack(id) {
+      return activePlaylist.tracks.find(({ id }) => id === id);
+    },
+    setActivePlaylistTrack(track) {
+    	//Update active playlist tracks
+      activePlaylist.tracks = activePlaylist.tracks.map((obj) =>
+        obj.id === track.id ? track : obj
+      );
+      //Update playlists respectively
+      playlists = playlists.map((obj) => 
+				obj.id === activePlaylist.id ? activePlaylist : obj
+			);
+    }
+	});
+
+	let currentTrackState = $state({
+    id: null,
+    index: null,
+    name: null,
+    author: null,
+    path: null
+  });
+  
+  setContext("currentTrack", {
+    getCurrentTrack() {
+      return currentTrackState;
+    },
+    getCurrentTrackId() {
+      return currentTrackState.id;
+    },
+    getCurrentTrackIndex() {
+      return currentTrackState.index;
+    },
+    getCurrentTrackName() {
+      return currentTrackState.name;
+    },
+    getCurrentTrackAuthor() {
+      return currentTrackState.author;
+    },
+    getCurrentTrackPath() {
+      return currentTrackState.path;
+    },
+    setCurrentTrack(track) {
+      currentTrackState = track;
+    },
+    setCurrentTrackId(id) {
+      currentTrackState.id = id;
+    },
+    setCurrentTrackIndex(index) {
+      currentTrackState.index = index;
+    },
+    setCurrentTrackName(name) {
+      currentTrackState.name = name;
+    },
+    setCurrentTrackAuthor(author) {
+      currentTrackState.author = author;
+    },
+    setCurrentTrackPath(path) {
+      currentTrackState.path = path;
+    },
+  });
+  
+  let playbackState = $state({
+    url: null,
+    duration: 0,
+    time: 0,
+    volume: 0,
+    isReady: false,
+    isPlaying: false
+  });
+  
+  
+
+  setContext("playback", {
+    getPlayback() {
+      return playbackState;
+    },
+    getPlaybackUrl() {
+      return playbackState.url;
+    },
+    getPlaybackDuration() {
+      return playbackState.duration;
+    },
+    getPlaybackTime() {
+      return playbackState.time;
+    },
+    getPlaybackVolume() {
+      return playbackState.volume;
+    },
+    getPlaybackReady() {
+      return playbackState.isReady;
+    },
+    getPlaybackPlaying() {
+      return playbackState.isPlaying;
+    },
+    setPlayback(playback) {
+      playbackState = playback;
+    },
+    setPlaybackUrl(url) {
+      playbackState.url = url;
+    },
+    setPlaybackDuration(duration) {
+      playbackState.duration = duration;
+    },
+    setPlaybackTime(time) {
+      playbackState.time = time;
+    },
+    setPlaybackVolume(volume) {
+      playbackState.volume = volume;
+    },
+    setPlaybackReady(bool) {
+      playbackState.isReady = bool;
+    },
+    setPlaybackPlaying(bool) {
+      playbackState.isPlaying = bool;
+    },
+  });
+
+  let playbackModeState = $state({
+    isRepeat: false,
+    isShuffle: false
+  });
+  
+  setContext("playbackMode", {
+    getPlaybackMode() {
+      return playbackModeState;
+    },
+    getPlaybackModeIsRepeat() {
+      return playbackModeState.isRepeat;
+    },
+    getPlaybackModeIsShuffle() {
+      return playbackModeState.isShuffle;
+    },
+    setPlaybackMode(playbackMode) {
+      playbackModeState = playbackMode;
+    },
+    setPlaybackModeIsRepeat(bool) {
+      playbackModeState.isRepeat = bool;
+    },
+    setPlaybackModeIsShuffle(bool) {
+      playbackModeState.isShuffle = bool;
+    },
+  });
+
+
+	$effect(async () => {
+	    if (dbState.isReady) {
+	      playlists = await readData(dbName, storeName);
+
+	      playlists = playlists.sort(
+	        (a, b) => a.index - b.index,
+	      );
+	      isReady = true;
+	    }
+	});
+
+	$effect(async () => {
+	    if (isReady) {
+	    	try {
+		        await writeData(
+		          dbName,
+		          storeName,
+		          $state.snapshot(playlists),
+		        );
+		    } catch (error) {
+		    	console.error(`Error writing the tracks to DB: ${error}`);
+		    }
+	    }
+	});
+
+
+
+</script>
+
+<div class="section">
+	<div class="section-header">
+		<div class="section-header-label">
+		{#if !activePlaylist}
+		 	{ label }
+		{:else}
+			<button
+		   	class="back-button"
+		   	onclick={() => activePlaylist = null}
+		  >
+		   	{ label } 
+			</button>
+			<div class="section-header-label-text">
+				/ { activePlaylist.name }
+			</div>
+		   	
+		 {/if}
+		</div>
+		<div class="section-header-action">
+		{#if !activePlaylist}
+		 	<CatalogNew />
+		{/if}
+			
+		</div>
+	</div>
+	{#if !activePlaylist}
+    <Catalog
+      playlists={playlists}
+    />
+  {:else}
+  	{#if type === "playlist"}
+	    <Player
+      	playlist={activePlaylist}
+    	/>
+	  {:else}
+	    <OneShotPlayer
+	      playlist={activePlaylist}
+	    />
+	  {/if}
+    
+  {/if}
+</div>
+
+<style>
+
+	.section {
+		font-family: "Roboto", serif;
+		height: 100%;
+    max-height: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+
+	}
+
+	.section-header {
+	  display: grid;
+	  grid-template-columns: minmax(0, 1fr) auto; /* This is key */
+	  gap: 16px;
+	  padding-block: 0px;
+	  width: 100%;
+	}
+
+	.section-header-label {
+	  font-size: 32px;
+	  font-weight: 600;
+	  display: flex;
+	  align-items: center;
+	  max-width: 70%; /* Reduced from 80% */
+	  min-width: 0; /* Critical for flex items with text overflow */
+	  overflow: hidden;
+	}
+
+
+	.section-header-label-text {
+	  white-space: nowrap;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  min-width: 0; /* Important for text overflow to work in flex containers */
+	}
+
+	button {
+		background: none;
+		border: none;
+	}
+
+	.back-button {
+		font-size: 32px;
+		font-weight: 600;
+		
+	}
+
+	.back-button:hover {
+		cursor: pointer;
+		color: #2196f3;
+	}
+
+	.back-button::before {
+		content: "";
+	}
+
+
+
+
+	
+</style>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 96c0800..bee204a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -47,8 +47,10 @@
   let isAmbientCatalogsMode = $state(true);
   let isEffectsCatalogsMode = $state(true);
 
+
 </script>
 
+
 <div class="container">
   <div class="music">
     <MusicSection