diff --git a/AicsKnowledgeBase/qml/component/FileList.qml b/AicsKnowledgeBase/qml/component/FileList.qml
new file mode 100644
index 0000000..1f7e4b8
--- /dev/null
+++ b/AicsKnowledgeBase/qml/component/FileList.qml
@@ -0,0 +1,129 @@
+import QtQuick 2.15
+import QtQuick.Layouts
+import FluentUI
+
+Window {
+    id: fileListTestWindow
+    visible: true
+    width: 800
+    height: 600
+    title: "File List Test1"
+    Item {
+
+        anchors.fill: parent
+        ListView {
+            id: listView
+            anchors.fill: parent
+            spacing: 10
+            header: fileListItemHeader
+            model: fileListModel
+            delegate: fileListItemDelegate
+        }
+        Component {
+            id: fileListItemHeader
+            Item {
+                id: fileListItemHeaderItem
+                width: ListView.view.width
+                height: 48
+                FluBreadcrumbBar {
+                    id: header
+                    width: parent.width
+                    height: parent.height
+                    separator: ">"
+                    items: [{
+                            "title": "Home"
+                        }, {
+                            "title": "Documents"
+                        }, {
+                            "title": "File List"
+                        }]
+                    onClickItem: function (model) {
+                        if (model.index + 1 !== count()) {
+                            items = items.slice(0, model.index + 1)
+                        }
+                    }
+                    onItemsChanged: {
+                        fileListItemHeaderItem.update()
+                    }
+                }
+                function add(folderName) {
+                    listView.headerItem.children[0].items
+                            = listView.headerItem.children[0].items.concat([{
+                                                                                "title": folderName
+                                                                            }])
+                }
+                function update() {
+                    // combine all header items to a path
+                    var path = ""
+                    for (var i = 0; i < listView.headerItem.children[0].items.length; i++) {
+                        path += listView.headerItem.children[0].items[i].title + "/"
+                    }
+                    console.log(path)
+                    var newListModel = []
+                    // http request for new list data
+                    // fileListModel.clear()
+                    // fileListModel.append(newListModel)
+                }
+            }
+        }
+        Component {
+            id: fileListItemDelegate
+            Rectangle {
+                id: fileListItemRect
+                width: ListView.view.width
+                height: 100
+                color: !ListView.isCurrentItem ? "lightgray" : "red"
+                FileListItem {
+                    width: parent.width
+                    height: parent.height
+                    title: model.title
+                    isDir: model.isDir
+                    brief: model.brief
+                    size: model.size
+                    type: model.type
+                    date: model.date
+                    pageView: model.pageView
+                    stars: model.stars
+                }
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        listView.currentIndex = index
+                        if (model.isDir) {
+                            listView.headerItem.add(model.title)
+                        }
+                    }
+                }
+            }
+        }
+        ListModel {
+            id: fileListModel
+            ListElement {
+                title: "File 1"
+                isDir: true
+                brief: "This is a test file"
+                type: "FOLDER"
+            }
+            ListElement {
+                title: "File 2"
+                isDir: false
+                brief: "This is a test file"
+                size: 500
+                type: "WORD"
+                date: "2020-09-09"
+                pageView: 100
+                stars: 10
+            }
+            ListElement {
+                title: "File 3"
+                isDir: false
+                brief: "This is a test file"
+                type: "PPT"
+                date: "2020-09-09"
+                pageView: 100
+                size: 10200000022
+                stars: 10
+            }
+        }
+    }
+}
diff --git a/AicsKnowledgeBase/qml/component/FileListItem.qml b/AicsKnowledgeBase/qml/component/FileListItem.qml
new file mode 100644
index 0000000..a578dd7
--- /dev/null
+++ b/AicsKnowledgeBase/qml/component/FileListItem.qml
@@ -0,0 +1,69 @@
+import QtQuick 2.15
+import FluentUI
+import QtQuick.Layouts
+
+Item {
+    id: fileItem
+    property string id
+    property string title
+    property string brief
+    property string date
+    property string type
+    property string suffix
+    property bool isDir: false
+    property int size
+    property int pageView
+    property var tags: []
+    property var notes: []
+    property int stars
+
+    ColumnLayout {
+        id: row
+        anchors.fill: parent
+        anchors.margins: 10
+        spacing: 10
+
+        RowLayout {
+            Image {
+                id: icon
+                source: type ?
+                            "qrc:/AicsKnowledgeBase/res/" + type + ".png" : ""
+                Layout.preferredHeight: 18
+                Layout.preferredWidth: 18
+            }
+            FluText {
+                id: title
+                text: fileItem.title
+            }
+        }
+
+        FluText {
+            id: brief
+            visible: !fileItem.isDir
+            text: fileItem.brief
+        }
+        RowLayout {
+            visible: !fileItem.isDir
+            FluText {
+                id: date
+                text: fileItem.date
+            }
+            FluText {
+                id: size
+                // cast Byte size to right text size
+                text: fileItem.size > 1024
+                      * 1024 ? (fileItem.size / 1024 / 1024).toFixed(
+                                   2) + "MB" : (fileItem.size / 1024).toFixed(
+                                   2) + "KB"
+            }
+            FluText {
+                id: pageView
+                text: fileItem.pageView + "浏览"
+            }
+            FluText {
+                id: stars
+                text: fileItem.stars + "收藏"
+            }
+        }
+    }
+}
diff --git a/AicsKnowledgeBase/qml/global/AppSettings.qml b/AicsKnowledgeBase/qml/global/AppSettings.qml
new file mode 100644
index 0000000..2b17fbc
--- /dev/null
+++ b/AicsKnowledgeBase/qml/global/AppSettings.qml
@@ -0,0 +1,23 @@
+import QtQuick
+import Qt.labs.settings
+import QtQuick.Controls
+
+QtObject {
+    id: settings
+    Settings {
+        id: registry
+        property string rememberedCookie
+    }
+
+    property string cookie
+    property int userId
+    property string userName
+    property int userLevel
+
+    Component.onDestruction: {
+        cookie = registry.rememberedCookie
+    }
+    function rememberCookie() {
+        registry.rememberedCookie = cookie
+    }
+}