diff --git a/example/qml/window/MainWindow.qml b/example/qml/window/MainWindow.qml
index cde02128..9e9a6e24 100644
--- a/example/qml/window/MainWindow.qml
+++ b/example/qml/window/MainWindow.qml
@@ -76,44 +76,110 @@ CustomWindow {
         }
     }
 
-    FluAppBar {
-        id: title_bar
-        anchors {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-        }
-        darkText: lang.dark_mode
-        showDark: true
-        z:7
-    }
+    Flipable{
+        id:flipable
+        anchors.fill: parent
+        property bool flipped: false
+        transform: Rotation {
+            id: rotation
+            origin.x: flipable.width/2
+            origin.y: flipable.height/2
+            axis { x: 0; y: 1; z: 0 }
+            angle: 0
 
-    FluNavigationView{
-        id:nav_view
-        width: parent.width
-        height: parent.height
-        z:999
-        items: ItemsOriginal
-        footerItems:ItemsFooter
-        topPadding:FluTools.isMacos() ? 20 : 5
-        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)
-                }
         }
-        Component.onCompleted: {
-            ItemsOriginal.navigationView = nav_view
-            ItemsFooter.navigationView = nav_view
-            setCurrentIndex(0)
+        states: State {
+            name: "back"
+            PropertyChanges { target: rotation; angle: 180 }
+            when: flipable.flipped
+        }
+        transitions: Transition {
+            NumberAnimation { target: rotation; property: "angle"; duration: 1000 ; easing.type: Easing.OutQuad}
+        }
+        back: Item{
+            anchors.fill: flipable
+            visible: rotation.angle !== 0
+            FluAppBar {
+                anchors {
+                    top: parent.top
+                    left: parent.left
+                    right: parent.right
+                }
+                darkText: lang.dark_mode
+                showDark: true
+                z:7
+            }
+            FluIconButton{
+                iconSource: FluentIcons.ChromeBack
+                width: 30
+                height: 30
+                iconSize: 13
+                z:8
+                onClicked: {
+                    flipable.flipped = false
+                }
+            }
+            FluText{
+                font: FluTextStyle.Title
+                text:"建设中..."
+                anchors.centerIn: parent
+            }
+        }
+        front: Item{
+            visible: rotation.angle !== 180
+            anchors.fill: flipable
+            FluAppBar {
+                anchors {
+                    top: parent.top
+                    left: parent.left
+                    right: parent.right
+                }
+                darkText: lang.dark_mode
+                showDark: true
+                z:7
+            }
+            FluNavigationView{
+                property int clickCount: 0
+                id:nav_view
+                width: parent.width
+                height: parent.height
+                z:999
+                items: ItemsOriginal
+                footerItems:ItemsFooter
+                topPadding:FluTools.isMacos() ? 20 : 5
+                displayMode:MainEvent.displayMode
+                logo: "qrc:/example/res/image/favicon.ico"
+                title:"FluentUI"
+                Behavior on rotation {
+                    NumberAnimation{
+                        duration: 167
+                    }
+                }
+                transformOrigin: Item.Center
+                onLoginClicked:{
+                    clickCount += 1
+                    if(clickCount === 5){
+                        flipable.flipped = true
+                        clickCount = 0
+                    }
+                }
+                autoSuggestBox:FluAutoSuggestBox{
+                    width: 280
+                    anchors.centerIn: parent
+                    iconSource: FluentIcons.Search
+                    items: ItemsOriginal.getSearchData()
+                    placeholderText: lang.search
+                    onItemClicked:
+                        (data)=>{
+                            ItemsOriginal.startPageByItem(data)
+                        }
+                }
+                Component.onCompleted: {
+                    ItemsOriginal.navigationView = nav_view
+                    ItemsFooter.navigationView = nav_view
+                    setCurrentIndex(0)
+                }
+            }
         }
     }
 }
diff --git a/src/imports/FluentUI/Controls/FluArea.qml b/src/imports/FluentUI/Controls/FluArea.qml
index d18c818d..99a35b39 100644
--- a/src/imports/FluentUI/Controls/FluArea.qml
+++ b/src/imports/FluentUI/Controls/FluArea.qml
@@ -16,16 +16,6 @@ Rectangle {
     border.width: 1
     implicitHeight: height
     implicitWidth: width
-    Behavior on color{
-        ColorAnimation {
-            duration: 300
-        }
-    }
-    Behavior on border.color{
-        ColorAnimation {
-            duration: 300
-        }
-    }
     Item {
         id: container
         anchors.fill: parent
diff --git a/src/imports/FluentUI/Controls/FluCheckBox.qml b/src/imports/FluentUI/Controls/FluCheckBox.qml
index 8fa4d19d..75797c27 100644
--- a/src/imports/FluentUI/Controls/FluCheckBox.qml
+++ b/src/imports/FluentUI/Controls/FluCheckBox.qml
@@ -24,13 +24,15 @@ Button {
     }
     id:control
     enabled: !disabled
-    padding:0
     onClicked: clickListener()
     background: Item{
         FluFocusRectangle{
+            radius: 4
             visible: control.activeFocus
         }
     }
+    horizontalPadding:2
+    verticalPadding: 2
     Accessible.role: Accessible.Button
     Accessible.name: control.text
     Accessible.description: contentDescription
diff --git a/src/imports/FluentUI/Controls/FluExpander.qml b/src/imports/FluentUI/Controls/FluExpander.qml
index 33a5476b..dab0520c 100644
--- a/src/imports/FluentUI/Controls/FluExpander.qml
+++ b/src/imports/FluentUI/Controls/FluExpander.qml
@@ -20,16 +20,6 @@ Item {
         radius: 4
         color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
         border.color: FluTheme.dark ?  Window.active ? Qt.rgba(55/255,55/255,55/255,1) : Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
-        Behavior on color{
-            ColorAnimation {
-                duration: 300
-            }
-        }
-        Behavior on border.color{
-            ColorAnimation {
-                duration: 300
-            }
-        }
         MouseArea{
             id:control_mouse
             anchors.fill: parent
diff --git a/src/imports/FluentUI/Controls/FluNavigationView.qml b/src/imports/FluentUI/Controls/FluNavigationView.qml
index 31e349e9..cd789b73 100644
--- a/src/imports/FluentUI/Controls/FluNavigationView.qml
+++ b/src/imports/FluentUI/Controls/FluNavigationView.qml
@@ -25,6 +25,7 @@ Item {
     property Component autoSuggestBox
     property Component actionItem
     property int topPadding: 0
+    signal loginClicked
     id:control
     QtObject{
         id:d
@@ -514,6 +515,12 @@ Item {
                 }
                 sourceSize: Qt.size(40,40)
                 Layout.alignment: Qt.AlignVCenter
+                MouseArea{
+                    anchors.fill: parent
+                    onClicked: {
+                        loginClicked()
+                    }
+                }
             }
             FluText{
                 Layout.alignment: Qt.AlignVCenter
diff --git a/src/imports/FluentUI/Controls/FluRadioButton.qml b/src/imports/FluentUI/Controls/FluRadioButton.qml
index 8c91b223..2a99b6d7 100644
--- a/src/imports/FluentUI/Controls/FluRadioButton.qml
+++ b/src/imports/FluentUI/Controls/FluRadioButton.qml
@@ -22,7 +22,8 @@ Button {
     Accessible.onPressAction: control.clicked()
     id:control
     enabled: !disabled
-    padding:0
+    horizontalPadding:2
+    verticalPadding: 2
     background: Item{
         FluFocusRectangle{
             visible: control.activeFocus