diff --git a/src/controls/FluAppBar.qml b/src/controls/FluAppBar.qml
index 2dfb103e..c8a0bda5 100644
--- a/src/controls/FluAppBar.qml
+++ b/src/controls/FluAppBar.qml
@@ -93,7 +93,7 @@ Rectangle{
             iconSize: 11
             text:minimizeText
             radius: 0
-            textColor: root.textColor
+            iconColor: root.textColor
             color: hovered ? minimizeHoverColor : minimizeNormalColor
             onClicked: {
                 d.win.showMinimized()
@@ -107,7 +107,7 @@ Rectangle{
             Layout.alignment: Qt.AlignVCenter
             visible: d.resizable
             radius: 0
-            textColor: root.textColor
+            iconColor: root.textColor
             text:d.isRestore?restoreText:maximizeText
             iconSize: 11
             onClicked: {
@@ -122,7 +122,7 @@ Rectangle{
             height: 30
             radius: 0
             iconSize: 10
-            textColor: hovered ? Qt.rgba(1,1,1,1) : root.textColor
+            iconColor: hovered ? Qt.rgba(1,1,1,1) : root.textColor
             color:hovered ? closeHoverColor : closeNormalColor
             onClicked: {
                 d.win.close()
diff --git a/src/controls/FluIconButton.qml b/src/controls/FluIconButton.qml
index aa024057..ecd0b9be 100644
--- a/src/controls/FluIconButton.qml
+++ b/src/controls/FluIconButton.qml
@@ -17,7 +17,7 @@ Button {
         }
         return hovered ? hoverColor : normalColor
     }
-    property color textColor: {
+    property color iconColor: {
         if(FluTheme.dark){
             if(disabled){
                 return Qt.rgba(130/255,130/255,130/255,1)
@@ -57,7 +57,7 @@ Button {
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
             anchors.centerIn: parent
-            color:control.textColor
+            color:control.iconColor
             text: (String.fromCharCode(iconSource).toString(16));
         }
         FluTooltip{
diff --git a/src/controls/FluPivot.qml b/src/controls/FluPivot.qml
index 70915568..baf0a2b3 100644
--- a/src/controls/FluPivot.qml
+++ b/src/controls/FluPivot.qml
@@ -10,20 +10,20 @@ Item {
     property color normalColor: FluTheme.dark ? FluColors.Grey120 : FluColors.Grey120
     property color hoverColor: FluTheme.dark ? FluColors.Grey10 : FluColors.Black
 
-
     width: 400
     height: 300
+    implicitHeight: height
+    implicitWidth: width
+
+    MouseArea{
+        anchors.fill: parent
+        preventStealing: true
+    }
 
     FluObject{
         id:d
     }
 
-    Component.onCompleted: {
-        for(var i =0 ;i <d.children.length;i++){
-            console.debug(d.children[i].title)
-        }
-    }
-
     ListView{
         id:nav_list
         height: 40
diff --git a/src/controls/FluScrollBar.qml b/src/controls/FluScrollBar.qml
index 176710db..afba16ef 100644
--- a/src/controls/FluScrollBar.qml
+++ b/src/controls/FluScrollBar.qml
@@ -1,34 +1,133 @@
 import QtQuick
 import QtQuick.Controls
-import QtQuick.Controls.impl 2.15
-import QtQuick.Templates 2.15 as T
 import FluentUI
 
-T.ScrollBar {
+ScrollBar {
     id: control
 
     property color handleNormalColor: Qt.rgba(134/255,134/255,134/255,1)
     property color handleHoverColor: Qt.lighter(handleNormalColor)
     property color handlePressColor: Qt.darker(handleNormalColor)
+    property bool expand: false
+
 
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                             implicitContentWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                              implicitContentHeight + topPadding + bottomPadding)
 
-    padding: 4
-    visible: control.policy !== T.ScrollBar.AlwaysOff
+    visible: control.policy !== ScrollBar.AlwaysOff
     minimumSize: 0.3
-
+    topPadding:{
+        if(vertical){
+            if(expand)
+                return 15
+            return 2
+        }else{
+            if(expand){
+                return 2
+            }
+            return 4
+        }
+    }
+    bottomPadding:{
+        if(vertical){
+            if(expand)
+                return 15
+            return 2
+        }else{
+            if(expand){
+                return 2
+            }
+            return 4
+        }
+    }
+    leftPadding:{
+        if(vertical){
+            if(expand){
+                return 2
+            }
+            return 4
+        }else{
+            if(expand)
+                return 15
+            return 2
+        }
+    }
+    rightPadding:{
+        if(vertical){
+            if(expand){
+                return 2
+            }
+            return 4
+        }else{
+            if(expand)
+                return 15
+            return 2
+        }
+    }
+    Behavior on topPadding {
+        NumberAnimation{
+            duration: 150
+        }
+    }
+    Behavior on bottomPadding {
+        NumberAnimation{
+            duration: 150
+        }
+    }
+    Behavior on leftPadding {
+        NumberAnimation{
+            duration: 150
+        }
+    }
+    Behavior on rightPadding {
+        NumberAnimation{
+            duration: 150
+        }
+    }
     contentItem: Rectangle {
-        implicitWidth: hovered || pressed ? 6 : 2
-        implicitHeight:  hovered || pressed ? 6 : 2
+        id:item_react
+        implicitWidth: expand ? 8 : 2
+        implicitHeight:  expand ? 8 : 2
         radius: width / 2
         layer.samples: 4
         layer.enabled: true
         layer.smooth: true
         color: control.pressed?handlePressColor:control.hovered?handleHoverColor:handleNormalColor
-        opacity:(control.policy === T.ScrollBar.AlwaysOn || control.size < 1.0)?1.0:0.0
+        opacity:(control.policy === ScrollBar.AlwaysOn || control.size < 1.0)?1.0:0.0
+    }
+    background:  Rectangle{
+        radius: 5
+        color: {
+            if(expand && item_react.opacity){
+                if(FluTheme.dark){
+                    return Qt.rgba(0,0,0,1)
+                }
+                return Qt.rgba(1,1,1,1)
+            }
+            return Qt.rgba(0,0,0,0)
+        }
+        MouseArea{
+            id:mouse_item
+            hoverEnabled: true
+            anchors.fill: parent
+            onEntered: {
+                timer.restart()
+                console.debug("onEntered")
+            }
+            onExited: {
+                timer.restart()
+                console.debug("onExited")
+            }
+        }
+    }
+    Timer{
+        id:timer
+        interval: 800
+        onTriggered: {
+            expand = mouse_item.containsMouse || btn_top.hovered || btn_bottom.hovered || btn_left.hovered || btn_right.hovered
+        }
     }
     Behavior on implicitWidth {
         NumberAnimation{
@@ -36,4 +135,66 @@ T.ScrollBar {
         }
     }
 
+    FluIconButton{
+        id:btn_top
+        iconSource: FluentIcons.CaretSolidUp
+        anchors.horizontalCenter: parent.horizontalCenter
+        width:10
+        height:10
+        z:100
+        iconColor: hovered ? FluColors.Black : FluColors.Grey120
+        iconSize: 8
+        anchors.top: parent.top
+        anchors.topMargin: 4
+        visible:vertical && expand
+        onClicked:{
+            decrease()
+        }
+    }
+    FluIconButton{
+        id:btn_bottom
+        iconSource: FluentIcons.CaretSolidDown
+        visible:vertical && expand
+        width:10
+        height:10
+        iconSize: 8
+        iconColor: hovered ? FluColors.Black : FluColors.Grey120
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 4
+        onClicked:{
+            increase()
+        }
+    }
+    FluIconButton{
+        id:btn_left
+        iconSource: FluentIcons.CaretSolidLeft
+        visible:!vertical && expand
+        width:10
+        height:10
+        iconSize: 8
+        iconColor: hovered ? FluColors.Black : FluColors.Grey120
+        anchors.leftMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        onClicked:{
+            decrease()
+        }
+    }
+    FluIconButton{
+        id:btn_right
+        iconSource: FluentIcons.CaretSolidRight
+        visible:!vertical && expand
+        width:10
+        height:10
+        iconSize: 8
+        iconColor: hovered ? FluColors.Black : FluColors.Grey120
+        anchors.rightMargin: 4
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        onClicked:{
+            increase()
+        }
+    }
+
 }