diff --git a/example/MainPage.qml b/example/MainPage.qml
index ededab23..1aa8a4b1 100644
--- a/example/MainPage.qml
+++ b/example/MainPage.qml
@@ -8,8 +8,8 @@ import FluentUI 1.0
 
 FluWindow {
     id:rootwindow
-    width: 800
-    height: 600
+    width: 860
+    height: 680
     title: "FluentUI"
     minimumWidth: 500
     minimumHeight: 400
@@ -59,6 +59,13 @@ FluWindow {
             }
         }
 
+        FluPaneItem{
+            title:"TimePicker"
+            onTap:{
+                nav_view.push("qrc:/T_TimePicker.qml")
+            }
+        }
+
         FluPaneItemHeader{
             title:"Surface"
         }
diff --git a/example/T_TimePicker.qml b/example/T_TimePicker.qml
new file mode 100644
index 00000000..05a2684b
--- /dev/null
+++ b/example/T_TimePicker.qml
@@ -0,0 +1,61 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import FluentUI 1.0
+
+FluScrollablePage{
+
+    title:"TimePicker"
+
+
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
+
+        ColumnLayout{
+
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+
+            FluText{
+                text:"hourFormat=FluTimePicker.H"
+            }
+
+            FluTimePicker{
+            }
+
+        }
+    }
+
+
+    FluArea{
+        width: parent.width
+        Layout.topMargin: 20
+        height: 80
+        paddings: 10
+
+        ColumnLayout{
+
+            anchors{
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+            }
+
+            FluText{
+                text:"hourFormat=FluTimePicker.HH"
+            }
+
+            FluTimePicker{
+                hourFormat:FluTimePicker.HH
+            }
+
+        }
+    }
+
+
+}
diff --git a/example/qml.qrc b/example/qml.qrc
index a985b5c3..47389272 100644
--- a/example/qml.qrc
+++ b/example/qml.qrc
@@ -30,5 +30,6 @@
         <file>T_TreeView.qml</file>
         <file>T_Expander.qml</file>
         <file>MainPage.qml</file>
+        <file>T_TimePicker.qml</file>
     </qresource>
 </RCC>