diff --git a/AicsKnowledgeBase/NoteListWindow.qml b/AicsKnowledgeBase/NoteListWindow.qml
new file mode 100644
index 0000000..5560aee
--- /dev/null
+++ b/AicsKnowledgeBase/NoteListWindow.qml
@@ -0,0 +1,5 @@
+import QtQuick
+
+Item {
+
+}
diff --git a/AicsKnowledgeBase/qml/component/NoteList.qml b/AicsKnowledgeBase/qml/component/NoteList.qml
index c5010c1..539c917 100644
--- a/AicsKnowledgeBase/qml/component/NoteList.qml
+++ b/AicsKnowledgeBase/qml/component/NoteList.qml
@@ -6,6 +6,46 @@ import "qrc:///AicsKnowledgeBase/qml/global"
 Item {
     anchors.fill: parent
     signal open(string note)
+    signal createNote
+    width: parent.width - 8
+    property ListModel noteListModel: ListModel {
+        ListElement {
+            uuid: "1"
+            title: "超级无敌报错"
+            brief: "file:///D:/academic/2023-qtBig/AicsKnowledgeBase_client/AicsKnowledgeBase/qml/component/NoteList.qml:41:21: Unable to assign [undefined] to QString"
+            author: "admin"
+            pageView: 123
+            stars: 27
+            date: "2022-02-02"
+        }
+        ListElement {
+            uuid: "2"
+            title: "Qt布局"
+            brief: "锚定（anchors）在确定父子组件之间，同级组件之间的相对位置时非常常用，若使用锚定方式确定子组件与父组件之间的位置关系，使用 top，bottom，left，right， topMargin，bottomMargin，leftMargin，rightMargin进行上下左右对齐，以及对齐后的留白距离。若要使子组件在父组件的水平，垂直居中，使用："
+            author: "超级无敌长的账户名"
+            pageView: 123
+            stars: 27
+            date: "2022-02-02"
+        }
+        ListElement {
+            uuid: "2"
+            title: "Qt布局"
+            brief: "锚定（anchors）在确定父子组件之间，同级组件之间的相对位置时非常常用，若使用锚定方式确定子组件与父组件之间的位置关系，使用 top，bottom，left，right， topMargin，bottomMargin，leftMargin，rightMargin进行上下左右对齐，以及对齐后的留白距离。若要使子组件在父组件的水平，垂直居中，使用："
+            author: "超级无敌长的账户名"
+            pageView: 123
+            stars: 27
+            date: "2022-02-02"
+        }
+        ListElement {
+            uuid: "2"
+            title: "Qt布局"
+            brief: "锚定（anchors）在确定父子组件之间，同级组件之间的相对位置时非常常用，若使用锚定方式确定子组件与父组件之间的位置关系，使用 top，bottom，left，right， topMargin，bottomMargin，leftMargin，rightMargin进行上下左右对齐，以及对齐后的留白距离。若要使子组件在父组件的水平，垂直居中，使用："
+            author: "超级无敌长的账户名"
+            pageView: 123
+            stars: 27
+            date: "2022-02-02"
+        }
+    }
     ListView {
         id: listView
         anchors.fill: parent
@@ -18,11 +58,24 @@ Item {
         id: noteListItemHeader
         Item {
             id: noteListItemHeaderItem
-            //                width: ListView.view.width
-            //                height: 48
-            //                FluText {
-            //                    text: "笔记"
-            //                }
+            width: ListView.view.width
+            height: 48
+            RowLayout {
+                width: parent.width
+                FluText {
+                    text: "笔记列表"
+                    font.pixelSize: 18
+                    font.bold: true
+                }
+                FluButton {
+                    id: createNoteButton
+                    text: "新建笔记"
+                    Layout.alignment: Qt.AlignRight
+                    onClicked: {
+                        createNote()
+                    }
+                }
+            }
         }
     }
     Component {
@@ -54,25 +107,4 @@ Item {
     function setListModel(listModel) {
         listView.model = listModel
     }
-    ListModel {
-        id: noteListModel
-        ListElement {
-            uuid: "1"
-            title: "超级无敌报错"
-            brief: "file:///D:/academic/2023-qtBig/AicsKnowledgeBase_client/AicsKnowledgeBase/qml/component/NoteList.qml:41:21: Unable to assign [undefined] to QString"
-            author: "admin"
-            pageView: 123
-            stars: 27
-            date: "2022-02-02"
-        }
-        ListElement {
-            uuid: "2"
-            title: "Qt布局"
-            brief: "锚定（anchors）在确定父子组件之间，同级组件之间的相对位置时非常常用，若使用锚定方式确定子组件与父组件之间的位置关系，使用 top，bottom，left，right， topMargin，bottomMargin，leftMargin，rightMargin进行上下左右对齐，以及对齐后的留白距离。若要使子组件在父组件的水平，垂直居中，使用："
-            author: "超级无敌长的账户名"
-            pageView: 123
-            stars: 27
-            date: "2022-02-02"
-        }
-    }
 }
diff --git a/AicsKnowledgeBase/qml/page/ContentPage.qml b/AicsKnowledgeBase/qml/page/ContentPage.qml
index 90bf486..fccba38 100644
--- a/AicsKnowledgeBase/qml/page/ContentPage.qml
+++ b/AicsKnowledgeBase/qml/page/ContentPage.qml
@@ -8,8 +8,34 @@ import FluentUI
 import AicsKB.FileTransferManager
 import SignalFileOperation 1.0
 import "qrc:///AicsKnowledgeBase/qml/page"
+import "qrc:///AicsKnowledgeBase/qml/component"
 
 FluArea {
+    Popup {
+        id: popup
+        modal: true //模态， 为 true后弹出窗口会叠加一个独特的背景调光效果
+        focus: true //焦点,  当弹出窗口实际接收到焦点时，activeFocus将为真
+        padding: 0
+        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+        property var raiseItem: null
+        background: Rectangle {
+            color: Qt.rgba(0, 0, 0, 0) //背景为无色
+        }
+        FluArea {
+            width: 350
+            height: 500
+            backgroundColor: "#f9f9f9"
+            NoteList {
+                id: noteList
+                onOpen: function handle(noteId) {
+                    console.log("open note: " + noteId)
+                }
+                onCreateNote: function handle() {
+                    console.log("create note")
+                }
+            }
+        }
+    }
     id: content_area
     paddings: 0
     backgroundColor: "#f9f9f9"
@@ -76,6 +102,28 @@ FluArea {
                     bold: true
                 }
             }
+            ColumnLayout {
+                id: layout_note
+                FluIconButton {
+                    id: button_note
+                    iconSize: 15
+                    iconSource: FluentIcons.QuickNote
+                    text: "笔记"
+                    onClicked: {
+                        popup.open()
+                    }
+                }
+                FluText {
+                    text: ""
+                    font.pointSize: 8
+                    Layout.alignment: button_note.Center
+                    Layout.topMargin: -5
+                }
+                anchors {
+                    verticalCenter: text_title.verticalCenter
+                    right: parent.right
+                }
+            }
             ColumnLayout {
                 id: layout_share
                 FluIconButton {
@@ -93,7 +141,7 @@ FluArea {
                 }
                 anchors {
                     verticalCenter: text_title.verticalCenter
-                    right: parent.right
+                    right: layout_note.left
                 }
             }
             ColumnLayout {
@@ -157,6 +205,7 @@ FluArea {
             implicitHeight: 100
             ColumnLayout {
                 RowLayout {
+                    width: parent.width
                     FluText {
                         padding: 10
                         text: content_page.publishTime.toDateString()
diff --git a/AicsKnowledgeBase/res/note.png b/AicsKnowledgeBase/res/note.png
new file mode 100644
index 0000000..348ce77
Binary files /dev/null and b/AicsKnowledgeBase/res/note.png differ