diff --git a/example/qml/chart/T_BarChart.qml b/example/qml/chart/T_BarChart.qml
index f05525d0..a57b81ab 100644
--- a/example/qml/chart/T_BarChart.qml
+++ b/example/qml/chart/T_BarChart.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Bar Chart")
 
-    FluArea{
+    FluFrame{
         Layout.preferredWidth: 500
         Layout.preferredHeight: 370
         padding: 10
@@ -69,7 +69,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         width: 500
         height: 370
         padding: 10
diff --git a/example/qml/chart/T_BubbleChart.qml b/example/qml/chart/T_BubbleChart.qml
index 4d76b647..dcc84729 100644
--- a/example/qml/chart/T_BubbleChart.qml
+++ b/example/qml/chart/T_BubbleChart.qml
@@ -13,7 +13,7 @@ FluScrollablePage{
         return Math.random().toFixed(1);
     }
 
-    FluArea{
+    FluFrame{
         Layout.preferredWidth: 500
         Layout.preferredHeight: 370
         padding: 10
diff --git a/example/qml/chart/T_LineChart.qml b/example/qml/chart/T_LineChart.qml
index 2c6f1fe7..88e92b3e 100644
--- a/example/qml/chart/T_LineChart.qml
+++ b/example/qml/chart/T_LineChart.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Line Chart")
 
-    FluArea{
+    FluFrame{
         Layout.preferredWidth: 500
         Layout.preferredHeight: 370
         padding: 10
diff --git a/example/qml/chart/T_PieChart.qml b/example/qml/chart/T_PieChart.qml
index cea752f9..0dba15e5 100644
--- a/example/qml/chart/T_PieChart.qml
+++ b/example/qml/chart/T_PieChart.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Pie Chart")
 
-    FluArea{
+    FluFrame{
         Layout.preferredWidth: 500
         Layout.preferredHeight: 370
         padding: 10
@@ -50,7 +50,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.preferredWidth: 500
         Layout.preferredHeight: 370
         padding: 10
diff --git a/example/qml/chart/T_PolarAreaChart.qml b/example/qml/chart/T_PolarAreaChart.qml
index af711a04..1889e281 100644
--- a/example/qml/chart/T_PolarAreaChart.qml
+++ b/example/qml/chart/T_PolarAreaChart.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Polar Area Chart")
 
-    FluArea{
+    FluFrame{
         Layout.preferredWidth: 500
         Layout.preferredHeight: 370
         padding: 10
diff --git a/example/qml/chart/T_RadarChart.qml b/example/qml/chart/T_RadarChart.qml
index c870e4fa..03e1ad8b 100644
--- a/example/qml/chart/T_RadarChart.qml
+++ b/example/qml/chart/T_RadarChart.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Radar Chart")
 
-    FluArea{
+    FluFrame{
         Layout.preferredWidth: 500
         Layout.preferredHeight: 370
         padding: 10
diff --git a/example/qml/chart/T_ScatterChart.qml b/example/qml/chart/T_ScatterChart.qml
index 12dd0918..4b29ebb4 100644
--- a/example/qml/chart/T_ScatterChart.qml
+++ b/example/qml/chart/T_ScatterChart.qml
@@ -13,7 +13,7 @@ FluScrollablePage{
         return Math.random().toFixed(1);
     }
 
-    FluArea{
+    FluFrame{
         Layout.preferredWidth: 500
         Layout.preferredHeight: 370
         padding: 10
diff --git a/example/qml/page/T_Acrylic.qml b/example/qml/page/T_Acrylic.qml
index 66b2e03b..7d6297c1 100644
--- a/example/qml/page/T_Acrylic.qml
+++ b/example/qml/page/T_Acrylic.qml
@@ -41,7 +41,7 @@ FluScrollablePage{
             value: 32
         }
     }
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 1200/4+20
         padding: 10
diff --git a/example/qml/page/T_Badge.qml b/example/qml/page/T_Badge.qml
index 868d6a33..6a2db9c5 100644
--- a/example/qml/page/T_Badge.qml
+++ b/example/qml/page/T_Badge.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Badge")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: 120
         padding: 10
diff --git a/example/qml/page/T_BreadcrumbBar.qml b/example/qml/page/T_BreadcrumbBar.qml
index 9a20f767..54c3d459 100644
--- a/example/qml/page/T_BreadcrumbBar.qml
+++ b/example/qml/page/T_BreadcrumbBar.qml
@@ -18,7 +18,7 @@ FluScrollablePage{
         breadcrumb_2.items = items
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         padding: 10
@@ -35,7 +35,7 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 100
         padding: 10
diff --git a/example/qml/page/T_Buttons.qml b/example/qml/page/T_Buttons.qml
index e760e866..eee6ee32 100644
--- a/example/qml/page/T_Buttons.qml
+++ b/example/qml/page/T_Buttons.qml
@@ -13,7 +13,7 @@ FluScrollablePage{
         text: qsTr("Support the Tab key to switch focus, and the Space key to perform click events")
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         Layout.topMargin: 10
@@ -50,7 +50,7 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         padding: 10
@@ -87,7 +87,7 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         Layout.topMargin: 20
@@ -124,7 +124,7 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         Layout.topMargin: 20
@@ -171,7 +171,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         Layout.topMargin: 20
@@ -210,7 +210,7 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         Layout.topMargin: 20
@@ -250,7 +250,7 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: layout_icon_button.height + 30
         padding: 10
@@ -331,7 +331,7 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         padding: 10
@@ -388,7 +388,7 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 100
         padding: 10
diff --git a/example/qml/page/T_CalendarPicker.qml b/example/qml/page/T_CalendarPicker.qml
index 2dd9e22d..d5fe5045 100644
--- a/example/qml/page/T_CalendarPicker.qml
+++ b/example/qml/page/T_CalendarPicker.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("CalendarPicker")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 80
         padding: 10
diff --git a/example/qml/page/T_Carousel.qml b/example/qml/page/T_Carousel.qml
index 012cdb11..72e2d471 100644
--- a/example/qml/page/T_Carousel.qml
+++ b/example/qml/page/T_Carousel.qml
@@ -22,7 +22,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: 370
         padding: 10
@@ -61,7 +61,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: 340
         padding: 10
diff --git a/example/qml/page/T_CheckBox.qml b/example/qml/page/T_CheckBox.qml
index 797a2328..2c437743 100644
--- a/example/qml/page/T_CheckBox.qml
+++ b/example/qml/page/T_CheckBox.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("CheckBox")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 72
         padding: 10
@@ -54,7 +54,7 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 72
         padding: 10
diff --git a/example/qml/page/T_Clip.qml b/example/qml/page/T_Clip.qml
index f54e33be..eb219bf3 100644
--- a/example/qml/page/T_Clip.qml
+++ b/example/qml/page/T_Clip.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Clip")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 380
         padding: 10
diff --git a/example/qml/page/T_ColorPicker.qml b/example/qml/page/T_ColorPicker.qml
index 49c85977..8733f288 100644
--- a/example/qml/page/T_ColorPicker.qml
+++ b/example/qml/page/T_ColorPicker.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("ColorPicker")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 60
         padding: 10
diff --git a/example/qml/page/T_ComboBox.qml b/example/qml/page/T_ComboBox.qml
index 3d568224..c6009786 100644
--- a/example/qml/page/T_ComboBox.qml
+++ b/example/qml/page/T_ComboBox.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("ComboBox")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 80
         padding: 5
@@ -31,7 +31,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea {
+    FluFrame {
         Layout.fillWidth: true
         Layout.preferredHeight: 80
         padding: 5
@@ -55,7 +55,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: 80
         padding: 10
diff --git a/example/qml/page/T_DatePicker.qml b/example/qml/page/T_DatePicker.qml
index e0be770d..191d801d 100644
--- a/example/qml/page/T_DatePicker.qml
+++ b/example/qml/page/T_DatePicker.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("DatePicker")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 80
         padding: 10
@@ -37,7 +37,7 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         Layout.preferredHeight: 80
diff --git a/example/qml/page/T_Dialog.qml b/example/qml/page/T_Dialog.qml
index 325a0369..87a7caeb 100644
--- a/example/qml/page/T_Dialog.qml
+++ b/example/qml/page/T_Dialog.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Dialog")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         padding: 10
@@ -56,7 +56,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         padding: 10
@@ -113,7 +113,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 100
         padding: 10
diff --git a/example/qml/page/T_Expander.qml b/example/qml/page/T_Expander.qml
index e1765087..958e9bc0 100644
--- a/example/qml/page/T_Expander.qml
+++ b/example/qml/page/T_Expander.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Expander")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: layout_column.height+20
         padding: 10
diff --git a/example/qml/page/T_FlipView.qml b/example/qml/page/T_FlipView.qml
index 9d253ebb..1f9be912 100644
--- a/example/qml/page/T_FlipView.qml
+++ b/example/qml/page/T_FlipView.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("FlipView")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 340
         padding: 10
@@ -60,7 +60,7 @@ FluScrollablePage{
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         height: 340
         padding: 10
diff --git a/example/qml/page/T_Home.qml b/example/qml/page/T_Home.qml
index 40a746cf..aba7c4a8 100644
--- a/example/qml/page/T_Home.qml
+++ b/example/qml/page/T_Home.qml
@@ -178,7 +178,7 @@ FluScrollablePage{
             property string desc: modelData.extra.desc
             width: 320
             height: 120
-            FluArea{
+            FluFrame{
                 radius: 8
                 width: 300
                 height: 100
diff --git a/example/qml/page/T_Image.qml b/example/qml/page/T_Image.qml
index fd264081..264ff271 100644
--- a/example/qml/page/T_Image.qml
+++ b/example/qml/page/T_Image.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Image")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 260
         padding: 10
diff --git a/example/qml/page/T_InfoBar.qml b/example/qml/page/T_InfoBar.qml
index a1cf6648..52862494 100644
--- a/example/qml/page/T_InfoBar.qml
+++ b/example/qml/page/T_InfoBar.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("InfoBar")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 270
         padding: 10
diff --git a/example/qml/page/T_Menu.qml b/example/qml/page/T_Menu.qml
index 06e0aa73..c4c79470 100644
--- a/example/qml/page/T_Menu.qml
+++ b/example/qml/page/T_Menu.qml
@@ -47,7 +47,7 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 100
         padding: 10
@@ -98,7 +98,7 @@ menu.popup()
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 100
         padding: 10
diff --git a/example/qml/page/T_MultiWindow.qml b/example/qml/page/T_MultiWindow.qml
index aeb80d7e..237e27b7 100644
--- a/example/qml/page/T_MultiWindow.qml
+++ b/example/qml/page/T_MultiWindow.qml
@@ -21,7 +21,7 @@ FluScrollablePage{
 
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 86
         padding: 10
@@ -43,7 +43,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 86
         padding: 10
@@ -67,7 +67,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 86
         padding: 10
@@ -101,7 +101,7 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 100
         padding: 10
@@ -135,7 +135,7 @@ FluScrollablePage{
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 130
         padding: 10
diff --git a/example/qml/page/T_Network.qml b/example/qml/page/T_Network.qml
index 8757d81d..be66c3aa 100644
--- a/example/qml/page/T_Network.qml
+++ b/example/qml/page/T_Network.qml
@@ -532,7 +532,7 @@ FluContentPage{
         }
     }
 
-    FluArea{
+    FluFrame{
         anchors{
             top: layout_flick.top
             bottom: layout_flick.bottom
diff --git a/example/qml/page/T_Pagination.qml b/example/qml/page/T_Pagination.qml
index 14e19732..1c806480 100644
--- a/example/qml/page/T_Pagination.qml
+++ b/example/qml/page/T_Pagination.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Pagination")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 200
         padding: 10
diff --git a/example/qml/page/T_Pivot.qml b/example/qml/page/T_Pivot.qml
index 0eb68926..8f95b801 100644
--- a/example/qml/page/T_Pivot.qml
+++ b/example/qml/page/T_Pivot.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Pivot")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 400
         padding: 10
diff --git a/example/qml/page/T_Progress.qml b/example/qml/page/T_Progress.qml
index 78e55544..65395226 100644
--- a/example/qml/page/T_Progress.qml
+++ b/example/qml/page/T_Progress.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Progress")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 130
         padding: 10
@@ -41,7 +41,7 @@ FluProgressRing{
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         Layout.preferredHeight: 286
diff --git a/example/qml/page/T_RadioButton.qml b/example/qml/page/T_RadioButton.qml
index 55aa9083..2f08e329 100644
--- a/example/qml/page/T_RadioButton.qml
+++ b/example/qml/page/T_RadioButton.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("RadioButton")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         padding: 10
@@ -46,7 +46,7 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 100
         padding: 10
diff --git a/example/qml/page/T_RatingControl.qml b/example/qml/page/T_RatingControl.qml
index 5175c4ea..ad7d18a0 100644
--- a/example/qml/page/T_RatingControl.qml
+++ b/example/qml/page/T_RatingControl.qml
@@ -9,7 +9,7 @@ FluScrollablePage {
 
     title: qsTr("RatingControl")
 
-    FluArea {
+    FluFrame {
         Layout.fillWidth: true
         Layout.preferredHeight: 100
         padding: 10
diff --git a/example/qml/page/T_Rectangle.qml b/example/qml/page/T_Rectangle.qml
index 0c58967a..edd8d153 100644
--- a/example/qml/page/T_Rectangle.qml
+++ b/example/qml/page/T_Rectangle.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Rectangle")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 80
         padding: 10
diff --git a/example/qml/page/T_RemoteLoader.qml b/example/qml/page/T_RemoteLoader.qml
index 6d46e3f4..422c8e11 100644
--- a/example/qml/page/T_RemoteLoader.qml
+++ b/example/qml/page/T_RemoteLoader.qml
@@ -7,8 +7,9 @@ import "../component"
 
 FluPage{
     launchMode: FluPageType.SingleTop
+    header:Item{}
     FluRemoteLoader{
         anchors.fill: parent
-        source: "https://zhu-zichu.gitee.io/Qt5_T_RemoteLoader.qml"
+        source: "https://zhu-zichu.gitee.io/Qt_174_RemoteLoader.qml"
     }
 }
diff --git a/example/qml/page/T_Settings.qml b/example/qml/page/T_Settings.qml
index 41ecdfa6..c6913f5c 100644
--- a/example/qml/page/T_Settings.qml
+++ b/example/qml/page/T_Settings.qml
@@ -17,7 +17,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         Layout.preferredHeight: 60
@@ -42,7 +42,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 50
@@ -58,7 +58,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 50
@@ -85,7 +85,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 128
@@ -115,7 +115,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 160
@@ -155,7 +155,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         height: 80
diff --git a/example/qml/page/T_ShortcutPicker.qml b/example/qml/page/T_ShortcutPicker.qml
index 881a3f63..d82edeb3 100644
--- a/example/qml/page/T_ShortcutPicker.qml
+++ b/example/qml/page/T_ShortcutPicker.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("ShortcutPicker")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 100
         padding: 10
diff --git a/example/qml/page/T_Slider.qml b/example/qml/page/T_Slider.qml
index baa003f2..090c32d9 100644
--- a/example/qml/page/T_Slider.qml
+++ b/example/qml/page/T_Slider.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Slider")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 200
         padding: 10
@@ -33,7 +33,7 @@ FluScrollablePage{
     }
 
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 200
         Layout.topMargin: 20
diff --git a/example/qml/page/T_StatusLayout.qml b/example/qml/page/T_StatusLayout.qml
index 7e716755..bf5ffbf1 100644
--- a/example/qml/page/T_StatusLayout.qml
+++ b/example/qml/page/T_StatusLayout.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("StatusLayout")
 
-    FluArea{
+    FluFrame{
         id:layout_actions
         Layout.fillWidth: true
         Layout.preferredHeight: 50
@@ -52,7 +52,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 10
         Layout.preferredHeight: 380
diff --git a/example/qml/page/T_TabView.qml b/example/qml/page/T_TabView.qml
index 012d87e3..998a4a2d 100644
--- a/example/qml/page/T_TabView.qml
+++ b/example/qml/page/T_TabView.qml
@@ -29,7 +29,7 @@ FluScrollablePage{
         newTab()
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 50
         padding: 10
@@ -90,7 +90,7 @@ FluScrollablePage{
         }
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 15
         Layout.preferredHeight: 400
diff --git a/example/qml/page/T_TableView.qml b/example/qml/page/T_TableView.qml
index f3cc051f..4372033e 100644
--- a/example/qml/page/T_TableView.qml
+++ b/example/qml/page/T_TableView.qml
@@ -390,7 +390,7 @@ FluContentPage{
         }
     }
 
-    FluArea{
+    FluFrame{
         id:layout_controls
         anchors{
             left: parent.left
diff --git a/example/qml/page/T_Text.qml b/example/qml/page/T_Text.qml
index 1cf8508d..f8e819a1 100644
--- a/example/qml/page/T_Text.qml
+++ b/example/qml/page/T_Text.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("Text")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 60
         padding: 10
diff --git a/example/qml/page/T_TextBox.qml b/example/qml/page/T_TextBox.qml
index 2bfd322d..357720d2 100644
--- a/example/qml/page/T_TextBox.qml
+++ b/example/qml/page/T_TextBox.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("TextBox")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         padding: 10
@@ -41,7 +41,7 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         padding: 10
@@ -72,7 +72,7 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 36+multiine_textbox.height
         padding: 10
@@ -105,7 +105,7 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         padding: 10
@@ -136,7 +136,7 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         padding: 10
diff --git a/example/qml/page/T_Theme.qml b/example/qml/page/T_Theme.qml
index cbb4d269..a7e4a01d 100644
--- a/example/qml/page/T_Theme.qml
+++ b/example/qml/page/T_Theme.qml
@@ -11,7 +11,7 @@ FluScrollablePage{
     id: root
     title: qsTr("Theme")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 340
         padding: 10
diff --git a/example/qml/page/T_TimePicker.qml b/example/qml/page/T_TimePicker.qml
index df5261cf..0525bb97 100644
--- a/example/qml/page/T_TimePicker.qml
+++ b/example/qml/page/T_TimePicker.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("TimePicker")
     launchMode: FluPageType.SingleInstance
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 80
         padding: 10
@@ -48,7 +48,7 @@ FluScrollablePage{
 }'
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         Layout.preferredHeight: 80
diff --git a/example/qml/page/T_ToggleSwitch.qml b/example/qml/page/T_ToggleSwitch.qml
index 3ed7f08e..e2ca9428 100644
--- a/example/qml/page/T_ToggleSwitch.qml
+++ b/example/qml/page/T_ToggleSwitch.qml
@@ -9,7 +9,7 @@ FluScrollablePage{
 
     title: qsTr("ToggleSwitch")
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 68
         padding: 10
diff --git a/example/qml/page/T_Tooltip.qml b/example/qml/page/T_Tooltip.qml
index dd68dbd4..87cc666f 100644
--- a/example/qml/page/T_Tooltip.qml
+++ b/example/qml/page/T_Tooltip.qml
@@ -13,7 +13,7 @@ FluScrollablePage{
         text: qsTr("Hover over Tultip and it pops up")
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         Layout.preferredHeight: 68
@@ -52,7 +52,7 @@ FluScrollablePage{
 '
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.topMargin: 20
         Layout.preferredHeight: 68
diff --git a/example/qml/page/T_Tour.qml b/example/qml/page/T_Tour.qml
index 2ac22d19..e87e5827 100644
--- a/example/qml/page/T_Tour.qml
+++ b/example/qml/page/T_Tour.qml
@@ -18,7 +18,7 @@ FluScrollablePage{
         ]
     }
 
-    FluArea{
+    FluFrame{
         Layout.fillWidth: true
         Layout.preferredHeight: 130
         padding: 10
diff --git a/example/qml/page/T_TreeView.qml b/example/qml/page/T_TreeView.qml
index 6bd31dba..df7d47f2 100644
--- a/example/qml/page/T_TreeView.qml
+++ b/example/qml/page/T_TreeView.qml
@@ -102,7 +102,7 @@ FluContentPage {
             }
         }
     }
-    FluArea{
+    FluFrame{
         anchors{
             left: layout_column.right
             top: parent.top
diff --git a/example/qml/page/T_Typography.qml b/example/qml/page/T_Typography.qml
index 094335f0..0260c7d9 100644
--- a/example/qml/page/T_Typography.qml
+++ b/example/qml/page/T_Typography.qml
@@ -10,7 +10,7 @@ FluContentPage {
     title: qsTr("Typography")
     rightPadding: 10
 
-    FluArea{
+    FluFrame{
         anchors{
             top:parent.top
             left: parent.left
diff --git a/example/qml/page/T_Watermark.qml b/example/qml/page/T_Watermark.qml
index dfb2abba..278bd513 100644
--- a/example/qml/page/T_Watermark.qml
+++ b/example/qml/page/T_Watermark.qml
@@ -9,7 +9,7 @@ FluContentPage{
 
     title: qsTr("Watermark")
 
-    FluArea{
+    FluFrame{
         anchors.fill: parent
 
         ColumnLayout{
diff --git a/example/qml/window/HotloadWindow.qml b/example/qml/window/HotloadWindow.qml
index 8d77d8db..84ff9977 100644
--- a/example/qml/window/HotloadWindow.qml
+++ b/example/qml/window/HotloadWindow.qml
@@ -20,7 +20,7 @@ FluWindow {
             loader.reload()
         }
     }
-    FluArea{
+    FluFrame{
         anchors.fill: parent
         FluRemoteLoader{
             id:loader
diff --git a/src/FluentUI.cpp b/src/FluentUI.cpp
index 65760117..835d1164 100644
--- a/src/FluentUI.cpp
+++ b/src/FluentUI.cpp
@@ -36,7 +36,7 @@ void FluentUI::registerTypes(const char *uri){
 
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluAcrylic.qml"),uri,major,minor,"FluAcrylic");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluAppBar.qml"),uri,major,minor,"FluAppBar");
-    qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluArea.qml"),uri,major,minor,"FluArea");
+    qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluFrame.qml"),uri,major,minor,"FluFrame");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluAutoSuggestBox.qml"),uri,major,minor,"FluAutoSuggestBox");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluBadge.qml"),uri,major,minor,"FluBadge");
     qmlRegisterType(QUrl("qrc:/qt/qml/FluentUI/Controls/FluBreadcrumbBar.qml"),uri,major,minor,"FluBreadcrumbBar");
diff --git a/src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml b/src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml
index 31c599c6..91999550 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluCalendarPicker.qml
@@ -76,7 +76,7 @@ FluButton {
         }
         contentItem: Item{
             clip: true
-            FluArea{
+            FluFrame{
                 id:container
                 width: 300
                 height: 360
diff --git a/src/Qt5/imports/FluentUI/Controls/FluArea.qml b/src/Qt5/imports/FluentUI/Controls/FluFrame.qml
similarity index 97%
rename from src/Qt5/imports/FluentUI/Controls/FluArea.qml
rename to src/Qt5/imports/FluentUI/Controls/FluFrame.qml
index 3701a15f..d61be100 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluArea.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluFrame.qml
@@ -1,4 +1,5 @@
 import QtQuick 2.15
+import QtQuick.Window 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Controls.impl 2.15
 import QtQuick.Templates 2.15 as T
diff --git a/src/Qt5/imports/FluentUI/Controls/FluStatusLayout.qml b/src/Qt5/imports/FluentUI/Controls/FluStatusLayout.qml
index 068325db..12d70a22 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluStatusLayout.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluStatusLayout.qml
@@ -42,7 +42,7 @@ Item{
     }
     Component{
         id:com_loading
-        FluArea{
+        FluFrame{
             padding: 0
             border.width: 0
             radius: 0
@@ -62,7 +62,7 @@ Item{
     }
     Component {
         id:com_empty
-        FluArea{
+        FluFrame{
             padding: 0
             border.width: 0
             radius: 0
@@ -79,7 +79,7 @@ Item{
     }
     Component{
         id:com_error
-        FluArea{
+        FluFrame{
             padding: 0
             border.width: 0
             radius: 0
diff --git a/src/Qt5/imports/FluentUI/Controls/FluTour.qml b/src/Qt5/imports/FluentUI/Controls/FluTour.qml
index 1eeef797..a0b3e072 100644
--- a/src/Qt5/imports/FluentUI/Controls/FluTour.qml
+++ b/src/Qt5/imports/FluentUI/Controls/FluTour.qml
@@ -124,7 +124,7 @@ Popup{
             ctx.fill()
         }
     }
-    FluArea{
+    FluFrame{
         id: layout_panne
         radius: 5
         width: 500
diff --git a/src/Qt5/imports/fluentui.qrc b/src/Qt5/imports/fluentui.qrc
index 8cdca59f..4e46ee11 100644
--- a/src/Qt5/imports/fluentui.qrc
+++ b/src/Qt5/imports/fluentui.qrc
@@ -5,7 +5,6 @@
         <file>FluentUI/Font/Segoe_Fluent_Icons.ttf</file>
         <file>FluentUI/Controls/FluAcrylic.qml</file>
         <file>FluentUI/Controls/FluAppBar.qml</file>
-        <file>FluentUI/Controls/FluArea.qml</file>
         <file>FluentUI/Controls/FluAutoSuggestBox.qml</file>
         <file>FluentUI/Controls/FluBadge.qml</file>
         <file>FluentUI/Controls/FluBreadcrumbBar.qml</file>
@@ -107,5 +106,6 @@
         <file>FluentUI/Controls/qmldir</file>
         <file>FluentUI/Controls/FluEvent.qml</file>
         <file>FluentUI/Controls/FluEventBus.qml</file>
+        <file>FluentUI/Controls/FluFrame.qml</file>
     </qresource>
 </RCC>
diff --git a/src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml b/src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml
index 4a2b4327..15f85925 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluCalendarPicker.qml
@@ -75,7 +75,7 @@ FluButton {
         }
         contentItem: Item{
             clip: true
-            FluArea{
+            FluFrame{
                 id:container
                 width: 300
                 height: 360
diff --git a/src/Qt6/imports/FluentUI/Controls/FluArea.qml b/src/Qt6/imports/FluentUI/Controls/FluFrame.qml
similarity index 100%
rename from src/Qt6/imports/FluentUI/Controls/FluArea.qml
rename to src/Qt6/imports/FluentUI/Controls/FluFrame.qml
diff --git a/src/Qt6/imports/FluentUI/Controls/FluStatusLayout.qml b/src/Qt6/imports/FluentUI/Controls/FluStatusLayout.qml
index 27fc5c4f..e5df19bf 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluStatusLayout.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluStatusLayout.qml
@@ -41,7 +41,7 @@ Item{
     }
     Component{
         id:com_loading
-        FluArea{
+        FluFrame{
             padding: 0
             border.width: 0
             radius: 0
@@ -61,7 +61,7 @@ Item{
     }
     Component {
         id:com_empty
-        FluArea{
+        FluFrame{
             padding: 0
             border.width: 0
             radius: 0
@@ -78,7 +78,7 @@ Item{
     }
     Component{
         id:com_error
-        FluArea{
+        FluFrame{
             padding: 0
             border.width: 0
             radius: 0
diff --git a/src/Qt6/imports/FluentUI/Controls/FluTour.qml b/src/Qt6/imports/FluentUI/Controls/FluTour.qml
index 6de19876..46c3bbb7 100644
--- a/src/Qt6/imports/FluentUI/Controls/FluTour.qml
+++ b/src/Qt6/imports/FluentUI/Controls/FluTour.qml
@@ -124,7 +124,7 @@ Popup{
             ctx.fill()
         }
     }
-    FluArea{
+    FluFrame{
         id: layout_panne
         radius: 5
         width: 500