diff --git a/src/controls/FluCarousel.qml b/src/controls/FluCarousel.qml
index 7f26307..475bd88 100644
--- a/src/controls/FluCarousel.qml
+++ b/src/controls/FluCarousel.qml
@@ -1,100 +1,161 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+import FluentUI 1.0
 
-Rectangle {
+Item {
 
 
     id:control
 
-    property int position: 1
-
     property bool flagXChanged: true
+    property int radius : 5
+    property int loopTime: 2000
+    property bool showIndicator: true
+
 
     width: 400
     height: 300
 
-
     ListModel{
         id:content_model
     }
 
-    ListView{
-        id:list_view
+    FluRectangle{
         anchors.fill: parent
-        snapMode: ListView.SnapOneItem
-        clip: true
-        boundsBehavior: ListView.StopAtBounds
-        model:content_model
-        delegate: Rectangle{
-            width: ListView.view.width
-            height: ListView.view.height
-            color:model.color
+        radius: [control.radius,control.radius,control.radius,control.radius]
+        FluShadow{
+            radius:control.radius
+        }
+        ListView{
+            id:list_view
+            anchors.fill: parent
+            snapMode: ListView.SnapOneItem
+            clip: true
+            boundsBehavior: ListView.StopAtBounds
+            model:content_model
+            maximumFlickVelocity: 4 * (list_view.orientation ===
+                                       Qt.Horizontal ? width : height)
+            delegate: Item{
+                width: ListView.view.width
+                height: ListView.view.height
 
-            property int displayIndex: {
-                if(index === 0)
-                    return content_model.count-3
-                if(index === content_model.count-1)
-                    return 0
-                return index-1
-            }
-
-            Text{
-                color:"red"
-                text: displayIndex
-                font.pixelSize: 32
-                anchors.centerIn: parent
-            }
-
-        }
-        Timer{
-            id:tiemr
-            interval: 100
-            onTriggered: {
-                control.position = list_view.contentX/list_view.width
-            }
-        }
-        onMovementEnded:{
-            flagXChanged = false
-            tiemr.restart()
-        }
-        onMovementStarted: {
-            flagXChanged = true
-        }
-        onContentXChanged: {
-            if(flagXChanged){
-                var maxX = Math.min(list_view.width*(control.position+1),list_view.count*list_view.width)
-                var minY = Math.max(0,(list_view.width*(control.position-1)))
-                if(contentX>=maxX){
-                    contentX = maxX
+                property int displayIndex: {
+                    if(index === 0)
+                        return content_model.count-3
+                    if(index === content_model.count-1)
+                        return 0
+                    return index-1
                 }
-                if(contentX<=minY){
-                    contentX = minY
+
+                Image {
+                    anchors.fill: parent
+                    source: model.url
+                    fillMode:Image.PreserveAspectCrop
+                }
+
+            }
+
+            preferredHighlightBegin: 0
+            preferredHighlightEnd: 0
+            highlightMoveDuration: 0
+
+            onMovementEnded:{
+                currentIndex = list_view.contentX/list_view.width
+                if(currentIndex === 0){
+                    currentIndex = list_view.count-2
+                }else if(currentIndex === list_view.count-1){
+                    currentIndex = 1
+                }
+                flagXChanged = false
+                timer_run.start()
+            }
+
+            onMovementStarted: {
+                flagXChanged = true
+                timer_run.stop()
+            }
+
+            onContentXChanged: {
+
+
+                if(flagXChanged){
+                    var maxX = Math.min(list_view.width*(currentIndex+1),list_view.count*list_view.width)
+                    var minY = Math.max(0,(list_view.width*(currentIndex-1)))
+                    if(contentX>=maxX){
+                        contentX = maxX
+                    }
+                    if(contentX<=minY){
+                        contentX = minY
+                    }
                 }
             }
-        }
-        orientation : ListView.Horizontal
-    }
-
-    onPositionChanged: {
-        if(control.position === 0){
-            position = list_view.count-2
-            list_view.positionViewAtIndex(list_view.count-2, ListView.Beginning)
-
-        }
-        if(control.position === list_view.count-1){
-            position = 1
-            list_view.positionViewAtIndex(1, ListView.Beginning)
-
+            orientation : ListView.Horizontal
         }
     }
 
+
     function setData(data){
         content_model.clear()
         content_model.append(data[data.length-1])
         content_model.append(data)
         content_model.append(data[0])
-        list_view.positionViewAtIndex(1, ListView.Beginning)
-        position = 1
+        list_view.currentIndex = 1
+        timer_run.restart()
     }
+
+    Row{
+        spacing: 10
+        anchors{
+            horizontalCenter: parent.horizontalCenter
+            bottom: parent.bottom
+            bottomMargin: 20
+        }
+        visible: showIndicator
+        Repeater{
+            model: list_view.count
+            Rectangle{
+                width: 8
+                height: 8
+                radius: 4
+                visible: {
+                    if(index===0 || index===list_view.count-1)
+                        return false
+                    return true
+                }
+                layer.samples: 4
+                layer.enabled: true
+                layer.smooth: true
+                border.width: 1
+                border.color: FluColors.Grey100
+                color:   list_view.currentIndex === index ?  FluTheme.primaryColor.dark : Qt.rgba(1,1,1,0.5)
+            }
+        }
+    }
+
+
+
+    Timer{
+        id:timer_anim
+        interval: 250
+        onTriggered: {
+            list_view.highlightMoveDuration = 0
+            if(list_view.currentIndex === list_view.count-1){
+                list_view.currentIndex = 1
+            }
+        }
+    }
+
+    Timer{
+        id:timer_run
+        interval: control.loopTime
+        repeat: true
+        onTriggered: {
+            list_view.highlightMoveDuration = 250
+            list_view.currentIndex = list_view.currentIndex+1
+            timer_anim.start()
+
+        }
+    }
+
 }
 
diff --git a/src/controls/FluRectangle.qml b/src/controls/FluRectangle.qml
index 2673d23..4ddf836 100644
--- a/src/controls/FluRectangle.qml
+++ b/src/controls/FluRectangle.qml
@@ -9,7 +9,7 @@ Item{
     property color borderColor:"red"
     property int borderWidth: 1
     property bool shadow: true
-    default property alias contentItem: container.children
+    default property alias contentItem: container.data
 
     Rectangle{
         id:container
diff --git a/src/controls/FluScrollablePage.qml b/src/controls/FluScrollablePage.qml
index 37ca60e..e0cd536 100644
--- a/src/controls/FluScrollablePage.qml
+++ b/src/controls/FluScrollablePage.qml
@@ -22,6 +22,7 @@ Item {
         width: parent.width
         contentWidth: parent.width
         contentHeight: container.height
+        boundsBehavior: Flickable.StopAtBounds
         ScrollBar.vertical: ScrollBar { }
         anchors{
             top: text_title.bottom
diff --git a/src/controls/FluShadow.qml b/src/controls/FluShadow.qml
index f1167c0..7e8863a 100644
--- a/src/controls/FluShadow.qml
+++ b/src/controls/FluShadow.qml
@@ -6,7 +6,7 @@ Item {
     anchors.margins: -4
     property color color: FluTheme.isDark ? "#FFFFFF" : "#000000"
 
-    property var radius: 4
+    property int radius: 4
 
     Rectangle{
         width: root.width