diff --git a/src/lib/NoteList.svelte b/src/lib/NoteList.svelte
index 6590b30..ecf0278 100644
--- a/src/lib/NoteList.svelte
+++ b/src/lib/NoteList.svelte
@@ -97,9 +97,15 @@
           </span>
         </span>
 
-        <span class="meta" style={$selectedNote === note && 'background: #2252a0; color: white;'}>
+        <span class="meta flex items-center" style={$selectedNote === note && 'background: #2252a0; color: white;'}>
           {formatDate(note.updatedAt)}
-          <button on:click={() => handleDeleteNote(note)} class="bg-transparent">[del]</button>
+          <button 
+            on:click={() => handleDeleteNote(note)} 
+            class="bg-transparent flex items-center" 
+            style="margin-left: 5px; color: {$selectedNote === note ? '#ffffff42' : '#7e848c66'};"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+          </button>
         </span>
       </li>
     {/each}