diff --git a/example/qml-Qt6/window/MainWindow.qml b/example/qml-Qt6/window/MainWindow.qml
index dcd53be3..b03226e6 100644
--- a/example/qml-Qt6/window/MainWindow.qml
+++ b/example/qml-Qt6/window/MainWindow.qml
@@ -201,8 +201,6 @@ CustomWindow {
                     }
                 }
                 autoSuggestBox:FluAutoSuggestBox{
-                    width: 280
-                    anchors.centerIn: parent
                     iconSource: FluentIcons.Search
                     items: ItemsOriginal.getSearchData()
                     placeholderText: lang.search
diff --git a/example/qml/window/MainWindow.qml b/example/qml/window/MainWindow.qml
index e5bee768..0d6b4b2a 100644
--- a/example/qml/window/MainWindow.qml
+++ b/example/qml/window/MainWindow.qml
@@ -204,8 +204,6 @@ CustomWindow {
                     }
                 }
                 autoSuggestBox:FluAutoSuggestBox{
-                    width: 280
-                    anchors.centerIn: parent
                     iconSource: FluentIcons.Search
                     items: ItemsOriginal.getSearchData()
                     placeholderText: lang.search
diff --git a/src/FluRectangle.cpp b/src/FluRectangle.cpp
index d902da9e..be711054 100644
--- a/src/FluRectangle.cpp
+++ b/src/FluRectangle.cpp
@@ -2,7 +2,6 @@
 #include <QPainterPath>
 
 FluRectangle::FluRectangle(QQuickItem* parent) : QQuickPaintedItem(parent){
-    setFlag(ItemHasContents, true);
     color(QColor(255,255,255,255));
     radius({0,0,0,0});
     connect(this,&FluRectangle::colorChanged,this,[=]{update();});
diff --git a/src/Qt5/imports/FluentUI/Controls/FluCheckBox.qml b/src/Qt5/imports/FluentUI/Controls/FluCheckBox.qml
index 8050d0cc..a6c20bd0 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluCheckBox.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluCheckBox.qml
@@ -18,7 +18,7 @@ Button {
     property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3)
     property color checkedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
-    property real size: 18
+    property real size: 17
     property alias textColor: btn_text.textColor
     property bool textRight: true
     property real textSpacing: 6
@@ -101,7 +101,7 @@ Button {
             FluIcon {
                 anchors.centerIn: parent
                 iconSource: FluentIcons.AcceptMedium
-                iconSize: 15
+                iconSize: 14
                 visible: checked
                 iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                 Behavior on visible {
diff --git a/src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml b/src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml
index f64312c0..9ecd0e01 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluNavigationView.qml
@@ -13,10 +13,11 @@ Item {
     property Component autoSuggestBox
     property Component actionItem
     property int topPadding: 0
-    property int navWidth: 300
     property int pageMode: FluNavigationViewType.Stack
     property FluMenu navItemRightMenu
     property FluMenu navItemExpanderRightMenu
+    property int cellHeight: 38
+    property int cellWidth: 300
     signal logoClicked
     id:control
     Item{
@@ -135,9 +136,9 @@ Item {
         Item{
             height: {
                 if(model.parent){
-                    return model.parent.isExpand ? 30 : 0
+                    return model.parent.isExpand ? control.cellHeight : 0
                 }
-                return 30
+                return  control.cellHeight
             }
             Behavior on height {
                 enabled: FluTheme.enableAnimation && d.animDisabled
@@ -160,7 +161,7 @@ Item {
     Component{
         id:com_panel_item_expander
         Item{
-            height: 38
+            height: control.cellHeight
             width: layout_list.width
             FluControl{
                 id:item_control
@@ -415,20 +416,20 @@ Item {
             Behavior on height {
                 enabled: FluTheme.enableAnimation && d.animDisabled
                 NumberAnimation{
-                    duration: 83
+                    duration: 167
+                    easing.type: Easing.OutCubic
                 }
             }
             height: {
                 if(model&&model.parent){
-                    return model.parent.isExpand ? 38 : 0
+                    return model.parent.isExpand ? control.cellHeight : 0
                 }
-                return 38
+                return control.cellHeight
             }
-            visible: {
-                if(model&&model.parent){
-                    return model.parent.isExpand ? true : false
-                }
-                return true
+            visible: control.cellHeight === Number(height)
+            opacity: visible
+            Behavior on opacity {
+                NumberAnimation { duration: 83 }
             }
             width: layout_list.width
             FluControl{
@@ -853,7 +854,7 @@ Item {
                 if(d.isCompact){
                     return 50
                 }
-                return control.navWidth
+                return control.cellWidth
             }
         }
         Behavior on anchors.leftMargin {
@@ -881,7 +882,7 @@ Item {
             if(d.isCompactAndNotPanel){
                 return 50
             }
-            return control.navWidth
+            return control.cellWidth
         }
         anchors{
             top: parent.top
@@ -927,8 +928,14 @@ Item {
             height: autoSuggestBox ? 38 : 0
             Loader{
                 id:loader_auto_suggest_box
-                anchors.centerIn: parent
                 sourceComponent: autoSuggestBox
+                anchors{
+                    left: parent.left
+                    right: parent.right
+                    leftMargin: 6
+                    rightMargin: 6
+                    verticalCenter: parent.verticalCenter
+                }
                 visible: {
                     if(d.isCompactAndNotPanel){
                         return false
diff --git a/src/Qt5/imports/FluentUI/Controls/FluRangeSlider.qml b/src/Qt5/imports/FluentUI/Controls/FluRangeSlider.qml
index 0c5a0675..8ad699cd 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluRangeSlider.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluRangeSlider.qml
@@ -23,47 +23,63 @@ T.RangeSlider {
     first.handle: Rectangle {
         x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
         y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
-        implicitWidth: 24
-        implicitHeight: 24
+        implicitWidth: 20
+        implicitHeight: 20
         radius: width / 2
         color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
         FluShadow{
-            radius: 12
+            radius: 10
         }
-        Rectangle{
-            width: radius*2
-            height: radius*2
-            radius:{
+        FluIcon{
+            width: 10
+            height: 10
+            iconSource: FluentIcons.FullCircleMask
+            iconSize: 10
+            scale:{
                 if(control.first.pressed){
-                    return 5
+                    return 0.9
                 }
-                return control.first.hovered ? 7 : 6
+                return control.first.hovered ? 1.2 : 1
             }
-            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            iconColor:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
             anchors.centerIn: parent
+            Behavior on scale{
+                ScaleAnimator{
+                    duration: 167
+                    easing.type: Easing.OutCubic
+                }
+            }
         }
     }
     second.handle: Rectangle {
         x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
         y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
-        implicitWidth: 24
-        implicitHeight: 24
+        implicitWidth: 20
+        implicitHeight: 20
         radius: width / 2
         color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
         FluShadow{
-            radius: 12
+            radius: 10
         }
-        Rectangle{
-            width: radius*2
-            height: radius*2
-            radius:{
+        FluIcon{
+            width: 10
+            height: 10
+            iconSource: FluentIcons.FullCircleMask
+            iconSize: 10
+            scale:{
                 if(control.second.pressed){
-                    return 5
+                    return 0.9
                 }
-                return control.second.hovered ? 7 : 6
+                return control.second.hovered ? 1.2 : 1
             }
-            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            iconColor:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
             anchors.centerIn: parent
+            Behavior on scale{
+                ScaleAnimator{
+                    duration: 167
+                    easing.type: Easing.OutCubic
+                }
+            }
         }
     }
     background: Item {
@@ -99,4 +115,3 @@ T.RangeSlider {
         text:String(isTipInt?Math.round(control.second.value):control.second.value)
     }
 }
-
diff --git a/src/Qt5/imports/FluentUI/Controls/FluSlider.qml b/src/Qt5/imports/FluentUI/Controls/FluSlider.qml
index 642ad8be..e6fcaef0 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluSlider.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluSlider.qml
@@ -15,23 +15,31 @@ T.Slider {
     handle: Rectangle {
         x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
         y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
-        implicitWidth: 24
-        implicitHeight: 24
-        radius: 12
+        implicitWidth: 20
+        implicitHeight: 20
+        radius: 10
         color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
         FluShadow{
-            radius: 12
+            radius: 10
         }
-        Rectangle{
-            width: radius*2
-            height: radius*2
-            radius:{
-                if(control.pressed){
-                    return 5
+        FluIcon{
+            width: 10
+            height: 10
+            Behavior on scale{
+                ScaleAnimator{
+                    duration: 167
+                    easing.type: Easing.OutCubic
                 }
-                return control.hovered ? 7 : 6
             }
-            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            iconSource: FluentIcons.FullCircleMask
+            iconSize: 10
+            scale:{
+                if(control.pressed){
+                    return 0.9
+                }
+                return control.hovered ? 1.2 : 1
+            }
+            iconColor:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
             anchors.centerIn: parent
         }
     }
diff --git a/src/Qt5/imports/FluentUI/Controls/FluToggleSwitch.qml b/src/Qt5/imports/FluentUI/Controls/FluToggleSwitch.qml
index 87128be1..fb5329f1 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluToggleSwitch.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluToggleSwitch.qml
@@ -78,7 +78,12 @@ Button {
             FluIcon {
                 width:  parent.height
                 x:checked ? control_backgound.width-width : 0
-                scale: hovered&enabled ? 7/10 : 6/10
+                scale: {
+                    if(pressed){
+                        return 5/10
+                    }
+                    return hovered&enabled ? 7/10 : 6/10
+                }
                 iconSource: FluentIcons.FullCircleMask
                 iconSize: 20
                 color: {
@@ -90,9 +95,15 @@ Button {
                     }
                     return dotNormalColor
                 }
+                Behavior on scale{
+                    ScaleAnimator{
+                        duration: 167
+                        easing.type: Easing.OutCubic
+                    }
+                }
                 Behavior on x  {
                     enabled: FluTheme.enableAnimation
-                    NumberAnimation {
+                    XAnimator {
                         duration: 167
                         easing.type: Easing.OutCubic
                     }
diff --git a/src/Qt6/imports/FluentUI/Controls/FluCheckBox.qml b/src/Qt6/imports/FluentUI/Controls/FluCheckBox.qml
index dcf490ed..ffbce54a 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluCheckBox.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluCheckBox.qml
@@ -19,7 +19,7 @@ Button {
     property color checkedPreesedColor: FluTheme.dark ? Qt.darker(checkedColor,1.3) : Qt.lighter(checkedColor,1.3)
     property color checkedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
-    property real size: 18
+    property real size: 17
     property alias textColor: btn_text.textColor
     property bool textRight: true
     property real textSpacing: 6
@@ -97,7 +97,7 @@ Button {
             FluIcon {
                 anchors.centerIn: parent
                 iconSource: FluentIcons.AcceptMedium
-                iconSize: 15
+                iconSize: 14
                 visible: checked
                 iconColor: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                 Behavior on visible {
diff --git a/src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml b/src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml
index 0237ffac..fcd3907b 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluNavigationView.qml
@@ -14,10 +14,11 @@ Item {
     property Component autoSuggestBox
     property Component actionItem
     property int topPadding: 0
-    property int navWidth: 300
     property int pageMode: FluNavigationViewType.Stack
     property FluMenu navItemRightMenu
     property FluMenu navItemExpanderRightMenu
+    property int cellHeight: 38
+    property int cellWidth: 300
     signal logoClicked
     id:control
     Item{
@@ -136,9 +137,9 @@ Item {
         Item{
             height: {
                 if(model.parent){
-                    return model.parent.isExpand ? 30 : 0
+                    return model.parent.isExpand ? control.cellHeight : 0
                 }
-                return 30
+                return  control.cellHeight
             }
             Behavior on height {
                 enabled: FluTheme.enableAnimation && d.animDisabled
@@ -161,7 +162,7 @@ Item {
     Component{
         id:com_panel_item_expander
         Item{
-            height: 38
+            height: control.cellHeight
             width: layout_list.width
             FluControl{
                 id:item_control
@@ -416,20 +417,20 @@ Item {
             Behavior on height {
                 enabled: FluTheme.enableAnimation && d.animDisabled
                 NumberAnimation{
-                    duration: 83
+                    duration: 167
+                    easing.type: Easing.OutCubic
                 }
             }
             height: {
                 if(model&&model.parent){
-                    return model.parent.isExpand ? 38 : 0
+                    return model.parent.isExpand ? control.cellHeight : 0
                 }
-                return 38
+                return control.cellHeight
             }
-            visible: {
-                if(model&&model.parent){
-                    return model.parent.isExpand ? true : false
-                }
-                return true
+            visible: control.cellHeight === Number(height)
+            opacity: visible
+            Behavior on opacity {
+                NumberAnimation { duration: 83 }
             }
             width: layout_list.width
             FluControl{
@@ -854,7 +855,7 @@ Item {
                 if(d.isCompact){
                     return 50
                 }
-                return control.navWidth
+                return control.cellWidth
             }
         }
         Behavior on anchors.leftMargin {
@@ -882,7 +883,7 @@ Item {
             if(d.isCompactAndNotPanel){
                 return 50
             }
-            return control.navWidth
+            return control.cellWidth
         }
         anchors{
             top: parent.top
@@ -928,8 +929,14 @@ Item {
             height: autoSuggestBox ? 38 : 0
             Loader{
                 id:loader_auto_suggest_box
-                anchors.centerIn: parent
                 sourceComponent: autoSuggestBox
+                anchors{
+                    left: parent.left
+                    right: parent.right
+                    leftMargin: 6
+                    rightMargin: 6
+                    verticalCenter: parent.verticalCenter
+                }
                 visible: {
                     if(d.isCompactAndNotPanel){
                         return false
diff --git a/src/Qt6/imports/FluentUI/Controls/FluRangeSlider.qml b/src/Qt6/imports/FluentUI/Controls/FluRangeSlider.qml
index 9172e34c..b3f0a3d9 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluRangeSlider.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluRangeSlider.qml
@@ -24,47 +24,63 @@ T.RangeSlider {
     first.handle: Rectangle {
         x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
         y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
-        implicitWidth: 24
-        implicitHeight: 24
+        implicitWidth: 20
+        implicitHeight: 20
         radius: width / 2
         color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
         FluShadow{
-            radius: 12
+            radius: 10
         }
-        Rectangle{
-            width: radius*2
-            height: radius*2
-            radius:{
+        FluIcon{
+            width: 10
+            height: 10
+            iconSource: FluentIcons.FullCircleMask
+            iconSize: 10
+            scale:{
                 if(control.first.pressed){
-                    return 5
+                    return 0.9
                 }
-                return control.first.hovered ? 7 : 6
+                return control.first.hovered ? 1.2 : 1
             }
-            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            iconColor:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
             anchors.centerIn: parent
+            Behavior on scale{
+                ScaleAnimator{
+                    duration: 167
+                    easing.type: Easing.OutCubic
+                }
+            }
         }
     }
     second.handle: Rectangle {
         x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
         y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
-        implicitWidth: 24
-        implicitHeight: 24
+        implicitWidth: 20
+        implicitHeight: 20
         radius: width / 2
         color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
         FluShadow{
-            radius: 12
+            radius: 10
         }
-        Rectangle{
-            width: radius*2
-            height: radius*2
-            radius:{
+        FluIcon{
+            width: 10
+            height: 10
+            iconSource: FluentIcons.FullCircleMask
+            iconSize: 10
+            scale:{
                 if(control.second.pressed){
-                    return 5
+                    return 0.9
                 }
-                return control.second.hovered ? 7 : 6
+                return control.second.hovered ? 1.2 : 1
             }
-            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            iconColor:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
             anchors.centerIn: parent
+            Behavior on scale{
+                ScaleAnimator{
+                    duration: 167
+                    easing.type: Easing.OutCubic
+                }
+            }
         }
     }
     background: Item {
diff --git a/src/Qt6/imports/FluentUI/Controls/FluSlider.qml b/src/Qt6/imports/FluentUI/Controls/FluSlider.qml
index c642d30e..1bba194a 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluSlider.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluSlider.qml
@@ -16,23 +16,31 @@ T.Slider {
     handle: Rectangle {
         x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
         y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
-        implicitWidth: 24
-        implicitHeight: 24
-        radius: 12
+        implicitWidth: 20
+        implicitHeight: 20
+        radius: 10
         color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
         FluShadow{
-            radius: 12
+            radius: 10
         }
-        Rectangle{
-            width: radius*2
-            height: radius*2
-            radius:{
-                if(control.pressed){
-                    return 5
+        FluIcon{
+            width: 10
+            height: 10
+            Behavior on scale{
+                ScaleAnimator{
+                    duration: 167
+                    easing.type: Easing.OutCubic
                 }
-                return control.hovered ? 7 : 6
             }
-            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            iconSource: FluentIcons.FullCircleMask
+            iconSize: 10
+            scale:{
+                if(control.pressed){
+                    return 0.9
+                }
+                return control.hovered ? 1.2 : 1
+            }
+            iconColor:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
             anchors.centerIn: parent
         }
     }
diff --git a/src/Qt6/imports/FluentUI/Controls/FluToggleSwitch.qml b/src/Qt6/imports/FluentUI/Controls/FluToggleSwitch.qml
index 277fe75d..71a7494c 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluToggleSwitch.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluToggleSwitch.qml
@@ -79,7 +79,12 @@ Button {
             FluIcon {
                 width:  parent.height
                 x:checked ? control_backgound.width-width : 0
-                scale: hovered&enabled ? 7/10 : 6/10
+                scale: {
+                    if(pressed){
+                        return 5/10
+                    }
+                    return hovered&enabled ? 7/10 : 6/10
+                }
                 iconSource: FluentIcons.FullCircleMask
                 iconSize: 20
                 color: {
@@ -91,9 +96,15 @@ Button {
                     }
                     return dotNormalColor
                 }
+                Behavior on scale{
+                    ScaleAnimator{
+                        duration: 167
+                        easing.type: Easing.OutCubic
+                    }
+                }
                 Behavior on x  {
                     enabled: FluTheme.enableAnimation
-                    NumberAnimation {
+                    XAnimator {
                         duration: 167
                         easing.type: Easing.OutCubic
                     }