diff --git a/frontend/app.js b/frontend/app.js
index e4136ed..16c0fe7 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -2098,6 +2098,9 @@ function noteApp() {
                     }
                     this.expandedFolders.add(folderPath);
                     await this.loadNotes();
+                    
+                    // Navigate to the newly created folder on the homepage
+                    this.goToHomepageFolder(folderPath);
                 } else {
                     ErrorHandler.handle('create folder', new Error('Server returned error'));
                 }
@@ -3397,6 +3400,12 @@ function noteApp() {
         goToHomepageFolder(folderPath) {
             this.selectedHomepageFolder = folderPath || '';
             
+            // Clear editor state to show landing page
+            this.currentNote = '';
+            this.currentNoteName = '';
+            this.noteContent = '';
+            this.currentImage = '';
+            
             // Invalidate cache to force recalculation
             this._homepageCache = {
                 folderPath: null,
diff --git a/frontend/index.html b/frontend/index.html
index bd7aae5..bf35062 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1236,10 +1236,24 @@
                                         <div 
                                             @click="goToHomepageFolder(folder.path)"
                                             class="p-4 rounded-lg border-2 cursor-pointer transition-all hover:shadow-lg"
-                                            style="background-color: var(--bg-secondary); border-color: var(--accent-primary); min-height: 140px; display: flex; flex-direction: column; border-width: 2px;"
-                                            onmouseover="this.style.borderColor='var(--accent-hover)'; this.style.transform='translateY(-2px)'"
-                                            onmouseout="this.style.borderColor='var(--accent-primary)'; this.style.transform='translateY(0)'"
+                                            style="background-color: var(--bg-secondary); border-color: var(--accent-primary); min-height: 140px; display: flex; flex-direction: column; border-width: 2px; position: relative;"
+                                            onmouseover="this.style.borderColor='var(--accent-hover)'; this.style.transform='translateY(-2px)'; this.querySelector('.card-delete-btn').style.opacity='1';"
+                                            onmouseout="this.style.borderColor='var(--accent-primary)'; this.style.transform='translateY(0)'; this.querySelector('.card-delete-btn').style.opacity='0';"
                                         >
+                                            <!-- Delete Button -->
+                                            <button 
+                                                @click.stop="deleteFolder(folder.path, folder.name)"
+                                                class="card-delete-btn"
+                                                style="position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity 0.2s; color: var(--error); padding: 4px; border-radius: 4px; background-color: var(--bg-secondary);"
+                                                onmouseover="this.style.backgroundColor='var(--bg-hover)'"
+                                                onmouseout="this.style.backgroundColor='var(--bg-secondary)'"
+                                                title="Delete folder"
+                                            >
+                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                                                </svg>
+                                            </button>
+                                            
                                             <!-- Folder Icon -->
                                             <div class="mb-2 flex items-center gap-2">
                                                 <svg class="w-6 h-6" style="color: var(--accent-primary);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -1263,10 +1277,24 @@
                                         <div 
                                             @click="note.path.match(/\.(png|jpg|jpeg|gif|webp)$/i) ? (currentImage = note.path, currentNote = '') : loadNote(note.path)"
                                             class="p-4 rounded-lg border-2 cursor-pointer transition-all hover:shadow-lg"
-                                            style="background-color: var(--bg-secondary); border-color: var(--border-primary); min-height: 140px; display: flex; flex-direction: column;"
-                                            onmouseover="this.style.borderColor='var(--accent-primary)'; this.style.transform='translateY(-2px)'"
-                                            onmouseout="this.style.borderColor='var(--border-primary)'; this.style.transform='translateY(0)'"
+                                            style="background-color: var(--bg-secondary); border-color: var(--border-primary); min-height: 140px; display: flex; flex-direction: column; position: relative;"
+                                            onmouseover="this.style.borderColor='var(--accent-primary)'; this.style.transform='translateY(-2px)'; this.querySelector('.card-delete-btn').style.opacity='1';"
+                                            onmouseout="this.style.borderColor='var(--border-primary)'; this.style.transform='translateY(0)'; this.querySelector('.card-delete-btn').style.opacity='0';"
                                         >
+                                            <!-- Delete Button -->
+                                            <button 
+                                                @click.stop="note.type === 'image' ? deleteImage(note.path) : deleteNote(note.path, note.name)"
+                                                class="card-delete-btn"
+                                                style="position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity 0.2s; color: var(--error); padding: 4px; border-radius: 4px; background-color: var(--bg-secondary);"
+                                                onmouseover="this.style.backgroundColor='var(--bg-hover)'"
+                                                onmouseout="this.style.backgroundColor='var(--bg-secondary)'"
+                                                :title="note.type === 'image' ? 'Delete image' : 'Delete note'"
+                                            >
+                                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                                                </svg>
+                                            </button>
+                                            
                                             <!-- Note Title -->
                                             <h3 class="font-semibold text-base mb-2" style="color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;" x-text="note.name"></h3>