diff --git a/panels/notification/osd/audio/package/main.qml b/panels/notification/osd/audio/package/main.qml
index 0fd7ce767..dbf3b210a 100644
--- a/panels/notification/osd/audio/package/main.qml
+++ b/panels/notification/osd/audio/package/main.qml
@@ -2,18 +2,19 @@
 //
 // SPDX-License-Identifier: LGPL-3.0-or-later
 
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
 
 import org.deepin.ds 1.0
 import org.deepin.dtk 1.0 as D
 
 AppletItem {
     id: control
-    implicitWidth: childrenRect.width
-    implicitHeight: childrenRect.height
+    implicitWidth: 338
+    implicitHeight: 60
+
+    readonly property bool singleView: true
 
     function update(osdType)
     {
@@ -39,10 +40,14 @@ AppletItem {
     ]
 
     RowLayout {
-        anchors.leftMargin: 68
-        anchors.rightMargin: 26
+        spacing: 0
+        width: parent.width
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.topMargin: 2
 
         D.DciIcon {
+            width: 32
+            height: 32
             sourceSize {
                 width: 32
                 height: 32
@@ -50,48 +55,98 @@ AppletItem {
             Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
             Layout.leftMargin: 14
             name: Applet.iconName
+            theme: D.DTK.themeType
+            palette: D.DTK.makeIconPalette(control.palette)
         }
 
         ColumnLayout {
-            spacing: 5
-            Layout.alignment: Qt.AlignVCenter
-            Loader {
-                visible: active
-                active: Applet.increaseVolume
-                sourceComponent: scaleCom
-                x: progressBar.visualPosition * 1.5 * progressBar.width
+            spacing: 0
+            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+            Layout.leftMargin: 14
+            Layout.preferredWidth: 220
+            Layout.fillHeight: true
+
+            ScaleCom {
+                visible: Applet.increaseVolume
+                Layout.bottomMargin: 2
+                Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+                Layout.leftMargin: progressBar.width / 1.5
             }
 
             D.ProgressBar {
                 id: progressBar
-                Layout.preferredWidth: 200
-                Layout.alignment: Qt.AlignVCenter
+                Layout.preferredHeight: 4
+                Layout.preferredWidth: 220
+                Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                 from: 0
                 value: Applet.volumeValue / (Applet.increaseVolume ? 1.5 : 1.0)
                 to: 1
+
+                property D.Palette contentColor: D.Palette {
+                    normal: Qt.rgba(0, 0, 0, 1)
+                    normalDark: Qt.rgba(1, 1, 1, 1)
+                }
+                property D.Palette backgroundColor: D.Palette {
+                    normal: Qt.rgba(0, 0, 0, 0.1)
+                    normalDark: Qt.rgba(1, 1, 1, 0.1)
+                }
+                contentItem: Item {
+                    width: progressBar.visualPosition * parent.width
+                    height: parent.height
+                    Rectangle {
+                        anchors.fill: parent
+                        radius: 2
+                        color: progressBar.D.ColorSelector.contentColor
+                    }
+                    Behavior on width {
+                        NumberAnimation { duration: 150; easing.type: Easing.OutCubic }
+                    }
+                }
+                background: Rectangle {
+                    color: progressBar.D.ColorSelector.backgroundColor
+                    radius: 2
+                }
             }
 
-            Loader {
-                visible: active
-                active: Applet.increaseVolume
-                sourceComponent: scaleCom
-                x: progressBar.visualPosition * 1.5 * progressBar.width
+            ScaleCom {
+                visible: Applet.increaseVolume
+                Layout.topMargin: 2
+                Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+                Layout.leftMargin: progressBar.width / 1.5
             }
         }
 
+        Item {
+            Layout.fillWidth: true
+        }
+
         Text {
-            Layout.alignment: Qt.AlignVCenter
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
             font: D.DTK.fontManager.t4
-            text: Number(Applet.volumeValue * 100).toFixed(0) + "%"
+            text: Number(Applet.volumeValue * 100).toFixed(0)
+            color: palette.windowText
+        }
+        Text {
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+            Layout.topMargin: height / 2
+            Layout.rightMargin: 14
+            font: D.DTK.fontManager.t10
+            color: palette.windowText
+            text: "%"
         }
     }
 
-    Component {
-        id: scaleCom
-        Rectangle {
-            height: 6
-            width: 2
-            color: "gray"
+    component ScaleCom: Control {
+        id: scaleControl
+        property D.Palette scaleColor: D.Palette {
+            normal: Qt.rgba(0, 0, 0, 0.3)
+            normalDark: Qt.rgba(1, 1, 1, 0.3)
+        }
+
+        contentItem: Rectangle {
+            implicitHeight: 6
+            implicitWidth: 2
+            color: scaleControl.D.ColorSelector.scaleColor
         }
     }
 }
diff --git a/panels/notification/osd/brightness/package/main.qml b/panels/notification/osd/brightness/package/main.qml
index 69a27a7dc..444cb72e0 100644
--- a/panels/notification/osd/brightness/package/main.qml
+++ b/panels/notification/osd/brightness/package/main.qml
@@ -2,18 +2,19 @@
 //
 // SPDX-License-Identifier: LGPL-3.0-or-later
 
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
 
 import org.deepin.ds 1.0
 import org.deepin.dtk 1.0 as D
 
 AppletItem {
     id: control
-    implicitWidth: childrenRect.width
-    implicitHeight: childrenRect.height
+    implicitWidth: 338
+    implicitHeight: 60
+
+    property bool singleView: true
 
     function update(osdType)
     {
@@ -37,29 +38,76 @@ AppletItem {
     ]
 
     RowLayout {
-        anchors.leftMargin: 68
-        anchors.rightMargin: 26
+        spacing: 0
+        width: parent.width
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.topMargin: 2
 
         D.DciIcon {
             sourceSize {
                 width: 32
                 height: 32
             }
-            Layout.alignment: Qt.AlignLeft
+            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
             Layout.leftMargin: 14
             name: Applet.iconName
+            theme: D.DTK.themeType
+            palette: D.DTK.makeIconPalette(control.palette)
         }
 
         D.ProgressBar {
-            Layout.preferredWidth: 200
+            id: progressBar
+            Layout.preferredHeight: 4
+            Layout.preferredWidth: 220
+            Layout.leftMargin: 14
+            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
             from: 0
             value: Applet.brightness
             to: 1
+
+            property D.Palette contentColor: D.Palette {
+                normal: Qt.rgba(0, 0, 0, 1)
+                normalDark: Qt.rgba(1, 1, 1, 1)
+            }
+            property D.Palette backgroundColor: D.Palette {
+                normal: Qt.rgba(0, 0, 0, 0.1)
+                normalDark: Qt.rgba(1, 1, 1, 0.1)
+            }
+            contentItem: Item {
+                width: progressBar.visualPosition * parent.width
+                height: parent.height
+                Rectangle {
+                    anchors.fill: parent
+                    radius: 2
+                    color: progressBar.D.ColorSelector.contentColor
+                }
+                Behavior on width {
+                    NumberAnimation { duration: 150; easing.type: Easing.OutCubic }
+                }
+            }
+            background: Rectangle {
+                color: progressBar.D.ColorSelector.backgroundColor
+                radius: 2
+            }
+        }
+
+        Item {
+            Layout.fillWidth: true
         }
 
         Text {
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
             font: D.DTK.fontManager.t4
-            text: Number(Applet.brightness * 100).toFixed(0) + "%"
+            text: Number(Applet.brightness * 100).toFixed(0)
+            color: palette.windowText
+        }
+        Text {
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+            Layout.topMargin: height / 2
+            Layout.rightMargin: 14
+            font: D.DTK.fontManager.t10
+            color: palette.windowText
+            text: "%"
         }
     }
 }
diff --git a/panels/notification/osd/default/package/main.qml b/panels/notification/osd/default/package/main.qml
index 1be8d6eb9..d76f0dea4 100644
--- a/panels/notification/osd/default/package/main.qml
+++ b/panels/notification/osd/default/package/main.qml
@@ -2,10 +2,9 @@
 //
 // SPDX-License-Identifier: LGPL-3.0-or-later
 
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
 
 import org.deepin.ds 1.0
 import org.deepin.dtk 1.0 as D
@@ -13,7 +12,9 @@ import org.deepin.dtk 1.0 as D
 AppletItem {
     id: control
     implicitWidth: childrenRect.width
-    implicitHeight: childrenRect.height
+    implicitHeight: 60
+
+    readonly property bool singleView: true
 
     function update(osdType)
     {
@@ -74,27 +75,34 @@ AppletItem {
     }
 
     RowLayout {
-        anchors.leftMargin: 68
-        anchors.rightMargin: 26
+        spacing: 0
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.topMargin: 2
 
         D.DciIcon {
             sourceSize {
                 width: 32
                 height: 32
             }
-            Layout.alignment: Qt.AlignLeft
-            Layout.leftMargin: 14
+            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+            Layout.leftMargin: 20
             visible: control.iconName
             name: control.iconName
+            theme: D.DTK.themeType
+            palette: D.DTK.makeIconPalette(control.palette)
+        }
+        Item {
+            Layout.fillWidth: true
         }
 
         Text {
             Layout.fillWidth: true
             Layout.leftMargin: 20
-            Layout.rightMargin: 20
             font: D.DTK.fontManager.t4
-            Layout.alignment: Qt.AlignVCenter
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+            Layout.rightMargin: 20
             visible: control.text
+            color: palette.windowText
             text: control.text
         }
     }
diff --git a/panels/notification/osd/displaymode/package/main.qml b/panels/notification/osd/displaymode/package/main.qml
index eb83b1b1a..3196d375f 100644
--- a/panels/notification/osd/displaymode/package/main.qml
+++ b/panels/notification/osd/displaymode/package/main.qml
@@ -2,18 +2,19 @@
 //
 // SPDX-License-Identifier: LGPL-3.0-or-later
 
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
 
 import org.deepin.ds 1.0
 import org.deepin.dtk 1.0 as D
 
 AppletItem {
     id: control
-    implicitWidth: childrenRect.width
-    implicitHeight: childrenRect.height
+    implicitWidth: 370
+    implicitHeight: view.height + view.anchors.topMargin + view.anchors.bottomMargin
+
+    readonly property bool singleView: false
 
     function update(osdType)
     {
@@ -39,29 +40,109 @@ AppletItem {
 
     ListView {
         id: view
-        width: 300
+        width: 350
         height: contentHeight
+        anchors {
+            margins: 10
+            centerIn: parent
+        }
+
         model: Applet.planItems
+        spacing: 10
+
+        delegate: D.ItemDelegate {
+            id: itemView
+            height: 60
+            width: view.width
+            palette.windowText: undefined
+
+            property D.Palette backgroundColor: D.Palette {
+                normal: Qt.rgba(1, 1, 1, 0.4)
+                normalDark: Qt.rgba(0, 0, 0, 0.4)
+            }
+            property D.Palette checkedBackgroundColor: D.Palette {
+                normal: Qt.rgba(1, 1, 1, 0.6)
+                normalDark: Qt.rgba(0, 0, 0, 0.6)
+            }
+            property D.Palette dropShadowColor: D.Palette {
+                normal: Qt.rgba(0, 0, 0, 0.1)
+                normalDark: Qt.rgba(1, 1, 1, 0.1)
+            }
+            property D.Palette innerShadowColor:  D.Palette {
+                normal: Qt.rgba(1, 1, 1, 0.2)
+                normalDark: Qt.rgba(0, 0, 0, 0.2)
+            }
+
+            property bool isCurrent: Applet.currentPlanItem && Applet.currentPlanItem.key === model.key
 
-        delegate: RowLayout {
-            height: 40
+            contentItem: RowLayout {
+                spacing: 0
 
-            D.DciIcon {
-                sourceSize {
-                    width: 32
-                    height: 32
+                D.DciIcon {
+                    sourceSize {
+                        width: 32
+                        height: 32
+                    }
+                    Layout.alignment: Qt.AlignLeft
+                    Layout.leftMargin: 14
+                    name: model.iconName
+                    theme: D.DTK.themeType
+                    palette: D.DTK.makeIconPalette(control.palette)
+                }
+
+                Text {
+                    Layout.leftMargin: 20
+                    font: D.DTK.fontManager.t5
+                    Layout.alignment: Qt.AlignVCenter
+                    text: model.text
+                    color: Applet.currentPlanItem && Applet.currentPlanItem.key === model.key ? D.DTK.platformTheme.activeColor : palette.windowText
+                }
+
+                Item {
+                    Layout.fillWidth: true
+                }
+
+                D.DciIcon {
+                    sourceSize {
+                        width: 16
+                        height: 16
+                    }
+                    visible: Applet.currentPlanItem && Applet.currentPlanItem.key === model.key
+                    Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+                    Layout.rightMargin: 14
+                    name: "item_checked"
+                    theme: D.DTK.themeType
+                    palette: D.DTK.makeIconPalette(control.palette)
                 }
-                Layout.alignment: Qt.AlignLeft
-                Layout.leftMargin: 14
-                name: model.iconName
             }
 
-            Text {
-                Layout.fillWidth: true
-                font: D.DTK.fontManager.t4
-                Layout.alignment: Qt.AlignVCenter
-                text: model.text
-                color: Applet.currentPlanItem && Applet.currentPlanItem.key === model.key ? D.DTK.platformTheme.activeColor : "undefined"
+            background: Item {
+                Rectangle {
+                    id: backgroundRect
+                    anchors.fill: parent
+                    radius: 6
+                    color: itemView.isCurrent ? itemView.D.ColorSelector.checkedBackgroundColor
+                                              : itemView.D.ColorSelector.backgroundColor
+                }
+                D.BoxShadow {
+                    anchors.fill: parent
+                    shadowOffsetX: 0
+                    shadowOffsetY: 1
+                    shadowColor: itemView.D.ColorSelector.dropShadowColor
+                    shadowBlur: 1
+                    cornerRadius: backgroundRect.radius
+                    spread: 0
+                    hollow: true
+                }
+                D.BoxInsetShadow {
+                    anchors.fill: parent
+                    shadowOffsetX: 0
+                    shadowOffsetY: 1
+                    shadowBlur: 1
+                    spread: 0
+                    cornerRadius: backgroundRect.radius
+                    shadowColor: itemView.D.ColorSelector.innerShadowColor
+                }
             }
         }
     }
diff --git a/panels/notification/osd/kblayout/package/main.qml b/panels/notification/osd/kblayout/package/main.qml
index e1b4c609f..1f57e71e4 100644
--- a/panels/notification/osd/kblayout/package/main.qml
+++ b/panels/notification/osd/kblayout/package/main.qml
@@ -2,26 +2,25 @@
 //
 // SPDX-License-Identifier: LGPL-3.0-or-later
 
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
 
 import org.deepin.ds 1.0
 import org.deepin.dtk 1.0 as D
 
 AppletItem {
     id: control
-    implicitWidth: childrenRect.width
-    implicitHeight: childrenRect.height
+    implicitWidth: view.width + view.anchors.leftMargin + view.anchors.rightMargin
+    implicitHeight: view.height + view.anchors.topMargin + view.anchors.bottomMargin
+
+    readonly property bool singleView: false
 
     function update(osdType)
     {
         if (match(osdType)) {
             Applet.sync()
-            if (control.visible) {
-                Applet.next()
-            }
+            Applet.next()
             return true
         }
         return false
@@ -33,19 +32,117 @@ AppletItem {
 
     ListView {
         id: view
-        width: 300
+        anchors {
+            margins: 10
+            centerIn: parent
+        }
         height: contentHeight
         model: Applet.layouts
+        spacing: 6
+        function maxItemWidth()
+        {
+            var maxWidth = 120
+            for (var i = 0; i < view.count; ++i) {
+                var item = view.itemAtIndex(i)
+                if (item && item.implicitWidth > maxWidth)
+                    maxWidth = item.implicitWidth
+            }
+            return maxWidth
+        }
+        implicitWidth: maxItemWidth()
+
+        delegate: D.ItemDelegate {
+            id: itemView
+            width: view.width
+            height: 48
+            palette.windowText: undefined
+            spacing: 0
+            padding: 0
+
+            property D.Palette backgroundColor: D.Palette {
+                normal: Qt.rgba(1, 1, 1, 0.4)
+                normalDark: Qt.rgba(0, 0, 0, 0.4)
+            }
+            property D.Palette checkedBackgroundColor: D.Palette {
+                normal: Qt.rgba(1, 1, 1, 0.6)
+                normalDark: Qt.rgba(0, 0, 0, 0.6)
+            }
+            property D.Palette dropShadowColor: D.Palette {
+                normal: Qt.rgba(0, 0, 0, 0.1)
+                normalDark: Qt.rgba(1, 1, 1, 0.1)
+            }
+            property D.Palette innerShadowColor:  D.Palette {
+                normal: Qt.rgba(1, 1, 1, 0.2)
+                normalDark: Qt.rgba(0, 0, 0, 0.2)
+            }
+
+            property bool isCurrent: Applet.currentLayout === model.key
 
-        delegate: RowLayout {
-            height: 40
+            contentItem: RowLayout {
+                spacing: 0
 
-            Text {
-                Layout.fillWidth: true
-                font: D.DTK.fontManager.t4
-                Layout.alignment: Qt.AlignVCenter
-                text: model.text
-                color: Applet.currentLayout === model.key ? D.DTK.platformTheme.activeColor : "undefined"
+                Text {
+                    font: D.DTK.fontManager.t4
+                    Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+                    Layout.leftMargin: 15
+                    horizontalAlignment: Text.AlignVCenter
+                    text: model.text
+                    color: palette.windowText
+                }
+
+                Item {
+                    Layout.fillWidth: true
+                }
+
+                Item {
+                    Layout.preferredWidth: 16
+                    Layout.preferredHeight: 16
+                    Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+                    Layout.rightMargin: 10
+                    D.DciIcon {
+                        sourceSize {
+                            width: 16
+                            height: 16
+                        }
+                        visible: itemView.isCurrent
+                        name: "item_checked"
+                        theme: D.DTK.themeType
+                        palette: D.DTK.makeIconPalette(control.palette)
+                    }
+                }
+            }
+            background: Item {
+                Rectangle {
+                    id: backgroundRect
+                    anchors.fill: parent
+                    radius: 6
+                    color: itemView.isCurrent ? itemView.D.ColorSelector.checkedBackgroundColor
+                                                                  : itemView.D.ColorSelector.backgroundColor
+                }
+                D.BoxShadow {
+                    anchors.fill: parent
+                    shadowOffsetX: 0
+                    shadowOffsetY: 1
+                    shadowColor: itemView.D.ColorSelector.dropShadowColor
+                    shadowBlur: 1
+                    cornerRadius: backgroundRect.radius
+                    spread: 0
+                    hollow: true
+                }
+                D.BoxInsetShadow {
+                    anchors.fill: parent
+                    shadowOffsetX: 0
+                    shadowOffsetY: 1
+                    shadowBlur: 1
+                    spread: 0
+                    cornerRadius: backgroundRect.radius
+                    shadowColor: itemView.D.ColorSelector.innerShadowColor
+                }
+            }
+            Component.onCompleted: {
+                Qt.callLater(function () {
+                    view.implicitWidth = view.maxItemWidth()
+                })
             }
         }
     }
diff --git a/panels/notification/osd/package/main.qml b/panels/notification/osd/package/main.qml
index 25b6e1497..221536cb8 100644
--- a/panels/notification/osd/package/main.qml
+++ b/panels/notification/osd/package/main.qml
@@ -2,9 +2,9 @@
 //
 // SPDX-License-Identifier: LGPL-3.0-or-later
 
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Window 2.15
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Window
 
 import org.deepin.ds 1.0
 import org.deepin.dtk 1.0 as D
@@ -12,13 +12,15 @@ import org.deepin.dtk 1.0 as D
 Window {
     id: root
     visible: Applet.visible
-    D.DWindow.enabled: true
-    D.DWindow.windowRadius: 18
+    D.DWindow.windowRadius: isSingleView ? 30 : D.DTK.platformTheme.windowRadius
     D.DWindow.enableBlurWindow: true
+    D.DWindow.enabled: true
     color: "transparent"
-    DLayerShellWindow.bottomMargin: 140
+    DLayerShellWindow.bottomMargin: 180
     DLayerShellWindow.layer: DLayerShellWindow.LayerOverlay
     DLayerShellWindow.anchors: DLayerShellWindow.AnchorBottom
+    palette: D.DTK.palette
+
     screen: Qt.application.screens[0]
     // TODO `Qt.application.screens[0]` maybe invalid, why screen is changed.
     onScreenChanged: {
@@ -29,6 +31,7 @@ Window {
     height: osdView ? osdView.height : 100
 
     property Item osdView
+    property bool isSingleView: false
 
     Repeater {
         model: Applet.appletItems
@@ -36,13 +39,13 @@ Window {
             active: modelData.update(Applet.osdType)
             onActiveChanged: {
                 if (active) {
+                    root.isSingleView = modelData.singleView
                     root.osdView = this
                 }
             }
 
             sourceComponent: Control {
                 contentItem: model.data
-                padding: 10
                 background: D.FloatingPanel {
                     implicitWidth:  100
                     implicitHeight: 40
diff --git a/panels/notification/osd/test.sh b/panels/notification/osd/test.sh
index 53b912109..d50e598d3 100755
--- a/panels/notification/osd/test.sh
+++ b/panels/notification/osd/test.sh
@@ -8,15 +8,16 @@ brightness=("BrightnessUp" "BrightnessDown" "BrightnessUpAsh" "BrightnessDownAsh
 default=("WLANOn" "WLANOff" "CapsLockOn" "CapsLockOff" "NumLockOn" "NumLockOff" "TouchpadOn" "TouchpadOff" "TouchpadToggle" "FnToggle" "AirplaneModeOn" "AirplaneModeOff" "AudioMicMuteOn" "AudioMicMuteOff" "balance" "powersave" "performance" "SwitchWM3D" "SwitchWM2D" "SwitchWMError")
 display=("SwitchMonitors")
 kblayout=("SwitchLayout")
+windoweffect=("SwitchWM")
 
 #e.g: dbus-send --session --type=method_call --print-reply --dest=org.deepin.dde.Shell /org/deepin/osdService org.deepin.osdService.showText string:AudioUp
 
-for type in  ${audio[@]} ${kblayout[@]} ${display[@]} ${brightness[@]} ${default[@]} ;
+for type in  ${audio[@]} ${kblayout[@]} ${display[@]} ${brightness[@]} ${default[@]} ${windoweffect[@]} ;
 do
 
-echo dbus-send --session --type=method_call --print-reply --dest=org.deepin.dde.Shell /org/deepin/osdService org.deepin.osdService.showText string:$type
+echo dbus-send --session --type=method_call --print-reply --dest=org.deepin.dde.Osd1 / org.deepin.dde.Osd1.ShowOSD string:$type
 
-dbus-send --session --type=method_call --print-reply --dest=org.deepin.dde.Shell /org/deepin/osdService org.deepin.osdService.showText string:$type
+dbus-send --session --type=method_call --print-reply --dest=org.deepin.dde.Osd1 / org.deepin.dde.Osd1.ShowOSD string:$type
 sleep 1
 
 done
diff --git a/panels/notification/osd/windoweffect/package/icons/osd_balance_effect.dci b/panels/notification/osd/windoweffect/package/icons/osd_balance_effect.dci
deleted file mode 100644
index b0a9d82f5..000000000
Binary files a/panels/notification/osd/windoweffect/package/icons/osd_balance_effect.dci and /dev/null differ
diff --git a/panels/notification/osd/windoweffect/package/icons/osd_best_visuals.dci b/panels/notification/osd/windoweffect/package/icons/osd_best_visuals.dci
deleted file mode 100644
index 49891d4f2..000000000
Binary files a/panels/notification/osd/windoweffect/package/icons/osd_best_visuals.dci and /dev/null differ
diff --git a/panels/notification/osd/windoweffect/package/icons/osd_optimal_performance.dci b/panels/notification/osd/windoweffect/package/icons/osd_optimal_performance.dci
deleted file mode 100644
index dfcdef72e..000000000
Binary files a/panels/notification/osd/windoweffect/package/icons/osd_optimal_performance.dci and /dev/null differ
diff --git a/panels/notification/osd/windoweffect/package/icons/osd_screen_balance.dci b/panels/notification/osd/windoweffect/package/icons/osd_screen_balance.dci
new file mode 100644
index 000000000..2adcae3a4
Binary files /dev/null and b/panels/notification/osd/windoweffect/package/icons/osd_screen_balance.dci differ
diff --git a/panels/notification/osd/windoweffect/package/icons/osd_screen_bestvisual.dci b/panels/notification/osd/windoweffect/package/icons/osd_screen_bestvisual.dci
new file mode 100644
index 000000000..7ef24dc4a
Binary files /dev/null and b/panels/notification/osd/windoweffect/package/icons/osd_screen_bestvisual.dci differ
diff --git a/panels/notification/osd/windoweffect/package/icons/osd_screen_highperformance.dci b/panels/notification/osd/windoweffect/package/icons/osd_screen_highperformance.dci
new file mode 100644
index 000000000..94b835491
Binary files /dev/null and b/panels/notification/osd/windoweffect/package/icons/osd_screen_highperformance.dci differ
diff --git a/panels/notification/osd/windoweffect/package/main.qml b/panels/notification/osd/windoweffect/package/main.qml
index 3d50d71f4..42c565de9 100644
--- a/panels/notification/osd/windoweffect/package/main.qml
+++ b/panels/notification/osd/windoweffect/package/main.qml
@@ -2,18 +2,19 @@
 //
 // SPDX-License-Identifier: LGPL-3.0-or-later
 
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtQuick.Window 2.15
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
 
 import org.deepin.ds 1.0
 import org.deepin.dtk 1.0 as D
 
 AppletItem {
     id: control
-    implicitWidth: childrenRect.width
-    implicitHeight: childrenRect.height
+    implicitWidth: 430
+    implicitHeight: listview.height + listview.anchors.topMargin + listview.anchors.bottomMargin
+
+    readonly property bool singleView: false
     property int selectIndex: indexByValue(Applet.effectType)
     property int checkedIndex: indexByValue(Applet.effectType)
 
@@ -42,17 +43,15 @@ AppletItem {
                 return i
             }
         }
-        return -1
+        return 0
     }
 
     function update(osdType)
     {
         if (match(osdType)) {
-            if (selectIndex === effectModel.count - 1) {
-                selectIndex = 0
-            } else {
-                selectIndex++
-            }
+            Qt.callLater(function() {
+                control.selectIndex = (control.selectIndex + 1) % effectModel.count
+            })
             return true
         }
         return false
@@ -65,24 +64,68 @@ AppletItem {
 
     ListView {
         id: listview
-        model: effectModel
+        width: 410
         height: contentHeight
-        width: 500
-        spacing: 5
+        anchors {
+            margins: 10
+            centerIn: parent
+        }
+        model: effectModel
+        spacing: 10
+
         delegate: D.ItemDelegate {
+            id: itemView
+
+            padding: 0
+            spacing: 0
             checkable: true
-            checked: control.selectIndex === index
-            icon.name: model.icon
-            icon.width: 64
-            icon.height: 64
             width: listview.width
-            rightPadding: 10
-            contentFlow: true
-            content: RowLayout {
-                spacing: 10
+
+            required property int index
+            required property string iconName
+            required property string title
+            required property string description
+
+            property D.Palette backgroundColor: D.Palette {
+                normal: Qt.rgba(1, 1, 1, 0.4)
+                normalDark: Qt.rgba(0, 0, 0, 0.4)
+            }
+            property D.Palette checkedBackgroundColor: D.Palette {
+                normal: Qt.rgba(1, 1, 1, 0.6)
+                normalDark: Qt.rgba(0, 0, 0, 0.6)
+            }
+            property D.Palette dropShadowColor: D.Palette {
+                normal: Qt.rgba(0, 0, 0, 0.1)
+                normalDark: Qt.rgba(1, 1, 1, 0.1)
+            }
+            property D.Palette innerShadowColor:  D.Palette {
+                normal: Qt.rgba(1, 1, 1, 0.2)
+                normalDark: Qt.rgba(0, 0, 0, 0.2)
+            }
+
+            contentItem: RowLayout {
+                spacing: 0
+
+                D.DciIcon {
+                    sourceSize {
+                        width: 32
+                        height: 32
+                    }
+                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+                    Layout.leftMargin: 18
+                    name: itemView.iconName
+                    theme: D.DTK.themeType
+                    palette: D.DTK.makeIconPalette(control.palette)
+                }
+
                 ColumnLayout {
+                    Layout.leftMargin: 18
+                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+                    Layout.topMargin: 18
+                    Layout.bottomMargin: 18
+                    spacing: 6
                     D.Label {
-                        text: model.title
+                        text: itemView.title
                         font {
                             family: D.DTK.fontManager.t5.family
                             pointSize: D.DTK.fontManager.t5.pointSize
@@ -93,17 +136,59 @@ AppletItem {
                     }
 
                     D.Label {
-                        text: model.description
-                        font: D.DTK.fontManager.t8
+                        text: itemView.description
+                        font: D.DTK.fontManager.t6
                         Layout.fillWidth: true
                         horizontalAlignment: Text.AlignLeft
+                        Layout.maximumWidth: 298
                         wrapMode: Text.WordWrap
                     }
                 }
+
+                Item {
+                    Layout.fillWidth: true
+                }
+
                 D.DciIcon {
-                    visible: control.checkedIndex === index
-                    sourceSize: Qt.size(24, 24)
+                    sourceSize {
+                        width: 16
+                        height: 16
+                    }
+                    visible: control.checkedIndex === itemView.index
+                    Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+                    Layout.rightMargin: 10
                     name: "item_checked"
+                    theme: D.DTK.themeType
+                    palette: D.DTK.makeIconPalette(control.palette)
+                }
+            }
+
+            background: Item {
+                Rectangle {
+                    id: backgroundRect
+                    anchors.fill: parent
+                    radius: 6
+                    color: control.selectIndex === itemView.index ? itemView.D.ColorSelector.checkedBackgroundColor
+                                                                  : itemView.D.ColorSelector.backgroundColor
+                }
+                D.BoxShadow {
+                    anchors.fill: parent
+                    shadowOffsetX: 0
+                    shadowOffsetY: 1
+                    shadowColor: itemView.D.ColorSelector.dropShadowColor
+                    shadowBlur: 1
+                    cornerRadius: backgroundRect.radius
+                    spread: 0
+                    hollow: true
+                }
+                D.BoxInsetShadow {
+                    anchors.fill: parent
+                    shadowOffsetX: 0
+                    shadowOffsetY: 1
+                    shadowBlur: 1
+                    spread: 0
+                    cornerRadius: backgroundRect.radius
+                    shadowColor: itemView.D.ColorSelector.innerShadowColor
                 }
             }
         }
@@ -113,19 +198,19 @@ AppletItem {
         id: effectModel
         ListElement {
             value: main.WindowEffectType.Normal
-            icon: "osd_optimal_performance"
+            iconName: "osd_screen_highperformance"
             title: qsTr("Optimal performance")
             description: qsTr("Optimal performance: Close all interface and window effects to ensure efficient system operation")
         }
         ListElement {
             value: main.WindowEffectType.Better
-            icon: "osd_balance_effect"
+            iconName: "osd_screen_balance"
             title: qsTr("Balance")
             description: qsTr("Balance: Limit some window effects to ensure excellent visual experience while maintaining smooth system operation")
         }
         ListElement {
             value: main.WindowEffectType.Best
-            icon: "osd_best_visuals"
+            iconName: "osd_screen_bestvisual"
             title: qsTr("Best Visuals")
             description: qsTr("Best Visual: Enable all interface and window effects to experience the best visual effects")
         }