diff --git a/example/T_Home.qml b/example/T_Home.qml
new file mode 100644
index 0000000..cddd110
--- /dev/null
+++ b/example/T_Home.qml
@@ -0,0 +1,98 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtQuick.Controls 2.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+
+    leftPadding:10
+    rightPadding:0
+    bottomPadding:20
+
+    ListModel{
+        id:model_header
+        ListElement{
+            icon:"qrc:/res/image/ic_home_github.png"
+            title:"FluentUI GitHub"
+            desc:"The latest Windows nativecontrols and styles for your applications."
+        }
+
+    }
+
+    Item{
+        Layout.fillWidth: true
+        height: 320
+        Image {
+            fillMode:Image.PreserveAspectCrop
+            anchors.fill: parent
+            verticalAlignment: Qt.AlignTop
+            source: "qrc:/res/image/bg_home_header.png"
+        }
+        Rectangle{
+            anchors.fill: parent
+            gradient: Gradient{
+                GradientStop { position: 0.8; color: FluTheme.isDark ? Qt.rgba(0,0,0,0) : Qt.rgba(1,1,1,0) }
+                GradientStop { position: 1.0; color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) }
+            }
+        }
+        FluText{
+            text:"FluentUI Gallery"
+            fontStyle: FluText.TitleLarge
+            anchors{
+                top: parent.top
+                left: parent.left
+                topMargin: 60
+                leftMargin: 20
+            }
+        }
+
+        ListView{
+            anchors{
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
+            orientation: ListView.Horizontal
+            boundsBehavior: ListView.StopAtBounds
+            height: 200
+            model: model_header
+            header: Item{height: 10;width: 10}
+            footer: Item{height: 10;width: 10}
+            ScrollBar.horizontal: FluScrollBar{
+                id: scrollbar_header
+            }
+            clip: false
+            delegate:Item{
+                width: 180
+                height: 200
+                FluArea{
+                    radius: 8
+                    width: 160
+                    height: 180
+                    anchors.centerIn: parent
+                    color:{
+                        if(item_mouse.containsMouse){
+                            return FluTheme.dark ? Qt.lighter(Qt.rgba(0,0,0,1),1.05)  : Qt.darker(Qt.rgba(1,1,1,1),1.05)
+                        }
+                        return FluTheme.dark ? Qt.rgba(0,0,0,0.98)  : Qt.rgba(1,1,1,0.98)
+                    }
+                    MouseArea{
+                        id:item_mouse
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        onWheel: {
+                            if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
+                            else scrollbar_header.increase()
+                        }
+                    }
+                }
+            }
+        }
+
+
+    }
+
+
+}
diff --git a/example/res/image/bg_home_header.png b/example/res/image/bg_home_header.png
new file mode 100644
index 0000000..d260a7c
Binary files /dev/null and b/example/res/image/bg_home_header.png differ
diff --git a/example/res/image/ic_home_github.png b/example/res/image/ic_home_github.png
new file mode 100644
index 0000000..059c42c
Binary files /dev/null and b/example/res/image/ic_home_github.png differ