diff --git a/frontend/app.js b/frontend/app.js
index 9ed5e39..2aa75da 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -99,7 +99,7 @@ function noteApp() {
         
         // Dropdown state
         showNewDropdown: false,
-        dropdownTargetFolder: '', // Folder context for "New" dropdown (empty = root)
+        dropdownTargetFolder: null, // Folder context for "New" dropdown ('' = root, null = not set)
         dropdownPosition: { top: 0, left: 0 }, // Position for contextual dropdown
         
         // Template state
@@ -628,9 +628,16 @@ function noteApp() {
                     notePath += '.md';
                 }
                 
-                // If we have a target folder context, create in that folder
-                if (this.dropdownTargetFolder || this.selectedHomepageFolder) {
-                    const targetFolder = this.dropdownTargetFolder || this.selectedHomepageFolder;
+                // Determine target folder: use dropdown context if set, otherwise homepage folder
+                let targetFolder;
+                if (this.dropdownTargetFolder !== null && this.dropdownTargetFolder !== undefined) {
+                    targetFolder = this.dropdownTargetFolder; // Can be '' for root or a folder path
+                } else {
+                    targetFolder = this.selectedHomepageFolder || '';
+                }
+                
+                // If we have a target folder, create note in that folder
+                if (targetFolder) {
                     notePath = `${targetFolder}/${notePath}`;
                 }
                 
@@ -1998,7 +2005,7 @@ function noteApp() {
         
         closeDropdown() {
             this.showNewDropdown = false;
-            this.dropdownTargetFolder = ''; // Reset folder context
+            this.dropdownTargetFolder = null; // Reset folder context
         },
         
         // =====================================================
@@ -2006,8 +2013,16 @@ function noteApp() {
         // =====================================================
         
         async createNote(folderPath = null) {
-            // Use provided folder path, or dropdown target folder context
-            const targetFolder = folderPath !== null ? folderPath : this.dropdownTargetFolder;
+            // Use provided folder path, or dropdown target folder context, or homepage folder
+            // Note: Check dropdownTargetFolder !== null to distinguish between '' (root) and not set
+            let targetFolder;
+            if (folderPath !== null) {
+                targetFolder = folderPath;
+            } else if (this.dropdownTargetFolder !== null && this.dropdownTargetFolder !== undefined) {
+                targetFolder = this.dropdownTargetFolder; // Can be '' for root or a folder path
+            } else {
+                targetFolder = this.selectedHomepageFolder || '';
+            }
             this.closeDropdown();
             
             const promptText = targetFolder 
@@ -2059,8 +2074,16 @@ function noteApp() {
         },
         
         async createFolder(parentPath = null) {
-            // Use provided parent path, or dropdown target folder context
-            const targetFolder = parentPath !== null ? parentPath : this.dropdownTargetFolder;
+            // Use provided parent path, or dropdown target folder context, or homepage folder
+            // Note: Check dropdownTargetFolder !== null to distinguish between '' (root) and not set
+            let targetFolder;
+            if (parentPath !== null) {
+                targetFolder = parentPath;
+            } else if (this.dropdownTargetFolder !== null && this.dropdownTargetFolder !== undefined) {
+                targetFolder = this.dropdownTargetFolder; // Can be '' for root or a folder path
+            } else {
+                targetFolder = this.selectedHomepageFolder || '';
+            }
             this.closeDropdown();
             
             const promptText = targetFolder 
@@ -2098,6 +2121,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 +3423,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 9d89623..bf35062 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1129,19 +1129,19 @@
                     <!-- Welcome Hero - Show when app is empty -->
                     <template x-if="isAppEmpty">
                         <div class="flex flex-col items-center justify-center h-full py-16 text-center">
-                        <svg class="mx-auto h-16 w-16 mb-4" style="color: var(--text-tertiary);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <svg class="mx-auto h-24 w-24 mb-4" style="color: var(--text-tertiary); opacity: 0.5;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                         </svg>
-                            <h1 class="text-4xl font-bold mb-4" style="color: var(--text-primary);" x-text="appName"></h1>
-                            <p class="text-xl mb-8" style="color: var(--text-secondary);" x-text="appTagline"></p>
+                            <h2 class="text-2xl font-bold mb-2" style="color: var(--text-primary);">No notes yet</h2>
+                            <p class="mb-6" style="color: var(--text-secondary);">Create your first note or folder</p>
                         <button 
-                                @click="createNote()"
-                                class="px-8 py-4 text-base font-medium text-white rounded-lg transition-colors"
+                                @click="dropdownTargetFolder = selectedHomepageFolder; toggleNewDropdown($event)"
+                                class="px-6 py-3 text-sm font-medium text-white rounded-lg transition-colors"
                             style="background-color: var(--accent-primary);"
                             onmouseover="this.style.backgroundColor='var(--accent-hover)'"
                             onmouseout="this.style.backgroundColor='var(--accent-primary)'"
                         >
-                            Create Your First Note
+                            + New
                         </button>
                     </div>
                     </template>
@@ -1196,13 +1196,13 @@
                                             <span x-text="homepageFolders().length === 1 ? 'folder' : 'folders'"></span>
                                         </span>
                                         <button 
-                                            @click="createNote()"
+                                            @click="dropdownTargetFolder = selectedHomepageFolder; toggleNewDropdown($event)"
                                             class="ml-auto px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors"
                                             style="background-color: var(--accent-primary);"
                                             onmouseover="this.style.backgroundColor='var(--accent-hover)'"
                                             onmouseout="this.style.backgroundColor='var(--accent-primary)'"
                                         >
-                                            + New Note
+                                            + New
                                         </button>
                                     </div>
                                 </div>
@@ -1214,16 +1214,16 @@
                                     <svg class="mx-auto h-24 w-24 mb-4" style="color: var(--text-tertiary); opacity: 0.5;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                     </svg>
-                                    <h2 class="text-2xl font-bold mb-2" style="color: var(--text-primary);">No notes yet</h2>
-                                    <p class="mb-6" style="color: var(--text-secondary);">Create your first note to get started</p>
+                                    <h2 class="text-2xl font-bold mb-2" style="color: var(--text-primary);" x-text="selectedHomepageFolder ? 'This folder is empty' : 'No notes yet'"></h2>
+                                    <p class="mb-6" style="color: var(--text-secondary);" x-text="selectedHomepageFolder ? 'Create something to get started' : 'Create your first note or folder'"></p>
                                     <button 
-                                        @click="createNote()"
+                                        @click="dropdownTargetFolder = selectedHomepageFolder; toggleNewDropdown($event)"
                                         class="px-6 py-3 text-sm font-medium text-white rounded-lg transition-colors"
                                         style="background-color: var(--accent-primary);"
                                         onmouseover="this.style.backgroundColor='var(--accent-hover)'"
                                         onmouseout="this.style.backgroundColor='var(--accent-primary)'"
                                     >
-                                        Create Your First Note
+                                        + New
                                     </button>
                                 </div>
                             </template>
@@ -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>