diff --git a/src/FluColors.cpp b/src/FluColors.cpp
index d7c79fc4..1aef487c 100644
--- a/src/FluColors.cpp
+++ b/src/FluColors.cpp
@@ -1,4 +1,5 @@
 #include "FluColors.h"
+#include "FluTools.h"
 
 FluColors::FluColors(QObject *parent):QObject{parent}{
     Transparent(QColor(0, 0, 0, 0));
@@ -111,17 +112,12 @@ FluColors::FluColors(QObject *parent):QObject{parent}{
 
 FluAccentColor* FluColors::createAccentColor(QColor primaryColor){
     FluAccentColor *accentColor = new FluAccentColor(this);
-    accentColor->darkest(withOpacity(primaryColor,0.7));
-    accentColor->darker(withOpacity(primaryColor,0.8));
-    accentColor->dark(withOpacity(primaryColor,0.9));
+    accentColor->darkest(FluTools::getInstance()->withOpacity(primaryColor,0.7));
+    accentColor->darker(FluTools::getInstance()->withOpacity(primaryColor,0.8));
+    accentColor->dark(FluTools::getInstance()->withOpacity(primaryColor,0.9));
     accentColor->normal(primaryColor);
-    accentColor->light(withOpacity(primaryColor,0.9));
-    accentColor->lighter(withOpacity(primaryColor,0.8));
-    accentColor->lightest(withOpacity(primaryColor,0.7));
+    accentColor->light(FluTools::getInstance()->withOpacity(primaryColor,0.9));
+    accentColor->lighter(FluTools::getInstance()->withOpacity(primaryColor,0.8));
+    accentColor->lightest(FluTools::getInstance()->withOpacity(primaryColor,0.7));
     return accentColor;
 }
-
-QColor FluColors::withOpacity(QColor color,qreal opacity){
-    int alpha = qRound(opacity * 255) & 0xff;
-    return QColor::fromRgba((alpha << 24) | (color.rgba() & 0xffffff));
-}
diff --git a/src/FluColors.h b/src/FluColors.h
index fa53fa60..9dc45f23 100644
--- a/src/FluColors.h
+++ b/src/FluColors.h
@@ -3,6 +3,7 @@
 
 #include <QObject>
 #include <QtQml/qqml.h>
+
 #include "FluAccentColor.h"
 #include "stdafx.h"
 #include "singleton.h"
@@ -50,7 +51,6 @@ class FluColors : public QObject
     QML_SINGLETON
 private:
     explicit FluColors(QObject *parent = nullptr);
-    QColor withOpacity(QColor color,qreal opacity);
 public:
     SINGLETON(FluColors)
     Q_INVOKABLE FluAccentColor* createAccentColor(QColor primaryColor);
diff --git a/src/FluTools.cpp b/src/FluTools.cpp
index 4c3cdf7c..47473811 100644
--- a/src/FluTools.cpp
+++ b/src/FluTools.cpp
@@ -119,8 +119,9 @@ QUrl FluTools::getUrlByFilePath(const QString& path){
     return QUrl::fromLocalFile(path);
 }
 
-QColor FluTools::colorAlpha(const QColor& color,qreal alpha){
-    return QColor(color.red(),color.green(),color.blue(),255*alpha);
+QColor FluTools::withOpacity(const QColor& color,qreal opacity){
+    int alpha = qRound(opacity * 255) & 0xff;
+    return QColor::fromRgba((alpha << 24) | (color.rgba() & 0xffffff));
 }
 
 QString FluTools::md5(QString text){
diff --git a/src/FluTools.h b/src/FluTools.h
index 1561fb69..60b8b3a3 100644
--- a/src/FluTools.h
+++ b/src/FluTools.h
@@ -39,7 +39,7 @@ public:
     Q_INVOKABLE QRect getVirtualGeometry();
     Q_INVOKABLE QString getApplicationDirPath();
     Q_INVOKABLE QUrl getUrlByFilePath(const QString& path);
-    Q_INVOKABLE QColor colorAlpha(const QColor&,qreal alpha);
+    Q_INVOKABLE QColor withOpacity(const QColor&,qreal alpha);
     Q_INVOKABLE QString md5(QString text);
     Q_INVOKABLE QString sha256(QString text);
     Q_INVOKABLE QString toBase64(QString text);
diff --git a/src/Qt5/imports/FluentUI/Controls/FluButton.qml b/src/Qt5/imports/FluentUI/Controls/FluButton.qml
index 14870543..97f71452 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluButton.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluButton.qml
@@ -7,7 +7,7 @@ Button {
     property string contentDescription: ""
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
-    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
+    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color dividerColor: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(233/255,233/255,233/255,1)
     property color textColor: {
         if(FluTheme.dark){
@@ -38,18 +38,18 @@ Button {
     horizontalPadding:12
     font:FluTextStyle.Body
     focusPolicy:Qt.TabFocus
-    background: Rectangle{
-        implicitWidth: 28
-        implicitHeight: 28
-        border.color: control.dividerColor
-        border.width: 1
+    background: FluControlBackground{
+        implicitWidth: 30
+        implicitHeight: 30
         radius: 4
-        color:{
+        color: {
             if(!enabled){
                 return disableColor
             }
             return hovered ? hoverColor :normalColor
         }
+        shadow: enabled
+        border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1)
         FluFocusRectangle{
             visible: control.activeFocus
             radius:4
diff --git a/src/Qt5/imports/FluentUI/Controls/FluComboBox.qml b/src/Qt5/imports/FluentUI/Controls/FluComboBox.qml
index 9e3fbe87..382e7c86 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluComboBox.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluComboBox.qml
@@ -45,7 +45,7 @@ T.ComboBox {
         topPadding: 6 - control.padding
         bottomPadding: 6 - control.padding
         renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-        selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+        selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
         selectedTextColor: color
         text: control.editable ? control.editText : control.displayText
         enabled: control.editable
diff --git a/src/Qt5/imports/FluentUI/Controls/FluCopyableText.qml b/src/Qt5/imports/FluentUI/Controls/FluCopyableText.qml
index cb902881..b365175c 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluCopyableText.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluCopyableText.qml
@@ -17,7 +17,7 @@ TextEdit {
     selectByMouse: true
     selectedTextColor: color
     bottomPadding: 0
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     font:FluTextStyle.Body
     onSelectedTextChanged: {
         control.forceActiveFocus()
diff --git a/src/Qt5/imports/FluentUI/Controls/FluDropDownButton.qml b/src/Qt5/imports/FluentUI/Controls/FluDropDownButton.qml
index 8b098816..60335194 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluDropDownButton.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluDropDownButton.qml
@@ -3,75 +3,21 @@ import QtQuick.Controls 2.15
 import QtQuick.Window 2.15
 import FluentUI 1.0
 
-Button {
-    property bool disabled: false
-    property string contentDescription: ""
-    property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
-    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
-    property color textColor: {
-        if(FluTheme.dark){
-            if(!enabled){
-                return Qt.rgba(131/255,131/255,131/255,1)
-            }
-            if(pressed){
-                return Qt.rgba(162/255,162/255,162/255,1)
-            }
-            return Qt.rgba(1,1,1,1)
-        }else{
-            if(!enabled){
-                return Qt.rgba(160/255,160/255,160/255,1)
-            }
-            if(pressed){
-                return Qt.rgba(96/255,96/255,96/255,1)
-            }
-            return Qt.rgba(0,0,0,1)
-        }
-    }
-    property var window : Window.window
-    default property alias contentData: menu.contentData
-    Accessible.role: Accessible.Button
-    Accessible.name: control.text
-    Accessible.description: contentDescription
-    Accessible.onPressAction: control.clicked()
+FluButton {
     id: control
+    default property alias contentData: menu.contentData
     rightPadding:35
-    enabled: !disabled
-    focusPolicy:Qt.TabFocus
     verticalPadding: 0
     horizontalPadding:12
-    background: Rectangle{
-        implicitWidth: 28
-        implicitHeight: 28
-        border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
-        border.width: 1
-        radius: 4
-        FluFocusRectangle{
-            visible: control.activeFocus
-            radius:8
+    FluIcon{
+        iconSource:FluentIcons.ChevronDown
+        iconSize: 15
+        anchors{
+            right: parent.right
+            rightMargin: 10
+            verticalCenter: parent.verticalCenter
         }
-        color:{
-            if(!enabled){
-                return disableColor
-            }
-            return hovered ? hoverColor :normalColor
-        }
-        FluIcon{
-            iconSource:FluentIcons.ChevronDown
-            iconSize: 15
-            anchors{
-                right: parent.right
-                rightMargin: 10
-                verticalCenter: parent.verticalCenter
-            }
-            iconColor:title.color
-        }
-    }
-    contentItem: FluText {
-        id:title
-        text: control.text
-        verticalAlignment: Text.AlignVCenter
-        color: control.textColor
+        iconColor:control.textColor
     }
     onClicked: {
         if(menu.count !==0){
diff --git a/src/Qt5/imports/FluentUI/Controls/FluExpander.qml b/src/Qt5/imports/FluentUI/Controls/FluExpander.qml
index 9156596e..e5a616c1 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluExpander.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluExpander.qml
@@ -26,8 +26,8 @@ Item {
         width: parent.width
         height: 45
         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)
+        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)
+        color: FluTheme.dark ? Window.active ?  Qt.rgba(28/255,28/255,28/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
         MouseArea{
             id:control_mouse
             anchors.fill: parent
diff --git a/src/Qt5/imports/FluentUI/Controls/FluFilledButton.qml b/src/Qt5/imports/FluentUI/Controls/FluFilledButton.qml
index 04a0e419..d90e93e0 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluFilledButton.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluFilledButton.qml
@@ -29,37 +29,26 @@ Button {
     font:FluTextStyle.Body
     verticalPadding: 0
     horizontalPadding:12
-    background: Rectangle{
-        implicitWidth: 28
-        implicitHeight: 28
+    background: FluControlBackground{
+        implicitWidth: 30
+        implicitHeight: 30
         radius: 4
+        bottomMargin: enabled ? 2 : 0
+        border.width: enabled ? 1 : 0
+        border.color: enabled ? Qt.darker(control.normalColor,1.2) : disableColor
+        color:{
+            if(!enabled){
+                return disableColor
+            }
+            if(pressed){
+                return pressedColor
+            }
+            return hovered ? hoverColor :normalColor
+        }
         FluFocusRectangle{
             visible: control.visualFocus
             radius:4
         }
-        gradient: Gradient {
-            GradientStop { position: 0.33; color: control.enabled ? control.normalColor : Qt.rgba(0,0,0,0) }
-            GradientStop { position: 1.0; color: control.enabled ? Qt.darker(control.normalColor,1.3) : Qt.rgba(0,0,0,0) }
-        }
-        Rectangle{
-            radius: parent.radius
-            anchors{
-                fill: parent
-                topMargin: control.enabled ? 0 : 0
-                leftMargin: control.enabled ? 1 : 0
-                rightMargin: control.enabled ? 1 : 0
-                bottomMargin: control.enabled ? 2 : 0
-            }
-            color:{
-                if(!enabled){
-                    return disableColor
-                }
-                if(pressed){
-                    return pressedColor
-                }
-                return hovered ? hoverColor :normalColor
-            }
-        }
     }
     contentItem: FluText {
         text: control.text
diff --git a/src/Qt5/imports/FluentUI/Controls/FluFrame.qml b/src/Qt5/imports/FluentUI/Controls/FluFrame.qml
index d61be100..b4154d90 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluFrame.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluFrame.qml
@@ -19,6 +19,6 @@ T.Frame {
         id:d
         radius: 4
         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)
-        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)
+        color: FluTheme.dark ? Window.active ?  Qt.rgba(28/255,28/255,28/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     }
 }
diff --git a/src/Qt5/imports/FluentUI/Controls/FluMultilineTextBox.qml b/src/Qt5/imports/FluentUI/Controls/FluMultilineTextBox.qml
index c09d6193..7b5286ef 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluMultilineTextBox.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluMultilineTextBox.qml
@@ -25,7 +25,7 @@ TextArea{
     leftPadding: padding+4
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     selectedTextColor: color
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     placeholderTextColor: {
         if(!enabled){
             return placeholderDisableColor
diff --git a/src/Qt5/imports/FluentUI/Controls/FluPasswordBox.qml b/src/Qt5/imports/FluentUI/Controls/FluPasswordBox.qml
index 9f22eb10..de932dd9 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluPasswordBox.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluPasswordBox.qml
@@ -25,7 +25,7 @@ TextField{
     leftPadding: padding+4
     echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     selectedTextColor: color
     placeholderTextColor: {
         if(!enabled){
diff --git a/src/Qt5/imports/FluentUI/Controls/FluProgressButton.qml b/src/Qt5/imports/FluentUI/Controls/FluProgressButton.qml
index 19d21e01..5eb60ccc 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluProgressButton.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluProgressButton.qml
@@ -2,14 +2,13 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 
-Button {
+FluButton {
     property real progress
-    property bool disabled: false
-    property string contentDescription: ""
     QtObject{
         id:d
         property bool checked: (rect_back.height === background.height) && (progress === 1)
     }
+    id: control
     property color normalColor: {
         if(d.checked){
             return FluTheme.primaryColor
@@ -32,59 +31,50 @@ Button {
         }
     }
     property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
-    Accessible.role: Accessible.Button
-    Accessible.name: control.text
-    Accessible.description: contentDescription
-    Accessible.onPressAction: control.clicked()
-    focusPolicy:Qt.TabFocus
-    id: control
-    enabled: !disabled
-    verticalPadding: 0
-    horizontalPadding:12
-    background: FluClip{
-        implicitWidth: 28
-        implicitHeight: 28
-        radius: [4,4,4,4]
-        Rectangle{
-            anchors.fill: parent
-            border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
-            border.width: d.checked ? 0 : 1
-            radius: 4
-            color:{
-                if(!enabled){
-                    return disableColor
-                }
-                if(d.checked){
-                    if(pressed){
-                        return pressedColor
-                    }
-                }
-                return hovered ? hoverColor :normalColor
+    background: FluControlBackground{
+        implicitWidth: 30
+        implicitHeight: 30
+        radius: 4
+        border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1)
+        border.width: d.checked ? 0 : 1
+        color:{
+            if(!enabled){
+                return disableColor
             }
+            if(d.checked){
+                if(pressed){
+                    return pressedColor
+                }
+            }
+            return hovered ? hoverColor :normalColor
         }
-        Rectangle{
-            id:rect_back
-            width: parent.width  * control.progress
-            height: control.progress === 1 ? background.height : 3
-            visible: !d.checked
-            color: FluTheme.primaryColor
-            anchors.bottom: parent.bottom
-            Behavior on height{
-                enabled: control.progress !== 0
-                SequentialAnimation {
-                    PauseAnimation {
-                        duration: FluTheme.animationEnabled ? 167 : 0
-                    }
-                    NumberAnimation{
-                        duration: FluTheme.animationEnabled ? 167 : 0
-                        from: 3
-                        to: background.height
+        FluClip{
+            anchors.fill: parent
+            radius: [4,4,4,4]
+            Rectangle{
+                id:rect_back
+                width: parent.width  * control.progress
+                height: control.progress === 1 ? background.height : 3
+                visible: !d.checked
+                color: FluTheme.primaryColor
+                anchors.bottom: parent.bottom
+                Behavior on height{
+                    enabled: control.progress !== 0
+                    SequentialAnimation {
+                        PauseAnimation {
+                            duration: FluTheme.animationEnabled ? 167 : 0
+                        }
+                        NumberAnimation{
+                            duration: FluTheme.animationEnabled ? 167 : 0
+                            from: 3
+                            to: background.height
+                        }
                     }
                 }
-            }
-            Behavior on width{
-                NumberAnimation{
-                    duration: 167
+                Behavior on width{
+                    NumberAnimation{
+                        duration: 167
+                    }
                 }
             }
         }
diff --git a/src/Qt5/imports/FluentUI/Controls/FluSpinBox.qml b/src/Qt5/imports/FluentUI/Controls/FluSpinBox.qml
index 1eb8627d..299fb1ab 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluSpinBox.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluSpinBox.qml
@@ -39,7 +39,7 @@ T.SpinBox {
             }
             return normalColor
         }
-        selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+        selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
         selectedTextColor: color
         horizontalAlignment: Qt.AlignHCenter
         verticalAlignment: Qt.AlignVCenter
diff --git a/src/Qt5/imports/FluentUI/Controls/FluTableView.qml b/src/Qt5/imports/FluentUI/Controls/FluTableView.qml
index 2a625716..68891d97 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluTableView.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluTableView.qml
@@ -15,7 +15,7 @@ Rectangle {
     property bool horizonalHeaderVisible: true
     property bool verticalHeaderVisible: true
     property color selectedBorderColor: FluTheme.primaryColor
-    property color selectedColor: FluTools.colorAlpha(FluTheme.primaryColor,0.3)
+    property color selectedColor: FluTools.withOpacity(FluTheme.primaryColor,0.3)
     id:control
     color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     onColumnSourceChanged: {
diff --git a/src/Qt5/imports/FluentUI/Controls/FluTextBox.qml b/src/Qt5/imports/FluentUI/Controls/FluTextBox.qml
index 52dcec1b..6564e7fa 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluTextBox.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluTextBox.qml
@@ -25,7 +25,7 @@ TextField{
     }
     font:FluTextStyle.Body
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     selectedTextColor: color
     placeholderTextColor: {
         if(!enabled){
diff --git a/src/Qt5/imports/FluentUI/Controls/FluTextBoxBackground.qml b/src/Qt5/imports/FluentUI/Controls/FluTextBoxBackground.qml
index b25f99c0..bc8fc365 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluTextBoxBackground.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluTextBoxBackground.qml
@@ -2,55 +2,36 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import FluentUI 1.0
 
-FluClip{
+FluControlBackground{
     property Item inputItem
-    property int borderWidth: 1
     id:control
-    radius: [4,4,4,4]
-    Rectangle{
-        radius: 4
-        anchors.fill: parent
-        color: {
-            if(inputItem && inputItem.disabled){
-                return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
-            }
-            if(inputItem && inputItem.activeFocus){
-                return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
-            }
-            if(inputItem && inputItem.hovered){
-                return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-            }
-            return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
+    color: {
+        if(inputItem && inputItem.disabled){
+            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
         }
-        border.width: control.borderWidth
-        border.color: {
-            if(inputItem && inputItem.disabled){
-                return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
-            }
-            return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
+        if(inputItem && inputItem.activeFocus){
+            return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
         }
+        if(inputItem && inputItem.hovered){
+            return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+        }
+        return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
     }
-    Rectangle{
-        width: parent.width
-        height: inputItem && inputItem.activeFocus ? 2 : 1
-        anchors.bottom: parent.bottom
-        visible: !(inputItem && inputItem.disabled)
-        color: {
-            if(inputItem && inputItem.activeFocus){
-                return FluTheme.primaryColor
-            }
-            if(FluTheme.dark){
-                return Qt.rgba(166/255,166/255,166/255,1)
-            }else{
-                return Qt.rgba(134/255,134/255,134/255,1)
-            }
-        }
-        Behavior on height{
-            enabled: FluTheme.animationEnabled
-            NumberAnimation{
-                duration: 83
-                easing.type: Easing.OutCubic
+    border.width: 1
+    gradient: Gradient {
+        GradientStop { position: 0.0; color: d.startColor }
+        GradientStop { position: 0.92; color: d.startColor }
+        GradientStop { position: 1.0; color: d.endColor }
+    }
+    bottomMargin: inputItem && inputItem.activeFocus ? 2 : 1
+    QtObject{
+        id:d
+        property color startColor: FluTheme.dark ? Qt.rgba(23/255,23/255,23/255,1) : Qt.rgba(232/255,232/255,232/255,1)
+        property color endColor: {
+            if(!control.enabled){
+                return d.startColor
             }
+            return inputItem && inputItem.activeFocus ? FluTheme.primaryColor : FluTheme.dark ? Qt.rgba(123/255,123/255,123/255,1) : Qt.rgba(132/255,132/255,132/255,1)
         }
     }
 }
diff --git a/src/Qt5/imports/FluentUI/Controls/FluTextButton.qml b/src/Qt5/imports/FluentUI/Controls/FluTextButton.qml
index 5d07ad90..3b03a457 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluTextButton.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluTextButton.qml
@@ -28,8 +28,8 @@ Button {
     enabled: !disabled
     font:FluTextStyle.Body
     background: Rectangle{
-        implicitWidth: 28
-        implicitHeight: 28
+        implicitWidth: 30
+        implicitHeight: 30
         radius: 4
         color: {
             if(!enabled){
diff --git a/src/Qt5/imports/FluentUI/Controls/FluToggleButton.qml b/src/Qt5/imports/FluentUI/Controls/FluToggleButton.qml
index 27c5a505..06242d0b 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluToggleButton.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluToggleButton.qml
@@ -23,7 +23,7 @@ Button {
         if(checked){
             return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
         }else{
-            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
+            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(251/255,251/255,251/255,1)
         }
     }
     property var clickListener : function(){
@@ -39,52 +39,57 @@ Button {
     enabled: !disabled
     verticalPadding: 0
     horizontalPadding:12
-    onCheckableChanged: {
-        if(checkable){
-            checkable = false
-        }
-    }
     onClicked: clickListener()
-    background: Rectangle{
-        implicitWidth: 28
-        implicitHeight: 28
+    background: FluControlBackground{
+        implicitWidth: 30
+        implicitHeight: 30
         radius: 4
         FluFocusRectangle{
             visible: control.activeFocus
             radius:4
         }
-        gradient: Gradient {
-            GradientStop { position: 0.33; color: control.enabled ? control.normalColor : Qt.rgba(0,0,0,0) }
-            GradientStop { position: 1.0; color: control.enabled ? Qt.darker(control.normalColor,1.3) : Qt.rgba(0,0,0,0) }
-        }
-        Rectangle{
-            radius: parent.radius
-            anchors{
-                fill: parent
-                topMargin: checked && enabled ? 0 : 0
-                leftMargin: checked && enabled ? 1 : 0
-                rightMargin: checked && enabled ? 1 : 0
-                bottomMargin: checked && enabled ? 2 : 0
+        color:{
+            if(!enabled){
+                return disableColor
             }
-            color:{
-                if(!enabled){
-                    return disableColor
+            if(checked){
+                if(pressed){
+                    return pressedColor
                 }
-                if(checked){
-                    if(pressed){
-                        return pressedColor
-                    }
-                }
-                return hovered ? hoverColor :normalColor
+            }
+            return hovered ? hoverColor :normalColor
+        }
+        bottomMargin: {
+            if(checked){
+                return enabled ? 2 : 0
+            }else{
+                return 1
             }
         }
-        Rectangle{
-            color:"#00000000"
-            anchors.fill: parent
-            border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
-            border.width: checked ? 0 : 1
-            radius: parent.radius
+        border.width: {
+            if(checked){
+                return enabled ? 1 : 0
+            }else{
+                return 1
+            }
         }
+        shadow: {
+            if(checked){
+                return true
+            }else{
+                return enabled
+            }
+        }
+        border.color: {
+            if(checked){
+                return enabled ? Qt.darker(control.normalColor,1.2) : disableColor
+            }else{
+                return FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1)
+            }
+        }
+
+
+
     }
     contentItem: FluText {
         text: control.text
diff --git a/src/Qt5/imports/FluentUI/Controls/FluWindow.qml b/src/Qt5/imports/FluentUI/Controls/FluWindow.qml
index 6c959f43..4cfd90bb 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluWindow.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluWindow.qml
@@ -43,9 +43,9 @@ Window {
     property bool useSystemAppBar
     property color resizeBorderColor: {
         if(window.active){
-            return FluTheme.dark ? "#333333" : "#6E6E6E"
+            return FluTheme.dark ? Qt.rgba(51/255,51/255,51/255,1) : Qt.rgba(110/255,110/255,110/255,1)
         }
-        return FluTheme.dark ? "#3D3D3E" : "#A7A7A7"
+        return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(167/255,167/255,167/255,1)
     }
     property int resizeBorderWidth: 1
     property var closeListener: function(event){
diff --git a/src/Qt5/imports/fluentui.qrc b/src/Qt5/imports/fluentui.qrc
index aff88eb9..103c6152 100644
--- a/src/Qt5/imports/fluentui.qrc
+++ b/src/Qt5/imports/fluentui.qrc
@@ -109,5 +109,6 @@
         <file>FluentUI/Controls/FluFrame.qml</file>
         <file>FluentUI/Controls/FluSheet.qml</file>
         <file>FluentUI/Controls/FluGroupBox.qml</file>
+        <file>FluentUI/Controls/FluControlBackground.qml</file>
     </qresource>
 </RCC>
diff --git a/src/Qt6/imports/FluentUI/Controls/FluButton.qml b/src/Qt6/imports/FluentUI/Controls/FluButton.qml
index a50736c6..e968e000 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluButton.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluButton.qml
@@ -8,7 +8,7 @@ Button {
     property string contentDescription: ""
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
-    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
+    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color dividerColor: FluTheme.dark ? Qt.rgba(80/255,80/255,80/255,1) : Qt.rgba(233/255,233/255,233/255,1)
     property color textColor: {
         if(FluTheme.dark){
@@ -39,18 +39,18 @@ Button {
     horizontalPadding:12
     font:FluTextStyle.Body
     focusPolicy:Qt.TabFocus
-    background: Rectangle{
-        implicitWidth: 28
-        implicitHeight: 28
-        border.color: control.dividerColor
-        border.width: 1
+    background: FluControlBackground{
+        implicitWidth: 30
+        implicitHeight: 30
         radius: 4
-        color:{
+        color: {
             if(!enabled){
                 return disableColor
             }
             return hovered ? hoverColor :normalColor
         }
+        shadow: enabled
+        border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1)
         FluFocusRectangle{
             visible: control.activeFocus
             radius:4
diff --git a/src/Qt6/imports/FluentUI/Controls/FluComboBox.qml b/src/Qt6/imports/FluentUI/Controls/FluComboBox.qml
index 42eb8fa0..d78943b4 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluComboBox.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluComboBox.qml
@@ -45,7 +45,7 @@ T.ComboBox {
         topPadding: 6 - control.padding
         bottomPadding: 6 - control.padding
         renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-        selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+        selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
         selectedTextColor: color
         text: control.editable ? control.editText : control.displayText
         enabled: control.editable
diff --git a/src/Qt6/imports/FluentUI/Controls/FluCopyableText.qml b/src/Qt6/imports/FluentUI/Controls/FluCopyableText.qml
index 34c1fc7f..7d093294 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluCopyableText.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluCopyableText.qml
@@ -17,7 +17,7 @@ TextEdit {
     selectByMouse: true
     selectedTextColor: color
     bottomPadding: 0
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     font:FluTextStyle.Body
     onSelectedTextChanged: {
         control.forceActiveFocus()
diff --git a/src/Qt6/imports/FluentUI/Controls/FluDropDownButton.qml b/src/Qt6/imports/FluentUI/Controls/FluDropDownButton.qml
index 5e9f8c3d..537c1604 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluDropDownButton.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluDropDownButton.qml
@@ -4,75 +4,21 @@ import QtQuick.Controls.Basic
 import QtQuick.Window
 import FluentUI
 
-Button {
-    property bool disabled: false
-    property string contentDescription: ""
-    property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(246/255,246/255,246/255,1)
-    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
-    property color textColor: {
-        if(FluTheme.dark){
-            if(!enabled){
-                return Qt.rgba(131/255,131/255,131/255,1)
-            }
-            if(pressed){
-                return Qt.rgba(162/255,162/255,162/255,1)
-            }
-            return Qt.rgba(1,1,1,1)
-        }else{
-            if(!enabled){
-                return Qt.rgba(160/255,160/255,160/255,1)
-            }
-            if(pressed){
-                return Qt.rgba(96/255,96/255,96/255,1)
-            }
-            return Qt.rgba(0,0,0,1)
-        }
-    }
-    property var window : Window.window
-    default property alias contentData: menu.contentData
-    Accessible.role: Accessible.Button
-    Accessible.name: control.text
-    Accessible.description: contentDescription
-    Accessible.onPressAction: control.clicked()
+FluButton {
     id: control
+    default property alias contentData: menu.contentData
     rightPadding:35
-    enabled: !disabled
-    focusPolicy:Qt.TabFocus
     verticalPadding: 0
     horizontalPadding:12
-    background: Rectangle{
-        implicitWidth: 28
-        implicitHeight: 28
-        border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
-        border.width: 1
-        radius: 4
-        FluFocusRectangle{
-            visible: control.activeFocus
-            radius:8
+    FluIcon{
+        iconSource:FluentIcons.ChevronDown
+        iconSize: 15
+        anchors{
+            right: parent.right
+            rightMargin: 10
+            verticalCenter: parent.verticalCenter
         }
-        color:{
-            if(!enabled){
-                return disableColor
-            }
-            return hovered ? hoverColor :normalColor
-        }
-        FluIcon{
-            iconSource:FluentIcons.ChevronDown
-            iconSize: 15
-            anchors{
-                right: parent.right
-                rightMargin: 10
-                verticalCenter: parent.verticalCenter
-            }
-            iconColor:title.color
-        }
-    }
-    contentItem: FluText {
-        id:title
-        text: control.text
-        verticalAlignment: Text.AlignVCenter
-        color: control.textColor
+        iconColor:control.textColor
     }
     onClicked: {
         if(menu.count !==0){
diff --git a/src/Qt6/imports/FluentUI/Controls/FluExpander.qml b/src/Qt6/imports/FluentUI/Controls/FluExpander.qml
index 82b305a5..29c47de7 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluExpander.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluExpander.qml
@@ -26,8 +26,8 @@ Item {
         width: parent.width
         height: 45
         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)
+        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)
+        color: FluTheme.dark ? Window.active ?  Qt.rgba(28/255,28/255,28/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
         MouseArea{
             id:control_mouse
             anchors.fill: parent
diff --git a/src/Qt6/imports/FluentUI/Controls/FluFilledButton.qml b/src/Qt6/imports/FluentUI/Controls/FluFilledButton.qml
index b83505cf..4a092291 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluFilledButton.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluFilledButton.qml
@@ -30,37 +30,26 @@ Button {
     font:FluTextStyle.Body
     verticalPadding: 0
     horizontalPadding:12
-    background: Rectangle{
-        implicitWidth: 28
-        implicitHeight: 28
+    background: FluControlBackground{
+        implicitWidth: 30
+        implicitHeight: 30
         radius: 4
+        bottomMargin: enabled ? 2 : 0
+        border.width: enabled ? 1 : 0
+        border.color: enabled ? Qt.darker(control.normalColor,1.2) : disableColor
+        color:{
+            if(!enabled){
+                return disableColor
+            }
+            if(pressed){
+                return pressedColor
+            }
+            return hovered ? hoverColor :normalColor
+        }
         FluFocusRectangle{
             visible: control.visualFocus
             radius:4
         }
-        gradient: Gradient {
-            GradientStop { position: 0.33; color: control.enabled ? control.normalColor : Qt.rgba(0,0,0,0) }
-            GradientStop { position: 1.0; color: control.enabled ? Qt.darker(control.normalColor,1.3) : Qt.rgba(0,0,0,0) }
-        }
-        Rectangle{
-            radius: parent.radius
-            anchors{
-                fill: parent
-                topMargin: control.enabled ? 0 : 0
-                leftMargin: control.enabled ? 1 : 0
-                rightMargin: control.enabled ? 1 : 0
-                bottomMargin: control.enabled ? 2 : 0
-            }
-            color:{
-                if(!enabled){
-                    return disableColor
-                }
-                if(pressed){
-                    return pressedColor
-                }
-                return hovered ? hoverColor :normalColor
-            }
-        }
     }
     contentItem: FluText {
         text: control.text
diff --git a/src/Qt6/imports/FluentUI/Controls/FluFrame.qml b/src/Qt6/imports/FluentUI/Controls/FluFrame.qml
index a0b34c67..a7de935c 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluFrame.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluFrame.qml
@@ -17,6 +17,6 @@ T.Frame {
         id:d
         radius: 4
         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)
-        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)
+        color: FluTheme.dark ? Window.active ?  Qt.rgba(28/255,28/255,28/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     }
 }
diff --git a/src/Qt6/imports/FluentUI/Controls/FluMultilineTextBox.qml b/src/Qt6/imports/FluentUI/Controls/FluMultilineTextBox.qml
index 6d1c3649..a893e7dc 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluMultilineTextBox.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluMultilineTextBox.qml
@@ -26,7 +26,7 @@ TextArea{
     leftPadding: padding+4
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     selectedTextColor: color
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     placeholderTextColor: {
         if(!enabled){
             return placeholderDisableColor
diff --git a/src/Qt6/imports/FluentUI/Controls/FluPasswordBox.qml b/src/Qt6/imports/FluentUI/Controls/FluPasswordBox.qml
index e493a95c..e75ff1bb 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluPasswordBox.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluPasswordBox.qml
@@ -26,7 +26,7 @@ TextField{
     leftPadding: padding+4
     echoMode:btn_reveal.pressed ? TextField.Normal : TextField.Password
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     selectedTextColor: color
     placeholderTextColor: {
         if(!enabled){
diff --git a/src/Qt6/imports/FluentUI/Controls/FluProgressButton.qml b/src/Qt6/imports/FluentUI/Controls/FluProgressButton.qml
index b33a4d05..50faaf70 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluProgressButton.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluProgressButton.qml
@@ -3,14 +3,13 @@ import QtQuick.Controls
 import QtQuick.Controls.Basic
 import FluentUI
 
-Button {
+FluButton {
     property real progress
-    property bool disabled: false
-    property string contentDescription: ""
     QtObject{
         id:d
         property bool checked: (rect_back.height === background.height) && (progress === 1)
     }
+    id: control
     property color normalColor: {
         if(d.checked){
             return FluTheme.primaryColor
@@ -33,59 +32,50 @@ Button {
         }
     }
     property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
-    Accessible.role: Accessible.Button
-    Accessible.name: control.text
-    Accessible.description: contentDescription
-    Accessible.onPressAction: control.clicked()
-    focusPolicy:Qt.TabFocus
-    id: control
-    enabled: !disabled
-    verticalPadding: 0
-    horizontalPadding:12
-    background: FluClip{
-        implicitWidth: 28
-        implicitHeight: 28
-        radius: [4,4,4,4]
-        Rectangle{
-            anchors.fill: parent
-            border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
-            border.width: d.checked ? 0 : 1
-            radius: 4
-            color:{
-                if(!enabled){
-                    return disableColor
-                }
-                if(d.checked){
-                    if(pressed){
-                        return pressedColor
-                    }
-                }
-                return hovered ? hoverColor :normalColor
+    background: FluControlBackground{
+        implicitWidth: 30
+        implicitHeight: 30
+        radius: 4
+        border.color: FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1)
+        border.width: d.checked ? 0 : 1
+        color:{
+            if(!enabled){
+                return disableColor
             }
+            if(d.checked){
+                if(pressed){
+                    return pressedColor
+                }
+            }
+            return hovered ? hoverColor :normalColor
         }
-        Rectangle{
-            id:rect_back
-            width: parent.width  * control.progress
-            height: control.progress === 1 ? background.height : 3
-            visible: !d.checked
-            color: FluTheme.primaryColor
-            anchors.bottom: parent.bottom
-            Behavior on height{
-                enabled: control.progress !== 0
-                SequentialAnimation {
-                    PauseAnimation {
-                        duration: FluTheme.animationEnabled ? 167 : 0
-                    }
-                    NumberAnimation{
-                        duration: FluTheme.animationEnabled ? 167 : 0
-                        from: 3
-                        to: background.height
+        FluClip{
+            anchors.fill: parent
+            radius: [4,4,4,4]
+            Rectangle{
+                id:rect_back
+                width: parent.width  * control.progress
+                height: control.progress === 1 ? background.height : 3
+                visible: !d.checked
+                color: FluTheme.primaryColor
+                anchors.bottom: parent.bottom
+                Behavior on height{
+                    enabled: control.progress !== 0
+                    SequentialAnimation {
+                        PauseAnimation {
+                            duration: FluTheme.animationEnabled ? 167 : 0
+                        }
+                        NumberAnimation{
+                            duration: FluTheme.animationEnabled ? 167 : 0
+                            from: 3
+                            to: background.height
+                        }
                     }
                 }
-            }
-            Behavior on width{
-                NumberAnimation{
-                    duration: 167
+                Behavior on width{
+                    NumberAnimation{
+                        duration: 167
+                    }
                 }
             }
         }
diff --git a/src/Qt6/imports/FluentUI/Controls/FluSpinBox.qml b/src/Qt6/imports/FluentUI/Controls/FluSpinBox.qml
index ecf088c6..ea21bf97 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluSpinBox.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluSpinBox.qml
@@ -40,7 +40,7 @@ T.SpinBox {
             }
             return normalColor
         }
-        selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+        selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
         selectedTextColor: color
         horizontalAlignment: Qt.AlignHCenter
         verticalAlignment: Qt.AlignVCenter
diff --git a/src/Qt6/imports/FluentUI/Controls/FluTableView.qml b/src/Qt6/imports/FluentUI/Controls/FluTableView.qml
index 2d844315..4ff45c9e 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluTableView.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluTableView.qml
@@ -16,7 +16,7 @@ Rectangle {
     property bool horizonalHeaderVisible: true
     property bool verticalHeaderVisible: true
     property color selectedBorderColor: FluTheme.primaryColor
-    property color selectedColor: FluTools.colorAlpha(FluTheme.primaryColor,0.3)
+    property color selectedColor: FluTools.withOpacity(FluTheme.primaryColor,0.3)
     id:control
     color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     onColumnSourceChanged: {
diff --git a/src/Qt6/imports/FluentUI/Controls/FluTextBox.qml b/src/Qt6/imports/FluentUI/Controls/FluTextBox.qml
index ab6e2636..3b335c4e 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluTextBox.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluTextBox.qml
@@ -26,7 +26,7 @@ TextField{
     }
     font:FluTextStyle.Body
     renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
-    selectionColor: FluTools.colorAlpha(FluTheme.primaryColor,0.5)
+    selectionColor: FluTools.withOpacity(FluTheme.primaryColor,0.5)
     selectedTextColor: color
     placeholderTextColor: {
         if(!enabled){
diff --git a/src/Qt6/imports/FluentUI/Controls/FluTextBoxBackground.qml b/src/Qt6/imports/FluentUI/Controls/FluTextBoxBackground.qml
index f60f0848..c362a97b 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluTextBoxBackground.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluTextBoxBackground.qml
@@ -2,55 +2,36 @@ import QtQuick
 import QtQuick.Controls
 import FluentUI
 
-FluClip{
+FluControlBackground{
     property Item inputItem
-    property int borderWidth: 1
     id:control
-    radius: [4,4,4,4]
-    Rectangle{
-        radius: 4
-        anchors.fill: parent
-        color: {
-            if(inputItem && inputItem.disabled){
-                return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
-            }
-            if(inputItem && inputItem.activeFocus){
-                return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
-            }
-            if(inputItem && inputItem.hovered){
-                return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-            }
-            return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
+    color: {
+        if(inputItem && inputItem.disabled){
+            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
         }
-        border.width: control.borderWidth
-        border.color: {
-            if(inputItem && inputItem.disabled){
-                return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
-            }
-            return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
+        if(inputItem && inputItem.activeFocus){
+            return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
         }
+        if(inputItem && inputItem.hovered){
+            return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+        }
+        return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
     }
-    Rectangle{
-        width: parent.width
-        height: inputItem && inputItem.activeFocus ? 2 : 1
-        anchors.bottom: parent.bottom
-        visible: !(inputItem && inputItem.disabled)
-        color: {
-            if(inputItem && inputItem.activeFocus){
-                return FluTheme.primaryColor
-            }
-            if(FluTheme.dark){
-                return Qt.rgba(166/255,166/255,166/255,1)
-            }else{
-                return Qt.rgba(134/255,134/255,134/255,1)
-            }
-        }
-        Behavior on height{
-            enabled: FluTheme.animationEnabled
-            NumberAnimation{
-                duration: 83
-                easing.type: Easing.OutCubic
+    border.width: 1
+    gradient: Gradient {
+        GradientStop { position: 0.0; color: d.startColor }
+        GradientStop { position: 0.92; color: d.startColor }
+        GradientStop { position: 1.0; color: d.endColor }
+    }
+    bottomMargin: inputItem && inputItem.activeFocus ? 2 : 1
+    QtObject{
+        id:d
+        property color startColor: FluTheme.dark ? Qt.rgba(23/255,23/255,23/255,1) : Qt.rgba(232/255,232/255,232/255,1)
+        property color endColor: {
+            if(!control.enabled){
+                return d.startColor
             }
+            return inputItem && inputItem.activeFocus ? FluTheme.primaryColor : FluTheme.dark ? Qt.rgba(123/255,123/255,123/255,1) : Qt.rgba(132/255,132/255,132/255,1)
         }
     }
 }
diff --git a/src/Qt6/imports/FluentUI/Controls/FluTextButton.qml b/src/Qt6/imports/FluentUI/Controls/FluTextButton.qml
index 68d98129..6a5ea107 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluTextButton.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluTextButton.qml
@@ -29,8 +29,8 @@ Button {
     enabled: !disabled
     font:FluTextStyle.Body
     background: Rectangle{
-        implicitWidth: 28
-        implicitHeight: 28
+        implicitWidth: 30
+        implicitHeight: 30
         radius: 4
         color: {
             if(!enabled){
diff --git a/src/Qt6/imports/FluentUI/Controls/FluToggleButton.qml b/src/Qt6/imports/FluentUI/Controls/FluToggleButton.qml
index 5dbb33d8..2f81b54c 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluToggleButton.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluToggleButton.qml
@@ -24,7 +24,7 @@ Button {
         if(checked){
             return FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
         }else{
-            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(244/255,244/255,244/255,1)
+            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(251/255,251/255,251/255,1)
         }
     }
     property var clickListener : function(){
@@ -41,46 +41,56 @@ Button {
     verticalPadding: 0
     horizontalPadding:12
     onClicked: clickListener()
-    background: Rectangle{
-        implicitWidth: 28
-        implicitHeight: 28
+    background: FluControlBackground{
+        implicitWidth: 30
+        implicitHeight: 30
         radius: 4
         FluFocusRectangle{
             visible: control.activeFocus
             radius:4
         }
-        gradient: Gradient {
-            GradientStop { position: 0.33; color: control.enabled ? control.normalColor : Qt.rgba(0,0,0,0) }
-            GradientStop { position: 1.0; color: control.enabled ? Qt.darker(control.normalColor,1.3) : Qt.rgba(0,0,0,0) }
-        }
-        Rectangle{
-            radius: parent.radius
-            anchors{
-                fill: parent
-                topMargin: checked && enabled ? 0 : 0
-                leftMargin: checked && enabled ? 1 : 0
-                rightMargin: checked && enabled ? 1 : 0
-                bottomMargin: checked && enabled ? 2 : 0
+        color:{
+            if(!enabled){
+                return disableColor
             }
-            color:{
-                if(!enabled){
-                    return disableColor
+            if(checked){
+                if(pressed){
+                    return pressedColor
                 }
-                if(checked){
-                    if(pressed){
-                        return pressedColor
-                    }
-                }
-                return hovered ? hoverColor :normalColor
+            }
+            return hovered ? hoverColor :normalColor
+        }
+        bottomMargin: {
+            if(checked){
+                return enabled ? 2 : 0
+            }else{
+                return 1
             }
         }
-        Rectangle{
-            color:"#00000000"
-            anchors.fill: parent
-            border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
-            border.width: checked ? 0 : 1
-            radius: parent.radius
+        border.width: {
+            if(checked){
+                return enabled ? 1 : 0
+            }else{
+                return 1
+            }
         }
+        shadow: {
+            if(checked){
+                return true
+            }else{
+                return enabled
+            }
+        }
+        border.color: {
+            if(checked){
+                return enabled ? Qt.darker(control.normalColor,1.2) : disableColor
+            }else{
+                return FluTheme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(206/255,206/255,206/255,1)
+            }
+        }
+
+
+
     }
     contentItem: FluText {
         text: control.text
diff --git a/src/Qt6/imports/FluentUI/Controls/FluWindow.qml b/src/Qt6/imports/FluentUI/Controls/FluWindow.qml
index 43438fe4..ea046575 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluWindow.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluWindow.qml
@@ -42,9 +42,9 @@ Window {
     property bool useSystemAppBar
     property color resizeBorderColor: {
         if(window.active){
-            return FluTheme.dark ? "#333333" : "#6E6E6E"
+            return FluTheme.dark ? Qt.rgba(51/255,51/255,51/255,1) : Qt.rgba(110/255,110/255,110/255,1)
         }
-        return FluTheme.dark ? "#3D3D3E" : "#A7A7A7"
+        return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(167/255,167/255,167/255,1)
     }
     property int resizeBorderWidth: 1
     property var closeListener: function(event){