diff --git a/zeppelin-web-angular/src/app/interfaces/node-list.ts b/zeppelin-web-angular/src/app/interfaces/node-list.ts
index 3330e03aa75..55331a9e740 100644
--- a/zeppelin-web-angular/src/app/interfaces/node-list.ts
+++ b/zeppelin-web-angular/src/app/interfaces/node-list.ts
@@ -27,6 +27,7 @@ export interface NodeItem {
   expanded?: boolean;
   children?: NodeItem[];
   isTrash: boolean;
+  nodeType?: string;
   path?: string;
 }
 
diff --git a/zeppelin-web-angular/src/app/share/node-list/node-list.component.ts b/zeppelin-web-angular/src/app/share/node-list/node-list.component.ts
index 5d9abb4d89e..23a70c7f508 100644
--- a/zeppelin-web-angular/src/app/share/node-list/node-list.component.ts
+++ b/zeppelin-web-angular/src/app/share/node-list/node-list.component.ts
@@ -10,7 +10,8 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
+import { TRASH_FOLDER_ID_TOKEN } from '@zeppelin/interfaces';
 
 import { NzTreeNode } from 'ng-zorro-antd/core';
 import { NzModalService } from 'ng-zorro-antd/modal';
@@ -96,15 +97,46 @@ export class NodeListComponent extends MessageListenersManager implements OnInit
   @MessageListener(OP.NOTES_INFO)
   getNotes(data: MessageReceiveDataTypeMap[OP.NOTES_INFO]) {
     this.noteListService.setNotes(data.notes);
-    this.nodes = this.noteListService.notes.root.children.map(item => {
-      return { ...item, key: item.id };
-    });
+    this.nodes = this.noteListService.notes.root.children
+      .sort((v1, v2) => this.noteComparator(v1, v2))
+      .map(item => {
+        return { ...item, key: item.id };
+      });
     this.cdr.markForCheck();
   }
 
+  getNoteName(note) {
+    if (note.title === undefined || note.title.trim() === '') {
+      return 'Note ' + note.id;
+    } else {
+      return note.title;
+    }
+  }
+
+  noteComparator(v1, v2) {
+    const note1 = v1;
+    const note2 = v2;
+    if (note1.id === this.TRASH_FOLDER_ID) {
+      return 1;
+    }
+    if (note2.id === this.TRASH_FOLDER_ID) {
+      return -1;
+    }
+    if (note1.children === undefined && note2.children !== undefined) {
+      return 1;
+    }
+    if (note1.children !== undefined && note2.children === undefined) {
+      return -1;
+    }
+    const noteName1 = this.getNoteName(note1);
+    const noteName2 = this.getNoteName(note2);
+    return noteName1.localeCompare(noteName2);
+  }
+
   constructor(
     private noteListService: NoteListService,
     public messageService: MessageService,
+    @Inject(TRASH_FOLDER_ID_TOKEN) public TRASH_FOLDER_ID: string,
     private nzModalService: NzModalService,
     private noteActionService: NoteActionService,
     private cdr: ChangeDetectorRef