diff --git a/panels/notification/bubble/package/Bubble.qml b/panels/notification/bubble/package/Bubble.qml
index c727d0c9a..6db090156 100644
--- a/panels/notification/bubble/package/Bubble.qml
+++ b/panels/notification/bubble/package/Bubble.qml
@@ -8,8 +8,9 @@ import QtQuick.Controls 2.15
 import org.deepin.ds 1.0
 import org.deepin.dtk 1.0 as D
 
-D.Control {
+Control {
     id: control
+    height: loader.height
     property var bubble
     onHoveredChanged: function () {
         if (control.hovered) {
@@ -19,7 +20,9 @@ D.Control {
         }
     }
 
-    contentItem:  Loader {
+    Loader {
+        id: loader
+        width: control.width
         sourceComponent: bubble.level <= 1 ? normalCom : overlayCom
     }
     Component {
@@ -34,8 +37,4 @@ D.Control {
             bubble: control.bubble
         }
     }
-
-    z: bubble.level <= 1 ? 0 : 1 - bubble.level
-
-    // background: D.FloatingPanel { }
 }
diff --git a/panels/notification/bubble/package/NormalBubble.qml b/panels/notification/bubble/package/NormalBubble.qml
index 5ee6c71a9..a8d25a683 100644
--- a/panels/notification/bubble/package/NormalBubble.qml
+++ b/panels/notification/bubble/package/NormalBubble.qml
@@ -9,40 +9,26 @@ import org.deepin.ds 1.0
 import org.deepin.ds.notification 1.0
 import org.deepin.dtk 1.0 as D
 
-D.Control {
+NotifyItemContent {
     id: control
     property var bubble
 
-    contentItem: NotifyItemContent {
-        width: 360
-        appName: bubble.appName
-        iconName: bubble.iconName
-        date: bubble.timeTip
-        actions: bubble.actions
-        title: bubble.summary
-        content: bubble.body
-        strongInteractive: bubble.urgency === 2
-        contentIcon: bubble.bodyImagePath
-        onRemove: function () {
-            console.log("remove notify", bubble.appName)
-            Applet.close(bubble.index)
-        }
-        onActionInvoked: function (actionId) {
-            console.log("action notify", bubble.appName, actionId)
-            Applet.invokeAction(bubble.index, actionId)
-        }
+    width: 360
+    appName: bubble.appName
+    iconName: bubble.iconName
+    date: bubble.timeTip
+    actions: bubble.actions
+    title: bubble.summary
+    content: bubble.body
+    strongInteractive: bubble.urgency === 2
+    contentIcon: bubble.bodyImagePath
+    onRemove: function () {
+        console.log("remove notify", bubble.appName)
+        Applet.close(bubble.index)
     }
-
-    z: bubble.level <= 1 ? 0 : 1 - bubble.level
-
-    background: Rectangle {
-        width: 360
-        radius: 12
-        opacity: {
-            if (bubble.level === 1)
-                return 0.8
-            return 1
-        }
+    onActionInvoked: function (actionId) {
+        console.log("action notify", bubble.appName, actionId)
+        Applet.invokeAction(bubble.index, actionId)
     }
 
     MouseArea {
diff --git a/panels/notification/bubble/package/OverlayBubble.qml b/panels/notification/bubble/package/OverlayBubble.qml
index 513307c2c..500066be5 100644
--- a/panels/notification/bubble/package/OverlayBubble.qml
+++ b/panels/notification/bubble/package/OverlayBubble.qml
@@ -7,50 +7,35 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 
 import org.deepin.ds 1.0
+import org.deepin.ds.notification 1.0
 import org.deepin.dtk 1.0 as D
 
-D.Control {
+Item {
     id: control
     property var bubble
     readonly property int radius: 12
 
-    contentItem: ColumnLayout {
-        spacing: 0
-        Rectangle {
-            visible: bubble.level > 2
-            Layout.bottomMargin: -34
-            Layout.alignment: Qt.AlignHCenter
-            Layout.preferredWidth: bubbleContent.width - 2 * control.radius
-            Layout.preferredHeight: 40
-            radius: control.radius
-            opacity: 0.8
-            z: control.z + control.z + 1
-        }
-
-        Rectangle {
-            Layout.bottomMargin: -34
-            Layout.alignment: Qt.AlignHCenter
-            Layout.preferredWidth: bubbleContent.width - control.radius
-            Layout.preferredHeight: 40
-            radius: control.radius
-            opacity: 0.8
-            z: control.z + control.z + 1
-        }
-
-        NormalBubble {
-            id: bubbleContent
-            Layout.fillWidth: true
-            Layout.maximumWidth: 360
-            bubble: control.bubble
+    height: bubbleContent.height + indicator.height
+    OverlapIndicator {
+        id: indicator
+        width: parent.width
+        count: bubble.level - 1
+        revert: true
+        anchors {
+            top: parent.top
+            left: parent.left
+            leftMargin: radius
+            right: parent.right
+            rightMargin: radius
         }
     }
 
-    z: bubble.level <= 1 ? 0 : 1 - bubble.level
-
-    background: Rectangle {
-        implicitWidth: 200
-        radius: control.radius
-        opacity: 1
-        color: "transparent"
+    NormalBubble {
+        id: bubbleContent
+        width: parent.width
+        bubble: control.bubble
+        anchors {
+            top: indicator.bottom
+        }
     }
 }
diff --git a/panels/notification/bubble/package/main.qml b/panels/notification/bubble/package/main.qml
index 895d35b00..c62a4020f 100644
--- a/panels/notification/bubble/package/main.qml
+++ b/panels/notification/bubble/package/main.qml
@@ -40,10 +40,10 @@ Window {
     DLayerShellWindow.bottomMargin: windowMargin(2)
     palette: DTK.palette
     ColorSelector.family: Palette.CrystalColor
-    DWindow.enabled: true
     DWindow.windowEffect: PlatformHandle.EffectNoBorder | PlatformHandle.EffectNoShadow
     color: "transparent"
     DWindow.windowRadius: 0
+    DWindow.enabled: false
     // DWindow.enableBlurWindow: true
     screen: Qt.application.screens[0]
     // TODO `Qt.application.screens[0]` maybe invalid, why screen is changed.
@@ -58,6 +58,7 @@ Window {
         anchors {
             centerIn: parent
             margins: 10
+            topMargin: 15
         }
 
         spacing: 10
diff --git a/panels/notification/center/Main.qml b/panels/notification/center/Main.qml
deleted file mode 100644
index 7a4ae4f4a..000000000
--- a/panels/notification/center/Main.qml
+++ /dev/null
@@ -1,41 +0,0 @@
-// SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd.
-//
-// SPDX-License-Identifier: GPL-3.0-or-later
-
-import QtQuick
-import QtQuick.Controls
-import org.deepin.dtk 1.0
-// import org.deepin.ds 1.0
-import org.deepin.ds.notificationcenter
-
-Window {
-    id: root
-
-    visible: true
-
-    width: 380
-    height: 800
-    // height: Screen.desktopAvailableHeight
-    // DLayerShellWindow.anchors: DLayerShellWindow.AnchorRight | DLayerShellWindow.AnchorTop | DLayerShellWindow.AnchorBottom
-
-    ColorSelector.family: Palette.CrystalColor
-    DWindow.enabled: true
-    DWindow.windowEffect: PlatformHandle.EffectNoBorder | PlatformHandle.EffectNoShadow
-    // DWindow.enableSystemResize: false
-    // DWindow.enableSystemMove: false
-    // color: "transparent"
-    DWindow.enableBlurWindow: true
-
-    NotifyCenter {
-        id: notifyCenter
-        anchors {
-            top: parent.top
-            left: parent.left
-            leftMargin: 10
-        }
-
-        width: 360
-        height: root.height
-        maxViewHeight: root.height
-    }
-}
diff --git a/panels/notification/center/OverlapNotify.qml b/panels/notification/center/OverlapNotify.qml
index cff305e06..25ec2bd0f 100644
--- a/panels/notification/center/OverlapNotify.qml
+++ b/panels/notification/center/OverlapNotify.qml
@@ -82,28 +82,4 @@ NotifyItem {
     }
     Keys.onEnterPressed: root.expand()
     Keys.onReturnPressed: root.expand()
-
-    component OverlapIndicator: Control {
-        id: overlap
-
-        required property var count
-
-        contentItem: ColumnLayout {
-            spacing: 0
-            Repeater {
-                model: overlap.count
-
-                delegate: NotifyItemBackground {
-                    Layout.topMargin: -overlapItemRadius
-                    Layout.alignment: Qt.AlignHCenter
-                    Layout.preferredWidth: overlap.width - (index) * overlapItemRadius *2
-                    Layout.preferredHeight: overlapItemRadius * 2
-                    radius: overlapItemRadius
-                    z: -index
-                }
-            }
-        }
-
-        background: BoundingRectangle {}
-    }
 }
diff --git a/panels/notification/center/package/main.qml b/panels/notification/center/package/main.qml
index a73344981..d23f440d4 100644
--- a/panels/notification/center/package/main.qml
+++ b/panels/notification/center/package/main.qml
@@ -42,13 +42,14 @@ Window {
     DLayerShellWindow.bottomMargin: windowMargin(2) + 10
     palette: DTK.palette
     ColorSelector.family: Palette.CrystalColor
-    DWindow.enabled: true
     DWindow.windowEffect: PlatformHandle.EffectNoBorder | PlatformHandle.EffectNoShadow
-    DWindow.windowRadius: DTK.platformTheme.windowRadius
+    // DWindow.windowRadius: DTK.platformTheme.windowRadius
     // DWindow.enableSystemResize: false
     // DWindow.enableSystemMove: false
+    DWindow.windowRadius: 0
+    DWindow.enabled: false
     color: "transparent"
-    DWindow.enableBlurWindow: true
+    // DWindow.enableBlurWindow: true
     screen: Qt.application.screens[0]
     // TODO `Qt.application.screens[0]` maybe invalid, why screen is changed.
     onScreenChanged: {
diff --git a/panels/notification/plugin/CMakeLists.txt b/panels/notification/plugin/CMakeLists.txt
index 0946b9b0d..469cede7f 100644
--- a/panels/notification/plugin/CMakeLists.txt
+++ b/panels/notification/plugin/CMakeLists.txt
@@ -17,6 +17,7 @@ qt_add_qml_module(notificationplugin
         NotifyItemContent.qml
         NotifyAction.qml
         SettingActionButton.qml
+        OverlapIndicator.qml
     OUTPUT_DIRECTORY
         ${PROJECT_BINARY_DIR}/plugins/org/deepin/ds/notification/
 )
diff --git a/panels/notification/plugin/NotifyAction.qml b/panels/notification/plugin/NotifyAction.qml
index bc6b1d895..35840f60e 100644
--- a/panels/notification/plugin/NotifyAction.qml
+++ b/panels/notification/plugin/NotifyAction.qml
@@ -75,6 +75,16 @@ Control {
             actionInvoked(actionData.id)
         }
 
+        Loader {
+            anchors.fill: parent
+            active: actionButton.activeFocus
+
+            sourceComponent: FocusBoxBorder {
+                radius: 6
+                color: palette.highlight
+            }
+        }
+
         background: NotifyItemBackground {
             implicitHeight: 30
             implicitWidth: 50
diff --git a/panels/notification/plugin/NotifyItemBackground.qml b/panels/notification/plugin/NotifyItemBackground.qml
index 808a4770e..548e07b0a 100644
--- a/panels/notification/plugin/NotifyItemBackground.qml
+++ b/panels/notification/plugin/NotifyItemBackground.qml
@@ -6,19 +6,22 @@ import QtQuick
 import org.deepin.dtk 1.0
 import org.deepin.ds.notification
 
-FloatingPanel {
-    id: root
-    radius: 12
-    backgroundColor: Palette {
+Control {
+    id: control
+
+    padding: radius / 2
+
+    property int radius: 12
+    property Palette backgroundColor: Palette {
         normal {
             common: ("transparent")
-            crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 0.7)
+            crystal: Qt.rgba(240 / 255.0, 240 / 255.0, 240 / 255.0, 1)
         }
         normalDark {
-            crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 0.7)
+            crystal: Qt.rgba(24 / 255.0, 24 / 255.0, 24 / 255.0, 1)
         }
     }
-    insideBorderColor: Palette {
+    property Palette insideBorderColor: Palette {
         normal {
             common: ("transparent")
             crystal: Qt.rgba(255 / 255.0, 255 / 255.0, 255 / 255.0, 0.2)
@@ -27,7 +30,7 @@ FloatingPanel {
             crystal: Qt.rgba(255 / 255.0, 255 / 255.0, 255 / 255.0, 0.1)
         }
     }
-    outsideBorderColor: Palette {
+    property Palette outsideBorderColor: Palette {
         normal {
             common: ("transparent")
             crystal: Qt.rgba(0, 0, 0, 0.1)
@@ -36,7 +39,7 @@ FloatingPanel {
             crystal: Qt.rgba(0, 0, 0, 0.6)
         }
     }
-    dropShadowColor: Palette {
+    property Palette dropShadowColor: Palette {
         normal {
             common: ("transparent")
             crystal: Qt.rgba(0, 0, 0, 0.2)
@@ -45,4 +48,49 @@ FloatingPanel {
             crystal: Qt.rgba(0, 0, 0, 0.4)
         }
     }
+
+    background: Item {
+        id: blur
+        implicitWidth: 180
+        implicitHeight: 40
+
+        Loader {
+            anchors.fill: backgroundRect
+            active: control.dropShadowColor
+            sourceComponent: BoxShadow {
+                shadowOffsetX: 0
+                shadowOffsetY: 6
+                shadowColor: control.ColorSelector.dropShadowColor
+                shadowBlur: 20
+                cornerRadius: backgroundRect.radius
+                spread: 0
+                hollow: true
+            }
+        }
+
+        Rectangle {
+            id: backgroundRect
+            anchors.fill: parent
+            radius: control.radius
+            color: control.ColorSelector.backgroundColor
+        }
+
+        Loader {
+            anchors.fill: backgroundRect
+            active: control.insideBorderColor && control.ColorSelector.controlTheme === ApplicationHelper.DarkType
+            sourceComponent: InsideBoxBorder {
+                radius: backgroundRect.radius
+                color: control.ColorSelector.insideBorderColor
+            }
+        }
+
+        Loader {
+            anchors.fill: backgroundRect
+            active: control.outsideBorderColor
+            sourceComponent: OutsideBoxBorder {
+                radius: backgroundRect.radius
+                color: control.ColorSelector.outsideBorderColor
+            }
+        }
+    }
 }
diff --git a/panels/notification/plugin/NotifyItemContent.qml b/panels/notification/plugin/NotifyItemContent.qml
index 9c36032fa..7668fb3bb 100644
--- a/panels/notification/plugin/NotifyItemContent.qml
+++ b/panels/notification/plugin/NotifyItemContent.qml
@@ -12,7 +12,7 @@ import org.deepin.ds.notification
 NotifyItem {
     id: root
 
-    implicitHeight:Math.max(DStyle.Style.control.implicitHeight(root),
+    height:Math.max(DStyle.Style.control.implicitHeight(root),
                              actionPlaceHolder.active ? root.miniContentHeight + actionPlaceHolder.height : 0)
     property bool closeVisible: root.hovered || root.activeFocus
     property int miniContentHeight: NotifyStyle.contentItem.miniHeight
@@ -88,7 +88,8 @@ NotifyItem {
             }
         }
     }
-    Loader {
+
+    Control {
         id: actionPlaceHolder
         anchors {
             bottom: parent.bottom
@@ -96,13 +97,13 @@ NotifyItem {
             right: parent.right
             rightMargin: 8
         }
-
-        active: !root.strongInteractive && root.actions.length > 0
-        visible: active
-        sourceComponent: NotifyAction {
-            actions: root.actions
-            onActionInvoked: function (actionId) {
-                root.actionInvoked(actionId)
+        contentItem: Loader {
+            active: !root.strongInteractive && root.actions.length > 0 && root.hovered
+            sourceComponent: NotifyAction {
+                actions: root.actions
+                onActionInvoked: function (actionId) {
+                    root.actionInvoked(actionId)
+                }
             }
         }
     }
@@ -242,7 +243,5 @@ NotifyItem {
         }
     }
 
-    background: Rectangle {
-        color: Qt.rgba(0, 0, 0, 0.3)
-    }
+    background: NotifyItemBackground { }
 }
diff --git a/panels/notification/plugin/OverlapIndicator.qml b/panels/notification/plugin/OverlapIndicator.qml
new file mode 100644
index 000000000..988b13536
--- /dev/null
+++ b/panels/notification/plugin/OverlapIndicator.qml
@@ -0,0 +1,47 @@
+// SPDX-FileCopyrightText: 2024 UnionTech Software Technology Co., Ltd.
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import org.deepin.dtk 1.0
+import org.deepin.ds.notification
+
+Item {
+    id: root
+    required property var count
+    property int radius: 12
+    property int overlapHeight: 8
+    property bool revert: false
+
+    implicitHeight: layout.height
+    implicitWidth: 360
+    ColumnLayout {
+        id: layout
+        spacing: 0
+        Repeater {
+            model: root.count
+            delegate: Item {
+                id: item
+                readonly property int realIndex: revert ? count - index - 1 : index
+                Layout.preferredHeight: overlapHeight + 2
+                Layout.preferredWidth: root.width - (realIndex) * radius *2
+                Layout.alignment: Qt.AlignHCenter
+                z: -realIndex
+
+                NotifyItemBackground {
+                    id: background
+                    radius: root.radius
+                    width: parent.width
+                    height: radius * 2
+                    anchors {
+                        top: revert ? undefined : parent.top
+                        topMargin: revert ? undefined : -(height - overlapHeight)
+                        bottomMargin: revert ? -(height - overlapHeight) : undefined
+                    }
+                }
+            }
+        }
+    }
+}