diff --git a/example/qml/TestWindow.qml b/example/qml/TestWindow.qml
index ac554043..e5c1ff3f 100644
--- a/example/qml/TestWindow.qml
+++ b/example/qml/TestWindow.qml
@@ -2,61 +2,68 @@
 import QtQuick.Window
 import QtQuick.Controls
 import QtQuick.Layouts
+import Qt.labs.platform
 import FluentUI
+import "qrc:///example/qml/global/"
+
+FluWindow {
 
-Window {
     id:window
-    title: "132"
+    title: "FluentUI"
+    width: 1000
+    height: 640
+    closeDestory:false
+    minimumWidth: 520
+    minimumHeight: 460
+    launchMode: FluWindow.SingleTask
     visible: true
-    width: 600
-    color: "#00000000"
-    height: 480
 
-    FluInfoBar{
-        id:info_bar
-        root: window
-    }
-
-    Rectangle{
+    FluNavigationView2{
+        id:nav_view
         anchors.fill: parent
-        color: "#FFFFFF"
-    }
-
-    FluButton{
-        x: 23
-        y: 31
-        text:"123"
-        onClicked: {
-            info_bar.showSuccess("asdasd")
+        items: ItemsOriginal
+        footerItems:ItemsFooter
+        z:11
+        displayMode:MainEvent.displayMode
+        logo: "qrc:/example/res/image/favicon.ico"
+        title:"FluentUI"
+        autoSuggestBox:FluAutoSuggestBox{
+            width: 280
+            anchors.centerIn: parent
+            iconSource: FluentIcons.Search
+            items: ItemsOriginal.getSearchData()
+            placeholderText: lang.search
+            onItemClicked:
+                (data)=>{
+                    ItemsOriginal.startPageByItem(data)
+                }
         }
-    }
-
-    FluFilledButton{
-        x: 23
-        y: 95
-        text: "asdasd"
-        onClicked: {
-            info_bar.showInfo("123132")
+        actionItem:Item{
+            height: 40
+            width: 148
+            RowLayout{
+                anchors.centerIn: parent
+                spacing: 5
+                FluText{
+                    text:lang.dark_mode
+                }
+                FluToggleSwitch{
+                    selected: FluTheme.dark
+                    clickFunc:function(){
+                        if(FluTheme.dark){
+                            FluTheme.darkMode = FluDarkMode.Light
+                        }else{
+                            FluTheme.darkMode = FluDarkMode.Dark
+                        }
+                    }
+                }
+            }
+        }
+        Component.onCompleted: {
+            ItemsOriginal.navigationView = nav_view
+            ItemsFooter.navigationView = nav_view
+//            nav_view.setCurrentIndex(0)
         }
-    }
-
-    FluTextBox{
-        text: "asdasd"
-        anchors.verticalCenterOffset: -59
-        anchors.horizontalCenterOffset: -127
-        anchors.centerIn: parent
-    }
-
-    FluProgressBar{
-        x: 23
-        y: 238
-
-    }
-
-    FluProgressRing{
-        x: 18
-        y: 283
-
     }
 
 }
diff --git a/src/imports/FluentUI/Controls/FluNavigationView2.qml b/src/imports/FluentUI/Controls/FluNavigationView2.qml
new file mode 100644
index 00000000..68041eb4
--- /dev/null
+++ b/src/imports/FluentUI/Controls/FluNavigationView2.qml
@@ -0,0 +1,57 @@
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import QtQuick.Layouts
+import FluentUI
+
+Item {
+
+    property url logo
+    property string title: ""
+    property FluObject items
+    property FluObject footerItems
+    property int displayMode: FluNavigationView.Auto
+    property Component autoSuggestBox
+    property Component actionItem
+    id:control
+    Item {
+        id:nav_app_bar
+        width: parent.width
+        height: 40
+        RowLayout{
+            height:parent.height
+            spacing: 0
+            FluIconButton{
+                iconSource: FluentIcons.ChromeBack
+                Layout.leftMargin: 5
+                Layout.preferredWidth: 30
+                Layout.preferredHeight: 30
+                Layout.alignment: Qt.AlignVCenter
+                iconSize: 15
+            }
+            FluIconButton{
+                id:btn_nav
+                iconSource: FluentIcons.GlobalNavButton
+                iconSize: 15
+                Layout.preferredWidth: 30
+                Layout.preferredHeight: 30
+                Layout.alignment: Qt.AlignVCenter
+            }
+            Image{
+                Layout.preferredHeight: 20
+                Layout.preferredWidth: 20
+                source: control.logo
+                Layout.leftMargin: 12
+                sourceSize: Qt.size(40,40)
+                Layout.alignment: Qt.AlignVCenter
+            }
+            FluText{
+                Layout.alignment: Qt.AlignVCenter
+                text:control.title
+                Layout.leftMargin: 12
+                font: FluTextStyle.Body
+            }
+        }
+    }
+}
diff --git a/src/imports/FluentUI/Controls/FluWindow.qml b/src/imports/FluentUI/Controls/FluWindow.qml
index e7f231d1..fb7f18a6 100644
--- a/src/imports/FluentUI/Controls/FluWindow.qml
+++ b/src/imports/FluentUI/Controls/FluWindow.qml
@@ -32,6 +32,7 @@ Window {
     }
     signal initArgument(var argument)
     id:window
+    color:Qt.rgba(0,0,0,0)
     onClosing:(event)=>closeFunc(event)
     Component.onCompleted: {
         helper.initWindow(window)