diff --git a/AicsKnowledgeBase/qml/MainWindow.qml b/AicsKnowledgeBase/qml/MainWindow.qml
index 00c8aac..49db787 100644
--- a/AicsKnowledgeBase/qml/MainWindow.qml
+++ b/AicsKnowledgeBase/qml/MainWindow.qml
@@ -54,6 +54,13 @@ FluWindow {
             }
         }
 
+        StackView {
+            id: stack_view
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+        }
+
         ContentPage {
             Layout.fillHeight: true
             Layout.fillWidth: true
diff --git a/AicsKnowledgeBase/qml/page/NotePage.qml b/AicsKnowledgeBase/qml/page/NotePage.qml
new file mode 100644
index 0000000..480e67e
--- /dev/null
+++ b/AicsKnowledgeBase/qml/page/NotePage.qml
@@ -0,0 +1,230 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import QtWebEngine 1.2
+import FluentUI
+import AicsKB.FileTransferManager
+import SignalFileOperation 1.0
+import "qrc:///AicsKnowledgeBase/qml/page"
+
+FluArea {
+    id: note_area
+    paddings: 0
+    backgroundColor: "#f9f9f9"
+    visible: false
+    property string type: ""
+    property string knowledgeFileId
+    property string isFile: false
+    property string knowledgeUrl : "aics/main/knowledge/"
+    signal download(string knowledgeFileId)
+    signal clickTags(string tagName)
+
+    //    paddings: {
+    //        top: 10
+    //        right: 0
+    //        bottom: 10
+    //        left: 10
+    //    }
+    Connections {
+        target: SignalFileOperation
+        function onOpen(file) {
+
+        }
+    }
+
+    FluScrollablePage {
+        id: note_page
+        anchors.fill: parent
+        leftPadding: 10
+        topPadding: 10
+        rightPadding: 10
+        bottomPadding: 0
+
+        property int likeCount: 0
+        property int favoriteCount: 0
+        property int shareCount: 0
+        property int browsCount: 555
+        property bool isLike: false
+        property bool isFavorite: false
+        property bool isDownload: false
+        property double fileSize: 455
+        property list<string> tags: ["tag1", "tag2", "tag3"]
+        property string publishTime: "2002-01-01"
+        property string brief: "这是一个简介"
+
+        function getType(suffix) {
+            if(suffix === "md")
+                return "md"
+            else if(suffix === "mp4" || suffix === "avi" || suffix === "rmvb" || suffix === "mkv")
+                return "video"
+            else return "other"
+        }
+
+        function loadFile(noteId) {
+            var fileUrl = knowledgeUrl+noteId
+            Request.get(fileUrl, function (response) {
+                var data = JSON.parse(response)
+                console.log(data.knowledgeFileAttribute)
+                publishTime = data.createTime
+                type = getType(data.knowledgeFileAttribute.suffix)
+                brief = data.knowledgeFileAttribute.brief
+                fileSize = data.knowledgeFileAttribute.size
+                browsCount = data.knowledgeFileAttribute.pageView
+                var tagString = ""
+                for (var j = 0; j < file.knowledgeFileAttribute.tags.length; j++) {
+                    if (j != 0)
+                        tagString = tagString + ","
+                    tagString = tagString + file.knowledgeFileAttribute.tags[j].name
+                }
+                tags = tagString.split(",")
+            })
+        }
+
+        Item {
+            Layout.fillWidth: true
+            implicitHeight: 50
+
+            FluText {
+                id: text_title
+                padding: 10
+                text: "文章标题"
+                font {
+                    pointSize: 15
+                    bold: true
+                }
+            }
+            ColumnLayout {
+                id: layout_share
+                FluIconButton {
+                    id: button_share
+                    iconSize: 15
+                    iconSource: FluentIcons.Share
+                    text: content_page.shareCount.toString()
+                }
+                FluText {
+                    id: text_share
+                    text: note_page.shareCount
+                    font.pointSize: 8
+                    Layout.alignment: button_share.Center
+                    Layout.topMargin: -5
+                }
+                anchors {
+                    verticalCenter: text_title.verticalCenter
+                    right: parent.right
+                }
+            }
+            ColumnLayout {
+                id: layout_favorite
+                FluIconButton {
+                    id: button_favorite
+
+                    iconSize: 15
+                    iconSource: note_page.isFavorite ? FluentIcons.FavoriteStarFill : FluentIcons.FavoriteStar
+                    onClicked: {
+                        Request.put()
+                    }
+                }
+                FluText {
+                    id: text_favorite
+                    text: note_page.favoriteCount
+                    font.pointSize: 8
+                    Layout.alignment: button_favorite.Center
+                    Layout.topMargin: -5
+                }
+                anchors {
+                    verticalCenter: text_title.verticalCenter
+                    right: layout_share.left
+                }
+            }
+            ColumnLayout {
+                id: layout_like
+                FluIconButton {
+                    id: button_like
+                    iconSize: 15
+                    iconSource: note_page.isLike ? FluentIcons.HeartFill : FluentIcons.Heart
+                }
+                FluText {
+                    id: text_like
+                    text: note_page.favoriteCount
+                    font.pointSize: 8
+                    Layout.alignment: button_like.Center
+                    Layout.topMargin: -5
+                }
+                anchors {
+                    verticalCenter: text_title.verticalCenter
+                    right: layout_favorite.left
+                }
+            }
+            FluIconButton {
+                id: button_download
+                iconSize: 25
+                iconSource: note_page.isDownload ? FluentIcons.OEM : FluentIcons.Download
+                anchors {
+                    verticalCenter: text_title.verticalCenter
+                    right: layout_like.left
+                    rightMargin: 20
+                }
+                onClicked: {
+                    emit: content_area.download(content_area.knowledgeFileId)
+                    FileTransferManager.download(content_area.knowledgeFileId)
+                }
+            }
+        }
+
+        FluArea {
+            Layout.fillWidth: true
+            implicitHeight: 100
+            ColumnLayout {
+                RowLayout {
+                    FluText {
+                        padding: 10
+                        text: content_page.publishTime
+                    }
+                    FluText {
+                        padding: 10
+                        text: content_page.fileSize.toString() + "MB"
+                    }
+                    FluText {
+                        padding: 10
+                        text: content_page.browsCount.toString() + "浏览量"
+                    }
+                }
+                FluText {
+                    Layout.topMargin: -2
+                    Layout.leftMargin: 10
+                    text: content_page.brief
+                }
+                RowLayout {
+                    Layout.topMargin: 2
+                    Layout.leftMargin: 5
+                    Repeater {
+                        model: content_page.tags
+                        delegate: Button {
+                            Layout.margins: 2
+                            text: "#" + content_page.tags[index]
+                            background: Rectangle {
+                                implicitHeight: 10
+                                implicitWidth: 10
+                                color: FluColors.Grey20
+                                radius: 10
+                            }
+                            onClicked: {
+                                emit: content_area.clickTags(text)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        NoteEditPage {
+            id: md_edit_page
+            noteId: "255454"
+            Layout.fillWidth: true
+            implicitHeight: 400
+        }
+
+    }
+}